/* ================================================================
   WP Magnifier — Styles
   ================================================================ */

/* ── Кнопка-переключатель ─────────────────────────────────────── */

.wm-btn {
    position: fixed;
    z-index: 99998;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 1px 4px rgba(0,0,0,.15);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
    outline: none;
    padding: 0;
    background-color: var(--wm-color, #2563eb);
    color: #fff;
}
.wm-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.2);
}
.wm-btn:active {
    transform: scale(.96);
}

/* Активное состояние */
.wm-btn--active {
    background-color: #dc2626 !important;
    animation: wm-pulse 2s infinite;
}
@keyframes wm-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4), 0 4px 16px rgba(0,0,0,.25); }
    50%       { box-shadow: 0 0 0 10px rgba(220,38,38,.0), 0 4px 16px rgba(0,0,0,.25); }
}

/* Иконка внутри кнопки */
.wm-btn svg { pointer-events: none; }

/* Положения */
.wm-btn--bottom-right { bottom: 28px; right: 28px; }
.wm-btn--bottom-left  { bottom: 28px; left:  28px; }
.wm-btn--top-right    { top:    28px; right: 28px; }
.wm-btn--top-left     { top:    28px; left:  28px; }

/* ── Тултип подсказки ──────────────────────────────────────────── */

.wm-tooltip {
    position: absolute;
    white-space: nowrap;
    background: rgba(0,0,0,.75);
    color: #fff;
    font: 500 12px/1 system-ui, sans-serif;
    padding: 5px 10px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s, transform .2s;
}
.wm-btn--bottom-right .wm-tooltip,
.wm-btn--bottom-left  .wm-tooltip { bottom: calc(100% + 8px); }
.wm-btn--top-right    .wm-tooltip,
.wm-btn--top-left     .wm-tooltip { top: calc(100% + 8px); }
.wm-btn--bottom-right .wm-tooltip,
.wm-btn--top-right    .wm-tooltip { right: 0; }
.wm-btn--bottom-left  .wm-tooltip,
.wm-btn--top-left     .wm-tooltip { left: 0; }
.wm-btn:hover .wm-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* ── Изменение курсора при активной лупе ──────────────────────── */

body.wm-active,
body.wm-active * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='13' cy='13' r='9' fill='none' stroke='%23111' stroke-width='2.5'/%3E%3Ccircle cx='13' cy='13' r='9' fill='rgba(255,255,255,.15)' stroke='none'/%3E%3Cline x1='19.5' y1='19.5' x2='28' y2='28' stroke='%23111' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='13' cy='13' r='9' fill='none' stroke='white' stroke-width='.8'/%3E%3C/svg%3E") 13 13, zoom-in !important;
}
body.wm-active .wm-btn { cursor: pointer !important; }

/* ── Линза-лупа ────────────────────────────────────────────────── */

.wm-lens {
    position: fixed;
    z-index: 99999;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .18s ease, transform .18s ease;
    box-shadow:
        0 0 0 3px rgba(255,255,255,.9),
        0 0 0 5px rgba(0,0,0,.15),
        0 8px 32px rgba(0,0,0,.35),
        inset 0 0 0 1px rgba(255,255,255,.3);
    background: #fff;
    /* Небольшое глянцевое отражение */
    background-image: radial-gradient(
        ellipse at 35% 30%,
        rgba(255,255,255,.18) 0%,
        transparent 60%
    );
}
.wm-lens::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 30% 25%,
        rgba(255,255,255,.22) 0%,
        transparent 55%
    );
    z-index: 2;
    pointer-events: none;
}

.wm-lens--visible {
    opacity: 1;
    transform: scale(1);
}

/* Содержимое линзы */
.wm-lens-content {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 50%;
}

/* Перекрестие в центре линзы */
.wm-crosshair {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 14px; height: 14px;
    z-index: 3;
    pointer-events: none;
}
.wm-crosshair::before,
.wm-crosshair::after {
    content: '';
    position: absolute;
    background: rgba(0,0,0,.35);
    border-radius: 2px;
}
.wm-crosshair::before {
    width: 1px; height: 100%;
    left: 50%; top: 0; transform: translateX(-50%);
}
.wm-crosshair::after {
    height: 1px; width: 100%;
    top: 50%; left: 0; transform: translateY(-50%);
}

/* ── Подсветка цели (элемент, на который наведена лупа) ─────────── */

.wm-target-highlight {
    outline: 2px solid rgba(37,99,235,.45) !important;
    outline-offset: 2px !important;
    transition: outline .1s ease !important;
}