.m2c-wrap{border:1px solid #e5e5e5;padding:14px;border-radius:10px;margin:14px 0;font-size:14px}
.m2c-row{display:flex;gap:10px;align-items:center;margin:6px 0 10px}
.m2c-input-stepper{display:flex;align-items:center;border:1px solid #ddd;border-radius:8px;overflow:hidden}
.m2c-input-stepper input{width:90px;padding:0px;border:0;text-align:center}
.m2c-input-stepper button{width:36px;height:36px;border:0;background:#f5f5f5;cursor:pointer}
.m2c-equivalence{margin:6px 0}
.m2c-extra{display:block;margin:8px 0}
.m2c-total{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eee;padding-top:8px;font-size:18px}
.m2c-price{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-weight:600}
.m2c-price .m2c-sep{opacity:.5}
.button.button.m2c-open{
    background: #B8CB4C;
    color: white; 
    transition: all 0.5;
}
.button.button.m2c-open:hover{
    background: #405060;
    color: white; 

}
.m2c-input-stepper button {
    color: #000;
     width: auto;
  height: auto;
    background: #f5f5f5;
    cursor: pointer;
    padding: 5px 15px;
}
.button.m2c-plus{
     color: #000;
         width: auto;
  height: auto;
    border: 0;
    background: #f5f5f5;
    cursor: pointer;
    padding: 5px 15px;
}

/* Modal */
.m2c-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:9999}
.m2c-modal[hidden]{display:none !important;} /* <- fix clave */
.m2c-dialog{background:#fff;border-radius:12px;padding:18px;max-width:520px;width:92%;position:relative}
.m2c-dialog h3{margin-top:0}
.m2c-fields{display:flex;align-items:center;gap:8px;margin:10px 0}
.m2c-fields input{width:120px}
.m2c-close{position:absolute;right:20px;background:transparent;border:0;font-size:30px !important;cursor:pointer; color: #000; padding: 0; }
.m2c-close:hover{background: transparent; color: #405060}
.m2c-dialog input[type=number]::-webkit-outer-spin-button,
.m2c-dialog input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
.m2c-dialog input[type=number] {
  -moz-appearance: textfield;
}
/* Oculto cuando [hidden] */
.m2c-modal[hidden]{display:none !important;}
/* Backdrop y layout a la derecha */
.m2c-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; justify-content:flex-end; align-items:stretch; z-index:9999;
}
/* Drawer */
.m2c-drawer{
  background:#fff; width:min(520px,92vw); height:100vh; overflow:auto;
  border-radius:0; box-shadow:-20px 0 40px rgba(0,0,0,.2);
  padding:22px 20px; position:relative;
}
.m2c-drawer h3{margin:0 0 12px 0; font-size:22px;}

/* Steps/textos */
.m2c-step + .m2c-step{margin-top:14px}
.m2c-step-title{font-weight:700; font-size:12px; letter-spacing:.08em; color:#555; margin:6px 0}
.m2c-note{font-size:13px; color:#666; border-top:1px solid #eee; padding-top:12px; margin-top:12px}
.m2c-example{margin-top:10px; font-size:13px}
.m2c-example-title{font-weight:700; margin-bottom:6px}
.m2c-example ul{list-style:none; padding-left:0; margin:0}

/* Inputs del modal */
.m2c-fields{display:flex; align-items:center; gap:8px; margin:10px 0}
.m2c-fields input{width:130px}
.m2c-dialog input[type=number]::-webkit-outer-spin-button,
.m2c-dialog input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.m2c-dialog input[type=number]{-moz-appearance:textfield}
.m2c-dialog.m2c-drawer {
    padding: 0;
}
.m2c-modal h3{
    background: #B8CB4C;
    color: white; 
    text-align: center;
    padding: 10px; 
    font-weight: 700;
}

button.button.m2c-apply{
        background: #B8CB4C !important;
    color: white !important;
     transition: all 0.5;

}
    button.button.m2c-apply:hover{
            background: #405060 !important;
    color: white !important;
    }

.pad{
    padding: 15px; 
}