/* =========================
   THERA — PREMIUM SURFACE L1
   Narrow visual elevation layer
   Scope: surfaces only, no header/nav logic
   ========================= */

:root {
  --ths-premium-radius-card: 22px;
  --ths-premium-radius-media: 16px;
  --ths-premium-radius-tile: 20px;
  --ths-premium-border: rgba(183, 134, 69, 0.14);
  --ths-premium-shadow:
    0 10px 28px rgba(23, 50, 77, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.72) inset;
  --ths-premium-shadow-hover:
    0 14px 34px rgba(23, 50, 77, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.78) inset;
}

/* Core section rhythm */
.ths-section,
.ths-surface-section,
.ths-home-section,
.ths-module-section {
  margin-bottom: clamp(24px, 4vw, 42px);
}

/* Shared premium card feel for existing modules */
.ths-service-card,
.ths-services .ths-card,
.ths-voucher-card,
.ths-contact-tile,
.ths-checkin-card,
.ths-branch-card,
.ths-about-card,
.ths-surface-card,
.ths-card {
  border: 1px solid var(--ths-premium-border);
  border-radius: var(--ths-premium-radius-card);
  box-shadow: var(--ths-premium-shadow);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(110%) blur(1px);
  -webkit-backdrop-filter: saturate(110%) blur(1px);
  transition: box-shadow .24s ease, transform .24s ease, border-color .24s ease;
}

.ths-service-card:hover,
.ths-voucher-card:hover,
.ths-contact-tile:hover,
.ths-checkin-card:hover,
.ths-branch-card:hover,
.ths-about-card:hover,
.ths-surface-card:hover,
.ths-card:hover {
  box-shadow: var(--ths-premium-shadow-hover);
  border-color: rgba(183, 134, 69, 0.18);
}

/* Inner breathing room without changing layout contracts too hard */
.ths-card-inner,
.ths-service-card__inner,
.ths-voucher-card__inner,
.ths-contact-tile__inner,
.ths-surface-card__inner {
  padding: clamp(14px, 2vw, 20px);
}

/* Media polish */
.ths-card img,
.ths-service-card img,
.ths-voucher-card img,
.ths-about-card img,
.ths-branch-card img {
  border-radius: var(--ths-premium-radius-media);
}

/* Typography hierarchy polish */
.ths-title,
.ths-service-title,
.ths-section-title,
.ths-card-title {
  color: #17324d;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ths-eyebrow,
.ths-section-eyebrow,
.ths-kicker {
  color: #b78645;
  letter-spacing: 0.06em;
}

.ths-subtitle,
.ths-card-subtitle,
.ths-section-subtitle,
.ths-body-muted {
  color: #6f6258;
  opacity: 0.92;
}

/* CTA visual lift only; no geometry refactor */
.ths-btn,
.ths-button,
.ths-cta,
button.ths-btn,
a.ths-btn {
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.ths-btn-primary,
.ths-btn--primary,
.ths-cta-primary {
  box-shadow: 0 10px 22px rgba(183, 134, 69, 0.18);
}

.ths-btn-secondary,
.ths-btn--secondary,
.ths-cta-secondary {
  box-shadow: 0 8px 18px rgba(23, 50, 77, 0.06);
}

.ths-btn:active,
.ths-button:active,
.ths-cta:active {
  transform: translateY(1px);
}

/* Contact apps / tiles */
.ths-contact-tile,
.ths-app-tile,
.ths-contact-app {
  text-align: center;
  padding: clamp(12px, 2vw, 16px);
}

/* Price emphasis */
.ths-price,
.ths-service-price,
.ths-price-current {
  color: #17824f;
}

/* Badge softness */
.ths-badge,
.ths-chip,
.ths-pill {
  border-radius: 999px;
}

/* Mobile: keep subtle and safe */
@media (max-width: 767.98px) {
  .ths-service-card,
  .ths-voucher-card,
  .ths-contact-tile,
  .ths-checkin-card,
  .ths-branch-card,
  .ths-about-card,
  .ths-surface-card,
  .ths-card {
    border-radius: 20px;
  }
}


/* Services media should round at the media wrapper, not only the img,
   to avoid square-looking faded corners inside rounded cards. */
.ths-services .ths-card__media,
.ths-service-card__media{
  border-radius: var(--ths-premium-radius-media);
  overflow:hidden;
}

.ths-services .ths-card__img,
.ths-service-card__img{
  border-radius:0 !important;
}

/* PHASE 1 MOBILE PATCH */
@media(max-width:768px){
  .booking-layout{display:flex!important;flex-direction:column!important;}
  .booking-right{position:relative!important;top:auto!important;}
  .summary-footer{position:fixed;bottom:0;left:0;right:0;background:#fff;z-index:999;padding:12px;}
  .service-chip{font-size:16px!important;padding:10px 14px!important;margin:4px;}
}