:root{
  --amab-accent:#e09900;         /* Dorado */
  --amab-accent-soft:#F5E6CF;    /* Beige */
  --amab-btn:#e09900;            /* Color de botones */
}

/* Heredar tipografía */
#amab-booking-simple, #amab-booking-simple * { font-family: inherit; color: inherit; box-sizing: border-box; }

/* Ventana */
.amab-window{ display:flex; max-width:1100px; margin:10px auto; border-radius:18px; overflow:hidden;
  border:1px solid rgba(0,0,0,.08); background:#e09900; box-shadow:0 18px 48px rgba(0,0,0,.08); }
.amab-side{ width:260px; background:#0b0b0b; color:#fff; padding:18px; }
.amab-side .amab-brand{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.amab-logo{ width:36px; height:36px; border-radius:50%; object-fit:cover; background:#222; }
/* Nombre del sitio BLANCO forzado */
#amab-booking-simple .amab-sitename{ font-weight:700; color:#fff !important; }

/* Pasos BLANCO forzado */
#amab-booking-simple .amab-stepnav{ list-style:none; margin:10px 0 0; padding:0; }
#amab-booking-simple .amab-stepnav li{
  display:flex; align-items:center; gap:10px; margin:14px 0;
  color:#fff !important; opacity:1 !important;
}
/* Dots dorados (cámbialo aquí si quieres otro color) */
.amab-dot{ width:22px; height:22px; min-width:22px; border-radius:50%;
  background:var(--amab-accent,#e09900); border:2px solid rgba(255,255,255,.85); }

.amab-main{ flex:1; background:#fff; padding:22px; }

/* Tarjetas */
.amab-card{ border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:14px; margin:14px 0;
  box-shadow:0 10px 28px rgba(0,0,0,.06); overflow:hidden; }
.amab-title{ font-size:1.1rem; font-weight:700; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
/* Fecha más pequeña */
.amab-title small{ opacity:.7; font-weight:400; font-size:.95rem; }
.amab-head{ display:flex; align-items:center; gap:12px; }
.amab-img{ width:56px; height:56px; border-radius:12px; background:#f4f4f4; background-size:cover; background-position:center; }
.amab-details{ display:none; margin-top:10px; }
.amab-details.open{ display:block; }
.amab-desc{ margin-top:6px; opacity:.92; }
/* Más aire entre badges en móvil y desktop */
.amab-badge{ display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.12); background:#fff; margin:0 8px 8px 0; }

/* Precios + espacio con el botón */
.amab-prices{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; }
.amab-price{ display:flex; align-items:center; gap:8px; border:1px solid rgba(0,0,0,.12); border-radius:12px; padding:8px 12px; }
.amab-details > .amab-button{ margin-top:16px; } /* espacio entre precios y botón */

/* Botones (texto BLANCO) + estado CARGANDO con spinner */
#amab-booking-simple .amab-button{
  background:var(--amab-btn,#e09900);
  color:#fff !important;
  border:none; border-radius:12px; padding:10px 18px; cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.10); max-width:100%; position:relative;
}
.amab-button:hover{ filter:brightness(.95); }
.amab-button:disabled{ opacity:.65; cursor:not-allowed; }

.amab-button.is-loading{ opacity:.9; pointer-events:none; }
.amab-button.is-loading::after{
  content:''; width:16px; height:16px; border:2px solid rgba(255,255,255,.6); border-top-color:#fff;
  border-radius:50%; display:inline-block; vertical-align:middle; margin-left:8px;
  animation:amabspin 1s linear infinite;
}
@keyframes amabspin { to { transform: rotate(360deg); } }

/* Formulario */
.amab-form{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.amab-form label{ font-weight:600; }
.amab-form input{ width:100%; padding:10px; border-radius:10px; border:1px solid rgba(0,0,0,.15); max-width:100%; }
.amab-form .full{ grid-column:1 / -1; }
.amab-form .actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; width:100%; }

/* Confirmación */
.amab-ok{
  border-left:4px solid var(--amab-accent,#e09900);
  background:var(--amab-accent-soft,#F5E6CF);
  border-radius:10px; padding:12px; margin-top:12px;
}

/* ——— RESPONSIVE ——— */
@media (max-width: 900px){
  .amab-window{ flex-direction:column; }
  .amab-side{ width:100%; padding:16px; }
  .amab-main{ padding:12px; }
  .amab-card{ margin:10px 8px; padding:12px; }

  .amab-form{ grid-template-columns:1fr; }
  .amab-form .full{ grid-column:1 / -1; }

  /* En móvil colocamos la fecha debajo del título y más pequeña */
  .amab-title{ flex-direction:column; align-items:flex-start; }
  .amab-title small{ font-size:.82rem; line-height:1.25; margin-top:2px; }
}
