/* ================================================================
   Dar Al-Ilm Custom Auth  ·  Premium Stylesheet v2.0
   Full-viewport 50/50 split-screen — SaaS-level polish
   Fonts: Plus Jakarta Sans (EN) · Tajawal (AR)
   ================================================================ */

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Tajawal:wght@400;500;700;800&display=swap');

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  /* ── Purple scale */
  --p-950: #05010f;
  --p-900: #0f0520;
  --p-800: #1a0b2e;
  --p-700: #2d1b4e;
  --p-600: #3d2568;
  --p-500: #4a2b7a;
  --p-400: #6b44aa;
  --p-100: #ede8f8;
  --p-50:  #f7f4fd;

  /* ── Accent orange */
  --a-600: #d95820;
  --a-500: #ff6b35;
  --a-400: #ff8c61;
  --a-300: #ffb496;
  --a-100: #fff0eb;
  --a-50:  #fff8f5;

  /* ── Neutral scale */
  --n-900: #111827;
  --n-800: #1f2937;
  --n-700: #374151;
  --n-600: #4b5563;
  --n-500: #6b7280;
  --n-400: #9ca3af;
  --n-300: #d1d5db;
  --n-200: #e5e7eb;
  --n-150: #eef0f3;
  --n-100: #f3f4f6;
  --n-50:  #fafafa;
  --white: #ffffff;

  /* ── Semantic feedback */
  --c-error:      #ef4444;
  --c-error-bg:   rgba(239, 68,  68,  0.07);
  --c-error-ring: rgba(239, 68,  68,  0.18);
  --c-success:    #10b981;
  --c-success-bg: rgba( 16, 185, 129, 0.07);

  /* ── Radii */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  /* ── Typography */
  --font-en: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-ar: 'Tajawal', system-ui, sans-serif;

  /* ── Easing / timing */
  --t-fast:   140ms ease;
  --t-base:   260ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   420ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 380ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Shadow system */
  --sh-xs:          0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sh-sm:          0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  --sh-md:          0 4px 20px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05);
  --sh-focus:       0 0 0 4px rgba(45, 27, 78, 0.10);
  --sh-focus-err:   0 0 0 4px rgba(239, 68, 68, 0.10);
  --sh-btn:         0 4px 18px rgba(45, 27, 78, 0.44), 0 1px 4px rgba(45, 27, 78, 0.28);
  --sh-btn-hover:   0 10px 32px rgba(45, 27, 78, 0.58), 0 4px 12px rgba(45, 27, 78, 0.34);
  --sh-social-hover:0 6px 18px rgba(255, 107, 53, 0.24);
}

/* ================================================================
   1 · FULL-VIEWPORT PAGE RESET
   ================================================================ */

/* Ensure the standalone page body fills the screen with zero leakage */
body.daai-standalone-page {
  margin:   0 !important;
  padding:  0 !important;
  overflow: hidden !important;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.daai-standalone-page #wpadminbar,
html.wp-toolbar body.daai-standalone-page #wpadminbar {
  display: none !important;
}

body.admin-bar.daai-standalone-page {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ================================================================
   2 · PAGE SHELL — 50/50 SPLIT
   ================================================================ */

.daai-page {
  display:        flex;
  flex-direction: row;
  width:          100vw;
  height:         100vh;
  overflow:       hidden;
  font-family:    var(--font-en);
  color:          var(--n-900);
  background:     var(--white);
}

/* RTL: handled in rtl.css — flip to row-reverse */

/* ================================================================
   3 · FORM PANEL  (left side in LTR)
   ================================================================ */

.daai-form-panel {
  flex:       0 0 50%;
  width:      50%;
  height:     100%;
  overflow-y: auto;
  overflow-x: hidden;
  display:    flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--white);
  position:   relative;
  /* Entrance: subtle slide-up + fade */
  animation:  panel-enter 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
  /* Thin scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--n-300) transparent;
}

.daai-form-panel::-webkit-scrollbar { width: 4px; }
.daai-form-panel::-webkit-scrollbar-track { background: transparent; }
.daai-form-panel::-webkit-scrollbar-thumb {
  background: var(--n-300);
  border-radius: 99px;
}

/* Scroll wrapper: vertically centers content when form < viewport height */
.daai-form-scroll {
  width:       100%;
  min-height:  100%;
  display:     flex;
  align-items: center;
  justify-content: center;
  padding:     64px 80px;
}

/* The actual form card */
.daai-form-inner {
  width:     100%;
  max-width: 440px;
  position:  relative;
}

@keyframes panel-enter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   4 · VISUAL PANEL  (right side in LTR)
   ================================================================ */

.daai-visual-panel {
  flex:       0 0 50%;
  width:      50%;
  height:     100%;
  background: linear-gradient(
    148deg,
    var(--p-950)  0%,
    var(--p-900) 15%,
    var(--p-800) 35%,
    var(--p-700) 60%,
    var(--p-600) 82%,
    var(--p-500) 100%
  );
  display:    flex;
  align-items: center;
  justify-content: center;
  position:   relative;
  overflow:   hidden;
  animation:  visual-enter 0.7s ease both;
}

@keyframes visual-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Dot-grid texture overlay */
.daai-visual-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(255,255,255,0.065) 1px,
    transparent 1px
  );
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 0;
}

/* ── Soft radial accent bloom */
.daai-visual-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 75% 65% at 55% 38%,
    rgba(255, 107, 53, 0.10) 0%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Floating ambient orbs */
.daai-orb {
  position:      absolute;
  border-radius: 50%;
  pointer-events:none;
  z-index:       0;
}

.daai-orb-1 {
  width:  420px; height: 420px;
  top:   -130px; right: -110px;
  background: radial-gradient(circle at 35% 38%,
    rgba(255, 107, 53, 0.18) 0%,
    transparent 68%);
  filter: blur(22px);
  animation: orb-1 11s ease-in-out infinite;
}

.daai-orb-2 {
  width:  520px; height: 520px;
  bottom:-200px; left:  -140px;
  background: radial-gradient(circle at 55% 55%,
    rgba(74, 43, 122, 0.52) 0%,
    transparent 68%);
  filter: blur(32px);
  animation: orb-2 14s ease-in-out infinite;
}

.daai-orb-3 {
  width:  240px; height: 240px;
  top: 38%; left: 20%;
  background: radial-gradient(circle,
    rgba(255, 140, 97, 0.11) 0%,
    transparent 70%);
  filter: blur(18px);
  animation: orb-3 8s ease-in-out infinite 1.8s;
}

/* Sub-accent glow near bottom-right */
.daai-orb-4 {
  width:  180px; height: 180px;
  bottom: 12%; right: 8%;
  background: radial-gradient(circle,
    rgba(255, 107, 53, 0.09) 0%,
    transparent 70%);
  filter: blur(14px);
  animation: orb-3 6s ease-in-out infinite 3s;
}

@keyframes orb-1 {
  0%,100% { transform: translate(0, 0)    scale(1); }
  38%      { transform: translate(-28px, 42px) scale(1.06); }
  72%      { transform: translate(22px, -18px) scale(0.95); }
}
@keyframes orb-2 {
  0%,100% { transform: translate(0, 0)    scale(1); }
  35%      { transform: translate(38px, -52px) scale(1.04); }
  68%      { transform: translate(-22px, 34px) scale(0.97); }
}
@keyframes orb-3 {
  0%,100% { transform: translate(0, 0); }
  50%      { transform: translate(18px, -22px); }
}

/* ── Visual inner: centred column */
.daai-visual-inner {
  position:  relative;
  z-index:   1;
  display:   flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding:   44px 52px;
  max-width: 460px;
  width:     100%;
}

/* ── Brand logo */
.daai-brand-logo {
  width:  148px;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  margin-bottom: 36px;
  transition: var(--t-base);
}
.daai-brand-logo:hover { opacity: 1; transform: scale(1.025); }

/* ── Illustration */
.daai-illustration {
  width:  72%;
  max-width: 290px;
  margin-bottom: 30px;
  animation: illus-float 6.5s ease-in-out infinite;
  filter: drop-shadow(0 22px 38px rgba(0,0,0,0.28));
}
.daai-illustration svg {
  width:  100%;
  height: auto;
  display: block;
}

@keyframes illus-float {
  0%,100% { transform: translateY(0)   rotate(0deg); }
  50%      { transform: translateY(-13px) rotate(0.4deg); }
}

/* ── Visual headline + body copy */
.daai-visual-title {
  color:        var(--white);
  font-size:    26px;
  font-weight:  700;
  line-height:  1.28;
  letter-spacing: -0.025em;
  margin:       0 0 10px;
  text-shadow:  0 2px 14px rgba(0,0,0,0.22);
}

.daai-visual-sub {
  color:       rgba(255, 255, 255, 0.66);
  font-size:   14.5px;
  line-height: 1.62;
  margin:      0 0 28px;
  max-width:   310px;
}

/* ── Feature pills */
.daai-features {
  display:       flex;
  flex-direction: column;
  gap:           9px;
  width:         100%;
  max-width:     285px;
}

.daai-feature-item {
  display:     flex;
  align-items: center;
  gap:         11px;
  padding:     10px 15px;
  background:  rgba(255, 255, 255, 0.07);
  border:      1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  transition:  var(--t-base);
}

.daai-feature-item:hover {
  background:  rgba(255, 255, 255, 0.12);
  border-color:rgba(255, 107, 53, 0.32);
  transform:   translateX(5px);
}

.daai-feature-icon {
  width:  20px;
  height: 20px;
  flex-shrink: 0;
  background:  rgba(255, 107, 53, 0.88);
  border-radius: 50%;
  display:     flex;
  align-items: center;
  justify-content: center;
  color:       var(--white);
}
.daai-feature-icon svg { width: 11px; height: 11px; }

.daai-feature-text {
  color:       rgba(255, 255, 255, 0.84);
  font-size:   13px;
  font-weight: 500;
  line-height: 1.45;
  text-align:  start;
}

/* ================================================================
   5 · LANGUAGE SWITCHER
   ================================================================ */

.daai-lang-wrap {
  position: absolute;
  top:   22px;
  right: 22px;
  z-index: 200;
}

.daai-lang-btn {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  padding:     7px 14px 7px 10px;
  background:  var(--white);
  border:      1.5px solid var(--n-200);
  border-radius: var(--r-full);
  color:       var(--n-700);
  font-size:   12.5px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  transition:  var(--t-base);
  box-shadow:  var(--sh-xs);
  letter-spacing: 0.04em;
  cursor:      pointer;
}

.daai-lang-btn svg { flex-shrink: 0; }

.daai-lang-btn:hover {
  border-color: var(--p-700);
  color:         var(--p-700);
  box-shadow:    0 4px 16px rgba(45, 27, 78, 0.14);
  transform:     translateY(-1px);
}

.daai-lang-btn:focus-visible {
  outline:       2px solid var(--p-500);
  outline-offset:2px;
}

/* ================================================================
   6 · MOBILE LOGO BANNER  (visible only on mobile)
   ================================================================ */

.daai-mobile-logo-wrap {
  display:       none; /* shown via media query below */
  align-items:   center;
  justify-content: center;
  padding:       20px 24px;
  background:    linear-gradient(135deg, var(--p-800), var(--p-700));
  border-radius: var(--r-lg);
  margin-bottom: 28px;
}

.daai-mobile-logo {
  height: 38px;
  width:  auto;
  filter: brightness(0) invert(1);
}

/* ================================================================
   7 · FORM HEADER
   ================================================================ */

.daai-form-head {
  margin-bottom: 30px;
}

/* Orange gradient text for heading — makes it look premium */
.daai-form-title {
  font-size:   34px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.03em;
  margin:      0 0 9px;
  background:  linear-gradient(135deg, var(--a-500) 0%, var(--a-600) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Fallback for browsers that don't support gradient text */
  color: var(--a-500);
}

.daai-form-desc {
  font-size:   15px;
  color:       var(--n-500);
  margin:      0;
  line-height: 1.6;
}

/* Back navigation link */
.daai-back-link {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  color:       var(--n-400);
  font-size:   13px;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 22px;
  transition:  color var(--t-fast);
  padding:     3px 0;
}

.daai-back-link:hover { color: var(--p-700); }

.daai-back-link svg {
  transition: transform var(--t-fast);
  flex-shrink: 0;
}

.daai-back-link:hover svg { transform: translateX(-3px); }

/* ================================================================
   8 · ALERT / FEEDBACK STRIP
   ================================================================ */

.daai-alert {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  padding:     12px 15px;
  border-radius: var(--r-sm);
  margin-bottom: 20px;
  font-size:   14px;
  font-weight: 500;
  line-height: 1.5;
  animation:   alert-enter 0.28s ease both;
}

.daai-alert svg { flex-shrink: 0; margin-top: 1px; }

.daai-alert.error {
  background: var(--c-error-bg);
  color:      var(--c-error);
  border:     1px solid var(--c-error-ring);
}

.daai-alert.success {
  background: var(--c-success-bg);
  color:      var(--c-success);
  border:     1px solid rgba(16, 185, 129, 0.2);
}

@keyframes alert-enter {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   9 · FORM FIELDS
   ================================================================ */

.daai-form { width: 100%; }

/* Field wrapper: positions icon and toggle */
.daai-field {
  position:     relative;
  margin-bottom: 13px;
}

.daai-field-icon {
  position:  absolute;
  left:      16px;
  top:       50%;
  transform: translateY(-50%);
  color:     var(--n-400);
  display:   flex;
  align-items: center;
  pointer-events: none;
  transition: color var(--t-fast);
  z-index:   1;
  line-height: 0;
}

/* For textarea: pin to top instead of center */
.daai-field-icon--top {
  top:       16px;
  transform: none;
}

/* ── The input itself */
.daai-input {
  display:    block;
  width:      100%;
  height:     54px;
  padding:    0 18px 0 48px;
  background: var(--n-50);
  border:     1.5px solid var(--n-200);
  border-radius: var(--r-md);
  font-size:  15px;
  font-family:inherit;
  color:      var(--n-900);
  outline:    none;
  -webkit-appearance: none;
  transition:
    border-color var(--t-base),
    background   var(--t-base),
    box-shadow   var(--t-base);
}

.daai-input::placeholder {
  color:       var(--n-400);
  font-family: inherit;
}

.daai-input:hover:not(:disabled) {
  border-color: var(--n-300);
}

.daai-input:focus {
  border-color: var(--p-700);
  background:   var(--white);
  box-shadow:   var(--sh-focus);
}

/* Change icon color when field has focus */
.daai-field:focus-within .daai-field-icon {
  color: var(--p-600);
}

/* Error state */
.daai-input.input-error {
  border-color: var(--c-error);
  background:   var(--c-error-bg);
}

.daai-input.input-error:focus {
  box-shadow: var(--sh-focus-err);
}

/* Textarea variant */
.daai-textarea {
  height:     auto;
  min-height: 88px;
  padding-top:   14px;
  padding-bottom:14px;
  border-radius: var(--r-lg);
  resize:     vertical;
  line-height: 1.55;
}

.daai-field--textarea .daai-field-icon {
  top:       16px;
  transform: none;
}

/* ── Password toggle button */
.daai-pw-toggle {
  position:   absolute;
  right:      13px;
  top:        50%;
  transform:  translateY(-50%);
  background: none;
  border:     none;
  cursor:     pointer;
  color:      var(--n-400);
  display:    flex;
  align-items:center;
  padding:    5px;
  line-height: 0;
  border-radius: var(--r-xs);
  transition: color var(--t-fast);
}

.daai-pw-toggle:hover { color: var(--p-600); }

.daai-pw-toggle:focus-visible {
  outline:       2px solid var(--p-500);
  outline-offset:1px;
}

/* ── Remember / forgot row */
.daai-remember-row {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  margin:      4px 0 22px;
  flex-wrap:   wrap;
  gap:         8px;
}

.daai-remember-label {
  display:     flex;
  align-items: center;
  gap:         8px;
  cursor:      pointer;
  font-size:   13.5px;
  color:       var(--n-500);
  user-select: none;
}

.daai-remember-label input[type="checkbox"] {
  width:        16px;
  height:       16px;
  accent-color: var(--p-700);
  cursor:       pointer;
  border-radius:4px;
  flex-shrink:  0;
}

.daai-forgot-link {
  font-size:   13.5px;
  font-weight: 500;
  color:       var(--p-600);
  text-decoration: none;
  transition:  color var(--t-fast);
}

.daai-forgot-link:hover { color: var(--a-500); }

/* ================================================================
   10 · SUBMIT BUTTON — with animated arrow
   ================================================================ */

.daai-submit-btn {
  position:  relative;
  display:   flex;
  align-items: center;
  justify-content: center;
  gap:       8px;
  width:     100%;
  height:    54px;
  padding:   0 28px;
  background: linear-gradient(135deg, var(--p-700) 0%, var(--p-500) 100%);
  color:     var(--white);
  border:    none;
  border-radius: var(--r-md);
  font-size: 15.5px;
  font-weight:700;
  font-family:inherit;
  letter-spacing:0.15px;
  cursor:    pointer;
  overflow:  hidden;
  box-shadow:var(--sh-btn);
  transition:
    transform   var(--t-base),
    box-shadow  var(--t-base);
  margin-top: 6px;
}

/* Brighter gradient overlay — slides in on hover */
.daai-submit-btn::before {
  content:  '';
  position: absolute;
  inset:    0;
  background: linear-gradient(135deg, var(--p-600) 0%, var(--p-400) 100%);
  opacity:  0;
  transition: opacity var(--t-base);
}

/* Subtle gloss stripe */
.daai-submit-btn::after {
  content:  '';
  position: absolute;
  top:      0; left: 0; right: 0;
  height:   45%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.07), transparent);
  pointer-events: none;
}

.daai-submit-btn:hover {
  transform:  translateY(-2px);
  box-shadow: var(--sh-btn-hover);
}

.daai-submit-btn:hover::before { opacity: 1; }

.daai-submit-btn:active {
  transform:  translateY(0) scale(0.99);
  box-shadow: var(--sh-btn);
}

.daai-submit-btn:disabled {
  opacity:   0.62;
  cursor:    not-allowed;
  transform: none !important;
  box-shadow:none !important;
}

.daai-submit-btn:focus-visible {
  outline:       3px solid var(--a-400);
  outline-offset:3px;
}

/* All button children sit above ::before/::after */
.daai-btn-label,
.daai-btn-arrow,
.daai-btn-loader { position: relative; z-index: 1; }

.daai-btn-arrow {
  display:     flex;
  align-items: center;
  line-height: 0;
  transition:  transform var(--t-base);
}

.daai-submit-btn:hover .daai-btn-arrow {
  transform: translateX(5px);
}

.daai-btn-loader .spinner {
  animation: spin-btn 0.8s linear infinite;
}

@keyframes spin-btn {
  to { transform: rotate(360deg); }
}

/* ================================================================
   11 · PASSWORD STRENGTH METER
   ================================================================ */

.daai-pw-strength {
  display:   flex;
  gap:       4px;
  margin-top:8px;
  padding:   0 2px;
}

.daai-str-bar {
  flex:         1;
  height:       3px;
  border-radius:99px;
  background:   var(--n-200);
  transition:   background 0.38s ease;
}

.daai-str-bar.s-weak   { background: var(--c-error); }
.daai-str-bar.s-fair   { background: #f59e0b; }
.daai-str-bar.s-good   { background: #22c55e; }
.daai-str-bar.s-strong { background: var(--c-success); }

/* ================================================================
   12 · OR DIVIDER + SOCIAL ICONS
   ================================================================ */

.daai-or-divider {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin:      22px 0 18px;
}

.daai-or-divider::before,
.daai-or-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--n-200);
}

.daai-or-text {
  font-size:   11.5px;
  font-weight: 600;
  color:       var(--n-400);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.daai-socials-grid {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         10px;
  flex-wrap:   wrap;
  margin-bottom: 22px;
}

.daai-social-btn {
  width:        46px;
  height:       46px;
  border-radius:50%;
  border:       1.5px solid var(--n-200);
  background:   var(--white);
  display:      flex;
  align-items:  center;
  justify-content: center;
  text-decoration: none;
  cursor:       pointer;
  transition:   var(--t-base);
  box-shadow:   var(--sh-xs);
  line-height:  0;
}

.daai-social-btn:hover {
  border-color: var(--a-400);
  background:   var(--a-50);
  transform:    translateY(-3px);
  box-shadow:   var(--sh-social-hover);
}

.daai-social-btn:focus-visible {
  outline:       2px solid var(--a-500);
  outline-offset:2px;
}

/* ================================================================
   13 · SWITCH / FOOTER LINK
   ================================================================ */

.daai-switch-link {
  text-align:  center;
  font-size:   14px;
  color:       var(--n-500);
  margin:      0;
  line-height: 1.6;
}

.daai-switch-link a {
  color:       var(--a-500);
  font-weight: 600;
  text-decoration: none;
  margin-inline-start: 4px;
  transition:  color var(--t-fast);
}

.daai-switch-link a:hover {
  color:           var(--a-600);
  text-decoration: underline;
}

/* ================================================================
   14 · RESPONSIVE
   ================================================================ */

@media (max-width: 1200px) {
  .daai-form-scroll    { padding: 60px 64px; }
  .daai-visual-inner   { padding: 36px 42px; }
}

@media (max-width: 1000px) {
  .daai-form-scroll    { padding: 56px 48px; }
  .daai-visual-inner   { padding: 28px 34px; }
  .daai-form-title     { font-size: 28px; }
  .daai-visual-title   { font-size: 22px; }
  .daai-illustration   { width: 64%; }
}

/* Breakpoint: stack vertically; hide visual panel */
@media (max-width: 820px) {
  body.daai-standalone-page { overflow: auto !important; }

  .daai-page {
    flex-direction: column;
    height:    auto;
    min-height:100vh;
    overflow:  visible;
  }

  .daai-form-panel {
    flex:       0 0 auto;
    width:      100%;
    height:     auto;
    min-height: 100vh;
    overflow:   visible;
  }

  .daai-form-scroll {
    min-height: 100vh;
    padding:    50px 32px 60px;
  }

  /* Hide visual panel on mobile */
  .daai-visual-panel { display: none; }

  /* Show a compact branded header instead */
  .daai-mobile-logo-wrap { display: flex; }

  .daai-lang-wrap { top: 16px; right: 16px; }
  .daai-form-title { font-size: 26px; }
  .daai-input      { height: 52px; }
  .daai-submit-btn { height: 52px; }
}

@media (max-width: 480px) {
  .daai-form-scroll  { padding: 36px 20px 52px; }
  .daai-form-title   { font-size: 24px; }
  .daai-social-btn   { width: 42px; height: 42px; }
  .daai-socials-grid { gap: 8px; }
}

/* ================================================================
   15 · ACCESSIBILITY
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:   0.01ms !important;
    transition-duration:  0.01ms !important;
  }
}

/* High-contrast focus ring for keyboard users */
.daai-input:focus-visible {
  outline:       none;
  box-shadow:    var(--sh-focus);
}