/* Loan Manager Public Styles */

/* ===================================================================
   THEME INTEGRATION
   Block themes expose --wp--preset--color--* and --wp--global--font-family
   via theme.json. Classic themes will use the fallback values.
   All loan-* variables can be overridden in a child theme or
   Additional CSS to match any design.
   =================================================================== */

:root {
	/* Core — pulled from theme when available */
	--loan-primary:         var(--wp--preset--color--primary, #0073aa);
	--loan-bg:              var(--wp--preset--color--background, #fff);
	--loan-text:            var(--wp--preset--color--foreground, #333);
	--loan-font-family:     var(--wp--global--font-family, inherit);

	/* Typography scale — controls font sizes in the catalog and booking dialogs.
	   Override via the Catalog Appearance admin settings or child-theme CSS.
	   Values use em so they scale with the catalog's base font size. */
	/* --loan-fs-dialog-title is intentionally NOT set here.
	   Step titles are <h2> elements — the active theme styles them naturally.
	   Set this variable only if you need to override the theme's h2 size.  */
	--loan-fs-category-name:  1.17em;  /* h3 — category section titles        */
	--loan-fs-item-name:      1.17em;  /* h3 — item name on card and in modal */
	--loan-fs-price:          1em;     /* normal — price lines on item cards  */
	--loan-fs-availability:   1em;     /* normal — availability badge text    */
	--loan-fs-cal-header:     1.17em;  /* h3 — calendar day-column headers    */
	--loan-fs-cal-month:      1.17em;  /* h3 — calendar month/year toolbar    */
	--loan-fs-cal-date:       1em;     /* normal — calendar date numbers      */
	--loan-fs-modal-info:     1em;     /* normal — shared size for all info/label rows in booking dialogs */
	--loan-fs-from-to-price:  var(--loan-fs-modal-info); /* inherits modal-info by default */

	/* Derived tones — static fallbacks upgraded to dynamic values below */
	--loan-primary-dark:    #005177;
	--loan-primary-ring:    rgba(0, 115, 170, 0.15);
	--loan-primary-overlay: rgba(0, 115, 170, 0.55);
	--loan-surface:         #f9f9f9;
	--loan-surface-tinted:  #f6f9ff;
	--loan-text-2:          #555;
	--loan-text-muted:      #888;
	--loan-border:          #ddd;
	--loan-border-light:    #e5e5e5;

	/* Semantic status colours — fixed, not theme-dependent */
	--loan-success:         #27ae60;
	--loan-success-dark:    #1e8449;
	--loan-success-bg:      #d4edda;
	--loan-success-border:  #c3e6cb;
	--loan-success-text:    #155724;
	--loan-error:           #e74c3c;
	--loan-error-bg:        #f8d7da;
	--loan-error-border:    #f5c6cb;
	--loan-error-text:      #721c24;
	--loan-warning-bg:      #fff3cd;
	--loan-warning-text:    #856404;
	--loan-info-bg:         #e8f4fd;
	--loan-info-border:     #bee5eb;
}

/* Upgrade derived variables when color-mix() is supported */
@supports (color: color-mix(in srgb, red, blue)) {
	:root {
		--loan-primary-dark:    color-mix(in srgb, var(--loan-primary) 75%, #000);
		--loan-primary-ring:    color-mix(in srgb, var(--loan-primary) 15%, transparent);
		--loan-primary-overlay: color-mix(in srgb, var(--loan-primary) 55%, transparent);
		--loan-surface:         color-mix(in srgb, var(--loan-text)    4%,  var(--loan-bg));
		--loan-surface-tinted:  color-mix(in srgb, var(--loan-primary) 6%,  var(--loan-bg));
		--loan-text-2:          color-mix(in srgb, var(--loan-text)    70%, var(--loan-bg));
		--loan-text-muted:      color-mix(in srgb, var(--loan-text)    45%, var(--loan-bg));
		--loan-border:          color-mix(in srgb, var(--loan-text)    18%, var(--loan-bg));
		--loan-border-light:    color-mix(in srgb, var(--loan-text)    10%, var(--loan-bg));
	}
}

/* ===================================================================
   GALLERY SHORTCODE [loan_gallery]
   =================================================================== */

.loan-gallery { max-width: 1200px; margin: 0 auto; }
.loan-gallery-title { font-size: 1.5em; margin-bottom: 6px; }
.loan-gallery-desc  { color: var(--loan-text-2); margin-bottom: 20px; }

.loan-gallery-grid {
	display: grid;
	gap: 16px;
}
.loan-gallery-grid.loan-cols-2 { grid-template-columns: repeat(2, 1fr); }
.loan-gallery-grid.loan-cols-3 { grid-template-columns: repeat(3, 1fr); }
.loan-gallery-grid.loan-cols-4 { grid-template-columns: repeat(4, 1fr); }
.loan-gallery-grid.loan-cols-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 900px) {
	.loan-gallery-grid.loan-cols-4,
	.loan-gallery-grid.loan-cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.loan-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 380px) {
	.loan-gallery-grid { grid-template-columns: 1fr !important; }
}

/* Card */
.loan-gallery-card {
	border-radius: 8px;
	overflow: hidden;
	background: var(--loan-bg);
	border: 1px solid var(--loan-border-light);
	box-shadow: 0 1px 4px rgba(0,0,0,0.07);
	transition: box-shadow 0.2s, transform 0.15s;
	display: flex;
	flex-direction: column;
	font-family: var(--loan-font-family);
}
.loan-gallery-available { cursor: pointer; }
.loan-gallery-available:hover,
.loan-gallery-available:focus {
	box-shadow: 0 6px 18px rgba(0,0,0,0.14);
	transform: translateY(-2px);
	outline: 2px solid var(--loan-primary);
}
.loan-gallery-unavailable { opacity: 0.6; cursor: default; }

/* Image area */
.loan-gallery-img {
	position: relative;
	width: 100%;
	aspect-ratio: 4/3;
	overflow: hidden;
	background: var(--loan-surface);
}
.loan-gallery-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s;
}
.loan-gallery-available:hover .loan-gallery-img img { transform: scale(1.04); }
.loan-gallery-no-img {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--loan-text-muted);
	font-size: 2.5em;
}

/* Overlay */
.loan-gallery-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0);
	transition: background 0.2s;
}
.loan-gallery-available:hover .loan-gallery-overlay {
	background: var(--loan-primary-overlay);
}
.loan-gallery-book-label,
.loan-gallery-unavail-label {
	color: var(--loan-bg);
	font-size: 1em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.2s;
}
.loan-gallery-unavail-label {
	background: rgba(200,0,0,0.7);
	padding: 4px 10px;
	border-radius: 4px;
	opacity: 1;
}
.loan-gallery-available:hover .loan-gallery-book-label { opacity: 1; }

/* Card footer */
.loan-gallery-card-footer {
	padding: 10px 12px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.loan-gallery-name {
	font-weight: 700;
	font-size: 0.95em;
	line-height: 1.3;
}
.loan-gallery-prices {
	display: flex;
	gap: 8px;
	font-size: 0.78em;
	color: var(--loan-text-2);
	flex-wrap: wrap;
}

/* ===================================================================
   MODAL
   =================================================================== */

.loan-modal-overlay {
	position: fixed;
	inset: 0;
	max-width: none !important;
	margin: 0 !important;
	background: rgba(0,0,0,0.6);
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.loan-modal-overlay[hidden] { display: none; }

.loan-modal {
	background: var(--loan-bg);
	border-radius: 10px;
	width: 100%;
	max-width: 680px;
	max-height: 92vh;
	overflow-y: auto;
	position: relative;
	padding: 24px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.25);
	font-family: var(--loan-font-family);
	color: var(--loan-text);
}

.loan-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	font-size: 1.6em;
	line-height: 1;
	cursor: pointer;
	color: var(--loan-text-muted);
	padding: 4px;
}
.loan-modal-close:hover { color: var(--loan-text); }

.loan-modal-item-header {
	display: flex;
	gap: 16px;
	margin-bottom: 20px;
	align-items: flex-start;
}
.loan-modal-img {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	margin: 0 auto 20px;
	border-radius: 6px;
}
.loan-modal-item-meta {
	flex: 1;
	min-width: 0;
}
.loan-modal-label {
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--loan-text-muted);
	margin-right: 4px;
}
#loan-cat-modal-prices {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 12px;
}

#loan-catalog-modal .loan-cat-section-title {
	margin: 0 0 2px;
}
.loan-modal-category {
	margin: 0 0 2px;
	font-size: var(--loan-fs-modal-info);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--loan-text);
	font-weight: 600;
}
.loan-modal-item-name {
	margin: 0 0 2px;
	font-size: var(--loan-fs-item-name);
}
.loan-modal-item-number {
	margin: 0 0 6px;
	font-size: 0.8em;
	color: var(--loan-text-muted);
	font-family: monospace;
}
.loan-modal-description {
	margin: 0 0 10px;
	font-size: 0.8em;
	color: var(--loan-text-2);
	line-height: 1.5;
}

.loan-modal-section {
	background: var(--loan-surface-tinted);
	border: 1px solid var(--loan-border);
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 16px;
}
.loan-modal-section-label {
	font-size: 0.85em;
	color: var(--loan-text-2);
	margin: 0 0 10px;
}

/* Confirmation */
.loan-booking-confirmed {
	text-align: center;
	padding: 24px 0;
}
.loan-confirm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--loan-success-bg);
	color: var(--loan-success-text);
	font-size: 2em;
	margin-bottom: 16px;
}

/* ===================================================================
   CATALOG SHORTCODE [loan_catalog]
   =================================================================== */

.loan-catalog { max-width: 1200px !important; margin: 0 auto !important; width: 100%; }

.loan-category-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}
.loan-filter-btn {
	padding: 6px 16px;
	border: 2px solid var(--loan-primary);
	background: transparent;
	color: var(--loan-primary);
	border-radius: 20px;
	cursor: pointer;
	font-size: 0.9em;
	font-family: var(--loan-font-family);
	transition: background 0.2s, color 0.2s;
}
.loan-filter-btn.active,
.loan-filter-btn:hover {
	background: var(--loan-primary);
	color: var(--loan-bg);
}

.loan-category-title {
	font-size: var(--loan-fs-category-name);
	margin: 24px 0 8px;
	border-bottom: 2px solid var(--loan-border-light);
	padding-bottom: 6px;
}

.loan-items-grid {
	display: grid;
	gap: 20px;
}
.loan-cols-2 { grid-template-columns: repeat(2, 1fr); }
.loan-cols-3 { grid-template-columns: repeat(3, 1fr); }
.loan-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
	.loan-cols-2,
	.loan-cols-3,
	.loan-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.loan-cols-2,
	.loan-cols-3,
	.loan-cols-4 { grid-template-columns: 1fr; }
}

/* ---- Item Card ---- */
.loan-item-card {
	background: var(--loan-bg);
	border: 2px solid #999;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,0.07);
	transition: box-shadow 0.2s;
	display: flex;
	flex-direction: column;
	font-family: var(--loan-font-family);
}
.loan-item-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.loan-item-card.loan-unavailable { opacity: 0.75; }

.loan-item-image {
	display: flex;
	justify-content: center;
}
.loan-item-image img {
	max-width: 100%;
	height: auto;
	display: block;
}
.loan-item-image-placeholder {
	width: 100%;
	aspect-ratio: 1/1;
	background: var(--loan-surface);
	display: flex;
	align-items: center;
	justify-content: center;
}
.loan-item-image-placeholder svg {
	width: 40%;
	max-width: 64px;
	color: var(--loan-text-muted);
}
.loan-item-body {
	padding: 14px 16px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.loan-item-name {
	font-size: var(--loan-fs-item-name);
	font-weight: 700;
	margin: 0 0 6px;
}
.loan-item-description {
	font-size: 0.9em;
	color: var(--loan-text-2);
	flex: 1;
	margin-bottom: 10px;
}
.loan-item-prices {
	display: flex;
	gap: 12px;
	font-size: var(--loan-fs-price);
	margin-bottom: 10px;
	align-items: center;
	flex-wrap: wrap;
}
.loan-item-status { margin-bottom: 12px; }

.loan-availability-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: var(--loan-fs-availability);
	font-weight: 700;
	text-transform: uppercase;
}

.loan-availability-badge.loan-available   { background: var(--loan-success-bg);  color: var(--loan-success-text); }
.loan-availability-badge.loan-unavailable { background: var(--loan-error-bg);    color: var(--loan-error-text); }

.loan-book-btn {
	display: inline-block;
	padding: 8px 18px;
	background: var(--loan-primary);
	color: var(--loan-bg) !important;
	text-decoration: none;
	border-radius: 4px;
	font-size: 0.9em;
	font-weight: 600;
	font-family: var(--loan-font-family);
	text-align: center;
	margin-top: auto;
	transition: background 0.2s;
	border: none;
	cursor: pointer;
}
.loan-book-btn:hover { background: var(--loan-primary-dark); }

/* ---- Booking widget ---- */
.loan-booking-widget { max-width: 800px; margin: 0 auto; }

.loan-item-header {
	display: flex;
	gap: 20px;
	margin-bottom: 24px;
	background: var(--loan-surface);
	border: 1px solid var(--loan-border);
	border-radius: 6px;
	padding: 16px;
}
.loan-item-header-img {
	width: 120px;
	height: 90px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}
.loan-item-header-details h2 { margin-top: 0; font-size: 1.3em; }
.loan-pricing { font-size: 0.95em; }

.loan-calendar-container { margin-bottom: 24px; }
.loan-calendar-hint { font-size: 0.85em; color: var(--loan-text-muted); margin-top: 10px; margin-bottom: 0; }

.loan-date-pickers {
	display: flex;
	gap: 16px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.loan-date-picker-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.loan-date-picker-group label {
	font-size: 0.85em;
	font-weight: 600;
	color: var(--loan-text);
}
.loan-date-picker-group input[type="date"] {
	padding: 6px 10px;
	border: 1px solid var(--loan-border);
	border-radius: 4px;
	font-size: 0.95em;
	font-family: var(--loan-font-family);
	background: var(--loan-bg);
	color: var(--loan-text);
	line-height: 1.4;
}
.loan-date-picker-group input[type="date"]:focus {
	border-color: var(--loan-primary);
	outline: none;
	box-shadow: 0 0 0 2px var(--loan-primary-ring);
}

.loan-calendar {
	border: 1px solid var(--loan-border);
	border-radius: 6px;
	padding: 10px;
	background: var(--loan-bg);
	font-size: 0.88em;
}

/* Theme-reset: prevent theme/block-library CSS from collapsing FullCalendar's layout.
   - Do NOT touch border-collapse or border-spacing — FullCalendar uses separate per-table.
   - DO override padding/border on td/th — WP block-library adds padding:.25em;border:1px solid
     to every td which breaks FullCalendar's internal height:1px liquid-layout trick. */
.loan-calendar *,
.loan-calendar *::before,
.loan-calendar *::after         { box-sizing: border-box; }
.loan-calendar .fc              { display: flex !important; flex-direction: column !important; }
.loan-calendar .fc-view-harness { flex-grow: 1 !important; position: relative !important; }
.loan-calendar table            { display: table !important; width: 100%; }
.loan-calendar thead            { display: table-header-group !important; }
.loan-calendar tbody            { display: table-row-group !important; }
.loan-calendar tr               { display: table-row !important; }
.loan-calendar th,
.loan-calendar td               { display: table-cell !important; padding: 0 !important; }
.loan-calendar a                { color: inherit; text-decoration: none; }
.loan-calendar img              { max-width: none; }

/* Scale the booking-widget calendar box to 75% in both dimensions.
   zoom (unlike transform: scale) affects layout flow, so no gap is left behind. */
.loan-booking-widget .loan-calendar {
	zoom: 0.75;
}

/* ---- Booking form ---- */
.loan-booking-form-wrap {
	background: var(--loan-surface);
	border: 1px solid var(--loan-border);
	border-radius: 6px;
	padding: 20px;
}
.loan-booking-form-wrap h3 { margin-top: 0; }

.loan-selected-dates {
	background: var(--loan-info-bg);
	border: 1px solid var(--loan-info-border);
	border-radius: 4px;
	padding: 8px 12px;
	margin-bottom: 16px;
	font-size: 0.95em;
}

.loan-booking-form .loan-form-row {
	display: flex;
	gap: 16px;
	margin-bottom: 14px;
}
.loan-form-col {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.loan-form-col-full { flex: 100%; }
.loan-form-col label {
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 0.9em;
}
.loan-booking-form input[type="text"],
.loan-booking-form input[type="email"],
.loan-booking-form input[type="tel"],
.loan-booking-form textarea {
	padding: 8px 10px;
	border: 1px solid var(--loan-border);
	border-radius: 4px;
	font-size: 0.95em;
	font-family: var(--loan-font-family);
	background: var(--loan-bg);
	color: var(--loan-text);
	width: 100%;
	box-sizing: border-box;
}
.loan-booking-form textarea { resize: vertical; }

.loan-form-submit { display: flex; gap: 10px; align-items: center; margin-top: 16px; }

.loan-submit-btn {
	padding: 10px 24px;
	background: var(--loan-primary);
	color: var(--loan-bg);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1em;
	font-weight: 600;
	font-family: var(--loan-font-family);
	transition: background 0.2s;
}
.loan-submit-btn:hover { background: var(--loan-primary-dark); }
.loan-submit-btn:disabled { background: var(--loan-text-muted); cursor: not-allowed; }

.loan-cancel-btn {
	padding: 10px 16px;
	background: transparent;
	border: 1px solid var(--loan-border);
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.95em;
	font-family: var(--loan-font-family);
	color: var(--loan-text);
}
.loan-cancel-btn:hover { background: var(--loan-surface); }

.loan-form-messages { margin-top: 12px; }
.loan-form-messages .loan-success {
	background: var(--loan-success-bg);
	border: 1px solid var(--loan-success-border);
	color: var(--loan-success-text);
	padding: 10px 14px;
	border-radius: 4px;
}
.loan-form-messages .loan-error {
	background: var(--loan-error-bg);
	border: 1px solid var(--loan-error-border);
	color: var(--loan-error-text);
	padding: 10px 14px;
	border-radius: 4px;
}

/* ---- My bookings table ---- */
.loan-bookings-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}
.loan-bookings-table th,
.loan-bookings-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--loan-border-light);
}
.loan-bookings-table th { font-weight: 700; background: var(--loan-surface); }

/* ---- Badges ---- */
.loan-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
}
.loan-badge-available { background: var(--loan-info-bg);    color: var(--loan-primary-dark); }
.loan-badge-pending   { background: var(--loan-warning-bg); color: var(--loan-warning-text); }
.loan-badge-booked    { background: var(--loan-success-bg); color: var(--loan-success-text); }
.loan-badge-on_loan   { background: #e8d5f5;                color: #4a1a7a; }

.loan-notice, .loan-error { font-style: italic; color: var(--loan-text-2); }

/* ===================================================================
   TYPOGRAPHY OVERRIDES
   Applied via CSS variables so admin settings and child-theme CSS
   can override each element independently.
   =================================================================== */

/* FullCalendar — month/year toolbar title */
.loan-calendar .fc-toolbar-title { font-size: var(--loan-fs-cal-month); }

/* FullCalendar — day-of-week column headers (Mon, Tue …) */
.loan-calendar .fc-col-header-cell-cushion { font-size: var(--loan-fs-cal-header); }

/* FullCalendar — date numbers inside cells */
.loan-calendar .fc-daygrid-day-number { font-size: var(--loan-fs-cal-date); }

/* Step 2 — Estimated price row (font-size handled by unified modal block) */
.loan-booking-summary-price { font-size: var(--loan-fs-from-to-price); }

/* Greyed-out booked dates on all public calendars */
.loan-calendar .fc-bg-event { opacity: 0.55; }
.loan-calendar .fc-daygrid-day:has(.fc-bg-event) .fc-daygrid-day-number {
	color: var(--loan-text-muted);
}

.loan-dates-summary {
	margin: 12px 0 0;
	padding: 10px 14px;
	background: var(--loan-surface-tinted);
	border: 1px solid var(--loan-border);
	border-radius: 4px;
	font-size: 0.92em;
	color: var(--loan-text);
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.loan-dates-summary-row,
.loan-dates-price-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}
.loan-dates-label { margin-right: 2px; font-weight: 600; }
.loan-price-note  { font-size: 0.85em; color: var(--loan-text-2); }

/* Booking summary box (Step 2) */
.loan-booking-summary {
	background: var(--loan-surface-tinted);
	border: 1px solid var(--loan-border);
	border-radius: 6px;
	padding: 12px 16px;
	margin-bottom: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.loan-booking-summary-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 0.95em;
}
.loan-booking-summary-price { font-size: 1.05em; }
.loan-booking-summary-price strong {
	font-size: 1.3em;
	color: var(--loan-primary-dark);
}

.loan-modal-step-actions {
	margin-top: 16px;
	text-align: right;
}
.loan-modal-step-actions .loan-submit-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Big "Book Now" button */
.loan-book-now-btn {
	display: block;
	width: 100%;
	padding: 16px 24px;
	font-size: 1.2em;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background: var(--loan-success);
	color: #fff;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-family: var(--loan-font-family);
	transition: background 0.15s ease;
	margin-bottom: 10px;
}
.loan-book-now-btn:hover:not(:disabled) { background: var(--loan-success-dark); }
.loan-book-now-btn:disabled {
	background: var(--loan-text-muted);
	cursor: not-allowed;
	opacity: 0.7;
}

.loan-contact-hint {
	font-size: 0.82em;
	color: var(--loan-text-muted);
	margin: 4px 0 14px;
}
.loan-modal-section-label { margin: 14px 0 10px; }

@media (max-width: 600px) {
	.loan-item-header { flex-direction: column; }
	.loan-booking-form .loan-form-row { flex-direction: column; }
	.loan-modal-step-actions { text-align: center; }
}

/* ===================================================================
   CATALOG BOOKING MODAL
   =================================================================== */

.loan-catalog-modal-inner { max-width: 740px; }

/* Desktop landscape layout for Step 1 */
@media (min-width: 900px) {
	.loan-catalog-modal-inner { max-width: 1000px; }

	.loan-cat-detail-layout {
		display: flex;
		flex-direction: row;
		gap: 28px;
		align-items: flex-start;
	}
	.loan-cat-detail-left {
		flex: 0 0 300px;
		max-width: 300px;
	}
	.loan-cat-detail-right {
		flex: 1;
		min-width: 0;
	}
	#loan-cat-modal-calendar {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	#loan-cat-book-now-btn {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	#loan-catalog-modal .loan-cat-section-title,
	#loan-catalog-modal .loan-calendar-hint {
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}
}

/* ---- Unified info/label typography across all three booking dialog steps ----
   All info rows, field labels, and section headings share --loan-fs-modal-info
   and default to the main text colour (black) rather than accent colours.

   Step 1 — item detail:  category, item name, price, availability heading
   Step 2 — confirm dates: item row, From/To labels, estimated price row
   Step 3 — your details:  summary rows, every form field label             */

#loan-catalog-modal .loan-modal-category,
#loan-catalog-modal .loan-modal-item-name,
#loan-catalog-modal .loan-item-prices,
#loan-catalog-modal .loan-cat-section-title,
#loan-catalog-modal .loan-modal-label,
#loan-catalog-modal .loan-booking-summary-row,
#loan-catalog-modal .loan-cat-date-row label,
#loan-catalog-modal .loan-form-col label {
	font-size: var(--loan-fs-modal-info);
	font-weight: normal;
	color: var(--loan-text);
	text-transform: none;
	letter-spacing: normal;
}

/* Catalog modal calendar — Width is capped at 75% of the modal so the calendar
   occupies less space without affecting the font-size. */
#loan-cat-modal-calendar {
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	min-height: 300px;
}

/* Align the Availability heading and hint with the centred calendar */
#loan-catalog-modal .loan-cat-section-title,
#loan-catalog-modal .loan-calendar-hint {
	width: 75%;
	margin-left: auto;
	margin-right: auto;
}

/* Book Now button matches the calendar width */
#loan-cat-book-now-btn {
	width: 75%;
	margin-left: auto;
	margin-right: auto;
}

/* Remove clickable link styling from day numbers in the catalog calendar */
#loan-cat-modal-calendar .fc-daygrid-day-number {
	pointer-events: none;
	cursor: default;
	color: inherit;
	text-decoration: none;
}

/* Step titles are <h2> elements — font-size is left to the active theme.
   font-weight is restored explicitly because Astra (and many themes) reset
   all headings to font-weight: inherit, which strips bold inside the modal. */
#loan-catalog-modal .loan-cat-step-title {
	margin: 0 0 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--loan-text);
}

/* Split action row: back button left, primary button right */
.loan-step-actions-split {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16px;
}

/* Date inputs inside the booking summary (Step 2) */
.loan-cat-date-row { align-items: center; gap: 8px; flex-wrap: nowrap; }
.loan-cat-date-row label { white-space: nowrap; }
.loan-date-input {
	padding: 5px 8px;
	border: 1px solid var(--loan-border);
	border-radius: 4px;
	font-size: 0.72em;
	font-family: var(--loan-font-family);
	background: var(--loan-bg);
	color: var(--loan-text);
}
.loan-date-input:focus {
	border-color: var(--loan-primary);
	outline: none;
	box-shadow: 0 0 0 2px var(--loan-primary-ring);
}

/* Compact booking summary on Step 3 — tighter padding only, font-size left to the modal-info variable */
.loan-booking-summary-sm { padding: 8px 14px; margin-bottom: 14px; }

/* T&C label */
.loan-tandc-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
	font-size: 0.9em;
	line-height: 1.4;
}
.loan-tandc-label input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }

/* Catalog item card — pointer cursor on hover when bookable */
.loan-item-card:has(.loan-catalog-open-modal) { cursor: default; }
.loan-catalog-open-modal { cursor: pointer; }

/* FullCalendar — closed / non-open days */
.loan-closed-day {
	background-color: #f0f0f0 !important;
	opacity: 0.6;
	cursor: not-allowed;
}
.loan-closed-day .fc-daygrid-day-number {
	color: #aaa !important;
	text-decoration: line-through;
}
/* Closed days should override any "booked" background event colour */
.loan-closed-day .fc-bg-event { display: none !important; }

/* ===================================================================
   ITEM SEARCH WIDGET [loan_item_search]
   =================================================================== */
.loan-item-search {
	position: relative;
	max-width: 480px;
}
.loan-item-search-input-wrap {
	display: flex;
}
.loan-item-search-input {
	width: 100%;
	padding: 10px 14px;
	font-size: 1rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}
.loan-item-search-input:focus {
	outline: 2px solid var(--wp--preset--color--primary, #0073aa);
	border-color: transparent;
}
.loan-item-search-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #ddd;
	border-top: none;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 4px 12px rgba(0,0,0,.12);
	z-index: 9999;
	max-height: 360px;
	overflow-y: auto;
}
.loan-search-result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid #f0f0f0;
	transition: background .15s;
}
.loan-search-result:last-child { border-bottom: none; }
.loan-search-result:hover,
.loan-search-result:focus { background: #f5f5f5; outline: none; }
.loan-search-result img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 3px;
	flex-shrink: 0;
}
.loan-search-no-img {
	width: 48px;
	height: 48px;
	background: #eee;
	border-radius: 3px;
	flex-shrink: 0;
	display: block;
}
.loan-search-result-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.loan-search-result-info strong {
	font-size: .95rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.loan-search-result-cat {
	font-size: .8rem;
	color: #666;
}
.loan-search-result-price {
	font-size: .8rem;
	color: #333;
	font-weight: 600;
}
.loan-search-result-unavailable {
	font-size: .75rem;
	color: #c00;
}
.loan-search-no-results {
	padding: 12px 14px;
	color: #666;
	font-size: .9rem;
}

/* Card footer: manual link (left) + sponsor (right) on one line */
.loan-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 8px;
	flex-wrap: wrap;
}
.loan-card-footer-left { flex: 1 1 auto; }
.loan-card-footer-right { flex: 0 0 auto; }
.loan-card-footer .loan-manual-link {
	font-size: .85rem;
}

/* Sponsored by badge */
.loan-sponsor {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.loan-sponsor-label {
	font-size: 1rem;
	color: #888;
	white-space: nowrap;
}
.loan-sponsor-logo {
	max-height: 32px;
	max-width: 100px;
	width: auto;
	object-fit: contain;
	vertical-align: middle;
}