.modal-overlay{position:fixed;inset:0;background:rgba(25,18,14,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:60;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:24px;max-width:440px;width:100%;padding:34px;position:relative;box-shadow:0 30px 60px -20px rgba(0,0,0,.4)}
.modal h3{font-size:24px;font-weight:800;margin-bottom:10px}
.modal p{color:var(--muted);font-size:15px;margin-bottom:20px}
.modal .btn{width:100%;justify-content:center;margin-top:6px}
.modal a{color:var(--primary-dark);font-weight:700;position:relative;z-index:1}
.modal-overlay.open{pointer-events:auto}
.modal-overlay.open .modal{pointer-events:auto}

/* Login / forgot password form fields */
.modal .form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;text-align:left}
.modal .form-group label{font-weight:600;font-size:14px;color:var(--ink)}
.modal .user-input{width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:12px;font-size:15px;font-family:inherit;color:var(--ink);background:#fff;transition:.2s}
.modal .user-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(244,81,30,.15)}
.modal .user-input::placeholder{color:#9aa3ab}
.modal .remember{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px;margin:2px 0 18px}
.modal .custom-check-box{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--muted);cursor:pointer;margin:0}
.modal .forgot-pass{cursor:pointer}
.modal .forgot-pass:hover{opacity:.8}
@media (max-width:480px){.modal{padding:26px 22px}.modal .remember{flex-direction:column;align-items:flex-start}}