/* ═══════════════════════════════════════════════════════════
   Villa Megna — KrossBooking Widget
   Override colori e form per allineamento al design system.
   Usa !important solo dove necessario per battere gli inline
   styles del CDN widget.
   ═══════════════════════════════════════════════════════════ */

/* ── Wrapper ────────────────────────────────────────────── */

.vm-booking-wrapper {
    background: var(--vm-white);
    border-radius: var(--vm-radius-xl);
    box-shadow: var(--vm-shadow-xl);
    padding: var(--vm-space-8);
    max-width: 960px;
    margin: 0 auto;
}

/* ── Bottoni KrossBooking → gold ────────────────────────── */

.kross-booking-widget .kross-btn,
.kross-booking-widget [class*="kross-btn"],
[class*="kross-booking"] button[type="submit"],
[class*="kross-booking"] .search-btn {
    background-color: var(--vm-gold) !important;
    border-color:     var(--vm-gold) !important;
    color:            var(--vm-navy) !important;
    font-family:      var(--vm-font-ui) !important;
    font-weight:      700 !important;
    letter-spacing:   .06em !important;
    text-transform:   uppercase !important;
    border-radius:    var(--vm-radius-sm) !important;
    transition:       all var(--vm-transition-base) !important;
}

.kross-booking-widget .kross-btn:hover,
.kross-booking-widget [class*="kross-btn"]:hover,
[class*="kross-booking"] button[type="submit"]:hover {
    background-color: var(--vm-gold-dark) !important;
    border-color:     var(--vm-gold-dark) !important;
    color:            var(--vm-white) !important;
}

/* ── Campi input ────────────────────────────────────────── */

.kross-booking-widget input[type="text"],
.kross-booking-widget input[type="date"],
.kross-booking-widget input[type="number"],
.kross-booking-widget select,
[class*="kross-booking"] input,
[class*="kross-booking"] select {
    border-color:  var(--vm-gray-200) !important;
    border-radius: var(--vm-radius-sm) !important;
    font-family:   var(--vm-font-body) !important;
    color:         var(--vm-text-primary) !important;
}

.kross-booking-widget input:focus,
.kross-booking-widget select:focus {
    border-color: var(--vm-gold) !important;
    box-shadow:   0 0 0 3px rgba(201, 168, 76, .2) !important;
    outline:      none !important;
}

/* ── Prezzi → gold ──────────────────────────────────────── */

.kross-booking-widget .price,
.kross-booking-widget [class*="price"],
.kross-booking-widget .rate,
.kross-booking-widget .total {
    color:       var(--vm-gold-dark) !important;
    font-weight: 700 !important;
}

/* ── Datepicker header ──────────────────────────────────── */

.kross-booking-widget .datepicker-header,
.kross-booking-widget .ui-datepicker-header {
    background: var(--vm-navy) !important;
    color:      var(--vm-white) !important;
}

.kross-booking-widget .ui-datepicker-today a,
.kross-booking-widget .datepicker-today {
    background: var(--vm-gold-light) !important;
    color:      var(--vm-navy) !important;
}