/*
|------------------------------------------------------------------------------
| WonGate — dark auth theme
|------------------------------------------------------------------------------
| Makes ONLY the login / register / forgot-password pages dark charcoal so they
| match the native app splash. Scoped to `body.frontend-auth-layout`, so
| dashboards and every other page are completely untouched.
|
| Pure presentation: no selector here changes layout, form fields' names, JS
| hooks, reCAPTCHA, or the portal-switch behaviour. It only repaints surfaces
| and text. Load this AFTER agent.css.
*/

body.frontend-auth-layout {
    /* Repaint the CSS variables the auth markup already consumes. Because the
       login blade colours everything through these vars, overriding them here
       recolours the whole card with zero markup edits. */
    --front-color-bg: #0E1116;
    --front-color-card: #151A21;
    --front-color-surface: #1A2028;
    --front-color-surface-soft: #12171E;
    --front-color-heading: #EAF0F7;
    --front-color-text: #C4CDD8;
    --front-color-text-soft: #9AA6B4;
    --front-color-muted: #9AA6B4;
    --front-color-border: rgba(255, 255, 255, 0.10);
    --front-color-border-soft: rgba(255, 255, 255, 0.07);

    background: radial-gradient(1200px 600px at 50% -10%, #142033 0%, #0E1116 60%) fixed;
    color: var(--front-color-text);
}

/* Page + shell background */
body.frontend-auth-layout .auth-content,
body.frontend-auth-layout .bg-gray {
    background: transparent !important;
}

/* The card */
body.frontend-auth-layout .auth-card {
    background: var(--front-color-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
    color: var(--front-color-text);
}

/* Headings + copy */
body.frontend-auth-layout .auth-title {
    color: #EAF0F7;
}
body.frontend-auth-layout .auth-subtitle,
body.frontend-auth-layout .form-check-label,
body.frontend-auth-layout label.form-label {
    color: #9AA6B4;
}

/* Inputs */
body.frontend-auth-layout .form-control,
body.frontend-auth-layout .input-group-text {
    background: #10151C;
    border-color: rgba(255, 255, 255, 0.10);
    color: #EAF0F7;
}
body.frontend-auth-layout .form-control::placeholder {
    color: #5C6675;
}
body.frontend-auth-layout .form-control:focus {
    background: #10151C;
    border-color: var(--front-color-primary);
    box-shadow: 0 0 0 0.18rem rgba(var(--front-color-primary-rgb), 0.25);
    color: #EAF0F7;
}
body.frontend-auth-layout .input-group-text {
    color: #9AA6B4;
}

/* The password eye toggle sits in an input-group-text with bg-transparent */
body.frontend-auth-layout .input-group-text.bg-transparent {
    background: #10151C !important;
    color: #9AA6B4;
}

/* Remember-me checkbox */
body.frontend-auth-layout .form-check-input {
    background-color: #10151C;
    border-color: rgba(255, 255, 255, 0.25);
}
body.frontend-auth-layout .form-check-input:checked {
    background-color: var(--front-color-primary);
    border-color: var(--front-color-primary);
}

/* Divider line above SWITCH PORTAL */
body.frontend-auth-layout hr,
body.frontend-auth-layout .auth-divider {
    border-color: rgba(255, 255, 255, 0.08);
    opacity: 1;
}

/* Portal switch tabs (User / Merchant / Agent) */
body.frontend-auth-layout .portal-switch,
body.frontend-auth-layout .auth-portal-switch {
    background: #10151C;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
body.frontend-auth-layout .portal-switch a,
body.frontend-auth-layout .auth-portal-switch a {
    color: #9AA6B4;
}

/* The little "SWITCH PORTAL" caption */
body.frontend-auth-layout .auth-switch-label,
body.frontend-auth-layout .text-muted {
    color: #6C7787 !important;
}

/* Demo-credentials helper box, if shown */
body.frontend-auth-layout .demo-credentials,
body.frontend-auth-layout .auth-demo {
    background: #10151C;
    border-color: rgba(255, 255, 255, 0.08);
    color: #C4CDD8;
}

/* Keep the primary submit button vivid on dark */
body.frontend-auth-layout .btn-submit-auth {
    box-shadow: 0 12px 30px -12px rgba(var(--front-color-primary-rgb), 0.7);
}