/**
 * Guest search loading overlay — blur + selectable animation style.
 * Accents follow theme --primary (storefront red by default).
 * Styles: flip | flip-x | pulse (default) | spin | dots | bar | fade | off
 * flip / flip-x = Prex loading.html 3D (rotateY / rotateX).
 * Animations apply to logo / special image when present.
 */

.search-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 10040;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    --sl-bg: #ffffff;
    --sl-bg-end: #ed4b25;
    background: rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: wait;
}

/* Arka plan varyantları */
.search-loading-overlay--bg-blur {
    background: rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.search-loading-overlay--bg-solid {
    background: var(--sl-bg, #ffffff);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.search-loading-overlay--bg-gradient {
    background: linear-gradient(145deg, var(--sl-bg, #ffffff), var(--sl-bg-end, #ed4b25));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.search-loading-overlay--bg-dark {
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.search-loading-overlay--bg-dark .search-loading-overlay__panel {
    background: rgba(255, 255, 255, 0.92);
}
.search-loading-overlay--bg-gradient .search-loading-overlay__panel,
.search-loading-overlay--bg-solid .search-loading-overlay__panel {
    box-shadow:
        0 18px 48px rgba(17, 24, 39, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.35);
}

.search-loading-overlay.is-open {
    display: flex;
}

.search-loading-overlay[hidden] {
    display: none !important;
}

.search-loading-overlay__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    min-width: min(18rem, calc(100vw - 2.5rem));
    max-width: min(22rem, calc(100vw - 2.5rem));
    padding: 1.75rem 1.85rem 1.5rem;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    box-shadow:
        0 18px 48px rgba(17, 24, 39, 0.14),
        0 0 0 1px rgba(var(--primary-rgb, 237, 75, 37), 0.08);
}

.search-loading-overlay__logo {
    display: block;
    max-width: 200px;
    max-height: 72px;
    width: auto;
    height: auto;
    object-fit: contain;
    transform-origin: center center;
}

/* Özel yükleme görseli — biraz daha büyük, kare/dikey de olsun */
.search-loading-overlay[data-loading-logo="custom"] .search-loading-overlay__logo {
    max-width: 160px;
    max-height: 160px;
    border-radius: 16px;
}

.search-loading-overlay__name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gray-900, #111827);
    text-align: center;
    line-height: 1.3;
}

.search-loading-overlay__spinner,
.search-loading-overlay__dots,
.search-loading-overlay__bar {
    display: none;
}

.search-loading-overlay__spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid rgba(var(--primary-rgb, 237, 75, 37), 0.18);
    border-top-color: var(--primary, #ed4b25);
}

.search-loading-overlay__dots {
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 1rem;
}

.search-loading-overlay__dots i {
    display: block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--primary, #ed4b25);
}

.search-loading-overlay__bar {
    width: min(11rem, 70%);
    height: 4px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb, 237, 75, 37), 0.16);
    overflow: hidden;
}

.search-loading-overlay__bar > i {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: inherit;
    background: var(--primary, #ed4b25);
}

.search-loading-overlay__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.is-search-loading {
    overflow: hidden;
}

/* —— flip / flip-x —— Prex loading.html (rotateY) ve zıttı (rotateX) —— */
.search-loading-overlay--flip,
.search-loading-overlay--flip-x {
    perspective: 800px;
}

.search-loading-overlay--flip .search-loading-overlay__panel,
.search-loading-overlay--flip-x .search-loading-overlay__panel {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    max-width: none;
    border-radius: 0;
    perspective: 800px;
}

.search-loading-overlay--flip .search-loading-overlay__logo:not([hidden]),
.search-loading-overlay--flip-x .search-loading-overlay__logo:not([hidden]) {
    width: auto;
    height: 130px;
    max-width: min(280px, 72vw);
    max-height: 130px;
    border-radius: 0;
    transform-style: preserve-3d;
    will-change: transform;
}

.search-loading-overlay--flip[data-loading-logo="custom"] .search-loading-overlay__logo,
.search-loading-overlay--flip-x[data-loading-logo="custom"] .search-loading-overlay__logo {
    border-radius: 0;
}

.search-loading-overlay--flip .search-loading-overlay__logo:not([hidden]) {
    animation: search-loading-flip-y 2s linear infinite;
}

.search-loading-overlay--flip-x .search-loading-overlay__logo:not([hidden]) {
    animation: search-loading-flip-x 2s linear infinite;
}

.search-loading-overlay--flip .search-loading-overlay__name:not([hidden]),
.search-loading-overlay--flip-x .search-loading-overlay__name:not([hidden]) {
    color: #f8fafc;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
    animation: search-loading-pulse 1.45s ease-in-out infinite;
}

.search-loading-overlay--flip:not(:has(.search-loading-overlay__logo:not([hidden]))) .search-loading-overlay__spinner,
.search-loading-overlay--flip-x:not(:has(.search-loading-overlay__logo:not([hidden]))) .search-loading-overlay__spinner {
    display: block;
    width: 56px;
    height: 56px;
    border-width: 3px;
    border-color: rgba(255, 255, 255, 0.22);
    border-top-color: #fff;
    animation: search-loading-spin 0.85s linear infinite;
}

/* —— pulse —— logo/isim nabız */
.search-loading-overlay--pulse .search-loading-overlay__logo:not([hidden]),
.search-loading-overlay--pulse .search-loading-overlay__name:not([hidden]) {
    animation: search-loading-pulse 1.45s ease-in-out infinite;
}

.search-loading-overlay--pulse:not(:has(.search-loading-overlay__logo:not([hidden]))):not(:has(.search-loading-overlay__name:not([hidden]))) .search-loading-overlay__spinner,
.search-loading-overlay--pulse .search-loading-overlay__logo[hidden] ~ .search-loading-overlay__spinner {
    display: block;
    animation: search-loading-spin 0.8s linear infinite;
}

/* —— spin —— görselin kendisi döner; logo yoksa halka */
.search-loading-overlay--spin .search-loading-overlay__logo:not([hidden]) {
    animation: search-loading-spin 1.15s linear infinite;
}

.search-loading-overlay--spin .search-loading-overlay__name:not([hidden]) {
    animation: search-loading-pulse 1.45s ease-in-out infinite;
}

.search-loading-overlay--spin:not(:has(.search-loading-overlay__logo:not([hidden]))) .search-loading-overlay__spinner {
    display: block;
    width: 48px;
    height: 48px;
    animation: search-loading-spin 0.8s linear infinite;
}

/* —— dots —— görsel sabit + altta noktalar; görsel yoksa da noktalar */
.search-loading-overlay--dots .search-loading-overlay__dots {
    display: inline-flex;
}

.search-loading-overlay--dots .search-loading-overlay__dots i {
    animation: search-loading-dot 1s ease-in-out infinite;
}

.search-loading-overlay--dots .search-loading-overlay__dots i:nth-child(2) {
    animation-delay: 0.15s;
}

.search-loading-overlay--dots .search-loading-overlay__dots i:nth-child(3) {
    animation-delay: 0.3s;
}

.search-loading-overlay--dots .search-loading-overlay__logo:not([hidden]) {
    animation: search-loading-soft-bob 1.6s ease-in-out infinite;
}

/* —— bar —— */
.search-loading-overlay--bar .search-loading-overlay__bar {
    display: block;
}

.search-loading-overlay--bar .search-loading-overlay__bar > i {
    animation: search-loading-bar 1.15s ease-in-out infinite;
}

.search-loading-overlay--bar .search-loading-overlay__logo:not([hidden]) {
    animation: search-loading-soft-bob 1.6s ease-in-out infinite;
}

/* —— fade —— */
.search-loading-overlay--fade .search-loading-overlay__panel {
    animation: search-loading-fade 1.6s ease-in-out infinite;
}

.search-loading-overlay--fade:not(:has(.search-loading-overlay__logo:not([hidden]))):not(:has(.search-loading-overlay__name:not([hidden]))) .search-loading-overlay__spinner {
    display: block;
    animation: search-loading-spin 0.8s linear infinite;
}

@keyframes search-loading-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.055);
        opacity: 0.78;
    }
}

@keyframes search-loading-soft-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes search-loading-spin {
    to { transform: rotate(360deg); }
}

@keyframes search-loading-flip-y {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes search-loading-flip-x {
    0% { transform: rotateX(0deg); }
    100% { transform: rotateX(360deg); }
}

@keyframes search-loading-dot {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    40% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

@keyframes search-loading-bar {
    0% { transform: translateX(-130%); }
    100% { transform: translateX(290%); }
}

@keyframes search-loading-fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.62; }
}

@media (prefers-reduced-motion: reduce) {
    .search-loading-overlay__logo,
    .search-loading-overlay__name,
    .search-loading-overlay__spinner,
    .search-loading-overlay__dots i,
    .search-loading-overlay__bar > i,
    .search-loading-overlay__panel {
        animation: none !important;
    }
}