/* ==========================================================================
   Karisa 9 Beauty Salon — Landing Page Styles
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap');

@font-face {
  font-family: 'Dream Avenue';
  src: url('../fonts/DreamAvenue.woff2') format('woff2'),
       url('../fonts/DreamAvenue.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --lavender: #BFA7E3;
  --lavender-light: #E6D9F2;
  --purple: #A98FD5;
  --white: #FFFFFF;
  --off-white: #FAF8FC;
  --dark: #3A3545;
  --purple-muted: #766494;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Dream Avenue has no Cyrillic glyphs — reserve it for Latin brand
     moments only (logotype, numerals), never for body/heading text. */
  --font-accent: 'Dream Avenue', 'Playfair Display', Georgia, serif;

  --shadow-soft: 0 20px 50px -20px rgba(58, 53, 69, 0.25);
  --shadow-card: 0 10px 30px -12px rgba(58, 53, 69, 0.18);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --container: 1180px;
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--off-white);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

ul { list-style: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section { position: relative; }

/* Keeps every nav-link anchor (including "Начало" landing on #hero,
   which sits at scrollY 0) clear of the sticky header by the same
   amount, so scrolling to any section feels consistent. */
section[id] { scroll-margin-top: 92px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--dark);
  line-height: 1.15;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--purple-muted);
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--purple-muted);
  display: inline-block;
}

/* The hero eyebrow reads as a title line, so it goes without the rule. */
.eyebrow-plain::before { display: none; }

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.section-head h2 {
  font-size: clamp(32px, 4vw, 44px);
  margin-top: 14px;
}

.section-head p {
  margin-top: 16px;
  color: var(--purple-muted);
  font-size: 17px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--dark);
  color: var(--white);
  box-shadow: 0 14px 30px -10px rgba(58, 53, 69, 0.45);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -10px rgba(58, 53, 69, 0.55);
}

.btn-outline {
  background: transparent;
  color: var(--dark);
  border: 1.5px solid var(--dark);
}

.btn-outline:hover {
  background: var(--dark);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-light {
  background: var(--white);
  color: var(--dark);
}

.btn-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.25);
}

.btn-sm { padding: 11px 22px; font-size: 14px; }

/* ---------- Decorative squiggle (from brand mark) ---------- */
.squiggle {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(0px);
  z-index: 0;
}

/* ---------- Header ---------- */
/* Note: backdrop-filter lives on ::before (not .site-header itself) because
   filter/backdrop-filter on an element creates a new containing block for
   its position:fixed descendants — that would trap .nav-links.open's
   full-screen mobile menu inside the header's own small box. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(169, 143, 213, 0.15);
}

.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 92px;
}

.logo {
  display: flex;
  align-items: center;
}

/* The artwork's ink sits noticeably below its own vertical center (the
   wordmark's caption row weighs down the bottom), so flex-centering the
   raw image box reads as bottom-heavy. Nudging it up compensates. */
.logo-mark-full {
  height: 58px;
  width: auto;
  transform: translateY(-8%);
}

.logo-mark-mono {
  transform: translateY(-2%);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-links a {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  position: relative;
  padding: 6px 0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--purple);
  transition: width 0.25s ease;
}

.nav-links a:hover::after { width: 100%; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.header-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--dark);
}

.header-phone svg { flex-shrink: 0; color: var(--purple); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  z-index: 200;
}

.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-header.scrolled {
  box-shadow: 0 8px 24px -16px rgba(58, 53, 69, 0.35);
}

/* ---------- Hero ---------- */
.hero {
  padding: 88px 0 120px;
  background: linear-gradient(180deg, var(--off-white) 0%, var(--lavender-light) 100%);
  overflow: hidden;
}

.hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero-content h1 {
  font-size: clamp(42px, 5.4vw, 68px);
  margin: 18px 0 22px;
}

.hero-content h1 em {
  font-style: normal;
  color: var(--purple);
  position: relative;
}

.hero-content p {
  font-size: 18px;
  color: var(--purple-muted);
  max-width: 480px;
  margin: 0 auto 34px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px;
}

.hero-meta {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 700;
}

.hero-meta-item .icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
}

/* ---------- About ---------- */
.about {
  padding: 120px 0;
}

.about .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
  text-align: center;
}

.about-text h2 {
  font-size: clamp(30px, 3.6vw, 40px);
  margin: 14px 0 20px;
}

.about-text p {
  color: var(--purple-muted);
  font-size: 16.5px;
  margin: 0 auto 28px;
  max-width: 520px;
}

/* Centred as a block, but each item keeps its icon+text left-aligned
   so the ticks line up with one another. */
.about-list {
  display: grid;
  gap: 18px;
  width: fit-content;
  margin: 0 auto 32px;
  text-align: left;
}

.about-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
  font-size: 15.5px;
}

.about-list .icon-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--lavender-light);
  color: var(--purple-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---------- Services ---------- */
.services {
  padding: 120px 0;
  background: var(--white);
}

.cat-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 46px;
}

.cat-tab {
  padding: 11px 24px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--purple-muted);
  background: var(--off-white);
  border: 1px solid rgba(169, 143, 213, 0.25);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cat-tab:hover { color: var(--dark); border-color: var(--purple); }

.cat-tab.active {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
}

/* Without JS every panel stays visible, so the full price list is
   still readable and indexable; the script adds the filtering. */
.cat-panel { display: none; }
.cat-panel.active { display: block; }

.service-group + .service-group { margin-top: 46px; }

.service-group-title {
  font-size: 22px;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(169, 143, 213, 0.25);
}

.service-list { display: block; }

.service-row {
  padding: 16px 0;
  border-bottom: 1px solid rgba(169, 143, 213, 0.14);
}

.service-row:last-child { border-bottom: none; }

.service-row-main {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.service-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--dark);
}

.service-duration {
  font-size: 13.5px;
  color: var(--purple-muted);
  white-space: nowrap;
}

/* Dotted leader keeps long service names visually tied to their price. */
.service-row-main::before {
  content: '';
  flex: 1;
  order: 2;
  border-bottom: 1px dotted rgba(118, 100, 148, 0.35);
  transform: translateY(-4px);
}

.service-duration { order: 3; }

.service-price {
  order: 4;
  font-weight: 800;
  font-size: 16px;
  color: var(--dark);
  white-space: nowrap;
  min-width: 62px;
  text-align: right;
}

.variants {
  margin: 10px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--lavender-light);
  display: grid;
  gap: 7px;
}

.variant {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 14.5px;
  color: var(--purple-muted);
}

.variant-label { flex: 1; }

.variant-duration {
  font-size: 13px;
  white-space: nowrap;
}

.variant-price {
  font-weight: 700;
  color: var(--dark);
  white-space: nowrap;
  min-width: 62px;
  text-align: right;
}

/* ---------- Booking ---------- */
/* Left on the page background so it separates from the white price list
   above it and the white gallery below. */
.booking {
  padding: 120px 0;
}

/* ---------- Booking embed (studio24 iframe) ---------- */
/* The container carries the height; the fallback and the frame both fill it.
   The frame sits on top, so a blocked one — which renders transparent —
   simply reveals the fallback underneath instead of leaving a blank box. */
.booking-embed {
  position: relative;
  height: clamp(520px, 78vh, 760px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--off-white);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(169, 143, 213, 0.22);
}

/* The catalogue inside is far taller than any frame we could give it, so it
   always scrolls internally. Keeping the frame shorter than the viewport
   means the visitor scrolls inside it instead of scrolling the page past it. */
.booking-embed iframe {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Stands in for the form wherever studio24 will not serve it. Layered
   underneath rather than hidden, so it also covers the case where the frame
   loads but the browser refuses to render it. */
.booking-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 40px 24px;
}

.booking-fallback img {
  width: 220px;
  max-width: 70%;
  height: auto;
  margin-bottom: 14px;
}

.booking-fallback h3 {
  font-size: clamp(19px, 2.4vw, 24px);
  color: var(--dark);
}

.booking-fallback p {
  color: var(--purple-muted);
  font-size: 16px;
  margin-bottom: 12px;
}

/* ---------- Gallery ---------- */
.gallery {
  padding: 120px 0;
  background: var(--white);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 160px);
  gap: 20px;
}

.gallery-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery-item:nth-child(4) { grid-column: span 2; }

/* ---------- CTA ---------- */
/* Shares the gallery's background so the dark card reads as part of that
   section rather than sitting on a strip of its own. The width limit moved
   to the card itself, so the background can reach the edges of the page. */
.cta {
  background: var(--white);
  padding: 0 24px 120px;
}

.cta-inner {
  /* container width minus its 24px gutters, so the card lines up with the
     content of every other section */
  max-width: calc(var(--container) - 48px);
  margin: 0 auto;
  background: var(--dark);
  border-radius: var(--radius-lg);
  padding: 70px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  overflow: hidden;
}

.cta-inner h2 {
  color: var(--white);
  font-size: clamp(28px, 3.4vw, 38px);
  max-width: 480px;
  position: relative;
  z-index: 1;
}

.cta-inner p {
  color: var(--lavender-light);
  margin-top: 14px;
  font-size: 16px;
  max-width: 420px;
  position: relative;
  z-index: 1;
}

.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

/* ---------- Contact / Location ---------- */
.contact {
  padding: 120px 0;
  background: var(--off-white);
}

/* The card and map get their own grid so the heading stays outside it —
   otherwise the grid's row-gap adds to the heading's margin and the spacing
   drifts from the other sections (and differs again at each breakpoint). */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.contact-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 50px;
  box-shadow: var(--shadow-card);
}

.contact-info-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 30px;
}

.contact-info-item:last-child { margin-bottom: 0; }

.contact-info-item .icon-badge {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--lavender-light);
  color: var(--purple-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info-item h4 {
  font-size: 16px;
  margin-bottom: 4px;
}

.contact-info-item p, .contact-info-item a {
  color: var(--purple-muted);
  font-size: 15px;
}

.contact-info-item p + p { margin-top: 3px; }

.contact-info-item a:hover { color: var(--dark); }

.contact-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  min-height: 380px;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
  display: block;
}

.social-row {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}

.social-row a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--lavender-light);
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.social-row a:hover {
  background: var(--dark);
  color: var(--white);
  transform: translateY(-3px);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--dark);
  color: var(--lavender-light);
  padding: 70px 0 30px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(230, 217, 242, 0.15);
}

.footer-logo {
  display: inline-flex;
  margin-bottom: 18px;
}

.footer-logo .logo-mark-full { height: 50px; }

.footer-top p {
  color: rgba(230, 217, 242, 0.7);
  font-size: 14.5px;
  max-width: 320px;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--white);
}

.footer-col ul { display: grid; gap: 12px; }

.footer-col a, .footer-col span {
  font-size: 14.5px;
  color: rgba(230, 217, 242, 0.75);
  transition: color 0.2s ease;
}

.footer-col a:hover { color: var(--lavender); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  font-size: 13.5px;
  color: rgba(230, 217, 242, 0.55);
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 160px); }
  .gallery-item:nth-child(4) { grid-column: span 1; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 860px) {
  .nav-links, .header-phone { display: none; }
  .nav-toggle { display: flex; }

  .nav-links.open {
    display: flex;
    position: fixed;
    inset: 0;
    top: 92px;
    background: var(--off-white);
    flex-direction: column;
    padding: 40px 32px;
    gap: 28px;
    align-items: flex-start;
    z-index: 150;
  }

  .nav-links.open a { font-size: 19px; }

  .cta-inner { flex-direction: column; text-align: center; align-items: center; padding: 50px 32px; }
  .cta-actions { align-items: center; }
}

@media (max-width: 480px) {
  .logo-mark-full { height: 42px; }
  .header-actions { gap: 12px; }
  .btn-sm { padding: 9px 16px; font-size: 13px; }
}

@media (max-width: 640px) {
  /* Stack the price row: name on its own line, duration + price below,
     otherwise long Bulgarian service names wrap into a narrow column. */
  .service-row-main { flex-wrap: wrap; gap: 4px 12px; }
  .service-row-main::before { display: none; }
  .service-name { flex: 0 0 100%; order: 1; }
  .service-duration { order: 2; flex: 1; }
  .service-price { order: 3; min-width: 0; text-align: left; }

  .cat-tab { padding: 9px 18px; font-size: 13.5px; }
  .cat-tabs { gap: 8px; margin-bottom: 34px; }
  .service-group-title { font-size: 19px; }

  .hero { padding: 56px 0 90px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-meta { flex-direction: column; gap: 16px; }
  .section-head { margin-bottom: 40px; }
  .about, .services, .booking, .gallery { padding: 80px 0; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 130px); }
  .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .contact-card { padding: 32px 26px; }
  .footer-top { grid-template-columns: 1fr; }
  .cta { padding: 0 16px 80px; }
}