/* Overlay */
#oo-terms-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}

/* Modal shell */
#oo-terms-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(.98);
  width: min(960px, 92vw);
  height: min(80vh, 820px);
  background: #fff;
  z-index: 9999;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Visible states */
#oo-terms-overlay.oo-open { opacity: 1; visibility: visible; }
#oo-terms-modal.oo-open { opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); }

/* Header */
#oo-terms-modal .oo-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid #eee;
}
#oo-terms-modal .oo-title{ font-size:16px; font-weight:600; margin:0; }
#oo-terms-modal .oo-close{
  border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer;
}

/* Body */
#oo-terms-modal .oo-body{ flex:1; }
#oo-terms-iframe{ border:0; width:100%; height:100%; display:block; }

/* Small screens */
@media (max-width: 480px){
  #oo-terms-modal{ width: 96vw; height: 86vh; border-radius: 8px; }
}

/* ========= OlivaOliva – Ajuste definitivo pop-up Términos ========= */

/* SCOPE amplio para que aplique seguro */
#oo-terms-modal,
.oo-terms-modal { /* nada */ }

/* Tamaño/posición del diálogo */
#oo-terms-modal .modal-dialog,
.oo-terms-modal .modal-dialog{
  width: min(920px, 92vw);
  margin: 7vh auto;                 /* menos alto visual */
}

#oo-terms-modal .modal-content,
.oo-terms-modal .modal-content{
  border-radius:12px;
  overflow:hidden;
}

/* Altura del cuerpo con scroll interno (más bajo) */
#oo-terms-modal .modal-body,
.oo-terms-modal .modal-body{
  max-height:58vh;                  /* <-- antes era muy alto */
  overflow:auto;
  padding:18px 20px;
  background:#fff;
}

/* Ver la página de fondo (backdrop translúcido) */
.modal-backdrop.show{
  background:rgba(0,0,0,.35) !important;
}

/* ---- Forzar 1 sola columna (Elementor) ---- */
#oo-terms-modal .elementor .elementor-row,
.oo-terms-modal .elementor .elementor-row{
  display:block !important;
}
#oo-terms-modal .elementor [class*="elementor-col-"],
.oo-terms-modal .elementor [class*="elementor-col-"]{
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
}
#oo-terms-modal .elementor .elementor-widget-container,
.oo-terms-modal .elementor .elementor-widget-container{
  padding:10px 0 !important;
}

/* ---- Títulos más pequeños para que no invadan el texto ---- */
#oo-terms-modal h1,
.oo-terms-modal h1{ font-size:1.20rem !important; line-height:1.30 !important; margin:14px 0 8px !important; }
#oo-terms-modal h2,
.oo-terms-modal h2,
#oo-terms-modal .elementor .elementor-heading-title,
.oo-terms-modal .elementor .elementor-heading-title{
  font-size:1.05rem !important;     /* tamaño contenido */
  line-height:1.30 !important;
  margin:12px 0 6px !important;
  font-weight:600 !important;
}
#oo-terms-modal h3,
.oo-terms-modal h3{ font-size:1.0rem !important; line-height:1.28 !important; margin:10px 0 4px !important; }

/* Párrafos legibles */
#oo-terms-modal p,
.oo-terms-modal p{ margin:8px 0; line-height:1.55; }

/* Divisores de Elementor más discretos */
#oo-terms-modal .elementor-divider,
.oo-terms-modal .elementor-divider{ padding:8px 0 !important; }
#oo-terms-modal .elementor-divider-separator,
.oo-terms-modal .elementor-divider-separator{
  width:100%; border-top:1px solid #ddd;
}

/* Móvil aún más compacto */
@media (max-width:576px){
  #oo-terms-modal .modal-body,
  .oo-terms-modal .modal-body{ max-height:55vh; }
  #oo-terms-modal h1, .oo-terms-modal h1{ font-size:1.15rem !important; }
  #oo-terms-modal h2, .oo-terms-modal h2,
  #oo-terms-modal .elementor .elementor-heading-title,
  .oo-terms-modal .elementor .elementor-heading-title{ font-size:1.0rem !important; }
  #oo-terms-modal h3, .oo-terms-modal h3{ font-size:.95rem !important; }
}

/* ====== Ajuste visual del modal de Términos ====== */

/* Un poco menos de “aire” dentro del modal */
#checkout .modal .modal-body.modal-terms{
  padding:16px 24px;
  max-height:60vh;                 /* algo más compacto */
  overflow:auto;
}

/* Titulares: más legibles pero sin invadir la columna derecha */
#checkout .modal .modal-body.modal-terms h1{
  font-size:1.25rem !important;
  line-height:1.28 !important;
  margin:8px 0 6px !important;
  font-weight:700 !important;
}
#checkout .modal .modal-body.modal-terms h2,
#checkout .modal .modal-body.modal-terms .elementor .elementor-heading-title{
  font-size:1.12rem !important;
  line-height:1.28 !important;
  margin:10px 0 4px !important;
  font-weight:700 !important;
}
#checkout .modal .modal-body.modal-terms h3{
  font-size:1.00rem !important;
  line-height:1.26 !important;
  margin:8px 0 4px !important;
  font-weight:600 !important;
}

/* Párrafos más apretados */
#checkout .modal .modal-body.modal-terms p{
  margin:6px 0;
  line-height:1.5;
}

/* Divisores más discretos y con menos padding */
#checkout .modal .modal-body.modal-terms .elementor-divider{
  padding:6px 0 !important;
}
#checkout .modal .modal-body.modal-terms .elementor-divider-separator{
  border-top:1px solid #eee !important;
}

/* Quita márgenes/padding extra de Elementor entre widgets */
#checkout .modal .modal-body.modal-terms .elementor .elementor-widget{
  margin:0 !important;
}
#checkout .modal .modal-body.modal-terms .elementor .elementor-column > .elementor-column-wrap > .elementor-widget-wrap{
  padding:0 !important;
}

/* Evita huecos arriba/abajo del primer y último bloque */
#checkout .modal .modal-body.modal-terms .oo-cms-inner > *:first-child{ margin-top:0 !important; }
#checkout .modal .modal-body.modal-terms .oo-cms-inner > *:last-child{  margin-bottom:0 !important; }

/* Desktop: un pelín más estrecho para respiración */
@media (min-width:992px){
  #checkout .modal .modal-dialog{ max-width:860px; }
}

/* Móvil: tamaños un poco menores para encaje perfecto */
@media (max-width:576px){
  #checkout .modal .modal-body.modal-terms h1{ font-size:1.18rem !important; }
  #checkout .modal .modal-body.modal-terms h2,
  #checkout .modal .modal-body.modal-terms .elementor .elementor-heading-title{ font-size:1.04rem !important; }
}