/*
- Formulario contraentrega + Modal
- Boton Comprar (dentro del formulario)
- Boton Comprar (fuera del formulario)
 */

 /* 🟢🟢 Estilo formulario contra entrega 🟢🟢 */
/* fondo y borde del formulario */ 
.pedido-contraentrega{
    font-family: "Poppins", sans-serif;
    background:#f5f5f5; /* gris claro */
    border:1px solid #000; /* borde negro */
    padding:20px;
    padding-top: 60px;
    border-radius:6px;
    /* sombra suave */
    box-shadow:0 10px 25px rgba(0,0,0,0.35);
}

.pedido-contraentrega h3{
    line-height: 1.1;
}

/* Asteriscos de campos obligatorios en rojo */
.pedido-contraentrega label span{
    color:#e00000; /* rojo */
    font-weight:bold;
}

/*Label e input en bloque */
.pedido-contraentrega p label{
    display:block;      /* label ocupa toda la línea */
    margin-bottom:1px;  /* espacio entre label e input */
}

/* tamaño de label */
.pedido-contraentrega label{
    font-size: 16px;
    font-weight: 500;
}

/* Para Campos: input, textarea, select*/
.pedido-contraentrega input,
.pedido-contraentrega select,
.pedido-contraentrega textarea{
    width: 100%;
    border-radius: 8px;
    border: solid 1.5px gray;
}
.pedido-contraentrega select{
    height: 48px;
}
.pedido-contraentrega textarea{
    height: 48px;
    resize: none;
}

.texto2-form{
    text-align: center;
    color: purple;
    font-weight: 500;
}

/* 🔴🔴 Estilo formulario contra entrega 🔴🔴 */

/* 🟢🟢 Campo Telefono con +56 🟢🟢 */

/* contenedor */
.telefono-wrapper{
    position:relative;
    display:flex;
    align-items:center;
}

/* prefijo +56 */
.prefijo{
    position:absolute;
    left:12px;
    font-weight:600;
    color:#555;
}

/* input telefono */
.telefono-wrapper input{
    padding-left:45px !important;
}
/* 🔴🔴 Campo Telefono con +56 🔴🔴 */

/* 🟢🟢 Texto debajo del boton comprar 🟢🟢 */
.beneficios-compra{
    padding-top: 8px;
    text-align:center;
    font-size:16px;
    font-weight: bold;
    color:#555;
}

.beneficios-compra p{
    margin:3px 0;
}

.text_3{
    font-weight: bold;
}

/* 🔴🔴 Texto debajo del boton comprar 🔴🔴 */

/* 🟢🟢 boton comprar animado 🟢🟢 */
/* Definición del efecto elástico tipo Izakmi */
@keyframes mc-elastic-shake {
  0% { transform: scale(1); }
  10% { transform: scale(1.02) rotate(1deg) translateX(-1px); }
  20% { transform: scale(1.02) rotate(-1deg) translateX(1px); }
  30% { transform: scale(1.02) rotate(1deg) translateX(-1px); }
  40% { transform: scale(1.02) rotate(-1deg) translateX(1px); }
  50% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* La clase para tu botón */
.mc-buy-now-shake {
  /* display: inline-block !important; */
  transition: all 0.3s ease;
  /* El secreto es el timing: 1.5s para que no sea tan lento */
  animation: mc-elastic-shake 1.5s cubic-bezier(.36,.07,.19,.97) infinite;
  backface-visibility: hidden;
  transform-origin: center;
}

/* Efecto al pasar el mouse para que se sienta interactivo */
.mc-buy-now-shake:hover {
  transform: scale(1.05); /* Se agranda un poquito al poner el mouse */
  filter: brightness(1.1);
}

/* Estilo boton comprar */
.pedido-contraentrega button.alt{
    background: linear-gradient(180deg, #16b33d 0%, #129432 100%) !important;
    border: 1px black solid;
    color:#fff !important;
    font-weight:700;
    font-size:18px;
    padding:16px;
    border-radius:20px;
    /*border: black 1px solid;*/
    box-shadow:0 6px 15px rgba(0,0,0,0.35);
    display:block;          /* Hace que el botón se comporte como bloque */
    margin:20px auto;       /* Auto izquierda y derecha = centrado */
    text-align:center;      /* Centra el texto dentro del botón */
}
/* 🔴🔴 boton comprar animado 🔴🔴 */

/* 🟢🟢 Estilo Modal del Formulario 🟢🟢 */
.div1_modal_form{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
display:flex;
justify-content:center;
align-items:center;
z-index:999999;
opacity:0;
visibility:hidden;
transition:0.3s;
}

.div2_modal_form{
/* background:#cfcdcd; */
/* padding:20px; */
/* background:rgba(0,0,0,0.7); */

padding-top: 20px;
padding-bottom: 20px;
padding-left: 8px;
padding-right: 8px;
width:95%;
max-width:400px;
border-radius:10px;
position:relative;
max-height:90vh;      /* 🔥 límite altura */
overflow-y:auto;      /* 🔥 scroll interno */
}

.xc_boton_modal{
position:absolute;
top:28px;
right:15px;
cursor:pointer;
}

/* 🔴🔴 Estilo Modal del Formulario 🔴🔴 */

/* 🟢🟢 boton comprar ahora 🟢🟢 */
/* #btn-abrir-modal{
    background-color: #e00000;
} */

.btn_afuera{
    /* display: inline-block !important; */
  transition: all 0.3s ease;
  /* El secreto es el timing: 1.5s para que no sea tan lento */
  animation: mc-elastic-shake 1.5s cubic-bezier(.36,.07,.19,.97) infinite;
  backface-visibility: hidden;
  transform-origin: center;

    background: linear-gradient(180deg, #16b33d 0%, #129432 100%) !important;
    border: 1px black solid;
    color:#fff !important;
    font-family: "Poppins", sans-serif;
    font-weight:600;
    font-size:18px;
    padding:16px;
    border-radius:20px;
    /*border: black 1px solid;*/
    box-shadow:0 6px 15px rgba(0,0,0,0.35);
    display:block;          /* Hace que el botón se comporte como bloque */
    margin:20px auto;       /* Auto izquierda y derecha = centrado */
    text-align:center;      /* Centra el texto dentro del botón */
}
.btn_text_2{
    font-family: "Poppins", sans-serif;
    font-size: 15px;
}

.btn_afuera:hover{
    transform: scale(1.05); /* Se agranda un poquito al poner el mouse */
  filter: brightness(1.1);
}

/* 🔴🔴 boton comprar ahora 🔴🔴 */

/* 🟢🟢 Estilo para animacion de carga del boton 🟢🟢 */
/* Botón */
#btn-realizar-pedido{
    position: relative;
    overflow: hidden;
}

/* Texto */
.texto-btn{
    transition: opacity .2s ease;
    font-weight: 600;
    
}

/* Spinner */
.spinner-btn{
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 20px;
    height: 20px;

    border: 2px solid rgba(255,255,255,.3);
    border-top: 2px solid #fff;
    border-radius: 50%;

    opacity: 0;
    pointer-events: none;

    animation: girar .8s linear infinite;
    transition: opacity .2s ease;
}

/* Estado loading */
#btn-realizar-pedido.loading{
    pointer-events: none;
    opacity: .9;
}

#btn-realizar-pedido.loading .texto-btn{
    opacity: 0;
}

#btn-realizar-pedido.loading .spinner-btn{
    opacity: 1;
}

/* Animación */
@keyframes girar{
    100%{
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
/* 🔴🔴 Estilo para animacion de carga del boton 🔴🔴 */

/* 🟢🟢 boton sticky pegado abajo 🟢🟢 */
#sticky-comprar{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 9;
    transform: translateY(120%);
    transition: 0.3s;
}

#sticky-comprar.activo{
    transform: translateY(0);
}

#sticky-btn{
    font-family: "Poppins", sans-serif;
    font-weight:600;
    font-size: 18px;
    color:#fff !important;
    width: 90%;
    padding: 8px 14px 8px 14px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    background: linear-gradient(180deg, #16b33d 0%, #129432 100%) !important;
    border: 1px black solid;
}
/* 🔴🔴 boton sticky pegado abajo 🔴🔴 */