/* ========================================
   Ruta: wp-content/plugins/portalaseo-pedido/assets/css/
   Archivo: op-alfombras.css
   Versión: 1.9.0
======================================== */

:root{
    --pap-op-input-font-size:15px;
    --pap-op-medidas-font-size:22px;
    --pap-op-placeholder-font-size:15px;
    --pap-op-button-font-size:14px;
}

.pap-op-alfombras{
    width:100%;
    max-width:760px;
    min-height:100vh;
    margin:0 auto;
    padding:14px 14px 80px;
    box-sizing:border-box;
    background:#000;
    color:#fff;
    font-family:'Montserrat',sans-serif;
}


/* ========================================
   ENCABEZADO
======================================== */

.pap-op-header{
    margin-bottom:28px;
    text-align:center;
}

.pap-op-header h1{
    margin:0;
    color:#ffcc00;
    font-size:20px;
    font-weight:800;
}

.pap-op-volver{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:44px;
    margin-top:14px;
    padding:0 24px;
    background:#ffcc00;
    border:1px solid #D4AF37;
    border-radius:14px;
    color:#000;
    font-family:'Montserrat',sans-serif;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
}


/* ========================================
   SECCIONES
======================================== */

.pap-op-seccion{
    margin-bottom:22px;
}

.pap-op-seccion h2{
    margin:0 0 10px;
    color:#00ff66;
    font-size:14px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
}


/* ========================================
   CAMPOS
======================================== */

.pap-op-campo{
    min-width:0;
}


/* ========================================
   INPUTS
======================================== */

.pap-op-alfombras input,
.pap-op-alfombras textarea{
    box-sizing:border-box;
    font-family:'Montserrat',sans-serif;
    outline:none;
}

.pap-op-campo input,
#papCaracteristicas,
#papFechaEntrega{
    width:100%;
    background:#111;
    border:1px solid #222;
    border-radius:14px;
    color:#fff;
    font-size:var(--pap-op-input-font-size);
}

.pap-op-campo input{
    height:52px;
    padding:15px;
    text-align:center;
}

.pap-op-campo input:focus,
#papCaracteristicas:focus,
#papFechaEntrega:focus{
    border-color:#ffcc00;
}

.pap-op-campo input::placeholder,
#papCaracteristicas::placeholder{
    color:#757575;
    font-size:var(--pap-op-placeholder-font-size);
    text-align:center;
}


/* ========================================
   BOTONES DE SELECCION
======================================== */

.pap-op-grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.pap-op-grid-tipos{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
    gap:8px;
}

.pap-op-btn{
    width:100%;
    height:58px;
    min-height:58px;
    padding:8px;
    box-sizing:border-box;
    background:#1a1a1a;
    border:1px solid #222;
    border-radius:14px;
    color:#777;
    font-family:'Montserrat',sans-serif;
    font-size:var(--pap-op-button-font-size);
    font-weight:800;
    cursor:pointer;
    transition:all .2s;
}

.pap-op-btn:hover{
    background:#222;
    color:#fff;
}

.pap-op-btn.seleccionado{
    background:#ffcc00;
    border:2px solid #ffcc00;
    color:#000;
    box-shadow:0 0 14px rgba(255,204,0,.35);
}


/* ========================================
   MEDIDAS + CANTIDAD
======================================== */

.pap-op-fila-medidas-cantidad{
    display:grid;
    grid-template-columns:minmax(0,1fr) 180px;
    gap:12px;
    align-items:end;
    margin-bottom:22px;
}

.pap-op-fila-medidas-cantidad .pap-op-seccion{
    margin-bottom:0;
}


/* ========================================
   MEDIDAS
======================================== */

.pap-op-medidas{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:8px;
}

.pap-op-medidas .pap-op-campo{
    flex:1 1 0;
    min-width:0;
}

.pap-op-medidas input{
    width:100%;
    height:58px;
    padding:15px;
    background:#111;
    border:1px solid #222;
    border-radius:14px;
    color:#fff;
    text-align:center;
    font-size:var(--pap-op-medidas-font-size);
    font-weight:800;
}

.pap-op-medidas input:focus{
    border-color:#ffcc00;
}

.pap-op-medidas input::placeholder{
    color:#757575;
    font-size:var(--pap-op-placeholder-font-size);
    font-weight:400;
}

.pap-op-medidas-separador{
    flex:0 0 20px;
    color:#ffcc00;
    font-size:22px;
    font-weight:800;
    text-align:center;
}


/* ========================================
   CANTIDAD
======================================== */

.pap-op-cantidad{
    display:flex;
    width:100%;
    height:58px;
    overflow:hidden;
    border-radius:14px;
}

.pap-op-cantidad button{
    flex:0 0 52px;
    height:58px;
    padding:0;
    background:#FFD700;
    border:1px solid #D4AF37;
    color:#000;
    font-family:'Montserrat',sans-serif;
    font-size:28px;
    font-weight:bold;
    cursor:pointer;
}

.pap-op-cantidad button:hover{
    background:#ffcc00;
}

.pap-op-cantidad span{
    flex:1 1 auto;
    min-width:0;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#111;
    border-top:1px solid #222;
    border-bottom:1px solid #222;
    color:#fff;
    font-size:18px;
    font-weight:800;
}


/* ========================================
   TIPO DE PELO
======================================== */

.pap-op-grid-tipos .pap-op-btn{
    min-width:0;
    white-space:nowrap;
}


/* ========================================
   CARACTERISTICAS
======================================== */

#papCaracteristicas{
    min-height:90px;
    padding:15px;
    resize:none;
    line-height:1.4;
}

#papCaracteristicas::placeholder{
    text-align:left;
}


/* ========================================
   FECHA DE ENTREGA
======================================== */

#papFechaEntrega{
    height:58px;
    padding:15px;
    font-size:20px;
    color-scheme:dark;
    text-align:center;
}

#papFechaEntrega::-webkit-calendar-picker-indicator{
    opacity:1;
    cursor:pointer;
}


/* ========================================
   VISTA PREVIA
======================================== */

.pap-op-preview-seccion{
    margin-top:4px;
}

.pap-op-preview-seccion .pap-card-alfombra{
    margin:0;
    background:#111;
    border:1px solid #222;
    border-radius:18px;
    padding:18px;
}

.pap-preview-vacio{
    text-align:center;
    color:#777;
    padding:20px 10px;
    font-size:13px;
    font-style:italic;
}

.pap-preview{
    text-align:center;
}

.pap-preview-titulo{
    color:#fff;
    font-size:18px;
    font-weight:800;
    text-align:center;
    line-height:1.3;
}

.pap-preview-medidas{
    margin-top:8px;
    color:#ccc;
    font-size:14px;
    text-align:center;
    line-height:1.3;
}

.pap-preview-medidas span{
    margin:0 5px;
    color:#ffcc00;
}

.pap-preview-caracteristicas{
    margin-top:8px;
    color:#ccc;
    font-size:13px;
    line-height:1.4;
    text-align:center;
}

.pap-preview-entrega{
    margin-top:8px;
    color:#aaa;
    font-size:13px;
    line-height:1.3;
    text-align:center;
}

.pap-preview-total{
    margin:10px 0 12px;
    color:#ffcc00;
    font-size:32px;
    font-weight:800;
    line-height:1.2;
    text-align:center;
}

.pap-preview .pap-agregar{
    display:block;
    margin:0 auto;
    padding:13px 22px;
    background:#ffcc00;
    border:0;
    border-radius:12px;
    color:#000;
    font-family:'Montserrat',sans-serif;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
}


/* ========================================
   BOTON VOLVER INFERIOR
======================================== */

.pap-op-alfombras .pap-carro-footer{
    margin-top:10px;
    text-align:center;
}


/* ========================================
   INPUTS NUMERICOS
======================================== */

.pap-op-alfombras input[type=number]::-webkit-outer-spin-button,
.pap-op-alfombras input[type=number]::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

.pap-op-alfombras input[type=number]{
    -moz-appearance:textfield;
}


/* ========================================
   RESPONSIVE
======================================== */

@media(max-width:600px){

    .pap-op-campo input{
        padding:12px;
    }

    .pap-op-grid-tipos{
        grid-template-columns:repeat(auto-fit,minmax(80px,1fr));
    }

}

@media(max-width:480px){

    .pap-op-alfombras{
        padding:10px 10px 70px;
    }

    .pap-op-header{
        margin-bottom:22px;
    }

    .pap-op-header h1{
        font-size:19px;
    }

    .pap-op-seccion{
        margin-bottom:18px;
    }

    .pap-op-campo input{
        height:52px;
        padding:10px;
    }

    .pap-op-btn{
        height:54px;
        min-height:54px;
    }

    .pap-op-fila-medidas-cantidad{
        grid-template-columns:minmax(0,1fr) 125px;
        gap:7px;
        margin-bottom:18px;
    }

    .pap-op-medidas{
        gap:5px;
    }

    .pap-op-medidas input{
        height:54px;
        padding:10px 6px;
    }

    .pap-op-medidas-separador{
        flex:0 0 14px;
        font-size:20px;
    }

    .pap-op-cantidad{
        height:54px;
    }

    .pap-op-cantidad button{
        flex:0 0 36px;
        height:54px;
        font-size:20px;
    }

    .pap-op-cantidad span{
        height:54px;
        font-size:17px;
    }

    #papCaracteristicas{
        min-height:80px;
    }

    #papFechaEntrega{
        height:54px;
    }

}