/* Lucky Street reveal box (Views/Shared/_LuckyReveal.cshtml) and the in-feed ad (_InFeedAd.cshtml), Lucky Street page only. */

/* #luckyReveal holds the box (.lr-box) and the "Pick 2 rewards below ↓" line under it. */
.lucky-reveal { margin: 0 0 16px; transition: opacity 0.2s; }
.lucky-reveal--busy { opacity: 0.6; pointer-events: none; }
.lucky-reveal--guest { cursor: pointer; }

/* The box: dark green like the big green box, a gold border with a soft gold glow. */
.lr-box {
    background: #1a3d2b;
    color: #fff;
    border: 2px solid #e2b33c;
    border-radius: 16px;
    padding: 16px 14px 12px;
    box-shadow: 0 0 0 3px rgba(226, 179, 60, 0.18), 0 0 18px rgba(226, 179, 60, 0.45);
}

.lr-head { margin-bottom: 12px; text-align: center; }
.lr-title { font-size: 1.45rem; font-weight: 900; line-height: 1.15; color: #fff; letter-spacing: 0.2px; }
.lr-claim { font-size: 0.88rem; font-weight: 700; color: #f3d77a; margin-top: 4px; }
.lr-status { font-size: 0.88rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); margin-top: 6px; }

.lr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

/* Revealed: white tiles with bold dark text. */
.lr-tile {
    background: #fff;
    border: 1px solid #d7e3cf;
    border-radius: 10px;
    padding: 8px 10px;
    min-height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #111;
    text-decoration: none;
}
a.lr-tile:hover { text-decoration: none; color: #111; }
.lr-tile-label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.5px; color: #4b5563; }
.lr-tile-pc { font-size: 1.15rem; font-weight: 900; letter-spacing: 0.5px; color: #111; white-space: nowrap; }
@media (max-width: 359.98px) { .lr-tile-pc { font-size: 1rem; letter-spacing: 0; } }

/* Locked: gold tiles with a padlock and a gentle shimmer (none with "reduce motion"). */
.lr-tile--locked {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f7dc7a, #e2b33c 55%, #d19a1c);
    border: 1px solid #c9951a;
    align-items: center;
    text-align: center;
    color: #3d2a00;
}
.lr-tile--locked::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 50%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
    animation: lrShimmer 2.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes lrShimmer {
    0% { left: -60%; }
    60%, 100% { left: 120%; }
}
.lr-tile-lock { font-size: 1.15rem; line-height: 1.1; filter: grayscale(1) brightness(0.35); } /* dark, so it shows on gold */
.lr-tile-hint { font-size: 0.72rem; font-weight: 800; color: #3d2a00; margin-top: 2px; }

/* The member's own winning postcode: glowing gold. */
.lr-tile--mine {
    border: 2px solid #e2b33c;
    background: #fffaf0;
    box-shadow: 0 0 0 2px rgba(226, 179, 60, 0.35), 0 0 14px rgba(247, 210, 90, 0.85);
}
.lr-tile--done { opacity: 0.6; box-shadow: none; }

.lr-pill { align-self: flex-start; margin-top: 4px; background: #9D0100; color: #fff; border-radius: 999px; padding: 2px 9px; font-weight: 700; font-size: 0.72rem; white-space: nowrap; }
.lr-pill--grey { background: #9ca3af; }
.lr-pill--paid { background: #2d6a2d; white-space: normal; }

.lr-win { margin-top: 12px; text-align: center; background: #fff; color: #111; border-radius: 10px; padding: 12px; }
.lr-win-head { font-size: 1.1rem; font-weight: 900; color: #9D0100; margin-bottom: 8px; }
.lr-win-btn { display: inline-block; background: #f07820; color: #fff; border: none; border-radius: 10px; padding: 12px 22px; font-weight: 800; font-size: 0.95rem; text-decoration: none; cursor: pointer; }
.lr-win-btn:hover { background: #d96a18; color: #fff; text-decoration: none; }
.lr-win-small { font-size: 0.75rem; color: #555; margin-top: 8px; }
.lr-win-paid { font-size: 1rem; font-weight: 800; color: #2d6a2d; }

.lr-link { color: #f3d77a; font-weight: 700; text-decoration: underline; }
.lr-link:hover { color: #fff; }
.lr-win .lr-link { color: #1a5c1a; }

/* Not a winner this time (also read by the reveal pop-up). Short lines; the green rewards button. */
.lr-lose { margin-top: 12px; text-align: center; }
.lr-lose-head { font-size: 1.15rem; font-weight: 900; color: #fff; }
.lr-lose-line { font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); margin-top: 3px; line-height: 1.35; }
.lr-lose-btn {
    display: block;
    width: 100%;
    margin: 12px 0 0;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-radius: 12px;
    padding: 15px 16px;
    background: linear-gradient(to bottom, #5dffaa, #4cff72);
    color: #0d2416;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    white-space: normal;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 0 16px rgba(76, 255, 114, 0.35);
}
.lr-lose-btn:hover { background: linear-gradient(to bottom, #5dffaa, #3ee863); }
.lr-lose-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lr-lose-pot { font-size: 0.82rem; font-weight: 700; color: #f3d77a; margin-top: 10px; }

/* The free-entry small print: smaller and lighter, at the bottom of the box. */
.lr-small { font-size: 0.7rem; color: rgba(255, 255, 255, 0.6); margin: 12px 0 0; line-height: 1.4; text-align: center; }
.lr-small .lr-link { color: rgba(255, 255, 255, 0.75); font-weight: 600; }

/* Staging's non-winner preview banner (/cards-check?preview=lose). */
.lr-preview-note { background: #fff3cd; color: #664d03; border: 1px solid #ffe08a; border-radius: 8px; padding: 6px 10px; font-size: 0.8rem; font-weight: 700; margin-bottom: 8px; text-align: center; }
.lr-preview-note a { color: #664d03; text-decoration: underline; }

/* Under the box. */
.lr-below { text-align: center; font-size: 1rem; font-weight: 900; color: #1a3d2b; margin: 12px 0 0; }

@media (prefers-reduced-motion: reduce) {
    .lr-tile--locked::after { animation: none; display: none; }
}

/* In-feed ad: below the whole rewards section (after the last tile and the rewards bar), never among the reward tiles or
   next to a button: at least 50px clear above and below, labelled. */
.infeed-ad { clear: both; margin: 56px 0; padding: 0; }
.infeed-ad-label { font-size: 11px; color: #999; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.infeed-ad-placeholder { border: 2px dashed #bbb; border-radius: 8px; min-height: 250px; display: flex; align-items: center; justify-content: center; color: #888; font-size: 0.85rem; text-align: center; padding: 12px; }

/* One column (up to 900px, the page's reorder script): the sidebar ad moves to the top, above the green step guide. Clear
   space around it, so the guide's button (and anything else tappable) is never right next to the ad. Padding, not
   margin, below it, so the space can't collapse into a neighbour's margin. Ads Google places by itself in the main column
   get the same space. */
#luckyAdBlock.lucky-ad--top { margin: 24px 0 0; padding: 0 0 56px; }
@media (max-width: 900px) {
    .lucky-main .google-auto-placed { margin-top: 56px !important; margin-bottom: 56px !important; }
}

/* The green step guide's button (and the old reward banner's, with the reveal off), every state: the text wraps inside
   the button rather than running past its edge, with room around it. On narrow screens "Click here to get your rewards"
   is shortened to "Get your rewards →" (.ls-btn-long / .ls-btn-short, set by lsRenderGuide()). */
.lucky-main .rab-cta {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
    max-width: 100%;
    line-height: 1.25;
    text-align: center;
    padding: 16px 24px;
}
.ls-btn-short { display: none; }
@media (min-width: 768px) {
    /* Side by side with the text: the button never takes more than half the box. */
    .lucky-main .rab-cta { max-width: 50%; }
}
@media (max-width: 575.98px) {
    .ls-btn-long { display: none; }
    .ls-btn-short { display: inline; }
    .lucky-main .rab-cta { padding: 16px 18px; }
}
/* The rewards bar's label under the tiles wraps too. */
#ls-cta-label { min-width: 0; overflow-wrap: anywhere; }

/* Reveal pop-up at the second pick (js/lucky-reveal.js): the step guide's dark green and green buttons. Above the card
   stream and the message pop-up (z-index 1050), which wait while it's open. */
.lrp-overlay { display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 1060; }
.lrp-overlay[hidden] { display: none !important; }
.lrp-card {
    background: #1a3d2b;
    color: #fff;
    border-radius: 20px;
    padding: 28px 20px 22px;
    max-width: 420px;
    width: 100%;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    position: relative;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}
.lrp-card:focus { outline: none; }
.lrp-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: rgba(255, 255, 255, 0.8); font-size: 1.8rem; line-height: 1; padding: 4px 8px; cursor: pointer; }
.lrp-close:hover, .lrp-close:focus-visible { color: #fff; }
.lrp-clover { font-size: 2rem; line-height: 1; }
.lrp-title { font-size: 1.15rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.3px; color: #fff; margin: 6px 0 14px; }

.lrp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; perspective: 800px; }
.lrp-tile { height: 72px; }
.lrp-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.5s ease; }
.lrp-tile--open .lrp-flip { transform: rotateY(180deg); }
.lrp-face {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.lrp-front { background: #eef2ea; border: 2px dashed #9fb89a; font-size: 1.4rem; }
.lrp-back { background: #fff; color: #1a1a1a; border: 1px solid #d7e3cf; transform: rotateY(180deg); }
.lrp-tile--mine .lrp-back { border: 3px solid #f07820; background: #fff7f5; }
.lrp-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.5px; color: #6b7280; }
.lrp-pc { font-size: 1.15rem; font-weight: 900; letter-spacing: 0.5px; }

.lrp-result > * { animation: lrpFadeIn 0.3s ease both; }
@keyframes lrpFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lrp-head { font-size: 1.2rem; font-weight: 900; margin-bottom: 14px; }
.lrp-head--win { color: #4cff72; font-size: 1.3rem; }
.lrp-paid { color: #4cff72; font-weight: 800; margin: -4px 0 14px; }
.lrp-small { font-size: 0.78rem; color: rgba(255, 255, 255, 0.75); margin-top: 10px; }
.lrp-small--gap { margin: -4px 0 14px; }

/* Not a winner: the box's lines, short (lucky-reveal.js renderResult). */
.lrp-head--lose { margin-bottom: 6px; }
.lrp-lose-line { font-size: 0.88rem; color: rgba(255, 255, 255, 0.85); line-height: 1.35; margin-top: 2px; }
.lrp-lose-pot { font-size: 0.82rem; font-weight: 700; color: #f3d77a; margin-top: 12px; }

/* The step guide's button (.rab-cta, Offer-Levels.css); the claim button in the box's claim orange. */
.lrp-btn {
    display: block;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to bottom, #5dffaa, #4cff72);
    color: #0d2416;
    border: none;
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 0 16px rgba(76, 255, 114, 0.35);
}
.lrp-btn:hover { background: linear-gradient(to bottom, #5dffaa, #3ee863); }
.lrp-btn--claim { background: #f07820; color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
.lrp-btn--claim:hover { background: #d96a18; }
/* A second button under the first (a winner's rewards button under "Claim"): a little space between them. */
.lrp-btn--next { margin-top: 12px; }
.lrp-btn:focus-visible, .lrp-bar-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Phones only: "Get your 2 rewards →" fixed to the bottom of the screen (its bottom offset is set by the script, above
   any anchor ad). */
.lrp-bar { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 1040; background: #1a3d2b; border-radius: 14px; padding: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); }
.lrp-bar[hidden] { display: none !important; }
.lrp-bar-btn {
    display: block;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to bottom, #5dffaa, #4cff72);
    color: #0d2416;
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}
@media (min-width: 768px) {
    .lrp-bar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .lrp-flip { transition: none; }
    .lrp-result > * { animation: none; }
}