/* ═══════════════════════════════════════════════════════════════════════════════
   RARE Property Management — Form Styles
   Brand: Navy #1a3a5c · Gold #c9a84c · White #ffffff
   Design: Luxury real estate, refined, two-column grid, card sections
   ═══════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&family=Poppins:wght@300;400;500;600&display=swap');

:root {
    --rpm-navy:        #1a3a5c;
    --rpm-navy-dark:   #0f2540;
    --rpm-navy-light:  #2a5080;
    --rpm-gold:        #c9a84c;
    --rpm-gold-light:  #e8c96e;
    --rpm-gold-pale:   #f7f0dc;
    --rpm-white:       #ffffff;
    --rpm-off-white:   #f1f0f7;
    --rpm-border:      #ddd8cc;
    --rpm-border-dark: #c5bfb2;
    --rpm-text:        #1a1a1a;
    --rpm-text-muted:  #6b6560;
    --rpm-error:       #c0392b;
    --rpm-success:     #1a6b3c;
    --rpm-radius:      4px;
    --rpm-radius-lg:   10px;
    --rpm-shadow:      0 2px 16px rgba(26, 58, 92, 0.10);
    --rpm-shadow-lg:   0 8px 40px rgba(26, 58, 92, 0.16);
    --rpm-transition:  all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Outer wrapper ───────────────────────────────────────────────────────────── */
.rpfm-form-wrapper {
    font-family: 'Poppins', sans-serif;
    color: var(--rpm-text);
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px 60px;
}

/* ── Form hero header ────────────────────────────────────────────────────────── */
.rpfm-form-hero {
    background: linear-gradient(135deg, var(--rpm-navy-dark) 0%, var(--rpm-navy) 60%, var(--rpm-navy-light) 100%);
    border-radius: var(--rpm-radius-lg);
    padding: 48px 52px 44px;
    margin-bottom: 36px;
    position: relative;
    overflow: hidden;
}

.rpfm-form-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 90% 50%, rgba(201,168,76,0.12) 0%, transparent 70%),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 40px,
            rgba(255,255,255,0.015) 40px,
            rgba(255,255,255,0.015) 41px
        );
    pointer-events: none;
}

.rpfm-form-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--rpm-gold), var(--rpm-gold-light), var(--rpm-gold), transparent);
}

.rpfm-form-hero-eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--rpm-gold);
    margin: 0 0 12px;
}

.rpfm-form-hero h1 {
    font-family: 'Poppins', serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 600;
    color: var(--rpm-white);
    margin: 0 0 14px;
    line-height: 1.15;
    letter-spacing: -0.3px;
}

.rpfm-form-hero p {
    font-size: 15px;
    color: rgba(255,255,255,0.72);
    margin: 0;
    max-width: 540px;
    line-height: 1.6;
    font-weight: 300;
}

.rpfm-form-hero-meta {
    display: flex;
    gap: 24px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.rpfm-form-hero-meta span {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    display: flex;
    align-items: center;
    gap: 6px;
}

.rpfm-form-hero-meta span::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--rpm-gold);
}

/* ── Progress indicator ──────────────────────────────────────────────────────── */
.rpfm-progress-bar {
    background: var(--rpm-border);
    border-radius: 99px;
    height: 4px;
    margin-bottom: 32px;
    overflow: hidden;
    position: relative;
}

.rpfm-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--rpm-gold), var(--rpm-gold-light));
    border-radius: 99px;
    width: 0%;
    transition: width 0.4s ease;
}

/* ── Section cards ───────────────────────────────────────────────────────────── */
.wpcf7 .rpfm-section,
.rpfm-section {
    background: var(--rpm-white);
    border: 1px solid var(--rpm-border);
    border-radius: var(--rpm-radius-lg);
    padding: 32px 36px 28px;
    margin-bottom: 20px;
    box-shadow: var(--rpm-shadow);
    position: relative;
    transition: var(--rpm-transition);
}

.wpcf7 .rpfm-section:hover,
.rpfm-section:hover {
    box-shadow: var(--rpm-shadow-lg);
    border-color: var(--rpm-border-dark);
}

.wpcf7 .rpfm-section-title,
.rpfm-section-title {
    font-family: 'Poppins', serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--rpm-navy) !important;
    margin: 0 0 24px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--rpm-border) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    letter-spacing: -0.2px !important;
}

.rpfm-section-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 20px;
    background: linear-gradient(180deg, var(--rpm-gold), var(--rpm-gold-light));
    border-radius: 99px;
    flex-shrink: 0;
}

/* ── Field grid: 2 columns by default ───────────────────────────────────────── */
.wpcf7 .rpfm-section,
.rpfm-section {
    display: block;
}

/* Inner grid container applied to fields within a section */
.wpcf7 .rpfm-section .rpfm-fields-grid,
.rpfm-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
}

/* Individual field blocks */
.wpcf7 .rpfm-field,
.rpfm-field {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Full width field types */
.wpcf7 .rpfm-field-type-textarea,
.rpfm-field-type-textarea,
.wpcf7 .rpfm-field-full,
.rpfm-field-full {
    grid-column: 1 / -1;
}

/* ── Labels ──────────────────────────────────────────────────────────────────── */
.wpcf7 .rpfm-field label,
.rpfm-field label {
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: var(--rpm-text-muted) !important;
    margin-bottom: 7px !important;
    display: block !important;
    line-height: 1 !important;
}

.wpcf7 .rpfm-field label span[aria-hidden="true"],
.rpfm-field label span[aria-hidden="true"] {
    color: var(--rpm-gold) !important;
    margin-left: 2px !important;
}

/* ── Inputs, selects, textareas ──────────────────────────────────────────────── */
.wpcf7 .rpfm-field input[type="text"],
.wpcf7 .rpfm-field input[type="email"],
.wpcf7 .rpfm-field input[type="tel"],
.wpcf7 .rpfm-field input[type="number"],
.wpcf7 .rpfm-field input[type="date"],
.wpcf7 .rpfm-field select,
.wpcf7 .rpfm-field textarea,
.rpfm-field input[type="text"],
.rpfm-field input[type="email"],
.rpfm-field input[type="tel"],
.rpfm-field input[type="number"],
.rpfm-field input[type="date"],
.rpfm-field select,
.rpfm-field textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--rpm-text) !important;
    background: var(--rpm-off-white) !important;
    border: 1.5px solid var(--rpm-border) !important;
    border-radius: var(--rpm-radius) !important;
    padding: 11px 14px !important;
    outline: none !important;
    transition: var(--rpm-transition) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) inset !important;
    margin: 0 !important;
}

.wpcf7 .rpfm-field input:focus,
.wpcf7 .rpfm-field select:focus,
.wpcf7 .rpfm-field textarea:focus,
.rpfm-field input:focus,
.rpfm-field select:focus,
.rpfm-field textarea:focus {
    border-color: var(--rpm-navy) !important;
    background: var(--rpm-white) !important;
    box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.08), 0 1px 3px rgba(0,0,0,0.04) inset !important;
}

.wpcf7 .rpfm-field input:hover,
.wpcf7 .rpfm-field select:hover,
.wpcf7 .rpfm-field textarea:hover {
    border-color: var(--rpm-border-dark) !important;
}

/* Select arrow */
.wpcf7 .rpfm-field select,
.rpfm-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a3a5c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 38px !important;
    cursor: pointer !important;
}

.wpcf7 .rpfm-field textarea,
.rpfm-field textarea {
    min-height: 100px !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}

/* ── Radio & Checkbox ────────────────────────────────────────────────────────── */
.wpcf7 .rpfm-field-type-radio label,
.wpcf7 .rpfm-field-type-checkbox label,
.rpfm-field-type-radio label,
.rpfm-field-type-checkbox label {
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: var(--rpm-text-muted) !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* The options wrap */
.wpcf7 .rpfm-field-type-radio .wpcf7-form-control,
.wpcf7 .rpfm-field-type-checkbox .wpcf7-form-control {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* Each option label */
.wpcf7 .rpfm-field-type-radio .wpcf7-form-control label,
.wpcf7 .rpfm-field-type-checkbox .wpcf7-form-control label {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--rpm-text) !important;
    background: var(--rpm-off-white) !important;
    border: 1.5px solid var(--rpm-border) !important;
    border-radius: 99px !important;
    padding: 7px 14px !important;
    cursor: pointer !important;
    transition: var(--rpm-transition) !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.wpcf7 .rpfm-field-type-radio .wpcf7-form-control label:hover,
.wpcf7 .rpfm-field-type-checkbox .wpcf7-form-control label:hover {
    border-color: var(--rpm-navy) !important;
    background: rgba(26, 58, 92, 0.05) !important;
}

/* Custom radio/checkbox appearance */
.wpcf7 .rpfm-field-type-radio input[type="radio"],
.wpcf7 .rpfm-field-type-checkbox input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    accent-color: var(--rpm-navy) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* ── Submit button ───────────────────────────────────────────────────────────── */
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    background: #ff5857!important;
    border: none !important;
    border-radius: var(--rpm-radius) !important;
    padding: 16px 52px !important;
    cursor: pointer !important;
    transition: var(--rpm-transition) !important;
    display: inline-block !important;
    margin-top: 10px !important;
    box-shadow: 0 4px 20px rgba(201, 168, 76, 0.35) !important;
    position: relative !important;
    overflow: hidden !important;
    width: auto !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.wpcf7 input[type="submit"]::after,
.wpcf7 .wpcf7-submit::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(201, 168, 76, 0.45) !important;
}

.wpcf7 input[type="submit"]:hover::after {
    opacity: 1 !important;
}

.wpcf7 input[type="submit"]:active {
    transform: translateY(0) !important;
}

/* ── Submit row ──────────────────────────────────────────────────────────────── */
.wpcf7 .rpfm-submit-row {
    background: var(--rpm-off-white) !important;
    border: 1px solid var(--rpm-border) !important;
    border-radius: var(--rpm-radius-lg) !important;
    padding: 28px 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.rpfm-submit-note {
    font-size: 12px !important;
    color: var(--rpm-text-muted) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.rpfm-submit-note::before {
    content: '🔒';
    font-size: 13px;
}

/* ── CF7 response messages ───────────────────────────────────────────────────── */
.wpcf7-response-output {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    border-radius: var(--rpm-radius) !important;
    padding: 14px 18px !important;
    margin: 16px 0 0 !important;
    border-width: 1.5px !important;
    border-style: solid !important;
}

.wpcf7-mail-sent-ok {
    background: #edf7f1 !important;
    border-color: #6fcf97 !important;
    color: var(--rpm-success) !important;
}

.wpcf7-mail-sent-ng,
.wpcf7-spam-blocked,
.wpcf7-validation-errors,
.wpcf7-acceptance-missing {
    background: #fdf0ef !important;
    border-color: #eb5757 !important;
    color: var(--rpm-error) !important;
}

/* Inline validation errors */
.wpcf7-not-valid-tip {
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    color: var(--rpm-error) !important;
    margin-top: 4px !important;
    display: block !important;
}

.wpcf7-not-valid input,
.wpcf7-not-valid select,
.wpcf7-not-valid textarea {
    border-color: var(--rpm-error) !important;
    background: #fff8f8 !important;
}

/* ── Floating label animation ────────────────────────────────────────────────── */
.rpfm-field {
    position: relative;
}

/* ── Divider between sections ────────────────────────────────────────────────── */
.rpfm-section + .rpfm-section {
    margin-top: 0;
}

/* ── Required note ───────────────────────────────────────────────────────────── */
.rpfm-required-note {
    font-size: 12px;
    color: var(--rpm-text-muted);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.rpfm-required-note strong {
    color: var(--rpm-gold);
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
    .rpfm-form-hero {
        padding: 32px 24px 28px;
    }

    .rpfm-form-hero h1 {
        font-size: 26px;
    }

    .wpcf7 .rpfm-section,
    .rpfm-section {
        padding: 24px 20px 20px;
    }

    .rpfm-fields-grid {
        grid-template-columns: 1fr !important;
    }

    .wpcf7 .rpfm-field-type-textarea,
    .rpfm-field-type-textarea {
        grid-column: 1 !important;
    }

    .wpcf7 .rpfm-submit-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ══════════════════════════════════════════════════════════════════
   STAR RATING COMPONENT — Pure HTML radio + flex row
   ══════════════════════════════════════════════════════════════════ */

.rpfm-field-type-rating {
    background: var(--rpm-off-white);
    border: 1.5px solid var(--rpm-border);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: var(--rpm-transition);
}

.rpfm-field-type-rating:hover {
    border-color: var(--rpm-border-dark);
    box-shadow: 0 2px 8px rgba(26, 58, 92, 0.07);
}

.rpfm-rating-label {
    font-family: 'Poppins', sans-serif;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: var(--rpm-text-muted) !important;
    display: block !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.rpfm-rating-label span {
    color: var(--rpm-gold);
}

/* Stars row — RTL flex so CSS sibling selector works for hover chain */
.rpfm-stars-row {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

/* Hidden radio inputs */
.rpfm-stars-row input[type="radio"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    opacity: 0 !important;
}

/* Individual star labels */
.rpfm-star {
    font-family: 'Poppins', sans-serif !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #ddd8cc !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 2px 1px !important;
    display: inline-block !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    transition: color 0.12s ease, transform 0.1s ease !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* CSS-only hover chain (RTL siblings) */
.rpfm-stars-row label.rpfm-star:hover,
.rpfm-stars-row label.rpfm-star:hover ~ label.rpfm-star {
    color: var(--rpm-gold) !important;
}

/* CSS-only checked state */
.rpfm-stars-row input[type="radio"]:checked ~ label.rpfm-star {
    color: var(--rpm-gold) !important;
}

/* Rating value text */
.rpfm-rating-value {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: var(--rpm-text-muted);
    min-height: 16px;
    transition: color 0.2s ease;
    display: block;
}

/* Overall rating — bigger stars, gold border */
.rpfm-overall-rating {
    background: linear-gradient(135deg, rgba(26,58,92,0.03), rgba(201,168,76,0.07)) !important;
    border-color: var(--rpm-gold) !important;
    border-radius: 10px !important;
    padding: 20px 20px !important;
    grid-column: 1 / -1 !important;
}

.rpfm-overall-rating .rpfm-star {
    font-size: 42px !important;
}

.rpfm-overall-rating .rpfm-rating-label {
    font-size: 12px !important;
    color: var(--rpm-navy) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
}

/* Satisfaction toggle */
.rpfm-satisfaction {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.rpfm-satisfaction input[type="radio"] {
    display: none !important;
}

.rpfm-satisfaction label {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 10px 24px !important;
    border-radius: 99px !important;
    border: 1.5px solid var(--rpm-border) !important;
    background: var(--rpm-off-white) !important;
    cursor: pointer !important;
    transition: var(--rpm-transition) !important;
    color: var(--rpm-text-muted) !important;
    margin: 0 !important;
}

.rpfm-satisfaction label:hover {
    border-color: var(--rpm-navy) !important;
    color: var(--rpm-navy) !important;
}

.rpfm-satisfaction input[type="radio"]:checked + label {
    background: var(--rpm-navy) !important;
    border-color: var(--rpm-navy) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(26, 58, 92, 0.25) !important;
}

/* Feedback intro box */
.rpfm-feedback-intro {
    background: var(--rpm-gold-pale);
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--rpm-navy);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.rpfm-feedback-intro::before {
    content: '★';
    font-size: 18px;
    color: var(--rpm-gold);
    flex-shrink: 0;
    line-height: 1.3;
}
.rpfm-stars.js-ready label {
    transition: color 0.12s ease, transform 0.1s ease !important;
}

/* ── Hide the rating capture text input (appears as "n" in old CF7 hidden tag) ── */
.rpfm-hidden-rating,
input.rpfm-hidden-rating,
.wpcf7 input.rpfm-hidden-rating {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Fix any leftover [hidden] field "n" rendering from old CF7 form body ── */
.wpcf7 input[name="overall-rating"][type="text"],
.wpcf7 input[name="rating-punctuality"][type="text"],
.wpcf7 input[name="rating-cleanliness"][type="text"],
.wpcf7 input[name="rating-expertise"][type="text"],
.wpcf7 input[name="rating-communication"][type="text"],
.wpcf7 input[name="rating-performance"][type="text"] {
    display: none !important;
}