/* ==========================================================================
   ViriX Ayurveda — Auth pages stylesheet (Login / Register / Forgot /
   Reset / Verify Email / Dashboard)
   Dedicated file — loaded only on auth pages, keeps ayurveda.css from
   growing further.

   Mobile-first, 9 breakpoints:
   320 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920
   ========================================================================== */

.ay-auth {
  --ay-a-primary: #2f6f4f;
  --ay-a-primary-dark: #234f39;
  --ay-a-accent: #c98a3d;
  --ay-a-bg: #faf8f3;
  --ay-a-card-bg: #ffffff;
  --ay-a-text: #26302b;
  --ay-a-text-muted: #6b756f;
  --ay-a-border: #e3ddcf;
  --ay-a-error-bg: #fdecec;
  --ay-a-error-text: #b3261e;
  --ay-a-success-bg: #eaf6ee;
  --ay-a-success-text: #1e6b3d;
  --ay-a-radius: 14px;
  --ay-a-radius-sm: 8px;
  --ay-a-shadow: 0 10px 30px rgba(38, 48, 43, 0.08);

  min-height: 100vh;
  background: var(--ay-a-bg);
  color: var(--ay-a-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
}

.ay-auth *,
.ay-auth *::before,
.ay-auth *::after {
  box-sizing: border-box;
}

/* ---- Top mini brand bar (always visible, even on mobile) ---- */
.ay-auth-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
}

.ay-auth-topbar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ay-a-primary-dark);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
}

.ay-auth-topbar img {
  height: 28px;
  width: auto;
}

/* ---- Shell: mobile = single column, no side panel ---- */
.ay-auth-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ay-auth-brand-panel {
  display: none; /* hidden below 1024px */
}

.ay-auth-form-panel {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 16px 40px;
}

/* ---- Card ---- */
.ay-auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--ay-a-card-bg);
  border-radius: var(--ay-a-radius);
  padding: 20px;
  box-shadow: var(--ay-a-shadow);
  border: 1px solid var(--ay-a-border);
}

.ay-auth-card h1 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--ay-a-primary-dark);
}

.ay-auth-card p.ay-auth-sub {
  margin: 0 0 20px;
  color: var(--ay-a-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ---- Alerts ---- */
.ay-auth-alert {
  border-radius: var(--ay-a-radius-sm);
  padding: 11px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
  line-height: 1.45;
}

.ay-auth-alert.is-error {
  background: var(--ay-a-error-bg);
  color: var(--ay-a-error-text);
}

.ay-auth-alert.is-success {
  background: var(--ay-a-success-bg);
  color: var(--ay-a-success-text);
}

/* ---- Trust badges ---- */
.ay-auth-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 18px;
}

.ay-auth-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ay-a-text-muted);
  font-weight: 600;
}

.ay-auth-trust span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ay-a-primary);
  flex-shrink: 0;
}

/* ---- Form ---- */
.ay-auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ay-auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ay-auth-field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ay-a-text);
}

.ay-auth-field .ay-auth-optional {
  font-weight: 400;
  color: var(--ay-a-text-muted);
}

.ay-auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.ay-auth-input-wrap input {
  width: 100%;
  min-height: 46px; /* comfortable tap target */
  padding: 11px 14px;
  border: 1.5px solid var(--ay-a-border);
  border-radius: var(--ay-a-radius-sm);
  font-size: 15px;
  color: var(--ay-a-text);
  background: #fff;
  transition: border-color 0.15s ease;
}

.ay-auth-input-wrap input:focus {
  outline: none;
  border-color: var(--ay-a-primary);
}

.ay-auth-input-wrap input.has-toggle {
  padding-right: 44px;
}

.ay-auth-field-error {
  font-size: 12.5px;
  color: var(--ay-a-error-text);
  min-height: 1px;
}

.ay-auth-field-hint {
  font-size: 12px;
  color: var(--ay-a-text-muted);
}

.ay-auth-field-hint.is-ok {
  color: var(--ay-a-success-text);
}

.ay-auth-field-hint.is-taken {
  color: var(--ay-a-error-text);
}

/* Show/hide password toggle */
.ay-auth-toggle-pw {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--ay-a-text-muted);
  font-size: 12px;
  font-weight: 700;
  min-width: 44px;
  min-height: 44px;
}

/* Password strength meter */
.ay-auth-strength {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.ay-auth-strength i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--ay-a-border);
}

.ay-auth-strength[data-level="1"] i:nth-child(1) { background: #d64545; }
.ay-auth-strength[data-level="2"] i:nth-child(-n+2) { background: #e8a13a; }
.ay-auth-strength[data-level="3"] i:nth-child(-n+3) { background: #4c9a58; }
.ay-auth-strength[data-level="4"] i { background: var(--ay-a-primary); }

.ay-auth-strength-label {
  font-size: 11.5px;
  color: var(--ay-a-text-muted);
  margin-top: 2px;
}

/* Honeypot — visually and functionally hidden */
.ay-auth-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Checkbox rows (terms, newsletter, remember me) */
.ay-auth-checkrow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--ay-a-text-muted);
  line-height: 1.5;
}

.ay-auth-checkrow input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--ay-a-primary);
  flex-shrink: 0;
}

.ay-auth-checkrow a {
  color: var(--ay-a-primary-dark);
  font-weight: 600;
}

.ay-auth-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}

.ay-auth-row-between a {
  color: var(--ay-a-primary-dark);
  font-weight: 700;
  text-decoration: none;
}

/* ---- Buttons ---- */
.ay-auth-btn {
  min-height: 48px;
  border-radius: var(--ay-a-radius-sm);
  border: none;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  transition: transform 0.1s ease, background 0.15s ease;
}

.ay-auth-btn:active {
  transform: scale(0.98);
}

.ay-auth-btn-primary {
  background: var(--ay-a-primary);
  color: #fff;
}

.ay-auth-btn-primary:hover {
  background: var(--ay-a-primary-dark);
}

.ay-auth-btn-google {
  background: #fff;
  color: var(--ay-a-text);
  border: 1.5px solid var(--ay-a-border);
}

.ay-auth-btn-google:hover {
  background: #f5f3ec;
}

.ay-auth-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Divider between Google button and form */
.ay-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ay-a-text-muted);
  font-size: 12px;
  margin: 4px 0;
}

.ay-auth-divider::before,
.ay-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ay-a-border);
}

/* Google-last-time hint badge */
.ay-auth-last-used {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ay-a-accent);
  background: rgba(201, 138, 61, 0.12);
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 8px;
}

/* Footer link under card */
.ay-auth-switch {
  text-align: center;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--ay-a-text-muted);
}

.ay-auth-switch a {
  color: var(--ay-a-primary-dark);
  font-weight: 700;
  text-decoration: none;
}

/* ---- Brand panel content (shown only 1024px+) ---- */
.ay-auth-brand-panel {
  flex-direction: column;
  justify-content: center;
  padding: 60px;
  background: linear-gradient(160deg, var(--ay-a-primary-dark), var(--ay-a-primary));
  color: #fff;
  position: relative;
  overflow: hidden;
}

.ay-auth-brand-panel h2 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 16px;
  max-width: 380px;
}

.ay-auth-brand-panel p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 380px;
  margin: 0 0 28px;
}

.ay-auth-brand-points {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ay-auth-brand-points div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
}

.ay-auth-brand-points div::before {
  content: "✓";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

/* ==========================================================================
   Dashboard (post-login)
   ========================================================================== */

.ay-dash {
  min-height: 100vh;
  background: var(--ay-a-bg, #faf8f3);
}

.ay-dash-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 56px;
}

.ay-dash-welcome {
  background: linear-gradient(160deg, #234f39, #2f6f4f);
  color: #fff;
  border-radius: 16px;
  padding: 24px 20px;
  margin-bottom: 18px;
}

.ay-dash-welcome h1 {
  font-size: 22px;
  margin: 0 0 6px;
}

.ay-dash-welcome p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.ay-dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.ay-dash-card {
  background: #fff;
  border: 1px solid #e3ddcf;
  border-radius: 14px;
  padding: 18px;
}

.ay-dash-card h3 {
  font-size: 15px;
  margin: 0 0 8px;
  color: #234f39;
}

.ay-dash-card p {
  font-size: 13.5px;
  color: #6b756f;
  line-height: 1.55;
  margin: 0 0 12px;
}

.ay-dash-card a.ay-dash-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: #c98a3d;
  text-decoration: none;
}

.ay-dash-logout {
  display: inline-flex;
  margin-top: 18px;
  background: none;
  border: 1.5px solid #e3ddcf;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: #6b756f;
  cursor: pointer;
}

/* ==========================================================================
   Breakpoints — mobile-first cascade
   320 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920
   ========================================================================== */

/* 375px — iPhone SE: a hair more breathing room */
@media (min-width: 375px) {
  .ay-auth-card { padding: 22px; }
}

/* 390px — iPhone 14 standard */
@media (min-width: 390px) {
  .ay-auth-form { gap: 15px; }
}

/* 430px — iPhone 14 Plus / large mobile */
@media (min-width: 430px) {
  .ay-auth-card { padding: 26px; }
  .ay-auth-topbar { padding: 20px; }
}

/* 768px — Tablet portrait: card gets a max-width and more room, still
   single column (no side brand panel yet) */
@media (min-width: 768px) {
  .ay-auth-form-panel {
    padding: 24px 24px 60px;
    align-items: center;
    min-height: calc(100vh - 68px);
  }

  .ay-auth-card {
    max-width: 440px;
    padding: 34px 36px;
  }

  .ay-auth-topbar { padding: 24px; }
  .ay-auth-topbar a { font-size: 19px; }
  .ay-dash-wrap { padding: 32px 24px 64px; }
}

/* 1024px — Tablet landscape / small laptop: split-screen begins */
@media (min-width: 1024px) {
  .ay-auth-topbar { display: none; } /* brand now lives in the side panel */

  .ay-auth-shell {
    flex-direction: row;
    min-height: 100vh;
  }

  .ay-auth-brand-panel {
    display: flex;
    flex: 0 0 45%;
    max-width: 45%;
  }

  .ay-auth-form-panel {
    flex: 1;
    min-height: 100vh;
    padding: 40px;
  }

  .ay-auth-card {
    max-width: 440px;
    box-shadow: none;
    border: none;
    padding: 0;
  }

  .ay-dash-grid { grid-template-columns: 1fr 1fr; }
}

/* 1280px — Standard desktop */
@media (min-width: 1280px) {
  .ay-auth-brand-panel { padding: 72px; }
  .ay-auth-brand-panel h2 { font-size: 34px; }
  .ay-dash-wrap { max-width: 840px; }
}

/* 1440px — Large desktop: cap the whole shell and center it */
@media (min-width: 1440px) {
  .ay-auth-shell {
    max-width: 1320px;
    margin: 0 auto;
  }

  .ay-auth-brand-panel {
    border-radius: 0 0 0 0;
  }
}

/* 1920px — Wide screen: same cap, extra breathing room outside it */
@media (min-width: 1920px) {
  .ay-auth {
    background: linear-gradient(180deg, #f2efe6, var(--ay-a-bg));
  }

  .ay-auth-shell {
    max-width: 1440px;
    box-shadow: var(--ay-a-shadow);
    margin: 24px auto;
    border-radius: 20px;
    overflow: hidden;
    min-height: calc(100vh - 48px);
  }

  .ay-auth-brand-panel,
  .ay-auth-form-panel {
    min-height: auto;
  }
}


/* ==========================================================================
   Login page (/ayurveda/login) — 20 advanced features + 20 UI/UX
   enhancements (LOGIN_ENH_V1)

   This stylesheet is shared across every ViriX Ayurveda auth page
   (login, register, forgot-password, reset-password, verify-email,
   dashboard). Every rule below that touches a shared selector is
   scoped under the new .ay-auth-login body class (added only to
   login.blade.php) so nothing here changes the look of the other
   auth pages. Genuinely new, login-only class names are prefixed the
   same way for consistency/clarity, even though they can't match
   markup that doesn't exist elsewhere.
   ========================================================================== */

/* ---- Full-width immersive background (login page only) ---- */
.ay-auth-login {
  background:
    radial-gradient(circle at 15% 18%, rgba(201,138,61,.10), transparent 45%),
    radial-gradient(circle at 85% 82%, rgba(47,111,79,.13), transparent 50%),
    linear-gradient(180deg, #f5f2e9, var(--ay-a-bg));
  background-attachment: fixed;
  scrollbar-width: thin;
  scrollbar-color: var(--ay-a-primary) transparent;
}
.ay-auth-login::-webkit-scrollbar { width: 10px; }
.ay-auth-login::-webkit-scrollbar-track { background: transparent; }
.ay-auth-login::-webkit-scrollbar-thumb {
  background: var(--ay-a-primary);
  border-radius: 10px;
  border: 2px solid var(--ay-a-bg);
}

/* ---- Skip-to-content link (a11y) ---- */
.ay-auth-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ay-a-primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  font-size: 13px;
  z-index: 999;
  text-decoration: none;
}
.ay-auth-login .ay-auth-skip-link:focus { left: 0; }

/* ---- Sticky topbar with shadow-on-scroll ---- */
.ay-auth-login .ay-auth-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 243, .9);
  backdrop-filter: blur(6px);
  transition: box-shadow .2s ease;
}
.ay-auth-login .ay-auth-topbar.is-scrolled {
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* ---- Offline / network-status banner ---- */
.ay-auth-login .ay-auth-offline-banner {
  background: var(--ay-a-error-bg);
  color: var(--ay-a-error-text);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
}

/* ---- Brand panel: floating decorative orbs + leaf motif ---- */
.ay-auth-login .ay-auth-brand-panel {
  position: relative;
  overflow: hidden;
}
.ay-auth-login .ay-auth-brand-panel > *:not(.ay-auth-brand-orb) {
  position: relative;
  z-index: 1;
}
.ay-auth-login .ay-auth-brand-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(38px);
  opacity: .3;
  pointer-events: none;
  animation: ayAuthOrbFloat 8s ease-in-out infinite;
}
.ay-auth-login .ay-auth-brand-orb-1 { width: 180px; height: 180px; background: var(--ay-a-accent); top: -40px; right: 6%; }
.ay-auth-login .ay-auth-brand-orb-2 { width: 140px; height: 140px; background: #fff; bottom: -30px; left: 6%; animation-delay: 1.4s; }
@keyframes ayAuthOrbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-16px) scale(1.05); }
}
.ay-auth-login .ay-auth-brand-motif {
  display: inline-block;
  font-size: 2.4rem;
  margin-bottom: 14px;
  opacity: .9;
}
@media (prefers-reduced-motion: reduce) {
  .ay-auth-login .ay-auth-brand-orb { animation: none; }
}

/* ---- Card entrance animation + premium depth ---- */
@keyframes ayAuthCardIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.ay-auth-login .ay-auth-card-anim { animation: ayAuthCardIn .5s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion: reduce) {
  .ay-auth-login .ay-auth-card-anim { animation: none; }
}
.ay-auth-login .ay-auth-card {
  box-shadow: 0 20px 50px rgba(38,48,43,.10), 0 0 0 1px rgba(201,138,61,.08);
}
.ay-auth-login .ay-auth-card h1 {
  position: relative;
  padding-bottom: 10px;
}
.ay-auth-login .ay-auth-card h1::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--ay-a-accent), transparent);
  border-radius: 2px;
}

/* ---- Trust badges (wires up the previously-unused .ay-auth-trust rules) ---- */
.ay-auth-login .ay-auth-trust span.has-icon::before { content: none; }

/* ---- Field label micro-style ---- */
.ay-auth-login .ay-auth-field label {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 11.5px;
}
.ay-auth-login .ay-auth-remembered-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ay-a-primary);
  background: rgba(47, 111, 79, 0.12);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
}

/* ---- Input focus-glow + live email validation state ---- */
.ay-auth-login .ay-auth-input-wrap input:focus {
  box-shadow: 0 0 0 3px rgba(47,111,79,.15);
}
.ay-auth-login .ay-auth-input-wrap.is-valid input { border-color: #3f9d5c; }
.ay-auth-login .ay-auth-input-wrap.is-valid::after {
  content: '✓';
  position: absolute;
  right: 12px;
  color: #3f9d5c;
  font-weight: 800;
  pointer-events: none;
}
.ay-auth-login .ay-auth-input-wrap.is-invalid input { border-color: #d64545; }

/* ---- Caps Lock warning ---- */
.ay-auth-login .ay-auth-capslock-warning {
  font-size: 12px;
  color: var(--ay-a-error-text);
  margin-top: 2px;
  font-weight: 600;
}

/* ---- Field shake animation (first invalid field after a server error) ---- */
@keyframes ayAuthShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.ay-auth-login .ay-auth-field-shake { animation: ayAuthShake .5s ease; }
@media (prefers-reduced-motion: reduce) {
  .ay-auth-login .ay-auth-field-shake { animation: none; }
}

/* ---- Toggle password hover ---- */
.ay-auth-login .ay-auth-toggle-pw:hover { color: var(--ay-a-primary); }

/* ---- Divider micro-style ---- */
.ay-auth-login .ay-auth-divider {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  font-size: 11px;
}

/* ---- Google button icon polish ---- */
.ay-auth-login .ay-auth-btn-google svg {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.06));
}

/* ---- Gradient-glow primary submit button ---- */
.ay-auth-login .ay-auth-btn-primary {
  box-shadow: 0 8px 24px rgba(47,111,79,.35);
  transition: transform .2s ease, box-shadow .2s ease, background .15s ease;
}
.ay-auth-login .ay-auth-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(47,111,79,.45);
}

/* ---- Button loading state (double-submit prevention) ---- */
.ay-auth-login .ay-auth-btn.is-loading { opacity: .75; cursor: progress; pointer-events: none; }
.ay-auth-login .ay-auth-btn.is-loading .ay-auth-btn-label::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border: 2px solid rgba(255,255,255,.5);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -2px;
  animation: ayAuthSpin .6s linear infinite;
}
.ay-auth-login .ay-auth-btn-google.is-loading .ay-auth-btn-label::after {
  border-color: rgba(38,48,43,.25);
  border-top-color: var(--ay-a-text);
}
@keyframes ayAuthSpin { to { transform: rotate(360deg); } }

/* ---- Button ripple micro-interaction ---- */
.ay-auth-login .ay-auth-btn { position: relative; overflow: hidden; }
.ay-auth-login .ay-auth-btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  transform: translate(-50%,-50%);
  width: 10px;
  height: 10px;
  pointer-events: none;
  animation: ayAuthRipple .6s ease-out;
}
@keyframes ayAuthRipple {
  to { width: 260px; height: 260px; opacity: 0; }
}

/* ---- Alert banners: icon layout + dismiss animation ---- */
@keyframes ayAuthAlertIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.ay-auth-login .ay-auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  animation: ayAuthAlertIn .35s ease both;
  transition: opacity .3s ease, transform .3s ease;
}
.ay-auth-login .ay-auth-alert.is-dismissing { opacity: 0; transform: translateY(-6px); }
.ay-auth-login .ay-auth-alert-icon { flex-shrink: 0; }
.ay-auth-login .ay-auth-alert-text { flex: 1; }
.ay-auth-login .ay-auth-alert-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: inherit;
  opacity: .6;
  padding: 0 2px;
}
.ay-auth-login .ay-auth-alert-close:hover { opacity: 1; }

/* ---- Secure-connection note under submit button ---- */
.ay-auth-login .ay-auth-secure-note {
  text-align: center;
  font-size: 12px;
  color: var(--ay-a-text-muted);
  margin-top: 10px;
}

/* ---- Print hygiene ---- */
@media print {
  .ay-auth-login .ay-auth-brand-orb,
  .ay-auth-login .ay-auth-skip-link,
  .ay-auth-login .ay-auth-offline-banner { display: none !important; }
}


/* ==========================================================================
   Login page (/ayurveda/login) — layout fix pass (LOGIN_ENH_V2)

   Root cause of the "everything is cut off / huge empty space" report:
   the shared ayurveda-auth.css caps .ay-auth-shell at max-width:1320px
   (1440px breakpoint) and max-width:1440px with a floating rounded-
   corner/shadow card (1920px breakpoint) — on a wide monitor this
   leaves large blank voids of plain page background on both sides of a
   shrunk, floating shell, which reads as broken rather than premium.
   Overriding here with a higher-specificity selector (.ay-auth-login
   .ay-auth-shell beats the unscoped .ay-auth-shell at equal source
   order) so the login page goes genuinely edge-to-edge at every
   breakpoint, while the other auth pages keep the original capped/
   floating treatment untouched.

   Also fixes two real small bugs surfaced by the screenshot: the
   Google button showing a browser-default underline (it's an <a>,
   never had text-decoration:none set), and Chrome's default blue-ish
   autofill tint on the email/password fields overriding our own field
   background.
   ========================================================================== */

/* ---- Full-width shell: no cap, no floating-card effect ---- */
.ay-auth-login .ay-auth-shell {
  max-width: none;
  width: 100%;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
}

@media (min-width: 1024px) {
  .ay-auth-login .ay-auth-shell {
    min-height: 100vh;
  }
  .ay-auth-login .ay-auth-brand-panel,
  .ay-auth-login .ay-auth-form-panel {
    min-height: 100vh;
  }
  .ay-auth-login .ay-auth-form-panel {
    align-items: center;
    justify-content: center;
    padding: 40px 56px;
  }
  .ay-auth-login .ay-auth-brand-panel {
    box-shadow: 6px 0 30px rgba(0,0,0,.08);
  }
}

@media (min-width: 1280px) {
  .ay-auth-login .ay-auth-card { max-width: 480px; }
}

@media (min-width: 1920px) {
  .ay-auth-login .ay-auth-brand-panel h2 { font-size: 38px; }
  .ay-auth-login .ay-auth-brand-panel { padding: 90px; }
  .ay-auth-login .ay-auth-form-panel { padding: 40px 90px; }
}

/* ---- Fix: Google button showed a default browser underline (it's an <a>) ---- */
.ay-auth-login .ay-auth-btn {
  text-decoration: none;
}

/* ---- Fix: Chrome's default blue-ish autofill tint fought our field styling ---- */
.ay-auth-login .ay-auth-input-wrap input:-webkit-autofill,
.ay-auth-login .ay-auth-input-wrap input:-webkit-autofill:hover,
.ay-auth-login .ay-auth-input-wrap input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ay-a-text);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* ---- A touch more professional polish now that the panel has real room ---- */
@media (min-width: 1024px) {
  .ay-auth-login .ay-auth-card {
    width: 100%;
  }
}


/* ==========================================================================
   Login page (/ayurveda/login) — premium brand-panel redesign (LOGIN_ENH_V3)

   Matches the /college-student/login split-screen pattern (animated stat
   counters, feature rows, journey timeline, rotating quote, scrolling
   ticker) adapted to Ayurveda branding/content. Stat counters and ticker
   use REAL data (herb/category counts, real product names) passed from
   AyurvedaAuthController::showLogin() — nothing fabricated. Scoped under
   .ay-auth-login exactly like the LOGIN_ENH_V1/V2 passes, so the other
   5 shared auth pages (register/forgot-password/reset-password/
   verify-email/dashboard) are untouched — these are new class names
   that don't exist in their markup anyway, but scoping is kept for
   consistency with the established pattern.
   ========================================================================== */

.ay-auth-login .ay-auth-brand-content {
  display: flex;
  flex-direction: column;
}

/* ---- Animated stat counters ---- */
.ay-auth-login .ay-auth-stats {
  display: flex;
  gap: 28px;
  margin: 4px 0 22px;
}
.ay-auth-login .ay-auth-stat-num {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 700;
  font-size: 22px;
  color: #fff;
}
.ay-auth-login .ay-auth-stat-label {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}

/* ---- Feature rows ---- */
.ay-auth-login .ay-auth-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border-radius: 10px;
  margin-bottom: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 0.2s ease, transform 0.2s ease;
}
.ay-auth-login .ay-auth-feature:hover {
  background: rgba(255, 255, 255, 0.09);
  transform: translateX(3px);
}
.ay-auth-login .ay-auth-feature-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.ay-auth-login .ay-auth-feature-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

/* ---- Journey timeline ---- */
.ay-auth-login .ay-auth-journey {
  display: flex;
  align-items: center;
  margin: 20px 0 4px;
}
.ay-auth-login .ay-auth-journey-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}
.ay-auth-login .ay-auth-journey-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  margin-bottom: 5px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
}
.ay-auth-login .ay-auth-journey-label {
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ay-auth-login .ay-auth-journey-line {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  z-index: -1;
}
.ay-auth-login .ay-auth-journey-step:last-child .ay-auth-journey-line { display: none; }

/* ---- Rotating quote ---- */
.ay-auth-login .ay-auth-quote {
  margin-top: 20px;
  padding: 13px 15px;
  border-left: 2px solid var(--ay-a-accent);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 10px 10px 0;
}
.ay-auth-login .ay-auth-quote-text {
  font-size: 12px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.6;
  transition: opacity 0.25s ease;
}
.ay-auth-login .ay-auth-quote-dots {
  display: flex;
  gap: 6px;
  margin-top: 9px;
}
.ay-auth-login .ay-auth-qdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.3s ease, width 0.3s ease;
}
.ay-auth-login .ay-auth-qdot.active {
  background: var(--ay-a-accent);
  width: 15px;
  border-radius: 3px;
}

/* ---- Scrolling product ticker (real product names) ---- */
.ay-auth-login .ay-auth-ticker-wrap {
  margin-top: 18px;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ay-auth-login .ay-auth-ticker-track {
  display: inline-flex;
  gap: 22px;
  animation: ayAuthTicker 26s linear infinite;
}
.ay-auth-login .ay-auth-ticker-item {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
  font-weight: 600;
  flex-shrink: 0;
}
@keyframes ayAuthTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ay-auth-login .ay-auth-ticker-track { animation: none; }
}

/* ---- Slightly denser brand-panel points now there's more content above ---- */
.ay-auth-login .ay-auth-brand-points { gap: 10px; margin-top: 4px; }
.ay-auth-login .ay-auth-brand-points div { font-size: 12.5px; }

/* ---- Compact the top copy a touch so everything fits without feeling cramped ---- */
.ay-auth-login .ay-auth-brand-panel h2 { font-size: 26px; margin-bottom: 10px; }
.ay-auth-login .ay-auth-brand-panel p { font-size: 13.5px; margin-bottom: 16px; }

@media (min-width: 1920px) {
  .ay-auth-login .ay-auth-brand-panel h2 { font-size: 32px; }
}


/* ==========================================================================
   Login page (/ayurveda/login) — earlier split-screen breakpoint (LOGIN_ENH_V4)

   Reported bug (screenshot at ~934px window width): the base shared rule
   only turns on the split-screen brand panel at 1024px+
   (.ay-auth-brand-panel{display:none} below that) — so on a fairly common
   narrower desktop/laptop window (900-1023px), the ENTIRE new premium
   brand panel (stat counters, feature rows, journey timeline, quote,
   ticker) was invisible, leaving only the centered card with plain
   background on both sides. This reads as "hidden/cut off" even though
   nothing is technically clipped.

   Fix: bring the split-screen activation earlier — to 900px — for the
   login page only, matching how /college-student/login already turns
   its brand panel on at 769px. Scoped under .ay-auth-login with
   higher-specificity selectors (2 classes beats the shared 1-class
   selector regardless of media-query source order), so the other 5
   shared auth pages keep the original 1024px threshold untouched.
   ========================================================================== */

@media (min-width: 900px) and (max-width: 1023px) {
  .ay-auth-login .ay-auth-topbar { display: none; }

  .ay-auth-login .ay-auth-shell {
    flex-direction: row;
    min-height: 100vh;
  }

  .ay-auth-login .ay-auth-brand-panel {
    display: flex;
    flex: 0 0 42%;
    max-width: 42%;
    min-height: 100vh;
    padding: 40px;
  }

  .ay-auth-login .ay-auth-form-panel {
    flex: 1;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 32px;
  }

  .ay-auth-login .ay-auth-card {
    max-width: 400px;
    box-shadow: none;
    border: none;
    padding: 0;
    width: 100%;
  }

  /* Slightly denser brand-panel type at this narrower width, so
     everything (stats, 5 feature rows, journey, quote, ticker) still
     fits comfortably without feeling cramped. */
  .ay-auth-login .ay-auth-brand-panel h2 { font-size: 22px; }
  .ay-auth-login .ay-auth-brand-panel p { font-size: 12.5px; margin-bottom: 12px; }
  .ay-auth-login .ay-auth-stats { margin-bottom: 16px; }
  .ay-auth-login .ay-auth-feature { padding: 7px 9px; margin-bottom: 5px; }
  .ay-auth-login .ay-auth-journey { margin: 14px 0 2px; }
  .ay-auth-login .ay-auth-quote { margin-top: 14px; padding: 10px 12px; }
  .ay-auth-login .ay-auth-ticker-wrap { margin-top: 12px; }
}


/* ==========================================================================
   Login page (/ayurveda/login) — form-panel fill + polish (LOGIN_ENH_V5)

   Reported issue (screenshot): the dark brand panel fills its column
   edge-to-edge, but the right form-panel was visually empty — the page's
   cream background showed through around a small, narrow, centered card,
   so the right half read as unfinished next to the fully-designed left
   half.

   Fix: give the form-panel its own solid white background that fills its
   full container width/height (matching how the brand panel fills its
   own column), add restrained decorative touches in the same visual
   language as the brand panel (a soft dot-grid + a single blurred accent
   orb), and widen the card at larger breakpoints so it uses the available
   space better instead of looking small and lost. Scoped under
   .ay-auth-login and appended after V1-V4, so later source order plus
   equal-or-higher specificity means these rules win without touching the
   other 5 shared auth pages.
   ========================================================================== */

@media (min-width: 900px) {
  .ay-auth-login .ay-auth-form-panel {
    background: var(--ay-a-card-bg);
    position: relative;
    overflow: hidden;
  }
  .ay-auth-login .ay-auth-form-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(47, 111, 79, 0.05) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
  }
  .ay-auth-login .ay-auth-form-panel::after {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: var(--ay-a-accent);
    opacity: 0.07;
    filter: blur(70px);
    bottom: -70px;
    right: -50px;
    pointer-events: none;
  }
  .ay-auth-login .ay-auth-card {
    position: relative;
    z-index: 1;
  }
}

@media (min-width: 1280px) {
  .ay-auth-login .ay-auth-card { max-width: 520px; }
}

@media (min-width: 1920px) {
  .ay-auth-login .ay-auth-card { max-width: 560px; }
}


/* ==========================================================================
   Login page (/ayurveda/login) — top-aligned form panel (LOGIN_ENH_V6)

   Reported issue (screenshots comparing /ayurveda/login to
   /college-student/login): even after LOGIN_ENH_V5 (which only gave the
   form-panel a background fill), the right side still read as an empty
   void with a small floating card, because the panel content was
   vertically CENTERED — the actual difference from the college-student
   page is that its right panel content starts near the top and flows
   naturally down (brand mark + back-link, heading, form, footer link),
   filling the panel the way the left brand panel does, instead of being
   centered in a sea of blank space.

   Fix: switch the form-panel from vertical centering to top-aligned flow
   at >=900px, and add two small new real-content elements around the
   existing card — a "Back to Home" link above it (mirrors the existing
   topbar brand link, which is hidden at this width) and a "browse
   without an account" link to the real, live /ayurveda/herbs page below
   it — so the panel is genuinely filled with purposeful content, not
   decoration. Scoped under .ay-auth-login and appended after V1-V5, so
   later source order plus equal specificity means these rules win
   without touching the other 5 shared auth pages.
   ========================================================================== */

/* ---- New wrapper + link elements: base (mobile-safe) styles ---- */
.ay-auth-login .ay-auth-form-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.ay-auth-login .ay-auth-form-topbar {
  display: none; /* the existing global topbar brand link already covers mobile */
}

.ay-auth-login .ay-auth-form-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ay-a-text-muted);
  text-decoration: none;
}

.ay-auth-login .ay-auth-form-back:hover,
.ay-auth-login .ay-auth-form-back:focus-visible {
  color: var(--ay-a-primary-dark);
}

.ay-auth-login .ay-auth-form-footer {
  margin-top: 18px;
  text-align: center;
}

.ay-auth-login .ay-auth-form-footer-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ay-a-primary-dark);
  text-decoration: none;
}

.ay-auth-login .ay-auth-form-footer-link:hover,
.ay-auth-login .ay-auth-form-footer-link:focus-visible {
  text-decoration: underline;
}

/* ---- The real fix: stop vertically centering the form-panel content ---- */
@media (min-width: 900px) {
  .ay-auth-login .ay-auth-form-panel {
    align-items: flex-start;
  }

  .ay-auth-login .ay-auth-form-inner {
    max-width: 480px;
  }

  .ay-auth-login .ay-auth-form-topbar {
    display: flex;
    margin-bottom: 20px;
  }

  .ay-auth-login .ay-auth-form-footer {
    margin-top: 28px;
  }
}

@media (min-width: 1280px) {
  .ay-auth-login .ay-auth-form-inner { max-width: 520px; }
}

@media (min-width: 1920px) {
  .ay-auth-login .ay-auth-form-inner { max-width: 560px; }
}


/* ==========================================================================
   Login page (/ayurveda/login) — fresh visual polish + icon password
   toggle (LOGIN_ENH_V7)

   User feedback: the design still reads as flat/basic, and the password
   show/hide control is plain "SHOW"/"HIDE" text instead of a proper eye
   icon. This pass is CSS+JS only (no blade change) — the toggle button's
   markup is rebuilt at runtime by the paired JS append, and everything
   else here is a visual refinement of elements that already exist.
   Scoped under .ay-auth-login and appended after V1-V6, so later source
   order plus equal-or-higher specificity means these rules win without
   touching the other 5 shared auth pages.
   ========================================================================== */

/* ---- Rounder, softer corners across the whole page (custom-property
   override cascades to every rule already using var(--ay-a-radius) /
   var(--ay-a-radius-sm) — card, inputs, buttons, alerts — no need to
   touch each one individually) ---- */
.ay-auth-login {
  --ay-a-radius: 18px;
  --ay-a-radius-sm: 11px;
}

/* ---- Real gradient primary button, not a flat fill ---- */
.ay-auth-login .ay-auth-btn-primary {
  background: linear-gradient(135deg, var(--ay-a-primary) 0%, var(--ay-a-primary-dark) 100%);
  letter-spacing: .02em;
}
.ay-auth-login .ay-auth-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--ay-a-primary-dark) 0%, var(--ay-a-primary) 100%);
}

/* ---- Google button: subtle lift on hover, matching the primary button ---- */
.ay-auth-login .ay-auth-btn-google {
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ay-auth-login .ay-auth-btn-google:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(38,48,43,.08);
}

/* ---- Trust badges: pill chips instead of plain inline text ---- */
.ay-auth-login .ay-auth-trust {
  gap: 8px;
}
.ay-auth-login .ay-auth-trust span.has-icon {
  background: rgba(47, 111, 79, 0.07);
  border: 1px solid rgba(47, 111, 79, 0.16);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  font-size: 11px;
}

/* ---- Inputs: slightly taller, softer focus ring, subtle hover ---- */
.ay-auth-login .ay-auth-input-wrap input {
  min-height: 48px;
  border-color: var(--ay-a-border);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ay-auth-login .ay-auth-input-wrap input:hover {
  border-color: #c9c0aa;
}

/* ---- Icon-based show/hide password toggle (markup swapped in by JS) ---- */
.ay-auth-login .ay-auth-toggle-pw {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.ay-auth-login .ay-auth-toggle-pw:hover,
.ay-auth-login .ay-auth-toggle-pw:focus-visible {
  background: rgba(47, 111, 79, 0.08);
}
.ay-auth-login .ay-auth-eye-icon {
  display: block;
  pointer-events: none;
}

/* ---- Submit button: a touch more presence ---- */
.ay-auth-login .ay-auth-btn-primary {
  font-size: 15.5px;
  font-weight: 700;
}