/* ============================================================
   MR CHOFER × CALENDARISTA
   Estiliza el formulario de Calendarista para que case con el
   design system. Todo va scopeado bajo #reserva para no afectar
   otras instancias del plugin.
   ============================================================ */

/* Card wrapper: neutralizar el card de Bootstrap (ya estamos
   dentro de un aside con su propio fondo y sombra). */
#reserva .calendarista.card,
#reserva .calendarista .card,
#reserva .calendarista .card-header,
#reserva .calendarista .card-body {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}
#reserva .calendarista .card-header { padding: 0 0 14px; }
#reserva .calendarista .card-body   { padding: 18px 0 0; }
#reserva .calendarista .container,
#reserva .calendarista .calendarista-wizard-section-block {
    padding: 0;
    max-width: none;
}

/* ===== Tabs (Fecha y hora · Extras · Detalles · Checkout) ===== */
#reserva .calendarista .nav-tabs {
    border-bottom: 1px solid var(--line);
    margin: 0;
    gap: 4px;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}
#reserva .calendarista .nav-tabs .nav-item { margin: 0; }
#reserva .calendarista .nav-tabs .nav-link {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 10px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    border-radius: 0;
    transition: color .2s, border-color .2s;
}
#reserva .calendarista .nav-tabs .nav-link:hover { color: var(--ink); }
#reserva .calendarista .nav-tabs .nav-link.active {
    color: var(--brand);
    background: transparent;
    border-bottom-color: var(--brand);
}
#reserva .calendarista .calendarista-nav-label {
    display: inline-block;
}

/* Restilizar los círculos numerados que el plugin inserta vía
   ::before { content: counter(numList) } en cada nav-link. */
#reserva .calendarista .nav-tabs .nav-link::before {
    background: var(--paper-3) !important;
    color: var(--ink-3) !important;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    font-family: var(--f-mono);
    font-weight: 600;
    margin-right: 6px;
}
#reserva .calendarista .nav-tabs .nav-link.active::before {
    background: var(--brand) !important;
    color: #fff !important;
}

/* El plugin marca los pasos siguientes como .calendarista-disabled
   .disabled — bajamos su opacidad para que se lea como inactivo. */
#reserva .calendarista .nav-tabs .nav-link.calendarista-disabled,
#reserva .calendarista .nav-tabs .nav-link.disabled {
    opacity: .55;
    cursor: default;
    pointer-events: none;
}
#reserva .calendarista .nav-tabs .nav-link.active.calendarista-disabled {
    opacity: 1;
}

/* ===== Form rows / spacing =====
   El form vive en una columna estrecha (~470px en desktop, menos en
   móvil), así que forzamos que TODAS las columnas Bootstrap se apilen
   verticales — si las dejamos al 50% los inputs se truncan ("Selecciona
   una fech..."). */
#reserva .calendarista .form-group { margin-bottom: 14px; }
#reserva .calendarista .row {
    margin-left: 0;
    margin-right: 0;
    display: block;
}
#reserva .calendarista [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}
#reserva .calendarista .calendarista-row-single,
#reserva .calendarista .calendarista-row-double { margin-bottom: 4px; }

/* ===== Labels ===== */
#reserva .calendarista .form-control-label {
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 6px;
    display: block;
}

/* ===== Inputs / selects ===== */
#reserva .calendarista .form-control,
#reserva .calendarista input[type="text"],
#reserva .calendarista input[type="email"],
#reserva .calendarista input[type="tel"],
#reserva .calendarista input[type="number"],
#reserva .calendarista textarea,
#reserva .calendarista select {
    font-family: var(--f-ui);
    font-size: 14px;
    color: var(--ink);
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px 14px;
    height: auto;
    min-height: 46px;
    width: 100%;
    box-shadow: none;
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
#reserva .calendarista textarea {
    min-height: 96px;
    resize: vertical;
}
#reserva .calendarista .form-control:focus,
#reserva .calendarista input:focus,
#reserva .calendarista textarea:focus,
#reserva .calendarista select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(25, 181, 59, .18);
    outline: 0;
    background: var(--paper);
}
#reserva .calendarista .form-control::placeholder,
#reserva .calendarista input::placeholder,
#reserva .calendarista textarea::placeholder {
    color: var(--ink-4);
    opacity: 1;
}
#reserva .calendarista .calendarista-readonly-field {
    cursor: pointer;
    background-color: var(--paper-2);
}

/* Custom arrow on selects */
#reserva .calendarista select.form-control,
#reserva .calendarista select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6068' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

/* ===== Date input group with calendar icon ===== */
#reserva .calendarista .input-group {
    display: flex;
    position: relative;
    width: 100%;
}
#reserva .calendarista .input-group .form-control {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1;
    min-width: 0;
}
#reserva .calendarista .input-group-append {
    display: flex;
    margin: 0;
}
#reserva .calendarista .input-group-text {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-left: 0;
    border-top-right-radius: var(--r-md);
    border-bottom-right-radius: var(--r-md);
    padding: 0 14px;
    display: flex;
    align-items: center;
    color: var(--ink-3);
    cursor: pointer;
    margin: 0;
    font-size: 14px;
    transition: color .15s, border-color .15s, background .15s;
}
#reserva .calendarista .input-group:focus-within .form-control,
#reserva .calendarista .input-group:focus-within .input-group-text {
    border-color: var(--brand);
}
#reserva .calendarista .input-group:focus-within .input-group-text {
    color: var(--brand);
    background: rgba(25, 181, 59, .08);
}

/* ===== Buttons (Siguiente / Atrás / Reservar) ===== */
#reserva .calendarista .btn,
#reserva .calendarista button[type="submit"] {
    font-family: var(--f-ui);
    font-size: 14px;
    font-weight: 600;
    padding: 13px 24px;
    border-radius: var(--r-md);
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .2s, transform .15s, box-shadow .2s;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
    text-decoration: none;
}
#reserva .calendarista .btn-primary,
#reserva .calendarista .calendarista-btn-next,
#reserva .calendarista button[type="submit"] {
    background: var(--brand);
    color: #fff;
}
#reserva .calendarista .btn-primary:hover,
#reserva .calendarista .calendarista-btn-next:hover,
#reserva .calendarista button[type="submit"]:hover {
    background: var(--brand-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(25, 181, 59, .28);
}
#reserva .calendarista .btn-primary:focus,
#reserva .calendarista .calendarista-btn-next:focus {
    box-shadow: 0 0 0 3px rgba(25, 181, 59, .25);
    outline: 0;
}
#reserva .calendarista .btn-secondary,
#reserva .calendarista .calendarista-btn-prev {
    background: var(--paper-3);
    color: var(--ink);
}
#reserva .calendarista .btn-secondary:hover,
#reserva .calendarista .calendarista-btn-prev:hover {
    background: var(--paper-4);
}

/* Right-aligned next btn row */
#reserva .calendarista .calendarista-align-right {
    text-align: right;
    padding: 12px 0 0;
}

/* ===== Cost summary ===== */
#reserva .calendarista .calendarista-cost-summary-placeholder {
    border-top: 1px solid var(--line);
    padding-top: 14px;
    margin-top: 14px;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--ink-2);
}
/* Big display only for the final total row (Cantidad total · €18.00) */
#reserva .calendarista .calendarista-summary-table .calendarista-total-amount td {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.01em;
    color: var(--ink);
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

/* ===== Checkout summary (paso 4) =====
   Calendarista renderiza el resumen de Detalles dentro de un <td>
   con <strong>Etiqueta</strong> —<i>valor</i><br>… . Sin scope se
   colaba el estilo de "total" y todas las etiquetas aparecían en
   display 22px superpuestas. Aquí lo normalizamos a tipografía UI. */
#reserva .calendarista .calendarista-summary-info {
    background: var(--paper-3);
    border: 1px solid var(--line);
    color: var(--ink-2);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin: 0 0 12px;
    font-family: var(--f-ui);
    font-size: 13px;
    line-height: 1.5;
}
#reserva .calendarista .calendarista-summary-info .fa { color: var(--brand); margin-right: 6px; }
#reserva .calendarista .calendarista-summary-info > div + div { margin-top: 4px; color: var(--ink-3); font-size: 12.5px; }

#reserva .calendarista .calendarista-summary-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-family: var(--f-ui);
}
#reserva .calendarista .calendarista-summary-table td {
    font-family: var(--f-ui);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
    padding: 8px 0;
    border-top: 1px solid var(--line);
    vertical-align: top;
}
#reserva .calendarista .calendarista-summary-table tr:first-child td { border-top: 0; }
#reserva .calendarista .calendarista-summary-table .text-right { text-align: right; }

/* Field-name labels in the customer summary block: tipografía mono, pequeña, NO display 22px */
#reserva .calendarista .calendarista-custom-form-fields td {
    padding: 12px 0;
    line-height: 1.7;
}
#reserva .calendarista .calendarista-custom-form-fields strong,
#reserva .calendarista .calendarista-custom-form-fields b {
    display: inline-block;
    min-width: 11ch;
    font-family: var(--f-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-right: 4px;
}
#reserva .calendarista .calendarista-custom-form-fields i {
    font-style: normal;
    font-family: var(--f-ui);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
}
/* El plugin pone " —" como texto suelto entre label y value; lo escondemos para limpiar */
#reserva .calendarista .calendarista-custom-form-fields td br + i,
#reserva .calendarista .calendarista-custom-form-fields td > i { margin-left: 2px; }

/* Payment-method note ("Los servicios extra se pagan al recoger…") */
#reserva .calendarista .form-check-label {
    font-family: var(--f-ui);
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
}

/* ===== Alerts ===== */
#reserva .calendarista .alert {
    border-radius: var(--r-md);
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid transparent;
    margin: 8px 0;
}
#reserva .calendarista .alert-warning {
    background: #fff8e1;
    color: #6b4f00;
    border-color: #f4d971;
}
#reserva .calendarista .alert-danger {
    background: #fdecec;
    color: #962024;
    border-color: #f5b3b6;
}
#reserva .calendarista .alert-success {
    background: var(--brand-50);
    color: var(--brand-darker);
    border-color: var(--brand-100);
}

/* ===== Spinner ===== */
#reserva .calendarista .spinner-border {
    width: 20px;
    height: 20px;
    border-width: 2px;
    color: var(--brand) !important;
}

/* ===== jQuery UI Datepicker popup (calendar) =====
   Selectores globales porque el datepicker se renderiza fuera
   de #reserva pero sólo aparece cuando se usa el form. */
.ui-datepicker {
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--sh-lg) !important;
    padding: 12px !important;
    font-family: var(--f-ui) !important;
    font-size: 13px !important;
    color: var(--ink) !important;
    z-index: 9999 !important;
}
.ui-datepicker .ui-datepicker-header {
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 10px !important;
    color: var(--ink) !important;
    position: relative;
}
.ui-datepicker .ui-datepicker-title {
    font-family: var(--f-display) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: -.01em;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    cursor: pointer;
    border-radius: var(--r-xs) !important;
    background: transparent !important;
    border: 0 !important;
    top: 4px !important;
    transition: background .15s;
}
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: var(--paper-3) !important;
    border: 0 !important;
}
.ui-datepicker table {
    margin: 0;
    font-size: 12.5px;
}
.ui-datepicker th {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 8px 4px;
}
.ui-datepicker td { padding: 1px; }
.ui-datepicker td a,
.ui-datepicker td span {
    border-radius: var(--r-xs) !important;
    padding: 7px 0 !important;
    text-align: center !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ink) !important;
    font-weight: 500;
    transition: background .15s, color .15s;
}
.ui-datepicker td a:hover {
    background: var(--brand-50) !important;
    color: var(--brand-dark) !important;
}
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-highlight {
    background: var(--brand) !important;
    color: #fff !important;
    font-weight: 600;
}
.ui-datepicker td.ui-state-disabled span {
    color: var(--ink-5) !important;
    background: transparent !important;
    cursor: not-allowed;
}
.ui-datepicker .ui-datepicker-buttonpane {
    border-top: 1px solid var(--line) !important;
    background: transparent !important;
    margin: 8px 0 0 !important;
    padding: 8px 0 0 !important;
}
.ui-datepicker .ui-datepicker-buttonpane button {
    font-family: var(--f-ui) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 7px 12px !important;
    border-radius: var(--r-xs) !important;
    border: 1px solid var(--line) !important;
    background: var(--paper-2) !important;
    color: var(--ink-2) !important;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.ui-datepicker .ui-datepicker-buttonpane button:hover {
    background: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand) !important;
}

/* ===== Responsive ===== */
@media (max-width: 540px) {
    #reserva .calendarista .nav-tabs .nav-link {
        font-size: 10px;
        padding: 9px 8px;
        letter-spacing: .08em;
    }
    #reserva .calendarista .calendarista-align-right {
        text-align: stretch;
    }
    #reserva .calendarista .calendarista-align-right .btn {
        width: 100%;
    }
}