.elementor-17 .elementor-element.elementor-element-269f80f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-17 .elementor-element.elementor-element-269f80f:not(.elementor-motion-effects-element-type-background), .elementor-17 .elementor-element.elementor-element-269f80f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-astglobalcolor5 );}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-17 .elementor-element.elementor-element-1527b78 > .elementor-widget-container{padding:30px 0px 20px 0px;}.elementor-17 .elementor-element.elementor-element-1527b78 img{width:10%;}.elementor-17 .elementor-element.elementor-element-20f1e40{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-17 .elementor-element.elementor-element-20f1e40:not(.elementor-motion-effects-element-type-background), .elementor-17 .elementor-element.elementor-element-20f1e40 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-astglobalcolor5 );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-17 .elementor-element.elementor-element-e2d6c5e{text-align:center;}.elementor-17 .elementor-element.elementor-element-e2d6c5e .elementor-heading-title{font-family:"Marcellus SC", Sans-serif;font-weight:700;color:#2A6193;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-17 .elementor-element.elementor-element-be6511f > .elementor-widget-container{padding:0px 0px 0px 20px;}.elementor-17 .elementor-element.elementor-element-be6511f{text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-17 .elementor-element.elementor-element-1736de2 .elementor-button:hover, .elementor-17 .elementor-element.elementor-element-1736de2 .elementor-button:focus{background-color:var( --e-global-color-secondary );color:var( --e-global-color-astglobalcolor4 );border-color:var( --e-global-color-secondary );}.elementor-17 .elementor-element.elementor-element-1736de2 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 60px 0px;}.elementor-17 .elementor-element.elementor-element-1736de2 .elementor-button{fill:var( --e-global-color-astglobalcolor4 );color:var( --e-global-color-astglobalcolor4 );}.elementor-17 .elementor-element.elementor-element-1736de2 .elementor-button:hover svg, .elementor-17 .elementor-element.elementor-element-1736de2 .elementor-button:focus svg{fill:var( --e-global-color-astglobalcolor4 );}.elementor-17 .elementor-element.elementor-element-4d2b705{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-17 .elementor-element.elementor-element-1527b78 img{width:15%;}}@media(min-width:768px){.elementor-17 .elementor-element.elementor-element-269f80f{--content-width:1200px;}}@media(max-width:767px){.elementor-17 .elementor-element.elementor-element-269f80f{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-17 .elementor-element.elementor-element-1527b78 > .elementor-widget-container{padding:30px 0px 80px 0px;}.elementor-17 .elementor-element.elementor-element-1527b78 img{width:25%;}.elementor-17 .elementor-element.elementor-element-e2d6c5e{text-align:center;}.elementor-17 .elementor-element.elementor-element-e2d6c5e .elementor-heading-title{font-size:26px;}.elementor-17 .elementor-element.elementor-element-be6511f{text-align:center;font-size:14px;}}/* Start custom CSS for shortcode, class: .elementor-element-b3b0042 */* ==========================================================================
   CSS PERSONALIZZATO PER WIDGET NETPARKING - BAGNO ANDREA DORIA
   ========================================================================== */

/* 1. CONTENITORE PRINCIPALE E SFONDO */
.bootstrap.prenotazione- .card {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    padding: 2rem !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

/* 2. TITOLO DEL WIDGET */
.bootstrap.prenotazione- h3, 
.bootstrap.prenotazione- h4,
.bootstrap.prenotazione- .card-title {
    color: #0170B9 !important; /* Colore blu del tema Astra */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 30px !important;
    text-align: center !important;
    border-bottom: 2px solid #f0f0f0 !important;
    padding-bottom: 15px !important;
}

/* 3. ETICHETTE (LABELS) */
.bootstrap.prenotazione- label,
.bootstrap.prenotazione- .form-label {
    color: #3a3a3a !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* 4. CAMPI DI TESTO E SELECT (INPUTS) */
.bootstrap.prenotazione- input[type="text"],
.bootstrap.prenotazione- input[type="email"],
.bootstrap.prenotazione- input[type="tel"],
.bootstrap.prenotazione- input[type="number"],
.bootstrap.prenotazione- select,
.bootstrap.prenotazione- textarea,
.bootstrap.prenotazione- .form-control {
    background-color: #f9f9f9 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    color: #333333 !important;
    padding: 12px 15px !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    height: auto !important;
}

/* Effetto focus sui campi */
.bootstrap.prenotazione- input[type="text"]:focus,
.bootstrap.prenotazione- input[type="email"]:focus,
.bootstrap.prenotazione- input[type="tel"]:focus,
.bootstrap.prenotazione- input[type="number"]:focus,
.bootstrap.prenotazione- select:focus,
.bootstrap.prenotazione- textarea:focus,
.bootstrap.prenotazione- .form-control:focus {
    border-color: #0170B9 !important; /* Colore blu del tema */
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(1, 112, 185, 0.15) !important;
    outline: none !important;
}

/* 5. PULSANTE DI PRENOTAZIONE */
.bootstrap.prenotazione- button#submit-search,
.bootstrap.prenotazione- .btn-primary {
    background-color: #e58e26 !important; /* Colore arancione in linea con la navbar */
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 15px 40px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(229, 142, 38, 0.3) !important;
    margin-top: 20px !important;
    cursor: pointer !important;
}

/* Effetto hover sul pulsante */
.bootstrap.prenotazione- button#submit-search:hover,
.bootstrap.prenotazione- .btn-primary:hover {
    background-color: #d37d1d !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(229, 142, 38, 0.4) !important;
}

/* 6. RADIO BUTTONS E CHECKBOX */
.bootstrap.prenotazione- input[type="radio"],
.bootstrap.prenotazione- input[type="checkbox"] {
    accent-color: #0170B9 !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
    cursor: pointer !important;
}

.bootstrap.prenotazione- .radio-inline,
.bootstrap.prenotazione- .checkbox-inline {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    cursor: pointer !important;
}

/* 6b. OPZIONI DI REGISTRAZIONE — una sotto l'altra */
.bootstrap.prenotazione- div.radio {
    display: block !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

.bootstrap.prenotazione- div.radio label.radio {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
}

/* 7. SEZIONE SERVIZI E OPZIONI (TOGGLES) */
.bootstrap.prenotazione- .form-check-input {
    cursor: pointer !important;
}

.bootstrap.prenotazione- .form-check-input:checked {
    background-color: #0170B9 !important;
    border-color: #0170B9 !important;
}

/* 8. PULSANTE PRENOTA — centrato in fondo */
.bootstrap.prenotazione- #bottone-cerca-wrap {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 10px !important;
}

.bootstrap.prenotazione- .bottone-cerca {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.bootstrap.prenotazione- #nascondi {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.bootstrap.prenotazione- button#submit-search,
.bootstrap.prenotazione- .btn-primary {
    width: auto !important;
    min-width: 220px !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* 8b. SPANATURA GRIGLIA (Miglioramento layout) */
.bootstrap.prenotazione- .row {
    margin-bottom: 15px !important;
}

.bootstrap.prenotazione- .form-group {
    margin-bottom: 20px !important;
}

/* 9. TESTI E LINK INFORMATIVI (Privacy, Condizioni) */
.bootstrap.prenotazione- a {
    color: #0170B9 !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

.bootstrap.prenotazione- a:hover {
    color: #e58e26 !important;
}

.bootstrap.prenotazione- p,
.bootstrap.prenotazione- i {
    font-size: 13px !important;
    color: #666666 !important;
    line-height: 1.5 !important;
}

/* 10. ICONA AUTO — restyling del selettore tipologia veicolo */

/* Contenitore del radio veicolo */
.bootstrap.prenotazione- #radiosvehicle {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 8px !important;
}

/* Label-card del veicolo (es. Auto) */
.bootstrap.prenotazione- #radiosvehicle label.radio-inline {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 90px !important;
    height: 80px !important;
    padding: 10px 8px !important;
    border-radius: 12px !important;
    border: 2px solid #e0e0e0 !important;
    background-color: #f9f9f9 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    text-transform: none !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    gap: 6px !important;
}

/* Stato selezionato */
.bootstrap.prenotazione- #radiosvehicle label.radio-inline:has(input:checked),
.bootstrap.prenotazione- #radiosvehicle label.radio-inline.active {
    border-color: #0170B9 !important;
    background-color: #e8f3fc !important;
    box-shadow: 0 2px 8px rgba(1, 112, 185, 0.2) !important;
}

/* Hover */
.bootstrap.prenotazione- #radiosvehicle label.radio-inline:hover {
    border-color: #0170B9 !important;
    background-color: #f0f7ff !important;
}

/* Span contenitore icona */
.bootstrap.prenotazione- #radiosvehicle label.radio-inline span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-color: #dbeafe !important;
    padding: 0 !important;
}

/* Icona FontAwesome fa-car */
.bootstrap.prenotazione- #radiosvehicle label.radio-inline span i.fa-car,
.bootstrap.prenotazione- #radiosvehicle label.radio-inline span i.fa-solid {
    font-size: 20px !important;
    color: #0170B9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
}

/* Testo sotto l'icona (es. "Auto") */
.bootstrap.prenotazione- #radiosvehicle label.radio-inline p {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #3a3a3a !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* Nasconde il <br> inutile prima del testo */
.bootstrap.prenotazione- #radiosvehicle label.radio-inline p br {
    display: none !important;
}

/* Nasconde il radio input originale */
.bootstrap.prenotazione- #radiosvehicle label.radio-inline input[type="radio"] {
    display: none !important;
}

/* 11. TESTO "cerca" VICINO AL PULSANTE — nascosto */
.bootstrap.prenotazione- #bottone-cerca-wrap > label {
    display: none !important;
}

/* 12. TESTO "* Campi obbligatori" — spostato sotto le checkbox */
.bootstrap.prenotazione- .col-xs-12.top_margin_15 {
    order: 10 !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 12px !important;
    padding-top: 8px !important;
    border-top: 1px solid #f0f0f0 !important;
}

.bootstrap.prenotazione- .col-xs-12.top_margin_15 .Stile3 {
    font-size: 13px !important;
    color: #888888 !important;
    font-style: italic !important;
}

/* Il contenitore .bottone-cerca usa flex-direction column per impilare correttamente */
.bootstrap.prenotazione- .bottone-cerca {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
}

/* 13. CAMPO TELEFONO — correzione visibilità testo digitato */

/* Il widget imposta background:initial sul campo dentro .input-group,
   rendendo il testo poco visibile. Forziamo sfondo bianco e testo scuro. */
.bootstrap.prenotazione- .input-group {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
}

.bootstrap.prenotazione- .input-group .form-control,
.bootstrap.prenotazione- .input-group input[type="text"],
.bootstrap.prenotazione- #phone {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border: none !important;
    box-shadow: none !important;
    caret-color: #1e293b !important;
}

/* Il .iti__country-container è position:absolute e occupa ~93px.
   Il padding-left dell'input deve superare quella larghezza
   per evitare che il testo digitato finisca sotto il prefisso. */
.bootstrap.prenotazione- #phone,
.bootstrap.prenotazione- input.iti__tel-input,
.bootstrap.prenotazione- .iti--allow-dropdown input {
    padding-left: 100px !important;
}

.bootstrap.prenotazione- .input-group .form-control:focus,
.bootstrap.prenotazione- #phone:focus {
    background-color: #ffffff !important;
    color: #1e293b !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Icona e prefisso internazionale (bandiera + codice paese) */
.bootstrap.prenotazione- .input-group-text {
    background-color: #f0f4f8 !important;
    border: none !important;
    border-right: 1px solid #e0e0e0 !important;
    color: #0170B9 !important;
}

.bootstrap.prenotazione- .iti__selected-country {
    background-color: #f0f4f8 !important;
    color: #1e293b !important;
    border-right: 1px solid #e0e0e0 !important;
}

.bootstrap.prenotazione- .iti__selected-dial-code {
    color: #1e293b !important;
    font-weight: 600 !important;
}

/* 14. MESSAGGI DI ERRORE VALIDAZIONE — visibilità e posizionamento */

/* Stile generale per tutti i messaggi di errore .invalid-feedback */
.bootstrap.prenotazione- .error.invalid-feedback,
.bootstrap.prenotazione- .invalid-feedback {
    display: block !important;
    width: 100% !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #dc2626 !important;
    background-color: #fff5f5 !important;
    border-left: 3px solid #dc2626 !important;
    padding: 5px 10px !important;
    margin-top: 4px !important;
    border-radius: 0 4px 4px 0 !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

/* Il #phone-error è dentro .iti che è dentro .input-group con overflow:hidden.
   Soluzione: spostiamo il messaggio FUORI dall'input-group usando position:absolute
   e lo ancoriamo sotto il campo con un margine-top calcolato. */
.bootstrap.prenotazione- #phone-error {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin-top: 2px !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
}

/* Il .col-md-12 del telefono deve avere position:relative per ancorare l'errore assoluto
   e padding-bottom per fare spazio al messaggio di errore */
.bootstrap.prenotazione- .col-md-12:has(#phone) {
    position: relative !important;
    padding-bottom: 30px !important;
}

/* Il wrapper .iti deve avere overflow visibile per non tagliare l'errore assoluto */
.bootstrap.prenotazione- .iti.iti--allow-dropdown {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: visible !important;
    position: static !important;
}

/* Il .input-group del telefono deve avere overflow visibile */
.bootstrap.prenotazione- .col-md-12:has(#phone) .input-group {
    overflow: visible !important;
    position: relative !important;
}

/* Il messaggio di errore degli altri campi (fuori da .input-group) */
.bootstrap.prenotazione- .col-md-12 > .error.invalid-feedback,
.bootstrap.prenotazione- .col-md-6 > .error.invalid-feedback {
    width: 100% !important;
    margin-top: 4px !important;
}

/* Il #plate-error è figlio di .col-md-6 (metà riga).
   Forziamo visibilità completa con display block, larghezza piena e sfondo. */
.bootstrap.prenotazione- #plate-error {
    display: block !important;
    position: static !important;
    width: 100% !important;
    margin-top: 6px !important;
    padding: 5px 10px !important;
    background-color: #fff5f5 !important;
    color: #dc2626 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-left: 3px solid #dc2626 !important;
    border-radius: 0 4px 4px 0 !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
    white-space: normal !important;
    overflow: visible !important;
    min-height: 26px !important;
}

/* Assicura che il .col-md-6 della targa non tagli il messaggio */
.bootstrap.prenotazione- #plate-error ~ *,
.bootstrap.prenotazione- .col-md-6 #plate-error {
    overflow: visible !important;
}

/* 15. SCHERMATA DI RIEPILOGO PRENOTAZIONE (.bootstrap.conferma-) */

/* Contenitore principale */
.bootstrap.conferma- {
    font-family: inherit !important;
}

.bootstrap.conferma- .containers {
    background-color: #ffffff !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    padding: 2rem !important;
    margin: 20px auto !important;
    max-width: 700px !important;
    border: 1px solid #e2e8f0 !important;
}

/* Banner titolo — sostituisce il nero/arancione con stile pulito */
.bootstrap.conferma- .card-header,
.bootstrap.conferma- [class*="header"],
.bootstrap.conferma- h2,
.bootstrap.conferma- h3 {
    background-color: #0170B9 !important;
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 16px 20px !important;
    border-radius: 10px !important;
    margin-bottom: 24px !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    border: none !important;
}

/* Numero prenotazione */
.bootstrap.conferma- h4,
.bootstrap.conferma- .numero-prenotazione,
.bootstrap.conferma- [class*="numero"] {
    color: #0170B9 !important;
    font-weight: 700 !important;
    text-align: center !important;
    font-size: 1rem !important;
    margin-bottom: 4px !important;
}

/* Tabella riepilogo dati */
.bootstrap.conferma- table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 20px !important;
}

.bootstrap.conferma- table tr {
    border-bottom: 1px solid #f0f0f0 !important;
}

.bootstrap.conferma- table tr:last-child {
    border-bottom: none !important;
}

.bootstrap.conferma- table td,
.bootstrap.conferma- table th {
    padding: 10px 8px !important;
    font-size: 14px !important;
    color: #3a3a3a !important;
    background-color: #ffffff !important;
    vertical-align: middle !important;
}

.bootstrap.conferma- table td:first-child,
.bootstrap.conferma- table th:first-child {
    font-weight: 700 !important;
    color: #1e293b !important;
    width: 45% !important;
}

/* Totali (evidenziati) */
.bootstrap.conferma- table tr:has(td strong),
.bootstrap.conferma- .totale-row,
.bootstrap.conferma- tr.totale {
    background-color: #f0f7ff !important;
}

/* Sezione pagamento */
.bootstrap.conferma- .paymentWrap,
.bootstrap.conferma- [class*="payment"] {
    background-color: #f9f9f9 !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin-top: 16px !important;
    border: 1px solid #e0e0e0 !important;
}

/* Icone carte di credito */
.bootstrap.conferma- img[src*="visa"],
.bootstrap.conferma- img[src*="mastercard"],
.bootstrap.conferma- img[src*="maestro"],
.bootstrap.conferma- img[src*="postepay"],
.bootstrap.conferma- img[src*="amex"],
.bootstrap.conferma- .payment-icons img,
.bootstrap.conferma- [class*="card-img"] img {
    border-radius: 6px !important;
    border: 1px solid #e0e0e0 !important;
    margin: 3px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}

/* Link pagamento carta */
.bootstrap.conferma- a {
    color: #0170B9 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

.bootstrap.conferma- a:hover {
    color: #e58e26 !important;
}

/* Note prenotazione */
.bootstrap.conferma- [class*="note"],
.bootstrap.conferma- .note-prenotazione {
    background-color: #fff8f0 !important;
    border-left: 3px solid #e58e26 !important;
    padding: 12px 16px !important;
    border-radius: 0 8px 8px 0 !important;
    font-size: 13px !important;
    color: #555555 !important;
    margin-top: 16px !important;
}

/* Titolo "Note Prenotazione" */
.bootstrap.conferma- [class*="note"] h4,
.bootstrap.conferma- [class*="note"] h5,
.bootstrap.conferma- [class*="note"] strong {
    color: #e58e26 !important;
    font-weight: 700 !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
    font-size: 13px !important;
    text-align: left !important;
}

/* Stato prenotazione (verde = confermata, rosso = non confermata) */
.bootstrap.conferma- .verde,
.bootstrap.conferma- [class*="confermata"] {
    background-color: #f0fdf4 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    text-align: center !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
}

.bootstrap.conferma- .rosso,
.bootstrap.conferma- [class*="non-confermata"] {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    text-align: center !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
}

/* 16. RESPONSIVE DESIGN (Dispositivi mobili) */
@media (max-width: 768px) {
    .bootstrap.prenotazione- .card {
        padding: 1.5rem 1rem !important;
        border-radius: 10px !important;
    }
    
    .bootstrap.prenotazione- button#submit-search,
    .bootstrap.prenotazione- .btn-primary {
        padding: 12px 20px !important;
        font-size: 15px !important;
    }
}/* End custom CSS */