/* =====================================================================
   Holoo (هلو) — Login / Auth page styles
   Scoped entirely under `.holoo-auth` so nothing here can leak onto
   other pages. This file is only linked from login.html.
   Brand palette:
     primary        #DC6465   primary hover  #C85557
     soft brand bg  #FBEDEE   page bg        #F7F8FA
     surface        #FFFFFF   text           #22252B
     text soft      #717680   border         #E5E7EB
   ===================================================================== */

.holoo-auth {
  --holoo-primary: #DC6465;
  --holoo-primary-hover: #C85557;
  --holoo-soft: #FBEDEE;
  --holoo-page-bg: #F7F8FA;
  --holoo-surface: #FFFFFF;
  --holoo-text: #22252B;
  --holoo-text-soft: #717680;
  --holoo-border: #E5E7EB;
  --holoo-primary-ring: rgba(220, 100, 101, 0.16);
  --holoo-danger-bg: #FDECEC;
  --holoo-danger-border: #F5C2C3;
  --holoo-danger-text: #B23438;
  --holoo-radius: 12px;
  --holoo-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --holoo-shadow-lg: 0 24px 60px -20px rgba(220, 100, 101, 0.28);

  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--holoo-page-bg);
  color: var(--holoo-text);
  font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  direction: rtl;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* --------------------------------------------------------------------
   Layout: two columns. In RTL the first flex child sits on the RIGHT,
   so the form section (first in the DOM) is on the right and the
   promotional slider (second) is on the left.
   -------------------------------------------------------------------- */
.holoo-auth__layout {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------------------- Right side: form ---------------------------- */
.holoo-auth__form-side {
  flex: 0 0 43%;
  max-width: 43%;
  background: var(--holoo-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 48px;
}

.holoo-auth__form-inner {
  width: 100%;
  max-width: 430px;
}

.holoo-auth__brand {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

.holoo-auth__logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.holoo-auth__intro {
  text-align: center;
  margin-bottom: 26px;
}

.holoo-auth__title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
  color: var(--holoo-text);
  line-height: 1.4;
}

.holoo-auth__subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--holoo-text-soft);
}

/* ---------------------- Segmented tab control ----------------------- */
.holoo-seg {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: var(--holoo-page-bg);
  border: 1px solid var(--holoo-border);
  border-radius: 14px;
  margin-bottom: 24px;
}

.holoo-seg-btn {
  flex: 1 1 0;
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 11px 12px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--holoo-text-soft);
  background: transparent;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.holoo-seg-btn:hover {
  color: var(--holoo-text);
}

.holoo-seg-btn.is-active {
  background: var(--holoo-primary);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(220, 100, 101, 0.6);
}

.holoo-seg-btn:focus-visible {
  outline: 2px solid var(--holoo-primary);
  outline-offset: 2px;
}

/* ---------------------------- Panels -------------------------------- */
.holoo-panel {
  display: block;
  animation: holoo-fade .25s ease;
}

.holoo-panel[hidden] {
  display: none;
}

@keyframes holoo-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.holoo-panel__heading {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 700;
  color: var(--holoo-text);
}

/* ----------------------------- Form --------------------------------- */
.holoo-form {
  display: block;
}

.holoo-field {
  margin-bottom: 18px;
}

/* #register-code-wrapper is toggled to display:flex by the auth JS.
   Force a column direction so the label stays above the input row. */
#register-code-wrapper {
  flex-direction: column;
  align-items: stretch;
}

.holoo-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--holoo-text);
}

.holoo-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 16px;
  background: var(--holoo-surface);
  border: 1.5px solid var(--holoo-border);
  border-radius: var(--holoo-radius);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.holoo-input > i {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--holoo-text-soft);
  transition: color .18s ease;
}

.holoo-input input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--holoo-text);
  text-align: right;
}

.holoo-input input::placeholder {
  color: #A5A9B2;
  font-size: 14px;
}

.holoo-input:focus-within {
  border-color: var(--holoo-primary);
  background: #fff;
  box-shadow: 0 0 0 4px var(--holoo-primary-ring);
}

.holoo-input:focus-within > i {
  color: var(--holoo-primary);
}

/* Remove native number spinners / autofill tint quirks */
.holoo-input input:-webkit-autofill {
  -webkit-text-fill-color: var(--holoo-text);
  transition: background-color 5000s ease-in-out 0s;
}

/* ---------------------------- Buttons ------------------------------- */
.holoo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 54px;
  border: none;
  border-radius: var(--holoo-radius);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .18s ease, box-shadow .18s ease, transform .08s ease, opacity .18s ease;
}

.holoo-btn--primary {
  background: var(--holoo-primary);
  color: #fff;
  box-shadow: 0 12px 24px -12px rgba(220, 100, 101, 0.75);
}

.holoo-btn--primary:hover {
  background: var(--holoo-primary-hover);
}

.holoo-btn--primary:active {
  transform: translateY(1px);
}

.holoo-btn:focus-visible {
  outline: 2px solid var(--holoo-primary);
  outline-offset: 2px;
}

.holoo-btn:disabled {
  opacity: 0.72;
  cursor: progress;
  box-shadow: none;
}

/* ------------------------- Forgot link ------------------------------ */
.holoo-link {
  display: inline-block;
  margin-top: 16px;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--holoo-primary);
  text-decoration: none;
  transition: color .18s ease;
}

.holoo-link:hover {
  color: var(--holoo-primary-hover);
  text-decoration: underline;
}

/* ------------------------- Helper / errors -------------------------- */
.holoo-help {
  margin: 4px 2px 14px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--holoo-text-soft);
}

/* Error box — hidden until the auth JS sets display:block with text.
   The warning glyph is a CSS ::before so it survives textContent
   updates and error state is never signalled by colour alone. */
.error-display {
  display: none;
  margin: 4px 0 16px;
  padding: 12px 14px;
  gap: 9px;
  align-items: flex-start;
  background: var(--holoo-danger-bg);
  border: 1px solid var(--holoo-danger-border);
  border-radius: 10px;
  color: var(--holoo-danger-text);
  font-size: 13.5px;
  line-height: 1.8;
  text-align: right;
}

.error-display::before {
  content: "\26A0";
  font-size: 15px;
  line-height: 1.6;
  flex: 0 0 auto;
}

/* When shown, the auth JS sets inline display:block — make it flex-align
   the glyph and text nicely. */
.error-display[style*="block"] {
  display: flex !important;
}

/* --------------------------------------------------------------------
   Left side: promotional slider
   -------------------------------------------------------------------- */
.holoo-auth__slider-side {
  position: relative;
  flex: 1 1 57%;
  max-width: 57%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background:
    radial-gradient(120% 90% at 85% 10%, #FCE3E4 0%, rgba(252, 227, 228, 0) 55%),
    radial-gradient(130% 120% at 10% 100%, #FBEDEE 0%, rgba(251, 237, 238, 0) 60%),
    linear-gradient(155deg, #FFFFFF 0%, #FBEDEE 100%);
}

/* Soft abstract background shapes */
.holoo-auth__slider-side::before,
.holoo-auth__slider-side::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}

.holoo-auth__slider-side::before {
  width: 320px;
  height: 320px;
  top: -90px;
  left: -70px;
  background: radial-gradient(circle at 30% 30%, rgba(220, 100, 101, 0.18), rgba(220, 100, 101, 0) 70%);
}

.holoo-auth__slider-side::after {
  width: 260px;
  height: 260px;
  bottom: -70px;
  right: 40px;
  background: radial-gradient(circle at 50% 50%, rgba(220, 100, 101, 0.12), rgba(220, 100, 101, 0) 70%);
}

.holoo-slider {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Stage: crossfade between slides (each absolutely stacked) */
.holoo-slider__stage {
  position: relative;
  width: 100%;
  min-height: 420px;
  margin-bottom: 26px;
}

.holoo-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.985);
  transition: opacity .55s ease, transform .55s ease, visibility 0s linear .55s;
}

.holoo-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity .55s ease, transform .55s ease;
}

/* Slide media (image OR CSS placeholder) */
.holoo-slide__media {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 16 / 11;
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 30px;
  background: linear-gradient(160deg, #FFFFFF 0%, #FBEDEE 100%);
  box-shadow: var(--holoo-shadow-lg);
  border: 1px solid rgba(220, 100, 101, 0.12);
}

.holoo-slide__img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* CSS illustration placeholder — visible until (and if) a real image
   loads on top of it. Easy to keep, easy to replace. */
.holoo-slide__placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 26px;
  background:
    radial-gradient(80% 60% at 50% 22%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, #FCE7E8 0%, #FBEDEE 55%, #FFFFFF 100%);
}

.holoo-slide__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 24px;
  background: #fff;
  color: var(--holoo-primary);
  font-size: 34px;
  box-shadow: 0 16px 30px -14px rgba(220, 100, 101, 0.55);
}

.holoo-slide__bar {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: rgba(220, 100, 101, 0.22);
}

.holoo-slide__bar--lg { width: 62%; }
.holoo-slide__bar--sm { width: 40%; background: rgba(220, 100, 101, 0.14); }

.holoo-slide__title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  color: var(--holoo-text);
  line-height: 1.5;
}

.holoo-slide__desc {
  margin: 0 auto;
  max-width: 380px;
  font-size: 15px;
  line-height: 2;
  color: var(--holoo-text-soft);
}

/* Slider controls: prev / dots / next */
.holoo-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.holoo-slider__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--holoo-border);
  background: #fff;
  color: var(--holoo-text);
  cursor: pointer;
  font-size: 15px;
  box-shadow: var(--holoo-shadow-sm);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .08s ease;
}

.holoo-slider__nav:hover {
  background: var(--holoo-primary);
  border-color: var(--holoo-primary);
  color: #fff;
}

.holoo-slider__nav:active { transform: scale(0.94); }

.holoo-slider__nav:focus-visible {
  outline: 2px solid var(--holoo-primary);
  outline-offset: 2px;
}

.holoo-slider__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.holoo-slider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(220, 100, 101, 0.28);
  cursor: pointer;
  transition: width .22s ease, background-color .22s ease;
}

.holoo-slider__dot.is-active {
  width: 26px;
  background: var(--holoo-primary);
}

.holoo-slider__dot:focus-visible {
  outline: 2px solid var(--holoo-primary);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */

/* Tablet: keep two columns, tighten everything */
@media (max-width: 1024px) {
  .holoo-auth__form-side {
    flex-basis: 48%;
    max-width: 48%;
    padding: 32px 28px;
  }
  .holoo-auth__slider-side {
    flex-basis: 52%;
    max-width: 52%;
    padding: 32px;
  }
  .holoo-slider__stage { min-height: 380px; }
  .holoo-slide__media { max-width: 320px; }
  .holoo-slide__title { font-size: 20px; }
  .holoo-slide__desc { font-size: 14px; }
  .holoo-auth__title { font-size: 22px; }
}

/* Mobile: single column, form first then a compact slider */
@media (max-width: 768px) {
  .holoo-auth__layout {
    flex-direction: column;
    min-height: auto;
  }
  .holoo-auth__form-side,
  .holoo-auth__slider-side {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
  }
  .holoo-auth__form-side {
    order: 1;
    padding: 40px 20px 28px;
    min-height: 100dvh;
    align-items: flex-start;
  }
  .holoo-auth__form-inner {
    margin: auto;
    max-width: 430px;
  }
  .holoo-auth__slider-side {
    order: 2;
    padding: 34px 20px 44px;
  }
  .holoo-slider { max-width: 420px; }
  .holoo-slider__stage { min-height: 360px; }
  .holoo-slide__media {
    max-width: 260px;
    margin-bottom: 24px;
  }
  .holoo-slide__title { font-size: 19px; }
}

@media (max-width: 420px) {
  .holoo-auth__form-side { padding: 32px 16px 24px; }
  .holoo-auth__slider-side { padding: 28px 16px 40px; }
  .holoo-auth__logo { width: 56px; height: 56px; }
  .holoo-auth__title { font-size: 20px; }
  .holoo-slide__stage { min-height: 340px; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .holoo-slide,
  .holoo-slide.is-active,
  .holoo-panel {
    transition: opacity .01s linear;
    animation: none;
  }
}