/* ==========================================================================
   TopClassLoader & Infinite Scroll Spinner Styles
   Location: css/single-product/top-class-loader.css
   ========================================================================== */

.t1-page-loader-wrapper {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    width: 100%;
    min-height: 40vh;
    box-sizing: border-box;
}

.t1-spinner-container {
    width: 4.5em;
    height: 4.5em;
    transform-origin: center;
    animation: t1-rotate-spinner 2s linear infinite;
}

.t1-spinner-path {
    fill: none;
    stroke: var(--primary-color, #7c3aed);
    stroke-width: 5;
    stroke-dasharray: 2, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: t1-dash-spinner 1.5s ease-in-out infinite;
}

@keyframes t1-rotate-spinner {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes t1-dash-spinner {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dashoffset: -125px;
    }
}

/* Mini Spinner for Infinite Scroll / Load More */
.tc-small-spinner {
    width: 32px;
    height: 32px;
    transform-origin: center;
    animation: tc-rotate-small 2s linear infinite;
    color: var(--primary-color, #7c3aed);
}

.tc-small-spinner circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 2, 200;
    stroke-dashoffset: 0;
    animation: tc-dash-small 1.5s ease-in-out infinite;
}

@keyframes tc-rotate-small {
    100% { transform: rotate(360deg); }
}

@keyframes tc-dash-small {
    0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 200; stroke-dashoffset: -35px; }
    100% { stroke-dashoffset: -125px; }
}