/* ==========================================================================
   WEYWOT SOCIAL DOCK v7.0 - ROUNDED MASTER
   ========================================================================== */

:root {
    --d-size: 55px;
    --d-gap: 8px;
    --d-radius: 14px; /* Ten idealny łuk */
    
    /* KOLORY MAREK */
    --c-fb: #1877F2;
    --c-ig: #E1306C;
    --c-tik: #000000;
    --c-in: #0077B5;
    --c-yt: #FF0000;
    --c-x: #0f1419;
    --c-pin: #BD081C;
    --c-mail: #FFA500;
    --c-biz: #444444;
}

/* KONTENER */
.weywot-dock-wrapper {
    position: fixed; left: 0; top: 50%; transform: translateY(-50%);
    z-index: 99990; display: flex; flex-direction: column;
}

/* LISTA (BAZA DLA WSZYSTKICH STYLI) */
.dock-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: var(--d-gap);
    padding-left: 5px; /* Lekki odstęp od krawędzi ekranu */
}

/* ELEMENT (BAZA) */
.dock-item {
    position: relative; width: var(--d-size); height: var(--d-size);
    transition: 0.3s;
}

.dock-item a {
    display: flex; align-items: center;
    width: 100%; height: 100%;
    text-decoration: none;
    position: relative; overflow: hidden;
    border-radius: var(--d-radius); /* Rounded */
    box-shadow: 2px 4px 10px rgba(0,0,0,0.2);
    transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s, background-color 0.3s;
}

.icon-box {
    width: var(--d-size); height: var(--d-size);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; z-index: 2;
}

.dock-icon {
    font-family: "dashicons" !important;
    font-size: 26px; width: 26px; height: 26px;
    transition: 0.3s;
}

.dock-label {
    white-space: nowrap; font-weight: 800; font-size: 14px;
    padding-right: 20px; opacity: 0; padding-left: 5px;
    transition: opacity 0.2s 0.1s;
    text-transform: uppercase; letter-spacing: 0.5px;
}

/* HOVER (WYSYWANIE - EFEKT WOW) */
.dock-item:hover { z-index: 100; }
.dock-item:hover a { width: 210px; transform: translateX(5px); }
.dock-item:hover .dock-label { opacity: 1; }
.dock-item:hover .dock-icon { transform: scale(1.1); }


/* ==========================================================================
   4 WARIANTY ROUNDED
   ========================================================================== */

/* --- 1. ROUNDED DARK (Ten idealny, domyślny) --- */
.style-rounded-dark .dock-item a { background-color: #1a1a1a; color: #fff; border: 1px solid rgba(255,255,255,0.1); }
.style-rounded-dark .dock-icon { color: #fff; }

/* Kolor na Hover */
.style-rounded-dark .dock-item.facebook:hover a { background: var(--c-fb); border-color: var(--c-fb); }
.style-rounded-dark .dock-item.instagram:hover a { background: linear-gradient(45deg, #f09433, #bc1888); border-color: #bc1888; }
.style-rounded-dark .dock-item.tiktok:hover a { background: var(--c-tik); border-color: #333; }
.style-rounded-dark .dock-item.linkedin:hover a { background: var(--c-in); border-color: var(--c-in); }
.style-rounded-dark .dock-item.youtube:hover a { background: var(--c-yt); border-color: var(--c-yt); }
.style-rounded-dark .dock-item.twitter:hover a { background: var(--c-x); border-color: var(--c-x); }
.style-rounded-dark .dock-item.email:hover a { background: var(--c-mail); border-color: var(--c-mail); }
.style-rounded-dark .dock-item.biz-card:hover a { background: var(--c-biz); border-color: #666; }


/* --- 2. ROUNDED VIVID (Zawsze Kolorowe) --- */
.style-rounded-vivid .dock-item a { color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.style-rounded-vivid .dock-icon { color: #fff; }

/* Kolory stałe */
.style-rounded-vivid .dock-item.facebook a { background: var(--c-fb); }
.style-rounded-vivid .dock-item.instagram a { background: linear-gradient(45deg, #f09433, #bc1888); }
.style-rounded-vivid .dock-item.tiktok a { background: var(--c-tik); border-color: #333; }
.style-rounded-vivid .dock-item.linkedin a { background: var(--c-in); }
.style-rounded-vivid .dock-item.youtube a { background: var(--c-yt); }
.style-rounded-vivid .dock-item.twitter a { background: var(--c-x); }
.style-rounded-vivid .dock-item.email a { background: var(--c-mail); }
.style-rounded-vivid .dock-item.biz-card a { background: var(--c-biz); }


/* --- 3. ROUNDED WHITE (Czysty Minimalizm) --- */
.style-rounded-white .dock-item a { 
    background-color: #ffffff; color: #1a1a1a; 
    border: 1px solid #eee;
    box-shadow: 2px 4px 15px rgba(0,0,0,0.1); 
}
.style-rounded-white .dock-icon { color: #1a1a1a; }
.style-rounded-white .dock-label { color: #1a1a1a; }

/* Kolor ikony na Hover */
.style-rounded-white .dock-item.facebook:hover .dock-icon { color: var(--c-fb); }
.style-rounded-white .dock-item.youtube:hover .dock-icon { color: var(--c-yt); }
/* Tło delikatnie szare na hover */
.style-rounded-white .dock-item:hover a { background-color: #f9f9f9; }


/* --- 4. ROUNDED GLASS (Szkło / Glassmorphism) --- */
.style-rounded-glass .dock-item a {
    background: rgba(30, 30, 30, 0.6); /* Półprzezroczyste ciemne */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}
.style-rounded-glass .dock-icon { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.5); }

/* Efekt rozświetlenia na hover */
.style-rounded-glass .dock-item:hover a {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}


/* ==========================================================================
   WIZYTÓWKA (DANE WEWNĄTRZ)
   ========================================================================== */
/* Fix dla wizytówki, żeby tekst był ładny */
.biz-info {
    display: flex; flex-direction: column; justify-content: center;
    line-height: 1.2; font-size: 12px; padding-top: 2px;
}
.b-name { font-weight: 900; text-transform: uppercase; font-size: 13px; }
.b-owner { font-size: 11px; font-weight: normal; opacity: 0.8; margin-bottom: 2px; }
.b-phone { font-size: 12px; font-weight: bold; color: #81d742; }

/* Kolor telefonu w stylu białym musi być ciemniejszy */
.style-rounded-white .b-phone { color: #2ecc71; }


/* ==========================================================================
   WHATSAPP & MOBILE (BEZ ZMIAN - DZIAŁA DOBRZE)
   ========================================================================== */
#weywot-whatsapp-bubble {
    position: fixed; bottom: 30px; right: 30px; z-index: 99999;
    display: flex; flex-direction: row-reverse; align-items: center; gap: 15px;
}
#weywot-whatsapp-bubble a { text-decoration: none; display: flex; align-items: center; flex-direction: row-reverse; }

.bubble-icon {
    width: 50px; height: 50px; background: #25D366; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; border: 2px solid #fff;
    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.6);
    animation: pulse-wa 1.5s infinite; transition: transform 0.3s;
}
.bubble-icon .dashicons { font-family: "dashicons"; font-size: 28px; width: 28px; height: 28px; }
#weywot-whatsapp-bubble:hover .bubble-icon { transform: scale(1.1); }

.bubble-text {
    background: #fff; color: #333; padding: 8px 15px; border-radius: 8px;
    font-weight: 800; font-size: 13px; font-family: sans-serif;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); white-space: nowrap; margin-right: 12px;
    position: relative;
}
.bubble-text::after {
    content: ''; position: absolute; top: 50%; right: -6px; transform: translateY(-50%);
    border-width: 6px 0 6px 6px; border-style: solid; border-color: transparent transparent transparent #fff;
}

@keyframes pulse-wa {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* MOBILE */
#dock-toggle { display: none; position: absolute; left: 100%; top: 0; background: #81d742; border: none; padding: 10px; }
@media (max-width: 768px) {
    .weywot-dock-wrapper { left: -60px; transition: 0.3s; }
    .weywot-dock-wrapper.active { left: 0; }
    #dock-toggle { display: block; }
    .bubble-text { display: none; }
    #weywot-whatsapp-bubble { bottom: 20px; right: 20px; }
}