/* CT Transfers — style "Plum & Gold" (dark plum panel, gold button). */
/* =============================================================
TRANSFERS BOOKING WIDGET Visual Redesign
=============================================================
NOTA: estas variables --crtt-* son LOCALES a este archivo
(todo el widget las consume vía var()). Los valores están
alineados a los tokens de marca definidos en style.css del
child theme (--plum, --gold, etc.) pero se declaran aparte
porque este CSS se carga por independiente desde el
PHP y no depende del orden de carga del theme.
============================================================= */
/* ── VARIABLES: de navy (#3B1250) a plum/gold ── */
:root {
--crtt-bg: #FFFDF8; /* paper */
--crtt-bg-inner: #FFFDF8; /* paper */
--crtt-border: #E6DAC0; /* line */
--crtt-accent: #3B1250; /* plum */
--crtt-accent-dark: #4E1A66; /* plum-soft */
--crtt-text: #1C1220; /* ink */
--crtt-text-muted: #6E6577; /* gray */
--crtt-label-color: #3B1250; /* plum */
--crtt-input-bg: #FFFDF8; /* paper (líneas, no cajas grises) */
--crtt-input-border: #E6DAC0; /* line */
--crtt-btn-bg: #C9A227; /* gold — Book Now dorado, como el "ticket" */
--crtt-btn-text: #26082F; /* plum-deep */
--crtt-radius: 10px;
--crtt-radius-sm: 5px;
/* Fuentes (cada web puede cambiarlas en WooCommerce → CT Transfers) */
--crtt-font-body: 'Space Grotesk', system-ui, sans-serif;
--crtt-font-label: 'JetBrains Mono', ui-monospace, monospace;
--crtt-font-display: 'Fraunces', Georgia, serif;
}
/* ══ WIDGET ══════════════════════════════════════════════════ */
.crtt-booking-widget {
background: var(--crtt-bg);
border-radius: var(--crtt-radius);
color: var(--crtt-text);
width: 100%;
max-width: 780px !important; /* ancho para form de 2 columnas + stub "ticket" sin comprimir */
box-shadow: 0 20px 60px rgba(59, 18, 80, .18);
overflow: visible; /* FIX: permite que datepicker/timepicker no queden recortados */
box-sizing: border-box;
position: relative; /* ancla al stub absoluto y a las líneas del ticket, para que cubran TODO el widget (tabs + form) */
container-type: inline-size;
container-name: crtt-widget;
}
/* Línea punteada + "muescas" redondas — ancladas al WIDGET completo (no solo al form)
así el boleto perforado abarca desde los tabs hasta el fondo del formulario. */
.crtt-booking-widget::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: calc(100% - 210px);
border-left: 2px dashed var(--crtt-border);
z-index: 3;
pointer-events: none;
}
.crtt-booking-widget::after {
content: '';
position: absolute;
left: calc(100% - 210px - 7px);
top: -7px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #F8F3E6;
z-index: 4;
pointer-events: none;
}
/* ══ TABS ════════════════════════════════════════════════════ */
.crtt-tabs {
display: flex;
border-bottom: 1px solid var(--crtt-border);
padding: 0 210px 0 0; /* reserva el ancho del stub para que los tabs no se extiendan bajo él */
gap: 0;
overflow: hidden; /* FIX: clip esquinas superiores del widget */
border-radius: var(--crtt-radius) var(--crtt-radius) 0 0;
}
.crtt-tab {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
text-decoration: none;
padding: .7rem;
border: none;
background: none;
color: var(--crtt-text-muted);
font-family: var(--crtt-font-label);
font-size: 1rem;
font-weight: 700;
letter-spacing: .10em;
text-transform: uppercase;
cursor: pointer;
border-bottom: 2px solid transparent; /* underline style */
margin-bottom: -1px;
transition: all .2s;
}
.crtt-tab:hover {
color: var(--crtt-accent);
background: none;
}
/* Tab activo: underline navy en lugar de fondo cyan */
.crtt-tab--active {
background: none !important;
color: var(--crtt-accent) !important;
border-bottom-color: var(--crtt-btn-bg) !important;
}
.crtt-tab-content { display: none; }
/* El stub de precio ahora vive fuera de este flujo (position:absolute, ver .crtt-footer-bar,
anclado a .crtt-booking-widget). Este contenedor debe permanecer position:static
para que ese anclaje "salte" hasta el widget y no quede confinado aquí. */
.crtt-tab-content--active {
display: block;
}
/* ══ FORM INNER ═══════════════════════════════════════════════ */
.crtt-booking-widget .crtt-form-inner {
background: var(--crtt-bg-inner) !important;
border-radius: 0 !important;
padding: 14px 16px !important; /* reducido de 20px para formulario más compacto */
color: var(--crtt-text) !important;
box-sizing: border-box !important;
}
/* Reserva el ancho del stub (210px) para que los campos del form no queden bajo él.
Aplicado al