/**
 * @fileoverview Multi-Step Form Component Styles
 * 
 * This file contains styles for multi-step forms, step navigation,
 * form validation states, and step progression indicators.
 * 
 * Key Features:
 * - Step navigation and progression
 * - Form validation states
 * - Step block visibility
 * - Form control styling
 */

/* Step Navigation Styles */
.control-bloque {
    cursor: pointer;
}

.scaem-active {
    /* Active step styling handled by theme */
}

.bloques {
    /* Step content blocks */
}

.bloque1,
.bloque2,
.bloque3 {
    /* Individual step blocks */
}

/* Step Progression Styles */
.scaem-pasos-compra {
    position: relative;
}

.scaem-pasos-compra:before {
    content: "";
    position: absolute;
    border-top: 2px solid #ddd;
    top: 19px;
}

.scaem-pasos-compra.paso-compra1:before {
    width: 40%;
    right: 0;
}

.scaem-pasos-compra.paso-compra2:before {
    width: 40%;
    left: 0;
}

.scaem-pasos-compra.paso-compra2:after {
    content: "";
    position: absolute;
    border-top: 2px solid #ddd;
    top: 19px;
    width: 40%;
    right: 0;
}

.scaem-pasos-compra.paso-compra3:before {
    width: 40%;
    left: 0;
}

.scaem-paso-compra {
    color: #999;
    width: 40px;
    height: 40px;
    display: inline-block;
    text-align: center;
    border-radius: 50px;
    border: 2px solid var(--secthemecolor);
    font: 700 15px/38px 'Poppins', sans-serif;
}

.scaem-pasos-compra h3 {
    text-align: center;
}

/* Step Validation States */
.control-bloque a {
    color: var(--secthemecolor) !important;
}

.control-bloque.valid a {
    color: #4CD03A !important;
    border-color: #4CD03A !important;
}

.control-bloque.scaem-active.valid a {
    color: #4CD03A;
    border-color: #4CD03A;
}

.control-bloque.valid:after,
.control-bloque.scaem-active:after {
    background-color: #4CD03A !important;
}

/* Form Layout Styles */
.row.bloques {
    margin-right: 0;
    margin-left: 0;
}

.row.bloques.bloque1 h3 {
    font-size: 26px;
}

/* Date Selection Styles */
select.select-fecha.form-control {
    height: 50px !important;
    padding-right: 2px !important;
    padding-left: 5px;
}

/* Mobile Responsive Styles */
@media (max-width: 600px) {

    .scaem-pasos-compra:before,
    .scaem-pasos-compra.paso-compra2:after {
        content: none;
    }

    .scaem-pasos-compra .scaem-feedbackholder {
        margin-top: 0px;
    }
}