/* ============================================================================
   JoinMailingList component styles
   ----------------------------------------------------------------------------
   Styles for controls/JoinMailingList.ascx ONLY. Kept separate from any page
   stylesheet so the control can be dropped onto any host and look right without
   the host remembering to link anything - the control injects this itself.

   These rules were extracted from couponrequest.css, which still carries its own
   copy while that page uses its inline form. When couponrequest.aspx and
   finishsurvey.aspx migrate to the control, delete the duplicated block there.

   .hp-wrap is LOAD-BEARING, not cosmetic: it hides the honeypot field. Without
   it the honeypot renders visibly, real guests fill it in, and the form silently
   discards them as bots.
   ============================================================================ */

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