/**
 * Stili per il widget di prenotazione Smoobu
 */

/* Contenitore principale del widget */
.lb-smoobu-booking-widget-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    max-width: 600px;
    margin: 30px auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 25px;
    color: #333;
    position: relative;
}

/* Intestazione del widget */
.lb-smoobu-widget-header {
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
    padding-bottom: 15px;
}

.lb-smoobu-widget-header h2 {
    margin: 0;
    font-size: 1.5em;
    color: #333;
}

/* Loader */
.lb-smoobu-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    padding: 20px;
    text-align: center;
    color: #666;
}

.lb-smoobu-loader {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #2196F3;
    animation: lb-smoobu-spin 1s linear infinite;
    margin-right: 10px;
}

@keyframes lb-smoobu-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Messaggi di errore */
.lb-smoobu-error-message {
    background-color: #fff4f4;
    color: #d92c2c;
    border: 1px solid #f5c6cb;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    display: none;
}

/* Passaggi della prenotazione */
.lb-smoobu-step {
    margin-bottom: 25px;
}

.lb-smoobu-step h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em;
    color: #333;
}

/* Indicatore dei passaggi */
.lb-smoobu-steps-indicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    position: relative;
}

.lb-smoobu-steps-indicator::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #e0e0e0;
    z-index: 1;
}

.lb-smoobu-step-indicator {
    position: relative;
    z-index: 2;
    text-align: center;
    flex: 1;
}

.lb-smoobu-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 auto 5px;
    background-color: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    font-weight: bold;
    color: #999;
}

.lb-smoobu-step-indicator.active .lb-smoobu-step-number {
    background-color: #2196F3;
    border-color: #2196F3;
    color: #fff;
}

.lb-smoobu-step-indicator.completed .lb-smoobu-step-number {
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: #fff;
}

.lb-smoobu-step-label {
    font-size: 0.85em;
    color: #999;
}

.lb-smoobu-step-indicator.active .lb-smoobu-step-label {
    color: #2196F3;
    font-weight: bold;
}

.lb-smoobu-step-indicator.completed .lb-smoobu-step-label {
    color: #4CAF50;
}

/* Selettore date */
.lb-smoobu-date-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.lb-smoobu-form-group {
    flex: 1;
    min-width: 200px;
    margin-bottom: 15px;
}

.lb-smoobu-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.lb-smoobu-date-picker input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    cursor: pointer;
}

/* Campo obbligatorio */
.lb-smoobu-required {
    color: #d92c2c;
}

/* Selettore ospiti */
.lb-smoobu-guest-selector {
    margin-bottom: 20px;
}

.lb-smoobu-guest-control {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.lb-smoobu-guest-button, 
.lb-smoobu-guest-minus, 
.lb-smoobu-guest-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    background-color: #f5f5f5;
    border-radius: 4px;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lb-smoobu-guest-button:hover,
.lb-smoobu-guest-minus:hover,
.lb-smoobu-guest-plus:hover {
    background-color: #eee;
}

.lb-smoobu-guest-count {
    margin: 0 10px;
    min-width: 30px;
    text-align: center;
    font-size: 1.2em;
    font-weight: 500;
}

.lb-smoobu-guest-info {
    font-size: 0.85em;
    color: #666;
    margin-top: 5px;
}

/* Opzioni extra */
.lb-smoobu-extras {
    margin-bottom: 20px;
}

.lb-smoobu-extra-item {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.lb-smoobu-extra-item:hover {
    background-color: #f0f0f0;
}

.lb-smoobu-extra-info {
    flex: 1;
}

.lb-smoobu-extra-name {
    font-weight: 500;
    margin-bottom: 3px;
}

.lb-smoobu-extra-description {
    font-size: 0.85em;
    color: #666;
}

.lb-smoobu-extra-price {
    font-weight: 500;
    color: #2196F3;
    margin-left: 10px;
}

.lb-smoobu-extra-control {
    display: flex;
    align-items: center;
}

.lb-smoobu-extra-control .lb-smoobu-guest-button {
    width: 28px;
    height: 28px;
}

.lb-smoobu-extra-count {
    margin: 0 8px;
    min-width: 25px;
    text-align: center;
    font-weight: 500;
}

/* Modulo di prenotazione */
.lb-smoobu-booking-form input,
.lb-smoobu-booking-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
    margin-top: 5px;
}

.lb-smoobu-booking-form textarea {
    min-height: 100px;
    resize: vertical;
}

.lb-smoobu-required-label {
    color: #d92c2c;
    margin-left: 3px;
}

/* Riepilogo prenotazione */
.lb-smoobu-booking-summary {
    background-color: #f9f9f9;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}

.lb-smoobu-summary-dates {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ddd;
}

.lb-smoobu-summary-date {
    text-align: center;
}

.lb-smoobu-summary-date-label {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 3px;
}

.lb-smoobu-summary-date-value {
    font-weight: 500;
}

.lb-smoobu-summary-nights {
    text-align: center;
    margin: 0 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lb-smoobu-summary-nights-value {
    font-weight: 500;
    color: #2196F3;
}

.lb-smoobu-summary-nights-label {
    font-size: 0.85em;
    color: #666;
}

.lb-smoobu-summary-guests {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ddd;
}

.lb-smoobu-summary-guests-label {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 3px;
}

.lb-smoobu-summary-guests-value {
    font-weight: 500;
}

.lb-smoobu-summary-extras {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ddd;
}

.lb-smoobu-summary-extras-label {
    font-weight: 500;
    margin-bottom: 8px;
}

.lb-smoobu-summary-extra-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.lb-smoobu-summary-extra-name {
    font-size: 0.95em;
}

.lb-smoobu-summary-extra-price {
    font-weight: 500;
}

.lb-smoobu-summary-totals {
    margin-top: 10px;
}

.lb-smoobu-summary-subtotal,
.lb-smoobu-summary-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.lb-smoobu-summary-subtotal-label,
.lb-smoobu-summary-total-label {
    font-weight: 500;
}

.lb-smoobu-summary-subtotal-value,
.lb-smoobu-summary-total-value {
    font-weight: 500;
}

.lb-smoobu-summary-total {
    font-size: 1.1em;
    border-top: 1px solid #ddd;
    padding-top: 10px;
    margin-top: 10px;
}

.lb-smoobu-summary-total-value {
    color: #2196F3;
    font-weight: bold;
}

/* Pulsanti di navigazione */
.lb-smoobu-step-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
}

.lb-smoobu-button,
.lb-smoobu-prev-step,
.lb-smoobu-next-step,
.lb-smoobu-submit-booking {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.lb-smoobu-button,
.lb-smoobu-prev-step {
    background-color: #f5f5f5;
    color: #333;
}

.lb-smoobu-button:hover,
.lb-smoobu-prev-step:hover {
    background-color: #eee;
}

.lb-smoobu-button-primary,
.lb-smoobu-next-step,
.lb-smoobu-submit-booking {
    background-color: #2196F3;
    color: white;
}

.lb-smoobu-button-primary:hover,
.lb-smoobu-next-step:hover,
.lb-smoobu-submit-booking:hover {
    background-color: #1e87db;
}

.lb-smoobu-button-success {
    background-color: #4CAF50;
    color: white;
}

.lb-smoobu-button-success:hover {
    background-color: #43a047;
}

.lb-smoobu-button-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.lb-smoobu-button-icon {
    margin-right: 5px;
}

/* Messaggi di disponibilità */
.lb-smoobu-availability-message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    display: none;
}

.lb-smoobu-available {
    background-color: #e8f5e9;
    color: #2e7d32;
    display: block;
}

.lb-smoobu-not-available {
    background-color: #fff4f4;
    color: #d32f2f;
    display: block;
}

/* Responsività */
@media screen and (max-width: 600px) {
    .lb-smoobu-booking-widget-container {
        padding: 15px;
        margin: 20px 10px;
    }
    
    .lb-smoobu-date-picker {
        flex-direction: column;
    }
    
    .lb-smoobu-form-group {
        width: 100%;
    }
    
    .lb-smoobu-summary-dates {
        flex-direction: column;
        align-items: center;
    }
    
    .lb-smoobu-summary-date {
        margin-bottom: 10px;
    }
    
    .lb-smoobu-step-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .lb-smoobu-button,
    .lb-smoobu-prev-step,
    .lb-smoobu-next-step,
    .lb-smoobu-submit-booking {
        width: 100%;
        text-align: center;
    }
    
    .lb-smoobu-steps-indicator {
        display: none;
    }
}

/* Animazioni */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lb-smoobu-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

/* Temi personalizzabili */
/* Tema chiaro */
.lb-smoobu-theme-light {
    background-color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
}

.lb-smoobu-theme-light .lb-smoobu-button-primary,
.lb-smoobu-theme-light .lb-smoobu-next-step,
.lb-smoobu-theme-light .lb-smoobu-submit-booking {
    background-color: #4caf50;
}

.lb-smoobu-theme-light .lb-smoobu-summary-total-value {
    color: #4caf50;
}

.lb-smoobu-theme-light .lb-smoobu-step-indicator.active .lb-smoobu-step-number {
    background-color: #4caf50;
    border-color: #4caf50;
}

.lb-smoobu-theme-light .lb-smoobu-step-indicator.active .lb-smoobu-step-label {
    color: #4caf50;
}

/* Tema scuro */
.lb-smoobu-theme-dark {
    background-color: #303030;
    color: #e0e0e0;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

.lb-smoobu-theme-dark .lb-smoobu-widget-header {
    border-bottom-color: #444;
}

.lb-smoobu-theme-dark h3 {
    color: #fff;
}

.lb-smoobu-theme-dark input,
.lb-smoobu-theme-dark textarea {
    background-color: #424242;
    border-color: #555;
    color: #e0e0e0;
}

.lb-smoobu-theme-dark .lb-smoobu-extra-item {
    background-color: #424242;
}

.lb-smoobu-theme-dark .lb-smoobu-extra-item:hover {
    background-color: #4f4f4f;
}

.lb-smoobu-theme-dark .lb-smoobu-guest-button,
.lb-smoobu-theme-dark .lb-smoobu-guest-minus,
.lb-smoobu-theme-dark .lb-smoobu-guest-plus {
    background-color: #424242;
    border-color: #555;
    color: #e0e0e0;
}

.lb-smoobu-theme-dark .lb-smoobu-booking-summary {
    background-color: #424242;
}

.lb-smoobu-theme-dark .lb-smoobu-button,
.lb-smoobu-theme-dark .lb-smoobu-prev-step {
    background-color: #424242;
    color: #e0e0e0;
}

.lb-smoobu-theme-dark .lb-smoobu-button-primary,
.lb-smoobu-theme-dark .lb-smoobu-next-step,
.lb-smoobu-theme-dark .lb-smoobu-submit-booking {
    background-color: #4fc3f7;
}

.lb-smoobu-theme-dark .lb-smoobu-summary-total-value {
    color: #4fc3f7;
}

.lb-smoobu-theme-dark .lb-smoobu-step-indicator.active .lb-smoobu-step-number {
    background-color: #4fc3f7;
    border-color: #4fc3f7;
}

.lb-smoobu-theme-dark .lb-smoobu-step-indicator.active .lb-smoobu-step-label {
    color: #4fc3f7;
}

/* Datepicker UI customization */
.ui-datepicker {
    width: 300px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: 6px 0;
    margin-bottom: 5px;
    text-align: center;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    text-decoration: none;
    color: #333;
}

.ui-datepicker .ui-datepicker-prev {
    left: 5px;
}

.ui-datepicker .ui-datepicker-next {
    right: 5px;
}

.ui-datepicker .ui-datepicker-title {
    font-weight: bold;
}

.ui-datepicker table {
    width: 100%;
    border-collapse: collapse;
}

.ui-datepicker th {
    padding: 5px;
    text-align: center;
    font-weight: bold;
    border: 0;
}

.ui-datepicker td {
    padding: 1px;
}

.ui-datepicker td span,
.ui-datepicker td a {
    display: block;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
}

.ui-datepicker .ui-state-default {
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #333;
}

.ui-datepicker .ui-state-hover {
    background: #e9e9e9;
}

.ui-datepicker .ui-state-active {
    background: #2196F3;
    border-color: #2196F3;
    color: #fff;
}

.ui-datepicker .ui-state-disabled {
    opacity: 0.35;
}

.ui-datepicker .ui-datepicker-other-month a {
    opacity: 0.35;
}