/* Serenity Booking — frontend (v1.0.9 · stunning quiet-luxury) */
.serenity-wrap{
--ivory:#FAF5EB;--ivory-2:#FBF8F1;--cream:#FFFDF8;
--charcoal:#1F1D18;--charcoal-2:#2A2822;
--sage:#1F3A2E;--sage-2:#2E5844;--sage-soft:#7C8A6B;
--terracotta:#8A5A3A;--gold:#BC8E58;--gold-2:#D9B77E;
--sand:#E4DCCB;--sand-2:#EFE9DB;
--radius:14px;--radius-lg:22px;
--shadow-sm:0 1px 2px rgba(31,29,24,.05),0 6px 20px -12px rgba(31,58,46,.14);
--shadow-md:0 18px 60px -28px rgba(31,58,46,.28);
--shadow-lg:0 40px 120px -40px rgba(31,58,46,.35);
background:
radial-gradient(900px 500px at 100% -10%, rgba(188,142,88,.10), transparent 60%),
radial-gradient(900px 500px at -10% 20%, rgba(124,138,107,.10), transparent 60%),
linear-gradient(180deg,#FBF8F1 0%,#F3EDDF 100%);
color:var(--charcoal);
font-family:'Inter',system-ui,sans-serif;font-weight:400;
/* --serenity-header-offset lets a theme's fixed/sticky nav declare its own height
(e.g. body{--serenity-header-offset:96px}) so content never renders underneath it. */
padding:calc(var(--serenity-header-offset, 0px) + 96px) 24px 80px;
min-height:60vh;position:relative;z-index:1;
overflow-x:hidden;max-width:100vw;
}
.serenity-wrap *{box-sizing:border-box}
.serenity-wrap a{color:var(--sage);text-decoration:none;border-bottom:1px solid transparent;transition:.3s}
.serenity-wrap a:hover{border-bottom-color:var(--sage)}
.serenity-h1{
font-family:'Playfair Display',Georgia,serif;font-weight:400;
font-size:clamp(34px,5.2vw,56px);line-height:1.05;letter-spacing:-.015em;margin:0 0 14px;
}
.serenity-h1 em{font-style:italic;color:var(--sage);font-weight:500;
background:linear-gradient(90deg,var(--sage) 0%, var(--gold) 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.serenity-h2{font-family:'Playfair Display',serif;font-weight:400;font-size:24px;margin:48px 0 16px}
.serenity-eyebrow{
display:inline-block;text-transform:uppercase;letter-spacing:.28em;
font-size:11px;color:var(--sage);margin-bottom:16px;font-weight:500;
}
.serenity-lede{max-width:560px;color:#4a4740;font-size:16.5px;line-height:1.7;margin:0 0 32px;font-weight:300}
/* Auth card (login/signup) */
.serenity-card{
max-width:480px;margin:0 auto;background:#fff;border:1px solid var(--sand);
padding:56px 48px;border-radius:var(--radius-lg);
box-shadow:var(--shadow-md);animation:sfade .8s ease;
}
.serenity-auth{text-align:left}
/* Respect the `hidden` attribute everywhere inside the plugin, even when a
more specific author rule (e.g. .serenity-form label{display:...}) would
otherwise force the element visible. Without this, JS-toggled fields like
name/phone in the account gate stay visible after being "hidden". */
.serenity-wrap [hidden]{display:none !important}
/* Form fields — polished underline + focus glow */
.serenity-form label{
display:block;font-size:11px;text-transform:uppercase;letter-spacing:.22em;
color:var(--charcoal);margin:20px 0 8px;font-weight:500;
}
.serenity-form input,.serenity-form textarea,.serenity-form select{
width:100%;padding:12px 2px;background:transparent;border:0;
border-bottom:1px solid var(--sand);
font-family:inherit;font-size:16px;color:var(--charcoal);outline:none;
transition:border-color .3s,background .3s;
}
.serenity-form input:focus,.serenity-form textarea:focus,.serenity-form select:focus{
border-bottom-color:var(--sage);
}
.serenity-form textarea{
padding:14px 16px;border:1px solid var(--sand);border-radius:12px;background:var(--ivory-2);resize:vertical;
}
.serenity-form textarea:focus{border-color:var(--sage);background:#fff;box-shadow:0 0 0 4px rgba(31,58,46,.06)}
/* Buttons */
.serenity-btn,a.serenity-btn,a.serenity-btn:link,a.serenity-btn:visited,button.serenity-btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
background:linear-gradient(135deg,var(--sage) 0%,#17281f 100%) !important;
color:#fff !important;border:0 !important;
padding:16px 34px;border-radius:999px;
font-family:inherit;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
cursor:pointer;transition:transform .3s ease,box-shadow .3s ease,background .3s;
margin-top:24px;
box-shadow:0 12px 28px -12px rgba(31,58,46,.55),inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.serenity-btn:hover{transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(31,58,46,.6) !important}
.serenity-btn.ghost,a.serenity-btn.ghost,button.serenity-btn.ghost{
background:transparent !important;color:var(--charcoal) !important;
border:1px solid var(--sand) !important;box-shadow:none !important;
}
.serenity-btn.ghost:hover{border-color:var(--sage) !important;color:var(--sage) !important;background:transparent !important;transform:translateY(-1px)}
.serenity-link{color:var(--sage);font-size:13px;letter-spacing:.05em}
.serenity-alt{margin-top:20px;font-size:13px;color:#6a675e}
.serenity-msg{margin-top:16px;font-size:13px;min-height:20px}
.serenity-msg.err{color:var(--terracotta)}
.serenity-msg.ok{color:var(--sage)}
.serenity-notice{max-width:520px;margin:0 auto;text-align:center;color:#6a675e}
/* Dashboard (client-facing) */
.serenity-dashboard{max-width:960px;margin:0 auto}
.serenity-dash-head{margin-bottom:48px}
.serenity-tabs{display:flex;gap:32px;border-bottom:1px solid var(--sand);margin:32px 0}
.serenity-tab,button.serenity-tab{
background:none !important;border:0 !important;padding:16px 0;font-family:inherit;
font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#8a8780 !important;
cursor:pointer;border-bottom:1px solid transparent !important;transition:.3s;
text-decoration:none;box-shadow:none !important;
}
.serenity-tab.active,.serenity-tab:hover{color:var(--charcoal) !important;border-bottom-color:var(--sage) !important}
.serenity-panel{display:none;animation:sfade .5s ease}
.serenity-panel.active{display:block}
.serenity-booking-row{
display:flex;justify-content:space-between;align-items:center;gap:24px;
padding:28px 0;border-bottom:1px solid var(--sand);animation:sslide .5s ease;
}
.serenity-booking-row.muted{opacity:.6}
.serenity-booking-row h3{font-family:'Playfair Display',serif;font-weight:400;font-size:22px;margin:4px 0}
.serenity-booking-row p{margin:0;color:#6a675e;font-size:14px}
.serenity-row-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.serenity-empty{color:#8a8780;font-style:italic}
.serenity-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px}
.serenity-table th,.serenity-table td{padding:16px 12px;border-bottom:1px solid var(--sand);text-align:left}
.serenity-table th{font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:#8a8780;font-weight:500}
/* Payments — card list (replaces bare table) */
.serenity-pay-card{
margin-top:20px;background:#fff;border:1px solid var(--sand);border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);overflow:hidden;
}
.serenity-pay-row{
display:grid;grid-template-columns:1.1fr 1.6fr 1fr .9fr .8fr;gap:12px;align-items:center;
padding:18px 24px;border-bottom:1px solid var(--sand);
}
.serenity-pay-row:last-child{border-bottom:0}
.serenity-pay-head{
background:var(--ivory-2);font-size:11px;text-transform:uppercase;letter-spacing:.2em;
color:#8a8780;font-weight:500;padding:14px 24px;
}
.serenity-pay-row:not(.serenity-pay-head):hover{background:var(--ivory-2)}
.serenity-pay-date{color:#6a675e;font-size:13.5px}
.serenity-pay-service{font-weight:500;color:var(--charcoal)}
.serenity-pay-amount{font-family:'Playfair Display',serif;font-size:16px;color:var(--sage)}
.serenity-pay-receipt{justify-self:end;font-size:13px}
.serenity-badge{
display:inline-flex;align-items:center;justify-self:start;width:fit-content;
padding:5px 12px;border-radius:999px;font-size:11px;font-weight:600;
text-transform:uppercase;letter-spacing:.08em;
}
.serenity-badge-paid{background:rgba(31,58,46,.1);color:var(--sage)}
.serenity-badge-pending{background:rgba(188,142,88,.15);color:var(--terracotta)}
.serenity-badge-failed,.serenity-badge-refunded{background:rgba(178,60,50,.1);color:#b23c32}
@media (max-width:820px){
.serenity-pay-head{display:none}
.serenity-pay-row{grid-template-columns:1fr 1fr;row-gap:6px;padding:16px 18px}
.serenity-pay-receipt{grid-column:2;justify-self:end}
.serenity-badge{grid-column:1}
}
/* Profile — polished card form */
.serenity-profile-card{
margin-top:20px;background:#fff;border:1px solid var(--sand);border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);padding:36px 40px;max-width:640px;
}
.serenity-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.serenity-profile-grid label{position:relative}
.serenity-hint{
display:block;text-transform:none;letter-spacing:0;font-size:12px;color:#8a8780;
font-weight:400;margin-top:-4px;margin-bottom:6px;
}
.serenity-profile-actions{
display:flex;align-items:center;gap:20px;margin-top:8px;padding-top:16px;
border-top:1px solid var(--sand);
}
.serenity-profile-actions .serenity-btn{margin-top:0}
.serenity-profile-actions .serenity-msg{margin-top:0}
@media (max-width:820px){
.serenity-profile-card{padding:28px 24px}
.serenity-profile-grid{grid-template-columns:1fr}
}
/* ---- Booking flow container ---- */
.serenity-book{
max-width:1040px;width:100%;margin:0 auto;
background:linear-gradient(180deg,var(--cream),#F7F1E2);
border:1px solid var(--sand);border-radius:28px;
padding:56px clamp(24px,4vw,64px);
box-shadow:var(--shadow-lg);
position:relative;overflow:hidden;
}
.serenity-book::before{
content:"";position:absolute;top:-80px;right:-80px;width:320px;height:320px;
background:radial-gradient(circle at 30% 30%, rgba(188,142,88,.28), transparent 70%);
pointer-events:none;z-index:0;
}
.serenity-book::after{
content:"";position:absolute;bottom:-60px;left:-60px;width:320px;height:320px;
background:radial-gradient(circle at 70% 70%, rgba(31,58,46,.14), transparent 70%);
pointer-events:none;z-index:0;
}
.serenity-book > *{position:relative;z-index:1}
.serenity-book header{max-width:640px}
/* Progress steps */
.serenity-progress{
list-style:none;display:flex;gap:12px;flex-wrap:wrap;padding:0;margin:32px 0 40px;counter-reset:step;
}
.serenity-progress li{
flex:1;min-width:180px;display:flex;align-items:center;gap:12px;
padding:16px 18px;border:1px solid rgba(31,58,46,.12);border-radius:14px;
font-family:Inter,sans-serif;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
color:#6b6a66;background:rgba(255,255,255,.7);backdrop-filter:blur(6px);
transition:all .3s ease;font-weight:500;
}
.serenity-progress li span{
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:50%;
background:var(--sand-2);color:var(--sage);font-weight:600;font-size:11px;letter-spacing:0;
transition:.3s;
}
.serenity-progress li.is-active{
border-color:var(--sage);color:var(--sage);background:#fff;
box-shadow:0 12px 30px -18px rgba(31,58,46,.4);
}
.serenity-progress li.is-active span{background:var(--sage);color:#fff;transform:scale(1.05)}
.serenity-progress li.is-done{border-color:rgba(188,142,88,.4);color:var(--gold)}
.serenity-progress li.is-done span{background:var(--gold);color:#fff}
/* Step wrappers */
.serenity-step{animation:sfade .6s ease}
/* Service cards */
.serenity-service-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;margin-top:24px;
}
.serenity-service-card,button.serenity-service-card{
background:#fff !important;border:1px solid var(--sand) !important;
padding:28px 26px !important;text-align:left;
font-family:inherit;color:var(--charcoal) !important;cursor:pointer;
transition:transform .35s ease,box-shadow .35s ease,border-color .3s;
border-radius:18px;position:relative;overflow:hidden;
box-shadow:var(--shadow-sm) !important;
white-space:normal !important;display:block !important;width:100%;min-width:0;
word-wrap:break-word;overflow-wrap:break-word;
}
.serenity-service-card::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(160deg,rgba(188,142,88,.12),transparent 55%);
opacity:0;transition:.35s;
}
.serenity-service-card *{white-space:normal !important}
.serenity-service-card:hover{
border-color:var(--sage) !important;transform:translateY(-4px);
box-shadow:var(--shadow-md) !important;
}
.serenity-service-card:hover::before{opacity:1}
.serenity-service-card.selected{
border-color:var(--sage) !important;background:#fff !important;
box-shadow:0 24px 60px -24px rgba(31,58,46,.35),0 0 0 2px rgba(31,58,46,.08) inset !important;
}
.serenity-service-card.selected::after{
content:"";position:absolute;top:16px;right:16px;width:26px;height:26px;border-radius:50%;
background:var(--sage) url("data:image/svg+xml;utf8,") center/14px no-repeat;
box-shadow:0 6px 16px -6px rgba(31,58,46,.5);
}
.serenity-service-card.selected .serenity-service-dot{outline:3px solid var(--gold);outline-offset:2px}
.serenity-service-card h3{
font-family:'Playfair Display',serif !important;font-weight:400 !important;
font-size:22px !important;margin:14px 0 6px !important;color:var(--sage) !important;
text-align:left !important;line-height:1.2 !important;
}
.serenity-service-card p{margin:6px 0;color:#6a675e;font-size:14px;text-align:left}
.serenity-service-desc{font-size:13px !important;color:#8a8780 !important;display:block;line-height:1.55}
.serenity-service-meta{color:var(--charcoal);font-family:Inter,sans-serif;font-size:13.5px;letter-spacing:.02em}
.serenity-service-meta strong{color:var(--gold);font-weight:600;font-size:15px}
.serenity-service-dot{display:inline-block;width:12px;height:12px;border-radius:999px;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--sand)}
/* Calendar + slots */
.serenity-calendar-shell{
display:grid;grid-template-columns:1.15fr 1fr;gap:32px;margin-top:24px;align-items:start;
min-width:0;
}
.serenity-calendar-shell > *{min-width:0}
.serenity-calendar{
background:#fff;border:1px solid var(--sand);padding:28px;border-radius:18px;
box-shadow:var(--shadow-sm);
width:100%;max-width:100%;box-sizing:border-box;
}
.serenity-cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.serenity-cal-head button{
background:var(--ivory-2);border:1px solid var(--sand);width:34px;height:34px;border-radius:50%;
font-size:16px;cursor:pointer;color:var(--charcoal);padding:0;display:grid;place-items:center;
transition:.25s;
}
.serenity-cal-head button:hover{background:var(--sage);color:#fff;border-color:var(--sage)}
.serenity-cal-head strong{font-family:'Playfair Display',serif;font-weight:400;font-size:20px;letter-spacing:.01em}
.serenity-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.serenity-cal-dow{
font-size:10px;text-transform:uppercase;letter-spacing:.22em;color:#8a8780;
text-align:center;padding:8px 0;font-weight:500;
}
.serenity-cal-day{
aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:14px;
background:transparent !important;border:0 !important;cursor:pointer;
color:var(--charcoal) !important;border-radius:50%;transition:.25s;font-family:inherit;font-weight:500;
}
.serenity-cal-day:hover:not(:disabled){background:var(--sand-2) !important;transform:scale(1.06)}
.serenity-cal-day.selected{
background:linear-gradient(135deg,var(--sage),#17281f) !important;color:#fff !important;
box-shadow:0 8px 20px -8px rgba(31,58,46,.55);
}
.serenity-cal-day:disabled{color:#c9c5bd !important;cursor:not-allowed;opacity:.5}
.serenity-cal-day.today{outline:1.5px solid var(--gold);outline-offset:-2px}
.serenity-slots-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.serenity-tz{font-size:11px;color:#8a8780;letter-spacing:.05em}
.serenity-slot-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.serenity-slot,button.serenity-slot{
background:#fff !important;border:1px solid var(--sand) !important;
padding:14px 10px !important;font-family:inherit;font-size:14px;font-weight:500;
cursor:pointer;transition:.25s;border-radius:12px;
color:var(--charcoal) !important;box-shadow:var(--shadow-sm) !important;
}
.serenity-slot small{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-top:3px}
.serenity-slot.is-booked,button.serenity-slot.is-booked{opacity:.45;cursor:not-allowed;text-decoration:line-through;background:#f2f0eb !important}
.serenity-slot.is-booked:hover{transform:none !important;border-color:inherit !important;color:inherit !important}
.serenity-slot:hover{border-color:var(--sage) !important;color:var(--sage) !important;transform:translateY(-2px)}
.serenity-slot.selected{
background:linear-gradient(135deg,var(--sage),#17281f) !important;
border-color:var(--sage) !important;color:#fff !important;
box-shadow:0 12px 24px -10px rgba(31,58,46,.5) !important;
}
/* Summary + confirm */
.serenity-summary{
background:linear-gradient(180deg,#fff,#FBF6E9);
border:1px solid var(--sand);padding:28px 30px;border-radius:18px;margin-bottom:22px;
box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.serenity-summary::before{
content:"";position:absolute;top:0;right:0;width:120px;height:120px;
background:radial-gradient(circle at 70% 30%, rgba(188,142,88,.25), transparent 60%);pointer-events:none;
}
.serenity-summary strong{
font-family:'Playfair Display',serif;font-weight:400;font-size:22px;color:var(--sage);
display:block;margin-bottom:6px;
}
/* Recurrence chips — flex-wrap so each pill sizes to its own text (no
overflow), with white-space:nowrap so a label like "Every 2 weeks" never
wraps to two lines and throws off the row's height. */
.serenity-recurrence{
border:0;padding:0;margin:24px 0 8px;
display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;
}
.serenity-recurrence legend{width:100%;margin-bottom:2px}
.serenity-recurrence label{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:11px 18px;border:1px solid var(--sand);border-radius:999px;background:#fff;
font-size:13px;text-transform:none;letter-spacing:0;cursor:pointer;line-height:1.3;
white-space:nowrap;transition:.25s;color:var(--charcoal);
}
.serenity-recurrence label:hover{border-color:var(--sage);color:var(--sage)}
.serenity-recurrence label:has(input:checked){
background:var(--sage);color:#fff;border-color:var(--sage);
box-shadow:0 8px 18px -10px rgba(31,58,46,.5);
}
.serenity-recurrence input[type=radio]{accent-color:var(--sage);flex:0 0 auto}
.serenity-recurrence input[type=number]{
width:70px;padding:6px 8px;border-radius:8px;border:1px solid var(--sand) !important;background:#fff;
outline:none;
}
.serenity-recurrence input[type=number]:focus{border-color:var(--sage) !important;box-shadow:0 0 0 3px rgba(31,58,46,.08)}
.serenity-occurrences{
flex:1 1 100%;justify-content:flex-start;border-radius:12px !important;
background:var(--ivory-2) !important;color:var(--charcoal) !important;white-space:normal;
}
/* ---- Inline account gate (sign in / create account inside the booking form) ----
A single quiet "Your details" card matching the rest of the booking form —
built entirely from the plugin's own theme tokens so nothing renders in
an off-palette colour, however the parent theme styles its own buttons. */
.serenity-account-gate{
background:#fff;border:1px solid var(--sand);border-radius:18px;
padding:30px 28px;margin-bottom:24px;box-shadow:var(--shadow-sm);animation:sfade .5s ease;
}
.serenity-gate-head{
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:22px;
}
.serenity-gate-head .serenity-eyebrow{margin:0}
.serenity-gate-toggle{
display:inline-flex;padding:4px;background:var(--ivory-2);border:1px solid var(--sand);border-radius:999px;gap:2px;
}
.serenity-gate-toggle-btn{
background:transparent !important;border:0 !important;box-shadow:none !important;cursor:pointer;
padding:9px 18px !important;border-radius:999px !important;margin:0 !important;
font-family:inherit;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
color:var(--charcoal) !important;transition:.25s;
min-width:0;box-sizing:border-box;
}
.serenity-gate-toggle-btn.active{
background:linear-gradient(135deg,var(--sage) 0%,#17281f 100%) !important;color:#fff !important;
box-shadow:0 8px 18px -10px rgba(31,58,46,.5) !important;
}
.serenity-gate-form{margin:0}
.serenity-gate-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 24px}
.serenity-gate-form label{margin:18px 0 8px}
.serenity-gate-note{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:#8a8780}
.serenity-gate-note a{color:var(--sage)}
.serenity-gate-form .serenity-btn{width:100%;margin-top:24px}
.serenity-booking-as{
margin:0 0 18px;font-size:13px;color:var(--sage);background:var(--ivory-2);
border:1px solid var(--sand);border-radius:999px;padding:9px 16px;display:inline-block;
}
@media (max-width:680px){ .serenity-gate-row{grid-template-columns:1fr} }
/* Total bar */
.serenity-total{
margin:22px 0 10px;padding:20px 24px;border-radius:14px;
background:linear-gradient(135deg,#1F3A2E,#17281f);color:#fff;
display:flex;justify-content:space-between;align-items:baseline;
font-family:'Playfair Display',serif;
box-shadow:0 20px 40px -20px rgba(31,58,46,.6);
}
.serenity-total .lbl{
font-family:Inter,sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:rgba(255,255,255,.75);font-weight:500;
}
.serenity-total .amt{font-size:30px;font-weight:500;letter-spacing:-.01em}
.serenity-total .amt em{font-style:normal;color:var(--gold-2)}
.serenity-secure-note{
margin-top:14px;font-size:12.5px;color:#6b6a66;font-family:Inter,sans-serif;
display:flex;align-items:center;gap:8px;justify-content:center;
}
/* Animations */
@keyframes sfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sslide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* Responsive */
@media (max-width:820px){
.serenity-wrap{padding:calc(var(--serenity-header-offset, 0px) + 72px) 14px 56px}
.serenity-book{padding:36px 22px;border-radius:22px}
.serenity-card{padding:36px 26px}
.serenity-calendar-shell{grid-template-columns:1fr;gap:24px}
.serenity-tabs{gap:16px;overflow-x:auto}
.serenity-booking-row{flex-direction:column;align-items:flex-start}
.serenity-slot-list{grid-template-columns:repeat(2,1fr)}
.serenity-progress li{min-width:0;flex:1 1 45%;padding:12px 14px;font-size:10.5px}
.serenity-total .amt{font-size:24px}
.serenity-calendar{padding:18px 14px}
.serenity-account-gate{padding:22px 18px 6px}
.serenity-hours-control{gap:10px}
.serenity-gate-head{flex-direction:column;align-items:flex-start}
.serenity-gate-toggle{width:100%;box-sizing:border-box}
.serenity-gate-toggle-btn{flex:1;min-width:0;text-align:center;padding:9px 6px !important;font-size:10px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Smaller phones (iPhone SE / small Android widths) */
@media (max-width:480px){
.serenity-wrap{padding:calc(var(--serenity-header-offset, 0px) + 60px) 10px 44px}
.serenity-book{padding:26px 16px;border-radius:18px}
.serenity-progress{gap:8px}
.serenity-progress li{flex:1 1 100%;font-size:11px;padding:12px}
.serenity-cal-day{font-size:12.5px}
.serenity-cal-head strong{font-size:16px}
.serenity-slot-list{grid-template-columns:1fr 1fr;gap:8px}
.serenity-slot,button.serenity-slot{padding:12px 8px !important;font-size:13px}
.serenity-recurrence label{flex:1 1 auto;justify-content:center;padding:10px 12px;font-size:12.5px}
.serenity-occurrences{justify-content:center}
.serenity-hours-control{gap:8px}
.serenity-hours-value input{width:76px;font-size:18px}
.serenity-total{padding:16px 18px;flex-wrap:wrap;gap:6px}
.serenity-total .amt{font-size:21px}
.serenity-account-gate{padding:18px 14px}
.serenity-gate-head{flex-direction:column;align-items:flex-start}
.serenity-gate-toggle{width:100%}
.serenity-gate-toggle-btn{flex:1;min-width:0;text-align:center;padding:8px 4px !important;font-size:9px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Header buttons (unchanged behavior, refreshed polish) */
.serenity-header-btn,a.serenity-header-btn,a.serenity-header-btn:link,a.serenity-header-btn:visited{
display:inline-block !important;
background:linear-gradient(135deg,#1F3A2E,#17281f) !important;color:#ffffff !important;
font-family:'Inter',sans-serif !important;font-size:14px !important;font-weight:500 !important;
letter-spacing:.03em !important;text-decoration:none !important;
padding:16px 26px !important;border-radius:999px !important;border:0 !important;line-height:1 !important;
transition:transform .25s ease,box-shadow .25s ease !important;white-space:nowrap !important;cursor:pointer !important;
box-shadow:0 12px 26px -14px rgba(31,58,46,.6) !important;
}
.serenity-header-btn:hover,a.serenity-header-btn:hover,a.serenity-header-btn:focus{
transform:translateY(-1px);color:#ffffff !important;border-bottom:0 !important;
box-shadow:0 18px 30px -14px rgba(31,58,46,.65) !important;
}
.serenity-header-auth{display:inline-flex !important;align-items:center;gap:10px}
.serenity-header-btn.ghost,a.serenity-header-btn.ghost,a.serenity-header-btn.ghost:link,a.serenity-header-btn.ghost:visited{
background:transparent !important;color:#1F3A2E !important;
border:1px solid #1F3A2E !important;padding:15px 25px !important;box-shadow:none !important;
}
.serenity-header-btn.ghost:hover,a.serenity-header-btn.ghost:hover{
background:#1F3A2E !important;color:#ffffff !important;
}
/* Smaller Sign In / Sign Up buttons on mobile, so they don't crowd the
header next to the logo/menu on narrow screens. */
@media (max-width:820px){
.serenity-header-auth{gap:8px !important}
.serenity-header-btn,a.serenity-header-btn{
padding:10px 16px !important;font-size:12px !important;
}
.serenity-header-btn.ghost,a.serenity-header-btn.ghost{
padding:9px 15px !important;
}
}
@media (max-width:480px){
.serenity-header-auth{gap:6px !important}
.serenity-header-btn,a.serenity-header-btn{
padding:8px 12px !important;font-size:11px !important;letter-spacing:.01em !important;
}
.serenity-header-btn.ghost,a.serenity-header-btn.ghost{
padding:7px 11px !important;
}
}
.serenity-account-menu{position:relative !important;display:inline-block !important;font-family:'Inter',sans-serif}
.serenity-account-trigger{
display:flex !important;align-items:center;justify-content:center;
width:46px !important;height:46px !important;border-radius:50% !important;
background:linear-gradient(135deg,#BC8E58,#D9B77E) !important;color:#ffffff !important;border:0 !important;
font-size:15px !important;font-weight:600 !important;cursor:pointer;
box-shadow:0 10px 24px -10px rgba(188,142,88,.6) !important;padding:0 !important;line-height:1 !important;
transition:transform .25s;
}
.serenity-account-trigger:hover{transform:scale(1.05)}
.serenity-account-dropdown{
position:absolute;top:calc(100% + 10px);right:0;
background:#FAF5EB !important;border:1px solid #E4DCCB;border-radius:14px;
min-width:200px;box-shadow:0 20px 50px -18px rgba(31,58,46,.4);
display:flex;flex-direction:column;overflow:hidden;z-index:9999;
}
.serenity-account-dropdown[hidden]{display:none}
.serenity-account-dropdown a{
padding:14px 20px !important;font-size:13px !important;color:#2A2822 !important;
text-decoration:none !important;border-bottom:1px solid #E4DCCB;letter-spacing:.02em;
}
.serenity-account-dropdown a:last-child{border-bottom:0;color:#8a5a3a !important}
.serenity-account-dropdown a:hover{background:#1F3A2E !important;color:#ffffff !important}
/* ── Upcoming courses ───────────────────────────────────────────── */
.serenity-courses{max-width:1100px;margin:0 auto}
.serenity-course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;margin-top:32px}
.serenity-course-card{
display:flex;flex-direction:column;background:#fff;border:1px solid var(--sand);
border-radius:18px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease
}
.serenity-course-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(31,58,46,.45)}
.serenity-course-card.featured{border-color:var(--sage)}
.serenity-course-media{aspect-ratio:16/9;overflow:hidden;background:var(--ivory-2)}
.serenity-course-media img{width:100%;height:100%;object-fit:cover;display:block}
.serenity-course-body{padding:26px 26px 28px;display:flex;flex-direction:column;gap:14px;flex:1}
.serenity-course-tags{display:flex;flex-wrap:wrap;gap:8px}
.serenity-course-tag{
font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#6a675e;
border:1px solid var(--sand);border-radius:999px;padding:5px 11px
}
.serenity-course-tag.status-open{color:var(--sage);border-color:rgba(31,58,46,.3)}
.serenity-course-tag.status-waitlist{color:var(--terracotta);border-color:rgba(188,142,88,.4)}
.serenity-course-tag.status-closed{color:#8a8780}
.serenity-course-title{font-family:'Playfair Display',serif;font-weight:400;font-size:23px;margin:0;color:var(--charcoal)}
.serenity-course-summary{margin:0;color:#5c5a52;font-size:15px;line-height:1.65;font-weight:300}
.serenity-course-meta{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.serenity-course-meta li{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;border-bottom:1px dashed var(--sand);padding-bottom:8px}
.serenity-course-meta li:last-child{border-bottom:0;padding-bottom:0}
.serenity-course-meta span{color:#8a8780;text-transform:uppercase;letter-spacing:.14em;font-size:10.5px}
.serenity-course-meta strong{font-weight:500;color:var(--charcoal);text-align:right}
.serenity-course-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:auto}
.serenity-course-price{font-family:'Playfair Display',serif;font-size:22px;color:var(--sage)}
.serenity-course-seats{font-size:12.5px;color:#8a8780}
.serenity-course-card .serenity-btn{width:100%;text-align:center}
@media(max-width:600px){.serenity-course-body{padding:22px}}
/* Booking page: services / upcoming events tabs */
.serenity-book-tabs{margin:24px 0 8px}
.serenity-tab-count{display:inline-block;min-width:20px;padding:1px 6px;margin-left:6px;border-radius:999px;background:var(--sand);color:var(--charcoal);font-size:11px;line-height:18px;text-align:center}
.serenity-book .serenity-panel{display:none}
.serenity-book .serenity-panel.active{display:block}
.serenity-book .serenity-panel .serenity-course-grid{margin-top:20px}
/* ---------- Hourly booking (client chooses their own number of hours) ---------- */
.serenity-hours{
border:1px solid var(--sand) !important;
border-radius:14px;
padding:18px 20px;
background:var(--cream,#fdfcf9);
margin-bottom:18px;
}
.serenity-hours-control{
display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap;
}
.serenity-hours-btn{
width:38px;height:38px;border-radius:999px;border:1px solid var(--sand) !important;
background:#fff !important;font-size:18px;line-height:1;cursor:pointer;color:var(--charcoal) !important;
transition:background .2s ease,border-color .2s ease;
}
.serenity-hours-btn:hover{background:var(--sand,#f2ece1) !important;border-color:var(--sage) !important}
.serenity-hours-value{display:flex;align-items:baseline;gap:8px}
.serenity-hours-value input{
width:92px;text-align:center;font-size:20px;padding:8px 10px;
border:1px solid var(--sand) !important;border-radius:10px;background:#fff;outline:none;
}
.serenity-hours-value input:focus{border-color:var(--sage) !important;box-shadow:0 0 0 3px rgba(31,58,46,.08)}
.serenity-hours-value span{font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.serenity-hours-note{margin:10px 0 0;font-size:13px;opacity:.75}
.serenity-course-card .serenity-btn{width:100%;cursor:pointer}
/* ---------------------------------------------------------------------------
Intuitive Group Coaching — dedicated registration page (v1.9 redesign)
--------------------------------------------------------------------------- */
.serenity-gc-wrap{ padding-top: calc(var(--serenity-header-offset, 0px) + 0px); padding-left: clamp(24px, 6vw, 90px); padding-right: clamp(24px, 6vw, 90px); }
.serenity-gc { padding: 0 0 64px; }
/* ---- Hero: bold centred dark card, no boxed/table elements ---- */
.serenity-gc-hero{
position: relative; overflow: hidden;
padding: 72px 48px 48px;
border-radius: var(--radius-lg, 22px);
background:
radial-gradient(900px 460px at 50% -20%, rgba(188,142,88,.20), transparent 60%),
radial-gradient(700px 420px at 100% 100%, rgba(124,138,107,.16), transparent 60%),
linear-gradient(160deg, #1F3A2E 0%, #17281f 100%);
color: #FFFDF8;
box-shadow: var(--shadow-lg, 0 40px 120px -40px rgba(31,58,46,.35));
text-align: center;
}
.serenity-gc-hero-inner{ max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
.serenity-eyebrow--on-dark{ color: var(--gold-2, #D9B77E); }
.serenity-gc-h1{ color: #FFFDF8; }
.serenity-gc-h1 em{ background: linear-gradient(90deg, var(--gold-2, #D9B77E) 0%, #fff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.serenity-gc-lede{ color: rgba(255,253,248,.82); max-width: 520px; margin-left: auto; margin-right: auto; }
.serenity-gc-hero-cta{ margin-top: 8px; margin-bottom: 4px; }
/* On the dark hero, the default sage-on-sage button disappears — swap to a
cream background so it stands out clearly against the dark green. */
.serenity-gc-hero-cta.serenity-btn{
background: var(--cream, #FFFDF8) !important;
color: var(--sage, #1F3A2E) !important;
}
.serenity-gc-hero-cta.serenity-btn:hover{
background: #fff !important;
box-shadow: 0 20px 40px -16px rgba(255,253,248,.35) !important;
}
.serenity-gc-meta{
display: flex; flex-wrap: wrap; justify-content: center; row-gap: 20px;
margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.16);
}
.serenity-gc-meta-item{
display: flex; flex-direction: column; align-items: center; gap: 7px;
padding: 0 26px; border-right: 1px solid rgba(255,255,255,.16);
}
.serenity-gc-meta-item:last-child{ border-right: 0; }
.serenity-gc-meta-item em{
font-style: normal; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
color: var(--gold-2, #D9B77E); font-weight: 500;
}
.serenity-gc-meta-item b{
font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 1.05rem; color: #FFFDF8;
}
.serenity-gc-tz{ margin-top: 20px; font-size: .78rem; color: rgba(255,253,248,.5); }
@media (max-width: 640px){
.serenity-gc-hero{ padding: 44px 22px 34px; border-radius: 18px; }
.serenity-gc-hero-cta{ width: 100%; }
.serenity-gc-meta{ flex-direction: column; align-items: center; row-gap: 16px; }
.serenity-gc-meta-item{ border-right: 0; padding: 0 0 16px; border-bottom: 1px solid rgba(255,255,255,.14); width: 100%; max-width: 260px; }
.serenity-gc-meta-item:last-child{ border-bottom: 0; padding-bottom: 0; }
}
/* ---- Feature strip: editorial 3-column layout, no grid/table look ---- */
.serenity-gc-features{
margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 40px;
}
.serenity-gc-feature{ padding-top: 18px; border-top: 2px solid var(--gold, #BC8E58); }
.serenity-gc-feature-num{
display: block; font-family: 'Playfair Display', Georgia, serif; font-size: .82rem;
color: var(--gold, #BC8E58); letter-spacing: .14em;
}
.serenity-gc-feature h3{ font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 1.22rem; margin: 10px 0 8px; color: var(--charcoal, #1F1D18); }
.serenity-gc-feature p{ margin: 0; color: #4A4840; line-height: 1.7; font-size: .94rem; }
@media (max-width: 780px){ .serenity-gc-features{ grid-template-columns: 1fr; gap: 28px; margin-top: 44px; } }
.serenity-gc-grid {
margin-top: 56px; display: grid; gap: 32px;
grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
align-items: start;
}
@media (max-width: 900px) { .serenity-gc-grid { grid-template-columns: 1fr; margin-top: 44px; } }
.serenity-gc-about p { line-height: 1.85; color: #4A4840; }
.serenity-gc-list { margin: 20px 0 0; padding: 0; list-style: none; }
.serenity-gc-list li { position: relative; padding: 8px 0 8px 26px; color: #4A4840; line-height: 1.7; }
.serenity-gc-list li::before { content: '\2727'; position: absolute; left: 0; top: 8px; color: #BC8E58; }
.serenity-gc-quote{
margin: 32px 0 0; padding: 24px 26px; border-left: 3px solid var(--gold, #BC8E58);
background: var(--ivory-2, #FBF8F1); border-radius: 0 14px 14px 0;
}
.serenity-gc-quote p{
margin: 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic;
font-size: 1.08rem; line-height: 1.6; color: #2A2822;
}
@media (max-width: 640px){ .serenity-gc-quote{ padding: 18px 18px; } }
.serenity-gc-form-card {
background: linear-gradient(180deg, #FFFDF8, #fff);
border: 1px solid var(--serenity-sand, #E4DCCB); border-top: 4px solid var(--gold, #BC8E58);
border-radius: 20px; padding: 32px 28px;
box-shadow: var(--shadow-lg, 0 40px 120px -40px rgba(31,58,46,.35));
position: sticky; top: 24px; scroll-margin-top: 24px;
}
@media (max-width: 900px){ .serenity-gc-form-card{ position: static; } }
@media (max-width: 640px){ .serenity-gc-form-card{ padding: 24px 20px; } }
.serenity-gc-form-tag{
display: inline-block; text-transform: uppercase; letter-spacing: .28em;
font-size: 11px; color: var(--gold, #BC8E58); font-weight: 500;
}
.serenity-gc-form-h2{ margin: 10px 0 4px; }
.serenity-gc-price { margin: 10px 0 2px; display: flex; align-items: baseline; gap: 8px; }
.serenity-gc-price strong { font-family: 'Playfair Display', Georgia, serif; font-size: 1.9rem; font-weight: 400; color: #1F3A2E; }
.serenity-gc-price span { font-size: .85rem; color: #6B6960; }
.serenity-gc-seats { margin: 0 0 14px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #BC8E58; }
.serenity-gc-submit{ width: 100%; }
/* Boxed inputs for this form only — the global underline style stretches too
thin across this card's wider width, so give fields real edges instead. */
.serenity-gc-form label{ margin: 18px 0 7px; }
.serenity-gc-form input,
.serenity-gc-form select{
border: 1px solid var(--sand, #E4DCCB); border-radius: 10px;
background: var(--ivory-2, #FBF8F1); padding: 13px 14px;
}
.serenity-gc-form input:focus,
.serenity-gc-form select:focus{
border-color: var(--sage, #1F3A2E); background: #fff; box-shadow: 0 0 0 4px rgba(31,58,46,.06);
}
.serenity-gc-form textarea{ background: var(--ivory-2, #FBF8F1); }
/* Spotlight link inside the booking calendar's "Upcoming events" tab. */
.serenity-gc-spotlight {
display: block; text-decoration: none; margin: 6px 0 26px;
padding: 22px 24px; border-radius: 18px;
background: linear-gradient(135deg, #1F3A2E, #2C5341);
box-shadow: 0 14px 34px rgba(31, 58, 46, .22);
transition: transform .25s ease, box-shadow .25s ease;
}
.serenity-gc-spotlight:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(31, 58, 46, .3); }
.serenity-gc-spotlight-tag {
display: block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: #E0BE8E;
}
.serenity-gc-spotlight-title {
display: block; margin-top: 8px; font-family: 'Playfair Display', Georgia, serif;
font-size: 1.45rem; color: #FFFDF8;
}
.serenity-gc-spotlight-meta { display: block; margin-top: 6px; font-size: .88rem; color: rgba(255, 253, 248, .78); }
.serenity-gc-spotlight-cta {
display: inline-block; margin-top: 14px; font-size: .72rem; letter-spacing: .16em;
text-transform: uppercase; color: #E0BE8E;
}
/* ---- Group coaching: scope statement, address, trust & policy accordion ---- */
.serenity-gc-scope-note{
margin: 18px auto 0; max-width: 560px; padding: 12px 18px;
border: 1px solid rgba(255,255,255,.22); border-radius: 12px;
background: rgba(255,255,255,.06);
font-size: .82rem; line-height: 1.6; color: rgba(255,253,248,.86);
}
.serenity-gc-policies{
margin-top: 56px; padding-top: 36px; border-top: 1px solid rgba(31,58,46,.12);
}
.serenity-gc-policy-grid{
display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px;
}
@media (max-width: 780px){ .serenity-gc-policy-grid{ grid-template-columns: 1fr; } }
.serenity-gc-policy-item{
padding: 14px 18px; border: 1px solid rgba(31,58,46,.14); border-radius: 12px;
background: #FBF8F2;
}
.serenity-gc-policy-item summary{
cursor: pointer; font-weight: 500; color: #1F3A2E; list-style: none;
display: flex; align-items: center; justify-content: space-between;
}
.serenity-gc-policy-item summary::-webkit-details-marker{ display: none; }
.serenity-gc-policy-item summary::after{ content: '+'; color: #BC8E58; font-size: 1.1rem; }
.serenity-gc-policy-item[open] summary::after{ content: '\2212'; }
.serenity-gc-policy-item p{ margin: 10px 0 0; color: #4A4840; line-height: 1.7; font-size: .88rem; }
.serenity-gc-terms-link{ margin-top: 18px; font-size: .84rem; color: #4A4840; }
/* ---- Booking page: "good to know" trust panel + group coaching pointer ---- */
.serenity-book-trust{
margin-top: 28px; padding: 22px 24px; border-radius: 16px;
background: #FBF8F2; border: 1px solid rgba(31,58,46,.12);
}
.serenity-book-trust h3{
margin: 0 0 12px; font-family: 'Playfair Display', Georgia, serif; font-weight: 400;
font-size: 1.05rem; color: #1F3A2E;
}
.serenity-book-trust-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
@media (max-width: 780px){ .serenity-book-trust-grid{ grid-template-columns: 1fr; } }
.serenity-book-trust-item em{
display: block; font-style: normal; font-size: .68rem; letter-spacing: .14em;
text-transform: uppercase; color: #BC8E58; margin-bottom: 4px;
}
.serenity-book-trust-item p{ margin: 0; font-size: .86rem; line-height: 1.6; color: #4A4840; }
.serenity-book-gc-pointer{
display: block; margin-top: 20px; padding: 16px 20px; border-radius: 12px;
background: linear-gradient(135deg, #1F3A2E, #2C5341); text-decoration: none;
}
.serenity-book-gc-pointer strong{ display: block; color: #FFFDF8; font-size: .92rem; }
.serenity-book-gc-pointer span{ display: block; margin-top: 4px; font-size: .8rem; color: rgba(255,253,248,.75); }
/* ---- Dashboard gate (logged-out) ---- */
.serenity-gate-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; justify-content: center; }
.serenity-gate-actions .serenity-btn.ghost{ background: transparent; border: 1px solid rgba(31,58,46,.3); color: #1F3A2E; }
/* ---------------------------------------------------------------
[serenity_group_coaching_form] embed — the card dropped into any
page. Neutralises the full-page wrapper (padding/background) and
re-asserts the button + checkbox styling over theme CSS.
--------------------------------------------------------------- */
.serenity-gc-embed{
padding:0 !important;background:none !important;min-height:0 !important;
max-width:640px;margin:0 auto;
}
.serenity-gc-embed .serenity-gc-form-card{
position:static;margin:0;
background:linear-gradient(180deg,var(--cream),#fff) !important;
}
.serenity-gc-embed .serenity-h2{margin:10px 0 4px}
/* Consent checkbox — inline row, normal-case copy, real checkbox size. */
.serenity-form label.serenity-checkbox{
display:flex;align-items:flex-start;gap:10px;
margin:22px 0 4px;text-transform:none;letter-spacing:0;
font-size:14px;line-height:1.6;font-weight:400;color:#4a4740;
}
.serenity-form label.serenity-checkbox input[type="checkbox"]{
width:18px;min-width:18px;height:18px;margin:2px 0 0;padding:0;flex:0 0 auto;
border:1px solid var(--sand);border-radius:4px;background:#fff;
accent-color:var(--sage);appearance:auto;-webkit-appearance:checkbox;
}
.serenity-form label.serenity-checkbox a{text-decoration:underline}
/* Submit button — themes often override generic