/* ============================================================================
   property-agency-alignment.css   (v1)
   ----------------------------------------------------------------------------
   PURPOSE
     Aligns the Property Agency journey to the Private Agent (PRIMARY blueprint)
     and Private Seller (secondary reference) design system without touching
     the existing property-agency.css or any partials.

   LOAD ORDER — append AFTER property-agency.css in your layout bundle.

   CHANGES MADE:
     1. TYPOGRAPHY  — Inter → Outfit (matches PA/PS platform font)
     2. BREADCRUMB  — Named-pill rail → dot-based ps-dot style rail
     3. CARDS       — Reduced padding, tighter density, PA panel style
     4. FORMS       — Compact PA-style inputs (height 34px, icon-prefix)
     5. RIGHT PANEL — pa-intel-card visual system + header pattern
     6. SPACING      — Reduced scene-head / scene-body / section gaps
     7. LAYOUT       — Scene-head collapses to PA sticky-header style
     8. NAV BUTTONS — Exact size/shape match to Private Agent ps-btn-*

   SCOPE
     All rules gated under #propertyAgencyModule or .pag-* so they can
     never affect Private Seller or Private Agent.
   ============================================================================ */


/* ─────────────────────────────────────────────────────────────────────────────
   1. TYPOGRAPHY ALIGNMENT
   Font: Inter → Outfit  (site.css, sell-journey.css and private-agent.css all
   use Outfit as the platform font; PAG was the only outlier on Inter)
   ───────────────────────────────────────────────────────────────────────────── */

#propertyAgencyModule {
    --pag-font: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
                sans-serif;

    /* Font-size ladder aligned to Private Agent:
       PA uses 12px body / 10.5px labels / 10px helpers / 13px buttons
       Translated to rem from the module's 16px root */
    --pag-fs-body:    0.8125rem;   /* 13px — PA body text */
    --pag-fs-label:   0.6875rem;   /* 11px — PA .pa-label */
    --pag-fs-helper:  0.625rem;    /* 10px — PA .pa-helper */
    --pag-fs-btn:     0.875rem;    /* 14px — PA nav button */
    --pag-fs-eyebrow: 0.625rem;    /* 10px — PA scene-label uppercase */
    --pag-fs-sub:     0.8125rem;   /* 13px — PA ps-subtitle */
    --pag-fs-title:   clamp(1.1rem, 1.85vw, 1.45rem); /* PA ps-question scale */

    /* Tighter layout tokens */
    --pag-bc-h:    56px;    /* was 68px — PA sticky-header compact */
    --pag-nav-h:   64px;    /* was 76px — PA nav bar height */
    --pag-right-w: 340px;   /* keep; PA right rail is 36% ≈ same */
    --pag-radius-sm: 8px;
    --pag-radius:    12px;  /* was 14px — PA panel border-radius: 12px */
    --pag-radius-lg: 16px;  /* was 20px — PA module shell: 14px, close enough */

    font-family: var(--pag-font);
    font-size:   15px;      /* down from 16px — tighter base */
}

/* Scene title: match PA ps-question font */
#propertyAgencyModule .pag-scene-title {
    font-family:    'Outfit', sans-serif;
    font-weight:    700;            /* PA uses 700 not 800 */
    font-size:      var(--pag-fs-title);
    line-height:    1.2;
    letter-spacing: -0.018em;
    white-space:    normal;        /* allow wrap like PA ps-question */
    overflow:       visible;
    text-overflow:  unset;
}

/* Sub-paragraph */
#propertyAgencyModule .pag-scene-sub {
    font-family: 'Outfit', sans-serif;
    font-size:   var(--pag-fs-sub);
    line-height: 1.45;
    font-weight: 400;
    color:       var(--pag-text-2);
}

/* Eyebrow / scene-label */
#propertyAgencyModule .pag-eyebrow {
    font-family:    'Outfit', sans-serif;
    font-size:      var(--pag-fs-eyebrow);
    font-weight:    700;
    letter-spacing: 0.12em;
}

/* Labels */
#propertyAgencyModule .pag-label {
    font-family: 'Outfit', sans-serif;
    font-size:   var(--pag-fs-label);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pag-text-2);
}

/* Helper notes */
#propertyAgencyModule .pag-field-help,
#propertyAgencyModule .pag-helper-note {
    font-family: 'Outfit', sans-serif;
    font-size:   var(--pag-fs-helper);
}

/* Section labels */
#propertyAgencyModule .pag-section-label {
    font-family: 'Outfit', sans-serif;
    font-size:   var(--pag-fs-label);
    letter-spacing: 0.04em;
}

/* All buttons */
#propertyAgencyModule .pag-btn,
#propertyAgencyModule button,
#propertyAgencyModule input,
#propertyAgencyModule select,
#propertyAgencyModule textarea {
    font-family: 'Outfit', sans-serif;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. BREADCRUMB — DOT RAIL (Private Agent / Private Seller style)
   ─────────────────────────────────────────────────────────────────────────────
   Replaces the named step-pill rail with the compact dot system used in PA.
   The existing .pag-rail-step elements remain; we just hide their labels and
   shrink the num circle to a dot, matching ps-dot behaviour.
   ───────────────────────────────────────────────────────────────────────────── */

/* Breadcrumb bar — tighter, matches PA sticky-header height */
#propertyAgencyModule .pag-breadcrumb {
    height:        var(--pag-bc-h);
    border-bottom: 1px solid rgba(14, 14, 17, .07);
    box-shadow:    0 2px 8px -4px rgba(14, 14, 17, .06);
    background:    #ffffff;
}

#propertyAgencyModule .pag-breadcrumb-inner {
    padding: 0 22px;
    gap:     12px;
}

/* Brand label — PA breadcrumb-back style */
#propertyAgencyModule .pag-breadcrumb-brand {
    font-size:   0.75rem;
    font-weight: 700;
    color:       var(--pag-charcoal);
    gap:         6px;
}

/* ── Rail → dot strip ───────────────────────────────────────────────── */
#propertyAgencyModule .pag-rail {
    gap:             5px;
    align-items:     center;
    justify-content: flex-start;
}

/* Each step → compact dot (hide label, keep just the num as a dot) */
#propertyAgencyModule .pag-rail-step {
    padding:      0;
    gap:          0;
    border-radius: 50%;
    width:         8px;
    height:        8px;
    overflow:      hidden;
    font-size:     0;           /* hide label text */
    background:    rgba(14, 14, 17, .14);
    transition:    background 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
    position:      relative;
}

/* Hide label text but keep DOM for accessibility */
#propertyAgencyModule .pag-rail-step .pag-rail-label {
    position: absolute;
    width:    1px;
    height:   1px;
    overflow: hidden;
    clip:     rect(0,0,0,0);
}

/* The num circle IS the dot — zero it out and let the step bg show */
#propertyAgencyModule .pag-rail-num {
    display:    none;           /* hidden — dot is the step element itself */
}

/* Current dot — cyan, slightly larger with glow ring */
#propertyAgencyModule .pag-rail-step.is-current {
    width:      10px;
    height:     10px;
    background: var(--pag-cyan) !important;
    color:      transparent;
    box-shadow: 0 0 0 3px rgba(86, 196, 248, 0.25);
}

/* Every 3rd current step uses orange accent (matching PAG original intent) */
#propertyAgencyModule .pag-rail-step:nth-child(3n).is-current {
    background: var(--pag-orange) !important;
    box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.22);
}

/* Done dot — charcoal filled */
#propertyAgencyModule .pag-rail-step.is-done {
    background: var(--pag-charcoal);
    cursor:     pointer;
}

    #propertyAgencyModule .pag-rail-step.is-done:hover {
        background: var(--pag-cyan-deep);
        transform:  none;           /* no lift on dots */
    }

/* Step counter pill — keep but style like PA */
#propertyAgencyModule .pag-step-counter {
    font-size:      0.6875rem;
    font-weight:    700;
    color:          var(--pag-text-3);
    letter-spacing: 0.03em;
    white-space:    nowrap;
}

/* Change-role pill — compact, PA pa-change-role style */
#propertyAgencyModule .pag-change-role {
    padding:       5px 10px;
    font-size:     0.6875rem;
    font-weight:   600;
    border-radius: 999px;
    background:    rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    border:        1px solid rgba(14, 14, 17, .10);
    color:         var(--pag-text-2);
    gap:           4px;
}

    #propertyAgencyModule .pag-change-role:hover {
        border-color: var(--pag-cyan);
        color:        var(--pag-cyan-deep);
        transform:    none;     /* PA change-role doesn't lift */
        box-shadow:   none;
    }


/* ─────────────────────────────────────────────────────────────────────────────
   3. SCENE HEAD — Compact sticky header (PA pa-sticky-header style)
   ───────────────────────────────────────────────────────────────────────────── */

#propertyAgencyModule .pag-scene-head {
    padding:       14px 22px 12px;   /* PA: 14px 22px 12px */
    gap:           4px;
    border-bottom: 1px solid rgba(14, 14, 17, .07);
    box-shadow:    0 4px 12px -8px rgba(14, 14, 17, .08);
    background:    #ffffff;
}

/* Eyebrow row — remove the ruled line visual noise */
#propertyAgencyModule .pag-eyebrow-rule {
    display: none;
}

#propertyAgencyModule .pag-eyebrow {
    margin-bottom: 2px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. SCENE BODY — Tighter padding, smaller gap between sections
   ───────────────────────────────────────────────────────────────────────────── */

#propertyAgencyModule .pag-scene-body {
    padding: 14px 22px calc(var(--pag-nav-h) + 14px);  /* PA: 14px 18px-22px */
    gap:     10px;   /* was 16px */
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. CARDS & SECTIONS — PA panel style (compact, clean, no left accent bars)
   ─────────────────────────────────────────────────────────────────────────────
   PA .pa-panel:
     border-radius: 12px;
     padding: 12px 14px;
     box-shadow: 0 1px 2px rgba(14,14,17,0.04), 0 1px 3px rgba(14,14,17,0.06);
     border: 1px solid rgba(14,14,17,0.08);
   We keep the accent-bar concept (it's part of PAG identity) but tighten
   all padding and reduce visual weight.
   ───────────────────────────────────────────────────────────────────────────── */

#propertyAgencyModule .pag-section {
    padding:       11px 14px;   /* was 18px 20px */
    border-radius: 12px;
    border:        1px solid rgba(14, 14, 17, .08);
    box-shadow:    0 1px 2px rgba(14, 14, 17, .04), 0 2px 6px rgba(14, 14, 17, .05);
    background:    #ffffff;
}

#propertyAgencyModule .pag-section-label {
    margin-bottom: 9px;    /* was 14px */
    font-size:     var(--pag-fs-label);
    font-weight:   700;
    color:         var(--pag-text-2);
}

/* Plan cards — tighter, match PA hub-card density */
#propertyAgencyModule .pag-plan-card {
    padding:       11px 12px;  /* was 16px 14px */
    border-radius: 10px;
    gap:           4px;
    border-width:  1px;
    font-size:     var(--pag-fs-body);
}

#propertyAgencyModule .pag-plan-name {
    font-size:   0.875rem;  /* was 1rem */
    font-weight: 700;
}

#propertyAgencyModule .pag-plan-meta {
    font-size: 0.6875rem;
    color:     var(--pag-text-3);
}

#propertyAgencyModule .pag-plan-fee-amt {
    font-size:   1.05rem;   /* was 1.25rem */
    font-weight: 700;
}

#propertyAgencyModule .pag-plan-bullets {
    font-size:  0.6875rem;
    gap:        2px;
    margin-top: 4px;
}

/* Role cards — PA .pa-mandate-card style */
#propertyAgencyModule .pag-role-card {
    padding:       10px 12px;  /* was 14px */
    border-radius: 10px;
    border-width:  1px;
}

#propertyAgencyModule .pag-role-name {
    font-size:   0.8125rem;
    font-weight: 700;
}

#propertyAgencyModule .pag-role-desc {
    font-size: 0.6875rem;
}

/* Review cards — compact */
#propertyAgencyModule .pag-review-card {
    padding:   11px 14px;   /* was 16px 18px */
    border-radius: 10px;
}

#propertyAgencyModule .pag-review-head {
    margin-bottom: 7px;    /* was 10px */
}

#propertyAgencyModule .pag-review-title {
    font-size: 0.8125rem;
    gap:       6px;
}

#propertyAgencyModule .pag-review-list {
    font-size: 0.75rem;    /* was .86rem */
    gap:       4px 10px;
}

/* Intel cards */
#propertyAgencyModule .pag-intel-card {
    padding:   14px 16px;  /* was 18px */
    border-radius: 10px;
}

#propertyAgencyModule .pag-intel-card-head {
    margin-bottom: 8px;    /* was 12px */
    gap:           8px;
}

#propertyAgencyModule .pag-intel-icon {
    width:  32px;
    height: 32px;
    border-radius: 8px;
    font-size: 0.9rem;
}

#propertyAgencyModule .pag-intel-bullets {
    font-size: 0.75rem;
    gap:       4px;
    margin-bottom: 10px;
}

/* Side panel cards (right rail) */
#propertyAgencyModule .pag-side-card {
    padding:   11px 14px;   /* was 16px 18px */
    border-radius: 10px;
}

#propertyAgencyModule .pag-side-card-header {
    font-size:     0.6875rem;  /* was .8rem */
    margin-bottom: 7px;
    gap:           6px;
    letter-spacing: 0.1em;
}

#propertyAgencyModule .pag-side-card-body {
    font-size:   0.75rem;    /* was .9rem */
    line-height: 1.45;
}

/* Callout */
#propertyAgencyModule .pag-callout {
    padding:   10px 13px;  /* was 14px 16px */
    border-radius: 8px;
    gap:       8px;
}

    #propertyAgencyModule .pag-callout p {
        font-size: 0.75rem;
    }

/* Payment summary */
#propertyAgencyModule .pag-payment-summary {
    padding: 13px 16px;   /* was 18px 20px */
    border-radius: 10px;
}

#propertyAgencyModule .pag-payment-row {
    font-size: 0.75rem;
    padding:   5px 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. FORMS — Private Agent pa-input style
   ─────────────────────────────────────────────────────────────────────────────
   PA inputs:
     height: ~34px (7px vertical padding × 2 + 20px line-height)
     font-size: 12px (.75rem)
     left-icon padding: 30px
     border-radius: 8px
   ───────────────────────────────────────────────────────────────────────────── */

#propertyAgencyModule .pag-form {
    gap: 8px;    /* was 16px */
}

#propertyAgencyModule .pag-field-grid {
    gap: 8px 10px;   /* was 16px */
}

#propertyAgencyModule .pag-field {
    gap: 3px;    /* was 6px */
}

/* Input field — PA pa-input sizing */
#propertyAgencyModule .pag-input {
    padding:       7px 10px 7px 30px;  /* was 11px 14px 11px 38px */
    font-size:     0.75rem;             /* was .9rem → 12px */
    border-radius: 8px;
    border-width:  1px;
    border-color:  rgba(14, 14, 17, .18);
    line-height:   1.4;
    height:        34px;
    background:    #ffffff;
}

    #propertyAgencyModule .pag-input:hover {
        border-color: rgba(14, 14, 17, .28);
    }

    #propertyAgencyModule .pag-input:focus {
        border-color: var(--pag-cyan);
        box-shadow:   0 0 0 2px rgba(86, 196, 248, .16);
    }

/* Input icon — PA pa-input-icon positioning */
#propertyAgencyModule .pag-input-icon,
#propertyAgencyModule .pag-input-icon.pag-icon {
    left:      10px;
    font-size: 0.75rem;
    width:     13px;
    height:    13px;
    color:     var(--pag-text-3);
}

    /* Brighten on focus — PA behaviour */
    #propertyAgencyModule .pag-input:focus ~ .pag-input-icon.pag-icon,
    #propertyAgencyModule .pag-input-wrap:focus-within .pag-input-icon.pag-icon {
        color: var(--pag-cyan-deep);
    }

/* Select */
#propertyAgencyModule .pag-input.pag-select {
    background-position: right 10px center;
    padding-right: 28px;
}

/* Input without icon (no wrapper class) — tighter */
#propertyAgencyModule .pag-input-wrap {
    position: relative;
    display:  flex;
    align-items: center;
}

/* Textarea */
#propertyAgencyModule textarea.pag-input {
    height:     auto;
    min-height: 70px;
    padding:    8px 10px;
    resize:     vertical;
    line-height: 1.5;
}

/* Field help */
#propertyAgencyModule .pag-field-help {
    font-size: 0.625rem;   /* 10px */
    color:     var(--pag-text-3);
    margin:    3px 0 0;
}

/* Toggle rows */
#propertyAgencyModule .pag-toggle {
    padding:       9px 12px;   /* was 12px 14px */
    border-radius: 8px;
}

#propertyAgencyModule .pag-toggle-head {
    font-size: var(--pag-fs-body);
    gap:       8px;
}

#propertyAgencyModule .pag-toggle-body {
    margin-top: 8px;
}

/* Credits stepper */
#propertyAgencyModule .pag-credits-stepper {
    padding: 3px 5px;
    gap:     6px;
}

#propertyAgencyModule .pag-credits-input {
    width:     54px;
    font-size: 0.875rem;
}

#propertyAgencyModule .pag-step-btn {
    width:  28px;
    height: 28px;
    font-size: 0.875rem;
}

/* Segment buttons */
#propertyAgencyModule .pag-segment-btn {
    padding:   5px 12px;
    font-size: 0.75rem;
}

/* Area chips */
#propertyAgencyModule .pag-area-chip {
    padding:   4px 10px;    /* was 6px 12px */
    font-size: 0.6875rem;
    gap:       5px;
}

#propertyAgencyModule .pag-area-chips {
    gap:        5px;
    margin-top: 8px;
}

/* Places suggestions */
#propertyAgencyModule .pag-places-suggestions {
    border-radius: 8px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. RIGHT PANEL — PA pa-intel-card / pa-intel-header design system
   ─────────────────────────────────────────────────────────────────────────────
   PA right rail:
     background: linear-gradient(180deg, #F6FCFF 0%, #FFFFFF 100%)
     padding: 22px 24px
     gap: 14px
     Each card: pa-intel-card style (white, 12px radius, soft shadow, 12px padding)
     Card header: 9.5px UPPERCASE, brand-cyan icon, letter-spacing: .12em
   ───────────────────────────────────────────────────────────────────────────── */

#propertyAgencyModule .pag-scene-aside {
    padding:    16px 18px calc(var(--pag-nav-h) + 16px);  /* was 24px 22px */
    gap:        10px;    /* was 16px */
    background: linear-gradient(180deg, #F6FCFF 0%, #ECFAFF 60%, #FFFFFF 100%);
    border-left: 1px solid rgba(14, 14, 17, .07);
}

/* Override the ::before wash — use inline background instead */
#propertyAgencyModule::before {
    background:  linear-gradient(180deg, #F6FCFF 0%, #ECFAFF 100%);
    border-left: 1px solid rgba(14, 14, 17, .07);
}

/* Side cards — adopt PA .pa-intel-card visual language */
#propertyAgencyModule .pag-side-card {
    background:    #ffffff;
    border:        1px solid rgba(14, 14, 17, .08);
    border-radius: 12px;
    padding:       11px 14px;
    box-shadow:    0 1px 2px rgba(14, 14, 17, .04), 0 2px 6px rgba(14, 14, 17, .04);
}

/* Info card (cyan accent) — PA pa-intel-card style with left indicator */
#propertyAgencyModule .pag-side-card-info {
    border-left:     2px solid var(--pag-cyan);
    background:      #ffffff;
    background-image: none;   /* remove gradient */
}

/* Tip card (orange accent) */
#propertyAgencyModule .pag-side-card-tip {
    border-left:  2px solid var(--pag-orange);
    background:   #ffffff;
    background-image: none;
}

/* Glow/dark card — keep as-is (it's a distinct intentional variant) */
#propertyAgencyModule .pag-side-card-glow {
    background: linear-gradient(180deg, var(--pag-charcoal) 0%, #1A1A1F 100%);
}

/* Card header — PA pa-intel-header */
#propertyAgencyModule .pag-side-card-header {
    display:        flex;
    align-items:    center;
    gap:            5px;
    font-size:      0.5875rem;   /* 9.4px — PA .pa-intel-header */
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color:          var(--pag-text-3);
    margin-bottom:  7px;
    padding-bottom: 6px;
    border-bottom:  1px solid rgba(14, 14, 17, .06);
}

/* Aside list inside right panel */
#propertyAgencyModule .pag-aside-list {
    font-size: 0.75rem;
    gap:       5px;
}

    #propertyAgencyModule .pag-aside-list li {
        gap:        6px;
        align-items: flex-start;
        line-height: 1.4;
    }

/* Summary card */
#propertyAgencyModule .pag-summary-card {
    background-image: none;
    background:       #fff9f4;
    border-left:      2px solid var(--pag-orange);
}

#propertyAgencyModule .pag-summary-row {
    font-size: 0.75rem;
    padding:   4px 0;
}

#propertyAgencyModule .pag-summary-row-total strong {
    font-size: 1rem;
}

/* Aside pill / trust / discount chips */
#propertyAgencyModule .pag-aside-pill,
#propertyAgencyModule .pag-trust-pill {
    font-size: 0.6875rem;
    padding:   3px 9px;
}

/* Power grid */
#propertyAgencyModule .pag-power-item {
    padding: 8px 5px;     /* was 12px 6px */
}

#propertyAgencyModule .pag-power-label {
    font-size: 0.625rem;
}


/* ─────────────────────────────────────────────────────────────────────────────
   8. NAVIGATION BAR — PA ps-nav style
   ───────────────────────────────────────────────────────────────────────────── */

#propertyAgencyModule .pag-nav {
    height:     var(--pag-nav-h);
    padding:    0 22px;
    gap:        10px;
    border-top: 1px solid rgba(14, 14, 17, .07);
    box-shadow: 0 -4px 12px -8px rgba(14, 14, 17, .08);
    background: #ffffff;
}

/* Back button — PA ps-btn-back */
#propertyAgencyModule .pag-btn-back {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             6px !important;
    padding:         10px 18px !important;
    height:          38px !important;
    font-family:     'Outfit', sans-serif !important;
    font-size:       0.8125rem !important;
    font-weight:     600 !important;
    line-height:     1 !important;
    border-radius:   10px !important;
    background:      #F4F7F9 !important;
    color:           var(--pag-text-2) !important;
    border:          1px solid rgba(14, 14, 17, .14) !important;
    box-shadow:      none !important;
    cursor:          pointer !important;
    transition:      background 0.18s ease, border-color 0.18s ease,
                     color 0.18s ease !important;
}

    #propertyAgencyModule .pag-btn-back:hover:not(:disabled) {
        background:   #E9EDF1 !important;
        color:        var(--pag-charcoal) !important;
        border-color: rgba(14, 14, 17, .22) !important;
        transform:    none !important;
    }

/* Next / Continue button — PAG stays charcoal (its design identity) but sized
   to match the PA button proportions exactly */
#propertyAgencyModule .pag-btn-next {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             6px !important;
    padding:         10px 22px !important;
    height:          38px !important;
    min-width:       120px !important;
    font-family:     'Outfit', sans-serif !important;
    font-size:       0.8125rem !important;
    font-weight:     700 !important;
    line-height:     1 !important;
    border-radius:   10px !important;
    background:      var(--pag-charcoal) !important;
    color:           #fff !important;
    border:          none !important;
    cursor:          pointer !important;
    transition:      background 0.18s ease, box-shadow 0.18s ease,
                     transform 0.15s ease !important;
}

    #propertyAgencyModule .pag-btn-next:hover:not(:disabled) {
        background: var(--pag-charcoal-2) !important;
        transform:  translateY(-1px) !important;
        box-shadow: 0 6px 16px rgba(14, 14, 17, .22) !important;
    }

    #propertyAgencyModule .pag-btn-next:active:not(:disabled) {
        transform:  none !important;
        box-shadow: none !important;
    }

    #propertyAgencyModule .pag-btn-next:disabled {
        background:  #DDE3E9 !important;
        color:       #8A93A0 !important;
        cursor:      not-allowed !important;
        box-shadow:  none !important;
        transform:   none !important;
        opacity:     1 !important;
    }

    #propertyAgencyModule .pag-btn-next:focus-visible {
        outline:        2px solid var(--pag-cyan) !important;
        outline-offset: 2px !important;
    }

/* Activate / Pay — full-width orange, keep PAG identity but size consistently */
#propertyAgencyModule .pag-btn-activate,
#propertyAgencyModule .pag-btn-pay {
    font-family:   'Outfit', sans-serif;
    font-size:     0.875rem;
    font-weight:   700;
    border-radius: 10px;
    padding:       12px 22px;
}

/* Nav summary (price total in bar) */
#propertyAgencyModule .pag-nav-summary-label {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

#propertyAgencyModule .pag-nav-summary-amount {
    font-size: 0.9375rem;
    font-weight: 700;
}


/* ─────────────────────────────────────────────────────────────────────────────
   9. GLOBAL SPACING TIGHTENING
   ───────────────────────────────────────────────────────────────────────────── */

/* Plan grid — tighter cards */
#propertyAgencyModule .pag-plan-grid {
    gap: 8px;    /* was 12px */
}

/* Role grid */
#propertyAgencyModule .pag-role-grid {
    gap: 8px;
}

/* Intel grid */
#propertyAgencyModule .pag-intel-grid {
    gap: 10px;
}

/* Review stack */
#propertyAgencyModule .pag-review-stack {
    gap: 8px;
}

/* Media questions */
#propertyAgencyModule .pag-media-q {
    padding: 10px 4px;   /* was 14px 4px */
    gap:     12px;
}

#propertyAgencyModule .pag-media-q-icon {
    width:  30px;      /* was 36px */
    height: 30px;
    font-size: 0.875rem;
}

/* Toggle row */
#propertyAgencyModule .pag-toggle-row {
    gap: 7px;    /* was 10px */
}

/* Confirm checkbox */
#propertyAgencyModule .pag-confirm {
    padding:   8px 0;   /* was 12px 0 */
    font-size: 0.75rem;
    gap:       8px;
}

/* Helper note in body */
#propertyAgencyModule .pag-helper-note {
    margin-top: 7px;
    font-size:  var(--pag-fs-helper);
}

/* Success scene */
#propertyAgencyModule .pag-success-grid {
    gap: 8px;
    margin: 14px auto;
}

#propertyAgencyModule .pag-success-card {
    padding:   11px 12px;
    border-radius: 10px;
}

#propertyAgencyModule .pag-success-orb {
    width:  80px;
    height: 80px;
    margin-bottom: 14px;
}

#propertyAgencyModule .pag-success-orb-core {
    font-size: 1.8rem;
}


/* ─────────────────────────────────────────────────────────────────────────────
   10. TOAST — PA toast style
   ───────────────────────────────────────────────────────────────────────────── */

#propertyAgencyModule .pag-toast {
    font-family:   'Outfit', sans-serif;
    font-size:     0.75rem;
    padding:       9px 16px;
    border-radius: 999px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   11. RESPONSIVE ADJUSTMENTS
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
    #propertyAgencyModule .pag-scene-head,
    #propertyAgencyModule .pag-scene-body {
        padding-left:  18px;
        padding-right: 18px;
    }
}

@media (max-width: 880px) {
    #propertyAgencyModule .pag-scene-head {
        padding: 10px 14px 10px;
    }

    #propertyAgencyModule .pag-scene-body {
        padding: 12px 14px calc(var(--pag-nav-h) + 12px);
    }

    #propertyAgencyModule .pag-nav {
        padding: 0 14px;
    }

    #propertyAgencyModule .pag-btn-back,
    #propertyAgencyModule .pag-btn-next {
        padding: 9px 14px !important;
        height:  36px !important;
        font-size: 0.75rem !important;
    }

    #propertyAgencyModule .pag-breadcrumb-inner {
        padding: 0 14px;
        gap:     8px;
    }
}

@media (max-width: 540px) {
    #propertyAgencyModule .pag-btn-next {
        min-width: 100px !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   12. ICON SYSTEM — ensure pag-icon matches pa-icon baseline
   ───────────────────────────────────────────────────────────────────────────── */

/* Already defined correctly in property-agency.css at 1.05em;
   Just ensure the context-specific sizes align to PA equivalents */

#propertyAgencyModule .pag-section-label .pag-icon {
    width:  13px;
    height: 13px;
    color:  var(--pag-cyan-deep);
}

#propertyAgencyModule .pag-section:nth-of-type(even) .pag-section-label .pag-icon {
    color: var(--pag-orange);
}

#propertyAgencyModule .pag-side-card-header .pag-icon {
    width:  12px;
    height: 12px;
    color:  var(--pag-cyan-deep);
}

#propertyAgencyModule .pag-side-card-tip .pag-side-card-header .pag-icon {
    color: var(--pag-orange);
}

#propertyAgencyModule .pag-helper-note .pag-icon,
#propertyAgencyModule .pag-field-help .pag-icon {
    width:  11px;
    height: 11px;
    color:  var(--pag-cyan-deep);
}

#propertyAgencyModule .pag-callout .pag-icon {
    width:  14px;
    height: 14px;
}

#propertyAgencyModule .pag-btn .pag-icon {
    width:  13px;
    height: 13px;
}

#propertyAgencyModule .pag-review-title .pag-icon {
    width:  13px;
    height: 13px;
    color:  var(--pag-cyan-deep);
}

#propertyAgencyModule .pag-review-card:nth-child(even) .pag-review-title .pag-icon {
    color: var(--pag-orange);
}

#propertyAgencyModule .pag-plan-icon .pag-icon {
    width:  18px;
    height: 18px;
}

#propertyAgencyModule .pag-intel-icon .pag-icon {
    width:  16px;
    height: 16px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   13. SHARED COMPONENT HARMONY — prevent drift across journeys
   ─────────────────────────────────────────────────────────────────────────────
   These rules ensure that any shared helper classes from site.css,
   sell-journey.css, or private-agent.css that might bleed into the PAG module
   are re-normalised to the PAG token set.
   ───────────────────────────────────────────────────────────────────────────── */

/* Prevent Outfit from being overridden by any stray Bootstrap/Tailwind rule */
#propertyAgencyModule,
#propertyAgencyModule * {
    font-family: inherit;
}

/* Ensure the right panel background ::before never bleeds into main column */
#propertyAgencyModule .pag-scene-body,
#propertyAgencyModule .pag-scene-head,
#propertyAgencyModule .pag-breadcrumb,
#propertyAgencyModule .pag-nav {
    position: relative;
    z-index:  1;
}