/**
 * Paisana Booking Form styles
 *
 * @package PaisanaFunctionalities
 */

/* =========================================================
   Wrapper principal
   ========================================================= */
.paisana-booking-form-wrapper {
	max-width: 700px;
	background-color: var(--wp--preset--color--brown);
	border-radius: 8px;
	color: var(--wp--preset--color--sand);
}

/* =========================================================
   Selector de apartamento y campos del formulario YITH
   ========================================================= */
.paisana-booking-form-wrapper label,
.paisana-booking-form-wrapper .yith-wcbk-form-section__label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--sand);
	letter-spacing: 0.05em;
}

.paisana-apartment-selector {
	margin-bottom: 1.5rem;
}

/* Todos los inputs, selects y date pickers */
.paisana-booking-form-wrapper select,
.paisana-booking-form-wrapper input[type="text"],
.paisana-booking-form-wrapper input[type="number"],
.paisana-booking-form-wrapper .yith-wcbk-date-picker,
.paisana-booking-form-wrapper .yith-wcbk-select-list {
	width: 100%;
	padding: 0.75rem 1rem;
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 50px;
	color: var(--wp--preset--color--sand);
	font-size: var(--wp--preset--font-size--small);
	font-family: var(--wp--preset--font-family--inter);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

/* Flecha personalizada para selects */
.paisana-booking-form-wrapper select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B5B796' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
}

/* Opciones del select */
.paisana-booking-form-wrapper select option {
	background-color: var(--wp--preset--color--brown);
	color: var(--wp--preset--color--sand);
}

/* Placeholder de los inputs */
.paisana-booking-form-wrapper input::placeholder {
	color: var(--wp--preset--color--sand);
	opacity: 0.7;
}

/* =========================================================
   Secciones del formulario YITH
   ========================================================= */
.paisana-booking-form-wrapper .yith-wcbk-form-section {
	margin-bottom: 1.25rem;
}

.paisana-booking-form-wrapper .yith-wcbk-form-section__content {
	display: flex;
	gap: 1rem;
}

/* =========================================================
   Botón de reserva
   ========================================================= */
.paisana-booking-form-wrapper .yith-wcbk-add-to-cart-button,
.paisana-booking-form-wrapper button[type="submit"] {
	display: block;
	width: 100%;
	margin-top: 1.5rem;
	padding: 0.85rem 1rem;
	background-color: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--brown);
	border: none;
	border-radius: 50px;
	font-size: var(--wp--preset--font-size--small);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.paisana-booking-form-wrapper .yith-wcbk-add-to-cart-button:hover,
.paisana-booking-form-wrapper button[type="submit"]:hover {
	opacity: 0.85;
}

.paisana-booking-form-wrapper .yith-wcbk-add-to-cart-button:disabled,
.paisana-booking-form-wrapper button[type="submit"]:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* =========================================================
   Estados del contenedor
   ========================================================= */
#paisana-booking-form-container {
	min-height: 40px;
}

.paisana-booking-placeholder,
.paisana-booking-loading {
	color: var(--wp--preset--color--sand);
	opacity: 0.7;
	font-style: italic;
}

.paisana-booking-error {
	color: #e07070;
	font-style: italic;
}