/* Asahi Hard Rated NRL theme overrides
   Layered on top of btl.min.css. Dark stadium background with bright yellow
   accent, white body copy. Matches design spec J4619. */

:root {
    --hr-yellow: #ffcb05;
    --hr-yellow-hover: #ffd93c;
    --hr-dark: #000000;
    --hr-copy: #ffffff;
}

html, body { background: var(--hr-dark); }
body {
    color: var(--hr-copy);
    background: var(--hr-dark) url(../images/bg_combi.png) no-repeat top center;
    background-size: 1920px;
}
@media screen and (max-width:1599px) { body { background-size: 1600px; } }
@media screen and (max-width:899px)  { body { background-size: 900px; } }
@media screen and (max-width:599px)  { body { background-size: 600px; } }

/* Stadium background now lives on body so it sits behind header too. */
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 */

/* 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-dark);
    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-dark);
    }
}

.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-copy); }
section .input-holder.has-checkbox label a { color: var(--hr-yellow); text-decoration: underline; }
section .input-holder.has-checkbox label:before { background: transparent; border-color: rgba(255, 255, 255, 0.5); }

/* 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; }
}

/* 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-dark) !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 — dark, white links */
footer {
    background: var(--hr-dark);
    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: 100px; }
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 title: same font as body copy, bright yellow */
.terms .terms-title {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--hr-yellow);
    font-size: 56px;
    font-weight: bold;
    line-height: 1.1;
    margin: 0 0 40px 0;
}
@media screen and (max-width: 899px) { .terms .terms-title { font-size: 40px; } }
@media screen and (max-width: 599px) { .terms .terms-title { font-size: 32px; } }

/* 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 for cans + partner + badges */
footer .footer-images { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 32px; }
footer .footer-cans img { max-width: 380px; width: 100%; height: auto; margin: 0 auto; }
footer .footer-partner { margin-top: 32px; margin-bottom: 32px; }
footer .footer-images .footer-partner img { width: 588px; max-width: 100%; height: auto; margin: 0 auto; }
footer .footer-badges { display: flex; gap: 14px; justify-content: center; align-items: center; }
footer .footer-badges img { height: 56px; width: auto; }
footer .footer-content { margin: 0; }
footer .footer-text { margin-bottom: 32px; }
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; }

/* 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; }