/* ══════════════════════════════════════════════════════════════
   Auth Pages — Premium Glassmorphism UI
   Design: Stripe / Linear / Apple inspired
   Pages: customer login/signup, organizer login/signup
   ══════════════════════════════════════════════════════════════ */

/* ── CSS Variables ── */
:root {
  --auth-bg-1: #050a18;
  --auth-bg-2: #0a1628;
  --auth-bg-3: #0d1f3c;
  --auth-gold: #c8952a;
  --auth-gold-light: #e8b84a;
  --auth-gold-glow: rgba(200,149,42,.15);
  --auth-glass-bg: rgba(255,255,255,.035);
  --auth-glass-border: rgba(255,255,255,.07);
  --auth-glass-hover: rgba(255,255,255,.06);
  --auth-text: rgba(255,255,255,.92);
  --auth-text-soft: rgba(255,255,255,.5);
  --auth-text-muted: rgba(255,255,255,.28);
  --auth-input-bg: rgba(255,255,255,.04);
  --auth-input-border: rgba(255,255,255,.08);
  --auth-input-focus: rgba(200,149,42,.35);
  --auth-radius: 18px;
  --auth-radius-sm: 12px;
  --auth-transition: .25s cubic-bezier(.4,0,.2,1);
  --auth-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Full-page Background ── */
.auth-page {
  min-height: 100vh;
  background: linear-gradient(165deg, #040810 0%, #07101e 25%, #0a1830 50%, #0d1f3c 75%, #101e35 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 16px 40px;
  overflow: hidden;
}

/* ── Dot grid — full page coverage ── */
.auth-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Blue dots — full left side */
.auth-dots::before {
  content: '';
  position: absolute;
  inset: 0;
  right: 50%;
  background-image: radial-gradient(circle 1px, rgba(100,160,255,.22) 0%, transparent 100%);
  background-size: 28px 28px;
}

/* Gold dots — full right side */
.auth-dots::after {
  content: '';
  position: absolute;
  inset: 0;
  left: 50%;
  background-image: radial-gradient(circle 1px, rgba(220,170,60,.22) 0%, transparent 100%);
  background-size: 28px 28px;
}

/* Blend zone in the middle — overlaps both sides */
.auth-dots-blend {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30%;
  right: 30%;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle 1px, rgba(160,155,120,.12) 0%, transparent 100%);
  background-size: 28px 28px;
}

/* ── Ambient glow zones ── */
.auth-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Cool blue glow — top-left */
.auth-orb-1 {
  width: 600px;
  height: 600px;
  top: -15%;
  left: -10%;
  background: radial-gradient(circle, rgba(60,120,220,.07) 0%, rgba(40,80,180,.03) 40%, transparent 70%);
  filter: blur(60px);
}

/* Warm gold glow — bottom-right */
.auth-orb-2 {
  width: 550px;
  height: 550px;
  bottom: -10%;
  right: -8%;
  background: radial-gradient(circle, rgba(200,149,42,.06) 0%, rgba(180,130,30,.025) 40%, transparent 70%);
  filter: blur(60px);
}

/* Subtle center haze for depth */
.auth-orb-3 {
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(15,25,50,.5) 0%, transparent 70%);
  filter: blur(40px);
}

/* ══ GLASS CARD ══ */
.auth-glass {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 460px;
  background: var(--auth-glass-bg);
  border: 1px solid var(--auth-glass-border);
  border-radius: var(--auth-radius);
  padding: 36px 34px 30px;
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 1px 0 rgba(255,255,255,.04) inset,
    0 24px 68px -12px rgba(0,0,0,.45),
    0 0 120px -40px var(--auth-gold-glow);
  transition: box-shadow .4s ease;
}

.auth-glass:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 1px 0 rgba(255,255,255,.05) inset,
    0 28px 72px -12px rgba(0,0,0,.5),
    0 0 140px -30px var(--auth-gold-glow);
}

.auth-glass.wide {
  max-width: 560px;
}

/* ── Card Header ── */
.auth-glass-header {
  text-align: center;
  margin-bottom: 24px;
}

.auth-glass-header h1 {
  font-family: var(--auth-font);
  font-size: 30px;
  font-weight: 800;
  color: var(--auth-text);
  letter-spacing: -.5px;
  margin: 0 0 10px;
  line-height: 1.15;
}

.auth-glass-header p {
  font-size: 14px;
  color: var(--auth-text-soft);
  margin: 0;
  line-height: 1.6;
  font-weight: 400;
}

/* ══ SOCIAL BUTTONS ══ */
.auth-social-row {
  display: flex;
  gap: 10px;
  margin-bottom: 0;
}

.auth-social-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--auth-radius-sm);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  transition: all var(--auth-transition);
  position: relative;
  overflow: hidden;
}

.auth-social-link::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent);
  transition: opacity var(--auth-transition);
}
.auth-social-link:hover::after {
  opacity: 1;
}

.auth-social-link.fb {
  background: #3b5998;
  color: #fff;
  border: 1px solid rgba(59,89,152,.5);
}
.auth-social-link.fb:hover {
  background: #344e86;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(59,89,152,.25);
  color: #fff;
}

.auth-social-link.gl {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.1);
}
.auth-social-link.gl:hover {
  background: rgba(255,255,255,.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  color: #fff;
}

.auth-social-link i {
  font-size: 15px;
}

/* ══ DIVIDER ══ */
.auth-or {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 26px 0;
}
.auth-or::before,
.auth-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
.auth-or span {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--auth-text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* ══ ALERTS ══ */
.auth-glass .alert {
  padding: 12px 16px;
  border-radius: var(--auth-radius-sm);
  font-size: 13px;
  margin-bottom: 20px;
  font-weight: 500;
  backdrop-filter: blur(8px);
  animation: authFadeIn .3s ease;
}
.auth-glass .alert-success {
  background: rgba(52,211,153,.08);
  color: #6ee7b7;
  border: 1px solid rgba(52,211,153,.15);
}
.auth-glass .alert-danger {
  background: rgba(248,113,113,.08);
  color: #fca5a5;
  border: 1px solid rgba(248,113,113,.15);
}

/* ══ FORM FIELDS ══ */
.auth-field {
  margin-bottom: 18px;
}

.auth-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--auth-text-soft);
  margin-bottom: 8px;
  letter-spacing: .3px;
  transition: color var(--auth-transition);
}

.auth-field:focus-within label {
  color: var(--auth-gold-light);
}

.auth-field input,
.auth-field input.form-control,
.auth-glass input[type="text"],
.auth-glass input[type="password"],
.auth-glass input[type="email"],
.auth-glass input[type="tel"] {
  width: 100% !important;
  padding: 14px 18px !important;
  background: var(--auth-input-bg) !important;
  border: 1.5px solid var(--auth-input-border) !important;
  border-radius: var(--auth-radius-sm) !important;
  color: var(--auth-text) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  font-family: var(--auth-font) !important;
  transition: all var(--auth-transition) !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
}

.auth-field input:focus,
.auth-glass input:focus {
  background: rgba(255,255,255,.06) !important;
  border-color: var(--auth-input-focus) !important;
  box-shadow:
    0 0 0 3px rgba(200,149,42,.06),
    0 0 20px -4px rgba(200,149,42,.08) !important;
}

.auth-field input::placeholder,
.auth-glass input::placeholder {
  color: var(--auth-text-muted) !important;
  font-weight: 400 !important;
}

/* Autofill fix for dark theme */
.auth-glass input:-webkit-autofill,
.auth-glass input:-webkit-autofill:hover,
.auth-glass input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 30px #0d1a2e inset !important;
  border-color: var(--auth-input-border) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

.auth-field .text-danger,
.auth-field .auth-error {
  color: #fca5a5;
  font-size: 12px;
  margin-top: 6px;
  display: block;
  animation: authFadeIn .2s ease;
}

/* ── Signup Grid ── */
.auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}
.auth-row .auth-field.full {
  grid-column: 1 / -1;
}

/* ══ SUBMIT BUTTON ══ */
.auth-submit {
  width: 100%;
  padding: 15px 24px;
  background: linear-gradient(135deg, #b8841e 0%, #c8952a 30%, #e8b84a 70%, #c8952a 100%);
  background-size: 300% 100%;
  background-position: 0% 50%;
  color: #fff;
  border: none;
  border-radius: var(--auth-radius-sm);
  font-family: var(--auth-font);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .3px;
  cursor: pointer;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  margin-top: 6px;
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
}

.auth-submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transition: left .5s ease;
}

.auth-submit:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow:
    0 8px 28px rgba(200,149,42,.3),
    0 0 0 1px rgba(200,149,42,.2);
}

.auth-submit:hover::before {
  left: 100%;
}

.auth-submit:active {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(200,149,42,.2);
}

/* ══ FOOTER LINKS ══ */
.auth-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}

.auth-links span,
.auth-links p {
  color: var(--auth-text-muted);
  margin: 0;
  font-weight: 400;
}

.auth-links a {
  color: var(--auth-gold-light);
  text-decoration: none;
  font-weight: 600;
  transition: all var(--auth-transition);
  position: relative;
}

.auth-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--auth-gold-light);
  transition: width var(--auth-transition);
}

.auth-links a:hover {
  color: #fff;
}

.auth-links a:hover::after {
  width: 100%;
}

/* ══ GUEST CHECKOUT ══ */
.auth-guest-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: rgba(52,211,153,.06);
  border: 1px solid rgba(52,211,153,.15);
  color: #6ee7b7;
  border-radius: var(--auth-radius-sm);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  margin-bottom: 22px;
  transition: all var(--auth-transition);
}
.auth-guest-btn:hover {
  background: rgba(52,211,153,.12);
  border-color: rgba(52,211,153,.25);
  color: #6ee7b7;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(52,211,153,.1);
}

/* ══ TAGLINE ══ */
.auth-tagline {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  color: var(--auth-text-muted);
  letter-spacing: .4px;
  font-weight: 400;
}

/* ══ ANIMATIONS ══ */
@keyframes authFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-glass {
  animation: authCardIn .5s cubic-bezier(.16,1,.3,1);
}

@keyframes authCardIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.auth-tagline {
  animation: authFadeIn .6s ease .2s both;
}

/* ══ RESPONSIVE ══ */
@media (max-width: 640px) {
  .auth-page {
    padding: 20px 12px 30px;
    justify-content: flex-start;
  }
  .auth-glass {
    padding: 28px 22px 24px;
    border-radius: 16px;
  }
  .auth-glass-header h1 {
    font-size: 25px;
  }
  .auth-glass-header p {
    font-size: 13px;
  }
  .auth-social-row {
    flex-direction: column;
  }
  .auth-row {
    grid-template-columns: 1fr;
  }
  .auth-links {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  .auth-orb { display: none; }
}

@media (max-width: 380px) {
  .auth-glass {
    padding: 28px 20px 24px;
  }
}