/*
 * Bumaga Exchange v2 - contextual loading states (staging only).
 * Non-invasive: existing wizard logic, timeouts and error states untouched.
 * Toggle: ?exchange_legacy_loading=1
 */
.exchange-container {
    --ex-load-surface: rgba(255, 255, 255, .022);
    --ex-load-border: rgba(255, 255, 255, .082);
    --ex-load-shape: rgba(138, 155, 175, .16);
    --ex-load-shape-soft: rgba(138, 155, 175, .11);
    --ex-load-accent: #4a9eff;
}

/* All three wizard loaders have the same geometry. */
.exchange-container #intentWizard .wizard-loading,
.exchange-container #intentWizard .wizard-options-loading {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    min-height: 202px;
    padding: 8px 0 13px !important;
    margin: 0 auto;
    background: transparent;
}

/* Three realistic option rows, drawn with CSS; no extra DOM or JS. */
.exchange-container #intentWizard .wizard-loading::before,
.exchange-container #intentWizard .wizard-options-loading::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: min(100%, 620px);
    height: 170px;
    border-radius: 12px;
    border: 1px solid var(--ex-load-border);
    box-sizing: border-box;
    background:
        linear-gradient(var(--ex-load-shape), var(--ex-load-shape)) 15px 11px / 34px 34px no-repeat,
        linear-gradient(var(--ex-load-shape), var(--ex-load-shape)) 60px 13px / 42% 12px no-repeat,
        linear-gradient(var(--ex-load-shape-soft), var(--ex-load-shape-soft)) 60px 33px / 27% 8px no-repeat,
        linear-gradient(var(--ex-load-surface), var(--ex-load-surface)) 0 0 / 100% 55px no-repeat,

        linear-gradient(var(--ex-load-shape), var(--ex-load-shape)) 15px 69px / 34px 34px no-repeat,
        linear-gradient(var(--ex-load-shape), var(--ex-load-shape)) 60px 72px / 33% 12px no-repeat,
        linear-gradient(var(--ex-load-shape-soft), var(--ex-load-shape-soft)) 60px 92px / 39% 8px no-repeat,
        linear-gradient(var(--ex-load-surface), var(--ex-load-surface)) 0 57px / 100% 55px no-repeat,

        linear-gradient(var(--ex-load-shape), var(--ex-load-shape)) 15px 126px / 34px 34px no-repeat,
        linear-gradient(var(--ex-load-shape), var(--ex-load-shape)) 60px 130px / 38% 12px no-repeat,
        linear-gradient(var(--ex-load-shape-soft), var(--ex-load-shape-soft)) 60px 149px / 21% 8px no-repeat,
        linear-gradient(var(--ex-load-surface), var(--ex-load-surface)) 0 114px / 100% 55px no-repeat;
    animation: ex-v2-skeleton-breathe 1.7s ease-in-out infinite;
}

/* Gentle shine, intentionally less distracting than a large spinner. */
.exchange-container #intentWizard .wizard-loading::after,
.exchange-container #intentWizard .wizard-options-loading::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 8px;
    left: -55%;
    width: 50%;
    height: 170px;
    border-radius: 12px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(120, 160, 208, .015) 23%,
        rgba(120, 160, 208, .09) 50%,
        rgba(120, 160, 208, .015) 77%,
        transparent 100%);
    pointer-events: none;
    animation: ex-v2-skeleton-sweep 1.85s ease-in-out infinite;
}

.exchange-container #intentWizard .wizard-loading p,
.exchange-container #intentWizard .wizard-options-loading__text {
    display: block;
    order: 2;
    margin: 12px 0 0;
    color: rgba(220, 228, 238, .66);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}

.exchange-container #intentWizard .wizard-options-loading__spinner {
    display: none;
}

/* Contextual city selector remains inline; dress up its native loader. */
.exchange-container .city-selector__loading {
    min-height: 88px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--ex-load-border);
    background: var(--ex-load-surface);
    color: rgba(220, 228, 238, .68);
    font-size: 12px;
    font-weight: 500;
}
.exchange-container .city-selector__spinner {
    width: 16px;
    height: 16px;
    border-color: rgba(74, 158, 255, .15);
    border-top-color: var(--ex-load-accent);
}
.exchange-container .city-selector__loading::after {
    content: "";
    flex: 0 0 auto;
    width: 108px;
    height: 10px;
    border-radius: 100px;
    margin-left: auto;
    background: linear-gradient(100deg,
       rgba(120, 150, 185, .11),
       rgba(120, 150, 185, .24),
       rgba(120, 150, 185, .11));
    background-size: 200% 100%;
    animation: ex-v2-inline-sheen 1.9s ease-in-out infinite;
}

@keyframes ex-v2-skeleton-breathe {
    0%, 100% { opacity: .76; }
    50% { opacity: 1; }
}
@keyframes ex-v2-skeleton-sweep {
    0% { left: -55%; }
    100% { left: 110%; }
}
@keyframes ex-v2-inline-sheen {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}
@media (max-width: 767px) {
    .exchange-container #intentWizard .wizard-loading,
    .exchange-container #intentWizard .wizard-options-loading {
        min-height: 196px;
        padding: 6px 0 10px !important;
    }
    .exchange-container #intentWizard .wizard-loading::before,
    .exchange-container #intentWizard .wizard-options-loading::before {
        width: 100%;
    }
    .exchange-container #intentWizard .wizard-loading::after,
    .exchange-container #intentWizard .wizard-options-loading::after {
        top: 6px;
    }
    .exchange-container .city-selector__loading::after {
        width: 45px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .exchange-container #intentWizard .wizard-loading::before,
    .exchange-container #intentWizard .wizard-options-loading::before,
    .exchange-container #intentWizard .wizard-loading::after,
    .exchange-container #intentWizard .wizard-options-loading::after,
    .exchange-container .city-selector__loading::after,
    .exchange-container .city-selector__spinner {
        animation: none !important;
    }
    .exchange-container #intentWizard .wizard-loading::after,
    .exchange-container #intentWizard .wizard-options-loading::after {
        display: none;
    }
}


/* The site supports light mode; keep placeholder rows and captions legible. */
html[data-theme="light"] .exchange-container {
    --ex-load-surface: rgba(25, 46, 68, .052);
    --ex-load-border: rgba(25, 46, 68, .13);
    --ex-load-shape: rgba(35, 59, 87, .17);
    --ex-load-shape-soft: rgba(35, 59, 87, .10);
}
html[data-theme="light"] .exchange-container #intentWizard .wizard-loading p,
html[data-theme="light"] .exchange-container #intentWizard .wizard-options-loading__text,
html[data-theme="light"] .exchange-container .city-selector__loading {
    color: rgba(35, 56, 78, .76);
}