/* ===============================================================
   JP EXPRESS — OFFERS PAGE STYLES
   Page isolation: .page-offers
   ---------------------------------------------------------------
   • Only page-specific classes live here.
   • All shared/base classes (hero, page-hero, hero-bg, hero-copy,
     page-crumb, hero-kicker, accent, final-cta, final-cta-art,
     cta-inner, cta-copy, cta-actions, btn-main, btn-white,
     btn-white-outline, footer*, fab-side, fab-bar, container-fluid)
     come from style.css — NOT duplicated here.
   • No class from media-center.css is used on this page.
   =============================================================== */

/* --- Section --- */
.page-offers .offer-section {
    padding: clamp(34px, 6vw, 70px) 0;
    background: #f6f8fc;
}

.page-offers .offer-section-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: end;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.page-offers .offer-section-head h2 {
    font-weight: 800;
    color: #17204f;
    margin: 8px 0;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
}

.page-offers .offer-section-head>div>span {
    font-size: 12px;
    letter-spacing: .14em;
    font-weight: 800;
    color: #f26323;
    text-transform: uppercase;
}

.page-offers .offer-section-head p {
    max-width: 390px;
    color: #667085;
    font-size: 14px;
    margin: 0;
}

/* --- Filter chips --- */
.page-offers .offer-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.page-offers .offer-filter {
    border: 1.5px solid #dce6f2;
    background: #fff;
    color: #64748b;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

.page-offers .offer-filter:hover {
    border-color: #2b3990;
    color: #2b3990;
}

.page-offers .offer-filter.active {
    background: #2b3990;
    border-color: #2b3990;
    color: #fff;
    box-shadow: 0 4px 12px rgba(43, 57, 144, .22);
}

.page-offers .offer-filter b {
    margin-left: 6px;
    font-size: 11px;
    opacity: .7;
}

.page-offers .offer-filter[hidden] {
    display: none !important;
}

.page-offers .offer-filter:focus-visible,
.page-offers .offer-fb-btn:focus-visible,
.page-offers .offer-reset:focus-visible,
.page-offers .offer-search-clear:focus-visible {
    outline: 3px solid #2b3990;
    outline-offset: 3px;
}

/* --- Toolbar: filters + search --- */
.page-offers .offer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.page-offers .offer-toolbar[hidden] {
    display: none !important;
}

.page-offers .offer-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 300px;
    min-width: 220px;
}

.page-offers .offer-search>i {
    position: absolute;
    left: 16px;
    font-size: 13px;
    color: #94a3b8;
    pointer-events: none;
}

.page-offers .offer-search input {
    width: 100%;
    height: 44px;
    padding: 0 44px 0 40px;
    border: 1.5px solid #dce6f2;
    border-radius: 999px;
    background: #fff;
    color: #17204f;
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s, box-shadow .2s;
}

.page-offers .offer-search input::placeholder {
    color: #94a3b8;
}

.page-offers .offer-search input::-webkit-search-cancel-button {
    display: none;
}

.page-offers .offer-search input:focus {
    outline: 0;
    border-color: #2b3990;
    box-shadow: 0 0 0 4px rgba(43, 57, 144, .12);
}

.page-offers .offer-search-clear {
    position: absolute;
    right: 6px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #eef2f9;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
}

.page-offers .offer-search-clear[hidden] {
    display: none !important;
}

.page-offers .offer-status {
    margin: 0 0 20px;
    font-size: 13px;
    font-weight: 600;
    color: #75849b;
    min-height: 19px;
}

/* --- Card grid --- */
.page-offers .offer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.page-offers .offer-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e9f2;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(20, 30, 80, .07);
    display: flex;
    flex-direction: column;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    animation: offerCardIn .5s ease backwards;
}

.page-offers .offer-card:nth-child(2) {
    animation-delay: .06s;
}

.page-offers .offer-card:nth-child(3) {
    animation-delay: .12s;
}

.page-offers .offer-card:nth-child(4) {
    animation-delay: .18s;
}

.page-offers .offer-card:nth-child(5) {
    animation-delay: .24s;
}

.page-offers .offer-card:nth-child(6) {
    animation-delay: .3s;
}

@keyframes offerCardIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.page-offers .offer-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(20, 30, 80, .14);
    border-color: rgba(242, 99, 35, .35);
}

/* --- Card image --- */
.page-offers .offer-image {
    height: 220px;
    position: relative;
    display: block;
    overflow: hidden;
    background: #e9edf7;
    flex: 0 0 auto;
}

.page-offers .offer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.page-offers .offer-card:hover .offer-image img {
    transform: scale(1.06);
}

/* gradient overlay on image */
.page-offers .offer-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 20, 60, .55) 0%, transparent 50%);
    pointer-events: none;
}

/* category badge on image */
.page-offers .offer-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: rgba(242, 99, 35, .95);
    color: #fff;
    padding: 5px 12px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(242, 99, 35, .35);
}

/* validity badge */
.page-offers .offer-validity {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 2;
    background: rgba(255, 255, 255, .95);
    color: #202b68;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

.page-offers .offer-validity i {
    color: #f26323;
    font-size: 11px;
}

.page-offers .offer-validity.is-expired {
    background: #fee2e2;
    color: #991b1b;
}

.page-offers .offer-validity.is-expired i {
    color: #991b1b;
}

/* --- Card body --- */
.page-offers .offer-copy {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.page-offers .offer-copy h3 {
    font-size: 19px;
    font-weight: 800;
    color: #17204f;
    margin: 0 0 8px;
    line-height: 1.3;
}

.page-offers .offer-copy p {
    color: #667085;
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 18px;
    flex: 1;
}

/* Facebook CTA button */
.page-offers .offer-fb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 10px;
    background: #f26323;
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
    transition: background .2s, transform .2s, gap .2s;
    margin-top: auto;
    border: 0;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.page-offers .offer-fb-btn:hover {
    background: #d9531e;
    transform: translateY(-2px);
    gap: 12px;
    color: #fff;
}

.page-offers .offer-fb-btn i {
    font-size: 15px;
}

/* hidden cards/grid (display:flex/grid would otherwise override [hidden]) */
.page-offers .offer-card[hidden],
.page-offers .offer-grid[hidden] {
    display: none !important;
}

/* category / destination label */
.page-offers .offer-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #eef1fb;
    color: #2b3990;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.page-offers .offer-tag i {
    font-size: 10px;
    color: #f26323;
}

/* "x days left" pill */
.page-offers .offer-validity.is-soon {
    background: #f26323;
    color: #fff;
}

.page-offers .offer-validity.is-soon i {
    color: #fff;
}

/* archived / expired offers */
.page-offers .offer-card.is-archived .offer-image img {
    filter: grayscale(.55) brightness(.96);
}

.page-offers .offer-card.is-archived .offer-badge {
    background: rgba(43, 57, 144, .95);
    box-shadow: 0 4px 12px rgba(43, 57, 144, .35);
}

.page-offers .offer-card.is-archived .offer-fb-btn {
    background: #2b3990;
}

.page-offers .offer-card.is-archived .offer-fb-btn:hover {
    background: #202b68;
}

.page-offers .offer-card:focus-within {
    border-color: rgba(242, 99, 35, .55);
    box-shadow: 0 22px 48px rgba(20, 30, 80, .14);
}

/* no sticky hover lift on touch screens */
@media (hover: none) {
    .page-offers .offer-card:hover {
        transform: none;
    }

    .page-offers .offer-card:hover .offer-image img {
        transform: none;
    }
}

/* --- Empty state --- */
.page-offers .offer-empty {
    text-align: center;
    padding: 48px 24px;
    border: 1.5px dashed #d4deea;
    border-radius: 18px;
    background: #fff;
    color: #75849b;
    grid-column: 1 / -1;
}

.page-offers .offer-empty[hidden] {
    display: none !important;
}

.page-offers .offer-empty i {
    font-size: 40px;
    color: #c3cde0;
    margin-bottom: 12px;
    display: block;
}

.page-offers .offer-empty strong {
    display: block;
    font-size: 17px;
    color: #17204f;
    margin-bottom: 6px;
}

.page-offers .offer-empty p {
    font-size: 14px;
    margin: 0 0 16px;
}

.page-offers .offer-empty-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.page-offers .offer-empty .offer-fb-btn {
    width: auto;
    margin-top: 0;
    padding: 11px 20px;
}

.page-offers .offer-reset {
    padding: 11px 20px;
    border: 1.5px solid #2b3990;
    border-radius: 10px;
    background: #fff;
    color: #2b3990;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.page-offers .offer-reset:hover {
    background: #2b3990;
    color: #fff;
}

.page-offers .offer-reset[hidden] {
    display: none !important;
}


/* ===============================================================
   RESPONSIVE
   =============================================================== */
@media (max-width: 991px) {
    .page-offers .offer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .page-offers .offer-section-head {
        display: block;
    }

    .page-offers .offer-section-head p {
        margin-top: 6px;
        max-width: 100%;
    }

    .page-offers .offer-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .page-offers .offer-image {
        height: 190px;
    }

    .page-offers .offer-copy {
        padding: 17px;
    }

    .page-offers .offer-copy h3 {
        font-size: 18px;
    }

    .page-offers .offer-filter {
        padding: 7px 14px;
        font-size: 12.5px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* one scrollable row + fade hint */
    .page-offers .offer-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
        mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
        padding-right: 24px;
    }

    .page-offers .offer-filters::-webkit-scrollbar {
        display: none;
    }

    /* search on top, full width; chips scroll below */
    .page-offers .offer-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .page-offers .offer-filters {
        flex: none;
        width: 100%;
    }

    .page-offers .offer-search {
        order: -1;
        flex: none;
        width: 100%;
        min-width: 0;
    }

    /* 16px stops iOS from zooming on focus */
    .page-offers .offer-search input {
        font-size: 16px;
    }

    .page-offers .offer-empty {
        padding: 36px 18px;
    }

    .page-offers .offer-empty-actions>* {
        flex: 1 1 100%;
    }
}

@media (max-width: 380px) {
    .page-offers .offer-copy h3 {
        font-size: 16.5px;
    }

    .page-offers .offer-copy p {
        font-size: 13px;
    }

    .page-offers .offer-image {
        height: 160px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .page-offers .offer-card,
    .page-offers .offer-image img,
    .page-offers .offer-fb-btn {
        animation: none !important;
        transition: none !important;
    }
}