/* =========================================
   AVATAR FRAMES - GLOBAL
========================================= */

.avatar-frame,
.avatar-frame-preview {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate;
}

.profile-avatar.avatar-frame,
.profile-avatar-preview-fallback.avatar-frame,
.fb-post-avatar.avatar-frame,
.fb-comment-avatar.avatar-frame,
.hero-top10-avatar.avatar-frame,
.avatar-frame-preview.avatar-frame {
    overflow: visible !important;
}

.avatar-frame > img,
.avatar-frame img,
.avatar-frame .feed-avatar-image,
.avatar-frame .profile-avatar-image,
.avatar-frame .profile-avatar-preview-image img,
.avatar-frame .hero-top10-avatar img,
.avatar-frame-preview > img,
.avatar-frame-preview img {
    position: relative;
    z-index: 1;
    border-radius: 50%;
}

.avatar-frame::before,
.avatar-frame::after,
.avatar-frame-preview::before,
.avatar-frame-preview::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
}

.avatar-frame-none::before,
.avatar-frame-none::after,
.avatar-frame-preview.avatar-frame-none::before,
.avatar-frame-preview.avatar-frame-none::after {
    display: none !important;
}

/* =========================================
   FREE FRAMES
========================================= */

.avatar-frame-wolf::before {
    border: 2px solid rgba(143, 211, 255, 0.7);
    box-shadow:
        0 0 10px rgba(143, 211, 255, 0.35),
        inset 0 0 10px rgba(143, 211, 255, 0.2);
}

.avatar-frame-wolf::after {
    inset: -9px;
    border: 1px dashed rgba(214, 170, 91, 0.65);
    animation: avatarFrameSpin 14s linear infinite;
}

.avatar-frame-ice::before {
    border: 2px solid rgba(160, 230, 255, 0.9);
    box-shadow:
        0 0 14px rgba(120, 210, 255, 0.65),
        0 0 26px rgba(80, 180, 255, 0.22);
}

.avatar-frame-ice::after {
    inset: -10px;
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(120, 220, 255, 0.6),
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    mask: radial-gradient(circle, transparent 62%, #000 64%);
    -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%);
    animation: avatarFrameSpin 8s linear infinite;
}

/* =========================================
   PREMIUM FRAMES - BASIC
========================================= */

.avatar-frame-gold::before {
    border: 3px solid rgba(255, 210, 110, 0.95);
    box-shadow:
        0 0 16px rgba(255, 200, 80, 0.75),
        0 0 32px rgba(214, 170, 91, 0.35),
        inset 0 0 12px rgba(255, 240, 180, 0.35);
}

.avatar-frame-gold::after {
    inset: -12px;
    background: conic-gradient(
        rgba(255, 230, 160, 0),
        rgba(255, 215, 100, 0.85),
        rgba(255, 255, 255, 0.45),
        rgba(255, 180, 60, 0.9),
        rgba(255, 230, 160, 0)
    );
    mask: radial-gradient(circle, transparent 61%, #000 63%);
    -webkit-mask: radial-gradient(circle, transparent 61%, #000 63%);
    animation: avatarFrameSpin 6s linear infinite;
}

.avatar-frame-blood::before {
    border: 3px solid rgba(255, 75, 75, 0.9);
    box-shadow:
        0 0 16px rgba(255, 40, 40, 0.7),
        0 0 32px rgba(120, 0, 0, 0.5),
        inset 0 0 12px rgba(255, 90, 90, 0.3);
}

.avatar-frame-blood::after {
    inset: -11px;
    background: conic-gradient(
        from 90deg,
        transparent,
        rgba(255, 40, 40, 0.8),
        rgba(90, 0, 0, 0.9),
        rgba(255, 120, 80, 0.75),
        transparent
    );
    mask: radial-gradient(circle, transparent 62%, #000 64%);
    -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%);
    animation: avatarFrameSpin 7s linear infinite reverse;
}

.avatar-frame-cosmic::before {
    border: 2px solid rgba(170, 120, 255, 0.9);
    box-shadow:
        0 0 16px rgba(140, 90, 255, 0.7),
        0 0 30px rgba(80, 180, 255, 0.38),
        0 0 42px rgba(255, 80, 190, 0.22);
}

.avatar-frame-cosmic::after {
    inset: -12px;
    background: conic-gradient(
        rgba(95, 200, 255, 0.1),
        rgba(170, 100, 255, 0.9),
        rgba(255, 80, 190, 0.75),
        rgba(95, 200, 255, 0.85),
        rgba(95, 200, 255, 0.1)
    );
    mask: radial-gradient(circle, transparent 61%, #000 64%);
    -webkit-mask: radial-gradient(circle, transparent 61%, #000 64%);
    animation: avatarFrameSpin 5s linear infinite;
}

/* =========================================
   PREMIUM FRAMES - DIABLO INSPIRED
========================================= */

.avatar-frame-hellfire::before {
    inset: -7px;
    border: 3px solid rgba(255, 82, 24, 1);
    box-shadow:
        0 0 16px rgba(255, 55, 20, 1),
        0 0 34px rgba(160, 20, 0, 0.9),
        0 0 58px rgba(255, 130, 20, 0.55),
        inset 0 0 16px rgba(255, 90, 30, 0.55);
}

.avatar-frame-hellfire::after {
    inset: -15px;
    background: conic-gradient(
        from 30deg,
        transparent,
        rgba(255, 30, 0, 1),
        rgba(255, 175, 35, 1),
        rgba(80, 0, 0, 1),
        rgba(255, 35, 0, 1),
        transparent
    );
    mask: radial-gradient(circle, transparent 57%, #000 62%);
    -webkit-mask: radial-gradient(circle, transparent 57%, #000 62%);
    animation: avatarFrameSpin 4.5s linear infinite;
}

.avatar-frame-soulstone::before {
    inset: -7px;
    border: 3px solid rgba(190, 20, 255, 1);
    box-shadow:
        0 0 16px rgba(190, 20, 255, 1),
        0 0 34px rgba(90, 0, 150, 0.9),
        0 0 56px rgba(255, 40, 120, 0.48),
        inset 0 0 16px rgba(220, 120, 255, 0.48);
}

.avatar-frame-soulstone::after {
    inset: -14px;
    background: conic-gradient(
        from 120deg,
        transparent,
        rgba(190, 20, 255, 1),
        rgba(255, 50, 150, 0.95),
        rgba(70, 0, 120, 1),
        rgba(240, 140, 255, 0.9),
        transparent
    );
    mask: radial-gradient(circle, transparent 58%, #000 63%);
    -webkit-mask: radial-gradient(circle, transparent 58%, #000 63%);
    animation: avatarFrameSpin 6.5s linear infinite reverse;
}

/* =========================================
   PREMIUM FRAMES - STAR CITIZEN INSPIRED
========================================= */

.avatar-frame-starlancer::before {
    inset: -7px;
    border: 2px solid rgba(80, 220, 255, 1);
    box-shadow:
        0 0 14px rgba(80, 220, 255, 1),
        0 0 34px rgba(30, 120, 255, 0.8),
        0 0 58px rgba(255, 255, 255, 0.3),
        inset 0 0 14px rgba(120, 230, 255, 0.45);
}

.avatar-frame-starlancer::after {
    inset: -13px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(80, 220, 255, 1) 35deg,
        transparent 70deg,
        transparent 115deg,
        rgba(255, 255, 255, 0.95) 145deg,
        transparent 175deg,
        transparent 225deg,
        rgba(30, 120, 255, 1) 255deg,
        transparent 290deg,
        transparent 360deg
    );
    mask: radial-gradient(circle, transparent 59%, #000 64%);
    -webkit-mask: radial-gradient(circle, transparent 59%, #000 64%);
    animation: avatarFrameSpin 5.5s linear infinite;
}

.avatar-frame-quantum::before {
    inset: -7px;
    border: 2px solid rgba(60, 255, 210, 1);
    box-shadow:
        0 0 16px rgba(60, 255, 210, 1),
        0 0 36px rgba(40, 120, 255, 0.85),
        0 0 60px rgba(150, 80, 255, 0.45),
        inset 0 0 14px rgba(60, 255, 210, 0.45);
}

.avatar-frame-quantum::after {
    inset: -15px;
    background: repeating-conic-gradient(
        from 45deg,
        rgba(60, 255, 210, 1) 0deg 12deg,
        transparent 12deg 26deg,
        rgba(80, 130, 255, 1) 26deg 38deg,
        transparent 38deg 58deg
    );
    mask: radial-gradient(circle, transparent 57%, #000 63%);
    -webkit-mask: radial-gradient(circle, transparent 57%, #000 63%);
    animation: avatarFrameSpin 3.8s linear infinite;
}

/* =========================================
   ANIMATION
========================================= */

@keyframes avatarFrameSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* =========================================
   AVATAR FRAME SETTINGS UI
========================================= */

.avatar-frame-settings {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid rgba(143, 211, 255, 0.14);
    background: linear-gradient(180deg, rgba(10, 16, 28, .92), rgba(7, 12, 22, .92));
}

.avatar-frame-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 14px;
    margin-bottom: 12px;
}

.avatar-frame-option {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 14px 10px;
    cursor: pointer;
    border: 1px solid rgba(143, 211, 255, 0.16);
    background: rgba(255, 255, 255, 0.035);
    transition: 0.18s ease;
}

.avatar-frame-option:hover {
    transform: translateY(-2px);
    border-color: rgba(143, 211, 255, 0.36);
    background: rgba(95, 200, 255, 0.06);
}

.avatar-frame-option input {
    accent-color: #8fd3ff;
}

.avatar-frame-option input:checked + .avatar-frame-preview {
    transform: scale(1.05);
}

.avatar-frame-option.is-locked {
    opacity: 0.55;
    cursor: not-allowed;
}

.avatar-frame-preview {
    position: relative;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    font-size: 24px;
    font-weight: 900;
    color: #f7efe0;
    background:
        linear-gradient(135deg, rgba(95, 200, 255, 0.32), rgba(214, 170, 91, 0.22)),
        linear-gradient(180deg, rgba(20, 28, 42, 0.96), rgba(9, 14, 24, 0.96));
    transition: 0.18s ease;
}

.avatar-frame-preview img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-frame-name {
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: #d7e9f7;
}

.avatar-frame-name small {
    display: block;
    margin-top: 4px;
    color: #ffe9a8;
}

.profile-avatar-preview-image.avatar-frame {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    overflow: visible !important;
    border-radius: 50%;
    border: none;
    background:
        linear-gradient(135deg, rgba(95,200,255,.32), rgba(214,170,91,.22)),
        linear-gradient(180deg, rgba(20,28,42,.96), rgba(9,14,24,.96));
}

.profile-avatar-preview-image.avatar-frame img {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
}