/* =====================================================
   SELECTOR DE SABORES MENDOZINI
   PARTE 1
   Estructura general
=====================================================*/

.mss-contenedor{

    max-width:1100px;

    margin:40px auto;

    padding:0 20px;

    box-sizing:border-box;

}

.mss-contenedor h2{

    text-align:center;

    margin-bottom:30px;

    font-size:38px;

    font-weight:700;

}

.mss-card{

    background:#ffffff;

    border-radius:16px;

    padding:35px;

    margin-bottom:30px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.mss-card h3{

    margin-bottom:30px;

    font-size:30px;

}

.mss-campo{

    margin-bottom:25px;

}

.mss-campo label{

    display:block;

    font-weight:bold;

    margin-bottom:10px;

    font-size:18px;

}

.mss-campo input{

    width:100%;

    height:55px;

    padding:0 15px;

    border:1px solid #d9d9d9;

    border-radius:10px;

    font-size:17px;

    transition:.2s;

    box-sizing:border-box;

}

.mss-campo input:focus{

    border-color:#ff6b00;

    outline:none;

    box-shadow:0 0 0 3px rgba(255,107,0,.15);

}

/* ==============================================
   CONTADOR
==============================================*/

.mss-contador{

    position:sticky;

    top:15px;

    z-index:999;

    background:#111;

    color:#fff;

    border-radius:16px;

    padding:25px;

    text-align:center;

    margin-bottom:35px;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

}

.mss-contador h3{

    margin:0;

}

#mss_contador{

    display:block;

    margin-top:12px;

    font-size:40px;

    font-weight:700;

    color:#ff6b00;

}
/* =====================================================
   SELECTOR DE SABORES MENDOZINI
   PARTE 2
   Tarjetas de Pizzas
=====================================================*/

.mss-pizza{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    background:#ffffff;

    padding:30px;

    margin-bottom:20px;

    border-radius:16px;

    border:1px solid #ececec;

    box-shadow:0 6px 18px rgba(0,0,0,.06);

    transition:.25s;

}

.mss-pizza:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.mss-pizza-info{

    flex:1;

}

.mss-pizza-info h3{

    margin:0 0 15px;

    font-size:28px;

    font-weight:700;

    color:#222;

}

.mss-pizza-info p{

    margin:0;

    color:#666;

    line-height:1.9;

    font-size:17px;

}

/* ==========================================
   CONTROLES DE CANTIDAD
==========================================*/

.mss-cantidad{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    min-width:220px;

}

.mss-numero{

    width:55px;

    text-align:center;

    font-size:34px;

    font-weight:700;

    color:#222;

}

/* ==========================================
   BOTONES
==========================================*/

.mss-mas,
.mss-menos{

    width:56px;

    height:56px;

    border:none;

    border-radius:12px;

    background:#ff6b00;

    color:#ffffff;

    font-size:30px;

    font-weight:bold;

    cursor:pointer;

    transition:.20s;

}

.mss-mas:hover,
.mss-menos:hover{

    background:#e65f00;

    transform:scale(1.08);

}

.mss-mas:active,
.mss-menos:active{

    transform:scale(.96);

}
/* =====================================================
   SELECTOR DE SABORES MENDOZINI
   PARTE 3
   Responsive, animaciones y estados
=====================================================*/


/* ---------- ANIMACIONES ---------- */

.mss-pizza,
.mss-card,
.mss-contador{

    transition:all .25s ease;

}

.mss-pizza:hover{

    border-color:#ff6b00;

}


/* ---------- BOTONES DESHABILITADOS ---------- */

.mss-mas:disabled,
.mss-menos:disabled{

    opacity:.40;

    cursor:not-allowed;

    transform:none;

}


/* ---------- CONTADOR COMPLETO ---------- */

.mss-contador.completo{

    background:#1d6f42;

}

.mss-contador.completo #mss_contador{

    color:#ffffff;

}


/* ---------- CONTADOR INCOMPLETO ---------- */

.mss-contador.incompleto{

    background:#111111;

}


/* ---------- SCROLL SUAVE ---------- */

html{

    scroll-behavior:smooth;

}


/* ---------- RESPONSIVE ---------- */

@media(max-width:900px){

    .mss-pizza{

        flex-direction:column;

        align-items:flex-start;

    }

    .mss-cantidad{

        width:100%;

        justify-content:center;

        margin-top:20px;

    }

}


@media(max-width:600px){

    .mss-contenedor{

        padding:15px;

    }

    .mss-card{

        padding:20px;

    }

    .mss-contador{

        top:10px;

        padding:18px;

    }

    #mss_contador{

        font-size:34px;

    }

    .mss-pizza{

        padding:20px;

    }

    .mss-pizza-info h3{

        font-size:24px;

    }

    .mss-pizza-info p{

        font-size:16px;

    }

    .mss-mas,
    .mss-menos{

        width:52px;

        height:52px;

        font-size:28px;

    }

}


/* ---------- EFECTO FOCUS ---------- */

.mss-mas:focus,
.mss-menos:focus,
.mss-campo input:focus{

    outline:none;

}


/* ---------- SOMBRA GENERAL ---------- */

.mss-card,
.mss-pizza{

    box-shadow:0 6px 20px rgba(0,0,0,.08);

}


/* ---------- ESPACIO FINAL ---------- */

.mss-pizza:last-child{

    margin-bottom:40px;

}
/* =====================================================
   BOTÓN ENVIAR
=====================================================*/

.mss-enviar{

    text-align:center;

    margin:50px 0;

}

#mss_enviar{

    width:320px;

    max-width:100%;

    height:60px;

    border:none;

    border-radius:12px;

    background:#ff6b00;

    color:#fff;

    font-size:20px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

#mss_enviar:hover:not(:disabled){

    background:#e65f00;

}

#mss_enviar:disabled{

    background:#bdbdbd;

    cursor:not-allowed;

}

#mss_estado{

    margin-top:15px;

    color:#666;

    font-size:16px;

}