/* Anti Radio Social v1.1.0
   Minimal kart dizaynı — mərkəzləşdirmə + fon/rəng/effekt seçimləri */

/* ── Wrapper ──────────────────────────────────────────────── */
.ars-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    /* Default: mərkəz */
    justify-content: center;
}

/* Hizalama variantları */
.ars-align-left   { justify-content: flex-start; }
.ars-align-center { justify-content: center; }
.ars-align-right  { justify-content: flex-end; }

/* ── Hər kart düymə ───────────────────────────────────────── */
.ars-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background-color: var(--ars-bg, #f0ede8);
    color: var(--ars-color, #1a1a1a);
    text-decoration: none;
    transition: background-color 0.18s ease,
                transform        0.15s ease,
                box-shadow       0.18s ease,
                color            0.18s ease;
    flex-shrink: 0;
    outline: none;
    border: none;
    cursor: pointer;
    box-shadow:
        0 1px 3px rgba(0,0,0,.06),
        inset 0 1px 0 rgba(255,255,255,.55);
}

/* ── Fon variantları ──────────────────────────────────────── */
/* Açıq (default — şəkildəki krem) */
.ars-theme-light .ars-btn {
    --ars-bg: #f0ede8;
    --ars-color: #1a1a1a;
}

/* Tünd — şəkildəki footer-dəki qara kart */
.ars-theme-dark .ars-btn {
    --ars-bg: #1e1e1e;
    --ars-color: #f0f0f0;
    box-shadow:
        0 1px 4px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.06);
}

/* Şəffaf */
.ars-theme-transparent .ars-btn {
    --ars-bg: transparent;
    --ars-color: currentColor;
    box-shadow: none;
    border: 1.5px solid rgba(0,0,0,.12);
}

/* Rəngli (hər şəbəkənin öz brend rəngi) */
.ars-theme-brand .ars-facebook { --ars-bg: #1877f2; --ars-color: #fff; }
.ars-theme-brand .ars-x        { --ars-bg: #000;    --ars-color: #fff; }
.ars-theme-brand .ars-mastodon { --ars-bg: #6364ff; --ars-color: #fff; }
.ars-theme-brand .ars-instagram{ --ars-bg: #e1306c; --ars-color: #fff; }
.ars-theme-brand .ars-youtube  { --ars-bg: #ff0000; --ars-color: #fff; }
.ars-theme-brand .ars-spotify  { --ars-bg: #1db954; --ars-color: #fff; }
.ars-theme-brand .ars-btn { box-shadow: none; }

/* ── Ölçülər ──────────────────────────────────────────────── */
.ars-size-sm .ars-btn { width: 40px; height: 40px; border-radius: 12px; }
.ars-size-md .ars-btn { width: 56px; height: 56px; border-radius: 16px; }
.ars-size-lg .ars-btn { width: 72px; height: 72px; border-radius: 20px; }

.ars-size-sm .ars-btn svg { width: 16px; height: 16px; }
.ars-size-md .ars-btn svg { width: 22px; height: 22px; }
.ars-size-lg .ars-btn svg { width: 30px; height: 30px; }

/* ── SVG ──────────────────────────────────────────────────── */
.ars-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

/* filled ikonlar */
.ars-facebook svg path,
.ars-x svg path,
.ars-mastodon svg path { fill: currentColor; stroke: none; }

.ars-youtube svg path:first-of-type { fill: currentColor; stroke: none; }
.ars-youtube svg polygon            { fill: #fff; stroke: none; }
.ars-spotify svg circle             { fill: currentColor; stroke: none; }
.ars-spotify svg path               { fill: none; stroke: #fff; stroke-width: 1.8; }

/* ── Hover effektləri ─────────────────────────────────────── */

/* Default hover (lift) */
.ars-hover-lift .ars-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,.12),
                inset 0 1px 0 rgba(255,255,255,.55);
}

/* Scale hover */
.ars-hover-scale .ars-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
}

/* Glow hover */
.ars-hover-glow .ars-facebook:hover { box-shadow: 0 0 14px rgba(24,119,242,.45); }
.ars-hover-glow .ars-x:hover        { box-shadow: 0 0 14px rgba(0,0,0,.35); }
.ars-hover-glow .ars-mastodon:hover { box-shadow: 0 0 14px rgba(99,100,255,.45); }
.ars-hover-glow .ars-instagram:hover{ box-shadow: 0 0 14px rgba(225,48,108,.45); }
.ars-hover-glow .ars-youtube:hover  { box-shadow: 0 0 14px rgba(255,0,0,.4); }
.ars-hover-glow .ars-spotify:hover  { box-shadow: 0 0 14px rgba(29,185,84,.4); }

/* Rəng aksenti — default hover (lift ilə birlikdə işləyir) */
.ars-btn:hover { background-color: var(--ars-hover-bg, var(--ars-bg)); }
.ars-theme-light .ars-facebook:hover,
.ars-theme-dark  .ars-facebook:hover  { --ars-hover-bg: #dde8f5; color: #1877f2; }
.ars-theme-light .ars-x:hover,
.ars-theme-dark  .ars-x:hover         { --ars-hover-bg: #e5e5e5; color: #000; }
.ars-theme-light .ars-mastodon:hover,
.ars-theme-dark  .ars-mastodon:hover  { --ars-hover-bg: #dde8f7; color: #6364ff; }
.ars-theme-light .ars-instagram:hover,
.ars-theme-dark  .ars-instagram:hover { --ars-hover-bg: #fde8f0; color: #e1306c; }
.ars-theme-light .ars-youtube:hover,
.ars-theme-dark  .ars-youtube:hover   { --ars-hover-bg: #fde8e8; color: #ff0000; }
.ars-theme-light .ars-spotify:hover,
.ars-theme-dark  .ars-spotify:hover   { --ars-hover-bg: #e0f5e9; color: #1db954; }

/* dark theme hover rəng düzəliş */
.ars-theme-dark .ars-facebook:hover  { --ars-hover-bg: #1c2d45; color: #5b9cf6; }
.ars-theme-dark .ars-x:hover         { --ars-hover-bg: #2a2a2a; color: #fff; }
.ars-theme-dark .ars-mastodon:hover  { --ars-hover-bg: #1e2045; color: #8b8dff; }
.ars-theme-dark .ars-instagram:hover { --ars-hover-bg: #3a1a25; color: #f06090; }
.ars-theme-dark .ars-youtube:hover   { --ars-hover-bg: #3a1a1a; color: #ff6060; }
.ars-theme-dark .ars-spotify:hover   { --ars-hover-bg: #0f2e1a; color: #1db954; }

/* Active */
.ars-btn:active {
    transform: scale(0.95) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.08) !important;
}

/* Focus */
.ars-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ── Tooltip (label göstər) ───────────────────────────────── */
.ars-tooltip .ars-btn {
    position: relative;
}
.ars-tooltip .ars-btn::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(0,0,0,.78);
    color: #fff;
    font-size: 11px;
    font-family: inherit;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 100;
}
.ars-tooltip .ars-btn:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 480px) {
    .ars-wrap { gap: 10px; }
    .ars-size-lg .ars-btn { width: 56px; height: 56px; border-radius: 16px; }
    .ars-size-lg .ars-btn svg { width: 22px; height: 22px; }
}