/* ========================================================
   auth.css — صفحه ورود / ثبت‌نام
   طراحی: Light cream & luxurious gold glassmorphism با انیمیشن‌های خلاقانه پس‌زمینه
   ======================================================== */

/* ── Layout & Body Section ────────────────────────────── */
body:has(.auth-section) {
  padding-top: 0 !important;
}

.auth-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: radial-gradient(circle at 50% 50%, #FAF8F5 0%, #F5EFEB 100%);
  position: relative;
  overflow: hidden;
}

/* ── Floating Background Elements ──────────────────────── */
.auth-floating-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.auth-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  transition: transform 0.3s ease;
}

.auth-blob-1 {
  top: -10%;
  right: -10%;
  width: 450px;
  max-width: 100%;
  height: 450px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.22) 0%, rgba(245, 239, 235, 0) 70%);
  animation: floatBlob1 28s infinite ease-in-out alternate;
}

.auth-blob-2 {
  bottom: -15%;
  left: -5%;
  width: 500px;
  max-width: 100%;
  height: 500px;
  background: radial-gradient(circle, rgba(230, 223, 213, 0.45) 0%, rgba(245, 239, 235, 0) 70%);
  animation: floatBlob2 32s infinite ease-in-out alternate;
}

.auth-blob-3 {
  top: 35%;
  left: -15%;
  width: 380px;
  max-width: 100%;
  height: 380px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.16) 0%, rgba(245, 239, 235, 0) 70%);
  animation: floatBlob3 24s infinite ease-in-out alternate;
}

.auth-blob-4 {
  bottom: 25%;
  right: -10%;
  width: 400px;
  max-width: 100%;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, rgba(245, 239, 235, 0) 70%);
  animation: floatBlob1 26s infinite ease-in-out alternate-reverse;
}

/* Luxury Wireframe Eyeglasses Floating in Background */
.auth-glasses-frame {
  position: absolute;
  top: 25%;
  right: 12%;
  width: 200px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0.14;
  filter: none; /* No blur to keep details sharp */
  border-radius: 0;
  animation: floatGlasses 22s infinite ease-in-out;
}

.auth-glass-lens {
  width: 80px;
  height: 80px;
  border: 1.5px solid var(--primary);
  border-radius: 50%;
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 12px rgba(212, 175, 55, 0.15), 0 0 15px rgba(212, 175, 55, 0.08);
}

.auth-glass-lens::after {
  content: '';
  position: absolute;
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  border-top: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform: rotate(-45deg);
}

.auth-glass-bridge {
  flex: 1;
  height: 10px;
  border-top: 1.5px solid var(--primary);
  border-radius: 50% 50% 0 0;
  margin: 0 -4px;
  position: relative;
  top: -8px;
}

/* Animations Keyframes */
@keyframes floatBlob1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(45px, -55px) scale(1.08); }
  100% { transform: translate(-15px, 25px) scale(0.92); }
}
@keyframes floatBlob2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-45px, 45px) scale(0.95); }
  100% { transform: translate(25px, -25px) scale(1.05); }
}
@keyframes floatBlob3 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, 25px) scale(1.1); }
  100% { transform: translate(-35px, -45px) scale(0.9); }
}
@keyframes floatGlasses {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(-40px, 50px) rotate(12deg) scale(1.06); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* ── Container ───────────────────────────────────────── */
.auth-container {
  width: 100%;
  max-width: 440px;
  position: relative;
  z-index: 1;
}

/* ── Branding & Logo styling ─────────────────────────── */
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2.25rem;
}

.auth-logo-link {
  display: inline-block;
  position: relative;
  margin-bottom: 0.75rem;
}

.auth-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 50%;
  padding: 14px;
  box-shadow: 
    0 8px 24px rgba(212, 175, 55, 0.12),
    inset 0 0 12px rgba(212, 175, 55, 0.05);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
}

/* Spinning Optical Dial/Scope Around Logo */
.auth-logo-container::before {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1.5px dashed rgba(212, 175, 55, 0.35);
  border-radius: 50%;
  animation: spinScope 16s linear infinite;
  pointer-events: none;
  transition: border-color 0.3s;
}

.auth-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
  transition: all 0.4s ease;
}

.auth-logo-link:hover .auth-logo-container {
  transform: translateY(-4px) scale(1.04);
  border-color: rgba(212, 175, 55, 0.75);
  box-shadow: 
    0 16px 36px rgba(212, 175, 55, 0.22),
    0 0 0 5px rgba(212, 175, 55, 0.08);
}

.auth-logo-link:hover .auth-logo-container::before {
  border-color: rgba(212, 175, 55, 0.7);
  animation-duration: 8s; /* Spins faster on hover! */
}

.auth-logo-link:hover .auth-logo {
  transform: scale(1.05);
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.5));
}

.auth-tagline {
  color: #706757;
  font-size: .88rem;
  margin-top: .25rem;
  font-weight: 500;
}

/* Background Watermark Logo */
.auth-logo-watermark {
  position: absolute;
  top: 8%;
  left: 8%;
  width: 180px;
  height: 180px;
  opacity: 0.035;
  filter: grayscale(1) brightness(1.2);
  border-radius: 0;
  pointer-events: none;
  animation: floatLogoWatermark 32s infinite ease-in-out alternate;
}

.auth-logo-watermark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes spinScope {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes floatLogoWatermark {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(30px, 30px) rotate(15deg) scale(1.08); }
  100% { transform: translate(-15px, -20px) rotate(-10deg) scale(0.95); }
}

/* ── Card ────────────────────────────────────────────── */
.auth-card {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(212, 175, 55, 0.22);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  box-shadow:
    0 4px 6px -1px rgba(212, 175, 55, 0.03),
    0 24px 50px rgba(212, 175, 55, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  animation: authCardIn .45s cubic-bezier(.22,1,.36,1) both;
}

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

/* ── Tabs ────────────────────────────────────────────── */
.auth-tabs {
  display: flex;
  background: rgba(212, 175, 55, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.12);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 2rem;
  position: relative;
  gap: 4px;
}

.auth-tab {
  flex: 1;
  padding: .65rem 1rem;
  border: none;
  background: transparent;
  color: #706757;
  font-family: inherit;
  font-size: .9rem;
  border-radius: 9px;
  cursor: pointer;
  transition: color .25s;
  position: relative;
  z-index: 1;
}
.auth-tab.active {
  color: #fff;
  font-weight: 600;
}
.auth-tab-indicator {
  position: absolute;
  top: 4px; bottom: 4px;
  right: 4px;
  width: calc(33.333% - 4px);
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  border-radius: 9px;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.22);
}
.auth-tabs[data-active="otp"] .auth-tab-indicator {
  transform: translateX(-100%);
}
.auth-tabs[data-active="register"] .auth-tab-indicator {
  transform: translateX(-200%);
}

/* ── Alert ───────────────────────────────────────────── */
.auth-alert {
  padding: .85rem 1.1rem;
  border-radius: 10px;
  font-size: .88rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  animation: slideDown .2s ease both;
  font-weight: 500;
}
.auth-alert.error   { background: #fef2f2; border: 1px solid #fee2e2; color: #991b1b; }
.auth-alert.success { background: #ecfdf5; border: 1px solid #d1fae5; color: #065f46; }

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Form ────────────────────────────────────────────── */
.auth-form { display: flex; flex-direction: column; gap: 1.15rem; }
.auth-form.hidden { display: none; }

.form-group { display: flex; flex-direction: column; gap: .45rem; }
.form-group label {
  font-size: .85rem;
  color: #4a4335;
  font-weight: 600;
}
.required-star { color: #dc2626; }
.optional-label { color: #8c826e; font-weight: 400; }

.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon-wrap > .fa-solid,
.input-icon-wrap > .fa-regular {
  position: absolute;
  right: 1.1rem;
  color: var(--primary);
  font-size: .95rem;
  pointer-events: none;
  opacity: 0.85;
  transition: transform 0.2s, color 0.2s;
}
.input-icon-wrap input {
  width: 100%;
  padding: .85rem 2.8rem .85rem 3rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 12px;
  color: #2b271d;
  font-family: inherit;
  font-size: .95rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
  direction: ltr;
  text-align: right;
}
.input-icon-wrap input::placeholder { color: #b0a693; }
.input-icon-wrap input:focus {
  outline: none;
  border-color: var(--primary);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.16);
}
.input-icon-wrap input.input-error {
  border-color: rgba(220, 38, 38, 0.6);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
  background: #fffafa;
}

/* ── Field Error Message ─────────────────────────────── */
.field-error-msg {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 500;
  animation: slideDown 0.2s ease both;
}
.field-error-msg i {
  color: #dc2626;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* Animate icon on focus using :focus-within */
.input-icon-wrap:focus-within > i {
  color: var(--primary-hover);
  transform: scale(1.08);
}

.toggle-pass {
  position: absolute;
  left: .9rem;
  background: none;
  border: none;
  color: #b0a693;
  cursor: pointer;
  padding: .3rem;
  transition: color .2s, transform 0.2s;
  line-height: 1;
}
.toggle-pass:hover {
  color: var(--primary);
  transform: scale(1.08);
}

/* ── Password strength ───────────────────────────────── */
.password-strength { margin-top: .4rem; }
.strength-bar {
  height: 4px;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: .3rem;
}
.strength-bar span {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width .3s, background .3s;
  width: 0;
}
.strength-label { font-size: .75rem; color: #706757; }
.strength-weak   .strength-bar span { background: #ef4444; width: 33%; }
.strength-medium .strength-bar span { background: #f59e0b; width: 66%; }
.strength-strong .strength-bar span { background: #10b981; width: 100%; }

/* ── Submit button ───────────────────────────────────── */
.btn-auth {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .5rem;
  position: relative;
  overflow: hidden;
}

/* Golden Shimmer Effect on hover */
.btn-auth::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: none;
}
.btn-auth:hover::before {
  left: 150%;
  transition: left 0.85s ease-in-out;
}

.btn-auth:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(212, 175, 55, 0.32);
  filter: brightness(1.04);
}
.btn-auth:active:not(:disabled) { transform: translateY(0); }
.btn-auth:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }

/* ── Switch link ─────────────────────────────────────── */
.auth-switch {
  text-align: center;
  font-size: .85rem;
  color: #706757;
  margin-top: .25rem;
}
.switch-link {
  color: var(--primary-hover);
  text-decoration: none;
  font-weight: 700;
  transition: color .2s;
}
.switch-link:hover { color: #8b6508; text-decoration: underline; }

/* ── Back to home link ───────────────────────────────── */
.auth-back-home-wrap {
  text-align: center;
  margin-top: 0.5rem;
  border-top: 1px dashed rgba(212, 175, 55, 0.15);
  padding-top: 1.15rem;
}
.auth-back-home {
  color: #706757;
  font-size: 0.85rem;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.2s;
}
.auth-back-home i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}
.auth-back-home:hover {
  color: var(--primary-hover);
}
.auth-back-home:hover i {
  transform: translateX(4px);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 480px) {
  .auth-card { padding: 2rem 1.25rem; border-radius: 18px; }
  .auth-section { padding: 1.5rem 0.75rem; }
  .auth-glasses-frame { display: none; } /* Hide large decoration on small mobile devices */
}