/* ============================================================================
   property-agency-fixes.css   (v1)
   ----------------------------------------------------------------------------
   Addresses the four reported issues on top of property-agency.css and
   property-agency-alignment.css.

   LOAD ORDER:  …property-agency.css  →  property-agency-alignment.css
                →  property-agency-fixes.css  (this file, last)

   FIXES:
     1. Remove .pag-section wrapper visual — cards and forms sit flat
        in the scene body, no padded box around them (matches PA/PS).
     2. Input icons — enforce pag-input-icon pattern across ALL inputs.
     3. Areas scene — Add-button and chip styling for manual entry.
     4. Change-role — ensure correct pointer-events and z-index.
     5. Toast visibility — was using .is-visible class, JS uses .is-show.
   ============================================================================ */


/* ─────────────────────────────────────────────────────────────────────────────
   1. REMOVE WRAPPER / SECTION BOX
   ─────────────────────────────────────────────────────────────────────────────
   Private Agent and Private Seller do NOT wrap their form content in a boxed
   card. Cards sit directly in the scroll body. We strip the pag-section of
   its background, border, shadow and padding so it becomes a transparent
   spacing group — the same role .pa-panels plays in Private Agent.
   ───────────────────────────────────────────────────────────────────────────── */

#propertyAgencyModule .pag-section {
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Gap between sections (was provided by section padding; now handled here) */
#propertyAgencyModule .pag-scene-body {
    gap: 16px;
}

/* The section label (subheading row) keeps its own compact treatment */
#propertyAgencyModule .pag-section-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pag-text-3);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(14, 14, 17, .06);
}

/* Plan grid — sits directly in scene-body, no wrapper box */
#propertyAgencyModule .pag-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

@media (max-width: 1180px) {
    #propertyAgencyModule .pag-plan-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 880px) {
    #propertyAgencyModule .pag-plan-grid {
        grid-template-columns: 1fr;
    }
}

/* Plan cards now get a subtle surface so they're readable without the section box */
#propertyAgencyModule .pag-plan-card {
    background: #ffffff;
    border: 1px solid rgba(14, 14, 17, .10);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(14, 14, 17, .04), 0 2px 5px rgba(14, 14, 17, .04);
    /* Compacted: shorter cards let all four tiers + the credits row fit the
       command scene with no vertical scrollbar at typical desktop heights. */
    padding: 9px 11px;
    gap: 2px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}

    #propertyAgencyModule .pag-plan-card:hover {
        border-color: var(--pag-cyan);
        box-shadow: 0 0 0 2px rgba(86, 196, 248, .14), 0 4px 12px rgba(14, 14, 17, .08);
        transform: translateY(-1px);
    }

    #propertyAgencyModule .pag-plan-card.is-selected,
    #propertyAgencyModule .pag-plan-card[aria-checked="true"] {
        border-color: var(--pag-cyan);
        background: linear-gradient(180deg, #fff 0%, #EDF8FE 100%);
        box-shadow: 0 0 0 2px rgba(86, 196, 248, .22), 0 4px 12px rgba(86, 196, 248, .12);
    }

/* ── Plan-card density (compaction) ──────────────────────────────────────────
   Trims the inner rhythm of each tier card so the single row of four no longer
   overflows the scene body. Tuned to keep every label legible. */
#propertyAgencyModule .pag-plan-icon {
    font-size: 1.05rem;
    margin-bottom: 1px;
}

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

#propertyAgencyModule .pag-plan-name {
    font-size: 0.82rem;
    line-height: 1.15;
}

#propertyAgencyModule .pag-plan-meta {
    font-size: 0.66rem;
    line-height: 1.1;
}

#propertyAgencyModule .pag-plan-fee {
    margin-top: 2px;
}

#propertyAgencyModule .pag-plan-fee-amt {
    font-size: 0.98rem;
}

#propertyAgencyModule .pag-plan-fee-per {
    font-size: 0.66rem;
}

#propertyAgencyModule .pag-plan-bullets {
    font-size: 0.66rem;
    gap: 1px;
    margin-top: 3px;
    line-height: 1.25;
}

    #propertyAgencyModule .pag-plan-bullets li {
        display: flex;
        align-items: center;
        gap: 4px;
    }

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

/* Role cards */
#propertyAgencyModule .pag-role-card {
    background: #ffffff;
    border: 1px solid rgba(14, 14, 17, .10);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(14, 14, 17, .04);
}

/* Review cards */
#propertyAgencyModule .pag-review-card {
    background: #ffffff;
    border: 1px solid rgba(14, 14, 17, .10);
    border-radius: 10px;
    padding: 11px 14px;
    box-shadow: 0 1px 2px rgba(14, 14, 17, .04);
}

/* Intel cards */
#propertyAgencyModule .pag-intel-card {
    background: #ffffff;
    border: 1px solid rgba(14, 14, 17, .10);
    border-radius: 10px;
    padding: 13px 15px;
    box-shadow: 0 1px 2px rgba(14, 14, 17, .04);
}

/* Side cards (right panel) */
#propertyAgencyModule .pag-side-card {
    background: #ffffff;
    border: 1px solid rgba(14, 14, 17, .08);
    border-radius: 10px;
    padding: 10px 13px;
    box-shadow: 0 1px 2px rgba(14, 14, 17, .03);
}

/* Toggle rows — keep surface for visibility */
#propertyAgencyModule .pag-toggle {
    background: #F9FAFB;
    border: 1px solid rgba(14, 14, 17, .09);
    border-radius: 8px;
    padding: 8px 11px;
}

/* Callout box */
#propertyAgencyModule .pag-callout {
    background: rgba(86, 196, 248, .07);
    border: 1px solid rgba(86, 196, 248, .20);
    border-left: 2px solid var(--pag-cyan);
    border-radius: 8px;
    padding: 9px 12px;
}

/* Credits stepper row — keep as inline component */
#propertyAgencyModule .pag-credits-row {
    gap: 10px;
    margin-top: 4px;
}

/* Payment summary */
#propertyAgencyModule .pag-payment-summary {
    background: #ffffff;
    border: 1px solid rgba(14, 14, 17, .09);
    border-left: 2px solid var(--pag-cyan);
    border-radius: 10px;
    padding: 12px 15px;
    box-shadow: 0 1px 2px rgba(14, 14, 17, .04);
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. INPUT ICON SYSTEM — PA pa-input-icon standard across ALL inputs
   ─────────────────────────────────────────────────────────────────────────────
   Every input in PA uses:
     .pag-input-wrap  { position: relative; display: flex; align-items: center; }
     .pag-input-icon  { position: absolute; left: 10px; width: 13px; height: 13px; }
     .pag-input       { padding-left: 30px; }
   This is already wired in the partials. These rules guarantee the
   pixel-perfect sizing and colour matching PA's pa-input-icon.
   ───────────────────────────────────────────────────────────────────────────── */

#propertyAgencyModule .pag-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* SVG icon variant (new .pag-icon system) */
#propertyAgencyModule .pag-input-icon.pag-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    pointer-events: none;
    color: var(--pag-text-3);
    --pi-stroke: var(--pag-charcoal);
}

/* Legacy Bootstrap icon variant (bi bi-*) */
#propertyAgencyModule .pag-input-icon:not(.pag-icon) {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8125rem;
    pointer-events: none;
    color: var(--pag-text-3);
}

/* Input with icon — always left-padded */
#propertyAgencyModule .pag-input-wrap .pag-input {
    padding-left: 30px;
}

/* Input without icon (no wrap, standalone) */
#propertyAgencyModule .pag-input:not(.pag-input-wrap .pag-input) {
    padding-left: 10px;
}

/* Focus state — icon brightens to brand cyan */
#propertyAgencyModule .pag-input:focus ~ .pag-input-icon,
#propertyAgencyModule .pag-input-wrap:focus-within .pag-input-icon {
    color: var(--pag-cyan-deep) !important;
}

/* Input height and sizing — locked to PA standard */
#propertyAgencyModule .pag-input {
    height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.75rem;
    font-family: 'Outfit', sans-serif;
    border: 1px solid rgba(14, 14, 17, .16);
    border-radius: 8px;
    background: #ffffff;
    color: var(--pag-charcoal);
    line-height: 1;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

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

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

    #propertyAgencyModule .pag-input::placeholder {
        color: var(--pag-text-3);
    }

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

/* Select chevron stays right-aligned */
#propertyAgencyModule .pag-input.pag-select {
    background-position: right 10px center;
    padding-right: 30px;
    cursor: pointer;
}

/* Places suggestions dropdown */
#propertyAgencyModule .pag-places-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid rgba(14, 14, 17, .12);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(14, 14, 17, .10);
    z-index: 200;
    max-height: 200px;
    overflow-y: auto;
}

#propertyAgencyModule .pag-places-item {
    padding: 7px 10px;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--pag-charcoal);
    border-bottom: 1px solid rgba(14, 14, 17, .05);
}

    #propertyAgencyModule .pag-places-item:last-child {
        border-bottom: none;
    }

    #propertyAgencyModule .pag-places-item:hover {
        background: #F6FCFF;
    }

    #propertyAgencyModule .pag-places-item i,
    #propertyAgencyModule .pag-places-item .pag-icon {
        color: var(--pag-cyan-deep);
        flex-shrink: 0;
        width: 12px;
        height: 12px;
    }

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

/* Field vertical gap */
#propertyAgencyModule .pag-field {
    gap: 3px;
}

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

/* Required star — orange for PAG brand */
#propertyAgencyModule .pag-req {
    color: var(--pag-orange);
}

/* Optional badge */
#propertyAgencyModule .pag-opt {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--pag-text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(14, 14, 17, .05);
    padding: 1px 6px;
    border-radius: 999px;
}

/* Helper */
#propertyAgencyModule .pag-field-help {
    font-size: 0.625rem;
    color: var(--pag-text-3);
    margin-top: 3px;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    line-height: 1.4;
}

    #propertyAgencyModule .pag-field-help .pag-icon {
        width: 11px;
        height: 11px;
        flex-shrink: 0;
        color: var(--pag-cyan-deep);
        margin-top: 1px;
    }


/* ─────────────────────────────────────────────────────────────────────────────
   3. AREAS SCENE — manual add button + chip styling
   ───────────────────────────────────────────────────────────────────────────── */

/* The "Add ↵" button appears inside the input wrap */
#propertyAgencyModule .pag-areas-add-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 0.625rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    border: 1px solid rgba(86, 196, 248, .40);
    background: rgba(86, 196, 248, .10);
    color: var(--pag-cyan-deep);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    z-index: 2;
}

    #propertyAgencyModule .pag-areas-add-btn:hover {
        background: rgba(86, 196, 248, .20);
        border-color: var(--pag-cyan);
    }

/* When add btn is visible, give input extra right padding */
#propertyAgencyModule #pagAreasInput {
    padding-right: 72px;
}

/* Area chips — PA pa-area-chip style */
#propertyAgencyModule .pag-area-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 8px;
    background: rgba(86, 196, 248, .10);
    border: 1px solid rgba(86, 196, 248, .30);
    color: var(--pag-cyan-deep);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    animation: pagChipIn 0.2s ease;
}

@keyframes pagChipIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Chip close button */
#propertyAgencyModule .pag-area-chip-x,
#propertyAgencyModule .pag-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--pag-cyan-deep);
    padding: 0;
    transition: background 0.15s ease;
}

    #propertyAgencyModule .pag-area-chip-x:hover,
    #propertyAgencyModule .pag-chip-x:hover {
        background: rgba(86, 196, 248, .25);
    }

    #propertyAgencyModule .pag-area-chip-x .pag-icon,
    #propertyAgencyModule .pag-chip-x .pag-icon {
        width: 9px;
        height: 9px;
    }

/* Geo icon inside chip */
#propertyAgencyModule .pag-area-chip .pag-icon:first-child {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

#propertyAgencyModule .pag-area-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
    min-height: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. CHANGE ROLE — guaranteed click target
   ───────────────────────────────────────────────────────────────────────────── */

#propertyAgencyModule .pag-change-role {
    position: relative;
    z-index: 50; /* sits above right-panel wash */
    cursor: pointer;
    flex-shrink: 0;
    /* Ensure it's never hidden behind any overlay */
    pointer-events: auto;
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. TOAST — fix class name mismatch
   ─────────────────────────────────────────────────────────────────────────────
   The JS calls toast.classList.add('is-visible') but property-agency.css
   only has .pag-toast.is-show. Both classes now trigger visibility.
   ───────────────────────────────────────────────────────────────────────────── */

#propertyAgencyModule .pag-toast.is-visible,
#propertyAgencyModule .pag-toast.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. SCENE-BODY — remove bottom gap inflation caused by removed section padding
   ───────────────────────────────────────────────────────────────────────────── */

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

/* Form gap */
#propertyAgencyModule .pag-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Segment (yes/sometimes/no) buttons */
#propertyAgencyModule .pag-segment-btn {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
}

/* Media question row */
#propertyAgencyModule .pag-media-q {
    padding: 9px 0;
    gap: 12px;
}

#propertyAgencyModule .pag-media-q-text {
    font-size: 0.75rem;
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
}

/* Toggle notes */
#propertyAgencyModule .pag-toggle-note {
    font-size: 0.625rem;
    margin-top: 4px;
}

/* Counter display */
#propertyAgencyModule .pag-counter-value {
    font-size: 1.4rem;
    font-family: 'Outfit', sans-serif;
}

/* Credits input */
#propertyAgencyModule .pag-credits-input {
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
}

/* Helper note */
#propertyAgencyModule .pag-helper-note {
    font-size: 0.625rem;
    font-family: 'Outfit', sans-serif;
    gap: 5px;
    display: flex;
    align-items: flex-start;
    margin-top: 6px;
    color: var(--pag-text-3);
}

    #propertyAgencyModule .pag-helper-note .pag-icon {
        width: 11px;
        height: 11px;
        flex-shrink: 0;
        color: var(--pag-cyan-deep);
        margin-top: 1px;
    }


/* ─────────────────────────────────────────────────────────────────────────────
   7. RIGHT PANEL alignment with PA right rail
   ───────────────────────────────────────────────────────────────────────────── */

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

/* Aside list items — PA pa-tip-list style */
#propertyAgencyModule .pag-aside-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--pag-text-2);
}

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

    #propertyAgencyModule .pag-aside-list .pag-icon {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        color: var(--pag-cyan-deep);
        margin-top: 1px;
    }

    #propertyAgencyModule .pag-aside-list li:nth-child(2n) .pag-icon {
        color: var(--pag-orange);
    }

/* Aside pill */
#propertyAgencyModule .pag-aside-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(86, 196, 248, .10);
    color: var(--pag-cyan-deep);
    border: 1px solid rgba(86, 196, 248, .24);
}

/* Trust row */
#propertyAgencyModule .pag-payment-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 10px 0;
}

#propertyAgencyModule .pag-payment-trust-item {
    font-size: 0.6875rem;
    font-family: 'Outfit', sans-serif;
    gap: 5px;
}

/* Review edit button */
#propertyAgencyModule .pag-review-edit {
    font-size: 0.6875rem;
    padding: 4px 10px;
    font-family: 'Outfit', sans-serif;
}


/* ─────────────────────────────────────────────────────────────────────────────
   8. MOBILE RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 880px) {
    #propertyAgencyModule .pag-scene-body {
        padding: 12px 14px calc(var(--pag-nav-h, 64px) + 12px);
        gap: 12px;
    }
}

@media (max-width: 540px) {
    #propertyAgencyModule .pag-plan-grid {
        grid-template-columns: 1fr 1fr;
    }
}