/* ---- Giveaway on the home page (Views/Home/components/_GiveawayBanner.cshtml + giveaway.js) ----
   Loaded only when a giveaway is on air. Plain CSS (no Tailwind build needed), phone widths first.
   Brand "Ink & Azure": ink #101010, text #111214, azure #2E7BE5, azure deep #1B5FC9, hairline
   #ECEEF1. The campaign's colour (--gw-accent, set by giveaway.js on the section and on the
   dialog; azure otherwise) is used for the glows, the halo and a sparkle on the prize image and
   the primary button only; the gift ribbon on the prize image is always satin red. Logical properties and grid areas, so the Arabic layout mirrors on its own. The
   banner rules carry .gw-section so the legacy site CSS and the home page's scoped utilities
   cannot out-rank them.

   Breakpoints: < 640px phone (Tailwind sm, the home page's own phone break), 640-991px tablet,
   >= 992px desktop (Bootstrap lg, where the two-column card has room for a 380px image column),
   >= 1280px the section sits flush to the 1280px frame like every other home section. */

.gw-section {
    --gw-accent: #2E7BE5;
    --gw-ink: #101010;
    --gw-mid: #16233B;
    --gw-end: #1B5FC9;
    margin-block: 16px 0;
}

.gw-section[hidden],
.gw-modal[hidden] {
    display: none !important;
}

/* Same frame as the other home sections (max-w-7xl w-full mx-auto px-4 + the page's inline
   xl:px-0): 1280px wide, a flat 16px gutter below 1280px (sm:px-6 is not compiled in
   mainpage-v2.css), flush at 1280px and up. */
.gw-section .gw-wrap {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 16px;
}

/* ---- the card: [glow] [main] [media] on a grid ---- */

.gw-section .gw-card {
    --gw-col: 96px;   /* the media column; the gift's geometry reads it too */
    line-height: 1.4;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--gw-col);
    grid-template-areas: "main media";
    column-gap: 12px;
    align-items: center;
    min-height: 160px;
    padding: 16px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(120deg, var(--gw-ink) 0%, var(--gw-mid) 58%, var(--gw-end) 100%);
    box-shadow: 0 10px 24px rgba(16, 16, 16, 0.16);
    color: #fff;
    cursor: pointer;
    text-align: start;
}

[dir="rtl"] .gw-section .gw-card {
    background: linear-gradient(240deg, var(--gw-ink) 0%, var(--gw-mid) 58%, var(--gw-end) 100%);
}

/* No prize image: one column, the glow back in the far corner. */
.gw-section .gw-card.gw-card--noimg {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main";
}

.gw-section .gw-card--me {
    box-shadow: 0 0 0 2px #F6C453, 0 10px 24px rgba(16, 16, 16, 0.16);
}

/* The glow sits BEHIND the prize image: an absolutely positioned grid child placed in the media
   area, centred on it (the area is its containing block). .gw-main and .gw-media are positioned
   too, so they paint above it in DOM order. */
.gw-section .gw-glow {
    position: absolute;
    grid-area: media;
    top: 50%;
    left: 50%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gw-accent) 0%, transparent 68%);
    opacity: 0.45;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.gw-section .gw-card.gw-card--noimg .gw-glow {
    grid-area: auto;
    top: -70px;
    left: auto;
    inset-inline-end: -70px;
    transform: none;
}

.gw-section .gw-main {
    position: relative;
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.gw-section .gw-media {
    position: relative;
    grid-area: media;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.gw-section .gw-prize {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 110px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}

/* ---- the gift on the prize image (owner 2026-09-29) ----
   The prize is presented as a gift, with no words, numbers or gold anywhere. Three touches:
     1. A spotlight right behind the product (.gw-stage::before): a soft accent halo with a pale
        core, shaped like the picture and breathing very slowly, so the phone looks lit and
        presented. The broad .gw-glow stays behind it as ambient light.
     2. The gift ribbon (.gw-rb, the brand manager's campaign poster; it replaced the round gift
        medallion): a red satin band across the picture, slightly tilted, tied in a big bow on the
        phone. See "the gift ribbon" below.
     3. Four sparkle glints (.gw-gift-spark, 4-point stars, white or pale accent) just outside the
        picture's edges, each twinkling at its own time - never over the picture itself. They come
        after the ribbon in the stage, so they always sit on top of it.
   giveaway.js builds the stage (a box exactly the picture's size), the ribbon and the sparkles'
   empty spans (all aria-hidden); everything else is here, inline (no image file, no font). On the
   picture it all waits for the picture to load (.gw-stage--lit): until then the stage is 0 x 0.
   Decorative: pointer-events none, so a click reaches the card. The halo and the sparkles use
   logical properties only, so Arabic mirrors them on its own; the ribbon is mirrored as a whole.
   Every LOOP's period divides 24 s and its delay starts from --gw-phase (giveaway.js), so a
   re-render does not restart the motion. A stagger is written as a NEGATIVE offset (the period
   minus the stagger): a positive one would hold the animation back after a re-render and cut a
   sparkle that was showing. prefers-reduced-motion: it all stays, still and complete (end of the
   file).

   Sparkle geometry, per breakpoint (tests/giveaway.dom.test.js recomputes it): each sparkle
   reaches out past the picture's edge by its "wanted" amount, but never further than the room
   beside the picture in the media column - (column - picture) / 2 - plus part of the card's END
   padding, or on the START side part of the column gap, so they never reach the text: max()
   below. */
.gw-section .gw-stage {
    position: relative;
    isolation: isolate;   /* the halo's z-index -1 stays in the stage, behind the picture */
    display: block;
    min-width: 0;
    max-width: 100%;
}

.gw-section .gw-stage::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: -14%;
    inset-inline: -24%;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%),
        radial-gradient(closest-side, var(--gw-accent), transparent);
    opacity: 0;
    transition: opacity 0.8s ease;
    animation: gwHalo 8s ease-in-out infinite;
    animation-delay: var(--gw-phase, 0ms);
    pointer-events: none;
}

.gw-section .gw-stage--lit::before {
    opacity: 0.8;
}

.gw-section .gw-gift {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* On the picture: hidden until it has loaded, then a soft rise into place. */
.gw-section .gw-stage .gw-gift {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.gw-section .gw-stage--lit .gw-gift {
    opacity: 1;
    transform: none;
}

/* Sparkles: a 4-point star mask over white (1, 3, 4) or a pale accent (2). Phone sizes.
   1: START side, upper third. 2: END side, lower half. 3: above the picture.
   4: under the picture, START half. All four are outside the picture, so the ribbon (clipped to
   the picture) never covers one, and they are painted after it anyway. */
.gw-section .gw-gift-spark {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0c.6 5.6 4.4 9.4 10 10-5.6.6-9.4 4.4-10 10-.6-5.6-4.4-9.4-10-10C5.6 9.4 9.4 5.6 10 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0c.6 5.6 4.4 9.4 10 10-5.6.6-9.4 4.4-10 10-.6-5.6-4.4-9.4-10-10C5.6 9.4 9.4 5.6 10 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0;
    animation: gwTwinkle 4s ease-in-out infinite;
    animation-delay: var(--gw-phase, 0ms);
}

.gw-section .gw-gift-spark--1 {
    inset-block-start: 16%;
    inset-inline-start: max(-14px, (100% - var(--gw-col)) / 2 - 6px);
}

.gw-section .gw-gift-spark--2 {
    inset-block-start: 60%;
    inset-inline-end: max(-13px, (100% - var(--gw-col)) / 2 - 8px);
    width: 6px;
    height: 6px;
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), var(--gw-accent);
    animation-duration: 3s;
    animation-delay: calc(var(--gw-phase, 0ms) - 1.8s);   /* 1.2 s into the 3 s loop */
}

.gw-section .gw-gift-spark--3 {
    inset-block-start: -10px;
    inset-inline-start: 28%;
    width: 5px;
    height: 5px;
    animation-duration: 6s;
    animation-delay: calc(var(--gw-phase, 0ms) - 3.6s);   /* 2.4 s into the 6 s loop */
}

.gw-section .gw-gift-spark--4 {
    inset-block-end: -11px;
    inset-inline-start: 14%;
    width: 6px;
    height: 6px;
    animation-delay: calc(var(--gw-phase, 0ms) - 1.2s);   /* 2.8 s into the 4 s loop */
}

/* ---- the gift ribbon (owner 2026-09-29: the brand manager wants the prize picture to look like
   the campaign poster; the approved design is ported here as it was shown) ----
   A red satin band crosses the picture at 58% of its height, tilted 5 degrees, and is tied in a
   big bow on the phone: two loops with a darker inner fold, a knot, two V-cut tails. The ribbon is
   always satin red (--gw-rb-*: light fold, base, mid, dark, deepest shadow) whatever the campaign's
   accent is, so it always reads as a gift; the accent keeps the halo, the glow, the pale sparkle
   and the button. No gold, no words, no numbers; inline SVG (giveaway.js) + CSS only, so it is
   crisp at every size.
   Sized from the picture (the stage): the bow is 74% of the picture's width and the band 7.5% of
   its height; a wide picture (gw-stage--wide, wider than 1.15 : 1) gets a 44% bow and a 9% band,
   so the phone stays readable. The bow's knot sits on the band. The layer is clipped to the
   picture, as the design's picture box clips it: the band runs edge to edge of the picture and
   never reaches the text column or a sparkle. Arabic: the whole layer is mirrored (scaleX(-1)),
   so the band falls the other way. Physical left / top inside the layer are on purpose: the
   mirror, not logical properties, turns them round.
   Motion: when the picture has loaded, the band wraps in from its middle and then the bow ties
   itself with a small overshoot - once. giveaway.js adds gw-rb--tied when the tie ends, which
   switches the entrance off, so a refresh that puts the same ribbon back never replays it. After
   that, loops only, on the --gw-phase clock: a soft sheen runs along the band every 8 s and the
   tails sway very slightly (6 s).
   The status dialog's prize picture wears the same ribbon (owner 2026-09-29): every rule here
   that draws, sizes or moves the ribbon on a picture carries its .gw-modal twin in the same rule,
   so the two can never drift apart. Only its shadows follow the dialog picture's size (the dialog
   section below). giveaway.js ties a new ribbon each time the dialog is opened, so there the
   entrance plays on every opening; a refresh while it is open keeps the tied one. */
.gw-section .gw-rb,
.gw-modal .gw-rb {
    --gw-rb-hi: #F4585C;
    --gw-rb-base: #D0141F;
    --gw-rb-mid: #B00E19;
    --gw-rb-dark: #7C0912;
    --gw-rb-deep: #52050C;
    position: absolute;
    pointer-events: none;
}

.gw-section .gw-stage .gw-rb,
.gw-modal .gw-stage .gw-rb {
    inset: 0;
    overflow: hidden;
    visibility: hidden;
}

.gw-section .gw-stage--lit .gw-rb,
.gw-modal .gw-stage--lit .gw-rb {
    visibility: visible;
}

[dir="rtl"] .gw-section .gw-rb,
[dir="rtl"] .gw-modal .gw-rb {
    transform: scaleX(-1);
}

.gw-section .gw-rb-band,
.gw-modal .gw-rb-band {
    position: absolute;
    left: -12%;
    right: -12%;
    top: 58%;
    height: 7.5%;
    translate: 0 -50%;
    rotate: 5deg;
    background:
        repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, var(--gw-rb-deep) 0%, var(--gw-rb-mid) 12%, var(--gw-rb-base) 26%, var(--gw-rb-hi) 42%, var(--gw-rb-base) 58%, var(--gw-rb-mid) 80%, var(--gw-rb-deep) 100%);
    box-shadow: 0 2px 3px rgba(40, 0, 6, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* The sheen: a soft light that runs along the satin, START to END, for about 2.8 s every 8 s. */
.gw-section .gw-rb-band::after,
.gw-modal .gw-rb-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 0 40%, rgba(255, 255, 255, 0.35) 48%, transparent 56% 100%) 150% 0 / 250% 100% no-repeat;
    mix-blend-mode: screen;
    animation: gw-rb-sheen 8s ease-in-out infinite;
    animation-delay: var(--gw-phase, 0ms);
}

.gw-section .gw-rb-bow,
.gw-modal .gw-rb-bow {
    position: absolute;
    left: 50%;
    top: 58%;
    width: 74%;
    translate: -50% -44%;
    transform-origin: 50% 44%;
    filter: drop-shadow(0 3px 4px rgba(40, 0, 6, 0.28));
}

.gw-section .gw-rb-bow svg,
.gw-modal .gw-rb-bow svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.gw-section .gw-stage--wide .gw-rb-band,
.gw-modal .gw-stage--wide .gw-rb-band {
    height: 9%;
}

/* 44% of a wide picture, but never taller than 72% of it (the bow is 440 / 600 as tall as it is
   wide; --gw-rb-aspect = the picture's width / height, from giveaway.js), so on a very wide banner
   picture the tails still end on the picture. */
.gw-section .gw-stage--wide .gw-rb-bow,
.gw-modal .gw-stage--wide .gw-rb-bow {
    width: min(44%, 98% / var(--gw-rb-aspect, 1.16));
}

/* The entrance, once the picture is there: the band wraps across, then the bow ties itself. */
.gw-section .gw-stage--lit .gw-rb-band,
.gw-modal .gw-stage--lit .gw-rb-band {
    animation: gw-rb-wrap 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.gw-section .gw-stage--lit .gw-rb-bow,
.gw-modal .gw-stage--lit .gw-rb-bow {
    animation: gw-rb-tie 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.55s both;
}

/* The tails sway around the knot (view-box units: the bow's 600 x 440 drawing). */
.gw-section .gw-rb-tail--l,
.gw-modal .gw-rb-tail--l {
    transform-box: view-box;
    transform-origin: 292px 208px;
    animation: gw-rb-sway-l 6s ease-in-out infinite;
    animation-delay: var(--gw-phase, 0ms);
}

.gw-section .gw-rb-tail--r,
.gw-modal .gw-rb-tail--r {
    transform-box: view-box;
    transform-origin: 308px 208px;
    animation: gw-rb-sway-r 6s ease-in-out infinite;
    animation-delay: var(--gw-phase, 0ms);
}

/* No prize image: no band over the text - the bow alone, about the size the old medallion had
   (as tall), in the card's top END corner inside the corner glow; the first row of the text
   column keeps clear of it (the title row starts below it). No sparkles here, as before. */
.gw-section .gw-rb--corner {
    inset-block-start: 12px;
    inset-inline-end: 12px;
    width: 38px;
}

.gw-section .gw-rb--corner .gw-rb-bow {
    position: static;
    width: 100%;
    translate: none;
    filter: drop-shadow(0 2px 3px rgba(40, 0, 6, 0.35));
    animation: gw-rb-tie 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.2s both;
}

.gw-section .gw-card--noimg .gw-main > :first-child {
    padding-inline-end: 38px;
}

/* Tied: the entrance is over for good (after the entrance rules, same weight). */
.gw-section .gw-rb--tied .gw-rb-band,
.gw-modal .gw-rb--tied .gw-rb-band,
.gw-section .gw-rb--tied .gw-rb-bow,
.gw-modal .gw-rb--tied .gw-rb-bow {
    animation: none;
}

@keyframes gwHalo {
    0%, 100% { transform: scale(0.95); }
    50% { transform: scale(1.04); }
}

@keyframes gwTwinkle {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    20% { opacity: 1; transform: scale(1) rotate(12deg); }
    42% { opacity: 0; transform: scale(0.5) rotate(24deg); }
}

@keyframes gw-rb-wrap {
    from { scale: 0 1; opacity: 0.4; }
    to { scale: 1 1; opacity: 1; }
}

@keyframes gw-rb-tie {
    from { scale: 0.35; opacity: 0; }
    to { scale: 1; opacity: 1; }
}

@keyframes gw-rb-sheen {
    0%, 65% { background-position: 150% 0; }
    100% { background-position: -60% 0; }
}

@keyframes gw-rb-sway-l {
    0%, 100% { rotate: 0deg; }
    50% { rotate: 1.6deg; }
}

@keyframes gw-rb-sway-r {
    0%, 100% { rotate: 0deg; }
    50% { rotate: -1.6deg; }
}

.gw-section .gw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gw-section .gw-eyebrow,
.gw-section .gw-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 22px;
    padding-inline: 9px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gw-section .gw-eyebrow {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gw-section .gw-chip--in { background: rgba(30, 158, 106, 0.24); color: #8FE3BF; }
.gw-section .gw-chip--warn { background: rgba(242, 178, 76, 0.22); color: #F8D08A; }
.gw-section .gw-chip--outline { border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; }
.gw-section .gw-chip--mute { background: rgba(255, 255, 255, 0.12); color: #E6EBF2; }

/* Up to 3 lines on a phone, 2 on a desktop, then an ellipsis. */
.gw-section .gw-title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.gw-section .gw-label,
.gw-section .gw-message {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.gw-section .gw-winner {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}

.gw-section .gw-countdown {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gw-section .gw-cd-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 42px;
    padding: 4px 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.10);
}

.gw-section .gw-cd-num {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.gw-section .gw-cd-unit {
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    line-height: 1.2;
}

/* Letter spacing breaks the joins of Arabic script. */
[dir="rtl"] .gw-section .gw-eyebrow,
[dir="rtl"] .gw-section .gw-cd-unit {
    letter-spacing: 0;
}

.gw-section .gw-dots {
    display: inline-flex;
    gap: 7px;
    height: 20px;
    align-items: center;
}

.gw-section .gw-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gw-accent);
    animation: gwBreath 1.4s ease-in-out infinite;
}

.gw-section .gw-dots i:nth-child(2) { animation-delay: 0.25s; }
.gw-section .gw-dots i:nth-child(3) { animation-delay: 0.5s; }

@keyframes gwBreath {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

/* ---- the actions row (main column, under the countdown): CTA / store badges, then Details ---- */

.gw-section .gw-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.gw-section .gw-cta,
.gw-section .gw-details {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 40px;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13.5px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.gw-section .gw-cta {
    border: 0;
    background: var(--gw-accent);
    color: #fff;
    font-weight: 700;
}

.gw-section .gw-cta:hover,
.gw-section .gw-cta:focus-visible {
    color: #fff;
    filter: brightness(1.08);
}

.gw-section .gw-details {
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    color: #fff;
    font-weight: 600;
}

.gw-section .gw-details:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* A store badge: the PNG is the button - no box, border or background around it. */
.gw-section .gw-badge {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    transition: transform 0.15s ease;
}

.gw-section .gw-badge img {
    display: block;
    width: auto;
    height: 40px;
    border: 0;
}

.gw-section .gw-badge:hover {
    transform: translateY(-1px);
}

/* Only when the artwork path is missing: the label as a plain pill. */
.gw-section .gw-badge--text {
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
}

.gw-section .gw-cta:focus-visible,
.gw-section .gw-details:focus-visible,
.gw-section .gw-badge:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 2px;
}

/* ---- tablet ---- */

@media (min-width: 640px) {
    .gw-section .gw-card {
        --gw-col: 220px;
        column-gap: 24px;
        min-height: 220px;
        padding: 28px 32px;
        border-radius: 20px;
    }
    .gw-section .gw-glow { width: 340px; height: 340px; }
    /* The gift: the ribbon's shadows grow with the picture; the START sparkle takes at most 12px
       of the 24px column gap. No prize image: a 52px bow (38px tall). */
    .gw-section .gw-rb-band { box-shadow: 0 3px 5px rgba(40, 0, 6, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
    .gw-section .gw-rb-bow { filter: drop-shadow(0 5px 6px rgba(40, 0, 6, 0.28)); }
    .gw-section .gw-gift-spark--1 { inset-inline-start: max(-20px, (100% - var(--gw-col)) / 2 - 12px); width: 11px; height: 11px; }
    .gw-section .gw-gift-spark--2 { inset-inline-end: max(-18px, (100% - var(--gw-col)) / 2 - 18px); width: 8px; height: 8px; }
    .gw-section .gw-gift-spark--3 { inset-block-start: -14px; width: 6px; height: 6px; }
    .gw-section .gw-gift-spark--4 { inset-block-end: -15px; width: 8px; height: 8px; }
    .gw-section .gw-rb--corner { inset-block-start: 16px; inset-inline-end: 16px; width: 52px; }
    .gw-section .gw-rb--corner .gw-rb-bow { filter: drop-shadow(0 3px 4px rgba(40, 0, 6, 0.35)); }
    .gw-section .gw-card--noimg .gw-main > :first-child { padding-inline-end: 40px; }
    .gw-section .gw-main { gap: 8px; }
    .gw-section .gw-title { font-size: 26px; line-height: 1.2; }
    .gw-section .gw-label,
    .gw-section .gw-message { font-size: 14px; }
    .gw-section .gw-winner { font-size: 18px; }
    .gw-section .gw-prize { max-height: 180px; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.4)); }
    .gw-section .gw-countdown { gap: 8px; }
    .gw-section .gw-cd-box { min-width: 58px; padding: 6px 8px; border-radius: 10px; }
    .gw-section .gw-cd-num { font-size: 24px; }
    .gw-section .gw-actions { gap: 10px; margin-top: 8px; }
    .gw-section .gw-cta,
    .gw-section .gw-details,
    .gw-section .gw-badge--text { min-height: 44px; padding: 10px 22px; border-radius: 22px; font-size: 14.5px; }
    .gw-section .gw-badge img { height: 44px; }
}

/* ---- desktop ---- */

@media (min-width: 992px) {
    .gw-section { margin-block: 24px 0; }
    .gw-section .gw-card {
        --gw-col: 380px;
        column-gap: 48px;
        min-height: 300px;
        padding: 40px 56px;
        border-radius: 24px;
    }
    .gw-section .gw-glow { width: 480px; height: 480px; opacity: 0.5; }
    /* The gift: the ribbon's shadows grow with the picture; the START sparkle takes at most 20px
       of the 48px column gap. No prize image: a 62px bow (about 46px tall). */
    .gw-section .gw-rb-band { box-shadow: 0 4px 7px rgba(40, 0, 6, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
    .gw-section .gw-rb-bow { filter: drop-shadow(0 7px 9px rgba(40, 0, 6, 0.28)); }
    .gw-section .gw-gift-spark--1 { inset-inline-start: max(-26px, (100% - var(--gw-col)) / 2 - 20px); width: 14px; height: 14px; }
    .gw-section .gw-gift-spark--2 { inset-inline-end: max(-24px, (100% - var(--gw-col)) / 2 - 30px); width: 10px; height: 10px; }
    .gw-section .gw-gift-spark--3 { inset-block-start: -18px; width: 7px; height: 7px; }
    .gw-section .gw-gift-spark--4 { inset-block-end: -20px; width: 10px; height: 10px; }
    .gw-section .gw-rb--corner { inset-block-start: 20px; inset-inline-end: 24px; width: 62px; }
    .gw-section .gw-card--noimg .gw-main > :first-child { padding-inline-end: 34px; }
    .gw-section .gw-main { gap: 12px; }
    .gw-section .gw-chips { gap: 8px; }
    .gw-section .gw-eyebrow,
    .gw-section .gw-chip { min-height: 26px; padding-inline: 12px; border-radius: 13px; font-size: 12px; }
    .gw-section .gw-title { font-size: 36px; line-height: 1.15; -webkit-line-clamp: 2; line-clamp: 2; }
    .gw-section .gw-label,
    .gw-section .gw-message { font-size: 15px; }
    .gw-section .gw-winner { font-size: 22px; }
    .gw-section .gw-prize { max-height: 260px; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45)); }
    .gw-section .gw-countdown { gap: 10px; }
    .gw-section .gw-cd-box { min-width: 76px; padding: 10px 8px 8px; border-radius: 12px; }
    .gw-section .gw-cd-num { font-size: 32px; line-height: 1.1; }
    .gw-section .gw-cd-unit { margin-top: 2px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
    .gw-section .gw-actions { gap: 12px; margin-top: 12px; }
    .gw-section .gw-cta,
    .gw-section .gw-details,
    .gw-section .gw-badge--text { min-height: 48px; padding: 12px 28px; border-radius: 24px; font-size: 16px; }
    .gw-section .gw-badge img { height: 48px; }
}

@media (min-width: 1280px) {
    .gw-section .gw-wrap { padding-inline: 0; }
}

/* ---- the status dialog (moved under <body> by giveaway.js, so Bootstrap's backdrop - also a
   child of <body>, z-index 1050 - stays under the .modal at 1055) ---- */

.gw-modal {
    --gw-accent: #2E7BE5;
}

.gw-modal .modal-dialog {
    width: auto;
    max-width: none;
    margin: 0.5rem;
    height: calc(100% - 1rem);
}

@media (min-width: 576px) {
    /* site.css:839-844 forces every .modal-dialog-scrollable to width 100vw, height 100%, margin 0 (the same fix as
       #ModalMissingDocs, site.css:538-542): restore a centred, bounded dialog. */
    .gw-modal .modal-dialog { width: auto; max-width: 560px; margin: 1.75rem auto; height: calc(100% - 3.5rem); }
}

/* common.css makes every .modal-content transparent; this dialog brings its own white panel. */
.gw-modal .modal-content {
    border: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(16, 16, 16, 0.22), 0 2px 8px rgba(16, 16, 16, 0.08);
    color: #111214;
    overflow: hidden;
}

.gw-modal .modal-header {
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #ECEEF1;
}

.gw-modal .modal-title {
    margin: 0;
    color: #111214;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.gw-modal .modal-body {
    line-height: 1.45;
    padding: 20px 24px;
}

.gw-modal .gw-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(120deg, #101010 0%, #16233B 58%, #1B5FC9 100%);
}

[dir="rtl"] .gw-modal .gw-hero {
    background: linear-gradient(240deg, #101010 0%, #16233B 58%, #1B5FC9 100%);
}

.gw-modal .gw-hero-glow {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gw-accent) 0%, transparent 68%);
    opacity: 0.45;
    pointer-events: none;
}

.gw-modal .gw-hero-img {
    position: relative;
    max-width: 240px;
    max-height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.4));
}

@media (min-width: 576px) {
    .gw-modal .gw-hero { height: 210px; }
    .gw-modal .gw-hero-img { max-width: 280px; max-height: 176px; }
}

/* The prize picture's stage (giveaway.js): a box exactly the picture's size, so the gift ribbon
   (the banner's rules, "the gift ribbon" above) wraps the picture itself and is clipped to it.
   Built as the banner's stage is: a block box, the centred item of the hero, holding the picture
   as a block (no line box under it), which keeps its own max-width / max-height - so the stage
   shrinks to the picture's scaled size, portrait or wide. No max-width on the stage: it must never
   be narrower than the picture. No halo and no sparkles here: the hero keeps its own glow. */
.gw-modal .gw-stage {
    position: relative;
    display: block;
}

.gw-modal .gw-stage .gw-hero-img {
    display: block;
}

/* The ribbon's shadows at the dialog picture's size (up to 150-176px tall, like the banner's
   tablet picture): the banner's tablet values. After the shared ribbon rules, same weight. */
.gw-modal .gw-rb-band {
    box-shadow: 0 3px 5px rgba(40, 0, 6, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.gw-modal .gw-rb-bow {
    filter: drop-shadow(0 5px 6px rgba(40, 0, 6, 0.28));
}

.gw-modal .gw-result {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #ECEEF1;
    border-radius: 16px;
    text-align: center;
}

.gw-modal .gw-result--me {
    border: 2px solid #F6C453;
}

.gw-modal .gw-result p {
    margin: 0 0 6px;
}

.gw-modal .gw-result-eyebrow {
    color: #1B5FC9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[dir="rtl"] .gw-modal .gw-result-eyebrow {
    letter-spacing: 0;
}

.gw-modal .gw-result-name {
    line-height: 1.25;
    color: #111214;
    font-size: 22px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.gw-modal .gw-result-line {
    color: #3F4654;
    font-size: 14px;
}

.gw-modal .gw-result-note {
    color: #6b7280;
    font-size: 12px;
}

.gw-modal .gw-timeline {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.gw-modal .gw-step {
    position: relative;
    display: flex;
    gap: 14px;
    padding-bottom: 16px;
}

.gw-modal .gw-step:last-child {
    padding-bottom: 0;
}

.gw-modal .gw-step:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: 5px;
    top: 18px;
    bottom: 2px;
    width: 2px;
    background: #ECEEF1;
}

.gw-modal .gw-step-dot {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border-radius: 50%;
    border: 2px solid #2E7BE5;
    background: #fff;
}

.gw-modal .gw-step--done .gw-step-dot { border-color: #1E9E6A; background: #1E9E6A; }
.gw-modal .gw-step--next .gw-step-dot { background: #2E7BE5; }

.gw-modal .gw-step-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gw-modal .gw-step-label {
    color: #111214;
    font-size: 14px;
    font-weight: 700;
}

.gw-modal .gw-step-when {
    color: #4A5261;
    font-size: 13px;
}

.gw-modal .gw-block {
    margin-top: 20px;
}

.gw-modal .gw-h {
    margin: 0 0 6px;
    color: #111214;
    font-size: 15px;
    font-weight: 800;
}

.gw-modal .gw-body {
    margin: 0;
    color: #3F4654;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.gw-modal .gw-rules {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid #ECEEF1;
    border-radius: 16px;
    background: #F8F9FB;
}

.gw-modal .gw-rules .gw-body {
    font-size: 13px;
}

.gw-modal .gw-rules-link {
    display: inline-block;
    margin-top: 8px;
    color: #1B5FC9;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: underline;
}

.gw-modal .gw-sponsor {
    margin: 10px 0 0;
    color: #4A5261;
    font-size: 12px;
    line-height: 1.5;
}

.gw-modal .gw-entry {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ECEEF1;
}

.gw-modal .gw-entry-label {
    color: #4A5261;
    font-size: 12px;
    font-weight: 600;
}

.gw-modal .gw-entry-name {
    color: #111214;
    font-size: 16px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.gw-modal .gw-entry-text {
    color: #3F4654;
    font-size: 14px;
}

.gw-modal .gw-app {
    margin-top: 20px;
}

.gw-modal .gw-app-hint {
    margin: 0 0 12px;
    color: #3F4654;
    font-size: 14px;
    line-height: 1.5;
}

.gw-modal .gw-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* The PNG is the button: no box, border or background around it. */
.gw-modal .gw-badge {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    transition: transform 0.15s ease;
}

.gw-modal .gw-badge img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 48px;
    border: 0;
}

.gw-modal .gw-badge:hover {
    transform: translateY(-1px);
}

.gw-modal .gw-badge:focus-visible {
    outline: 3px solid #2E7BE5 !important;
    outline-offset: 3px;
}

.gw-modal .gw-badge--text {
    min-height: 48px;
    color: #1B5FC9;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .gw-section .gw-dots i { animation: none; opacity: 0.6; }
    .gw-section .gw-badge,
    .gw-modal .gw-badge { transition: none; }
    .gw-section .gw-badge:hover,
    .gw-modal .gw-badge:hover { transform: none; }
    /* The gift stays, still and complete: the halo lit, the sparkles shown at rest (no twinkle),
       the ribbon fully drawn - band across, bow tied - with no wrap, tie, sheen or sway, and no
       fade when the picture arrives. The dialog's ribbon too. */
    .gw-section .gw-stage::before,
    .gw-section .gw-gift-spark,
    .gw-section .gw-stage--lit .gw-rb-band,
    .gw-modal .gw-stage--lit .gw-rb-band,
    .gw-section .gw-stage--lit .gw-rb-bow,
    .gw-modal .gw-stage--lit .gw-rb-bow,
    .gw-section .gw-rb--corner .gw-rb-bow,
    .gw-section .gw-rb-band::after,
    .gw-modal .gw-rb-band::after,
    .gw-section .gw-rb-tail--l,
    .gw-modal .gw-rb-tail--l,
    .gw-section .gw-rb-tail--r,
    .gw-modal .gw-rb-tail--r { animation: none; }
    .gw-section .gw-rb-band::after,
    .gw-modal .gw-rb-band::after { display: none; }
    .gw-section .gw-stage::before,
    .gw-section .gw-stage .gw-gift { transition: none; }
    .gw-section .gw-stage .gw-gift { transform: none; }
    .gw-section .gw-gift-spark { opacity: 0.7; }
}