/* modal-reserva.css — Modal de reserva y lista de modalidades.
   Compartido por la portada y por la ficha de actividad. */

.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.78);z-index:500;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.modal-box{background:#16213e;border:1px solid rgba(255,255,255,0.12);border-radius:20px;width:100%;max-width:820px;max-height:92vh;overflow-y:auto}
.modal-close-btn{position:sticky;top:0;z-index:10;display:flex;justify-content:flex-end;padding:14px 18px 0;background:#16213e}
.modal-close-btn button{background:rgba(255,255,255,0.1);border:none;color:#fff;width:34px;height:34px;border-radius:50%;font-size:1.2rem;cursor:pointer}
.modal-inner{padding:0 28px 32px}
.modal-step{font-family:var(--font-title);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--amber);margin-bottom:10px}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.subcat-option{border:1.5px solid rgba(255,255,255,0.12);border-radius:10px;margin-bottom:6px;transition:all .2s;background:transparent;overflow:hidden}
.subcat-option:hover,.subcat-option.selected{border-color:var(--amber);background:rgba(245,166,35,0.1)}
.subcat-main{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer}
.subcat-name{font-weight:600;font-size:.9rem;color:#fff;flex:1}
.subcat-precio{font-weight:800;color:var(--amber);font-size:.95rem;white-space:nowrap}
.subcat-toggle{background:none;border:none;color:rgba(255,255,255,0.5);font-size:.75rem;cursor:pointer;padding:0 14px 10px;margin-top:-4px;transition:color .2s}
.subcat-toggle:hover{color:var(--amber)}
.subcat-desc{font-size:.8rem;color:rgba(255,255,255,0.6);line-height:1.6;padding:0 14px 12px;white-space:pre-line}

/* ── Reglas que antes iban en atributos style= del HTML ── */
.modal-titulo {
  font-family: var(--font-title); font-size: 1.3rem; font-weight: 900; color: #fff;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}
.modal-subtitulo { color: rgba(255,255,255,0.45); font-size: .85rem; margin-bottom: 24px; }
.modal-placeholder { color: rgba(255,255,255,0.35); font-size: .85rem; margin: 0; }
.subcat-wrap { margin-bottom: 16px; }
.modal-calendario {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 14px;
}
.modal-fecha-elegida {
  margin-top: 10px; padding: 10px 14px;
  background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.3);
  border-radius: 8px; color: rgba(255,255,255,0.9); font-size: .85rem; font-weight: 600;
}
.precio-resumen {
  background: rgba(245,166,35,0.1); border: 1px solid rgba(245,166,35,0.25);
  border-radius: 10px; padding: 14px 16px;
}
.precio-por-persona { font-size: .82rem; color: rgba(255,255,255,0.7); margin-bottom: 4px; }
.precio-etiqueta {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--amber); margin-bottom: 2px;
}
.precio-total { font-size: 1.5rem; font-weight: 900; color: #fff; }
.precio-ahorro { font-size: .74rem; color: #4ade80; margin-top: 4px; }
.modal-acciones { margin-top: 20px; }
.acepta-condiciones {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  margin-bottom: 16px; padding: 14px 16px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
}
.acepta-condiciones input {
  margin-top: 3px; accent-color: #F5A623; flex-shrink: 0;
  width: 18px; height: 18px; cursor: pointer;
}
.acepta-condiciones > span { font-size: .82rem; color: rgba(255,255,255,0.8); line-height: 1.6; }
.acepta-condiciones a { color: #F5A623; text-decoration: underline; }
.stripe-wrap {
  margin-top: 18px; background: rgba(99,91,255,0.1);
  border: 1px solid rgba(99,91,255,0.3); border-radius: 12px; padding: 18px;
}
.stripe-titulo {
  font-family: var(--font-title); font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: #8b85ff; margin-bottom: 10px;
}
.stripe-element {
  background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 8px; padding: 12px;
}
.stripe-wrap .form-error { margin-top: 8px; }
.btn-stripe { margin-top: 12px; background: #635BFF; color: #fff; border-color: #635BFF; }