/**
 * RentVastra frontend styles - Phase 1 placeholder.
 *
 * No frontend UI exists yet; this file establishes the CSS custom
 * properties (design tokens) that future shortcode templates will use,
 * so later phases don't hardcode colors.
 */
:root {
	--rentvastra-primary-color: #7a2e5c;
	--rentvastra-secondary-color: #d9a441;
	--rentvastra-button-color: #7a2e5c;
	--rentvastra-text-color: #222222;
	--rentvastra-border-radius: 6px;
}

/* Public Buyback Request form ([rentvastra_buyback_request]). */
.rentvastra-buyback-request {
	max-width: 560px;
	color: var(--rentvastra-text-color);
}

.rentvastra-buyback-request fieldset {
	border: 1px solid #ddd;
	border-radius: var(--rentvastra-border-radius);
	padding: 16px;
	margin-bottom: 16px;
}

.rentvastra-buyback-request legend {
	font-weight: 600;
	padding: 0 6px;
}

.rentvastra-buyback-request label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 4px;
}

.rentvastra-buyback-request input[type="text"],
.rentvastra-buyback-request input[type="email"],
.rentvastra-buyback-request input[type="number"],
.rentvastra-buyback-request input[type="date"],
.rentvastra-buyback-request select,
.rentvastra-buyback-request textarea {
	width: 100%;
	max-width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: var(--rentvastra-border-radius);
	font-size: 14px;
	box-sizing: border-box;
}

.rentvastra-buyback-request .rentvastra-btn-primary {
	background: var(--rentvastra-button-color);
	color: #fff;
	border: none;
	border-radius: var(--rentvastra-border-radius);
	padding: 10px 20px;
	font-size: 15px;
	cursor: pointer;
}

.rentvastra-buyback-request .rentvastra-btn-primary:hover {
	opacity: 0.9;
}

.rentvastra-form-errors {
	background: #fdecea;
	border: 1px solid #f5c2c0;
	border-radius: var(--rentvastra-border-radius);
	padding: 10px 16px;
	margin-bottom: 16px;
	color: #7a1f1a;
}

.rentvastra-form-success {
	background: #eaf7ec;
	border: 1px solid #b9e3bf;
	border-radius: var(--rentvastra-border-radius);
	padding: 16px;
	color: #1a5c25;
}

/* Honeypot field: hidden from real visitors, still present in the DOM
   (and outside an ARIA live region) for simple bots to fill in. */
.rentvastra-hp-field {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	height: 0;
	overflow: hidden;
}

/* =====================================================================
 * Phase 9 - mobile-first base styles for every frontend shortcode.
 * Written mobile-first throughout: unprefixed rules target small
 * screens, and min-width media queries progressively add multi-column
 * layouts for tablet/desktop.
 * ================================================================== */

.rentvastra-btn-primary,
.rentvastra-btn-secondary {
	display: inline-block;
	border: none;
	border-radius: var(--rentvastra-border-radius);
	padding: 12px 20px;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}

.rentvastra-btn-primary {
	background: var(--rentvastra-button-color);
	color: #fff;
}

.rentvastra-btn-secondary {
	background: #fff;
	color: var(--rentvastra-button-color);
	border: 1px solid var(--rentvastra-button-color);
}

.rentvastra-btn-primary:hover,
.rentvastra-btn-secondary:hover {
	opacity: 0.9;
}

.rentvastra-btn-block {
	display: block;
	width: 100%;
}

.rentvastra-field-hint {
	display: block;
	font-size: 12px;
	color: #777;
	font-weight: normal;
}

.rentvastra-checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: normal;
}

/* Auth forms (login/register). */
.rentvastra-auth-form {
	max-width: 420px;
	margin: 0 auto;
}

.rentvastra-auth-switch {
	text-align: center;
	font-size: 14px;
	margin-top: 12px;
}

/* Step cards, reused by the booking flow (frontend equivalent of the
   admin .rentvastra-step-card pattern, but touch-friendly). */
.rentvastra-step-card {
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: var(--rentvastra-border-radius);
	padding: 16px;
	margin-bottom: 16px;
}

.rentvastra-step-card h2 {
	margin-top: 0;
	font-size: 16px;
}

.rentvastra-field-row {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rentvastra-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rentvastra-field label,
.rentvastra-field-row > label {
	font-weight: 600;
	font-size: 13px;
}

.rentvastra-field input,
.rentvastra-field select,
.rentvastra-field-row input,
.rentvastra-field-row select {
	padding: 10px;
	font-size: 16px; /* avoids iOS zoom-on-focus */
	border: 1px solid #ccc;
	border-radius: var(--rentvastra-border-radius);
	box-sizing: border-box;
	width: 100%;
}

.rentvastra-spec-table {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0;
}

.rentvastra-spec-table th,
.rentvastra-spec-table td {
	text-align: left;
	padding: 6px 4px;
	border-bottom: 1px solid #eee;
	font-size: 14px;
}

/* Product catalog grid. */
.rentvastra-catalog-filters {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}

.rentvastra-catalog-filters input,
.rentvastra-catalog-filters select {
	padding: 10px;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: var(--rentvastra-border-radius);
	box-sizing: border-box;
	width: 100%;
}

.rentvastra-product-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.rentvastra-product-card {
	border: 1px solid #e2e2e2;
	border-radius: var(--rentvastra-border-radius);
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
}

.rentvastra-product-card__image img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.rentvastra-product-card__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: #f0f0f0;
}

.rentvastra-product-card__body {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rentvastra-product-card__body h3 {
	margin: 0;
	font-size: 16px;
}

.rentvastra-product-card__body h3 a {
	text-decoration: none;
	color: inherit;
}

.rentvastra-product-card__meta {
	font-size: 12px;
	color: #777;
	margin: 0;
}

.rentvastra-product-card__price {
	font-size: 17px;
	font-weight: 700;
	margin: 2px 0;
	color: var(--rentvastra-primary-color);
}

.rentvastra-product-card__price span {
	font-size: 12px;
	font-weight: normal;
	color: #777;
}

.rentvastra-product-card__deposit {
	font-size: 12px;
	color: #555;
	margin: 0;
}

.rentvastra-availability-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 3px;
	margin: 4px 0;
	width: fit-content;
}

.rentvastra-availability-badge.is-available {
	background: #eaf7ec;
	color: #1a5c25;
}

.rentvastra-availability-badge.is-unavailable {
	background: #fdecea;
	color: #7a1f1a;
}

.rentvastra-catalog-empty {
	text-align: center;
	padding: 40px 0;
	color: #777;
}

.rentvastra-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.rentvastra-pagination a {
	padding: 8px 12px;
	border: 1px solid #ccc;
	border-radius: var(--rentvastra-border-radius);
	text-decoration: none;
	color: inherit;
}

.rentvastra-pagination a.is-current {
	background: var(--rentvastra-button-color);
	color: #fff;
	border-color: var(--rentvastra-button-color);
}

/* Single product page. */
.rentvastra-product-single {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.rentvastra-gallery-main img {
	width: 100%;
	height: auto;
	border-radius: var(--rentvastra-border-radius);
}

.rentvastra-gallery-strip {
	display: flex;
	gap: 6px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.rentvastra-gallery-strip img {
	border-radius: 3px;
	border: 1px solid #e2e2e2;
}

/* Item choice list (reused for booking/quick pick contexts). */
.rentvastra-items-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rentvastra-item-choice {
	display: flex;
	gap: 10px;
	padding: 10px;
	border: 1px solid #e2e2e2;
	border-radius: var(--rentvastra-border-radius);
	cursor: pointer;
	font-size: 13px;
}

/* Customer dashboard. */
.rentvastra-dashboard {
	max-width: 900px;
}

.rentvastra-dashboard-tabs {
	display: flex;
	overflow-x: auto;
	gap: 4px;
	border-bottom: 1px solid #e2e2e2;
	margin-bottom: 16px;
	-webkit-overflow-scrolling: touch;
}

.rentvastra-dashboard-tabs a {
	white-space: nowrap;
	padding: 10px 14px;
	text-decoration: none;
	color: #555;
	font-size: 13px;
	font-weight: 600;
	border-bottom: 3px solid transparent;
}

.rentvastra-dashboard-tabs a.is-active {
	color: var(--rentvastra-primary-color);
	border-bottom-color: var(--rentvastra-primary-color);
}

.rentvastra-dashboard-panel {
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: var(--rentvastra-border-radius);
	padding: 16px;
}

.rentvastra-frontend-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.rentvastra-frontend-table th,
.rentvastra-frontend-table td {
	text-align: left;
	padding: 8px 6px;
	border-bottom: 1px solid #eee;
}

.rentvastra-frontend-table th {
	font-size: 11px;
	text-transform: uppercase;
	color: #777;
}

.rentvastra-add-measurement {
	margin-top: 12px;
	padding: 10px;
	background: #f7f7f7;
	border-radius: var(--rentvastra-border-radius);
}

.rentvastra-booking-flow {
	max-width: 700px;
}

.rentvastra-login-required {
	text-align: center;
	padding: 24px 16px;
}

/* =====================================================================
 * Progressive enhancement for tablet (>=600px) and desktop (>=900px).
 * ================================================================== */
@media (min-width: 600px) {
	.rentvastra-catalog-filters {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.rentvastra-catalog-filters input,
	.rentvastra-catalog-filters select {
		width: auto;
		flex: 1 1 140px;
	}

	.rentvastra-product-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.rentvastra-field-row {
		flex-direction: row;
	}

	.rentvastra-field-row .rentvastra-field {
		flex: 1;
	}
}

@media (min-width: 900px) {
	.rentvastra-product-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.rentvastra-product-single {
		flex-direction: row;
	}

	.rentvastra-product-single__gallery,
	.rentvastra-product-single__info {
		flex: 1;
	}
}