/* ============================================================
AMMORTAL HOUSTON — Bookly custom styling
Houston Medical Wellness
------------------------------------------------------------
HOW TO USE
1. WP Admin → Bookly → Settings → Customer-facing UI / Appearance,
OR paste into your theme's Additional CSS (Appearance → Customize → Additional CSS),
OR enqueue this file from your child theme.
2. Load the same fonts the site uses (add to if not already present):
3. Adjust the variables below if you ever rebrand.
Bookly markup is wrapped in .bookly-form — every rule is scoped to it
so nothing else on the site is affected.
============================================================ */
:root{
--am-accent:#c79a5b; /* primary gold */
--am-accent-deep:#b3824a; /* darker gold (hover/borders) */
--am-ink:#17100a; /* near-black text */
--am-espresso:#1d150e; /* dark panels */
--am-cream:#f4eee2; /* light bg */
--am-line:#e4dac6; /* hairlines */
--am-muted:#6b5f50; /* secondary text */
}
/* ---- base ---- */
.bookly-form,
.bookly-form *{
font-family:'Hanken Grotesk', system-ui, -apple-system, sans-serif !important;
box-sizing:border-box;
}
.bookly-form{
color:var(--am-ink);
max-width:560px;
margin:0 auto;
background:#fbf7ef;
border:1px solid var(--am-line);
border-radius:6px;
padding:32px 30px;
}
/* ---- step / section headings ---- */
.bookly-form .bookly-box > label,
.bookly-form .bookly-label-error + label,
.bookly-form .bookly-progress-tracker-step,
.bookly-form h2,
.bookly-form .bookly-step-title{
font-family:'Newsreader', Georgia, serif !important;
font-weight:500 !important;
color:var(--am-ink) !important;
letter-spacing:-.01em;
}
/* ---- field labels ---- */
.bookly-form label{
font-size:11px !important;
letter-spacing:.14em;
text-transform:uppercase;
font-weight:700 !important;
color:var(--am-accent-deep) !important;
}
/* ---- inputs, selects, textareas ---- */
.bookly-form input[type=text],
.bookly-form input[type=email],
.bookly-form input[type=tel],
.bookly-form input[type=number],
.bookly-form textarea,
.bookly-form select,
.bookly-form .bookly-form-group select{
width:100% !important;
background:#fff !important;
border:1px solid var(--am-line) !important;
border-radius:3px !important;
padding:13px 14px !important;
font-size:14.5px !important;
color:var(--am-ink) !important;
box-shadow:none !important;
transition:border-color .2s, box-shadow .2s;
}
.bookly-form input:focus,
.bookly-form textarea:focus,
.bookly-form select:focus{
border-color:var(--am-accent) !important;
box-shadow:0 0 0 3px rgba(199,154,91,.18) !important;
outline:none !important;
}
/* ---- primary buttons (Next / Book / Pay) ---- */
.bookly-form .bookly-btn,
.bookly-form button.bookly-btn,
.bookly-form .bookly-back-step + .bookly-btn{
background:var(--am-accent) !important;
color:var(--am-ink) !important;
border:none !important;
border-radius:3px !important;
padding:15px 30px !important;
font-weight:700 !important;
font-size:12.5px !important;
letter-spacing:.14em !important;
text-transform:uppercase !important;
cursor:pointer;
transition:filter .2s, transform .05s;
box-shadow:none !important;
}
.bookly-form .bookly-btn:hover{ filter:brightness(1.08) !important; }
.bookly-form .bookly-btn:active{ transform:translateY(1px); }
/* ---- secondary / back button ---- */
.bookly-form .bookly-back-step,
.bookly-form .ladda-button.bookly-back-step{
background:transparent !important;
color:var(--am-accent-deep) !important;
border:1px solid var(--am-line) !important;
border-radius:3px !important;
padding:15px 24px !important;
font-weight:600 !important;
letter-spacing:.12em !important;
text-transform:uppercase !important;
font-size:12px !important;
}
.bookly-form .bookly-back-step:hover{ border-color:var(--am-accent-deep) !important; }
/* ---- time / date slot chips ---- */
.bookly-form .bookly-time-step .bookly-column-list .bookly-day,
.bookly-form .bookly-slot,
.bookly-form .bookly-hour{
border:1px solid var(--am-line) !important;
border-radius:3px !important;
color:var(--am-ink) !important;
background:#fff !important;
font-weight:600 !important;
}
.bookly-form .bookly-slot:hover,
.bookly-form .bookly-hour:hover,
.bookly-form .bookly-slot.bookly-selected,
.bookly-form .bookly-hour.active{
background:var(--am-accent) !important;
border-color:var(--am-accent) !important;
color:var(--am-ink) !important;
}
/* ---- service / staff cards & dropdown highlight ---- */
.bookly-form .bookly-service-step .active,
.bookly-form .picker__day--selected,
.bookly-form .picker__day--selected:hover{
background:var(--am-accent) !important;
color:var(--am-ink) !important;
}
/* ---- progress tracker ---- */
.bookly-form .bookly-progress-tracker .active,
.bookly-form .bookly-progress-tracker .completed{
color:var(--am-accent-deep) !important;
}
.bookly-form .bookly-progress-tracker .active:after,
.bookly-form .bookly-progress-tracker .completed:after{
background:var(--am-accent) !important;
}
/* ---- price / summary emphasis ---- */
.bookly-form .bookly-table .bookly-label-price,
.bookly-form .bookly-summary .bookly-price{
font-family:'Newsreader', Georgia, serif !important;
color:var(--am-accent-deep) !important;
font-size:20px !important;
}
/* ---- errors ---- */
.bookly-form .bookly-label-error{
color:#a8492f !important;
text-transform:none !important;
letter-spacing:0 !important;
font-weight:600 !important;
}
/* ---- dark variant (if the form sits on the dark booking band) ----
Add class .am-on-dark to the Bookly wrapper to flip text light. */
.am-on-dark .bookly-form{ background:var(--am-espresso); border-color:rgba(244,238,226,.14); }
.am-on-dark .bookly-form,
.am-on-dark .bookly-form .bookly-box > label{ color:var(--am-cream) !important; }
.am-on-dark .bookly-form input,
.am-on-dark .bookly-form select,
.am-on-dark .bookly-form textarea{
background:#241a11 !important; border-color:rgba(244,238,226,.18) !important; color:var(--am-cream) !important;
}
/* ============================================================
RADIO / CHECKBOX CUSTOM FIELDS (Soundscape / Journey / screening)
Robust selectors: style ANY label wrapping a radio/checkbox input,
regardless of Bookly's wrapper classes. Option labels may contain
HTML: "Name
description" — the renders
as a muted second line.
------------------------------------------------------------ */
.bookly-form label:has(input[type=radio]),
.bookly-form label:has(input[type=checkbox]){
display:flex !important;
align-items:flex-start !important;
gap:11px !important;
margin:0 0 8px !important;
padding:13px 15px !important;
background:#fff !important;
border:1px solid var(--am-line) !important;
border-radius:4px !important;
cursor:pointer !important;
font-size:14px !important;
font-weight:600 !important;
letter-spacing:0 !important;
text-transform:none !important;
color:var(--am-ink) !important;
line-height:1.45 !important;
transition:border-color .2s, background .2s, box-shadow .2s !important;
}
.bookly-form label:has(input[type=radio]):hover,
.bookly-form label:has(input[type=checkbox]):hover{
border-color:var(--am-accent) !important;
}
.bookly-form label input[type=radio],
.bookly-form label input[type=checkbox]{
accent-color:var(--am-accent) !important;
width:15px !important; height:15px !important;
margin:2px 0 0 !important; flex:0 0 auto !important;
}
.bookly-form label:has(input[type=radio]:checked),
.bookly-form label:has(input[type=checkbox]:checked){
border-color:var(--am-accent) !important;
background:#fbf7ef !important;
box-shadow:0 0 0 2px rgba(199,154,91,.22) !important;
}
/* the description line under the option name (if HTML ever allowed) */
.bookly-form label:has(input[type=radio]) small,
.bookly-form label:has(input[type=checkbox]) small{
display:block !important;
font-size:12.5px !important;
font-weight:500 !important;
letter-spacing:0 !important;
text-transform:none !important;
color:var(--am-muted) !important;
line-height:1.5 !important;
margin-top:3px !important;
}
/* ============================================================
KILL BOOKLY'S DEFAULT ORANGE + match the site draft
Bookly ships an orange/red theme (#f4662f family). These rules
force every remnant to the gold/espresso palette and site type.
------------------------------------------------------------ */
/* progress tracker (1. Service — 2. Time — ...) */
.bookly-form .bookly-progress-tracker > div,
.bookly-form .bookly-progress-tracker li,
.bookly-form .bookly-progress-tracker span{
color:var(--am-muted) !important;
font-size:12px !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
font-weight:700 !important;
}
.bookly-form .bookly-progress-tracker .active,
.bookly-form .bookly-progress-tracker .active span{
color:var(--am-accent-deep) !important;
}
/* the colored bars under each step name */
.bookly-form .bookly-progress-tracker .active .step,
.bookly-form .bookly-progress-tracker .completed .step,
.bookly-form .bookly-progress-tracker div[class*=active]:after,
.bookly-form .bookly-progress-tracker div[class*=completed]:after,
.bookly-form [class*=progress] [class*=active],
.bookly-form .bookly-progress-tracker > .active:before,
.bookly-form .bookly-progress-tracker > .completed:before{
background-color:var(--am-accent) !important;
border-color:var(--am-accent) !important;
}
.bookly-form .bookly-progress-tracker > div:before,
.bookly-form .bookly-progress-tracker > div:after{
background-color:#e4dac6;
}
.bookly-form .bookly-progress-tracker > .active:after,
.bookly-form .bookly-progress-tracker > .completed:after{
background-color:var(--am-accent) !important;
}
/* nuke any leftover Bookly orange (bg, borders, text) */
.bookly-form [style*="#f4662f"],
.bookly-form .bookly-js-next-step,
.bookly-form .bookly-triangle{
background-color:var(--am-accent) !important;
border-color:var(--am-accent) !important;
}
.bookly-form .bookly-label-error,
.bookly-form .bookly-red{ color:#a8492f !important; }
/* intro line ("You selected a booking for ...") */
.bookly-form .bookly-box b,
.bookly-form .bookly-box strong{ color:var(--am-ink) !important; }
/* field descriptions (Soundscape / Journey explanations) — Bookly
prints these as plain text under the field: make them small + muted */
.bookly-form .bookly-form-group > div > p,
.bookly-form .bookly-custom-field-description,
.bookly-form small,
.bookly-form .bookly-form-group .bookly-js-description{
font-size:12.5px !important;
font-weight:500 !important;
color:var(--am-muted) !important;
line-height:1.55 !important;
letter-spacing:0 !important;
text-transform:none !important;
margin:6px 0 0 !important;
}
/* date-of-birth selects sit in a row */
.bookly-form select{ appearance:auto !important; }
/* ============================================================
TIME STEP: calendar + slots (kills the remaining orange)
Covers Bookly's datepicker (pickadate) and slot list classes
across versions.
------------------------------------------------------------ */
/* calendar selected / highlighted / today */
.bookly-form .picker__day--selected,
.bookly-form .picker__day--selected:hover,
.bookly-form .picker__day--highlighted,
.bookly-form .picker__day--highlighted:hover,
.bookly-form .picker__day--infocus:hover,
.bookly-form td.picker__day--selected{
background:var(--am-accent) !important;
border-color:var(--am-accent) !important;
color:#1a120a !important;
}
.bookly-form .picker__nav--next:hover,
.bookly-form .picker__nav--prev:hover{
background:#f4ecdd !important;
}
.bookly-form .picker__weekday{ color:var(--am-muted) !important; }
/* the date header chip (e.g. "Tue, Jul 21") + day columns */
.bookly-form .bookly-schedule-date,
.bookly-form .bookly-columnizer .bookly-day,
.bookly-form .bookly-time-step .bookly-day{
background:var(--am-espresso) !important;
border-color:var(--am-espresso) !important;
color:var(--am-cream) !important;
font-weight:600 !important;
}
/* time-slot buttons / radio rows */
.bookly-form .bookly-columnizer .bookly-hour,
.bookly-form .bookly-columnizer button,
.bookly-form .bookly-time-step label:has(input[type=radio]){
background:#fff !important;
border:1px solid var(--am-line) !important;
color:var(--am-ink) !important;
}
.bookly-form .bookly-columnizer .bookly-hour:hover,
.bookly-form .bookly-columnizer .bookly-hour.active,
.bookly-form .bookly-columnizer button:hover,
.bookly-form .bookly-time-step label:has(input[type=radio]:checked){
background:var(--am-accent) !important;
border-color:var(--am-accent) !important;
color:#1a120a !important;
}
.bookly-form .bookly-columnizer .bookly-hour.active *,
.bookly-form .bookly-time-step label:has(input[type=radio]:checked) *{
color:#1a120a !important;
}
/* progress tracker: the colored bar segments under step names */
.bookly-form .bookly-progress-tracker .bookly-value,
.bookly-form .bookly-progress-tracker .bookly-elm-active,
.bookly-form .bookly-progress-tracker .bookly-step.active,
.bookly-form .bookly-progress-tracker > div.active,
.bookly-form .bookly-progress-tracker > div.active ~ div .step{
color:var(--am-accent-deep) !important;
}
.bookly-form .bookly-progress-tracker div[class*=bar],
.bookly-form .bookly-progress-tracker .bookly-step .step,
.bookly-form .bookly-progress-tracker hr,
.bookly-form .bookly-progress-tracker .active hr{
background:var(--am-accent) !important;
border-color:var(--am-accent) !important;
}
/* ---- bottom-of-form text, captions, back button: readable on cream ---- */
.bookly-form,
.bookly-form p,
.bookly-form span,
.bookly-form td,
.bookly-form .bookly-box{
color:var(--am-ink);
}
.bookly-form .bookly-back-step,
.bookly-form button.bookly-back-step,
.bookly-form .ladda-button.bookly-back-step{
background:transparent !important;
color:var(--am-accent-deep) !important;
border:1px solid var(--am-accent-deep) !important;
opacity:1 !important;
}
.bookly-form .bookly-back-step:hover{
background:rgba(179,130,74,.1) !important;
}
/* muted footer/caption lines inside the form */
.bookly-form .bookly-form-group > small,
.bookly-form .bookly-box > small{
color:var(--am-muted) !important;
}
/* hybrid mode: hide Bookly's progress tracker inside the styled card
(our card supplies the Step 1 / Step 2 labels) */
.am-bookly-pane .bookly-progress-tracker{ display:none !important; }
.am-bookly-pane .bookly-form{
background:transparent !important;
border:none !important;
padding:0 !important;
max-width:none !important;
}
/* ============================================================
CUSTOM-FIELD RADIO GROUPS → side-by-side selectable boxes
(Soundscape 2-up, Journey 2-up grid) + clearer section spacing
------------------------------------------------------------ */
/* the container that directly holds the radio labels becomes a grid */
.bookly-form div:has(> label > input[type=radio]),
.bookly-form div:has(> label input[type=radio]):not(.bookly-form-group):not(.bookly-box){
display:grid !important;
grid-template-columns:repeat(2,1fr) !important;
gap:10px !important;
}
.bookly-form label:has(input[type=radio]){
margin:0 !important;
height:100% !important;
align-items:center !important;
}
/* single checkbox rows (health screening) stay full-width */
.bookly-form div:has(> label > input[type=checkbox]){
display:block !important;
}
/* clearer separation between form sections */
.bookly-form .bookly-form-group,
.bookly-form .bookly-box{
margin:0 0 24px !important;
}
.bookly-form .bookly-form-group > label,
.bookly-form .bookly-box > label{
display:block !important;
margin:0 0 10px !important;
}
/* field description sits tight under its field, with air after */
.bookly-form .bookly-form-group > div > p{
margin:8px 0 0 !important;
}
.bookly-form [class*=bookly] {
--bookly-main-color: var(--am-accent);
}
.bookly-form .bookly-btn,
.bookly-form .bookly-round,
.bookly-form .bookly-square,
.bookly-form .ladda-button:not(.bookly-back-step){
background:var(--am-accent) !important;
border-color:var(--am-accent) !important;
color:#1a120a !important;
}