/* ---- 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.
   The accent is the campaign's colour, set by giveaway.js as --gw-accent on the section and on the
   dialog; the site blue (#4285F4) otherwise. Logical properties (inline-start/end) 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. */

.gw-section {
    --gw-accent: #4285F4;
    --gw-ink: #111827;
    --gw-mid: #14203A;
    --gw-end: #1B4A9E;
    margin-block: 16px 0;
}

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

.gw-section .gw-wrap {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 16px;
}

/* ---- the card ---- */

.gw-section .gw-card {
    position: relative;
    display: flex;
    gap: 12px;
    min-height: 160px;
    padding: 16px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, var(--gw-ink) 0%, var(--gw-mid) 55%, var(--gw-end) 100%);
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.16);
    color: #fff;
    cursor: pointer;
    text-align: start;
}

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


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

.gw-section .gw-glow {
    position: absolute;
    inset-inline-end: -46px;
    top: -36px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gw-accent) 0%, transparent 70%);
    opacity: 0.42;
    pointer-events: none;
}

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

.gw-section .gw-side {
    position: relative;
    display: flex;
    flex: 0 0 96px;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.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; }

.gw-section .gw-title {
    margin: 0;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.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;
}

.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; }
}

@media (prefers-reduced-motion: reduce) {
    .gw-section .gw-dots i { animation: none; opacity: 0.6; }
}

.gw-section .gw-prize {
    display: block;
    width: 100%;
    max-height: 104px;
    object-fit: contain;
}

.gw-section .gw-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 32px;
    padding: 6px 12px;
    border: 0;
    border-radius: 16px;
    background: var(--gw-accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

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

/* The CTA and, when the CTA is a store link (or missing), the Details button. */
.gw-section .gw-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.gw-section .gw-details {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    background: transparent;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

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

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

@media (min-width: 640px) {
    .gw-section .gw-wrap { padding-inline: 24px; }
    .gw-section .gw-card { padding: 20px 24px; gap: 20px; }
    .gw-section .gw-side { flex-basis: 150px; }
    .gw-section .gw-title { font-size: 24px; }
    .gw-section .gw-prize { max-height: 140px; }
    .gw-section .gw-cd-box { min-width: 52px; }
    .gw-section .gw-cd-num { font-size: 22px; }
}

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

/* ---- the status dialog (moved under <body> by giveaway.js) ---- */

.gw-modal {
    --gw-accent: #4285F4;
}

.gw-modal .modal-content {
    border: 0;
    border-radius: 16px;
    color: #191919;
}

.gw-modal .modal-title {
    font-weight: 800;
}

.gw-modal .gw-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 170px;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(135deg, #111827 0%, #14203A 55%, #1B4A9E 100%);
}

.gw-modal .gw-hero-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    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: 220px;
    max-height: 146px;
    object-fit: contain;
}

.gw-modal .gw-result {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #e8edf2;
    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: #1D4ED8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gw-modal .gw-result-name {
    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: #D5DAE1;
}

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

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

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

.gw-modal .gw-step-label {
    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;
    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 #e8edf2;
    border-radius: 16px;
    background: #f9fafb;
}

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

.gw-modal .gw-rules-link {
    display: inline-block;
    margin-top: 8px;
    color: #1D4ED8;
    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 #e8edf2;
}

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

.gw-modal .gw-entry-name {
    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;
    gap: 10px;
}

.gw-modal .gw-badge {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #1D4ED8;
    font-weight: 700;
}

.gw-modal .gw-badge img {
    display: block;
    height: 44px;
    width: auto;
}