/*
 * couponrequest.css
 * Chuck E. Cheese — Mailing List Coupon Request Form
 * Built for WCAG 2.1 AA. Mirrors the accessibility approach of
 * birthdayclubsignup.css (focus-visible, 44px targets, contrast,
 * legible minimum font sizes) but for the shorter coupon-request flow.
 */

/* ============================================================ BASE */
html, body {
    font-family: Montserrat, 'Open Sans', Arial, sans-serif;
    max-width: 100%;
    font-size: 10pt;
    padding: 0;
    margin: 0;
}

body {
    background: linear-gradient(#c21ce0, #910dc2);
    padding-bottom: 0;
}

/* Global focus ring — never suppressed. :focus-visible so mouse users
   don't see it but keyboard/AT users always do. (WCAG 2.4.7) */
:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    border-radius: 2px;
}
.pageheader :focus-visible { outline: 3px solid #ffffff; }

input:focus-visible, button:focus-visible, a:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    scroll-margin-top: 80px;
}

div#UpdatePanel1 { padding: 0; margin: 0; }

/* ============================================================ PAGE HEADER */
.pageheader {
    background: linear-gradient(#c21ce0, #910dc2);
    display: block;
    width: 100%;
    text-align: center;
    padding: 9px 0 5px 0;
}
img.ceclogo { width: 100px; margin: 0 auto; }

#pnlHeaderImage { width: 100%; max-width: 600px !important; margin: 0 auto; }
#pnlHeaderImage img { width: 100%; display: block; }

/* ============================================================ MAIN PANELS */
.pnlThankYou,
.pnlMainForm {
    max-width: 600px;
    margin: 10px auto 0 auto;
    background: #fff;
    padding: 14px 0 26px 0;
    box-shadow: 0 0 8px -3px #000;
    position: relative; /* for .local-overlay */
}
/* When the standard CEC header is hidden (embedded/iframe) drop the shadow
   and purple frame so it sits cleanly inside a host page. */
.pnlMainFormFlush {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    padding: 8px 0;
    box-shadow: none;
    position: relative;
}

/* ============================================================ TYPOGRAPHY */
h2 {
    font-size: 22pt;
    margin: 6px auto 10px auto;
    width: 90%;
    text-align: center;
    color: #910dc2;
}
.help {
    text-align: center;
    display: block;
    margin: 0.5% auto 3% auto;
    max-width: 82%;
}
.subhelp {
    font-size: 80%;
    text-align: center;
    width: 82%;
    display: block;
    margin: 0 auto 3% auto;
}

/* ============================================================ FORM LAYOUT */
.couponform {
    width: 86%;
    max-width: 460px;
    margin: 0 auto;
}
.formrow { margin-bottom: 14px; }
.formrow-2 {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
}
.formrow-2 > .formcol { flex: 1 1 0; min-width: 0; }

/* Field labels — 13px minimum, high contrast (WCAG 1.4.3, 1.4.4) */
.fieldlabel,
.couponform label.dxeBase_Office365,
.couponform .fieldlabel {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #3a1150;
    margin-bottom: 4px;
}
.req-star { color: #b10000; margin-left: 2px; }

/* Make DevExpress editors full-width and hit the 44px touch target (WCAG 2.5.8) */
.couponform .dxeTextBox_Office365,
.couponform .dxeSpinEdit_Office365,
.couponform .dxeTextBoxSys,
.couponform .dxeSpinEditSys { width: 100% !important; }

.couponform .dxeEditArea_Office365,
.couponform input.dxeEditArea_Office365,
.couponform .dxeEditArea {
    min-height: 40px;
    font-size: 15px;
    padding: 6px 8px;
    box-sizing: border-box;
}

/* Fallback for any plain input used on the page */
.couponform input[type="text"],
.couponform input[type="email"],
.couponform input[type="tel"] {
    width: 100%;
    min-height: 44px;
    font-size: 15px;
    padding: 8px 10px;
    box-sizing: border-box;
    border: 1px solid #999;
    border-radius: 4px;
}

/* ============================================================ HONEYPOT
   Off-screen (not display:none, which some bots skip). Never shown, not tabbable. */
.hp-wrap {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================================================ EMAIL TYPO SUGGESTION */
.emailSuggest {
    margin: -6px 0 14px 0;
    padding: 8px 10px;
    background: #fff8e1;
    border: 1px solid #ffe08a;
    border-radius: 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.emailSuggestText { color: #5a4600; }
.emailSuggestBtn,
button.emailSuggestBtn {
    background: #910dc2 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 6px 14px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    min-height: 32px;
    cursor: pointer;
}
.emailSuggestBtn * { color: #fff !important; }

/* Email could-not-verify (offer to confirm) */
.emailUnverified {
    margin: -6px 0 14px 0;
    padding: 12px;
    background: #fdecea;
    border: 1px solid #f5c2bd;
    border-radius: 6px;
    font-size: 13px;
}
.emailUnverifiedText { color: #7a271f; display: block; margin-bottom: 10px; line-height: 1.4; }
.emailUnverifiedBtn,
button.emailUnverifiedBtn {
    background: #0d6efd !important;
    color: #fff !important;
    border: none !important;
    border-radius: 18px !important;
    padding: 9px 18px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    min-height: 40px;
    cursor: pointer;
}
.emailUnverifiedBtn * { color: #fff !important; }

/* ============================================================ NEAREST-STORE PICKER */
.storepicker {
    margin: 2px 0 14px 0;
    padding: 12px;
    background: var(--cec-bg-soft);
    border: 1px solid var(--cec-line);
    border-radius: 8px;
}
.storepicker .fieldlabel { margin-bottom: 8px; }
.storepicker label { font-size: 13px; font-weight: 400; }
.storepicker td { padding: 3px 6px 3px 0; }

/* ============================================================ CONSENT BOX */
.ckboxHolder {
    width: 100%;
    margin: 4px auto 0 auto;
    font-size: 13px;
    background: #f4f4f4;
    border-radius: 6px;
    padding: 12px;
    box-sizing: border-box;
}
.ckboxHolder .consentrow {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.termstext {
    font-size: 13px;
    line-height: 140%;
    color: #222;
}

/* ============================================================ ALREADY-ON-FILE */
#pnlOnFile {
    width: 100%;
    margin: 0 auto 16px auto;
    text-align: center;
    background: #ffefb3;
    padding: 14px;
    border-radius: 6px;
    box-shadow: 0 0 5px -3px #000;
    box-sizing: border-box;
}
#pnlOnFile h3 { margin: 0 0 4px 0; color: #6b4e00; }
#pnlOnFile p { margin: 0; }

/* ============================================================ BUTTON */
.buttonrow { text-align: center; padding-top: 12px; }
.cmdSubmit,
.cmdSubmit.dxbButton_Office365 {
    font-size: 15pt !important;
    background: #e4002b !important;
    color: #fff !important;
    padding: 10px 26px !important;
    border: none !important;
    border-radius: 24px !important;
    box-shadow: 0 2px 5px -3px #000;
    font-weight: 700 !important;
    margin: 8px auto 4px auto;
    display: inline-block;
    min-height: 44px;
    min-width: 44px;
    cursor: pointer;
}
.cmdSubmit *, .cmdSubmit.dxbButton_Office365 * { color: #fff !important; }
.cmdSubmit:hover { background: #b10000 !important; }

/* ============================================================ ERROR PANEL
   role="alert" is added in code-behind; color is not the sole signal —
   the label text is prefixed accordingly. (WCAG 1.4.1, 3.3.1) */
#pnlErrors {
    background: #d93c0d;
    margin: 0;
    padding: 4px 0;
    box-shadow: 0 0 10px -4px #000;
}
li.ErrorTextLI { margin-bottom: 0; color: #fff; font-size: 11pt; font-weight: 600; }
ul.ErrorTextUL { max-width: 472px; margin: 0 auto; }

/* Field-level invalid indicator driven by aria-invalid (not color alone) */
.couponform [aria-invalid="True"] .dxeEditArea_Office365,
.couponform [aria-invalid="True"] input {
    border: 2px solid #b10000 !important;
}

/* ============================================================ THANK YOU */
.pnlThankYou p { width: 88%; margin: 0 auto; text-align: center; }
#lblThankYouHeadline {
    text-align: center; display: block; font-size: 18pt; font-weight: 700;
    color: #910dc2; margin: 16px auto 11px auto; width: 90%;
}
#lblThankYouText { text-align: center; display: block; width: 90%; margin: 0 auto 9px auto; }

/* ============================================================ FOOTER */
.lblCopyright { text-align: center; display: block; color: #fff; font-size: 11px; margin-top: 8px; padding-bottom: 10px; }
.lblFooter { width: 90%; display: block; margin: 8px auto 0 auto; text-align: center; font-size: 11px; }
#pnlAdminText { font-size: 11px; width: 90%; margin: 3% auto 0 auto; text-align: justify; }

/* ============================================================ LOADING OVERLAY
   role="status" + aria-live="polite" in markup; JS focuses it on submit. */
.local-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,.45); z-index: 10;
    justify-content: center; align-items: center;
    font-size: 22px; font-weight: 700; text-align: center; color: #f9f9f9;
    display: none;
}

/* ============================================================ UTIL */
.hidden { display: none !important; }
.visually-hidden {
    position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* ============================================================ DEVEXPRESS NULLTEXT CONTRAST
   Darkened placeholder for >=4.5:1 on white. (WCAG 1.4.3) */
.dxeNullText_Office365 .dxeEditArea_Office365,
.dxFirefox .dxeNullText_Office365 .dxeEditArea_Office365 { color: #6a3a78; }

/* ============================================================ RESPONSIVE */
@media screen and (max-width: 520px) {
    .formrow-2 { flex-direction: column; gap: 14px; }
    h2 { font-size: 19pt; }
    .couponform { width: 90%; }
}