/**
 * Checkout flow wizard — Country selector + disabled cards + guest/login notice
 *
 * Partial extracted from theme-designer-public-checkout.css to keep the main
 * stylesheet under the 600-line architectural budget defined in AGENTS.md.
 *
 * @package KUADThemeDesigner
 */

/* I1: visually disable shipping cards whose rate cannot be computed (OCA/CA
   missing product dimensions, carriers off, etc.). Keep the text legible so
   the customer understands why the option is unavailable. */
.kuad-shipping-option-card.is-disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background: #F4F4F6;
    border-color: #E2E8F0;
}
.kuad-shipping-option-card.is-disabled:hover {
    border-color: #E2E8F0;
}
.kuad-shipping-option-card.is-disabled input[type="radio"] {
    cursor: not-allowed;
    accent-color: #B55C80;
}
.kuad-shipping-option-card.is-disabled .shipping-desc {
    color: #B55C80;
    font-weight: 600;
}
.kuad-shipping-option-card.is-disabled .shipping-price {
    color: #B55C80;
}

/* I2: visual compensation when the 5-step bar drops step 3 (no envíos). */
.kuad-checkout-step-tab.kuad-step-shifted .step-num,
.kuad-checkout-steps-bar[data-has-shipping-step="0"] .kuad-checkout-step-tab[data-step="4"] .step-num,
.kuad-checkout-steps-bar[data-has-shipping-step="0"] .kuad-checkout-step-tab[data-step="5"] .step-num {
    background: linear-gradient(135deg, #2A1B4A 0%, #403A60 100%);
}

/* I4: emphasis on the country selector field so it reads as primary input. */
#kuad_billing_country.kuad-input-field {
    font-weight: 600;
    background-color: #FFFFFF;
}

/* I5: notice boxes rendered below the contact form. */
.kuad-checkout-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 14px;
    margin: 18px 0 8px 0;
    line-height: 1.45;
}
.kuad-checkout-notice .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.kuad-checkout-notice p {
    margin: 0;
    font-size: 14px;
    color: #333333;
    flex: 1;
}
.kuad-checkout-guest-notice {
    background: rgba(27, 165, 157, 0.06);
    border: 1.5px solid rgba(27, 165, 157, 0.35);
}
.kuad-checkout-guest-notice .dashicons {
    color: #1BA59D;
}
.kuad-checkout-login-notice {
    background: rgba(181, 92, 128, 0.08);
    border: 1.5px solid rgba(181, 92, 128, 0.35);
    flex-wrap: wrap;
}
.kuad-checkout-login-notice .dashicons {
    color: #B55C80;
}
.kuad-checkout-login-notice a.ks-global-inputs-system-button {
    margin-left: auto;
}
.kuad-checkout-login-notice .kuad-login-help-msg {
    display: block;
    width: 100%;
    color: #B55C80;
    font-size: 13px;
    margin-top: 4px;
    flex-basis: 100%;
}
.kuad-checkout-login-notice.kuad-login-highlight {
    border-color: #B55C80 !important;
    background: rgba(181, 92, 128, 0.18) !important;
}

/* Empty shipping list message. */
.kuad-shipping-empty-msg {
    padding: 18px 16px;
    border-radius: 12px;
    background: #F4F4F6;
    text-align: center;
}
.kuad-shipping-empty-msg p {
    color: #333333;
    font-size: 14px;
    margin: 0;
}

/* P-next: subtle pulse to draw attention to the "Calcular Costo de Envío"
   button when the user tries to advance without calculating first. Uses the
   brand accent color (#C05A86) — kept short and non-ornamental per AGENTS.md. */
@keyframes ksAttentionPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 90, 134, 0.55); }
    50% { box-shadow: 0 0 0 10px rgba(192, 90, 134, 0); }
}
.ks-attention-pulse {
    animation: ksAttentionPulse 0.6s ease-out 2;
    border-color: #C05A86 !important;
}

/* ====================================================
   Gateway nested fields (Kripton redes, DLocal cards, etc.)
   ==================================================== */

.kuad-gateway-fields-container {
    margin: 12px 0 8px 0;
    padding: 16px 20px;
    background: #F6F7FA;
    border-radius: 14px;
    border: 1.5px solid #E2E8F0;
}

.kuad-gateway-fields-container .wc-bacs-form {
    margin-top: 6px;
}

/* Preserve WC gateway form styling inside our NEUMorphic wrapper */
.kuad-gateway-fields-container code,
.kuad-gateway-fields-container pre {
    background: #EDE9FE;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 13px;
}

/* ====================================================
   In-flow notification system (replaces native alert())
   ==================================================== */

.kuad-notif-bar {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 14px;
    margin: 18px 0 10px 0;
    font-size: 14px;
    line-height: 1.5;
    animation: kuadNotifFadeIn .25s ease-out both;
}

.kuad-notif-bar.kuad-notif-error {
    background: rgba(229, 62, 62, 0.06);
    border: 1.5px solid rgba(229, 62, 62, 0.3);
    color: #c53030;
}

.kuad-notif-bar.kuad-notif-warning {
    background: rgba(237, 137, 54, 0.06);
    border: 1.5px solid rgba(237, 137, 54, 0.3);
    color: #9c4221;
}

.kuad-notif-bar.kuad-notif-success {
    background: rgba(56, 161, 105, 0.06);
    border: 1.5px solid rgba(56, 161, 105, 0.3);
    color: #276749;
}

.kuad-notif-bar .notif-icon {
    font-size: 24px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 1px;
}

.kuad-notif-bar.kuad-notif-error .notif-icon { color: #e53e3e; }
.kuad-notif-bar.kuad-notif-warning .notif-icon { color: #ed8936; }
.kuad-notif-bar.kuad-notif-success .notif-icon { color: #38a169; }

.kuad-notif-bar .notif-body {
    flex: 1;
}

.kuad-notif-bar .notif-title {
    font-weight: 700;
    margin: 0 0 2px 0;
    font-size: 14px;
}

.kuad-notif-bar .notif-text {
    margin: 0;
    font-size: 13px;
    opacity: 0.88;
}

.kuad-notif-bar .notif-close {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    font-size: 20px;
    padding: 0 4px;
    flex-shrink: 0;
    transition: opacity .15s;
}

.kuad-notif-bar .notif-close:hover { opacity: 1; }

@keyframes kuadNotifFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Empty-cart state helpers for Step 1.
    The base `.kuad-checkout-step-actions` rule (theme-designer-public-checkout.css)
    declares `display: flex !important;` so a plain `.hide()` from jQuery cannot
    override it. We toggle this modifier class instead so the JS remains
    declarative and the CSS keeps all visibility rules in one place. This
    avoids listing these extras inside the empty-cart markup, keeping the
    empty state visually clean (just the message + the shop/home CTAs). */
.kuad-step-extras-when-empty {
    display: none !important;
}