/**
 * YCS Quote Plugin — frontend styles.
 *
 * Follows the same theme-token approach the partner plugin uses (v1.2.0+
 * token layer), scoped to .ycs-* selectors. Reads --ycs-* custom
 * properties from the YCS theme, falls back to sensible defaults for
 * partner sites where those tokens aren't defined.
 *
 * The accordion pattern + interactions match page-mockup-accordion.php
 * exactly — this is the mockup port for production use.
 */

[x-cloak] { display: none !important; }

/* ------------------------------------------------------------------
   ANCHOR-SCROLL OFFSET on the theme's "Start your quote" section.
   The theme sets id="get-quote" on this section (repeatable field —
   can't safely add CSS at the theme level without hitting every
   other section). Sticky nav is 72px mobile / 96px desktop; leave
   a bit of breathing room above the section heading so it isn't
   obscured when a Start-my-quote CTA anchor-scrolls the customer
   in from another part of the page.
   ------------------------------------------------------------------ */
#get-quote { scroll-margin-top: 90px; }
@media (min-width: 992px) {
    #get-quote { scroll-margin-top: 120px; }
}

/* ------------------------------------------------------------------
   TOKENS — read from YCS theme, fall back to sensible defaults.
   ------------------------------------------------------------------ */
:root {
    --ycs-primary:      var(--ycs-primary,      #1f236c);
    --ycs-primary-dark: var(--ycs-primary-dark, #171b56);
    --ycs-secondary:    var(--ycs-secondary,    #4f9259);
    --ycs-accent:       var(--ycs-accent,       #eef2ff);
    --ycs-text:         var(--ycs-text,         #1d2433);
    --ycs-text-muted:   var(--ycs-text-muted,   #667085);
    --ycs-border-soft:  var(--ycs-border-soft,  #e7eaf1);
    --ycs-bg-soft:      var(--ycs-bg-soft,      #f7f9fc);
    --ycs-white:        var(--ycs-white,        #ffffff);
    --ycs-radius-lg:    var(--ycs-radius-lg,    20px);
    --ycs-radius-md:    var(--ycs-radius-md,    16px);
    --ycs-radius-pill:  var(--ycs-radius-pill,  999px);
    --ycs-shadow-soft:  var(--ycs-shadow-soft,  0 16px 45px rgba(18, 32, 74, 0.08));
    --ycs-shadow-card:  var(--ycs-shadow-card,  0 12px 30px rgba(21, 33, 63, 0.07));
}

/* ------------------------------------------------------------------
   HEADINGS — navy primary, green highlights, matching site style
   (per Chantelle's "too much green" course-correction).
   ------------------------------------------------------------------ */
.ycs-quote-form-wrap .mockup-hd,
.ycs-about-you-wrap  .mockup-hd,
.ycs-confirmation-wrap .mockup-hd {
    color: var(--ycs-primary);
}
.ycs-quote-form-wrap .highlight,
.ycs-about-you-wrap  .highlight,
.ycs-confirmation-wrap .highlight {
    color: var(--ycs-secondary);
}

/* ------------------------------------------------------------------
   PROGRESS BAR — sticky under nav on mobile (theme nav is 72px mobile /
   96px desktop; see partner-plugin fix from earlier).
   ------------------------------------------------------------------ */
.ycs-progress-wrap {
    position: sticky;
    top: 72px;
    z-index: 5;
    background: var(--ycs-bg-soft);
    padding: 0.75rem 0 0.5rem;
    margin-top: -0.5rem;
}
@media (min-width: 992px) {
    .ycs-progress-wrap { top: 96px; }
}
.ycs-progress {
    height: 6px;
    border-radius: var(--ycs-radius-pill);
    background: var(--ycs-border-soft);
}
.ycs-progress .progress-bar {
    background: var(--ycs-secondary);
    border-radius: var(--ycs-radius-pill);
    transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ycs-step-label { font-size: 0.92rem; }

/* ------------------------------------------------------------------
   ACCORDION SECTION — head always visible, body expands via
   grid-template-rows trick (smooth height animation).
   ------------------------------------------------------------------ */
.ycs-section .ycs-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ycs-head-text {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
.ycs-head-title { line-height: 1.3; }

/* Active state: big navy heading, no subtitle, no edit link. */
.ycs-section.is-active .ycs-head-title {
    font-size: 1.15rem;
    font-weight: 700;
}
@media (min-width: 576px) {
    .ycs-section.is-active .ycs-head-title { font-size: 1.35rem; }
}

/* Pending state: muted title. */
.ycs-section.is-pending .ycs-head-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ycs-text-muted) !important;
}
.ycs-section.is-pending .ycs-marker {
    background: var(--ycs-border-soft);
    color: var(--ycs-text-muted);
}
.ycs-section.is-pending { opacity: 0.65; }

/* Done state: tiny uppercase label + summary + green check marker + edit link. */
.ycs-section.is-done .ycs-head-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ycs-text-muted) !important;
}
.ycs-head-subtitle {
    display: none;
    color: var(--ycs-text);
    font-weight: 600;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ycs-section.is-done .ycs-head-subtitle { display: block; }
.ycs-section.is-done .ycs-marker {
    background: var(--ycs-secondary);
    color: #fff;
}

/* Edit link: only visible in done state. */
.ycs-edit { display: none; color: var(--ycs-primary); }
.ycs-section.is-done .ycs-edit { display: inline-block; }

/* Marker (numbered step circle → green check on done). */
.ycs-marker {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
    margin: 0;
    position: relative;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ycs-primary);
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}
@media (min-width: 576px) {
    .ycs-marker { width: 44px; height: 44px; font-size: 1rem; }
}
.ycs-marker .marker-check { display: none; }
.ycs-section.is-done .ycs-marker .marker-num { display: none; }
.ycs-section.is-done .ycs-marker .marker-check { display: inline; }

/* Smooth accordion body via CSS Grid rows. */
.ycs-body-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ycs-body-wrap > .ycs-body {
    min-height: 0;
    overflow: hidden;
}
.ycs-section.is-active .ycs-body-wrap {
    grid-template-rows: 1fr;
}
.ycs-body { padding-top: 1.1rem; }
/* Active-section shadow removed 2026-08-11 — was clashing with the theme's
   Quote Embed section styling on YCS's home page. */

/* ------------------------------------------------------------------
   CHOICE GRID — chunky tap targets (60px on mobile). Two columns
   everywhere; each button stacks icon over label.
   ------------------------------------------------------------------ */
.ycs-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
.ycs-choice-grid .btn-ycs {
    justify-content: center;
    padding: 1.1rem 0.75rem;
    text-align: center;
    min-height: 3.75rem;
    flex-direction: column;
    gap: 0.35rem;
}
.ycs-choice-grid .btn-ycs i { font-size: 1.35rem; }

/* Selected + inline (Freehold/Leasehold, Yes/No) choice states. */
/* Selected state — needs to beat Bootstrap's .btn:focus:not(:focus-visible)
   post-click styling which otherwise wins by specificity and leaves the
   customer unsure if their click registered until they click elsewhere. */
.ycs-choice.is-selected,
.ycs-choice.is-selected:focus,
.ycs-choice.is-selected:focus-visible,
.ycs-choice.is-selected:hover,
.ycs-choice.is-selected:active {
    background: var(--ycs-primary) !important;
    color: #fff !important;
    border-color: var(--ycs-primary) !important;
    box-shadow: none !important;
}
.ycs-section .btn-ycs { min-height: 3rem; }

/* ------------------------------------------------------------------
   CTA + trust note + selected badge (post-quote flow)
   ------------------------------------------------------------------ */
.ycs-cta {
    min-height: 3.25rem;
    font-size: 1.05rem;
}

.ycs-selected-badge {
    background: rgba(79, 146, 89, 0.10);
    color: #3f7547;
    border-radius: var(--ycs-radius-md);
}

.ycs-trust {
    background: var(--ycs-bg-soft);
    border-radius: var(--ycs-radius-md);
}
.ycs-trust i { font-size: 1.1rem; }

/* ------------------------------------------------------------------
   RESULTS: firm logo pill, question num (small caps)
   ------------------------------------------------------------------ */
.ycs-firm-logo {
    width: 48px;
    height: 48px;
    font-size: 1rem;
    margin: 0;
    border-radius: var(--ycs-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ycs-accent);
    color: var(--ycs-primary);
    font-weight: 700;
    flex-shrink: 0;
}

.ycs-question-num {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ycs-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

/* ------------------------------------------------------------------
   CONFIRMATION SCREEN — thank-you icon
   ------------------------------------------------------------------ */
.ycs-thank-icon {
    width: 88px;
    height: 88px;
    background: var(--ycs-secondary);
    color: #fff;
    font-size: 2.5rem;
    box-shadow: 0 12px 32px rgba(79, 146, 89, 0.35);
    border-radius: 50%;
}

/* ------------------------------------------------------------------
   QUOTE-CARD FEE GROUPS — collapsible sections + total band + SDLT
   Matches the LCE email template structure Scott signed off 2026-08-11.
   ------------------------------------------------------------------ */
.ycs-fee-groups {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0.5rem 0 0;
}
.ycs-fee-group {
    border-top: 1px solid var(--ycs-border-soft);
}
.ycs-fee-group:last-child {
    border-bottom: 1px solid var(--ycs-border-soft);
}
.ycs-fee-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0.85rem 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}
.ycs-fee-group-head:hover .ycs-fee-group-title {
    color: var(--ycs-primary);
}
.ycs-fee-group-title {
    font-weight: 600;
    color: var(--ycs-text);
    font-size: 0.95rem;
    transition: color 150ms ease;
}
.ycs-fee-group-right {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 700;
}
.ycs-fee-group-total {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}
.ycs-fee-group-right .bi {
    font-size: 1.1rem;
    color: var(--ycs-text-muted);
    line-height: 1;
}
.ycs-fee-group-head:hover .bi { color: var(--ycs-primary); }
.ycs-fee-group-body {
    padding: 0 0 0.85rem 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ycs-fee-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.9rem;
}
.ycs-fee-line-name {
    color: var(--ycs-text-muted);
    flex: 1;
    min-width: 0;
}
.ycs-fee-line-total {
    color: var(--ycs-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 500;
}

/* "Payable by {firm}" helper note — appears below the fee name when the
   introducer covers that fee (Portal sends payableByIntroducer: true).
   Small, italic, muted so it reads as a footnote rather than a second
   line item — the customer's eye still lands on the fee name first. */
.ycs-fee-line-name .ycs-fee-line-note {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--ycs-text-muted);
    line-height: 1.3;
}

/* TBC amount — used when Portal sends displayFee: false on a fee that
   isn't fixed at quote time (e.g. Case Tracking, Portal Fees). Reads as
   "still to be confirmed", NOT "free" — italic + muted colour + small
   caps to signal pending, kept on the right where the £ figure would sit
   so the row still scans cleanly. */
.ycs-fee-line-total.ycs-fee-tbc {
    color: var(--ycs-text-muted);
    font-style: italic;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Sub-total rows inside an expanded group — Total Net + Plus VAT, italic
   muted, indented to visually distinguish from the fee lines above. Match
   the LCE email template styling (font-style:italic; small; muted). */
.ycs-fee-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.25rem 0 0.25rem 1rem;
    font-size: 0.82rem;
    font-style: italic;
    color: var(--ycs-text-muted);
    font-variant-numeric: tabular-nums;
}
.ycs-fee-subtotal:first-of-type {
    margin-top: 0.5rem;
    border-top: 1px solid var(--ycs-border-soft);
    padding-top: 0.5rem;
}

/* Group footer — "Total X (Incl VAT)" highlighted row. Matches the
   emphasised total in the LCE email (background band, bold, primary). */
.ycs-fee-group-footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.6rem 0.75rem;
    margin-top: 0.4rem;
    background: var(--ycs-bg-soft);
    border-top: 1px solid var(--ycs-border-soft);
    border-radius: var(--ycs-radius-md);
    font-weight: 700;
    color: var(--ycs-primary);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    gap: 1rem;
}
.ycs-fee-group-footer > span:first-child {
    /* Long labels — wrap gracefully on narrow mobile */
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.ycs-fee-group-footer > span:last-child {
    white-space: nowrap;
}

/* Total Estimated Cost band — the headline number, dark navy per the
   LCE email template. */
.ycs-total-band {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ycs-primary);
    color: #fff;
    padding: 0.95rem 1rem;
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: var(--ycs-radius-md);
    margin-top: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* Stamp Duty — its own block below the total (not a legal fee, payable
   direct to HMRC). Amber note underneath is critical trust signal. */
.ycs-sdlt-block {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--ycs-bg-soft);
    border-radius: var(--ycs-radius-md);
    border: 1px solid var(--ycs-border-soft);
}
.ycs-sdlt-line {
    font-size: 0.95rem;
    font-weight: 600;
}
.ycs-sdlt-line .ycs-fee-line-name {
    color: var(--ycs-text);
}
.ycs-sdlt-note {
    color: #a07010;
    font-style: italic;
    font-size: 0.8rem;
    margin: 0.4rem 0 0;
    line-height: 1.4;
}

/* ------------------------------------------------------------------
   SUB-SECTION HEADINGS (inside Section 2 body) — used to split the
   Property step into "About the property you're buying" + "About the
   property you're selling" for Buying & Selling transactions. Small,
   uppercase, muted so they read as scaffolding rather than competing
   with the section's main heading.
   ------------------------------------------------------------------ */
.ycs-subhead {
    margin: 0 0 0.85rem;
}
.ycs-subhead-divider {
    margin-top: 1.6rem;
    padding-top: 1.3rem;
    border-top: 1px dashed var(--ycs-border-soft);
}
.ycs-subhead-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ycs-secondary);
    padding: 0.25rem 0.65rem;
    background: rgba(79, 146, 89, 0.08);
    border-radius: var(--ycs-radius-pill);
}

/* ------------------------------------------------------------------
   PLACEHOLDER TEXT — light grey so it's obviously not real user input.
   Bootstrap's default (#6c757d) reads as regular muted text at YCS's
   type scale, which testers flagged as looking like a filled-in value.
   Lighter tone + full opacity (Firefox defaults <1) fixes it.
   ------------------------------------------------------------------ */
.ycs-quote-form-wrap .form-control::placeholder,
.ycs-quote-form-wrap .form-select::placeholder,
.ycs-about-you-wrap  .form-control::placeholder,
.ycs-about-you-wrap  .form-select::placeholder {
    color: #b0b7c3;
    opacity: 1;
    font-weight: 400;
}

/* ------------------------------------------------------------------
   UTILITY helpers
   ------------------------------------------------------------------ */
.min-w-0 { min-width: 0; }

/* Force Bootstrap Icons to size correctly inside our buttons. */
.ycs-quote-form-wrap .bi,
.ycs-about-you-wrap .bi,
.ycs-confirmation-wrap .bi { line-height: 1; }