/* Vibes website skin for GymStrato public pages (served by vibesgym.com).
   Only applies when gs-skin.js has added html.vgs, so GymStrato looks the same
   as before if the skin is not loaded. Colours follow the website, and the
   seasonal theme when html.vt-on is set. */

html.vgs{
  --vgs-accent:var(--vt-accent,#77679a);
  --vgs-accent-text:var(--vt-accent-text,#fff);
  --vgs-soft:var(--vt-accent-soft,#f4f0fb);
  --vgs-head:var(--vt-header,#0b0b0d);
  --vgs-ink:#111827;
  --vgs-muted:#5a5866;
  --vgs-line:#ece9f5;
  --vgs-page:#faf9fd;
}
html.vgs.vt-on{--vgs-page:var(--vt-tint,#fdf6f0)}

/* Website type and page colour */
html.vgs body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;background:var(--vgs-page)!important;color:var(--vgs-ink)!important;-webkit-font-smoothing:antialiased}

/* GymStrato's own header and footer are replaced by the website's */
html.vgs [data-vgs-hidden]{display:none!important}
html.vgs .vgs-top{position:sticky;top:0;z-index:900}
html.vgs .vgs-foot{margin-top:56px}

/* Title band across the full width (same as the website's legal and timetable pages) */
html.vgs .vgs-band{background:var(--vgs-head);background:linear-gradient(160deg,var(--vgs-head),#0b0b0d 75%);color:#fff;padding:48px 0 34px}
html.vgs .vgs-band-in{max-width:1600px;margin:0 auto;padding:0 clamp(18px,3vw,40px)}
html.vgs .vgs-band h1{margin:0 0 8px;font-size:clamp(32px,5vw,52px);font-weight:900;line-height:1.05;letter-spacing:-.02em;color:#fff}
html.vgs .vgs-band p{margin:0;max-width:760px;font-size:17px;color:rgba(255,255,255,.85)}
html.vgs [data-vgs-moved]{display:none!important}

/* Full width on desktop: the page uses the same width as the website */
@media (min-width:900px){
  html.vgs:not(.vgs-app) main,
  html.vgs:not(.vgs-app) main > div,
  html.vgs:not(.vgs-app) main .max-w-xl,
  html.vgs:not(.vgs-app) main .max-w-2xl,
  html.vgs:not(.vgs-app) main .max-w-3xl,
  html.vgs:not(.vgs-app) main .max-w-4xl,
  html.vgs:not(.vgs-app) main .max-w-5xl,
  html.vgs:not(.vgs-app) main .max-w-6xl{max-width:1600px!important;width:100%}
  html.vgs:not(.vgs-app) main{margin:0 auto;padding-left:clamp(18px,3vw,40px)!important;padding-right:clamp(18px,3vw,40px)!important}
  html.vgs:not(.vgs-app) main > div{padding-left:0!important;padding-right:0!important}
  /* Form pages: the band runs full width, the form card stays a readable width */
  html.vgs:not(.vgs-app) main > div:has(form):not(:has(.grid-cols-3,.lg\:grid-cols-3)){max-width:1040px!important;margin-left:auto;margin-right:auto}
  /* Forms sit in 2 columns on desktop instead of 1 narrow column */
  html.vgs:not(.vgs-app) main form .grid{gap:18px 24px}
}

/* Cards like the website's */
html.vgs main .rounded-2xl,html.vgs main .rounded-xl{border-radius:18px!important}
html.vgs main .bg-white{box-shadow:0 6px 16px rgba(17,24,39,.08)}
html.vgs main .border-vibe-100,html.vgs main .border-vibe-200{border-color:var(--vgs-line)!important}
@media (min-width:900px){html.vgs main .p-6{padding:clamp(24px,3vw,40px)!important}}

/* Headings and text */
html.vgs main h1,html.vgs main h2{font-weight:900!important;letter-spacing:-.02em;color:var(--vgs-ink)}
html.vgs main h3{font-weight:800}
html.vgs main .text-vibe-600,html.vgs main .text-vibe-700,html.vgs main .text-vibe-500{color:var(--vgs-muted)!important}
html.vgs main .text-vibe-950,html.vgs main .text-vibe-900{color:var(--vgs-ink)!important}
html.vgs main a:not([class*="bg-"]){color:var(--vgs-accent)}

/* Buttons: website buttons, theme colour when a theme is on */
html.vgs main .bg-vibe-600,html.vgs main .bg-vibe-700,html.vgs main .bg-vibe-800,
html.vgs main button[type=submit]:not([class*="bg-white"]){
  background:var(--vgs-accent)!important;border-color:var(--vgs-accent)!important;color:var(--vgs-accent-text)!important;
  font-weight:900!important;border-radius:12px!important;box-shadow:0 12px 26px rgba(119,103,154,.28)}
html.vgs.vt-on main .bg-vibe-600,html.vgs.vt-on main .bg-vibe-700,html.vgs.vt-on main button[type=submit]{box-shadow:0 12px 26px rgba(240,122,34,.3)}
html.vgs main .bg-vibe-600:hover,html.vgs main .bg-vibe-700:hover{filter:brightness(1.08)}
html.vgs main button[type=submit],html.vgs main a.bg-vibe-600{padding-top:14px!important;padding-bottom:14px!important;font-size:16px!important}
html.vgs main .peer:checked + label,html.vgs main .peer-checked\:bg-vibe-600:is(:checked ~ *){background:var(--vgs-accent)!important;border-color:var(--vgs-accent)!important;color:var(--vgs-accent-text)!important}
html.vgs main .bg-vibe-50,html.vgs main .bg-vibe-100{background:var(--vgs-soft)!important}

/* Inputs */
html.vgs main input[type=text],html.vgs main input[type=email],html.vgs main input[type=tel],html.vgs main input[type=date],
html.vgs main input[type=number],html.vgs main input[type=password],html.vgs main input[type=search],html.vgs main select,html.vgs main textarea{
  border:1px solid #dcd7ea!important;border-radius:12px!important;padding:12px 14px!important;font-size:16px!important;background:#fff}
html.vgs main input:focus,html.vgs main select:focus,html.vgs main textarea:focus{outline:3px solid var(--vgs-accent);outline-offset:1px;border-color:var(--vgs-accent)!important}
html.vgs main label.block{font-weight:700;color:var(--vgs-ink)!important;font-size:14px!important}
html.vgs main input[type=checkbox]{accent-color:var(--vgs-accent);width:18px;height:18px}

/* ---------- App pages (/app/...) ---------- */
/* Pages that centre a single card in the window (sign in, reset password) */
html.vgs body:has(> .vgs-host){display:block!important;padding:0!important;height:auto!important;min-height:100%}
html.vgs body > .lp-card,html.vgs body > div.max-w-sm{margin:56px auto!important;max-width:440px!important;width:calc(100% - 32px)!important;background:#fff;border-radius:18px;padding:32px 28px;box-shadow:0 14px 28px rgba(17,24,39,.12);color:var(--vgs-ink)}
html.vgs body > .lp-card :is(h1,h2,label,.text-white),html.vgs body > div.max-w-sm :is(h1,h2,label,.text-white){color:var(--vgs-ink)!important}
html.vgs body > .lp-card :is(p,div,span)[class*="text-vibe-"],html.vgs body > div.max-w-sm :is(p,div,span)[class*="text-vibe-"]{color:var(--vgs-muted)!important}
html.vgs body > .lp-card a:not([class*="bg-"]):not([class*="border"]),html.vgs body > div.max-w-sm a:not([class*="bg-"]):not([class*="border"]){color:var(--vgs-accent)!important}
html.vgs body > .lp-card a[class*="border"],html.vgs body > div.max-w-sm a[class*="border"]{color:var(--vgs-ink)!important;border-color:#dcd7ea!important;border-radius:12px!important;font-weight:700}
html.vgs body > .lp-card :is(input,select,textarea),html.vgs body > div.max-w-sm :is(input,select,textarea){background:#fff!important;color:var(--vgs-ink)!important;border:1px solid #dcd7ea!important;border-radius:12px!important;padding:12px 14px!important;font-size:16px!important}
html.vgs body > .lp-card :is(input,select,textarea):focus,html.vgs body > div.max-w-sm :is(input,select,textarea):focus{outline:3px solid var(--vgs-accent);outline-offset:1px}
html.vgs body > .lp-card :is(button[type=submit],.bg-vibe-600,.bg-vibe-500),html.vgs body > div.max-w-sm :is(button[type=submit],.bg-vibe-600,.bg-vibe-500){background:var(--vgs-accent)!important;color:var(--vgs-accent-text)!important;border-radius:12px!important;font-weight:900!important;padding-top:14px!important;padding-bottom:14px!important}
html.vgs body > .lp-card [data-brand-logo],html.vgs body > div.max-w-sm [data-brand-logo]{display:none!important}
html.vgs body > .lp-card svg,html.vgs body > div.max-w-sm svg{color:var(--vgs-muted)}
html.vgs body > .lp-card img,html.vgs body > div.max-w-sm img{max-height:72px;width:auto;margin:0 auto}

/* Phone column pages (shop, basket, classes, account) */
html.vgs-app body > div.min-h-full{background:transparent!important;min-height:0!important}
@media (min-width:900px){
  html.vgs-app body > div[class*="max-w-"]:not(.lp-card):not(.max-w-sm){max-width:1600px!important;width:100%;padding-left:clamp(18px,3vw,40px);padding-right:clamp(18px,3vw,40px);box-sizing:border-box}
  /* The app's page header becomes the website's dark title band */
  html.vgs-app [data-vgs-apphead]{margin:0 calc(-1 * clamp(18px,3vw,40px));padding:40px clamp(18px,3vw,40px) 30px!important;background:linear-gradient(160deg,var(--vgs-head),#0b0b0d 75%)!important}
  html.vgs-app [data-vgs-apphead] :is(h1,h2,.text-xl,.text-2xl){font-size:clamp(30px,4vw,46px)!important;font-weight:900!important;letter-spacing:-.02em}
  /* Bottom tab bar becomes a tab row under the title band */
  html.vgs-app body > div > nav.fixed{position:static!important;max-width:none!important;margin:20px 0 0!important;display:flex!important;gap:8px;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
  html.vgs-app body > div > nav.fixed > *{flex:0 0 auto;display:flex!important;flex-direction:row!important;align-items:center;gap:8px;padding:10px 18px!important;border-radius:999px;background:#fff;border:1px solid var(--vgs-line)!important;font-size:15px!important;font-weight:700;color:var(--vgs-ink)!important}
  html.vgs-app body > div > nav.fixed > *[aria-current],html.vgs-app body > div > nav.fixed > .text-vibe-700,html.vgs-app body > div > nav.fixed > [class*="font-semibold"]{background:var(--vgs-accent)!important;color:var(--vgs-accent-text)!important;border-color:var(--vgs-accent)!important}
  html.vgs-app body > div > nav.fixed > *::before{display:none!important}
  html.vgs-app body > div > *{order:2}
  html.vgs-app body > div > header{order:0}
  html.vgs-app body > div > nav.fixed{order:1}
  html.vgs-app main{padding-left:0!important;padding-right:0!important;padding-bottom:24px!important}
  /* Lists of cards (products, classes) sit in a grid */
  html.vgs-app main div:has(> a.rounded-xl + a.rounded-xl){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:16px;align-items:stretch}
  html.vgs-app main div:has(> a.rounded-xl + a.rounded-xl) > *{margin:0!important}
  html.vgs-app main div:has(> a.rounded-xl + a.rounded-xl) > :not(a){grid-column:1 / -1}
  html.vgs-app body > div.max-w-md.pb-20{padding-bottom:0!important}
}

/* GymStrato's own dark hero restyled in place as the website title band,
   so the heading, line, reviews and trial bar all sit in one band and no
   second dark strip stacks under it. */
html.vgs:not(.vgs-app) .vgs-nativeband{padding:40px 0 34px!important;background:linear-gradient(160deg,var(--vgs-head),#0b0b0d 75%)!important;border:0!important}
html.vgs:not(.vgs-app) .vgs-nativeband > *{max-width:1600px!important;margin-left:auto!important;margin-right:auto!important;padding-left:clamp(18px,3vw,40px)!important;padding-right:clamp(18px,3vw,40px)!important;text-align:left!important}
html.vgs:not(.vgs-app) .vgs-nativeband :is(h1,h2){font-size:clamp(32px,5vw,52px)!important;font-weight:900!important;letter-spacing:-.02em;color:#fff!important}
html.vgs:not(.vgs-app) .vgs-nativeband p{max-width:760px}

/* Embeds keep their own layout but take the theme colours */
html.vgs-frame .bg-vibe-600,html.vgs-frame button[type=submit]{background:var(--vt-accent,#77679a)!important;border-color:var(--vt-accent,#77679a)!important}

/* Match vibesgym.com type exactly. GymStrato ships headings in Inter Tight, which
   reads as a different site next to the website's system font. Force the website's
   own font stack across every GymStrato public page so it all looks as one. */
html.vgs:not(.vgs-app) :is(h1,h2,h3,h4,h5,h6,p,a,span,li,strong,em,b,small,label,button,input,select,textarea,th,td,dd,dt,blockquote,figcaption,div){
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif!important;
}

/* Full width lists (the join memberships): a group with a single card used to leave the
   second grid column empty, so the row looked half full with a gap beside it. A lone card
   now spans the whole row; groups with two cards still sit side by side. */
html.vgs:not(.vgs-app) main :is(.grid-cols-2,.sm\:grid-cols-2,.md\:grid-cols-2,.lg\:grid-cols-2) > :only-child{grid-column:1 / -1!important}

/* Booking widgets (iframes) in theme-only mode: beyond the solid accent on buttons and the
   selected day/time, tint the soft purple panels to the accent tint, quiet the muted purple
   labels to neutral grey, and put links in the accent, so the widget matches the website. */
html.vgs-frame :is(.bg-vibe-50,.bg-vibe-100){background:var(--vt-accent-soft,#f4f0fb)!important}
html.vgs-frame :is(.text-vibe-500,.text-vibe-600,.text-vibe-700){color:#5a5866!important}
html.vgs-frame a:is(.text-vibe-600,.text-vibe-700),html.vgs-frame .underline{color:var(--vt-accent,#77679a)!important}

/* Join memberships: the card grid sat 16px inside its group header and the trial bar (the
   header bleeds out of the px-4 wrapper, the cards did not), leaving a strip down each side.
   Pull the grid out to the same edge so cards line up flush with the headers. */
html.vgs:not(.vgs-app) main .plan-section > .grid{margin-left:-16px!important;margin-right:-16px!important}