/* ==========================================================================
   Ideal Clinic — facelift layer (2026)
   Loaded after the existing stylesheets and deliberately additive: it retints
   and re-shapes the site without touching the legacy rules underneath.

   Direction: light and airy, centre-read sections, soft rounded forms,
   one calm accent per treatment family, and the Ideal Hair motion system.
   ========================================================================== */

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* brand — unchanged, this is still Ideal Clinic navy */
  --ic-navy:        #2C3A4B;
  --ic-navy-deep:   #1A2332;
  --ic-navy-soft:   #3D4F63;

  /* surfaces — lighter and warmer than the old flat greys */
  --ic-bg:          #FFFFFF;
  --ic-bg-tint:     #F7F8FA;
  --ic-bg-warm:     #FAF7F4;
  --ic-line:        #E6E9EE;
  --ic-line-soft:   #EFF1F5;

  /* text */
  --ic-text:        #1A2332;
  --ic-text-muted:  #5E6879;
  --ic-text-faint:  #8A94A0;

  /* the colour variation: one calm accent per treatment family */
  --ic-plum:        #7C5A8F;
  --ic-plum-bg:     #F4EFF7;
  --ic-amber:       #B08033;
  --ic-amber-bg:    #FAF3E7;
  --ic-rose:        #B5657B;
  --ic-rose-bg:     #FBEFF2;
  --ic-teal:        #3F8C8C;
  --ic-teal-bg:     #ECF5F5;
  --ic-sage:        #5F8B63;
  --ic-sage-bg:     #EFF5EF;
  --ic-sky:         #4A7BA8;
  --ic-sky-bg:      #EDF3F9;

  /* form */
  --ic-radius:      16px;
  --ic-radius-sm:   10px;
  --ic-radius-pill: 999px;
  --ic-shadow:      0 1px 2px rgba(26,35,50,.04), 0 12px 32px rgba(26,35,50,.06);
  --ic-shadow-lift: 0 2px 4px rgba(26,35,50,.05), 0 20px 48px rgba(26,35,50,.10);

  /* motion — identical curve/duration to the Ideal Hair build */
  --ic-ease:        cubic-bezier(.25,.46,.45,.94);
  --ic-dur:         .8s;
}

/* ── Motion primitives ─────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity   var(--ic-dur) var(--ic-ease) var(--reveal-delay, 0s),
    transform var(--ic-dur) var(--ic-ease) var(--reveal-delay, 0s);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ── Header — same shape as idealhair.se ──────────────────────────────── */
/* legacy declares `transition: all .3s`; we need the geometry in there too so
   the bar can slide from full-bleed to an inset rounded one */
body header {
  transition: background-color .45s var(--ic-ease),
              backdrop-filter  .45s var(--ic-ease),
              box-shadow       .45s var(--ic-ease),
              border-radius    .45s var(--ic-ease),
              width            .45s var(--ic-ease),
              height           .45s var(--ic-ease),
              top              .45s var(--ic-ease);
}

/* wordmark: serif, widely tracked, with a spaced sub-line underneath */
#MainLogo { gap: 0; }
header .logo-main {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ic-text);
  transition: color .45s var(--ic-ease);
}
header .logo-sub {
  display: block;
  margin-top: .2rem;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ic-text-faint);
  transition: color .45s var(--ic-ease);
}

/* desktop: links and the booking button share the right-hand side */
@media screen and (min-width: 1000px) {
  header .nav-links { margin-left: auto; gap: 0; }

  /* drawer-only rows — legacy hides .mobile-booking-item the same way */
  header .nav-links > li.ic-drawer-label,
  header .nav-links > li.ic-drawer-foot { display: none !important; }
  header ul li a {
    font-size: .72rem;
    letter-spacing: .15em;
    margin: 0 .875rem;
    font-weight: 400;
  }
  header .nav-cta-wrapper { margin-left: 1.5rem; }
}

/* underline grows from the centre */
.nav-links > li > a { position: relative; transition: color .3s var(--ic-ease); }
.nav-links > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width .38s var(--ic-ease);
}
.nav-links > li > a:hover::after,
.nav-links > li > a:focus-visible::after { width: 100%; }
.nav-links > li > a.ic-active::after { width: 100%; opacity: .55; }

/* booking button: square like idealhair.se, softening as the bar rounds off */
.nav-cta-btn {
  border-radius: 0;
  letter-spacing: .15em;
  transition: transform .35s var(--ic-ease), box-shadow .35s var(--ic-ease),
              background-color .35s var(--ic-ease), border-radius .45s var(--ic-ease);
}
.nav-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(44,58,75,.28); }

/* ── Landing page: clear over the hero, square-edged ──────────────────── */
header.ic-header--overlay {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-radius: 0;
}
header.ic-header--overlay .logo-main { color: #fff; }
header.ic-header--overlay .logo-sub  { color: rgba(255,255,255,.6); }

@media screen and (min-width: 1000px) {
  header.ic-header--overlay ul li a           { color: rgba(255,255,255,.75); }
  header.ic-header--overlay ul li a:hover,
  header.ic-header--overlay ul li a.ic-active { color: #fff; }
}

header.ic-header--overlay .hamburger-on::before {
  background: #fff;
  box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
}
header.ic-header--overlay .hamburger-off::before,
header.ic-header--overlay .hamburger-off::after { background: #fff; }

/* ── …then it detaches into a rounded floating bar on scroll ──────────── */
header.ic-header--overlay.ic-scrolled {
  top: .7rem;
  left: 0;
  right: 0;
  width: calc(100% - 1.6rem);
  max-width: 1400px;
  margin-inline: auto;
  height: 64px;
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 6px rgba(26,35,50,.05), 0 16px 40px rgba(26,35,50,.10);
}
header.ic-header--overlay.ic-scrolled .logo-main { color: var(--ic-text); }
header.ic-header--overlay.ic-scrolled .logo-sub  { color: var(--ic-text-faint); }
header.ic-header--overlay.ic-scrolled .nav-cta-btn { border-radius: 10px; }

@media screen and (min-width: 1000px) {
  header.ic-header--overlay.ic-scrolled ul li a           { color: var(--ic-text-muted); }
  header.ic-header--overlay.ic-scrolled ul li a:hover,
  header.ic-header--overlay.ic-scrolled ul li a.ic-active { color: var(--ic-text); }
}

header.ic-header--overlay.ic-scrolled .hamburger-on::before {
  background: var(--ic-text);
  box-shadow: 0 7px 0 var(--ic-text), 0 14px 0 var(--ic-text);
}
header.ic-header--overlay.ic-scrolled .hamburger-off::before,
header.ic-header--overlay.ic-scrolled .hamburger-off::after { background: var(--ic-text); }

/* the mobile drawer is dark, so its links stay light whatever the bar is doing */
@media screen and (max-width: 999px) {
  header.ic-header--overlay .nav-links.show-navlinks li a { color: rgba(255,255,255,.85); }
  header.ic-header--overlay .nav-links.show-navlinks li a:hover { color: #fff; }
}

/* inner pages keep the solid bar, just with a softer edge once you scroll */
body header:not(.ic-header--overlay).ic-scrolled {
  box-shadow: 0 1px 0 var(--ic-line), 0 8px 28px rgba(26,35,50,.07);
}

/* ── Section furniture — centre-read ───────────────────────────────────── */
.ic-section { padding: clamp(4.5rem, 9vw, 8rem) 1.5rem; }
.ic-section--tint { background: var(--ic-bg-tint); }
.ic-section--warm { background: var(--ic-bg-warm); }
.ic-shell { max-width: 1180px; margin-inline: auto; }
.ic-shell--narrow { max-width: 780px; margin-inline: auto; }

.ic-head { text-align: center; margin-bottom: clamp(2.75rem, 5vw, 4.25rem); }
.ic-eyebrow {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ic-text-faint);
  margin-bottom: 1.1rem;
}
.ic-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--ic-text);
  margin: 0;
}
.ic-title em { font-style: italic; font-weight: 400; }
.ic-lede {
  max-width: 58ch;
  margin: 1.1rem auto 0;
  font-size: clamp(.98rem, 1.5vw, 1.06rem);
  line-height: 1.75;
  color: var(--ic-text-muted);
}
.ic-rule {
  width: 44px; height: 1px;
  background: var(--ic-line);
  margin: 1.6rem auto 0;
}

/* ── Treatment cards — numbered, tinted, calmer ────────────────────────── */
.treatments-section { background: var(--ic-bg); }
.treatments-section .treatments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1.5rem;
}
.treatments-section .treatment-card {
  position: relative;
  background: var(--ic-bg);
  border: 1px solid var(--ic-line);
  border-radius: var(--ic-radius);
  padding: 2.4rem 2rem 2rem;
  box-shadow: var(--ic-shadow);
  overflow: hidden;
  transition: transform .45s var(--ic-ease), box-shadow .45s var(--ic-ease),
              border-color .45s var(--ic-ease);
}
.treatments-section .treatment-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--card-accent, var(--ic-navy));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ic-ease);
}
.treatments-section .treatment-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ic-shadow-lift);
  border-color: transparent;
}
.treatments-section .treatment-card:hover::before { transform: scaleX(1); }

.ic-card-num {
  position: absolute;
  top: 1.6rem;
  right: 1.75rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  color: var(--ic-text-faint);
  opacity: .5;
  letter-spacing: .04em;
}

.treatments-section .treatment-card .card-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--ic-radius-pill);
  background: var(--card-accent-bg, var(--ic-bg-tint));
  color: var(--card-accent, var(--ic-navy));
  margin: 0 0 1.5rem;
  transition: transform .45s var(--ic-ease);
}
/* legacy sets `.treatment-card .card-icon i { color: white }` — the badge is a
   pale tint now, so the glyph has to carry the accent instead */
.treatments-section .treatment-card .card-icon i {
  font-size: 1.45rem;
  line-height: 1;
  color: var(--card-accent, var(--ic-navy));
}
.treatments-section .treatment-card:hover .card-icon { transform: scale(1.06); }

.treatments-section .card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--ic-text);
  margin: 0 0 1.1rem;
}
.treatments-section .card-list { list-style: none; margin: 0; padding: 0; }
/* legacy `.treatment-item` draws divider rows and kills the marker; swap that
   for an accent bullet so each family reads in its own colour */
.treatments-section .card-list li.treatment-item,
.treatments-section .card-list li.behandlingsvarde {
  position: relative;
  border-bottom: 0;
  padding: 0 0 0 1.4rem;
  margin-bottom: .62rem;
  font-size: .94rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--ic-text-muted);
  transition: color .3s var(--ic-ease);
}
.treatments-section .card-list li.treatment-item:hover,
.treatments-section .card-list li.behandlingsvarde:hover {
  padding-left: 1.4rem;
  color: var(--ic-text);
}
.treatments-section .card-list li.treatment-item::before,
.treatments-section .card-list li.behandlingsvarde::before {
  content: "";
  display: block;
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--card-accent, var(--ic-navy));
  opacity: .55;
}
.treatments-section .card-gradient { display: none; }

/* per-family accents */
.treatment-card[data-category="spanst"] { --card-accent: var(--ic-plum);  --card-accent-bg: var(--ic-plum-bg); }
.treatment-card[data-category="lyster"] { --card-accent: var(--ic-amber); --card-accent-bg: var(--ic-amber-bg); }
.treatment-card[data-category="kontur"] { --card-accent: var(--ic-rose);  --card-accent-bg: var(--ic-rose-bg); }
.treatment-card[data-category="har"]    { --card-accent: var(--ic-teal);  --card-accent-bg: var(--ic-teal-bg); }
.treatment-card[data-category="kropp"]  { --card-accent: var(--ic-sage);  --card-accent-bg: var(--ic-sage-bg); }
.treatment-card[data-category="ovrigt"] { --card-accent: var(--ic-sky);   --card-accent-bg: var(--ic-sky-bg); }

/* ── Trust bar ─────────────────────────────────────────────────────────── */
.ic-stats {
  background: var(--ic-bg-tint);
  border-block: 1px solid var(--ic-line-soft);
}
.ic-stats-inner {
  max-width: 1180px;
  margin-inline: auto;
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.4rem 4.5rem;
}
.ic-stat { text-align: center; }
.ic-stat-value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.18rem, 2.2vw, 1.45rem);
  font-weight: 600;
  color: var(--ic-text);
  line-height: 1.2;
  margin: 0;
}
.ic-stat-label {
  font-size: .82rem;
  color: var(--ic-text-muted);
  margin: .25rem 0 0;
}
.ic-stat-sep { width: 1px; height: 34px; background: var(--ic-line); }
@media (max-width: 767px) { .ic-stat-sep { display: none; } }

/* ── Reviews carousel ──────────────────────────────────────────────────── */
.ic-reviews { background: var(--ic-bg-warm); }

.ic-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  margin-bottom: 2.5rem;
}
.ic-rating-stars { display: flex; gap: .2rem; color: var(--ic-amber); font-size: 1.05rem; }
.ic-rating-stars i { color: var(--ic-amber); }
.ic-rating-text { font-size: .9rem; color: var(--ic-text-muted); }
.ic-rating-text strong { color: var(--ic-text); font-weight: 600; }
.ic-rating-link {
  color: var(--ic-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(44,58,75,.28);
  padding-bottom: 1px;
  transition: border-color .3s var(--ic-ease);
}
.ic-rating-link:hover { border-bottom-color: var(--ic-navy); }

.ic-carousel { position: relative; }
.ic-viewport { overflow: hidden; }
.ic-track {
  display: flex;
  gap: 1.5rem;
  transition: transform .62s var(--ic-ease);
  will-change: transform;
}
.ic-review {
  flex: 0 0 calc((100% - 3rem) / 3);
  background: var(--ic-bg);
  border: 1px solid var(--ic-line);
  border-radius: var(--ic-radius);
  padding: 2.1rem 1.9rem;
  box-shadow: var(--ic-shadow);
  display: flex;
  flex-direction: column;
  min-height: 250px;
}
@media (max-width: 991px) { .ic-review { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (max-width: 639px) { .ic-review { flex-basis: 100%; } }

.ic-review-mark {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.6rem;
  line-height: .8;
  color: var(--ic-line);
  margin-bottom: .9rem;
}
.ic-review-stars { display: flex; gap: .15rem; color: var(--ic-amber); font-size: .8rem; margin-bottom: .95rem; }
.ic-review-stars i { color: var(--ic-amber); }
.ic-review-text {
  font-size: .95rem;
  line-height: 1.72;
  color: var(--ic-text-muted);
  margin: 0 0 1.4rem;
  flex: 1;
}
.ic-review-author {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ic-text);
}
.ic-review-meta { font-size: .76rem; color: var(--ic-text-faint); margin-top: .2rem; }

.ic-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.ic-arrow {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--ic-line);
  border-radius: 50%;
  background: var(--ic-bg);
  color: var(--ic-navy);
  cursor: pointer;
  transition: background-color .3s var(--ic-ease), color .3s var(--ic-ease),
              border-color .3s var(--ic-ease), transform .3s var(--ic-ease);
}
.ic-arrow:hover:not(:disabled) { background: var(--ic-navy); color: #fff; border-color: var(--ic-navy); transform: translateY(-1px); }
.ic-arrow:disabled { opacity: .3; cursor: default; }
.ic-arrow i { color: inherit; }
.ic-dots { display: flex; gap: .55rem; }
.ic-dot {
  width: 7px; height: 7px;
  border: 0; padding: 0;
  border-radius: 50%;
  background: var(--ic-line);
  cursor: pointer;
  transition: background-color .3s var(--ic-ease), width .3s var(--ic-ease);
}
.ic-dot.is-active { background: var(--ic-navy); width: 22px; border-radius: var(--ic-radius-pill); }

/* ── Ny skönhetslag — centre-read rework ───────────────────────────────── */
.beauty-law-section { background: var(--ic-bg-tint); }
.beauty-law-section .law-header { text-align: center; }
.beauty-law-section .law-icon {
  width: 60px; height: 60px;
  margin: 0 auto 1.25rem;
  display: grid; place-items: center;
  border-radius: var(--ic-radius-pill);
  background: var(--ic-sage-bg);
  color: var(--ic-sage);
  font-size: 1.5rem;
}
.beauty-law-section .law-icon i { color: var(--ic-sage); font-size: 1.5rem; }
.beauty-law-section .law-badge {
  display: inline-block;
  margin-top: 1rem;
  padding: .4rem 1rem;
  border-radius: var(--ic-radius-pill);
  background: var(--ic-sage-bg);
  color: var(--ic-sage);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.beauty-law-section .law-text { max-width: 720px; margin: 2.25rem auto 0; text-align: center; }
.beauty-law-section .law-intro { font-size: 1.02rem; line-height: 1.8; color: var(--ic-text-muted); }
.beauty-law-section .law-details { margin-top: 2rem; }
.beauty-law-section .law-details h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem; font-weight: 500;
  color: var(--ic-text); margin-bottom: .85rem;
}
.beauty-law-section .law-details p { font-size: .96rem; line-height: 1.78; color: var(--ic-text-muted); }
.beauty-law-section .law-recommendation {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--ic-sage);
  background: var(--ic-bg);
  border-radius: 0 var(--ic-radius-sm) var(--ic-radius-sm) 0;
  text-align: left;
}

/* ── Partner logo strip ────────────────────────────────────────────────── */
#footerDiv { padding-block: clamp(2.5rem, 5vw, 4rem); }
#footerDiv .idealPic, #footerDiv .certPic {
  filter: grayscale(1);
  opacity: .5;
  transition: filter .4s var(--ic-ease), opacity .4s var(--ic-ease);
}
#footerDiv .idealPic:hover, #footerDiv .certPic:hover { filter: grayscale(0); opacity: 1; }

/* ── Team + testimonial cards (om oss) ─────────────────────────────────── */
.team-section .team-card,
.testimonials-section .testimonial-card {
  border-radius: var(--ic-radius);
  border: 1px solid var(--ic-line);
  box-shadow: var(--ic-shadow);
  transition: transform .45s var(--ic-ease), box-shadow .45s var(--ic-ease);
}
.team-section .team-card:hover,
.testimonials-section .testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ic-shadow-lift);
}

/* ── Footer ────────────────────────────────────────────────────────────── */
footer { background: var(--ic-navy-deep); }
.footer-inner {
  max-width: 1180px;
  margin-inline: auto;
  padding: 2.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.footer-brand {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: .18em;
  color: #fff;
}
.footer-copy { font-size: .8rem; color: rgba(255,255,255,.55); }

/* ── Mobile drawer: keep the close button readable ────────────────────── */
/* Legacy paints the X with --text-dark, which is invisible against the dark
   drawer, and on the landing page the scrolled header also shifted out from
   under the user's thumb. While the drawer is open, pin the bar to its clear
   full-width state and force the X light. */
body.ic-menu-open header.ic-header--overlay.ic-scrolled {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  height: 72px;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

body.ic-menu-open .hamburger-off::before,
body.ic-menu-open .hamburger-off::after,
body.ic-menu-open header.ic-header--overlay.ic-scrolled .hamburger-off::before,
body.ic-menu-open header.ic-header--overlay.ic-scrolled .hamburger-off::after {
  background: #fff;
}

/* lift the wordmark above the drawer so the header row stays whole */
body.ic-menu-open .logo-container { position: relative; z-index: 1004; }
body.ic-menu-open .logo-main,
body.ic-menu-open header.ic-header--overlay.ic-scrolled .logo-main { color: #fff; }
body.ic-menu-open .logo-sub,
body.ic-menu-open header.ic-header--overlay.ic-scrolled .logo-sub { color: rgba(255,255,255,.6); }

/* ── Clinic map switcher ──────────────────────────────────────────────── */
.ic-map { display: flex; flex-direction: column; }
.ic-map-tabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.ic-map-tab {
  border: 1px solid var(--ic-line);
  background: var(--ic-bg);
  color: var(--ic-text-muted);
  border-radius: var(--ic-radius-pill);
  padding: .4rem 1.05rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s var(--ic-ease), color .3s var(--ic-ease),
              border-color .3s var(--ic-ease);
}
.ic-map-tab:hover { color: var(--ic-text); border-color: var(--ic-text-faint); }
.ic-map-tab.is-active {
  background: var(--ic-navy);
  border-color: var(--ic-navy);
  color: #fff;
}
.ic-map .map-wrapper { border-radius: var(--ic-radius-sm); }
.ic-map .map-wrapper iframe { border: 0; display: block; }

/* ── Contact list: two clinics ────────────────────────────────────────── */
.info-card .info-list li strong { display: block; }
#site-contact .list-group-item a { color: var(--ic-navy); text-decoration: none; }
#site-contact .list-group-item a:hover { text-decoration: underline; }

/* ── Hero booking buttons ──────────────────────────────────────────────── */
/* Two booking routes now sit one above the other, so the row layout is
   replaced with a stack and every button shares a width. */
.hero-buttons {
  flex-direction: column;
  align-items: flex-start;
  gap: .8rem;
}
.hero-buttons .hero-btn {
  width: 100%;
  max-width: 480px;
  text-align: center;
  letter-spacing: .12em;
}
@media (max-width: 600px) {
  .hero-buttons .hero-btn { max-width: none; font-size: .74rem; padding: .95rem 1.1rem; }
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.ic-toast-wrap {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1100;
  width: min(384px, calc(100vw - 2rem));
}

/* Bootstrap hides `.toast:not(.show)` and forces display:block on `.show`,
   so the flex layout has to be claimed back at matching specificity. */
.ic-toast.show { display: flex; }
.ic-toast {
  gap: .95rem;
  align-items: flex-start;
  max-width: none;
  padding: 1.1rem 1.15rem 1.15rem;
  background: var(--ic-bg);
  border: 1px solid var(--ic-line);
  border-radius: var(--ic-radius);
  box-shadow: var(--ic-shadow-lift);
  font-size: .9rem;
  animation: icToastIn .55s var(--ic-ease) both;
}
@keyframes icToastIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.ic-toast-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--ic-radius-pill);
  background: var(--toast-bg, var(--ic-bg-tint));
  color: var(--toast-fg, var(--ic-navy));
}
.ic-toast-icon i { font-size: 1.05rem; color: var(--toast-fg, var(--ic-navy)); }

.ic-toast[data-tone="amber"] { --toast-fg: var(--ic-amber); --toast-bg: var(--ic-amber-bg); }
.ic-toast[data-tone="rose"]  { --toast-fg: var(--ic-rose);  --toast-bg: var(--ic-rose-bg); }
.ic-toast[data-tone="sage"]  { --toast-fg: var(--ic-sage);  --toast-bg: var(--ic-sage-bg); }
.ic-toast[data-tone="sky"]   { --toast-fg: var(--ic-sky);   --toast-bg: var(--ic-sky-bg); }

.ic-toast-content { flex: 1; min-width: 0; }
.ic-toast-title {
  margin: 0 0 .25rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ic-text);
  line-height: 1.3;
}
.ic-toast .ic-toast-body {
  padding: 0;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ic-text-muted);
}
.ic-toast .ic-toast-body a { color: var(--toast-fg, var(--ic-navy)); }
.ic-toast-action {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .6rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--toast-fg, var(--ic-navy));
}
.ic-toast-action i { font-size: .8rem; transition: transform .3s var(--ic-ease); }
.ic-toast-action:hover { color: var(--toast-fg, var(--ic-navy)); }
.ic-toast-action:hover i { transform: translateX(3px); }

.ic-toast-close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin: -.2rem -.25rem 0 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--ic-radius-pill);
  background: transparent;
  color: var(--ic-text-faint);
  cursor: pointer;
  transition: background-color .25s var(--ic-ease), color .25s var(--ic-ease);
}
.ic-toast-close i { font-size: 1rem; color: inherit; }
.ic-toast-close:hover { background: var(--ic-bg-tint); color: var(--ic-text); }

/* ── Cookie re-open control ────────────────────────────────────────────── */
/* Moved to bottom-left: it used to sit under the toast in the same corner. */
.ic-cookie-btn-wrap { position: fixed; left: 1rem; bottom: 1rem; z-index: 1090; }
.ic-cookie-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ic-line);
  border-radius: var(--ic-radius-pill);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ic-text-muted);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(26,35,50,.10);
  transition: color .3s var(--ic-ease), border-color .3s var(--ic-ease),
              transform .3s var(--ic-ease);
}
.ic-cookie-btn i { font-size: 1rem; color: inherit; }
.ic-cookie-btn:hover { color: var(--ic-navy); border-color: var(--ic-text-faint); transform: translateY(-1px); }

/* ── Address links ─────────────────────────────────────────────────────── */
.ic-address-link {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ic-ease), border-color .3s var(--ic-ease);
}
.ic-address-link i { font-size: .68rem; opacity: .45; transition: opacity .3s var(--ic-ease); }
.ic-address-link:hover { color: var(--ic-navy); border-bottom-color: currentColor; }
.ic-address-link:hover i { opacity: .9; }

/* ── Mobile drawer ─────────────────────────────────────────────────────── */
@media screen and (max-width: 999px) {
  header .nav-links {
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    height: 100dvh;
    padding: 104px 1.6rem 2.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, #1A2332 0%, #141C28 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: none;
  }

  /* entrance stagger, re-run every time the drawer opens */
  header .nav-links > li { opacity: 0; transform: translateY(14px); animation: none; margin: 0; }
  header .nav-links.show-navlinks > li {
    animation: icDrawerItemIn .5s var(--ic-ease) forwards;
  }
  header .nav-links.show-navlinks > li:nth-child(1) { animation-delay: .04s; }
  header .nav-links.show-navlinks > li:nth-child(2) { animation-delay: .08s; }
  header .nav-links.show-navlinks > li:nth-child(3) { animation-delay: .12s; }
  header .nav-links.show-navlinks > li:nth-child(4) { animation-delay: .16s; }
  header .nav-links.show-navlinks > li:nth-child(5) { animation-delay: .20s; }
  header .nav-links.show-navlinks > li:nth-child(6) { animation-delay: .26s; }
  header .nav-links.show-navlinks > li:nth-child(7) { animation-delay: .30s; }
  header .nav-links.show-navlinks > li:nth-child(8) { animation-delay: .34s; }
  header .nav-links.show-navlinks > li:nth-child(9) { animation-delay: .40s; }

  @keyframes icDrawerItemIn {
    to { opacity: 1; transform: translateY(0); }
  }

  /* primary links — booking rows and the footer have their own treatment */
  header .nav-links > li:not(.mobile-booking-item):not(.ic-drawer-foot):not(.ic-drawer-label) > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: .95rem 0;
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.42rem;
    font-weight: 400;
    letter-spacing: .01em;
    text-transform: none;
    color: rgba(255,255,255,.82);
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: color .3s var(--ic-ease), padding-left .3s var(--ic-ease);
  }
  header .nav-links > li > a::after { display: none; }
  header .nav-links > li:not(.mobile-booking-item):not(.ic-drawer-foot) > a:hover,
  header .nav-links > li:not(.mobile-booking-item):not(.ic-drawer-foot) > a:active { color: #fff; padding-left: .35rem; }
  header .nav-links > li > a.ic-active { color: #fff; }
  header .nav-links > li > a.ic-active::before {
    content: "";
    width: 3px;
    height: 1.1em;
    margin-right: .7rem;
    border-radius: 2px;
    background: var(--ic-amber);
  }

  /* booking block */
  .ic-drawer-label {
    padding: 1.85rem 0 .85rem;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);
  }
  header .nav-links > li.mobile-booking-item { margin-bottom: .6rem; }
  header .nav-links > li.mobile-booking-item > a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .95rem 1.1rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--ic-radius-sm);
    background: rgba(255,255,255,.04);
    transition: background-color .3s var(--ic-ease), border-color .3s var(--ic-ease);
  }
  header .nav-links > li.mobile-booking-item > a span { flex: 1; text-align: left; }
  header .nav-links > li.mobile-booking-item > a i:first-child { font-size: .95rem; opacity: .6; }
  header .nav-links > li.mobile-booking-item > a i:last-child { font-size: .85rem; opacity: .55; }
  header .nav-links > li.mobile-booking-item > a:hover,
  header .nav-links > li.mobile-booking-item > a:active {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.3);
    padding-left: 1.1rem;
  }

  /* footer: contact + social */
  .ic-drawer-foot {
    margin-top: auto;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
  }
  header .nav-links > li.ic-drawer-foot > a.ic-drawer-contact,
  .ic-drawer-contact {
    display: flex;
    justify-content: flex-start;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .85rem;
    font-weight: 400;
    border-bottom: 0;
    align-items: center;
    gap: .65rem;
    padding: 0;
    font-size: .85rem;
    letter-spacing: .02em;
    text-transform: none;
    color: rgba(255,255,255,.62);
    text-decoration: none;
    transition: color .3s var(--ic-ease);
  }
  .ic-drawer-contact i { font-size: .95rem; opacity: .55; color: inherit; }
  .ic-drawer-contact:hover { color: #fff; }
  .ic-drawer-social { display: flex; gap: .6rem; margin-top: .85rem; }
  .ic-drawer-social a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--ic-radius-pill);
    color: rgba(255,255,255,.75);
    text-decoration: none;
    transition: background-color .3s var(--ic-ease), color .3s var(--ic-ease),
                border-color .3s var(--ic-ease);
  }
  .ic-drawer-social a i { font-size: 1rem; color: inherit; }
  .ic-drawer-social a:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.34);
    color: #fff;
  }

  /* the toast should not cover the drawer */
  body.ic-menu-open .ic-toast-wrap,
  body.ic-menu-open .ic-cookie-btn-wrap { display: none; }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .ic-track { transition: none; }
  .treatments-section .treatment-card,
  .team-section .team-card,
  .testimonials-section .testimonial-card { transition: none; }
  .ic-toast { animation: none; }
  header .nav-links > li,
  header .nav-links.show-navlinks > li { opacity: 1; transform: none; animation: none; }
}