/**
 * Site content rail — match BMI panel / input border width across sections.
 *
 * Mobile reference: BMI form + table-wrap fill the section container (no extra
 * container inline padding). Other sections currently inset ~16px; this file
 * removes that so borders/media share one symmetrical width.
 */

:root {
  --site-content-rail-width: 100%;
  --site-content-rail-max: min(100%, var(--bmi-form-width, 520px));
}

/* ===== Shared containers: same horizontal box as BMI ===== */
body:not(.dashboard-app-body) .strength-section .container,
body:not(.dashboard-app-body) .strength-container,
body:not(.dashboard-app-body) .faq-section .container,
body:not(.dashboard-app-body) .faq-container,
body:not(.dashboard-app-body) .get-in-touch-section .container,
body:not(.dashboard-app-body) .get-in-touch-container,
body:not(.dashboard-app-body) .gym-gallery-section .container,
body:not(.dashboard-app-body) .gym-gallery-container,
body:not(.dashboard-app-body) .about-section .container,
body:not(.dashboard-app-body) .about-container,
body:not(.dashboard-app-body) .location-section .container,
body:not(.dashboard-app-body) .location-container,
body:not(.dashboard-app-body) .booking-section .container,
body:not(.dashboard-app-body) .booking-container,
body:not(.dashboard-app-body) .membership-section .container,
body:not(.dashboard-app-body) .membership-container,
body:not(.dashboard-app-body) .bmi-section .container,
body:not(.dashboard-app-body) .bmi-container,
body:not(.dashboard-app-body) .programs-section .container,
body:not(.dashboard-app-body) .programs-container {
  width: 100% !important;
  max-width: min(1040px, 100%) !important;
  padding-inline: 0 !important;
  margin-inline: auto !important;
  box-sizing: border-box;
}

/* ===== Bordered / media blocks: one rail width ===== */
body:not(.dashboard-app-body) .bmi-form,
body:not(.dashboard-app-body) .bmi-table-wrap,
body:not(.dashboard-app-body) .bmi-result,
body:not(.dashboard-app-body) .bmi-workspace,
body:not(.dashboard-app-body) .strength-form,
body:not(.dashboard-app-body) .strength-result,
body:not(.dashboard-app-body) .strength-workspace,
body:not(.dashboard-app-body) .strength-panel,
body:not(.dashboard-app-body) .faq-list,
body:not(.dashboard-app-body) .faq-item,
body:not(.dashboard-app-body) .get-in-touch-form,
body:not(.dashboard-app-body) .get-in-touch-panel,
body:not(.dashboard-app-body) .get-in-touch-card,
body:not(.dashboard-app-body) .about-home-spotlight,
body:not(.dashboard-app-body) .location-map-container,
body:not(.dashboard-app-body) .location-map-wrap,
body:not(.dashboard-app-body) .booking-app,
body:not(.dashboard-app-body) .booking-step-panel,
body:not(.dashboard-app-body) .booking-form,
body:not(.dashboard-app-body) .gym-gallery-grid {
  width: var(--site-content-rail-width) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  box-sizing: border-box;
}

/* Map: kill older full-bleed calc widths that break the rail */
body:not(.dashboard-app-body) .location-map-container,
body:not(.dashboard-app-body) .location-map-wrap,
body:not(.dashboard-app-body) .contact-location-map-container {
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  transform: none !important;
}

body:not(.dashboard-app-body) .location-map-wrap iframe,
body:not(.dashboard-app-body) .location-map iframe,
body:not(.dashboard-app-body) .location-map-container iframe {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
}

/* About video frame matches the same outer rail */
body:not(.dashboard-app-body) .about-home-spotlight--video {
  width: 100% !important;
  max-width: 100% !important;
}

body:not(.dashboard-app-body) .about-home-spotlight__media,
body:not(.dashboard-app-body) .about-home-spotlight__video {
  width: 100% !important;
  max-width: 100% !important;
}

/* Facilities: keep rail width, 2 photos per row on mobile */
@media (max-width: 760px) {
  body:not(.dashboard-app-body) .gym-gallery-section--facilities .gym-gallery-grid,
  body:not(.dashboard-app-body) .gym-gallery-section--facilities.gym-gallery-section--showcase .gym-gallery-grid,
  body:not(.dashboard-app-body) .gym-gallery-showcase-layout__grid-top .gym-gallery-grid,
  html body:not(.dashboard-app-body) .gym-gallery-section .gym-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(10px, 2.5vw, 14px) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body:not(.dashboard-app-body) .gym-gallery-section--facilities .gym-gallery-item,
  body:not(.dashboard-app-body) .gym-gallery-section--facilities .gym-gallery-item--facility,
  body:not(.dashboard-app-body) .gym-gallery-section--facilities .gym-gallery-item--feature,
  body:not(.dashboard-app-body) .gym-gallery-section--facilities.gym-gallery-section--showcase .gym-gallery-item,
  body:not(.dashboard-app-body) .gym-gallery-section--facilities .gym-gallery-item:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.dashboard-app-body) .gym-gallery-section--facilities .gym-gallery-trigger,
  body:not(.dashboard-app-body) .gym-gallery-section--facilities .gym-gallery-image {
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    object-fit: cover;
  }

  /* Membership: one full-rail card at a time, centered in the container (no cut-off) */
  body:not(.dashboard-app-body) .membership-section {
    --membership-card-width-mobile: 100%;
    --membership-card-center-padding-mobile: 0px;
    --membership-mobile-edge-gutter-final: 0px;
    --membership-mobile-card-width-final: 100%;
  }

  body:not(.dashboard-app-body) .membership-section .membership-container {
    overflow: hidden !important;
  }

  body:not(.dashboard-app-body) .membership-section .membership-grid,
  body:not(.dashboard-app-body) .membership-grid {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    scroll-padding-inline: 0 !important;
    scroll-padding-left: 0 !important;
    scroll-padding-right: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    scroll-snap-type: x mandatory !important;
    transform: none !important;
    translate: none !important;
  }

  body:not(.dashboard-app-body) .membership-section .membership-grid::before,
  body:not(.dashboard-app-body) .membership-section .membership-grid::after,
  body:not(.dashboard-app-body) .membership-grid::before,
  body:not(.dashboard-app-body) .membership-grid::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    flex: 0 0 0 !important;
  }

  body:not(.dashboard-app-body) .membership-section .membership-card,
  body:not(.dashboard-app-body) .membership-grid .membership-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    flex: 0 0 100% !important;
    box-sizing: border-box !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    transform: none !important;
    opacity: 1 !important;
  }

  body:not(.dashboard-app-body) .membership-section .membership-card.is-active {
    transform: none !important;
  }

  body:not(.dashboard-app-body) .membership-section .membership-selector {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  /* Program cards: same rail width when shown as a carousel/stack */
  body:not(.dashboard-app-body) .programs-section .program-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body:not(.dashboard-app-body) .programs-grid,
  body:not(.dashboard-app-body) .programs-carousel,
  body:not(.dashboard-app-body) .programs-track {
    padding-inline: 0 !important;
  }
}

/* Desktop: keep calculator-style panels on the BMI form rail (520px) when stacked */
@media (min-width: 761px) {
  body:not(.dashboard-app-body) .strength-form,
  body:not(.dashboard-app-body) .strength-result,
  body:not(.dashboard-app-body) .bmi-form,
  body:not(.dashboard-app-body) .bmi-result,
  body:not(.dashboard-app-body) .get-in-touch-form,
  body:not(.dashboard-app-body) .faq-list {
    max-width: var(--site-content-rail-max) !important;
  }

  /* Full-bleed media/cards still use the section container width */
  body:not(.dashboard-app-body) .about-home-spotlight,
  body:not(.dashboard-app-body) .location-map-container,
  body:not(.dashboard-app-body) .location-map-wrap,
  body:not(.dashboard-app-body) .booking-app,
  body:not(.dashboard-app-body) .booking-step-panel,
  body:not(.dashboard-app-body) .gym-gallery-grid,
  body:not(.dashboard-app-body) .faq-item {
    max-width: 100% !important;
  }
}

/* ===== Booking panel — step nav, CTAs, success polish ===== */
html body:not(.dashboard-app-body) .booking-step-panel.premium-glass,
html body:not(.dashboard-app-body) .booking-step-panel,
html body:not(.dashboard-app-body) .booking-step-panel.premium-glass.is-glass-visible,
html body:not(.dashboard-app-body) .booking-step-panel.premium-glass.is-glass-enhanced {
  border: 1px solid var(--site-glass-border, rgba(255, 255, 255, 0.14)) !important;
  box-shadow: var(--site-glass-shadow, 0 20px 56px rgba(0, 0, 0, 0.42)) !important;
}

html body:not(.dashboard-app-body) .booking-step-panel .booking-progress {
  gap: clamp(4px, 1.2vw, 8px) !important;
  overflow: hidden !important;
}

html body:not(.dashboard-app-body) .booking-step-panel .booking-progress-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  gap: clamp(5px, 1.2vw, 8px) !important;
  padding: clamp(6px, 1.5vw, 9px) clamp(4px, 1.2vw, 8px) !important;
  font-size: clamp(11px, 2.8vw, 13px) !important;
}

html body:not(.dashboard-app-body) .booking-step-panel[data-booking-lang="el"] .booking-progress-item {
  font-size: clamp(10.5px, 2.7vw, 12.5px) !important;
}

html body:not(.dashboard-app-body) .booking-step-panel .booking-progress-item > span:last-child,
html body:not(.dashboard-app-body) .booking-step-panel .booking-progress-label,
html body:not(.dashboard-app-body) .booking-step-panel[data-booking-lang="el"] .booking-progress-item > span:last-child,
html body:not(.dashboard-app-body) .booking-step-panel[data-booking-lang="el"] .booking-progress-label {
  font-size: clamp(11px, 2.8vw, 13px) !important;
  line-height: 1.15 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  white-space: normal !important;
}

html body:not(.dashboard-app-body) .booking-step-panel[data-booking-lang="el"] .booking-progress-item > span:last-child,
html body:not(.dashboard-app-body) .booking-step-panel[data-booking-lang="el"] .booking-progress-label {
  font-size: clamp(10.5px, 2.7vw, 12.5px) !important;
}

html body:not(.dashboard-app-body) .booking-step-panel .booking-progress-icon,
html body:not(.dashboard-app-body) .booking-step-panel .booking-progress-item.is-active .booking-progress-icon,
html body:not(.dashboard-app-body) .booking-step-panel .booking-progress-item.is-done .booking-progress-icon {
  width: clamp(24px, 6vw, 30px) !important;
  height: clamp(24px, 6vw, 30px) !important;
}

html body:not(.dashboard-app-body) .booking-step-panel .booking-progress-icon svg,
html body:not(.dashboard-app-body) .booking-step-panel .booking-progress-icon .booking-progress-svg,
html body:not(.dashboard-app-body) .booking-step-panel .booking-progress-icon .booking-progress-tick {
  width: clamp(17px, 4.4vw, 21px) !important;
  height: clamp(17px, 4.4vw, 21px) !important;
}

html body:not(.dashboard-app-body) .booking-step-panel .booking-step-title h3,
html body:not(.dashboard-app-body) .booking-step-panel .booking-panel-header h3 {
  font-size: clamp(0.9375rem, 3.6vw, 1.125rem) !important;
}

html body:not(.dashboard-app-body) .booking-step-panel .booking-program-title {
  font-size: clamp(0.75rem, 3.2vw, 0.875rem) !important;
}

html body:not(.dashboard-app-body) .booking-step-panel .booking-main-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

html body:not(.dashboard-app-body) .booking-step-panel .booking-btn-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.05em !important;
  height: 1.05em !important;
  flex: 0 0 auto !important;
  line-height: 0 !important;
  transition: transform 0.22s ease !important;
}

html body:not(.dashboard-app-body) .booking-step-panel .booking-btn-arrow svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

html body:not(.dashboard-app-body) .booking-step-panel .booking-main-button:hover:not(:disabled) .booking-btn-arrow,
html body:not(.dashboard-app-body) .booking-step-panel .booking-main-button:focus-visible .booking-btn-arrow {
  transform: translateX(3px) !important;
}

html body:not(.dashboard-app-body) .booking-success-card > h3,
html body:not(.dashboard-app-body) .booking-success-reference,
html body:not(.dashboard-app-body) .booking-success-calendar {
  display: none !important;
}

html body:not(.dashboard-app-body) .booking-success-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(14px, 2.5vw, 20px) !important;
  padding: clamp(8px, 2vw, 12px) 0 !important;
  text-align: center !important;
}

html body:not(.dashboard-app-body) .booking-success-text {
  margin: 0 !important;
  color: rgba(250, 249, 254, 0.92) !important;
  font-size: clamp(0.9375rem, 2.2vw, 1.0625rem) !important;
  line-height: 1.45 !important;
}

html body:not(.dashboard-app-body) .booking-success-email-notice {
  margin: 0 !important;
  max-width: 34ch !important;
  color: rgba(250, 249, 254, 0.72) !important;
  font-size: clamp(0.8125rem, 2vw, 0.9375rem) !important;
  line-height: 1.5 !important;
}

html body:not(.dashboard-app-body) .booking-success-icon {
  width: 72px !important;
  height: 72px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.28), transparent 42%),
    linear-gradient(145deg, rgba(222, 36, 47, 1), rgba(180, 24, 34, 0.85)) !important;
  border: 0 !important;
  box-shadow: 0 12px 28px rgba(222, 36, 47, 0.22) !important;
}

html body:not(.dashboard-app-body) .booking-step-panel[data-current-view="success"] .booking-success-icon,
html body:not(.dashboard-app-body) .booking-success-icon.is-animating {
  animation:
    booking-success-icon-shell-in 620ms cubic-bezier(0.2, 0.75, 0.24, 1) both,
    booking-success-icon-shell-glow 2.4s ease-in-out 620ms infinite !important;
}

html body:not(.dashboard-app-body) .booking-success-icon .booking-success-check {
  width: 42px !important;
  height: 42px !important;
  fill: none !important;
  overflow: visible !important;
}

html body:not(.dashboard-app-body) .booking-success-icon .booking-success-check-circle,
html body:not(.dashboard-app-body) .booking-success-icon .booking-success-check-mark {
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 3.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Always visible by default (fallback if animation does not run) */
html body:not(.dashboard-app-body) .booking-success-icon .booking-success-check-circle {
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 0 !important;
  opacity: 0.85 !important;
}

html body:not(.dashboard-app-body) .booking-success-icon .booking-success-check-mark {
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 0 !important;
  opacity: 1 !important;
}

/* Replay draw when success view is shown */
html body:not(.dashboard-app-body) .booking-step-panel[data-current-view="success"] .booking-success-icon .booking-success-check-circle,
html body:not(.dashboard-app-body) .booking-success-icon.is-animating .booking-success-check-circle {
  animation: booking-success-check-circle-draw 700ms cubic-bezier(0.65, 0, 0.35, 1) both !important;
}

html body:not(.dashboard-app-body) .booking-step-panel[data-current-view="success"] .booking-success-icon .booking-success-check-mark,
html body:not(.dashboard-app-body) .booking-success-icon.is-animating .booking-success-check-mark {
  animation: booking-success-check-mark-draw 520ms cubic-bezier(0.65, 0, 0.35, 1) 280ms both !important;
}

@keyframes booking-success-check-circle-draw {
  from {
    stroke-dashoffset: 1;
    opacity: 0.35;
  }

  to {
    stroke-dashoffset: 0;
    opacity: 0.9;
  }
}

@keyframes booking-success-check-mark-draw {
  from {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* ===== Partner logos — Derma Clinic scale + faster carousel ===== */
html body:not(.dashboard-app-body) .partner-logo-scroll {
  --partner-logo-scroll-duration: 16s !important;
}

@media (max-width: 760px) {
  html body:not(.dashboard-app-body) .partner-logo-scroll {
    --partner-logo-scroll-duration: 12s !important;
  }
}

html body:not(.dashboard-app-body) .partner-logo-scroll__item--derma {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body:not(.dashboard-app-body) .partner-logo-scroll__item--derma .partner-logo-scroll__link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: var(--partner-logo-scroll-logo-max-height, 88px) !important;
}

html body:not(.dashboard-app-body) .partner-logo-scroll__image--derma,
html body:not(.dashboard-app-body) .partner-logo-scroll__item--derma .partner-logo-scroll__image,
html body:not(.dashboard-app-body) .partner-logo-scroll__image[src*="derma-clinic"],
html body:not(.dashboard-app-body) .partner-logo-scroll__link img[src*="derma-clinic"] {
  width: auto !important;
  max-width: min(100%, 220px) !important;
  height: auto !important;
  max-height: calc(var(--partner-logo-scroll-logo-max-height, 88px) * 1.55) !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  /* Artwork sits right-biased in the file — nudge left so gaps match Zen / Firma */
  transform: translateX(-20%) scale(1.28);
  transform-origin: center center;
  margin-inline: auto !important;
}

html body:not(.dashboard-app-body) .partnerships-page-partner-logo--derma {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-inline: auto !important;
}

html body:not(.dashboard-app-body) .partnerships-page-partner-logo--derma img,
html body:not(.dashboard-app-body) .partnerships-page-partner-logo img[src*="derma-clinic"] {
  display: block !important;
  width: auto !important;
  max-width: min(100%, 240px) !important;
  max-height: calc(var(--partnerships-page-partner-logo-height, var(--partnerships-page-card-logo-height, 70px)) * 1.45) !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin-inline: auto !important;
  transform: scale(1.22);
  transform-origin: center center;
}