/* ==========================================================================
   MadarTech — mobile login screen.
   Everything here is inside @media (max-width: 768px): the desktop login is
   byte-for-byte the same page it was before this file existed.
   Loaded only from Tobuli/Views/Frontend/Login/create.blade.php.
   ========================================================================== */

/* injected by madar-mlogin.js — hidden unless the mobile block below turns
   them on, so they can never appear on desktop */
.mt-m-login-head,
.mt-m-login-features,
.mt-m-login-trust { display: none; }

@media (max-width: 768px) {

    /* ---------- page background ---------- */
    /* the theme pins html/body to 100% height; once the mobile card is taller
       than the viewport the gradient would stop short and leave a seam */
    html { height: auto !important; min-height: 100% !important; background-color: #071a33; }
    body.sign-in-layout {
        height: auto !important;
        min-height: 100vh !important;
        background-color: #071a33 !important;
        background-image:
            radial-gradient(120% 80% at 50% 0%, rgba(23,134,201,.30) 0%, rgba(7,26,51,0) 62%),
            linear-gradient(180deg, #0a2745 0%, #071a33 55%, #050f20 100%) !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-attachment: scroll !important;
    }

    /* ---------- let the card flow instead of being absolutely centred ---------- */
    body.sign-in-layout .center-vertical {
        position: static !important;
        transform: none !important;
        top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.sign-in-layout .container {
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    body.sign-in-layout .container > div[class*="col-"] {
        width: 100% !important;
        float: none !important;
        left: auto !important; right: auto !important;
        margin: 0 !important;
        padding: 26px 18px 40px !important;
    }

    /* ---------- brand head replaces the logo image ---------- */
    body.sign-in-layout h1.sign-in-text { display: none !important; }
    body.sign-in-layout .panel-body > a { display: none !important; }
    body.sign-in-layout .panel-body > hr { display: none !important; }

    .mt-m-login-head { display: block; text-align: center; }
    .mt-m-app-icon {
        width: 92px; height: 92px; margin: 0 auto 14px; display: block;
        filter: drop-shadow(0 10px 26px rgba(12,80,170,.55));
    }
    .mt-m-wordmark {
        font-size: 32px; font-weight: 800; letter-spacing: -.5px;
        color: #fff; line-height: 1;
    }
    .mt-m-wordmark span { color: #2f9bf0; }
    .mt-m-title {
        font-size: 27px; font-weight: 800; color: #fff;
        text-align: center; margin: 20px 0 8px; line-height: 1.2;
    }
    .mt-m-sub {
        font-size: 14.5px; color: #9db6d4;
        text-align: center; margin: 0 0 22px; line-height: 1.45;
    }

    /* ---------- form card ---------- */
    body.sign-in-layout .panel {
        background: rgba(13,38,68,.55) !important;
        border: 1px solid rgba(90,140,200,.22) !important;
        border-radius: 18px !important;
        box-shadow: none !important;
        overflow: hidden !important;
        margin: 0 !important;
    }
    body.sign-in-layout .panel-background { display: none !important; }
    body.sign-in-layout .panel-body {
        padding: 20px 16px !important;
        background: none !important;
    }

    body.sign-in-layout .form-group { margin-bottom: 16px !important; }
    body.sign-in-layout .form-control {
        height: 54px !important;
        border-radius: 12px !important;
        background: rgba(8,26,48,.75) !important;
        border: 1px solid rgba(90,140,200,.30) !important;
        color: #eaf2ff !important;
        font-size: 15.5px !important;
        padding-left: 50px !important;
        box-shadow: none !important;
    }
    body.sign-in-layout .form-control::placeholder { color: #7f9ab8 !important; }
    body.sign-in-layout .form-control:focus { border-color: #2f9bf0 !important; }

    /* saved credentials otherwise render on the browser's pale autofill fill */
    body.sign-in-layout .form-control:-webkit-autofill,
    body.sign-in-layout .form-control:-webkit-autofill:hover,
    body.sign-in-layout .form-control:-webkit-autofill:focus {
        -webkit-text-fill-color: #eaf2ff !important;
        -webkit-box-shadow: 0 0 0 1000px #0b2038 inset !important;
        caret-color: #eaf2ff;
    }

    .mt-m-field { position: relative; }
    .mt-m-field > .mt-m-ico {
        position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
        width: 21px; height: 21px; color: #2f9bf0;
        pointer-events: none; z-index: 2;
    }

    body.sign-in-layout .checkbox { margin: 4px 0 18px !important; }
    body.sign-in-layout .checkbox label {
        color: #cfe0f5 !important;
        font-size: 14.5px !important;
    }

    body.sign-in-layout button.btn-primary {
        height: 56px !important;
        border-radius: 12px !important;
        border: 0 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #fff !important;
        background: linear-gradient(90deg, #1546c8 0%, #1f8ae0 100%) !important;
        box-shadow: 0 10px 24px rgba(20,80,190,.45) !important;
    }
    body.sign-in-layout form.form hr { display: none !important; }
    body.sign-in-layout a.btn-default {
        background: none !important;
        border: 0 !important;
        color: #2f9bf0 !important;
        font-size: 15.5px !important;
        font-weight: 600 !important;
        box-shadow: none !important;
        height: auto !important;
        padding: 10px 0 0 !important;
    }

    /* ---------- feature cards ---------- */
    .mt-m-login-features {
        display: flex;
        margin-top: 18px;
        background: rgba(13,38,68,.45);
        border: 1px solid rgba(90,140,200,.20);
        border-radius: 18px;
        padding: 18px 4px;
    }
    .mt-m-feat { flex: 1 1 0; text-align: center; padding: 0 8px; min-width: 0; }
    .mt-m-feat + .mt-m-feat { border-left: 1px solid rgba(90,140,200,.18); }
    .mt-m-feat-ico {
        width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 10px;
        display: flex; align-items: center; justify-content: center;
    }
    .mt-m-feat-ico svg { width: 22px; height: 22px; }
    .mt-m-feat-ico.is-blue   { background: rgba(47,155,240,.16);  color: #2f9bf0; }
    .mt-m-feat-ico.is-purple { background: rgba(139,110,240,.16); color: #8b6ef0; }
    .mt-m-feat-ico.is-green  { background: rgba(60,190,120,.16);  color: #3cbe78; }
    .mt-m-feat-title { font-size: 13.5px; font-weight: 700; color: #eaf2ff; margin-bottom: 4px; }
    .mt-m-feat-desc  { font-size: 12px; color: #93aecd; line-height: 1.35; }

    /* ---------- trust footer ---------- */
    .mt-m-login-trust {
        display: flex; align-items: center; justify-content: center; gap: 12px;
        margin: 24px 6px 0;
        color: #93aecd; font-size: 13.5px; line-height: 1.4; text-align: left;
    }
    .mt-m-login-trust svg { width: 30px; height: 30px; color: #2f9bf0; flex: 0 0 auto; }

    /* ---------- the page's own footer content, kept, restyled for the dark bg ---------- */
    body.sign-in-layout .app-links {
        text-align: center !important;
        margin: 22px 0 0 !important;
    }
    body.sign-in-layout .app-links > div[class*="col-"] {
        width: auto !important;
        float: none !important;
        display: inline-block !important;
        padding: 0 6px !important;
    }
    body.sign-in-layout .app-links img {
        display: inline-block !important;
        max-height: 46px;
        width: auto !important;
    }
    body.sign-in-layout p.sign-in-text {
        color: #7f9ab8 !important;
        font-size: 12.5px !important;
        text-align: center !important;
        margin: 16px 0 0 !important;
        word-break: break-word;
    }
}

/* In the installed home-screen app the top of the web view sits under the
   camera area, so the app icon needs to start below it. */
@media (max-width: 768px) and (display-mode: standalone) {
    body.sign-in-layout .container > div[class*="col-"] {
        padding-top: max(calc(env(safe-area-inset-top, 0px) + 14px), 68px) !important;
    }
}

/* Hide the scrollbar on the mobile login, keep the scrolling. */
@media (max-width: 768px) {
    html,
    body.sign-in-layout {
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* old Edge/IE */
    }
    html::-webkit-scrollbar,
    body.sign-in-layout::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }
}

/* ==========================================================================
   Contact icons — WhatsApp + Facebook — replacing the Google Play badge and the
   bare WhatsApp URL on the mobile login. Both originals are only HIDDEN, never
   removed, so the desktop login is byte-for-byte what it was.
   ========================================================================== */
.mt-m-social { display: none; }

@media (max-width: 768px) {
    body.sign-in-layout .app-links { display: none !important; }
    body.sign-in-layout p.sign-in-text { display: none !important; }

    .mt-m-social {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        margin: 24px 0 0;
    }
    .mt-m-social a {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(13,38,68,.45);
        border: 1px solid rgba(90,140,200,.22);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .mt-m-social a:active { background: rgba(13,38,68,.75); }
    .mt-m-social a svg { width: 23px; height: 23px; }
    .mt-m-social a.is-wa { color: #25d366; }
    .mt-m-social a.is-fb { color: #4c8bf5; }
}

/* ==========================================================================
   Light mode for the mobile login.

   The colour choice is made by madar-mobile.js on the map page and remembered in
   localStorage; the login page never loads that file, so madar-mlogin.js reads the
   same key and applies the same html.theme-light class here. Default with nothing
   stored is whatever the phone is set to.

   Dark stays the base design — this block only overrides what has to change.
   ========================================================================== */
@media (max-width: 768px) {
    html.theme-light { background-color: #f7fafd; }

    html.theme-light body.sign-in-layout {
        background-color: #f7fafd !important;
        background-image:
            radial-gradient(120% 80% at 50% 0%, rgba(47,155,240,.18) 0%, rgba(247,250,253,0) 62%),
            linear-gradient(180deg, #f9fbfd 0%, #eef3f9 55%, #e6edf6 100%) !important;
    }

    /* brand head */
    html.theme-light .mt-m-app-icon { filter: drop-shadow(0 8px 20px rgba(20,80,170,.28)); }
    html.theme-light .mt-m-wordmark { color: #10233c; }
    html.theme-light .mt-m-wordmark span { color: #1f8ae0; }
    html.theme-light .mt-m-title { color: #10233c; }
    html.theme-light .mt-m-sub { color: #5b6b80; }

    /* form card */
    html.theme-light body.sign-in-layout .panel {
        background: rgba(255,255,255,.92) !important;
        border: 1px solid rgba(20,50,90,.12) !important;
        box-shadow: 0 6px 22px rgba(20,50,90,.07) !important;
    }
    html.theme-light body.sign-in-layout .form-control {
        background: #ffffff !important;
        border: 1px solid rgba(20,50,90,.18) !important;
        color: #16233a !important;
    }
    html.theme-light body.sign-in-layout .form-control::placeholder { color: #8a99ab !important; }
    html.theme-light body.sign-in-layout .form-control:focus { border-color: #1f8ae0 !important; }
    html.theme-light body.sign-in-layout .form-control:-webkit-autofill,
    html.theme-light body.sign-in-layout .form-control:-webkit-autofill:hover,
    html.theme-light body.sign-in-layout .form-control:-webkit-autofill:focus {
        -webkit-text-fill-color: #16233a !important;
        -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
        caret-color: #16233a;
    }
    html.theme-light body.sign-in-layout .checkbox label { color: #40506a !important; }
    html.theme-light body.sign-in-layout a.btn-default { color: #1f8ae0 !important; }

    /* feature cards */
    html.theme-light .mt-m-login-features {
        background: rgba(255,255,255,.85);
        border: 1px solid rgba(20,50,90,.10);
    }
    html.theme-light .mt-m-feat + .mt-m-feat { border-left-color: rgba(20,50,90,.10); }
    html.theme-light .mt-m-feat-title { color: #16233a; }
    html.theme-light .mt-m-feat-desc { color: #5b6b80; }

    /* trust footer + contact icons */
    html.theme-light .mt-m-login-trust { color: #5b6b80; }
    html.theme-light .mt-m-social a {
        background: #ffffff;
        border: 1px solid rgba(20,50,90,.12);
        box-shadow: 0 2px 8px rgba(20,50,90,.06);
    }
    html.theme-light .mt-m-social a:active { background: #eef3f9; }
}

/* Login feedback: the form is a plain POST to /authentication/store, so between the
   tap and the server's redirect nothing changes on screen and the user cannot tell
   the tap registered. Swap the button label for a spinner while it is in flight.
   Mobile only, like everything else in this file. */
@media (max-width: 768px) {
    body.sign-in-layout form.mt-login-busy button.btn-primary {
        position: relative !important;
        color: transparent !important;
        pointer-events: none !important;
    }
    body.sign-in-layout form.mt-login-busy button.btn-primary::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 18px !important;
        height: 18px !important;
        margin: -9px 0 0 -9px !important;
        border: 2px solid rgba(255, 255, 255, .35) !important;
        border-top-color: #fff !important;
        border-radius: 50% !important;
        animation: mtLoginSpin .6s linear infinite !important;
    }
}
@keyframes mtLoginSpin { to { transform: rotate(360deg); } }