/*
 * Huisstijl van kapsalonoranje.nl voor de klantkant van de boekingsmodule (los van de Vite-build,
 * alleen in de klantlayout geladen; het beheerpaneel blijft ongemoeid).
 * Alleen uiterlijk: lettertypes, pilvormige knoppen, ronde hoeken en het logo-oranje met zwarte
 * tekst. Bediening, volgorde en teksten blijven gelijk.
 */

@font-face { font-family: "Neulis Alt"; src: url("../fonts/huisstijl/neulis-alt-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Neulis Alt"; src: url("../fonts/huisstijl/neulis-alt-semibold.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/huisstijl/general-sans-variable.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/huisstijl/plex-arabic-400.woff2") format("woff2"); font-weight: 400 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/huisstijl/plex-arabic-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }

:root, :host {
	--font-sans: "General Sans", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif;
	--ko-display: "Neulis Alt", "IBM Plex Sans Arabic", "General Sans", ui-sans-serif, system-ui, sans-serif; /* Neulis Alt (zonder lus-letters), op verzoek */
	--ko-button: "Neulis Alt", "IBM Plex Sans Arabic", "General Sans", ui-sans-serif, system-ui, sans-serif;
	--color-accent: #ff8303;        /* logo-oranje */
	--color-accent-dark: #e86f00;   /* hover */
	--color-accent-tint: #fff4e8;
	--color-ink: #2b2d29;
	--color-ink-strong: #0c0e0a;
	--ko-accent-text: #b85700;      /* oranje als tekst op wit: leesbaar (4,6:1) */
}

body { font-family: var(--font-sans); }

/* Koppen en namen in Neulis Alt */
.widget-title, .row-title, .day .dn, .stepper-value, main h1, main h2, main h3 { font-family: var(--ko-display); font-weight: 600; letter-spacing: -0.005em; }
.widget-title { color: var(--color-ink-strong); font-size: 16px; }

/* Knoppen, chips, tijden en tabs in Neulis Alt */
.btn, .btn-accent, .btn-outline, .btn-next, .chip, .slot, .month-tab, header a, header button { font-family: var(--ko-button); }

/* Pilvormige knoppen en ronde hoeken */
.btn, .btn-accent, .btn-outline, .btn-next, .slot { border-radius: 100px; }
.day { border-radius: 14px; }
.field { border-radius: 14px; }
.summary { border-radius: 18px; overflow: hidden; }
.check { border-radius: 5px; }
header a.border-accent, header .rounded-\[4px\] { border-radius: 100px; }

/* Oranje vlakken: zwarte tekst, net als de knoppen op de website */
.btn-accent, .btn-next, .chip-active, .slot.selected, .stepper-btn-plus { color: var(--color-ink-strong); }
.day.selected .wd, .day.selected .dn, .day.selected .mo { color: var(--color-ink-strong); }
.row[aria-pressed="true"] .radio { color: var(--color-ink-strong); }
.btn-next { box-shadow: 0 10px 24px -12px rgb(12 14 10 / 0.35); }
.bg-accent.text-white { color: var(--color-ink-strong); }

/* Omlijnde knoppen en categoriepillen: zwart op wit (zoals de website), oranje als ze actief zijn */
.btn-outline { border-color: var(--color-ink-strong); color: var(--color-ink-strong); }
.btn-outline:hover { background: var(--color-ink-strong); color: #fff; }
.chip-outline { border-color: rgb(12 14 10 / 0.22); color: var(--color-ink-strong); }
.chip-outline:hover { border-color: var(--color-ink-strong); background: #fff; }
.chip-active { border-color: var(--color-accent); }

/* Oranje tekst op wit iets donkerder voor de leesbaarheid */
.text-accent { color: var(--ko-accent-text); }
.slot { color: var(--color-ink-strong); }
.slot:hover { border-color: var(--color-ink-strong); }
.month-tab[aria-selected=true] { color: var(--color-ink-strong); }

/* Kaart van de widget op grote schermen: ronder, zoals de kaarten op de website */
@media (min-width: 500px) {
	.widget { border-radius: 28px; }
	.widget > .widget-header:first-child { border-radius: 28px 28px 0 0; }
	.widget > :last-child, .widget > :last-child > .widget-footer:last-child, .widget > :last-child > .widget-footer-note:last-child { border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; }
}

/* ---------- De pagina rond de widget: aansluiten bij kapsalonoranje.nl ----------
   Kopbalk met pilknoppen zoals de website; op grotere schermen de zwart-witfoto gedempt op het
   logo-zwart (zoals het prijzenvlak op de site), met de witte afgeronde kaart erop. */
body > header { border-bottom: 0; box-shadow: 0 1px 0 rgb(12 14 10 / 0.06); }
body > header > div { min-height: 4.5rem; }
body > header a[href^="tel:"] { min-height: 2.75rem; padding: 0 1.15rem; border: 1px solid var(--color-ink-strong); border-radius: 100px; background: #fff; color: var(--color-ink-strong); font-family: var(--ko-button); font-weight: 600; transition: background-color 0.25s ease, color 0.25s ease; }
body > header a[href^="tel:"] svg { color: var(--color-accent); transition: color 0.25s ease; }
body > header a[href^="tel:"]:hover { background: var(--color-ink-strong); color: #fff; }
body > header a[href^="tel:"]:hover svg { color: var(--color-accent); }
body > header .relative > button { min-height: 2.75rem; padding: 0 0.95rem; border: 1px solid rgb(12 14 10 / 0.18); border-radius: 100px; color: var(--color-ink-strong); font-family: var(--ko-button); font-weight: 600; }
body > header .relative > button:hover { border-color: var(--color-ink-strong); }
body > header .relative > div { border-radius: 16px; padding: 0.35rem; }
body > header .relative > div a { border-radius: 10px; }
body > header .relative > div a.text-accent { color: var(--color-ink-strong); background: var(--color-accent-tint); }
body > header > div > div > span { padding: 0.55rem 0.9rem; border-radius: 100px; background: #f7f3ee; color: var(--color-ink-strong); font-weight: 500; }

@media (min-width: 640px) {
	body { background: #0c0e0a !important; }
	body::before { opacity: 0.42; }
	body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, rgb(12 14 10 / 0.05), rgb(12 14 10 / 0.7) 80%); }
	.widget { box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.65) !important; }
}