/* ==========================================================================
   Moni Fintech - Centralised design system
   --------------------------------------------------------------------------
   Tokens are copied VERBATIM from the existing production Customer Dashboard
   (customer.php) so the Splash, Language and Login screens render as one
   application with the Dashboard rather than a separate-looking product.

   Source of truth: customer.php / agent_dashboard.php / partner.php /
   franchise_dashboard.php  (all four share the same --mf-* palette).
   ========================================================================== */

:root {
    /* Surfaces */
    --mf-bg:          #05050A;   /* page background (near-black) */
    --mf-surface:     #101018;   /* cards / sheets */
    --mf-surface-2:   #17171F;   /* inputs / raised rows */
    --mf-surface-3:   #1F1F2A;   /* hover / chip */
    --mf-border:      #26262F;   /* default border */
    --mf-border-soft: #1D1D25;   /* subtle divider */

    /* Brand accent - the dashboard's violet */
    --mf-accent:      #8B5CF6;
    --mf-accent-2:    #A78BFA;   /* lighter accent for headings */
    --mf-accent-deep: #6D28D9;
    --mf-accent-dark: #4C1D95;

    /* Status */
    --mf-success:     #10B981;
    --mf-danger:      #EF4444;
    --mf-warning:     #F59E0B;

    /* Text */
    --mf-text:        #FFFFFF;
    --mf-muted:       #9CA3AF;

    /* Shape + motion - same radius/feel as the dashboard */
    --mf-radius:      18px;
    --mf-radius-sm:   12px;
    --mf-radius-lg:   24px;

    /* Header gradient used by every dashboard */
    --mf-header-gradient: linear-gradient(135deg, #4C1D95 0%, #6D28D9 45%, #8B5CF6 100%);
    --mf-cta-gradient:    linear-gradient(135deg, #6D28D9 0%, #A78BFA 100%);
}

/* ==========================================================================
   Screen shell - one background for splash / language / login
   ========================================================================== */
.mf-shell {
    position: fixed;
    inset: 0;
    background: var(--mf-bg);
    color: var(--mf-text);
    font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
    overflow-y: auto;
    overflow-x: hidden;          /* no horizontal scroll on any breakpoint */
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

/* Safe-area aware padding (iPhone notch + Android gesture bar) */
.mf-safe-t { padding-top: max(1rem, env(safe-area-inset-top)); }
.mf-safe-b { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }

/* ==========================================================================
   Brand lockup - identical on all three screens
   ========================================================================== */
.mf-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-shrink: 0;
}
.mf-brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .625rem;
    background: var(--mf-cta-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
    color: #fff;
    flex-shrink: 0;
}
.mf-brand-name {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
}
.mf-brand-name span { color: var(--mf-accent-2); }
.mf-brand-sub {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mf-muted);
    line-height: 1.1;
    margin-top: .125rem;
}

/* ==========================================================================
   Type scale
   ========================================================================== */
.mf-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--mf-text);
    /* Telugu glyphs are taller - give them room */
    overflow-wrap: break-word;
}
.mf-subtitle {
    font-size: .9375rem;
    color: var(--mf-muted);
    line-height: 1.5;
    overflow-wrap: break-word;
}
.mf-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mf-text);
    margin-bottom: .375rem;
    overflow-wrap: break-word;
}

/* ==========================================================================
   Inputs - dashboard field styling (surface-2 fill, violet focus ring)
   ========================================================================== */
.mf-field {
    display: flex;
    align-items: center;
    background: var(--mf-surface-2);
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-sm);
    transition: border-color .18s ease, box-shadow .18s ease;
    overflow: hidden;
}
.mf-field:focus-within {
    border-color: var(--mf-accent);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .22);
}
.mf-field-icon {
    display: flex;
    align-items: center;
    padding: 0 .875rem;
    color: var(--mf-muted);
    font-size: 1.05rem;
    flex-shrink: 0;
}
.mf-input {
    flex: 1 1 auto;
    min-width: 0;                /* prevents input overflow on small screens */
    background: transparent;
    border: 0;
    outline: none;
    color: var(--mf-text);
    font-size: .9375rem;
    padding: .9375rem .25rem;
    font-family: inherit;
}
.mf-input::placeholder { color: #6B7280; }

/* Standalone input (not wrapped in .mf-field) - e.g. the register form. */
.mf-standalone {
    display: block;
    width: 100%;
    background: var(--mf-surface-2);
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-sm);
    padding: .9375rem 1rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.mf-standalone:focus {
    border-color: var(--mf-accent);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .22);
}
.mf-standalone::placeholder { color: #6B7280; }
.mf-eye {
    background: transparent;
    border: 0;
    color: var(--mf-muted);
    padding: 0 1rem;
    font-size: 1.15rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.mf-eye:active { color: var(--mf-accent-2); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.mf-btn {
    width: 100%;
    border: 0;
    border-radius: var(--mf-radius-sm);
    padding: 1rem;
    font-size: .9375rem;
    font-weight: 700;
    color: #fff;
    background: var(--mf-cta-gradient);
    cursor: pointer;
    font-family: inherit;
    transition: transform .12s ease, opacity .18s ease, box-shadow .18s ease;
    box-shadow: 0 8px 24px rgba(109, 40, 217, .30);
    /* long Telugu labels must never overflow the button */
    overflow-wrap: break-word;
    text-align: center;
}
.mf-btn:active { transform: scale(.985); }
.mf-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.mf-btn-ghost {
    background: var(--mf-surface-2);
    border: 1px solid var(--mf-border);
    box-shadow: none;
    color: var(--mf-text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.mf-btn-ghost:active { background: var(--mf-surface-3); }

.mf-link {
    background: none;
    border: 0;
    color: var(--mf-accent-2);
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    padding: .25rem;
    font-family: inherit;
}

/* ==========================================================================
   Checkbox (Remember Me) - dashboard accent
   ========================================================================== */
.mf-check {
    display: flex;
    align-items: center;
    gap: .625rem;
    cursor: pointer;
    user-select: none;
    font-size: .875rem;
    color: var(--mf-text);
}
.mf-check input {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    accent-color: var(--mf-accent);
    border-radius: 4px;
    cursor: pointer;
}
.mf-check input:focus-visible { outline: 2px solid var(--mf-accent-2); outline-offset: 2px; }

/* ==========================================================================
   Language picker cards
   ========================================================================== */
.mf-lang-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    text-align: left;
    padding: 1.125rem 1.25rem;
    border-radius: var(--mf-radius);
    background: var(--mf-surface);
    border: 1px solid var(--mf-border);
    color: var(--mf-text);
    cursor: pointer;
    font-family: inherit;
    transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.mf-lang-card:active { transform: scale(.99); }
.mf-lang-card.is-active {
    border-color: var(--mf-accent);
    background: linear-gradient(135deg, rgba(139, 92, 246, .16), rgba(109, 40, 217, .08));
}
.mf-lang-name {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: break-word;   /* Telugu must never clip */
}
.mf-lang-native {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: break-word;
}
.mf-lang-check {
    font-size: 1.4rem;
    color: var(--mf-accent-2);
    opacity: 0;
    transition: opacity .18s ease;
    flex-shrink: 0;
}
.mf-lang-card.is-active .mf-lang-check { opacity: 1; }

/* ==========================================================================
   Back button (shared by register / forgot / otp)
   ========================================================================== */
.mf-back {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: var(--mf-surface-2);
    border: 1px solid var(--mf-border);
    color: var(--mf-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .18s ease, transform .12s ease;
}
.mf-back:active { background: var(--mf-surface-3); transform: scale(.94); }

/* ==========================================================================
   Account-type selector (Create Account)
   ========================================================================== */
.mf-role-card {
    background: var(--mf-surface);
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-sm);
    padding: .875rem .75rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .12s ease;
    overflow-wrap: break-word;
}
.mf-role-card:active { transform: scale(.97); }
.mf-role-card i { font-size: 1.5rem; display: block; margin: 0 auto .375rem; color: var(--mf-muted); transition: color .18s ease; }
.mf-role-card h3 { font-size: .8125rem; font-weight: 600; color: var(--mf-muted); transition: color .18s ease; }
.mf-role-card.is-active {
    border-color: var(--mf-accent);
    background: linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(109, 40, 217, .08));
}
.mf-role-card.is-active i { color: var(--mf-accent-2); }
.mf-role-card.is-active h3 { color: var(--mf-text); font-weight: 700; }

/* ==========================================================================
   Error / info alert
   ========================================================================== */
.mf-alert {
    padding: .75rem 1rem;
    border-radius: var(--mf-radius-sm);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: break-word;
}
.mf-alert-error {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .35);
    color: #FCA5A5;
}

/* ==========================================================================
   OTP boxes
   ========================================================================== */
.mf-otp {
    width: 100%;
    max-width: 3.25rem;
    flex: 1 1 0;
    min-width: 0;                 /* never overflow on 320px screens */
    height: 3.5rem;
    background: var(--mf-surface-2);
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-sm);
    color: var(--mf-text);
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.mf-otp:focus {
    border-color: var(--mf-accent);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .22);
}

/* Textarea shares the input styling. */
.mf-area {
    width: 100%;
    background: var(--mf-surface-2);
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-sm);
    color: var(--mf-text);
    font-size: .9375rem;
    padding: .875rem;
    font-family: inherit;
    outline: none;
    resize: vertical;
}
.mf-area:focus {
    border-color: var(--mf-accent);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .22);
}

/* Password strength bars sit on the dark surface. */
.strength-bar { background-color: var(--mf-surface-3) !important; }

/* ==========================================================================
   Splash
   ========================================================================== */
.mf-splash-logo {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 1.75rem;
    background: var(--mf-cta-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 20px 50px rgba(109, 40, 217, .45);
    animation: mf-pop .6s cubic-bezier(.2, .9, .3, 1.2) both;
}
.mf-splash-title {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    animation: mf-rise .6s .1s ease both;
}
.mf-splash-tag {
    font-size: .875rem;
    color: var(--mf-muted);
    animation: mf-rise .6s .2s ease both;
}
.mf-splash-bar {
    width: 8rem;
    height: 3px;
    border-radius: 999px;
    background: var(--mf-surface-3);
    overflow: hidden;
}
.mf-splash-bar::after {
    content: '';
    display: block;
    width: 45%;
    height: 100%;
    border-radius: 999px;
    background: var(--mf-cta-gradient);
    animation: mf-slide 1.1s ease-in-out infinite;
}
@keyframes mf-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(220%); } }
@keyframes mf-pop { from { transform: scale(.82); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes mf-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Respect the OS "reduce motion" setting (PWA + accessibility). */
@media (prefers-reduced-motion: reduce) {
    .mf-splash-logo, .mf-splash-title, .mf-splash-tag { animation: none; }
    .mf-splash-bar::after { animation: none; width: 100%; }
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.mf-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.25rem 0;
    width: 100%;
    max-width: 27rem;
    margin: 0 auto;
}
.mf-footer {
    padding: 1.25rem;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    width: 100%;
    max-width: 27rem;
    margin: 0 auto;
}
.mf-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--mf-muted);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.mf-divider::before, .mf-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--mf-border);
}

/* Telugu needs a font with full Indic coverage + a touch more line height. */
:root[lang="te"] { font-family: 'Noto Sans Telugu', 'Inter', system-ui, sans-serif; }
:root[lang="te"] .mf-title, :root[lang="te"] .mf-subtitle { line-height: 1.55; }
:root[lang="te"] .mf-input, :root[lang="te"] .mf-btn { line-height: 1.5; }

/* Short viewports (landscape phones) must still scroll, never clip. */
@media (max-height: 640px) {
    .mf-title { font-size: 1.5rem; }
    .mf-splash-logo { width: 4.25rem; height: 4.25rem; font-size: 2rem; }
}