/* OTP expiry helper text */
#otp-expiry {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.8);
}
/* Auth (login / create-account) shared styles */
body.auth-page { min-height:100vh; width:100vw; margin:0; padding:0; font-family:'Poppins',sans-serif; overflow-x:hidden; }
/* Use dynamic viewport units so the panel stays centered with the mobile keyboard open */
.auth-hero {
  min-height:100vh;           /* fallback */
  min-height:100svh;          /* small viewport (iOS/Android) */
  min-height:100dvh;          /* dynamic viewport (updates with UI/keyboard) */
  width:100%; position:relative; display:flex; align-items:center; justify-content:center;
  background:url('assets/Lagos-City.jpg') center center/cover no-repeat;
  padding-top:4.5rem;
  padding-bottom:env(safe-area-inset-bottom); /* iOS safe area */
}
.auth-hero::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,0.6); }
.auth-panel { position:relative; z-index:1; width:100%; max-width:400px; border-radius:1.5rem; -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.2); box-shadow:0 8px 32px 0 rgba(31,38,135,0.18); padding:2.5rem 1.5rem; display:flex; flex-direction:column; align-items:center; animation:fadeIn .5s ease both; }
.auth-logo { width:64px; height:64px; border-radius:50%; object-fit:cover; margin-bottom:1.5rem; box-shadow:0 0 24px #00c6ff,0 0 24px #ff00cc,0 0 8px #00eaff,0 0 8px #ff00cc; }
.auth-panel h2 { color:#fff; font-size:2rem; font-weight:700; text-align:center; margin:0 0 .25rem; letter-spacing:.01em; }
.auth-panel p.sub { color:#ccc; text-align:center; margin:0 0 2rem; font-size:1rem; font-weight:300; }
.auth-form { width:100%; display:flex; flex-direction:column; gap:1.05rem; }
.auth-field { position:relative; }
.auth-field-icon { position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:#bbb; }
.auth-input { width:100%; padding:.75rem 1rem .75rem 2.5rem; border-radius:.75rem; background:rgba(255,255,255,0.20); color:#fff; border:1px solid rgba(255,255,255,0.3); outline:none; font-size:1rem; font-family:inherit; margin:0; box-sizing:border-box; }
.auth-input::placeholder { color:#ccc; opacity:1; }
.auth-input select, select.auth-input { 
  background:rgba(255,255,255,0.20); 
  color:#fff; 
  -webkit-appearance:none; 
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  background-image:url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:12px;
  padding-right:3rem;
}
.auth-input select:hover, select.auth-input:hover {
  background:rgba(255,255,255,0.25);
  border-color:rgba(255,255,255,0.4);
}
.auth-input select:focus, select.auth-input:focus {
  background:rgba(255,255,255,0.3);
  border-color:rgba(255,255,255,0.5);
  outline:none;
}
.auth-input option {
  background:#2d3748 !important;
  color:#fff !important;
  padding:.5rem;
}
/* Additional styling for better visibility */
.auth-input:not(:placeholder-shown) {
  background:rgba(255,255,255,0.25);
}
.auth-options { display:flex; align-items:center; justify-content:space-between; font-size:.87rem; width:100%; }
.auth-remember { display:flex; align-items:center; gap:.5rem; color:#fff; cursor:pointer; -webkit-user-select:none; user-select:none; }
.auth-remember input { accent-color:#fff; width:1.05em; height:1.05em; border-radius:.25em; border:1.5px solid #fff; background:transparent; margin:0; }
.auth-link, .auth-alt a { color:#00eaff; text-decoration:none; border-bottom:1px solid transparent; transition:all .2s; }
.auth-link:hover, .auth-alt a:hover { text-decoration:underline; border-bottom:1px solid #00eaff; }
.auth-submit { width:100%; padding:.85rem 0; border-radius:999px; font-weight:700; font-size:1.05rem; color:#fff; background:linear-gradient(90deg,#00c6ff 0%,#ff00cc 100%); box-shadow:0 0 16px #00eaff55; border:none; margin-top:.3rem; cursor:pointer; transition:box-shadow .2s, transform .2s; }
.auth-submit:hover { box-shadow:0 0 32px #00eaff99,0 0 16px #ff00cc99; transform:scale(1.03); }
.auth-divider { display:flex; align-items:center; width:100%; margin:1.7rem 0 1rem; }
.auth-divider-line { flex:1; height:1px; background:rgba(255,255,255,0.3); }
.auth-divider span { margin:0 1rem; color:#fff; font-size:.85rem; }
.auth-socials { width:100%; display:flex; flex-direction:column; gap:.65rem; }
.auth-socials button { display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%; padding:.65rem 0; border-radius:999px; background:#fff; color:#222; font-weight:600; font-size:.95rem; border:none; box-shadow:0 2px 8px #0001; cursor:pointer; transition:transform .15s; }
.auth-socials button:hover { transform:scale(1.04); }
.auth-alt { margin-top:1.4rem; text-align:center; font-size:.9rem; color:#fff; }
.auth-alt span { color:#fff; }
@keyframes fadeIn { 0%{opacity:0;} 100%{opacity:1;} }
@media (max-width:600px){
  .auth-panel { max-width:96vw; padding:1.1rem .4rem; border-radius:.9rem; }
  /* Mobile fallback: use a lightweight gradient instead of the large photo */
  .auth-hero { background:linear-gradient(120deg,#0a143c 0%,#11203f 100%); }
  /* Slightly softer overlay on mobile */
  .auth-hero::before { background:rgba(0,0,0,0.6); }

  /* Soften the overall visual weight on small screens */
  .auth-panel {
    background:rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.18);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
  .auth-logo {
    box-shadow: 0 0 12px #00c6ff66, 0 0 12px #ff00cc55, 0 0 4px #00eaff55, 0 0 4px #ff00cc55;
  }
  .auth-panel h2 { font-size:1.6rem; font-weight:600; }
  .auth-panel p.sub { font-size:.95rem; opacity:.9; }
  .auth-input { font-size:.95rem; background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.28); }
  .auth-options { font-size:.82rem; }
  .auth-remember { opacity:.95; }
  .auth-submit { font-size:1rem; font-weight:600; box-shadow:0 0 10px #00eaff44; }
  .auth-submit:hover { transform:scale(1.01); box-shadow:0 0 18px #00eaff66, 0 0 10px #ff00cc66; }
  .auth-socials button { font-weight:500; }
  /* Prevent iOS auto-zoom on inputs by ensuring font-size >= 16px */
  .auth-input, .auth-socials button, .auth-submit { font-size:16px; }
}
/* Password toggle */
.pw-toggle-btn { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); background:transparent; border:none; color:#ddd; cursor:pointer; font-size:.95rem; padding:.25rem; display:flex; align-items:center; justify-content:center; }
.pw-toggle-btn:hover { color:#fff; }
/* Strength meter */
.pw-strength-wrap { width:100%; margin:-.4rem 0 .4rem; }
.pw-strength-bar { height:6px; width:100%; border-radius:4px; background:linear-gradient(90deg,#444 0,#333 100%); position:relative; overflow:hidden; }
.pw-strength-bar:after { content:""; position:absolute; inset:0; width:var(--pw-strength,0%); background:linear-gradient(90deg,#ff4d4d,#ffa64d,#ffe14d,#8dff4d,#34d399); transition:width .35s cubic-bezier(.77,0,.18,1); }
.pw-strength-bar[data-level="weak"]:after { filter:grayscale(.4); }
.pw-strength-bar[data-level="fair"]:after { filter:grayscale(.2); }
.pw-strength-bar[data-level="good"]:after { filter:none; }
.pw-strength-bar[data-level="strong"]:after { box-shadow:0 0 8px #34d399aa; }
.pw-strength-label { font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; margin-top:.3rem; font-weight:600; color:#bbb; text-align:right; }
/* Error feedback */
.field-error { animation:fieldPulse .9s ease; border-color:#ff4d4d !important; box-shadow:0 0 0 1px #ff4d4d55; }
@keyframes fieldPulse { 0%{ box-shadow:0 0 0 0 #ff4d4d; } 70%{ box-shadow:0 0 0 6px rgba(255,77,77,0); } 100%{ box-shadow:0 0 0 0 rgba(255,77,77,0); } }
/* Visually hidden utility */
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }

/* Email Status Indicator */
.email-status {
  width: 100%;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  animation: slideInFromTop 0.5s ease-out;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.status-indicator .status-icon {
  color: #10b981;
  font-size: 1.2rem;
  animation: bounce 2s infinite;
}

.status-text {
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
}

.status-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
}

#delivery-time {
  color: #10b981;
  font-size: 0.85rem;
  font-weight: 500;
  background: rgba(16, 185, 129, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

@keyframes slideInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}

/* Instant feedback animations */
.pulse-success {
  animation: pulseGreen 0.6s ease-in-out;
}

@keyframes pulseGreen {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* OTP Display Styles for Instant Code Visibility */
.otp-display {
  width: 100%;
  margin: 0 0 1.5rem 0;
  padding: 1.5rem;
  background: rgba(16, 185, 129, 0.15);
  border: 2px solid rgba(16, 185, 129, 0.3);
  border-radius: 1rem;
  text-align: center;
  animation: slideInFromTop 0.5s ease-out;
}

.otp-display.visible {
  display: block;
}

.otp-display-content h3 {
  color: #10B981;
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.display-otp-code {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0.75rem;
  padding: 1rem;
  margin: 1rem 0;
  border: 2px solid rgba(16, 185, 129, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
}

.display-otp-code:hover {
  background: rgba(255, 255, 255, 1);
  border-color: #10B981;
  transform: scale(1.02);
}

.otp-digits {
  font-family: 'Courier New', monospace;
  font-size: 2rem;
  font-weight: bold;
  color: #059669;
  letter-spacing: 0.5rem;
  display: block;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.otp-digits.copied {
  color: #10B981;
  animation: pulse 0.5s ease-in-out;
}

.otp-display-note {
  color: rgba(255, 255, 255, 0.9);
  margin: 0.5rem 0 0 0;
  font-size: 0.9rem;
}

.otp-display-note small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Forgot Password Specific Styles */
.success-message { 
  width: 100%; 
  text-align: center; 
  padding: 2rem 1rem; 
  border-radius: 1rem; 
  background: rgba(52, 211, 153, 0.15); 
  border: 1px solid rgba(52, 211, 153, 0.3); 
  margin-bottom: 1.5rem;
  animation: successSlide 0.5s ease-out;
}

.success-content h3 { 
  color: #34d399; 
  font-size: 1.5rem; 
  font-weight: 700; 
  margin: 0.5rem 0 1rem; 
}

.success-content p { 
  color: #fff; 
  font-size: 0.95rem; 
  line-height: 1.6; 
  margin: 0; 
}

.success-content i { 
  color: #34d399; 
  font-size: 3rem; 
  margin-bottom: 0.5rem; 
}

.error-message { 
  width: 100%; 
  padding: 1rem; 
  border-radius: 0.75rem; 
  background: rgba(255, 77, 77, 0.15); 
  border: 1px solid rgba(255, 77, 77, 0.3); 
  color: #ff6b6b; 
  font-size: 0.9rem; 
  text-align: center; 
  margin: 1rem 0; 
  animation: errorShake 0.5s ease-out;
}

.button-loader { 
  display: none; 
}

.auth-alt-secondary { 
  margin-top: 0.75rem !important; 
}

.hidden { 
  display: none !important; 
}

@keyframes successSlide {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Email Verification Page Styles */
.verification-status {
  width: 100%;
  text-align: center;
  padding: 2rem 1rem;
  border-radius: 1rem;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  margin-bottom: 1.5rem;
  animation: statusSlide 0.5s ease-out;
}

.status-content h3 {
  color: #3B82F6;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0.5rem 0 1rem;
}

.status-content p {
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.status-content i {
  color: #3B82F6;
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.verification-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.auth-submit-secondary {
  width: 100%;
  padding: 0.85rem 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(90deg, #6B7280 0%, #4B5563 100%);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

/* Phone/SMS auth helpers */
.sms-row { display:flex; gap:.5rem; align-items:stretch; }
.flex-1 { flex:1; }
.bg-dark { background:#111827; }
.recaptcha-slot { min-height:60px; }
.status-ok { text-align:center; font-size:.9rem; color:#059669; margin:.5rem 0; display:none; }

.auth-submit-secondary:hover {
  background: linear-gradient(90deg, #4B5563 0%, #374151 100%);
  transform: scale(1.02);
}

.auth-submit-secondary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.link-separator {
  margin: 0 0.5rem;
  color: #ccc;
}

@keyframes statusSlide {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}