/**
 * Neumorphic Soft UI & Mobile-First Touch UI Styles for 5-Step Checkout Flow Block
 *
 * @package KUADThemeDesigner
 */

.kuad-checkout-flow-wrapper {
    max-width: 860px;
    margin: 0 auto 40px auto;
    padding: 32px 28px;
    background: var(--ks-card-bg, #ffffff);
    border-radius: var(--ks-card-radius, 20px);
    box-shadow: var(--ks-card-shadow, 0 10px 30px rgba(var(--ks-primary-rgb, 45, 26, 104), 0.06), 0 2px 8px rgba(0,0,0,0.03));
    border: var(--ks-neumorphic-border, 1px solid rgba(var(--ks-primary-rgb, 45, 26, 104), 0.08));
    font-family: var(--ks-body-font, 'Poppins', sans-serif);
    color: var(--ks-text-color, #333333);
    box-sizing: border-box;
}

/* 5-Steps Bar */
.kuad-checkout-steps-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    border-bottom: 2px solid var(--ks-block-bg-alt, #F5F6FA);
    padding-bottom: 18px;
    gap: 8px;
}

.kuad-checkout-step-tab {
    display: flex; align-items: center; gap: 8px; opacity: 0.55;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; user-select: none;
}
.kuad-checkout-step-tab[data-step="5"]:not(.active) { cursor: not-allowed; opacity: 0.3; }
.kuad-checkout-step-tab:hover { opacity: 0.9; }
.kuad-checkout-step-tab.active { opacity: 1; }

.kuad-checkout-step-tab .step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ks-button-bg-color, var(--ks-primary-color, #403A60));
    color: var(--ks-button-text-color, #ffffff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    font-family: var(--ks-heading-font, inherit);
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.kuad-checkout-step-tab.active .step-num {
    background: var(--ks-accent-color, #1BA59D) !important;
    color: var(--ks-on-accent-text, #ffffff) !important;
    box-shadow: 0 4px 14px rgba(var(--ks-accent-rgb, 27, 165, 157), 0.35);
}

.kuad-checkout-step-tab .step-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--ks-heading-color, var(--ks-primary-color, #2D1A68));
    font-family: var(--ks-heading-font, inherit);
}

/* Step Content Titles & Microcopy */
.kuad-checkout-wizard-body .step-header { margin-bottom: 24px; }
.kuad-checkout-wizard-body .step-title {
    font-size: var(--ks-font-size-h2, 1.35rem);
    color: var(--ks-heading-color, var(--ks-primary-color, #2D1A68));
    margin: 0 0 6px 0;
    font-weight: 700;
    font-family: var(--ks-heading-font, inherit);
}
.kuad-checkout-wizard-body .help-text {
    font-size: var(--ks-font-size-small, 0.88rem);
    color: var(--ks-text-muted, #666666);
    margin: 0;
    line-height: 1.4;
}
.sub-step-title {
    font-size: var(--ks-font-size-h3, 1rem);
    font-weight: 700;
    color: var(--ks-heading-color, var(--ks-primary-color, #2D1A68));
    margin: 18px 0 12px 0;
    font-family: var(--ks-heading-font, inherit);
}

/* Cart Items Rows & Quantity Controls */
.kuad-checkout-cart-items-list { margin-bottom: 20px; }
.kuad-checkout-cart-item-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ks-block-bg-alt, rgba(var(--ks-primary-rgb, 45, 26, 104), 0.08));
}
.kuad-checkout-cart-item-row .item-thumb img {
    width: 64px;
    height: 64px;
    border-radius: var(--ks-input-radius, 14px);
    object-fit: cover;
    background: var(--ks-block-bg-alt, #f8f9fc);
}
.kuad-checkout-cart-item-row .item-details { flex: 1; }
.kuad-checkout-cart-item-row .item-name {
    margin: 0 0 4px 0;
    font-size: 15px;
    color: var(--ks-heading-color, var(--ks-primary-color, #2D1A68));
    font-weight: 600;
    font-family: var(--ks-heading-font, inherit);
}
.kuad-checkout-cart-item-row .item-meta {
    font-size: 13px;
    color: var(--ks-text-muted, #666666);
    margin: 2px 0 6px 0;
}
.kuad-checkout-cart-item-row .item-meta p,
.kuad-checkout-cart-item-row .item-meta ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.35;
}
.kuad-checkout-cart-item-row .item-price {
    font-weight: 700;
    color: var(--ks-accent-color, #1BA59D);
    font-size: 1.05rem;
}
.kuad-checkout-cart-item-row .item-qty-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.item-qty-controls .btn-qty-minus,
.item-qty-controls .btn-qty-plus {
    width: 36px;
    height: 36px;
    border-radius: var(--ks-input-radius, 10px);
    border: 1px solid rgba(var(--ks-primary-rgb, 45, 26, 104), 0.15);
    background: var(--ks-block-bg-alt, #F8FAFC);
    color: var(--ks-primary-color, #2D1A68);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.item-qty-controls .btn-qty-minus:hover,
.item-qty-controls .btn-qty-plus:hover {
    background: var(--ks-primary-color, #2D1A68);
    color: var(--ks-on-primary-text, #ffffff);
    border-color: var(--ks-primary-color, #2D1A68);
}
.item-qty-controls .qty-val {
    font-weight: 700;
    font-size: 14px;
    min-width: 24px;
    text-align: center;
    color: var(--ks-text-color, #333333);
}
.item-qty-controls .btn-remove-item {
    background: transparent;
    border: none;
    color: var(--ks-secondary-color, #C05A86);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s ease;
}
.item-qty-controls .btn-remove-item:hover {
    color: var(--ks-button-remove-bg-color, #e53e3e);
}

/* Coupon Box */
.kuad-checkout-coupon-box {
    display: flex;
    gap: 12px;
    margin: 20px 0 15px 0;
}
.kuad-checkout-coupon-box input { flex: 1; }
#kuad-checkout-coupon-msg p { font-size: 0.85rem; margin: 4px 0 16px 0; }
.coupon-success-text { color: #2e7d32; font-weight: 600; }
.coupon-error-text { color: #d32f2f; font-weight: 600; }

/* Totals Breakdown Summary */
.kuad-checkout-totals-summary {
    margin: 24px 0;
    padding: 20px 24px;
    background: var(--ks-block-bg-alt, #F8FAFC);
    border-radius: var(--ks-card-radius, 16px);
    border: 1px solid rgba(var(--ks-primary-rgb, 45, 26, 104), 0.1);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kuad-checkout-totals-summary .subtotal-row,
.kuad-checkout-totals-summary .discount-row,
.kuad-checkout-totals-summary .total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: var(--ks-text-color, #333333);
}
.kuad-checkout-totals-summary .total-row {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ks-heading-color, var(--ks-primary-color, #2D1A68));
    border-top: 1px dashed rgba(var(--ks-primary-rgb, 45, 26, 104), 0.2);
    padding-top: 10px;
    margin-top: 4px;
    font-family: var(--ks-heading-font, inherit);
}

/* Form Fields & Touch UI Grid */
.kuad-checkout-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 20px;
}
@media (max-width: 600px) {
    .kuad-checkout-form-grid { grid-template-columns: 1fr; }
}

.form-field-group { display: flex; flex-direction: column; gap: 6px; }
.form-field-group.full-width { grid-column: 1 / -1; }
.form-field-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-heading-color, var(--ks-primary-color, #2D1A68));
    font-family: var(--ks-heading-font, inherit);
}

.kuad-input-field {
    width: 100%;
    height: 48px;
    min-height: 48px;
    border-radius: var(--ks-input-radius, 12px);
    border: 1.5px solid var(--ks-neumorphic-border, rgba(var(--ks-primary-rgb, 45, 26, 104), 0.2));
    padding: 0 16px;
    font-size: 15px;
    color: var(--ks-text-color, #333333);
    background: var(--ks-card-bg, #ffffff);
    box-sizing: border-box;
    font-family: var(--ks-body-font, inherit);
    caret-color: var(--ks-accent-color, #1BA59D);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kuad-input-field::placeholder {
    color: var(--ks-text-muted, #888888);
    opacity: 0.65;
}
.kuad-input-field:-webkit-autofill,
.kuad-input-field:-webkit-autofill:hover,
.kuad-input-field:-webkit-autofill:focus,
.kuad-input-field:-webkit-autofill:active {
    -webkit-text-fill-color: var(--ks-text-color, #333333) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--ks-card-bg, #ffffff) inset !important;
    box-shadow: 0 0 0 1000px var(--ks-card-bg, #ffffff) inset !important;
    caret-color: var(--ks-accent-color, #1BA59D) !important;
    transition: background-color 5000s ease-in-out 0s;
}
textarea.kuad-input-field { height: auto; min-height: 90px; padding: 12px 16px; }
select.kuad-input-field {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}
select.kuad-input-field option {
    background: var(--ks-card-bg, #ffffff);
    color: var(--ks-text-color, #333333);
}
.kuad-input-field:focus {
    outline: none;
    border-color: var(--ks-accent-color, #1BA59D) !important;
    box-shadow: 0 0 0 3px rgba(var(--ks-accent-rgb, 27, 165, 157), 0.2) !important;
}
.kuad-input-field.is-invalid {
    border-color: #e53e3e !important;
    background-color: rgba(229, 62, 62, 0.05) !important;
}
.kuad-input-field.is-valid { border-color: var(--ks-accent-color, #38a169) !important; }

/* DNI / CUIT Tax Lookup Status Box */
.kuad-tax-status-box { margin-top: 6px; }
.kuad-tax-status-box p,
.ks-tango-cuit-feedback {
    margin: 6px 0 0 0 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--ks-accent-color, #10B981) !important;
}
.tax-loading-msg { color: var(--ks-primary-color, #2D1A68); }
.tax-success-msg { color: var(--ks-accent-color, #10B981); }
.tax-error-msg { color: #d32f2f; }

/* Calculate Shipping Button */
.full-width-btn,
#kuad-btn-calc-shipping {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--ks-button-radius, 12px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    background: var(--ks-button-bg-color, var(--ks-primary-color, #403A60));
    color: var(--ks-button-text-color, #ffffff);
    border: 1.5px solid var(--ks-button-border-color, var(--ks-primary-color, #403A60));
    font-family: var(--ks-heading-font, inherit);
    transition: all 0.2s ease;
}
.full-width-btn:hover,
#kuad-btn-calc-shipping:hover {
    background: var(--ks-button-hover-bg-color, #ffffff);
    color: var(--ks-button-hover-text-color, var(--ks-primary-color, #2D1A68));
    border-color: var(--ks-button-hover-border-color, var(--ks-primary-color, #2D1A68));
}

/* Shipping & Gateways Cards */
.kuad-shipping-methods-list,
.kuad-checkout-gateways-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}
.kuad-shipping-option-card,
.kuad-gateway-option-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-radius: var(--ks-card-radius, 16px);
    border: 1.5px solid rgba(var(--ks-primary-rgb, 45, 26, 104), 0.12);
    background: var(--ks-card-bg, #ffffff);
    cursor: pointer;
    transition: all 0.25s ease;
}
.kuad-shipping-option-card:hover,
.kuad-gateway-option-card:hover {
    border-color: var(--ks-accent-color, #1BA59D);
}
.kuad-shipping-option-card.selected,
.kuad-gateway-option-card.selected {
    border-color: var(--ks-accent-color, #1BA59D);
    background: rgba(var(--ks-accent-rgb, 27, 165, 157), 0.05);
    box-shadow: 0 4px 16px rgba(var(--ks-accent-rgb, 27, 165, 157), 0.15);
}
.kuad-shipping-option-card input[type="radio"],
.kuad-gateway-option-card input[type="radio"] {
    width: 22px;
    height: 22px;
    accent-color: var(--ks-accent-color, #1BA59D);
    cursor: pointer;
}
.shipping-info,
.gateway-info { flex: 1; }
.shipping-title,
.gateway-title,
.kuad-payment-title-wrapper {
    font-size: 15px !important;
    color: var(--ks-heading-color, var(--ks-primary-color, #2D1A68)) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
    font-family: var(--ks-heading-font, inherit) !important;
}
.kuad-payment-title-wrapper img,
.gateway-title img {
    max-height: 32px !important;
    width: auto !important;
    object-fit: contain !important;
    vertical-align: middle !important;
}
.shipping-desc,
.gateway-desc {
    margin: 0;
    font-size: 13px;
    color: var(--ks-text-muted, #666666);
    line-height: 1.4;
}
.shipping-price {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ks-accent-color, #1BA59D);
}

/* Action Buttons - Strict Vertical & Horizontal Alignment */
.kuad-checkout-step-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 28px !important;
    width: 100% !important;
}
.kuad-checkout-step-actions button,
.kuad-checkout-step-actions a,
.kuad-checkout-step-actions .ks-global-inputs-system-button,
.kuad-checkout-step-actions .ks-global-inputs-system-submit {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    line-height: 48px !important;
    padding: 0 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: var(--ks-button-radius, 12px) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    font-family: var(--ks-heading-font, inherit) !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
}

.kuad-checkout-flow-wrapper .ks-global-inputs-system-submit,
.kuad-checkout-flow-wrapper .btn-next-step,
.kuad-checkout-flow-wrapper .btn-place-order {
    background: var(--ks-button-submit-bg-color, var(--ks-accent-color, #1BA59D)) !important;
    color: var(--ks-button-submit-text-color, #ffffff) !important;
    border: 1.5px solid var(--ks-button-submit-bg-color, var(--ks-accent-color, #1BA59D)) !important;
    box-shadow: 0 4px 14px rgba(var(--ks-accent-rgb, 27, 165, 157), 0.25) !important;
}
.kuad-checkout-flow-wrapper .ks-global-inputs-system-submit:hover,
.kuad-checkout-flow-wrapper .btn-next-step:hover,
.kuad-checkout-flow-wrapper .btn-place-order:hover {
    background: var(--ks-button-submit-text-color, #ffffff) !important;
    color: var(--ks-button-submit-bg-color, var(--ks-accent-color, #1BA59D)) !important;
    border-color: var(--ks-button-submit-bg-color, var(--ks-accent-color, #1BA59D)) !important;
}

.kuad-checkout-flow-wrapper .ks-global-inputs-system-button,
.kuad-checkout-flow-wrapper .btn-prev-step {
    background: var(--ks-button-bg-color, var(--ks-primary-color, #403A60)) !important;
    color: var(--ks-button-text-color, #ffffff) !important;
    border: 1.5px solid var(--ks-button-border-color, var(--ks-primary-color, #403A60)) !important;
}
.kuad-checkout-flow-wrapper .ks-global-inputs-system-button:hover,
.kuad-checkout-flow-wrapper .btn-prev-step:hover {
    background: var(--ks-button-hover-bg-color, #ffffff) !important;
    color: var(--ks-button-hover-text-color, var(--ks-primary-color, #403A60)) !important;
    border-color: var(--ks-button-hover-border-color, var(--ks-primary-color, #403A60)) !important;
}

/* Spin animation */
.spin {
    animation: kuadSpin 1s linear infinite;
    display: inline-block;
}
@keyframes kuadSpin {
    100% { transform: rotate(360deg); }
}

/* Success Banner */
.kuad-checkout-success-banner {
    text-align: center;
    padding: 40px 20px;
}
.kuad-checkout-success-banner .success-icon {
    font-size: 72px;
    width: 72px;
    height: 72px;
    color: var(--ks-accent-color, #1BA59D);
    margin-bottom: 18px;
}
.kuad-order-info-badge {
    display: inline-block;
    padding: 10px 22px;
    background: rgba(var(--ks-accent-rgb, 27, 165, 157), 0.08);
    border: 1.5px solid rgba(var(--ks-accent-rgb, 27, 165, 157), 0.35);
    border-radius: var(--ks-input-radius, 12px);
    color: var(--ks-accent-color, #166534);
    font-size: 16px;
    font-weight: 700;
    margin: 16px 0 10px 0;
}
.order-thanks-note {
    font-size: 15px;
    color: var(--ks-text-muted, #555555);
    max-width: 500px;
    margin: 8px auto 20px auto;
    line-height: 1.5;
}
.kuad-checkout-error-alert {
    padding: 14px 18px;
    background: rgba(229, 62, 62, 0.08);
    border-left: 4px solid #e53e3e;
    color: #c53030;
    font-size: 14px;
    border-radius: var(--ks-input-radius, 8px);
    margin-top: 16px;
}

/* Empty Cart State */
.kuad-empty-cart-msg {
    text-align: center;
    padding: 36px 20px;
}
.kuad-empty-cart-msg .empty-cart-icon {
    font-size: 64px;
    width: 64px;
    height: 64px;
    color: var(--ks-primary-color, #403A60);
    margin-bottom: 16px;
    opacity: 0.85;
}
.kuad-empty-cart-msg h3 {
    font-size: var(--ks-font-size-h2, 1.4rem);
    font-weight: 700;
    color: var(--ks-heading-color, var(--ks-primary-color, #2D1A68));
    margin: 0 0 8px 0;
    font-family: var(--ks-heading-font, inherit);
}
.kuad-empty-cart-msg .help-text {
    font-size: var(--ks-font-size-body, 0.95rem);
    color: var(--ks-text-muted, #666666);
    margin-bottom: 24px;
}
.kuad-empty-cart-msg .empty-cart-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.kuad-empty-cart-msg .empty-cart-actions a,
.kuad-empty-cart-msg .empty-cart-actions .ks-global-inputs-system-submit,
.kuad-empty-cart-msg .empty-cart-actions .ks-global-inputs-system-button {
    height: 48px !important; min-height: 48px !important; line-height: 48px !important;
    padding: 0 24px !important; font-size: 15px !important; font-weight: 700 !important;
    border-radius: var(--ks-button-radius, 12px) !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    text-decoration: none !important; margin: 0 !important; box-sizing: border-box !important;
    font-family: var(--ks-heading-font, inherit) !important; transition: all 0.25s ease !important;
}
.kuad-empty-cart-msg .empty-cart-actions .ks-global-inputs-system-submit {
    background: var(--ks-button-submit-bg-color, var(--ks-accent-color, #1BA59D)) !important;
    color: var(--ks-button-submit-text-color, #ffffff) !important;
    border: 1.5px solid var(--ks-button-submit-bg-color, var(--ks-accent-color, #1BA59D)) !important;
}
.kuad-empty-cart-msg .empty-cart-actions .ks-global-inputs-system-submit:hover {
    background: var(--ks-button-submit-text-color, #ffffff) !important;
    color: var(--ks-button-submit-bg-color, var(--ks-accent-color, #1BA59D)) !important;
    border-color: var(--ks-button-submit-bg-color, var(--ks-accent-color, #1BA59D)) !important;
}
.kuad-empty-cart-msg .empty-cart-actions .ks-global-inputs-system-button {
    background: var(--ks-button-bg-color, var(--ks-primary-color, #403A60)) !important;
    color: var(--ks-button-text-color, #ffffff) !important;
    border: 1.5px solid var(--ks-button-border-color, var(--ks-primary-color, #403A60)) !important;
}
.kuad-empty-cart-msg .empty-cart-actions .ks-global-inputs-system-button:hover {
    background: var(--ks-button-hover-bg-color, #ffffff) !important;
    color: var(--ks-button-hover-text-color, var(--ks-primary-color, #403A60)) !important;
    border-color: var(--ks-button-hover-border-color, var(--ks-primary-color, #403A60)) !important;
}

@media (max-width: 640px) {
    .kuad-checkout-flow-wrapper {
        padding: 22px 16px;
        border-radius: var(--ks-card-radius, 16px);
    }
    .kuad-checkout-steps-bar {
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        white-space: nowrap; padding-bottom: 12px; scrollbar-width: none;
    }
    .kuad-checkout-steps-bar::-webkit-scrollbar { display: none; }
    .kuad-checkout-step-tab .step-label { font-size: 12px; }
    .kuad-checkout-step-actions { flex-direction: column-reverse; gap: 10px; }
    .kuad-checkout-step-actions button,
    .kuad-checkout-step-actions a { width: 100%; }
    .kuad-empty-cart-msg .empty-cart-actions { flex-direction: column; width: 100%; }
    .kuad-empty-cart-msg .empty-cart-actions a { width: 100%; }
}