@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
  --ds-surface: #f8fafa;
  --ds-surface-low: #f2f4f4;
  --ds-surface-lowest: #ffffff;
  --ds-surface-high: #e6e8e9;
  --ds-surface-variant: #e9efee;
  --ds-surface-bright: #f8fafa;
  --ds-primary: #004d4c;
  --ds-primary-container: #006766;
  --ds-secondary-container: #fed488;
  --ds-on-secondary-container: #785a1a;
  --ds-on-background: #191c1d;
  --ds-outline-ghost: rgba(190, 201, 200, 0.15);
  --ds-ambient-shadow: 0 24px 24px rgba(25, 28, 29, 0.06);
}

body {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  background: var(--ds-surface) !important;
  color: var(--ds-on-background) !important;
  line-height: 1.45;
}

h1, h2, h3, .editorial, .text-2xl, .text-3xl {
  font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
}

/* Editorial hierarchy */
h1, .text-3xl { font-size: 1.75rem !important; letter-spacing: -0.02em; }
h2, .text-2xl { font-size: 1.375rem !important; letter-spacing: -0.015em; }
p, .text-sm { font-size: 0.875rem !important; }
.text-xs { font-size: 0.6875rem !important; }

.max-w-md,
.max-w-xl,
.max-w-3xl {
  background: var(--ds-surface) !important;
  position: relative;
  overflow: clip;
}

/* Intentional asymmetry / holy-city glow */
.max-w-md::before,
.max-w-xl::before,
.max-w-3xl::before {
  content: "";
  position: absolute;
  inset: -20% -40% auto auto;
  width: 18rem;
  height: 18rem;
  background:
    radial-gradient(circle at 30% 30%, rgba(0, 103, 102, 0.18), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(119, 90, 25, 0.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* No-line rule: rely on tonal layering */
[class*="border-"] {
  border-color: transparent !important;
}

/* Elevated content blocks */
.bg-white,
.dark\:bg-slate-900 {
  background: var(--ds-surface-low) !important;
}

/* Layer 2 interactive cards */
.bg-slate-50,
[class*="bg-primary/5"],
[class*="bg-slate-800/50"] {
  background: var(--ds-surface-lowest) !important;
  box-shadow: var(--ds-ambient-shadow);
}

/* Interactive cards */
.rounded-xl,
.rounded-lg {
  border-radius: 1rem !important;
}

/* Signature actions */
button[class*="bg-primary"],
a[class*="bg-primary"] {
  background: linear-gradient(135deg, var(--ds-primary), var(--ds-primary-container)) !important;
  color: #fff !important;
  border-radius: 1.5rem !important;
  box-shadow: var(--ds-ambient-shadow) !important;
}

/* Secondary actions */
button[class*="border"],
a[class*="border"] {
  background: var(--ds-surface-lowest) !important;
  color: var(--ds-primary) !important;
  border: 1px solid var(--ds-outline-ghost) !important;
  border-radius: 1.5rem !important;
}

/* Inputs */
input,
select,
textarea {
  background: var(--ds-surface-high) !important;
  border: 1px solid transparent !important;
  border-radius: 0.75rem !important;
  color: var(--ds-on-background) !important;
}

input:focus,
select:focus,
textarea:focus {
  background: var(--ds-surface-lowest) !important;
  border-color: rgba(0, 77, 76, 0.2) !important;
  box-shadow: 0 0 0 3px rgba(0, 77, 76, 0.08) !important;
  outline: none !important;
}

/* Chips / filter pills */
.rounded-full.bg-primary,
[class*="rounded-full"][class*="bg-primary"] {
  background: var(--ds-primary) !important;
  color: #fff !important;
}

/* Premium secondary callout */
[class*="text-accent"],
[class*="accent-gold"] {
  color: var(--ds-on-secondary-container) !important;
}

/* Floating bars / sticky nav */
.sticky,
.fixed {
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--ds-surface-lowest) 85%, transparent) !important;
}

/* Premium spacing feel */
.p-4, .px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.p-6, .px-6 { padding-left: 2rem !important; padding-right: 2rem !important; }

/* 8pt rhythm and breathing space */
.space-y-3 > * + * { margin-top: 1rem !important; }
.space-y-4 > * + * { margin-top: 1.5rem !important; }
.space-y-5 > * + * { margin-top: 2rem !important; }
.space-y-6 > * + * { margin-top: 2rem !important; }

/* Remove divider dependence in list sections */
.border-t,
.border-b {
  border-color: transparent !important;
}

/* Subtle geometric Islamic mask on package/travel cards */
[class*="Package"],
[class*="package"],
[class*="Payment Plan"],
section[class*="bg-primary/5"],
div[class*="bg-primary/5"] {
  position: relative;
}

[class*="Package"]::after,
[class*="package"]::after,
section[class*="bg-primary/5"]::after,
div[class*="bg-primary/5"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image:
    radial-gradient(circle at 25% 25%, #004d4c 2px, transparent 2.2px),
    radial-gradient(circle at 75% 75%, #006766 2px, transparent 2.2px);
  background-size: 24px 24px, 24px 24px;
  border-radius: inherit;
}

/* ===== Screen-by-screen art direction ===== */

/* Quick booking: stronger hero contrast and floating CTA rhythm */
.ds-quick header + div {
  margin: 0.5rem 1rem 0;
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(0, 77, 76, 0.08), rgba(0, 77, 76, 0.02));
}
.ds-quick main {
  position: relative;
  z-index: 1;
}

/* Step 1: editorial onboarding with more breathing space */
.ds-step1 header {
  background: color-mix(in srgb, var(--ds-surface-lowest) 86%, transparent) !important;
}
.ds-step1 main > div:first-child {
  padding-top: 2.5rem !important;
  padding-bottom: 1rem !important;
}
.ds-step1 section {
  background: var(--ds-surface-lowest);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--ds-ambient-shadow);
}

/* Step 2: package card as premium anchor */
.ds-step2 .bg-primary\/5,
.ds-step2 [class*="Selected Package"],
.ds-step2 [class*="selected package"] {
  transform: translateY(-6px);
}
.ds-step2 form {
  margin-top: 0.5rem;
}

/* Step 3: participant cards with clearer hierarchy */
.ds-step3 .bg-slate-50,
.ds-step3 .bg-white.dark\:bg-slate-900 {
  background: var(--ds-surface-lowest) !important;
}
.ds-step3 .fixed.bottom-0 {
  border-radius: 1rem 1rem 0 0;
}

/* Step 4: emergency contact form framing */
.ds-step4 .max-w-md > div:nth-of-type(3) {
  margin: 0 1rem;
  border-radius: 1rem;
  background: var(--ds-surface-low);
}
.ds-step4 .fixed.bottom-0 {
  border-radius: 1rem 1rem 0 0;
}

/* Step 5: payment plans with premium callout emphasis */
.ds-step5 [class*="accent-gold"],
.ds-step5 .text-accent-gold {
  background: rgba(254, 212, 136, 0.25);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}
.ds-step5 .max-w-md > main > div:first-child {
  margin-top: 0.5rem;
}

/* Step 6: payment options as tactile stacked sheets */
.ds-step6 label[for],
.ds-step6 label.relative {
  margin-bottom: 0.5rem;
}
.ds-step6 .mt-auto {
  background: color-mix(in srgb, var(--ds-surface-lowest) 88%, transparent) !important;
}

/* Step 7: review screen should feel ceremonial/final */
.ds-step7 .max-w-xl::before {
  inset: -25% -30% auto auto;
  width: 22rem;
  height: 22rem;
}
.ds-step7 .text-lg.font-bold,
.ds-step7 h3.text-lg {
  font-family: Manrope, Inter, sans-serif;
}
.ds-step7 section {
  margin-bottom: 0.5rem;
}

/* Landing page (MyAzzuha) */
.ds-landing nav {
  background: color-mix(in srgb, var(--ds-surface-lowest) 85%, transparent) !important;
  backdrop-filter: blur(12px);
}
.ds-landing section {
  position: relative;
  z-index: 1;
}
.ds-landing h1 {
  font-size: clamp(2.2rem, 5vw, 4rem) !important;
}
.ds-landing .glass-card {
  background: color-mix(in srgb, var(--ds-surface-lowest) 85%, transparent) !important;
  backdrop-filter: blur(12px);
}
.ds-landing .islamic-pattern {
  background-size: 80px 80px;
}

/* ===== Responsive behavior for booking step pages ===== */
.ds-step1,
.ds-step2,
.ds-step3,
.ds-step4,
.ds-step5,
.ds-step6,
.ds-step7 {
  overflow-x: hidden;
}

/* Mobile-first safety */
.ds-step1 .fixed.bottom-0,
.ds-step2 .fixed.bottom-0,
.ds-step3 .fixed.bottom-0,
.ds-step4 .fixed.bottom-0,
.ds-step5 .fixed.bottom-0,
.ds-step6 .fixed.bottom-0,
.ds-step7 .fixed.bottom-0 {
  width: 100%;
  left: 0;
  right: 0;
  transform: none !important;
}

/* Preserve true center for bars built with left-1/2 + -translate-x-1/2 */
.ds-step1 .fixed.bottom-0.left-1\/2,
.ds-step2 .fixed.bottom-0.left-1\/2,
.ds-step3 .fixed.bottom-0.left-1\/2,
.ds-step4 .fixed.bottom-0.left-1\/2,
.ds-step5 .fixed.bottom-0.left-1\/2,
.ds-step6 .fixed.bottom-0.left-1\/2,
.ds-step7 .fixed.bottom-0.left-1\/2 {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 767px) {
  .ds-step1 .p-6, .ds-step1 .px-6,
  .ds-step2 .p-6, .ds-step2 .px-6,
  .ds-step3 .p-6, .ds-step3 .px-6,
  .ds-step4 .p-6, .ds-step4 .px-6,
  .ds-step5 .p-6, .ds-step5 .px-6,
  .ds-step6 .p-6, .ds-step6 .px-6,
  .ds-step7 .p-6, .ds-step7 .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .ds-step1 h1, .ds-step2 h1, .ds-step3 h1,
  .ds-step4 h1, .ds-step5 h1, .ds-step6 h1, .ds-step7 h1 {
    font-size: 1.5rem !important;
  }
}

@media (min-width: 1024px) {
  /* Wider content containers on laptop */
  .ds-step1 .max-w-md,
  .ds-step2 .max-w-md,
  .ds-step3 .max-w-md,
  .ds-step4 .max-w-md,
  .ds-step5 .max-w-md,
  .ds-step6 .max-w-md {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ds-step7 .max-w-xl {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Improve reading width and breathing room */
  .ds-step1 main,
  .ds-step2 main,
  .ds-step3 main,
  .ds-step4 main,
  .ds-step5 main,
  .ds-step6 main,
  .ds-step7 main {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Two-column responsive forms/cards where applicable */
  .ds-step1 .grid.grid-cols-1,
  .ds-step2 .grid.grid-cols-1,
  .ds-step4 .grid.grid-cols-1,
  .ds-step6 .grid.grid-cols-1 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ds-step3 .max-w-3xl,
  .ds-step7 .max-w-xl {
    width: min(1100px, calc(100vw - 4rem)) !important;
  }

  /* Keep fixed bottom bars centered and capped on large screens */
  .ds-step1 .fixed.bottom-0,
  .ds-step2 .fixed.bottom-0,
  .ds-step3 .fixed.bottom-0,
  .ds-step4 .fixed.bottom-0,
  .ds-step5 .fixed.bottom-0,
  .ds-step6 .fixed.bottom-0,
  .ds-step7 .fixed.bottom-0 {
    max-width: 980px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    border-radius: 1rem 1rem 0 0 !important;
  }
}