/* FitUI V2 — Panels */

.fit-panel,
.fit-map-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--fit-border);
    border-radius: var(--fit-radius-lg);
    background:
        radial-gradient(circle at 92% 8%, rgba(var(--fit-gold-rgb), .08), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02)),
        var(--fit-surface-glass);
    box-shadow: var(--fit-shadow-panel), var(--fit-shadow-inset);
    backdrop-filter: var(--fit-blur-panel);
    -webkit-backdrop-filter: var(--fit-blur-panel);
}

.fit-panel {
    padding: clamp(22px, 3vw, 36px);
}

.fit-panel::after,
.fit-map-panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, .035), transparent 34%);
    pointer-events: none;
}

.fit-panel--gold {
    border-color: var(--fit-border-gold-soft);
    box-shadow: var(--fit-shadow-panel), var(--fit-glow-gold), var(--fit-shadow-inset);
}

.fit-panel--inset {
    border-color: var(--fit-border-soft);
    background: var(--fit-surface-inset);
    box-shadow: var(--fit-shadow-inset);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.fit-panel--premium {
    border-color: var(--fit-border-gold-soft);
    background:
        radial-gradient(circle at 92% 5%, rgba(var(--fit-gold-rgb), .095), transparent 31%),
        linear-gradient(180deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .017)),
        var(--fit-surface-glass);
    box-shadow: var(--fit-shadow-panel), var(--fit-shadow-inset), 0 0 48px rgba(var(--fit-gold-rgb), .04);
}

.fit-panel--interactive {
    transition:
        border-color var(--fit-duration) ease,
        background var(--fit-duration) ease,
        box-shadow var(--fit-duration) ease,
        transform var(--fit-duration) var(--fit-ease);
}

.fit-panel--interactive:hover {
    border-color: var(--fit-border-gold);
    box-shadow: var(--fit-shadow-panel), var(--fit-glow-gold), var(--fit-shadow-inset);
    transform: translateY(-4px);
}