/* ==========================================
   PROFESSIONAL LUXURY THEME (Didot + EB Garamond)
========================================== */
body {
    font-family: 'Didot', serif;
}

/* ==========================================
   PROFESSIONAL MODERN THEME (Playfair Display + Source Sans Pro)
========================================== */
.modern-theme {
    font-family: 'Playfair Display', serif;
}

.modern-theme input,
.modern-theme button,
.modern-theme .form-input {
    font-family: 'Source Sans Pro', sans-serif;
}

/* ==========================================
   WARM 3D MODERN THEME
========================================== */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Source Sans Pro', sans-serif;
    background-color: #fef7f3;
}

/* Professional luxury fallback */
.luxury-theme {
    font-family: 'EB Garamond', serif;
}

/* Professional modern theme */
.modern-theme {
    font-family: 'Playfair Display', serif;
}

.modern-theme .pill-input,
.modern-theme .pill-btn {
    font-family: 'Source Sans Pro', sans-serif;
}

/* ==========================================
   LAYOUT
========================================== */
.modern-auth-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* ==========================================
   LEFT SIDE: FORM
========================================== */
.modern-form-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    z-index: 2;
}

.form-content-box {
    width: 100%;
    max-width: 500px;
}

.auth-heading {
    font-size: 32px;
    font-weight: 700;
    color: #4a403a;
    margin-bottom: 45px;
    text-align: center;
}

/* ==========================================
   PHONE INPUT FIX (PILL STYLE MATCH)
========================================== */
.phone-group {
    position: relative;
    margin-bottom: 25px;
}

.phone-wrapper {
    display: flex;
    align-items: center;
    border: 1.5px solid #062037;
    border-radius: 50px;
    padding: 0 15px;
    height: 55px;
    background: transparent;
    transition: 0.3s;
}

.phone-wrapper:focus-within {
    border-color: #062037;
}

/* Country Code */
.phone-code {
    border: none;
    background: transparent;
    font-family: "Poppins";
    font-size: 14px;
    color: #4a403a;
    outline: none;
    margin-right: 10px;
    cursor: pointer;
}

/* Divider Line */
.phone-divider {
    width: 1px;
    height: 20px;
    background: #062037;
    margin-right: 10px;
}

/* Phone Input */
.phone-input {
    border: none;
    outline: none;
    width: 100%;
    font-family: "Poppins";
    font-size: 14px;
    color: #4a403a;
    background: transparent;
}

/* Icon */
.phone-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #8d817a;
}

/* Adjust padding because of icon */
.phone-wrapper {
    padding-left: 0;
}

/* ==========================================
   COUNTRY PICKER
=========================================== */
.country-picker {
    position: relative;
    display: flex;
    height: 100%;
}

button.phone-country-prefix {
    border: none;
    cursor: pointer;
    outline: none;
    gap: 6px;
    transition: all 0.3s ease;
    margin: 0;
    border-right: 1.5px solid #062037;
    border-radius: 50px 0 0 50px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: transparent;
    color: #4a403a;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    height: 100%;
}

button.phone-country-prefix:hover {
    background: #f5f3ef;
}

.country-picker-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 280px;
    background: #ffffff;
    border: 1.5px solid #062037;
    border-radius: 15px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.country-picker-dropdown.cp-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cp-search-box {
    padding: 12px;
    border-bottom: 1.5px solid #062037;
    position: relative;
    display: flex;
    align-items: center;
}

.cp-search-box i {
    position: absolute;
    left: 24px;
    color: #8d817a;
    font-size: 13px;
}

.cp-search-box input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border: 1px solid #b4a9a2;
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    outline: none;
    transition: all 0.3s ease;
}

.cp-search-box input:focus {
    border-color: #062037;
}

.country-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}

.country-list::-webkit-scrollbar {
    width: 6px;
}
.country-list::-webkit-scrollbar-track {
    background: transparent;
}
.country-list::-webkit-scrollbar-thumb {
    background: #b4a9a2;
    border-radius: 4px;
}

.cp-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    transition: background 0.2s;
    color: #4a403a;
}

.cp-item:hover {
    background: #fdf7f3;
}

.cp-item--active {
    background: #f0e9e4;
    font-weight: 600;
}

.cp-item__flag {
    margin-right: 12px;
    width: 20px;
    display: block;
    box-shadow: 0 0 1px rgba(0,0,0,0.2);
}

.cp-item__name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-item__dial {
    color: #8d817a;
    font-weight: 500;
}

.cp-no-result {
    padding: 16px;
    text-align: center;
    color: #8d817a;
    font-size: 13px;
}

/* ==========================================
   INPUT PILLS WITH FLOATING LABELS
========================================== */
.input-pill-group {
    position: relative;
    margin-bottom: 25px;
}

.pill-input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #062037;
    border-radius: 50px;
    padding: 18px 20px 18px 45px;
    background: transparent;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #4a403a;
    outline: none;
    transition: all 0.3s ease;
}

.pill-input::placeholder {
    color: #b4a9a2;
    font-weight: 400;
}

.pill-input:focus {
    border-color: #062037;
}

/* Floating Label */
.floating-label {
    position: absolute;
    top: -10px;
    left: 25px;
    background-color: #fef7f3;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #8d817a;
    z-index: 1;
}

/* Input Icons */
.input-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #8d817a;
    font-size: 16px;
}

.input-icon-right {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #b4a9a2;
    cursor: pointer;
}

/* ==========================================
   BUTTONS & LINKS
========================================== */
.forgot-row {
    text-align: right;
    margin-bottom: 30px;
}

.forgot-text {
    font-size: 12px;
    font-weight: 600;
    color: #4a403a;
    text-decoration: none;
    transition: color 0.3s;
}

.forgot-text:hover {
    color: #062037;
}

.pill-btn {
    width: 100%;
    background-color: #062037;
    color: rgba(220, 231, 242, 0.85);
    border: none;
    padding: 16px;
    border-radius: 50px;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pill-btn:hover {
    background-color: #0b4475;
    transform: translateY(-2px);
}

.signup-row {
    text-align: center;
    font-size: 13px;
    color: #b4a9a2;
    margin-top: 20px;
}

.signup-row a {
    color: #062037;
    font-weight: 600;
    text-decoration: none;
}

/* ==========================================
   RIGHT SIDE: 3D ILLUSTRATION ARCH
========================================== */
.modern-image-side {
    flex: 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 50px;
}

.image-arch-bg {
    position: absolute;
    bottom: 0;
    width: 80%;
    max-width: 500px;
    height: 85%;
    background-color: #062037;
    border-top-left-radius: 300px;
    border-top-right-radius: 300px;
    z-index: 1;
}

.character-3d {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 550px;
    object-fit: contain;
}

/* ==========================================
   FLOATING ANIMATION
========================================== */
.floating-anim {
    animation: gentleFloat 4s ease-in-out infinite;
}


.otp-box input {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 18px;
    border-radius: 10px;
    border: 1.5px solid #062037;
    outline: none;
}

.otp-box input:focus {
    border-color: #062037;
}

/* CENTER FIX */
.modern-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* OTP FIX */
.otp-box {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 25px 0;
}

.otp-box input {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    border: 1.5px solid #062037;
    text-align: center;
    font-size: 18px;
}

/* Container for the 4 boxes */
.otp-wrapper {
    display: flex;
    gap: 12px;
    /* Space between boxes */
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
}

/* Individual Box Styling */
.otp-box {
    width: 55px;
    /* Adjust based on your design */
    height: 55px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    /* Smooth rounded corners */
    background-color: #ffffff;
    transition: all 0.3s ease;
    outline: none;
    color: #0f0004;
    /* Zayyora Maroon Theme Color */
}

/* Hover & Focus Effects */
.otp-box:focus {
    border-color: #800020;
    box-shadow: 0 0 8px rgba(128, 0, 32, 0.2);
}

/* Verified State (Optional - Green border when correct) */
.otp-box.verified {
    border-color: #27ae60 !important;
    background-color: #f1fcf6;
}


/* SUCCESS MODAL FIX */
.success-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
}

.success-modal.active {
    display: flex;
}

.success-box {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
}

/* --- Validation Styling --- */
.validation-msg {
    display: block;
    font-size: 11px;
    color: #e05c5c;
    /* Zayyora Danger Color */
    margin-top: 5px;
    margin-left: 20px;
    height: 14px;
    /* Prevents layout jump */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.input-pill-group.has-error {
    border-color: #e05c5c !important;
    background-color: #fff9f9;
}

.input-pill-group.has-error .validation-msg {
    opacity: 1;
}

.input-pill-group.is-valid .pill-input {
    border-color: #8aab9b !important;
    /* Soft Green for success */
}

/* Password Eye Toggle Active */
.fa-eye {
    color: #b56c6c;
}

/* Password Toggle Icons */
.password-toggle-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #b4a9a2;
    cursor: pointer;
    font-size: 16px;
    z-index: 2;
}

.password-toggle-icon:hover {
    color: #062037;
}

.error-text {
    display: none;
    color: #ff4d4d;
    font-size: 12px;
}

.error-text.active {
    display: block;
}

.pill-input.error {
    border: 2px solid #ff4d4d !important;
}

/* Force the toast to center and be a pill shape */
.swal2-container.swal2-bottom,
.swal2-container.swal2-bottom-end,
.swal2-container.swal2-bottom-start {
    justify-content: center !important;
    align-items: flex-end !important;
    padding-bottom: 24px !important;
}

.zayyora-premium-toast {
    background: #062037 !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    padding: 10px 25px !important;
    margin-bottom: 50px !important;
}

.swal2-timer-progress-bar {
    background: rgba(255, 255, 255, 0.65) !important;
}

/* ── OTP Modal Overlay ── */
.otp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 5, 2, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    animation: overlayFadeIn 0.35s ease;
}

.otp-overlay.active {
    display: flex;
}

@keyframes overlayFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── OTP Card ── */
.otp-card {
    background: #fffdf9;
    border-radius: 20px;
    padding: 44px 40px 36px;
    max-width: 460px;
    width: 92%;
    box-shadow: 0 32px 80px rgba(44, 31, 14, 0.22);
    text-align: center;
    animation: cardSlideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}

@keyframes cardSlideUp {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Ring Icon ── */
.otp-ring-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.otp-ring-icon svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    animation: rotateRing 2.5s linear infinite;
}

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

.otp-ring-icon .icon-center {
    font-size: 22px;
    color: #c9a84c;
    position: relative;
    z-index: 1;
}

/* ── Headings ── */
.otp-card h2 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 600;
    color: #2c1f0e;
    margin: 0 0 6px;
}

.otp-card p {
    font-size: 14px;
    color: #a08b6e;
    margin: 0 0 28px;
    line-height: 1.5;
}

.otp-card p strong {
    color: #2c1f0e;
    font-weight: 600;
}

/* ── 6-Box OTP Input ── */
.otp-boxes {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 22px;
}

.otp-box {
    width: 52px;
    height: 58px;
    font-size: 22px;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    text-align: center;
    border: 1.5px solid #e8ddd0;
    border-radius: 10px;
    background: #fff;
    color: #2c1f0e;
    outline: none;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.15s;
    -webkit-appearance: none;
}

.otp-box:focus {
    border-color: #c9a84c;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
    transform: translateY(-2px);
}

.otp-box.filled {
    border-color: #c9a84c;
    background: #fffbf0;
}

.otp-box.success {
    border-color: #3a8c4e;
    background: #f0faf3;
    color: #3a8c4e;
}

.otp-box.error {
    border-color: #c0392b;
    background: #fff5f5;
    animation: shake 0.35s ease;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* ── Timer ── */
.otp-timer-wrap {
    margin-bottom: 20px;
}

.otp-timer-ring {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fdf6e8;
    border: 1px solid #f0dfa8;
    border-radius: 999px;
    padding: 6px 18px;
    font-size: 13px;
    color: #8a6a1e;
    font-weight: 500;
}

.otp-timer-ring.expired {
    background: #fdf0f0;
    border-color: #f0a8a8;
    color: #c0392b;
}

.otp-timer-ring i {
    font-size: 13px;
}

#otp-timer-text {
    font-variant-numeric: tabular-nums;
    min-width: 38px;
    display: inline-block;
}

/* ── Progress Bar ── */
.otp-progress-bar-wrap {
    width: 100%;
    height: 3px;
    background: #f0e8d8;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 24px;
}

#otp-progress-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #c9a84c, #d4956a);
    border-radius: 3px;
    transition: width 1s linear, background 0.5s;
}

#otp-progress-bar.urgent {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

/* ── Buttons ── */
.otp-verify-btn {
    width: 100%;
    padding: 14px;
    background: #2c1f0e;
    color: #f5e9d0;
    border: none;
    border-radius: 10px;
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.25s, transform 0.15s;
    margin-bottom: 10px;
}

.otp-verify-btn:hover:not(:disabled) {
    background: #c9a84c;
    color: #2c1f0e;
}

.otp-verify-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.otp-verify-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.otp-resend-btn {
    width: 100%;
    padding: 12px;
    background: transparent;
    color: #a08b6e;
    border: 1px solid #e8ddd0;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.25s;
    display: none;
}

.otp-resend-btn:hover:not(:disabled) {
    border-color: #c9a84c;
    color: #2c1f0e;
}

.otp-resend-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Close Button ── */
.otp-close-btn {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 18px;
    color: #c4b8a8;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

.otp-close-btn:hover {
    color: #2c1f0e;
}

/* ── Email display ── */
.otp-email-badge {
    display: inline-block;
    background: #fdf6e8;
    border: 1px solid #f0dfa8;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 13px;
    color: #8a6a1e;
    margin-bottom: 22px;
    word-break: break-all;
}

/* ── 1. BASE MOBILE-FIRST GLOBAL RESETS ────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}
 
body {
    overflow-x: clip;
}
 
/* ── 2. WRAPPER LAYOUT ─────────────────────────────────── */
 
/* Mobile: stack form on top, hide image panel */
@media (max-width: 767px) {
    .modern-auth-wrapper {
        flex-direction: column;
        min-height: 100vh;
        overflow-y: auto;
    }
 
    /* Form takes full width on mobile */
    .modern-form-side {
        flex: none;
        width: 100%;
        padding: 32px 20px 40px;
        min-height: 100vh;
        justify-content: center;
    }
 
    /* Hide the decorative arch image panel entirely on mobile */
    .modern-image-side {
        display: none;
    }
 
    .form-content-box {
        width: 100%;
        max-width: 100%;
    }
}
 
/* Tablet: show image side but smaller */
@media (min-width: 768px) and (max-width: 1023px) {
    .modern-form-side {
        flex: 1.2;
        padding: 40px 32px;
    }
 
    .modern-image-side {
        flex: 0.8;
    }
 
    .image-arch-bg {
        width: 90%;
        height: 80%;
    }
 
    .character-3d {
        max-width: 420px;
    }
}
 
/* ── 3. HEADING ────────────────────────────────────────── */
@media (max-width: 767px) {
    .auth-heading {
        font-size: 26px;
        margin-bottom: 28px;
    }
}
 
@media (min-width: 768px) and (max-width: 1023px) {
    .auth-heading {
        font-size: 28px;
        margin-bottom: 36px;
    }
}
 
/* ── 4. INPUT PILL GROUPS ──────────────────────────────── */
@media (max-width: 767px) {
    .input-pill-group {
        margin-bottom: 20px;
    }
 
    .pill-input {
        padding: 16px 16px 16px 42px;
        font-size: 15px;
        /* Prevent iOS zoom on focus (requires font-size >= 16px or this override) */
        font-size: max(15px, 16px);
    }
 
    .floating-label {
        font-size: 12px;
        left: 20px;
    }
 
    .input-icon {
        font-size: 15px;
        left: 16px;
    }
 
    .input-icon-right {
        right: 16px;
    }
 
    .password-toggle-icon {
        right: 16px;
    }
}
 
/* ── 5. FIRST NAME + LAST NAME ROW (Register) ──────────── */
 
/* Stack side-by-side name fields vertically on small phones */
@media (max-width: 479px) {
    /* The inline style in the Blade template uses flex row — override it */
    div[style*="display: flex"][style*="gap: 15px"] {
        flex-direction: column !important;
        gap: 0 !important;
    }
 
    /* Password + Confirm row — also stack */
    .input-pill-group + .input-pill-group {
        margin-top: 0;
    }
}
 
/* On larger phones, keep them side by side but tighten the gap */
@media (min-width: 480px) and (max-width: 767px) {
    div[style*="display: flex"][style*="gap: 15px"] {
        gap: 10px !important;
    }
 
    .pill-input {
        padding: 16px 12px 16px 36px;
    }
}
 
/* ── 6. PHONE INPUT GROUP ──────────────────────────────── */
@media (max-width: 767px) {
    .phone-wrapper {
        height: 50px;
        padding-left: 16px;
    }
 
    .phone-code {
        font-size: 13px;
    }
 
    .phone-input {
        font-size: max(14px, 16px); /* prevent iOS zoom */
    }
}
 
/* ── 7. SUBMIT BUTTON ──────────────────────────────────── */
@media (max-width: 767px) {
    .pill-btn {
        padding: 14px;
        font-size: 15px;
        margin-top: 4px;
    }
}
 
/* ── 8. REMEMBER ME + FORGOT PASSWORD ROW ──────────────── */
@media (max-width: 479px) {
    /* The inline flex row in login.blade.php — stack on very small phones */
    div[style*="justify-content: space-between"][style*="font-size: 13px"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }
}
 
/* ── 9. SIGN UP / LOGIN LINK ROW ───────────────────────── */
@media (max-width: 767px) {
    .signup-row {
        font-size: 13px;
        margin-top: 16px;
    }
}
 
/* ── 10. OTP MODAL (Register page) ────────────────────── */
@media (max-width: 767px) {
    .otp-overlay {
        align-items: flex-end; /* Slide up from bottom on mobile */
        padding: 0;
    }
 
    .otp-card {
        border-radius: 20px 20px 0 0;
        padding: 36px 20px 32px;
        max-width: 100%;
        width: 100%;
        max-height: 92vh;
        overflow-y: auto;
    }
 
    .otp-card h2 {
        font-size: 20px;
    }
 
    .otp-card p {
        font-size: 13px;
    }
 
    .otp-boxes {
        gap: 7px;
        margin-bottom: 18px;
    }
 
    .otp-box {
        width: 44px;
        height: 50px;
        font-size: 20px;
        border-radius: 8px;
    }
 
    .otp-ring-icon {
        width: 52px;
        height: 52px;
    }
 
    .otp-ring-icon svg {
        width: 52px;
        height: 52px;
    }
}
 
@media (max-width: 359px) {
    /* Very small phones (iPhone SE, Galaxy A03) */
    .otp-box {
        width: 38px;
        height: 44px;
        font-size: 18px;
    }
 
    .otp-boxes {
        gap: 5px;
    }
}
 
/* ── 11. FORGOT PASSWORD — STEP 2 OTP BOXES ───────────── */
@media (max-width: 767px) {
    .otp-boxes-row {
        gap: 6px;
        margin: 16px 0 14px;
    }
 
    /* Override the forgot-password inline style for otp-box */
    #otp-boxes-row .otp-box {
        width: 44px;
        height: 50px;
        font-size: 18px;
    }
 
    .otp-step-wrapper {
        width: 100%;
    }
 
    .fp-email-badge {
        font-size: 12px;
        padding: 3px 10px;
    }
 
    .otp-timer-pill {
        font-size: 12px;
        padding: 5px 14px;
    }
 
    #fp-resend-btn {
        font-size: 12px;
        padding: 10px 16px;
    }
}
 
@media (max-width: 359px) {
    #otp-boxes-row .otp-box {
        width: 36px;
        height: 44px;
        font-size: 16px;
    }
 
    .otp-boxes-row {
        gap: 4px;
    }
}
 
/* ── 12. FORGOT PASSWORD — STEP RING ICON ─────────────── */
@media (max-width: 767px) {
    .step-ring-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 12px;
    }
 
    .step-ring-icon svg {
        width: 48px;
        height: 48px;
    }
 
    .step-ring-icon .icon-c {
        font-size: 16px;
    }
}
 
/* ── 13. STRENGTH BAR (Forgot Password Step 3) ─────────── */
@media (max-width: 767px) {
    .strength-bar-wrap {
        margin-top: 4px;
    }
 
    #strength-label {
        font-size: 11px;
    }
}
 
/* ── 14. ERROR TEXT ────────────────────────────────────── */
@media (max-width: 767px) {
    .error-text {
        font-size: 11px;
        margin-left: 8px;
    }
}
 
/* ── 15. SWEETALERT TOAST — MOBILE CENTERING ───────────── */
@media (max-width: 767px) {
    .swal2-container.swal2-bottom,
    .swal2-container.swal2-bottom-end,
    .swal2-container.swal2-bottom-start {
        padding-bottom: 16px !important;
        justify-content: center !important;
        align-items: flex-end !important;
    }
 
    .zayyora-premium-toast {
        background: #062037 !important;
        color: #ffffff !important;
        width: calc(100vw - 32px) !important;
        max-width: 480px !important;
        font-size: 13px !important;
        padding: 10px 18px !important;
        margin-bottom: 16px !important;
    }
}
 
/* ── 16. FLOATING ANIMATION — REDUCE MOTION ───────────── */
@media (prefers-reduced-motion: reduce) {
    .floating-anim {
        animation: none;
    }
 
    .otp-ring-icon svg,
    .step-ring-icon svg {
        animation: none;
    }
}
 
/* ── 17. TABLET FORM POLISH ────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
    .form-content-box {
        max-width: 420px;
    }
 
    .auth-heading {
        font-size: 28px;
    }
 
    .pill-input {
        padding: 17px 18px 17px 44px;
    }
}
 
/* ── 18. LARGE DESKTOP POLISH ──────────────────────────── */
@media (min-width: 1280px) {
    .modern-form-side {
        padding: 60px;
    }
 
    .form-content-box {
        max-width: 520px;
    }
}
 
/* ── 19. FLOATING ANIMATION (defined here if not in auth.css) */
@keyframes gentleFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-12px); }
}
 /* Hide Microsoft Edge default password reveal icon */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}