/* Widget de reservas — hereda la identidad visual real de timetravelerstenerife.com
   (tokens tomados de wp-content/plugins/time-travelers-tenerife/css/styles.css).
   Todo queda bajo .ttb-widget con fallbacks, así funciona aunque cambie el tema. */

.ttb-widget,
.ttb-widget * {
	box-sizing: border-box;
}

.ttb-widget {
	--ttb-indigo-ink: var(--indigo-ink, #171B45);
	--ttb-indigo: var(--indigo, #2B388C);
	--ttb-terracota: var(--terracota, #E0643B);
	--ttb-terracota-deep: var(--terracota-deep, #C24E29);
	--ttb-oro: var(--oro, #F7CD47);
	--ttb-cielo: var(--cielo, #3574B7);
	--ttb-papel: var(--papel, #FBF6EC);
	--ttb-tinta-suave: var(--tinta-suave, #4A4C68);
	--ttb-wa: #1FA855;
	--ttb-radio: var(--radio-l, 14px);

	display: block;
	width: 100%;
	max-width: 420px;
	font-family: var(--sans, "Hanken Grotesk", system-ui, sans-serif);
	color: var(--ttb-indigo-ink);
	margin-top: 1.5rem;
}

.ttb-duration {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .9rem;
	color: var(--ttb-tinta-suave);
	margin: 0 0 1rem;
}
.ttb-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ttb-terracota);
	display: inline-block;
	flex: none;
}

/* Una sola tarjeta, una sola columna, siempre — nada de rejilla de dos
   columnas: este widget vive en columnas laterales estrechas (la ficha de
   producto y las páginas de tour), así que una tarjeta compacta apilada es
   más robusta que intentar repartir el ancho, y se ve igual en cualquier
   sitio donde se inyecte. */
.ttb-booking-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	background: #fff;
	border: 1px solid rgba(23,27,69,.08);
	border-radius: var(--ttb-radio);
	padding: 1.25rem;
	box-shadow: 0 1px 2px rgba(23,27,69,.05);
}

.ttb-calendar-col,
.ttb-summary-col {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* Blindaje: en páginas ajenas al plugin (donde se inyecta el calendario) hay
   CSS de WooCommerce y del tema cargado a la vez; si algo de ahí pone
   position:absolute/fixed en botones, inputs o párrafos genéricos, esto lo
   anula dentro del widget para que nunca flote encima del calendario. */
.ttb-summary-col * {
	position: static !important;
}

.ttb-calendar-mount { width: 100%; }
.ttb-calendar-mount .flatpickr-calendar {
	box-shadow: none !important;
	background: transparent !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}
.ttb-calendar-mount .flatpickr-calendar.inline { display: flex !important; width: 100% !important; }
.ttb-calendar-mount .flatpickr-days,
.ttb-calendar-mount .dayContainer { width: 100% !important; max-width: 100% !important; }
.ttb-calendar-mount .flatpickr-innerContainer,
.ttb-calendar-mount .flatpickr-rContainer { width: 100%; }
.ttb-calendar-mount .flatpickr-month { color: var(--ttb-indigo-ink); fill: var(--ttb-indigo-ink); }
.ttb-calendar-mount .flatpickr-current-month .flatpickr-monthDropdown-months,
.ttb-calendar-mount .flatpickr-current-month input.cur-year {
	font-family: var(--display, "Bricolage Grotesque", sans-serif);
	font-weight: 600;
	color: var(--ttb-indigo-ink);
}
.ttb-calendar-mount .flatpickr-weekday {
	color: var(--ttb-tinta-suave);
	font-weight: 600;
	text-transform: uppercase;
	font-size: .7rem;
}
.ttb-calendar-mount .flatpickr-day {
	border-radius: 8px;
	color: var(--ttb-indigo-ink);
	transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.ttb-calendar-mount .flatpickr-day.today { border-color: var(--ttb-oro); }
.ttb-calendar-mount .flatpickr-day:hover {
	background: rgba(224, 100, 59, .12);
	border-color: transparent;
}
.ttb-calendar-mount .flatpickr-day.selected {
	background: var(--ttb-terracota);
	border-color: var(--ttb-terracota);
	color: #fff;
	transform: scale(1.04);
}
.ttb-calendar-mount .flatpickr-day.ttb-day-full {
	color: #c8c3b8;
	background: repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(27,29,58,.06) 3px, rgba(27,29,58,.06) 6px);
	text-decoration: line-through;
	cursor: not-allowed;
	pointer-events: none;
}
.ttb-calendar-mount .flatpickr-day.flatpickr-disabled {
	color: #d9d4c8;
	cursor: not-allowed;
}
.ttb-calendar-mount.is-loading { opacity: .5; pointer-events: none; }

.ttb-legend {
	display: flex;
	gap: 1.1rem;
	margin: .75rem .25rem 0;
	font-size: .78rem;
	color: var(--ttb-tinta-suave);
}
.ttb-legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.ttb-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ttb-swatch.is-free { background: var(--ttb-terracota); opacity: .3; }
.ttb-swatch.is-full { background: repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(27,29,58,.3) 2px, rgba(27,29,58,.3) 4px); }

.ttb-summary-col {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	padding-top: .9rem;
	border-top: 1px dashed rgba(23,27,69,.12);
}

.ttb-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.ttb-field label {
	font-size: .82rem;
	font-weight: 600;
	color: var(--ttb-indigo-ink);
}
.ttb-field .quantity { flex: none; }
.ttb-field .qty {
	width: 4.5rem;
	text-align: center;
	border: 1px solid rgba(27,29,58,.18);
	border-radius: 10px;
	padding: .55em .4em;
	font-family: inherit;
	font-size: 1rem;
	color: var(--ttb-indigo-ink);
	background: var(--ttb-papel);
}
.ttb-pax-hint {
	font-size: .76rem;
	color: var(--ttb-tinta-suave);
	margin: -.5rem 0 0;
}

.ttb-status {
	font-size: .88rem;
	color: var(--ttb-tinta-suave);
	min-height: 1.4em;
	transition: opacity .15s ease;
}
.ttb-status.is-ok { color: #178a44; font-weight: 600; }
.ttb-status.is-error { color: var(--ttb-terracota-deep); font-weight: 600; }
.ttb-status.is-loading { opacity: .6; }

.ttb-price-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-top: .6rem;
	border-top: 1px dashed rgba(27,29,58,.15);
}
.ttb-price-label {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--ttb-tinta-suave);
}
.ttb-price-value {
	font-family: var(--display, "Bricolage Grotesque", sans-serif);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--ttb-indigo-ink);
}
.ttb-price-note {
	font-size: .78rem;
	color: var(--ttb-tinta-suave);
	margin: -.4rem 0 0;
}

.ttb-widget .ttb-submit.single_add_to_cart_button {
	background: var(--ttb-terracota) !important;
	color: #fff !important;
	border: none;
	border-radius: 999px;
	padding: .95em 1.4em;
	font-weight: 600;
	font-size: 1rem;
	width: 100%;
	cursor: pointer;
	transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
	box-shadow: 0 6px 16px rgba(224,100,59,.25);
}
.ttb-widget .ttb-submit.single_add_to_cart_button:hover:not(:disabled) {
	background: var(--ttb-terracota-deep) !important;
}
.ttb-widget .ttb-submit.single_add_to_cart_button:active:not(:disabled) {
	transform: scale(.97);
	box-shadow: 0 2px 8px rgba(224,100,59,.25);
}
.ttb-widget .ttb-submit.single_add_to_cart_button:disabled {
	background: #d9d4c8 !important;
	box-shadow: none;
	cursor: not-allowed;
	opacity: .8;
}

/* Elementos propios de WooCommerce en la ficha de producto (precio, migas de
   pan, pestañas de descripción) que no pasan por .ttb-widget: se retocan
   aparte para que usen la misma paleta/tipografía real de la web. */
.single-product .breadcrumb {
	font-size: .82rem;
	color: var(--tinta-suave, #4A4C68);
	margin: 0 0 1rem;
}
.single-product .breadcrumb a { color: inherit; text-decoration: none; }
.single-product .breadcrumb a:hover { text-decoration: underline; }
.single-product .breadcrumb span { margin: 0 .4em; }

.single-product .product_title {
	font-family: var(--display, "Bricolage Grotesque", sans-serif);
	color: var(--indigo-ink, #171B45);
}
.single-product p.price {
	font-family: var(--display, "Bricolage Grotesque", sans-serif);
	color: var(--terracota, #E0643B) !important;
}
.single-product p.price ins { color: var(--terracota, #E0643B); }

.single-product .woocommerce-tabs ul.tabs li a {
	font-family: var(--sans, "Hanken Grotesk", sans-serif);
	color: var(--tinta-suave, #4A4C68);
}
.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--indigo-ink, #171B45); }
.single-product .woocommerce-tabs ul.tabs li.active {
	border-color: var(--terracota, #E0643B) !important;
}
.single-product .woocommerce-Tabs-panel h2,
.single-product .woocommerce-Tabs-panel h3 {
	font-family: var(--display, "Bricolage Grotesque", sans-serif);
	color: var(--indigo-ink, #171B45);
}

.ttb-whatsapp-fallback {
	text-align: center;
	font-size: .82rem;
	color: var(--ttb-wa);
	text-decoration: none;
	font-weight: 600;
}
.ttb-whatsapp-fallback:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.ttb-widget * { transition: none !important; animation: none !important; }
}

/* Sección inyectada en las páginas de tour ya existentes (las genera otro
   plugin al que no tenemos acceso). Un script la reubica justo debajo de la
   tarjeta de reserva que ya existe ahí (ver class-ttb-legacy-injector.php);
   si no encuentra dónde, se queda al final de la página. Por eso es una
   tarjeta compacta y no una franja a todo lo ancho: tiene que verse bien
   tanto suelta al final como encajada en una columna lateral estrecha. */
.ttb-legacy-booking-section {
	display: block;
	width: 100%;
	max-width: 420px;
	margin: 1.5rem auto;
	box-sizing: border-box;
}
.ttb-legacy-booking-inner { width: 100%; }
.ttb-legacy-booking-title {
	font-family: var(--display, "Bricolage Grotesque", sans-serif);
	color: var(--indigo-ink, #171B45);
	font-size: 1.3rem;
	margin: 0 0 .3rem;
}
.ttb-legacy-booking-sub {
	color: var(--tinta-suave, #4A4C68);
	font-size: .88rem;
	margin: 0 0 1.2rem;
}
.ttb-legacy-booking-section .ttb-widget { margin-top: 0; max-width: none; }
.ttb-legacy-booking-section .ttb-duration { display: none; }

/* Cuando el JS logra reubicarla junto a la tarjeta de reserva del tema, ya
   no hace falta el título propio (repetiría "reserva" dos veces seguidas). */
.ttb-legacy-booking-section.ttb-legacy-relocated {
	margin: 1rem 0 0;
}
.ttb-legacy-booking-section.ttb-legacy-relocated .ttb-legacy-booking-title,
.ttb-legacy-booking-section.ttb-legacy-relocated .ttb-legacy-booking-sub {
	display: none;
}