/* Page + container */
body { background:#1a1a1a; margin:0; padding:0; min-height:100vh; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:#e6e6e6; font-family:Arial, Helvetica, sans-serif; }

/* Video title above player */
.video-title { color:#e6e6e6; margin:0 0 12px 0; font-size:22px; font-weight:600; }

/* Video player wrapper */
.video-player-wrapper { width:100%; margin:0 0 12px 0; aspect-ratio:16/9; background:#3b3a3a; border-radius:4px; overflow:hidden; }
.video-player-wrapper .video-js { width:100% !important; height:100% !important; }

/* Stats and social share bar on same line */
.video-stats-social-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; }

/* Bookmark button */
.bookmark-btn { background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:4px; padding:4px 8px; border-radius:4px; transition:all 0.2s; font-size:18px; color:#ff0000; }
.bookmark-btn:hover { background:rgba(255,0,0,0.1); }
.bookmark-btn:active { transform:scale(0.95); }
.bookmark-btn.favorited { color:#ffd700; }
.bookmark-btn.favorited:hover { color:#ffed4e; }

/* Report button */
.report-btn { background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:4px; padding:4px 8px; border-radius:4px; transition:all 0.2s; font-size:18px; color:#ff9800; }
.report-btn:hover { background:rgba(255,152,0,0.1); }
.report-btn:active { transform:scale(0.95); }

/* Submit coords button */
.submit-coords-btn { background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:4px; padding:4px 8px; border-radius:4px; transition:all 0.2s; font-size:18px; color:#4caf50; }
.submit-coords-btn:hover { background:rgba(76,175,80,0.1); }
.submit-coords-btn:active { transform:scale(0.95); }

/* Social share buttons on left */
.social-share-buttons { display:flex; align-items:center; gap:10px; }
.social-share-buttons .share-btn { background:none; border:none; cursor:pointer; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform 0.2s, opacity 0.2s; font-size:18px; }
.social-share-buttons .share-btn:hover { transform:scale(1.1); }
.social-share-buttons .share-btn:active { transform:scale(0.95); }
.social-share-buttons .share-btn.whatsapp { background:#25D366; color:#fff; }
.social-share-buttons .share-btn.facebook { background:#1877F2; color:#fff; }
.social-share-buttons .share-btn.twitter { background:#000; color:#fff; }
.social-share-buttons .share-btn.instagram { background:linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4); color:#fff; }
.social-share-buttons .share-btn.telegram { background:#0088cc; color:#fff; }
.social-share-buttons .share-btn.copylink { background:#6c757d; color:#fff; }

/* Share link modal */
.share-link-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.78); z-index:10020; align-items:center; justify-content:center; padding:18px; }
.share-link-modal-content { position:relative; width:min(560px, 96vw); background:#2a2a2a; border:1px solid #444; border-radius:8px; padding:22px 20px; box-shadow:0 8px 28px rgba(0,0,0,0.55); }
.share-link-modal-content h3 { margin:0 0 8px 0; color:#e6e6e6; font-size:20px; }
.share-link-modal-content p { margin:0 0 14px 0; color:#bfbfbf; font-size:14px; }
.share-link-close { position:absolute; top:8px; right:10px; border:none; background:none; color:#e6e6e6; font-size:25px; cursor:pointer; line-height:1; }
.share-link-row { display:flex; gap:10px; align-items:center; }
#share-link-input { flex:1; width:100%; background:#1a1a1a; color:#e6e6e6; border:1px solid #555; border-radius:5px; padding:10px 12px; font-size:14px; }
#share-link-input:focus { outline:none; border-color:#ff0000; }
#copy-share-link-btn { background:#ff0000; color:#fff; border:none; border-radius:5px; padding:10px 14px; font-weight:600; cursor:pointer; min-width:82px; }
#copy-share-link-btn:hover { background:#cc0000; }
.share-link-status { min-height:20px; margin-top:10px; color:#28a745; font-size:13px; opacity:0; transition:opacity 0.2s; }
.share-link-status.show { opacity:1; }

/* Stats bar on right */
.video-stats-bar { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.stats-buttons-row { display:flex; align-items:center; gap:16px; }
.stats-buttons-row .video-votes { display:flex; gap:12px; align-items:center; }
.posted-date-label { display:inline-flex; align-items:center; gap:6px; color:#c9c9c9; font-size:14px; white-space:nowrap; font-family:'BulletproofBB',system-ui,sans-serif !important; text-transform:uppercase; }
.posted-date-label span { font-family:'BulletproofBB',system-ui,sans-serif !important; }
.posted-date-label i { font-size:14px; opacity:0.9; }
.views-count { color:#d8d8d8; font-size:20px; font-family:'BulletproofBB',system-ui,sans-serif; display:flex; align-items:center; gap:6px; -webkit-text-stroke:0.6px black; paint-order:stroke fill; }
.video-stats-bar .vote-btn { background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:4px; padding:4px 8px; border-radius:4px; transition:background 0.2s; }
.video-stats-bar .vote-btn:disabled { opacity:0.5; cursor:not-allowed; }
.video-stats-bar .vote-btn.up i { color:#28a745; font-size:18px; }
.video-stats-bar .vote-btn.down i { color:#e74c3c; font-size:18px; }
.video-stats-bar .vote-btn .count { color:#e6e6e6; font-size:14px; font-weight:600; }

/* Horizontal separator line below video stats */
.stats-separator { width:100%; height:1px; background:linear-gradient(to right, #000, #ff0000 50%, #000); margin-bottom:18px; }

/* Main wrapper with dark background */
.content-wrapper { width:100%; max-width:1400px; margin:0 auto; padding:12px 0; box-sizing:border-box; background:#000; border-radius:0; box-shadow:none; min-height:100vh; }

/* Page layout - two column layout */
.page-layout { display:flex; gap:12px; align-items:flex-start; margin:0 auto; max-width:1360px; padding:20px; box-sizing:border-box; }

/* Content area */
.content-inner { flex:1; min-width:0; }
.video-container { padding:20px; background:transparent; border-radius:6px; }

/* Video info and comments */
.video-info { color:#e6e6e6; }
.video-description { color:#e6e6e6; margin:0; line-height:1.6; }
.video-description .description-content { display:block; white-space:normal; overflow:visible; }
.video-description .show-more-btn { background:none; border:none; color:#ff0000; cursor:pointer; font:inherit; padding:0; margin-left:2px; font-weight:inherit; text-decoration:none; display:inline; }
.video-description .show-more-btn:hover { text-decoration:none; color:#ff0000; }
.desc-extra-block { display:none; }
.desc-extra-block.desc-open { display:inline; animation:fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.desc-ellipsis { white-space:nowrap; }
.comments-section { color:#e6e6e6; }
.comments-section h3 { color:#e6e6e6; }
.comment-form { margin:20px 0; padding:20px; background:rgba(255,255,255,0.05); border-radius:8px; border:1px solid rgba(255,255,255,0.1); }
.comment-form textarea { width:100%; min-height:80px; padding:10px; border:1px solid #333; border-radius:4px; box-sizing:border-box; background:#1a1a1a; color:#e6e6e6; }
.comment-form textarea:focus { outline:none; border-color:#555; }
.comment-form button { background:#ff0000; color:#fff; border:none; padding:10px 20px; border-radius:4px; cursor:pointer; margin-top:10px; font-weight:600; }

/* Comment layout with avatar and content side-by-side */
.comment-layout { display:flex; gap:10px; align-items:flex-start; }
.comment-content { flex:1; display:flex; flex-direction:column; gap:4px; }
.comment-header { display:flex; flex-direction:row; align-items:center; gap:6px; flex-wrap:wrap; }
.comment-header a.comment-username { color:#ff0000; font-weight:600; text-decoration:none; transition:color 0.2s; font-size:13px; }
.comment-header a.comment-username:hover { color:#ff4444; text-decoration:underline; }
.comment-time { font-size:11px; color:#888; }

/* Comment avatar */
.comment-avatar-link { display:inline-flex; flex-shrink:0; }
.comment-avatar { 
    width: 44px; 
    height: 44px; 
    border-radius: 50%; 
    object-fit: cover;
    border: 1px solid #ff0000;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.comment-avatar-placeholder {
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 20px;
}
.comment-avatar-link:hover .comment-avatar {
    border-color: #ff0000;
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.6);
    animation: avatar-shimmer 1s linear infinite;
}

@keyframes avatar-shimmer {
    0% {
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.4), 0 0 20px rgba(255, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 16px rgba(255, 0, 0, 0.8), 0 0 30px rgba(255, 0, 0, 0.4);
    }
    100% {
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.4), 0 0 20px rgba(255, 0, 0, 0.2);
    }
}

.comment .text { display:block; margin:0; padding:0; color:#e6e6e6; line-height:1.4; }

/* Comment base + transitions */
.comment { display:block; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.1); transition:transform .35s, opacity .35s; box-sizing:border-box; }
.comment.added { opacity:0; transform:translateY(-12px) scale(.995); }

/* Actions (votes, reply, toggle) */
.comment .actions { display:flex; align-items:center; gap:10px; margin-top:4px; flex-wrap:wrap; }
.comment .votes-wrap { display:inline-flex; align-items:center; }
.comment .votes { display:inline-flex; gap:8px; align-items:center; }

/* Vote buttons */
.comment .vote-btn { background:none; border:none; color:#e6e6e6; cursor:pointer; font:inherit; display:inline-flex; align-items:center; gap:6px; padding:2px 4px; }
.comment .vote-btn .count { font-size:12px; color:#bfbfbf; margin-left:2px; }
.comment .vote-btn.voted { font-weight:600; color:#ff0000; }
/* Font Awesome thumb colors */
.comment .vote-btn.up i.fa-thumbs-up { color:#2c9a2c; }
.comment .vote-btn.down i.fa-thumbs-down { color:#d1443e; }
/* darker when active */
.comment .vote-btn.up.voted i.fa-thumbs-up { color:#1f6f1f; }
.comment .vote-btn.down.voted i.fa-thumbs-down { color:#9b2b24; }

/* Reply & toggle buttons as plain blue text */
.comment .actions button.reply-btn,
.comment .actions button.edit-btn,
.comment .actions button.delete-btn,
.comment .actions button.toggle-replies { background:none; border:none; color:#ff0000; padding:0; margin:0; font:inherit; cursor:pointer; text-decoration:none; font-size:12px; }
.comment .actions button.reply-btn:focus,
.comment .actions button.edit-btn:focus,
.comment .actions button.delete-btn:focus,
.comment .actions button.toggle-replies:focus { outline:none; }

/* Replies container and inline reply form */
.replies { margin-left:54px; padding-left:15px; display:none; border-left:2px solid rgba(255,0,0,0.2); }
.inline-reply { margin-top:10px; }
.inline-reply textarea { width:100%; min-height:60px; margin-bottom:6px; box-sizing:border-box; background:#1a1a1a; color:#e6e6e6; border:1px solid #333; border-radius:4px; padding:8px; }
.inline-reply textarea:focus { outline:none; border-color:#555; }
.inline-reply button { background:#ff0000; color:#fff; border:none; padding:8px 16px; border-radius:4px; cursor:pointer; margin-right:8px; font-weight:600; }
.inline-reply button.cancel-reply { background:transparent; border:1px solid rgba(255,255,255,0.2); color:#e6e6e6; }

/* Inline edit form */
.inline-edit { margin-top:10px; }
.inline-edit textarea { width:100%; min-height:60px; margin-bottom:6px; box-sizing:border-box; background:#1a1a1a; color:#e6e6e6; border:1px solid #333; border-radius:4px; padding:8px; }
.inline-edit textarea:focus { outline:none; border-color:#555; }
.inline-edit button { background:#ff0000; color:#fff; border:none; padding:8px 16px; border-radius:4px; cursor:pointer; margin-right:8px; font-weight:600; }
.inline-edit button.cancel-edit { background:transparent; border:1px solid rgba(255,255,255,0.2); color:#e6e6e6; }

/* Misc */
.login-prompt { background:rgba(255,0,0,0.1); padding:15px; border-radius:8px; text-align:center; border:1px solid rgba(255,0,0,0.3); }
.login-prompt a { color:#ff0000; text-decoration:none; font-weight:600; }
.user-info { background:rgba(255,255,255,0.05); padding:10px; border-radius:4px; margin-bottom:15px; color:#e6e6e6; border:1px solid rgba(255,255,255,0.1); }
.loading { color:#bfbfbf; font-style:italic; }

/* Comment filter dropdown */
.filter-btn { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:#e6e6e6; padding:8px 12px; border-radius:4px; cursor:pointer; font-size:14px; transition:background 0.2s; }
.filter-btn:hover { background:rgba(255,255,255,0.15); }
.filter-btn i { font-size:16px; }
.filter-dropdown { position:absolute; top:100%; right:0; margin-top:4px; background:#2a2a2a; border:1px solid rgba(255,255,255,0.2); border-radius:4px; box-shadow:0 4px 12px rgba(0,0,0,0.5); z-index:1000; min-width:200px; }
.filter-option { display:block; width:100%; text-align:left; background:none; border:none; color:#e6e6e6; padding:12px 16px; cursor:pointer; font-size:14px; transition:background 0.2s; border-bottom:1px solid rgba(255,255,255,0.1); }
.filter-option:last-child { border-bottom:none; }
.filter-option:hover { background:rgba(255,255,255,0.1); }
.filter-option.active { background:rgba(255,0,0,0.2); color:#ff0000; font-weight:600; }
.filter-option i { margin-right:8px; width:16px; }


/* Similar videos sidebar */
.related-videos-sidebar { width:350px; flex-shrink:0; padding:0 0 12px 0; background:transparent; border-radius:6px; overflow:hidden; }
.related-videos-sidebar h3 {
  margin:0 0 12px 0;
  padding:12px 16px 10px 16px;
  background:#000;
  font-family:'BulletproofBB',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:20px;
  font-weight:normal;
  color:#ff0000;
  text-transform:uppercase;
  text-align:center;
  letter-spacing:-0.5px;
  -webkit-text-stroke:1.5px #ffffff;
  paint-order:stroke fill;
  -webkit-font-smoothing:antialiased;
  border-top:1px solid;
  border-image:linear-gradient(to right, #000, #ff0000 50%, #000) 1;
}
.related-video-item { display:flex; gap:12px; margin:0 8px 8px 8px; cursor:pointer; text-decoration:none; color:#e6e6e6; border-radius:6px; padding:8px; transition:background 0.2s; border:1px solid rgba(255,255,255,0.04); background:rgba(0,0,0,0.25); }
.related-video-item:hover { background:rgba(255,255,255,0.08); }
.related-thumb-wrapper { width:160px; height:90px; flex-shrink:0; position:relative; border-radius:0; overflow:hidden; background:#3b3a3a; }
.related-thumb-wrapper img.poster { width:100%; height:100%; object-fit:cover; display:block; }
.related-thumb-wrapper video.preview { width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; display:none; }
.related-thumb-wrapper .thumb-duration { position:absolute; bottom:4px; right:4px; background:rgba(0,0,0,0.8); color:#fff; padding:3px 6px; font-size:11px; border-radius:3px; font-weight:600; box-shadow:0 1px 0 rgba(0,0,0,0.4); }
.related-video-info { flex:1; min-width:0; }
.related-video-title { margin:0 0 6px 0; font-size:14px; font-weight:500; line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; color:#e6e6e6; }
.related-video-views { font-size:12px; color:#bfbfbf; display:flex; align-items:center; gap:4px; }

/* Responsive adjustments */
@media (max-width:1024px) {
  .page-layout { flex-direction:column; align-items:stretch; gap:0; }
  .related-videos-sidebar { width:100%; border-right:none; margin-left:0; padding-left:0; padding-right:0; border-left:none; border-top:none; padding-top:0; margin-top:0; }
  .video-container { padding-bottom:0; }
}

/* ── 768px — tablet ────────────────────────── */
@media (max-width:768px) {
  .content-wrapper { padding:0; }
  .page-layout { padding:0; gap:0; }
  .video-container { padding:10px; border-radius:0; }
  .video-title { font-size:17px; margin-bottom:8px; }

  /* Scoped under video-stats-social-bar — never touches map.php */
  .video-stats-social-bar { flex-wrap:wrap; gap:8px; margin-bottom:12px; }
  .video-stats-social-bar .social-share-buttons { gap:6px; flex-wrap:wrap; }
  .video-stats-social-bar .social-share-buttons .share-btn { width:32px; height:32px; font-size:15px; }
  .video-stats-social-bar .video-stats-bar { gap:10px; flex-wrap:wrap; }

  .related-videos-sidebar { padding:0 0 10px 0; }
  .related-videos-sidebar h3 { font-size:17px; margin-bottom:10px; padding:10px 16px 8px 16px; }
  .related-video-item { padding:6px; gap:8px; margin:0 8px 8px 8px; }
  .related-thumb-wrapper { width:120px; height:68px; }
  .related-video-title { font-size:13px; }

  .comments-section h3 { font-size:17px; }
  .comment-form { padding:12px; }
  .comment-form textarea { font-size:14px; }
  .replies { margin-left:36px; padding-left:10px; }
}

/* ── 560px — smartphone ─────────────────────── */
@media (max-width:560px) {
  .video-title { font-size:15px; line-height:1.3; }

  /* All buttons on ONE row (share + action + votes). Views below votes only. */
  .video-stats-social-bar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 10px;
    border-top: 1px solid #333;
    padding-top: 8px;
  }
  .video-stats-social-bar .social-share-buttons {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
  }
  /* Compact circles */
  .video-stats-social-bar .social-share-buttons .share-btn {
    width: 22px;
    height: 22px;
    font-size: 11px;
    flex-shrink: 0;
  }
  /* Stats bar fills remaining width, column layout keeps views below buttons */
  .video-stats-social-bar .video-stats-bar {
    flex: 1 1 0;
    min-width: 0;
  }
  .video-stats-social-bar .stats-buttons-row {
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: flex-start;
    gap: 3px;
  }
  .video-stats-social-bar .views-count {
    display: flex;
    justify-content: flex-end;
    font-size: 13px;
    white-space: nowrap;
  }
  .video-stats-social-bar .video-votes { flex-shrink: 0; }
  .video-stats-social-bar .vote-btn .count { font-size:11px; }
  .video-stats-social-bar .vote-btn { padding:2px 4px; }
  .video-stats-social-bar .vote-btn i { font-size:14px; }
  .video-stats-social-bar .bookmark-btn,
  .video-stats-social-bar .report-btn,
  .video-stats-social-bar .submit-coords-btn { padding:2px 4px; font-size:14px; }
  .video-stats-social-bar .posted-date-label { font-size:12px; gap:5px; max-width:116px; overflow:hidden; text-overflow:ellipsis; }
  .video-stats-social-bar .posted-date-label i { font-size:12px; }
  .video-stats-social-bar .posted-date-label,
  .video-stats-social-bar .posted-date-label span,
  .video-stats-social-bar #video-posted-date-text {
    font-family:'BulletproofBB',system-ui,sans-serif !important;
    text-transform:uppercase;
    font-weight:normal !important;
  }

  /* Similar videos: clean vertical scroll, no horizontal overflow */
  .related-videos-sidebar {
    overflow-x:hidden;
    overflow-y:visible;
    -webkit-overflow-scrolling:auto;
    padding-bottom:12px;
  }
  .related-videos-sidebar h3 { font-size:16px; }
  /* Compact card: smaller fixed thumbnail + text beside it */
  .related-video-item { margin:0 6px 8px 6px; gap:10px; padding:6px; }
  .related-thumb-wrapper { width:100px; height:56px; flex-shrink:0; }
  .related-video-title { font-size:12px; line-height:1.3; -webkit-line-clamp:3; line-clamp:3; }
  .related-video-views { font-size:11px; }

  .comment-avatar { width:34px; height:34px; }
  .comment-header a.comment-username { font-size:12px; }
  .comment-time { font-size:10px; }
  .comment .text { font-size:13px; }
  .comment .actions { gap:6px; }
  .comment .vote-btn .count { font-size:11px; }
  .comment .actions button.reply-btn,
  .comment .actions button.edit-btn,
  .comment .actions button.delete-btn,
  .comment .actions button.toggle-replies { font-size:11px; }

  .replies { margin-left:20px; padding-left:8px; }

  .comment-form { padding:10px; border-radius:6px; }
  .comment-form textarea { font-size:14px; min-height:70px; }
  .comment-form button { padding:8px 16px; font-size:13px; }

  .inline-reply textarea { font-size:13px; }
  .inline-reply button { padding:6px 12px; font-size:12px; }

  #emoji-picker-modal { width:min(480px, calc(100vw - 20px)) !important; left:0 !important; right:auto !important; }
  .inline-emoji-picker { width:calc(100vw - 24px) !important; left:0 !important; }

  .comment .actions { gap:8px; }
  .comment .meta, .comment .text { display:block; }
}

/* ═══════════════════════════════════════════════════════
   VIDEO PAGE — LIGHT MODE OVERRIDES
   ═══════════════════════════════════════════════════════ */
html[data-theme="light"] body {
  background: #f0f0f0;
  color: #1a1a1a;
}

/* Main wrapper */
html[data-theme="light"] .content-wrapper {
  background: #ffffff;
}

/* Video container */
html[data-theme="light"] .video-container {
  background: #ffffff;
}

/* Video title + description + info */
html[data-theme="light"] .video-title {
  color: #111111;
}

html[data-theme="light"] .video-info {
  color: #111111;
}

html[data-theme="light"] .video-description {
  color: #111111;
}

/* Stats bar */
html[data-theme="light"] .video-stats-bar .views-count {
  color: #111111;
  -webkit-text-stroke: 0;
}

html[data-theme="light"] .video-stats-bar .vote-btn .count {
  color: #333333;
}

html[data-theme="light"] .posted-date-label {
  color: #4a4a4a;
}

/* Separator */
html[data-theme="light"] .stats-separator {
  background: linear-gradient(to right, #fff, #ff0000 50%, #fff);
}

/* --- Comments section --- */
html[data-theme="light"] .comments-section {
  color: #111111;
}

html[data-theme="light"] .comments-section h3 {
  color: #111111;
}

html[data-theme="light"] .comment-form {
  background: #f4f4f4;
  border-color: #ddd;
}

html[data-theme="light"] .comment-form textarea {
  background: #ffffff;
  color: #111111;
  border-color: #ccc;
}

html[data-theme="light"] .comment-form textarea:focus {
  border-color: #999;
}

html[data-theme="light"] .comment .text {
  color: #111111;
}

html[data-theme="light"] .comment {
  border-bottom-color: rgba(0,0,0,0.12);
}

html[data-theme="light"] .comment .vote-btn {
  color: #111111;
}

html[data-theme="light"] .comment .vote-btn .count {
  color: #444444;
}

html[data-theme="light"] .comment-time {
  color: #666666;
}

html[data-theme="light"] .user-info {
  background: #f0f0f0;
  color: #111111;
  border-color: #ddd;
}

html[data-theme="light"] .filter-btn {
  background: #e8e8e8;
  border-color: #ccc;
  color: #111111;
}

html[data-theme="light"] .filter-btn:hover {
  background: #ddd;
}

html[data-theme="light"] .filter-dropdown {
  background: #ffffff;
  border-color: #ccc;
}

html[data-theme="light"] .filter-option {
  color: #111111;
  border-bottom-color: #eee;
}

html[data-theme="light"] .filter-option:hover {
  background: #f0f0f0;
}

html[data-theme="light"] .inline-reply textarea,
html[data-theme="light"] .inline-edit textarea {
  background: #ffffff;
  color: #111111;
  border-color: #ccc;
}

html[data-theme="light"] .inline-reply button.cancel-reply,
html[data-theme="light"] .inline-edit button.cancel-edit {
  background: transparent;
  border-color: #bbb;
  color: #333333;
}

/* --- Related videos sidebar --- */
html[data-theme="light"] .related-videos-sidebar {
  background: #ffffff;
}

html[data-theme="light"] .related-videos-sidebar h3 {
  background: #ffffff;
  -webkit-text-stroke: 1.5px #000000;
  border-image: linear-gradient(to right, #ffffff, #ff0000 50%, #ffffff) 1;
}

html[data-theme="light"] .related-video-item {
  color: #111111;
  background: #f8f8f8;
  border-color: rgba(0,0,0,0.08);
}

html[data-theme="light"] .related-video-item:hover {
  background: #eeeeee;
}

html[data-theme="light"] .related-video-title {
  color: #111111;
}

html[data-theme="light"] .related-video-views {
  color: #555555;
}

html[data-theme="light"] .related-thumb-wrapper {
  background: #dee2e6;
}

/* Related videos border on mobile stacked layout */
@media (max-width:1024px) {
  html[data-theme="light"] .related-videos-sidebar {
    border-top-color: #ff0000;
  }
}

/* ── Similar Videos heading: white inner stroke in light mode ───────────── */
html[data-theme="light"] .related-videos-sidebar h3 {
  -webkit-text-stroke: 1.5px #ffffff;
  paint-order: stroke fill;
}

/* ── content-wrapper: no box-shadow in light mode either ──────────────── */
html[data-theme="light"] .content-wrapper {
  box-shadow: none;
}

/* ── Share link modal (light theme) ───────────────────────────────────── */
html[data-theme="light"] .share-link-modal-content {
  background: #ffffff;
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 8px 28px rgba(0,0,0,0.15);
}
html[data-theme="light"] .share-link-modal-content h3 {
  color: #1a1a1a;
}
html[data-theme="light"] .share-link-modal-content p {
  color: #555;
}
html[data-theme="light"] .share-link-close {
  color: #555;
}
html[data-theme="light"] #share-link-input {
  background: #f0f0f0;
  color: #1a1a1a;
  border-color: #ccc;
}

/* ── Emoji picker (light theme) ────────────────────────────────────────── */
html[data-theme="light"] #emoji-picker-modal {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #1a1a1a !important;
}