/* Contenedor de contacto */
.page-content .contact-form {
    box-shadow: rgba(0, 0, 0, 0.17) 0 0 13px;
    border-radius: 25px;
}

/* Selects del formulario — evitar texto cortado, consistente con inputs */
.page-content:has(.contact-form) form .form-fields select.form-control-select,
.page-content:has(.contact-form) form .form-fields .form-group select {
    display: block;
    width: 100%;
    height: var(--btn-height);
    padding: 8px 20px;
    font-size: 13px;
    line-height: 1.42857;
    color: var(--color-gray-input);
    background-color: var(--color-gray-light-bg);
    border: none;
    border-radius: var(--input-radius);
    cursor: pointer;
}

/* Mensaje de informacion */
.page-content:has(.contact-form) form .form-fields .form-group .information-message {
    width: 100%;
}

/* Titulo de enviar mensaje */
.page-content:has(.contact-form) form .form-fields .form-group h3 {
    text-transform: uppercase;
    color: var(--color-pink);
    font-size: 24px;
    line-height: normal;
    margin-bottom: 12px;
    font-family: var(--font-brand);
    letter-spacing: 1px;
    clear: both;
    text-align: center;
}

/* Layout de columnas */
.page-content:has(.contact-form) form .form-fields .column-manager-contact {
    display: flex;
    flex-direction: row;
}

/* Columnas izquierda y derecha comparten estilos */
.page-content:has(.contact-form) form .form-fields .column-manager-contact .column-left-contact,
.page-content:has(.contact-form) form .form-fields .column-manager-contact .column-right-contact {
    padding: 1rem;
    width: 50%;
}

/* Form groups en ambas columnas */
.page-content:has(.contact-form) form .form-fields .column-manager-contact .column-left-contact .form-group,
.page-content:has(.contact-form) form .form-fields .column-manager-contact .column-right-contact .form-group {
    display: flex;
    flex-direction: column;
}

/* Labels del formulario */
.page-content:has(.contact-form) form .form-fields .column-manager-contact .column-left-contact .form-group label {
    width: 100%;
    text-align: left;
}

/* Contenedores de inputs */
.page-content:has(.contact-form) form .form-fields .column-manager-contact .column-left-contact .form-group div,
.page-content:has(.contact-form) form .form-fields .column-manager-contact .column-right-contact .form-group div:has(textarea) {
    width: 100%;
}

/* Textarea */
.page-content:has(.contact-form) form .form-fields .form-group textarea {
    height: 277px;
    display: block;
    width: 100%;
    padding: 10px 20px;
    font-size: 13px;
    line-height: 1.42857;
    color: var(--color-gray-input);
    vertical-align: middle;
    background-color: var(--color-gray-light-bg);
    border: none;
    border-radius: 25px;
    resize: none;
    overflow-y: auto;
}

/* Boton de envio */
.page-content:has(.contact-form) form .form-footer .btn-container-contact {
    margin-right: 0.8rem;
    text-align: center;
}

.page-content:has(.contact-form) form .form-footer .btn-container-contact .btn-wrapper {
    position: relative;
    display: inline-block;
}

.page-content:has(.contact-form) form .form-footer .btn-container-contact input {
    width: 130px;
}

.page-content:has(.contact-form) form .form-footer .btn-container-contact input:hover + i {
    color: var(--color-pink);
}

.page-content:has(.contact-form) form .form-footer .btn-container-contact i {
    position: absolute;
    right: 10px;
    top: 7px;
    color: var(--color-white);
}

/* ===== Condiciones de la tienda ===== */

.page-content:has(.contact-form) form #lopdParentCheck {
    width: 98%;
    margin: 1%;
    text-align: center;
}

.page-content:has(.contact-form) form #lopdParentCheck .form-check-label {
    padding-left: 1.25rem;
    margin-bottom: 0;
    cursor: pointer;
}

.page-content:has(.contact-form) form #lopdParentCheck .form-check-label label[for="acceptLopd"] {
    color: var(--color-gray-medium);
}

.page-content:has(.contact-form) form #lopdParentCheck .form-check-label label[for="acceptLopd"]:hover {
    cursor: pointer;
}

.page-content:has(.contact-form) form #lopdParentCheck .form-check-label label[for="acceptLopd"] i {
    color: red;
}

/* Texto legal */
.page-content:has(.contact-form) form .min-text-contact {
    font-family: var(--font-body);
    color: var(--color-gray-dark);
    padding: 1rem;
}

.page-content:has(.contact-form) form .min-text-contact p {
    font-family: var(--font-body);
    color: var(--color-gray-dark);
    margin: 0 0 9px;
    font-size: 13px;
}