body { background: #fcfcfc; font-family: 'Raleway', Arial, sans-serif; }
    .widget-bar { max-width: 390px; margin: 1.5rem auto .5rem auto; }
    .widget-bar .form-control, .widget-bar .btn { border-radius: 0; border: none; box-shadow: none; outline: none; background: #fff; font-size: 0.9em; }
    .widget-bar .input-group-text { background: #fff; border: none; }
    .btn-find-table { background: #28a745; color: #fff; border-radius: 5px; font-weight: 600; font-size: 1.08em; }
    .btn-find-table:hover { background: #01713d; color: #d3d3d3; }
    .btn-back { background: #28a745; color: #fff; border-radius: 5px; font-weight: 600; font-size: 1.08em; }
    .btn-back:hover { background: #01713d; color: #d3d3d3; }
    
    
    .step-title { font-size: 1.8rem; font-weight: 700; margin-top: 1.4rem; margin-bottom: 1.7rem; text-align: center; }
    .widget-step { display: none; }
    .widget-step.active { display: block; }
    .guests-grid, .calendar-grid, .time-grid { display: grid; gap: 10px; justify-content: center; }
    .guests-grid { grid-template-columns: repeat(5, 68px); max-width: 320px; margin: 0 auto 1.5rem auto; }
    .calendar-grid { grid-template-columns: repeat(7, 38px); max-width: 340px; margin: 0 auto 1.5rem auto; }
    .time-grid { grid-template-columns: repeat(5, 1fr); max-width: 540px; margin: 0 auto 1.5rem auto; }
    .grid-btn, .time-btn { background: #fff; border: 1.2px solid #d1e3dd; border-radius: 7px; text-align: center; font-size: 1.09em; min-height: 42px; line-height: 20px; font-weight: 500; cursor: pointer; transition: border .15s, background .15s; }
    .grid-btn.active, .time-btn.active { border: 2px solid #17694d; background: #e4f4ed; color: #17694d; }
    .grid-btn.disabled, .time-btn.disabled { background: #eee; color: #bbb; pointer-events: none; opacity: 0.66; }
    .reservation-alert { background: #f3f7f5; color: #347565; font-size: 0.98em; border-radius: 5px; padding: 7px 14px; margin: 1rem auto 0 auto; max-width: 360px; display: flex; align-items: center; gap: 7px; }
    .reservation-alert i { font-size: 1.15em; }
    .widget-bar .bar-btn.active-bar, .widget-bar .bar-btn:focus { border: 2px solid #17694d; background: #e4f4ed; color: #17694d !important; font-weight: 700; z-index: 2; }
    .widget-bar .bar-btn { border: 1.2px solid #d1e3dd; background: #fff; color: #145f44; transition: all .14s; min-width: 88px; }
    .step-circle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #e4f4ed; color: #17694d; font-weight: bold; font-size: 1.1rem; border: 2px solid #17694d; }
    .step-circle.checked { background: #28a745; color: #fff; border-color: #28a745; }
    .step-circle.active { border-color: #145f44; background: #e4f4ed; color: #145f44; }
    .step-line { display:inline-block; width:90px; height:2px; background:#17694d; margin:0 4px 0 4px; vertical-align:middle; }
    .provider{opacity: .80;font-size: 0.8rem;}
    .provider-data{opacity: .80;font-size: 0.5rem;}
    .service-title{font-size:0.98rem;color:#17694d;}


    @media (max-width: 600px) {
      .guests-grid { grid-template-columns: repeat(4, 1fr); }
      .calendar-grid { grid-template-columns: repeat(7, 1fr);}
      .time-grid { grid-template-columns: repeat(4, 1fr);}
      .grid-btn, .time-btn { font-size: 0.8em; min-height: 36px; line-height: 18px; font-weight: 500; }
    }

/* --- Tema claro personalizado para intl-tel-input --- */
.iti__country-list {
  background: #fff !important;
  color: #1a2b36 !important;
  border-radius: 0px !important;
  box-shadow: 0 8px 32px #17694d33, 0 1px 3px #00000008;
  border: 1.5px solid #e5ecea !important;
  max-height: 320px !important;
  overflow-y: auto !important;
}

.iti__country {
  background: #fff !important;
  color: #183d2e !important;
  border-radius: 0px !important;
  transition: background 0.12s, color 0.12s;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: 1em !important;
}

.iti__country:hover, .iti__country.iti__highlight {
  background: #e8faf4 !important;
  color: #137864 !important;
}

.iti__dial-code {
  color: #70a89f !important;
}

.iti__flag-container {
  background: #fff !important;
}

/* --- INPUT PRINCIPAL (con borde claro, sin contorno negro) --- */
.iti--allow-dropdown input, 
.iti--separate-dial-code input {
  background: #fff !important;
  color: #183d2e !important;
  border-radius: 8px !important;
  border: 1.3px solid #b6ded3 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border .16s, box-shadow .16s;
}
.iti--allow-dropdown input:focus,
.iti--separate-dial-code input:focus {
  border: 1.5px solid #49c6a0 !important;
  box-shadow: 0 0 0 1.5px #c3f8df !important;
  outline: none !important;
}

/* --- BUSCADOR DEL DROPDOWN (sin contorno negro, borde suave y pastel) --- */
.iti__country-list input[type="search"],
.iti__country-list input[type="text"] {
  border: 1.3px solid #b6ded3 !important;
  background: #f8fafd !important;
  color: #183d2e !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 6px 12px !important;
  margin: 4px 8px !important;
  transition: border .16s, box-shadow .16s;
}
.iti__country-list input[type="search"]:focus,
.iti__country-list input[type="text"]:focus {
  border: 1.5px solid #49c6a0 !important;
  box-shadow: 0 0 0 1.5px #c3f8df !important;
  outline: none !important;
}

/* --- SCROLLBAR DEL DROPDOWN --- */
.iti__country-list::-webkit-scrollbar {
  width: 8px;
}
.iti__country-list::-webkit-scrollbar-thumb {
  background: #e6f7ee;
  border-radius: 0px;
}

/* --- OPCIONES DEL DROPDOWN --- */
.iti__country.iti__highlight {
  background: #e5faed !important;
  color: #0e4932 !important;
}
.iti__country-list .iti__country:last-child {
  border-radius: 0 0 12px 12px !important;
}

@media (max-width: 600px) {
  .iti__country-list {
    max-height: 220px !important;
    width: 96vw !important;
    left: 2vw !important;
    right: 2vw !important;
  }
}