/* =================================================================
   🔧  login-safari-fix.css  v3.1  —  Cross-browser compatibility
   
   Include AFTER login.css in login.blade.php:
     <link rel="stylesheet" href="{{ asset('css/login-safari-fix.css') }}">
================================================================= */


/* ─────────────────────────────────────────────────────────────────
   FIX 1 — Password field invisible in Safari (CRITICAL)
   
   ROOT CAUSE: login.css line 364-368:
     input[type="password"]::-webkit-textfield-decoration-container {
       display: none !important;
     }
   
   In Safari (WebKit), -webkit-textfield-decoration-container wraps
   ALL inner content of the input: text + placeholder + decorations.
   display:none hides EVERYTHING → empty password field.
   
   In Chrome/Edge (Blink), this pseudo-element only wraps decorations,
   so Chrome is unaffected.
   
   FIX: Restore the container to Safari's default (display: flex).
        Then hide only the specific native buttons we don't want.
───────────────────────────────────────────────────────────────── */
input[type="password"]::-webkit-textfield-decoration-container {
    display: flex !important;   /* Safari default — restores text + placeholder */
}

/* Hide Safari's native autofill/keychain buttons (not the content) */
input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none !important;
}


/* ─────────────────────────────────────────────────────────────────
   FIX 2 — Logo container height
   
   ROOT CAUSE: .logo-login { height: 10px } clips logo in Safari.
───────────────────────────────────────────────────────────────── */
.logo-login {
    height: auto;
}


/* ─────────────────────────────────────────────────────────────────
   FIX 3 — Form fields container (Safari flex bug)
   
   ROOT CAUSE: align-items: center on a flex-column in Safari makes
               children collapse to intrinsic width.
               overflow-x: auto clips children in Safari.
───────────────────────────────────────────────────────────────── */
.login-box-fields {
    -webkit-align-items: stretch;
    align-items: stretch;
    overflow-x: visible;
}


/* ─────────────────────────────────────────────────────────────────
   FIX 4 — Form section width after position switch
   
   ROOT CAUSE: Safari doesn't auto-expand width from position:absolute
               → position:relative inside a flex container.
───────────────────────────────────────────────────────────────── */
.form-section.show,
.login-form.show,
.register-form.show {
    width: 100%;
}


/* ─────────────────────────────────────────────────────────────────
   FIX 5 — Register form overflow (bottom cut off)
   
   ROOT CAUSE: .login-content { height: 630px; overflow: hidden }
               clips the register form (8 fields exceed 630px).
───────────────────────────────────────────────────────────────── */
/* .login-content {
    height: auto;
    min-height: 630px;
    max-height: 95vh;
} */

.login-right {
    overflow-y: auto;
}


/* ─────────────────────────────────────────────────────────────────
   FIX 6 — Input field flex behavior
───────────────────────────────────────────────────────────────── */
.input-field {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.input-field input,
.styled-input {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


/* ─────────────────────────────────────────────────────────────────
   FIX 7 — Vendor-prefixed flexbox on key containers
───────────────────────────────────────────────────────────────── */
.login-right {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}

.login-content {
    display: -webkit-flex;
    display: flex;
}

.new-login-view {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

.login-box-fields {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.login-other-operate {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}

.language-select {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.select-box {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}


/* ─────────────────────────────────────────────────────────────────
   FIX 8 — Conflicting login-header-banner media queries
───────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
    .login-header-banner {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .login-header-banner {
        display: block !important;
    }

    .login-mobile-brand {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-align-items: center;
        align-items: center;
    }

    .form-section.show,
    .login-form.show,
    .register-form.show {
        max-width: 100%;
    }

    .login-box-fields {
        max-width: 100%;
    }
}


/* ─────────────────────────────────────────────────────────────────
   FIX 9 — Safari checkbox + backdrop-filter
───────────────────────────────────────────────────────────────── */
.remember-label.check-advanced input[type="checkbox"] {
    min-width: 18px;
    min-height: 18px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.login-main-component::before {
    -webkit-backdrop-filter: blur(0px);
}

.login-mobile-brand-icon {
    -webkit-backdrop-filter: blur(8px);
}


/* ─────────────────────────────────────────────────────────────────
   FIX 10 — gap fallback for Safari < 14.1
───────────────────────────────────────────────────────────────── */
@supports not (gap: 10px) {
    .login-box-fields > * + * {
        margin-top: 14px;
    }
    .otp-input-wrapper > .otp-input + .otp-input {
        margin-left: 10px;
    }
}