/* =====================================================================
LUCIFFERS — WIDGET STYLES (shared base: tokens, header, forms, buttons)
Loaded by booking-widget.html AND admin.html.
===================================================================== */
:root{ }
#luciffers-root{
--bg:#ffffff; --ink:#0a0a0a; --accent:#0a0a0a; --accent-contrast:#ffffff; --radius:0px;
--font-display:'Bebas Neue', sans-serif; --font-body:'Inter', sans-serif; --font-mono:'Space Grotesk', monospace;
--surface: color-mix(in srgb, var(--ink) 4%, var(--bg));
--surface-2: color-mix(in srgb, var(--ink) 8%, var(--bg));
--line: color-mix(in srgb, var(--ink) 15%, var(--bg));
--line-soft: color-mix(in srgb, var(--ink) 8%, var(--bg));
--ink-dim: color-mix(in srgb, var(--ink) 58%, var(--bg));
--ink-faint: color-mix(in srgb, var(--ink) 36%, var(--bg));
}
:where(#luciffers-root, #luciffers-root *){ box-sizing:border-box; margin:0; padding:0; }
#luciffers-root{
font-family: var(--font-body); color: var(--ink); background: var(--bg);
-webkit-font-smoothing:antialiased; line-height:1.5; position:relative; min-height:100vh;
}
#luciffers-root a{ color:inherit; }
/* color:inherit matters on iPhones: Safari paints button text in the system
blue unless the colour is set, which turned every service name blue.
appearance:none stops it adding its own rounded chrome too. */
/* :where() keeps this at zero priority, so any rule below can still set its
own button colour (the language switch, for one). */
:where(#luciffers-root) :where(button){ color:inherit; }
#luciffers-root button{ font-family:inherit; cursor:pointer;
-webkit-appearance:none; appearance:none; }
#luciffers-root input,#luciffers-root textarea,#luciffers-root select{ font-family:inherit; }
@media (prefers-reduced-motion: reduce){ #luciffers-root *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }
.view{ display:none; } .view.active{ display:block; }
/* ===== HEADER ===== */
.lf-header{ display:flex; align-items:center; justify-content:space-between; padding:22px clamp(18px,4vw,56px); border-bottom:1px solid var(--line-soft); flex-wrap:wrap; gap:12px; row-gap:10px; }
.lf-brand{ display:flex; align-items:center; gap:12px; }
.lf-brand img{ width:34px; height:34px; object-fit:contain; }
.lf-brand svg{ width:34px; height:34px; }
.lf-brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.lf-brand-text b{ font-family:var(--font-display); font-size:22px; letter-spacing:.5px; font-weight:400; }
.lf-brand-text span{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:1.5px; color:var(--ink-faint); text-transform:uppercase; }
/* Same look as the website header: PT / EN, the chosen one in the brand green. */
.lf-lang{ display:flex; align-items:center; gap:.3rem; }
.lf-lang span{ color:var(--line); font-size:11px; }
.lf-header-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.lf-manage-link{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.5px; color:var(--ink-dim); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; padding:10px 2px; }
.lf-manage-link:hover{ color:var(--ink); }
@media (hover:none) and (pointer:coarse){ .lf-manage-link{ font-size:13px; padding:12px 4px; } }
.lf-lang button{ border:none; background:transparent; color:var(--ink-faint); font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:1px; padding:8px 3px; transition:.2s; }
/* Gold marks the chosen language, as on the website header. This is the
text-safe gold (the site's --brass-d), because the widget ground is cream. */
.lf-lang button.active{ color:var(--gold-on-light, #96751F); font-weight:700; }
.lf-lang button:hover{ color:var(--ink); }
.lf-stripe{ height:5px; width:100%; background:repeating-linear-gradient(-45deg, var(--stripe-color, var(--ink)) 0 14px, var(--stripe-color-2, var(--bg)) 14px 20px); }
/* ===== HERO ===== */
.lf-hero{ padding:44px clamp(18px,4vw,56px) 8px; text-align:center; }
.lf-manage-content{ max-width:480px; margin:0 auto; padding:44px clamp(18px,4vw,32px) 60px; min-height:50vh; }
.lf-manage-hero{ text-align:center; margin-bottom:32px; }
.lf-manage-hero h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,4vw,34px); line-height:1.05; letter-spacing:.3px; margin:0 auto 10px; }
.lf-manage-hero p{ color:var(--ink-dim); font-size:14px; max-width:38ch; margin:0 auto; }
.lf-manage-card{ border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:var(--surface); }
.lf-eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; display:block; }
.lf-hero h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(32px,4.6vw,50px); line-height:1.02; letter-spacing:.4px; max-width:20ch; margin:0 auto; }
.lf-hero p{ margin:14px auto 0; max-width:46ch; color:var(--ink-dim); font-size:15.5px; }
/* ===== WIZARD (centered column) ===== */
.lf-wizard{ max-width:640px; margin:0 auto; padding:22px clamp(18px,4vw,32px) 60px; }
.lf-rail{ display:flex; align-items:center; justify-content:center; gap:7px; margin-bottom:10px; overflow-x:auto; padding:2px; }
.lf-rail-dot{ width:9px; height:9px; border-radius:999px; background:var(--line); flex:none; transition:.25s; cursor:default; }
.lf-rail-dot.done{ background:var(--ink-dim); cursor:pointer; }
.lf-rail-dot.current{ background:var(--ink); width:26px; }
.lf-rail-line{ width:14px; height:1px; background:var(--line); flex:none; }
.lf-rail-line.done{ background:var(--ink-dim); }
.lf-step-eyebrow{ text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; }
.lf-panel{ min-height:360px; }
.lf-step-num{ font-family:var(--font-display); font-size:15px; color:var(--ink-faint); display:block; margin-bottom:2px; }
.lf-step-title{ font-family:var(--font-display); font-weight:400; font-size:28px; margin:0 auto 4px; text-align:center; }
.lf-step-sub{ color:var(--ink-faint); font-size:13.5px; margin:0 auto 26px; text-align:center; max-width:44ch; }
.lf-fade{ animation:lfFade .35s ease; } @keyframes lfFade{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }
.lf-anim-fade{ opacity:0; animation:lfAnimFade .35s ease forwards; }
.lf-anim-cascade{ opacity:0; animation:lfAnimCascade .4s ease forwards; }
.lf-anim-slide{ opacity:0; animation:lfAnimSlide .4s ease forwards; }
.lf-anim-pop{ opacity:0; animation:lfAnimPop .35s cubic-bezier(.2,1.2,.4,1) forwards; }
@keyframes lfAnimFade{ from{opacity:0;} to{opacity:1;} }
@keyframes lfAnimCascade{ from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
@keyframes lfAnimSlide{ from{opacity:0;transform:translateX(-16px);} to{opacity:1;transform:translateX(0);} }
@keyframes lfAnimPop{ from{opacity:0;transform:scale(.9);} to{opacity:1;transform:scale(1);} }
/* ===== BIG CHOICE TILES (language / gender) ===== */
.lf-bigtiles{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--btn-gap,14px); max-width:480px; margin:0 auto; }
.lf-bigtile{ flex:1 1 var(--primary-width,190px); max-width:calc(var(--primary-width,190px) * 1.3); min-height:var(--primary-height,150px); border:1px solid var(--line); border-radius:var(--radius); padding:20px; text-align:var(--primary-text-align,center); transition:.2s; background:var(--bg); box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:var(--primary-flex-align,center); }
.lf-bigtile:hover{ border-color:var(--ink); }
.lf-bigtile.selected{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.lf-bigtile svg{ width:30px; height:30px; margin:0 auto 12px; }
.lf-bigtile-title{ font-family:var(--font-display); font-size:20px; letter-spacing:.4px; }
.lf-bigtile-sub{ font-size:11.5px; color:var(--ink-faint); margin-top:4px; }
.lf-bigtile.selected .lf-bigtile-sub{ color:color-mix(in srgb, var(--bg) 70%, transparent); }
/* ===== CARDS (categories / items / professionals) ===== */
.lf-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--btn-gap,14px); }
.lf-card{ flex:1 1 var(--primary-width,200px); max-width:calc(var(--primary-width,200px) * 1.3); min-height:var(--primary-height,150px); background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:20px; cursor:pointer; transition:.2s; position:relative; text-align:var(--primary-text-align,left); box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; }
.lf-card:hover{ border-color:var(--ink); }
.lf-card.selected{ border-color:var(--ink); background:var(--ink); color:var(--bg); }
.lf-card-icon{ width:30px; height:30px; margin-bottom:14px; color:var(--ink); }
.lf-card.selected .lf-card-icon{ color:var(--bg); }
#luciffers-root.icons-off .lf-card-icon,
#luciffers-root.icons-off .lf-bigtile svg{ display:none !important; }
.lf-card-name{ font-size:16px; font-weight:600; margin-bottom:6px; }
/* "x2" beside a service already chosen twice in this booking. Forest on bone,
the same pair the rest of the widget uses (--accent on --bg). */
.lf-card-count{ display:inline-block; margin-left:8px; padding:1px 7px; border-radius:999px;
background:var(--accent); color:var(--bg); font-size:12px; font-weight:600; vertical-align:middle; }
.lf-card-desc{ font-size:12.5px; color:var(--ink-faint); margin-bottom:12px; min-height:14px; }
.lf-card.selected .lf-card-desc{ color:color-mix(in srgb, var(--bg) 65%, transparent); }
.lf-card-meta{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:12px; color:var(--ink-dim); }
.lf-card.selected .lf-card-meta{ color:color-mix(in srgb, var(--bg) 80%, transparent); }
.lf-card-arrow{ position:absolute; top:18px; right:18px; width:16px; height:16px; opacity:.4; }
.lf-crumb{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:18px; font-size:12.5px; color:var(--ink-dim); }
.lf-crumb button{ border:none; background:transparent; color:var(--ink-dim); text-decoration:underline; font-size:12.5px; padding:0; }
.lf-desc-edit-hint{ font-size:11px; color:var(--ink-faint); margin-top:14px; }
/* professional cards */
.lf-prof-photo{ width:100%; aspect-ratio:1/1; border-radius:var(--radius); background:var(--surface-2); overflow:hidden; margin-bottom:14px; display:flex; align-items:center; justify-content:center; }
.lf-prof-photo img{ width:100%; height:100%; object-fit:cover; }
.lf-prof-photo span{ font-family:var(--font-display); font-size:30px; color:var(--ink-faint); }
.lf-prof-meta-row{ display:flex; gap:10px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-dim); margin-top:8px; }
.lf-card.selected .lf-prof-meta-row{ color:color-mix(in srgb, var(--bg) 80%, transparent); }
.lf-prof-tag{ border:1px solid var(--line); border-radius:999px; padding:3px 9px; }
.lf-card.selected .lf-prof-tag{ border-color:color-mix(in srgb, var(--bg) 40%, transparent); }
/* professional rows (rectangular: photo left, details right — always stacked) */
.lf-prof-list{ display:flex; flex-direction:column; gap:var(--btn-gap,14px); max-width:600px; margin:0 auto; }
.lf-prof-row{ display:flex; align-items:center; gap:16px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:14px; min-height:var(--primary-height,80px); cursor:pointer; transition:.2s; text-align:var(--primary-text-align,left); width:100%; box-sizing:border-box; }
.lf-prof-row:hover{ border-color:var(--ink); }
.lf-prof-row.selected{ border-color:var(--ink); background:var(--ink); color:var(--bg); }
.lf-prof-row-photo{ width:calc(76px * var(--primary-scale,1)); height:calc(76px * var(--primary-scale,1)); border-radius:var(--radius); background:var(--surface-2); overflow:hidden; flex:none; display:flex; align-items:center; justify-content:center; }
.lf-prof-row-photo img{ width:100%; height:100%; object-fit:cover; }
.lf-prof-row-photo span{ font-family:var(--font-display); font-size:26px; color:var(--ink-faint); }
.lf-prof-row-details{ flex:1; min-width:0; }
.lf-prof-row-name{ font-size:16px; font-weight:600; margin-bottom:3px; }
.lf-prof-row-role{ font-size:12.5px; color:var(--ink-faint); margin-bottom:8px; }
.lf-prof-row.selected .lf-prof-row-role{ color:color-mix(in srgb, var(--bg) 65%, transparent); }
.lf-prof-row-meta{ display:flex; gap:8px; flex-wrap:wrap; font-size:11px; color:var(--ink-dim); }
.lf-prof-row.selected .lf-prof-row-meta{ color:color-mix(in srgb, var(--bg) 80%, transparent); }
.lf-prof-row-tag{ border:1px solid var(--line); border-radius:999px; padding:3px 9px; white-space:nowrap; }
.lf-prof-row-price{ background:var(--ink); color:var(--bg); border-color:var(--ink); font-weight:700; }
.lf-prof-row.selected .lf-prof-row-price{ background:var(--bg); color:var(--ink); border-color:var(--bg); }
.lf-prof-row.selected .lf-prof-row-tag{ border-color:color-mix(in srgb, var(--bg) 40%, transparent); }
@media (max-width:480px){
.lf-prof-row{ gap:12px; padding:12px; }
.lf-prof-row-photo{ width:60px; height:60px; }
}
/* ===== ORDER SUMMARY (persistent mini-cart on steps 4-6) ===== */
.lf-ordersummary{ max-width:480px; margin:0 auto 28px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.lf-ordersummary-items{ padding:4px 16px; }
.lf-ordersummary-item{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.lf-ordersummary-item:last-child{ border-bottom:none; }
.lf-ordersummary-name{ flex:1; text-align:left; }
.lf-ordersummary-price{ font-family:var(--font-mono); font-size:12px; color:var(--ink-dim); white-space:nowrap; }
.lf-ordersummary-remove{ border:none; background:none; color:var(--ink-faint); width:22px; height:22px; border-radius:50%; flex:none; font-size:15px; line-height:1; }
.lf-ordersummary-remove:hover{ background:var(--surface); color:var(--ink); }
.lf-ordersummary-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; background:var(--surface); border-top:1px solid var(--line-soft); flex-wrap:wrap; }
.lf-ordersummary-total{ font-size:12.5px; color:var(--ink-dim); }
.lf-ordersummary-total b{ color:var(--ink); }
.lf-ordersummary-add{ border:none; background:none; color:var(--ink); font-size:12px; font-weight:600; text-decoration:underline; padding:2px; }
/* ===== DATE / TIME ===== */
.lf-cal{ max-width:400px; margin:0 auto 28px; }
.lf-cal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.lf-cal-month-label{ font-family:var(--font-display); font-size:22px; letter-spacing:.4px; }
.lf-cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px; }
.lf-cal-weekdays div{ font-family:var(--font-mono); font-size:9.5px; color:var(--ink-faint); text-transform:uppercase; text-align:center; letter-spacing:.4px; }
.lf-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.lf-cal-day{ aspect-ratio:1; border-radius:calc(var(--radius,18px) * .5); border:1px solid transparent; font-size:14px; color:var(--ink); display:flex; align-items:center; justify-content:center; position:relative; transition:.15s; }
.lf-cal-day:not(.disabled):not(.outside):hover{ border-color:var(--ink); }
.lf-cal-day.today:not(.selected)::after{ content:""; position:absolute; bottom:5px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--ink); }
.lf-cal-day.selected{ background:var(--ink); color:var(--bg); font-weight:700; }
.lf-cal-day.selected.today::after{ background:var(--bg); }
.lf-cal-day.disabled{ color:var(--ink-faint); cursor:not-allowed; }
.lf-cal-day.disabled.today::after{ background:var(--ink-faint); }
.lf-cal-day.outside{ visibility:hidden; }
@media (hover:none) and (pointer:coarse){ .lf-cal-day{ min-height:40px; } }
.lf-slots{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--btn-gap,9px); }
.lf-slot{ flex:0 1 78px; padding:calc(11px * var(--primary-scale,1)) calc(6px * var(--primary-scale,1)); text-align:var(--primary-text-align,center); border-radius:var(--radius); border:1px solid var(--line); font-family:var(--font-mono); font-size:13px; color:var(--ink-dim); transition:.15s; }
.lf-slot:hover{ border-color:var(--ink); color:var(--ink); } .lf-slot.selected{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.lf-empty{ color:var(--ink-faint); font-size:13.5px; padding:26px 0; text-align:center; border:1px dashed var(--line); border-radius:var(--radius); }
/* ===== FORM ===== */
.lf-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:480px; margin:0 auto; text-align:left; }
.lf-form .full{ grid-column:1/-1; } @media (max-width:520px){ .lf-form{ grid-template-columns:1fr; } }
.lf-field label{ display:block; font-size:11.5px; color:var(--ink-faint); margin-bottom:7px; font-family:var(--font-mono); letter-spacing:.4px; text-transform:uppercase; }
/* 16px on phones: below that, iOS zooms the whole page in when a field is
focused and never zooms back out. */
@media (hover:none) and (pointer:coarse){ .lf-field input,.lf-field textarea{ font-size:16px; } }
.lf-field input,.lf-field textarea{ width:100%; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:13px; color:var(--ink); font-size:16px; transition:.15s; }
.lf-field input:focus,.lf-field textarea:focus{ outline:none; border-color:var(--ink); }
.lf-field textarea{ resize:vertical; min-height:70px; }
.lf-field.error input,.lf-field.error textarea{ border-color:#c0392b; }
.lf-field-err{ font-size:11.5px; color:#c0392b; margin-top:5px; display:none; } .lf-field.error .lf-field-err{ display:block; }
.lf-note{ font-size:11.5px; color:var(--ink-faint); margin:18px auto 0; max-width:480px; text-align:center; }
.lf-note a{ text-decoration:underline; }
/* ===== SUMMARY ===== */
.lf-summary{ border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin:0 auto 26px; max-width:480px; text-align:left; }
.lf-summary-row{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:14px; gap:14px; }
.lf-summary-row:last-child{ border-bottom:none; }
.lf-summary-row span:first-child{ color:var(--ink-faint); flex:none; }
.lf-summary-row span:last-child{ font-weight:600; text-align:right; }
/* ===== BUTTONS ===== */
.lf-actions{ display:flex; gap:var(--btn-gap,12px); margin-top:30px; align-items:center; flex-wrap:wrap; justify-content:var(--btn-row-justify,center); }
.lf-btn{ border:1px solid var(--ink); border-radius:999px; padding:14px 26px; font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:8px; transition:.2s; background:transparent; color:var(--ink); justify-content:center; box-sizing:border-box; }
.lf-actions .lf-btn{ min-width:172px; }
#widget-view .lf-btn{ min-height:var(--secondary-height,48px); justify-content:var(--secondary-justify,center); padding:calc(14px * var(--secondary-scale,1)) calc(26px * var(--secondary-scale,1)); font-size:calc(13.5px * var(--secondary-scale,1)); }
#widget-view .lf-actions .lf-btn{ min-width:var(--secondary-width,172px); }
.lf-btn-primary{ background:var(--ink); color:var(--bg); }
.lf-btn-primary:hover{ opacity:.82; } .lf-btn-primary:disabled{ opacity:.3; cursor:not-allowed; }
.lf-btn-ghost:hover{ background:var(--surface); }
.lf-btn svg{ width:14px; height:14px; }
/* ===== VERTICAL BUTTON LAYOUT (Appearance → Buttons → Layout) ===== */
#luciffers-root.buttons-vertical .lf-bigtiles,
#luciffers-root.buttons-vertical .lf-grid,
#luciffers-root.buttons-vertical .lf-actions{
flex-direction:column; align-items:stretch; max-width:420px; margin-left:auto; margin-right:auto;
}
#luciffers-root.buttons-vertical .lf-bigtile,
#luciffers-root.buttons-vertical .lf-card{ max-width:none; width:100%; }
#luciffers-root.buttons-vertical .lf-actions .lf-btn{ width:100%; min-width:0; }
#luciffers-root.buttons-vertical .lf-prof-list{ max-width:560px; }
/* ===== CONFIRM ===== */
.lf-confirm{ text-align:center; padding:14px 0 6px; }
.lf-seal{ width:88px; height:88px; margin:0 auto 22px; }
.lf-seal circle{ fill:none; stroke:var(--ink); stroke-width:1.6; stroke-dasharray:220; stroke-dashoffset:220; animation:lfDraw .7s ease forwards; }
.lf-seal path{ fill:none; stroke:var(--ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; animation:lfDraw .4s .6s ease forwards; }
@keyframes lfDraw{ to{ stroke-dashoffset:0; } }
.lf-confirm h2{ font-family:var(--font-display); font-weight:400; font-size:30px; margin-bottom:8px; }
.lf-confirm p{ color:var(--ink-dim); font-size:14.5px; margin-bottom:22px; }
.lf-ref{ font-family:var(--font-mono); letter-spacing:2px; color:var(--ink-faint); font-size:12.5px; margin-bottom:26px; }
/* ===== FOOTER ===== */
.lf-footer{ border-top:1px solid var(--line-soft); padding:20px clamp(18px,4vw,56px); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--ink-faint); }
.lf-footer a{ color:var(--ink-faint); text-decoration:none; } .lf-footer a:hover{ color:var(--ink); }
.lf-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--bg); padding:13px 20px; border-radius:999px; font-size:13.5px; opacity:0; pointer-events:none; transition:.3s; z-index:999; }
.lf-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.lf-loading{ display:flex; align-items:center; justify-content:center; padding:80px 0; color:var(--ink-faint); font-size:13px; font-family:var(--font-mono); }
.lf-spin{ width:15px; height:15px; border:2px solid var(--line); border-top-color:var(--ink); border-radius:50%; margin-right:10px; animation:lfSpin .7s linear infinite; }
@keyframes lfSpin{ to{ transform:rotate(360deg); } }
/* ===== RESPONSIVE / TOUCH OPTIMIZATION ===== */
html{ -webkit-text-size-adjust:100%; }
#luciffers-root{ overflow-x:hidden; }
#luciffers-root button,#luciffers-root a{ touch-action:manipulation; }
@media (max-width:1024px){
.lf-hero{ padding-top:34px; }
}
@media (max-width:760px){
.lf-wizard{ padding:18px clamp(16px,4vw,32px) 50px; }
}
@media (max-width:480px){
.lf-header{ padding:16px 16px; }
.lf-hero{ padding:24px 16px 6px; }
.lf-wizard{ padding:18px 12px 40px; }
.lf-bigtile{ flex-basis:100%; max-width:none; }
.lf-grid{ gap:10px; }
.lf-card{ flex-basis:100%; max-width:none; }
}
@media (hover:none) and (pointer:coarse){
.lf-btn{ min-height:46px; padding:13px 24px; }
.lf-slot{ min-height:44px; display:flex; align-items:center; justify-content:center; }
.lf-card{ padding:18px; }
.lf-ordersummary-remove{ width:32px; height:32px; }
.lf-lang button{ padding:10px 4px; font-size:12.5px; }
.lf-bigtile{ padding:28px 18px; }
}
.lf-hidden{ display:none !important; }
/* When the widget runs inside an iframe it must be free to shrink to its own
content, otherwise min-height:100vh pins it to whatever height the host
already gave the frame and the auto-resize can only ever grow. */
#luciffers-root.lf-embedded{ min-height:0; }
/* =====================================================================
SITE SKIN — matches www.luciffers.com so the booking flow reads as part
of the site rather than a third-party form.
--bg / --ink / --accent / --radius / the fonts all arrive from the theme
(see SEED_SETTINGS.theme in luciffers-defaults.js) and stay editable in
the admin panel. What follows is only the part the theme cannot express:
the derived surface/line ramp, and the chequerboard.
===================================================================== */
#luciffers-root{
/* The widget derives these from ink+bg by default, which makes raised
surfaces darker than the ground. The site works the other way round —
--paper is lighter than --bone — so they are named here explicitly. */
--surface: #FBF6EC; /* site --paper */
--surface-2: #E9E0CC; /* one step down from the ground, for hovers */
--line: #DED3BE; /* site --line */
--line-soft: #E8E0CE;
--ink-dim: #4A5B4F;
--ink-faint: #6C7A70; /* site --muted */
}
/* The chequerboard floor, same geometry as the site's .checker--sm. Replaces
the diagonal barber stripe; --stripe-color still feeds the tile colour so
the admin colour control keeps working. */
.lf-stripe{
height:8px;
background:none;
background-image:
conic-gradient(var(--stripe-color, #24402F) 0 25%, transparent 0 50%,
var(--stripe-color, #24402F) 0 75%, transparent 0);
background-size:8px 8px;
}
/* The site sets its small caps in a geometric sans, not a mono. */
#luciffers-root{ --font-mono: 'DM Sans', 'Century Gothic', sans-serif; }
/* The site has no rounded corners anywhere, and a pill button in the middle of
it reads as somebody else's form. These were hardcoded to 999px; routing them
through --radius lets the admin radius control drive them together. The
progress dots keep their own radius — they are meant to be dots. */
.lf-lang,
.lf-lang button,
.lf-prof-tag,
.lf-prof-row-tag,
.lf-btn,
.lf-toast{ border-radius: var(--radius); }
/* ---------------------------------------------------------------------
PALETTE LOCK
These are the site's colours, and they are deliberately !important so
they win over the inline custom properties applyTheme() writes from
settings.theme. That means the palette survives whatever is stored in
Supabase, and the colour controls in the admin panel no longer affect
the widget — which is the intent: the booking flow must keep matching
www.luciffers.com.
To hand the colours back to the admin panel, delete this one block.
Everything else (fonts, radius, button sizes, spacing) is untouched and
still editable there.
--------------------------------------------------------------------- */
#luciffers-root{
--bg: #F2EADA !important; /* site --bone */
--ink: #1C2A21 !important; /* site --ink */
--accent: #24402F !important; /* site --forest */
--accent-contrast: #FFFFFF !important;
--stripe-color: #24402F !important;
--stripe-color-2: #F2EADA !important;
/* Type and corners belong to the lock too. The settings row stored in
Supabase still holds the original "Bebas Neue" and radius 10, and those
were reaching the widget and undoing the site match even though the
colours held. Pinning them here fixes that for good.
Playfair Display is not an arbitrary pick: it is the site's own declared
fallback for --display, so on a machine without Bodoni MT the site itself
renders in it. */
--font-display: 'Playfair Display', 'Bodoni MT', Didot, Georgia, serif !important;
--font-body: 'DM Sans', 'Century Gothic', 'Segoe UI', sans-serif !important;
--radius: 0 !important; /* the site has no rounded corners */
--gold-on-light: #96751F !important; /* site --brass-d: gold that reads on cream */
/* Plain values instead of color-mix() for the two the base file still
derives: iPhones on iOS 15 and older do not understand color-mix, and
without these the card borders and shaded rows disappeared there. */
--surface-2: #EDE4D2 !important;
--line: #DED3BE !important;
}
/* ---------------------------------------------------------------------
BRAND MARK
The themed logo was a JPEG, so it carried a white square that sat badly
on the bone ground. The real laurel crest is a transparent PNG and is
pinned here rather than in settings.theme, so a stored logo cannot put
the white box back. Lives beside this file, so the widget folder stays
self-contained wherever it is deployed.
--------------------------------------------------------------------- */
/* The crest is now a real element (.lf-crest, further down); the old
pseudo-element is gone so there is only ever one crest. Any ![]()
or