:root{
  --mkz:#76236c;
}

.mkz-no-scroll{ overflow:hidden; }

/* TOPBAR */
#mkz-topbar{
  position:sticky;
  top:0;
  z-index:99990;
  width:100%;
  background:var(--mkz);
  color:#fff;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  display:flex;              /* ← AGREGAR */
  justify-content:center;    /* ← AGREGAR */
}

.mkz-topbar-inner{
  width:100%;                /* ← CAMBIAR (antes max-width) */
  max-width:1200px;
  margin:0 auto;
  padding:10px 14px;

  font-size:14px;
  line-height:1.25;

  text-align:center;         /* ← mantener */
}

#mkz-topbar-text{
  display:block;             /* ← AGREGAR */
  width:100%;                /* ← AGREGAR */
  text-align:center;
}

/* Overlay */
#mkz-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  z-index:99998;
}

/* Wizard */
#mkz-wizard{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:420px;
  max-width:92%;
  background:#fff;
  border-radius:14px;
  padding:26px;
  box-shadow:0 20px 45px rgba(0,0,0,.25);
  z-index:99999;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
#mkz-wizard h2{
  margin:0 0 6px 0;
  color:var(--mkz);
  font-size:26px;
}
#mkz-wizard p{
  margin:0 0 16px 0;
  color:#666;
}
#mkz-wizard input, #mkz-wizard select{
  width:100%;
  padding:12px 12px;
  border-radius:10px;
  border:1px solid #ddd;
  font-size:16px;
  outline:none;
}
#mkz-wizard input:focus, #mkz-wizard select:focus{
  border-color:var(--mkz);
  box-shadow:0 0 0 3px rgba(118,35,108,.15);
}

#mkz-wizard button:not(.mkz-close){
width:100%;
margin-top:12px;
padding:12px 14px;
border:none;
border-radius:10px;
background:var(--mkz);
color:#fff;
font-weight:700;
cursor:pointer;
transition:.2s;
font-size:16px;
}
#mkz-wizard button:hover{
  filter:brightness(.92);
  transform:translateY(-1px);
}
#mkz-back{
  display:inline-block;
  margin-top:10px;
  color:#777;
  text-decoration:none;
}
#mkz-error{
  margin-top:10px;
  color:#b91c1c;
  font-weight:600;
}

.mkz-step{ display:none; }
.mkz-step.active{ display:block; }

.mkz-close{

position:absolute;

top:14px;
right:16px;

color:#76236c;

font-weight:600;

font-size:14px;

cursor:pointer;

z-index:99999;

padding:4px 6px;

background:none;

border:none;

}

.mkz-close:hover{
background:rgba(118,35,108,.1);
}

/* Detect modal */
#mkz-detect-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mkz-detect-box{
  width:440px;
  max-width:92%;
  background:#fff;
  border-radius:16px;
  padding:26px;
  text-align:center;
  box-shadow:0 20px 45px rgba(0,0,0,.28);
  position:relative;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.mkz-detect-icon{
  font-size:44px;
  margin-bottom:8px;
}
.mkz-detect-text{
  color:#333;
  font-size:16px;
  line-height:1.35;
  margin-bottom:18px;
}
.mkz-detect-actions button{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  font-weight:700;
  font-size:16px;
}
#mkz-detect-ok{
  background:var(--mkz);
  color:#fff;
}
#mkz-detect-change{
  background:#f2f2f2;
  color:#222;
  margin-top:10px;
}
#mkz-detect-change:hover{
  background:#e9e9e9;
}
.mkz-detect-close{
  position:absolute;
  top:10px;
  right:12px;
  width:36px;
  height:36px;
  border:none;
  border-radius:10px;
  background:rgba(0,0,0,.06);
  color:var(--mkz);
  font-size:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mkz-detect-close:hover{
  background:rgba(118,35,108,.12);
  transform:scale(1.05);
}

/* FORZAR estilo correcto del botón cerrar */
#mkz-wizard .mkz-close{
position:absolute !important;
top:12px !important;
right:14px !important;
width:auto !important;
height:auto !important;
background:transparent !important;
color:#76236c !important;
border:none !important;
padding:6px 10px !important;
font-size:14px !important;
font-weight:600 !important;
cursor:pointer !important;
border-radius:6px !important;
box-shadow:none !important;
display:inline-block !important;
}

/* HEADER REAL DEL MODAL */

.mkz-header{

display:flex;
justify-content:space-between;
align-items:center;

margin:-26px -26px 18px -26px;

padding:14px 18px;

background:#fff;

border-bottom:1px solid #eee;

border-radius:14px 14px 0 0;

}

.mkz-title{

font-weight:700;
color:#76236c;
font-size:16px;

}

.mkz-close{

position:static !important;

background:none !important;

color:#76236c !important;

padding:6px 10px !important;

font-size:14px !important;

border-radius:6px;

}

.mkz-close:hover{

background:rgba(118,35,108,.1);

}

/* ===== FIX DEFINITIVO CENTRADO TOPBAR (anti-tema) ===== */
#mkz-topbar{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
}

#mkz-topbar .mkz-topbar-inner{
  width:100% !important;
  max-width:1200px !important;
  margin:0 auto !important;
  padding:10px 14px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

#mkz-topbar #mkz-topbar-text{
  width:100% !important;
  display:block !important;
  text-align:center !important;
  margin:0 auto !important;
}

/* ===== TOPBAR FULL-BLEED (aunque esté dentro de un container del tema) ===== */
#mkz-topbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100vw !important;
  margin:0 !important;

  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
}

/* el contenedor interno se centra */
#mkz-topbar .mkz-topbar-inner{
  width:100% !important;
  max-width:1200px !important;
  margin:0 auto !important;
  padding:10px 14px !important;

  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

#mkz-topbar #mkz-topbar-text{
  width:100% !important;
  display:block !important;
  text-align:center !important;
}