/* =========================================================
   Haus Magnussen Booking – Frontend Styles (kompakt)
   Scoped to #hmb-booking-app to avoid theme conflicts.

   Umgesetzt nach dem Marken-Design-System vom 04.07.2026:
   - Schrift: Inter
   - Akzentfarbe Blau nur für interaktive Elemente (Buttons, Links,
     Auswahl im Kalender), Hover-Zustand in Navy
   - Fließtext bleibt neutral dunkel statt farbig
   - "Eigennutzung" wird nicht mehr separat ausgewiesen, sondern
     zusammen mit sonstigen Sperren als "Belegt" dargestellt
   - Nicht verfügbar: #FF746C (einheitlich für alle Frontend-Tools)
   ========================================================= */

#hmb-booking-app {
	--hmb-blue:      #4274d9;
	--hmb-navy:      #293681;
	--hmb-cyan:      #95CCDD;
	--hmb-mint:      #d0e7e6;
	--hmb-white:     #ffffff;
	--hmb-text:      #23262b;
	--hmb-text-mute: #6b7280;
	--hmb-border:    #e7ebf3;
	--hmb-unavailable:      #FF746C;
	--hmb-unavailable-bg:   #FFEAE9;
	--hmb-unavailable-text: #b23c34;
	--hmb-shadow:    0 1px 8px rgba(41, 54, 129, .08);

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	color: var(--hmb-text);
	max-width: 780px;
	margin: 0 auto;
}

/* ── Legend ──────────────────────────────────────────────── */
.hmb-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 8px 0 12px;
	font-size: 11px;
	color: var(--hmb-text-mute);
}
.hmb-legend span { display: flex; align-items: center; gap: 5px; }
.hmb-dot {
	display: inline-block;
	width: 10px; height: 10px;
	border-radius: 2px;
	flex-shrink: 0;
}
.hmb-dot--free    { background: var(--hmb-mint); border: 1px solid #b7d9d7; }
.hmb-dot--booked  { background: var(--hmb-unavailable); }
.hmb-dot--pending { background: var(--hmb-cyan); }
/* 'owner' bewusst nicht mehr in der Legende – wird optisch wie "Belegt" behandelt. */

/* ── Calendar nav ────────────────────────────────────────── */
.hmb-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.hmb-cal-title {
	font-size: 14px;
	font-weight: 500;
	color: var(--hmb-navy);
	margin: 0;
}
.hmb-nav-btn {
	background: #fff;
	border: 1px solid var(--hmb-border);
	border-radius: 5px;
	width: 28px; height: 28px;
	font-size: 16px;
	color: var(--hmb-blue);
	cursor: pointer;
	line-height: 1;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.12s, border-color .12s;
}
.hmb-nav-btn:hover { background: var(--hmb-mint); border-color: #b7d9d7; }
.hmb-nav-btn:focus-visible { outline: 2px solid var(--hmb-blue); outline-offset: 2px; }

/* ── Months grid ─────────────────────────────────────────── */
.hmb-months-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 16px;
}
@media (max-width: 520px) { .hmb-months-grid { grid-template-columns: 1fr; } }

/* ── Month block ─────────────────────────────────────────── */
.hmb-month {
	background: #fff;
	border: 1px solid var(--hmb-border);
	border-radius: 8px;
	padding: 12px;
	box-shadow: var(--hmb-shadow);
}
.hmb-month-title {
	font-size: 12px;
	font-weight: 500;
	color: var(--hmb-navy);
	text-align: center;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.hmb-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	margin-bottom: 2px;
}
.hmb-weekdays span {
	text-align: center;
	font-size: 9px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--hmb-text-mute);
	padding: 2px 0;
}
.hmb-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

/* ── Day cell ────────────────────────────────────────────── */
.hmb-day {
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500;
	color: var(--hmb-text);
	cursor: pointer;
	border: 1.5px solid transparent;
	transition: transform 0.1s, background 0.1s;
	-webkit-user-select: none;
	user-select: none;
	line-height: 1.1;
}
.hmb-day:focus-visible { outline: 2px solid var(--hmb-blue); outline-offset: 1px; }
.hmb-day--empty  { cursor: default; }

.hmb-day--free   { background: var(--hmb-mint); }
.hmb-day--free:hover { background: #bfe0de; transform: scale(1.06); }

/* Belegt, Eigennutzung und sonstige Sperren sehen bewusst identisch aus –
   nach außen zählt nur "verfügbar oder nicht", der Grund ist Admin-intern. */
.hmb-day--booked,
.hmb-day--owner,
.hmb-day--blocked {
	background: var(--hmb-unavailable-bg);
	color: var(--hmb-unavailable-text);
	cursor: not-allowed;
	text-decoration: line-through;
	opacity: 0.9;
}

.hmb-day--pending { background: rgba(149, 204, 221, .5); color: #1c4a5c; }

.hmb-day--selected {
	background: var(--hmb-blue) !important;
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
	opacity: 1 !important;
}
.hmb-day--in-range   { background: rgba(66, 116, 217, .12); color: var(--hmb-navy); border-radius: 0; }
.hmb-day--range-start { border-radius: 4px 0 0 4px; }
.hmb-day--range-end   { border-radius: 0 4px 4px 0; }
.hmb-day--today { outline: 1.5px solid var(--hmb-blue); outline-offset: -1.5px; }

.hmb-day-num   { line-height: 1; }
.hmb-day-price { font-size: 7px; opacity: 0.7; margin-top: 1px; }

/* ── Loading ─────────────────────────────────────────────── */
.hmb-loading { text-align: center; padding: 28px; color: var(--hmb-text-mute); font-size: 13px; }

/* ── Booking form ────────────────────────────────────────── */
.hmb-form-card {
	background: #fff;
	border: 1px solid var(--hmb-border);
	border-radius: 8px;
	padding: 16px 20px;
	box-shadow: var(--hmb-shadow);
}
.hmb-form-card h3 {
	font-size: 20px;
	font-weight: 500;
	line-height: 30px;
	color: var(--hmb-navy);
	margin: 0 0 14px;
}

/* Dates + guests in one compact row */
.hmb-form-row-top {
	display: grid;
	grid-template-columns: 1fr 1fr 80px;
	gap: 8px;
	margin-bottom: 8px;
}
@media (max-width: 580px) {
	.hmb-form-row-top { grid-template-columns: 1fr 1fr; }
}

.hmb-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
@media (max-width: 400px) { .hmb-form-row { grid-template-columns: 1fr; } }

.hmb-form-group {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-bottom: 8px;
}
.hmb-form-group label {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--hmb-text-mute);
}
.hmb-form-group input,
.hmb-form-group select,
.hmb-form-group textarea {
	border: 1px solid var(--hmb-border);
	border-radius: 5px;
	padding: 6px 9px;
	font-size: 13px;
	font-family: inherit;
	color: var(--hmb-text);
	background: #fff;
	outline: none;
	transition: border-color 0.15s, box-shadow .15s;
	width: 100%;
	box-sizing: border-box;
}
.hmb-form-group input:focus,
.hmb-form-group select:focus,
.hmb-form-group textarea:focus {
	border-color: var(--hmb-blue);
	box-shadow: 0 0 0 3px rgba(66, 116, 217, .12);
}
.hmb-form-group textarea { resize: vertical; min-height: 60px; }

/* ── Price summary ───────────────────────────────────────── */
.hmb-price-summary {
	background: var(--hmb-mint);
	border-left: 3px solid var(--hmb-blue);
	border-radius: 5px;
	padding: 10px 14px;
	margin: 4px 0 10px;
}
.hmb-price-row {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--hmb-text-mute);
	margin-bottom: 4px;
}
.hmb-price-row:last-child { margin-bottom: 0; }
.hmb-price-row--total {
	font-weight: 700;
	font-size: 13px;
	color: var(--hmb-text);
	border-top: 1px solid #b7d9d7;
	padding-top: 6px;
	margin-top: 2px;
}
.hmb-price-loading { font-size: 12px; color: var(--hmb-text-mute); text-align: center; padding: 4px 0; }

/* ── Submit ──────────────────────────────────────────────── */
.hmb-submit-btn {
	width: 100%;
	background: var(--hmb-blue);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px;
	font-size: 13px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, opacity 0.15s;
}
.hmb-submit-btn:hover:not(:disabled) { background: var(--hmb-navy); }
.hmb-submit-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.hmb-submit-btn:focus-visible { outline: 2px solid var(--hmb-blue); outline-offset: 3px; }

.hmb-form-note {
	text-align: center;
	font-size: 10px;
	color: var(--hmb-text-mute);
	margin: 6px 0 0;
}

/* ── Notices ─────────────────────────────────────────────── */
.hmb-notice {
	border-radius: 5px;
	padding: 8px 12px;
	font-size: 13px;
	margin-bottom: 10px;
}
.hmb-notice--error   { background: #fbeceb; color: #9c3a2f; border-left: 3px solid #c0553a; }
.hmb-notice--success { background: var(--hmb-mint); color: #1c4a48; border-left: 3px solid #4a9c8f; }

@media (prefers-reduced-motion: reduce) {
	.hmb-day, .hmb-nav-btn, .hmb-submit-btn { transition: none; }
}