/* =====================================================================
   offer-zone.css — loads only on /offer-zone.
   ---------------------------------------------------------------------
   The .offer-nav-pill nav item is styled in style.css instead, because it
   renders in the header on every page.

   Everything here is built on the theme's existing custom properties, so
   the page picks up a palette change automatically. The campaign artwork
   supplies the colour; this sheet stays deliberately quiet around it.
   ===================================================================== */

/* =====================================================================
   CAMPAIGN HERO
   ===================================================================== */
.offer-hero {
    position: relative;
    overflow: hidden;
}

.offer-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 54px;
    align-items: center;
}

@media (max-width: 991px) {
    .offer-hero-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }
}

/* ---------- Artwork ---------- */
.offer-hero-art {
    border-radius: 26px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 22px 50px rgba(58, 45, 34, .16);
}

.offer-hero-art img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 991px) {
    .offer-hero-art {
        max-width: 460px;
        margin: 0 auto;
    }
}

/* ---------- Copy ---------- */
.offer-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--smoke-color);
    color: var(--theme-color);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 30px;
    margin-bottom: 18px;
}

.offer-hero-title {
    font-size: 54px;
    line-height: 1.06;
    margin: 0 0 6px;
    color: var(--title-color);
}

.offer-hero-title em {
    display: block;
    font-style: normal;
    color: var(--theme-color);
}

.offer-hero-sub {
    font-size: 19px;
    font-weight: 600;
    color: var(--body-color);
    margin: 0 0 20px;
}

@media (max-width: 575px) {
    .offer-hero-title {
        font-size: 38px;
    }

    .offer-hero-sub {
        font-size: 17px;
    }
}

/* Big "UP TO 50% OFF" slab. */
.offer-hero-slab {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    background: var(--theme-color);
    color: var(--white-color);
    border-radius: 18px;
    padding: 14px 26px;
    margin-bottom: 22px;
    box-shadow: 0 10px 26px rgba(198, 136, 110, .34);
}

.offer-hero-slab .slab-upto {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .92;
}

.offer-hero-slab .slab-num {
    font-family: var(--title-font);
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
}

.offer-hero-slab .slab-off {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

@media (max-width: 575px) {
    .offer-hero-slab .slab-num {
        font-size: 38px;
    }
}

/* Date / store line under the slab. */
.offer-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-bottom: 26px;
    font-size: 15px;
    color: var(--body-color);
}

.offer-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.offer-hero-meta i {
    color: var(--theme-color);
}

.offer-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* =====================================================================
   HIGHLIGHT STRIP
   ===================================================================== */
.offer-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 991px) {
    .offer-highlights {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .offer-highlights {
        grid-template-columns: 1fr;
    }
}

.offer-highlight {
    background: var(--white-color);
    border: 1px solid var(--th-border-color);
    border-radius: 18px;
    padding: 24px 20px;
    text-align: center;
}

.offer-highlight i {
    font-size: 26px;
    color: var(--theme-color);
    display: block;
    margin-bottom: 10px;
}

.offer-highlight-num {
    display: block;
    font-family: var(--title-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--title-color);
    line-height: 1.2;
}

.offer-highlight-lbl {
    display: block;
    font-size: 13.5px;
    color: var(--body-color);
    margin-top: 4px;
}

/* =====================================================================
   RATE CARDS
   ===================================================================== */
.offer-rates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    align-items: start;
}

@media (max-width: 991px) {
    .offer-rates {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.offer-rate-panel {
    background: var(--white-color);
    border: 1px solid var(--th-border-color);
    border-radius: 22px;
    overflow: hidden;
}

.offer-rate-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: var(--smoke-color);
    border-bottom: 1px solid var(--th-border-color);
}

.offer-rate-head i {
    font-size: 20px;
    color: var(--theme-color);
}

.offer-rate-head h3 {
    margin: 0;
    font-size: 20px;
    color: var(--title-color);
}

.offer-rate-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.offer-rate-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
    transition: background .25s ease;
}

.offer-rate-list li + li {
    border-top: 1px solid var(--smoke-color);
}

.offer-rate-list li:hover {
    background: var(--smoke-color);
}

/* The item name. Rendered as a link when we have a page for it, and as
   plain text when we do not — both must look identical at rest. */
.offer-rate-name {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--title-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

a.offer-rate-name:hover {
    color: var(--theme-color);
}

/* Small arrow that only appears on linked rows, so a shopper can tell at a
   glance which rows go somewhere. */
a.offer-rate-name::after {
    content: "\f061";
    font-family: var(--icon-font);
    font-weight: 300;
    font-size: 10px;
    opacity: 0;
    transform: translateX(-4px);
    transition: .25s ease;
}

a.offer-rate-name:hover::after {
    opacity: .7;
    transform: translateX(0);
}

.offer-rate-pct {
    flex: 0 0 auto;
    background: var(--smoke-color2);
    color: var(--theme-color);
    font-family: var(--title-font);
    font-size: 15px;
    font-weight: 700;
    padding: 5px 13px;
    border-radius: 30px;
    white-space: nowrap;
}

/* Top rate in each panel gets the solid treatment. */
.offer-rate-list li.is-top .offer-rate-pct {
    background: var(--theme-color);
    color: var(--white-color);
}

/* =====================================================================
   TERMS
   ===================================================================== */
.offer-terms-card {
    background: var(--smoke-color);
    border-radius: 22px;
    padding: 34px 36px;
}

@media (max-width: 575px) {
    .offer-terms-card {
        padding: 26px 22px;
    }
}

.offer-terms-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    margin: 0 0 16px;
    color: var(--title-color);
}

.offer-terms-title i {
    color: var(--theme-color);
}

.offer-terms-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 40px;
}

@media (max-width: 767px) {
    .offer-terms-list {
        columns: 1;
    }
}

.offer-terms-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 11px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--body-color);
    break-inside: avoid;
}

.offer-terms-list li::before {
    content: "\f00c";
    font-family: var(--icon-font);
    font-weight: 300;
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--theme-color);
    font-size: 12px;
}

/* =====================================================================
   "HOW TO CLAIM" STEPS
   ===================================================================== */
.offer-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 767px) {
    .offer-steps {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

.offer-step {
    background: var(--white-color);
    border: 1px solid var(--th-border-color);
    border-radius: 18px;
    padding: 28px 24px;
    text-align: center;
}

.offer-step-num {
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--smoke-color);
    color: var(--theme-color);
    font-family: var(--title-font);
    font-size: 19px;
    font-weight: 700;
}

.offer-step-title {
    font-size: 18px;
    margin: 0 0 8px;
    color: var(--title-color);
}

.offer-step-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--body-color);
}

/* =====================================================================
   EMPTY STATE — used between campaigns, when no offer is running.
   ===================================================================== */
.offer-empty {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    padding: 54px 30px;
    background: var(--white-color);
    border: 2px dashed var(--th-border-color);
    border-radius: 22px;
}

.offer-empty-icon {
    font-size: 46px;
    color: var(--theme-color);
    opacity: .55;
    margin-bottom: 14px;
    display: block;
}

.offer-empty-title {
    font-size: 24px;
    margin: 0 0 10px;
    color: var(--title-color);
}

.offer-empty-text {
    color: var(--body-color);
    margin: 0 0 22px;
    line-height: 1.75;
}

.offer-empty-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}