/* ========================================================================== ZIVAH · BOOKING POPUP -------------------------------------------------------------------------- Loaded after the legacy custom/css/style.css. Overrides the old .owf-form-* skin (FAB, animations, layout) and gives the booking form a full-screen glass overlay with a centered card on desktop and a bottom-sheet slide on mobile. Class hooks: .zc-bk — root (root-of-popup, also the visibility flag) .zc-bk__overlay — full-viewport blurred backdrop .zc-bk__panel — the centered card .zc-bk__close — top-right close .zc-bk__head — header band (eyebrow, title, sub) .zc-bk__body — wraps the existing appointment form .zc-bk__foot — trust strip The old .owf-form-* class names are kept in the markup so any existing form-submit JS in appointment.php still works unchanged. We disable the legacy floating button (.owf-form-fab) here defensively. ========================================================================== */ /* Kill the legacy floating action button site-wide */ .owf-form-fab, .owf-form-fab-ic, .owf-form-fab-text, .owf-form-fab-nudge { display: none !important; } /* §1 ROOT — visibility flag, fixed full-viewport, captures clicks */ .zc-bk { position: fixed; inset: 0; z-index: 2000; visibility: hidden; pointer-events: none; opacity: 0; transition: opacity 0.32s var(--zc-ease-out, cubic-bezier(0.16, 1, 0.30, 1)), visibility 0.32s var(--zc-ease-out, cubic-bezier(0.16, 1, 0.30, 1)); } .zc-bk.is-open { visibility: visible; pointer-events: auto; opacity: 1; } /* Body scroll lock while the dialog is open. Toggled by JS via class on . */ html.zc-bk-lock, html.zc-bk-lock body { overflow: hidden !important; } /* §2 OVERLAY — glass-blurred backdrop covering the whole viewport. The blur is what creates the "glass-reflected" feel on the sides of the centered card; the page beneath stays visible but softened. */ .zc-bk__overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at 0% 0%, rgba(207, 138, 63, 0.18) 0%, transparent 45%), radial-gradient(ellipse at 100% 100%, rgba(46, 75, 113, 0.20) 0%, transparent 50%), rgba(26, 18, 8, 0.45); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); cursor: pointer; } /* §3 PANEL — wider centered card with a 2-column split inside: brand info pane (left) + form pane (right). Side-by-side on desktop, form-only on mobile (the brand pane collapses). Locked at 90vh so the form sits inside a tall card and the submit button is always reachable without page-level scroll. */ .zc-bk__panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -42%) scale(0.96); width: min(900px, calc(100vw - 32px)); height: 90vh; max-height: 90vh; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 0; background: var(--zc-white, #ffffff); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 30px 60px -20px rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.34s var(--zc-ease-out, cubic-bezier(0.16, 1, 0.30, 1)), transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); isolation: isolate; pointer-events: auto; } .zc-bk.is-open .zc-bk__panel { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* Top accent stripe — sits across the full card */ .zc-bk__panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent 0%, var(--zc-amber-dk, #a86828) 18%, var(--zc-amber-lt, #e8aa62) 50%, var(--zc-amber-dk, #a86828) 82%, transparent 100%); z-index: 5; } /* §4 CLOSE BUTTON — top-right, brand-styled */ .zc-bk__close { position: absolute; top: 14px; right: 14px; z-index: 6; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--zc-white, #ffffff); border: 1px solid var(--zc-linen, #ede8de); color: var(--zc-warm-dk, #6b6055); font-size: 14px; cursor: pointer; box-shadow: 0 4px 12px rgba(18, 12, 4, 0.10); transition: background 0.25s var(--zc-ease, cubic-bezier(0.25, 0.46, 0.45, 0.94)), border-color 0.25s var(--zc-ease, cubic-bezier(0.25, 0.46, 0.45, 0.94)), color 0.25s var(--zc-ease, cubic-bezier(0.25, 0.46, 0.45, 0.94)), transform 0.25s var(--zc-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); } .zc-bk__close:hover { background: var(--zc-amber-a08, rgba(207, 138, 63, 0.08)); border-color: var(--zc-amber-a35, rgba(207, 138, 63, 0.35)); color: var(--zc-amber-dk, #a86828); transform: rotate(90deg); } /* §5 BRAND PANE (LEFT) — premium editorial treatment. Layered composition: snow-cream paper backdrop, large faded Z monogram watermark, subtle paper-grain dot pattern, gold-foil accent ornaments. Same grammar as meet-our-team / doctor pages but with added typographic refinement and material depth. */ .zc-bk__brand { position: relative; padding: 26px 28px 24px; background: radial-gradient(ellipse at 92% 8%, rgba(207, 138, 63, 0.14) 0%, transparent 55%), radial-gradient(ellipse at 8% 92%, rgba(46, 75, 113, 0.08) 0%, transparent 55%), linear-gradient(180deg, #fbf7ee 0%, #f5efe1 100%); color: var(--zc-charcoal, #2a2520); display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--zc-linen, #ede8de); } /* Gold-foil left edge — premium signature line */ .zc-bk__brand::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: linear-gradient(180deg, transparent 0%, var(--zc-amber-a35, rgba(207, 138, 63, 0.35)) 18%, var(--zc-amber, #cf8a3f) 50%, var(--zc-amber-a35, rgba(207, 138, 63, 0.35)) 82%, transparent 100%); opacity: 0.55; pointer-events: none; z-index: 1; } /* Subtle ambient navy ring — bottom-left */ .zc-bk__brand::after { content: ""; position: absolute; bottom: -110px; left: -110px; width: 240px; height: 240px; border: 1px solid var(--zc-navy-a15, rgba(46, 75, 113, 0.15)); border-radius: 50%; pointer-events: none; } /* Watermark monogram — large faded Z, sits behind everything */ .zc-bk__brand-monogram { position: absolute; top: -12px; right: -28px; font-family: var(--zc-f-display, 'Outfit', sans-serif); font-size: 320px; font-weight: 300; line-height: 1; letter-spacing: -8px; color: transparent; -webkit-text-stroke: 1px var(--zc-amber-a18, rgba(207, 138, 63, 0.18)); pointer-events: none; user-select: none; z-index: 0; } /* Paper-grain dot pattern — adds tactile depth */ .zc-bk__brand-grain { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.45; background-image: radial-gradient(rgba(168, 104, 40, 0.08) 1px, transparent 1px), radial-gradient(rgba(168, 104, 40, 0.05) 1px, transparent 1px); background-size: 18px 18px, 32px 32px; background-position: 0 0, 9px 9px; mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); } /* Editorial topline — Z mark + rule + asterisks */ .zc-bk__brand-topline { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; position: relative; z-index: 1; } .zc-bk__brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--zc-charcoal, #2a2520), var(--zc-deep, #1a1208)); border: 1px solid var(--zc-amber-a45, rgba(207, 138, 63, 0.45)); color: var(--zc-amber-lt, #e8aa62); font-family: var(--zc-f-display, 'Outfit', sans-serif); font-size: 16px; font-weight: 500; letter-spacing: -0.5px; flex-shrink: 0; box-shadow: 0 6px 14px rgba(18, 12, 4, 0.18); } .zc-bk__brand-topline-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--zc-amber-a45, rgba(207, 138, 63, 0.45)), transparent); } .zc-bk__brand-topline-stars { display: inline-flex; gap: 5px; color: var(--zc-amber, #cf8a3f); font-size: 7px; opacity: 0.6; flex-shrink: 0; } .zc-bk__brand-eyebrow { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--zc-f-heading, 'Figtree', sans-serif); font-size: 10.5px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--zc-amber-dk, #a86828); margin-bottom: 12px; position: relative; z-index: 1; } .zc-bk__brand-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--zc-amber-lt, #e8aa62), var(--zc-amber-dk, #a86828)); box-shadow: 0 0 8px var(--zc-amber-a45, rgba(207, 138, 63, 0.45)); animation: zc-bk-pulse 1.8s ease-in-out infinite; } @keyframes zc-bk-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.3); } } .zc-bk__brand-title { margin: 0 0 10px; font-family: var(--zc-f-display, 'Outfit', sans-serif); font-size: clamp(26px, 1.6vw + 14px, 34px); font-weight: 300; line-height: 1.08; letter-spacing: -1px; color: var(--zc-charcoal, #2a2520); position: relative; z-index: 1; } /* Gold-foil accent word — layered shimmer on shimmer */ .zc-bk__brand-title-accent { position: relative; display: inline-block; font-weight: 500; background: linear-gradient(135deg, var(--zc-amber-dk, #a86828) 0%, var(--zc-amber, #cf8a3f) 35%, #f5d3a3 55%, var(--zc-amber, #cf8a3f) 75%, var(--zc-amber-dk, #a86828) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: zc-bk-foil 6s ease-in-out infinite; } .zc-bk__brand-title-accent::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 9px; background: radial-gradient(ellipse at center, var(--zc-amber-a35, rgba(207, 138, 63, 0.35)) 0%, transparent 70%); z-index: -1; } @keyframes zc-bk-foil { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .zc-bk__brand-sub { margin: 0 0 18px; font-family: var(--zc-f-body, 'Figtree', sans-serif); font-size: 13.5px; line-height: 1.6; color: var(--zc-warm-dk, #6b6055); letter-spacing: 0.05px; position: relative; z-index: 1; } /* Premium card around the perks — soft white surface with gold-foil top hairline and a tiny "What you get" label tab */ .zc-bk__brand-card { position: relative; z-index: 1; margin: 4px 0 18px; padding: 16px 16px 8px; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid var(--zc-linen, #ede8de); border-radius: 12px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 8px 22px -12px rgba(106, 70, 24, 0.18); } .zc-bk__brand-card::before { content: ""; position: absolute; top: -1px; left: 16px; right: 16px; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--zc-amber-dk, #a86828) 18%, var(--zc-amber-lt, #e8aa62) 50%, var(--zc-amber-dk, #a86828) 82%, transparent 100%); } .zc-bk__brand-card-label { position: absolute; top: -8px; left: 14px; padding: 1px 8px; background: linear-gradient(180deg, #fbf7ee 0%, #f5efe1 100%); font-family: 'Courier New', ui-monospace, monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--zc-amber-dk, #a86828); } .zc-bk__brand-card-label::before { content: '·'; margin-right: 4px; } .zc-bk__brand-card-label::after { content: '·'; margin-left: 4px; } .zc-bk__brand-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .zc-bk__brand-perks li { display: grid; grid-template-columns: auto 36px 1fr; gap: 12px; align-items: center; padding: 10px 0; font-family: var(--zc-f-body, 'Figtree', sans-serif); font-size: 12.5px; line-height: 1.45; color: var(--zc-warm-dk, #6b6055); border-bottom: 1px dashed var(--zc-linen, #ede8de); transition: transform 0.3s var(--zc-ease, cubic-bezier(0.25, 0.46, 0.45, 0.94)); } .zc-bk__brand-perks li:last-child { border-bottom: none; padding-bottom: 8px; } .zc-bk__brand-perks li:hover { transform: translateX(2px); } .zc-bk__brand-perks-num { font-family: 'Courier New', ui-monospace, monospace; font-size: 10.5px; font-weight: 600; color: var(--zc-amber-dk, #a86828); letter-spacing: 1.2px; opacity: 0.85; } .zc-bk__brand-perks-num::before { content: '·'; margin-right: 2px; } .zc-bk__brand-perks-num::after { content: '·'; margin-left: 2px; } .zc-bk__brand-perks-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 60%), linear-gradient(135deg, var(--zc-amber-a25, rgba(207, 138, 63, 0.25)), var(--zc-amber-a08, rgba(207, 138, 63, 0.08))); border: 1px solid var(--zc-amber-a35, rgba(207, 138, 63, 0.35)); color: var(--zc-amber-dk, #a86828); font-size: 14px; flex-shrink: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 4px 10px -3px rgba(168, 104, 40, 0.20); } .zc-bk__brand-perks-txt b { display: block; color: var(--zc-charcoal, #2a2520); font-weight: 600; font-size: 13px; margin-bottom: 1px; letter-spacing: -0.05px; } .zc-bk__brand-perks-txt small { display: block; font-size: 11.5px; color: var(--zc-warm-mid, #9a8e7e); letter-spacing: 0.05px; line-height: 1.35; } /* Editorial pull-quote — a quiet typographic signature */ .zc-bk__brand-quote { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 0 4px; position: relative; z-index: 1; } .zc-bk__brand-quote-rule { flex: 1; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--zc-amber-a35, rgba(207, 138, 63, 0.35)) 50%, transparent 100%); } .zc-bk__brand-quote-text { font-family: var(--zc-f-display, 'Outfit', sans-serif); font-size: 12px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: var(--zc-amber-dk, #a86828); white-space: nowrap; } /* WhatsApp CTA card — premium light editorial style with gold-foil top accent line. Sits at the bottom of the brand pane. */ .zc-bk__brand-cta { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; margin-top: auto; padding: 13px 14px; background: linear-gradient(180deg, #ffffff 0%, #fdfbf6 100%); border: 1px solid var(--zc-linen, #ede8de); border-radius: 12px; text-decoration: none; position: relative; z-index: 1; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 4px 14px -6px rgba(106, 70, 24, 0.14); transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .zc-bk__brand-cta::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--zc-amber-dk, #a86828) 18%, var(--zc-amber-lt, #e8aa62) 50%, var(--zc-amber-dk, #a86828) 82%, transparent 100%); opacity: 0.6; } .zc-bk__brand-cta:hover { border-color: var(--zc-amber-a35, rgba(207, 138, 63, 0.35)); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 10px 22px -8px rgba(207, 138, 63, 0.22); } .zc-bk__brand-cta:hover::before { opacity: 1; } .zc-bk__brand-cta-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35) 0%, transparent 55%), linear-gradient(135deg, #25d366, #128c7e); color: #ffffff; font-size: 17px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.30) inset, 0 6px 14px rgba(18, 140, 90, 0.32); } .zc-bk__brand-cta-text { display: flex; flex-direction: column; font-family: var(--zc-f-body, 'Figtree', sans-serif); line-height: 1.25; min-width: 0; } .zc-bk__brand-cta-text small { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--zc-warm-mid, #9a8e7e); margin-bottom: 2px; font-weight: 700; } .zc-bk__brand-cta-text b { font-size: 12.5px; font-weight: 600; color: var(--zc-charcoal, #2a2520); letter-spacing: -0.05px; } .zc-bk__brand-cta-arr { font-size: 14px; color: var(--zc-warm-mid, #9a8e7e); transition: transform 0.25s ease, color 0.25s ease; } .zc-bk__brand-cta:hover .zc-bk__brand-cta-arr { transform: translateX(3px); color: var(--zc-amber-dk, #a86828); } /* §6 FORM PANE (RIGHT) — the actual
. Scoped padding + scroll lives here only so the brand pane stays fixed-height. Panel is locked at 90vh; the body fills the remaining height under the form-head and scrolls internally if content overflows. */ .zc-bk__form { display: flex; flex-direction: column; background: var(--zc-white, #ffffff); min-width: 0; min-height: 0; overflow: hidden; } .zc-bk__form-head { flex: 0 0 auto; padding: 22px 28px 8px 28px; border-bottom: 1px dashed var(--zc-linen, #ede8de); } .zc-bk__form-title { margin: 0 0 4px; font-family: var(--zc-f-display, 'Outfit', sans-serif); font-size: 18px; font-weight: 500; color: var(--zc-charcoal, #2a2520); letter-spacing: -0.3px; } .zc-bk__form-sub { margin: 0 0 12px; font-family: var(--zc-f-body, 'Figtree', sans-serif); font-size: 12px; color: var(--zc-warm-mid, #9a8e7e); letter-spacing: 0.05px; } .zc-bk__body { flex: 1 1 auto; padding: 18px 28px 22px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; } /* Compact form inside the popup — labels above smaller inputs, 2-column on the upper rows so it fits the panel without scroll. */ .zc-bk__body #my_form { --gutter: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin: 0; } .zc-bk__body #my_form > [class*="col-"] { width: 100%; padding: 0; margin: 0; } /* Name + Phone share row 1; Email + Date share row 2; the rest full-width */ .zc-bk__body #my_form > [class*="col-"]:nth-child(3), /* full name (after 2 hidden inputs) */ .zc-bk__body #my_form > [class*="col-"]:nth-child(4), /* mobile */ .zc-bk__body #my_form > [class*="col-"]:nth-child(5), /* email */ .zc-bk__body #my_form > [class*="col-"]:nth-child(6) { /* date */ /* leave at default 1-of-2 */ } .zc-bk__body #my_form > [class*="col-"]:nth-child(7), /* message */ .zc-bk__body #my_form > [class*="col-"]:nth-child(8), /* checkbox */ .zc-bk__body #my_form > [class*="col-"]:nth-child(9) { /* submit button */ grid-column: 1 / -1; } @media (max-width: 540px) { .zc-bk__body #my_form { grid-template-columns: 1fr; } .zc-bk__body #my_form > [class*="col-"] { grid-column: 1 / -1; } } /* Label + input polish */ .zc-bk__body .form-label { font-family: var(--zc-f-heading, 'Figtree', sans-serif); font-size: 10.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--zc-warm-dk, #6b6055); margin: 0 0 4px; display: block; } .zc-bk__body .form-control, .zc-bk__body input[type="text"], .zc-bk__body input[type="email"], .zc-bk__body input[type="tel"], .zc-bk__body select, .zc-bk__body textarea { width: 100% !important; height: 36px; padding: 6px 12px !important; border-radius: 8px !important; border: 1px solid var(--zc-linen, #ede8de) !important; background: var(--zc-white, #ffffff) !important; font-family: var(--zc-f-body, 'Figtree', sans-serif) !important; font-size: 13px !important; color: var(--zc-charcoal, #2a2520) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .zc-bk__body textarea { height: auto; min-height: 50px; resize: vertical; } .zc-bk__body .form-control:focus, .zc-bk__body input:focus, .zc-bk__body select:focus, .zc-bk__body textarea:focus { border-color: var(--zc-amber, #cf8a3f) !important; box-shadow: 0 0 0 3px var(--zc-amber-a18, rgba(207, 138, 63, 0.18)) !important; outline: none !important; } .zc-bk__body .form-check { margin: 0; padding-left: 1.4em; } .zc-bk__body .form-check-label { font-family: var(--zc-f-body, 'Figtree', sans-serif); font-size: 11px; line-height: 1.4; color: var(--zc-warm-dk, #6b6055); } .zc-bk__body .invalid-feedback { font-size: 10.5px; margin-top: 2px; } .zc-bk__body .col-12.mt-2 { margin-top: 0 !important; } /* Submit button — branded amber, full width */ .zc-bk__body .contact-form-button, .zc-bk__body button[type="submit"] { width: 100%; height: 42px; margin-top: 2px; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--zc-amber, #cf8a3f) 0%, var(--zc-amber-dk, #a86828) 100%); color: var(--zc-white, #ffffff); font-family: var(--zc-f-heading, 'Figtree', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 22px rgba(207, 138, 63, 0.30); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; } .zc-bk__body .contact-form-button:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 14px 32px rgba(207, 138, 63, 0.40); } /* ========================================================================== §8 RESPONSIVE -------------------------------------------------------------------------- ≤ 920px — collapse to a single column (brand pane on top, form below) ≤ 640px — bottom-sheet, brand pane hidden, form-only ========================================================================== */ @media (max-width: 920px) { .zc-bk__panel { grid-template-columns: 1fr; width: min(560px, calc(100vw - 24px)); height: 90vh; max-height: 90vh; } .zc-bk__brand { padding: 18px 22px 16px; border-right: none; border-bottom: 1px solid var(--zc-linen, #ede8de); } .zc-bk__brand::after { display: none; } .zc-bk__brand-monogram, .zc-bk__brand-grain, .zc-bk__brand-quote, .zc-bk__brand-topline { display: none; } .zc-bk__brand-card { margin-bottom: 0; padding: 12px 14px 4px; } .zc-bk__brand-card-label { display: none; } .zc-bk__brand-card::before { display: none; } .zc-bk__brand-title { font-size: clamp(20px, 1.2vw + 14px, 24px); } .zc-bk__brand-sub { margin-bottom: 12px; } .zc-bk__brand-perks { /* Compact perks on tablet — 3 columns instead of stacked rows */ flex-direction: row; gap: 10px; padding-top: 10px; border-bottom: none; } .zc-bk__brand-perks li { border-bottom: none !important; padding: 0; grid-template-columns: 30px 1fr; gap: 8px; flex: 1; font-size: 11.5px; } .zc-bk__brand-perks-num { display: none; } .zc-bk__brand-perks-ic { width: 30px; height: 30px; font-size: 12px; } .zc-bk__brand-perks-txt small { display: none; } .zc-bk__brand-cta { display: none; } } @media (max-width: 640px) { .zc-bk__panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; height: 92vh; max-height: 92vh; border-radius: 18px 18px 0 0; transform: translate(0, 100%); transition: transform 0.4s var(--zc-ease-out, cubic-bezier(0.16, 1, 0.30, 1)), opacity 0.32s var(--zc-ease-out, cubic-bezier(0.16, 1, 0.30, 1)); } .zc-bk.is-open .zc-bk__panel { transform: translate(0, 0); } /* Drag-handle visual at the top of the sheet */ .zc-bk__panel::after { content: ""; position: absolute; top: 8px; left: 50%; width: 44px; height: 4px; border-radius: 2px; background: var(--zc-linen, #ede8de); transform: translateX(-50%); z-index: 6; } /* Hide the brand pane on mobile so the form gets the full sheet */ .zc-bk__brand { display: none; } .zc-bk__form-head { padding: 24px 20px 8px; } .zc-bk__body { padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px)); } .zc-bk__close { top: 12px; right: 12px; width: 34px; height: 34px; } } /* ========================================================================== §10 CALENDAR (jquery.datetimepicker) — date-cell centering -------------------------------------------------------------------------- The plugin's stock CSS sets `text-align: right` on every td/th of the calendar grid plus `padding-right: 5px` on the inner div, which shoves all the day numbers (1, 2, 3, …) against the right edge of their cells and looks broken next to the rest of the brand UI. Center them. We also bump the cell height a touch so the typography reads cleaner, and brand-tint the today / hover / selected states. IMPORTANT: the plugin's hover/current selectors are written as `.xdsoft_timepicker .xdsoft_time_box >div >div:hover` (4 classes + pseudo). To beat that specificity our overrides need to mirror the same `> div > div` chain — otherwise the orange (#ff8000) and blue (#33aaff) defaults leak through even with !important. ========================================================================== */ .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th { text-align: center !important; vertical-align: middle !important; height: 28px; } .xdsoft_datetimepicker .xdsoft_calendar td > div { padding: 0 !important; text-align: center !important; } /* Today */ .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { color: var(--zc-amber-dk, #a86828) !important; font-weight: 600; } /* Hover — calendar cells AND time-picker entries (both selector variants the plugin renders) */ .xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time:hover { background: var(--zc-amber, #cf8a3f) !important; color: #ffffff !important; box-shadow: none !important; } /* Selected / current — gradient fill in our brand amber */ .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time.xdsoft_current { background: linear-gradient(135deg, var(--zc-amber, #cf8a3f), var(--zc-amber-dk, #a86828)) !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(207, 138, 63, 0.30) !important; } /* Highlighted (range start / preset) — soft amber tint instead of the stock peach (#ffe9d2 + #ffb871 inset) */ .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_default { background: var(--zc-amber-a18, rgba(207, 138, 63, 0.18)) !important; box-shadow: var(--zc-amber, #cf8a3f) 0 1px 4px 0 inset !important; color: var(--zc-charcoal, #2a2520) !important; } /* Disabled-current hover guard — plugin restores the default #33aaff blue on disabled.current:hover; replace with our amber gradient so disabled-but-selected slots stay on-brand */ .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_disabled:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current.xdsoft_disabled:hover { background: linear-gradient(135deg, var(--zc-amber, #cf8a3f), var(--zc-amber-dk, #a86828)) !important; box-shadow: 0 4px 12px rgba(207, 138, 63, 0.30) !important; color: #ffffff !important; } /* ========================================================================== §11 Scroll-to-form pulse highlight -------------------------------------------------------------------------- On pages where the popup is intentionally skipped (e.g. /book-an-appointments where the form is already inline), the header "Book Appointment" trigger smooth-scrolls to the form and adds .zc-bk-pulse for ~1.2s — a soft amber glow that makes it obvious the trigger DID do something even though no overlay opened. ========================================================================== */ .zc-bk-pulse { animation: zc-bk-form-pulse 1.2s ease-out; border-radius: 12px; } @keyframes zc-bk-form-pulse { 0% { box-shadow: 0 0 0 0 rgba(207, 138, 63, 0.45), 0 0 0 0 rgba(207, 138, 63, 0.0); } 40% { box-shadow: 0 0 0 6px rgba(207, 138, 63, 0.20), 0 0 0 14px rgba(207, 138, 63, 0.10); } 100% { box-shadow: 0 0 0 0 rgba(207, 138, 63, 0.0), 0 0 0 0 rgba(207, 138, 63, 0.0); } }