/* --- VIDNOK PREMIUM WIDGET (Elite Edition Final) --- */

:root {
    --ve-primary: #6366f1;       /* Indigo */
    --ve-primary-dark: #4f46e5;
    --ve-secondary: #8b5cf6;     /* Purple */
    --ve-surface: #ffffff;
    --ve-bg-subtle: #f8fafc;     /* Light Grey */
    --ve-text: #1e293b;          /* Dark Slate (Main Text) */
    --ve-text-muted: #64748b;
    --ve-border: #cbd5e1;        /* Visible Border */
    --ve-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.1);
    --ve-danger: #ef4444;        /* Red */
    --ve-success: #10b981;       /* Green */
    --ve-radius: 16px;
    
    /* Dynamic Variables */
    --ve-link-bg: #ffff00;
    --ve-text-color: #000000;
}

/* =========================================================
   1. TRIGGER (Floating Orb)
   ========================================================= */
div.ve-widget-trigger {
    position: fixed;
    bottom: 30px; left: 30px; 
    width: 56px; height: 56px;
    background: linear-gradient(135deg, var(--ve-primary), var(--ve-secondary));
    color: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; 
    cursor: move; 
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
    z-index: 99999; 
    user-select: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
    box-sizing: border-box;
}
div.ve-widget-trigger:hover {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 12px 30px rgba(99, 102, 241, 0.5);
}
div.ve-widget-trigger:active { transform: scale(0.95); cursor: grabbing; }

/* =========================================================
   2. PANEL (Glassmorphism + Solid Borders)
   ========================================================= */
div.ve-widget-panel, 
div.ve-widget-panel * {
    box-sizing: border-box !important;
    line-height: normal;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    white-space: normal;
    word-break: normal;
    word-wrap: normal;
    direction: ltr;
}

div.ve-widget-panel {
    position: fixed;
    width: 320px; max-width: 90vw;
    background: rgba(255, 255, 255, 0.98); 
    backdrop-filter: blur(12px); 
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 99998; 
    border: 1px solid rgba(255,255,255,0.6);
    
    opacity: 0; visibility: hidden;
    transform: scale(0.9) translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    text-align: left;
}

div.ve-widget-panel.ve-active {
    opacity: 1; visibility: visible; 
    transform: scale(1) translateY(0);
}

/* Header */
div.ve-widget-panel .ve-panel-header {
    background: linear-gradient(135deg, var(--ve-primary), var(--ve-secondary));
    color: white; padding: 18px 24px;
    display: flex; justify-content: space-between; align-items: center;
}

div.ve-widget-panel .ve-panel-header h3 { 
    margin: 0; font-size: 16px; font-weight: 700; 
    color: white; 
    letter-spacing: 0.5px;
    line-height: 1.2;
    font-family: inherit;
}

div.ve-widget-panel button#ve-close-panel {
    background: rgba(255,255,255,0.2); border: none; 
    width: 28px; height: 28px; border-radius: 50%; 
    color: white; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
    padding: 0;
    margin: 0;
}
div.ve-widget-panel button#ve-close-panel:hover { background: rgba(255,255,255,0.4); transform: rotate(90deg); }

div.ve-widget-panel .ve-panel-body { padding: 20px; max-height: 65vh; overflow-y: auto; }

/* =========================================================
   3. CONTROLS (High Specificity)
   ========================================================= */

div.ve-widget-panel .ve-control-row {
    display: flex; justify-content: space-between; align-items: center;
    background: white; 
    padding: 12px 16px; border-radius: 12px;
    margin-bottom: 12px; gap: 12px;
    
    border: 1px solid var(--ve-border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    transition: all 0.2s ease;
    color: var(--ve-text);
}

div.ve-widget-panel .ve-control-row:hover {
    border-color: var(--ve-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
}

/* Feature Buttons */
div.ve-widget-panel button.ve-feature-btn {
    background: none; border: none; display: flex; align-items: center; gap: 10px;
    font-weight: 600; color: var(--ve-text); cursor: pointer; font-size: 14px;
    padding: 0; width: 100%; text-align: left;
    transition: color 0.2s;
    font-family: inherit;
    margin: 0;
}
div.ve-widget-panel button.ve-feature-btn:hover { color: var(--ve-primary); }
div.ve-widget-panel button.ve-feature-btn.active { color: var(--ve-primary); }

/* Full Width Buttons */
div.ve-widget-panel button.ve-feature-btn.full {
    width: 100%; background: white; 
    padding: 14px; border-radius: 12px; margin-bottom: 8px;
    justify-content: center; 
    border: 1px solid var(--ve-border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    transition: all 0.2s ease;
}
div.ve-widget-panel button.ve-feature-btn.full:hover {
    border-color: var(--ve-primary);
    color: var(--ve-primary); 
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(99, 102, 241, 0.15);
}
div.ve-widget-panel button.ve-feature-btn.full.active {
    background: #eef2ff; color: var(--ve-primary); border-color: var(--ve-primary);
}

div.ve-widget-panel .ve-btn-admin-scan {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white; 
    border: none;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
    margin-top: 15px;
}
div.ve-widget-panel .ve-btn-admin-scan:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
    color: white;
}

/* Toggle Dot */
div.ve-widget-panel .ve-dot-toggle { 
    width: 12px; height: 12px; background: #cbd5e1; border-radius: 50%; 
    transition: 0.3s; 
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
div.ve-widget-panel .ve-feature-btn.active .ve-dot-toggle { 
    background: var(--ve-success); 
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
    transform: scale(1.2);
}

/* =========================================================
   4. LABELS & FONT BUTTONS
   ========================================================= */

div.ve-widget-panel .ve-label {
    font-weight: 700; font-size: 14px;
    color: var(--ve-text); display: flex; align-items: center; gap: 8px;
    letter-spacing: 0.3px;
    margin: 0;
}
div.ve-widget-panel .ve-label i { color: var(--ve-text-muted); }

/* Button Group */
div.ve-widget-panel .ve-btn-group { 
    display: flex; gap: 8px; 
    background: #f1f5f9; padding: 4px; border-radius: 8px; 
}
div.ve-widget-panel .ve-btn-group button { 
    width: 32px; height: 32px; border: none; 
    background: white; 
    border: 1px solid var(--ve-border); 
    border-radius: 6px; 
    color: var(--ve-text); 
    font-weight: 700; font-size: 16px;
    cursor: pointer; transition: 0.2s;
    display: flex; align-items: center; justify-content: center;
    padding: 0; margin: 0;
}
div.ve-widget-panel .ve-btn-group button:hover { 
    background: var(--ve-primary); 
    color: white; 
    border-color: var(--ve-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
div.ve-widget-panel .ve-btn-group span { 
    font-size: 13px; font-weight: 700; 
    min-width: 45px; text-align: center; line-height: 32px;
    color: var(--ve-text); margin: 0;
}

/* =========================================================
   5. COLOR PICKER
   ========================================================= */
div.ve-widget-panel .ve-round-picker {
    width: 34px; height: 34px; border-radius: 50%; 
    overflow: hidden; 
    border: 2px solid white; 
    box-shadow: 0 0 0 1px #cbd5e1; 
    position: relative;
    cursor: pointer; transition: transform 0.2s;
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

div.ve-widget-panel .ve-round-picker:hover { 
    transform: scale(1.1); 
    box-shadow: 0 0 0 2px var(--ve-primary); 
}

div.ve-widget-panel .ve-round-picker input { 
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    width: 200%; height: 200%; 
    cursor: pointer; padding: 0; margin: 0;
    opacity: 0; 
}

/* Divider & Footer */
div.ve-widget-panel .ve-divider { 
    height: 1px; background: var(--ve-border); margin: 20px 0; opacity: 0.5; border: 0;
}
div.ve-widget-panel .ve-reset-btn {
    width: 100%; background: #fff1f2; color: var(--ve-danger); border: none; padding: 12px;
    border-radius: 12px; font-weight: 700; margin-top: 15px; cursor: pointer;
    transition: 0.2s; font-size: 13px; border: 1px solid transparent;
    font-family: inherit; text-align: center;
}
div.ve-widget-panel .ve-reset-btn:hover { 
    background: var(--ve-danger); color: white; 
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}
div.ve-widget-panel .ve-panel-footer { 
    text-align: center; font-size: 11px; color: var(--ve-text-muted); 
    padding: 12px; background: var(--ve-bg-subtle); border-top: 1px solid var(--ve-border);
    font-weight: 500; margin: 0;
}

/* =========================================================
   6. ACCESSIBILITY OVERRIDES
   ========================================================= */
html.ve-dark-mode { filter: invert(1) hue-rotate(180deg) brightness(1.2) contrast(0.9); }
html.ve-dark-mode img, html.ve-dark-mode video, html.ve-dark-mode iframe,
html.ve-dark-mode div.ve-widget-panel, html.ve-dark-mode div.ve-widget-trigger { 
    filter: invert(1) hue-rotate(-180deg) brightness(0.9) contrast(1.1); 
}

html.ve-contrast { filter: contrast(150%); }
html.ve-grayscale { filter: grayscale(100%); }

html.ve-links-high a { 
    background-color: var(--ve-link-bg, #ffff00) !important; 
    color: #000 !important; 
    text-decoration: underline !important; 
    box-shadow: 0 0 5px rgba(255,255,0,0.5);
}

html.ve-readable body, html.ve-readable p, html.ve-readable h1, html.ve-readable a {
    font-family: Arial, Helvetica, sans-serif !important; 
    letter-spacing: 0.5px !important; 
    line-height: 1.6 !important; 
    color: var(--ve-text-color) !important;
}

:focus-visible {
    outline: 3px solid var(--ve-primary) !important; 
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.2) !important;
}

.ve-skip-link {
    position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
    background: var(--ve-primary); color: white !important; padding: 12px 30px; 
    border-radius: 0 0 12px 12px; font-weight: 700; z-index: 999999;
    transition: top 0.2s; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.ve-skip-link:focus { top: 0; outline: none !important; }

.ve-contrast-error {
    position: relative; animation: ve-pulse-error 2s infinite;
}
@keyframes ve-pulse-error {
    0% { outline-color: #ef4444; }
    50% { outline-color: #fca5a5; }
    100% { outline-color: #ef4444; }
}

div.ve-widget-panel .ve-btn-justify { width: 100%; justify-content: space-between; }
div.ve-widget-panel .ve-flex-align { display: flex; align-items: center; gap: 10px; }
div.ve-widget-panel .ve-divider { border: 0; border-top: 1px solid #eee; margin: 15px 0; }