/**
 * Стили виджета социальных сетей TRDS
 *
 * @package TRDS_Social_Widget
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */

.trds-social-widget {
    --trds-sw-color: #8b4513;
    --trds-sw-text-bg: #2d3748;
    --trds-sw-text-color: #fff;
    --trds-sw-icon-color: #fff;
    --trds-sw-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --trds-sw-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.2);
    --trds-sw-text-radius: 26px;
    --trds-sw-icon-size: clamp(52px, 5vw, 57px);
    --trds-sw-icon-inner-size: clamp(26px, 2.5vw, 29px);
    --trds-sw-gap: 0;
    --trds-sw-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --trds-sw-font-size: clamp(16px, 1.5vw, 17px);
    --trds-sw-offset: 20px;
    --trds-sw-text-height: clamp(42px, 4vw, 47px);
}

/* ==========================================================================
   Widget Container
   ========================================================================== */

.trds-social-widget {
    position: fixed;
    bottom: var(--trds-sw-offset);
    z-index: 9990;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.trds-social-widget[data-position="left"] {
    align-items: flex-start;
}

/* Позиционирование */
.trds-social-widget[data-position="right"] {
    right: var(--trds-sw-offset);
}

.trds-social-widget[data-position="left"] {
    left: var(--trds-sw-offset);
}

/* ==========================================================================
   Trigger Button (Closed State)
   ========================================================================== */

.trds-social-widget__trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    height: var(--trds-sw-icon-size);
    transition: opacity var(--trds-sw-transition);
}

/* Trigger Item (каждая социальная сеть в закрытом состоянии) */
.trds-social-widget__trigger-item {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    gap: var(--trds-sw-gap);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--trds-sw-transition), visibility var(--trds-sw-transition);
}

.trds-social-widget__trigger-item.is-active {
    opacity: 1;
    visibility: visible;
}

/* Text внутри trigger - темный фон слева */
.trds-social-widget__trigger-text {
    display: flex;
    align-items: center;
    height: var(--trds-space-10);
    padding: 0 21px;
    padding-right: calc(var(--trds-sw-icon-size) / 2 + 16px);
    margin-right: calc(var(--trds-sw-icon-size) / 2 * -1);
    background-color: var(--trds-sw-text-bg);
    color: var(--trds-sw-text-color);
    font-size: var(--trds-sw-font-size);
    font-weight: 500;
    white-space: nowrap;
    border-radius: var(--trds-sw-text-radius);
    box-shadow: var(--trds-sw-shadow);
}

/* Icon внутри trigger - круглый цветной фон справа */
.trds-social-widget__trigger-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--trds-sw-icon-size);
    height: var(--trds-sw-icon-size);
    background-color: var(--trds-sw-color);
    border-radius: 50%;
    box-shadow: var(--trds-sw-shadow);
    flex-shrink: 0;
    transition: transform var(--trds-sw-transition), box-shadow var(--trds-sw-transition);
    animation: trds-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.trds-social-widget__trigger-icon svg {
    width: var(--trds-sw-icon-inner-size);
    height: var(--trds-sw-icon-inner-size);
    color: var(--trds-sw-icon-color);
}

.trds-social-widget__trigger:hover .trds-social-widget__trigger-icon {
    transform: scale(1.05);
    box-shadow: var(--trds-sw-shadow-hover);
}

/* ==========================================================================
   Panel (Open State)
   ========================================================================== */

.trds-social-widget__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 13px;
    padding-bottom: 18px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--trds-sw-transition), max-height var(--trds-sw-transition);
    overflow: visible;
}

/* Left position - align to left */
.trds-social-widget[data-position="left"] .trds-social-widget__panel {
    align-items: flex-start;
}

/* Показываем панель при наведении */
.trds-social-widget:hover .trds-social-widget__panel,
.trds-social-widget.is-open .trds-social-widget__panel {
    opacity: 1;
    max-height: 520px;
}

/* Скрываем trigger при открытой панели */
.trds-social-widget:hover .trds-social-widget__trigger,
.trds-social-widget.is-open .trds-social-widget__trigger {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   Link Buttons (в открытом состоянии)
   ========================================================================== */

.trds-social-widget__link {
    display: flex;
    align-items: center;
    gap: var(--trds-sw-gap);
    text-decoration: none;
    transition: transform var(--trds-sw-transition);
}

.trds-social-widget__link:hover {
    transform: translateX(-4px);
}

.trds-social-widget[data-position="left"] .trds-social-widget__link:hover {
    transform: translateX(4px);
}

.trds-social-widget__link:focus {
    outline: none;
}

.trds-social-widget__link:focus .trds-social-widget__link-icon {
    outline: 2px solid var(--trds-sw-color);
    outline-offset: 2px;
}

/* Text внутри link - темный фон слева */
.trds-social-widget__link-text {
    display: flex;
    align-items: center;
    height: var(--trds-sw-text-height);
    padding: 0 21px;
    padding-right: calc(var(--trds-sw-icon-size) / 2 + 16px);
    margin-right: calc(var(--trds-sw-icon-size) / 2 * -1);
    background-color: var(--trds-sw-text-bg);
    color: var(--trds-sw-text-color);
    font-size: var(--trds-sw-font-size);
    font-weight: 500;
    white-space: nowrap;
    border-radius: var(--trds-sw-text-radius);
    box-shadow: var(--trds-sw-shadow);
    transition: background-color var(--trds-sw-transition);
}

.trds-social-widget__link:hover .trds-social-widget__link-text {
    background-color: #1a202c;
}

/* Icon внутри link - круглый цветной фон справа */
.trds-social-widget__link-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--trds-sw-icon-size);
    height: var(--trds-sw-icon-size);
    background-color: var(--trds-sw-color);
    border-radius: 50%;
    box-shadow: var(--trds-sw-shadow);
    flex-shrink: 0;
    transition: transform var(--trds-sw-transition), box-shadow var(--trds-sw-transition);
}

.trds-social-widget__link-icon svg {
    width: var(--trds-sw-icon-inner-size);
    height: var(--trds-sw-icon-inner-size);
    color: var(--trds-sw-icon-color);
}

.trds-social-widget__link:hover .trds-social-widget__link-icon {
    transform: scale(1.1);
    box-shadow: var(--trds-sw-shadow-hover);
}

/* ==========================================================================
   Left Position Adjustments
   ========================================================================== */

.trds-social-widget[data-position="left"] .trds-social-widget__trigger-item {
    right: auto;
    left: 0;
    flex-direction: row-reverse;
}

.trds-social-widget[data-position="left"] .trds-social-widget__trigger-text {
    padding-right: 21px;
    padding-left: calc(var(--trds-sw-icon-size) / 2 + 16px);
    margin-right: 0;
    margin-left: calc(var(--trds-sw-icon-size) / 2 * -1);
}

.trds-social-widget[data-position="left"] .trds-social-widget__link {
    flex-direction: row-reverse;
}

.trds-social-widget[data-position="left"] .trds-social-widget__link-text {
    padding-right: 21px;
    padding-left: calc(var(--trds-sw-icon-size) / 2 + 16px);
    margin-right: 0;
    margin-left: calc(var(--trds-sw-icon-size) / 2 * -1);
}

/* ==========================================================================
   Social Network Colors
   ========================================================================== */

/* VK */
.trds-social-widget__trigger-item[data-social="vk"] .trds-social-widget__trigger-icon,
.trds-social-widget__link[data-social="vk"] .trds-social-widget__link-icon {
    background-color: #4a76a8;
}

/* MAX */
.trds-social-widget__trigger-item[data-social="max"] .trds-social-widget__trigger-icon,
.trds-social-widget__link[data-social="max"] .trds-social-widget__link-icon {
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
}

/* Phone */
.trds-social-widget__trigger-item[data-social="phone"] .trds-social-widget__trigger-icon,
.trds-social-widget__link[data-social="phone"] .trds-social-widget__link-icon {
    background-color: #22c55e;
}

/* Telegram */
.trds-social-widget__trigger-item[data-social="telegram"] .trds-social-widget__trigger-icon,
.trds-social-widget__link[data-social="telegram"] .trds-social-widget__link-icon {
    background-color: #0088cc;
}

/* ==========================================================================
   Pulse Animation Keyframes
   ========================================================================== */

@keyframes trds-pulse {
    0% {
        box-shadow: var(--trds-sw-shadow), 0 0 0 0 rgba(139, 69, 19, 0.7);
    }
    100% {
        box-shadow: var(--trds-sw-shadow), 0 0 0 20px rgba(139, 69, 19, 0);
    }
}

/* ==========================================================================
   Animation for staggered appearance
   ========================================================================== */

.trds-social-widget__panel .trds-social-widget__link:nth-child(1) {
    transition-delay: 0ms;
}

.trds-social-widget__panel .trds-social-widget__link:nth-child(2) {
    transition-delay: 50ms;
}

.trds-social-widget__panel .trds-social-widget__link:nth-child(3) {
    transition-delay: 100ms;
}

.trds-social-widget__panel .trds-social-widget__link:nth-child(4) {
    transition-delay: 150ms;
}

/* ==========================================================================
   Mobile Styles
   ========================================================================== */

/* Улучшение тач-цели на устройствах с грубым указателем */
@media (pointer: coarse) {
    .trds-social-widget__trigger {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
    }

    .trds-social-widget__trigger-item {
        pointer-events: all;
        cursor: pointer;
    }

    .trds-social-widget__trigger::after {
        content: '';
        position: absolute;
        inset: -10px;
        pointer-events: none;
    }

    .trds-social-widget__link {
        min-height: 48px;
        -webkit-tap-highlight-color: transparent;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .trds-social-widget,
    .trds-social-widget__trigger,
    .trds-social-widget__trigger-item,
    .trds-social-widget__trigger-icon,
    .trds-social-widget__panel,
    .trds-social-widget__link,
    .trds-social-widget__link-icon,
    .trds-social-widget__link-text {
        transition-duration: 0.01s !important;
        transition-delay: 0s !important;
    }

    .trds-social-widget__trigger-icon {
        animation: none !important;
    }

    .trds-social-widget__trigger:hover .trds-social-widget__trigger-icon,
    .trds-social-widget__link:hover,
    .trds-social-widget__link:hover .trds-social-widget__link-icon {
        transform: none;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .trds-social-widget {
        display: none !important;
    }
}