/**
 * Tyre-style loader (reusable)
 * Dark outer ring, grey spokes, central reddish-pink glow – no text, small, mobile friendly
 *
 * @package Blocksy_Child
 */

.autohjul-tyre-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
}

.autohjul-tyre-loader__wheel {
    position: relative;
    width: 52px;
    height: 52px;
    max-width: min(52px, 16vw);
    max-height: min(52px, 16vw);
    flex-shrink: 0;
}

/* Outer tyre ring – thick, dark */
.autohjul-tyre-loader__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 5px solid #1f1f1f;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06);
    box-sizing: border-box;
}

/* Spokes: thin grey lines, rotating */
.autohjul-tyre-loader__spokes {
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #8a8a8a 0deg,
        #8a8a8a 3deg,
        transparent 3deg,
        transparent 45deg,
        #8a8a8a 45deg,
        #8a8a8a 48deg,
        transparent 48deg,
        transparent 90deg,
        #8a8a8a 90deg,
        #8a8a8a 93deg,
        transparent 93deg,
        transparent 135deg,
        #8a8a8a 135deg,
        #8a8a8a 138deg,
        transparent 138deg,
        transparent 180deg,
        #8a8a8a 180deg,
        #8a8a8a 183deg,
        transparent 183deg,
        transparent 225deg,
        #8a8a8a 225deg,
        #8a8a8a 228deg,
        transparent 228deg,
        transparent 270deg,
        #8a8a8a 270deg,
        #8a8a8a 273deg,
        transparent 273deg,
        transparent 315deg,
        #8a8a8a 315deg,
        #8a8a8a 318deg,
        transparent 318deg,
        transparent 360deg
    );
    animation: autohjul-tyre-spin 0.85s linear infinite;
}

/* Inner hub – lighter grey disc behind center */
.autohjul-tyre-loader__hub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36%;
    height: 36%;
    margin-left: -18%;
    margin-top: -18%;
    border-radius: 50%;
    background: #b5b5b5;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Center: small sphere with reddish-pink glow */
.autohjul-tyre-loader__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22%;
    height: 22%;
    margin-left: -11%;
    margin-top: -11%;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 35%,
        #ffb3b8,
        #e88a92 35%,
        #c96a75 60%,
        transparent 85%
    );
    box-shadow: 0 0 12px 4px rgba(220, 100, 110, 0.45);
    animation: autohjul-tyre-glow 1.2s ease-in-out infinite;
}

@keyframes autohjul-tyre-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes autohjul-tyre-glow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.08); }
}

.autohjul-tab-products-loading .autohjul-tyre-loader {
    padding: 0.25rem 0;
}

@media (max-width: 480px) {
    .autohjul-tyre-loader__wheel {
        width: 44px;
        height: 44px;
        max-width: min(44px, 14vw);
        max-height: min(44px, 14vw);
    }

    .autohjul-tyre-loader__ring {
        border-width: 4px;
    }
}