/* Vrool Video — Product Showcase Platform CSS */

/* Feed Page */
.vv-wrap{max-width:1450px;margin:0 auto;padding:20px 16px}
.vv-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin:0 0 24px 0}
.vv-title{font-size:24px;font-weight:900;color:#0f172a;display:flex;align-items:center;gap:10px}
.vv-title svg{width:28px;height:28px;fill:#dc2626}
.vv-search{display:flex;gap:8px;flex:1;max-width:480px}
.vv-search input{flex:1;height:40px;padding:0 14px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:14px;background:#fff;outline:none}
.vv-search input:focus{border-color:#059669}
.vv-search button{height:40px;padding:0 16px;border:none;border-radius:12px;background:#0f172a;color:#fff;font-weight:700;font-size:13px;cursor:pointer}
.vv-actions{display:flex;gap:8px;align-items:center}
.vv-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:10px;font-size:13px;font-weight:700;text-decoration:none !important;border:none;cursor:pointer;transition:all 0.15s}
.vv-btn-upload{background:#dc2626;color:#fff !important}.vv-btn-upload:hover{background:#b91c1c;color:#fff !important}
.vv-btn svg{width:16px;height:16px;fill:currentColor}
.vv-btn-upload svg{fill:#fff !important}
.vv-sorts{display:flex;gap:6px;margin:0 0 20px 0}
.vv-sort{padding:6px 14px;border-radius:8px;font-size:12px;font-weight:600;text-decoration:none !important;color:#64748b;background:#f8fafc;border:1px solid #f1f5f9;transition:all 0.12s}
.vv-sort:hover{background:#f1f5f9;color:#475569}
.vv-sort-on{background:#0f172a;color:#fff !important;border-color:#0f172a}
.vv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
@media(max-width:700px){.vv-grid{grid-template-columns:1fr}}
.vv-card{border-radius:14px;overflow:hidden;background:#fff;border:1px solid #f1f5f9;transition:all 0.15s;cursor:pointer}
.vv-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.08);border-color:#e2e8f0;transform:translateY(-2px)}
.vv-card a{text-decoration:none;color:inherit}
.vv-thumb{position:relative;width:100%;padding-top:56.25%;background:#0f172a;overflow:hidden}
.vv-thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.vv-thumb-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e293b,#0f172a)}
.vv-thumb-placeholder svg{width:48px;height:48px;fill:rgba(255,255,255,0.3)}
.vv-dur{position:absolute;bottom:8px;right:8px;padding:2px 8px;border-radius:4px;background:rgba(0,0,0,0.8);color:#fff;font-size:11px;font-weight:700}
.vv-info{padding:12px 14px}
.vv-info-title{font-size:14px;font-weight:700;color:#0f172a;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 6px 0}
.vv-info-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:#94a3b8}
.vv-info-seller{font-weight:600;color:#475569}
.vv-info-stats{display:flex;gap:12px;margin:6px 0 0 0;font-size:11px;color:#94a3b8}
.vv-info-stats span{display:flex;align-items:center;gap:3px}
.vv-empty{text-align:center;padding:80px 24px;color:#94a3b8}
.vv-empty h3{font-size:18px;color:#1e293b;margin:0 0 8px 0}
.vv-pag{display:flex;gap:4px;justify-content:center;padding:24px 0}
.vv-pag a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;font-size:13px;font-weight:700;text-decoration:none;color:#64748b;background:#fff;border:1px solid #f1f5f9}
.vv-pag a:hover{background:#f1f5f9}
.vv-pag a.active{background:#0f172a;color:#fff;border-color:#0f172a}

/* Upload Page */
.vu-wrap{max-width:720px;margin:0 auto;padding:32px 16px}
.vu-title{font-size:24px;font-weight:900;color:#0f172a;margin:0 0 8px 0;display:flex;align-items:center;gap:10px}
.vu-title svg{width:28px;height:28px;fill:#dc2626}
.vu-sub{font-size:14px;color:#94a3b8;margin:0 0 28px 0}
.vu-form{display:flex;flex-direction:column;gap:20px}
.vu-field label{display:block;font-size:13px;font-weight:700;color:#334155;margin:0 0 6px 0}
.vu-field input,.vu-field textarea,.vu-field select{width:100%;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:14px;background:#fff;outline:none;font-family:inherit;box-sizing:border-box}
.vu-field input:focus,.vu-field textarea:focus,.vu-field select:focus{border-color:#059669}
.vu-field textarea{min-height:100px;resize:vertical}
.vu-field .vu-hint{font-size:11px;color:#94a3b8;margin:4px 0 0 0}
.vu-drop{border:2px dashed #cbd5e1;border-radius:16px;padding:40px 24px;text-align:center;cursor:pointer;transition:all 0.15s;background:#fafbfc}
.vu-drop:hover,.vu-drop.dragover{border-color:#059669;background:#f0fdf4}
.vu-drop svg{width:48px;height:48px;fill:#94a3b8;margin:0 0 12px 0}
.vu-drop p{font-size:14px;color:#64748b;margin:0 0 4px 0}
.vu-drop small{font-size:12px;color:#94a3b8}
.vu-drop input[type=file]{display:none}
.vu-preview{margin:12px 0 0 0;display:none}
.vu-preview video{width:100%;max-height:300px;border-radius:12px;background:#000}
.vu-preview-name{font-size:12px;color:#64748b;margin:4px 0 0 0}
.vu-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.vu-row{grid-template-columns:1fr}}
.vu-submit{display:flex;gap:12px;margin:8px 0 0 0}
.vu-btn{padding:12px 24px;border-radius:12px;font-size:14px;font-weight:700;border:none;cursor:pointer;transition:all 0.15s}
.vu-btn-primary{background:#dc2626;color:#fff}.vu-btn-primary:hover{background:#b91c1c}
.vu-btn-ghost{background:#f1f5f9;color:#64748b}.vu-btn-ghost:hover{background:#e2e8f0}
.vu-progress{display:none;margin:12px 0 0 0}
.vu-progress-bar{height:6px;border-radius:3px;background:#e2e8f0;overflow:hidden}
.vu-progress-fill{height:100%;background:#059669;border-radius:3px;width:0%;transition:width 0.3s}
.vu-progress-text{font-size:12px;color:#64748b;margin:6px 0 0 0;text-align:center}
.vu-error{padding:12px 16px;border-radius:10px;background:#fef2f2;border:1px solid #fecaca;color:#dc2626;font-size:13px;font-weight:600;display:none}

/* Watch Page */
.vw{max-width:100%;margin:0 auto;padding:20px 0;display:grid;grid-template-columns:1fr 380px;gap:24px}
@media(max-width:1000px){.vw{grid-template-columns:1fr}}
.vw-player{width:100%;border-radius:16px;overflow:hidden;background:#000;position:relative}
.vw-player video{width:100%;display:block;max-height:70vh}
.vw-info{padding:16px 0}
.vw-title{font-size:20px;font-weight:800;color:#0f172a;line-height:1.3;margin:0 0 12px 0}
.vw-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.vw-views{font-size:13px;color:#64748b}
.vw-actions{display:flex;gap:8px}
.vw-action{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:100px;font-size:13px;font-weight:700;border:1px solid #e2e8f0;background:#fff;color:#475569;cursor:pointer;transition:all 0.12s;text-decoration:none !important}
.vw-action:hover{background:#f1f5f9}
.vw-action.active-like{background:#dcfce7;border-color:#86efac;color:#166534}
.vw-action.active-dislike{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.vw-action svg{width:16px;height:16px;fill:currentColor}
.vw-seller{display:flex;align-items:center;gap:12px;padding:16px 0;border-top:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;margin:12px 0}
.vw-seller-img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#e2e8f0}
.vw-seller-name{font-size:15px;font-weight:700;color:#0f172a}
.vw-seller-sub{font-size:12px;color:#94a3b8}
.vw-desc{font-size:14px;line-height:1.6;color:#334155;padding:12px 0;white-space:pre-wrap}
.vw-product{padding:16px;border-radius:14px;background:#f0fdf4;border:1px solid #bbf7d0;margin:12px 0;display:flex;align-items:center;gap:14px}
.vw-product-title{font-weight:700;color:#166534;font-size:14px}
.vw-product-price{font-weight:800;color:#059669;font-size:16px}
.vw-product a{text-decoration:none;color:inherit}
.vw-product-btn{padding:8px 16px;border-radius:10px;background:#059669;color:#fff !important;font-weight:700;font-size:13px;text-decoration:none !important;margin-left:auto}
.vw-external{padding:12px 16px;border-radius:14px;background:#eff6ff;border:1px solid #bfdbfe;margin:12px 0}
.vw-external a{color:#1d4ed8;font-weight:700;text-decoration:none}
.vw-comments{margin:24px 0 0 0}
.vw-comments-title{font-size:16px;font-weight:800;color:#0f172a;margin:0 0 16px 0}
.vw-comment-form{display:flex;gap:10px;margin:0 0 20px 0}
.vw-comment-form input{flex:1;height:40px;padding:0 14px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:14px;outline:none}
.vw-comment-form input:focus{border-color:#059669}
.vw-comment-form button{height:40px;padding:0 16px;border:none;border-radius:12px;background:#0f172a;color:#fff;font-weight:700;font-size:13px;cursor:pointer}
.vw-comment{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid #f8fafc}
.vw-comment-avatar{width:32px;height:32px;border-radius:50%;background:#e2e8f0;flex-shrink:0}
.vw-comment-body{flex:1;min-width:0}
.vw-comment-name{font-size:13px;font-weight:700;color:#0f172a}
.vw-comment-time{font-size:11px;color:#94a3b8;margin-left:8px}
.vw-comment-text{font-size:14px;color:#334155;margin:4px 0 0 0;line-height:1.5}
.vw-sidebar-title{font-size:14px;font-weight:800;color:#0f172a;margin:0 0 14px 0}
.vw-related{display:flex;flex-direction:column;gap:12px}
.vw-related-card{display:flex;gap:10px;text-decoration:none;color:inherit;border-radius:10px;padding:6px;transition:background 0.12s}
.vw-related-card:hover{background:#f8fafc}
.vw-related-thumb{width:160px;height:90px;border-radius:8px;background:#0f172a;flex-shrink:0;overflow:hidden;position:relative}
.vw-related-thumb img{width:100%;height:100%;object-fit:cover}
.vw-related-info{flex:1;min-width:0}
.vw-related-title{font-size:13px;font-weight:700;color:#0f172a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.vw-related-meta{font-size:11px;color:#94a3b8;margin:4px 0 0 0}

/* Hide crypto/web3 wallet bar on all video pages */
body:has(.vvf-layout) #vrool-w3-mobile-bar,
body:has(.vvf-layout) .vrool-w3-mobile-bar,
body:has(.vvf-layout) #vrool-web3-header-indicator,
body:has(.vvf-layout) a.wallet.btn,
body:has(.vu) #vrool-w3-mobile-bar,
body:has(.vu) .vrool-w3-mobile-bar,
body:has(.vu) #vrool-web3-header-indicator,
body:has(.vu) a.wallet.btn{display:none !important}

/* ══ Feed page — desktop container overrides ══ */
body#custom.plugin-vrool_video.file-feed > .content{padding-top:0 !important;padding-bottom:0 !important}
body#custom.plugin-vrool_video.file-feed .container.primary{padding-top:0 !important;padding-left:0 !important;padding-right:0 !important;padding-bottom:0 !important;max-width:100% !important;width:100% !important;box-sizing:border-box !important}
body#custom.file-feed > .content{padding-top:0 !important;padding-bottom:0 !important}
body#custom.file-feed .container.primary{padding-top:0 !important;padding-left:0 !important;padding-right:0 !important;padding-bottom:0 !important;max-width:100% !important;width:100% !important}

/* ══ Watch/Shorts page — desktop container overrides ══ */
body#custom.plugin-vrool_video.file-watch > .content{padding:0 !important}
body#custom.plugin-vrool_video.file-watch .container.primary{padding:12px 24px 0 24px !important;max-width:100% !important;width:100% !important;box-sizing:border-box !important}
body#custom.file-watch > .content{padding:0 !important}
body#custom.file-watch .container.primary{padding:12px 24px 0 24px !important;max-width:100% !important;width:100% !important}

/* ══ Upload page — desktop container overrides ══ */
body#custom.plugin-vrool_video.file-upload .container.primary{max-width:900px !important;width:100% !important;box-sizing:border-box !important;margin-left:auto !important;margin-right:auto !important}

/* ══ Hide gsearch bar on all video pages — take out of flow ══ */
body#custom.plugin-vrool_video .vrool-gsearch-bar,
body#custom.plugin-vrool_video #vroolGSearchBar{display:none !important;height:0 !important;pointer-events:none !important;position:absolute !important;top:-9999px !important;visibility:hidden !important}

/* ══ Hide wallet bar on all video pages ══ */
body#custom.plugin-vrool_video #vrool-w3-mobile-bar,
body#custom.plugin-vrool_video .vrool-w3-mobile-bar,
body#custom.plugin-vrool_video #vrool-web3-header-indicator,
body#custom.plugin-vrool_video a.wallet.btn{display:none !important}

/* ══ Hide shorts-only mobile elements on all non-shorts pages ══ */
.vw-short-home-btn,
.vw-short-search-btn,
.vw-short-search-bar,
.vw-short-search-results{display:none !important}