/* Woodstock Bromance theme overrides
   Layered on top of btl.min.css. Maroon grunge background with gold accent
   and white body copy. Matches the final J4689 designs.
   (--hr-* variable names retained from the previous J4619 spec to avoid a
   churny rename; --hr-yellow now carries the gold accent.) */

:root {
    --hr-yellow: #b9a668;        /* gold accent — sampled from the heading PNGs */
    --hr-yellow-hover: #cdbb82;
    --hr-dark: #1b0a0b;          /* deep maroon — footer + flat fallbacks */
    --hr-maroon: #5c2327;        /* base maroon behind the texture */
    --hr-copy: #ffffff;
    --hr-muted: #8c8c8c;         /* muted grey — T&Cs label + receipt note */
}

html, body { background-color: var(--hr-dark); }
body {
    color: var(--hr-copy);
    background: var(--hr-dark) url(/images/bg_woodstock.jpg) center top / 890px auto no-repeat fixed;
}
@media screen and (min-width: 680px) {
    body { background-size: 1080px auto; }
}

section { background: transparent !important; }

/* Tighter body copy line-height to match design */
section p,
.claim-container p { line-height: 1.25; }

/* Copy colours */
.white { color: var(--hr-copy); }
.gold { color: var(--hr-yellow); }
.grey { color: var(--hr-copy); } /* grey used on dark bg reads as white here */
.muted { color: var(--hr-muted); }

/* Headlines */
h1, h2, h3 { color: var(--hr-yellow); font-weight: bold; }
section h1, section h2, section h3 { color: var(--hr-yellow); }

/* Primary CTA buttons (ENTER NOW, Continue, etc.) — yellow block, black text */
section .input-holder input[type=submit],
section .input-holder button,
.btn-prize-details {
    background: var(--hr-yellow);
    border-color: var(--hr-yellow);
    color: var(--hr-copy);
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    padding: 15px 40px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    cursor: pointer;
    border-width: 2px;
    border-style: solid;
}

.btn-prize-details {
    padding: 8px 20px;
    font-size: 16px;
    letter-spacing: 0.5px;
}

@media (hover: hover) {
    section .input-holder input[type=submit]:hover,
    section .input-holder button:hover,
    .btn-prize-details:hover {
        background: var(--hr-yellow-hover);
        border-color: var(--hr-yellow-hover);
        color: var(--hr-copy);
    }
}

.btn-prize-details { margin: 0 auto; }

/* Form inputs — white fields on dark bg */
section .input-holder input[type=text],
section .input-holder input[type=email],
section .input-holder input[type=tel],
section .input-holder input[type=number],
section .input-holder input[type=password],
section .input-holder textarea,
section .input-holder select {
    background: #ffffff;
    border: 1px solid #ffffff;
    color: #000000;
}

section .input-holder input::placeholder,
section .input-holder textarea::placeholder { color: #706f6f; }

section .input-holder select { font-weight: bold; color: #000000; }
section .input-holder select:has(option[value=""]:checked) { color: #706f6f; }
section .input-holder select option { color: #000000; }

section .input-holder label { color: var(--hr-copy); }

/* Keep validation messages pinned inside the input at all widths */
section .input-holder .field-validation-error {
    position: absolute;
    top: 50%;
    right: 40px;
    left: auto;
    transform: translateY(-50%);
    font-size: 16px;
    line-height: 1.2;
    height: auto;
    max-width: 60%;
    text-align: right;
}
@media screen and (max-width: 599px) {
    section .input-holder .field-validation-error {
        right: 24px;
        font-size: 13px;
        max-width: 55%;
    }
}

/* Checkbox, submit and file-upload errors: keep under the row, not absolute */
section .input-holder.has-checkbox .field-validation-error,
section .input-holder.has-submit .field-validation-error,
section .input-holder.has-upload .field-validation-error {
    position: static;
    transform: none;
    text-align: left;
    max-width: 100%;
    margin-top: 8px;
    padding: 0;
}
section .input-holder.has-checkbox .field-validation-error { padding-left: 50px; }

/* Receipt file input: right-align the error inside the white box (label sits
   above the box, so anchor to bottom and offset by half the 60px input
   height to centre vertically within the white area). */
section .input-holder:has(input[type=file]) .field-validation-error {
    position: absolute;
    top: auto;
    bottom: 30px;
    left: auto;
    right: 80px;
    transform: translateY(50%);
    text-align: right;
    max-width: calc(100% - 110px);
    margin: 0;
    padding: 0;
}
@media screen and (max-width: 599px) {
    section .input-holder:has(input[type=file]) .field-validation-error {
        right: 80px;
    }
}

/* Submit row: let the helper text wrap onto its own line on narrow screens */
section .input-holder.has-submit { align-items: center; gap: 16px; flex-wrap: wrap; }
section .input-holder.has-submit input[type=submit] { flex: 0 0 auto; }
section .input-holder.has-submit p { flex: 1 1 280px; margin: 0; }

section .input-holder.has-checkbox label { color: var(--hr-muted); }
section .input-holder.has-checkbox label a { color: var(--hr-muted); text-decoration: underline; }
section .input-holder.has-checkbox label:before { background: var(--hr-copy); border-color: var(--hr-copy); }

/* Make the receipt upload on the entry form look like the other fields.
   Hide the raw file input and style the label as a fake input, matching
   the has-upload pattern already used on the Redeem page. */
.start-page .input-holder.has-upload { position: relative; }
.start-page .input-holder.has-upload input[type=file] {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.start-page .input-holder.has-upload .fake-input {
    margin: 0;
    width: 100%;
    border: 1px solid #e5e1cd;
    background: #fff;
    padding: 10px 20px;
    min-height: 60px;
    font-size: 20px;
    color: #706f6f;
    cursor: pointer;
    position: relative;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.start-page .input-holder.has-upload .fake-input:after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2038.1%2031.6%22%3E%3Cpath%20fill%3D%22%23706f6f%22%20d%3D%22M34.8%202.4h-3.3V0h-5v2.4H3.3C1.5%202.4%200%203.8%200%205.7v22.6c0%201.8%201.5%203.3%203.3%203.3h31.4c1.8%200%203.3-1.5%203.3-3.3V5.7c.1-1.9-1.4-3.3-3.2-3.3zM18.6%2026.7c-5.4%200-9.8-4.4-9.8-9.8s4.4-9.8%209.8-9.8%209.8%204.4%209.8%209.8c0%205.5-4.4%209.8-9.8%209.8z%22%20%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.start-page .input-holder.has-upload .fake-input span {
    display: block;
    padding-right: 36px;
    line-height: 1.6em;
}
.start-page .input-holder.has-upload.error .fake-input { border-color: #e30613; }
@media screen and (max-width: 899px) {
    .start-page .input-holder.has-upload .fake-input { font-size: 18px; }
}
@media screen and (max-width: 599px) {
    .start-page .input-holder.has-upload .fake-input { font-size: 16px; }
}

/* Entry form on mobile: slightly larger intro copy and tighter vertical
   padding above/below the content. */
@media screen and (max-width: 599px) {
    .start-page header { padding-top: 48px; }
    .start-page .claim-container p { font-size: 19px; line-height: 1.3; margin-bottom: 1.25rem; }
    .start-page .form-container { padding-top: 16px; }
}

/* Receipt upload modal: opens when the user clicks the upload field, gates
   the OS file picker behind a Browse link, and confirms the selection with
   an UPLOAD button before the filename is shown on the form. */
.upload-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.upload-popup.active { display: flex; }
.upload-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}
.upload-popup-dialog {
    position: relative;
    width: 92%;
    max-width: 420px;
    background: #fff;
    color: #000;
    padding: 28px 24px 24px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
    text-align: left;
}
.upload-popup-dialog p {
    color: #000 !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin: 0 0 14px !important;
    font-weight: bold;
}
.upload-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    color: #000 !important;
    cursor: pointer;
    line-height: 1;
}
.upload-popup-close:before,
.upload-popup-close:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: #000;
    transform-origin: center;
}
.upload-popup-close:before { transform: translate(-50%, -50%) rotate(45deg); }
.upload-popup-close:after  { transform: translate(-50%, -50%) rotate(-45deg); }
.upload-popup-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 20px;
    flex-wrap: wrap;
}
.upload-popup-browse {
    display: inline-block;
    background: #e5e5e5;
    color: #000;
    border: 1px solid #b0b0b0;
    padding: 6px 16px;
    font-size: 16px !important;
    font-weight: bold;
    cursor: pointer;
    margin: 0 !important;
    line-height: 1.3;
}
.upload-popup-browse:hover { background: #dcdcdc; }
.upload-popup-filename {
    color: #e30613;
    font-size: 16px;
    font-weight: bold;
    word-break: break-all;
}
.upload-popup-filename.has-file { color: #000; }
.upload-popup-confirm {
    background: var(--hr-yellow) !important;
    border: 2px solid var(--hr-yellow) !important;
    color: var(--hr-copy) !important;
    font-weight: bold;
    text-transform: uppercase;
    padding: 12px 28px !important;
    font-size: 18px !important;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
}
.upload-popup-confirm:disabled,
.upload-popup-confirm[disabled] {
    background: #cccccc !important;
    border-color: #cccccc !important;
    color: #666 !important;
    cursor: not-allowed;
}
@media (hover: hover) {
    .upload-popup-confirm:not(:disabled):hover {
        background: var(--hr-yellow-hover) !important;
        border-color: var(--hr-yellow-hover) !important;
    }
}

/* Age gate field baseline underline → white; error stays red */
.age-gate-page .age-gate-field:after { background: var(--hr-copy); }
.age-gate-page .age-gate-field label { color: var(--hr-copy); font-size: 26px; }
.age-gate-page .age-gate-field input { color: var(--hr-copy); background: transparent; }
.age-gate-page .age-gate-container h1 { color: var(--hr-copy); }
.age-gate-page .age-gate-container p { color: var(--hr-copy); margin-top: 50px; }

/* Tighten vertical space between Continue button and footer cans */
.claim.age-gate-page section { min-height: 0; }
@media screen and (min-width: 1200px) { .claim.age-gate-page section { min-height: 0; } }
@media screen and (max-width: 899px) { .claim.age-gate-page section { min-height: 0; } }
@media screen and (max-width: 599px) { .claim.age-gate-page section { min-height: 0; } }
@media screen and (max-width: 419px) { .claim.age-gate-page section { min-height: 0; } }

/* Prize itinerary list on PrizeDetails page */
.prize-itinerary {
    list-style: none;
    margin: 40px auto 0;
    padding: 0;
    max-width: 560px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 0;
}

.prize-itinerary li {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
    text-align: center;
}

.prize-itinerary li p {
    color: var(--hr-copy);
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
    max-width: 200px;
}

.prize-icon {
    display: block;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--hr-yellow);
    margin-bottom: 24px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 85% 85%;
}
.prize-icon-plane { background-image: url(/images/icon_prize_plane.png); }
.prize-icon-taxi { background-image: url(/images/icon_prize_taxi.png); }
.prize-icon-hotel { background-image: url(/images/icon_prize_hotel.png); }
.prize-icon-food { background-image: url(/images/icon_prize_food.png); }
.prize-icon-stadium { background-image: url(/images/icon_prize_stadium.png); }
.prize-icon-cash { background-image: url(/images/icon_prize_cash.png); }

/* Footer — transparent so the page background runs through, white links.
   The gold divider rule is baked into footer_lockup.png. */
footer {
    background: transparent;
    color: var(--hr-copy);
}
footer .footer-content .footer-link a {
    color: var(--hr-yellow);
    border-bottom-color: transparent;
}
@media (hover: hover) {
    footer .footer-content .footer-link a:hover {
        color: var(--hr-yellow-hover);
        border-bottom-color: var(--hr-yellow-hover);
    }
}
footer .footer-text p,
footer .copyright { color: var(--hr-copy); }
footer .footer-text p.gold,
footer .gold { color: var(--hr-yellow); }

/* Tight gap below the hero image on every page. */
header { padding-top: 40px; padding-bottom: 30px; }
header .page-header { width: 100%; max-width: 656px; }
header .page-header img { max-width: 656px !important; width: 100%; }
@media screen and (max-width: 599px) {
    header .page-header,
    header .page-header img { max-width: 469px !important; }
}
section .page-container { padding-top: 0; }

/* Holding (Too early) and claim.closed (Too late) pages: collapse the tall section so the footer cans sit just below the message,
   then add a gradient fade at the bottom so the section transitions smoothly into the footer instead of cutting hard. */
.holding section,
.claim.closed section {
    min-height: auto;
    position: relative;
    padding-bottom: 180px;
}
.holding section::after,
.claim.closed section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%);
    pointer-events: none;
}


/* Prize details: narrow the intro copy above the icon grid */
.prize-details .claim-container > h1,
.prize-details .claim-container > p { max-width: 560px; margin-left: auto; margin-right: auto; }

/* Prize details: tighten the space below the icon grid so the gap above the
   cans matches the 32px rhythm used in the rest of the footer stack */
.prize-details .claim-container { padding-bottom: 0; }

/* Prize details: intro copy sizes per design spec */
.prize-details .claim-container > h1 { font-size: 36px; line-height: 1.2; margin-bottom: 32px; }
.prize-details .claim-container > p { font-size: 26px; line-height: 1.25; }
@media screen and (max-width: 899px) {
    .prize-details .claim-container > h1 { font-size: 30px; }
    .prize-details .claim-container > p { font-size: 22px; }
}
@media screen and (max-width: 599px) {
    .prize-details .claim-container > h1 { font-size: 24px; }
    .prize-details .claim-container > p { font-size: 18px; }
}


/* Trim the huge bottom padding reserved for legacy background imagery */
.terms .page-container .claim-container { padding-bottom: 60px; }
@media screen and (max-width: 1599px) { .terms .page-container .claim-container { padding-bottom: 48px; } }
@media screen and (max-width: 899px)  { .terms .page-container .claim-container { padding-bottom: 36px; } }
@media screen and (max-width: 599px)  { .terms .page-container .claim-container { padding-bottom: 24px; } }

/* T&Cs intro lines beneath the heading image: promotion name + subtitle */
.terms .terms-intro {
    margin: 0 0 24px 0;
    line-height: 1.3;
}

/* T&Cs body copy: white on dark */
.terms li,
.terms p,
.terms .terms-list dl dt { color: var(--hr-copy); }
.terms li a,
.terms p a { color: var(--hr-yellow); }
.terms li a:hover,
.terms p a:hover { color: var(--hr-yellow-hover); }

.terms .terms-subtitle {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--hr-copy);
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 40px 0;
}
@media screen and (max-width: 599px) { .terms .terms-subtitle { font-size: 22px; } }

.terms ol ul { list-style: disc; margin: 10px 0 10px 24px; }
.terms ol ul li { margin: 6px 0; }

.terms .terms-table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    color: var(--hr-copy);
    font-size: 15px;
}
.terms .terms-table th,
.terms .terms-table td {
    border: 1px solid var(--hr-copy);
    padding: 8px 10px;
    text-align: center;
    vertical-align: middle;
}
.terms .terms-table th { font-weight: 700; }
@media screen and (max-width: 599px) {
    .terms .terms-table { font-size: 13px; }
    .terms .terms-table th,
    .terms .terms-table td { padding: 6px 4px; }
}

/* Trim oversized bottom padding on the form-container — original design
   reserved 500px for a background image that no longer sits there. */
section .form-container { padding-bottom: 40px; }
@media screen and (max-width: 1599px) { section .form-container { padding-bottom: 30px; } }
@media screen and (max-width: 599px)  { section .form-container { padding-bottom: 20px; } }

/* Footer layout: 18+ badge + Crack-a-Woodstock lockup row, then links + phone */
footer .footer-images { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 32px; }
footer .footer-lockup-row { display: flex; align-items: center; justify-content: center; }
footer .footer-lockup-row .footer-lockup { width: 100%; max-width: 800px; height: auto; }
footer .footer-content { margin: 0; display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
footer .footer-content .footer-link a { color: var(--hr-copy); font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }
footer .footer-text { margin-bottom: 8px; }
footer .footer-text p { margin: 0; }
footer .footer-text .small { white-space: normal; }
@media screen and (min-width: 1080px) {
    footer .footer-text .small { white-space: nowrap; }
}

/* Thanks page: open up the paragraph rhythm */
.thanks section .thanks-content p { margin-bottom: 2rem; }
.thanks section .thanks-content p:last-child { margin-bottom: 0; }

/* Thanks page: drop the legacy 1400px min-height so the cans hug the copy */
.claim.thanks section { min-height: 0 !important; }

/* Redeem-thanks (winner claim confirmation): reduce the gap under the header
   dartboard, and tighten the "Cheers, / Woodstock" sign-off. */
.redeem-thanks .page-container { margin-top: -120px; }
.redeem-thanks .thanks-content p.sign-off { margin-bottom: 0; }
.redeem-thanks .thanks-container { padding-bottom: 96px; }

/* T&Cs checkbox: the error message is absolutely positioned, so reserve only
   enough room for its own height below the row. Original 50px was excessive. */
section .input-holder.has-checkbox.error { margin-bottom: 30px !important; }

/* ---------------------------------------------------------------------------
   J4689 designs: gold display headings (PNG), prize imagery, header modes
   --------------------------------------------------------------------------- */

/* Gold heading PNGs that replace text <h1>s on the message pages */
.heading-img { display: block; width: 100%; height: auto; margin: 0 auto; }
.heading-congrats   { max-width: 360px; }
.heading-won        { max-width: 560px; margin-top: 14px; }
.heading-sorry      { max-width: 600px; }
.heading-too-early  { max-width: 520px; }
.heading-thanks     { max-width: 520px; }
.heading-age-gate   { max-width: 560px; margin-bottom: 28px; }
.heading-terms      { max-width: 600px; margin-bottom: 20px; }
@media screen and (max-width: 599px) {
    .heading-congrats  { max-width: 220px; }
    .heading-won,
    .heading-sorry,
    .heading-too-early,
    .heading-thanks,
    .heading-age-gate,
    .heading-terms     { max-width: 88%; }
}

/* Winner page: congrats + won heading + dartboard stack */
.win-stack { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.prize-dartboard { display: block; width: 100%; max-width: 460px; height: auto; margin: 8px auto 0; }

/* Header modes ----------------------------------------------------------- */
/* Age gate: Woodstock arch wordmark instead of the Xbox hero */
header .page-header.header-agegate { max-width: 480px; }
header .page-header.header-agegate .header-logo { max-width: 480px !important; width: 100%; }

/* Winner claim/confirmation: "you've won…" heading + dartboard */
header .page-header.header-winner {
    max-width: 620px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
header .page-header.header-winner .header-won-heading { max-width: 560px !important; width: 100%; }
header .page-header.header-winner .header-dartboard   { max-width: 440px !important; width: 100%; }
@media screen and (max-width: 599px) {
    header .page-header.header-agegate { max-width: 260px; }
    header .page-header.header-winner .header-won-heading { max-width: 88% !important; }
    header .page-header.header-winner .header-dartboard   { max-width: 78% !important; }
}

/* Too-early / closed pages: the page texture now runs full-bleed, so remove
   the legacy dark fade band that blended the section into a black footer. */
.holding section::after,
.claim.closed section::after { display: none; }

/* Collapse the legacy ~1400px section min-height (reserved for old background
   imagery) on the short message pages so the footer hugs the content. */
.claim.win section,
.claim.not-winner section,
.claim.redeem-page section,
.claim.age-gate-page section,
.holding section,
.claim.closed section { min-height: 0 !important; }

/* Too-early / closed pages: drop the legacy >=1600px 200px top margin so the
   message sits up under the hero, matching the design. */
.holding section .page-container .thanks-container,
.claim.closed section .page-container .thanks-container { margin-top: 0; }

/* Too-early / closed pages: tighten the gap between the message and the footer
   lockup by trimming the footer's top padding and pulling it up on these short
   pages. */
.holding footer .footer-images,
.claim.closed footer .footer-images { padding-top: 0; }
.holding footer,
.claim.closed footer { margin-top: -50px; }

/* Redeem page: tighten the loose legacy spacing to match the design —
   trim the oversized bottom padding, the gap under the header dartboard,
   and the gaps between the form fields. */
.redeem-page .redeem-container { padding-bottom: 80px; }
.redeem-page .redeem-container .input-holder { margin-bottom: 16px; }
.redeem-page .page-container { margin-top: -40px; }

/* Win / Sorry pages: tighten the gap between the header hero lockup and the
   heading — drop the legacy ≥1600px top margin reserved for old background art. */
.claim.win section .page-container .thanks-container,
.claim.not-winner section .page-container .thanks-container { margin-top: 0; }

/* Sorry (not-winner) page: gold highlight on the lead line + roomier vertical
   rhythm between the heading and the message lines to match the design. */
.not-winner .win .heading-sorry { margin-bottom: 44px; }
.not-winner .win p { margin: 0 0 32px; }
.not-winner .win p:last-child { margin-bottom: 0; }
.not-winner .win p.highlight { color: #baa769; }