/* =====================
   CONTENEDOR GENERAL
===================== */
.fusion-main-menu-search{display:none;}
.wc-block-grid__products {
    display: none !important;
}
.fusion-main-menu .fusion-main-menu-cart{display:none;}
.awb-icon-shopping-cart::before{display:none;}
#roh-reserva {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  gap: 32px;
  align-items: start;
  justify-content: center;
  justify-items: center;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

@media (max-width: 768px) {
  #roh-reserva {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
}

/* =====================
   TARJETAS
===================== */
.roh-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  border: 1px solid #eef2f7;
}

/* =====================
   CALENDARIO
===================== */
#roh-calendario .ui-datepicker {
  width: 100%;
  border: none;
  padding: 0;
}

#roh-calendario .ui-datepicker-header {
  background: none;
  border: none;
  font-weight: 600;
  padding: 0 0 16px;
}

#roh-calendario .ui-datepicker-title {
  font-size: 16px;
}

#roh-calendario .ui-datepicker-calendar th {
  font-size: 12px;
  color: #94a3b8;
  padding-bottom: 8px;
}

#roh-calendario .ui-state-default {
  border: none;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

#roh-calendario .ui-state-active {
  background: #0ea5e9 !important;
  color: #fff !important;
}

#roh-calendario .ui-state-hover {
  background: #e0f2fe;
}

/* =====================
   HORAS
===================== */
#roh-horas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

#roh-horas button {
  padding: 14px 10px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  font-weight: 500;
  transition: all .2s ease;
}

#roh-horas button:hover {
  border-color: #0ea5e9;
}

#roh-horas button.active {
  background: #0ea5e9;
  color: #fff;
  border-color: #0ea5e9;
}

#roh-horas button.disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

/* =====================
   RESUMEN
===================== */
.roh-summary h4 {
  margin-bottom: 12px;
  font-size: 16px;
}

.roh-summary p {
  font-size: 0.8em !important;
  color: #475569;
  margin-bottom: 6px;
}

.roh-summary .total {
  margin-top: 16px;
  font-size: 1em !important;
  font-weight: 700;
  color: #0ea5e9;
}

/* =====================
   BOTÓN PRINCIPAL
===================== */
#roh-pagar {
  margin-top: 24px;
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  background: #0ea5e9;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
}

#roh-pagar:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
}

#roh-pagar:hover:not(:disabled) {
  background: #0284c7;
}
.ui-datepicker td.disabled-day a {
  background: #f2f2f2 !important;
  color: #999 !important;
  pointer-events: none;
  border-radius: 6px;
}
/* =====================
   SELECT SALA DE REUNIONES
===================== */
#roh-reserva label[for="roh-sitio"] {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #334155;
}

#roh-sitio {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.2s ease;
}

#roh-sitio:hover {
  border-color: #0ea5e9;
}

#roh-sitio:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
}

/* Opciones del select */
#roh-sitio option {
  padding: 10px;
  font-size: 14px;
}

/* =====================
   REPOSICIONAMIENTO EN LA TARJETA
===================== */
#roh-reserva > label,
#roh-reserva > select {
  grid-column: 1 / -1; /* Ocupa toda la fila en el grid */
  width: 100%;
}

#roh-reserva select {
  margin-bottom: 16px;
}
/* =====================
   BOTÓN AGREGAR AL CARRITO
===================== */
#roh-agregar {
margin-top:5px;
  display: inline-block;
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: none;
  background: #22c55e; /* Azul principal */
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 5px 15px rgba(14, 165, 233, 0.3);
}

#roh-agregar:hover:not(:disabled) {
  background: #0284c7; /* Azul más oscuro al hover */
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.4);
}

#roh-agregar:disabled {
  background: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
  box-shadow: none;
}
/* Botón quitar con ícono de papelera */
.roh-quitar {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #ef4444; /* rojo suave */
}

.roh-quitar:hover {
  color: #b91c1c; /* rojo más intenso al hover */
  transform: scale(1.1);
}

.roh-quitar .icon-trash {
  width: 30px;
  height: 30px;
}

.roh-bono-info {
  margin: 8px 0;
  padding: 8px 10px;
  background: #f0f9f4;
  border-left: 4px solid #2ecc71;
  font-size: 14px;
}