/* ================================================================
   hot-deals.css
   Styles for: Hero section + Hot Deals accordion section
   Layout host: _Layout.cshtml / master.cshtml
   ================================================================ */

/* ── Variables ──────────────────────────────────────────────────── */
:root {
    --hd-primary: #003B70;
    --hd-secondary: #00C4B3;
    --hd-secondary-bg: rgba(0, 196, 179, 0.12);
    --hd-border: #D3D3D3;
    --hd-text-dark: #003B70;
    --hd-text-grey: #6A7282;
    --hd-white: #FFFFFF;
    --hd-logo-border: #EBEBEB;
    --hd-radius-card: 16px;
    --hd-radius-logo: 16px;
    --hd-font: 'Co Headline', sans-serif;
}


/* ================================================================
   HERO SECTION
   ================================================================ */
.hotDeal_hero {
    position: relative;
    width: 100%;
    height: 563px;
    background: linear-gradient(90.3deg, #00C4B3 0.24%, rgba(0, 59, 112, 0) 99.74%);
    overflow: hidden;
}

.hotDeal_hero-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.hotDeal_hero-inner {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
    z-index: 1; /* sits above the <img> */
}

.hotDeal_hero-title {
    position: absolute;
    left: 32px;
    bottom: 46px;
    font-family: var(--hd-font);
    font-weight: 400;
    font-size: 40px;
    line-height: 116%;
    text-transform: capitalize;
    color: #FFFFFF;
    margin: 0;
}

/* ================================================================
   HOT DEALS SECTION  (wraps badge + accordion)
   ================================================================ */
.hotDeal_section {
    width: 100%;
    padding: 20px 30px;
    box-sizing: border-box;
}

.hotDeal_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin: 0 auto;
    width: 100%;
}


/* ── Badge ──────────────────────────────────────────────────────── */
.hotDeal_badge-wrap {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    gap: 10px;
    background: rgba(0, 196, 179, 0.08);
    border-radius: 300px;
}

.hotDeal_badge-dot {
    width: 4px;
    height: 4px;
    background: var(--hd-secondary);
    border-radius: 200px;
    flex-shrink: 0;
    display: none !important;
}

.hotDeal_badge-text {
    font-family: var(--hd-font);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    color: var(--hd-secondary);
}


/* ── Accordion wrapper ──────────────────────────────────────────── */
.hotDeal_accordion-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}


/* ================================================================
   ACCORDION ITEM  (closed state = teal-tinted bg + border)
   ================================================================ */
.hotDeal_accordion-item {
    box-sizing: border-box;
    width: 100%;
    background: var(--hd-secondary-bg);
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-card);
    overflow: hidden;
    transition: border-color 0.25s ease;
}
.hotDeal_accordion-item.hotDeal_open {
    box-sizing: border-box;
    width: 100%;
    background: var(--hd-secondary-bg);
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-card);
    overflow: hidden;
    transition: border-color 0.25s ease;
}
/* ── Header row ─────────────────────────────────────────────────── */
.hotDeal_accordion-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 16px;
    gap: 16px;
    min-height: 84px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    box-sizing: border-box;
    width: 100%;
    background: none;
    border: none;
    text-align: inherit;
    font: inherit;
    color: inherit;
}


/* ── Logo bubble ─────────────────────────────────────────────────── */
.hotDeal_logo-wrap {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    background: var(--hd-white);
    border: 1px solid var(--hd-logo-border);
    border-radius: var(--hd-radius-logo);
    overflow: hidden;
}

    .hotDeal_logo-wrap img {
        max-width: 66px;
        max-height: 66px;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 7px;
    }

.hotDeal_logo-wrap--text {
    padding: 8px;
}


/* ── Item title ──────────────────────────────────────────────────── */
.hotDeal_item-title {
    flex: 1;
    font-family: var(--hd-font);
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    color: var(--hd-secondary);
}


/* ── Chevron ─────────────────────────────────────────────────────── */
.hotDeal_chevron {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    stroke: var(--hd-primary);
    transition: transform 0.3s ease;
}

.hotDeal_accordion-item.hotDeal_open .hotDeal_chevron {
    transform: rotate(-180deg);
}


/* ================================================================
   ACCORDION BODY  (collapsed by default)
   ================================================================ */
.hotDeal_accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hotDeal_accordion-item.hotDeal_open .hotDeal_accordion-body {
    max-height: 3000px;
}


/* ── Body inner ──────────────────────────────────────────────────── */
.hotDeal_accordion-body-inner {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 16px 25px 17px;
    gap: 16px;
    background: var(--hd-white);
    border-top: 1px solid var(--hd-border);
    border-radius: 0 0 var(--hd-radius-card) var(--hd-radius-card);
}

/* ── Rich-text tables (fixed pt widths from Word/CMS paste) ─────────
   .hotDeal_accordion-body is overflow:hidden for the collapse animation,
   so a table wider than the viewport was getting clipped instead of
   scrolling. Scrolling the table's own flex-item box (rather than capping
   its width) keeps every column intact instead of squashing them. */
.hotDeal_accordion-body-inner table {
    margin:0px !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
}

/* Cells kept to one line rather than wrapping: a header like "Cap for number
   of usages per year" wrapping to 5 lines while its neighbours wrap to 1
   made rows visually uneven and the data hard to follow — one line per cell
   keeps every row the same height, so columns stay readable while scrolling. */
.hotDeal_accordion-body-inner table td,
.hotDeal_accordion-body-inner table th {
    white-space: nowrap;
}


/* ── Terms title ─────────────────────────────────────────────────── */
.hotDeal_terms-title {
    font-family: var(--hd-font);
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 35px;
    color: var(--hd-text-dark);
    margin: 0;
}


/* ── Terms bullet list ───────────────────────────────────────────── */



    .hotDeal_terms-list a {
        color: var(--hd-secondary);
        text-decoration: none;
    }

        .hotDeal_terms-list a:hover {
            text-decoration: underline;
        }


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1280px) {
    .hotDeal_hero-inner,
    .hotDeal_hero-title {
        left: 32px;
    }
}

@media (max-width: 768px) {
    .hotDeal_hero {
        height: 320px;
    }

    .hotDeal_hero-title {
        font-size: 28px;
        bottom: 24px;
        left: 20px;
    }

    .hotDeal_section {
        padding: 32px 16px;
    }

    .hotDeal_accordion-header {
        padding: 8px 12px;
        gap: 12px;
        min-height: 72px;
    }

    .hotDeal_logo-wrap {
        width: 52px;
        height: 52px;
    }

        .hotDeal_logo-wrap img {
            max-width: 50px;
            max-height: 50px;
        }

    .hotDeal_item-title {
        font-size: 16px;
    }

    .hotDeal_accordion-body-inner {
        padding: 14px 12px 20px 12px;
    }

    .hotDeal_terms-title {
        font-size: 16px;
    }
}

/* ── Richtext content from Umbraco ──────────────────────────────── */
/* Content pasted into the rich text editor (from Word, etc.) carries its own
   inline font-family (Arial, Aptos, CoText-Light, ...) on nested spans/p/a/
   li/td — inline styles beat any external rule without !important, so every
   descendant is forced back to the site font here regardless of how deep it
   sits or what it was pasted with. */
.hotDeal_accordion-body-inner,
.hotDeal_accordion-body-inner * {
    font-family: 'Co Headline', sans-serif !important;
}

/* ── Opening paragraph (large intro text) ───────────────────────── */
.hotDeal_accordion-body-inner > p:first-child {
    font-family: 'Co Headline', sans-serif;
    font-size: 20px;
    line-height: 35px;
    color: #6A7282;
    margin: 0;
}

/* ── All other direct paragraphs ────────────────────────────────── */
.hotDeal_accordion-body-inner > p {
    font-weight:300;
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    line-height: 28px;
    color: #6A7282;
    margin: 0;
}

/* ── h4 subheadings (The Experience, Pricing, etc.) ─────────────── */
/* Override the navy h4 — all richtext h4s are grey + underlined */
.hotDeal_accordion-body-inner h4 {
    font-family: 'Co Headline', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 35px;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: #6A7282;
    margin: 0;
}

    /* ── Terms & Conditions h4 ONLY — navy, no underline ────────────── */
    .hotDeal_accordion-body-inner h4.hotDeal_terms-title,
    .hotDeal_accordion-body-inner h4:has(+ ul) {
        font-family: 'Co Headline', sans-serif;
        font-size: 20px;
        line-height: 35px;
        text-decoration: none;
        color: #003B70;
        margin: 0;
    }

/* ── Section block wrapper gap (heading + its content) ──────────── */
.hotDeal_accordion-body-inner > * + * {
    margin-top: 16px;
}

/* tighter gap between a heading and its direct sibling paragraph/ul */
.hotDeal_accordion-body-inner h4 + p,
.hotDeal_accordion-body-inner h4 + ul {
    margin-top: 4px;
}

/* ── Paragraph inside How to Redeem (underlined link) ───────────── */
.hotDeal_accordion-body-inner > p > a {
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    line-height: 28px;
    color: #6A7282;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.hotDeal_accordion-body-inner p > strong:only-child,
.hotDeal_accordion-body-inner p > strong:only-child span {
    font-family: 'Co Headline', sans-serif !important;
}
    .hotDeal_accordion-body-inner > p > a:hover {
        color: #00C4B3;
    }

/* ── Bold (Vendor phone / email) ────────────────────────────────── */
.hotDeal_accordion-body-inner strong,
.hotDeal_accordion-body-inner b {
    font-weight: 400;
    color: #1a1a2e;
    font-family:'Co Headline' !important;
}

/* ── Small note inside pricing paragraph ────────────────────────── */
.hotDeal_accordion-body-inner small {
    font-size: 12px;
    color: #6A7282;
    font-family: 'Co Headline' !important;
}

/* ── ul bullet list ─────────────────────────────────────────────── */
.hotDeal_accordion-body-inner ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .hotDeal_accordion-body-inner ul li {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
    }

        .hotDeal_accordion-body-inner ul li::before {
            content: '';
            display: inline-block;
            flex-shrink: 0;
            width: 8px;
            height: 8px;
            min-width: 8px;
            background: #00C4B3;
            border-radius: 50%;
            margin-top: 8px;
        }

        .hotDeal_accordion-body-inner ul li p {
            font-weight:300;
            font-family: 'Co Headline', sans-serif;
            font-size: 14px;
            line-height: 24px;
            color: #6A7282;
            margin: 0;
        }

            /* ── Teal links inside li (inline URLs) ─────────────────────────── */
            .hotDeal_accordion-body-inner ul li p a {
                color: #00C4B3;
                text-decoration: none;
            }

                .hotDeal_accordion-body-inner ul li p a:hover {
                    text-decoration: underline;
                }

@media (max-width: 480px) {
    .hotDeal_hero {
        height: 240px;
    }

    .hotDeal_hero-title {
        font-size: 24px;
        bottom: 20px;
        left: 16px;
    }

    .hotDeal_section {
        padding: 32px 16px;
    }
}