/* جوهرة بيت الحلول المالية — أنماط مخصصة فوق Tailwind */

:root {
  --radius: 0.875rem;
  --background: oklch(98.5% 0.003 95);
  --foreground: oklch(23% 0.003 95);
  --card: oklch(100% 0 0);
  --card-foreground: oklch(23% 0.003 95);
  --primary: oklch(77% 0.145 90);
  --primary-foreground: oklch(19% 0.005 90);
  --secondary: oklch(96.5% 0.025 90);
  --secondary-foreground: oklch(23% 0.003 95);
  --muted: oklch(97% 0.002 95);
  --muted-foreground: oklch(52% 0.004 95);
  --accent: oklch(66% 0.145 85);
  --accent-foreground: oklch(19% 0.005 90);
  --border: oklch(92% 0.004 95);
  --input: oklch(92% 0.004 95);
  --ring: oklch(77% 0.145 90);
  --gold: oklch(66% 0.145 85);
  --destructive: oklch(57.7% 0.245 27.325);
  --shadow-soft: 0 8px 30px -10px oklch(16% 0.012 50 / 0.08);
  --shadow-elegant: 0 25px 50px -12px oklch(16% 0.012 50 / 0.12);
  --reference-photo-shadow: 0 10px 20px -8px oklch(25% 0.015 90 / 0.3);
  --reference-whatsapp: oklch(74% 0.2 150);
  --reference-call: oklch(74% 0.2 150);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Cairo", "Tajawal", system-ui, sans-serif;
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
}

.reference-container {
  width: min(1152px, 100%);
  margin-inline: auto;
  padding-inline: 24px;
}

.reference-photo {
  aspect-ratio: 0.8;
  object-position: center bottom;
  border: 7px solid var(--card);
  box-shadow: var(--reference-photo-shadow);
  border-radius: 8px;
  max-height: 520px;
}

.reference-form {
  width: calc(100% - 32px);
}

.reference-benefit {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.reference-benefit:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.reference-enter {
  animation: reference-enter 0.5s ease-out;
}

/* فصل سطري العنوان لمنع التداخل مع خط Cairo العريض */
.hero-title {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  line-height: 1.55;
}

.hero-title-line {
  display: block;
}

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

.reference-whatsapp,
.reference-call {
  background: var(--reference-whatsapp) !important;
  color: #fff !important;
}

.hero-whatsapp {
  background: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
}

.hero-whatsapp:hover {
  background: color-mix(in oklab, var(--primary) 88%, var(--accent));
  color: var(--primary-foreground);
  transform: translateY(-1px);
}

.hero-call {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}

.hero-call:hover {
  background: transparent;
  color: var(--accent);
  border-color: var(--gold);
  transform: translateY(-1px);
}

.shadow-soft {
  box-shadow: var(--shadow-soft);
}

.shadow-elegant {
  box-shadow: var(--shadow-elegant);
}

.bg-background { background-color: var(--background); }
.bg-card { background-color: var(--card); }
.bg-muted { background-color: var(--muted); }
.bg-secondary { background-color: var(--secondary); }
.bg-primary { background-color: var(--primary); }
.text-foreground { color: var(--foreground); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-accent { color: var(--accent); }
.text-muted-foreground { color: var(--muted-foreground); }
.border-border { border-color: var(--border); }
.border-input { border-color: var(--input); }
.border-primary\/25 { border-color: color-mix(in oklab, var(--primary) 25%, transparent); }

.focus\:border-gold:focus {
  border-color: var(--gold);
}

.hover\:bg-primary\/90:hover {
  background-color: color-mix(in oklab, var(--primary) 90%, black);
}

.hover\:bg-accent:hover {
  background-color: var(--accent);
}

.hover\:text-accent-foreground:hover {
  color: var(--accent-foreground);
}

/* FAQ accordion */
.faq-item[data-open="true"] .faq-chevron {
  transform: rotate(180deg);
}

.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.faq-item[data-open="true"] .faq-panel {
  grid-template-rows: 1fr;
}

.faq-panel > div {
  overflow: hidden;
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mobile-menu[data-open="true"] {
  pointer-events: auto;
  opacity: 1;
}

.mobile-menu-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(320px, 88vw);
  background: var(--card);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  box-shadow: var(--shadow-elegant);
}

.mobile-menu[data-open="true"] .mobile-menu-panel {
  transform: translateX(0);
}

.mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.45);
}

/* Toast — إشعار مؤقت (نجاح/خطأ النموذج)، مخفي تمامًا حتى يظهر */
.toast {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 80;
  max-width: min(92vw, 420px);
  padding: 0.85rem 1.1rem;
  border-radius: 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-elegant);
  font-size: 0.875rem;
  line-height: 1.6;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
}

.toast[data-show="true"] {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.toast[data-type="error"] {
  border-color: color-mix(in oklab, var(--destructive) 40%, var(--border));
  color: var(--destructive);
}

.toast[data-type="success"] {
  border-color: color-mix(in oklab, var(--reference-whatsapp) 35%, var(--border));
}

/* Cookie banner */
.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  border-top: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

@media (prefers-reduced-motion: reduce) {
  .reference-enter,
  .reference-benefit,
  .faq-panel,
  .mobile-menu,
  .mobile-menu-panel,
  .toast {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 767px) {
  .reference-container {
    padding-inline: 20px;
  }

  .reference-photo {
    max-height: 460px;
  }
}