/*
 * Widget orario SBB (smapi-widget) con l'aspetto del vecchio form .section-booking.
 *
 * smapi-widget.css viene importato in un cascade layer: le sue regole globali
 * (reset su html, input, img, ...) perdono sempre contro il CSS del sito, che non usa layer.
 * Dentro lo shadow DOM dei componenti SBB si interviene solo tramite le custom property --sbb-*.
 */
@import url("smapi-widget.css") layer(smapi);

/* Tema chiaro SBB (equivale a class="sbb-light" su <html>): i token colore sono calcolati su :root,
   senza queste variabili valori come --sbb-background-color-1 risultano invalidi (es. pannello autocomplete trasparente) */
:root {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
}

.smapi-booking .form-box {
    --sbb-typo-font-family: 'SBBWeb Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --sbb-typo-letter-spacing-body-text: normal;
    --sbb-color-primary: #ea2327;
    --sbb-color-5: #6c757d;
    color: #000;
}

/* sbb-timetable-form non deve creare un box proprio: i figli seguono il flex di .form-box */
.smapi-booking sbb-timetable-form {
    display: contents;
}

/* Campi: label 13px sopra, input 16px, padding come .p-2 del vecchio form */
.smapi-booking sbb-timetable-form-field,
.smapi-booking sbb-form-field {
    --sbb-form-field-padding-inline: .5rem;
    --sbb-form-field-min-height: 58px;
    --sbb-form-field-background-color: transparent;
    --sbb-form-field-input-text-size: 16px;
    --sbb-form-field-label-color: #000;
    --sbb-font-size-text-xs: 13px;
    --sbb-form-field-gap: .25rem;
}
.smapi-booking sbb-form-field label,
.smapi-booking sbb-timetable-form-field label {
    font-family: 'SBBWeb Roman';
}
.smapi-booking sbb-timetable-form-field input {
    max-width: 300px;
}
.smapi-booking sbb-timetable-form-field input::placeholder {
    font-family: 'SBBWeb Light';
}
.smapi-booking sbb-date-input {
    --sbb-typo-font-family: 'SBBWeb Bold';
    /* clicking the date opens the calendar (see stageHome.ftl) */
    cursor: pointer;
}
/* native time input (Tempus Dominus picker, see stageHome.ftl) */
.smapi-booking #sbb-timetable-form-details-time-input {
    font-family: 'SBBWeb Bold';
    font-size: 16px;
    color: #000;
    background: transparent;
    border: 0;
    padding: 0;
    outline: none;
    cursor: pointer;
}
.smapi-booking #sbb-timetable-form-details-time-input::placeholder {
    font-family: 'SBBWeb Light';
}
/* larghezze degli input data/ora del vecchio form */
.smapi-booking sbb-date-input {
    min-width: 108px;
}
.smapi-booking #sbb-timetable-form-details-time-input {
    width: 70px;
}

/* "Da" / "a": niente icone di percorso SBB (non hanno ::part, si azzerano via custom property) */
.smapi-booking sbb-timetable-form-field {
    --sbb-icon-svg-width: 0;
    --sbb-icon-svg-height: 0;
    --sbb-timetable-form-field-route-icon-color: transparent;
    --sbb-border-color-4-inverted: transparent;
    --sbb-form-field-padding-inline: 0;
    /* 2px di padding-top compensati nella min-height: il wrapper resta nei 58px interni di .input-container */
    --sbb-form-field-min-height: 56px;
    padding: 2px .5rem 0 8px;
}

/* Bordi interni dei gruppi, come .input-container > div del vecchio form */
.smapi-booking .input-container:not(.time) > sbb-timetable-form-field:first-child {
    border-bottom: 1px solid #DCD8D6;
}
.smapi-booking .input-container.time > sbb-form-field:last-child {
    border-left: 1px solid #DCD8D6;
}
@media only screen and (min-width: 768px) {
    .smapi-booking .input-container:not(.time) > sbb-timetable-form-field:first-child {
        border-bottom: none;
    }
    .smapi-booking .input-container:not(.time) > sbb-timetable-form-field:last-child {
        border-left: 1px solid #DCD8D6;
        padding-left: 23px;
    }
}

/* Pulsante di inversione: posizione e aspetto di .btn-change */
.smapi-booking sbb-timetable-form-swap-button {
    --sbb-timetable-form-swap-button-position: static;
    --sbb-timetable-form-swap-button-translate: none;
    --sbb-timetable-form-swap-button-margin-inline-end: 0;
    --sbb-button-color-default-background: #fff;
    --sbb-button-color-default-border: #DCD8D6;
    --sbb-button-color-default-text: #000;
    --sbb-button-color-hover-border: #DCD8D6;
    --sbb-button-color-active-border: #DCD8D6;
    --sbb-button-box-shadow: none;
    --sbb-button-box-shadow-definition: none;
    --sbb-button-min-height: 40px;
    --sbb-button-border-width: 1px;
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: calc(100% - 30px);
    margin-left: -20px;
    margin-top: -20px;
}
@media only screen and (min-width: 768px) {
    .smapi-booking sbb-timetable-form-swap-button {
        left: 50%;
        transform: rotate(90deg);
    }
}

/* Focus da tastiera: l'outline SBB è interno al wrapper (offset negativo) e coprirebbe label e testo,
   e i campi borderless aggiungono una sottolineatura nera. Li sostituiamo con un anello sulla cella intera. */
.smapi-booking sbb-timetable-form-field,
.smapi-booking sbb-form-field {
    --sbb-focus-outline-color: transparent;
    --sbb-form-field-border-color: transparent;
    border-radius: 5px;
}
.smapi-booking sbb-timetable-form-field:has(input:focus-visible),
.smapi-booking sbb-form-field:has(sbb-date-input:focus-visible, input:focus-visible) {
    outline: 2px solid #000;
    outline-offset: -3px;
}
/* il toggle del calendario mantiene il suo anello di focus */
.smapi-booking sbb-datepicker-toggle {
    --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
}

/* Time picker: the widget is appended to .input-container.time (position-relative), under the time field.
   Tempus Dominus computes top/left from the input offset, unreliable inside the sbb-form-field shadow DOM */
.smapi-booking .input-container.time > .bootstrap-datetimepicker-widget {
    top: 100% !important;
    bottom: auto !important;
    left: auto !important;
    right: 0 !important;
}