/*
 * Additions on top of the imported prototypes. Only what they do not have: the
 * FAQ collapse animation, the rotating references, the partner block, the yearly
 * horoscope period block and validation error states. The design system is
 * untouched - everything builds on the tokens and classes from base.css /
 * step1.css / step2.css / step3.css.
 *
 * Loaded by all three steps, because the FAQ is on all three.
 */

/* --- FAQ collapse (every step) ------------------------------------------ */
/*
 * The prototype cuts the answer in and out with the `hidden` attribute, which
 * cannot be transitioned. Animating the wrapper's grid row instead keeps the
 * open height automatic - no magic max-height to outgrow. `visibility` is what
 * actually hides the collapsed answer from screen readers and find-in-page; it
 * flips only once the row has finished collapsing.
 */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition:
        grid-template-rows 240ms ease,
        visibility 0s linear 240ms;
}

.faq-item.is-open .faq-answer {
    grid-template-rows: 1fr;
    visibility: visible;
    transition:
        grid-template-rows 240ms ease,
        visibility 0s;
}

/* A grid row only collapses if its content is allowed to be clipped. */
.faq-answer > p {
    min-height: 0;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .faq-answer,
    .faq-item.is-open .faq-answer {
        transition: none;
    }
}

/* --- Customer references (step 1) --------------------------------------- */
/*
 * The prototype pins the card at 304px because it holds a single quote. The
 * references rotate through four of different lengths, so the card has to be
 * able to grow instead of letting the longest one spill out of it. Only in the
 * wide layout - the breakpoint is step1.css's own, and below it base.css
 * already lets the card grow from min-height 168px.
 */
@media (min-width: 661px) {
    .quote-card {
        height: auto;
        min-height: 304px;
    }
}

/*
 * The rotation fades instead of cutting: embed.js fades the outgoing reference
 * out, swaps them, then fades the incoming one in. The two never overlap, so
 * the card keeps its natural height and needs no absolute positioning.
 */
[data-testimonial],
[data-testimonial-avatar] {
    transition: opacity 320ms ease;
}

[data-testimonial].is-fading,
[data-testimonial-avatar].is-fading {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    [data-testimonial],
    [data-testimonial-avatar] {
        transition: none;
    }
}

/* --- Partner details block (partner horoscope only) --------------------- */
/* Same grid and height as the personal details block: 6 fields in two columns. */
.order-partner-block {
    height: 298px;
}

/* --- "Horoskop si přeji od data" block (yearly horoscope only) ----------- */
.order-period-block {
    height: auto;
    padding-bottom: 32px;
}

.order-period-selects {
    display: flex;
    gap: 8px;
}

.order-period-selects select {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}

.order-field input[disabled] {
    color: var(--gold);
    background: var(--surface-1);
}

/* --- Validation errors --------------------------------------------------- */
.order-alert {
    width: 664px;
    max-width: 100%;
    margin: 0 0 24px;
    padding: 16px 20px;
    border: 1px solid var(--red);
    background: var(--surface-1);
    color: var(--red);
    font-family: var(--font-normal);
    font-size: 14px;
    line-height: 22px;
}

.order-alert ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.order-field.has-error {
    height: auto;
    min-height: 62px;
}

.order-field.has-error input,
.order-field.has-error select {
    border-color: var(--red);
}

.order-error {
    display: block;
    margin-top: 4px;
    color: var(--red);
    font-family: var(--font-normal);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

/*
 * Radio groups and consent checkboxes are not .order-field, so they need their
 * own spacing - and the consent block is a flex column, where an <em> would
 * otherwise inherit the gap meant for whole checkbox rows.
 */
.order-delivery-block .order-error,
.order-payment-block .order-error {
    margin-top: 12px;
}

.order-consents .order-error {
    margin-top: -4px;
}

.order-consents label.has-error span {
    color: var(--red);
}

@media (min-width: 541px) and (max-width: 850px) {
    .order-alert {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 540px) {
    .order-alert {
        width: 100%;
        margin-left: 0;
    }

    .order-partner-block,
    .order-period-block {
        height: auto;
        padding-bottom: 40px;
    }

    .order-period-selects select {
        font-size: 16px;
        line-height: 28px;
    }
}

/* --- Hand-off to the payment gateway ------------------------------------ */
/*
 * `.primary-button` is a fixed 267px wide (274px below 540px) and everything is
 * border-box, so a label longer than the design's runs straight over the 32px of
 * padding and out of the button - which is what "Pokračovat na platební bránu"
 * does. On this page the button sizes to its own text instead, and wraps to a
 * second line rather than overflow once the frame gets narrow.
 */
body[data-state="card-gateway"] .primary-button {
    width: auto;
    height: auto;
    min-height: 48px;
    padding-block: 10px;
    white-space: normal;
}

/* --- Product sample ------------------------------------------------------ */
/*
 * One page of the sample at a time, at the width of the content column, with
 * the pager above and below it. The width and height attributes on the image
 * reserve its space before it loads, so the height reported to the partner page
 * does not jump. The heading shares `.order-hero` with step 2 but carries the
 * back link too, so it cannot keep that block's fixed height.
 */
.sample-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    height: auto;
    min-height: 0;
    padding-bottom: 32px;
}

.sample-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 664px;
    max-width: 100%;
    padding: 16px 0;
}

.sample-pager-status {
    color: var(--ink);
    font-size: 14px;
    line-height: 18px;
    white-space: nowrap;
}

.sample-link.is-disabled {
    color: var(--surface-3);
    pointer-events: none;
}

.sample-page {
    width: 664px;
    max-width: 100%;
    margin: 0;
}

.sample-page img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--surface-3);
    background: var(--surface-1);
}

.sample-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 664px;
    max-width: 100%;
    padding: 32px 0 48px;
}