/* =========================================================================
   App theme refinement — typography + global visual polish (all viewports)
   Loaded AFTER main.css/custom.css so variable overrides win.
   Pairing: Outfit (display/headings) + Inter (body/UI)
   ========================================================================= */

/* ---------- Typography tokens ------------------------------------------ */
:root {
    --body-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --heading-font: "Outfit", system-ui, -apple-system, sans-serif;

    /* soft, layered elevation used across cards/buttons */
    --app-elev-1: 0 1px 2px rgba(0, 0, 0, .18), 0 4px 14px rgba(0, 0, 0, .16);
    --app-elev-2: 0 8px 30px rgba(0, 0, 0, .28);
    --app-ring: 0 0 0 3px hsl(var(--base) / .28);
}

/* ---------- Base type rhythm ------------------------------------------- */
body {
    font-family: var(--body-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: .1px;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.section-heading__title,
.banner-content__title,
.competition-item__title,
.footer-item__title {
    font-family: var(--heading-font);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.18;
}

/* tighter, more confident display sizing */
.section-heading__title {
    font-weight: 800;
    letter-spacing: -0.03em;
}

.banner-content__title {
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* numeric-heavy UI (prices, countdowns, ticket counts) reads better with
   tabular figures */
.countdown__menu,
.cart-number,
.competition-item__status,
.showAmount,
.amount {
    font-family: var(--body-font);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------- Buttons: modern, tactile ----------------------------------- */
.cmn--btn,
.btn--base,
.btn--md {
    font-family: var(--heading-font);
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: 12px;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
    will-change: transform;
}

.cmn--btn:hover,
.btn--base:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px hsl(var(--base) / .32);
    filter: saturate(1.05);
}

.cmn--btn:active,
.btn--base:active {
    transform: translateY(0);
}

.cmn--btn:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--app-ring);
}

/* ---------- Competition / raffle cards --------------------------------- */
.competition-item {
    border-radius: 18px;
    overflow: hidden;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
    box-shadow: var(--app-elev-1);
}

.competition-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--app-elev-2);
}

.competition-item__thumb {
    display: block;
    overflow: hidden;
}

.competition-item__thumb img {
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
    width: 100%;
    object-fit: cover;
}

.competition-item:hover .competition-item__thumb img {
    transform: scale(1.06);
}

.competition-item__title {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* status pill — crisper */
.competition-item__status {
    font-family: var(--heading-font);
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: 999px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ---------- Section headings: add a refined accent --------------------- */
.section-heading {
    margin-bottom: 8px;
}

/* ---------- Links & nav ------------------------------------------------- */
.nav-menu .nav-link {
    font-family: var(--heading-font);
    font-weight: 500;
    letter-spacing: .01em;
    transition: color .2s ease;
}

/* ---------- Forms: softer, modern inputs ------------------------------- */
.form--control,
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    border-radius: 12px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form--control:focus,
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    box-shadow: var(--app-ring);
    border-color: hsl(var(--base)) !important;
}

/* ---------- Scrollbar (desktop) ---------------------------------------- */
@media (min-width: 992px) {
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    ::-webkit-scrollbar-thumb {
        background: hsl(var(--base) / .55);
        border-radius: 10px;
        border: 2px solid transparent;
        background-clip: content-box;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: hsl(var(--base) / .8);
        background-clip: content-box;
    }
}

/* ---------- Selection color ------------------------------------------- */
::selection {
    background: hsl(var(--base) / .85);
    color: #fff;
}

/* =========================================================================
   Raffle images now keep their original size (not server-resized), so fit
   any dimensions/aspect ratio neatly into a consistent frame via CSS.
   ========================================================================= */

/* listing / card thumbnails */
.competition-item__thumb {
    aspect-ratio: 16 / 10;
    max-height: none;
    overflow: hidden;
}
.competition-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* raffle detail — main image shows the WHOLE image (no crop) */
.competition-details__wrapper .competition-details__item,
.competition-details__item {
    overflow: hidden;
    border-radius: 12px;
    height: 480px;
    background: #f3f3f8;
    display: flex;
    align-items: center;
    justify-content: center;
}
.competition-details__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
@media (max-width: 767px) {
    .competition-details__wrapper .competition-details__item,
    .competition-details__item {
        height: 360px;
    }
}

/* raffle detail — gallery thumbnails */
.competition-gallery__item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
}
.competition-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* small thumbnails in cart / order lists */
.cart-lottery__thumb img,
.cart-items img,
.order-summery img {
    object-fit: cover;
}

/* uniform card image frame (single image + slider both) */
.competition-item__thumb {
    aspect-ratio: auto;
    height: 210px;
    overflow: hidden;
    position: relative;
}
.competition-item__thumb img,
.raffle-card-slide img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
}

/* =========================================================================
   Raffle listing card image slider (Slick)
   ========================================================================= */
.raffle-card-slider { line-height: 0; }
.raffle-card-slider .slick-list,
.raffle-card-slider .slick-track { line-height: 0; }
.raffle-card-slide { display: block; }

/* arrows — appear on card hover */
.raffle-card-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease, background .2s ease;
}
.competition-item:hover .raffle-card-arrow { opacity: 1; }
.raffle-card-arrow:hover { background: hsl(var(--base)); }
.raffle-card-arrow.slick-prev { left: 8px; }
.raffle-card-arrow.slick-next { right: 8px; }

/* arrows always visible (not only on hover) */
.raffle-card-arrow { opacity: .9; }

/* Slick adds a ::before glyph (←/→) on .slick-prev/.slick-next — hide it so
   only our own icon shows (was causing a doubled arrow). */
.raffle-card-arrow::before {
    display: none !important;
    content: none !important;
}

/* Home listing: taller frame that shows the whole image (no zoom-crop) */
.competition-item__thumb.competition-thumb--tall {
    height: 320px;
    background: #f3f3f8;
}
.competition-item__thumb.competition-thumb--tall img,
.competition-thumb--tall .raffle-card-slide img {
    height: 320px;
    object-fit: contain;
}
@media (max-width: 991px) {
    .competition-item__thumb.competition-thumb--tall,
    .competition-item__thumb.competition-thumb--tall img,
    .competition-thumb--tall .raffle-card-slide img {
        height: 280px;
    }
}

/* dots */
.raffle-card-slider .slick-dots {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    list-style: none;
    line-height: 1;
}
.raffle-card-slider .slick-dots li { width: auto; height: auto; margin: 0; }
.raffle-card-slider .slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    font-size: 0;
}
.raffle-card-slider .slick-dots li button::before { display: none; }
.raffle-card-slider .slick-dots li.slick-active button { background: #fff; }

/* keep the "Left N" status pill above the slider */
.competition-item__status { z-index: 4; }

/* touch devices: always show arrows a bit */
@media (max-width: 991px) {
    .raffle-card-arrow { opacity: .85; width: 32px; height: 32px; }
    .competition-item__thumb,
    .competition-item__thumb img,
    .raffle-card-slide img { height: 190px; }
}

/* =========================================================================
   Cohesive dark palette
   The template alternated white / black sections (inline styles + section
   <style> overlays), which read as unfinished. Unify everything onto one
   layered dark surface with the brand accent. Uses !important only where it
   must beat inline / in-body <style> rules.
   ========================================================================= */
:root {
    --pal-bg: #0b0b0f;         /* page + base sections            */
    --pal-bg-alt: #101017;     /* alternating section rhythm      */
    --pal-surface: #1a1a22;    /* cards / raised panels (elevated)*/
    --pal-surface-2: #23232e;  /* inputs / hover                  */
    --pal-hairline: rgba(255, 255, 255, .08);
}

body {
    background: var(--pal-bg);
    color: hsl(var(--white));
}

/* Unify full-bleed section backgrounds (beats inline background:white) */
.banner-section,
.competition-section,
.top-section,
.about-section,
.counter-up-section {
    background: var(--pal-bg) !important;
}

/* subtle two-tone rhythm so sections don't flatten into one slab */
.competition-section {
    background: var(--pal-bg-alt) !important;
}

/* Neutralize the white / black pseudo-element overlays that flattened
   the hero + winners sections */
.banner-section::before,
.top-section::before,
.competition-section::before {
    background: transparent !important;
    opacity: 1 !important;
}

/* keep the how-it-works hero image but ensure a readable dark scrim */
.how-section::before {
    background: rgba(0, 0, 0, .72) !important;
}

/* Headings that were forced black by inline / header <style> -> readable */
.banner-content__title,
.competition-section .section-heading__title {
    color: hsl(var(--white)) !important;
}

.banner-content__subtitle {
    color: hsl(var(--white) / .65) !important;
}

/* =========================================================================
   White cards on the dark theme (clean, high-contrast, app-like)
   ========================================================================= */
:root {
    --pal-card: #ffffff;      /* card surface        */
    --pal-card-ink: #17171e;  /* primary text on card */
    --pal-card-mute: #5a5a68; /* secondary text      */
    --pal-card-soft: #f1f1f6; /* chips inside a card  */
    --pal-card-line: #e6e6ee; /* hairline on card     */
}

/* Raffle cards */
.competition-item {
    background: var(--pal-card) !important;
    border: 1px solid var(--pal-card-line) !important;
    color: var(--pal-card-ink);
}

.competition-item__content {
    color: var(--pal-card-ink);
}

.competition-item__title a,
.competition-item__link,
.competition-item .countdown__list span,
.competition-item .remaining-time .box {
    color: var(--pal-card-ink) !important;
}

/* countdown chips inside a white card need a light fill + dark digits */
.competition-item .remaining-time .box {
    background: var(--pal-card-soft) !important;
}

.competition-item .box__text {
    color: var(--pal-card-mute) !important;
}

.competition-item__thumb {
    border-bottom: 1px solid var(--pal-card-line) !important;
}

/* "How it works" info panels -> white cards */
.work-item__body {
    background: var(--pal-card) !important;
    border: 1px solid var(--pal-card-line);
}

.work-item__body h6,
.work-item__body .text {
    color: var(--pal-card-mute) !important;
}