/* ============================================
   ANARKALI BY ZAHID — MUGHAL IDENTITY LAYER
   Phase 1: Visual signature unique au monde
   ============================================ */

:root {
  /* Mughal Color Story (replaces basic gold/black) */
  --mughal-crimson: #722F37;         /* Rouge sang palais */
  --mughal-emerald: #0F4C3A;         /* Jade Maharadjah */
  --mughal-ivory: #F4EFE6;           /* Marbre Taj Mahal */
  --mughal-saffron: #E89F3D;         /* Safran burst */
  --mughal-gold: #D4AF37;            /* Gold (existing) */
  --mughal-gold-deep: #B8902A;       /* Or vieilli */
  --mughal-warm-black: #0d0a07;      /* Warm black (vs cold #000) */
  --mughal-charcoal: #1a1410;        /* Section bg warm */
  --mughal-parchment: rgba(244, 239, 230, 0.04);
}

/* ============================================
   1. WARM-BLACK BACKGROUND (was cold black)
   ============================================ */
body { background-color: var(--mughal-warm-black) !important; }

/* ============================================
   2. MANDALA PATTERN BACKGROUNDS
   Subtle SVG watermark on key sections
   ============================================ */
.histoire,
.avis-premium,
.contact-premium {
  position: relative;
}

.histoire::before,
.avis-premium::before,
.cuisine::before {
  content: '';
  position: absolute;
  pointer-events: none;
  width: 600px;
  height: 600px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='0.4' opacity='0.5'%3E%3Ccircle cx='100' cy='100' r='95'/%3E%3Ccircle cx='100' cy='100' r='80'/%3E%3Ccircle cx='100' cy='100' r='65'/%3E%3Ccircle cx='100' cy='100' r='50'/%3E%3Ccircle cx='100' cy='100' r='35'/%3E%3Cpath d='M100 5 L100 195 M5 100 L195 100 M29.3 29.3 L170.7 170.7 M170.7 29.3 L29.3 170.7'/%3E%3Cpath d='M100 20 Q120 50 100 80 Q80 50 100 20 Z'/%3E%3Cpath d='M100 120 Q120 150 100 180 Q80 150 100 120 Z'/%3E%3Cpath d='M20 100 Q50 80 80 100 Q50 120 20 100 Z'/%3E%3Cpath d='M120 100 Q150 80 180 100 Q150 120 120 100 Z'/%3E%3Cg transform='translate(100,100)'%3E%3Cpath d='M0 -60 L8 -50 L0 -40 L-8 -50 Z'/%3E%3Cpath d='M0 60 L8 50 L0 40 L-8 50 Z'/%3E%3Cpath d='M-60 0 L-50 8 L-40 0 L-50 -8 Z'/%3E%3Cpath d='M60 0 L50 8 L40 0 L50 -8 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.06;
  z-index: 0;
}

.histoire::before { top: 5%; right: -200px; }
.avis-premium::before { top: 50%; left: -250px; transform: translateY(-50%); }
.cuisine::before { bottom: 10%; right: -220px; opacity: 0.04; }

/* Section content stays above pattern */
.histoire > *, .avis-premium > *, .cuisine > * { position: relative; z-index: 1; }

/* ============================================
   3. MUGHAL ARCH FRAMES on dish photos
   ============================================ */
.cuisine-swiper .dish-img-wrap {
  /* Convert square to mughal arch shape */
  clip-path: path('M 0 60 Q 0 0, 60 0 L calc(50% - 60px) 0 Q 50% -10, calc(50% + 60px) 0 L calc(100% - 60px) 0 Q 100% 0, 100% 60 L 100% 100% L 0 100% Z');
  /* Fallback for browsers without path() support */
  border-radius: 50% 50% 8px 8px / 35% 35% 8px 8px;
  border-top-left-radius: 50% 80%;
  border-top-right-radius: 50% 80%;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  aspect-ratio: 3 / 4 !important;
}

/* ============================================
   4. EDITORIAL TYPOGRAPHY
   Drop caps + Devanagari decorative
   ============================================ */

/* Drop cap on story paragraphs */
.histoire-text .histoire-body:first-of-type::first-letter {
  font-family: 'Cormorant Garamond', serif;
  font-size: 5em;
  font-weight: 600;
  line-height: 0.85;
  float: left;
  color: var(--mughal-gold);
  margin: 0.05em 0.12em 0 -0.08em;
  background: linear-gradient(135deg, var(--mughal-saffron), var(--mughal-gold), var(--mughal-gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
}

/* Devanagari decorative watermark */
.histoire-text::before {
  content: 'अनारकली';
  position: absolute;
  top: -30px;
  right: 0;
  font-size: 6rem;
  font-weight: 300;
  color: var(--mughal-gold);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.02em;
}

.histoire-text { position: relative; }

/* Italic citation enhancement */
.avis-body {
  position: relative;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 1.15rem !important;
  line-height: 1.65 !important;
  color: rgba(244, 239, 230, 0.85) !important;
}

/* Editorial big numbers in section labels */
.section-label {
  position: relative;
}

.cuisine .section-label::before,
.histoire .section-label::before,
.ambiance .section-label::before,
.avis-premium .section-label::before {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--mughal-saffron);
  margin-right: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.7;
}

.histoire .section-label::before { content: '— I.'; }
.cuisine .section-label::before { content: '— II.'; }
.ambiance .section-label::before { content: '— III.'; }
.avis-premium .section-label::before { content: '— IV.'; }

/* ============================================
   5. MUGHAL ORNAMENT DIVIDERS
   ============================================ */
.mughal-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 60px auto;
  max-width: 280px;
}
.mughal-divider::before,
.mughal-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mughal-gold), transparent);
}
.mughal-divider svg {
  flex-shrink: 0;
  color: var(--mughal-gold);
}

/* ============================================
   6. SAFFRON ACCENTS (instead of all gold)
   ============================================ */
.hero-pretext {
  color: var(--mughal-saffron) !important;
  text-shadow: 0 0 20px rgba(232, 159, 61, 0.3);
}

.hero-tagline {
  background: linear-gradient(135deg, var(--mughal-ivory), var(--mughal-saffron));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* CTA Primary — Crimson with gold border */
.btn-primary,
.contact-btn.primary {
  background: linear-gradient(135deg, var(--mughal-crimson) 0%, #8B3A42 100%) !important;
  color: var(--mughal-ivory) !important;
  border: 1px solid var(--mughal-gold) !important;
  position: relative;
  overflow: hidden;
}

.btn-primary::before,
.contact-btn.primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--mughal-gold), var(--mughal-saffron));
  opacity: 0;
  transition: opacity 0.4s;
  z-index: -1;
}

.btn-primary:hover::before,
.contact-btn.primary:hover::before { opacity: 1; }
.btn-primary:hover, .contact-btn.primary:hover {
  color: var(--mughal-warm-black) !important;
  box-shadow: 0 15px 40px rgba(114, 47, 55, 0.4);
}

/* ============================================
   7. ASYMMETRIC EDITORIAL NUMBERS
   Giant section numbers in background
   ============================================ */
.histoire-text,
.cuisine-header,
.ambiance-header {
  position: relative;
}

/* ============================================
   8. PARCHMENT TEXTURE OVERLAY
   Very subtle film grain
   ============================================ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================
   9. AVIS CARD — Mughal Style with crimson accent
   ============================================ */
.avis-card {
  background: linear-gradient(180deg,
    rgba(114, 47, 55, 0.06) 0%,
    rgba(212, 175, 55, 0.03) 50%,
    rgba(10, 8, 5, 0.4) 100%) !important;
  border-color: rgba(212, 175, 55, 0.2) !important;
  position: relative;
}

.avis-card::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mughal-saffron), transparent);
}

.avis-quote-mark {
  background: linear-gradient(135deg, var(--mughal-crimson), var(--mughal-gold)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 0.4 !important;
}

/* ============================================
   10. INSTAGRAM HOVER — Saffron gradient
   ============================================ */
.ig-overlay {
  background:
    linear-gradient(135deg,
      rgba(232, 159, 61, 0.4),
      rgba(114, 47, 55, 0.4)) !important,
    rgba(10, 8, 5, 0.5) !important;
}

/* ============================================
   11. STATS BAR — Refined with crimson dividers
   ============================================ */
.stat-card:not(:last-child)::after {
  background: linear-gradient(180deg,
    transparent,
    rgba(232, 159, 61, 0.3),
    rgba(212, 175, 55, 0.4),
    rgba(232, 159, 61, 0.3),
    transparent) !important;
}

/* ============================================
   12. MUGHAL ARCH for hero CTA accent
   ============================================ */
.hero-divider svg {
  filter: drop-shadow(0 0 12px rgba(232, 159, 61, 0.6));
}

/* ============================================
   MOBILE PRESERVATIONS
   ============================================ */
@media (max-width: 768px) {
  .histoire::before,
  .avis-premium::before,
  .cuisine::before {
    width: 320px;
    height: 320px;
  }

  .histoire-text::before {
    font-size: 3.5rem;
    top: -10px;
    opacity: 0.05;
  }

  .histoire-text .histoire-body:first-of-type::first-letter {
    font-size: 4em;
  }

  .cuisine-swiper .dish-img-wrap {
    /* Slightly less arched on mobile for readability */
    border-top-left-radius: 50% 60%;
    border-top-right-radius: 50% 60%;
  }
}

/* Disable heavy effects on prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}

/* ============================================
   DIVIDER SLIDE (between dishes and drinks)
   ============================================ */
.swiper-slide-divider {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 200px;
  height: 100%;
}

.dish-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 24px;
  height: 100%;
  min-height: 400px;
}

.dish-divider-line {
  width: 1px;
  height: 80px;
  background: linear-gradient(180deg, transparent, var(--mughal-gold, #D4AF37), transparent);
}

.dish-divider-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: rgba(212, 175, 55, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dish-divider-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-style: italic;
  color: var(--mughal-gold, #D4AF37);
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.05em;
}

/* Better object-fit for landscape food images */
.cuisine-swiper .dish-img-wrap img {
  object-fit: cover;
  object-position: center;
  /* Inline style overrides handled per-image */
}

/* ============================================
   13. INDIAN-STYLE BUTTONS (Mughal arch + ornements)
   ============================================ */

/* Enhanced primary buttons with Mughal arch corners */
.btn-primary,
.btn-secondary,
.contact-btn,
.avis-cta-btn,
.ig-cta-btn {
  position: relative;
  overflow: visible !important;
}

/* Decorative corner ornaments (top-left + top-right + bottom-left + bottom-right) */
.btn-primary::before,
.btn-primary::after,
.btn-secondary::before,
.btn-secondary::after,
.contact-btn:not(.primary)::before,
.contact-btn:not(.primary)::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--mughal-gold, #D4AF37);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* btn-primary corners override (was using ::before for gradient — keep it, use clip-path instead) */
.btn-primary::before { display: none; }
.btn-primary::after { display: none; }

/* Secondary button — Mughal arch corner ornaments */
.btn-secondary {
  position: relative;
  padding: 13px 28px !important;
}
.btn-secondary::before {
  top: -3px;
  left: -3px;
  border-top-width: 1px;
  border-left-width: 1px;
}
.btn-secondary::after {
  bottom: -3px;
  right: -3px;
  border-bottom-width: 1px;
  border-right-width: 1px;
}
.btn-secondary:hover::before {
  width: 14px;
  height: 14px;
  top: -5px;
  left: -5px;
}
.btn-secondary:hover::after {
  width: 14px;
  height: 14px;
  bottom: -5px;
  right: -5px;
}

/* Contact buttons — same treatment */
.contact-btn:not(.primary)::before {
  top: -3px;
  left: -3px;
  border-top-width: 1px;
  border-left-width: 1px;
}
.contact-btn:not(.primary)::after {
  bottom: -3px;
  right: -3px;
  border-bottom-width: 1px;
  border-right-width: 1px;
}
.contact-btn:not(.primary):hover::before,
.contact-btn:not(.primary):hover::after {
  width: 12px;
  height: 12px;
}

/* Mughal arch top decoration on primary CTAs */
.btn-primary,
.contact-btn.primary,
.ig-cta-btn {
  position: relative;
}

.btn-primary::before {
  content: '';
  display: block !important;
  position: absolute !important;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 6px;
  background: none;
  border: none;
  /* Mughal arch shape — 3 small dots */
  background-image: radial-gradient(circle, var(--mughal-gold, #D4AF37) 1.5px, transparent 1.5px);
  background-size: 8px 6px;
  background-repeat: repeat-x;
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 0.3s, top 0.3s;
}

.btn-primary:hover::before {
  opacity: 1;
  top: -10px;
}

/* Avis CTA button — ornement filigrane subtle */
.avis-cta-btn {
  position: relative;
  border-radius: 2px;
}
.avis-cta-btn::before {
  content: '◆';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 6px;
  color: var(--mughal-gold, #D4AF37);
  opacity: 0.6;
}
.avis-cta-btn::after {
  content: '◆';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 6px;
  color: var(--mughal-gold, #D4AF37);
  opacity: 0.6;
}
.avis-cta-btn:hover::before,
.avis-cta-btn:hover::after { opacity: 1; }

/* Mughal arch divider before/after section labels */
.section-label {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
}

/* ============================================
   14. INDIAN ORNAMENT — Section Top Accents
   ============================================ */
.histoire .section-label::after,
.cuisine .section-label::after,
.ambiance .section-label::after,
.avis-premium .section-label::after,
.faq-premium .faq-eyebrow::after,
.contact-premium .contact-eyebrow::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 8px;
  margin-left: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M2 4 Q 6 0, 12 4 T 22 4' fill='none' stroke='%23D4AF37' stroke-width='0.8' opacity='0.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

/* ============================================
   15. MUGHAL FILIGRANE on FAQ items hover
   ============================================ */
.faq-item[open] {
  position: relative;
}
.faq-item[open]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mughal-saffron, #E89F3D), transparent);
}

/* ============================================
   16. WHATSAPP BUTTON — Indian gold border
   ============================================ */
.float-whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  position: relative;
}
.float-whatsapp::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    var(--mughal-gold, #D4AF37) 0%,
    transparent 50%,
    var(--mughal-saffron, #E89F3D) 100%);
  z-index: -1;
  opacity: 0.7;
}

/* ============================================
   17. SECTION DIVIDERS — Mughal pattern between sections
   ============================================ */
.histoire + .chef-story::before,
.chef-story + .cuisine::before,
.cuisine + .ambiance::before,
.ambiance + .avis-premium::before,
.avis-premium + .instagram-premium::before,
.instagram-premium + .faq-premium::before,
.faq-premium + .contact-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='0.8' opacity='0.5'%3E%3Cline x1='10' y1='12' x2='40' y2='12'/%3E%3Cline x1='80' y1='12' x2='110' y2='12'/%3E%3Ccircle cx='60' cy='12' r='4'/%3E%3Cpath d='M52 12 Q 56 6, 60 8 Q 64 6, 68 12 Q 64 18, 60 16 Q 56 18, 52 12 Z' fill='%23D4AF37' fill-opacity='0.2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  margin-top: 20px;
}