/* ═══════════════════════════════════════════════
   Web Toolkit — Social Buttons (Frontend)
   ═══════════════════════════════════════════════ */

/* Alignment wrapper — controls where the button group sits
   (left/center/right) and how wide it is, independent of the
   buttons' own internal layout/styles below. */
.wt-social-buttons-wrap {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

/* Base */
.wt-social-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wt-sb-gap, 10px);
    align-items: stretch;
    margin: 16px 0;
    max-width: 100%;
}

.wt-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 6px;
    text-decoration: none !important;
    font-size: 13.5px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: all 0.25s ease;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,var(--wt-sb-shadow-opacity, 0.12));
    position: relative;
}

/* ─── Per-Button Width / Height ──────────────────
   Each button slot (WhatsApp, Follow Us, Preferred Source) has its
   own width/height CSS variables, defaulting to "auto" so the button
   keeps hugging its content exactly like before.

   For Style A/C/D (vertical/natural layout): width + height work normally.
   For Style B (flex:1 1 0 horizontal): we use a two-part fix —
     1. min-width/min-height: ensures the button never goes BELOW the set size
     2. The PHP inline style also sets --wt-sb-flex-* vars, and Style B
        buttons with an explicit size get flex:0 0 auto via data attribute
        so the flex algorithm doesn't override the explicit dimension.
   Zero Touch: all defaults are "auto" / "1 1 0" (original) */
.wt-whatsapp {
    min-width: var(--wt-sb-w-whatsapp, auto);
    min-height: var(--wt-sb-h-whatsapp, auto);
    justify-content: center;
}
.wt-google-news {
    min-width: var(--wt-sb-w-google-news, auto);
    min-height: var(--wt-sb-h-google-news, auto);
    justify-content: center;
}
.wt-google-source {
    min-width: var(--wt-sb-w-google-source, auto);
    min-height: var(--wt-sb-h-google-source, auto);
    justify-content: center;
}

/* When an explicit width is set via the slider, Style B buttons must
   NOT be allowed to flex-grow/shrink — otherwise the flex algorithm
   ignores the explicit size. PHP adds data-sized="1" to buttons that
   have a non-zero width or height set, triggering this rule. */
.style-b .wt-btn[data-sized="1"] {
    flex: 0 0 auto !important;
}

/* ─── Per-Button Padding ─────────────────────────
   Left/right padding for each button individually, controllable from
   the admin panel. Defaults preserve the original 9px 16px exactly. */
.wt-whatsapp {
    padding-left: var(--wt-sb-pl-whatsapp, 16px) !important;
    padding-right: var(--wt-sb-pr-whatsapp, 16px) !important;
}
.wt-google-news {
    padding-left: var(--wt-sb-pl-google-news, 16px) !important;
    padding-right: var(--wt-sb-pr-google-news, 16px) !important;
}
.wt-google-source {
    padding-left: var(--wt-sb-pl-google-source, 16px) !important;
    padding-right: var(--wt-sb-pr-google-source, 16px) !important;
}

/* ─── Professional Hover Colour ───────────────────
   One shared hover color/tint for every button across every style.
   Defaults to "transparent" (i.e. invisible / no-op) so existing sites
   see zero visual change until the admin actually picks a colour —
   the per-style :hover rules (brightness filters, custom shadows
   below) keep working exactly as before; this overlay simply adds an
   extra colour wash on top when one is configured. */
.wt-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--wt-sb-hover-color, transparent);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.wt-btn:hover::after {
    opacity: var(--wt-sb-hover-color-opacity, 0);
}

.style-b .wt-btn::after,
.style-c .wt-btn::after,
.style-d .wt-btn::after {
    border-radius: 6px;
}

/* ─── Hover Animation Variants ───────────────────
   Default ("lift") preserves the original behavior exactly:
   translateY(-2px) + a stronger shadow on hover. Scale/Glow/None
   are additional admin-selectable options; the data attribute
   on the wrapper picks which one applies, so the base .wt-btn:hover
   rule below only fires for the default/lift case. */
.wt-social-buttons[data-hover="lift"] .wt-btn:hover,
.wt-social-buttons:not([data-hover]) .wt-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,var(--wt-sb-shadow-opacity-hover, 0.18));
    text-decoration: none !important;
}

.wt-social-buttons[data-hover="scale"] .wt-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(0,0,0,var(--wt-sb-shadow-opacity-hover, 0.18));
    text-decoration: none !important;
}

.wt-social-buttons[data-hover="glow"] .wt-btn:hover {
    box-shadow: 0 0 0 3px rgba(99,102,241,0.35), 0 4px 14px rgba(0,0,0,var(--wt-sb-shadow-opacity-hover, 0.18));
    text-decoration: none !important;
}

.wt-social-buttons[data-hover="none"] .wt-btn:hover {
    text-decoration: none !important;
}

.wt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.wt-icon svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block;
    flex-shrink: 0;
}

.wt-icon img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    display: block;
}

.wt-label {
    line-height: 1;
}

/* ─── Color variables (per style) ───────────────
   Each style reads its background colors from CSS custom
   properties with sane defaults below. The admin's color
   picker overrides these via a small inline <style> block
   generated in PHP — the layout/shape rules never change,
   only the --wt-sb-*-bg values do. */
.wt-social-buttons {
    --wt-sb-a-whatsapp-bg: #25D366;
    --wt-sb-a-google-news-bg: #4285F4;
    --wt-sb-a-google-source-bg: #ffffff;

    --wt-sb-b-bg: #ffffff;

    --wt-sb-c-bg: #1a73e8;

    --wt-sb-d-bg: #1e1e2e;

    /* Spacing & shadow defaults match the plugin's original hardcoded
       values exactly — admin controls only override these, the visual
       baseline never shifts on update. */
    --wt-sb-gap: 10px;
    --wt-sb-shadow-opacity: 0.12;
    --wt-sb-shadow-opacity-hover: 0.18;
}

/* ─── STYLE A : Mixed Colors ─────────────────── */
.style-a .wt-whatsapp {
    background: var(--wt-sb-a-whatsapp-bg);
    color: #fff !important;
}
.style-a .wt-whatsapp:hover { filter: brightness(0.9); }

.style-a .wt-google-news {
    background: var(--wt-sb-a-google-news-bg);
    color: #fff !important;
}
.style-a .wt-google-news:hover { filter: brightness(0.9); }

.style-a .wt-google-source {
    background: var(--wt-sb-a-google-source-bg);
    color: #333 !important;
    border: 1.5px solid #dadce0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
.style-a .wt-google-source:hover { filter: brightness(0.97); }

/* ─── STYLE B : White Horizontal ─────────────────
   Buttons sit side-by-side in one row on every device —
   white background, black text/icons, with a soft backdrop
   shadow that lifts on hover. */
.style-b {
    flex-wrap: nowrap;
}

.style-b .wt-btn {
    background: var(--wt-sb-b-bg);
    color: #1a1a1a !important;
    flex: 1 1 0;
    justify-content: center;
    border: 1px solid #e5e7eb;
    box-shadow: 0 3px 10px rgba(0,0,0,var(--wt-sb-shadow-opacity, 0.10)), 0 1px 3px rgba(0,0,0,var(--wt-sb-shadow-opacity, 0.08));
}

.style-b .wt-btn:hover {
    filter: brightness(0.96);
    box-shadow: 0 6px 18px rgba(0,0,0,var(--wt-sb-shadow-opacity-hover, 0.16)), 0 2px 6px rgba(0,0,0,var(--wt-sb-shadow-opacity-hover, 0.10));
}

/* ─── STYLE C : Blue Professional ───────────── */
.style-c .wt-btn {
    background: var(--wt-sb-c-bg);
    color: #fff !important;
}
.style-c .wt-btn:hover { filter: brightness(0.9); }

/* ─── STYLE D : Dark Premium ─────────────────── */
.style-d .wt-btn {
    background: var(--wt-sb-d-bg);
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.08);
}
.style-d .wt-btn:hover { filter: brightness(1.25); }

/* ─── Mobile ─────────────────────────────────── */
@media (max-width: 480px) {
    .wt-social-buttons:not(.style-b) {
        flex-direction: column;
        align-items: stretch;
    }
    .wt-social-buttons:not(.style-b) .wt-btn {
        justify-content: center;
        padding: 11px 16px;
        font-size: 14px;
    }

    /* Style B stays horizontal on every screen size, just
       tightens up so three buttons still fit comfortably.
       Longer labels (like "Add as Preferred Source") wrap
       onto a second line instead of being clipped/cut off. */
    .style-b .wt-btn {
        padding: 8px 6px;
        font-size: 11.5px;
        gap: 5px;
        min-width: 0;
        white-space: normal;
        text-align: center;
        line-height: 1.25;
        align-items: center;
    }
    .style-b .wt-icon {
        flex-shrink: 0;
    }
    .style-b .wt-label {
        white-space: normal;
        word-break: break-word;
        min-width: 0;
    }
}