/* =========================================================
   Petite Fraise Booking — frontend + admin styles
   Sections:
     1. Booking Form — Layout
     2. Steps, fields, buttons
     3. Datepicker Overrides (jQuery UI theme tweaks)
     4. Price Summary Card
     5. Responsive
     6. Admin — Settings Page (pricing table)
     7. Admin — Inquiries List (status badges, buttons)
   ========================================================= */

/* Local palette, so a theme can re-skin the widget by redefining these. */
.ab-booking-widget {
	--ab-accent: #b9985c;
	--ab-accent-dark: #8c7038;
	--ab-border: #e0e0e0;
	--ab-text: #222;
	--ab-muted: #717171;
	--ab-radius: 24px;
	--ab-text-white: #fff;
}

/* =========================================================
   1. Booking Form — Layout
   ========================================================= */

/* Two-column shell: steps on the left, sticky price card on the right. */
.ab-booking-widget {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	font-family: inherit;
	color: var(--ab-text);
	box-sizing: border-box;
}

/* Normalise box sizing inside the widget so padding never breaks the grid. */
.ab-booking-widget *,
.ab-booking-widget *::before,
.ab-booking-widget *::after {
	box-sizing: border-box;
}

/* The step column takes the remaining space next to the fixed-width card. */
.ab-steps-column {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 600px) {
   .ab-steps-column {
		width: 100%;
   }
}

/* Progress indicator above the steps ("Step 2 of 3" + a filled bar). */
.ab-progress {
	margin-bottom: 20px;
}

.ab-progress-text {
	display: block;
	font-size: 13px;
	color: var(--ab-muted);
	margin-bottom: 8px;
}

/* Track of the progress bar. */
.ab-progress-bar {
	height: 4px;
	background: var(--ab-border);
	border-radius: 2px;
	overflow: hidden;
}

/* Filled portion, width is set inline by JS. */
.ab-progress-fill {
	height: 100%;
	width: 33%;
	background: var(--ab-accent);
	transition: width 0.25s ease;
}

/* =========================================================
   2. Steps, fields, buttons
   ========================================================= */

/* Only the active step is visible — all three live in the same DOM. */
.ab-step {
	display: none;
}

.ab-step.active {
	display: block;
}

.ab-step-title {
	margin: 0 0 18px;
	font-size: 20px;
	font-weight: 600;
}

/* Side-by-side check-in / check-out inputs. */
.ab-field-row {
	display: flex;
	gap: 16px;
}

.ab-field-row .ab-field {
	flex: 1 1 0;
}

/* Generic labelled field block. */
.ab-field {
	margin-bottom: 16px;
}

.ab-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

/* All text-like inputs share one look. */
.ab-booking-widget input[type="text"],
.ab-booking-widget input[type="email"],
.ab-booking-widget input[type="tel"],
.ab-booking-widget textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ab-border);
	border-radius: 8px;
	font-size: 15px;
	background: #fff;
	color: var(--ab-text);
}

.ab-booking-widget input:focus,
.ab-booking-widget textarea:focus {
	outline: none;
	border-color: var(--ab-accent);
	box-shadow: 0 0 0 2px rgba(194, 24, 91, 0.12);
}

/* Date fields are readonly (picker-driven) but must not look disabled. */
.ab-date-input {
	cursor: pointer;
	background: #fff !important;
}

/* Red asterisk marking required fields. */
.ab-req {
	color: var(--ab-accent);
}

/* Inline availability message under the date row. */
.ab-availability {
	min-height: 22px;
	font-size: 14px;
	margin: 4px 0 12px;
}

.ab-availability.ab-ok {
	color: #1c7c3c;
}

.ab-availability.ab-bad {
	color: #b3261e;
}

/* Validation error text on step 3. */
.ab-form-error {
	min-height: 20px;
	color: #b3261e;
	font-size: 14px;
	margin-bottom: 8px;
}

/* Back / Next row pinned to the bottom of each step. */
.ab-step-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
}

/* Base button. */
.ab-booking-widget .ab-btn {
	padding: 12px 24px !important;
	border: 1px solid var(--ab-border);
	border-radius: 24px !important;
	background: var(--ab-accent);
	color: var(--ab-text-white);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.ab-btn:hover {
	background: var(--ab-accent-dark)
}

/* Primary (Next / Send Inquiry). */
.ab-btn-primary {
	background: var(--ab-accent);
	border-color: var(--ab-accent);
	color: #fff;
}

.ab-btn-primary:hover {
	background: var(--ab-accent-dark);
	border-color: var(--ab-accent-dark);
}

/* Disabled Next until the range is confirmed available. */
.ab-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;

	
}

/* One guest-count row: label on the left, stepper on the right. */
.ab-stepper-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid var(--ab-border);
}

.ab-stepper-row label,
.ab-pet-label {
	font-size: 15px;
	font-weight: 500;
	margin: 0;
}

/* The +/- control group. */
.ab-stepper {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Circular +/- buttons. */
.ab-booking-widget .ab-stepper-btn {
	width: 32px;
    height: 32px;
    padding: 0;                 /* kill browser's default button padding */
    margin: 0;
    box-sizing: border-box;     /* width/height include border, nothing sneaks in extra */
    border: 1px solid #b0b0b0;
    border-radius: 50%;
    background: #fff;
    color: #444;
    font-size: 18px;
    line-height: 1;             /* let flex centering handle vertical alignment instead */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ab-stepper-btn:hover:not(:disabled) {
	border-color: var(--ab-text);
}

.ab-stepper-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Numeric readout between the buttons — readonly, no spinners. */
.ab-stepper input[type="number"] {
	width: 40px;
	text-align: center;
	border: none;
	background: transparent;
	font-size: 16px;
	font-weight: 600;
	-moz-appearance: textfield;
	appearance: textfield;
}

.ab-stepper input[type="number"]::-webkit-outer-spin-button,
.ab-stepper input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Yes/No pet toggle rendered as pill buttons. */
.ab-pill-group {
	display: flex;
	gap: 8px;
}

.ab-pill {
	position: relative;
	cursor: pointer;
	margin: 0;
}

/* The real radio stays accessible but visually hidden. */
.ab-pill input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.ab-pill span {
	display: inline-block;
	padding: 8px 20px;
	border: 1px solid var(--ab-border);
	border-radius: 999px;
	font-size: 14px;
	background: #fff;
}

/* Selected pill. */
.ab-pill.active span {
	border-color: var(--ab-accent);
	background: var(--ab-accent);
	color: #fff;
}

/* Confirmation panel shown after a successful submission. */
.ab-success {
	text-align: center;
	padding: 48px 24px;
}

.ab-success-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #1c7c3c;
	color: #fff;
	font-size: 30px;
	line-height: 56px;
}

.ab-success p {
	font-size: 17px;
	margin: 0;
}

/* =========================================================
   3. Datepicker Overrides (jQuery UI theme tweaks)
   ========================================================= */

/* The plugin ships no jQuery UI theme CSS, so style the widget from scratch. */
.ui-datepicker {
	background: #fff;
	border: 1px solid var(--ab-border, #e0e0e0);
	border-radius: 12px;
	padding: 12px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
	font-family: inherit;
	font-size: 14px;
	z-index: 9999 !important;
	display: none;
	width: 325px;
}

/* Month/year header row with the prev/next arrows. */
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: 4px 0 10px;
	text-align: center;
	font-weight: 600;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 28px;
	height: 28px;
	cursor: pointer;
	border-radius: 50%;
	text-indent: -9999px;
	overflow: hidden;
}

.ui-datepicker .ui-datepicker-prev { left: 0; }
.ui-datepicker .ui-datepicker-next { right: 0; }

/* Draw the arrows with CSS borders — no image sprites needed. */
.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after {
	content: "";
	position: absolute;
	top: 9px;
	left: 10px;
	width: 8px;
	height: 8px;
	border-top: 2px solid #444;
	border-right: 2px solid #444;
}

.ui-datepicker .ui-datepicker-prev::after { transform: rotate(-135deg); }
.ui-datepicker .ui-datepicker-next::after { transform: rotate(45deg); left: 8px; }

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
	background: #f2f2f2;
}

/* Hidden when the arrow would leave the allowed min/max range. */
.ui-datepicker .ui-state-disabled.ui-datepicker-prev::after,
.ui-datepicker .ui-state-disabled.ui-datepicker-next::after {
	opacity: 0.25;
}

.ui-datepicker table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.ui-datepicker th {
	padding: 6px 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--ab-muted, #717171);
	border: none;
	background: none;
}

.ui-datepicker td {
	padding: 1px;
	border: none;
	background: none;
}

/* Individual day cell. */
.ui-datepicker td a,
.ui-datepicker td span {
	display: block;
	padding: 8px 0;
	text-align: center;
	border-radius: 50%;
	text-decoration: none;
	color: #222;
	border: none;
	background: none;
}

.ui-datepicker td a:hover {
	background: #f0f0f0;
}

/* The currently selected day. */
.ui-datepicker td .ui-state-active {
	background: var(--ab-accent, #8c7038);
	color: #fff;
}

/* Past dates and dates outside min/max. */
.ui-datepicker td.ui-datepicker-unselectable span {
	color: #ccc;
}

/* Dates already taken by an inquiry or booking — struck through and greyed. */
.ui-datepicker td.ab-day-blocked span {
	color: #ccc;
	text-decoration: line-through;
	background: #fafafa;
}

/* =========================================================
   4. Price Summary Card
   ========================================================= */

/* Sticky card that stays visible while the guest moves between steps. */
.ab-summary-card {
	flex: 0 0 320px;
	position: sticky;
	top: 24px;
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius);
	padding: 22px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
	background: #fff;
}

.ab-summary-title {
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 600;
}

/* Shown until the guest has picked both dates. */
.ab-summary-placeholder {
	color: var(--ab-muted);
	font-size: 14px;
}

/* Check-in / check-out / nights rows. */
.ab-summary-dates > div {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	font-size: 14px;
}

.ab-summary-key {
	color: var(--ab-muted);
}

.ab-summary-val {
	font-weight: 600;
}

/* Grouped rate rows, e.g. "3 nights × CHF 500 (Weekday)". */
.ab-summary-groups {
	list-style: none;
	margin: 14px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--ab-border);
}

.ab-summary-groups li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	padding: 4px 0;
}

.ab-group-subtotal {
	white-space: nowrap;
}

/* "Show price breakdown" link-style toggle. */
.ab-booking-widget .ab-breakdown-toggle {
	background: none;
	border: none;
	padding: 8px 0;
	color: var(--ab-accent);
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

.ab-booking-widget .ab-breakdown-toggle:hover{
	background: none !important;
	color: var(--ab-accent);
}

.ab-booking-widget .ab-breakdown-toggle:focus{
	background: none !important;
	color: var(--ab-accent);
}

/* Night-by-night detail list, collapsed by default. */
.ab-summary-breakdown {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	max-height: 220px;
	overflow-y: auto;
	font-size: 13px;
	color: var(--ab-muted);
}

.ab-summary-breakdown li {
	display: flex;
	justify-content: space-between;
	padding: 3px 0;
}

/* Bold grand total pinned to the bottom of the card. */
.ab-summary-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--ab-border);
	font-size: 16px;
	font-weight: 700;
}

/* Dim the card while a price request is in flight. */
.ab-summary-card.ab-loading {
	opacity: 0.6;
}

/* =========================================================
   5. Responsive
   ========================================================= */

/* Below 860px the card stacks above the steps instead of sitting beside them. */
@media (max-width: 860px) {
	.ab-booking-widget {
		flex-direction: column-reverse;
		gap: 24px;
	}

	.ab-summary-card {
		flex: 1 1 auto;
		width: 100%;
		position: static;
	}

	.ab-field-row {
		flex-direction: column;
		gap: 0;
	}
}

/* =========================================================
   6. Admin — Settings Page (pricing table)
   ========================================================= */

/* Keep the rate/range tables from stretching across ultra-wide screens. */
.ab-admin .ab-rates-table,
.ab-admin .ab-ranges-table {
	max-width: 720px;
	margin-bottom: 16px;
}

/* Month name column. */
.ab-admin .ab-rates-table th[scope="row"] {
	width: 160px;
	font-weight: 600;
}

/* Give the number inputs a consistent, readable width. */
.ab-admin .ab-rates-table input[type="number"],
.ab-admin .ab-ranges-table input[type="number"] {
	width: 110px;
}

.ab-admin .ab-ranges-table input[type="date"] {
	padding: 3px 6px;
}

/* "Every year" cell — keep the checkbox and its hint tight together. */
.ab-admin .ab-yearly-cell {
	min-width: 150px;
}

/* Checkbox sits on the same line as its label text. */
.ab-admin .ab-yearly-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	white-space: nowrap;
}

/* Small explanatory line under the checkbox. */
.ab-admin .ab-yearly-hint {
	margin: 4px 0 0;
	font-size: 11px;
	line-height: 1.4;
	max-width: 190px;
}

/* =========================================================
   7. Admin — Inquiries List (status badges, buttons)
   ========================================================= */

/* Coloured status pill in the Status column. */
.ab-admin .ab-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.8;
	color: #fff;
}

.ab-admin .ab-badge-inquiry { background: #d68000; }
.ab-admin .ab-badge-booked { background: #1c7c3c; }
.ab-admin .ab-badge-cancelled { background: #8a8a8a; }

/* Action buttons sit inline instead of each form taking a full row. */
.ab-admin .ab-inline-form {
	display: inline-block;
	margin: 0 4px 4px 0;
}

/* Destructive delete link. */
.ab-admin .ab-delete-link {
	color: #b3261e;
	text-decoration: none;
	font-size: 12px;
}

.ab-admin .ab-delete-link:hover {
	text-decoration: underline;
}

/* Actions column needs breathing room for the button stack. */
.ab-admin .ab-actions {
	min-width: 200px;
}

/* Chat icon marking rows that carry a guest note (title attr shows the text). */
.ab-admin .ab-note-toggle {
	color: #999;
	cursor: help;
	font-size: 16px;
	vertical-align: middle;
}