/**
 * Social Login Styles - wh_sociallogin
 *
 * Clean, modern design compatible with Hummingbird theme.
 * Follows Google & Facebook brand guidelines for button styling.
 *
 * ⚠️ STANDARD MODULU wh_* (kanon: „panel Vue + front w pelni na tokenach"):
 * kazda wartosc wygladowa idzie przez `var(--wh-*, <dotychczasowa wartosc>)`,
 * zeby branza mogla ja przestawic BEZ dotykania tego pliku. Fallback = to, co
 * bylo wczesniej, wiec sama migracja niczego nie zmienia wizualnie.
 *
 * ⚠️ KOLORY MAREK to osobna sprawa. Facebook Blue, czern Apple i neutralne tlo
 * przycisku Google sa NARZUCONE wytycznymi tych firm — nie wolno ich podpiac
 * pod `--wh-color-primary` branzy, bo sklep dostalby fioletowy przycisk
 * „Zaloguj przez Facebook". Dostaja wiec WLASNE tokeny (`--wh-sl-fb-*`,
 * `--wh-sl-apple-*`, `--wh-sl-google-*`) z fallbackiem rownym kolorowi marki:
 * domyslnie wygladaja zgodnie z wytycznymi, ale sklep MOZE je nadpisac
 * swiadomie (np. wlasny tryb ciemny).
 *
 * @author    Woohoo.pl
 * @copyright 2025 Woohoo.pl
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0
 */

/* ─────────────── Tokeny lokalne modulu ─────────────── */
/* Kazdy bierze z tokenu globalnego; hex tylko jako fallback. */

.wh-social-login {
    /* Neutralny przycisk (Google + baza) */
    --wh-sl-btn-bg: var(--wh-color-bg-base, #fff);
    --wh-sl-btn-bd: var(--wh-color-border, #dadce0);
    /* ⚠️ TEKST PODSTAWOWY = `--wh-color-text-primary`, nic innego.
       `--wh-color-text` ORAZ `--wh-color-dark` to ALIASY wstecznej zgodnosci
       (potwierdzone przez CI-CD, brief 2026-07-27): pierwszy wskazuje tekst
       POMOCNICZY, bo w starym schemacie `color.text` tak znaczylo. Podpiecie
       przycisku pod `--wh-color-text` dalo w branzy Fashion kontrast 3.45:1
       na bialym — ponizej WCAG AA (przed tokenizacja bylo 10.47:1).
       `--wh-color-text-primary` = #40362e = 11.76:1. Zmierzone w Chrome. */
    --wh-sl-btn-text: var(--wh-color-text-primary, #3c4043);
    --wh-sl-btn-bg-hover: var(--wh-color-bg-subtle, #f8f9fa);
    --wh-sl-btn-bd-hover: var(--wh-color-border-strong, #c4c7cc);
    --wh-sl-btn-bg-active: var(--wh-color-bg-muted, #f1f3f4);

    /* Separator „lub" */
    --wh-sl-divider-line: var(--wh-color-border-subtle, #e0e0e0);
    --wh-sl-divider-text: var(--wh-color-text-muted, #757575);

    /* Kolory marek — fallback = wartosc wymagana wytycznymi */
    --wh-sl-google-bg: var(--wh-sl-brand-google-bg, #fff);
    --wh-sl-google-bg-hover: var(--wh-sl-brand-google-bg-hover, #f7f8f8);
    --wh-sl-fb-bg: var(--wh-sl-brand-facebook-bg, #1877F2);
    --wh-sl-fb-bg-hover: var(--wh-sl-brand-facebook-bg-hover, #166fe5);
    --wh-sl-fb-bg-active: var(--wh-sl-brand-facebook-bg-active, #1469d4);
    --wh-sl-fb-text: var(--wh-sl-brand-facebook-text, #fff);
    --wh-sl-apple-bg: var(--wh-sl-brand-apple-bg, #000);
    --wh-sl-apple-bg-hover: var(--wh-sl-brand-apple-bg-hover, #1a1a1a);
    --wh-sl-apple-bg-active: var(--wh-sl-brand-apple-bg-active, #333);
    --wh-sl-apple-text: var(--wh-sl-brand-apple-text, #fff);

    /* Ksztalt i typografia */
    --wh-sl-radius: var(--wh-radius-md, 8px);
    --wh-sl-btn-height: var(--wh-sl-btn-height-desktop, 48px);
    --wh-sl-btn-font: var(--wh-font-size-sm, 0.9375rem);
    --wh-sl-btn-weight: var(--wh-font-weight-medium, 500);
    --wh-sl-shadow-hover: var(--wh-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
    --wh-sl-focus: var(--wh-color-focus, #4285F4);
}

/* ─────────────── Container ─────────────── */

.wh-social-login {
    width: 100%;
    margin: var(--wh-space-md, 1.5rem) 0;
}

.wh-social-login--checkout {
    margin: 0 0 var(--wh-space-md, 1.5rem);
}

.wh-social-login--register {
    margin: 0 0 var(--wh-space-sm, 1rem);
}

/* ─────────────── Divider ─────────────── */

.wh-social-login__divider {
    display: flex;
    align-items: center;
    gap: var(--wh-space-sm, 1rem);
    margin-bottom: var(--wh-space-md, 1.25rem);
}

/* Register & Checkout: divider is below buttons, space above not below */
.wh-social-login--register .wh-social-login__divider,
.wh-social-login--checkout .wh-social-login__divider {
    margin-top: var(--wh-space-lg, 1.75rem);
    margin-bottom: var(--wh-space-xs, 0.5rem);
}

.wh-social-login__divider::before,
.wh-social-login__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--wh-sl-divider-line);
}

.wh-social-login__divider-text {
    font-family: var(--wh-font-body, inherit);
    font-size: var(--wh-font-size-xs, 0.8125rem);
    font-weight: var(--wh-font-weight-medium, 500);
    color: var(--wh-sl-divider-text);
    text-transform: uppercase;
    letter-spacing: var(--wh-letter-spacing-wide, 0.05em);
    white-space: nowrap;
    line-height: 1;
}

/* ─────────────── Buttons Container ─────────────── */

.wh-social-login__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--wh-space-xs, 0.75rem);
}

/* Icon-only mode: horizontal layout */
.wh-social-login--icon .wh-social-login__buttons {
    flex-direction: row;
    justify-content: center;
    gap: var(--wh-space-sm, 1rem);
}

/* ─────────────── Button Base ─────────────── */

.wh-social-login__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wh-space-xs, 0.75rem);
    width: 100%;
    min-height: var(--wh-sl-btn-height);
    padding: 0 var(--wh-space-md, 1.25rem);
    border: 1px solid var(--wh-sl-btn-bd);
    border-radius: var(--wh-sl-radius);
    background-color: var(--wh-sl-btn-bg);
    color: var(--wh-sl-btn-text);
    font-family: var(--wh-font-body, inherit);
    font-size: var(--wh-sl-btn-font);
    font-weight: var(--wh-sl-btn-weight);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease,
                transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    box-sizing: border-box;
}

.wh-social-login__btn:hover {
    text-decoration: none;
    border-color: var(--wh-sl-btn-bd-hover);
    background-color: var(--wh-sl-btn-bg-hover);
    box-shadow: var(--wh-sl-shadow-hover);
}

.wh-social-login__btn:active {
    transform: scale(0.985);
    box-shadow: none;
    background-color: var(--wh-sl-btn-bg-active);
}

.wh-social-login__btn:focus-visible {
    outline: 2px solid var(--wh-sl-focus);
    outline-offset: 2px;
}

/* Icon-only variant */
.wh-social-login--icon .wh-social-login__btn {
    width: var(--wh-sl-icon-size, 56px);
    height: var(--wh-sl-icon-size, 56px);
    min-height: auto;
    padding: 0;
    border-radius: 50%;
}

/* ─────────────── Button Icon ─────────────── */

.wh-social-login__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.wh-social-login__btn-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Icon-only: larger icons */
.wh-social-login--icon .wh-social-login__btn-icon svg {
    width: 24px;
    height: 24px;
}

/* ─────────────── Button Text ─────────────── */

.wh-social-login__btn-text {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─────────────── Google Button Specifics ─────────────── */

.wh-social-login__btn--google {
    border-color: var(--wh-sl-btn-bd);
    background-color: var(--wh-sl-google-bg);
    color: var(--wh-sl-btn-text);
}

.wh-social-login__btn--google:hover {
    background-color: var(--wh-sl-google-bg-hover);
    border-color: var(--wh-sl-btn-bd-hover);
    color: var(--wh-sl-btn-text);
}

/* ─────────────── Facebook Button Specifics ─────────────── */

.wh-social-login__btn--facebook {
    border-color: var(--wh-sl-fb-bg);
    background-color: var(--wh-sl-fb-bg);
    color: var(--wh-sl-fb-text);
}

.wh-social-login__btn--facebook:hover {
    background-color: var(--wh-sl-fb-bg-hover);
    border-color: var(--wh-sl-fb-bg-hover);
    color: var(--wh-sl-fb-text);
    box-shadow: var(--wh-sl-fb-shadow-hover, 0 2px 4px rgba(24, 119, 242, 0.25));
}

.wh-social-login__btn--facebook:active {
    background-color: var(--wh-sl-fb-bg-active);
    border-color: var(--wh-sl-fb-bg-active);
    color: var(--wh-sl-fb-text);
}

.wh-social-login__btn--facebook .wh-social-login__btn-icon svg path {
    fill: var(--wh-sl-fb-text);
}

/* Icon-only Facebook */
.wh-social-login--icon .wh-social-login__btn--facebook {
    background-color: var(--wh-sl-fb-bg);
    border-color: var(--wh-sl-fb-bg);
}

.wh-social-login--icon .wh-social-login__btn--facebook:hover {
    background-color: var(--wh-sl-fb-bg-hover);
    border-color: var(--wh-sl-fb-bg-hover);
}

/* Apple button – follows Apple Human Interface Guidelines */

.wh-social-login__btn--apple {
    border-color: var(--wh-sl-apple-bg);
    background-color: var(--wh-sl-apple-bg);
    color: var(--wh-sl-apple-text);
}

.wh-social-login__btn--apple:hover {
    background-color: var(--wh-sl-apple-bg-hover);
    border-color: var(--wh-sl-apple-bg-hover);
    color: var(--wh-sl-apple-text);
    box-shadow: var(--wh-sl-apple-shadow-hover, 0 2px 4px rgba(0, 0, 0, 0.2));
}

.wh-social-login__btn--apple:active {
    background-color: var(--wh-sl-apple-bg-active);
    border-color: var(--wh-sl-apple-bg-active);
    color: var(--wh-sl-apple-text);
}

.wh-social-login__btn--apple .wh-social-login__btn-icon svg path {
    fill: var(--wh-sl-apple-text);
}

/* Icon-only Apple */
.wh-social-login--icon .wh-social-login__btn--apple {
    background-color: var(--wh-sl-apple-bg);
    border-color: var(--wh-sl-apple-bg);
}

.wh-social-login--icon .wh-social-login__btn--apple:hover {
    background-color: var(--wh-sl-apple-bg-hover);
    border-color: var(--wh-sl-apple-bg-hover);
}

/* ─────────────── Checkout Context ─────────────── */

.wh-social-login--checkout .wh-social-login__buttons {
    flex-direction: row;
    flex-wrap: wrap;
}

.wh-social-login--checkout .wh-social-login__btn {
    flex: 1;
    min-width: var(--wh-sl-btn-min-width, 180px);
}

.wh-social-login--checkout .wh-social-login__divider {
    margin-bottom: var(--wh-space-sm, 1rem);
}

/* ─────────────── Responsive ─────────────── */

@media (max-width: 767px) {
    .wh-social-login {
        margin: var(--wh-space-md, 1.25rem) 0;
        --wh-sl-btn-height: var(--wh-sl-btn-height-mobile, 44px);
    }

    .wh-social-login__btn {
        font-size: var(--wh-font-size-xs, 0.875rem);
        gap: var(--wh-space-2xs, 0.625rem);
        padding: 0 var(--wh-space-sm, 1rem);
    }

    .wh-social-login--checkout .wh-social-login__buttons {
        flex-direction: column;
    }

    .wh-social-login--checkout .wh-social-login__btn {
        min-width: auto;
    }

    .wh-social-login--icon .wh-social-login__btn {
        width: var(--wh-sl-icon-size-mobile, 48px);
        height: var(--wh-sl-icon-size-mobile, 48px);
    }
}

/* ─────────────── Tryb ciemny ─────────────── */
/*
 * ⚠️ NAPRAWIONE 2026-07-27. Wczesniej ta sekcja odpalala sie na samo
 * `prefers-color-scheme: dark`, czyli na USTAWIENIE SYSTEMU KLIENTA — bez
 * pytania motywu. Skutek zmierzony na demo (branza Fashion, tlo strony biale):
 * przycisk „Zaloguj przez Google" renderowal sie CZARNY (#292a2d) posrodku
 * jasnej strony, wygladajac jak przycisk Apple. Klient z ciemnym systemem
 * widzial inny sklep niz klient z jasnym.
 *
 * Teraz o wygladzie decyduje MOTYW, nie system: ciemny wariant wchodzi dopiero,
 * gdy motyw sam sie deklaruje jako ciemny (`data-theme="dark"` albo
 * `data-wh-color-scheme="dark"` na <html>). Motyw jasny = przyciski jasne,
 * spojne ze sklepem — niezaleznie od ustawien systemu.
 */

@media (prefers-color-scheme: dark) {
    :root[data-theme="dark"] .wh-social-login,
    :root[data-wh-color-scheme="dark"] .wh-social-login {
        --wh-sl-divider-line: var(--wh-color-border-dark, #424242);
        --wh-sl-divider-text: var(--wh-color-text-muted-dark, #9e9e9e);
        --wh-sl-google-bg: var(--wh-sl-brand-google-bg-dark, #292a2d);
        --wh-sl-google-bg-hover: var(--wh-sl-brand-google-bg-hover-dark, #35363a);
        --wh-sl-btn-bd: var(--wh-color-border-dark, #5f6368);
        --wh-sl-btn-text: var(--wh-color-text-dark, #e8eaed);
        --wh-sl-btn-bd-hover: var(--wh-sl-brand-google-bd-hover-dark, #8ab4f8);
        /* Apple w trybie ciemnym odwraca sie na bialy — wymog HIG. */
        --wh-sl-apple-bg: var(--wh-sl-brand-apple-bg-dark, #fff);
        --wh-sl-apple-bg-hover: var(--wh-sl-brand-apple-bg-hover-dark, #e8e8e8);
        --wh-sl-apple-text: var(--wh-sl-brand-apple-text-dark, #000);
    }
}

/* ─────────────── Animation on load ─────────────── */

.wh-social-login__btn {
    animation: whSocialFadeIn var(--wh-motion-fast, 0.3s) ease-out both;
}

.wh-social-login__btn:nth-child(2) {
    animation-delay: 0.1s;
}

.wh-social-login__btn:nth-child(3) {
    animation-delay: 0.2s;
}

@keyframes whSocialFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ⚠️ Dostepnosc: kto ustawil w systemie „ogranicz ruch", nie ma dostawac
   animacji wejscia (WCAG 2.3.3). Zlapane przy okazji tokenizacji. */
@media (prefers-reduced-motion: reduce) {
    .wh-social-login__btn {
        animation: none;
    }
}

/* ─────────────── Loading Spinner ─────────────── */

.wh-social-login__btn--loading {
    pointer-events: none;
    opacity: 0.85;
}

.wh-social-login__spinner {
    animation: whSocialSpin 0.8s linear infinite;
}

@keyframes whSocialSpin {
    to {
        transform: rotate(360deg);
    }
}