@import 'index.css';


.index-page .header {
    --background-color: rgba(204, 204, 204, 0.116);
    --heading-color: #000000;
    --nav-color: rgba(0, 0, 0, 0.5);
    --nav-hover-color: #ff0000;
}

.php-email-form input[type=text],
.php-email-form input[type=password],
.php-email-form input[type=email],
.php-email-form input[type=date],
.php-email-form input[type=tel],
.php-email-form textarea,
.php-email-form select {
    font-size: 14px;
    padding: 10px 15px;
    box-shadow: none;
    border-radius: 0;
    color: var(--default-color);
    /* color: red; */
    background-color: color-mix(in srgb, var(--background-color), transparent 50%);
    border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.php-email-form input[type=text]:focus,
.php-email-form input[type=email]:focus,
.php-email-form input[type=date]:focus,
.php-email-form input[type=password]:focus,
.php-email-form input[type=tel]:focus,
.php-email-form textarea:focus,
.php-email-form select:focus {
    border-color: var(--accent-color);
}

.php-email-form input[type=text]::placeholder,
.php-email-form input[type=email]::placeholder,
.php-email-form input[type=date]::placeholder,
.php-email-form input[type=password]::placeholder,
.php-email-form input[type=tel]::placeholder,
.php-email-form textarea::placeholder,
.php-email-form select {
    color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.php-email-form button[type=submit] {
    background: var(--accent-color);
    color: var(--contrast-color);
    border: 0;
    padding: 10px 30px;
    transition: 0.4s;
    border-radius: 4px;
}

.php-email-form button[type=submit]:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.checkbox {
    display: flex;
    justify-content: center;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}


/* Ocultar el checkbox original */
.custom-checkbox {
    display: none;
}

/* Crear un nuevo checkbox personalizado */
.custom-checkbox+label {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: 16px;
}

/* Crear la "caja" del checkbox */
.custom-checkbox+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 25px;
    height: 25px;
    border: 2px solid #ddd;
    background: #fff;
}

/* Estilo cuando el checkbox está marcado */
.custom-checkbox:checked+label:after {
    content: '✅';
    position: absolute;
    left: -2px;
    top: -3px;
    /* background: var(--accent-color); */
    color: white;
    font-size: 20px;
}

/* a {
    color: royalblue !important;
    text-decoration: none;
    transition: 0.3s;
} */

#btn-talles {
    border: 0;
    padding: 10px 30px;
    transition: 0.4s;
    border-radius: 4px;
    background: var(--accent-color);
    color: var(--contrast-color);
    text-align: center;
}

.btn-modal-cancel {
    border: 0;
    padding: 10px 30px;
    transition: 0.4s;
    border-radius: 4px;
    background: rgb(147, 153, 147);
    color: black;
}

#btn-talles:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.btn-modal-cancel:hover {
    background: rgb(113, 114, 113);
}

.img-modal>img {
    width: 100%;
}

@media (width< 500px) {
    #btn-talles {
        padding: 10px 5px;
    }
}