/* Homepage Seller Coupons section — scoped with hc- prefix */

/* Outer color band. Padding matches .kb-brands-section exactly (40px 36px)
   so this section's inset matches Featured Brands / Featured Products —
   no fixed-width container, those sections don't use one either. */
.hc-band{
    padding: 40px 36px;
}

.hc-head{
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    margin-bottom:20px; flex-wrap:nowrap;
}
.hc-head-left{
    display:flex; align-items:baseline; gap:16px; min-width:0; flex:1 1 auto; overflow:hidden;
}
.hc-head-left h2{ margin:0; font-size:23px; font-weight:700; color:#FFF; letter-spacing:-.015em; white-space:nowrap; flex:0 0 auto; }
.hc-head-left p{ margin:0; font-size:14px; color:#A8B0C4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.hc-view-all{
    text-decoration:none; border:1px solid #55607A; background:rgba(255,255,255,.06);
    color:#FFF; font-size:13.5px; font-weight:600; padding:11px 22px; border-radius:999px;
    white-space:nowrap; flex:0 0 auto;
}
.hc-view-all:hover{ color:#FFF; text-decoration:none; background:rgba(255,255,255,.12); }

/* ---- Split ticket (1-2 count only — 3+ reuses the existing unscoped card) ---- */
.hc-pair-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.hc-single-grid{ display:grid; grid-template-columns:1fr; }

.hc-split-card{
    position:relative; border-radius:18px; overflow:hidden; background:#fff;
    display:grid; grid-template-columns:minmax(0,.7fr) 1px minmax(0,1.4fr);
    height:210px;
}
.hc-split-card.hc-wide{ grid-template-columns:minmax(0,.72fr) 1px minmax(0,1.85fr); height:242px; }

.hc-split-left{
    padding:22px; display:flex; flex-direction:column; gap:12px; justify-content:center; color:#fff;
    overflow:hidden;
}
.hc-wide .hc-split-left{ padding:26px; gap:14px; }
.hc-wide .hc-discount-amount{ font-size:38px; }
.hc-wide .hc-discount-terms{ font-size:13px; }

.hc-discount-amount{ font-size:32px; font-weight:700; line-height:1; margin:0; letter-spacing:-.02em; color:#fff; }
.hc-discount-terms{ font-size:12.5px; opacity:.94; line-height:1.45; margin:0; color:#fff; }
.hc-discount-terms strong{ font-weight:700; }

.hc-code-btn{
    align-self:stretch; display:flex; align-items:center; justify-content:space-between; gap:8px;
    background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.42); border-radius:999px;
    padding:7px 14px; font-size:12.5px; color:#fff; min-height:36px; cursor:pointer; overflow:hidden;
}
.hc-code-btn span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.hc-code-btn .hc-copy{ font-size:11px; opacity:.88; white-space:nowrap; flex:0 0 auto; }

/* Divider + notches — always match the section's actual background (--hc-bg),
   same variable used everywhere in this file so pair/single/grid stay consistent. */
.hc-split-divider{ position:relative; background: var(--hc-bg, #292933); }
.hc-split-divider::before{ content:""; position:absolute; inset:14px 0; border-left:1px dashed #C9C2B5; }
.hc-notch{
    position:absolute; left:-11px; width:22px; height:22px; border-radius:50%;
    background: var(--hc-bg, #292933);
}
.hc-notch.top{ top:-11px; }
.hc-notch.bottom{ bottom:-11px; }

.hc-split-right{ padding:20px; display:flex; flex-direction:column; justify-content:center; height:100%; }
.hc-wide .hc-split-right{ padding:22px; }

/* White side — enlarged logo + name + Visit Store, same for both coupon types */
.hc-centered-panel{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; height:100%;
}
.hc-logo{
    width:56px; height:56px; border-radius:50%; background:#F5F5F5; color:#00002e;
    font-size:18px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0;
    overflow:hidden;
}
.hc-logo img{ width:100%; height:100%; object-fit:contain; border-radius:50%; }
.hc-wide .hc-logo{ width:64px; height:64px; font-size:20px; }
.hc-shop-name{ font-size:17px; font-weight:700; color:#00002e; text-align:center; margin:0; }
.hc-wide .hc-shop-name{ font-size:19px; }
.hc-visit-link{ font-size:12.5px; font-weight:600; color:#FF4500; text-decoration:underline; }

@media (max-width: 900px){
    .hc-pair-grid{ grid-template-columns:1fr; }
}
@media (max-width: 600px){
    .hc-band{ padding: 24px 16px; }

    /* Header on mobile: heading + "View All Coupons" share the top line,
       button styling stripped to plain text; subtitle (only present if
       admin actually set one — get_setting can return empty) drops to
       its own full-width line below. */
    .hc-head{ flex-wrap:wrap; row-gap:8px; }
    .hc-head-left{ display:contents; }
    .hc-head-left h2{
        order:1; flex:1 1 auto; min-width:0;
        white-space:normal; font-size:20px; line-height:1.25;
    }
    .hc-view-all{
        order:2; flex:0 0 auto;
        border:none; background:none; padding:0;
        color:#FFF; text-decoration:none;
    }
    .hc-view-all:hover{ background:none; text-decoration:underline; }
    .hc-head-left p{
        order:3; flex:0 0 100%;
        white-space:normal; font-size:12.5px; margin-top:4px;
    }
}

/* ---- 3-8 count grid: uses coupons-grid.blade.php, our own independent
   ticket-card partial, not coupon_box.blade.php ---- */

/* This inner container-fluid exists ONLY to give Bootstrap's .row/.col the
   negative-margin context they need — NOT for spacing, since .hc-band
   already provides the section's actual padding. Zero it out here to
   avoid doubling up. */
.hc-grid-fix{
    padding-left: 0;
    padding-right: 0;
}

.hc-wrap .row.gutters-16 > .col{ display:flex; }

/* Ticket card (coupons-grid.blade.php) — our own code, so width and
   circle color are just normal rules, not overrides on someone else's
   markup. All children are position:absolute by design (matches the
   original ticket look exactly), so width:100% is required here same
   as it would be anywhere else this shape gets used. */
.hc-ticket-card{
    min-height:232px; border-radius:24px; width:100%;
    display:flex; align-items:center; position:relative;
}
.hc-ticket-notch{
    min-height:48px; min-width:48px; border-radius:50%;
    background: var(--hc-bg, #292933);
}

/* ---- Mobile (below md): horizontal swipe strip, every count uses our
   own coupons-grid.blade.php ticket card — matches the source design's
   own mobile treatment exactly (it never uses the split-ticket on mobile,
   at any count). ---- */
.hc-mobile-strip{
    display:flex; gap:12px; overflow-x:auto; padding:4px 4px 10px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.hc-mobile-strip::-webkit-scrollbar{ display:none; }

.hc-mobile-card{ flex:0 0 300px; scroll-snap-align:center; }
.hc-mobile-card.hc-mobile-card-single{ flex:0 0 100%; }

/* Dots — static indicator matching the source design (not scroll-synced
   via JS; the source design itself doesn't sync these to scroll position
   either, so this isn't a simplification I introduced). */
.hc-dots{ display:flex; justify-content:center; gap:6px; padding:0 4px 4px; }
.hc-dot{ width:6px; height:6px; border-radius:99px; background:rgba(255,255,255,.35); }
.hc-dot-active{ width:18px; background:#FFF; }