/* ===========================================================================================================
   VEBA-branded Member Registration theme.
   Self-contained styling for the standalone registration page rendered by _VebaStandaloneLayout.cshtml.
   Per project convention, all color styling for this page lives here (not inline in the CSHTML).
   =========================================================================================================== */

/* Self-hosted brand fonts (latin subsets): Quicksand for headings/buttons, Roboto for body text. */
@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../../lib/fonts/quicksand/quicksand-500.woff2') format('woff2');
}

@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../../lib/fonts/quicksand/quicksand-600.woff2') format('woff2');
}

@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../../lib/fonts/quicksand/quicksand-700.woff2') format('woff2');
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../../lib/fonts/roboto/roboto-400.woff2') format('woff2');
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../../lib/fonts/roboto/roboto-500.woff2') format('woff2');
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../../lib/fonts/roboto/roboto-700.woff2') format('woff2');
}

:root {
    --veba-primary: #336ae9; /* VEBA California Sky Blue */
    --veba-blue: #3a3a8d; /* VEBA Blue */
    --veba-ocean: #24234f; /* VEBA Ocean */
    --veba-primary-light: #e8f3fb;
    --veba-accent: #18d0c6; /* Green Flash */
    --veba-callout: #ff7d6b; /* Wild Rose — buttons, callouts, required markers */
    --veba-text: #101027; /* Body Blue */
    --veba-muted: #5d6b7a;
    --veba-border: #d4dde6;
    --veba-surface: #ffffff;
    --veba-surface-alt: #ebe6e3; /* Alt White */
    --veba-error: #c0392b;
    --veba-success: #1e7e34;
}

#idInfoBtnOk {
    background: var(--veba-primary);
    color: #ffffff;
    line-height: 2.1;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

iframe {
    width: 100%;
    min-height: 100vh;
    border: 0;
}

.k-textbox, .k-input {
    background-color: #f2f4f9 !important;
    border-radius: 6px;
}

.veba-standalone-body {
    margin: 0;
    padding: 0;
    color: var(--veba-text);
    font-family: "Roboto", "Segoe UI", Tahoma, Arial, sans-serif;
    min-height: 100vh;
    background-color: #f4f8fb;
    /* Figma composition: teal swoop overlaid on the blue-to-white gradient strip (solid blue
       through the top ~60%), keeping the area behind the glass card fully saturated. */
    background-image: url('../../../images/bg-veba-swoop-gradient.png'), url('../../../images/bg_strip-veba-blue_white.jpg');
    background-size: 100% auto, 100% 100%;
    background-position: top center, top center;
    background-repeat: no-repeat, no-repeat;
}

.veba-standalone-wrap {
    padding: 16px;
}

.is-required-right:before {
    content: "\A0* ";
    font-weight: bold;
    white-space: nowrap;
}

.is-required-right:before {
    color: var(--veba-callout);
}

.veba-register {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.veba-card {
    /* Figma glass: #050B32 @ 16% — dark navy tint that deepens the blue behind it */
    background: rgba(5, 11, 50, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(16, 16, 39, 0.18);
    padding: 28px 46px 50px 50px;
}

/* White inner panel that holds the form and notices inside the glass card */
.veba-form-card {
    background: var(--veba-surface);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(16, 16, 39, 0.1);
}

.veba-card-table-outline {
    background: var(--veba-surface);
    border: 1px solid var(--veba-border);
    border-radius: 10px;
    padding: 8px;
    width: 100%;
    margin-bottom: 14px;
}

.veba-card-header {
    text-align: center;
    margin-bottom: 18px;
    padding-bottom: 4px;
}

.veba-card-header h2 {
    margin: 8px 0 4px;
    color: #ffffff;
    font-family: "Quicksand", "Segoe UI", sans-serif;
    font-weight: 600;
}

.veba-subtitle {
    margin: 0;
    color: var(--veba-muted);
    font-size: 0.95em;
}

.veba-consent-note {
    color: var(--veba-muted);
    font-size: 0.85em;
    line-height: 1.4;
    padding-top: 4px;
}

/* Informational caption emitted by the formTitleInfo tag helper */
.veba-register .info-colored {
    font-size: 0.85em;
    line-height: 1.5;
    color: var(--veba-text);
    background: var(--veba-primary-light);
    border: 1px solid #bfe0f5;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(16, 16, 39, 0.08);
    margin-bottom: 10px;
}

.veba-pending-note {
    display: block;
    margin-top: 2px;
    color: var(--veba-callout);
    font-size: 0.85em;
    font-style: italic;
    line-height: 1.3;
}

/* Centered inline action (e.g. the cancel-pending-email note + button) */
.veba-center {
    text-align: center;
}

.veba-logo {
    width: 140px;
    height: 80px;
    margin: 0 auto 6px;
    background-image: url('../../../images/veba-logo-white-e_color.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Reuse the app form helper hooks with VEBA colors */
.veba-register .itemTitle {
    color: var(--veba-primary);
    font-weight: 600;
}

.veba-register label {
    color: var(--veba-text);
    font-weight: 600;
}

/* Right-align the label column (th cells) so captions sit next to their inputs.
   The VEBA outline tables override the default aresTable class with veba-card-table-outline,
   so target both to keep every label column right-aligned. */
.veba-register .aresTable th,
.veba-register .veba-card-table-outline th {
    text-align: right;
    vertical-align: middle;
    padding-right: 12px;
    white-space: nowrap;
}

.veba-register .k-form-error {
    color: var(--veba-error);
}

.veba-register ::placeholder {
    color: #8a97a6;
}

/* OTP verification code */
.veba-otp {
    display: flex;
    justify-content: center;
    margin: 10px 0 4px;
}

/* Actions */
.veba-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.veba-btn {
    min-width: 120px;
    padding: 10px 22px;
    font-family: "Quicksand", "Segoe UI", sans-serif;
    font-size: 1em;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.4;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.veba-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

a.veba-btn {
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

.veba-btn-primary {
    background: var(--veba-callout);
    color: #ffffff;
    border-color: var(--veba-callout);
}

.veba-btn-primary:hover:not(:disabled) {
    background: #ea5b46;
    border-color: #ea5b46;
}

.veba-btn-secondary {
    background: var(--veba-surface);
    color: var(--veba-primary);
    border-color: var(--veba-border);
}

.veba-btn-secondary:hover:not(:disabled) {
    background: var(--veba-primary-light);
}

/* Compact in-form button (e.g. the cancel-pending-email action inside a form row) */
.veba-btn-small {
    min-width: 0;
    padding: 4px 14px;
    font-size: 0.85em;
    margin-top: 6px;
}

/* Email confirmation notice (new-email branch) */
.veba-confirm-notice {
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 20px;
    text-align: center;
    background: var(--veba-primary-light);
    border: 1px solid #bfe0f5;
    border-radius: 10px;
    color: var(--veba-ocean);
}

.veba-confirm-icon {
    font-size: 2.4em;
    color: var(--veba-primary);
    display: block;
    margin-bottom: 8px;
}

.veba-confirm-notice p {
    margin: 0;
    font-size: 1.02em;
}

/* Footer notice */
.veba-notice {
    margin-top: 22px;
    padding: 14px 16px;
    font-size: 0.85em;
    font-weight: 500;
    text-align: justify;
    color: var(--veba-text);
    background: #eef0f4;
    border: 1px solid #e3e6ec;
    border-radius: 8px;
}

/* Standalone confirmation landing page */
.veba-result {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: var(--veba-surface);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(16, 16, 39, 0.1);
}

.veba-result-icon {
    font-size: 3.4em;
    display: block;
    margin-bottom: 12px;
}

.veba-result-icon.success {
    color: var(--veba-success);
}

.veba-result-icon.error {
    color: var(--veba-error);
}

.veba-result h2 {
    color: var(--veba-blue);
    font-family: "Quicksand", "Segoe UI", sans-serif;
    margin-bottom: 8px;
}

.veba-result p {
    color: var(--veba-muted);
}

.veba-redirect-timer {
    margin-top: 12px;
    font-size: 0.9em;
    color: var(--veba-muted);
}

/* Configurable Privacy Policy / Terms links (Register, Reset Password) */
.legal-links {
    margin-top: 16px;
    text-align: center;
    font-size: 0.85em;
}

.legal-links a {
    color: var(--veba-primary);
    font-weight: 600;
    text-decoration: none;
}

.legal-links a:hover {
    text-decoration: underline;
}

.legal-links-sep {
    margin: 0 8px;
    color: var(--veba-muted);
}


.aresTable td {
    padding-top: 5px;
    padding-bottom: 5px;
}

.invalidValue {
    color: #ff0000;
    text-decoration: underline wavy;
    -webkit-text-decoration-style: wavy;
    -moz-text-decoration-style: wavy;
    -moz-text-decoration-color: #e49c9c;
    text-decoration-color: #e49c9c;
}

/* ===========================================================================================================
   Responsive (phones / small tablets) for the standalone VEBA pages (Register, Reset Password).
   The form tag helpers emit tables with fixed label column widths and inline pixel widths on the inputs,
   so the label/value cells are stacked and every fixed width is relaxed to 100% below this breakpoint.
   =========================================================================================================== */
@media (max-width: 640px) {

    .veba-standalone-wrap {
        padding: 8px;
    }

    .veba-card {
        padding: 18px 14px 26px;
        border-radius: 14px;
    }

    .veba-form-card {
        padding: 14px 10px;
    }

    .veba-register .veba-card-table-outline {
        padding: 6px;
    }

    /* Stack each label above its value */
    .veba-register table,
    .veba-register tbody,
    .veba-register tr,
    .veba-register th,
    .veba-register td {
        display: block;
        width: auto !important;
    }

    .veba-register .aresTable th,
    .veba-register .veba-card-table-outline th {
        text-align: left;
        padding-right: 0;
        padding-bottom: 2px;
        padding-left: 0;
        white-space: normal;
        max-width: 260px;
        margin: 0 auto;
    }

    .veba-register td {
        padding-left: 0;
        padding-right: 0;
        max-width: 260px;
        margin: 0 auto;
    }

    /* Full-width cells (info captions, consent notes) keep the whole card width */
    .veba-register td[colspan] {
        max-width: none;
    }

    /* Relax the inline pixel widths emitted by the form tag helpers, but keep the inputs
       from stretching the full width of a phone screen. */
    .veba-register td > div[style*="width"],
    .veba-register input[style*="width"],
    .veba-register .k-input,
    .veba-register .k-textbox,
    .veba-register .k-widget,
    .veba-register .k-maskedtextbox {
        width: 100% !important;
        max-width: 260px;
        box-sizing: border-box;
    }

    /* 16px keeps iOS from zooming when an input receives focus */
    .veba-register input,
    .veba-register .k-input-inner {
        font-size: 16px;
    }

    .veba-actions {
        flex-direction: column-reverse;
        align-items: center;
        margin-top: 8px;
    }

    .veba-btn {
        width: 100%;
        max-width: 260px;
        min-width: 0;
    }

    .veba-otp {
        flex-wrap: wrap;
    }

    .veba-notice {
        text-align: left;
    }

    .veba-card-header h2 {
        font-size: 1.25em;
    }
}