/* LuxeBeauty — main stylesheet (RTL, dark + champagne gold) */

:root {
	--background: oklch(0.17 0.008 260);
	--foreground: oklch(0.95 0.015 80);
	--card: oklch(0.2 0.01 260);
	--muted-foreground: oklch(0.72 0.02 80);
	--gold: oklch(0.78 0.09 75);
	--gold-soft: oklch(0.88 0.05 78);
	--cream: oklch(0.96 0.01 80);
	--cream-foreground: oklch(0.2 0.01 260);
	--whatsapp: oklch(0.62 0.16 150);
	--border-gold: oklch(0.78 0.09 75 / 18%);
	--gradient-gold: linear-gradient(135deg, oklch(0.9 0.05 80), oklch(0.78 0.09 72));
	--gradient-hero: linear-gradient(to left, oklch(0.12 0.01 60 / 0.92) 0%, oklch(0.12 0.01 60 / 0.55) 40%, transparent 75%);
	--gradient-blush: linear-gradient(90deg, oklch(0.88 0.04 35), oklch(0.8 0.05 30));
	--shadow-gold: 0 10px 40px -12px oklch(0.78 0.09 75 / 0.5);
	--radius: 0.75rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
	background: var(--background);
	color: var(--foreground);
	font-family: "Vazirmatn", system-ui, sans-serif;
	line-height: 1.7;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }

.container { max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; }
.font-brand { font-family: "Cormorant Garamond", serif; }
.font-script { font-family: "Great Vibes", cursive; }
.text-gold { color: var(--gold); }
.muted { color: var(--muted-foreground); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* Header */
.site-header { position: fixed; inset-inline: 0; top: 0; z-index: 50; transition: background .3s; }
.site-header.scrolled { background: color-mix(in oklch, var(--background) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-gold); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; }
.logo { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; direction: ltr; }
.logo .name { font-family: "Cormorant Garamond", serif; font-size: 1.875rem; color: var(--gold); }
.logo .tagline { margin-top: .25rem; font-size: 9px; letter-spacing: .3em; color: var(--muted-foreground); }
.main-nav { display: none; gap: 2rem; }
.main-nav a { font-size: .875rem; color: color-mix(in oklch, var(--foreground) 85%, transparent); transition: color .2s; }
.main-nav a:hover { color: var(--gold); }
.menu-toggle { display: block; }
.mobile-nav { display: none; border-top: 1px solid var(--border-gold); background: color-mix(in oklch, var(--background) 95%, transparent); backdrop-filter: blur(8px); padding: 1.5rem 1.25rem; }
.mobile-nav.open { display: flex; flex-direction: column; gap: 1rem; }
.mobile-nav a:hover { color: var(--gold); }

/* Header below the WordPress admin bar */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .site-header.scrolled { top: 0; } }

/* Buttons */
.btn-book {
	display: inline-flex; align-items: center; gap: .5rem;
	border-radius: 9999px; padding: .75rem 1.5rem;
	font-size: .875rem; font-weight: 700; color: oklch(0.2 0.02 60);
	background-image: var(--gradient-gold); box-shadow: var(--shadow-gold);
	transition: transform .2s;
}
.btn-book:hover { transform: scale(1.05); }
.btn-outline-gold {
	border-radius: 9999px; padding: .75rem 1.5rem; font-size: .875rem;
	border: 1px solid color-mix(in oklch, var(--gold) 60%, transparent); color: var(--gold);
	transition: background .2s;
}
.btn-outline-gold:hover { background: color-mix(in oklch, var(--gold) 10%, transparent); }
.header-book { display: none; }

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero-media { position: relative; height: 62svh; min-height: 380px; width: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 18% 20%; }
.hero-fade { position: absolute; inset-inline: 0; bottom: 0; height: 50%; background: linear-gradient(to top, var(--background), transparent); }
.hero-overlay { display: none; position: absolute; inset: 0; background-image: var(--gradient-hero); }
.hero-content { position: relative; z-index: 10; margin-top: -5rem; padding-bottom: 4rem; }
.hero-text { max-width: 36rem; }
.hero-welcome { font-family: "Great Vibes", cursive; font-size: 3rem; color: var(--gold); direction: ltr; text-align: right; }
.hero-title { margin-top: .5rem; font-size: 3rem; font-weight: 900; line-height: 1.25; }
.hero-sub { margin-top: 1.25rem; font-size: 1.125rem; color: color-mix(in oklch, var(--foreground) 85%, transparent); }
.hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.hero-video { margin-top: 2rem; display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: color-mix(in oklch, var(--foreground) 85%, transparent); }
.hero-video:hover { color: var(--gold); }
.hero-video .circle { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 1px solid color-mix(in oklch, var(--foreground) 50%, transparent); }

/* Sections */
.section { padding-block: 6rem; }
.section-title h2 { font-size: 1.875rem; font-weight: 900; }
.section-title .rule { margin-top: .75rem; height: 1px; width: 4rem; background: var(--gold); }
.section-title p { margin-top: .75rem; color: var(--muted-foreground); }
.section-title.light h2 { color: var(--cream-foreground); }
.section-title.light p { color: color-mix(in oklch, var(--cream-foreground) 70%, transparent); }

/* Services */
.services-grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.service-card {
	border-radius: 1rem; border: 1px solid var(--border-gold); background: var(--card);
	padding: 1.5rem; text-align: center; transition: transform .2s, border-color .2s, box-shadow .2s;
}
.service-card:hover { transform: translateY(-4px); border-color: color-mix(in oklch, var(--gold) 60%, transparent); box-shadow: var(--shadow-gold); }
.service-card svg { margin-inline: auto; width: 2.5rem; height: 2.5rem; color: var(--gold); }
.service-card h3 { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 700; }
.service-card p { margin-top: .75rem; font-size: .875rem; line-height: 1.75rem; color: var(--muted-foreground); }

/* Gallery */
.gallery-section { background: var(--cream); }
.gallery-head { display: flex; align-items: flex-end; justify-content: space-between; }
.gallery-arrows { display: none; gap: .5rem; }
.gallery-arrows button {
	display: flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; border-radius: 9999px;
	background: var(--cream-foreground); color: var(--cream);
}
.gallery-track { margin-top: 2.5rem; display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-item { position: relative; width: 16rem; flex-shrink: 0; scroll-snap-align: start; overflow: hidden; border-radius: .75rem; border: none; padding: 0; }
.gallery-item img { aspect-ratio: 4/5; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item span { position: absolute; inset-inline: 0; bottom: 0; padding: 1rem; font-size: .875rem; color: var(--cream); background: linear-gradient(to top, color-mix(in oklch, var(--cream-foreground) 80%, transparent), transparent); text-align: right; }
.lightbox { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: color-mix(in oklch, var(--background) 95%, transparent); padding: 1.25rem; }
.lightbox img { max-height: 85vh; border-radius: .75rem; }
.lightbox .close { position: absolute; top: 1.25rem; left: 1.25rem; color: var(--foreground); }

/* Team */
.team-grid { display: grid; align-items: center; gap: 3rem; }
.team-members { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.team-member { text-align: center; }
.team-member .avatar { margin-inline: auto; width: 9rem; height: 9rem; overflow: hidden; border-radius: 9999px; border: 2px solid color-mix(in oklch, var(--gold) 60%, transparent); padding: .25rem; }
.team-member img { width: 100%; height: 100%; border-radius: 9999px; object-fit: cover; }
.team-member h3 { margin-top: 1rem; font-weight: 700; }
.team-member p { font-size: .875rem; color: var(--gold); }

/* About */
.about-section { border-block: 1px solid var(--border-gold); background: var(--card); }
.about-inner { max-width: 48rem; margin-inline: auto; text-align: center; }
.about-inner .script { font-family: "Great Vibes", cursive; font-size: 2.25rem; color: var(--gold); direction: ltr; }
.about-inner h2 { margin-top: .5rem; font-size: 1.875rem; font-weight: 900; }
.about-inner p:last-child { margin-top: 1.5rem; line-height: 2rem; color: var(--muted-foreground); }

/* Contact CTA */
.contact-section { background-image: var(--gradient-blush); padding-block: 5rem; }
.contact-inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.contact-inner h2 { font-size: 1.875rem; font-weight: 900; color: var(--cream-foreground); }
.contact-inner p { margin-top: .75rem; color: color-mix(in oklch, var(--cream-foreground) 75%, transparent); }
.contact-inner .hours { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: color-mix(in oklch, var(--cream-foreground) 70%, transparent); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.btn-whatsapp { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; padding: .75rem 1.75rem; font-weight: 700; background: var(--whatsapp); color: oklch(0.99 0 0); transition: transform .2s; }
.btn-whatsapp:hover { transform: scale(1.05); }
.btn-call { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; padding: .75rem 1.75rem; font-weight: 700; border: 1px solid color-mix(in oklch, var(--cream-foreground) 40%, transparent); background: color-mix(in oklch, var(--cream) 40%, transparent); color: var(--cream-foreground); transition: background .2s; }
.btn-call:hover { background: color-mix(in oklch, var(--cream) 70%, transparent); }

/* Footer */
.site-footer { padding-block: 2.5rem; }
.footer-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; font-size: .875rem; color: var(--muted-foreground); }
.footer-contact { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.footer-contact span { display: flex; align-items: center; gap: .5rem; }
.footer-contact svg, .socials svg { color: var(--gold); }
.socials { display: flex; gap: 1rem; }
.socials a:hover { color: var(--gold); }

/* Responsive */
@media (min-width: 640px) {
	.hero-media { height: 70svh; }
	.hero-media img { object-position: 20% 25%; }
	.hero-content { margin-top: -7rem; }
	.services-grid { grid-template-columns: repeat(2, 1fr); }
	.team-members { grid-template-columns: repeat(3, 1fr); }
	.footer-contact { flex-direction: row; gap: 2rem; }
}
@media (min-width: 1024px) {
	.main-nav { display: flex; }
	.header-book { display: inline-flex; }
	.menu-toggle { display: none; }
	.hero { min-height: 100svh; }
	.hero-media { position: absolute; inset: 0; height: 100%; }
	.hero-media img { object-position: 22% center; }
	.hero-overlay { display: block; }
	.hero-fade { height: 33%; }
	.hero-content { margin-top: 0; min-height: 100svh; display: flex; align-items: center; padding-bottom: 0; }
	.hero-welcome { font-size: 3.75rem; }
	.hero-title { font-size: 4.5rem; }
	.services-grid { grid-template-columns: repeat(3, 1fr); }
	.gallery-arrows { display: flex; }
	.gallery-item { width: 18rem; }
	.team-grid { grid-template-columns: 1fr 2fr; }
	.contact-inner { flex-direction: row; align-items: center; }
	.footer-inner { flex-direction: row; }
}
@media (min-width: 1280px) {
	.services-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Reviews slider */
.rev-slider { margin-top: 3rem; --gap: 1.25rem; --per: 1; }
@media (min-width: 768px) { .rev-slider { --per: 2; } }
@media (min-width: 1100px) { .rev-slider { --per: 3; } }
.rev-viewport { overflow: hidden; padding: .75rem .25rem 1rem; margin-inline: -.25rem; }
.rev-track { display: flex; gap: var(--gap); transition: transform .9s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.rev-track.no-anim { transition: none; }
.rev-card {
	flex: 0 0 calc((100% - var(--gap) * (var(--per) - 1)) / var(--per));
	display: flex; flex-direction: column; gap: 1rem;
	border-radius: 1rem; border: 1px solid var(--border-gold); background: var(--card);
	padding: 1.75rem 1.5rem 1.5rem; transition: border-color .3s, box-shadow .3s;
}
.luxe-3d-on .rev-card { background: color-mix(in oklch, var(--card) 76%, transparent); }
.rev-slider:hover .rev-card, .rev-slider:focus-within .rev-card { border-color: color-mix(in oklch, var(--gold) 45%, transparent); }
.rev-quote { color: var(--gold); opacity: .55; }
.rev-stars { display: flex; gap: .2rem; color: var(--gold); }
.rev-text { flex: 1; font-size: .95rem; line-height: 2; color: color-mix(in oklch, var(--foreground) 85%, transparent); }
.rev-who { display: flex; align-items: center; gap: .85rem; padding-top: 1rem; border-top: 1px solid var(--border-gold); }
.rev-avatar {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 2.75rem; height: 2.75rem; border-radius: 9999px; font-weight: 700;
	background-image: var(--gradient-gold); color: oklch(0.2 0.02 60);
}
.rev-who strong { display: block; font-weight: 700; line-height: 1.5; }
.rev-who span:not(.rev-avatar) { display: block; font-size: .8rem; color: var(--gold); }
.rev-controls { margin-top: .5rem; display: flex; align-items: center; justify-content: center; gap: 1.25rem; }
.rev-btn {
	display: flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; border-radius: 9999px;
	border: 1px solid color-mix(in oklch, var(--gold) 60%, transparent); color: var(--gold);
	transition: background .2s;
}
.rev-btn:hover { background: color-mix(in oklch, var(--gold) 12%, transparent); }
.rev-dots { display: flex; align-items: center; gap: .5rem; }
.rev-dot { width: .5rem; height: .5rem; padding: 0; border-radius: 9999px; background: color-mix(in oklch, var(--foreground) 25%, transparent); transition: width .3s, background .3s; }
.rev-dot.is-active { width: 1.5rem; background: var(--gold); }
@media (prefers-reduced-motion: reduce) { .rev-track { transition: none; } }

/* Nav gap with 7 links */
@media (min-width: 1024px) and (max-width: 1279px) { .main-nav { gap: 1.1rem; } }

/* Menu jumps to the team and reviews: keep the content clear of the fixed header (and the admin bar) */
#team, #reviews { scroll-margin-top: 3rem; }

/* Admin bar: menu jumps */
body.admin-bar #services, body.admin-bar #gallery, body.admin-bar #about, body.admin-bar #contact { scroll-margin-top: 32px; }
@media (max-width: 782px) { body.admin-bar #services, body.admin-bar #gallery, body.admin-bar #about, body.admin-bar #contact { scroll-margin-top: 46px; } }