/* Sleek Links v2.1 – Public */

/* ── Base wrapper: always transparent so page backgrounds show through ── */
.sleek-links-wrap {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    background: transparent;
    /* Ensure Elementor containers don't block backdrop-filter */
    isolation: auto;
}
.sl-content {
    position: relative;
    z-index: 1;
    padding: 40px 24px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Avatar */
.sl-avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin: 0 auto 16px; border: 3px solid rgba(255,255,255,.35); }
.sl-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Text */
.sl-name { font-size: 22px; font-weight: 700; margin: 0 0 7px; line-height: 1.2; }
.sl-bio  { font-size: 14px; margin: 0 0 24px; line-height: 1.55; opacity: .8; }

/* Links container */
.sl-links { display: flex; flex-direction: column; gap: 11px; }

/* Standard link */
.sl-link-standard { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 20px; border-radius: 12px; text-decoration: none; font-size: 15px; font-weight: 500; transition: transform .15s, box-shadow .15s; }
.sl-link-standard:hover  { transform: translateY(-2px); }
.sl-link-standard:active { transform: scale(.98); }
.sl-link-icon   { font-size: 17px; line-height: 1; flex-shrink: 0; }
.sl-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; }
.sl-emoji-icon  { font-size: 18px; }
.sl-link-label  { flex: 1; text-align: center; }

/* Card link */
.sl-link-card        { display: flex; align-items: center; border-radius: 12px; text-decoration: none; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.sl-link-card:hover  { transform: translateY(-2px); }
.sl-link-card:active { transform: scale(.98); }
.sl-card-thumb  { width: 88px; height: 76px; flex-shrink: 0; background-size: cover; background-position: center; }
.sl-card-body   { flex: 1; padding: 10px 14px; text-align: left; }
.sl-card-title  { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.sl-card-desc   { display: block; font-size: 12px; opacity: .65; margin-top: 3px; line-height: 1.4; }
.sl-card-arrow  { padding: 0 14px 0 8px; font-size: 16px; opacity: .5; flex-shrink: 0; }

/* Accordion */
.sl-link-accordion { border-radius: 12px; overflow: hidden; }
.sl-accordion-trigger { width: 100%; display: flex; align-items: center; gap: 9px; padding: 14px 16px; background: none; border: none; cursor: pointer; font-size: 15px; font-weight: 500; text-align: left; transition: background .14s; }
.sl-accordion-trigger:hover { filter: brightness(.96); }
.sl-accordion-label { flex: 1; }
.sl-accordion-arrow { flex-shrink: 0; transition: transform .2s; display: flex; }
.sl-accordion-trigger[aria-expanded=true] .sl-accordion-arrow { transform: rotate(180deg); }
.sl-accordion-body  { padding: 0 16px 14px; }
.sl-accordion-text  { font-size: 14px; line-height: 1.6; opacity: .8; margin-bottom: 8px; }
.sl-accordion-links { display: flex; flex-direction: column; gap: 6px; }
.sl-accordion-sub-link { display: block; font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: 8px; text-decoration: none; background: rgba(0,0,0,.06); transition: background .14s; }
.sl-accordion-sub-link:hover { background: rgba(0,0,0,.1); }

/* Header / Divider */
.sl-header-divider { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; opacity: .55; padding: 10px 0 4px; text-align: center; }

/* Socials */
.sl-socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 18px 0 4px; }
.sl-social-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.08); color: inherit; text-decoration: none; transition: background .15s, transform .15s; }
.sl-social-btn:hover { background: var(--sc, rgba(0,0,0,.15)); color: #fff; transform: scale(1.1); }
.sl-social-btn svg { flex-shrink: 0; }

/* ════════════ PRESET THEMES ════════════ */

/* MINIMAL */
.sleek-links-theme-minimal .sl-content { background: #f8fafc; border-radius: 16px; }
.sleek-links-theme-minimal .sl-name { color: #0f172a; }
.sleek-links-theme-minimal .sl-bio  { color: #475569; }
.sleek-links-theme-minimal .sl-link-standard,
.sleek-links-theme-minimal .sl-link-card,
.sleek-links-theme-minimal .sl-link-accordion { background: #fff; color: #1e293b; border: 1px solid #e2e8f0; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.sleek-links-theme-minimal .sl-link-standard:hover,
.sleek-links-theme-minimal .sl-link-card:hover { border-color: #a78bfa; box-shadow: 0 4px 12px rgba(124,58,237,.1); }
.sleek-links-theme-minimal .sl-accordion-trigger { background: #fff; color: #1e293b; }

/* DARK */
.sleek-links-theme-dark .sl-content { background: #0f172a; border-radius: 16px; }
.sleek-links-theme-dark .sl-name { color: #f8fafc; }
.sleek-links-theme-dark .sl-bio  { color: #94a3b8; }
.sleek-links-theme-dark .sl-link-standard,
.sleek-links-theme-dark .sl-link-card,
.sleek-links-theme-dark .sl-link-accordion { background: #1e293b; color: #f1f5f9; border: 1px solid #334155; }
.sleek-links-theme-dark .sl-link-standard:hover,
.sleek-links-theme-dark .sl-link-card:hover { border-color: #7c3aed; box-shadow: 0 4px 16px rgba(124,58,237,.2); }
.sleek-links-theme-dark .sl-accordion-trigger { background: #1e293b; color: #f1f5f9; }
.sleek-links-theme-dark .sl-avatar { border-color: #334155; }
.sleek-links-theme-dark .sl-social-btn { background: rgba(255,255,255,.1); }

/* GRADIENT */
.sleek-links-theme-gradient .sl-content { background: linear-gradient(145deg,#7c3aed,#db2777); border-radius: 16px; color: #fff; }
.sleek-links-theme-gradient .sl-link-standard,
.sleek-links-theme-gradient .sl-link-card,
.sleek-links-theme-gradient .sl-link-accordion { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.sleek-links-theme-gradient .sl-link-standard:hover,
.sleek-links-theme-gradient .sl-link-card:hover { background: rgba(255,255,255,.28); }
.sleek-links-theme-gradient .sl-accordion-trigger { background: rgba(255,255,255,.18); color: #fff; }
.sleek-links-theme-gradient .sl-social-btn { background: rgba(255,255,255,.2); }

/* NATURE */
.sleek-links-theme-nature .sl-content { background: linear-gradient(160deg,#052e16,#166534); border-radius: 16px; color: #f0fdf4; }
.sleek-links-theme-nature .sl-link-standard,
.sleek-links-theme-nature .sl-link-card,
.sleek-links-theme-nature .sl-link-accordion { background: rgba(255,255,255,.12); color: #f0fdf4; border: 1px solid rgba(74,222,128,.3); }
.sleek-links-theme-nature .sl-link-standard:hover,
.sleek-links-theme-nature .sl-link-card:hover { background: rgba(255,255,255,.22); border-color: #4ade80; }
.sleek-links-theme-nature .sl-accordion-trigger { background: rgba(255,255,255,.12); color: #f0fdf4; }

/* SUNSET */
.sleek-links-theme-sunset .sl-content { background: linear-gradient(145deg,#7c2d12,#ea580c,#fbbf24); border-radius: 16px; color: #fff; }
.sleek-links-theme-sunset .sl-link-standard,
.sleek-links-theme-sunset .sl-link-card,
.sleek-links-theme-sunset .sl-link-accordion { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.sleek-links-theme-sunset .sl-link-standard:hover,
.sleek-links-theme-sunset .sl-link-card:hover { background: rgba(255,255,255,.25); }
.sleek-links-theme-sunset .sl-accordion-trigger { background: rgba(255,255,255,.15); color: #fff; }

/* ════════════ CUSTOM THEME ════════════
   Every ancestor of .sl-card-wrap must be transparent for
   backdrop-filter (glass/frosted) to see through to the page background.
   We force transparent + no background on the whole chain here.
   Elementor sets background on its section/column wrappers — we can't
   override those, but backdrop-filter will still work as long as our
   own elements don't block it.
════════════════════════════════════════ */
.sleek-links-theme-custom,
.sleek-links-theme-custom .sl-content {
    background: transparent !important;
    padding: 0 !important;
}

/* The floating card */
.sleek-links-theme-custom .sl-card-wrap {
    position: relative;
    text-align: center;
    /* Generous padding so content breathes inside the card */
    padding: 40px 28px 44px;
    /* Margin so the card doesn't hug the edges of the page/column */
    margin: 0 auto;
    max-width: 480px;
    /* Box-sizing so padding doesn't overflow */
    box-sizing: border-box;
    /* overflow:hidden is intentionally NOT set here —
       it would clip box-shadow. Instead we clip via border-radius alone. */
}

/* Responsive */
@media (max-width: 520px) {
    .sl-content { padding: 28px 14px; }
    .sl-name { font-size: 20px; }
    .sl-link-standard, .sl-accordion-trigger { padding: 12px 16px; font-size: 14px; }
    .sl-card-thumb { width: 72px; height: 64px; }
    .sleek-links-theme-custom .sl-card-wrap { padding: 28px 18px 32px; }
}