/* ═══════════════════════════════════════════════════════════════
   AI STUDIO â€" Light Design Override
   فلسفة المنصة: كريمي + حبر + برتقالي + Rakkas / Tajawal
   لا يمس أي ID أو منطق JS
   ═══════════════════════════════════════════════════════════════ */

/* â"€â"€ القسم الرئيسي â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */
.ai-studio-section {
  background: #f7f1e3 !important;
  color: #14143a !important;
}

.ai-studio-bg { display: none !important; }

/* â"€â"€ عنوان القسم â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */
.ai-studio-section,
.ai-studio-section * {
  font-family: 'Tajawal', sans-serif !important;
}

.ai-studio-section .section-header h2 {
  font-family: 'Tajawal', sans-serif !important;
  font-size: clamp(36px, 5vw, 60px) !important;
  font-weight: 700 !important;
  color: #14143a !important;
}

.ai-studio-section .section-header p {
  font-family: 'Tajawal', sans-serif !important;
  color: rgba(20,20,58,0.6) !important;
  font-size: 16px !important;
}

.ai-badge {
  background: rgba(232,116,77,0.1) !important;
  border-color: rgba(232,116,77,0.25) !important;
  color: #e8744d !important;
  font-family: 'Tajawal', sans-serif !important;
}

/* â"€â"€ بطاقة الاستوديو â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */
.ai-studio-card {
  background: #f7f1e3 !important;
  border: 1px solid rgba(20,20,58,0.1) !important;
  box-shadow: 0 4px 40px rgba(20,20,58,0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* â"€â"€ شريط المحرك â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */
.ai-engine-bar {
  background: rgba(20,20,58,0.03) !important;
  border-bottom-color: rgba(20,20,58,0.08) !important;
}

.bar-label {
  font-family: 'Tajawal', sans-serif !important;
  color: rgba(20,20,58,0.6) !important;
}

.ai-engine-panel {
  background: #fdfaf4 !important;
  border-bottom-color: rgba(20,20,58,0.08) !important;
}

.engine-header { border-bottom-color: rgba(20,20,58,0.08) !important; }

.engine-title h4 {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
  color: #14143a !important;
}

.engine-sub, .engine-hint {
  font-family: 'Tajawal', sans-serif !important;
  color: rgba(20,20,58,0.5) !important;
}

.engine-close { color: rgba(20,20,58,0.45) !important; }

.ai-studio-section label[for="aiApiKey"] {
  font-family: 'Tajawal', sans-serif !important;
  color: rgba(20,20,58,0.6) !important;
}

#aiApiKey {
  background: rgba(20,20,58,0.04) !important;
  border-color: rgba(20,20,58,0.12) !important;
  color: #14143a !important;
}

/* â"€â"€ شريط الخطوات â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */
.ai-wizard-progress {
  background: #faf6ee !important;
  border-bottom: 1px solid rgba(200,169,106,0.15) !important;
  padding: 20px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  position: relative !important;
}

.ai-step-pill {
  background: transparent !important;
  border: none !important;
  color: rgba(20,20,58,0.4) !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
  cursor: pointer !important;
  transition: color 0.3s ease !important;
  border-radius: 0 !important;
}

.ai-step-pill:hover {
  color: rgba(20,20,58,0.7) !important;
  background: transparent !important;
}

.ai-step-pill.active {
  color: #14143a !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

.ai-step-pill.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  right: 0 !important;
  left: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #C8A96A, #e8744d) !important;
  border-radius: 3px 3px 0 0 !important;
}

.ai-step-pill.completed {
  color: #C8A96A !important;
  background: transparent !important;
  border: none !important;
}

.pill-num {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: rgba(20,20,58,0.08) !important;
  color: rgba(20,20,58,0.45) !important;
  transition: all 0.3s ease !important;
}

.ai-step-pill.active .pill-num {
  background: #14143a !important;
  color: #f7f1e3 !important;
  box-shadow: 0 2px 8px rgba(20,20,58,0.2) !important;
}

.ai-step-pill.completed .pill-num {
  background: linear-gradient(135deg, #C8A96A, #8A6A3C) !important;
  color: #fff !important;
}

/* â"€â"€ جسم الخطوة â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */
.ai-step-intro {
  margin-bottom: 4px !important;
  padding-bottom: 0 !important;
}

.ai-step-intro h3 {
  font-size: clamp(20px, 2.5vw, 26px) !important;
  font-weight: 700 !important;
  color: #14143a !important;
  margin-bottom: 2px !important;
}

.ai-step-intro p {
  color: rgba(20,20,58,0.6) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  margin-bottom: 0 !important;
}

.ai-step-nav {
  border-top-color: rgba(20,20,58,0.08) !important;
}

.step-counter {
  font-family: 'Tajawal', sans-serif !important;
  color: rgba(20,20,58,0.4) !important;
}

.ai-studio-section h4,
.ai-studio-section .sub-h {
  font-weight: 700 !important;
  color: #14143a !important;
}

/* â"€â"€ أزرار â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */
.ai-studio-section .btn-outline {
  border-color: rgba(20,20,58,0.22) !important;
  color: #14143a !important;
  background: transparent !important;
  font-family: 'Tajawal', sans-serif !important;
}

.ai-studio-section .btn-outline:hover {
  background: rgba(20,20,58,0.06) !important;
  border-color: #14143a !important;
}

.ai-studio-section .btn-primary {
  background: linear-gradient(135deg, #14143a, #1e1e4a) !important;
  color: #f7f1e3 !important;
  border: none !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 600 !important;
  padding: 12px 32px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  box-shadow: 0 4px 16px rgba(20,20,58,0.15) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ai-studio-section .btn-primary:hover {
  background: linear-gradient(135deg, #C8A96A, #8A6A3C) !important;
  box-shadow: 0 6px 24px rgba(200,169,106,0.3) !important;
  transform: translateY(-1px) !important;
}

.ai-studio-section .btn-primary:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── ANATOMY LAYOUT ────────────────────────────── */
.disability-anatomy-layout {
  display: grid !important;
  grid-template-columns: 200px 1fr 200px !important;
  gap: 0 !important;
  align-items: stretch !important;
  padding: 0 !important;
  direction: rtl !important;
  position: relative !important;
  overflow: hidden !important;
  background: #f0ebe0 !important;
  border-radius: 16px !important;
  perspective: 1200px !important;
}

/* ── Body image life-pulse animation ── */
.anatomy-bg-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  z-index: 0 !important;
  pointer-events: none !important;
  animation: bodyLifePulse 3.5s ease-in-out infinite !important;
  will-change: filter !important;
}

@keyframes bodyLifePulse {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 0px rgba(232,116,77,0));
    transform: scale(1);
  }
  30% {
    filter: brightness(1.15) drop-shadow(0 0 25px rgba(232,116,77,0.5));
    transform: scale(1.008);
  }
  50% {
    filter: brightness(1.2) drop-shadow(0 0 40px rgba(200,169,106,0.6)) drop-shadow(0 0 15px rgba(232,116,77,0.3));
    transform: scale(1.012);
  }
  70% {
    filter: brightness(1.1) drop-shadow(0 0 20px rgba(200,169,106,0.35));
    transform: scale(1.005);
  }
}

/* Radial pulse overlay on the body center (heart area) */
.disability-anatomy-layout::before {
  content: '' !important;
  position: absolute !important;
  top: 15% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 250px !important;
  height: 250px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(232,116,77,0.2) 0%, rgba(200,169,106,0.1) 40%, transparent 70%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  animation: heartRadialPulse 3.5s ease-in-out infinite !important;
  will-change: transform, opacity !important;
}

@keyframes heartRadialPulse {
  0%, 100% {
    transform: translateX(-50%) scale(0.6);
    opacity: 0.2;
  }
  50% {
    transform: translateX(-50%) scale(2);
    opacity: 0.9;
  }
}

/* When a card is selected, pulse shifts to gold */
.disability-anatomy-layout.has-selection .anatomy-bg-img {
  animation-name: bodyLifePulseGold !important;
}

.disability-anatomy-layout.has-selection::before {
  background: radial-gradient(circle, rgba(200,169,106,0.12) 0%, transparent 70%) !important;
}

@keyframes bodyLifePulseGold {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 0px rgba(200,169,106,0));
    transform: scale(1);
  }
  30% {
    filter: brightness(1.15) drop-shadow(0 0 30px rgba(200,169,106,0.6));
    transform: scale(1.01);
  }
  50% {
    filter: brightness(1.2) drop-shadow(0 0 45px rgba(200,169,106,0.7)) drop-shadow(0 0 15px rgba(232,116,77,0.3));
    transform: scale(1.015);
  }
  70% {
    filter: brightness(1.08) drop-shadow(0 0 18px rgba(200,169,106,0.3));
    transform: scale(1.005);
  }
}

.anatomy-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  justify-content: space-evenly !important;
  padding: 70px 2px 15px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ── Glassmorphism Card Design ── */
.anatomy-col .anatomy-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 10px !important;
  text-align: right !important;
  cursor: pointer !important;
  position: relative !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(12px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  border: 1.5px solid rgba(200,169,106,0.15) !important;
  border-image: none !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.04),
    0 1px 3px rgba(200,169,106,0.06),
    inset 0 1px 0 rgba(255,255,255,0.6) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease !important;
  overflow: hidden !important;
  min-height: 0 !important;
  height: auto !important;
  will-change: transform, box-shadow !important;
  transform-style: preserve-3d !important;
  /* Cards are always visible — entrance animation removed (modal is hidden on page load) */
  opacity: 1 !important;
}

/* Staggered delays for right column cards */
.anatomy-col-right .anatomy-card:nth-child(1) { animation-delay: 0.1s !important; }
.anatomy-col-right .anatomy-card:nth-child(2) { animation-delay: 0.2s !important; }
.anatomy-col-right .anatomy-card:nth-child(3) { animation-delay: 0.3s !important; }
.anatomy-col-right .anatomy-card:nth-child(4) { animation-delay: 0.4s !important; }
.anatomy-col-right .anatomy-card:nth-child(5) { animation-delay: 0.5s !important; }
.anatomy-col-right .anatomy-card:nth-child(6) { animation-delay: 0.6s !important; }

/* Left column cards */
.anatomy-col-left .anatomy-card {
}
.anatomy-col-left .anatomy-card:nth-child(1) { animation-delay: 0.15s !important; }
.anatomy-col-left .anatomy-card:nth-child(2) { animation-delay: 0.25s !important; }
.anatomy-col-left .anatomy-card:nth-child(3) { animation-delay: 0.35s !important; }
.anatomy-col-left .anatomy-card:nth-child(4) { animation-delay: 0.45s !important; }
.anatomy-col-left .anatomy-card:nth-child(5) { animation-delay: 0.55s !important; }
.anatomy-col-left .anatomy-card:nth-child(6) { animation-delay: 0.65s !important; }

@keyframes cardEnterRight {
  0% {
    opacity: 0;
    transform: translateX(30px) translateY(8px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

@keyframes cardEnterLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px) translateY(8px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

/* ── 3D Hover Effect ── */
.anatomy-col .anatomy-card:hover {
  background: rgba(255,255,255,0.75) !important;
  border-color: rgba(200,169,106,0.4) !important;
  box-shadow:
    0 8px 24px rgba(200,169,106,0.15),
    0 4px 12px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.8) !important;
  transform: translateY(-4px) scale(1.02) rotateX(2deg) !important;
}

/* ── Selected card (aria-pressed) ── */
.anatomy-col .anatomy-card[aria-pressed="true"] {
  background: rgba(253,250,244,0.8) !important;
  border-color: #C8A96A !important;
  box-shadow:
    0 0 0 3px rgba(200,169,106,0.18),
    0 8px 28px rgba(200,169,106,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
  animation: cardSelectBounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
}

@keyframes cardSelectBounce {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.06);
  }
  70% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1.02);
  }
}

/* Icon pulse on selection */
.anatomy-col .anatomy-card[aria-pressed="true"] .d-icon-wrap {
  animation: iconGoldPulse 0.6s ease-out !important;
}

@keyframes iconGoldPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(200,169,106,0.5);
  }
  50% {
    box-shadow: 0 0 16px 6px rgba(200,169,106,0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(200,169,106,0);
  }
}

.anatomy-col-left .anatomy-card {
  flex-direction: row-reverse !important;
  text-align: left !important;
}

/* Connection lines hidden - provided by background image */
.anatomy-col-right .anatomy-card::before,
.anatomy-col-right .anatomy-card::after,
.anatomy-col-left .anatomy-card::before,
.anatomy-col-left .anatomy-card::after {
  display: none !important;
}

/* ── Icon with gold gradient circle ── */
.anatomy-col .anatomy-card .d-icon-wrap {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(200,169,106,0.15), rgba(138,106,60,0.1)) !important;
  border: 1px solid rgba(200,169,106,0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.35s ease !important;
}

.anatomy-col .anatomy-card:hover .d-icon-wrap {
  background: linear-gradient(135deg, rgba(200,169,106,0.25), rgba(138,106,60,0.18)) !important;
  border-color: rgba(200,169,106,0.35) !important;
  transform: scale(1.08) !important;
}

.anatomy-col .anatomy-card[aria-pressed="true"] .d-icon-wrap {
  background: linear-gradient(135deg, #C8A96A, #8A6A3C) !important;
  border-color: transparent !important;
}

.anatomy-col .anatomy-card[aria-pressed="true"] .d-icon-wrap svg {
  color: #fff !important;
}

.anatomy-col .anatomy-card .d-icon-wrap svg {
  width: 20px !important;
  height: 20px !important;
  color: #8A6A3C !important;
  transition: color 0.3s ease !important;
}

.anatomy-col .anatomy-card .d-text h4 {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: #14143a !important;
  margin: 0 0 1px !important;
  line-height: 1.2 !important;
  transition: color 0.3s ease !important;
}

.anatomy-col .anatomy-card .d-text .d-desc {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 9px !important;
  color: rgba(20,20,58,0.55) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.anatomy-center {
  position: relative !important;
  z-index: 1 !important;
}

/* ── Title "أنواع الإعاقات" styling ── */
.ai-step-intro h3 {
  text-shadow: 0 0 20px rgba(200,169,106,0.15) !important;
  letter-spacing: 0.02em !important;
}

/* ── Accessibility: Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .anatomy-bg-img {
    animation: none !important;
  }
  .disability-anatomy-layout::before {
    animation: none !important;
  }
  .anatomy-col .anatomy-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .anatomy-col .anatomy-card:hover {
    transform: none !important;
  }
  .anatomy-col .anatomy-card[aria-pressed="true"] {
    animation: none !important;
    transform: none !important;
  }
  .anatomy-col .anatomy-card[aria-pressed="true"] .d-icon-wrap {
    animation: none !important;
  }
}

.anatomy-legend {
  display: flex !important;
  justify-content: center !important;
  gap: 24px !important;
  margin-top: 20px !important;
  padding: 10px 24px !important;
  background: rgba(255,255,255,0.7) !important;
  border-radius: 40px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #14143a !important;
}

.legend-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.legend-dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

.legend-physical .legend-dot { background: #e8744d !important; }
.legend-cognitive .legend-dot { background: #4a90d9 !important; }

.anatomy-hint {
  text-align: center !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 13px !important;
  color: rgba(20,20,58,0.4) !important;
  margin: 12px 0 0 !important;
}

/* ── has-selection: collapse anatomy into centered card ── */
.disability-anatomy-layout.has-selection {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
}

.disability-anatomy-layout.has-selection .anatomy-center,
.disability-anatomy-layout.has-selection .anatomy-bg-img,
.disability-anatomy-layout.has-selection ~ .anatomy-legend,
.disability-anatomy-layout.has-selection ~ .anatomy-hint {
  display: none !important;
}

.disability-anatomy-layout.has-selection .anatomy-col {
  justify-content: center !important;
  align-items: center !important;
}

.disability-anatomy-layout.has-selection .anatomy-card:not([aria-pressed="true"]) {
  display: none !important;
}

.disability-anatomy-layout.has-selection .anatomy-col .anatomy-card[aria-pressed="true"] {
  display: flex !important;
  max-width: 280px !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  flex-direction: column !important;
  text-align: center !important;
  padding: 16px 24px !important;
  transform: none !important;
}

.disability-anatomy-layout.has-selection .anatomy-col .anatomy-card[aria-pressed="true"]::before,
.disability-anatomy-layout.has-selection .anatomy-col .anatomy-card[aria-pressed="true"]::after {
  display: none !important;
}

.disability-anatomy-layout.has-selection .anatomy-col .anatomy-card[aria-pressed="true"],
.disability-anatomy-layout.has-selection .anatomy-col .anatomy-card[aria-pressed="true"] *,
.disability-anatomy-layout.has-selection .anatomy-col .anatomy-card[aria-pressed="true"] h4,
.disability-anatomy-layout.has-selection .anatomy-col .anatomy-card[aria-pressed="true"] .d-desc {
  color: #14143a !important;
  -webkit-text-fill-color: #14143a !important;
  visibility: visible !important;
}

.disability-anatomy-layout.has-selection .anatomy-card[aria-pressed="true"] .d-icon-wrap {
  width: 90px !important;
  height: 90px !important;
  margin: 0 auto 8px !important;
  opacity: 1 !important;
  background: linear-gradient(135deg, #f5efe2, #ebe4d4) !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.disability-anatomy-layout.has-selection .anatomy-col .anatomy-card[aria-pressed="true"] .d-icon-wrap svg {
  width: 56px !important;
  height: 56px !important;
}

.disability-anatomy-layout.has-selection .anatomy-col .anatomy-card[aria-pressed="true"] h4 {
  font-size: 22px !important;
}

.disability-anatomy-layout.has-selection .anatomy-col .anatomy-card[aria-pressed="true"] .d-desc {
  display: none !important;
}

.disability-anatomy-layout.has-selection ~ .change-selection-link {
  display: block !important;
  text-align: center !important;
}

/* Responsive */
@media (max-width: 768px) {
  .disability-anatomy-layout {
    grid-template-columns: 1fr !important;
  }
  .anatomy-center {
    order: -1 !important;
    max-width: 160px !important;
    margin: 0 auto 10px !important;
  }
  .anatomy-col .anatomy-card {
    flex-direction: row !important;
    text-align: right !important;
  }
  .anatomy-col-left .anatomy-card {
    flex-direction: row !important;
    text-align: right !important;
  }
  .anatomy-col .anatomy-card::before,
  .anatomy-col .anatomy-card::after {
    display: none !important;
  }
}

/* â"€â"€ STEP 1: بطاقات الإعاقة â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */
.disability-card {
  background: #fff !important;
  border: 1.5px solid rgba(20,20,58,0.08) !important;
  border-radius: 16px !important;
  color: #14143a !important;
  padding: 20px 16px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.disability-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 60px !important;
  height: 60px !important;
  background: radial-gradient(circle at top right, rgba(200,169,106,0.08), transparent 70%) !important;
  pointer-events: none !important;
}

.disability-card:hover {
  background: #fff !important;
  border-color: rgba(200,169,106,0.4) !important;
  box-shadow: 0 8px 28px rgba(200,169,106,0.12) !important;
  transform: translateY(-3px) !important;
}

.disability-card[aria-pressed="true"] {
  background: linear-gradient(135deg, #fdfaf4, #f8f2e4) !important;
  border-color: #C8A96A !important;
  box-shadow: 0 0 0 3px rgba(200,169,106,0.15), 0 8px 24px rgba(200,169,106,0.12) !important;
}

.disability-card[aria-pressed="true"]::after {
  content: '✓' !important;
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  width: 22px !important;
  height: 22px !important;
  background: linear-gradient(135deg, #C8A96A, #8A6A3C) !important;
  color: #fff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.disability-card h4 {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #14143a !important;
  margin: 8px 0 4px !important;
}

.disability-card p {
  font-family: 'Tajawal', sans-serif !important;
  color: rgba(20,20,58,0.5) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.disability-card small {
  color: rgba(20,20,58,0.3) !important;
}

/* ── Disability selection animation states ── */
.disability-grid.has-selection .disability-card:not([aria-pressed="true"]) {
  opacity: 0 !important;
  transform: scale(0.85) translateY(10px) !important;
  pointer-events: none !important;
  position: absolute !important;
  visibility: hidden !important;
}

.disability-grid.has-selection {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: auto !important;
}

.disability-grid.has-selection .disability-card[aria-pressed="true"] {
  width: auto !important;
  max-width: 280px !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 16px 24px !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.disability-grid.has-selection .disability-card[aria-pressed="true"] .d-icon-wrap {
  width: 90px !important;
  height: 90px !important;
  margin-bottom: 8px !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.disability-grid.has-selection .disability-card[aria-pressed="true"] .d-icon-wrap svg {
  width: 90px !important;
  height: 90px !important;
}

.disability-grid.has-selection .disability-card[aria-pressed="true"] h4 {
  font-size: 22px !important;
  margin-top: 4px !important;
}

.disability-grid.has-selection .disability-card[aria-pressed="true"] .d-desc {
  display: none !important;
}

/* Change selection link */
.change-selection-link {
  display: none;
  font-family: 'Tajawal', sans-serif;
  font-size: 13px;
  color: var(--gold, #C8A96A);
  cursor: pointer;
  border: none;
  background: none;
  margin-top: 8px;
  text-decoration: underline;
  transition: color 0.2s;
}
.change-selection-link:hover { color: #8A6A3C; }
.disability-grid.has-selection ~ .change-selection-link,
.disability-grid.has-selection + .change-selection-link { display: block; text-align: center; }

/* subtype */
.subtype-panel {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 20px !important;
  margin-top: 0 !important;
  overflow: hidden !important;
}

.subtype-panel:not([hidden]) {
  animation: subtypeFadeIn 0.4s ease forwards !important;
}

@keyframes subtypeFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#subtypeTitle {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: rgba(20,20,58,0.5) !important;
  text-align: center !important;
  margin-bottom: 20px !important;
}

.subtype-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 14px !important;
  position: relative !important;
}

/* Thread lines from parent card to subtypes */
.subtype-thread-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  height: 40px;
  margin-bottom: 4px;
}

.subtype-thread-container svg {
  overflow: visible;
}

/* Card dealing animation for each subtype */
.subtype-btn {
  background: #fff !important;
  border: 1.5px solid rgba(20,20,58,0.08) !important;
  border-radius: 14px !important;
  color: #14143a !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 14px 22px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  opacity: 0;
  transform: translateY(-40px) rotate(8deg) scale(0.7);
  animation: dealCard 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative !important;
  box-shadow: 0 2px 8px rgba(20,20,58,0.06) !important;
}

.subtype-btn::before {
  content: '' !important;
  position: absolute !important;
  top: -18px !important;
  left: 50% !important;
  width: 1.5px !important;
  height: 18px !important;
  background: linear-gradient(to bottom, rgba(200,169,106,0.5), rgba(200,169,106,0.1)) !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

.subtype-btn:nth-child(1) { animation-delay: 0.15s; }
.subtype-btn:nth-child(2) { animation-delay: 0.3s; }
.subtype-btn:nth-child(3) { animation-delay: 0.45s; }
.subtype-btn:nth-child(4) { animation-delay: 0.6s; }
.subtype-btn:nth-child(5) { animation-delay: 0.75s; }
.subtype-btn:nth-child(6) { animation-delay: 0.9s; }

@keyframes dealCard {
  0% {
    opacity: 0;
    transform: translateY(-50px) rotate(12deg) scale(0.6);
    box-shadow: 0 0 0 rgba(200,169,106,0);
  }
  40% {
    opacity: 1;
    transform: translateY(8px) rotate(-3deg) scale(1.04);
  }
  70% {
    transform: translateY(-3px) rotate(1deg) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
    box-shadow: 0 4px 16px rgba(200,169,106,0.1);
  }
}

.subtype-btn:hover {
  border-color: rgba(200,169,106,0.5) !important;
  background: #fdfaf4 !important;
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 8px 24px rgba(200,169,106,0.15) !important;
}

.subtype-btn[aria-pressed="true"] {
  border-color: #C8A96A !important;
  color: #8A6A3C !important;
  background: linear-gradient(135deg, #fdfaf4, #f8f2e4) !important;
  box-shadow: 0 0 0 3px rgba(200,169,106,0.12), 0 6px 20px rgba(200,169,106,0.12) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

/* ── Step 1 characteristics typewriter + progress ── */
.step1-chars-display {
  background: rgba(20,20,58,0.03);
  border: 1px solid rgba(200,169,106,0.15);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
  text-align: right;
  animation: progressFadeIn 0.4s ease;
}
.step1-chars-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  justify-content: flex-end;
}
.step1-chars-icon {
  font-size: 22px;
}
.step1-chars-title {
  font-family: 'Tajawal', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #14143a;
}
.step1-chars-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.step1-char-line {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  justify-content: flex-end;
  animation: charLineIn 0.3s ease both;
}
@keyframes charLineIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.step1-char-bullet {
  color: #C8A96A;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 3px;
}
.step1-char-text {
  font-family: 'Tajawal', sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(20,20,58,0.75);
  line-height: 1.6;
  border-left: 2px solid rgba(200,169,106,0.3);
  animation: cursorBlink 0.6s steps(2) infinite;
}
.step1-char-line:last-child .step1-char-text {
  border-left-color: #C8A96A;
}
@keyframes cursorBlink {
  0%, 100% { border-left-color: rgba(200,169,106,0.3); }
  50% { border-left-color: transparent; }
}

.step1-progress-wrap {
  margin-top: 24px;
  text-align: center;
  animation: progressFadeIn 0.3s ease;
}

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

.step1-progress-track {
  width: 100%;
  max-width: 320px;
  height: 6px;
  background: rgba(20,20,58,0.06);
  border-radius: 6px;
  overflow: hidden;
  margin: 0 auto 10px;
  position: relative;
}

.step1-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #C8A96A, #e8744d);
  border-radius: 6px;
  transition: width 0.05s linear;
  box-shadow: 0 0 8px rgba(200,169,106,0.4);
}

.step1-progress-label {
  font-family: 'Tajawal', sans-serif;
  font-size: 13px;
  color: rgba(20,20,58,0.5);
  font-weight: 500;
}

.step1-progress-label span {
  color: #C8A96A;
  font-weight: 700;
  font-size: 14px;
}

/* â"€â"€ STEP 2: المعايير â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */
.criteria-header {
  background: rgba(20,20,58,0.04) !important;
  border-color: rgba(20,20,58,0.08) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
}

.criteria-col h4 {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
  color: #14143a !important;
  border-bottom-color: rgba(20,20,58,0.08) !important;
}

.criteria-list li {
  font-family: 'Tajawal', sans-serif !important;
  color: rgba(20,20,58,0.72) !important;
  border-bottom-color: rgba(20,20,58,0.05) !important;
}

/* â"€â"€ STEP 3: بيانات الموديل â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */
.pf-label {
  font-family: 'Tajawal', sans-serif !important;
  color: rgba(20,20,58,0.52) !important;
}

.pf-input {
  background: rgba(20,20,58,0.04) !important;
  border-color: rgba(20,20,58,0.12) !important;
  color: #14143a !important;
  font-family: 'Tajawal', sans-serif !important;
}

.pf-input:focus {
  border-color: #e8744d !important;
  background: #fff !important;
  outline: none !important;
}

.garment-btn {
  background: #f7f1e3 !important;
  border-color: rgba(20,20,58,0.1) !important;
  color: #14143a !important;
  font-family: 'Tajawal', sans-serif !important;
}

.garment-btn:hover,
.garment-btn[aria-pressed="true"] {
  border-color: #e8744d !important;
  background: rgba(232,116,77,0.07) !important;
  color: #e8744d !important;
}

.style-notes {
  background: rgba(20,20,58,0.04) !important;
  border-color: rgba(20,20,58,0.12) !important;
  color: #14143a !important;
  font-family: 'Tajawal', sans-serif !important;
  border-radius: 12px !important;
}

.style-notes:focus {
  border-color: #e8744d !important;
  background: #fff !important;
  outline: none !important;
}

.person-derived {
  background: rgba(232,116,77,0.07) !important;
  border-color: rgba(232,116,77,0.18) !important;
  border-radius: 10px !important;
}

.pd-label {
  font-family: 'Tajawal', sans-serif !important;
  color: rgba(20,20,58,0.52) !important;
}

.pd-value {
  color: #e8744d !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 600 !important;
}

/* â"€â"€ STEP 4: طريقة العرض â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */
.mode-card {
  background: #f7f1e3 !important;
  border-color: rgba(20,20,58,0.1) !important;
  color: #14143a !important;
}

.mode-card:hover {
  border-color: #e8744d !important;
  background: #ede8d6 !important;
}

.mode-card[aria-pressed="true"] {
  border-color: #14143a !important;
  background: rgba(20,20,58,0.05) !important;
  box-shadow: 0 0 0 3px rgba(20,20,58,0.1) !important;
}

.mode-card h4 {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
  color: #14143a !important;
}

.mode-card p {
  font-family: 'Tajawal', sans-serif !important;
  color: rgba(20,20,58,0.58) !important;
}

.mode-tag {
  background: rgba(20,20,58,0.07) !important;
  color: rgba(20,20,58,0.62) !important;
  font-family: 'Tajawal', sans-serif !important;
  border-radius: 9999px !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
}

.upload-zone {
  border-color: rgba(20,20,58,0.15) !important;
  background: rgba(20,20,58,0.03) !important;
  border-radius: 16px !important;
}

.upload-zone:hover {
  border-color: #e8744d !important;
  background: rgba(232,116,77,0.03) !important;
}

.upload-zone strong { color: #14143a !important; }

.upload-hint {
  font-family: 'Tajawal', sans-serif !important;
  color: rgba(20,20,58,0.42) !important;
}

/* â"€â"€ STEP 5: النتيجة â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */
#resultHeading {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
  color: #14143a !important;
}

#resultSubheading {
  font-family: 'Tajawal', sans-serif !important;
  color: rgba(20,20,58,0.6) !important;
}

.output-card {
  background: #f7f1e3 !important;
  border-color: rgba(20,20,58,0.1) !important;
}

.output-meta h4 {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
  color: #14143a !important;
}

.output-meta p {
  font-family: 'Tajawal', sans-serif !important;
  color: rgba(20,20,58,0.6) !important;
}

.output-placeholder { background: rgba(20,20,58,0.03) !important; }

.ph-title {
  font-family: 'Tajawal', sans-serif !important;
  color: #14143a !important;
}

.ph-text {
  font-family: 'Tajawal', sans-serif !important;
  color: rgba(20,20,58,0.48) !important;
}

.applied-criteria-card {
  background: #f7f1e3 !important;
  border-color: rgba(20,20,58,0.1) !important;
}

.applied-criteria-card h4 {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
  color: #14143a !important;
}

.applied-criteria-card li {
  font-family: 'Tajawal', sans-serif !important;
  color: rgba(20,20,58,0.72) !important;
  border-bottom-color: rgba(20,20,58,0.06) !important;
}

.loading-step {
  font-family: 'Tajawal', sans-serif !important;
  color: rgba(20,20,58,0.5) !important;
}

.loading-step.active {
  color: #14143a !important;
  font-weight: 600 !important;
}

.output-badge {
  font-family: 'Tajawal', sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════
   Additional Fixes â€" Round 2
   ═══════════════════════════════════════════════════════════════ */

/* 1. خلفية جسم الخطوات â€" كريمي بدل الأبيض */
.ai-wizard-body {
  background: #faf6ee !important;
  padding: 20px 28px !important;
  overflow-y: auto !important;
}

.ai-engine-panel {
  background: #ede8d6 !important;
}

/* 2. أيقونات أنواع الإعاقات â€" ذهبي داكن ثري دي */
.d-icon {
  font-size: 2.6rem !important;
  margin-bottom: 4px !important;
  filter:
    grayscale(1) sepia(1) saturate(2.5) hue-rotate(5deg) brightness(0.68)
    drop-shadow(0 3px 0 rgba(120,80,0,0.4))
    drop-shadow(0 1px 4px rgba(180,120,0,0.3)) !important;
  transform: perspective(180px) translateZ(6px) !important;
  display: inline-block !important;
}

/* 3. صفحة المعايير â€" إصلاح الألوان الصفراء */
.criteria-col {
  background: rgba(20,20,58,0.04) !important;
  border-color: rgba(20,20,58,0.1) !important;
}

.criteria-col h4 {
  color: #14143a !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
}

.criteria-list li {
  background: #f7f1e3 !important;
  border-color: rgba(20,20,58,0.1) !important;
  color: rgba(20,20,58,0.78) !important;
  font-family: 'Tajawal', sans-serif !important;
}

.criteria-list li::before {
  color: #e8744d !important;
}

.criteria-checklist li.checked {
  background: rgba(232,116,77,0.07) !important;
  border-color: rgba(232,116,77,0.25) !important;
}

.criteria-checklist li.checked::before {
  color: #e8744d !important;
}

.criteria-checklist li strong {
  color: #14143a !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
}

/* 4. sub-h â€" إصلاح اللون الأصفر */
.sub-h {
  color: #14143a !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
}

/* 5. مربعات المعلومات الشخصية â€" تحسين شكل الحقول */
.person-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}

.person-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.pf-label {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  color: rgba(20,20,58,0.5) !important;
  text-transform: none !important;
}

.pf-input {
  background: #fff !important;
  border: 1.5px solid rgba(20,20,58,0.14) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 14px !important;
  color: #14143a !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.pf-input:focus {
  border-color: #e8744d !important;
  box-shadow: 0 0 0 3px rgba(232,116,77,0.12) !important;
  background: #fff !important;
}

.pf-input::placeholder {
  color: rgba(20,20,58,0.3) !important;
  font-family: 'Tajawal', sans-serif !important;
}

/* 6. أيقونات نوع المنتج â€" ذهبي داكن ثري دي */
.g-emoji {
  font-size: 2rem !important;
  filter:
    grayscale(1) sepia(1) saturate(2.5) hue-rotate(5deg) brightness(0.68)
    drop-shadow(0 3px 0 rgba(120,80,0,0.4))
    drop-shadow(0 1px 4px rgba(180,120,0,0.25)) !important;
  transform: perspective(160px) translateZ(5px) !important;
  display: inline-block !important;
}

.garment-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 16px 12px !important;
  border-radius: 14px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
}

/* 7. أيقونة المانيكان â€" تبييض + شكل مانيكان أبيض */
.mode-icon {
  font-size: 2.6rem !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* إعادة لون أيقونة المانيكان لتبدو بيضاء */
.mode-card[data-mode="mannequin"] .mode-icon {
  filter:
    grayscale(1) brightness(6) saturate(0) drop-shadow(0 2px 8px rgba(20,20,58,0.25)) !important;
}

/* ═══════════════════════════════════════════════════════════
   Studio Landing + Modal
   ═══════════════════════════════════════════════════════════ */

/* ── Landing ──────────────────────────────────────────── */
.studio-landing {
  padding: 60px 0 40px;
}

.studio-landing-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  gap: 40px;
}

.studio-landing-text {
  text-align: center;
}

.studio-landing-text h2 {
  font-family: 'Rakkas', serif !important;
  font-size: 57px !important;
  font-weight: 400 !important;
  color: #14143a !important;
  letter-spacing: -0.57px !important;
  line-height: 65.55px !important;
  margin: 16px 0 12px !important;
}

.studio-landing-desc {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 17px !important;
  color: rgba(20,20,58,0.6) !important;
  line-height: 1.7;
  margin: 0 0 28px !important;
}

.studio-start-btn {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  padding: 14px 48px !important;
  border-radius: 12px !important;
  background: #14143a !important;
  color: #f7f1e3 !important;
  border: none !important;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.studio-start-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(20,20,58,0.2) !important;
}

/* ── Filmstrip ─────────────────────────────────────────── */
.studio-filmstrip {
  display: flex;
  gap: 8px;
  width: 100%;
  height: 360px;
  direction: ltr;
}

.filmstrip-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-filmstrip:hover .filmstrip-item {
  flex: 0.7;
}

.studio-filmstrip .filmstrip-item:hover {
  flex: 2.5;
}

.filmstrip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.4s ease;
}

.studio-filmstrip:hover .filmstrip-item:not(:hover) img {
  filter: brightness(0.7);
}

.filmstrip-item:hover img {
  transform: scale(1.05);
  filter: brightness(1);
}

.filmstrip-label {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-family: 'Tajawal', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #f7f1e3;
  background: rgba(20, 20, 58, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 6px 16px;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  direction: rtl;
}

.filmstrip-item:hover .filmstrip-label {
  opacity: 1;
  transform: translateY(0);
}

/* ── Modal overlay ────────────────────────────────────── */
.studio-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 10, 30, 0.6);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: studio-overlay-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}

.studio-modal-overlay[hidden] {
  display: none !important;
}

@keyframes studio-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.studio-modal {
  position: relative;
  width: 100%;
  max-width: 920px;
  max-height: 92dvh;
  overflow-y: auto;
  background: #faf6ee;
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(200, 169, 106, 0.12),
    0 8px 30px rgba(20,20,58,0.10),
    0 30px 80px rgba(20,20,58,0.18);
  animation: studio-modal-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-modal::-webkit-scrollbar { width: 6px; }
.studio-modal::-webkit-scrollbar-track { background: transparent; }
.studio-modal::-webkit-scrollbar-thumb {
  background: rgba(200, 169, 106, 0.3);
  border-radius: 3px;
}
.studio-modal::-webkit-scrollbar-thumb:hover { background: rgba(200, 169, 106, 0.5); }

@keyframes studio-modal-in {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.studio-modal-close {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 50;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(20,20,58,0.06);
  color: rgba(20,20,58,0.5);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.studio-modal-close:hover {
  background: rgba(200, 60, 40, 0.1);
  color: #c0392b;
  transform: rotate(90deg);
}

/* Hide section header when modal is open (it's inside modal now) */
.studio-modal .section-header {
  display: none !important;
}

/* ── Landing responsive ───────────────────────────────── */
@media (max-width: 768px) {
  .studio-landing {
    padding: 40px 0 24px;
  }

  .studio-landing-content {
    gap: 24px;
    padding: 0 16px;
  }

  .studio-filmstrip {
    height: 200px;
    gap: 6px;
  }

  .filmstrip-label {
    font-size: 12px;
    padding: 4px 10px;
    bottom: 10px;
    right: 10px;
  }

  .studio-modal {
    max-width: 100%;
    border-radius: 16px;
    max-height: 95dvh;
  }
}

@media (max-width: 480px) {
  .studio-filmstrip {
    flex-wrap: wrap;
    height: auto;
    gap: 8px;
  }

  .filmstrip-item {
    flex: 1 1 calc(50% - 4px);
    min-height: 140px;
  }

  .studio-filmstrip:hover .filmstrip-item {
    flex: 1 1 calc(50% - 4px);
  }

  .studio-filmstrip .filmstrip-item:hover {
    flex: 1 1 calc(50% - 4px);
  }

  .filmstrip-label {
    opacity: 1;
    transform: translateY(0);
  }

  .studio-landing-text h2 {
    font-size: clamp(22px, 6vw, 30px) !important;
  }

  .studio-start-btn {
    padding: 12px 32px !important;
    font-size: 16px !important;
  }
}