/* Inhouse Golf – Buchungsseite (BOW-120ff. Frontend). Primärfarbe nach www.inhouse-golf.de. */
#ihg-booking-app {
	--ihg-primary: #229922;
	--ihg-dark: #32373c;
	/* Farbe für die im Tagesraster gewählte Zeitspanne - bewusst abgesetzt von --ihg-primary
	   (Wunsch des Auftraggebers: dunkelgelb statt grün, damit "ausgewählter Zeitraum" sich klar vom
	   grünen Marken-/Buchen-Grün unterscheidet). */
	--ihg-selected: #b8860b;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	max-width: 640px;
	margin: 0 auto;
	color: var(--ihg-dark);
}
#ihg-booking-app h2 {
	margin-top: 1.5em;
	font-size: 1.15em;
	color: var(--ihg-dark);
}
#ihg-booking-app h2:first-child { margin-top: 0; }

.ihg-btn {
	display: inline-block;
	background: var(--ihg-primary);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0.7em 1.4em;
	font-size: 1em;
	cursor: pointer;
	text-decoration: none;
}
.ihg-btn:hover { background: #1b7a1b; color: #fff; }
.ihg-btn:disabled { background: #9ab99a; cursor: not-allowed; }
.ihg-btn-small { padding: 0.35em 0.8em; font-size: 0.9em; }

.ihg-row { display: flex; gap: 0.75em; flex-wrap: wrap; margin-bottom: 1em; align-items: center; }

.ihg-option-cards { display: flex; gap: 0.75em; margin-bottom: 1em; flex-wrap: wrap; }
.ihg-option-card {
	border: 2px solid #ddd;
	border-radius: 8px;
	padding: 0.8em 1.2em;
	cursor: pointer;
	background: #fff;
}
.ihg-option-card.selected { border-color: var(--ihg-primary); background: #eef8ee; }
.ihg-option-card .price { color: #666; font-size: 0.9em; }

.ihg-slots { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: 1em; }
.ihg-slot {
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 0.4em 0.8em;
	cursor: pointer;
	background: #fff;
	font-size: 0.95em;
}
.ihg-slot.selected { background: var(--ihg-primary); color: #fff; border-color: var(--ihg-primary); }
.ihg-slot:disabled { opacity: 0.35; cursor: not-allowed; }

/* Tagesansicht als Zeitachse, angelehnt an den Admin-Buchungskalender (BOW-068, Wunsch des
   Auftraggebers: "Layout wie im Backend, nur auf einen Tag bezogen"). Stundenlinien + Beschriftung
   links, belegte Zeiten als durchgehende Blöcke (mit Kundenname für Admins), freie Viertelstunden
   als schmale Klickziele rechts daneben. */
.ihg-day-grid {
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 0.3em;
	max-height: 480px;
	overflow-y: auto;
	background: #fff;
}
.ihg-daycal {
	position: relative;
	margin-left: 52px;
	border-left: 1px solid #e2e2e2;
	background-image: linear-gradient(to bottom, #eee 1px, transparent 1px);
	background-size: 100% 64px;
}
.ihg-daycal-hour {
	position: absolute;
	left: -52px;
	width: 48px;
	text-align: right;
	transform: translateY(-0.6em);
}
.ihg-daycal-hour-label { font-size: 0.78em; color: #888; }
.ihg-daycal-occupied {
	position: absolute;
	left: 2px;
	right: 2px;
	z-index: 1;
	background: #8c8f94;
	color: #fff;
	font-size: 0.78em;
	padding: 0.2em 0.4em;
	border-radius: 4px;
	border-left: 4px solid #5a5d61;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ihg-daycal-occupied.pending { background: repeating-linear-gradient(45deg, #fff6d8 0 6px, #fff 6px 12px); color: #996800; border-left-color: #dba617; }
.ihg-daycal-slot {
	position: absolute;
	left: 2px;
	right: 2px;
	z-index: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 0.72em;
	color: #aaa;
	text-align: left;
	padding-left: 0.3em;
}
.ihg-daycal-slot:hover:not(:disabled) { background: #eef8ee; z-index: 2; }
.ihg-daycal-slot.selected { background: var(--ihg-selected); color: #fff; z-index: 2; border-radius: 3px; }
.ihg-daycal-slot.too-short { color: #ddd; cursor: not-allowed; }
.ihg-daycal-slot:disabled { cursor: not-allowed; }
.ihg-daycal-now { position: absolute; left: 0; right: 0; height: 2px; background: #d63638; z-index: 3; }
.ihg-daycal-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #d63638; }
/* Überschreibt den Browser-Standardstil für deaktivierte Buttons - ein Feld, das Teil der
   Auswahl ist, selbst aber kein neuer Startpunkt wäre (daher disabled), soll trotzdem klar grün
   erscheinen statt ausgegraut zu wirken. */
.ihg-tick.selected:disabled { opacity: 1; background: var(--ihg-selected); color: #fff; }

.ihg-card {
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 1em;
	margin-bottom: 0.8em;
	background: #fafafa;
}
.ihg-status { font-weight: 600; }
.ihg-status.confirmed { color: var(--ihg-primary); }
.ihg-status.pending_payment { color: #b36b00; }
.ihg-status.cancelled, .ihg-status.expired { color: #999; }

.ihg-notice { padding: 0.8em 1em; border-radius: 6px; margin-bottom: 1em; }
.ihg-notice.error { background: #fde8e8; color: #9a1f1f; }
.ihg-notice.success { background: #e8f8e8; color: #1b6e1b; }
.ihg-notice.info { background: #eef2fb; color: #26416b; }

.ihg-tabs { display: flex; gap: 0.5em; margin-bottom: 1em; border-bottom: 1px solid #ddd; }
.ihg-tab { padding: 0.6em 1em; cursor: pointer; border-bottom: 3px solid transparent; }
.ihg-tab.active { border-bottom-color: var(--ihg-primary); font-weight: 600; }

.ihg-login-prompt { max-width: 480px; margin: 0 auto; text-align: center; }

/* Warenkorb (mehrere Zeiten/Tage in einem Bezahlvorgang, BOW-047). */
.ihg-cart { border-top: 2px solid #eee; margin-top: 1.5em; padding-top: 0.5em; }
.ihg-cart-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: 0.95em;
}
.ihg-cart-item-right { display: flex; align-items: center; gap: 0.6em; white-space: nowrap; }
.ihg-btn-remove {
	border: none;
	background: #f3f3f3;
	color: #a33;
	border-radius: 50%;
	width: 1.6em;
	height: 1.6em;
	line-height: 1;
	cursor: pointer;
	font-size: 1em;
}
.ihg-btn-remove:hover { background: #fde8e8; }

/* Zugang/Türöffnung (BOW-054). */
.ihg-access-window {
	display: inline-block;
	padding: 0.3em 0.7em;
	border-radius: 5px;
	font-size: 0.9em;
	margin-bottom: 0.8em;
	background: #f0f0f0;
	color: #666;
}
.ihg-access-window.open { background: #e8f8e8; color: #1b6e1b; font-weight: 600; }
.ihg-access-window.closed { background: #f3f3f3; color: #999; }
.ihg-access-step {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.4em 0;
	border-top: 1px solid #f0f0f0;
}
.ihg-access-step:first-of-type { border-top: none; }
.ihg-access-btn { min-width: 160px; text-align: center; }
.ihg-access-status-dot {
	width: 0.7em;
	height: 0.7em;
	border-radius: 50%;
	flex: 0 0 auto;
}
.ihg-access-hint { font-size: 0.9em; color: #777; }

input[type="text"].ihg-input, input[type="date"].ihg-input, select.ihg-input {
	padding: 0.5em;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 1em;
}

#ihg-payment-element { margin: 1em 0; }

/* Konto-Löschung (BOW-111). */
.ihg-account-section { margin-top: 2em; padding-top: 1em; border-top: 2px solid #eee; }
/* Verriegeln-Knopf (BOW-062): heller Zweitknopf neben dem Öffnen-Knopf (höhere Priorität, damit das Theme ihn nicht grün färbt) */
.ihg-access-step .ihg-btn.ihg-access-lock { background: #fff !important; color: #229922 !important; border: 2px solid #229922 !important; min-width: 120px; margin-left: 0.5em; }
.ihg-access-step .ihg-btn.ihg-access-lock:hover:not(:disabled) { background: #e8f8e8 !important; }
.ihg-access-step .ihg-btn.ihg-access-lock:disabled { background: #f3f3f3 !important; color: #aaa !important; border-color: #ccc !important; }
.ihg-access-step { flex-wrap: wrap; }

/* BOW-076: Option per Stammdaten gesperrt (Raum frei) - heller und bläulich statt grau, damit es nicht wie "Belegt" aussieht */
.ihg-daycal-occupied.unavailable{background:#8fa3b8;border-left-color:#5d7690;color:#fff}