/*
 * Mart24 — Login/Register pop-up modal styling.
 * Scoped entirely under .mart24-auth-modal so it can never leak onto the
 * full-page /login, /register views (different wrapper: .auth-card) or any
 * other part of the site. Mobile-first: base rules target small screens,
 * refinements happen at the sm/md breakpoint.
 */

.mart24-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.mart24-auth-modal.is-open {
    display: flex;
}

body.mart24-auth-modal-open {
    overflow: hidden;
}

.mart24-auth-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 15, 28, 0.55);
    animation: mart24AuthFadeIn 0.18s ease-out;
}

.mart24-auth-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    max-height: 92vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 24px rgba(1, 15, 28, 0.12);
    padding: 28px 22px 26px;
    animation: mart24AuthSlideUp 0.22s ease-out;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 576px) {
    .mart24-auth-modal {
        align-items: center;
        padding: 20px;
    }

    .mart24-auth-modal__dialog {
        border-radius: 20px;
        padding: 36px 36px 32px;
        box-shadow: 0 20px 60px rgba(1, 15, 28, 0.18);
        animation: mart24AuthPopIn 0.2s ease-out;
    }
}

@keyframes mart24AuthFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mart24AuthSlideUp {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes mart24AuthPopIn {
    from { transform: scale(0.97); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.mart24-auth-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f3f5f7;
    border-radius: 50%;
    color: #57626b;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mart24-auth-modal__close:hover {
    background: #e9ecef;
    color: #010f1c;
}

.mart24-auth-modal__panel[hidden] {
    display: none;
}

.mart24-auth-modal__header {
    text-align: center;
    margin-bottom: 22px;
}

.mart24-auth-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--tp-theme-primary, #0989ff);
    color: #fff;
    font-size: 24px;
    margin-bottom: 14px;
}

.mart24-auth-modal__header h3 {
    font-size: 22px;
    font-weight: 700;
    color: #010f1c;
    margin: 0 0 6px;
}

.mart24-auth-modal__header p {
    font-size: 14px;
    color: #67728a;
    margin: 0;
}

/* --- Alert (general error/success banner) --- */
.mart24-auth-modal__alert {
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    background: #fdecea;
    color: #b3261e;
    border: 1px solid #f5c6c2;
}

.mart24-auth-modal__alert.is-success {
    background: #e9f7ef;
    color: #1e7e42;
    border-color: #bfe8cf;
}

/* --- Google button + divider --- */
.mart24-auth-modal__google {
    margin-bottom: 16px;
}

.mart24-auth-modal__google .login-options-title {
    display: none;
}

.mart24-auth-modal__google ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mart24-auth-modal__google ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    border: 1px solid #dadce0;
    border-radius: 10px;
    background: #fff;
    color: #3c4043;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.mart24-auth-modal__google ul li a:hover {
    box-shadow: 0 1px 4px rgba(60, 64, 67, 0.2);
    background: #f8f9fa;
}

.mart24-auth-modal__google ul li a img {
    width: 18px;
    height: 18px;
}

.mart24-auth-modal__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: #9aa4b2;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.mart24-auth-modal__divider::before,
.mart24-auth-modal__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e6e9ee;
}

/* --- Form fields --- */
.mart24-auth-modal__body form .form-group {
    margin-bottom: 16px;
}

.mart24-auth-modal__body .form-label {
    font-size: 13px;
    font-weight: 600;
    color: #33404c;
    margin-bottom: 6px;
    display: inline-block;
}

.mart24-auth-modal__body .form-control,
.mart24-auth-modal__body input[type="text"],
.mart24-auth-modal__body input[type="email"],
.mart24-auth-modal__body input[type="password"],
.mart24-auth-modal__body input[type="tel"] {
    width: 100%;
    min-height: 46px;
    border-radius: 10px;
    border: 1px solid #dfe3e8;
    padding: 10px 14px;
    font-size: 15px;
    color: #010f1c;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mart24-auth-modal__body .form-control:focus,
.mart24-auth-modal__body input:focus {
    outline: none;
    border-color: var(--tp-theme-primary, #0989ff);
    box-shadow: 0 0 0 3px rgba(9, 137, 255, 0.14);
}

.mart24-auth-modal__body .input-group {
    position: relative;
}

.mart24-auth-modal__body .input-password-toggle {
    color: #9aa4b2;
}

/* Remember-me row + forgot password (LoginForm's row wrapper) */
.mart24-auth-modal__body .row.g-0.mb-3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px !important;
    font-size: 13px;
}

.mart24-auth-modal__body .row.g-0.mb-3 a {
    color: var(--tp-theme-primary, #0989ff);
    text-decoration: none;
    font-weight: 600;
}

.mart24-auth-modal__body .row.g-0.mb-3 a:hover {
    text-decoration: underline;
}

/* --- Submit button --- */
.mart24-auth-modal__body .btn-auth-submit {
    width: 100%;
    min-height: 48px;
    border-radius: 10px;
    background: var(--tp-theme-primary, #0989ff);
    border-color: var(--tp-theme-primary, #0989ff);
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mart24-auth-modal__body .btn-auth-submit:hover,
.mart24-auth-modal__body .btn-auth-submit:focus {
    filter: brightness(0.94);
}

.mart24-auth-modal__body .btn-auth-submit[disabled] {
    opacity: 0.65;
    pointer-events: none;
}

.mart24-auth-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: mart24AuthSpin 0.6s linear infinite;
}

@keyframes mart24AuthSpin {
    to { transform: rotate(360deg); }
}

/* --- Switch link (Sign In <-> Register) --- */
.mart24-auth-modal__switch {
    text-align: center;
    font-size: 13px;
    color: #67728a;
    margin-top: 18px;
}

.mart24-auth-modal__switch a {
    color: var(--tp-theme-primary, #0989ff);
    font-weight: 700;
    text-decoration: none;
    margin-left: 4px;
}

.mart24-auth-modal__switch a:hover {
    text-decoration: underline;
}

/* --- Register form: Email is optional, no red "*" marker ---
   The PHP-side field option (required => false) correctly removes the
   HTML5 required attribute and updates the label text to
   "Email (optional)", but Botble's underlying Kris\LaravelFormBuilder
   field renderer separately tracks a "rules" hint on the field that
   still causes it to print the CSS class ".required" (which draws the
   red "*" via ::after) — that class stays attached regardless of the
   'required' option once set for this field. Suppressing the visual
   marker here is simpler and more robust than fighting that internal
   mechanism. Scoped to the register form's email field specifically
   (both the full-page /register form and the modal's register panel
   render via the same RegisterForm class/id), so nothing else on the
   site is affected. */
#botble-ecommerce-forms-fronts-auth-register-form label[for="email"].required::after {
    content: none !important;
}

/* --- Field-level error text injected by mart24-auth-modal.js --- */
.mart24-field-error {
    color: #b3261e;
    font-size: 12px;
    margin-top: 5px;
}

.mart24-auth-modal__body .form-group.has-mart24-error .form-control,
.mart24-auth-modal__body .form-group.has-mart24-error input {
    border-color: #b3261e;
}