/* -------------------------------------------------
   Barra de pasos
------------------------------------------------- */
.my-msc-steps-list {
    display: flex;
    gap: 20px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.my-msc-steps-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.5;
}

.my-msc-steps-list li .step-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.my-msc-steps-list li.active,
.my-msc-steps-list li.done {
    opacity: 1;
}

.my-msc-steps-list li.active .step-number,
.my-msc-steps-list li.done .step-number {
    background: #48613a;
    border-color: #48613a;
    color: #fff;
}

/* -------------------------------------------------
   Tarjeta de contacto paso 1
------------------------------------------------- */
.msc-contact-card,
.msc-guest-intro {
    margin-bottom: 25px;
    padding: 20px;
    border-radius: 4px;
    background: #f7f7f7;
    border: 1px solid #e2e2e2;
}

.msc-contact-card h3,
.msc-guest-intro h3 {
    margin-top: 0;
}

.msc-address-summary {
    margin: 10px 0 5px;
    font-size: 14px;
}

.msc-help-text {
    font-size: 14px;
    color: #666;
}

/* -------------------------------------------------
   Navegación inferior
------------------------------------------------- */
.checkout-nav-wrapper {
    margin-top: 30px;
}

.checkout-nav {
    display: none;
}

.checkout-nav button {
    margin-right: 10px;
}

/* -------------------------------------------------
   Secciones por paso (columna izquierda)
------------------------------------------------- */
.msc-step-section {
    display: none;
}

#checkout-steps-wrapper[data-step="1"] .msc-step-1 {
    display: block;
}

#checkout-steps-wrapper[data-step="2"] .msc-step-2 {
    display: block;
}

#checkout-steps-wrapper[data-step="3"] .msc-step-3 {
    display: block;
}

/* -------------------------------------------------
   Pago: sólo visible en paso 3 (columna derecha)
------------------------------------------------- */
#checkout-steps-wrapper[data-step="1"] .order-payment,
#checkout-steps-wrapper[data-step="2"] .order-payment,
#checkout-steps-wrapper[data-step="1"] #payment,
#checkout-steps-wrapper[data-step="2"] #payment,
#checkout-steps-wrapper[data-step="1"] .ppc-button-wrapper,
#checkout-steps-wrapper[data-step="2"] .ppc-button-wrapper {
    display: none !important;
}

#checkout-steps-wrapper[data-step="3"] .order-payment,
#checkout-steps-wrapper[data-step="3"] #payment,
#checkout-steps-wrapper[data-step="3"] .ppc-button-wrapper {
    display: block;
}