/*
 * OH! Keramik Buchung – Frontend.
 * Alle Farben kommen aus CSS-Variablen (:root wird vom Plugin mit den
 * Einstellungen befüllt) und lassen sich per Theme-CSS einfach überschreiben:
 *   --ohk-primary  Hauptfarbe (Royalblau)
 *   --ohk-mint     Akzent 1 (verfügbare Tage, Erfolg)
 *   --ohk-apricot  Akzent 2 (Hervorhebungen)
 *   --ohk-text     Textfarbe
 *   --ohk-bg       Kartenhintergrund
 *   --ohk-font     Schriftfamilie
 */

/* Theme-Resets können das hidden-Attribut aushebeln – hier verbindlich machen. */
.ohk [hidden] { display: none !important; }

.ohk {
	font-family: var(--ohk-font, system-ui, sans-serif);
	color: var(--ohk-text, #2c2c2c);
	max-width: 760px;
	margin: 0 auto;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

.ohk h3 { color: var(--ohk-primary, #0046AD); font-size: 1.35rem; margin: 0 0 1rem; }
.ohk h4 { color: var(--ohk-primary, #0046AD); margin: 1.2rem 0 .4rem; }

/* Schritt-Indikator */
.ohk-steps {
	display: flex;
	gap: 4px;
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	counter-reset: ohkstep;
}
.ohk-steps li {
	flex: 1;
	text-align: center;
	font-size: .78rem;
	padding: .55rem .25rem;
	background: color-mix(in srgb, var(--ohk-primary, #0046AD) 8%, #fff);
	color: var(--ohk-primary, #0046AD);
	border-radius: 8px;
	counter-increment: ohkstep;
	position: relative;
	opacity: .55;
}
.ohk-steps li::before {
	content: counter(ohkstep);
	display: block;
	font-weight: 700;
	font-size: .95rem;
}
.ohk-steps li.is-active { opacity: 1; background: var(--ohk-primary, #0046AD); color: #fff; }
.ohk-steps li.is-done { opacity: 1; background: var(--ohk-mint, #7fd1c0); color: var(--ohk-text, #2c2c2c); }
.ohk-steps li.is-done::before { content: '✓'; }

/* Karten (Standorte & Angebote) */
.ohk-locations, .ohk-offerings { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ohk-card {
	border: 2px solid color-mix(in srgb, var(--ohk-primary, #0046AD) 18%, #fff);
	border-radius: 14px;
	background: var(--ohk-bg, #fff);
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	text-align: left;
	transition: border-color .15s, transform .15s;
	font: inherit;
	color: inherit;
	width: 100%;
}
.ohk-card:hover, .ohk-card:focus-visible { border-color: var(--ohk-primary, #0046AD); transform: translateY(-2px); }
.ohk-card .ohk-card-body { padding: 14px 16px; }
.ohk-card .ohk-card-title { display: block; font-weight: 700; color: var(--ohk-primary, #0046AD); font-size: 1.05rem; }
.ohk-card .ohk-card-meta { display: block; font-size: .85rem; opacity: .75; margin-top: 2px; }
.ohk-card .ohk-card-desc { display: block; font-size: .85rem; margin-top: 6px; }
.ohk-card .ohk-card-price { display: block; margin-top: 8px; font-weight: 700; color: var(--ohk-primary, #0046AD); }
.ohk-card .ohk-card-title + br, .ohk-card .ohk-card-meta + br { display: none; }
.ohk-card .ohk-card-price .ohk-free-tag { color: var(--ohk-text, #2c2c2c); font-weight: 400; font-size: .85rem; }

/* Bilder-Slider */
.ohk-slider { position: relative; aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--ohk-apricot, #ffc49b) 35%, #fff); }
.ohk-slider img { width: 100%; height: 100%; object-fit: cover; display: none; }
.ohk-slider img.is-current { display: block; }
.ohk-slider .ohk-slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, .85);
	border: 0;
	border-radius: 50%;
	width: 34px;
	height: 34px;
	font-size: 1rem;
	cursor: pointer;
	color: var(--ohk-primary, #0046AD);
}
.ohk-slider .ohk-prev { left: 8px; }
.ohk-slider .ohk-next { right: 8px; }
.ohk-slider .ohk-dots { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; }
.ohk-slider .ohk-dots span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.6); margin: 0 3px; }
.ohk-slider .ohk-dots span.is-current { background: #fff; }

/* Kalender + Slots */
.ohk-datetime { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .ohk-datetime { grid-template-columns: 1fr; } }

.ohk-calendar table { width: 100%; border-collapse: collapse; }
.ohk-calendar th { font-size: .75rem; text-transform: uppercase; opacity: .6; padding: 4px; text-align: center; }
.ohk-calendar td { text-align: center; padding: 2px; }
.ohk-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ohk-cal-head strong { color: var(--ohk-primary, #0046AD); }
.ohk-cal-nav { background: none; border: 1px solid color-mix(in srgb, var(--ohk-primary, #0046AD) 30%, #fff); border-radius: 8px; width: 40px; height: 40px; cursor: pointer; color: var(--ohk-primary, #0046AD); font-size: 1rem; }
.ohk-day {
	width: 100%;
	min-height: 42px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	font: inherit;
	color: inherit;
	cursor: default;
	opacity: .35;
}
.ohk-day.is-avail { background: color-mix(in srgb, var(--ohk-mint, #7fd1c0) 45%, #fff); cursor: pointer; opacity: 1; font-weight: 600; }
.ohk-day.is-avail:hover { background: var(--ohk-mint, #7fd1c0); }
.ohk-day.is-selected { background: var(--ohk-primary, #0046AD); color: #fff; }

.ohk-slot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 12px 16px;
	margin-bottom: 8px;
	border: 2px solid color-mix(in srgb, var(--ohk-primary, #0046AD) 18%, #fff);
	border-radius: 12px;
	background: var(--ohk-bg, #fff);
	font: inherit;
	color: inherit;
	cursor: pointer;
	min-height: 48px;
}
.ohk-slot:hover, .ohk-slot:focus-visible { border-color: var(--ohk-primary, #0046AD); }
.ohk-slot .ohk-slot-free { font-size: .8rem; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--ohk-mint, #7fd1c0) 45%, #fff); }
.ohk-slot.is-low .ohk-slot-free { background: color-mix(in srgb, var(--ohk-apricot, #ffc49b) 60%, #fff); }
.ohk-slot:disabled { opacity: .45; cursor: not-allowed; }
.ohk-slot.is-full { border-style: dashed; }
.ohk-slot.is-full .ohk-slot-free { background: #eee; }
.ohk-notice-wl { background: color-mix(in srgb, var(--ohk-apricot, #ffc49b) 40%, #fff); }

/* Formulare – Mobil-first: große Felder, große Buttons */
.ohk form label { display: block; margin-bottom: .9rem; font-weight: 600; font-size: .92rem; }
.ohk input[type="text"], .ohk input[type="email"], .ohk input[type="tel"],
.ohk input[type="number"], .ohk select, .ohk textarea {
	width: 100%;
	padding: 12px 14px;
	margin-top: 4px;
	border: 2px solid color-mix(in srgb, var(--ohk-primary, #0046AD) 20%, #fff);
	border-radius: 10px;
	font: inherit;
	background: var(--ohk-bg, #fff);
	min-height: 48px;
	box-sizing: border-box;
}
.ohk textarea { min-height: 0; }
.ohk input:focus, .ohk select:focus, .ohk textarea:focus { outline: none; border-color: var(--ohk-primary, #0046AD); }
.ohk-grid-2 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .ohk-grid-2 { grid-template-columns: 1fr; } }
.ohk-hint { font-size: .82rem; opacity: .7; margin: -.3rem 0 1rem; }

/* Erwachsene + Kinder nebeneinander */
.ohk-party { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: .9rem; }
.ohk-party .ohk-persons-label { margin-bottom: 0; }
.ohk-child-ages { margin-bottom: .9rem; }
.ohk-child-ages .ohk-hint { margin-bottom: .4rem; }
.ohk-child-age input { max-width: 120px; }

/* Personenzahl: +/− UND direkt editierbares Zahlenfeld */
.ohk-persons { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
.ohk-persons input { width: 90px; text-align: center; }
.ohk-persons button {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	border: 2px solid var(--ohk-primary, #0046AD);
	background: var(--ohk-bg, #fff);
	color: var(--ohk-primary, #0046AD);
	font-size: 1.4rem;
	cursor: pointer;
	line-height: 1;
}
.ohk-persons button:active { background: var(--ohk-primary, #0046AD); color: #fff; }

/* Checkboxen */
.ohk-check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: .88rem !important; }
.ohk-check input { width: 22px !important; height: 22px; min-height: 0 !important; flex: 0 0 auto; margin-top: 2px; accent-color: var(--ohk-primary, #0046AD); }
.ohk-check a { color: var(--ohk-primary, #0046AD); }

/* Buttons */
.ohk-btn {
	display: inline-block;
	padding: 13px 26px;
	border-radius: 12px;
	border: 2px solid var(--ohk-primary, #0046AD);
	background: var(--ohk-bg, #fff);
	color: var(--ohk-primary, #0046AD);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	min-height: 48px;
}
.ohk-btn-primary { background: var(--ohk-primary, #0046AD); color: #fff; width: 100%; font-size: 1.05rem; }
.ohk-btn-primary:hover { filter: brightness(1.1); }
.ohk-btn[disabled] { opacity: .6; cursor: wait; }
.ohk-nav { margin-top: 1.2rem; }

/* Zusammenfassung, Hinweise, Fehler */
.ohk-summary {
	background: color-mix(in srgb, var(--ohk-apricot, #ffc49b) 25%, #fff);
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 1.2rem;
}
.ohk-error { color: #b00020; font-weight: 600; }
.ohk-offline { background: color-mix(in srgb, var(--ohk-apricot, #ffc49b) 40%, #fff); padding: 16px 20px; border-radius: 12px; }
.ohk-notice { padding: 12px 16px; border-radius: 10px; margin-bottom: 1rem; }
.ohk-notice-ok { background: color-mix(in srgb, var(--ohk-mint, #7fd1c0) 40%, #fff); }
.ohk-notice-err { background: #fdeaea; color: #b00020; }
.ohk-done h3 { font-size: 1.5rem; }
.ohk-share { display: flex; gap: 8px; }
.ohk-share input { flex: 1; }
.ohk-share .ohk-btn { white-space: nowrap; }

/* Honeypot unsichtbar */
.ohk-hp { position: absolute !important; left: -9999px !important; height: 0 !important; width: 0 !important; opacity: 0; pointer-events: none; }