/* Branded loading UI works before JavaScript and never implies a completion %. */
.gac-app .gac-loading-splash {
    isolation: isolate;
    color: var(--gac-text, #142b49);
    background:
        radial-gradient(ellipse at 18% 12%, rgba(122, 173, 255, 0.18), transparent 48%),
        radial-gradient(ellipse at 85% 90%, rgba(89, 190, 230, 0.12), transparent 48%),
        #f7faff;
}

.gac-app .gac-loading-splash::before,
.gac-app .gac-loading-splash::after {
    z-index: -1;
    width: clamp(280px, 48vw, 680px);
    height: clamp(280px, 48vw, 680px);
    border: 1px solid rgba(87, 139, 215, 0.1);
    box-shadow: 0 0 0 44px rgba(87, 139, 215, 0.025), 0 0 0 90px rgba(87, 139, 215, 0.02);
}

.gac-app .gac-brand-loader {
    --gac-emblem-size: 136px;
    display: flex;
    min-width: 0;
    padding: 48px 20px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    color: var(--gac-text, #142b49);
    text-align: center;
}

.gac-app .gac-loader.gac-brand-loader {
    min-height: clamp(340px, 62vh, 640px);
}

/* Replace both legacy ring implementations, not the route/loading lifecycle. */
.gac-app .gac-loader.gac-brand-loader::after {
    content: none;
    display: none;
    animation: none;
}

.gac-app .gac-brand-loader--splash {
    --gac-emblem-size: 164px;
    width: min(100%, 400px);
    padding: 28px 0;
    gap: 28px;
}

.gac-app .gac-loader-emblem {
    position: relative;
    display: grid;
    width: var(--gac-emblem-size);
    height: var(--gac-emblem-size);
    flex: 0 0 auto;
    place-items: center;
}

.gac-app .gac-loader-logo {
    display: grid;
    width: 76%;
    height: 76%;
    padding: 10px;
    place-items: center;
    border: 1px solid #e5edf8;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(32, 82, 153, 0.08), 0 2px 5px rgba(32, 82, 153, 0.03);
}

.gac-app .gac-loader-logo img {
    display: block;
    width: 100%;
    max-width: 108px;
    height: auto;
    max-height: 82px;
    object-fit: contain;
}

.gac-app .gac-loader-orbit {
    position: absolute;
    inset: 0;
    border: 2px solid #e2ebf9;
    border-top-color: #2467df;
    border-right-color: #57bfe9;
    border-radius: 50%;
    animation: gac-loader-turn 2.4s linear infinite;
}

.gac-app .gac-loader-orbit::after {
    position: absolute;
    top: 12%;
    right: 12%;
    width: 6px;
    height: 6px;
    border: 2px solid #f7faff;
    border-radius: 50%;
    background: #2c8de6;
    box-shadow: 0 0 0 3px rgba(44, 141, 230, 0.09);
    content: '';
}

.gac-app .gac-loader-orbit--inner {
    inset: 9px;
    border-width: 1px;
    border-color: transparent transparent #a6d9f4 #c6defb;
    animation-duration: 3.6s;
    animation-direction: reverse;
}

.gac-app .gac-loader-orbit--inner::after {
    content: none;
}

.gac-app .gac-loader-copy :is(h1, h2) {
    margin: 0;
    color: #17325a;
    font-size: 22px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -0.7px;
}

.gac-app .gac-brand-loader--splash h1 {
    font-size: 28px;
}

.gac-app .gac-loader-copy :is(h1, h2) > span {
    color: #2467df;
}

.gac-app .gac-loader-copy p {
    max-width: 320px;
    margin: 9px 0 0;
    overflow-wrap: anywhere;
    color: #61758e;
    font-size: 13px;
    line-height: 1.6;
}

.gac-app .gac-loader-meter {
    width: 112px;
    height: 3px;
    overflow: hidden;
    border-radius: 8px;
    background: #e0eaf7;
}

.gac-app .gac-loader-meter > span {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #387bf0, #46b9e4);
    animation: gac-loader-sweep 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.gac-app .gac-loader-caption {
    margin-top: -13px;
    color: #6b7e96;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.gac-app .gac-shimmer-list {
    gap: 14px;
}

.gac-app .gac-skeleton-card {
    display: flex;
    min-height: 132px;
    padding: 16px;
    align-items: center;
    gap: 18px;
    border: 1px solid #e5ecf5;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(24, 53, 95, 0.025);
}

.gac-app .gac-skeleton-thumb {
    display: block;
    width: 96px;
    height: 96px;
    flex: 0 0 auto;
    border-radius: 12px;
}

.gac-app .gac-skeleton-copy {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
}

.gac-app .gac-skeleton-copy > span {
    display: block;
    height: 10px;
    border-radius: 5px;
}

.gac-app .gac-skeleton-copy > .gac-skeleton-kicker { width: 26%; }
.gac-app .gac-skeleton-copy > .gac-skeleton-title { width: 76%; height: 14px; }
.gac-app .gac-skeleton-copy > .gac-skeleton-description { width: 56%; }
.gac-app .gac-skeleton-copy > .gac-skeleton-price { width: 32%; height: 14px; margin-top: 5px; }

.gac-app .gac-skeleton-card .gac-shimmer {
    background: #edf2f8 !important;
}

.gac-app .gac-skeleton-card .gac-shimmer::after {
    background: linear-gradient(100deg, transparent 15%, rgba(255, 255, 255, 0.9) 50%, transparent 85%);
    animation-duration: 1.8s;
    animation-timing-function: ease-in-out;
}

.gac-app .gac-button-spinner,
.gac-app .gac-inline-loader > span {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: gac-loader-turn 850ms linear infinite;
}

.gac-app .gac-inline-loader {
    gap: 10px;
    color: #526d90;
    font-size: 13px;
    font-weight: 500;
}

@keyframes gac-loader-turn { to { transform: rotate(360deg); } }
@keyframes gac-loader-sweep { from { transform: translateX(-110%); } to { transform: translateX(350%); } }

@media (max-width: 359px) {
    .gac-app .gac-skeleton-card { gap: 12px; padding: 12px; }
    .gac-app .gac-skeleton-thumb { width: 76px; height: 86px; }
}

@media (prefers-reduced-motion: reduce) {
    .gac-app .gac-loader-orbit,
    .gac-app .gac-loader-meter > span,
    .gac-app .gac-skeleton-card .gac-shimmer::after,
    .gac-app .gac-button-spinner,
    .gac-app .gac-inline-loader > span {
        animation: none !important;
    }
    .gac-app .gac-loader-meter > span { transform: translateX(70%); opacity: 0.7; }
    .gac-app .gac-skeleton-card .gac-shimmer::after { display: none; }
}

@media (forced-colors: active) {
    .gac-app .gac-loading-splash { background: Canvas; }
    .gac-app .gac-loader-orbit { border-color: CanvasText; border-right-color: transparent; }
    .gac-app .gac-loader-logo, .gac-app .gac-skeleton-card { border-color: CanvasText; box-shadow: none; }
    .gac-app .gac-loader-copy :is(h1, h2, p),
    .gac-app .gac-loader-copy :is(h1, h2) > span,
    .gac-app .gac-loader-caption { color: CanvasText; }
    .gac-app .gac-loader-meter { background: CanvasText; }
    .gac-app .gac-skeleton-card .gac-shimmer { border: 1px solid CanvasText !important; }
}