/**
 * Pricing Calculator styles
 *
 * Mobile-first. Uses theme variables where available, falls back to literal
 * values otherwise. BEM namespace: pricing-calc, pricing-field, pricing-radio,
 * pricing-checkbox, pricing-service-card, pricing-service-block, pricing-nav.
 */

:root {
    --pc-amber: #D97706;
    --pc-amber-soft: #FEF3C7;
    --pc-charcoal: #1C1917;
    --pc-stone: #F5F5F4;
    --pc-warm-white: #FAFAF9;
    --pc-grey: #78716C;
    --pc-grey-light: #E7E5E4;
    --pc-error: #B91C1C;
    --pc-success: #059669;
    --pc-radius: 12px;
    --pc-radius-lg: 16px;
    --pc-shadow: 0 1px 2px rgba(28, 25, 23, 0.05);
    --pc-shadow-lg: 0 4px 12px rgba(28, 25, 23, 0.08);
}

/* ----------------------------- Container ----------------------------- */

.pricing-calc {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.25rem 6rem;
    color: var(--pc-charcoal);
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

@media (min-width: 768px) {
    .pricing-calc {
        padding: 3rem 2rem 7rem;
    }
}

.pricing-calc__gate {
    background: var(--pc-warm-white);
    border: 1px solid var(--pc-grey-light);
    border-radius: var(--pc-radius-lg);
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.pricing-calc__gate .btn {
    margin-top: 1rem;
}

/* ------------------------------ Header ------------------------------ */

.pricing-calc__header {
    margin-bottom: 1.75rem;
}

.pricing-calc__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    line-height: 1.15;
    margin: 0 0 0.5rem;
    color: var(--pc-charcoal);
}

@media (min-width: 768px) {
    .pricing-calc__title {
        font-size: 2.75rem;
    }
}

.pricing-calc__subtitle {
    color: var(--pc-grey);
    font-size: 1rem;
    margin: 0;
}

/* ---------------------------- Progress bar --------------------------- */

.pricing-calc__progress {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin: 0 0 2rem;
}

.pricing-calc__progress-segment {
    height: 6px;
    border-radius: 999px;
    background: var(--pc-grey-light);
    transition: background 0.3s ease;
}

.pricing-calc__progress-segment.is-active,
.pricing-calc__progress-segment.is-complete {
    background: var(--pc-amber);
}

/* ------------------------------ Steps ------------------------------- */

.pricing-calc__step {
    display: none;
    animation: pricing-fade-in 0.25s ease;
}

.pricing-calc__step.is-active {
    display: block;
}

@keyframes pricing-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pricing-calc__step-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
}

@media (min-width: 768px) {
    .pricing-calc__step-title {
        font-size: 1.875rem;
    }
}

.pricing-calc__step-intro {
    color: var(--pc-grey);
    margin: 0 0 1.75rem;
    font-size: 0.95rem;
}

.pricing-calc__empty-state {
    color: var(--pc-grey);
    background: var(--pc-warm-white);
    border: 1px dashed var(--pc-grey-light);
    border-radius: var(--pc-radius);
    padding: 1.25rem;
    text-align: center;
    margin: 0;
}

/* ----------------------------- Fields ------------------------------- */

.pricing-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.pricing-field--conditional {
    display: none;
}

.pricing-field--conditional.is-visible {
    display: flex;
}

.pricing-field__label {
    font-weight: 600;
    color: var(--pc-charcoal);
    font-size: 0.95rem;
}

.pricing-field__req {
    color: var(--pc-amber);
    margin-left: 0.25rem;
}

.pricing-field__hint {
    font-size: 0.8125rem;
    color: var(--pc-grey);
}

.pricing-field__error {
    color: var(--pc-error);
    font-size: 0.8125rem;
    min-height: 1em;
}

.pricing-field.has-error .pricing-input,
.pricing-field.has-error .pricing-textarea {
    border-color: var(--pc-error);
}

/* ----------------------------- Inputs ------------------------------- */

.pricing-input,
.pricing-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--pc-grey-light);
    border-radius: var(--pc-radius);
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
    color: var(--pc-charcoal);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.pricing-textarea {
    min-height: 110px;
    resize: vertical;
}

.pricing-input:focus,
.pricing-textarea:focus {
    outline: none;
    border-color: var(--pc-amber);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}

.pricing-input::placeholder,
.pricing-textarea::placeholder {
    color: #A8A29E;
}

/* ----------------------- Radio & Checkbox cards --------------------- */

.pricing-radio-group,
.pricing-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pricing-radio-group--stack {
    flex-direction: column;
}

@media (max-width: 520px) {
    .pricing-radio-group {
        flex-direction: column;
    }
    .pricing-radio-group .pricing-radio {
        width: 100%;
    }
}

.pricing-radio,
.pricing-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--pc-grey-light);
    border-radius: var(--pc-radius);
    background: #fff;
    cursor: pointer;
    font-size: 0.9375rem;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}

.pricing-radio input,
.pricing-checkbox input {
    accent-color: var(--pc-amber);
    cursor: pointer;
}

.pricing-radio:hover,
.pricing-checkbox:hover {
    border-color: #D6D3D1;
}

.pricing-radio:has(input:checked),
.pricing-checkbox:has(input:checked) {
    border-color: var(--pc-amber);
    background: var(--pc-amber-soft);
    box-shadow: var(--pc-shadow);
}

.pricing-checkbox-group {
    flex-direction: column;
}

@media (min-width: 640px) {
    .pricing-checkbox-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .pricing-checkbox {
        width: auto;
    }
}

/* --------------------------- Service cards -------------------------- */

.pricing-service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .pricing-service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

.pricing-service-card {
    position: relative;
    display: flex;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    border: 1.5px solid var(--pc-grey-light);
    border-radius: var(--pc-radius-lg);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.pricing-service-card:hover {
    border-color: #D6D3D1;
    box-shadow: var(--pc-shadow);
}

.pricing-service-card__input {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    accent-color: var(--pc-amber);
    cursor: pointer;
}

.pricing-service-card__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    color: var(--pc-amber);
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
}

.pricing-service-card__icon svg {
    width: 100%;
    height: 100%;
}

.pricing-service-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-right: 1.5rem;
}

.pricing-service-card__title {
    font-weight: 600;
    color: var(--pc-charcoal);
    font-size: 1rem;
    line-height: 1.25;
}

.pricing-service-card__desc {
    color: var(--pc-grey);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.pricing-service-card:has(.pricing-service-card__input:checked) {
    border-color: var(--pc-amber);
    background: var(--pc-amber-soft);
    box-shadow: var(--pc-shadow);
}

/* --------------------- Step 3 conditional blocks -------------------- */

.pricing-service-block {
    display: none;
    background: var(--pc-warm-white);
    border: 1px solid var(--pc-grey-light);
    border-radius: var(--pc-radius-lg);
    padding: 1.25rem 1.25rem 0.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .pricing-service-block {
        padding: 1.5rem 1.5rem 0.75rem;
    }
}

.pricing-service-block.is-visible {
    display: block;
}

.pricing-service-block__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--pc-grey-light);
    color: var(--pc-charcoal);
}

.pricing-service-block__note {
    margin: 0 0 0.75rem;
    color: var(--pc-grey);
    font-size: 0.9375rem;
}

/* ---------------------- Review summary (step 5) --------------------- */

.pricing-calc__review {
    list-style: none;
    margin: 0;
    padding: 0.75rem 1rem;
    background: var(--pc-warm-white);
    border: 1px solid var(--pc-grey-light);
    border-radius: var(--pc-radius);
    font-size: 0.9375rem;
    color: var(--pc-charcoal);
}

.pricing-calc__review li {
    padding: 0.25rem 0;
}

.pricing-calc__review li + li {
    border-top: 1px solid var(--pc-grey-light);
}

.pricing-calc__review--empty {
    color: var(--pc-grey);
    font-style: italic;
}

/* ------------------------- Submit errors ---------------------------- */

.pricing-calc__submit-error {
    margin-top: 1rem;
    color: var(--pc-error);
    font-size: 0.9375rem;
    min-height: 1em;
}

/* ---------------------------- Nav bar ------------------------------- */

.pricing-nav {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0 0.5rem;
    margin-top: 2rem;
    background: linear-gradient(to top, var(--pc-warm-white, #FAFAF9) 75%, rgba(250, 250, 249, 0));
    z-index: 5;
}

.pricing-nav__back[hidden] {
    visibility: hidden;
    display: inline-flex !important;
}

.pricing-nav__next {
    margin-left: auto;
    position: relative;
}

.pricing-nav__spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    margin-left: 0.5rem;
    animation: pricing-spin 0.7s linear infinite;
}

.pricing-nav__next.is-loading {
    pointer-events: none;
    opacity: 0.75;
}

.pricing-nav__next.is-loading .pricing-nav__spinner {
    display: inline-block;
}

@keyframes pricing-spin {
    to { transform: rotate(360deg); }
}

/* --------------------------- Success step --------------------------- */

.pricing-calc__success {
    text-align: center;
    padding: 2.5rem 1rem 1rem;
}

.pricing-calc__success-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 1.25rem;
    color: var(--pc-success);
}

.pricing-calc__success-icon svg {
    width: 100%;
    height: 100%;
}

.pricing-calc__success-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    margin: 0 0 0.75rem;
    color: var(--pc-charcoal);
}

@media (min-width: 768px) {
    .pricing-calc__success-title {
        font-size: 2.5rem;
    }
}

.pricing-calc__success-message {
    color: var(--pc-grey);
    max-width: 480px;
    margin: 0 auto 2rem;
    font-size: 1.0625rem;
}

/* When on success step, hide the nav bar. */
.pricing-calc__form.is-complete .pricing-nav {
    display: none;
}

/* --------------------------- Small screens -------------------------- */

@media (max-width: 480px) {
    .pricing-nav {
        padding: 0.75rem 0 0.5rem;
    }
    .pricing-nav .btn {
        padding: 0.625rem 1rem;
        font-size: 0.9375rem;
    }
}

/* ==========================================================================
   Success Step — Summary + Price + Actions (internal staff view)
   ========================================================================== */

.pricing-summary {
    max-width: 640px;
    margin: 2rem auto;
    padding: 1.5rem 1.75rem;
    background: var(--color-stone, #F5F5F4);
    border: 1px solid var(--color-border, #E7E5E4);
    border-radius: 12px;
    text-align: left;
}

.pricing-summary--price {
    background: #1C1917;
    border-color: #1C1917;
    color: #FAFAF9;
    text-align: center;
    padding: 2rem 1.75rem;
}

.pricing-summary__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0 0 0.5rem;
    opacity: 0.65;
    color: #D97706;
    font-weight: 600;
}

.pricing-summary__price {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: #F59E0B;
    line-height: 1;
}

.pricing-summary__tier {
    font-size: 0.9rem;
    margin: 0;
    opacity: 0.85;
}

.pricing-summary__tier span {
    font-weight: 600;
    color: #F59E0B;
}

.pricing-summary__heading {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 1.25rem;
    margin: 0 0 1rem;
    color: var(--color-charcoal, #1C1917);
}

.pricing-summary__dl {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .pricing-summary__dl {
        grid-template-columns: 180px 1fr;
    }
}

.pricing-summary__dl dt {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-grey, #78716C);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pricing-summary__dl dd {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--color-charcoal, #1C1917);
    line-height: 1.5;
    word-break: break-word;
}

.pricing-summary__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.pricing-summary__actions .btn {
    min-width: 200px;
}

/* Print styles — only the summary shows when printing */
@media print {
    body > *:not(main),
    main > *:not(.pricing-calc),
    .site-nav,
    .site-footer,
    .pricing-calc__header,
    .pricing-calc__progress,
    .pricing-calc__step:not([data-step="6"]),
    .pricing-nav,
    .pricing-summary__actions,
    .pricing-calc__success-icon {
        display: none !important;
    }
    .pricing-summary {
        box-shadow: none;
        border: 1px solid #ccc;
        background: white !important;
        color: black !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .pricing-summary--price {
        background: white !important;
        color: black !important;
    }
    .pricing-summary__price {
        color: black !important;
    }
}