/* =========================================================================
 * Gift Card page (/gift-card/) — layout only.
 *
 * Loaded only on the gift-card page via dealer_gift_card_enqueue_assets().
 * The rules popup reuses the shared .dealer-info-modal skin from components.css;
 * this file only adds the page layout plus the ordered-list rhythm inside that
 * modal (components.css styles modal <p> but not <ol>).
 *
 * Source of truth: docs/systems/GIFT-CARD-SYSTEM.md
 * ========================================================================= */

/* Strip Storefront's default article chrome so the centered layout sits clean
 * (mirrors the wishlist page; the default page header is removed in PHP). */
.dealer-gift-card-page article.page {
    border: 0;
    padding: 0;
}

.dealer-gift-card-page .entry-content {
    margin: 0;
}

/* -------------------------------------------------------------------------
 * Page shell — single centered column with consistent vertical rhythm.
 * ------------------------------------------------------------------------- */

.dealer-gift-card {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding-block: 25px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

/* -------------------------------------------------------------------------
 * Brand logo (page header).
 * ------------------------------------------------------------------------- */

.dealer-gift-card__brand {
    display: flex;
    justify-content: center;
}

.dealer-gift-card__logo {
    display: block;
    width: 168px;
    height: auto;
}

/* -------------------------------------------------------------------------
 * Intro — gift card visual + available denominations, side by side.
 * ------------------------------------------------------------------------- */

.dealer-gift-card__intro {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}

.dealer-gift-card__card {
    max-width: 300px;
    min-width: 0;
}

.dealer-gift-card__card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.dealer-gift-card__denominations {
    flex: 0 1 auto;
    padding-top: 4px;
}

.dealer-gift-card__denominations-title {
    margin: 0 0 12px;
    color: var(--color-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dealer-gift-card__denominations-list {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
    color: var(--color-primary);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 2;
}

/* -------------------------------------------------------------------------
 * Steps — "how it works" line-art strip with arrow separators.
 * Sized by uniform height so the differently-proportioned illustrations
 * share one baseline row. Decorative: images carry no alt, the section has
 * a visually-hidden heading.
 * ------------------------------------------------------------------------- */

.dealer-gift-card__steps {
    width: 100%;
}

.dealer-gift-card__steps-list {
    margin: 0;
    padding: 0 0 4px;
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    /* Mobile: keep the single-row flow and scroll if it overflows. */
    justify-content: flex-start;
    overflow-x: auto;
}

.dealer-gift-card__step {
    flex: 0 0 auto;
}

.dealer-gift-card__step-img {
    display: block;
    height: 60px;
    width: auto;
}

.dealer-gift-card__step-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--color-black);
}

.dealer-gift-card__step-arrow svg {
    width: 20px;
    height: 20px;
}

/* -------------------------------------------------------------------------
 * Actions — rules trigger + primary CTA, constrained and centered.
 * ------------------------------------------------------------------------- */

.dealer-gift-card__actions {
    width: 100%;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.dealer-gift-card__rules {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-align: center;
}

.dealer-gift-card__rules:hover {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: transparent;
    text-align: center;
}

.dealer-gift-card__rules-icon {
    flex: 0 0 auto;
}

/* Single sizing override on the shared primary CTA — the design calls for a
 * taller, more prominent button. Skin (fill, radius, shadow, font, color)
 * stays owned by .btn-primary in components.css. */
.dealer-gift-card__cta {
    height: 50px;
}

/* -------------------------------------------------------------------------
 * Rules info-modal — ordered list rhythm + emphasized lead lines.
 * Reuses .dealer-info-modal shell; only the list/lead need page-local rules.
 * ------------------------------------------------------------------------- */

.dealer-gift-card-rules__lead {
    font-weight: var(--font-weight-medium);
}

.dealer-gift-card-rules__steps {
    margin: 0;
    padding-left: 20px;
    list-style: decimal;
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: var(--font-weight-light);
    line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Tablet and up — bigger logo, roomier rhythm, centered non-scrolling strip.
 * ------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .dealer-gift-card {
        padding-block: 50px 50px;
        gap: 50px;
    }

    .dealer-gift-card__logo {
        width: 200px;
    }

    .dealer-gift-card__intro {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: row;
        gap: 40px;
    }

    .dealer-gift-card__card {
        flex-basis: 340px;
        flex: 0 1 300px;
        max-width: 300px;
        min-width: 0;
    }

    .dealer-gift-card__steps-list {
        justify-content: center;
        flex-wrap: nowrap;
        gap: 20px;
        overflow-x: visible;
    }

    .dealer-gift-card__step-img {
        height: 90px;
    }

    .dealer-gift-card__step-arrow svg {
        width: 24px;
        height: 24px;
    }
}

@media (min-width: 1024px) {
    .dealer-gift-card__intro {
        flex-direction: row;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 50px;
    }
}