/**
 * HDXVipizle - Premium Platform Theme & Design System
 * Version 2.0.0
 * Pure Vanilla CSS - Editorial, Cinematic, Modern, User-Focused
 */

/* ==========================================================================
   1. DESIGN TOKENS & CSS VARIABLES
   ========================================================================== */
:root {
  /* Fonts */
  --hdx-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  
  /* Brand Accent */
  --hdx-accent: #e52955;
  --hdx-accent-hover: #cf1f48;
  --hdx-accent-subtle: rgba(229, 41, 85, 0.12);
  --hdx-accent-subtle-hover: rgba(229, 41, 85, 0.2);
  
  /* VIP / Gold */
  --hdx-gold: #d4a042;
  --hdx-gold-hover: #bf8d35;
  --hdx-gold-subtle: rgba(212, 160, 66, 0.14);
  --hdx-gold-text: #e6b450;
  
  /* Success / Status */
  --hdx-success: #10b981;
  --hdx-danger: #ef4444;

  /* Shadows */
  --hdx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.15);
  --hdx-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.25);
  --hdx-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.35);
  --hdx-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2);
  --hdx-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.4);

  /* Radii - Restrained & mature */
  --hdx-radius-xs: 3px;
  --hdx-radius-sm: 5px;
  --hdx-radius-md: 8px;
  --hdx-radius-lg: 12px;
  --hdx-radius-full: 9999px;

  /* Transitions */
  --hdx-transition-fast: 0.15s ease;
  --hdx-transition-base: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  --hdx-transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  /* Container */
  --hdx-container-max: 1380px;
}

/* Dark Theme (Default) */
:root,
html[data-theme="dark"],
body.dark {
  --hdx-bg-base: #0b0c10;
  --hdx-bg-surface: #12141a;
  --hdx-bg-card: #171a22;
  --hdx-bg-card-hover: #1e222c;
  --hdx-bg-elevated: #222634;
  --hdx-bg-input: #1a1d26;
  --hdx-input-bg: var(--hdx-bg-input);
  --hdx-bg-overlay: rgba(11, 12, 16, 0.75);

  --hdx-border: rgba(255, 255, 255, 0.08);
  --hdx-border-hover: rgba(255, 255, 255, 0.16);
  --hdx-border-active: rgba(229, 41, 85, 0.6);

  --hdx-text-primary: #f3f4f6;
  --hdx-text-secondary: #9ca3af;
  --hdx-text-muted: #6b7280;
  --hdx-text-inverse: #111827;

  --hdx-header-bg: rgba(18, 20, 26, 0.94);
  --hdx-subnav-bg: #101217;
  --hdx-footer-bg: #0e1015;
  --hdx-bottomnav-bg: rgba(18, 20, 26, 0.96);
  
  --hdx-card-border: rgba(255, 255, 255, 0.06);
  --hdx-tag-bg: rgba(255, 255, 255, 0.08);
  --hdx-tag-hover: rgba(255, 255, 255, 0.14);
  --hdx-tag-text: #d1d5db;

  --hdx-header-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  --hdx-subnav-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Light Theme */
html[data-theme="light"],
body.light {
  --hdx-bg-base: #f8fafc;
  --hdx-bg-surface: #ffffff;
  --hdx-bg-card: #ffffff;
  --hdx-bg-card-hover: #f9fafb;
  --hdx-bg-elevated: #ffffff;
  --hdx-bg-input: #f0f2f5;
  --hdx-input-bg: var(--hdx-bg-input);
  --hdx-bg-overlay: rgba(17, 24, 39, 0.6);

  --hdx-border: rgba(0, 0, 0, 0.07);
  --hdx-border-hover: rgba(0, 0, 0, 0.16);
  --hdx-border-active: rgba(229, 41, 85, 0.7);

  --hdx-text-primary: #111827;
  --hdx-text-secondary: #4b5563;
  --hdx-text-muted: #6b7280;
  --hdx-text-inverse: #ffffff;

  --hdx-header-bg: rgba(255, 255, 255, 0.98);
  --hdx-subnav-bg: #ffffff;
  --hdx-footer-bg: #ffffff;
  --hdx-bottomnav-bg: rgba(255, 255, 255, 0.98);

  --hdx-header-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 16px rgba(15, 23, 42, 0.05);
  --hdx-subnav-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

  --hdx-card-border: rgba(0, 0, 0, 0.07);
  --hdx-tag-bg: rgba(0, 0, 0, 0.05);
  --hdx-tag-hover: rgba(0, 0, 0, 0.09);
  --hdx-tag-text: #374151;

  --hdx-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --hdx-shadow-card-hover: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   2. GLOBAL RESET & BASE STYLES
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  max-width: 100vw;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--hdx-font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--hdx-text-primary);
  background-color: var(--hdx-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  max-width: 100vw;
  transition: background-color var(--hdx-transition-base), color var(--hdx-transition-base);
}

/* Global Click & Active Outline Killer */
*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent !important;
}

a,
button,
input,
select,
textarea,
[tabindex],
[role="button"],
.btn,
.hdx-btn,
.hdx-card,
.hdx-video-card,
.hdx-pricing-card,
.hdx-nav-link {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-focus-ring-color: transparent !important;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--hdx-transition-fast);
  outline: none !important;
}

a:hover {
  color: var(--hdx-accent);
  text-decoration: none;
}

a:focus,
a:active,
a:focus-visible {
  color: var(--hdx-accent);
  text-decoration: none;
  outline: 0 !important;
  outline: none !important;
  -webkit-focus-ring-color: transparent !important;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

button:focus, button:active,
.btn:focus, .btn:active, .btn:focus:active {
  outline: 0 !important;
  outline: none !important;
  -webkit-focus-ring-color: transparent !important;
}

:focus:not(:focus-visible) {
  outline: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Container */
.hdx-container {
  width: 100%;
  max-width: var(--hdx-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 767px) {
  .hdx-container {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Section Spacing */
.hdx-section {
  margin-top: 36px;
  margin-bottom: 36px;
}

@media (max-width: 767px) {
  .hdx-section {
    margin-top: 24px;
    margin-bottom: 24px;
  }
}

.hdx-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hdx-border);
}

.hdx-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hdx-section-indicator {
  width: 4px;
  height: 20px;
  background: var(--hdx-accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.hdx-section-indicator.gold {
  background: var(--hdx-gold);
}

.hdx-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hdx-section-title span.highlight {
  color: var(--hdx-accent);
}

.hdx-section-title span.count {
  font-size: 13px;
  font-weight: 600;
  color: var(--hdx-text-muted);
  background: var(--hdx-tag-bg);
  padding: 2px 8px;
  border-radius: var(--hdx-radius-full);
}

.hdx-section-action {
  font-size: 14px;
  font-weight: 600;
  color: var(--hdx-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--hdx-transition-fast), transform var(--hdx-transition-fast);
  white-space: nowrap;
}

.hdx-section-action:hover {
  color: var(--hdx-accent);
  transform: translateX(2px);
}

.hdx-section-action i {
  font-size: 11px;
}

@media (max-width: 767px) {
  .hdx-section-header {
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
  }
  .hdx-section-title {
    font-size: 17px;
    gap: 5px;
  }
  .hdx-section-action {
    font-size: 12.5px;
  }
}

/* ==========================================================================
   3. DESKTOP HEADER & NAVIGATION
   ========================================================================== */
.hdx-header-wrapper {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
  background: var(--hdx-header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hdx-border);
  box-shadow: var(--hdx-header-shadow, 0 1px 3px rgba(0, 0, 0, 0.04));
  transition: background-color var(--hdx-transition-base), border-color var(--hdx-transition-base), box-shadow var(--hdx-transition-base);
}

.hdx-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 16px;
  flex-wrap: nowrap;
}

/* Brand Logo */
.hdx-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hdx-brand img,
.hdx-site-logo {
  height: 48px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  transition: height var(--hdx-transition-fast), max-width var(--hdx-transition-fast);
}

/* Main Navigation */
.hdx-header-bar > nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hdx-main-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hdx-main-nav > li {
  flex-shrink: 0;
}

.hdx-nav-link {
  display: inline-flex;
  align-items: center;
  white-space: nowrap !important;
  padding: 7px 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hdx-text-secondary);
  border-radius: var(--hdx-radius-sm);
  transition: color var(--hdx-transition-fast), background-color var(--hdx-transition-fast);
}

.hdx-nav-link:hover {
  color: var(--hdx-text-primary);
  background: var(--hdx-tag-bg);
}

.hdx-nav-link.active {
  color: var(--hdx-accent);
  background: var(--hdx-accent-subtle);
}

/* Search Bar */
.hdx-search-form {
  position: relative;
  flex: 1 1 200px;
  max-width: 320px;
  min-width: 140px;
}

.hdx-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.hdx-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hdx-text-muted);
  font-size: 14px;
  pointer-events: none;
  z-index: 2;
  transition: color var(--hdx-transition-fast);
}

.hdx-search-form:focus-within .hdx-search-icon {
  color: var(--hdx-accent);
}

.hdx-search-input {
  width: 100%;
  height: 40px;
  padding: 0 44px 0 50px !important;
  font-size: 14px;
  color: var(--hdx-text-primary);
  background: var(--hdx-bg-input);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  outline: none;
  box-sizing: border-box;
  text-overflow: ellipsis;
  transition: border-color var(--hdx-transition-fast), background-color var(--hdx-transition-fast), box-shadow var(--hdx-transition-fast);
}

.hdx-search-input:focus {
  border-color: var(--hdx-border-active);
  background: var(--hdx-bg-surface);
  box-shadow: 0 0 0 3px var(--hdx-accent-subtle);
}

.hdx-search-input::placeholder {
  color: var(--hdx-text-muted);
}

.hdx-search-submit {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
  color: var(--hdx-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hdx-radius-sm);
  transition: all var(--hdx-transition-fast);
  z-index: 2;
}

.hdx-search-submit:hover {
  color: #ffffff;
  background: var(--hdx-accent);
}

/* Header Responsive Breakpoints to Prevent Navigation Wrapping & Layout Distortion */
@media (max-width: 1400px) {
  .hdx-header-bar {
    gap: 12px;
  }
  .hdx-brand img,
  .hdx-site-logo {
    height: 44px;
    max-width: 190px;
  }
  .hdx-nav-link {
    padding: 7px 9px;
    font-size: 13.5px;
  }
  .hdx-main-nav {
    gap: 2px;
  }
  .hdx-search-form {
    max-width: 260px;
    min-width: 140px;
  }
  .hdx-header-actions {
    gap: 8px;
  }
  .hdx-account-name {
    max-width: 80px;
  }
}

@media (max-width: 1240px) {
  .hdx-header-bar {
    gap: 8px;
  }
  .hdx-brand img,
  .hdx-site-logo {
    height: 38px;
    max-width: 170px;
  }
  .hdx-nav-link {
    padding: 6px 7px;
    font-size: 13px;
  }
  .hdx-main-nav {
    gap: 1px;
  }
  .hdx-search-form {
    max-width: 200px;
    min-width: 120px;
  }
  .hdx-search-input {
    height: 36px;
    font-size: 12.5px;
    padding: 0 34px 0 38px !important;
  }
  .hdx-search-icon {
    left: 12px;
    font-size: 12px;
  }
  .hdx-theme-toggle {
    width: 34px;
    height: 34px;
  }
  .hdx-account-btn {
    height: 34px;
    padding: 2px 9px 2px 5px;
    gap: 5px;
    font-size: 12.5px;
  }
  .hdx-account-avatar-mini {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
  .hdx-account-name {
    max-width: 70px;
    font-size: 12.5px;
  }
  .hdx-balance-badge {
    font-size: 11px;
    padding: 2px 5px;
    max-width: 85px;
  }
}

@media (max-width: 1080px) {
  .hdx-header-bar {
    gap: 6px;
  }
  .hdx-brand img,
  .hdx-site-logo {
    height: 34px;
    max-width: 145px;
  }
  .hdx-nav-link {
    padding: 5px 5px;
    font-size: 12px;
  }
  .hdx-search-form {
    max-width: 160px;
    min-width: 100px;
  }
  .hdx-account-name {
    max-width: 60px;
    font-size: 12px;
  }
  .hdx-balance-badge {
    max-width: 75px;
  }
}

/* Header Right Actions */
.hdx-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Theme Toggle Button */
.hdx-theme-toggle {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hdx-tag-bg);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  color: var(--hdx-text-secondary);
  cursor: pointer;
  transition: all var(--hdx-transition-fast);
  padding: 0;
}

.hdx-theme-toggle:hover {
  color: var(--hdx-text-primary);
  background: var(--hdx-border-hover);
  border-color: var(--hdx-border-hover);
}

.hdx-theme-toggle i {
  font-size: 15px;
}

/* VIP Promo Button */
.hdx-vip-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #e52955 0%, #b8173e 100%);
  border-radius: var(--hdx-radius-md);
  box-shadow: 0 2px 8px rgba(229, 41, 85, 0.35);
  transition: all var(--hdx-transition-fast);
  white-space: nowrap;
}

.hdx-vip-button:hover {
  color: #fff;
  background: linear-gradient(135deg, #f03360 0%, #cc1c46 100%);
  box-shadow: 0 4px 14px rgba(229, 41, 85, 0.45);
  transform: translateY(-1px);
}

.hdx-vip-button i {
  font-size: 14px;
}

/* User Account Button & Dropdown */
.hdx-account-wrap {
  position: relative;
  flex-shrink: 0;
}

.hdx-account-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 3px 12px 3px 6px;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-full, 24px);
  color: var(--hdx-text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--hdx-transition-fast);
  outline: none !important;
  white-space: nowrap !important;
  flex-shrink: 0;
}

.hdx-account-btn:hover,
.hdx-account-wrap.open .hdx-account-btn {
  background: var(--hdx-bg-elevated);
  border-color: var(--hdx-border-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.hdx-account-avatar-mini {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hdx-accent) 0%, #6366f1 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hdx-avatar-notif-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 1.5px solid var(--hdx-bg-card);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
}

.hdx-account-name {
  max-width: 95px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--hdx-text-primary);
}

.hdx-balance-badge {
  color: var(--hdx-gold-text);
  font-weight: 700;
  background: var(--hdx-gold-subtle);
  padding: 2px 7px;
  border-radius: var(--hdx-radius-sm);
  font-size: 11.5px;
  letter-spacing: -0.3px;
  white-space: nowrap !important;
  display: inline-block;
  font-variant-numeric: tabular-nums;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.hdx-account-caret {
  font-size: 12px;
  color: var(--hdx-text-muted);
  transition: transform 0.2s ease;
  margin-left: 2px;
}

.hdx-account-wrap.open .hdx-account-caret {
  transform: rotate(180deg);
  color: var(--hdx-accent);
}

/* Account Dropdown Menu Container (Compact & Scrollable) */
.hdx-account-wrap .dropdown-menu.hdx-dropdown-menu,
.hdx-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 270px !important;
  max-height: calc(100vh - 85px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: var(--hdx-bg-card, #171a22) !important;
  border: 1px solid var(--hdx-card-border, rgba(255, 255, 255, 0.1)) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  padding: 6px !important;
  margin: 0 !important;
  z-index: 10050 !important;
  list-style: none !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Custom Scrollbar for Dropdown */
.hdx-account-wrap .dropdown-menu.hdx-dropdown-menu::-webkit-scrollbar,
.hdx-dropdown-menu::-webkit-scrollbar {
  width: 4px;
}

.hdx-account-wrap .dropdown-menu.hdx-dropdown-menu::-webkit-scrollbar-track,
.hdx-dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

.hdx-account-wrap .dropdown-menu.hdx-dropdown-menu::-webkit-scrollbar-thumb,
.hdx-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

/* RESET ALL LEGACY style.css dropdown rules */
.hdx-account-wrap .hdx-dropdown-menu li,
.hdx-account-wrap .hdx-dropdown-menu > div,
.hdx-dropdown-menu li {
  border-bottom: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hdx-account-wrap .hdx-dropdown-menu li:nth-child(even),
.hdx-dropdown-menu li:nth-child(even) {
  background-color: transparent !important;
  background: transparent !important;
}

/* User Profile Header (Compact) */
.hdx-menu-user-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 6px;
}

.hdx-menu-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hdx-accent) 0%, #6366f1 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(229, 41, 85, 0.35);
}

.hdx-menu-user-info {
  flex: 1;
  min-width: 0;
}

.hdx-menu-username {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hdx-text-primary, #fff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.25;
}

.hdx-menu-username span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hdx-user-badge {
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.hdx-user-badge.vip {
  background: linear-gradient(135deg, #d4a042 0%, #a87920 100%);
  color: #fff;
  box-shadow: 0 1px 4px rgba(212, 160, 66, 0.4);
}

.hdx-user-badge.standart {
  background: rgba(255, 255, 255, 0.08);
  color: var(--hdx-text-secondary, #94a3b8);
}

.hdx-menu-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
}

.hdx-menu-bal-val {
  font-size: 12px;
  font-weight: 700;
  color: #facc15;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hdx-menu-bal-val i {
  font-size: 11px;
}

.hdx-menu-topup-link {
  font-size: 11px;
  font-weight: 700;
  color: #fef08a;
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.3);
  padding: 1px 7px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.hdx-menu-topup-link:hover {
  background: #facc15;
  color: #0f172a;
  text-decoration: none;
}

/* VIP Expiration Banner */
.hdx-menu-vip-expire {
  padding: 5px 8px;
  background: rgba(212, 160, 66, 0.08);
  border: 1px solid rgba(212, 160, 66, 0.2);
  border-radius: 6px;
  font-size: 11px;
  color: var(--hdx-gold-text, #fef08a);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}

.hdx-menu-vip-expire i {
  color: var(--hdx-gold);
  font-size: 11px;
}

.hdx-menu-vip-expire strong {
  color: #fff;
  font-weight: 700;
}

/* Divider & Section Labels */
.hdx-menu-divider {
  height: 1px;
  background: var(--hdx-card-border, rgba(255, 255, 255, 0.06));
  margin: 4px 2px;
}

.hdx-menu-section-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--hdx-text-muted, #64748b);
  padding: 4px 8px 2px 8px;
  text-transform: uppercase;
}

.hdx-menu-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Dropdown Menu Item (Compact) */
.hdx-account-wrap .dropdown-menu .hdx-dropdown-item,
.hdx-dropdown-menu .hdx-dropdown-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6.5px 8px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--hdx-text-primary, #e2e8f0) !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  transition: all 0.12s ease !important;
  background: transparent !important;
  border: none !important;
  line-height: 1.35 !important;
  clear: both !important;
}

.hdx-item-left {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.hdx-account-wrap .dropdown-menu .hdx-dropdown-item i,
.hdx-dropdown-menu .hdx-dropdown-item i {
  width: 15px !important;
  font-size: 12.5px !important;
  color: var(--hdx-text-muted, #94a3b8) !important;
  text-align: center !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  transition: color 0.12s ease !important;
}

.hdx-account-wrap .dropdown-menu .hdx-dropdown-item:hover,
.hdx-dropdown-menu .hdx-dropdown-item:hover {
  background: rgba(229, 41, 85, 0.08) !important;
  color: var(--hdx-accent, #e52955) !important;
}

.hdx-account-wrap .dropdown-menu .hdx-dropdown-item:hover i,
.hdx-dropdown-menu .hdx-dropdown-item:hover i {
  color: var(--hdx-accent, #e52955) !important;
}

.hdx-account-wrap .dropdown-menu .hdx-dropdown-item.item-danger:hover,
.hdx-dropdown-menu .hdx-dropdown-item.item-danger:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
}

.hdx-account-wrap .dropdown-menu .hdx-dropdown-item.item-danger:hover i,
.hdx-dropdown-menu .hdx-dropdown-item.item-danger:hover i {
  color: #ef4444 !important;
}

.hdx-dropdown-badge {
  background: var(--hdx-accent, #e52955);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
  line-height: 1.3;
}

/* Mobile Drawer User Card */
.hdx-drawer-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin: 0 16px 16px 16px;
  background: var(--hdx-bg-card);
  border-radius: var(--hdx-radius-md);
  border: 1px solid var(--hdx-border);
}

/* Guest Auth Buttons */
.hdx-auth-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hdx-btn-login {
  height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--hdx-text-secondary);
  border-radius: var(--hdx-radius-md);
  transition: all var(--hdx-transition-fast);
}

.hdx-btn-login:hover {
  color: var(--hdx-text-primary);
  background: var(--hdx-tag-bg);
}

.hdx-btn-register {
  height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--hdx-accent);
  border-radius: var(--hdx-radius-md);
  transition: all var(--hdx-transition-fast);
}

.hdx-btn-register:hover {
  color: #fff;
  background: var(--hdx-accent-hover);
}

/* ==========================================================================
   4. EDITORIAL SUB-NAV DISCOVERY ROW (GRUP VE AYRAÇLI YAPI)
   ========================================================================== */
.hdx-subnav {
  background: var(--hdx-subnav-bg);
  border-bottom: 1px solid var(--hdx-border);
  box-shadow: var(--hdx-subnav-shadow, 0 2px 6px rgba(0, 0, 0, 0.02));
  padding: 0;
  font-size: 13.5px;
  max-width: 100%;
  position: relative;
  z-index: 10;
  transition: background-color var(--hdx-transition-base), border-color var(--hdx-transition-base), box-shadow var(--hdx-transition-base);
}

.hdx-subnav .hdx-container {
  position: relative;
  max-width: var(--hdx-container-max);
  padding-left: 20px;
  padding-right: 20px;
}

.hdx-subnav-scroll-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hdx-subnav-list {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.hdx-subnav-list::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Dikey Ayraçlar (Divider) */
.hdx-subnav-divider {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--hdx-border);
  margin: 0 4px;
  flex-shrink: 0;
  opacity: 0.65;
}

/* Subnav Öğeleri */
.hdx-subnav-item {
  flex-shrink: 0;
}

.hdx-subnav-item a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hdx-text-secondary);
  border-radius: var(--hdx-radius-sm);
  white-space: nowrap;
  transition: all var(--hdx-transition-fast);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid transparent;
  text-decoration: none;
}

.hdx-subnav-item a:hover {
  color: var(--hdx-text-primary);
  background: var(--hdx-tag-bg);
  border-color: rgba(255, 255, 255, 0.08);
}

.hdx-subnav-item.active a {
  color: var(--hdx-text-primary);
  background: var(--hdx-tag-bg);
  border-color: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}

.hdx-subnav-item a i {
  font-size: 12.5px;
  opacity: 0.85;
  transition: transform var(--hdx-transition-fast);
}

.hdx-subnav-item a:hover i {
  opacity: 1;
  transform: scale(1.08);
}

/* Promo Butonu: Kod İle Aktif Et */
.hdx-subnav-item.promo a {
  color: var(--hdx-accent, #c084fc);
  font-weight: 600;
  background: var(--hdx-accent-subtle, rgba(168, 85, 247, 0.12));
  border: 1px solid rgba(168, 85, 247, 0.28);
}

.hdx-subnav-item.promo a:hover {
  background: var(--hdx-accent-subtle-hover, rgba(168, 85, 247, 0.22));
  border-color: rgba(168, 85, 247, 0.45);
  color: #ffffff;
}

.hdx-subnav-item.promo a i {
  color: var(--hdx-accent, #c084fc);
  opacity: 1;
}

/* VIP Butonu: Premium Paketler */
.hdx-subnav-item.vip a {
  color: #fbbf24;
  font-weight: 600;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.32);
}

.hdx-subnav-item.vip a:hover {
  background: rgba(234, 179, 8, 0.22);
  border-color: rgba(234, 179, 8, 0.55);
  color: #fef08a;
}

.hdx-subnav-item.vip a i {
  color: #facc15;
  opacity: 1;
}

/* Küçük Ekranlarda Kenar Taşma Gradyanı */
@media (max-width: 1200px) {
  .hdx-subnav-scroll-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--hdx-subnav-bg));
    pointer-events: none;
  }
}

/* Açık Tema Uyumluluğu - Alt Gezinme Çubuğu (Subnav) */
html[data-theme="light"] .hdx-subnav,
body.light .hdx-subnav {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] .hdx-subnav-item a,
body.light .hdx-subnav-item a {
  background: #ffffff !important;
  color: #475569 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

html[data-theme="light"] .hdx-subnav-item a:hover,
body.light .hdx-subnav-item a:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
}

html[data-theme="light"] .hdx-subnav-item.active a,
body.light .hdx-subnav-item.active a {
  background: rgba(229, 41, 85, 0.08) !important;
  color: var(--hdx-accent) !important;
  border-color: rgba(229, 41, 85, 0.28) !important;
  font-weight: 600;
}

html[data-theme="light"] .hdx-subnav-divider,
body.light .hdx-subnav-divider {
  background: rgba(0, 0, 0, 0.10) !important;
}

/* Promo Butonu: Kod İle Aktif Et */
html[data-theme="light"] .hdx-subnav-item.promo a,
body.light .hdx-subnav-item.promo a {
  color: #7c3aed !important;
  background: #f5f3ff !important;
  border: 1px solid rgba(124, 58, 237, 0.28) !important;
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.06) !important;
  font-weight: 600;
}

html[data-theme="light"] .hdx-subnav-item.promo a i,
body.light .hdx-subnav-item.promo a i {
  color: #7c3aed !important;
  opacity: 1 !important;
}

html[data-theme="light"] .hdx-subnav-item.promo a:hover,
body.light .hdx-subnav-item.promo a:hover {
  background: #ede9fe !important;
  color: #6d28d9 !important;
  border-color: rgba(124, 58, 237, 0.45) !important;
}

html[data-theme="light"] .hdx-subnav-item.promo a:hover i,
body.light .hdx-subnav-item.promo a:hover i {
  color: #6d28d9 !important;
}

/* VIP Butonu: Premium Paketler */
html[data-theme="light"] .hdx-subnav-item.vip a,
body.light .hdx-subnav-item.vip a {
  color: #b45309 !important;
  background: #fffbeb !important;
  border: 1px solid rgba(217, 119, 6, 0.30) !important;
  box-shadow: 0 1px 2px rgba(217, 119, 6, 0.06) !important;
  font-weight: 600;
}

html[data-theme="light"] .hdx-subnav-item.vip a i,
body.light .hdx-subnav-item.vip a i {
  color: #d97706 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .hdx-subnav-item.vip a:hover,
body.light .hdx-subnav-item.vip a:hover {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: rgba(217, 119, 6, 0.50) !important;
}

html[data-theme="light"] .hdx-subnav-item.vip a:hover i,
body.light .hdx-subnav-item.vip a:hover i {
  color: #92400e !important;
}

/* ==========================================================================
   5. MOBILE HEADER & NAVIGATION DRAWER
   ========================================================================== */
.hdx-mobile-header {
  display: none;
}

.hdx-mobile-search-bar {
  display: none;
}

@media (max-width: 767px) {
  .hdx-header-wrapper {
    display: none !important;
  }

  .hdx-mobile-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 56px !important;
    padding: 0 12px !important;
    background: var(--hdx-header-bg) !important;
    border-bottom: 1px solid var(--hdx-border) !important;
    box-shadow: var(--hdx-header-shadow, 0 1px 3px rgba(0, 0, 0, 0.04)) !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hdx-mobile-brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    max-width: calc(100% - 140px) !important;
    z-index: 1 !important;
  }

  .hdx-mobile-brand img {
    height: 38px !important;
    width: auto !important;
    max-width: 170px !important;
    object-fit: contain !important;
    display: block !important;
  }

  .hdx-mobile-tools {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    z-index: 2 !important;
  }

  #hdxMobileDrawerBtn {
    position: relative !important;
    z-index: 2 !important;
  }

  .hdx-mobile-tool-btn {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 1px solid var(--hdx-border) !important;
    border-radius: var(--hdx-radius-sm) !important;
    color: var(--hdx-text-primary) !important;
    cursor: pointer !important;
    padding: 0 !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    transition: background var(--hdx-transition-fast), color var(--hdx-transition-fast);
  }

  .hdx-mobile-tool-btn:hover,
  .hdx-mobile-tool-btn:focus {
    background: var(--hdx-bg-hover) !important;
    color: var(--hdx-accent) !important;
  }

  /* Mobile Search Dropdown/Bar */
  .hdx-mobile-search-bar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--hdx-header-bg, var(--hdx-bg-surface));
    border-bottom: 1px solid var(--hdx-border);
    position: sticky;
    top: 56px;
    left: 0;
    width: 100%;
    z-index: 10050;
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }

  .hdx-mobile-search-bar.active {
    display: flex !important;
  }

  .hdx-mobile-search-bar form,
  .hdx-mobile-search-bar .hdx-search-form {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .hdx-mobile-search-bar .hdx-search-input-wrap {
    width: 100% !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
  }

  .hdx-mobile-search-bar .hdx-search-input {
    width: 100% !important;
    height: 40px !important;
    line-height: normal !important;
    padding: 0 40px 0 40px !important;
    font-size: 13.5px !important;
    background: var(--hdx-bg-elevated) !important;
    border: 1px solid var(--hdx-border) !important;
    border-radius: 20px !important;
    color: var(--hdx-text-primary) !important;
    box-sizing: border-box !important;
    outline: none !important;
  }

  .hdx-mobile-search-bar .hdx-search-input:focus {
    border-color: var(--hdx-accent) !important;
    box-shadow: 0 0 0 3px rgba(229, 41, 85, 0.18) !important;
  }

  .hdx-mobile-search-bar .hdx-search-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--hdx-text-muted) !important;
    font-size: 13.5px !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  .hdx-mobile-search-bar .hdx-search-submit {
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: var(--hdx-accent) !important;
    color: #fff !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 11px !important;
    z-index: 2 !important;
    transition: transform 0.15s ease !important;
  }

  .hdx-mobile-search-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--hdx-tag-bg, rgba(255, 255, 255, 0.08));
    border: 1px solid var(--hdx-border);
    color: var(--hdx-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    transition: all var(--hdx-transition-fast);
  }

  .hdx-mobile-search-close:hover {
    background: rgba(229, 41, 85, 0.15);
    color: var(--hdx-accent);
    border-color: var(--hdx-accent);
  }

  .hdx-mobile-search-bar .hdx-search-autocomplete {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 160px) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65) !important;
    box-sizing: border-box !important;
    z-index: 10080 !important;
  }

  .hdx-mobile-search-bar .hdx-search-results-list {
    max-height: calc(100vh - 250px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (min-width: 768px) {
  .hdx-mobile-header,
  .hdx-mobile-search-bar,
  .hdx-bottom-nav {
    display: none !important;
  }
}

/* Off-Canvas Mobile Drawer */
.hdx-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--hdx-bg-overlay);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hdx-transition-base), visibility var(--hdx-transition-base);
}

.hdx-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.hdx-mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 82%;
  max-width: 340px;
  background: var(--hdx-bg-surface);
  z-index: 10001;
  transform: translateX(-100%);
  transition: transform var(--hdx-transition-smooth);
  display: flex;
  flex-direction: column;
  box-shadow: var(--hdx-shadow-lg);
  overflow-y: auto;
}

.hdx-drawer-overlay.open .hdx-mobile-drawer {
  transform: translateX(0);
}

.hdx-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hdx-border);
}

.hdx-drawer-header img {
  height: 32px;
}

.hdx-drawer-close {
  background: transparent;
  border: none;
  color: var(--hdx-text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
}

.hdx-drawer-body {
  padding: 14px 0;
  flex: 1;
}

.hdx-drawer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hdx-drawer-nav li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 20px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--hdx-text-primary);
  border-bottom: 1px solid var(--hdx-border, rgba(255, 255, 255, 0.04));
  text-decoration: none;
  transition: all var(--hdx-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.hdx-drawer-nav li a:hover,
.hdx-drawer-nav li a:active {
  background: var(--hdx-tag-bg);
  color: var(--hdx-accent);
}

.hdx-drawer-nav li a i {
  margin-right: 14px;
  width: 20px;
  text-align: center;
  color: var(--hdx-text-muted);
  font-size: 16px;
  flex-shrink: 0;
  transition: color var(--hdx-transition-fast);
}

.hdx-drawer-nav li a:hover i,
.hdx-drawer-nav li a:active i {
  color: var(--hdx-accent);
}

.hdx-drawer-nav li a > span:first-child {
  display: inline-flex;
  align-items: center;
}

.hdx-drawer-nav li a .hdx-dropdown-badge {
  margin-left: auto;
}

/* Distinct Prominent Promo Item in Mobile Drawer */
.hdx-drawer-nav li.hdx-drawer-promo-item {
  margin: 10px 14px 4px 14px;
}

.hdx-drawer-nav li.hdx-drawer-promo-item a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  background: linear-gradient(135deg, rgba(229, 41, 85, 0.16) 0%, rgba(244, 63, 94, 0.08) 100%) !important;
  border: 1px solid rgba(229, 41, 85, 0.35) !important;
  border-radius: var(--hdx-radius-md, 8px) !important;
  box-shadow: 0 2px 8px rgba(229, 41, 85, 0.12) !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hdx-drawer-nav li.hdx-drawer-promo-item a:hover,
.hdx-drawer-nav li.hdx-drawer-promo-item a:active {
  background: linear-gradient(135deg, rgba(229, 41, 85, 0.24) 0%, rgba(244, 63, 94, 0.14) 100%) !important;
  border-color: var(--hdx-accent) !important;
  box-shadow: 0 4px 14px rgba(229, 41, 85, 0.25) !important;
  transform: translateY(-1px);
}

.hdx-drawer-promo-left {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.hdx-drawer-promo-left i {
  font-size: 16px !important;
  color: var(--hdx-accent) !important;
  width: auto !important;
  margin-right: 0 !important;
  flex-shrink: 0;
}

.hdx-drawer-promo-left strong {
  color: var(--hdx-text-primary);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.hdx-drawer-promo-badge {
  background: var(--hdx-accent);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 2.5px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  box-shadow: 0 1px 4px rgba(229, 41, 85, 0.4);
}

html[data-theme="light"] .hdx-drawer-nav li.hdx-drawer-promo-item a,
body.light .hdx-drawer-nav li.hdx-drawer-promo-item a {
  background: linear-gradient(135deg, rgba(229, 41, 85, 0.10) 0%, rgba(244, 63, 94, 0.04) 100%) !important;
  border-color: rgba(229, 41, 85, 0.28) !important;
}

html[data-theme="light"] .hdx-drawer-promo-left strong,
body.light .hdx-drawer-promo-left strong {
  color: #0f172a;
}

.hdx-drawer-section-title {
  padding: 16px 20px 8px 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hdx-text-muted);
}

/* ==========================================================================
   6. MOBILE BOTTOM NAVIGATION BAR
   ========================================================================== */
.hdx-bottom-nav {
  display: none;
}

@media (max-width: 767px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .hdx-bottom-nav {
    display: flex !important;
    flex-direction: row !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: var(--hdx-bottomnav-bg) !important;
    border-top: 1px solid var(--hdx-border) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 9999 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2) !important;
    justify-content: space-around !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .hdx-bottom-nav-item {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 48px !important;
    color: var(--hdx-text-muted) !important;
    text-decoration: none !important;
    transition: color var(--hdx-transition-fast);
    position: relative !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .hdx-bottom-nav-item i {
    font-size: 19px !important;
    margin-bottom: 3px !important;
    transition: transform var(--hdx-transition-fast);
    display: block !important;
  }

  .hdx-bottom-nav-item span {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    display: block !important;
  }

  .hdx-bottom-nav-item.active {
    color: var(--hdx-accent) !important;
  }

  .hdx-bottom-nav-item.active i {
    transform: translateY(-2px);
  }

  .hdx-bottom-nav-badge {
    position: absolute !important;
    top: 4px !important;
    right: calc(50% - 18px) !important;
    background: var(--hdx-accent) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 1px 5px !important;
    border-radius: var(--hdx-radius-full) !important;
    min-width: 16px !important;
    text-align: center !important;
  }

  /* Modal or fullscreen open: hide bottom nav */
  body.modal-open .hdx-bottom-nav {
    display: none !important;
  }
}

/* ==========================================================================
   7. VIDEO CARD SYSTEM
   ========================================================================== */
.hdx-video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 20px;
}

@media (max-width: 1199px) {
  .hdx-video-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 16px;
  }
}

@media (max-width: 767px) {
  .hdx-video-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .hdx-card .hdx-thumbnail-box {
    margin-bottom: 10px !important;
  }

  .hdx-card .hdx-card-title {
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
  }

  .hdx-card .hdx-card-meta {
    font-size: 12.5px !important;
  }
}

/* Individual Video Card */
.hdx-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: transparent;
  border-radius: var(--hdx-radius-md);
  transition: transform var(--hdx-transition-base);
}

.hdx-card:hover {
  transform: translateY(-3px);
}

/* Card Thumbnail Box */
.hdx-thumbnail-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--hdx-radius-md);
  overflow: hidden;
  background: var(--hdx-bg-card);
  margin-bottom: 12px;
  box-shadow: var(--hdx-shadow-card);
  border: 1px solid var(--hdx-card-border);
}

.hdx-thumbnail-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hdx-card:hover .hdx-thumbnail-box img {
  transform: scale(1.04);
}

/* Video Badges */
.hdx-badge {
  position: absolute;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--hdx-radius-xs);
  z-index: 2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hdx-badge.type-premium {
  bottom: 8px;
  left: 8px;
  background: linear-gradient(135deg, #d4a042 0%, #a87920 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.hdx-badge.type-free {
  bottom: 8px;
  left: 8px;
  background: rgba(16, 185, 129, 0.9);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.hdx-badge.type-exclusive {
  bottom: 8px;
  left: 8px;
  background: linear-gradient(135deg, var(--hdx-accent) 0%, #b8173e 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(229, 41, 85, 0.45);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hdx-badge.duration,
.hdx-badge.badge-duration {
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.82);
  color: #f3f4f6;
  font-variant-numeric: tabular-nums;
  padding: 4px 6px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Channel Ribbon / Tag on thumbnail */
.hdx-channel-ribbon {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--hdx-radius-xs);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 2;
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hdx-channel-ribbon:hover {
  background: var(--hdx-accent);
  color: #fff;
}

/* Hover Play Overlay Icon */
.hdx-play-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity var(--hdx-transition-fast);
  pointer-events: none;
}

.hdx-play-hover-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--hdx-radius-full);
  background: var(--hdx-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(229, 41, 85, 0.5);
  transform: scale(0.85);
  transition: transform var(--hdx-transition-fast);
}

.hdx-play-hover-icon i {
  font-size: 16px;
  margin-left: 3px;
}

.hdx-card:hover .hdx-play-hover {
  opacity: 1;
}

.hdx-card:hover .hdx-play-hover-icon {
  transform: scale(1);
}

/* Card Content / Info */
.hdx-card-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hdx-card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hdx-text-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.7em;
  transition: color var(--hdx-transition-fast);
}

.hdx-card:hover .hdx-card-title {
  color: var(--hdx-accent);
}

/* Card Metadata Row */
.hdx-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--hdx-text-muted);
}

.hdx-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hdx-card-channel-name {
  color: var(--hdx-text-secondary);
  font-weight: 500;
}

.hdx-card-channel-name:hover {
  color: var(--hdx-accent);
}

.hdx-meta-divider {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: var(--hdx-radius-full);
  background: var(--hdx-text-muted);
  opacity: 0.6;
}

.hdx-rating-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--hdx-text-secondary);
}

.hdx-rating-stat i {
  color: var(--hdx-accent);
  font-size: 12px;
}

/* ==========================================================================
   8. FEATURED SPOTLIGHT HERO COMPONENT
   ========================================================================== */
.hdx-featured-hero {
  position: relative;
  background: var(--hdx-bg-surface);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-lg);
  overflow: hidden;
  margin-top: 30px;
  margin-bottom: 36px;
  box-shadow: var(--hdx-shadow-md);
}

.hdx-featured-inner {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
  min-height: 380px;
}

@media (max-width: 991px) {
  .hdx-featured-hero {
    margin-top: 22px;
    margin-bottom: 28px;
  }
  .hdx-featured-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .hdx-featured-hero {
    display: none !important;
  }
}

.hdx-featured-media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 340px;
  background: #000;
  overflow: hidden;
}

.hdx-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.hdx-featured-hero:hover .hdx-featured-media img {
  transform: scale(1.03);
}

.hdx-featured-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 65%, var(--hdx-bg-surface) 100%),
              linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 40%);
}

@media (max-width: 991px) {
  .hdx-featured-media::after {
    background: linear-gradient(to top, var(--hdx-bg-surface) 0%, transparent 50%);
  }
}

.hdx-featured-content {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

@media (max-width: 767px) {
  .hdx-featured-content {
    padding: 20px 18px;
  }
}

.hdx-featured-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hdx-featured-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--hdx-radius-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hdx-featured-tag.primary {
  background: var(--hdx-accent);
  color: #fff;
}

.hdx-featured-tag.gold {
  background: var(--hdx-gold);
  color: #fff;
}

.hdx-featured-tag.ghost {
  background: var(--hdx-tag-bg);
  color: var(--hdx-text-secondary);
  border: 1px solid var(--hdx-border);
}

.hdx-featured-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hdx-text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

@media (max-width: 767px) {
  .hdx-featured-title {
    font-size: 19px;
  }
}

.hdx-featured-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--hdx-text-muted);
}

.hdx-featured-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.hdx-btn-play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--hdx-accent);
  border-radius: var(--hdx-radius-md);
  box-shadow: 0 4px 14px rgba(229, 41, 85, 0.4);
  transition: all var(--hdx-transition-fast);
}

.hdx-btn-play:hover {
  color: #fff;
  background: var(--hdx-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(229, 41, 85, 0.5);
}

/* ==========================================================================
   9. POPULAR CHANNELS / STUDIOS CARDS
   ========================================================================== */
.hdx-channels-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

@media (max-width: 1199px) {
  .hdx-channels-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {
  .hdx-channels-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .hdx-channels-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hdx-channel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-md);
  padding: 16px 12px;
  transition: all var(--hdx-transition-base);
  box-shadow: var(--hdx-shadow-card);
}

.hdx-channel-card:hover {
  background: var(--hdx-bg-card-hover);
  border-color: var(--hdx-border-hover);
  transform: translateY(-3px);
  box-shadow: var(--hdx-shadow-card-hover);
}

.hdx-channel-avatar {
  width: 76px;
  height: 76px;
  border-radius: var(--hdx-radius-full);
  overflow: hidden;
  background: var(--hdx-bg-elevated);
  border: 2px solid var(--hdx-border);
  margin-bottom: 12px;
  flex-shrink: 0;
  transition: border-color var(--hdx-transition-fast);
}

.hdx-channel-card:hover .hdx-channel-avatar {
  border-color: var(--hdx-accent);
}

.hdx-channel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hdx-channel-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.hdx-channel-views {
  font-size: 12px;
  color: var(--hdx-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.hdx-channel-views i {
  font-size: 11px;
}

/* ==========================================================================
   10. POPULAR STARS / PERFORMERS CARDS
/* ==========================================================================
   10. POPULAR STARS / PERFORMERS CARDS (MODERN VIP AVATAR DESIGN)
   ========================================================================== */
.hdx-stars-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

@media (max-width: 1199px) {
  .hdx-stars-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
}

@media (max-width: 767px) {
  .hdx-stars-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .hdx-stars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.hdx-star-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-md);
  padding: 22px 14px 18px 14px;
  overflow: visible;
  position: relative;
  transition: all var(--hdx-transition-base);
  box-shadow: var(--hdx-shadow-card);
  text-decoration: none;
}

.hdx-star-card:hover {
  transform: translateY(-4px);
  background: var(--hdx-bg-card-hover);
  border-color: rgba(229, 41, 85, 0.45);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(229, 41, 85, 0.16);
}

.hdx-star-photo-wrap {
  position: relative;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--hdx-bg-elevated);
  box-shadow: 0 0 0 3px var(--hdx-bg-card), 0 0 0 5px rgba(229, 41, 85, 0.28);
  transition: all var(--hdx-transition-base);
  flex-shrink: 0;
  margin: 0 auto;
}

.hdx-star-card:hover .hdx-star-photo-wrap {
  box-shadow: 0 0 0 3px var(--hdx-bg-card), 0 0 0 5px var(--hdx-accent), 0 0 22px rgba(229, 41, 85, 0.5);
  transform: scale(1.04);
}

.hdx-star-photo-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  transition: transform 0.35s ease;
}

.hdx-star-card:hover .hdx-star-photo-wrap img {
  transform: scale(1.04);
}

.hdx-star-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: 2px solid var(--hdx-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease;
  z-index: 2;
}

.hdx-star-card:hover .hdx-star-badge {
  transform: scale(1.15) rotate(15deg);
  background: linear-gradient(135deg, #e52955, #f43f5e);
}

.hdx-star-info {
  padding: 14px 4px 0 4px;
  text-align: center;
  width: 100%;
}

.hdx-star-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: color var(--hdx-transition-fast);
}

.hdx-star-card:hover .hdx-star-name {
  color: var(--hdx-accent);
}

.hdx-star-views {
  font-size: 12px;
  color: var(--hdx-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.hdx-star-views i {
  font-size: 11px;
  color: var(--hdx-accent);
  opacity: 0.85;
}

@media (max-width: 480px) {
  .hdx-star-card {
    padding: 16px 8px 12px 8px;
  }
  .hdx-star-photo-wrap {
    width: 86px;
    height: 86px;
  }
  .hdx-star-badge {
    width: 22px;
    height: 22px;
    font-size: 9.5px;
  }
  .hdx-star-name {
    font-size: 13px;
  }
}

/* ==========================================================================
   11. PHOTO GALLERY CARDS
   ========================================================================== */
.hdx-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 991px) {
  .hdx-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .hdx-gallery-grid {
    grid-template-columns: 1fr;
  }
}

.hdx-gallery-card {
  display: flex;
  flex-direction: column;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-md);
  overflow: hidden;
  transition: transform var(--hdx-transition-base), box-shadow var(--hdx-transition-base);
  box-shadow: var(--hdx-shadow-card);
}

.hdx-gallery-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--hdx-shadow-card-hover);
}

.hdx-gallery-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--hdx-bg-elevated);
  overflow: hidden;
}

.hdx-gallery-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.hdx-gallery-card:hover .hdx-gallery-media img {
  transform: scale(1.04);
}

.hdx-gallery-count {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--hdx-radius-xs);
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hdx-gallery-body {
  padding: 14px 16px;
}

.hdx-gallery-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--hdx-text-primary);
  margin: 0 0 6px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

.hdx-gallery-card:hover .hdx-gallery-title {
  color: var(--hdx-accent);
}

/* ==========================================================================
   12. VIP MEMBERSHIP PROMOTION BANNER (Ultra Premium Edition)
   ========================================================================== */
.hdx-vip-promo-box {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #fffdfa 40%, #fff7ed 100%);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 16px;
  padding: 38px 44px;
  margin: 44px 0;
  box-shadow: 0 16px 36px -8px rgba(229, 41, 85, 0.08), 0 4px 18px rgba(212, 160, 66, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Dark Theme Support */
html[data-theme="dark"] .hdx-vip-promo-box,
body.dark .hdx-vip-promo-box {
  background: linear-gradient(135deg, #131620 0%, #181c28 50%, #1f1a26 100%);
  border-color: rgba(245, 158, 11, 0.25);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(229, 41, 85, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hdx-vip-promo-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, #f59e0b 0%, #e52955 60%, #be123c 100%);
  box-shadow: 0 0 12px rgba(229, 41, 85, 0.4);
}

.hdx-vip-promo-bg-glow {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 41, 85, 0.12) 0%, rgba(245, 158, 11, 0.1) 40%, transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}

.hdx-vip-promo-bg-icon {
  position: absolute;
  right: 28px;
  bottom: -25px;
  font-size: 170px;
  opacity: 0.04;
  color: var(--hdx-accent);
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

html[data-theme="dark"] .hdx-vip-promo-bg-icon,
body.dark .hdx-vip-promo-bg-icon {
  opacity: 0.06;
}

.hdx-vip-promo-box:hover .hdx-vip-promo-bg-icon {
  transform: rotate(-6deg) scale(1.06);
  opacity: 0.07;
}

.hdx-vip-promo-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  align-items: center;
  gap: 36px;
}

.hdx-vip-promo-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.badge-vip-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.badge-vip-pill i {
  font-size: 11px;
}

.hdx-vip-promo-subtag {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #b45309;
}

html[data-theme="dark"] .hdx-vip-promo-subtag,
body.dark .hdx-vip-promo-subtag {
  color: #f59e0b;
}

.hdx-vip-promo-title {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin: 0 0 10px 0;
  color: var(--hdx-text-primary);
}

.hdx-gradient-text {
  background: linear-gradient(135deg, #e52955 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hdx-vip-promo-desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--hdx-text-secondary);
  max-width: 620px;
  margin: 0 0 20px 0;
  font-weight: 450;
}

.hdx-vip-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 680px;
}

.hdx-vip-feature-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="dark"] .hdx-vip-feature-item,
body.dark .hdx-vip-feature-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.hdx-vip-feature-item:hover {
  transform: translateY(-2px);
  border-color: rgba(229, 41, 85, 0.35);
  box-shadow: 0 6px 14px rgba(229, 41, 85, 0.12);
}

.hdx-vip-feature-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(229, 41, 85, 0.12) 0%, rgba(245, 158, 11, 0.16) 100%);
  color: #e52955;
  font-size: 14px;
  flex-shrink: 0;
}

.hdx-vip-feature-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hdx-vip-feature-text strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  line-height: 1.25;
  white-space: nowrap;
}

.hdx-vip-feature-text small {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--hdx-text-muted);
  margin-top: 1px;
  white-space: nowrap;
}

.hdx-vip-promo-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 230px;
}

.hdx-btn-vip-upgrade {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  padding: 0 28px;
  font-size: 15.5px;
  font-weight: 800;
  color: #ffffff !important;
  background: linear-gradient(135deg, #e52955 0%, #d41846 50%, #b8173e 100%);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(229, 41, 85, 0.42), 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.hdx-btn-vip-upgrade:hover {
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 28px rgba(229, 41, 85, 0.55), 0 4px 8px rgba(0, 0, 0, 0.15);
}

.hdx-btn-vip-upgrade .btn-arrow {
  font-size: 13px;
  transition: transform 0.25s ease;
}

.hdx-btn-vip-upgrade:hover .btn-arrow {
  transform: translateX(4px);
}

@keyframes hdxShimmerSweep {
  0% { transform: translateX(-150%) skewX(-20deg); }
  40%, 100% { transform: translateX(250%) skewX(-20deg); }
}

.btn-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  pointer-events: none;
  animation: hdxShimmerSweep 3.8s infinite ease-in-out;
}

.hdx-btn-promo-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #b45309;
  background: rgba(245, 158, 11, 0.09);
  border: 1px dashed rgba(245, 158, 11, 0.45);
  text-decoration: none !important;
  transition: all 0.2s ease;
  width: 100%;
}

html[data-theme="dark"] .hdx-btn-promo-code,
body.dark .hdx-btn-promo-code {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
}

.hdx-btn-promo-code:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.7);
  color: #92400e;
  transform: translateY(-1px);
}

html[data-theme="dark"] .hdx-btn-promo-code:hover,
body.dark .hdx-btn-promo-code:hover {
  color: #fbbf24;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .hdx-vip-promo-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hdx-vip-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .hdx-vip-promo-actions {
    width: 100%;
    align-items: stretch;
  }
}

@media (max-width: 767px) {
  .hdx-vip-promo-box {
    padding: 26px 20px;
    margin: 32px 0;
  }

  .hdx-vip-promo-title {
    font-size: 21px;
  }
}

@media (max-width: 480px) {
  .hdx-vip-features {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.hdx-footer {
  background: var(--hdx-footer-bg);
  border-top: 1px solid var(--hdx-border);
  padding: 50px 0 36px 0;
  margin-top: 60px;
  font-size: 14px;
  color: var(--hdx-text-muted);
}

.hdx-footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 36px;
  margin-bottom: 36px;
}

.hdx-footer-brand {
  display: flex;
  flex-direction: column;
}

.hdx-footer-brand .hdx-site-logo {
  height: 52px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  transition: opacity var(--hdx-transition-fast);
}

.hdx-footer-brand .hdx-site-logo:hover {
  opacity: 0.9;
}

.hdx-footer-brand p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--hdx-text-secondary);
  margin: 14px 0 16px 0;
}

.hdx-footer-col h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0 0 16px 0;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hdx-footer-col h4::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 13px;
  background: var(--hdx-accent);
  border-radius: 2px;
}

.hdx-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hdx-footer-links a {
  color: var(--hdx-text-secondary);
  font-size: 13.5px;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  padding: 3px 0;
  transition: all var(--hdx-transition-fast);
}

.hdx-footer-links a:hover {
  color: var(--hdx-accent);
  transform: translateX(2px);
}

.hdx-footer-socials {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

.hdx-social-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--hdx-radius-sm);
  background: var(--hdx-tag-bg);
  border: 1px solid var(--hdx-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hdx-text-secondary);
  font-size: 15px;
  transition: all var(--hdx-transition-fast);
}

.hdx-social-btn:hover {
  background: var(--hdx-accent);
  color: #fff;
  border-color: var(--hdx-accent);
  transform: translateY(-2px);
}

/* Footer Bottom Bar */
.hdx-footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--hdx-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
}

.hdx-footer-legal-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hdx-18-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--hdx-radius-xs);
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.22);
  color: #f87171;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

html[data-theme="light"] .hdx-18-notice,
body.light .hdx-18-notice {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.2);
  color: #dc2626;
}

.hdx-footer-legal-text {
  color: var(--hdx-text-muted);
  font-size: 12.5px;
}

.hdx-footer-copy {
  color: var(--hdx-text-muted);
  font-size: 12.5px;
  white-space: nowrap;
}

/* Tablet Layout (769px - 991px) */
@media (max-width: 991px) and (min-width: 769px) {
  .hdx-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px 28px;
  }
}

/* Mobile Layout (<= 768px) */
@media (max-width: 768px) {
  .hdx-footer {
    padding: 32px 0 calc(78px + env(safe-area-inset-bottom, 0px)) 0;
    margin-top: 36px;
  }

  .hdx-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
    margin-bottom: 24px;
  }

  /* Centered Brand Presentation on Mobile */
  .hdx-footer-brand {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--hdx-border);
    margin-bottom: 4px;
  }

  .hdx-footer-brand .hdx-site-logo {
    height: 42px;
    max-width: 220px;
    margin: 0 auto;
  }

  .hdx-footer-brand p {
    font-size: 13px;
    line-height: 1.55;
    max-width: 330px;
    margin: 10px auto 14px auto;
  }

  .hdx-footer-socials {
    justify-content: center;
    gap: 12px;
    margin-top: 0;
  }

  .hdx-social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }

  /* Link Columns on Mobile */
  .hdx-footer-col h4 {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .hdx-footer-links {
    gap: 6px;
  }

  .hdx-footer-links a {
    font-size: 13px;
    padding: 3px 0;
  }

  /* Destek & Bilgi Spans 2 Columns as a 2-col subgrid */
  .hdx-footer-col-legal {
    grid-column: 1 / -1;
    padding-top: 14px;
    border-top: 1px solid var(--hdx-border);
  }

  .hdx-footer-col-legal .hdx-footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
  }

  /* Bottom Bar Stacking & Centering on Mobile */
  .hdx-footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding-top: 18px;
  }

  .hdx-footer-legal-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .hdx-footer-legal-text {
    font-size: 12px;
    max-width: 320px;
    text-align: center;
  }

  .hdx-footer-copy {
    font-size: 12px;
    text-align: center;
  }
}

/* Very Small Mobile (< 360px) */
@media (max-width: 359px) {
  .hdx-footer-top {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hdx-footer-col-legal .hdx-footer-links {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   14. UTILITY & BUTTON CLASSES
   ========================================================================== */
.hdx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--hdx-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--hdx-transition-fast);
}

.hdx-btn-primary {
  background: var(--hdx-accent);
  color: #fff;
}

.hdx-btn-primary:hover {
  background: var(--hdx-accent-hover);
  color: #fff;
}

.hdx-btn-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #cbd5e1 !important;
}

.hdx-btn-secondary:hover,
.hdx-btn-secondary:focus {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.hdx-btn-outline {
  background: transparent;
  border-color: var(--hdx-border);
  color: var(--hdx-text-primary);
}

.hdx-btn-outline:hover {
  border-color: var(--hdx-border-hover);
  background: var(--hdx-tag-bg);
  color: var(--hdx-text-primary);
}

.hdx-center-btn {
  display: flex;
  justify-content: center;
  margin: 28px 0 10px 0;
}

/* Accessibility & Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   15. INNER PAGE HEADERS & BREADCRUMBS
   ========================================================================== */
.hdx-page-header {
  background: var(--hdx-bg-surface);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-lg);
  padding: 24px 28px;
  margin: 20px 0 28px 0;
  box-shadow: var(--hdx-shadow-sm);
  position: relative;
}

@media (max-width: 767px) {
  .hdx-page-header {
    padding: 18px 16px;
    margin: 14px 0 20px 0;
  }
}

.hdx-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--hdx-text-muted);
  margin-bottom: 12px;
}

.hdx-breadcrumbs a {
  color: var(--hdx-text-secondary);
  transition: color var(--hdx-transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hdx-breadcrumbs a:hover {
  color: var(--hdx-accent);
}

.hdx-breadcrumbs i.fa-angle-right {
  font-size: 11px;
  opacity: 0.6;
}

.hdx-breadcrumbs span {
  color: var(--hdx-text-primary);
  font-weight: 600;
}

.hdx-page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.hdx-page-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hdx-page-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hdx-text-primary);
  margin: 0;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .hdx-page-title {
    font-size: 20px;
  }
}

.hdx-page-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--hdx-radius-full);
  background: var(--hdx-tag-bg);
  border: 1px solid var(--hdx-border);
  color: var(--hdx-text-secondary);
}

.hdx-page-description {
  margin: 10px 0 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--hdx-text-secondary);
  max-width: 800px;
}

/* Category header with avatar */
.hdx-category-hero-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hdx-category-header-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--hdx-radius-md);
  overflow: hidden;
  border: 2px solid var(--hdx-border);
  flex-shrink: 0;
  background: var(--hdx-bg-elevated);
  box-shadow: var(--hdx-shadow-sm);
}

@media (max-width: 540px) {
  .hdx-category-header-avatar {
    width: 54px;
    height: 54px;
  }
}

.hdx-category-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Category Filter & Search Bar */
.hdx-category-filter-bar {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--hdx-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.hdx-category-search-box {
  position: relative;
  flex: 1;
  max-width: 480px;
  min-width: 240px;
}

.hdx-category-search-box form,
.hdx-category-search-box .hdx-search-form,
.hdx-category-search-box .hdx-channels-search-form,
.hdx-category-search-box .hdx-stars-search-form {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex;
  align-items: center;
  margin: 0;
  flex: 1 1 auto;
}

.hdx-category-search-box .hdx-search-input-wrap {
  width: 100% !important;
  position: relative;
  display: flex;
  align-items: center;
}

.hdx-category-search-input {
  width: 100% !important;
  height: 42px !important;
  line-height: normal !important;
  padding: 0 44px 0 48px !important;
  font-size: 14px !important;
  background: var(--hdx-bg-input);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  color: var(--hdx-text-primary);
  outline: none;
  box-sizing: border-box !important;
  text-overflow: ellipsis;
  transition: border-color var(--hdx-transition-fast), background-color var(--hdx-transition-fast), box-shadow var(--hdx-transition-fast);
}

.hdx-category-search-input::-webkit-search-cancel-button,
.hdx-category-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.hdx-category-search-input:focus {
  border-color: var(--hdx-accent) !important;
  background: var(--hdx-bg-surface);
  box-shadow: 0 0 0 3px var(--hdx-accent-subtle) !important;
}

.hdx-category-search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hdx-text-muted);
  pointer-events: none;
  font-size: 14px;
  z-index: 2;
  transition: color var(--hdx-transition-fast);
}

.hdx-category-search-box:focus-within .hdx-category-search-icon,
.hdx-category-search-box form:focus-within .hdx-category-search-icon {
  color: var(--hdx-accent);
}

.hdx-category-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: var(--hdx-radius-full);
  background: var(--hdx-tag-bg);
  border: none;
  color: var(--hdx-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  padding: 0;
  z-index: 3;
  transition: all var(--hdx-transition-fast);
}

.hdx-category-search-clear:hover {
  background: var(--hdx-accent);
  color: #fff;
}

.hdx-category-filter-meta {
  font-size: 13.5px;
  color: var(--hdx-text-muted);
  font-weight: 500;
}

@media (max-width: 767px) {
  .hdx-category-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
  }
  .hdx-category-search-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100%;
  }
  .hdx-category-search-box form,
  .hdx-category-search-box .hdx-search-form,
  .hdx-category-search-box .hdx-channels-search-form,
  .hdx-category-search-box .hdx-stars-search-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .hdx-category-search-input {
    width: 100% !important;
    height: 42px !important;
    padding: 0 40px 0 44px !important;
    font-size: 13.5px !important;
    border-radius: 22px !important;
  }
  .hdx-category-search-icon {
    left: 15px;
    font-size: 13.5px;
  }
  .hdx-category-filter-meta {
    font-size: 12px;
    color: var(--hdx-text-muted);
  }
}

/* ==========================================================================
   Filter Tabs & Time Interval Switcher (.hdx-filter-tabs)
   ========================================================================== */
.hdx-filter-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hdx-filter-tabs .hdx-btn {
  height: 38px;
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--hdx-radius-md);
  transition: all var(--hdx-transition-fast);
  white-space: nowrap;
}

.hdx-filter-tabs .hdx-btn i {
  font-size: 13px;
}

/* 3-Column Equal Segmented Grid on Mobile (Bu Hafta / Bu Ay / Tüm Zamanlar) */
@media (max-width: 767px) {
  .hdx-filter-tabs.cols-3,
  .hdx-filter-tabs-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .hdx-filter-tabs.cols-3 .hdx-btn,
  .hdx-filter-tabs-3 .hdx-btn {
    width: 100% !important;
    height: 38px !important;
    padding: 0 4px !important;
    font-size: 12px !important;
    gap: 5px !important;
    border-radius: 8px !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .hdx-filter-tabs.cols-3 .hdx-btn i,
  .hdx-filter-tabs-3 .hdx-btn i {
    font-size: 11.5px !important;
    flex-shrink: 0 !important;
  }

  .hdx-filter-tabs.cols-3 .hdx-btn span,
  .hdx-filter-tabs-3 .hdx-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Horizontal Scrollable Tabs for Variable-Length Options */
  .hdx-filter-tabs.hdx-filter-tabs-scroll {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    padding-bottom: 2px !important;
  }

  .hdx-filter-tabs.hdx-filter-tabs-scroll::-webkit-scrollbar {
    display: none !important;
  }

  .hdx-filter-tabs.hdx-filter-tabs-scroll .hdx-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    height: 38px !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
  }
}

/* Extra Small Mobile Devices (<= 360px) */
@media (max-width: 360px) {
  .hdx-filter-tabs.cols-3,
  .hdx-filter-tabs-3 {
    gap: 4px !important;
  }

  .hdx-filter-tabs.cols-3 .hdx-btn,
  .hdx-filter-tabs-3 .hdx-btn {
    font-size: 10.5px !important;
    padding: 0 2px !important;
    gap: 3px !important;
  }

  .hdx-filter-tabs.cols-3 .hdx-btn i,
  .hdx-filter-tabs-3 .hdx-btn i {
    font-size: 10px !important;
  }
}


/* ==========================================================================
   16. CATEGORIES GRID & CARDS
   ========================================================================== */
.hdx-categories-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

@media (max-width: 1300px) {
  .hdx-categories-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
  }
}

@media (max-width: 1050px) {
  .hdx-categories-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .hdx-categories-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .hdx-categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.hdx-category-card {
  display: flex;
  flex-direction: column;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-md);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: var(--hdx-shadow-card);
  position: relative;
}

.hdx-category-card:hover {
  transform: translateY(-4px);
  border-color: var(--hdx-accent);
  box-shadow: 0 10px 24px rgba(229, 41, 85, 0.18);
}

.hdx-category-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--hdx-bg-elevated);
}

.hdx-category-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hdx-category-card:hover .hdx-category-thumb img {
  transform: scale(1.06);
}

.hdx-category-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 12, 16, 0.88) 0%, rgba(11, 12, 16, 0.2) 60%, transparent 100%);
  pointer-events: none;
}

.hdx-category-count-pill {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--hdx-radius-xs);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hdx-category-count-pill i {
  color: var(--hdx-accent);
}

.hdx-category-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  color: var(--hdx-text-muted);
  background: var(--hdx-bg-elevated);
}

.hdx-category-info {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--hdx-bg-card);
}

@media (max-width: 767px) {
  .hdx-category-info {
    padding: 10px 10px;
  }
}

.hdx-category-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--hdx-transition-fast);
}

.hdx-category-card:hover .hdx-category-name {
  color: var(--hdx-accent);
}

.hdx-category-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--hdx-text-muted);
}

.hdx-category-arrow {
  font-size: 10px;
  transition: transform var(--hdx-transition-fast), color var(--hdx-transition-fast);
  color: var(--hdx-text-muted);
}

.hdx-category-card:hover .hdx-category-arrow {
  transform: translateX(3px);
  color: var(--hdx-accent);
}

/* ==========================================================================
   17. MODERN PAGINATION
   ========================================================================== */
.hdx-pagination-wrap {
  margin: 40px 0 20px 0;
  display: flex;
  justify-content: center;
}

.hdx-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.hdx-page-item {
  display: inline-flex;
}

.hdx-page-link {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--hdx-text-secondary);
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-sm);
  text-decoration: none;
  transition: all var(--hdx-transition-fast);
  cursor: pointer;
}

.hdx-page-link:hover {
  color: var(--hdx-text-primary);
  background: var(--hdx-tag-bg);
  border-color: var(--hdx-border-hover);
  text-decoration: none;
}

.hdx-page-item.active .hdx-page-link {
  color: #fff;
  background: var(--hdx-accent);
  border-color: var(--hdx-accent);
  box-shadow: 0 3px 12px rgba(229, 41, 85, 0.4);
}

.hdx-page-ellipsis {
  min-width: 32px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hdx-text-muted);
  font-size: 14px;
}

/* Empty State */
.hdx-empty-state {
  text-align: center;
  padding: 48px 24px;
  background: var(--hdx-bg-surface);
  border: 1px dashed var(--hdx-border);
  border-radius: var(--hdx-radius-lg);
  margin: 24px 0;
}

/* ==========================================================================
   18. ALPHABET FILTER BAR
   ========================================================================== */
.hdx-alphabet-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  padding: 6px 2px 14px 2px;
  margin-bottom: 24px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.hdx-alphabet-bar::-webkit-scrollbar {
  height: 4px;
}

.hdx-alphabet-bar::-webkit-scrollbar-thumb {
  background: var(--hdx-border);
  border-radius: var(--hdx-radius-full);
}

.hdx-alphabet-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--hdx-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--hdx-text-secondary);
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0 !important;
  transition: all var(--hdx-transition-fast);
}

.hdx-alphabet-btn:hover {
  background: var(--hdx-tag-bg);
  color: var(--hdx-text-primary);
  border-color: var(--hdx-border-hover);
  text-decoration: none;
}

.hdx-alphabet-btn.active {
  background: var(--hdx-accent);
  color: #fff;
  border-color: var(--hdx-accent);
  box-shadow: 0 2px 8px rgba(229, 41, 85, 0.4);
}

@media (max-width: 767px) {
  .hdx-alphabet-bar {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 4px 0 8px 0;
    margin-bottom: 18px;
    gap: 5px;
  }
  .hdx-alphabet-bar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .hdx-alphabet-btn {
    min-width: 32px;
    height: 32px;
    font-size: 12px;
    padding: 0 8px;
    flex-shrink: 0 !important;
  }
}

/* ==========================================================================
   19. CHANNEL & STAR PROFILE HERO BANNER
   ========================================================================== */
.hdx-profile-hero {
  position: relative;
  border-radius: var(--hdx-radius-lg);
  overflow: hidden;
  background: #0b0c10;
  margin: 20px 0 32px 0;
  border: 1px solid var(--hdx-border);
  box-shadow: var(--hdx-shadow-md);
}

.hdx-profile-banner {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: #12141a;
}

@media (max-width: 767px) {
  .hdx-profile-banner {
    height: 170px;
  }
}

.hdx-profile-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hdx-profile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 12, 16, 0.96) 0%, rgba(11, 12, 16, 0.5) 50%, rgba(11, 12, 16, 0.25) 100%);
}

.hdx-profile-bar {
  position: relative;
  padding: 0 28px 24px 28px;
  margin-top: -60px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  z-index: 2;
}

@media (max-width: 767px) {
  .hdx-profile-bar {
    padding: 0 16px 18px 16px;
    margin-top: -45px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

.hdx-profile-avatar-wrap {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

@media (max-width: 767px) {
  .hdx-profile-avatar-wrap {
    align-items: center;
    gap: 14px;
  }
}

.hdx-profile-avatar {
  width: 110px;
  height: 110px;
  border-radius: var(--hdx-radius-full);
  overflow: hidden;
  border: 3px solid var(--hdx-bg-surface);
  background: var(--hdx-bg-surface);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}

.hdx-profile-avatar.portrait {
  width: 96px;
  height: 120px;
  border-radius: var(--hdx-radius-md);
}

@media (max-width: 767px) {
  .hdx-profile-avatar {
    width: 80px;
    height: 80px;
  }
  .hdx-profile-avatar.portrait {
    width: 72px;
    height: 90px;
  }
}

.hdx-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hdx-profile-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 6px 0;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .hdx-profile-title {
    font-size: 20px;
  }
}

.hdx-profile-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: #9ca3af;
}

.hdx-profile-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hdx-profile-meta-item i {
  color: var(--hdx-accent);
}

.hdx-btn-follow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--hdx-radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--hdx-transition-fast);
  border: none;
  white-space: nowrap;
}

.hdx-btn-follow.active {
  background: #059669;
  color: #fff;
  box-shadow: 0 3px 12px rgba(5, 150, 105, 0.35);
}

.hdx-btn-follow.inactive {
  background: var(--hdx-accent);
  color: #fff;
  box-shadow: 0 3px 12px rgba(229, 41, 85, 0.4);
}

.hdx-btn-follow:hover {
  transform: translateY(-2px);
  color: #fff;
}

/* Star card count pill */
.hdx-star-count-pill {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 17, 23, 0.92);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--hdx-radius-full);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.16);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.hdx-star-count-pill i {
  color: var(--hdx-accent);
  font-size: 10px;
}

/* ==========================================================================
   20. VIDEO WATCH PAGE & THEATER STYLES
   ========================================================================== */
.hdx-watch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 32px;
  align-items: start;
  margin-top: 18px;
  margin-bottom: 50px;
}

.hdx-watch-main {
  min-width: 0;
  width: 100%;
}

@media (max-width: 1200px) {
  .hdx-watch-layout {
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 24px;
  }
}

@media (max-width: 1024px) {
  .hdx-watch-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* Video Player Theater Box */
.hdx-player-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--hdx-radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  border: 1px solid var(--hdx-border);
  margin-bottom: 20px;
}

.hdx-player-box iframe,
.hdx-player-box video {
  width: 100% !important;
  height: 100% !important;
  border: none;
  display: block;
}

/* Premium VIP Paywall Overlay */
.hdx-paywall-overlay {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0b0c10;
}

.hdx-paywall-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  filter: blur(14px);
  transform: scale(1.1);
}

.hdx-paywall-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 24px;
  max-width: 520px;
  color: #fff;
}

.hdx-paywall-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--hdx-radius-full);
  background: rgba(229, 41, 85, 0.15);
  border: 2px solid var(--hdx-accent);
  color: var(--hdx-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 14px;
  box-shadow: 0 0 24px rgba(229, 41, 85, 0.35);
}

.hdx-paywall-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px 0;
  color: #fff;
  letter-spacing: -0.01em;
}

@media (max-width: 767px) {
  .hdx-paywall-title {
    font-size: 18px;
  }
}

.hdx-paywall-desc {
  font-size: 14px;
  line-height: 1.55;
  color: #d1d5db;
  margin: 0 0 22px 0;
}

.hdx-paywall-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .hdx-paywall-actions > a,
  .hdx-paywall-actions > button {
    flex: 1 1 calc(50% - 12px);
    max-width: 290px;
    min-width: 210px;
  }
}

.hdx-paywall-user-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--hdx-radius-full);
  padding: 6px 16px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #e5e7eb;
  max-width: 100%;
}

.hdx-paywall-user-pill.error {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
}

.hdx-paywall-status-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hdx-paywall-status-badge.success {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
}

.hdx-paywall-status-badge.error {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
}

.hdx-btn-paywall-vip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--hdx-accent) 0%, #b8173e 100%);
  border-radius: var(--hdx-radius-md);
  box-shadow: 0 4px 16px rgba(229, 41, 85, 0.5);
  text-decoration: none;
  transition: all var(--hdx-transition-fast);
  cursor: pointer;
  box-sizing: border-box;
}

.hdx-btn-paywall-vip:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(229, 41, 85, 0.65);
}

/* Haftalık VIP Başlat Butonu (Cyan) */
.hdx-btn-paywall-weekly,
.hdx-btn-paywall-vip.hdx-btn-paywall-weekly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff !important;
  background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%) !important;
  border: 1px solid rgba(6, 182, 212, 0.4) !important;
  border-radius: var(--hdx-radius-md);
  box-shadow: 0 4px 18px rgba(6, 182, 212, 0.45) !important;
  text-decoration: none;
  transition: all var(--hdx-transition-fast);
  cursor: pointer;
  box-sizing: border-box;
}

.hdx-btn-paywall-weekly:hover,
.hdx-btn-paywall-vip.hdx-btn-paywall-weekly:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #22d3ee 0%, #0369a1 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(6, 182, 212, 0.65) !important;
}

/* Aylık VIP Aktif Et Butonu (Zümrüt Yeşil & Canlı Aktif VIP) */
.hdx-btn-paywall-monthly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  border-radius: var(--hdx-radius-md);
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.45) !important;
  text-decoration: none;
  transition: all var(--hdx-transition-fast);
  cursor: pointer;
  box-sizing: border-box;
}

.hdx-btn-paywall-monthly:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #34d399 0%, #047857 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(16, 185, 129, 0.65) !important;
}

.hdx-btn-paywall-rent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 700;
  color: #0b0c10;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-radius: var(--hdx-radius-md);
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.45);
  text-decoration: none;
  transition: all var(--hdx-transition-fast);
  cursor: pointer;
  box-sizing: border-box;
}

.hdx-btn-paywall-rent:hover {
  color: #000;
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.65);
}

.hdx-btn-paywall-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--hdx-radius-md);
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: all var(--hdx-transition-fast);
  cursor: pointer;
  box-sizing: border-box;
}

.hdx-btn-paywall-login:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Exclusive Request Paywall Overlay & Card */
.hdx-paywall-overlay.hdx-paywall-exclusive {
  background: radial-gradient(circle at 50% 45%, rgba(24, 28, 38, 0.95) 0%, rgba(11, 12, 16, 0.98) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.hdx-paywall-exclusive .hdx-paywall-card {
  position: relative;
  z-index: 2;
  background: rgba(18, 20, 26, 0.88);
  border: 1px solid rgba(212, 160, 66, 0.28);
  border-radius: var(--hdx-radius-lg);
  padding: 24px 28px;
  max-width: 520px;
  width: 100%;
  text-align: center;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(212, 160, 66, 0.25);
  animation: hdx-exclusive-card-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hdx-exclusive-card-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hdx-exclusive-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.hdx-exclusive-icon-circle {
  width: 46px;
  height: 46px;
  border-radius: var(--hdx-radius-full);
  background: linear-gradient(135deg, rgba(212, 160, 66, 0.2) 0%, rgba(229, 41, 85, 0.15) 100%);
  border: 1.5px solid var(--hdx-gold);
  color: var(--hdx-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  box-shadow: 0 0 20px rgba(212, 160, 66, 0.35);
  flex-shrink: 0;
}

.hdx-exclusive-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(251, 191, 36, 0.16);
  border: 1px solid rgba(251, 191, 36, 0.5);
  color: #fbbf24;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 5px 14px;
  border-radius: var(--hdx-radius-full);
  text-transform: uppercase;
}

.hdx-exclusive-title {
  font-size: 21px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 10px 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hdx-exclusive-desc {
  font-size: 14px;
  line-height: 1.55;
  color: #f1f5f9;
  margin: 0 0 16px 0;
}

.hdx-exclusive-desc strong {
  color: #ffffff;
  font-weight: 700;
}

.hdx-exclusive-features {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hdx-exclusive-feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 6px 14px;
  border-radius: var(--hdx-radius-full);
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
}

.hdx-exclusive-feature-badge.gold i {
  color: #fbbf24;
}

.hdx-exclusive-feature-badge.accent i {
  color: var(--hdx-accent);
}

.hdx-exclusive-footer-note {
  font-size: 12.5px;
  color: #cbd5e1;
  margin-top: 14px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Player Box Paywall Behavior & Scaling */
@media (min-width: 768px) {
  .hdx-player-box.has-paywall,
  .hdx-player-box:has(.hdx-paywall-overlay) {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 500px !important;
    background: #0b0c10 !important;
    border-radius: var(--hdx-radius-lg);
    overflow: hidden !important;
  }

  .hdx-paywall-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 20px !important;
    background: #0b0c10 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}

/* Paywall Code Activation (Kod İle Aktif Et) Area */
.hdx-paywall-code-wrap {
  margin-top: 14px;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.hdx-paywall-code-group {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--hdx-radius-md, 8px);
  padding: 3px 4px 3px 12px;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  box-sizing: border-box;
}

.hdx-paywall-code-group:focus-within {
  border-color: var(--hdx-accent, #e52955);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 16px rgba(229, 41, 85, 0.35);
}

.hdx-paywall-code-icon {
  color: #f59e0b;
  font-size: 14px;
  margin-right: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.hdx-paywall-code-input {
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 7px 4px !important;
  box-shadow: none !important;
}

.hdx-paywall-code-input::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.hdx-paywall-code-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--hdx-accent) 0%, #b8173e 100%);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(229, 41, 85, 0.35);
}

.hdx-paywall-code-btn:hover {
  color: #fff;
  background: linear-gradient(135deg, #ff3b68 0%, #d11847 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(229, 41, 85, 0.55);
}

.hdx-paywall-code-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.hdx-paywall-code-feedback {
  font-size: 12px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  text-align: center;
  font-weight: 600;
  line-height: 1.4;
}

.hdx-paywall-code-feedback.success {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.hdx-paywall-code-feedback.error {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

@media (max-width: 767px) {
  .hdx-paywall-code-wrap {
    max-width: 360px !important;
    margin-top: 10px !important;
  }

  .hdx-paywall-code-group {
    padding: 2px 3px 2px 10px !important;
  }

  .hdx-paywall-code-input {
    font-size: 12px !important;
  }

  .hdx-paywall-code-btn {
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  .hdx-player-box.has-paywall,
  .hdx-player-box:has(.hdx-paywall-overlay) {
    position: relative !important;
    aspect-ratio: auto !important;
    min-height: 380px !important;
    height: auto !important;
    overflow: visible !important;
    background: #0b0c10 !important;
  }

  .hdx-paywall-overlay {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    min-height: 380px !important;
    height: auto !important;
    padding: 20px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0b0c10 !important;
  }

  /* Standard Premium Paywall */
  .hdx-paywall-content {
    padding: 14px 6px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .hdx-paywall-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }

  .hdx-paywall-title {
    font-size: 18px !important;
    margin-bottom: 8px !important;
    word-break: break-word !important;
  }

  .hdx-paywall-desc {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-bottom: 16px !important;
    padding: 0 6px !important;
  }

  .hdx-paywall-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }

  .hdx-btn-paywall-vip,
  .hdx-btn-paywall-weekly,
  .hdx-btn-paywall-monthly,
  .hdx-btn-paywall-rent,
  .hdx-btn-paywall-login {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 11px 16px !important;
    font-size: 13.5px !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-break: break-word !important;
    border-radius: var(--hdx-radius-md, 8px) !important;
  }
}

@media (max-width: 480px) {
  .hdx-paywall-overlay {
    padding: 16px 8px !important;
    min-height: 360px !important;
  }

  .hdx-paywall-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }

  .hdx-paywall-user-pill {
    padding: 6px 10px !important;
    font-size: 11.5px !important;
    gap: 4px 6px !important;
    border-radius: 10px !important;
  }

  .hdx-paywall-status-badge {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  .hdx-paywall-title {
    font-size: 17px !important;
    margin-bottom: 6px !important;
  }

  .hdx-paywall-desc {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    margin-bottom: 14px !important;
  }

  .hdx-paywall-actions {
    gap: 8px !important;
    max-width: 100% !important;
  }

  .hdx-btn-paywall-vip,
  .hdx-btn-paywall-weekly,
  .hdx-btn-paywall-monthly,
  .hdx-btn-paywall-rent,
  .hdx-btn-paywall-login {
    font-size: 13px !important;
    padding: 10px 12px !important;
    min-height: 42px !important;
    gap: 6px !important;
  }

  /* Exclusive Request Paywall */
  .hdx-paywall-exclusive {
    padding: 18px 12px !important;
    min-height: 350px !important;
  }

  .hdx-paywall-exclusive .hdx-paywall-card {
    padding: 20px 14px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .hdx-exclusive-header {
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .hdx-exclusive-icon-circle {
    width: 40px !important;
    height: 40px !important;
    font-size: 17px !important;
  }

  .hdx-exclusive-tag-pill {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  .hdx-exclusive-title {
    font-size: 18px !important;
    margin-bottom: 6px !important;
  }

  .hdx-exclusive-desc {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }

  .hdx-exclusive-features {
    gap: 6px !important;
    margin-bottom: 14px !important;
  }

  .hdx-exclusive-feature-badge {
    font-size: 11.5px !important;
    padding: 4px 10px !important;
  }

  .hdx-exclusive-footer-note {
    font-size: 11.5px !important;
    margin-top: 10px !important;
  }
}


/* ==========================================================================
   Exclusive VIP Banner (Owner & Rented) - Light & Dark Theme
   ========================================================================== */
.hdx-exclusive-vip-banner {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
  border-radius: var(--hdx-radius-lg, 12px) !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all var(--hdx-transition-base, 0.22s ease) !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  border-left-width: 5px !important;
}

.hdx-exclusive-vip-banner-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  flex-shrink: 0 !important;
}

.hdx-exclusive-vip-banner-content {
  flex: 1 !important;
  min-width: 0 !important;
}

.hdx-exclusive-vip-banner-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 6px !important;
  flex-wrap: wrap !important;
}

.hdx-exclusive-vip-banner-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

.hdx-exclusive-vip-banner-text {
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  line-height: 1.55 !important;
  word-break: break-word !important;
}

.hdx-exclusive-vip-badge {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  padding: 4px 11px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.hdx-exclusive-vip-badge.badge-rented {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
}

.hdx-exclusive-vip-badge.badge-owner {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;
}

.hdx-exclusive-vip-badge.badge-time {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* --- Dark Theme VIP Banner (Default) --- */
:root .hdx-exclusive-vip-banner,
html[data-theme="dark"] .hdx-exclusive-vip-banner,
body.dark .hdx-exclusive-vip-banner {
  background: linear-gradient(135deg, rgba(212, 160, 66, 0.14) 0%, #151822 65%, #181c28 100%) !important;
  border-color: rgba(212, 160, 66, 0.55) !important;
  border-left-color: #d4a042 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

:root .hdx-exclusive-vip-banner-icon,
html[data-theme="dark"] .hdx-exclusive-vip-banner-icon,
body.dark .hdx-exclusive-vip-banner-icon {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
  color: #0b0c10 !important;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.4) !important;
}

:root .hdx-exclusive-vip-banner-title,
html[data-theme="dark"] .hdx-exclusive-vip-banner-title,
body.dark .hdx-exclusive-vip-banner-title {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

:root .hdx-exclusive-vip-banner-text,
html[data-theme="dark"] .hdx-exclusive-vip-banner-text,
body.dark .hdx-exclusive-vip-banner-text {
  color: #cbd5e1 !important;
}

:root .hdx-exclusive-vip-badge.badge-time,
html[data-theme="dark"] .hdx-exclusive-vip-badge.badge-time,
body.dark .hdx-exclusive-vip-badge.badge-time {
  background: rgba(251, 191, 36, 0.15) !important;
  border: 1px solid rgba(251, 191, 36, 0.5) !important;
  color: #fbbf24 !important;
}

:root .hdx-exclusive-vip-badge.badge-time i,
html[data-theme="dark"] .hdx-exclusive-vip-badge.badge-time i,
body.dark .hdx-exclusive-vip-badge.badge-time i {
  color: #fbbf24 !important;
}

:root .hdx-exclusive-vip-badge.badge-time .badge-time-highlight,
html[data-theme="dark"] .hdx-exclusive-vip-badge.badge-time .badge-time-highlight,
body.dark .hdx-exclusive-vip-badge.badge-time .badge-time-highlight {
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* --- Light Theme VIP Banner --- */
html[data-theme="light"] .hdx-exclusive-vip-banner,
body.light .hdx-exclusive-vip-banner {
  background: linear-gradient(135deg, #fffdf8 0%, #fefaf0 60%, #fffbf2 100%) !important;
  border-color: rgba(212, 160, 66, 0.5) !important;
  border-left-color: #d4a042 !important;
  box-shadow: 0 6px 20px rgba(212, 160, 66, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .hdx-exclusive-vip-banner-icon,
body.light .hdx-exclusive-vip-banner-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3) !important;
}

html[data-theme="light"] .hdx-exclusive-vip-banner-title,
body.light .hdx-exclusive-vip-banner-title {
  color: #0f172a !important;
  text-shadow: none !important;
}

html[data-theme="light"] .hdx-exclusive-vip-banner-text,
body.light .hdx-exclusive-vip-banner-text {
  color: #334155 !important;
}

html[data-theme="light"] .hdx-exclusive-vip-badge.badge-time,
body.light .hdx-exclusive-vip-badge.badge-time {
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
  box-shadow: none !important;
}

html[data-theme="light"] .hdx-exclusive-vip-badge.badge-time i,
body.light .hdx-exclusive-vip-badge.badge-time i {
  color: #d97706 !important;
}

html[data-theme="light"] .hdx-exclusive-vip-badge.badge-time .badge-time-highlight,
body.light .hdx-exclusive-vip-badge.badge-time .badge-time-highlight {
  color: #78350f !important;
  font-weight: 800 !important;
}

/* Watch page exclusive title badge */
.hdx-watch-exclusive-badge {
  background: var(--hdx-gold-subtle);
  color: var(--hdx-gold-text);
  border: 1px solid rgba(212, 160, 66, 0.35);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--hdx-radius-full);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 0 12px rgba(212, 160, 66, 0.15);
}

.hdx-watch-exclusive-badge i {
  color: var(--hdx-gold);
}

html[data-theme="light"] .hdx-watch-exclusive-badge,
body.light .hdx-watch-exclusive-badge {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fde68a !important;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.1) !important;
}

html[data-theme="light"] .hdx-watch-exclusive-badge i,
body.light .hdx-watch-exclusive-badge i {
  color: #d97706 !important;
}

/* ==========================================================================
   HDX Global Flash Alerts / Callouts System (Light & Dark Theme)
   ========================================================================== */
.bs-callout {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  margin: 14px 0 18px 0 !important;
  border-radius: var(--hdx-radius-md, 8px) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-left-width: 5px !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  animation: hdx-alert-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes hdx-alert-slide-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bs-callout-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bs-callout-text {
  flex: 1 !important;
  min-width: 0 !important;
  word-break: break-word !important;
  line-height: 1.5 !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
}

/* --- Dark Theme Callout (Default) --- */
:root .bs-callout,
html[data-theme="dark"] .bs-callout,
body.dark .bs-callout {
  background: #141721 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  border-left-color: var(--hdx-accent) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
}

:root .bs-callout-text,
:root .bs-callout-text span,
:root .bs-callout-text strong,
:root .bs-callout p,
:root .bs-callout h4,
html[data-theme="dark"] .bs-callout-text,
html[data-theme="dark"] .bs-callout-text span,
html[data-theme="dark"] .bs-callout-text strong,
html[data-theme="dark"] .bs-callout p,
html[data-theme="dark"] .bs-callout h4,
body.dark .bs-callout-text,
body.dark .bs-callout-text span,
body.dark .bs-callout-text strong,
body.dark .bs-callout p,
body.dark .bs-callout h4 {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

:root .bs-callout-success,
html[data-theme="dark"] .bs-callout-success,
body.dark .bs-callout-success {
  border-left-color: #22c55e !important;
}
:root .bs-callout-success .bs-callout-icon,
html[data-theme="dark"] .bs-callout-success .bs-callout-icon,
body.dark .bs-callout-success .bs-callout-icon {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #22c55e !important;
}

:root .bs-callout-danger,
html[data-theme="dark"] .bs-callout-danger,
body.dark .bs-callout-danger {
  border-left-color: #ef4444 !important;
}
:root .bs-callout-danger .bs-callout-icon,
html[data-theme="dark"] .bs-callout-danger .bs-callout-icon,
body.dark .bs-callout-danger .bs-callout-icon {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
}

:root .bs-callout-warning,
html[data-theme="dark"] .bs-callout-warning,
body.dark .bs-callout-warning {
  border-left-color: #f59e0b !important;
}
:root .bs-callout-warning .bs-callout-icon,
html[data-theme="dark"] .bs-callout-warning .bs-callout-icon,
body.dark .bs-callout-warning .bs-callout-icon {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #f59e0b !important;
}

:root .bs-callout-info,
html[data-theme="dark"] .bs-callout-info,
body.dark .bs-callout-info {
  border-left-color: #3b82f6 !important;
}
:root .bs-callout-info .bs-callout-icon,
html[data-theme="dark"] .bs-callout-info .bs-callout-icon,
body.dark .bs-callout-info .bs-callout-icon {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #3b82f6 !important;
}

:root .bs-callout a,
html[data-theme="dark"] .bs-callout a,
body.dark .bs-callout a {
  color: #fbbf24 !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
}

/* --- Light Theme Callout --- */
html[data-theme="light"] .bs-callout,
body.light .bs-callout {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .bs-callout-text,
html[data-theme="light"] .bs-callout-text span,
html[data-theme="light"] .bs-callout-text strong,
html[data-theme="light"] .bs-callout p,
html[data-theme="light"] .bs-callout h4,
body.light .bs-callout-text,
body.light .bs-callout-text span,
body.light .bs-callout-text strong,
body.light .bs-callout p,
body.light .bs-callout h4 {
  color: #0f172a !important;
  text-shadow: none !important;
}

html[data-theme="light"] .bs-callout-success,
body.light .bs-callout-success {
  border-left-color: #10b981 !important;
}
html[data-theme="light"] .bs-callout-success .bs-callout-icon,
body.light .bs-callout-success .bs-callout-icon {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
}

html[data-theme="light"] .bs-callout-danger,
body.light .bs-callout-danger {
  border-left-color: #ef4444 !important;
}
html[data-theme="light"] .bs-callout-danger .bs-callout-icon,
body.light .bs-callout-danger .bs-callout-icon {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
}

html[data-theme="light"] .bs-callout-warning,
body.light .bs-callout-warning {
  border-left-color: #f59e0b !important;
}
html[data-theme="light"] .bs-callout-warning .bs-callout-icon,
body.light .bs-callout-warning .bs-callout-icon {
  background: #fffbeb !important;
  color: #d97706 !important;
  border: 1px solid #fde68a !important;
}

html[data-theme="light"] .bs-callout-info,
body.light .bs-callout-info {
  border-left-color: #3b82f6 !important;
}
html[data-theme="light"] .bs-callout-info .bs-callout-icon,
body.light .bs-callout-info .bs-callout-icon {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #bfdbfe !important;
}

html[data-theme="light"] .bs-callout-success a,
body.light .bs-callout-success a {
  color: #047857 !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .bs-callout-danger a,
body.light .bs-callout-danger a {
  color: #b91c1c !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .bs-callout-warning a,
body.light .bs-callout-warning a {
  color: #b45309 !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .bs-callout-info a,
body.light .bs-callout-info a {
  color: #1d4ed8 !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
}

/* Multi-part tabs */
.hdx-part-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hdx-part-tab {
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--hdx-radius-sm);
  border: 1px solid var(--hdx-border);
  background: var(--hdx-bg-card);
  color: var(--hdx-text-secondary);
  text-decoration: none;
  transition: all var(--hdx-transition-fast);
}

.hdx-part-tab:hover {
  color: var(--hdx-text-primary);
  border-color: var(--hdx-border-hover);
}

.hdx-part-tab.active {
  background: var(--hdx-accent);
  color: #fff;
  border-color: var(--hdx-accent);
  box-shadow: 0 2px 8px rgba(229, 41, 85, 0.35);
}

/* Security notice */
.hdx-watch-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: var(--hdx-radius-md);
  background: var(--hdx-bg-surface);
  border: 1px solid var(--hdx-border);
  font-size: 13px;
  color: var(--hdx-text-secondary);
  margin-bottom: 22px;
  line-height: 1.5;
}

.hdx-watch-notice i {
  font-size: 18px;
  color: var(--hdx-accent);
  flex-shrink: 0;
}

/* Video Title & Action Bar */
.hdx-watch-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--hdx-text-primary);
  margin: 0 0 16px 0;
  letter-spacing: -0.01em;
}

@media (max-width: 767px) {
  .hdx-watch-title {
    font-size: 18px;
  }
}

.hdx-watch-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0 16px 0;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--hdx-border, rgba(255, 255, 255, 0.08));
  width: 100%;
  box-sizing: border-box;
}

/* Left Group: Channel + Views + Like Percent */
.hdx-watch-left-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

/* Channel Box (Avatar + Title + Subtitle) */
.hdx-watch-channel-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.hdx-watch-channel-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.hdx-watch-channel-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.3);
}

.hdx-watch-channel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hdx-watch-channel-avatar-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(229, 9, 20, 0.1);
  color: var(--hdx-accent, #e50914);
  font-size: 18px;
}

.hdx-watch-channel-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.35;
}

.hdx-watch-channel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--hdx-text-primary, #ffffff);
  text-decoration: none !important;
  letter-spacing: -0.2px;
  transition: color 0.2s ease;
}

.hdx-watch-channel-title:hover {
  color: var(--hdx-accent, #e50914);
}

.hdx-watch-channel-sub {
  font-size: 12.5px;
  font-weight: 500;
  color: #64748b;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 1px;
  transition: color 0.2s ease;
}

.hdx-watch-channel-sub:hover {
  color: var(--hdx-accent, #e50914);
}

.hdx-watch-channel-sub i {
  font-size: 11px;
  transition: transform 0.2s ease;
}

.hdx-watch-channel-sub:hover i {
  transform: translateX(2px);
}

/* Metrics (Views & Like Percent Pill) */
.hdx-watch-metrics {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

.hdx-watch-views {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

.hdx-watch-views i {
  font-size: 13.5px;
  color: #64748b;
  position: relative;
  top: -0.5px;
}

.hdx-watch-views strong {
  font-weight: 700;
  color: var(--hdx-text-primary, #ffffff);
}

.hdx-watch-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #64748b;
  opacity: 0.6;
  flex-shrink: 0;
}

/* Mint Green Pill (Thumbs up & Percent) */
.hdx-like-percent-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 25px;
  padding: 0 9px;
  border-radius: var(--hdx-radius-full, 9999px);
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.32);
  font-size: 12px;
  font-weight: 700;
  color: #10b981;
  white-space: nowrap;
  line-height: 1;
  box-sizing: border-box;
}

.hdx-like-percent-pill i {
  color: #10b981;
  font-size: 11px;
  line-height: 1;
  position: relative;
  top: -1px;
}

.hdx-like-percent-pill strong {
  color: #10b981;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.2px;
}

/* Right Group: Action Buttons */
.hdx-watch-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.hdx-watch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 35px;
  padding: 0 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hdx-text-secondary, #94a3b8);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hdx-border, rgba(255, 255, 255, 0.12));
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.hdx-watch-btn i {
  font-size: 13px;
  transition: transform 0.2s ease;
}

.hdx-watch-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  transform: translateY(-1px);
}

.hdx-watch-btn:hover i {
  transform: scale(1.1);
}

.hdx-watch-btn.like.liked {
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.12);
}

.hdx-watch-btn.dislike.disliked {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
}

.hdx-watch-btn.add-favory.active {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
}

.hdx-watch-btn.add-favory.active i {
  color: #ef4444;
}

.hdx-watch-btn.add-watch-later.active {
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.12);
}

.hdx-watch-btn.reported {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
}

.hdx-watch-btn.reported i {
  color: #f59e0b;
}

.hdx-btn-count {
  font-weight: 700;
  font-size: 12.5px;
}

/* Like & Dislike Feedback */
.hdx-watch-btn.like.liked {
  color: #10b981 !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  background: rgba(16, 185, 129, 0.1) !important;
}

.hdx-watch-btn.like.liked i {
  color: #10b981 !important;
}

.hdx-watch-btn.dislike.disliked {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: rgba(239, 68, 68, 0.1) !important;
}

.hdx-watch-btn.dislike.disliked i {
  color: #ef4444 !important;
}

.hdx-watch-btn.active,
.hdx-watch-btn.active:hover {
  color: var(--hdx-accent) !important;
  border-color: var(--hdx-accent) !important;
  background: var(--hdx-accent-subtle) !important;
}

/* Light Mode Overrides */
body.light .hdx-watch-action-bar,
html[data-theme="light"] .hdx-watch-action-bar {
  border-color: #e2e8f0;
}

body.light .hdx-watch-channel-avatar,
html[data-theme="light"] .hdx-watch-channel-avatar {
  border-color: #e2e8f0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

body.light .hdx-watch-channel-title,
html[data-theme="light"] .hdx-watch-channel-title {
  color: #0f172a;
}

body.light .hdx-watch-views strong,
html[data-theme="light"] .hdx-watch-views strong {
  color: #0f172a;
}

body.light .hdx-watch-dot,
html[data-theme="light"] .hdx-watch-dot {
  background: #94a3b8;
}

body.light .hdx-like-percent-pill,
html[data-theme="light"] .hdx-like-percent-pill {
  background: #d1fae5;
  border-color: #a7f3d0;
  color: #059669;
}

body.light .hdx-like-percent-pill i,
html[data-theme="light"] .hdx-like-percent-pill i,
body.light .hdx-like-percent-pill strong,
html[data-theme="light"] .hdx-like-percent-pill strong {
  color: #059669;
}

body.light .hdx-watch-btn,
html[data-theme="light"] .hdx-watch-btn {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

body.light .hdx-watch-btn:hover,
html[data-theme="light"] .hdx-watch-btn:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

/* Mobile Responsiveness for Watch Action Bar */
@media (max-width: 991px) {
  .hdx-watch-action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 16px;
  }

  .hdx-watch-left-group {
    justify-content: space-between;
    width: 100%;
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .hdx-watch-actions {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .hdx-watch-btn {
    width: 100% !important;
    height: 38px !important;
    padding: 0 4px !important;
    font-size: 11.5px !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    border-radius: var(--hdx-radius-sm, 6px) !important;
  }

  .hdx-watch-btn i {
    font-size: 12.5px !important;
  }

  .hdx-watch-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 575px) {
  .hdx-watch-left-group {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .hdx-watch-channel-box {
    gap: 8px !important;
  }

  .hdx-watch-channel-avatar {
    width: 36px !important;
    height: 36px !important;
  }

  .hdx-watch-channel-title {
    font-size: 14px !important;
  }

  .hdx-watch-channel-sub {
    font-size: 11.5px !important;
  }

  .hdx-watch-metrics {
    gap: 6px !important;
    font-size: 12px !important;
  }

  .hdx-watch-views {
    font-size: 12px !important;
  }

  .hdx-like-percent-pill {
    height: 24px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }
}

/* Studio Channel Strip under title */
.hdx-watch-channel-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-md);
  margin-bottom: 24px;
}

.hdx-watch-channel-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hdx-watch-channel-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--hdx-radius-full);
  overflow: hidden;
  background: var(--hdx-bg-elevated);
  border: 1px solid var(--hdx-border);
  flex-shrink: 0;
}

.hdx-watch-channel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hdx-watch-channel-info h4 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 3px 0;
  color: var(--hdx-text-primary);
}

.hdx-watch-channel-info h4 a {
  color: inherit;
  text-decoration: none;
  transition: color var(--hdx-transition-fast);
}

.hdx-watch-channel-info h4 a:hover {
  color: var(--hdx-accent);
}

.hdx-watch-channel-info span {
  font-size: 12.5px;
  color: var(--hdx-text-muted);
}

/* Meta Blocks: Video Info Card & Description */
.hdx-watch-info-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--hdx-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--hdx-radius-md, 12px);
  padding: 16px 20px;
  margin-bottom: 24px;
  transition: border-color 0.2s ease;
}

.hdx-watch-info-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

.hdx-watch-meta-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--hdx-border, rgba(255, 255, 255, 0.07));
}

.hdx-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hdx-text-secondary, #94a3b8);
  background: rgba(255, 255, 255, 0.04);
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--hdx-border, rgba(255, 255, 255, 0.07));
  font-size: 13px;
  line-height: 1.2;
}

.hdx-meta-item i {
  color: var(--hdx-accent, #e50914);
  font-size: 13px;
}

.hdx-meta-item .meta-label {
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}

.hdx-meta-item .meta-val {
  color: var(--hdx-text-primary, #ffffff);
  font-weight: 600;
}

.hdx-meta-item.badge-hd {
  background: rgba(212, 160, 66, 0.1);
  border-color: rgba(212, 160, 66, 0.25);
}

.hdx-meta-item.badge-hd i {
  color: var(--hdx-gold, #d4a042);
}

.hdx-meta-item.badge-hd .meta-val {
  color: var(--hdx-gold, #d4a042);
}

.hdx-watch-desc-content .hdx-watch-subtitle {
  font-size: 12.5px;
  margin-bottom: 8px;
}

/* Light Mode Overrides for Info Card */
body.light .hdx-watch-info-card,
html[data-theme="light"] .hdx-watch-info-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

body.light .hdx-watch-info-card:hover,
html[data-theme="light"] .hdx-watch-info-card:hover {
  border-color: #cbd5e1;
}

body.light .hdx-watch-meta-strip,
html[data-theme="light"] .hdx-watch-meta-strip {
  border-bottom-color: #e2e8f0;
}

body.light .hdx-meta-item,
html[data-theme="light"] .hdx-meta-item {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #475569;
}

body.light .hdx-meta-item .meta-label,
html[data-theme="light"] .hdx-meta-item .meta-label {
  color: #64748b;
}

body.light .hdx-meta-item .meta-val,
html[data-theme="light"] .hdx-meta-item .meta-val {
  color: #0f172a;
}

body.light .hdx-meta-item.badge-hd,
html[data-theme="light"] .hdx-meta-item.badge-hd {
  background: rgba(212, 160, 66, 0.12);
  border-color: rgba(212, 160, 66, 0.3);
}

.hdx-watch-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hdx-border);
}

.hdx-watch-subtitle {
  font-size: 13px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hdx-watch-subtitle i {
  color: var(--hdx-accent);
}

.hdx-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hdx-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hdx-text-secondary);
  background: var(--hdx-tag-bg);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-full);
  text-decoration: none;
  transition: all var(--hdx-transition-fast);
}

.hdx-pill-tag:hover {
  background: var(--hdx-accent);
  color: #fff;
  border-color: var(--hdx-accent);
  text-decoration: none;
}

.hdx-pill-tag.star {
  border-color: rgba(212, 160, 66, 0.35);
  color: var(--hdx-gold);
}

.hdx-pill-tag.star:hover {
  background: var(--hdx-gold);
  color: #fff;
  border-color: var(--hdx-gold);
}

.hdx-watch-desc-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--hdx-text-secondary);
  margin: 0;
}

/* Comments Section */
.hdx-comments-block {
  margin-top: 32px;
}

.hdx-comment-form {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-md);
  padding: 18px;
  margin-bottom: 24px;
}

.hdx-comment-input {
  width: 100%;
  height: 40px;
  background: var(--hdx-input-bg);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-sm);
  padding: 0 14px;
  font-size: 14px;
  color: var(--hdx-text-primary);
  outline: none;
  margin-bottom: 12px;
  transition: border-color var(--hdx-transition-fast);
}

.hdx-comment-textarea {
  width: 100%;
  background: var(--hdx-input-bg);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--hdx-text-primary);
  outline: none;
  resize: vertical;
  min-height: 80px;
  margin-bottom: 12px;
  transition: border-color var(--hdx-transition-fast);
}

.hdx-comment-input:focus,
.hdx-comment-textarea:focus {
  border-color: var(--hdx-accent);
}

.hdx-comment-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hdx-border);
}

.hdx-comment-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--hdx-radius-full);
  background: var(--hdx-tag-bg);
  border: 1px solid var(--hdx-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hdx-text-muted);
  font-size: 15px;
  flex-shrink: 0;
}

.hdx-comment-content {
  flex: 1;
}

.hdx-comment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.hdx-comment-author {
  font-size: 14px;
  font-weight: 700;
  color: var(--hdx-text-primary);
}

.hdx-comment-date {
  font-size: 12px;
  color: var(--hdx-text-muted);
}

.hdx-comment-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--hdx-text-secondary);
  margin: 0;
}

/* ==========================================================================
   HDX COMMENTS EMPTY STATE (ÖZEL İLK YORUM DAVETİ TASARIMI)
   ========================================================================== */
.hdx-comments-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 38px 24px;
  background: var(--hdx-bg-card);
  border: 1px dashed var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  margin-top: 14px;
  margin-bottom: 14px;
  transition: all var(--hdx-transition-fast);
}

.hdx-comments-empty:hover {
  border-color: rgba(229, 9, 20, 0.4);
  background: var(--hdx-bg-surface);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.hdx-comments-empty-icon {
  width: 62px;
  height: 62px;
  border-radius: var(--hdx-radius-full);
  background: rgba(229, 9, 20, 0.08);
  border: 1.5px solid rgba(229, 9, 20, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--hdx-accent);
  margin-bottom: 14px;
  box-shadow: 0 0 20px rgba(229, 9, 20, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hdx-comments-empty:hover .hdx-comments-empty-icon {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 0 26px rgba(229, 9, 20, 0.3);
}

.hdx-comments-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0 0 6px 0;
  letter-spacing: -0.2px;
}

.hdx-comments-empty-text {
  font-size: 13.5px;
  color: var(--hdx-text-secondary);
  line-height: 1.55;
  margin: 0 0 16px 0;
  max-width: 440px;
}

.hdx-comments-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 22px;
  border-radius: var(--hdx-radius-full);
  background: var(--hdx-bg-elevated);
  border: 1px solid var(--hdx-border);
  color: var(--hdx-text-primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--hdx-transition-fast);
  outline: none !important;
}

.hdx-comments-empty-btn:hover {
  background: var(--hdx-accent);
  border-color: var(--hdx-accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(229, 9, 20, 0.4);
}

/* Sidebar Horizontal Recommended Cards */
.hdx-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hdx-sidebar-card {
  display: flex;
  gap: 14px;
  text-decoration: none;
  padding: 8px;
  border-radius: var(--hdx-radius-md);
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  transition: all var(--hdx-transition-base);
}

.hdx-sidebar-card:hover {
  background: var(--hdx-bg-card-hover);
  border-color: var(--hdx-border-hover);
  transform: translateX(3px);
  text-decoration: none;
}

.hdx-sidebar-thumb {
  position: relative;
  width: 180px;
  aspect-ratio: 16 / 9;
  border-radius: var(--hdx-radius-sm);
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .hdx-sidebar-thumb {
    width: 145px;
  }
  .hdx-sidebar-thumb .hdx-badge {
    bottom: 6px;
    font-size: 10px;
    padding: 3px 5px;
  }
  .hdx-sidebar-thumb .hdx-badge.type-premium,
  .hdx-sidebar-thumb .hdx-badge.type-free {
    left: 6px;
  }
  .hdx-sidebar-thumb .hdx-badge.duration,
  .hdx-sidebar-thumb .hdx-badge.badge-duration {
    right: 6px;
  }
}

.hdx-sidebar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.hdx-sidebar-card:hover .hdx-sidebar-thumb img {
  transform: scale(1.05);
}

.hdx-sidebar-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 2px 4px 2px 0;
}

.hdx-sidebar-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hdx-text-primary);
  margin: 0 0 6px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--hdx-transition-fast);
}

.hdx-sidebar-card:hover .hdx-sidebar-title {
  color: var(--hdx-accent);
}

.hdx-sidebar-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--hdx-text-muted);
}

.hdx-sidebar-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hdx-watch-main,
.hdx-watch-sidebar {
  min-width: 0;
}

.hdx-player-box iframe,
.hdx-player-box video,
.hdx-player-box embed,
.hdx-player-box object {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block;
}

.hdx-comments-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--hdx-text-muted);
  background: var(--hdx-bg-card);
  border: 1px dashed var(--hdx-border);
  border-radius: var(--hdx-radius-md);
}

.hdx-comments-empty i {
  font-size: 32px;
  margin-bottom: 10px;
  opacity: 0.5;
  display: block;
}

/* ==========================================================================
   21. VIP & PREMIUM PRICING / PURCHASE PAGE
   ========================================================================== */
.hdx-pricing-hero {
  text-align: center;
  max-width: 860px;
  margin: 32px auto 40px auto;
  padding: 0 16px;
}

.hdx-pricing-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(212, 160, 66, 0.15);
  border: 1px solid var(--hdx-gold);
  color: var(--hdx-gold);
  padding: 6px 16px;
  border-radius: var(--hdx-radius-full);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.hdx-pricing-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  margin: 0 0 14px 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

@media (max-width: 768px) {
  .hdx-pricing-title {
    font-size: 26px;
  }
}

.hdx-pricing-subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: var(--hdx-text-secondary);
  margin: 0 auto;
}

/* User Balance Alert Bar */
.hdx-pricing-user-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 960px;
  margin: 0 auto 36px auto;
  padding: 14px 20px;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-md);
  box-shadow: var(--hdx-shadow-card);
}

.hdx-pricing-user-info {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--hdx-text-secondary);
}

.hdx-pricing-user-info strong {
  color: var(--hdx-text-primary);
}

.hdx-pricing-balance {
  font-weight: 700;
  color: var(--hdx-gold-text);
  background: var(--hdx-gold-subtle);
  padding: 4px 12px;
  border-radius: var(--hdx-radius-full);
  border: 1px solid rgba(212, 160, 66, 0.3);
}

/* Single Content Rent Card */
.hdx-rent-card {
  max-width: 960px;
  margin: 0 auto 36px auto;
  background: linear-gradient(135deg, rgba(229, 41, 85, 0.08) 0%, rgba(212, 160, 66, 0.06) 100%), var(--hdx-bg-card);
  border: 1px solid rgba(229, 41, 85, 0.35);
  border-radius: var(--hdx-radius-lg);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .hdx-rent-card {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
}

.hdx-rent-card-left {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

@media (max-width: 768px) {
  .hdx-rent-card-left {
    flex-direction: column;
  }
}

.hdx-rent-thumb {
  width: 160px;
  aspect-ratio: 16 / 9;
  border-radius: var(--hdx-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: #000;
  border: 1px solid var(--hdx-border);
}

.hdx-rent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hdx-rent-info h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0 0 6px 0;
  line-height: 1.35;
}

.hdx-rent-info p {
  font-size: 13.5px;
  color: var(--hdx-text-secondary);
  margin: 0;
}

.hdx-rent-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .hdx-rent-card-right {
    align-items: center;
    width: 100%;
  }
}

.hdx-rent-price {
  font-size: 26px;
  font-weight: 800;
  color: var(--hdx-accent);
}

/* Pricing Cards Grid */
.hdx-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1260px;
  margin: 0 auto 50px auto;
  align-items: stretch;
}

@media (max-width: 1199px) {
  .hdx-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 860px;
  }
}

@media (max-width: 640px) {
  .hdx-pricing-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.hdx-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-xl);
  padding: 32px 22px 26px 22px;
  transition: all var(--hdx-transition-base);
  box-shadow: var(--hdx-shadow-card);
}

.hdx-pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hdx-shadow-card-hover);
}

.hdx-pricing-card.weekly {
  border-color: rgba(6, 182, 212, 0.45);
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.08) 0%, var(--hdx-bg-card) 25%);
  box-shadow: 0 10px 35px rgba(6, 182, 212, 0.16);
}

.hdx-pricing-card.weekly .hdx-pricing-card-badge {
  background: linear-gradient(135deg, #22d3ee 0%, #0284c7 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.45);
}

.hdx-pricing-card.weekly .hdx-pricing-amount {
  color: #38bdf8;
}

.hdx-pricing-card.weekly .hdx-pricing-features li i {
  color: #22d3ee;
}

.hdx-pricing-card.standard {
  border-color: rgba(229, 41, 85, 0.45);
  background: linear-gradient(180deg, rgba(229, 41, 85, 0.08) 0%, var(--hdx-bg-card) 25%);
  box-shadow: 0 10px 35px rgba(229, 41, 85, 0.16);
}

.hdx-pricing-card.standard .hdx-pricing-card-badge {
  background: linear-gradient(135deg, #ff3366 0%, #e52955 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(229, 41, 85, 0.45);
}

.hdx-pricing-card.standard .hdx-pricing-amount {
  color: #ff5e82;
}

.hdx-pricing-card.standard .hdx-pricing-features li i {
  color: #ff5e82;
}

.hdx-pricing-card.featured {
  border-color: var(--hdx-gold);
  background: linear-gradient(180deg, rgba(212, 160, 66, 0.08) 0%, var(--hdx-bg-card) 25%);
  box-shadow: 0 10px 35px rgba(212, 160, 66, 0.15);
}

.hdx-pricing-card.yearly {
  border-color: #8b5cf6;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.10) 0%, var(--hdx-bg-card) 25%);
  box-shadow: 0 10px 35px rgba(139, 92, 246, 0.18);
}

.hdx-pricing-card.yearly .hdx-pricing-card-badge {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.45);
}

.hdx-pricing-card.yearly .hdx-pricing-amount {
  color: #c4b5fd;
}

.hdx-pricing-card-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--hdx-gold) 0%, #b38027 100%);
  color: #0b0c10;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: var(--hdx-radius-full);
  box-shadow: 0 4px 12px rgba(212, 160, 66, 0.4);
  white-space: nowrap;
}

.hdx-pricing-gift-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(229, 41, 85, 0.12);
  border: 1px solid rgba(229, 41, 85, 0.35);
  color: #ff5e82;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--hdx-radius-full);
  margin-top: 10px;
  text-align: center;
}

.hdx-pricing-gift-badge.gold {
  background: rgba(212, 160, 66, 0.15);
  border-color: rgba(212, 160, 66, 0.45);
  color: var(--hdx-gold);
}

.hdx-pricing-gift-badge.purple {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.45);
  color: #c4b5fd;
}

.hdx-pricing-gift-badge.cyan {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.45);
  color: #38bdf8;
}

.hdx-pricing-card-header {
  text-align: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hdx-border);
  margin-bottom: 24px;
}

.hdx-pricing-card-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0 0 12px 0;
}

.hdx-pricing-amount-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 6px;
}

.hdx-pricing-amount {
  font-size: 44px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
}

.hdx-pricing-card.featured .hdx-pricing-amount {
  color: var(--hdx-gold);
}

.hdx-pricing-currency {
  font-size: 24px;
  font-weight: 700;
  color: var(--hdx-text-secondary);
}

.hdx-pricing-period {
  font-size: 14px;
  color: var(--hdx-text-muted);
}

.hdx-pricing-card-header p {
  font-size: 13px;
  color: var(--hdx-text-muted);
  margin: 4px 0 0 0;
}

.hdx-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.hdx-pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--hdx-text-secondary);
  line-height: 1.45;
}

.hdx-pricing-features li i {
  font-size: 15px;
  color: #10b981;
  margin-top: 2px;
  flex-shrink: 0;
}

.hdx-pricing-card.featured .hdx-pricing-features li i {
  color: var(--hdx-gold);
}

.hdx-pricing-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  background: linear-gradient(135deg, var(--hdx-gold) 0%, #a8731d 100%);
  color: #0b0c10;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--hdx-radius-md);
  text-decoration: none;
  border: none;
  box-shadow: 0 6px 20px rgba(212, 160, 66, 0.4);
  transition: all var(--hdx-transition-fast);
  cursor: pointer;
}

.hdx-pricing-btn-primary:hover {
  color: #0b0c10;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 160, 66, 0.55);
  text-decoration: none;
}

.hdx-pricing-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  background: var(--hdx-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--hdx-radius-md);
  text-decoration: none;
  border: none;
  box-shadow: 0 6px 20px rgba(229, 41, 85, 0.35);
  transition: all var(--hdx-transition-fast);
  cursor: pointer;
}

.hdx-pricing-btn-secondary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(229, 41, 85, 0.5);
  text-decoration: none;
}

.hdx-pricing-btn-yearly {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--hdx-radius-md);
  text-decoration: none;
  border: none;
  box-shadow: 0 6px 20px rgba(109, 40, 217, 0.4);
  transition: all var(--hdx-transition-fast);
  cursor: pointer;
}

.hdx-pricing-btn-yearly:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(109, 40, 217, 0.6);
  text-decoration: none;
}

.hdx-pricing-btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--hdx-text-primary);
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--hdx-radius-md);
  text-decoration: none;
  transition: all var(--hdx-transition-fast);
  cursor: pointer;
}

.hdx-pricing-btn-outline:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}

.hdx-pricing-btn-weekly {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--hdx-radius-md);
  text-decoration: none;
  border: none;
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);
  transition: all var(--hdx-transition-fast);
  cursor: pointer;
}

.hdx-pricing-btn-weekly:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(6, 182, 212, 0.6);
  text-decoration: none;
}

.hdx-pricing-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.hdx-pricing-btn-subtle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hdx-text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-md);
  text-decoration: none;
  transition: all var(--hdx-transition-fast);
  cursor: pointer;
}

.hdx-pricing-btn-subtle:hover {
  color: var(--hdx-text-primary);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--hdx-border-hover);
  text-decoration: none;
}

.hdx-pricing-trust-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--hdx-text-muted);
  text-align: center;
  padding-top: 4px;
}

.hdx-pricing-trust-note i {
  color: #10b981;
}

/* Informative Benefit Cards Section */
.hdx-benefits-section {
  max-width: 960px;
  margin: 0 auto 50px auto;
}

.hdx-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}

@media (max-width: 900px) {
  .hdx-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .hdx-benefits-grid {
    grid-template-columns: 1fr;
  }
}

.hdx-benefit-card {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-lg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all var(--hdx-transition-base);
}

.hdx-benefit-card:hover {
  border-color: var(--hdx-border-hover);
  transform: translateY(-2px);
}

.hdx-benefit-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--hdx-radius-md);
  background: var(--hdx-accent-subtle);
  border: 1px solid rgba(229, 41, 85, 0.25);
  color: var(--hdx-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.hdx-benefit-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0;
}

.hdx-benefit-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--hdx-text-secondary);
  margin: 0;
}

/* How It Works Steps */
.hdx-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}

@media (max-width: 768px) {
  .hdx-steps-grid {
    grid-template-columns: 1fr;
  }
}

.hdx-step-card {
  position: relative;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-lg);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hdx-step-number {
  font-size: 28px;
  font-weight: 900;
  color: var(--hdx-gold);
  line-height: 1;
}

.hdx-step-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0;
}

.hdx-step-card p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--hdx-text-secondary);
  margin: 0;
}

/* FAQ Section */
.hdx-faq-section {
  max-width: 960px;
  margin: 0 auto 60px auto;
}

.hdx-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 24px;
}

@media (max-width: 768px) {
  .hdx-faq-grid {
    grid-template-columns: 1fr;
  }
}

.hdx-faq-item {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-md);
  padding: 20px;
}

.hdx-faq-item h5 {
  font-size: 15px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hdx-faq-item h5 i {
  color: var(--hdx-accent);
}

.hdx-faq-item p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--hdx-text-secondary);
  margin: 0;
}

/* ==========================================================================
   21b. STREAMLINED BUY & VIP EXTENSION PAGE (/satin-al)
   ========================================================================== */
.hdx-buy-page-wrap {
  padding-top: 10px;
  padding-bottom: 60px;
  max-width: 1240px;
}

.hdx-buy-page-wrap,
.hdx-buy-page-wrap *,
.hdx-buy-page-wrap *::before,
.hdx-buy-page-wrap *::after {
  box-sizing: border-box;
}

/* Breadcrumbs */
.hdx-buy-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--hdx-text-muted);
  margin-bottom: 16px;
}
.hdx-buy-breadcrumbs a {
  color: var(--hdx-text-secondary);
  text-decoration: none;
  transition: color var(--hdx-transition-fast);
}
.hdx-buy-breadcrumbs a:hover {
  color: var(--hdx-accent);
}
.hdx-buy-breadcrumbs i.fa-angle-right {
  font-size: 11px;
  opacity: 0.6;
}

/* Compact Buy Header */
.hdx-buy-header {
  text-align: center;
  margin-bottom: 24px;
}
.hdx-buy-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: var(--hdx-accent-subtle);
  border: 1px solid rgba(229, 41, 85, 0.25);
  color: var(--hdx-accent);
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--hdx-radius-pill);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.hdx-buy-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  margin: 0 0 6px 0;
  line-height: 1.25;
}
.hdx-buy-subtitle {
  font-size: 14px;
  color: var(--hdx-text-secondary);
  margin: 0 auto;
  max-width: 620px;
  line-height: 1.5;
}

/* User & Wallet Bar */
.hdx-buy-user-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-lg);
  padding: 16px 22px;
  margin-bottom: 24px;
  box-shadow: var(--hdx-shadow-card);
}
.hdx-buy-user-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.hdx-buy-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hdx-accent), #f59e0b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(229, 41, 85, 0.25);
}
.hdx-buy-user-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hdx-buy-user-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hdx-buy-username {
  font-size: 15px;
  font-weight: 700;
  color: var(--hdx-text-primary);
}
.hdx-buy-badge-vip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--hdx-radius-pill);
}
.hdx-buy-badge-days {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--hdx-radius-pill);
}
.hdx-buy-badge-standart {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--hdx-card-border);
  color: var(--hdx-text-secondary);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--hdx-radius-pill);
}
.hdx-buy-user-hint {
  font-size: 12.5px;
  color: var(--hdx-text-muted);
  line-height: 1.4;
}

.hdx-buy-user-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.hdx-buy-wallet-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-md);
  padding: 8px 14px;
}
.hdx-buy-wallet-label {
  font-size: 11px;
  color: var(--hdx-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.hdx-buy-wallet-val {
  font-size: 16px;
  font-weight: 800;
  color: #10b981;
}
.hdx-buy-topup-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.35);
  color: var(--hdx-gold);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--hdx-radius-md);
  text-decoration: none;
  transition: all var(--hdx-transition-fast);
  white-space: nowrap;
}
.hdx-buy-topup-btn:hover {
  background: var(--hdx-gold);
  color: #000;
  border-color: var(--hdx-gold);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Locked Video Rental Box */
.hdx-buy-rent-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--hdx-bg-card);
  border: 1px solid rgba(229, 41, 85, 0.3);
  border-radius: var(--hdx-radius-lg);
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(229, 41, 85, 0.1);
}
.hdx-buy-rent-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.hdx-buy-rent-thumb {
  position: relative;
  width: 110px;
  height: 64px;
  border-radius: var(--hdx-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: #000;
}
.hdx-buy-rent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hdx-buy-rent-tag {
  position: absolute;
  bottom: 3px;
  left: 3px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
}
.hdx-buy-rent-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hdx-buy-rent-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--hdx-accent);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.hdx-buy-rent-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hdx-buy-rent-desc {
  font-size: 12.5px;
  color: var(--hdx-text-secondary);
  margin: 0;
}
.hdx-buy-rent-alt-note {
  font-size: 11.5px;
  color: var(--hdx-gold);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.hdx-buy-rent-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.hdx-buy-rent-price-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.hdx-buy-rent-price-label {
  font-size: 11px;
  color: var(--hdx-text-muted);
}
.hdx-buy-rent-price-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--hdx-text-primary);
}
.hdx-buy-rent-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 20px;
  background: var(--hdx-accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: var(--hdx-radius-md);
  text-decoration: none;
  transition: all var(--hdx-transition-fast);
  white-space: nowrap;
}
.hdx-buy-rent-btn:hover {
  background: #ff3366;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(229, 41, 85, 0.4);
  text-decoration: none;
}
.hdx-buy-rent-btn.warning {
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.4);
  color: var(--hdx-gold);
}
.hdx-buy-rent-btn.warning:hover {
  background: var(--hdx-gold);
  color: #000;
}

/* Streamlined 4-Package Grid */
.hdx-buy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

/* Package Card */
.hdx-buy-card {
  position: relative;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-lg);
  padding: 22px 18px 20px 18px;
  display: flex;
  flex-direction: column;
  transition: all var(--hdx-transition-base);
  box-shadow: var(--hdx-shadow-card);
}
.hdx-buy-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* Card theme accents */
.hdx-buy-card.weekly {
  border-color: rgba(6, 182, 212, 0.35);
}
.hdx-buy-card.weekly:hover {
  border-color: #06b6d4;
  box-shadow: 0 12px 30px rgba(6, 182, 212, 0.2);
}

.hdx-buy-card.monthly {
  border-color: rgba(244, 63, 94, 0.35);
}
.hdx-buy-card.monthly:hover {
  border-color: #f43f5e;
  box-shadow: 0 12px 30px rgba(244, 63, 94, 0.2);
}

.hdx-buy-card.featured {
  border: 2px solid var(--hdx-gold);
  background: linear-gradient(180deg, rgba(234, 179, 8, 0.04) 0%, var(--hdx-bg-card) 60%);
  box-shadow: 0 6px 24px rgba(234, 179, 8, 0.16);
}
.hdx-buy-card.featured:hover {
  border-color: #fbbf24;
  box-shadow: 0 14px 34px rgba(234, 179, 8, 0.28);
}

.hdx-buy-card.yearly {
  border-color: rgba(168, 85, 247, 0.4);
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.04) 0%, var(--hdx-bg-card) 60%);
}
.hdx-buy-card.yearly:hover {
  border-color: #a855f7;
  box-shadow: 0 12px 30px rgba(168, 85, 247, 0.22);
}

/* Top Badge */
.hdx-buy-card-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 2px 12px;
  border-radius: var(--hdx-radius-pill);
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--hdx-card-border);
  color: var(--hdx-text-secondary);
}
.hdx-buy-card-badge.gold {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: none;
  color: #000;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}
.hdx-buy-card-badge.purple {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border: none;
  color: #fff;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
}

/* Card Head */
.hdx-buy-card-head {
  text-align: center;
  margin-top: 6px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--hdx-card-border);
}
.hdx-buy-card-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  margin: 0 0 8px 0;
}
.hdx-buy-price-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  line-height: 1;
}
.hdx-buy-price-amount {
  font-size: 32px;
  font-weight: 900;
  color: var(--hdx-text-primary);
  letter-spacing: -0.5px;
}
.hdx-buy-card.weekly .hdx-buy-price-amount { color: #06b6d4; }
.hdx-buy-card.monthly .hdx-buy-price-amount { color: #f43f5e; }
.hdx-buy-card.featured .hdx-buy-price-amount { color: var(--hdx-gold); }
.hdx-buy-card.yearly .hdx-buy-price-amount { color: #c084fc; }

.hdx-buy-price-cur {
  font-size: 18px;
  font-weight: 700;
  color: var(--hdx-text-secondary);
}
.hdx-buy-price-period {
  font-size: 13px;
  font-weight: 600;
  color: var(--hdx-text-muted);
  margin-left: 4px;
}
.hdx-buy-daily-rate {
  font-size: 11.5px;
  color: var(--hdx-text-muted);
  margin-top: 6px;
}

/* Perk Badge */
.hdx-buy-perk-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--hdx-radius-md);
  font-size: 12px;
  margin-bottom: 14px;
  text-align: center;
}
.hdx-buy-perk-badge.cyan {
  background: rgba(6, 182, 212, 0.12);
  color: #06b6d4;
  border: 1px solid rgba(6, 182, 212, 0.25);
}
.hdx-buy-perk-badge.pink {
  background: rgba(244, 63, 94, 0.12);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.25);
}
.hdx-buy-perk-badge.gold {
  background: rgba(234, 179, 8, 0.14);
  color: var(--hdx-gold);
  border: 1px solid rgba(234, 179, 8, 0.35);
  font-weight: 700;
}
.hdx-buy-perk-badge.purple {
  background: rgba(168, 85, 247, 0.14);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
  font-weight: 700;
}

/* Compact Feature Bullets */
.hdx-buy-features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.hdx-buy-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--hdx-text-secondary);
}
.hdx-buy-features li i {
  color: #10b981;
  font-size: 13px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Card Action Buttons */
.hdx-buy-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.hdx-buy-btn-balance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--hdx-radius-md);
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #fff;
  text-decoration: none;
  border: none;
  transition: all var(--hdx-transition-fast);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3);
}
.hdx-buy-btn-balance:hover {
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(225, 29, 72, 0.45);
  text-decoration: none;
}
.hdx-buy-btn-balance.cyan {
  background: linear-gradient(135deg, #06b6d4, #0284c7);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}
.hdx-buy-btn-balance.cyan:hover {
  background: linear-gradient(135deg, #0891b2, #0369a1);
}
.hdx-buy-btn-balance.gold {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
.hdx-buy-btn-balance.gold:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #000;
}
.hdx-buy-btn-balance.purple {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.35);
}
.hdx-buy-btn-balance.purple:hover {
  background: linear-gradient(135deg, #c084fc, #a855f7);
}

.hdx-buy-btn-topup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--hdx-radius-md);
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed var(--hdx-card-border);
  color: var(--hdx-text-muted);
  text-decoration: none;
  transition: all var(--hdx-transition-fast);
}
.hdx-buy-btn-topup:hover {
  background: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.4);
  color: var(--hdx-gold);
  text-decoration: none;
}

.hdx-buy-btn-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--hdx-radius-md);
  font-size: 12.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hdx-card-border);
  color: var(--hdx-text-primary);
  text-decoration: none;
  transition: all var(--hdx-transition-fast);
}
.hdx-buy-btn-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--hdx-border-hover);
  color: #fff;
  text-decoration: none;
}
.hdx-buy-btn-card i.fa-external-link {
  font-size: 10px;
  opacity: 0.7;
}

/* Trust Strip */
.hdx-buy-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-lg);
  padding: 14px 18px;
  margin-bottom: 20px;
}
.hdx-buy-trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--hdx-text-secondary);
  text-align: center;
}
.hdx-buy-trust-item i {
  color: #10b981;
  font-size: 14px;
  flex-shrink: 0;
}
.hdx-buy-trust-item strong {
  color: var(--hdx-text-primary);
}

/* Showcase Link Footnote */
.hdx-buy-showcase-link {
  text-align: center;
  font-size: 13px;
  color: var(--hdx-text-muted);
  padding: 8px 12px;
}
.hdx-buy-showcase-link a {
  color: var(--hdx-gold);
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
}
.hdx-buy-showcase-link a:hover {
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .hdx-buy-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .hdx-buy-trust-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .hdx-buy-user-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
    gap: 12px;
  }
  .hdx-buy-user-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border-top: 1px dashed var(--hdx-card-border);
    padding-top: 12px;
  }
  .hdx-buy-wallet-box {
    align-items: flex-start;
    padding: 6px 12px;
  }
  .hdx-buy-wallet-val {
    font-size: 15px;
  }
  .hdx-buy-topup-btn {
    padding: 8px 14px;
    font-size: 12.5px;
  }
  .hdx-buy-rent-card {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .hdx-buy-rent-left {
    flex-direction: column;
    align-items: flex-start;
  }
  .hdx-buy-rent-thumb {
    width: 100%;
    height: 140px;
  }
  .hdx-buy-rent-right {
    justify-content: space-between;
    border-top: 1px dashed var(--hdx-card-border);
    padding-top: 12px;
  }
}

@media (max-width: 580px) {
  .hdx-buy-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hdx-buy-trust-strip {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: left;
  }
  .hdx-buy-trust-item {
    justify-content: flex-start;
  }
  .hdx-buy-title {
    font-size: 20px;
  }
  .hdx-buy-subtitle {
    font-size: 13px;
  }
  .hdx-buy-header {
    margin-bottom: 18px;
  }
  .hdx-buy-header-badge {
    font-size: 11px;
    padding: 4px 10px;
  }
  .hdx-buy-user-bar {
    padding: 12px;
  }
  .hdx-buy-user-left {
    gap: 10px;
  }
  .hdx-buy-user-avatar {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }
  .hdx-buy-username {
    font-size: 14px;
  }
  .hdx-buy-card {
    padding: 20px 14px 16px 14px;
  }
}

/* Light Theme Overrides for Buy Page */
[data-theme="light"] .hdx-buy-user-bar,
[data-theme="light"] .hdx-buy-rent-card,
[data-theme="light"] .hdx-buy-card,
[data-theme="light"] .hdx-buy-trust-strip {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .hdx-buy-wallet-box {
  background: #f8fafc;
  border-color: #e2e8f0;
}
[data-theme="light"] .hdx-buy-btn-card {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1e293b;
}
[data-theme="light"] .hdx-buy-btn-card:hover {
  background: #f1f5f9;
  color: #0f172a;
}
[data-theme="light"] .hdx-buy-btn-topup {
  background: #fefce8;
  border-color: #fef08a;
  color: #b45309;
}
[data-theme="light"] .hdx-buy-badge-standart {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}
[data-theme="light"] .hdx-buy-card.featured {
  background: linear-gradient(180deg, rgba(234, 179, 8, 0.08) 0%, #ffffff 50%);
  border-color: #eab308;
}
[data-theme="light"] .hdx-buy-card.yearly {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.08) 0%, #ffffff 50%);
  border-color: #c084fc;
}

/* ==========================================================================
   22. PAYMENTS & BALANCE MANAGEMENT PAGE
   ========================================================================== */
.hdx-payments-overview {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-lg);
  padding: 24px 28px;
  margin-bottom: 32px;
  box-shadow: var(--hdx-shadow-card);
}

@media (max-width: 768px) {
  .hdx-payments-overview {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 20px;
    padding: 20px;
  }
}

.hdx-balance-display {
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (max-width: 768px) {
  .hdx-balance-display {
    flex-direction: column;
    justify-content: center;
  }
}

.hdx-balance-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: var(--hdx-radius-full);
  background: rgba(212, 160, 66, 0.15);
  border: 2px solid var(--hdx-gold);
  color: var(--hdx-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.hdx-balance-meta h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--hdx-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 4px 0;
}

.hdx-balance-val {
  font-size: 32px;
  font-weight: 800;
  color: var(--hdx-gold);
  letter-spacing: -0.02em;
  line-height: 1;
}

.hdx-payments-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .hdx-payments-actions {
    justify-content: center;
    width: 100%;
  }
  .hdx-payments-actions .hdx-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Active Payment / Bank Accounts Grid */
.hdx-accounts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}

@media (max-width: 991px) {
  .hdx-accounts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .hdx-accounts-grid {
    grid-template-columns: 1fr;
  }
}

.hdx-account-box {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-md);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  transition: all var(--hdx-transition-base);
}

.hdx-account-box:hover {
  border-color: var(--hdx-border-hover);
  transform: translateY(-2px);
}

.hdx-account-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hdx-account-type-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: var(--hdx-radius-xs);
  background: var(--hdx-tag-bg);
  border: 1px solid var(--hdx-border);
  color: var(--hdx-text-secondary);
}

.hdx-account-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 6px 0 2px 0;
}

.hdx-account-number-wrap {
  position: relative;
  background: var(--hdx-input-bg);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-sm);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hdx-account-number {
  font-family: monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--hdx-text-primary);
  word-break: break-all;
  user-select: all;
}

.hdx-copy-btn {
  background: transparent;
  border: none;
  color: var(--hdx-accent);
  font-size: 13px;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: var(--hdx-radius-xs);
  transition: all var(--hdx-transition-fast);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hdx-copy-btn:hover {
  background: var(--hdx-accent-subtle);
  color: var(--hdx-accent);
}

.hdx-account-online-wrap {
  position: relative;
  background: var(--hdx-input-bg);
  border: 1px dashed var(--hdx-border);
  border-radius: var(--hdx-radius-sm);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-align: center;
}

.hdx-account-online-wrap a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform var(--hdx-transition-fast), filter var(--hdx-transition-fast);
}

.hdx-account-online-wrap a:hover {
  transform: scale(1.04);
  filter: brightness(1.12);
}

.hdx-account-online-wrap img {
  max-width: 100%;
  max-height: 38px;
  height: auto;
  display: inline-block;
  border-radius: var(--hdx-radius-xs);
  vertical-align: middle;
}

.hdx-account-note {
  font-size: 12.5px;
  color: var(--hdx-text-secondary);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Payment Guide Steps Banner */
.hdx-payment-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  background: var(--hdx-bg-surface);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  padding: 20px 24px;
  margin-bottom: 36px;
}

@media (max-width: 768px) {
  .hdx-payment-steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.hdx-payment-step-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.hdx-step-badge {
  width: 28px;
  height: 28px;
  border-radius: var(--hdx-radius-full);
  background: var(--hdx-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hdx-step-desc h5 {
  font-size: 14px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0 0 3px 0;
}

.hdx-step-desc p {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--hdx-text-secondary);
  margin: 0;
}

/* Payments History Table */
.hdx-table-card {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-lg);
  overflow: hidden;
  box-shadow: var(--hdx-shadow-card);
  margin-bottom: 40px;
}

.hdx-table-responsive {
  width: 100%;
  overflow-x: auto;
}

.hdx-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13.5px;
}

.hdx-table thead {
  background: var(--hdx-bg-surface);
  border-bottom: 1px solid var(--hdx-border);
}

.hdx-table th {
  padding: 14px 18px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hdx-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.hdx-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--hdx-border);
  color: var(--hdx-text-secondary);
  vertical-align: middle;
}

.hdx-table tbody tr:last-child td {
  border-bottom: none;
}

.hdx-table tbody tr:hover {
  background: var(--hdx-bg-card-hover);
}

/* Status Badges */
.hdx-pill-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--hdx-radius-full);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.hdx-pill-status.status-pass {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.hdx-pill-status.status-wait-pass {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.hdx-pill-status.status-wait-user {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.hdx-pill-status.status-cancel {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Modal Enhancements */
.hdx-modal .modal-content {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-border-hover);
  border-radius: var(--hdx-radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  color: var(--hdx-text-primary);
}

.hdx-modal .modal-header {
  border-bottom: 1px solid var(--hdx-border);
  padding: 18px 24px;
}

.hdx-modal .modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.hdx-modal .modal-body {
  padding: 24px;
}

.hdx-modal .modal-footer {
  border-top: 1px solid var(--hdx-border);
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.hdx-modal .close {
  color: var(--hdx-text-muted);
  opacity: 0.8;
  font-size: 24px;
  text-shadow: none;
}

.hdx-modal .close:hover {
  color: var(--hdx-text-primary);
  opacity: 1;
}

/* Account Radio Selector inside Modal */
.hdx-account-radio-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--hdx-radius-md);
  border: 1px solid var(--hdx-border);
  background: var(--hdx-input-bg);
  margin-bottom: 10px;
  cursor: pointer;
  transition: all var(--hdx-transition-fast);
}

.hdx-account-radio-item:hover {
  border-color: var(--hdx-border-hover);
  background: var(--hdx-bg-card);
}

.hdx-account-radio-item input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--hdx-accent);
}

/* ==========================================================================
   23. SUPPORT CENTER & TICKETS SYSTEM
   ========================================================================== */
.hdx-support-hero {
  position: relative;
  background: linear-gradient(135deg, var(--hdx-bg-card) 0%, var(--hdx-bg-elevated) 100%);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-lg);
  padding: 32px 36px;
  margin-bottom: 32px;
  box-shadow: var(--hdx-shadow-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
}

.hdx-support-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, var(--hdx-accent), var(--hdx-gold));
}

@media (max-width: 991px) {
  .hdx-support-hero {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
  }
}

.hdx-support-hero-left {
  display: flex;
  align-items: center;
  gap: 22px;
}

@media (max-width: 991px) {
  .hdx-support-hero-left {
    flex-direction: column;
    text-align: center;
  }
}

.hdx-support-hero-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--hdx-radius-full);
  background: rgba(229, 9, 20, 0.12);
  border: 2px solid rgba(229, 9, 20, 0.35);
  color: var(--hdx-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.hdx-support-hero-meta h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

.hdx-support-hero-meta p {
  font-size: 14.5px;
  color: var(--hdx-text-secondary);
  margin: 0;
  line-height: 1.5;
  max-width: 620px;
}

.hdx-support-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

@media (max-width: 991px) {
  .hdx-support-hero-actions {
    justify-content: center;
    width: 100%;
  }
  .hdx-support-hero-actions .hdx-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Support Highlights / Stats Grid */
.hdx-support-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

@media (max-width: 1024px) {
  .hdx-support-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .hdx-support-stats-grid {
    grid-template-columns: 1fr;
  }
}

.hdx-support-stat-card {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-md);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: transform var(--hdx-transition-base), border-color var(--hdx-transition-base);
}

.hdx-support-stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--hdx-border-hover);
}

.hdx-support-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--hdx-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.hdx-support-stat-icon.icon-time {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.hdx-support-stat-icon.icon-vip {
  background: rgba(212, 160, 66, 0.12);
  color: var(--hdx-gold);
  border: 1px solid rgba(212, 160, 66, 0.25);
}

.hdx-support-stat-icon.icon-shield {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.hdx-support-stat-icon.icon-check {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.25);
}

.hdx-support-stat-info h4 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0 0 3px 0;
}

.hdx-support-stat-info p {
  font-size: 12.5px;
  color: var(--hdx-text-muted);
  margin: 0;
  line-height: 1.35;
}

/* Informative Topic Guidelines Grid */
.hdx-support-guidelines-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}

@media (max-width: 1024px) {
  .hdx-support-guidelines-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .hdx-support-guidelines-grid {
    grid-template-columns: 1fr;
  }
}

.hdx-support-guide-card {
  background: var(--hdx-bg-surface);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  padding: 18px 20px;
  transition: all var(--hdx-transition-base);
}

.hdx-support-guide-card:hover {
  border-color: var(--hdx-border-hover);
  background: var(--hdx-bg-card);
}

.hdx-support-guide-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.hdx-support-guide-head i {
  font-size: 16px;
  color: var(--hdx-accent);
}

.hdx-support-guide-head h5 {
  font-size: 14px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0;
}

.hdx-support-guide-card p {
  font-size: 12.5px;
  color: var(--hdx-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Ticket Status Badges */
.hdx-pill-status.status-question {
  background: rgba(234, 179, 8, 0.12);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.hdx-pill-status.status-answer {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.15);
  animation: hdx-badge-pulse 2.2s infinite;
}

.hdx-pill-status.status-again {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.hdx-pill-status.status-closed {
  background: rgba(148, 163, 184, 0.1);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

@keyframes hdx-badge-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
  }
}

/* Focused Centered Layout for Single Ticket View */
.hdx-ticket-view-layout {
  max-width: 860px;
  margin: 14px auto 50px auto;
  width: 100%;
}

.hdx-ticket-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hdx-border);
  color: var(--hdx-text-secondary);
  padding: 6px 14px;
  border-radius: var(--hdx-radius-full);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--hdx-transition-fast);
}

.hdx-ticket-back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--hdx-border-hover);
  color: var(--hdx-text-primary);
}

html[data-theme="light"] .hdx-ticket-back-btn,
body.light .hdx-ticket-back-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

html[data-theme="light"] .hdx-ticket-back-btn:hover,
body.light .hdx-ticket-back-btn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #0f172a;
}

/* Modern Minimalist Support List (/destek-talepleri) */
.hdx-tickets-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hdx-border);
}

.hdx-tickets-header-content {
  flex: 1;
  min-width: 0;
}

.hdx-tickets-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.hdx-tickets-header-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.3px;
  line-height: 1.25;
}

.hdx-tickets-header-title i {
  color: var(--hdx-accent);
  font-size: 22px;
  flex-shrink: 0;
}

html[data-theme="light"] .hdx-tickets-header-title,
body.light .hdx-tickets-header-title {
  color: #0f172a;
}

.hdx-tickets-badges {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.hdx-tickets-badge-total {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hdx-text-secondary);
  background: var(--hdx-bg-surface, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--hdx-border, rgba(255, 255, 255, 0.1));
  padding: 3px 11px;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}

html[data-theme="light"] .hdx-tickets-badge-total,
body.light .hdx-tickets-badge-total {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.hdx-tickets-badge-answered {
  font-size: 12px;
  font-weight: 800;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 3px 11px;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

html[data-theme="light"] .hdx-tickets-badge-answered,
body.light .hdx-tickets-badge-answered {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.hdx-tickets-header-subtitle {
  font-size: 14px;
  color: var(--hdx-text-secondary);
  margin: 0;
  line-height: 1.5;
}

html[data-theme="light"] .hdx-tickets-header-subtitle,
body.light .hdx-tickets-header-subtitle {
  color: #64748b;
}

.hdx-tickets-header-actions {
  flex-shrink: 0;
}

.hdx-tickets-header-actions .hdx-btn {
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.hdx-tickets-clean-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}

.hdx-ticket-item-card {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-md);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: all var(--hdx-transition-fast);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.hdx-ticket-item-card:hover {
  border-color: var(--hdx-border-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .hdx-ticket-item-card,
body.light .hdx-ticket-item-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

html[data-theme="light"] .hdx-ticket-item-card:hover,
body.light .hdx-ticket-item-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.hdx-ticket-item-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.hdx-ticket-item-title-wrap {
  min-width: 0;
  flex: 1;
}

.hdx-ticket-item-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
  transition: color var(--hdx-transition-fast);
}

.hdx-ticket-item-title:hover {
  color: var(--hdx-accent);
}

html[data-theme="light"] .hdx-ticket-item-title,
body.light .hdx-ticket-item-title {
  color: #0f172a;
}

html[data-theme="light"] .hdx-ticket-item-title:hover,
body.light .hdx-ticket-item-title:hover {
  color: var(--hdx-accent);
}

.hdx-ticket-item-meta {
  font-size: 12.5px;
  color: var(--hdx-text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

html[data-theme="light"] .hdx-ticket-item-meta,
body.light .hdx-ticket-item-meta {
  color: #64748b;
}

.hdx-ticket-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .hdx-tickets-header-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
    padding-bottom: 16px !important;
  }

  .hdx-tickets-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 6px !important;
    width: 100% !important;
  }

  .hdx-tickets-header-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  .hdx-tickets-header-title i {
    font-size: 20px !important;
  }

  .hdx-tickets-badges {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .hdx-tickets-badge-total,
  .hdx-tickets-badge-answered {
    font-size: 11.5px !important;
    padding: 3px 9px !important;
    white-space: nowrap !important;
  }

  .hdx-tickets-header-subtitle {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: var(--hdx-text-secondary) !important;
  }

  .hdx-tickets-header-actions {
    width: 100% !important;
  }

  .hdx-tickets-header-actions .hdx-btn {
    width: 100% !important;
    justify-content: center !important;
    height: 44px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(234, 44, 90, 0.25) !important;
  }

  .hdx-ticket-answered-alert-bar {
    padding: 13px 15px !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    border-radius: 14px !important;
  }

  .hdx-ticket-answered-alert-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }

  .hdx-ticket-answered-alert-text strong {
    font-size: 14px !important;
  }

  .hdx-ticket-answered-alert-text span {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .hdx-ticket-item-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
  }
  .hdx-ticket-item-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }
  .hdx-ticket-item-title {
    white-space: normal;
  }
  .hdx-ticket-item-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Subtle Trust Banner */
.hdx-support-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 14px 20px;
  background: var(--hdx-bg-surface);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  margin-top: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--hdx-text-secondary);
}

html[data-theme="light"] .hdx-support-trust-bar,
body.light .hdx-support-trust-bar {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}

.hdx-support-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   23.1 PROMINENT ANSWERED / REPLIED TICKET HIGHLIGHTS
   ========================================================================== */

/* Top Answered Alert Bar in /destek-talepleri */
.hdx-ticket-answered-alert-bar {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(5, 150, 105, 0.08) 100%);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: var(--hdx-radius-md);
  padding: 16px 20px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
}

html[data-theme="light"] .hdx-ticket-answered-alert-bar,
body.light .hdx-ticket-answered-alert-bar {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #6ee7b7;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.12);
}

.hdx-ticket-answered-alert-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--hdx-radius-full);
  background: #10b981;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.5);
  position: relative;
}

.hdx-ticket-alert-ping {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
  animation: hdxPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  opacity: 0.6;
  z-index: -1;
}

@keyframes hdxPing {
  75%, 100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.hdx-ticket-answered-alert-text {
  flex: 1;
}

.hdx-ticket-answered-alert-text strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #34d399;
  margin-bottom: 3px;
}

html[data-theme="light"] .hdx-ticket-answered-alert-text strong,
body.light .hdx-ticket-answered-alert-text strong {
  color: #047857;
}

.hdx-ticket-answered-alert-text span {
  font-size: 13px;
  color: var(--hdx-text-secondary);
  line-height: 1.45;
}

html[data-theme="light"] .hdx-ticket-answered-alert-text span,
body.light .hdx-ticket-answered-alert-text span {
  color: #065f46;
}

/* Answered Ticket Card Highlight */
.hdx-ticket-item-card.is-answered {
  border-left: 5px solid #10b981 !important;
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.02) 32%, var(--hdx-bg-card) 100%);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.12);
}

html[data-theme="light"] .hdx-ticket-item-card.is-answered,
body.light .hdx-ticket-item-card.is-answered {
  border-left: 5px solid #10b981 !important;
  border-color: #86efac;
  background: linear-gradient(90deg, #ecfdf5 0%, #f0fdf4 35%, #ffffff 100%);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.1);
}

.hdx-new-reply-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #10b981;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--hdx-radius-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 8px;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
  animation: hdxBounceSmall 2.4s infinite ease-in-out;
}

@keyframes hdxBounceSmall {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.hdx-btn-answered-cta {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 1px solid #10b981 !important;
  color: #ffffff !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: var(--hdx-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
  transition: all var(--hdx-transition-fast) !important;
}

.hdx-btn-answered-cta:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5) !important;
  color: #ffffff !important;
}

.hdx-ticket-pill.status-answer.is-new {
  background: rgba(16, 185, 129, 0.22);
  border: 1px solid #10b981;
  color: #34d399;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

html[data-theme="light"] .hdx-ticket-pill.status-answer.is-new,
body.light .hdx-ticket-pill.status-answer.is-new {
  background: #d1fae5;
  border-color: #10b981;
  color: #047857;
}

/* In Ticket View (/goruntule/:id) Answered Alert Banner */
.hdx-ticket-answered-banner {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(5, 150, 105, 0.07) 100%);
  border-bottom: 1px solid rgba(16, 185, 129, 0.3);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

html[data-theme="light"] .hdx-ticket-answered-banner,
body.light .hdx-ticket-answered-banner {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-bottom-color: #a7f3d0;
}

.hdx-ticket-answered-banner-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--hdx-radius-full);
  background: #10b981;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.hdx-ticket-answered-banner-text strong {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: #34d399;
  margin-bottom: 2px;
}

html[data-theme="light"] .hdx-ticket-answered-banner-text strong,
body.light .hdx-ticket-answered-banner-text strong {
  color: #047857;
}

.hdx-ticket-answered-banner-text span {
  font-size: 12.5px;
  color: var(--hdx-text-secondary);
  line-height: 1.4;
}

html[data-theme="light"] .hdx-ticket-answered-banner-text span,
body.light .hdx-ticket-answered-banner-text span {
  color: #065f46;
}

/* Latest Admin Message Highlight in Chat */
.hdx-chat-item.is-latest-answer .hdx-chat-bubble {
  border-left: 4px solid #10b981 !important;
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.12) !important;
}

html[data-theme="light"] .hdx-chat-item.is-latest-answer .hdx-chat-bubble,
body.light .hdx-chat-item.is-latest-answer .hdx-chat-bubble {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  border-left: 4px solid #10b981 !important;
  color: #064e3b !important;
}

.hdx-chat-latest-tag {
  background: #10b981;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--hdx-radius-xs);
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.hdx-ticket-chat-card {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-lg);
  overflow: hidden;
  box-shadow: var(--hdx-shadow-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color var(--hdx-transition-base), border-color var(--hdx-transition-base);
}

html[data-theme="light"] .hdx-ticket-chat-card,
body.light .hdx-ticket-chat-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.hdx-ticket-chat-header {
  background: var(--hdx-bg-elevated);
  border-bottom: 1px solid var(--hdx-border);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

html[data-theme="light"] .hdx-ticket-chat-header,
body.light .hdx-ticket-chat-header {
  background: #ffffff;
  border-bottom-color: #f1f5f9;
}

.hdx-ticket-header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.hdx-ticket-header-main {
  width: 100%;
}

.hdx-ticket-tags-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.hdx-ticket-code-badge {
  background: rgba(234, 44, 90, 0.1);
  border: 1px solid rgba(234, 44, 90, 0.25);
  padding: 3px 9px;
  border-radius: var(--hdx-radius-xs);
  font-weight: 800;
  font-size: 13px;
  color: var(--hdx-accent);
}

.hdx-ticket-close-action {
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--hdx-radius-full);
  text-decoration: none !important;
  transition: all var(--hdx-transition-fast);
}

.hdx-ticket-close-action:hover {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .hdx-ticket-close-action,
body.light .hdx-ticket-close-action {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}

html[data-theme="light"] .hdx-ticket-close-action:hover,
body.light .hdx-ticket-close-action:hover {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #b91c1c !important;
}

.hdx-sender-full {
  display: inline;
}

.hdx-sender-short {
  display: none;
}

.hdx-ticket-chat-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hdx-ticket-chat-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  margin: 0;
  letter-spacing: -0.3px;
}

html[data-theme="light"] .hdx-ticket-chat-title,
body.light .hdx-ticket-chat-title {
  color: #0f172a;
}

.hdx-ticket-chat-meta {
  font-size: 13px;
  color: var(--hdx-text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

html[data-theme="light"] .hdx-ticket-chat-meta,
body.light .hdx-ticket-chat-meta {
  color: #64748b;
}

/* Status Pills with Pulsing Dots */
.hdx-ticket-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.hdx-ticket-pill.status-question {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

html[data-theme="light"] .hdx-ticket-pill.status-question,
body.light .hdx-ticket-pill.status-question {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

.hdx-ticket-pill.status-answer {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

html[data-theme="light"] .hdx-ticket-pill.status-answer,
body.light .hdx-ticket-pill.status-answer {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.hdx-ticket-pill.status-again {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #60a5fa;
}

html[data-theme="light"] .hdx-ticket-pill.status-again,
body.light .hdx-ticket-pill.status-again {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.hdx-ticket-pill.status-closed {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--hdx-text-muted);
}

html[data-theme="light"] .hdx-ticket-pill.status-closed,
body.light .hdx-ticket-pill.status-closed {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #64748b;
}

.hdx-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: hdxPulseDot 2s infinite;
}

@keyframes hdxPulseDot {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* Copy Reference Code Button */
.hdx-copy-code-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hdx-border);
  color: var(--hdx-text-secondary);
  padding: 3px 10px;
  border-radius: var(--hdx-radius-xs);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hdx-copy-code-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--hdx-text-primary);
  border-color: var(--hdx-border-hover);
}

html[data-theme="light"] .hdx-copy-code-btn,
body.light .hdx-copy-code-btn {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}

html[data-theme="light"] .hdx-copy-code-btn:hover,
body.light .hdx-copy-code-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Messenger Stream Container */
.hdx-chat-messages-container {
  padding: 30px 26px;
  min-height: 380px;
  max-height: 620px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: rgba(10, 12, 16, 0.45);
  scroll-behavior: smooth;
}

html[data-theme="light"] .hdx-chat-messages-container,
body.light .hdx-chat-messages-container {
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}

.hdx-chat-messages-container::-webkit-scrollbar {
  width: 6px;
}

.hdx-chat-messages-container::-webkit-scrollbar-track {
  background: transparent;
}

.hdx-chat-messages-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

html[data-theme="light"] .hdx-chat-messages-container::-webkit-scrollbar-thumb,
body.light .hdx-chat-messages-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

/* Chat Items & Bubbles */
.hdx-chat-item {
  display: flex;
  gap: 14px;
  max-width: 82%;
}

@media (max-width: 768px) {
  .hdx-chat-item {
    max-width: 95%;
    gap: 10px;
  }
}

.hdx-chat-item.item-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.hdx-chat-item.item-admin {
  align-self: flex-start;
}

.hdx-chat-avatar {
  width: 42px;
  height: 42px;
  border-radius: var(--hdx-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.hdx-chat-item.item-admin .hdx-chat-avatar {
  background: linear-gradient(135deg, rgba(234, 44, 90, 0.2), rgba(225, 29, 72, 0.15));
  border: 2px solid var(--hdx-accent);
  color: var(--hdx-accent);
}

html[data-theme="light"] .hdx-chat-item.item-admin .hdx-chat-avatar,
body.light .hdx-chat-item.item-admin .hdx-chat-avatar {
  background: #ffe4e6;
  border-color: #f43f5e;
  color: #e11d48;
}

.hdx-chat-item.item-user .hdx-chat-avatar {
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

html[data-theme="light"] .hdx-chat-item.item-user .hdx-chat-avatar,
body.light .hdx-chat-item.item-user .hdx-chat-avatar {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

.hdx-chat-bubble-wrap {
  display: flex;
  flex-direction: column;
}

.hdx-chat-item.item-user .hdx-chat-bubble-wrap {
  align-items: flex-end;
}

.hdx-chat-sender-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 6px;
}

.hdx-chat-sender-name {
  font-weight: 700;
  color: var(--hdx-text-primary);
}

html[data-theme="light"] .hdx-chat-sender-name,
body.light .hdx-chat-sender-name {
  color: #1e293b;
}

.hdx-chat-sender-role {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--hdx-radius-xs);
  letter-spacing: 0.05em;
}

.role-admin {
  background: var(--hdx-accent);
  color: #fff;
}

.role-user {
  background: var(--hdx-tag-bg);
  border: 1px solid var(--hdx-border);
  color: var(--hdx-text-secondary);
}

html[data-theme="light"] .role-user,
body.light .role-user {
  background: #e2e8f0;
  color: #475569;
}

.hdx-chat-time {
  color: var(--hdx-text-muted);
}

html[data-theme="light"] .hdx-chat-time,
body.light .hdx-chat-time {
  color: #64748b;
}

.hdx-chat-bubble {
  padding: 16px 20px;
  border-radius: var(--hdx-radius-md);
  font-size: 14.5px;
  line-height: 1.65;
  word-break: break-word;
  white-space: pre-line;
}

.hdx-chat-item.item-admin .hdx-chat-bubble {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  color: var(--hdx-text-primary);
  border-top-left-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .hdx-chat-item.item-admin .hdx-chat-bubble,
body.light .hdx-chat-item.item-admin .hdx-chat-bubble {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.hdx-chat-item.item-user .hdx-chat-bubble {
  background: linear-gradient(135deg, rgba(234, 44, 90, 0.95), rgba(190, 24, 65, 0.95));
  border: 1px solid rgba(234, 44, 90, 0.4);
  color: #ffffff;
  border-top-right-radius: 4px;
  box-shadow: 0 3px 12px rgba(234, 44, 90, 0.25);
}

html[data-theme="light"] .hdx-chat-item.item-user .hdx-chat-bubble,
body.light .hdx-chat-item.item-user .hdx-chat-bubble {
  background: linear-gradient(135deg, #ea2c5a, #be185d);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(234, 44, 90, 0.2);
}

/* Chat Date Separator */
.hdx-chat-date-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  position: relative;
}

.hdx-chat-date-separator::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--hdx-border);
}

.hdx-chat-date-badge {
  position: relative;
  z-index: 2;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-border);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--hdx-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

html[data-theme="light"] .hdx-chat-date-badge,
body.light .hdx-chat-date-badge {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}

/* Chat Input Footer & Textarea */
.hdx-ticket-chat-footer {
  background: var(--hdx-bg-card);
  border-top: 1px solid var(--hdx-border);
  padding: 22px 26px;
}

html[data-theme="light"] .hdx-ticket-chat-footer,
body.light .hdx-ticket-chat-footer {
  background: #ffffff;
  border-top-color: #f1f5f9;
}

.hdx-chat-input-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hdx-chat-textarea {
  width: 100%;
  background: var(--hdx-input-bg);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  color: var(--hdx-text-primary);
  padding: 14px 18px;
  font-size: 14.5px;
  resize: vertical;
  min-height: 72px;
  max-height: 200px;
  line-height: 1.6;
  box-sizing: border-box;
  transition: all var(--hdx-transition-fast);
}

html[data-theme="light"] .hdx-chat-textarea,
body.light .hdx-chat-textarea {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

.hdx-chat-textarea:focus {
  outline: none;
  border-color: var(--hdx-accent);
  box-shadow: 0 0 0 3px var(--hdx-accent-subtle);
}

html[data-theme="light"] .hdx-chat-textarea:focus,
body.light .hdx-chat-textarea:focus {
  background: #ffffff;
  border-color: var(--hdx-accent);
  box-shadow: 0 0 0 3px rgba(229, 41, 85, 0.15);
}

.hdx-chat-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.hdx-chat-tip {
  font-size: 12.5px;
  color: var(--hdx-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

html[data-theme="light"] .hdx-chat-tip,
body.light .hdx-chat-tip {
  color: #64748b;
}

.hdx-chat-closed-banner {
  background: rgba(148, 163, 184, 0.08);
  border: 1px dashed rgba(148, 163, 184, 0.3);
  border-radius: var(--hdx-radius-md);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

html[data-theme="light"] .hdx-chat-closed-banner,
body.light .hdx-chat-closed-banner {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.hdx-chat-closed-text {
  font-size: 13.5px;
  color: var(--hdx-text-secondary);
  display: flex;
  align-items: center;
  gap: 12px;
}

html[data-theme="light"] .hdx-chat-closed-text,
body.light .hdx-chat-closed-text {
  color: #475569;
}

/* Ticket Sidebar Cards */
.hdx-ticket-sidebar-card {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-lg);
  padding: 22px;
  box-shadow: var(--hdx-shadow-card);
  margin-bottom: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color var(--hdx-transition-base), border-color var(--hdx-transition-base);
}

html[data-theme="light"] .hdx-ticket-sidebar-card,
body.light .hdx-ticket-sidebar-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.hdx-ticket-sidebar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--hdx-border);
}

html[data-theme="light"] .hdx-ticket-sidebar-head,
body.light .hdx-ticket-sidebar-head {
  border-bottom-color: #f1f5f9;
}

.hdx-ticket-sidebar-head i {
  color: var(--hdx-accent);
  font-size: 16px;
}

.hdx-ticket-sidebar-head h4 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0;
}

html[data-theme="light"] .hdx-ticket-sidebar-head h4,
body.light .hdx-ticket-sidebar-head h4 {
  color: #0f172a;
}

.hdx-ticket-meta-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hdx-ticket-meta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.hdx-ticket-meta-item .meta-label {
  color: var(--hdx-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

html[data-theme="light"] .hdx-ticket-meta-item .meta-label,
body.light .hdx-ticket-meta-item .meta-label {
  color: #64748b;
}

.hdx-ticket-meta-item .meta-value {
  font-weight: 700;
  color: var(--hdx-text-primary);
}

html[data-theme="light"] .hdx-ticket-meta-item .meta-value,
body.light .hdx-ticket-meta-item .meta-value {
  color: #0f172a;
}

/* ==========================================================================
   TICKET MESSENGER RESPONSIVE & MOBILE POLISH
   ========================================================================== */
@media (max-width: 767px) {
  .hdx-ticket-view-layout {
    margin: 6px auto 28px auto !important;
    padding: 0 !important;
  }

  .hdx-ticket-chat-card {
    border-radius: 14px !important;
  }

  .hdx-ticket-chat-header {
    padding: 14px 14px !important;
    gap: 10px !important;
  }

  .hdx-ticket-header-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 2px !important;
  }

  .hdx-ticket-back-btn {
    padding: 5px 12px !important;
    font-size: 12px !important;
  }

  .hdx-ticket-close-action {
    padding: 5px 11px !important;
    font-size: 11.5px !important;
  }

  .hdx-ticket-tags-row {
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  .hdx-ticket-code-badge {
    font-size: 12px !important;
    padding: 2px 7px !important;
  }

  .hdx-copy-code-btn {
    padding: 2px 8px !important;
    font-size: 11.5px !important;
  }

  .hdx-ticket-pill {
    padding: 2.5px 9px !important;
    font-size: 11px !important;
  }

  .hdx-ticket-chat-title {
    font-size: 16px !important;
    line-height: 1.35 !important;
    margin: 4px 0 6px 0 !important;
  }

  .hdx-ticket-chat-meta {
    font-size: 11.5px !important;
    gap: 6px !important;
    margin-top: 2px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  .hdx-ticket-chat-meta span {
    white-space: nowrap !important;
  }

  /* Answered Notification Banner on Mobile */
  .hdx-ticket-answered-banner {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .hdx-ticket-answered-banner-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }

  .hdx-ticket-answered-banner-text strong {
    font-size: 13px !important;
    margin-bottom: 2px !important;
  }

  .hdx-ticket-answered-banner-text span {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  /* Chat Messages Stream on Mobile */
  .hdx-chat-messages-container {
    padding: 14px 10px !important;
    gap: 14px !important;
    min-height: 260px !important;
  }

  .hdx-chat-date-separator {
    margin: 6px 0 !important;
  }

  .hdx-chat-date-badge {
    padding: 3px 10px !important;
    font-size: 10.5px !important;
  }

  /* Chat Item (User & Admin) */
  .hdx-chat-item {
    max-width: 95% !important;
    gap: 8px !important;
  }

  .hdx-chat-avatar {
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
  }

  .hdx-chat-sender-info {
    font-size: 11.5px !important;
    gap: 5px !important;
    margin-bottom: 4px !important;
    flex-wrap: wrap !important;
  }

  .hdx-chat-sender-name {
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .hdx-sender-full {
    display: none !important;
  }

  .hdx-sender-short {
    display: inline !important;
  }

  .hdx-chat-sender-role {
    font-size: 9px !important;
    padding: 1px 5px !important;
  }

  .hdx-chat-latest-tag {
    font-size: 9px !important;
    padding: 1px 5px !important;
  }

  .hdx-chat-time {
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }

  /* Message Bubbles - Sleek, Dynamic, Never Boxy */
  .hdx-chat-bubble {
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    border-radius: 14px !important;
    word-break: break-word !important;
  }

  .hdx-chat-item.item-admin .hdx-chat-bubble {
    border-top-left-radius: 3px !important;
  }

  .hdx-chat-item.item-user .hdx-chat-bubble {
    border-top-right-radius: 3px !important;
    min-width: 60px !important;
    display: inline-block !important;
  }

  /* Chat Footer Form on Mobile */
  .hdx-ticket-chat-footer {
    padding: 12px 14px !important;
  }

  .hdx-chat-textarea {
    padding: 10px 12px !important;
    font-size: 14px !important;
    min-height: 60px !important;
    border-radius: 10px !important;
  }

  .hdx-chat-action-bar {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .hdx-chat-tip {
    display: none !important;
  }

  .hdx-chat-action-bar .hdx-btn {
    width: 100% !important;
    height: 42px !important;
    justify-content: center !important;
    font-size: 13.5px !important;
    border-radius: 10px !important;
  }

  .hdx-chat-closed-banner {
    padding: 14px 14px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    text-align: center !important;
  }

  .hdx-chat-closed-text {
    flex-direction: column !important;
    text-align: center !important;
    gap: 6px !important;
  }

  .hdx-chat-closed-banner .hdx-btn {
    width: 100% !important;
    justify-content: center !important;
    height: 40px !important;
  }
}

/* ==========================================================================
   24. CONTACT & FEEDBACK HUB
   ========================================================================== */
.hdx-contact-hero {
  position: relative;
  background: linear-gradient(135deg, var(--hdx-bg-card) 0%, var(--hdx-bg-elevated) 100%);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-lg);
  padding: 32px 36px;
  margin-bottom: 32px;
  box-shadow: var(--hdx-shadow-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
}

.hdx-contact-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, var(--hdx-accent), var(--hdx-gold));
}

@media (max-width: 991px) {
  .hdx-contact-hero {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
  }
}

.hdx-contact-hero-left {
  display: flex;
  align-items: center;
  gap: 22px;
}

@media (max-width: 991px) {
  .hdx-contact-hero-left {
    flex-direction: column;
    text-align: center;
  }
}

.hdx-contact-hero-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--hdx-radius-full);
  background: rgba(229, 9, 20, 0.12);
  border: 2px solid rgba(229, 9, 20, 0.35);
  color: var(--hdx-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.hdx-contact-hero-meta h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

.hdx-contact-hero-meta p {
  font-size: 14.5px;
  color: var(--hdx-text-secondary);
  margin: 0;
  line-height: 1.5;
  max-width: 620px;
}

/* Contact Channels Grid (4 highlights) */
.hdx-contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

@media (max-width: 1024px) {
  .hdx-contact-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .hdx-contact-cards-grid {
    grid-template-columns: 1fr;
  }
}

.hdx-contact-channel-card {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: transform var(--hdx-transition-base), border-color var(--hdx-transition-base);
}

.hdx-contact-channel-card:hover {
  transform: translateY(-2px);
  border-color: var(--hdx-border-hover);
}

.hdx-contact-channel-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hdx-contact-channel-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--hdx-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.hdx-contact-channel-icon.ch-support {
  background: rgba(229, 9, 20, 0.12);
  color: var(--hdx-accent);
  border: 1px solid rgba(229, 9, 20, 0.25);
}

.hdx-contact-channel-icon.ch-dmca {
  background: rgba(234, 179, 8, 0.12);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.25);
}

.hdx-contact-channel-icon.ch-ads {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.hdx-contact-channel-icon.ch-time {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.hdx-contact-channel-head h4 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0;
}

.hdx-contact-channel-card p {
  font-size: 12.5px;
  color: var(--hdx-text-secondary);
  margin: 0;
  line-height: 1.45;
}

.hdx-contact-channel-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hdx-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--hdx-transition-fast);
}

.hdx-contact-channel-link:hover {
  color: #ff3b47;
}

/* 2-Column Contact Layout */
.hdx-contact-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 28px;
  margin-bottom: 40px;
}

@media (max-width: 991px) {
  .hdx-contact-grid {
    grid-template-columns: 1fr;
  }
}

.hdx-contact-form-card {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-lg);
  padding: 30px;
  box-shadow: var(--hdx-shadow-card);
}

@media (max-width: 600px) {
  .hdx-contact-form-card {
    padding: 20px 18px;
  }
}

.hdx-contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hdx-contact-side-card {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-lg);
  padding: 24px;
  box-shadow: var(--hdx-shadow-card);
}

.hdx-contact-side-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hdx-contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hdx-contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--hdx-radius-sm);
  background: var(--hdx-input-bg);
  border: 1px solid var(--hdx-border);
}

.hdx-contact-info-item i {
  color: var(--hdx-accent);
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

.hdx-contact-info-text strong {
  display: block;
  font-size: 12px;
  color: var(--hdx-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.hdx-contact-info-text span, .hdx-contact-info-text a {
  font-size: 13.5px;
  color: var(--hdx-text-primary);
  font-weight: 600;
  text-decoration: none;
  word-break: break-all;
}

.hdx-contact-info-text a:hover {
  color: var(--hdx-accent);
}

/* Captcha Block */
.hdx-captcha-box {
  background: var(--hdx-input-bg);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .hdx-captcha-box {
    flex-direction: column;
    text-align: center;
  }
}

.hdx-captcha-img-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hdx-captcha-img {
  border-radius: var(--hdx-radius-xs);
  border: 1px solid var(--hdx-border-hover);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hdx-captcha-input {
  flex: 1;
  min-width: 150px;
  height: 46px;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-xs);
  color: var(--hdx-gold);
  font-family: monospace;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 4px;
  text-align: center;
  text-transform: uppercase;
  padding: 0 14px;
  transition: all var(--hdx-transition-fast);
}

.hdx-captcha-input:focus {
  outline: none;
  border-color: var(--hdx-accent);
  box-shadow: 0 0 0 3px var(--hdx-accent-subtle);
}

/* ==========================================================================
   25. SEARCH RESULTS & REFINE SEARCH HUB
   ========================================================================== */
.hdx-search-hero {
  position: relative;
  background: linear-gradient(135deg, rgba(229, 41, 85, 0.08) 0%, var(--hdx-bg-card) 100%);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-lg);
  padding: 28px 32px;
  margin-top: 24px;
  margin-bottom: 28px;
  box-shadow: var(--hdx-shadow-card);
  overflow: hidden;
}

.hdx-search-hero::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(229, 41, 85, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.hdx-search-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.hdx-search-hero .hdx-page-title {
  color: var(--hdx-text-primary);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hdx-search-hero .hdx-page-title span.highlight,
.hdx-search-hero .highlight {
  color: var(--hdx-accent);
}

.hdx-search-query-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hdx-accent-subtle);
  border: 1px solid rgba(229, 41, 85, 0.3);
  color: var(--hdx-accent);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--hdx-radius-full);
}

.hdx-search-result-count {
  font-size: 14px;
  color: var(--hdx-text-secondary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hdx-search-refine-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.hdx-search-refine-form {
  position: relative;
  flex: 1;
  max-width: 600px;
  min-width: 260px;
}

.hdx-search-refine-input {
  width: 100%;
  height: 48px;
  padding: 0 54px 0 52px !important;
  font-size: 15px;
  background: var(--hdx-bg-surface);
  border: 1px solid var(--hdx-border-hover);
  border-radius: var(--hdx-radius-md);
  color: var(--hdx-text-primary);
  outline: none;
  box-sizing: border-box;
  text-overflow: ellipsis;
  box-shadow: var(--hdx-shadow-sm);
  transition: all var(--hdx-transition-fast);
}

.hdx-search-refine-input::placeholder {
  color: var(--hdx-text-muted);
}

.hdx-search-refine-input:focus {
  border-color: var(--hdx-accent);
  box-shadow: 0 0 0 3px var(--hdx-accent-subtle);
}

.hdx-search-refine-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hdx-text-muted);
  font-size: 16px;
  pointer-events: none;
}

.hdx-search-refine-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: var(--hdx-accent);
  color: #ffffff;
  border: none;
  border-radius: var(--hdx-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all var(--hdx-transition-fast);
}

.hdx-search-refine-btn:hover {
  background: var(--hdx-accent-hover);
  transform: translateY(-50%) scale(1.04);
}

.hdx-search-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.hdx-search-chip-label {
  font-size: 12.5px;
  color: var(--hdx-text-muted);
  font-weight: 600;
  margin-right: 4px;
}

.hdx-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--hdx-text-secondary);
  background: var(--hdx-tag-bg);
  border: 1px solid var(--hdx-border);
  padding: 5px 12px;
  border-radius: var(--hdx-radius-full);
  text-decoration: none;
  transition: all var(--hdx-transition-fast);
}

.hdx-search-chip:hover {
  color: var(--hdx-text-primary);
  background: var(--hdx-border-hover);
  border-color: var(--hdx-border-active);
}

/* Light Theme Overrides for Search Results Hero */
html[data-theme="light"] .hdx-search-hero,
body.light .hdx-search-hero {
  background: linear-gradient(135deg, rgba(229, 41, 85, 0.04) 0%, #ffffff 55%, #f8fafc 100%) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .hdx-search-hero::before,
body.light .hdx-search-hero::before {
  background: radial-gradient(circle, rgba(229, 41, 85, 0.06) 0%, transparent 70%) !important;
}

html[data-theme="light"] .hdx-search-hero .hdx-page-title,
body.light .hdx-search-hero .hdx-page-title {
  color: #0f172a !important;
}

html[data-theme="light"] .hdx-search-query-badge,
body.light .hdx-search-query-badge {
  background: rgba(229, 41, 85, 0.08) !important;
  border-color: rgba(229, 41, 85, 0.22) !important;
  color: var(--hdx-accent) !important;
}

html[data-theme="light"] .hdx-search-result-count,
body.light .hdx-search-result-count {
  color: #64748b !important;
}

html[data-theme="light"] .hdx-search-refine-input,
body.light .hdx-search-refine-input {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .hdx-search-refine-input::placeholder,
body.light .hdx-search-refine-input::placeholder {
  color: #94a3b8 !important;
}

html[data-theme="light"] .hdx-search-refine-input:focus,
body.light .hdx-search-refine-input:focus {
  background: #ffffff !important;
  border-color: var(--hdx-accent) !important;
  box-shadow: 0 0 0 3px rgba(229, 41, 85, 0.15) !important;
}

html[data-theme="light"] .hdx-search-refine-icon,
body.light .hdx-search-refine-icon {
  color: #94a3b8 !important;
}

html[data-theme="light"] .hdx-search-refine-btn,
body.light .hdx-search-refine-btn {
  background: var(--hdx-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(229, 41, 85, 0.35) !important;
}

html[data-theme="light"] .hdx-search-refine-btn:hover,
body.light .hdx-search-refine-btn:hover {
  background: var(--hdx-accent-hover) !important;
}

html[data-theme="light"] .hdx-search-chip-label,
body.light .hdx-search-chip-label {
  color: #64748b !important;
}

html[data-theme="light"] .hdx-search-chip,
body.light .hdx-search-chip {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

html[data-theme="light"] .hdx-search-chip:hover,
body.light .hdx-search-chip:hover,
html[data-theme="light"] .hdx-search-chip.active,
body.light .hdx-search-chip.active {
  background: #ffffff !important;
  border-color: rgba(229, 41, 85, 0.45) !important;
  color: var(--hdx-accent) !important;
  box-shadow: 0 2px 8px rgba(229, 41, 85, 0.12) !important;
}

html[data-theme="light"] .hdx-search-chip i,
body.light .hdx-search-chip i {
  color: var(--hdx-accent) !important;
}

/* Mobile Responsive Optimization for Search Hero */
@media (max-width: 767px) {
  .hdx-search-hero {
    padding: 18px 14px;
    margin-top: 12px;
    margin-bottom: 20px;
    border-radius: var(--hdx-radius-md);
  }
  .hdx-search-hero .hdx-page-title {
    font-size: 19px !important;
    line-height: 1.3;
  }
  .hdx-search-header-top {
    gap: 10px;
    margin-bottom: 14px;
  }
  .hdx-search-query-badge {
    font-size: 12px;
    padding: 4px 10px;
  }
  .hdx-search-result-count {
    font-size: 13px;
  }
  .hdx-search-refine-wrap {
    margin-top: 12px;
    gap: 10px;
  }
  .hdx-search-refine-form {
    max-width: 100%;
    min-width: 100%;
  }
  .hdx-search-refine-input {
    height: 44px;
    font-size: 14px;
    padding: 0 46px 0 42px !important;
  }
  .hdx-search-refine-icon {
    left: 14px;
    font-size: 14px;
  }
  .hdx-search-refine-btn {
    width: 32px;
    height: 32px;
    right: 6px;
    font-size: 12px;
  }
  .hdx-search-chips {
    margin-top: 12px;
    gap: 6px;
  }
  .hdx-search-chip-label {
    display: inline-block;
    font-size: 12px;
    margin-right: 2px;
  }
  .hdx-search-chip {
    font-size: 12px;
    padding: 5px 11px;
  }
}

/* ==========================================================================
   26. AUTHENTICATION SUITE (LOGIN, REGISTER, FORGOT PASSWORD)
   ========================================================================== */
.hdx-auth-wrapper {
  max-width: 1040px;
  margin: 0 auto;
  padding-top: 28px;
  padding-bottom: 50px;
  width: 100%;
}

.hdx-auth-wrapper .hdx-breadcrumbs {
  margin-top: 0;
  margin-bottom: 20px;
}

.hdx-auth-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: start;
  margin-top: 0;
  margin-bottom: 0;
}

.hdx-auth-card {
  position: relative;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-lg);
  padding: 38px 36px;
  box-shadow: var(--hdx-shadow-md);
  border-top: 3px solid var(--hdx-accent);
}

.hdx-auth-header {
  margin-bottom: 28px;
}

.hdx-auth-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--hdx-radius-md);
  background: var(--hdx-accent-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--hdx-accent);
  margin-bottom: 16px;
}

.hdx-auth-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  margin: 0 0 8px 0;
  letter-spacing: -0.3px;
}

.hdx-auth-subtitle {
  font-size: 14px;
  color: var(--hdx-text-secondary);
  line-height: 1.55;
  margin: 0;
}

.hdx-auth-form {
  display: block;
}

.hdx-auth-group {
  margin-bottom: 22px;
}

.hdx-auth-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hdx-text-secondary);
  margin-bottom: 8px;
}

.hdx-auth-label span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hdx-auth-label i {
  color: var(--hdx-accent);
  font-size: 13px;
}

.hdx-auth-forgot-link {
  font-size: 13px;
  color: var(--hdx-accent);
  text-decoration: none;
  font-weight: 600;
  transition: all var(--hdx-transition-fast);
}

.hdx-auth-forgot-link:hover {
  color: var(--hdx-accent-hover);
  text-decoration: underline;
}

.hdx-auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.hdx-auth-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hdx-text-muted);
  font-size: 15px;
  pointer-events: none;
  z-index: 2;
  transition: color var(--hdx-transition-fast);
}

.hdx-auth-input-wrap:focus-within .hdx-auth-input-icon {
  color: var(--hdx-accent);
}

.hdx-auth-input {
  width: 100%;
  height: 48px;
  padding: 0 46px 0 48px !important;
  font-size: 14.5px;
  color: var(--hdx-text-primary);
  background: var(--hdx-bg-input);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--hdx-transition-fast), background-color var(--hdx-transition-fast), box-shadow var(--hdx-transition-fast);
}

.hdx-auth-input:focus {
  border-color: var(--hdx-accent);
  background: var(--hdx-bg-surface);
  box-shadow: 0 0 0 3px var(--hdx-accent-subtle);
}

.hdx-auth-input::placeholder {
  color: var(--hdx-text-muted);
}

.hdx-auth-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hdx-text-muted);
  cursor: pointer;
  border-radius: var(--hdx-radius-sm);
  z-index: 2;
  transition: color var(--hdx-transition-fast);
}

.hdx-auth-pw-toggle:hover {
  color: var(--hdx-text-primary);
}

.hdx-auth-remember-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.hdx-auth-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--hdx-text-secondary);
  cursor: pointer;
  user-select: none;
}

.hdx-auth-checkbox-label input[type="checkbox"] {
  accent-color: var(--hdx-accent);
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.hdx-auth-submit {
  width: 100%;
  height: 50px;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--hdx-radius-md);
  letter-spacing: 0.2px;
}

.hdx-auth-footer {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hdx-border);
  text-align: center;
  font-size: 14px;
  color: var(--hdx-text-secondary);
}

.hdx-auth-footer a {
  color: var(--hdx-accent);
  font-weight: 700;
  text-decoration: none;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--hdx-transition-fast);
}

.hdx-auth-footer a:hover {
  color: var(--hdx-accent-hover);
  text-decoration: underline;
}

/* Side Panel */
.hdx-auth-side-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hdx-auth-benefits-card {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-lg);
  padding: 28px 24px;
  box-shadow: var(--hdx-shadow-sm);
}

.hdx-auth-side-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0 0 18px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hdx-auth-side-title i {
  color: var(--hdx-gold);
}

.hdx-auth-benefit-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hdx-auth-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.hdx-auth-benefit-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--hdx-radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.hdx-auth-benefit-icon.b-uhd {
  background: rgba(229, 41, 85, 0.12);
  color: var(--hdx-accent);
}

.hdx-auth-benefit-icon.b-sub {
  background: rgba(212, 160, 66, 0.12);
  color: var(--hdx-gold);
}

.hdx-auth-benefit-icon.b-speed {
  background: rgba(16, 185, 129, 0.12);
  color: var(--hdx-success);
}

.hdx-auth-benefit-icon.b-privacy {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}

.hdx-auth-benefit-text h5 {
  font-size: 14px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0 0 3px 0;
}

.hdx-auth-benefit-text p {
  font-size: 12.5px;
  color: var(--hdx-text-secondary);
  line-height: 1.45;
  margin: 0;
}

.hdx-auth-warning-card {
  background: rgba(212, 160, 66, 0.06);
  border: 1px solid rgba(212, 160, 66, 0.22);
  border-radius: var(--hdx-radius-md);
  padding: 18px 20px;
}

.hdx-auth-warning-card h5 {
  font-size: 14px;
  font-weight: 700;
  color: var(--hdx-gold-text);
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hdx-auth-warning-card p {
  font-size: 12.5px;
  color: var(--hdx-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.hdx-auth-help-card {
  background: var(--hdx-bg-surface);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hdx-auth-help-text {
  font-size: 13px;
  color: var(--hdx-text-secondary);
}

.hdx-auth-help-text strong {
  color: var(--hdx-text-primary);
  display: block;
}

@media (max-width: 991px) {
  .hdx-auth-wrapper {
    max-width: 100%;
    padding-top: 18px;
    padding-bottom: 36px;
  }
  .hdx-auth-wrapper .hdx-breadcrumbs {
    margin-bottom: 14px;
  }
  .hdx-auth-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 0;
  }
  .hdx-auth-card {
    padding: 28px 20px;
  }
}

/* Light Theme Contrast Enhancements for Auth Suite */
html[data-theme="light"] .hdx-auth-warning-card,
body.light .hdx-auth-warning-card {
  background: rgba(212, 160, 66, 0.08);
  border-color: rgba(212, 160, 66, 0.35);
}

html[data-theme="light"] .hdx-auth-warning-card h5,
body.light .hdx-auth-warning-card h5,
html[data-theme="light"] .hdx-auth-badge-18,
body.light .hdx-auth-badge-18 {
  color: #b45309 !important;
}

html[data-theme="light"] .hdx-auth-benefit-icon.b-privacy,
body.light .hdx-auth-benefit-icon.b-privacy {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
}

/* jQuery UI Datepicker Dark Theme Integration */
.ui-datepicker {
  background: var(--hdx-bg-card) !important;
  border: 1px solid var(--hdx-border) !important;
  border-radius: var(--hdx-radius-md) !important;
  padding: 14px !important;
  box-shadow: var(--hdx-shadow-lg) !important;
  color: var(--hdx-text-primary) !important;
  font-family: var(--hdx-font-sans) !important;
  z-index: 99999 !important;
}

.ui-datepicker .ui-datepicker-header {
  background: var(--hdx-bg-surface) !important;
  border: 1px solid var(--hdx-border) !important;
  border-radius: var(--hdx-radius-sm) !important;
  color: var(--hdx-text-primary) !important;
  padding: 8px !important;
}

.ui-datepicker .ui-datepicker-title select {
  background: var(--hdx-bg-input) !important;
  color: var(--hdx-text-primary) !important;
  border: 1px solid var(--hdx-border) !important;
  border-radius: var(--hdx-radius-xs) !important;
  padding: 4px 6px !important;
  margin: 0 4px !important;
  font-size: 13px !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  cursor: pointer !important;
  border-radius: var(--hdx-radius-xs) !important;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  background: var(--hdx-accent-subtle) !important;
  border-color: transparent !important;
}

.ui-datepicker table {
  margin-top: 10px !important;
}

.ui-datepicker th {
  color: var(--hdx-text-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 4px !important;
}

.ui-datepicker td {
  padding: 2px !important;
}

.ui-datepicker td a,
.ui-datepicker td span {
  display: block !important;
  text-align: center !important;
  padding: 7px 4px !important;
  border-radius: var(--hdx-radius-xs) !important;
  font-size: 13px !important;
  color: var(--hdx-text-primary) !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
}

.ui-datepicker td a:hover {
  background: var(--hdx-tag-bg) !important;
  color: var(--hdx-accent) !important;
}

.ui-datepicker td.ui-datepicker-current-day a {
  background: var(--hdx-accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   27. WATCH HISTORY & RESUME PLAYBACK SUITE
   ========================================================================== */
.hdx-history-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-lg);
  padding: 22px 28px;
  margin-top: 20px;
  margin-bottom: 28px;
  box-shadow: var(--hdx-shadow-sm);
}

.hdx-history-title-box {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hdx-history-header-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--hdx-radius-md);
  background: var(--hdx-accent-subtle);
  color: var(--hdx-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.hdx-history-title-box h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hdx-history-count-badge {
  font-size: 12px;
  font-weight: 700;
  background: var(--hdx-tag-bg);
  color: var(--hdx-accent);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-full);
  padding: 2px 10px;
}

.hdx-history-title-box p {
  font-size: 13.5px;
  color: var(--hdx-text-secondary);
  margin: 0;
}

.hdx-history-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hdx-history-search-wrap {
  position: relative;
  min-width: 220px;
}

.hdx-history-search-input {
  width: 100%;
  height: 40px;
  background: var(--hdx-bg-surface);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  padding: 0 14px 0 38px;
  color: var(--hdx-text-primary);
  font-size: 13.5px;
  outline: none;
  transition: all var(--hdx-transition-fast);
}

.hdx-history-search-input:focus {
  border-color: var(--hdx-accent);
  box-shadow: 0 0 0 2px var(--hdx-accent-subtle);
}

.hdx-history-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hdx-text-muted);
  font-size: 13px;
  pointer-events: none;
}

.hdx-history-clear-btn {
  height: 40px;
  padding: 0 16px;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--hdx-radius-md);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--hdx-transition-fast);
}

.hdx-history-clear-btn:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
  box-shadow: 0 3px 12px rgba(239, 68, 68, 0.35);
}

/* History Cards Grid */
.hdx-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
  margin-bottom: 48px;
}

.hdx-history-card {
  position: relative;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  overflow: hidden;
  transition: all var(--hdx-transition-base);
  display: flex;
  flex-direction: column;
}

.hdx-history-card:hover {
  border-color: var(--hdx-border-hover);
  background: var(--hdx-bg-card-hover);
  transform: translateY(-3px);
  box-shadow: var(--hdx-shadow-md);
}

.hdx-history-thumb-box {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.hdx-history-thumb-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.hdx-history-card:hover .hdx-history-thumb-box img {
  transform: scale(1.05);
}

/* History Progress Bar (YouTube/Netflix style) */
.hdx-history-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: rgba(0, 0, 0, 0.65);
  z-index: 3;
}

.hdx-history-progress-fill {
  height: 100%;
  background: var(--hdx-accent);
  box-shadow: 0 0 8px rgba(229, 41, 85, 0.8);
  border-radius: 0 2px 2px 0;
  transition: width 0.3s ease;
}

/* Remove item cross button */
.hdx-history-remove-item {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  z-index: 4;
  opacity: 0;
  transform: scale(0.85);
  transition: all var(--hdx-transition-fast);
}

.hdx-history-card:hover .hdx-history-remove-item {
  opacity: 1;
  transform: scale(1);
}

.hdx-history-remove-item:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
  transform: scale(1.1);
}

.hdx-history-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hdx-history-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0 0 8px 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hdx-history-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--hdx-transition-fast);
}

.hdx-history-card-title a:hover {
  color: var(--hdx-accent);
}

.hdx-history-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--hdx-text-muted);
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--hdx-border);
}

.hdx-history-time-badge {
  color: var(--hdx-accent);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Resume Toast on Video Player */
.hdx-resume-toast {
  position: absolute;
  bottom: 24px;
  left: 20px;
  background: rgba(12, 13, 18, 0.94);
  border: 1px solid rgba(229, 41, 85, 0.4);
  border-left: 4px solid var(--hdx-accent);
  border-radius: var(--hdx-radius-md);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: hdxSlideUp 0.35s ease;
}

.hdx-resume-toast-text {
  font-size: 13.5px;
  color: #fff;
  font-weight: 500;
}

.hdx-resume-toast-text strong {
  color: var(--hdx-accent);
  font-weight: 700;
}

.hdx-resume-restart-btn {
  background: var(--hdx-accent-subtle);
  border: 1px solid var(--hdx-accent);
  color: var(--hdx-accent);
  padding: 5px 12px;
  border-radius: var(--hdx-radius-xs);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--hdx-transition-fast);
  white-space: nowrap;
}

.hdx-resume-restart-btn:hover {
  background: var(--hdx-accent);
  color: #fff;
}

.hdx-resume-toast-close {
  background: transparent;
  border: none;
  color: var(--hdx-text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
  line-height: 1;
  transition: color var(--hdx-transition-fast);
}

.hdx-resume-toast-close:hover {
  color: #fff;
}

@keyframes hdxSlideUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767px) {
  .hdx-history-header-bar {
    padding: 18px 16px;
    flex-direction: column;
    align-items: stretch;
  }
  .hdx-history-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .hdx-history-clear-btn {
    justify-content: center;
  }
  .hdx-history-remove-item {
    opacity: 1;
    transform: scale(1);
  }
  .hdx-resume-toast {
    left: 10px;
    right: 10px;
    bottom: 12px;
    padding: 10px 12px;
    font-size: 12.5px;
  }
}

/* ==========================================================================
   28. DAHA SONRA İZLE (WATCH LATER) SUITE
   ========================================================================== */

/* Player Watch Later Action Button */
.hdx-watch-btn.add-watch-later {
  transition: all var(--hdx-transition-fast);
}

.hdx-watch-btn.add-watch-later.active {
  background: var(--hdx-accent) !important;
  color: #fff !important;
  border-color: var(--hdx-accent) !important;
  box-shadow: 0 4px 14px rgba(229, 41, 85, 0.4);
}

.hdx-watch-btn.add-watch-later.active i {
  color: #fff !important;
}

/* Watch Later Header Bar */
.hdx-watch-later-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 28px;
  background: var(--hdx-bg-surface);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-lg);
  margin-bottom: 28px;
  box-shadow: var(--hdx-shadow-sm);
}

.hdx-watch-later-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hdx-watch-later-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hdx-watch-later-count-badge {
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--hdx-radius-full);
  background: var(--hdx-accent-subtle);
  color: var(--hdx-accent);
  border: 1px solid rgba(229, 41, 85, 0.25);
}

.hdx-watch-later-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hdx-watch-later-search {
  position: relative;
  min-width: 220px;
}

.hdx-watch-later-search input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 38px;
  font-size: 13.5px;
  background: var(--hdx-bg-input);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  color: var(--hdx-text-primary);
  outline: none;
  transition: all var(--hdx-transition-fast);
}

.hdx-watch-later-search input:focus {
  border-color: var(--hdx-accent);
  box-shadow: 0 0 0 3px var(--hdx-accent-subtle);
}

.hdx-watch-later-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hdx-text-muted);
  pointer-events: none;
  font-size: 14px;
}

.hdx-watch-later-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  background: var(--hdx-tag-bg);
  color: var(--hdx-text-secondary);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  cursor: pointer;
  transition: all var(--hdx-transition-fast);
}

.hdx-watch-later-clear-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.35);
}

/* Watch Later Card Grid */
.hdx-watch-later-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

@media (max-width: 1200px) {
  .hdx-watch-later-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .hdx-watch-later-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .hdx-watch-later-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Watch Later Card */
.hdx-watch-later-card {
  display: flex;
  flex-direction: column;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-md);
  overflow: hidden;
  box-shadow: var(--hdx-shadow-card);
  transition: transform var(--hdx-transition-base), box-shadow var(--hdx-transition-base), border-color var(--hdx-transition-base);
  position: relative;
}

.hdx-watch-later-card:hover {
  transform: translateY(-4px);
  border-color: var(--hdx-border-hover);
  box-shadow: var(--hdx-shadow-card-hover);
}

.hdx-watch-later-thumb-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--hdx-bg-elevated);
}

.hdx-watch-later-thumb-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.hdx-watch-later-card:hover .hdx-watch-later-thumb-box img {
  transform: scale(1.05);
}

/* Remove Button from Card */
.hdx-watch-later-remove-item {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: all var(--hdx-transition-fast);
  backdrop-filter: blur(4px);
}

.hdx-watch-later-remove-item:hover {
  background: var(--hdx-accent);
  color: #fff;
  border-color: var(--hdx-accent);
  transform: scale(1.1);
}

.hdx-watch-later-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.hdx-watch-later-card-title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--hdx-text-primary);
  margin: 0 0 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 38px;
}

.hdx-watch-later-card-title a {
  color: inherit;
  transition: color var(--hdx-transition-fast);
}

.hdx-watch-later-card:hover .hdx-watch-later-card-title a {
  color: var(--hdx-accent);
}

.hdx-watch-later-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--hdx-border);
  font-size: 12px;
  color: var(--hdx-text-muted);
}

/* Floating Watch Later Toast Notification */
.hdx-watch-later-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(18, 19, 26, 0.95);
  border: 1px solid var(--hdx-accent);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--hdx-radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(229, 41, 85, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  z-index: 10000;
  animation: hdxSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
}

.hdx-watch-later-toast i {
  color: var(--hdx-accent);
  font-size: 16px;
}

@media (max-width: 767px) {
  .hdx-watch-later-header-bar {
    padding: 18px 16px;
    flex-direction: column;
    align-items: stretch;
  }
  .hdx-watch-later-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .hdx-watch-later-clear-btn {
    justify-content: center;
  }
  .hdx-watch-later-toast {
    bottom: 74px;
    right: 12px;
    left: 12px;
    justify-content: center;
  }
}

/* ==========================================================================
   HDX LIVE PREDICTIVE SEARCH AUTOCOMPLETE
   ========================================================================== */
.hdx-search-input-wrap {
  position: relative;
}

/* Spinner inside input when searching */
.hdx-search-spinner {
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--hdx-accent);
  border-radius: 50%;
  animation: hdxSpin 0.6s linear infinite;
  display: none;
  z-index: 3;
}

.hdx-search-input-wrap.is-loading .hdx-search-spinner {
  display: block;
}

@keyframes hdxSpin {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* Dropdown Container */
.hdx-search-autocomplete {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  min-width: 400px;
  max-width: 520px;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-lg);
  box-shadow: 0 18px 48px -6px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 10080;
  overflow: hidden;
  display: none;
  animation: hdxDropdownFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hdxDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Entities Chips Row (Stars, Categories, Channels) */
.hdx-search-chips-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--hdx-border);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.hdx-search-chips-row::-webkit-scrollbar {
  display: none;
}

.hdx-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--hdx-radius-full);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--hdx-text-secondary);
  background: var(--hdx-tag-bg);
  border: 1px solid var(--hdx-border);
  text-decoration: none !important;
  white-space: nowrap;
  transition: all var(--hdx-transition-fast);
  cursor: pointer;
}

.hdx-search-chip:hover,
.hdx-search-chip.active {
  background: var(--hdx-tag-hover);
  color: #ffffff;
  border-color: var(--hdx-accent);
  box-shadow: 0 0 8px var(--hdx-accent-subtle);
}

.hdx-search-chip-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}

.hdx-search-chip i {
  font-size: 11px;
  color: var(--hdx-accent);
}

/* Results List */
.hdx-search-results-list {
  list-style: none;
  padding: 4px 0;
  margin: 0;
  max-height: 400px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hdx-search-results-list::-webkit-scrollbar {
  width: 5px;
}
.hdx-search-results-list::-webkit-scrollbar-thumb {
  background: var(--hdx-border);
  border-radius: 3px;
}

/* Single Result Item */
.hdx-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  text-decoration: none !important;
  color: inherit;
  transition: background var(--hdx-transition-fast), border-left-color var(--hdx-transition-fast);
  cursor: pointer;
  border-left: 3px solid transparent;
}

.hdx-search-item:hover,
.hdx-search-item.active {
  background: var(--hdx-bg-surface);
  border-left-color: var(--hdx-accent);
}

/* Item Thumbnail */
.hdx-search-item-thumb {
  position: relative;
  width: 82px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--hdx-radius-xs);
  overflow: hidden;
  background: #000000;
}

.hdx-search-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.hdx-search-item:hover .hdx-search-item-thumb img,
.hdx-search-item.active .hdx-search-item-thumb img {
  transform: scale(1.05);
}

.hdx-search-item-duration {
  position: absolute;
  right: 3px;
  bottom: 3px;
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  font-family: monospace;
  letter-spacing: 0.3px;
}

/* Item Info */
.hdx-search-item-info {
  flex: 1;
  min-width: 0;
}

.hdx-search-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--hdx-text-primary);
  margin: 0 0 3px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

.hdx-search-item-title mark {
  background: transparent;
  color: var(--hdx-accent);
  font-weight: 700;
  padding: 0;
}

.hdx-search-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--hdx-text-muted);
}

.hdx-search-item-meta i {
  font-size: 10.5px;
}

.hdx-search-vip-badge {
  background: rgba(212, 160, 66, 0.16);
  color: var(--hdx-gold);
  border: 1px solid rgba(212, 160, 66, 0.35);
  font-size: 9.5px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 3px;
}

/* Footer Action Bar */
.hdx-search-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: var(--hdx-bg-elevated);
  border-top: 1px solid var(--hdx-border);
  font-size: 12px;
}

.hdx-search-view-all {
  color: var(--hdx-accent);
  font-weight: 600;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.15s ease;
  cursor: pointer;
}

.hdx-search-view-all:hover,
.hdx-search-view-all.active {
  color: var(--hdx-accent-hover);
  gap: 8px;
}

.hdx-search-hints {
  color: var(--hdx-text-muted);
  font-size: 10.5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Empty State */
.hdx-search-empty {
  padding: 26px 16px;
  text-align: center;
  color: var(--hdx-text-muted);
  font-size: 13px;
}

.hdx-search-empty i {
  font-size: 24px;
  margin-bottom: 8px;
  display: block;
  opacity: 0.5;
}

/* Mobile search dropdown positioning */
@media (max-width: 991px) {
  .hdx-search-autocomplete {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--hdx-radius-md) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
    box-sizing: border-box !important;
    z-index: 10080 !important;
  }
  .hdx-search-hints {
    display: none;
  }
  .hdx-search-item {
    padding: 8px 12px;
    gap: 10px;
  }
  .hdx-search-star-avatar-wrap,
  .hdx-search-channel-avatar-wrap {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .hdx-search-item-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 2px;
  }
  .hdx-search-item-meta {
    font-size: 11px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .hdx-search-footer {
    padding: 9px 12px;
  }
  .hdx-search-view-all {
    font-size: 12px;
    font-weight: 700;
  }
}

/* Star & Channel Autocomplete Items */
.hdx-search-star-avatar-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--hdx-bg-elevated);
  border: 1.5px solid var(--hdx-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hdx-search-star-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hdx-search-channel-avatar-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--hdx-radius-xs);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--hdx-bg-elevated);
  border: 1.5px solid var(--hdx-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hdx-search-channel-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hdx-search-star-icon-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hdx-accent);
  font-size: 16px;
}

/* ==========================================================================
   HDX CONTENT & TRANSLATION REQUESTS (TALEPLER)
   ========================================================================== */
.hdx-requests-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-lg);
  padding: 28px 32px;
  margin-bottom: 22px;
  box-shadow: var(--hdx-shadow-sm);
  position: relative;
  overflow: hidden;
}

.hdx-requests-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--hdx-accent) 0%, #3b82f6 50%, var(--hdx-gold) 100%);
}

.hdx-requests-hero-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.hdx-requests-hero-icon {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: rgba(234, 44, 90, 0.12);
  border: 1px solid rgba(234, 44, 90, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--hdx-accent);
  flex-shrink: 0;
}

.hdx-requests-hero-meta h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

.hdx-requests-hero-meta p {
  font-size: 13.5px;
  color: var(--hdx-text-secondary);
  margin: 0;
  line-height: 1.55;
  max-width: 680px;
}

.hdx-requests-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

@media (max-width: 991px) {
  .hdx-requests-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  .hdx-requests-hero-actions {
    width: 100%;
    margin-top: 10px;
  }
  .hdx-requests-hero-actions .hdx-btn {
    flex: 1;
    text-align: center;
    justify-content: center;
  }
}

/* Unified Navigation Tabs */
.hdx-requests-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--hdx-border);
  padding-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hdx-requests-tabs::-webkit-scrollbar {
  display: none;
}

.hdx-requests-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hdx-text-secondary);
  border-radius: var(--hdx-radius-md);
  text-decoration: none !important;
  transition: all 0.2s ease;
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
}

.hdx-requests-tab:hover {
  color: var(--hdx-text-primary);
  background: var(--hdx-bg-elevated);
}

.hdx-requests-tab.active {
  color: #fff;
  background: var(--hdx-accent);
  border-color: var(--hdx-accent);
  box-shadow: 0 4px 14px rgba(234, 44, 90, 0.35);
}

.hdx-requests-tab .badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
}

/* Informative Benefit Cards */
.hdx-requests-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 26px;
}

@media (max-width: 991px) {
  .hdx-requests-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .hdx-requests-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

.hdx-requests-stat-card {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--hdx-shadow-sm);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.hdx-requests-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(234, 44, 90, 0.4);
}

.hdx-requests-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.hdx-requests-stat-icon.icon-film {
  background: rgba(234, 44, 90, 0.12);
  color: var(--hdx-accent);
}

.hdx-requests-stat-icon.icon-price {
  background: rgba(245, 158, 11, 0.12);
  color: var(--hdx-gold);
}

.hdx-requests-stat-icon.icon-pay {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.hdx-requests-stat-icon.icon-time {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.hdx-requests-stat-info h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0 0 3px 0;
}

.hdx-requests-stat-info p {
  font-size: 12px;
  color: var(--hdx-text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* Modern Request Card */
.hdx-request-card {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-lg);
  box-shadow: var(--hdx-shadow-sm);
  margin-bottom: 24px;
  overflow: hidden;
}

.hdx-request-card-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--hdx-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--hdx-bg-elevated);
}

.hdx-request-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hdx-request-card-title i {
  color: var(--hdx-accent);
}

.hdx-request-card-body {
  padding: 24px;
}

/* Guideline Box */
.hdx-request-guide-box {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-left: 4px solid #3b82f6;
  border-radius: var(--hdx-radius-md);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.hdx-request-guide-title {
  font-size: 14px;
  font-weight: 700;
  color: #60a5fa;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hdx-request-guide-box p {
  font-size: 13px;
  color: var(--hdx-text-secondary);
  margin: 0 0 8px 0;
}

.hdx-request-guide-box ul {
  margin: 0;
  padding-left: 18px;
  color: var(--hdx-text-primary);
  font-size: 12.5px;
}

.hdx-request-guide-box ul li {
  margin-bottom: 4px;
}

/* Textarea & Input */
.hdx-request-textarea {
  width: 100%;
  background: var(--hdx-bg-elevated);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  color: var(--hdx-text-primary);
  font-size: 14px;
  padding: 14px 16px;
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
  transition: all 0.2s ease;
  outline: none;
  font-family: inherit;
}

.hdx-request-textarea:focus {
  border-color: var(--hdx-accent);
  box-shadow: 0 0 0 3px rgba(234, 44, 90, 0.15);
  background: var(--hdx-bg-card);
}

.hdx-request-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

@media (max-width: 600px) {
  .hdx-request-form-footer {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
}

/* Modern Requests Table */
.hdx-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Modern Requests Table */
.hdx-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.hdx-requests-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  text-align: left;
}

.hdx-requests-table th {
  background: var(--hdx-bg-elevated);
  color: var(--hdx-text-secondary);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hdx-border);
  white-space: nowrap;
}

.hdx-requests-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--hdx-border);
  color: var(--hdx-text-primary);
  vertical-align: middle;
}

.hdx-requests-table tbody tr:hover td {
  background: var(--hdx-bg-elevated);
}

.hdx-requests-table tbody tr:last-child td {
  border-bottom: none;
}

/* Light Theme for Table */
html[data-theme="light"] .hdx-requests-table th,
body.light .hdx-requests-table th {
  background: #f8fafc;
  color: #64748b;
  border-color: #e2e8f0;
}

html[data-theme="light"] .hdx-requests-table td,
body.light .hdx-requests-table td {
  border-color: #e2e8f0;
  color: #0f172a;
}

html[data-theme="light"] .hdx-requests-table tbody tr:hover td,
body.light .hdx-requests-table tbody tr:hover td {
  background: #f1f5f9;
}

/* Light Theme for Card & Form */
html[data-theme="light"] .hdx-request-card,
body.light .hdx-request-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .hdx-request-card-header,
body.light .hdx-request-card-header {
  background: #f8fafc;
  border-color: #e2e8f0;
}

html[data-theme="light"] .hdx-request-guide-box,
body.light .hdx-request-guide-box {
  background: #eff6ff;
  border-color: #bfdbfe;
  border-left-color: #3b82f6;
}

html[data-theme="light"] .hdx-request-guide-title,
body.light .hdx-request-guide-title {
  color: #1d4ed8;
}

html[data-theme="light"] .hdx-request-guide-box p,
html[data-theme="light"] .hdx-request-guide-box ul,
body.light .hdx-request-guide-box p,
body.light .hdx-request-guide-box ul {
  color: #334155;
}

html[data-theme="light"] .hdx-request-textarea,
body.light .hdx-request-textarea {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

html[data-theme="light"] .hdx-request-textarea:focus,
body.light .hdx-request-textarea:focus {
  background: #ffffff;
  border-color: var(--hdx-accent);
}

/* Status Badges */
.hdx-req-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1.3;
}

.hdx-req-badge-done {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.hdx-req-badge-conversation {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.28);
}

.hdx-req-badge-wait-user {
  background: rgba(245, 158, 11, 0.12);
  color: var(--hdx-gold);
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.hdx-req-badge-wait-admin {
  background: rgba(217, 119, 6, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(217, 119, 6, 0.28);
}

.hdx-req-badge-cancel {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.28);
}

.hdx-req-badge-pending {
  background: rgba(147, 51, 234, 0.12);
  color: #a855f7;
  border: 1px solid rgba(147, 51, 234, 0.28);
}

.hdx-req-badge-approved {
  background: rgba(14, 165, 233, 0.12);
  color: #0ea5e9;
  border: 1px solid rgba(14, 165, 233, 0.28);
}

.hdx-req-badge-published {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.28);
}

/* Light Theme Badges */
html[data-theme="light"] .hdx-req-badge-done,
body.light .hdx-req-badge-done {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #059669;
}

html[data-theme="light"] .hdx-req-badge-conversation,
body.light .hdx-req-badge-conversation {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}

html[data-theme="light"] .hdx-req-badge-wait-user,
body.light .hdx-req-badge-wait-user {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

html[data-theme="light"] .hdx-req-badge-wait-admin,
body.light .hdx-req-badge-wait-admin {
  background: #fff7ed;
  border-color: #ffedd5;
  color: #c2410c;
}

html[data-theme="light"] .hdx-req-badge-cancel,
body.light .hdx-req-badge-cancel {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

html[data-theme="light"] .hdx-req-badge-pending,
body.light .hdx-req-badge-pending {
  background: #faf5ff;
  border-color: #e9d5ff;
  color: #7e22ce;
}

html[data-theme="light"] .hdx-req-badge-approved,
body.light .hdx-req-badge-approved {
  background: #f0f9ff;
  border-color: #bae6fd;
  color: #0284c7;
}

html[data-theme="light"] .hdx-req-badge-published,
body.light .hdx-req-badge-published {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #059669;
}

/* Requests Count Badge */
.hdx-requests-total-badge {
  background: var(--hdx-bg-elevated);
  color: var(--hdx-text-secondary);
  border: 1px solid var(--hdx-border);
  padding: 5px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

html[data-theme="light"] .hdx-requests-total-badge,
body.light .hdx-requests-total-badge {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}

/* Date Display */
.hdx-req-date-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hdx-req-date-day {
  font-weight: 700;
  color: var(--hdx-text-primary);
  font-size: 13px;
}

html[data-theme="light"] .hdx-req-date-day,
body.light .hdx-req-date-day {
  color: #0f172a;
}

.hdx-req-date-time {
  font-size: 11.5px;
  color: var(--hdx-text-secondary);
  margin-top: 2px;
}

html[data-theme="light"] .hdx-req-date-time,
body.light .hdx-req-date-time {
  color: #64748b;
}

/* ID Pill */
.hdx-req-id-pill {
  font-family: monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--hdx-text-secondary);
  background: var(--hdx-bg-elevated);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--hdx-border);
  display: inline-block;
}

html[data-theme="light"] .hdx-req-id-pill,
body.light .hdx-req-id-pill {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

/* Price styles */
.hdx-req-price-waiting {
  color: var(--hdx-text-muted);
  font-size: 13px;
  font-style: italic;
}

.hdx-req-price-free {
  color: #10b981;
  font-weight: 700;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

html[data-theme="light"] .hdx-req-price-free,
body.light .hdx-req-price-free {
  color: #059669;
}

.hdx-req-price-gold {
  color: var(--hdx-gold);
  font-size: 15px;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

html[data-theme="light"] .hdx-req-price-gold,
body.light .hdx-req-price-gold {
  color: #d97706;
  text-shadow: none;
}

/* Video assign & badges */
.hdx-req-video-assign {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hdx-req-video-link {
  color: var(--hdx-accent);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hdx-req-exclusive-badge {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.4);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

html[data-theme="light"] .hdx-req-exclusive-badge,
body.light .hdx-req-exclusive-badge {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #7c3aed;
}

.hdx-req-public-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

html[data-theme="light"] .hdx-req-public-badge,
body.light .hdx-req-public-badge {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #059669;
}

.hdx-req-content-text {
  max-width: 440px;
  word-break: break-word;
  color: var(--hdx-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

html[data-theme="light"] .hdx-req-content-text,
body.light .hdx-req-content-text {
  color: #475569;
}

/* Action buttons */
.hdx-req-actions-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hdx-btn-pay {
  background: #10b981 !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  border: none !important;
  text-decoration: none !important;
}

.hdx-btn-cancel {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  text-decoration: none !important;
}

html[data-theme="light"] .hdx-btn-cancel,
body.light .hdx-btn-cancel {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}

/* Empty State */
.hdx-req-empty-state {
  padding: 48px 20px;
  text-align: center;
}

.hdx-req-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--hdx-bg-elevated);
  border: 1px solid var(--hdx-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
  font-size: 26px;
  color: var(--hdx-text-muted);
}

.hdx-req-empty-state h4 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0 0 6px 0;
}

.hdx-req-empty-state p {
  font-size: 13.5px;
  color: var(--hdx-text-secondary);
  max-width: 480px;
  margin: 0 auto 20px auto;
  line-height: 1.5;
}

/* Request View Hero Banner */
.hdx-req-view-hero {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(5, 150, 105, 0.08) 100%);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--hdx-radius-lg);
  padding: 24px 28px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.hdx-req-view-hero-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hdx-req-view-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}

.hdx-req-view-hero h2 {
  font-size: 19px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  margin: 0 0 4px 0;
}

.hdx-req-view-hero p {
  font-size: 13.5px;
  color: var(--hdx-text-secondary);
  margin: 0;
}

/* VIP Upgrade Promotion Box */
.hdx-vip-upgrade-box {
  background: linear-gradient(135deg, rgba(234, 44, 90, 0.08) 0%, rgba(245, 158, 11, 0.08) 100%);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--hdx-radius-lg);
  padding: 28px;
  text-align: center;
  margin-bottom: 20px;
}

html[data-theme="light"] .hdx-vip-upgrade-box,
body.light .hdx-vip-upgrade-box {
  background: #fffbeb;
  border-color: #fde68a;
}

.hdx-vip-upgrade-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.15);
  color: var(--hdx-gold);
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
}

.hdx-vip-upgrade-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  margin: 0 0 8px 0;
}

.hdx-vip-upgrade-desc {
  font-size: 13.5px;
  color: var(--hdx-text-secondary);
  max-width: 540px;
  margin: 0 auto 20px auto;
  line-height: 1.5;
}

/* ==========================================================================
   HDX CONTENT & TRANSLATION REQUESTS MOBILE OPTIMIZATIONS (< 768px)
   ========================================================================== */
@media (max-width: 767px) {
  /* Hero Section */
  .hdx-requests-hero {
    flex-direction: column !important;
    padding: 16px 14px !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
    border-radius: 14px !important;
  }

  .hdx-requests-hero-left {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .hdx-requests-hero-icon {
    width: 46px !important;
    height: 46px !important;
    font-size: 20px !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
  }

  .hdx-requests-hero-meta h1 {
    font-size: 17px !important;
    line-height: 1.3 !important;
    margin: 0 0 3px 0 !important;
  }

  .hdx-requests-hero-meta p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .hdx-requests-hero-actions {
    width: 100% !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .hdx-requests-hero-actions .hdx-vip-button,
  .hdx-requests-hero-actions .hdx-btn,
  .hdx-requests-hero-actions a,
  .hdx-requests-hero-actions button {
    width: 100% !important;
    height: 42px !important;
    justify-content: center !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 13.5px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  /* Navigation Tabs */
  .hdx-requests-tabs {
    gap: 6px !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
  }

  .hdx-requests-tab {
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
  }

  /* 4-Item Benefits Grid */
  .hdx-requests-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  .hdx-requests-stat-card {
    padding: 12px 10px !important;
    gap: 8px !important;
    border-radius: 10px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .hdx-requests-stat-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
  }

  .hdx-requests-stat-info h4 {
    font-size: 12px !important;
    font-weight: 700 !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.3 !important;
  }

  .hdx-requests-stat-info p {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    color: var(--hdx-text-secondary) !important;
  }

  /* Request Card & Form */
  .hdx-request-card {
    border-radius: 14px !important;
    margin-bottom: 16px !important;
  }

  .hdx-request-card-header {
    padding: 14px 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .hdx-request-card-title {
    font-size: 15px !important;
    gap: 8px !important;
  }

  .hdx-request-card-body {
    padding: 14px !important;
  }

  .hdx-request-guide-box {
    padding: 12px 12px !important;
    border-radius: 10px !important;
    margin-bottom: 14px !important;
  }

  .hdx-request-guide-title {
    font-size: 12.5px !important;
    margin-bottom: 6px !important;
  }

  .hdx-request-guide-box p {
    font-size: 11.5px !important;
    margin-bottom: 6px !important;
  }

  .hdx-request-guide-box ul {
    padding-left: 16px !important;
    font-size: 11px !important;
  }

  .hdx-request-textarea {
    font-size: 13.5px !important;
    padding: 10px 12px !important;
    min-height: 90px !important;
    border-radius: 8px !important;
  }

  .hdx-request-form-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 12px !important;
  }

  .hdx-request-form-footer .hdx-btn {
    width: 100% !important;
    height: 44px !important;
    justify-content: center !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  /* VIP Upgrade Box */
  .hdx-vip-upgrade-box {
    padding: 20px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
  }

  .hdx-vip-upgrade-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }

  .hdx-vip-upgrade-title {
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }

  .hdx-vip-upgrade-desc {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 16px !important;
  }

  .hdx-vip-upgrade-box > div {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .hdx-vip-upgrade-box .hdx-vip-button,
  .hdx-vip-upgrade-box .hdx-btn {
    width: 100% !important;
    height: 42px !important;
    justify-content: center !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 13.5px !important;
    border-radius: 10px !important;
  }

  /* Table to Mobile Cards Transformation */
  .hdx-requests-table thead {
    display: none !important;
  }

  .hdx-requests-table,
  .hdx-requests-table tbody,
  .hdx-requests-table tr {
    display: block !important;
    width: 100% !important;
  }

  .hdx-requests-table tr {
    padding: 14px 14px !important;
    border-bottom: 2px solid var(--hdx-border) !important;
    background: var(--hdx-bg-card) !important;
    box-sizing: border-box !important;
  }

  .hdx-requests-table tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.015) !important;
  }

  html[data-theme="light"] .hdx-requests-table tr:nth-child(even),
  body.light .hdx-requests-table tr:nth-child(even) {
    background: #f8fafc !important;
  }

  .hdx-requests-table td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 0 !important;
    border: none !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08) !important;
    font-size: 13px !important;
    width: 100% !important;
    text-align: right !important;
    box-sizing: border-box !important;
    gap: 12px !important;
    position: static !important;
  }

  .hdx-requests-table td:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  html[data-theme="light"] .hdx-requests-table td,
  body.light .hdx-requests-table td {
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
  }

  .hdx-requests-table td::before {
    content: attr(data-label);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--hdx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    text-align: left;
    margin-right: 8px;
  }

  /* Reset all children inside td */
  .hdx-requests-table td > *,
  .hdx-requests-table td .hdx-req-badge,
  .hdx-requests-table td span,
  .hdx-requests-table td div {
    position: static !important;
  }

  /* Specific column adjustments */
  .hdx-requests-table td.td-date .hdx-req-date-wrap {
    flex-direction: row !important;
    gap: 6px !important;
  }

  .hdx-requests-table td.td-content {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 6px !important;
  }

  .hdx-requests-table td.td-content > div {
    max-width: 100% !important;
    width: 100% !important;
    text-align: left !important;
  }

  .hdx-requests-table td.td-actions {
    justify-content: flex-end !important;
    padding-top: 10px !important;
  }

  .hdx-requests-table td.td-actions .hdx-req-actions-group {
    width: 100% !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  .hdx-requests-table td.td-actions .hdx-btn {
    padding: 7px 14px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }

  /* Detail View Key-Value Table */
  .hdx-requests-table tbody tr:has(th) {
    padding: 10px 14px !important;
  }

  .hdx-requests-table tbody tr th {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 2px 0 !important;
    background: transparent !important;
    font-size: 11px !important;
    color: var(--hdx-text-muted) !important;
    text-transform: uppercase !important;
    border: none !important;
    text-align: left !important;
  }

  .hdx-requests-table tbody tr:has(th) td {
    display: block !important;
    padding: 2px 0 8px 0 !important;
    border-bottom: none !important;
    text-align: left !important;
  }

  /* View Hero Banner */
  .hdx-req-view-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 18px 14px !important;
    gap: 14px !important;
    border-radius: 14px !important;
  }

  .hdx-req-view-hero-left {
    gap: 12px !important;
  }

  .hdx-req-view-hero-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    border-radius: 10px !important;
  }

  .hdx-req-view-hero h2 {
    font-size: 16.5px !important;
  }

  .hdx-req-view-hero p {
    font-size: 12.5px !important;
  }

  .hdx-req-view-hero .hdx-btn {
    width: 100% !important;
    height: 42px !important;
    justify-content: center !important;
    font-size: 13.5px !important;
    border-radius: 10px !important;
  }

  /* Empty state */
  .hdx-req-empty-state {
    padding: 32px 14px !important;
  }

  .hdx-req-empty-icon {
    width: 52px !important;
    height: 52px !important;
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }

  .hdx-req-empty-state h4 {
    font-size: 15.5px !important;
  }

  .hdx-req-empty-state p {
    font-size: 12.5px !important;
    margin-bottom: 16px !important;
  }

  .hdx-req-empty-state .hdx-btn {
    width: 100% !important;
    height: 42px !important;
    justify-content: center !important;
    font-size: 13.5px !important;
    border-radius: 10px !important;
  }
}

/* ==========================================================================
   HDX RENTED VIDEOS (KİRALADIKLARIM)
   ========================================================================== */
.hdx-rented-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-lg);
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: var(--hdx-shadow-sm);
  position: relative;
  overflow: hidden;
}

.hdx-rented-header-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #10b981 0%, var(--hdx-accent) 50%, var(--hdx-gold) 100%);
}

.hdx-rented-title-group {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 280px;
}

.hdx-rented-title-group h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hdx-rented-count-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.hdx-rented-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hdx-rented-search {
  position: relative;
  width: 260px;
}

.hdx-rented-search input {
  width: 100%;
  background: var(--hdx-bg-elevated);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-full);
  color: var(--hdx-text-primary);
  font-size: 13.5px;
  padding: 9px 16px 9px 38px;
  outline: none;
  transition: all 0.2s ease;
}

.hdx-rented-search input:focus {
  border-color: var(--hdx-accent);
  box-shadow: 0 0 0 3px rgba(234, 44, 90, 0.15);
  background: var(--hdx-bg-card);
}

.hdx-rented-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hdx-text-muted);
  font-size: 13px;
  pointer-events: none;
}

@media (max-width: 767px) {
  .hdx-rented-header-bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px;
  }
  .hdx-rented-controls {
    width: 100%;
  }
  .hdx-rented-search {
    width: 100%;
  }
}

.hdx-rented-card {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  overflow: hidden;
  transition: all var(--hdx-transition-base);
  display: flex;
  flex-direction: column;
}

.hdx-rented-card:hover {
  transform: translateY(-3px);
  border-color: var(--hdx-border-hover);
  box-shadow: var(--hdx-shadow-md);
}

.hdx-rented-card-body {
  padding: 14px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hdx-rented-card-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}

.hdx-rented-card-title a {
  color: var(--hdx-text-primary);
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.hdx-rented-card-title a:hover {
  color: var(--hdx-accent);
}

.hdx-rented-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--hdx-text-secondary);
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.hdx-rented-time-pill {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--hdx-radius-xs);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hdx-rented-time-pill.active {
  background: rgba(16, 185, 129, 0.92);
  color: #fff;
}

.hdx-rented-time-pill.warning {
  background: rgba(245, 158, 11, 0.92);
  color: #fff;
}

.hdx-rented-time-pill.expired {
  background: rgba(239, 68, 68, 0.92);
  color: #fff;
}

/* ==========================================================================
   HDX FAVORITES (FAVORİ LİSTEM)
   ========================================================================== */
.hdx-fav-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-lg);
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: var(--hdx-shadow-sm);
  position: relative;
  overflow: hidden;
}

.hdx-fav-header-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #ec4899 0%, var(--hdx-accent) 50%, var(--hdx-gold) 100%);
}

.hdx-fav-title-group {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 280px;
}

.hdx-fav-title-group h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hdx-fav-count-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(234, 44, 90, 0.15);
  color: var(--hdx-accent);
  border: 1px solid rgba(234, 44, 90, 0.3);
}

.hdx-fav-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hdx-fav-search {
  position: relative;
  width: 260px;
}

.hdx-fav-search input {
  width: 100%;
  background: var(--hdx-bg-elevated);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-full);
  color: var(--hdx-text-primary);
  font-size: 13.5px;
  padding: 9px 16px 9px 38px;
  outline: none;
  transition: all 0.2s ease;
}

.hdx-fav-search input:focus {
  border-color: var(--hdx-accent);
  box-shadow: 0 0 0 3px rgba(234, 44, 90, 0.15);
  background: var(--hdx-bg-card);
}

.hdx-fav-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hdx-text-muted);
  font-size: 13px;
  pointer-events: none;
}

@media (max-width: 767px) {
  .hdx-fav-header-bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 14px;
    margin-bottom: 14px;
    border-radius: var(--hdx-radius-md, 12px);
  }
  .hdx-fav-title-group {
    min-width: 0;
    width: 100%;
    gap: 12px;
    align-items: flex-start;
  }
  .hdx-fav-title-group .hdx-history-header-icon {
    width: 42px;
    height: 42px;
    font-size: 18px;
    border-radius: 10px;
    flex-shrink: 0;
  }
  .hdx-fav-title-group h1 {
    font-size: 18px;
    gap: 8px;
    margin-bottom: 2px;
    line-height: 1.3;
  }
  .hdx-fav-title-group p {
    font-size: 12.5px;
    line-height: 1.45;
  }
  .hdx-fav-controls {
    width: 100%;
    margin-top: 0;
  }
  .hdx-fav-controls .hdx-btn {
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: 20px;
  }
  .hdx-fav-search {
    width: 100%;
  }
}

.hdx-fav-card {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  overflow: hidden;
  transition: all var(--hdx-transition-base);
  display: flex;
  flex-direction: column;
  position: relative;
}

.hdx-fav-card:hover {
  transform: translateY(-3px);
  border-color: var(--hdx-border-hover);
  box-shadow: var(--hdx-shadow-md);
}

.hdx-fav-card-body {
  padding: 14px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hdx-fav-card-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}

.hdx-fav-card-title a {
  color: var(--hdx-text-primary);
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.hdx-fav-card-title a:hover {
  color: var(--hdx-accent);
}

.hdx-fav-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--hdx-text-secondary);
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.hdx-fav-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ec4899;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hdx-fav-remove-btn:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
  transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

/* Channel Subscription Card Extensions */
.hdx-channel-sub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-md);
  padding: 20px 14px 16px;
  transition: all var(--hdx-transition-base);
  box-shadow: var(--hdx-shadow-card);
}

.hdx-channel-sub-card:hover {
  background: var(--hdx-bg-card-hover);
  border-color: var(--hdx-border-hover);
  transform: translateY(-3px);
  box-shadow: var(--hdx-shadow-card-hover);
}

.hdx-channel-unsub-btn {
  margin-top: 14px;
  width: 100%;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--hdx-radius-sm);
  background: rgba(239, 68, 68, 0.08);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.hdx-channel-unsub-btn:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35);
}

/* Followed Star Card Extensions */
.hdx-star-sub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-md);
  padding: 22px 14px 18px 14px;
  overflow: visible;
  position: relative;
  transition: all var(--hdx-transition-base);
  box-shadow: var(--hdx-shadow-card);
}

.hdx-star-sub-card:hover {
  transform: translateY(-4px);
  background: var(--hdx-bg-card-hover);
  border-color: rgba(229, 41, 85, 0.45);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(229, 41, 85, 0.16);
}

.hdx-star-sub-card:hover .hdx-star-photo-wrap {
  box-shadow: 0 0 0 3px var(--hdx-bg-card), 0 0 0 5px var(--hdx-accent), 0 0 22px rgba(229, 41, 85, 0.5);
  transform: scale(1.04);
}

.hdx-star-sub-card:hover .hdx-star-photo-wrap img {
  transform: scale(1.04);
}

.hdx-star-unsub-btn {
  margin-top: 10px;
  width: 100%;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: var(--hdx-radius-sm);
  background: rgba(239, 68, 68, 0.08);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.hdx-star-unsub-btn:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35);
}

html[data-theme="light"] .hdx-star-sub-card,
body.light .hdx-star-sub-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

/* ==========================================================================
   26. USER PROFILE & ACCOUNT MANAGEMENT (.hdx-uprofile)
   ========================================================================== */
.hdx-uprofile-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  grid-template-areas:
    "id main"
    "links main";
  gap: 28px;
  align-items: start;
  margin-top: 14px;
  margin-bottom: 50px;
}

.hdx-uprofile-id-card {
  grid-area: id;
}

.hdx-uprofile-links-card {
  grid-area: links;
}

.hdx-uprofile-main {
  grid-area: main;
}

@media (max-width: 991px) {
  .hdx-uprofile-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }
  .hdx-uprofile-id-card {
    order: 1 !important;
  }
  .hdx-uprofile-main {
    order: 2 !important;
  }
  .hdx-uprofile-links-card {
    order: 3 !important;
  }
}

.hdx-uprofile-card {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-card-border);
  border-radius: var(--hdx-radius-lg);
  padding: 26px;
  box-shadow: var(--hdx-shadow-card);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color var(--hdx-transition-base), border-color var(--hdx-transition-base);
}

html[data-theme="light"] .hdx-uprofile-card,
body.light .hdx-uprofile-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.hdx-uprofile-avatar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hdx-border);
  position: relative;
}

html[data-theme="light"] .hdx-uprofile-avatar-box,
body.light .hdx-uprofile-avatar-box {
  border-bottom-color: #f1f5f9;
}

.hdx-uprofile-avatar-circle {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(234, 44, 90, 0.2), rgba(245, 158, 11, 0.15));
  border: 3px solid rgba(234, 44, 90, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: var(--hdx-accent);
  box-shadow: 0 0 25px rgba(234, 44, 90, 0.25);
  margin-bottom: 14px;
  position: relative;
}

html[data-theme="light"] .hdx-uprofile-avatar-circle,
body.light .hdx-uprofile-avatar-circle {
  background: rgba(234, 44, 90, 0.08);
  border-color: rgba(234, 44, 90, 0.3);
  box-shadow: 0 0 20px rgba(234, 44, 90, 0.15);
}

.hdx-uprofile-avatar-circle.is-vip {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.15));
  color: #fbbf24;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.35);
}

html[data-theme="light"] .hdx-uprofile-avatar-circle.is-vip,
body.light .hdx-uprofile-avatar-circle.is-vip {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #d97706;
}

.hdx-uprofile-crown-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #111;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .hdx-uprofile-crown-badge,
body.light .hdx-uprofile-crown-badge {
  border-color: #ffffff;
}

.hdx-uprofile-user-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  margin: 0 0 4px 0;
  letter-spacing: -0.3px;
}

html[data-theme="light"] .hdx-uprofile-user-title,
body.light .hdx-uprofile-user-title {
  color: #0f172a;
}

.hdx-uprofile-user-email {
  font-size: 13.5px;
  color: var(--hdx-text-secondary);
  margin: 0 0 12px 0;
  word-break: break-all;
}

html[data-theme="light"] .hdx-uprofile-user-email,
body.light .hdx-uprofile-user-email {
  color: #64748b;
}

.hdx-uprofile-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.hdx-uprofile-tier-badge.tier-vip {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.15));
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

html[data-theme="light"] .hdx-uprofile-tier-badge.tier-vip,
body.light .hdx-uprofile-tier-badge.tier-vip {
  background: #fef3c7;
  border-color: #fde68a;
  color: #b45309;
}

.hdx-uprofile-tier-badge.tier-standard {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--hdx-text-secondary);
}

html[data-theme="light"] .hdx-uprofile-tier-badge.tier-standard,
body.light .hdx-uprofile-tier-badge.tier-standard {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.hdx-uprofile-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}

.hdx-uprofile-stat-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  padding: 14px 10px;
  text-align: center;
  transition: all 0.2s ease;
}

html[data-theme="light"] .hdx-uprofile-stat-item,
body.light .hdx-uprofile-stat-item {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.hdx-uprofile-stat-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--hdx-border-hover);
}

html[data-theme="light"] .hdx-uprofile-stat-item:hover,
body.light .hdx-uprofile-stat-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.hdx-uprofile-stat-value {
  font-size: 17px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  margin-bottom: 2px;
  letter-spacing: -0.3px;
}

html[data-theme="light"] .hdx-uprofile-stat-value,
body.light .hdx-uprofile-stat-value {
  color: #0f172a;
}

.hdx-uprofile-stat-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--hdx-text-muted);
  letter-spacing: 0.4px;
}

html[data-theme="light"] .hdx-uprofile-stat-label,
body.light .hdx-uprofile-stat-label {
  color: #64748b;
}

.hdx-uprofile-vip-expire-box {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--hdx-radius-md);
  padding: 12px;
  text-align: center;
  margin-bottom: 16px;
}

html[data-theme="light"] .hdx-uprofile-vip-expire-box,
body.light .hdx-uprofile-vip-expire-box {
  background: #fffbeb;
  border-color: #fde68a;
}

.hdx-uprofile-vip-expire-label {
  font-size: 11.5px;
  text-transform: uppercase;
  color: #f59e0b;
  font-weight: 700;
  margin-bottom: 3px;
}

html[data-theme="light"] .hdx-uprofile-vip-expire-label,
body.light .hdx-uprofile-vip-expire-label {
  color: #b45309;
}

.hdx-uprofile-vip-expire-date {
  font-size: 14px;
  font-weight: 700;
  color: var(--hdx-text-primary);
}

html[data-theme="light"] .hdx-uprofile-vip-expire-date,
body.light .hdx-uprofile-vip-expire-date {
  color: #78350f;
}

.hdx-uprofile-stat-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: var(--hdx-radius-full);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none !important;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
  transition: all 0.2s ease;
}

.hdx-uprofile-stat-action:hover {
  background: #10b981;
  color: #fff;
}

.hdx-uprofile-stat-action.gold {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.hdx-uprofile-stat-action.gold:hover {
  background: #f59e0b;
  color: #fff;
}

/* Quick Navigation Hub Grid */
.hdx-uprofile-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 6px;
}

.hdx-uprofile-hub-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 13px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hdx-border);
  border-radius: 12px;
  text-decoration: none !important;
  color: var(--hdx-text-primary);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

html[data-theme="light"] .hdx-uprofile-hub-tile,
body.light .hdx-uprofile-hub-tile {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #1e293b;
}

.hdx-uprofile-hub-tile:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--hdx-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--hdx-shadow-sm);
}

html[data-theme="light"] .hdx-uprofile-hub-tile:hover,
body.light .hdx-uprofile-hub-tile:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.hdx-uprofile-hub-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  margin-bottom: 7px;
  transition: transform 0.2s ease;
}

.hdx-uprofile-hub-tile:hover .hdx-uprofile-hub-icon {
  transform: scale(1.1);
}

.hdx-uprofile-hub-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.hdx-uprofile-hub-desc {
  font-size: 10.5px;
  color: var(--hdx-text-muted);
  margin-top: 2px;
  line-height: 1.2;
}

.hdx-uprofile-hub-tile.logout {
  border-color: rgba(239, 68, 68, 0.25);
}

.hdx-uprofile-hub-tile.logout:hover {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.hdx-uprofile-links-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.hdx-uprofile-link-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--hdx-radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hdx-border);
  color: var(--hdx-text-secondary);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

html[data-theme="light"] .hdx-uprofile-link-btn,
body.light .hdx-uprofile-link-btn {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #334155;
}

.hdx-uprofile-link-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--hdx-border-hover);
  color: var(--hdx-text-primary);
  transform: translateX(3px);
}

html[data-theme="light"] .hdx-uprofile-link-btn:hover,
body.light .hdx-uprofile-link-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

.hdx-uprofile-link-btn.highlight-vip {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(217, 119, 6, 0.08));
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

html[data-theme="light"] .hdx-uprofile-link-btn.highlight-vip,
body.light .hdx-uprofile-link-btn.highlight-vip {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

.hdx-uprofile-link-btn.highlight-vip:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.15));
  border-color: rgba(245, 158, 11, 0.5);
  color: #fde68a;
}

html[data-theme="light"] .hdx-uprofile-link-btn.highlight-vip:hover,
body.light .hdx-uprofile-link-btn.highlight-vip:hover {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

.hdx-uprofile-link-btn.btn-logout {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.05);
  margin-top: 10px;
}

html[data-theme="light"] .hdx-uprofile-link-btn.btn-logout,
body.light .hdx-uprofile-link-btn.btn-logout {
  color: #dc2626;
  background: #fef2f2;
  border-color: #fecaca;
}

html[data-theme="light"] .hdx-uprofile-link-btn.btn-logout:hover,
body.light .hdx-uprofile-link-btn.btn-logout:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

/* Security Notice Banner */
.hdx-uprofile-security-banner {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: var(--hdx-radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
}

html[data-theme="light"] .hdx-uprofile-security-banner,
body.light .hdx-uprofile-security-banner {
  background: #eff6ff;
  border-color: #bfdbfe;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.06);
}

.hdx-uprofile-security-icon {
  font-size: 22px;
  color: #60a5fa;
  flex-shrink: 0;
  margin-top: 2px;
}

html[data-theme="light"] .hdx-uprofile-security-icon,
body.light .hdx-uprofile-security-icon {
  color: #2563eb;
}

.hdx-uprofile-security-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: #dbeafe;
}

html[data-theme="light"] .hdx-uprofile-security-text,
body.light .hdx-uprofile-security-text {
  color: #1e40af;
}

.hdx-uprofile-security-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #93c5fd;
  display: block;
  margin-bottom: 4px;
}

html[data-theme="light"] .hdx-uprofile-security-title,
body.light .hdx-uprofile-security-title {
  color: #1e3a8a;
}

/* Sections & Form */
.hdx-uprofile-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  padding: 22px;
  margin-bottom: 22px;
  transition: background-color var(--hdx-transition-base), border-color var(--hdx-transition-base);
}

html[data-theme="light"] .hdx-uprofile-section,
body.light .hdx-uprofile-section {
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.hdx-uprofile-sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hdx-border);
}

html[data-theme="light"] .hdx-uprofile-sec-head,
body.light .hdx-uprofile-sec-head {
  border-bottom-color: #e2e8f0;
}

.hdx-uprofile-sec-head i {
  color: var(--hdx-accent);
  font-size: 17px;
}

.hdx-uprofile-sec-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0;
}

html[data-theme="light"] .hdx-uprofile-sec-title,
body.light .hdx-uprofile-sec-title {
  color: #0f172a;
}

.hdx-uprofile-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 650px) {
  .hdx-uprofile-form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.hdx-uprofile-group {
  margin-bottom: 16px;
}

.hdx-uprofile-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hdx-text-primary);
  margin-bottom: 8px;
}

html[data-theme="light"] .hdx-uprofile-label,
body.light .hdx-uprofile-label {
  color: #1e293b;
}

.hdx-locked-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  color: var(--hdx-text-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-theme="light"] .hdx-locked-badge,
body.light .hdx-locked-badge {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #475569;
}

.hdx-uprofile-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.hdx-uprofile-input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hdx-text-muted);
  font-size: 15px;
  width: 18px;
  text-align: center;
  pointer-events: none;
  z-index: 3;
  transition: color 0.2s ease;
}

html[data-theme="light"] .hdx-uprofile-input-icon,
body.light .hdx-uprofile-input-icon {
  color: #64748b;
}

.hdx-uprofile-input,
input.hdx-uprofile-input,
.hdx-uprofile-input-wrap input.hdx-uprofile-input,
.hdx-uprofile-input-wrap input[type="text"].hdx-uprofile-input,
.hdx-uprofile-input-wrap input[type="email"].hdx-uprofile-input,
.hdx-uprofile-input-wrap input[type="password"].hdx-uprofile-input {
  width: 100% !important;
  height: 48px !important;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--hdx-radius-md) !important;
  padding: 0 44px 0 44px !important;
  padding-left: 44px !important;
  padding-right: 44px !important;
  color: var(--hdx-text-primary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease;
}

html[data-theme="light"] .hdx-uprofile-input,
body.light .hdx-uprofile-input,
html[data-theme="light"] .hdx-uprofile-input-wrap input.hdx-uprofile-input,
body.light .hdx-uprofile-input-wrap input.hdx-uprofile-input {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

.hdx-uprofile-input:focus,
.hdx-uprofile-input-wrap input.hdx-uprofile-input:focus {
  outline: none !important;
  border-color: var(--hdx-accent) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(234, 44, 90, 0.18) !important;
}

html[data-theme="light"] .hdx-uprofile-input:focus,
body.light .hdx-uprofile-input:focus,
html[data-theme="light"] .hdx-uprofile-input-wrap input.hdx-uprofile-input:focus,
body.light .hdx-uprofile-input-wrap input.hdx-uprofile-input:focus {
  background: #ffffff !important;
  border-color: var(--hdx-accent) !important;
  box-shadow: 0 0 0 3px rgba(229, 41, 85, 0.15) !important;
}

.hdx-uprofile-input:focus ~ .hdx-uprofile-input-icon,
.hdx-uprofile-input-wrap input.hdx-uprofile-input:focus ~ .hdx-uprofile-input-icon {
  color: var(--hdx-accent) !important;
}

.hdx-uprofile-input[readonly],
input.hdx-uprofile-input[readonly],
.hdx-uprofile-input-wrap input[readonly].hdx-uprofile-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  font-weight: 600 !important;
  padding-left: 44px !important;
  padding-right: 44px !important;
}

html[data-theme="light"] .hdx-uprofile-input[readonly],
body.light .hdx-uprofile-input[readonly],
html[data-theme="light"] .hdx-uprofile-input-wrap input[readonly].hdx-uprofile-input,
body.light .hdx-uprofile-input-wrap input[readonly].hdx-uprofile-input {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
  cursor: not-allowed !important;
  font-weight: 600 !important;
  padding-left: 44px !important;
  padding-right: 44px !important;
}

.hdx-uprofile-toggle-pass {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--hdx-text-muted);
  cursor: pointer;
  padding: 6px;
  font-size: 15px;
  z-index: 3;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

html[data-theme="light"] .hdx-uprofile-toggle-pass,
body.light .hdx-uprofile-toggle-pass {
  color: #64748b;
}

.hdx-uprofile-toggle-pass:hover {
  color: var(--hdx-text-primary);
}

html[data-theme="light"] .hdx-uprofile-toggle-pass:hover,
body.light .hdx-uprofile-toggle-pass:hover {
  color: #0f172a;
}

.hdx-uprofile-help {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--hdx-text-muted);
  margin-top: 6px;
  line-height: 1.4;
}

html[data-theme="light"] .hdx-uprofile-help,
body.light .hdx-uprofile-help {
  color: #64748b;
}

/* Password Strength Meter */
.hdx-pass-strength-bar {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  height: 4px;
}

.hdx-pass-strength-bar span {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  transition: background 0.3s ease;
}

html[data-theme="light"] .hdx-pass-strength-bar span,
body.light .hdx-pass-strength-bar span {
  background: #e2e8f0;
}

.hdx-pass-strength-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
}

html[data-theme="light"] .hdx-pass-strength-info,
body.light .hdx-pass-strength-info {
  color: #64748b;
}

.hdx-uprofile-form-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* ==========================================================================
   26.1. MOBILE-FIRST USER PROFILE & ACCOUNT HUB (.hdx-uprofile-mobile-hub)
   ========================================================================== */
.hdx-uprofile-desktop-wrap {
  display: block;
}

.hdx-uprofile-mobile-hub {
  display: none;
}

@media (max-width: 767px) {
  .hdx-uprofile-desktop-wrap {
    display: none !important;
  }

  .hdx-uprofile-mobile-hub {
    display: block !important;
    margin-top: 8px;
    margin-bottom: 40px;
  }
}

/* Mobile Profile Card */
.hdx-mhub-profile-card {
  background: linear-gradient(135deg, rgba(23, 26, 34, 0.95), rgba(30, 35, 48, 0.95));
  border: 1px solid var(--hdx-card-border, rgba(255, 255, 255, 0.08));
  border-radius: 18px;
  padding: 18px 16px;
  margin-bottom: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}

html[data-theme="light"] .hdx-mhub-profile-card,
body.light .hdx-mhub-profile-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.hdx-mhub-user-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hdx-mhub-avatar-wrap {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(234, 44, 90, 0.2), rgba(245, 158, 11, 0.15));
  border: 2px solid rgba(234, 44, 90, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--hdx-accent, #ea2c5a);
  position: relative;
}

html[data-theme="light"] .hdx-mhub-avatar-wrap,
body.light .hdx-mhub-avatar-wrap {
  background: rgba(234, 44, 90, 0.08);
  border-color: rgba(234, 44, 90, 0.3);
}

.hdx-mhub-avatar-wrap.is-vip {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.15));
  color: #fbbf24;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
}

html[data-theme="light"] .hdx-mhub-avatar-wrap.is-vip,
body.light .hdx-mhub-avatar-wrap.is-vip {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #d97706;
}

.hdx-mhub-crown-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #111;
}

html[data-theme="light"] .hdx-mhub-crown-badge,
body.light .hdx-mhub-crown-badge {
  border-color: #fff;
}

.hdx-mhub-user-meta {
  flex: 1;
  min-width: 0;
}

.hdx-mhub-username {
  font-size: 18px;
  font-weight: 800;
  color: var(--hdx-text-primary, #ffffff);
  margin: 0 0 2px 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-theme="light"] .hdx-mhub-username,
body.light .hdx-mhub-username {
  color: #0f172a;
}

.hdx-mhub-email {
  font-size: 12.5px;
  color: var(--hdx-text-secondary, #94a3b8);
  margin: 0 0 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-theme="light"] .hdx-mhub-email,
body.light .hdx-mhub-email {
  color: #64748b;
}

.hdx-mhub-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.hdx-mhub-tier-badge.tier-vip {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

html[data-theme="light"] .hdx-mhub-tier-badge.tier-vip,
body.light .hdx-mhub-tier-badge.tier-vip {
  background: #fef3c7;
  border-color: #fde68a;
  color: #b45309;
}

.hdx-mhub-tier-badge.tier-standard {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--hdx-text-secondary, #94a3b8);
}

html[data-theme="light"] .hdx-mhub-tier-badge.tier-standard,
body.light .hdx-mhub-tier-badge.tier-standard {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.hdx-mhub-vip-expire {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #fbbf24;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

html[data-theme="light"] .hdx-mhub-vip-expire,
body.light .hdx-mhub-vip-expire {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

.hdx-mhub-vip-expire strong {
  color: var(--hdx-text-primary, #ffffff);
}

html[data-theme="light"] .hdx-mhub-vip-expire strong,
body.light .hdx-mhub-vip-expire strong {
  color: #78350f;
}

/* Wallet bar */
.hdx-mhub-wallet-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hdx-border, rgba(255, 255, 255, 0.08));
}

html[data-theme="light"] .hdx-mhub-wallet-bar,
body.light .hdx-mhub-wallet-bar {
  border-top-color: #f1f5f9;
}

.hdx-mhub-wallet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hdx-mhub-wallet-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--hdx-text-muted, #94a3b8);
}

.hdx-mhub-wallet-val {
  font-size: 20px;
  font-weight: 800;
  color: #10b981;
  letter-spacing: -0.3px;
}

.hdx-mhub-wallet-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.hdx-mhub-wallet-actions .hdx-mhub-btn {
  flex: 1;
}

.hdx-mhub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.2s ease;
  white-space: nowrap;
  width: 100%;
}

.hdx-mhub-btn-emerald {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
}

.hdx-mhub-btn-emerald:active {
  background: #10b981;
  color: #fff;
}

.hdx-mhub-btn-gold {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.2));
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.hdx-mhub-btn-gold:active {
  background: #f59e0b;
  color: #fff;
}

/* Sections & Groups */
.hdx-mhub-section {
  margin-bottom: 18px;
}

.hdx-mhub-section-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--hdx-text-muted, #94a3b8);
  margin-bottom: 8px;
  padding-left: 6px;
}

html[data-theme="light"] .hdx-mhub-section-label,
body.light .hdx-mhub-section-label {
  color: #64748b;
}

.hdx-mhub-group {
  background: var(--hdx-bg-card, #171a22);
  border: 1px solid var(--hdx-card-border, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--hdx-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.15));
}

html[data-theme="light"] .hdx-mhub-group,
body.light .hdx-mhub-group {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.hdx-mhub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  min-height: 56px;
  text-decoration: none !important;
  color: inherit;
  border-bottom: 1px solid var(--hdx-border, rgba(255, 255, 255, 0.06));
  transition: background-color 0.15s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.hdx-mhub-item:last-child {
  border-bottom: none;
}

.hdx-mhub-item:active {
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .hdx-mhub-item,
body.light .hdx-mhub-item {
  border-bottom-color: #f1f5f9;
}

html[data-theme="light"] .hdx-mhub-item:active,
body.light .hdx-mhub-item:active {
  background: #f8fafc;
}

.hdx-mhub-toggle-row {
  cursor: pointer;
  user-select: none;
}

.hdx-mhub-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.hdx-mhub-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.hdx-mhub-icon.bg-emerald {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.hdx-mhub-icon.bg-gold {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.hdx-mhub-icon.bg-purple {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

.hdx-mhub-icon.bg-pink {
  background: rgba(236, 72, 153, 0.15);
  color: #ec4899;
}

.hdx-mhub-icon.bg-rose {
  background: rgba(234, 44, 90, 0.15);
  color: var(--hdx-accent, #ea2c5a);
}

.hdx-mhub-icon.bg-blue {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.hdx-mhub-icon.bg-amber {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.hdx-mhub-icon.bg-cyan {
  background: rgba(6, 182, 212, 0.15);
  color: #06b6d4;
}

.hdx-mhub-icon.bg-red {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.hdx-mhub-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hdx-mhub-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--hdx-text-primary, #ffffff);
  line-height: 1.3;
}

html[data-theme="light"] .hdx-mhub-title,
body.light .hdx-mhub-title {
  color: #0f172a;
}

.hdx-mhub-title.text-red {
  color: #ef4444 !important;
}

.hdx-mhub-desc {
  font-size: 11.5px;
  color: var(--hdx-text-muted, #94a3b8);
  margin-top: 1px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-theme="light"] .hdx-mhub-desc,
body.light .hdx-mhub-desc {
  color: #64748b;
}

.hdx-mhub-item-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-left: 8px;
}

.hdx-mhub-pill-val {
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 700;
}

.hdx-mhub-pill-val.pill-emerald {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
}

.hdx-mhub-pill-val.pill-gold {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.hdx-mhub-pill-val.pill-neutral {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--hdx-text-secondary, #94a3b8);
}

html[data-theme="light"] .hdx-mhub-pill-val.pill-neutral,
body.light .hdx-mhub-pill-val.pill-neutral {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.hdx-mhub-chevron {
  color: var(--hdx-text-muted, #64748b);
  font-size: 16px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Accordion Form */
.hdx-mhub-pass-collapse {
  display: none;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--hdx-border, rgba(255, 255, 255, 0.06));
  padding: 18px 15px;
}

.hdx-mhub-pass-collapse.is-open {
  display: block;
  animation: hdxSlideFadeDown 0.25s ease-out;
}

@keyframes hdxSlideFadeDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html[data-theme="light"] .hdx-mhub-pass-collapse,
body.light .hdx-mhub-pass-collapse {
  background: #f8fafc;
  border-bottom-color: #f1f5f9;
}

.hdx-mhub-form-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #93c5fd;
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 14px;
}

html[data-theme="light"] .hdx-mhub-form-notice,
body.light .hdx-mhub-form-notice {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.hdx-mhub-form-notice i {
  color: #3b82f6;
  font-size: 14px;
  margin-top: 1px;
}

.hdx-mhub-field {
  margin-bottom: 14px;
}

.hdx-mhub-label {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--hdx-text-primary, #ffffff);
  margin-bottom: 6px;
}

html[data-theme="light"] .hdx-mhub-label,
body.light .hdx-mhub-label {
  color: #1e293b;
}

.hdx-mhub-label i {
  margin-right: 6px;
  color: var(--hdx-accent, #ea2c5a);
}

.hdx-mhub-btn-submit {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  background: var(--hdx-accent, #ea2c5a);
  color: #ffffff;
  border: none;
  font-size: 14.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  margin-top: 18px;
  box-shadow: 0 4px 14px rgba(234, 44, 90, 0.35);
  transition: all 0.2s ease;
}

.hdx-mhub-btn-submit:active {
  transform: scale(0.98);
}

/* ==========================================================================
   26.2. TICKET REPLY NOTIFICATIONS & BADGES
   ========================================================================== */

/* Keyframe Animations */
@keyframes hdxPingGlow {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
  }
  50% {
    transform: scale(1.35);
    opacity: 0.85;
    box-shadow: 0 0 14px rgba(16, 185, 129, 1);
  }
}

@keyframes hdxPingPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.8);
  }
}

@keyframes hdxPillGlow {
  0%, 100% {
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.35);
  }
  50% {
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.7);
  }
}

/* Pulsing Dots */
.hdx-ticket-alert-ping,
.hdx-tile-alert-ping {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid var(--hdx-bg-card, #171a22);
  box-shadow: 0 0 8px #10b981;
  animation: hdxPingGlow 1.8s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}

html[data-theme="light"] .hdx-ticket-alert-ping,
body.light .hdx-ticket-alert-ping,
html[data-theme="light"] .hdx-tile-alert-ping,
body.light .hdx-tile-alert-ping {
  border-color: #ffffff;
}

.hdx-ticket-alert-ping-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
  animation: hdxPingPulse 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
  flex-shrink: 0;
}

/* Desktop Tab Reply Badge */
.hdx-requests-tab.has-ticket-reply {
  border-color: rgba(16, 185, 129, 0.4) !important;
}

.hdx-requests-tab.has-ticket-reply:hover {
  border-color: #10b981 !important;
  color: #10b981 !important;
}

.hdx-tab-reply-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #10b981;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.2;
}

html[data-theme="light"] .hdx-tab-reply-badge,
body.light .hdx-tab-reply-badge {
  background: #d1fae5;
  border-color: #a7f3d0;
  color: #047857;
}

/* Desktop Ticket Alert Banner */
.hdx-uprofile-ticket-alert-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(6, 182, 212, 0.08) 100%);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 16px;
  padding: 16px 22px;
  margin-bottom: 22px;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-theme="light"] .hdx-uprofile-ticket-alert-banner,
body.light .hdx-uprofile-ticket-alert-banner {
  background: #ecfdf5;
  border-color: #a7f3d0;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.08);
}

.hdx-uprofile-ticket-alert-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.hdx-uprofile-ticket-alert-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  position: relative;
}

html[data-theme="light"] .hdx-uprofile-ticket-alert-icon,
body.light .hdx-uprofile-ticket-alert-icon {
  background: #d1fae5;
  color: #059669;
}

.hdx-uprofile-ticket-alert-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.hdx-uprofile-ticket-alert-title {
  font-size: 15px;
  font-weight: 800;
  color: #10b981;
  line-height: 1.3;
}

html[data-theme="light"] .hdx-uprofile-ticket-alert-title,
body.light .hdx-uprofile-ticket-alert-title {
  color: #065f46;
}

.hdx-uprofile-ticket-alert-desc {
  font-size: 13px;
  color: var(--hdx-text-secondary, #94a3b8);
  line-height: 1.4;
}

html[data-theme="light"] .hdx-uprofile-ticket-alert-desc,
body.light .hdx-uprofile-ticket-alert-desc {
  color: #334155;
}

.hdx-uprofile-ticket-alert-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  background: #10b981;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
  flex-shrink: 0;
  white-space: nowrap;
}

.hdx-uprofile-ticket-alert-btn:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.45);
  color: #ffffff !important;
}

/* Desktop Quick Hub Tile Ticket State */
.hdx-uprofile-hub-tile.has-ticket-reply {
  border-color: rgba(16, 185, 129, 0.4) !important;
  background: rgba(16, 185, 129, 0.04);
}

html[data-theme="light"] .hdx-uprofile-hub-tile.has-ticket-reply,
body.light .hdx-uprofile-hub-tile.has-ticket-reply {
  border-color: rgba(16, 185, 129, 0.45) !important;
  background: #f0fdf4;
}

/* Mobile Ticket Reply Alert Banner */
.hdx-mhub-ticket-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(6, 182, 212, 0.1) 100%);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 18px;
  text-decoration: none !important;
  color: inherit;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.hdx-mhub-ticket-alert:active {
  transform: scale(0.985);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22) 0%, rgba(6, 182, 212, 0.15) 100%);
}

html[data-theme="light"] .hdx-mhub-ticket-alert,
body.light .hdx-mhub-ticket-alert {
  background: #ecfdf5;
  border-color: #a7f3d0;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.08);
}

.hdx-mhub-ticket-alert-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.22);
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  position: relative;
}

html[data-theme="light"] .hdx-mhub-ticket-alert-icon,
body.light .hdx-mhub-ticket-alert-icon {
  background: #d1fae5;
  color: #047857;
}

.hdx-mhub-ticket-alert-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.hdx-mhub-ticket-alert-info strong {
  font-size: 14px;
  font-weight: 800;
  color: #10b981;
  line-height: 1.25;
}

html[data-theme="light"] .hdx-mhub-ticket-alert-info strong,
body.light .hdx-mhub-ticket-alert-info strong {
  color: #065f46;
}

.hdx-mhub-ticket-alert-info span {
  font-size: 12px;
  color: var(--hdx-text-secondary, #94a3b8);
  line-height: 1.35;
}

html[data-theme="light"] .hdx-mhub-ticket-alert-info span,
body.light .hdx-mhub-ticket-alert-info span {
  color: #475569;
}

.hdx-mhub-ticket-alert-arrow {
  color: #10b981;
  font-size: 20px;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

html[data-theme="light"] .hdx-mhub-ticket-alert-arrow,
body.light .hdx-mhub-ticket-alert-arrow {
  color: #059669;
}

/* Mobile Hub Row Active Reply State */
.hdx-mhub-item.has-ticket-reply {
  background: rgba(16, 185, 129, 0.06);
}

.hdx-mhub-item.has-ticket-reply:active {
  background: rgba(16, 185, 129, 0.12);
}

html[data-theme="light"] .hdx-mhub-item.has-ticket-reply,
body.light .hdx-mhub-item.has-ticket-reply {
  background: #f0fdf4;
}

html[data-theme="light"] .hdx-mhub-item.has-ticket-reply:active,
body.light .hdx-mhub-item.has-ticket-reply:active {
  background: #dcfce7;
}

.pill-emerald-glow {
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.45);
  animation: hdxPillGlow 2s ease-in-out infinite;
}

/* ==========================================================================
   24. PLAYLISTS SYSTEM (Oynatma Listeleri)
   ========================================================================== */

/* Playlist Grid */
.hdx-playlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
  margin-top: 8px;
}

@media (max-width: 640px) {
  .hdx-playlist-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Playlist Card */
.hdx-playlist-card {
  background: var(--hdx-bg-card, #171a22);
  border: 1px solid var(--hdx-card-border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.hdx-playlist-card:hover {
  transform: translateY(-4px);
  border-color: rgba(229, 41, 85, 0.4);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* Thumbnail Wrap */
.hdx-playlist-card-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.hdx-playlist-card-thumb-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.hdx-playlist-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hdx-playlist-card:hover .hdx-playlist-card-img {
  transform: scale(1.05);
}

.hdx-playlist-card-empty-thumb {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(229, 41, 85, 0.15) 0%, rgba(20, 24, 35, 0.95) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--hdx-text-secondary, #94a3b8);
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}

.hdx-playlist-card-empty-thumb i {
  font-size: 32px;
  color: var(--hdx-accent);
  opacity: 0.85;
}

/* Hover Overlay */
.hdx-playlist-card-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 1;
}

.hdx-playlist-card:hover .hdx-playlist-card-hover-overlay {
  opacity: 1;
}

.hdx-playlist-card-play-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--hdx-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  padding-left: 3px;
  box-shadow: 0 4px 16px rgba(229, 41, 85, 0.55);
  transform: scale(0.9);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hdx-playlist-card:hover .hdx-playlist-card-play-icon {
  transform: scale(1.05);
}

.hdx-playlist-card-hover-text {
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 8px;
  letter-spacing: 0.2px;
}

/* Badges on Thumbnail */
.hdx-playlist-card-privacy-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  z-index: 2;
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hdx-playlist-card-privacy-badge.is-public {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.hdx-playlist-card-privacy-badge.is-private {
  background: rgba(0, 0, 0, 0.65);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.hdx-playlist-card-count-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  color: #fff;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Card Body */
.hdx-playlist-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.hdx-playlist-card-main-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Creator Info on Playlist Card */
.hdx-playlist-card-creator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.hdx-playlist-card-creator-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(229, 41, 85, 0.45) 0%, rgba(99, 102, 241, 0.45) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.hdx-playlist-card-creator-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hdx-playlist-card-creator-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hdx-text-secondary, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.hdx-playlist-card-title {
  font-size: 15.5px;
  font-weight: 700;
  margin: 0 0 6px 0;
  line-height: 1.35;
}

.hdx-playlist-card-title a {
  color: var(--hdx-text-main, #fff);
  text-decoration: none;
  transition: color 0.2s ease;
}

.hdx-playlist-card-title a:hover {
  color: var(--hdx-accent);
}

.hdx-playlist-card-desc {
  font-size: 12.5px;
  color: var(--hdx-text-secondary, #94a3b8);
  line-height: 1.45;
  margin: 0 0 14px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card Footer */
.hdx-playlist-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--hdx-card-border, rgba(255, 255, 255, 0.06));
}

.hdx-playlist-card-meta {
  font-size: 11.5px;
  color: var(--hdx-text-muted, #64748b);
  display: flex;
  gap: 12px;
  align-items: center;
}

.hdx-playlist-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hdx-playlist-card-actions {
  display: flex;
  gap: 6px;
}

.hdx-playlist-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--hdx-text-secondary, #94a3b8);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  text-decoration: none;
}

.hdx-playlist-action-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--hdx-text-main, #fff);
  transform: translateY(-1px);
}

.hdx-playlist-action-btn.btn-view-playlist {
  background: rgba(229, 41, 85, 0.12);
  border-color: rgba(229, 41, 85, 0.28);
  color: var(--hdx-accent);
}

.hdx-playlist-action-btn.btn-view-playlist:hover {
  background: var(--hdx-accent);
  color: #fff;
  border-color: var(--hdx-accent);
  box-shadow: 0 4px 14px rgba(229, 41, 85, 0.4);
}

.hdx-playlist-action-btn.text-danger:hover {
  background: rgba(255, 71, 87, 0.15);
  color: #ff4757;
  border-color: rgba(255, 71, 87, 0.3);
}

/* ==========================================================================
   Public Playlists Toolbar & Search & Sort Filter
   ========================================================================== */
.hdx-public-playlists-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--hdx-bg-card);
  padding: 16px 22px;
  border-radius: var(--hdx-radius-lg, 14px);
  border: 1px solid var(--hdx-card-border, rgba(255, 255, 255, 0.08));
  margin-bottom: 26px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16);
  position: relative;
}

.hdx-public-playlists-search-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1;
  max-width: 440px;
  min-width: 260px;
}

.hdx-public-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.hdx-public-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hdx-text-muted, #64748b);
  font-size: 13.5px;
  pointer-events: none;
  z-index: 2;
}

.hdx-public-search-wrap input.hdx-public-search-input,
input[type="text"].hdx-public-search-input {
  width: 100% !important;
  height: 42px !important;
  line-height: normal !important;
  padding: 0 36px 0 42px !important;
  background: var(--hdx-bg-elevated, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--hdx-border, rgba(255, 255, 255, 0.1));
  border-radius: 24px !important;
  color: var(--hdx-text-primary, #fff);
  font-size: 13.5px !important;
  outline: none;
  box-sizing: border-box !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hdx-public-search-wrap input.hdx-public-search-input:focus,
input[type="text"].hdx-public-search-input:focus {
  border-color: var(--hdx-accent) !important;
  box-shadow: 0 0 0 3px rgba(229, 41, 85, 0.18) !important;
  background: var(--hdx-bg-card);
}

.hdx-public-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hdx-text-muted, #64748b);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  font-size: 13px;
  z-index: 2;
  transition: all 0.15s ease;
}

.hdx-public-search-clear:hover {
  color: var(--hdx-accent);
}

.hdx-public-search-submit {
  height: 42px;
  padding: 0 18px;
  border-radius: 24px;
  background: var(--hdx-accent);
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
  box-shadow: 0 3px 12px rgba(229, 41, 85, 0.3);
}

.hdx-public-search-submit:hover {
  background: var(--hdx-accent-hover, #ff3366);
  transform: translateY(-1px);
}

/* Sort Pills */
.hdx-public-sort-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hdx-public-sort-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hdx-text-secondary, #94a3b8);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 2px;
  flex-shrink: 0;
}

.hdx-public-sort-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hdx-sort-pill {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--hdx-bg-elevated, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--hdx-border, rgba(255, 255, 255, 0.08));
  color: var(--hdx-text-secondary, #94a3b8);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  flex-shrink: 0;
}

.hdx-sort-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--hdx-text-main, #fff);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.hdx-sort-pill.active {
  background: var(--hdx-accent);
  color: #fff !important;
  border-color: var(--hdx-accent);
  box-shadow: 0 3px 12px rgba(229, 41, 85, 0.35);
}

.hdx-sort-pill.active i {
  color: #fff;
}

/* Empty State Card */
.hdx-public-empty-card {
  padding: 56px 24px;
  text-align: center;
  background: var(--hdx-bg-card);
  border: 1px dashed var(--hdx-card-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--hdx-radius-lg, 16px);
  margin-top: 10px;
}

.hdx-public-empty-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(229, 41, 85, 0.12);
  border: 1px solid rgba(229, 41, 85, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--hdx-accent);
  margin: 0 auto 20px auto;
}

.hdx-public-empty-card h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--hdx-text-main, #fff);
  margin: 0 0 10px 0;
}

.hdx-public-empty-card p {
  font-size: 13.5px;
  color: var(--hdx-text-secondary, #94a3b8);
  max-width: 500px;
  margin: 0 auto 24px auto;
  line-height: 1.6;
}

.hdx-public-empty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .hdx-public-playlists-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
    gap: 12px;
    margin-bottom: 20px;
    border-radius: var(--hdx-radius-md, 12px);
  }
  .hdx-public-playlists-search-form {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    gap: 8px;
  }
  .hdx-public-search-wrap input.hdx-public-search-input,
  input[type="text"].hdx-public-search-input {
    height: 40px !important;
    line-height: normal !important;
    padding: 0 32px 0 38px !important;
    font-size: 13px !important;
    border-radius: 20px !important;
  }
  .hdx-public-search-icon {
    left: 13px;
    font-size: 13px;
  }
  .hdx-public-search-submit {
    height: 40px;
    padding: 0 16px;
    border-radius: 20px;
    font-size: 13px;
    gap: 6px;
  }
  .hdx-public-sort-group {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 2px;
  }
  .hdx-public-sort-label {
    font-size: 12px;
    flex-shrink: 0;
    margin-right: 0;
  }
  .hdx-public-sort-pills {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-bottom: 2px;
    padding-top: 2px;
  }
  .hdx-public-sort-pills::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .hdx-sort-pill {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  .hdx-public-playlists-toolbar {
    padding: 12px 14px;
  }
  .hdx-public-sort-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .hdx-public-sort-pills {
    width: 100%;
  }
}

/* ==========================================================================
   Playlist Detail Hero Section
   ========================================================================== */
.hdx-playlist-detail-header {
  display: flex;
  gap: 32px;
  padding: 28px;
  background: var(--hdx-bg-card, #171a22);
  border: 1px solid var(--hdx-card-border, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  margin-bottom: 28px;
  align-items: flex-start;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 860px) {
  .hdx-playlist-detail-header {
    flex-direction: column;
    padding: 20px;
    gap: 20px;
  }
}

.hdx-playlist-detail-cover-box {
  width: 320px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  background: #000;
}

@media (max-width: 860px) {
  .hdx-playlist-detail-cover-box {
    width: 100%;
  }
}

.hdx-playlist-detail-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hdx-playlist-detail-cover-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(229, 41, 85, 0.18) 0%, rgba(20, 24, 35, 0.95) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--hdx-text-secondary, #94a3b8);
  gap: 8px;
  font-size: 14px;
}

.hdx-playlist-detail-cover-placeholder i {
  font-size: 40px;
  color: var(--hdx-accent);
}

.hdx-playlist-detail-cover-overlay {
  position: absolute;
  bottom: 0;
  inset-x: 0;
  padding: 12px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

.hdx-playlist-detail-video-count {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hdx-playlist-detail-info {
  flex: 1;
  min-width: 0;
}

.hdx-playlist-detail-badges {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.hdx-playlist-status-badge,
.hdx-playlist-detail-badges .hdx-badge {
  position: static !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
}

.hdx-playlist-status-badge.is-public,
.hdx-playlist-detail-badges .hdx-badge.is-public {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.hdx-playlist-status-badge.is-private,
.hdx-playlist-detail-badges .hdx-badge.is-private {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.hdx-playlist-detail-date,
.hdx-playlist-detail-views {
  position: static !important;
  font-size: 13px;
  color: var(--hdx-text-secondary, #94a3b8);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1.3;
}

.hdx-playlist-detail-date i,
.hdx-playlist-detail-views i {
  color: var(--hdx-text-muted, #64748b);
  font-size: 13px;
  display: inline-block;
  line-height: 1;
}

.hdx-playlist-detail-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--hdx-text-main, #fff);
  margin: 0 0 12px 0;
  line-height: 1.25;
}

@media (max-width: 640px) {
  .hdx-playlist-detail-title {
    font-size: 20px;
  }
}

.hdx-playlist-detail-creator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.hdx-playlist-detail-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hdx-accent);
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.hdx-playlist-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hdx-playlist-detail-username {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--hdx-text-main, #fff);
}

.hdx-playlist-detail-meta-text {
  font-size: 12.5px;
  color: var(--hdx-text-secondary, #94a3b8);
  margin-left: 4px;
}

.hdx-playlist-detail-description {
  font-size: 13.5px;
  color: var(--hdx-text-secondary, #94a3b8);
  line-height: 1.6;
  margin: 0 0 22px 0;
  max-width: 720px;
}

.hdx-playlist-detail-cta-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   Playlist Videos Section
   ========================================================================== */
.hdx-playlist-videos-section {
  margin-top: 10px;
}

.hdx-playlist-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 14px;
}

.hdx-playlist-section-title-wrap h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  color: var(--hdx-text-main, #fff);
  display: flex;
  align-items: center;
  gap: 10px;
}

.hdx-playlist-videos-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hdx-playlist-video-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: var(--hdx-bg-card, #171a22);
  border: 1px solid var(--hdx-card-border, rgba(255, 255, 255, 0.06));
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hdx-playlist-video-item:hover {
  background: var(--hdx-bg-card-hover, #1e222c);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateX(4px);
}

.hdx-playlist-item-index {
  width: 28px;
  font-size: 14px;
  font-weight: 700;
  color: var(--hdx-text-muted, #64748b);
  text-align: center;
  flex-shrink: 0;
}

.hdx-playlist-item-thumb {
  width: 120px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background: #000;
}

@media (max-width: 640px) {
  .hdx-playlist-item-thumb {
    width: 90px;
  }
  .hdx-playlist-item-index {
    display: none;
  }
}

.hdx-playlist-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hdx-playlist-item-content {
  flex: 1;
  min-width: 0;
}

.hdx-playlist-item-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px 0;
  line-height: 1.35;
}

.hdx-playlist-item-title a {
  color: var(--hdx-text-main, #fff);
  text-decoration: none;
  transition: color 0.2s ease;
}

.hdx-playlist-item-title a:hover {
  color: var(--hdx-accent);
}

.hdx-playlist-item-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--hdx-text-muted, #64748b);
  align-items: center;
  flex-wrap: wrap;
}

.hdx-playlist-item-channel {
  color: var(--hdx-text-secondary, #94a3b8);
  font-weight: 500;
}

.hdx-playlist-item-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.hdx-playlist-item-play-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(229, 41, 85, 0.12);
  border: 1px solid rgba(229, 41, 85, 0.25);
  color: var(--hdx-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s ease;
  padding-left: 2px;
}

.hdx-playlist-item-play-btn:hover {
  background: var(--hdx-accent);
  color: #fff;
  transform: scale(1.08);
}

.hdx-playlist-item-remove-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--hdx-text-muted, #64748b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.hdx-playlist-item-remove-btn:hover {
  background: rgba(255, 71, 87, 0.15);
  color: #ff4757;
  border-color: rgba(255, 71, 87, 0.3);
}

/* ==========================================================================
   Playlist Queue Bar (Watching Video in Playlist Context)
   ========================================================================== */
.hdx-playlist-queue-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: linear-gradient(90deg, rgba(229, 41, 85, 0.12) 0%, rgba(20, 24, 35, 0.95) 100%);
  border: 1px solid rgba(229, 41, 85, 0.3);
  border-radius: 10px;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}

.hdx-playlist-queue-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.hdx-playlist-queue-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--hdx-accent);
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.hdx-playlist-queue-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hdx-text-main, #fff);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
  transition: color 0.2s;
}

.hdx-playlist-queue-name:hover {
  color: var(--hdx-accent);
}

.hdx-playlist-queue-progress {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hdx-accent);
}

.hdx-playlist-queue-nav {
  display: flex;
  gap: 8px;
  align-items: center;
}

.hdx-playlist-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--hdx-text-main, #fff);
  text-decoration: none;
  transition: all 0.2s ease;
}

.hdx-playlist-nav-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.hdx-playlist-nav-btn.active-next {
  background: var(--hdx-accent);
  border-color: var(--hdx-accent);
  color: #fff;
}

.hdx-playlist-nav-btn.active-next:hover {
  background: var(--hdx-accent-hover);
  color: #fff;
}

.hdx-playlist-nav-btn.disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}

/* ==========================================================================
   Modals System (Generic & Playlists)
   ========================================================================== */
.hdx-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 105020 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overscroll-behavior: contain;
}

/* ==========================================================================
   GLOBAL BOOTSTRAP & HDX MODAL SYSTEM
   ========================================================================== */
.modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 105000 !important;
}

.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 105020 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.modal-dialog {
  position: relative !important;
  margin: 60px auto !important;
  max-width: 540px !important;
  width: 100% !important;
  pointer-events: auto !important;
}

@media (max-width: 767px) {
  .modal-dialog {
    margin: 20px auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

.modal-content {
  background: var(--hdx-bg-card, #171a22) !important;
  border: 1px solid var(--hdx-border-hover, rgba(255, 255, 255, 0.12)) !important;
  border-radius: var(--hdx-radius-lg, 14px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65) !important;
  color: var(--hdx-text-primary, #ffffff) !important;
  overflow: hidden !important;
  position: relative !important;
}

.modal-header {
  border-bottom: 1px solid var(--hdx-border, rgba(255, 255, 255, 0.08)) !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.modal-header .modal-title {
  order: 1 !important;
}

.modal-header .close {
  order: 2 !important;
  margin-left: auto !important;
}

.modal-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--hdx-text-primary, #ffffff) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.modal-body {
  padding: 24px !important;
  color: var(--hdx-text-primary, #ffffff) !important;
  max-height: calc(85vh - 140px) !important;
  overflow-y: auto !important;
}

.modal-footer {
  border-top: 1px solid var(--hdx-border, rgba(255, 255, 255, 0.08)) !important;
  padding: 16px 24px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
}

.modal .close {
  color: var(--hdx-text-muted, #94a3b8) !important;
  opacity: 0.8 !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  text-shadow: none !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 2px 6px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: color 0.15s ease, opacity 0.15s ease !important;
}

.modal .close:hover,
.modal .close:focus {
  color: var(--hdx-text-primary, #ffffff) !important;
  opacity: 1 !important;
}

/* Light Theme Modals */
html[data-theme="light"] .modal-content,
body.light .modal-content {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .modal-header,
body.light .modal-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .modal-title,
body.light .modal-title {
  color: #0f172a !important;
}

html[data-theme="light"] .modal-body,
body.light .modal-body {
  color: #334155 !important;
}

html[data-theme="light"] .modal-footer,
body.light .modal-footer {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .modal .close,
body.light .modal .close {
  color: #64748b !important;
}

html[data-theme="light"] .modal .close:hover,
body.light .modal .close:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* ==========================================================================
   CONFIRMATION MODAL SYSTEM (.hdx-confirm-modal)
   ========================================================================== */
.hdx-confirm-modal .modal-dialog {
  max-width: 440px !important;
  margin: 60px auto !important;
}
@media (max-width: 767px) {
  .hdx-confirm-modal .modal-dialog {
    margin: 20px auto !important;
    width: 94% !important;
  }
}
.hdx-confirm-modal .modal-content {
  border-radius: 16px !important;
  overflow: hidden !important;
}
.hdx-confirm-modal .modal-header {
  padding: 16px 20px !important;
}
.hdx-confirm-modal .modal-title {
  font-size: 15.5px !important;
  font-weight: 700 !important;
}
.hdx-confirm-modal .modal-body {
  text-align: center !important;
  padding: 28px 24px 24px !important;
}
.hdx-confirm-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.28);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.15);
}
html[data-theme="light"] .hdx-confirm-icon-wrap,
body.light .hdx-confirm-icon-wrap {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  box-shadow: 0 2px 12px rgba(220, 38, 38, 0.1);
}
.hdx-confirm-title {
  font-size: 15.5px;
  font-weight: 700;
  margin: 0 0 8px 0;
  line-height: 1.4;
  color: #f1f5f9;
}
html[data-theme="light"] .hdx-confirm-title,
body.light .hdx-confirm-title {
  color: #0f172a;
}
.hdx-confirm-desc {
  font-size: 13px;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 360px;
  color: #94a3b8;
}
html[data-theme="light"] .hdx-confirm-desc,
body.light .hdx-confirm-desc {
  color: #475569;
}
.hdx-confirm-modal .modal-footer {
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}
.hdx-confirm-btn {
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.4;
  border: 1px solid transparent;
}
.hdx-confirm-btn-cancel {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.hdx-confirm-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
html[data-theme="light"] .hdx-confirm-btn-cancel,
body.light .hdx-confirm-btn-cancel {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .hdx-confirm-btn-cancel:hover,
body.light .hdx-confirm-btn-cancel:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}
.hdx-confirm-btn-danger {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: 1px solid #b91c1c !important;
  box-shadow: 0 3px 12px rgba(220, 38, 38, 0.35) !important;
}
.hdx-confirm-btn-danger:hover {
  background: #ef4444 !important;
  border-color: #dc2626 !important;
  transform: translateY(-1px);
  color: #ffffff !important;
}
html[data-theme="light"] .hdx-confirm-btn-danger,
body.light .hdx-confirm-btn-danger {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: 1px solid #b91c1c !important;
  box-shadow: 0 3px 12px rgba(220, 38, 38, 0.25) !important;
}
html[data-theme="light"] .hdx-confirm-btn-danger:hover,
body.light .hdx-confirm-btn-danger:hover {
  background: #b91c1c !important;
  border-color: #991b1b !important;
  transform: translateY(-1px);
  color: #ffffff !important;
}

#hdxNotificationModal {
  z-index: 105030 !important;
}

.hdx-modal-dialog {
  background: var(--hdx-bg-card, #171a22);
  border: 1px solid var(--hdx-card-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: hdxModalSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hdxModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hdx-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hdx-card-border, rgba(255, 255, 255, 0.08));
}

.hdx-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--hdx-text-main, #fff);
  display: flex;
  align-items: center;
}

.hdx-modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--hdx-text-muted, #64748b);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color 0.2s;
}

.hdx-modal-close:hover {
  color: var(--hdx-text-main, #fff);
}

.hdx-modal-body {
  padding: 20px;
  max-height: calc(85vh - 120px);
  overflow-y: auto;
}

.hdx-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--hdx-card-border, rgba(255, 255, 255, 0.08));
  background: rgba(0, 0, 0, 0.15);
}

/* Modal Form Controls */
.hdx-form-group {
  margin-bottom: 18px;
}

.hdx-form-label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hdx-text-main, #fff);
  margin-bottom: 8px;
  letter-spacing: 0.1px;
}

.hdx-form-input,
.hdx-form-textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--hdx-card-border, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 10px !important;
  color: var(--hdx-text-main, #fff) !important;
  font-size: 14px !important;
  font-family: inherit !important;
  padding: 11px 16px !important;
  outline: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: block !important;
}

.hdx-form-input:focus,
.hdx-form-textarea:focus {
  background: rgba(0, 0, 0, 0.35) !important;
  border-color: var(--hdx-accent) !important;
  box-shadow: 0 0 0 3px rgba(229, 41, 85, 0.22) !important;
}

.hdx-form-input::placeholder,
.hdx-form-textarea::placeholder {
  color: var(--hdx-text-muted, #64748b) !important;
  opacity: 0.85;
}

.hdx-form-textarea {
  resize: vertical !important;
  min-height: 84px !important;
  line-height: 1.5 !important;
}

/* Floating Toast Notification */
.hdx-toast-notification {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: rgba(18, 20, 28, 0.96);
  border: 1px solid var(--hdx-card-border, rgba(255, 255, 255, 0.15));
  color: #fff;
  padding: 13px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 20px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  z-index: 100001;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.96);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.hdx-toast-notification.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.hdx-toast-notification.success {
  border-color: #10b981;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 16px rgba(16, 185, 129, 0.25);
}

.hdx-toast-notification.success i {
  color: #10b981;
}

.hdx-toast-notification.danger {
  border-color: #ef4444;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 16px rgba(239, 68, 68, 0.25);
}

.hdx-toast-notification.danger i {
  color: #ef4444;
}

.hdx-toast-notification.info i {
  color: var(--hdx-accent);
}

.hdx-toast-notification.warning {
  border-color: #f59e0b;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 16px rgba(245, 158, 11, 0.25);
}

.hdx-toast-notification.warning i {
  color: #f59e0b;
}

.hdx-toast-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--hdx-accent, #e50914);
  color: #ffffff !important;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none !important;
  margin-left: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.hdx-toast-action-btn:hover {
  background: #ff1a27;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(229, 9, 20, 0.4);
}

@media (max-width: 767px) {
  .hdx-toast-notification {
    bottom: 80px;
    left: 16px;
    right: 16px;
    justify-content: center;
  }
}

/* Privacy Option Cards in Modals */
.hdx-playlist-privacy-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hdx-playlist-privacy-option {
  display: block;
  cursor: pointer;
  margin: 0;
}

.hdx-playlist-privacy-option input[type="radio"] {
  display: none;
}

.hdx-privacy-opt-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--hdx-card-border, rgba(255, 255, 255, 0.08));
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hdx-playlist-privacy-option:hover .hdx-privacy-opt-card {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.hdx-playlist-privacy-option input[type="radio"]:checked + .hdx-privacy-opt-card {
  border-color: var(--hdx-accent);
  background: rgba(229, 41, 85, 0.08);
}

.hdx-privacy-opt-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hdx-text-secondary, #94a3b8);
  font-size: 15px;
  flex-shrink: 0;
  transition: all 0.2s;
}

.hdx-playlist-privacy-option input[type="radio"]:checked + .hdx-privacy-opt-card .hdx-privacy-opt-icon {
  background: var(--hdx-accent);
  color: #fff;
}

.hdx-privacy-opt-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hdx-privacy-opt-info strong {
  font-size: 13.5px;
  color: var(--hdx-text-main, #fff);
}

.hdx-privacy-opt-info span {
  font-size: 12px;
  color: var(--hdx-text-secondary, #94a3b8);
  line-height: 1.4;
}

/* Modal Playlist Select List */
.hdx-playlist-select-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

.hdx-playlist-select-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--hdx-card-border, rgba(255, 255, 255, 0.06));
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0;
}

.hdx-playlist-select-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.hdx-playlist-select-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.hdx-pl-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--hdx-accent);
  cursor: pointer;
}

.hdx-playlist-select-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hdx-text-main, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

.hdx-playlist-select-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--hdx-text-muted, #64748b);
  flex-shrink: 0;
}

.hdx-playlist-select-count {
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 11px;
}

.hdx-quick-create-toggle-btn {
  background: transparent;
  border: none;
  color: var(--hdx-accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  transition: opacity 0.2s;
}

.hdx-quick-create-toggle-btn:hover {
  text-decoration: underline;
  opacity: 0.9;
}

/* ==========================================================================
   Light Mode Rules for Playlist Components
   ========================================================================== */
html[data-theme="light"] .hdx-playlist-card,
body.light .hdx-playlist-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .hdx-playlist-card:hover,
body.light .hdx-playlist-card:hover {
  border-color: var(--hdx-accent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .hdx-playlist-card-title a,
body.light .hdx-playlist-card-title a {
  color: #0f172a;
}

html[data-theme="light"] .hdx-playlist-card-desc,
body.light .hdx-playlist-card-desc {
  color: #64748b;
}

html[data-theme="light"] .hdx-playlist-card-footer,
body.light .hdx-playlist-card-footer {
  border-color: #f1f5f9;
}

html[data-theme="light"] .hdx-playlist-action-btn,
body.light .hdx-playlist-action-btn {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}

html[data-theme="light"] .hdx-playlist-action-btn:hover,
body.light .hdx-playlist-action-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

html[data-theme="light"] .hdx-playlist-detail-header,
body.light .hdx-playlist-detail-header {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .hdx-playlist-detail-title,
body.light .hdx-playlist-detail-title {
  color: #0f172a;
}

html[data-theme="light"] .hdx-playlist-detail-username,
body.light .hdx-playlist-detail-username {
  color: #0f172a;
}

html[data-theme="light"] .hdx-playlist-detail-avatar,
body.light .hdx-playlist-detail-avatar {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

html[data-theme="light"] .hdx-playlist-detail-description,
body.light .hdx-playlist-detail-description {
  color: #475569;
}

html[data-theme="light"] .hdx-playlist-section-title-wrap h2,
body.light .hdx-playlist-section-title-wrap h2 {
  color: #0f172a;
}

html[data-theme="light"] .hdx-playlist-video-item,
body.light .hdx-playlist-video-item {
  background: #ffffff;
  border-color: #e2e8f0;
}

html[data-theme="light"] .hdx-playlist-video-item:hover,
body.light .hdx-playlist-video-item:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

html[data-theme="light"] .hdx-playlist-item-title a,
body.light .hdx-playlist-item-title a {
  color: #0f172a;
}

html[data-theme="light"] .hdx-playlist-item-remove-btn,
body.light .hdx-playlist-item-remove-btn {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}

html[data-theme="light"] .hdx-playlist-queue-bar,
body.light .hdx-playlist-queue-bar {
  background: linear-gradient(90deg, rgba(229, 41, 85, 0.08) 0%, #f8fafc 100%);
  border-color: rgba(229, 41, 85, 0.25);
}

html[data-theme="light"] .hdx-playlist-queue-name,
body.light .hdx-playlist-queue-name {
  color: #0f172a;
}

html[data-theme="light"] .hdx-playlist-nav-btn,
body.light .hdx-playlist-nav-btn {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #0f172a;
}

html[data-theme="light"] .hdx-modal-dialog,
body.light .hdx-modal-dialog {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .hdx-modal-header,
body.light .hdx-modal-header {
  border-color: #f1f5f9;
}

html[data-theme="light"] .hdx-modal-title,
body.light .hdx-modal-title {
  color: #0f172a;
}

html[data-theme="light"] .hdx-modal-footer,
body.light .hdx-modal-footer {
  border-color: #f1f5f9;
  background: #f8fafc;
}

html[data-theme="light"] .hdx-privacy-opt-card,
body.light .hdx-privacy-opt-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

html[data-theme="light"] .hdx-privacy-opt-card:hover,
body.light .hdx-privacy-opt-card:hover {
  background: #f1f5f9;
}

html[data-theme="light"] .hdx-playlist-privacy-option input[type="radio"]:checked + .hdx-privacy-opt-card,
body.light .hdx-playlist-privacy-option input[type="radio"]:checked + .hdx-privacy-opt-card {
  background: rgba(229, 41, 85, 0.06);
  border-color: var(--hdx-accent);
}

html[data-theme="light"] .hdx-privacy-opt-info strong,
body.light .hdx-privacy-opt-info strong {
  color: #0f172a;
}

html[data-theme="light"] .hdx-playlist-select-item,
body.light .hdx-playlist-select-item {
  background: #f8fafc;
  border-color: #e2e8f0;
}

html[data-theme="light"] .hdx-playlist-select-item:hover,
body.light .hdx-playlist-select-item:hover {
  background: #f1f5f9;
}

html[data-theme="light"] .hdx-playlist-select-name,
body.light .hdx-playlist-select-name {
  color: #0f172a;
}

html[data-theme="light"] .hdx-playlist-select-count,
body.light .hdx-playlist-select-count {
  background: #e2e8f0;
  color: #475569;
}

html[data-theme="light"] .hdx-form-label,
body.light .hdx-form-label {
  color: #0f172a !important;
}

html[data-theme="light"] .hdx-form-input,
body.light .hdx-form-input,
html[data-theme="light"] .hdx-form-textarea,
body.light .hdx-form-textarea {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .hdx-form-input:focus,
body.light .hdx-form-input:focus,
html[data-theme="light"] .hdx-form-textarea:focus,
body.light .hdx-form-textarea:focus {
  background: #ffffff !important;
  border-color: var(--hdx-accent) !important;
  box-shadow: 0 0 0 3px rgba(229, 41, 85, 0.15) !important;
}

html[data-theme="light"] .hdx-form-input::placeholder,
body.light .hdx-form-input::placeholder,
html[data-theme="light"] .hdx-form-textarea::placeholder,
body.light .hdx-form-textarea::placeholder {
  color: #94a3b8 !important;
}

html[data-theme="light"] .hdx-toast-notification,
body.light .hdx-toast-notification {
  background: #ffffff;
  color: #0f172a;
  border-color: #e2e8f0;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .hdx-playlist-status-badge.is-public,
body.light .hdx-playlist-status-badge.is-public {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.3);
}

html[data-theme="light"] .hdx-playlist-status-badge.is-private,
body.light .hdx-playlist-status-badge.is-private {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

html[data-theme="light"] .hdx-playlist-detail-date,
body.light .hdx-playlist-detail-date,
html[data-theme="light"] .hdx-playlist-detail-views,
body.light .hdx-playlist-detail-views {
  color: #64748b;
}

html[data-theme="light"] .hdx-playlist-detail-date i,
body.light .hdx-playlist-detail-date i,
html[data-theme="light"] .hdx-playlist-detail-views i,
body.light .hdx-playlist-detail-views i {
  color: #94a3b8;
}

/* Light Mode - Public Playlists & Cards */
html[data-theme="light"] .hdx-public-playlists-toolbar,
body.light .hdx-public-playlists-toolbar {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .hdx-public-search-wrap input.hdx-public-search-input,
body.light .hdx-public-search-wrap input.hdx-public-search-input,
html[data-theme="light"] input[type="text"].hdx-public-search-input,
body.light input[type="text"].hdx-public-search-input {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .hdx-public-search-wrap input.hdx-public-search-input::placeholder,
body.light .hdx-public-search-wrap input.hdx-public-search-input::placeholder,
html[data-theme="light"] input[type="text"].hdx-public-search-input::placeholder,
body.light input[type="text"].hdx-public-search-input::placeholder {
  color: #94a3b8 !important;
}

html[data-theme="light"] .hdx-public-search-wrap input.hdx-public-search-input:focus,
body.light .hdx-public-search-wrap input.hdx-public-search-input:focus,
html[data-theme="light"] input[type="text"].hdx-public-search-input:focus,
body.light input[type="text"].hdx-public-search-input:focus {
  background: #ffffff !important;
  border-color: var(--hdx-accent) !important;
}

html[data-theme="light"] .hdx-public-search-icon,
body.light .hdx-public-search-icon {
  color: #94a3b8;
}

html[data-theme="light"] .hdx-mobile-search-bar,
body.light .hdx-mobile-search-bar {
  background: #ffffff !important;
  border-bottom-color: #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .hdx-mobile-search-bar .hdx-search-input,
body.light .hdx-mobile-search-bar .hdx-search-input {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .hdx-mobile-search-bar .hdx-search-input::placeholder,
body.light .hdx-mobile-search-bar .hdx-search-input::placeholder {
  color: #94a3b8 !important;
}

html[data-theme="light"] .hdx-mobile-search-bar .hdx-search-input:focus,
body.light .hdx-mobile-search-bar .hdx-search-input:focus {
  background: #ffffff !important;
  border-color: var(--hdx-accent) !important;
}

html[data-theme="light"] .hdx-mobile-search-close,
body.light .hdx-mobile-search-close {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

html[data-theme="light"] .hdx-category-search-input,
body.light .hdx-category-search-input {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .hdx-category-search-input::placeholder,
body.light .hdx-category-search-input::placeholder {
  color: #94a3b8 !important;
}

html[data-theme="light"] .hdx-category-search-input:focus,
body.light .hdx-category-search-input:focus {
  background: #ffffff !important;
  border-color: var(--hdx-accent) !important;
}

html[data-theme="light"] .hdx-search-autocomplete,
body.light .hdx-search-autocomplete {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .hdx-search-chips-row,
body.light .hdx-search-chips-row {
  background: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}

html[data-theme="light"] .hdx-search-item:hover,
body.light .hdx-search-item:hover,
html[data-theme="light"] .hdx-search-item.active,
body.light .hdx-search-item.active {
  background: #f8fafc !important;
}

html[data-theme="light"] .hdx-search-footer,
body.light .hdx-search-footer {
  background: #f8fafc !important;
  border-top-color: #e2e8f0 !important;
}

html[data-theme="light"] .hdx-search-channel-avatar-wrap,
body.light .hdx-search-channel-avatar-wrap,
html[data-theme="light"] .hdx-search-star-avatar-wrap,
body.light .hdx-search-star-avatar-wrap {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

html[data-theme="light"] .hdx-public-sort-label,
body.light .hdx-public-sort-label {
  color: #475569;
}

html[data-theme="light"] .hdx-sort-pill,
body.light .hdx-sort-pill {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}

html[data-theme="light"] .hdx-sort-pill:hover,
body.light .hdx-sort-pill:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

html[data-theme="light"] .hdx-sort-pill.active,
body.light .hdx-sort-pill.active {
  background: var(--hdx-accent);
  color: #fff !important;
  border-color: var(--hdx-accent);
}

html[data-theme="light"] .hdx-playlist-card,
body.light .hdx-playlist-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .hdx-playlist-card:hover,
body.light .hdx-playlist-card:hover {
  border-color: rgba(229, 41, 85, 0.4);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .hdx-playlist-card-title a,
body.light .hdx-playlist-card-title a {
  color: #0f172a;
}

html[data-theme="light"] .hdx-playlist-card-desc,
body.light .hdx-playlist-card-desc {
  color: #64748b;
}

html[data-theme="light"] .hdx-playlist-card-creator-name,
body.light .hdx-playlist-card-creator-name {
  color: #475569;
}

html[data-theme="light"] .hdx-playlist-card-creator-avatar,
body.light .hdx-playlist-card-creator-avatar {
  border-color: #e2e8f0;
}

html[data-theme="light"] .hdx-playlist-card-footer,
body.light .hdx-playlist-card-footer {
  border-top-color: #f1f5f9;
}

html[data-theme="light"] .hdx-playlist-card-meta,
body.light .hdx-playlist-card-meta {
  color: #64748b;
}

html[data-theme="light"] .hdx-playlist-card-meta span i,
body.light .hdx-playlist-card-meta span i {
  color: #94a3b8;
}

html[data-theme="light"] .hdx-playlist-action-btn,
body.light .hdx-playlist-action-btn {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
}

html[data-theme="light"] .hdx-playlist-action-btn:hover,
body.light .hdx-playlist-action-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

html[data-theme="light"] .hdx-playlist-action-btn.btn-view-playlist,
body.light .hdx-playlist-action-btn.btn-view-playlist {
  background: rgba(229, 41, 85, 0.08);
  border-color: rgba(229, 41, 85, 0.2);
  color: var(--hdx-accent);
}

html[data-theme="light"] .hdx-playlist-action-btn.btn-view-playlist:hover,
body.light .hdx-playlist-action-btn.btn-view-playlist:hover {
  background: var(--hdx-accent);
  color: #fff;
  border-color: var(--hdx-accent);
}

html[data-theme="light"] .hdx-public-empty-card,
body.light .hdx-public-empty-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

html[data-theme="light"] .hdx-public-empty-card h2,
body.light .hdx-public-empty-card h2 {
  color: #0f172a;
}

html[data-theme="light"] .hdx-public-empty-card p,
body.light .hdx-public-empty-card p {
  color: #64748b;
}

/* Light Mode - User Account Dropdown Menu */
html[data-theme="light"] .hdx-account-wrap .dropdown-menu.hdx-dropdown-menu,
body.light .hdx-account-wrap .dropdown-menu.hdx-dropdown-menu {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .hdx-account-wrap .dropdown-menu.hdx-dropdown-menu::-webkit-scrollbar-thumb,
body.light .hdx-account-wrap .dropdown-menu.hdx-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .hdx-menu-user-header,
body.light .hdx-menu-user-header {
  background: #f8fafc;
  border-color: #e2e8f0;
}

html[data-theme="light"] .hdx-menu-username,
body.light .hdx-menu-username {
  color: #0f172a;
}

html[data-theme="light"] .hdx-menu-bal-val,
body.light .hdx-menu-bal-val {
  color: #ca8a04;
}

html[data-theme="light"] .hdx-menu-topup-link,
body.light .hdx-menu-topup-link {
  background: #fef08a;
  border-color: #fde047;
  color: #854d0e;
}

html[data-theme="light"] .hdx-menu-vip-expire,
body.light .hdx-menu-vip-expire {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08) !important;
}

html[data-theme="light"] .hdx-menu-vip-expire i,
body.light .hdx-menu-vip-expire i {
  color: #d97706 !important;
}

html[data-theme="light"] .hdx-menu-vip-expire span,
body.light .hdx-menu-vip-expire span {
  color: #92400e !important;
}

html[data-theme="light"] .hdx-menu-vip-expire strong,
body.light .hdx-menu-vip-expire strong {
  color: #78350f !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .hdx-user-badge.standart,
body.light .hdx-user-badge.standart {
  background: #e2e8f0 !important;
  color: #475569 !important;
}

html[data-theme="light"] .hdx-menu-divider,
body.light .hdx-menu-divider {
  background: #e2e8f0;
}

html[data-theme="light"] .hdx-menu-section-label,
body.light .hdx-menu-section-label {
  color: #64748b;
  font-weight: 700;
}

html[data-theme="light"] .hdx-account-wrap .dropdown-menu .hdx-dropdown-item,
body.light .hdx-account-wrap .dropdown-menu .hdx-dropdown-item {
  color: #334155 !important;
}

html[data-theme="light"] .hdx-account-wrap .dropdown-menu .hdx-dropdown-item:hover,
body.light .hdx-account-wrap .dropdown-menu .hdx-dropdown-item:hover {
  background: rgba(229, 41, 85, 0.06) !important;
  color: var(--hdx-accent) !important;
}

html[data-theme="light"] .hdx-drawer-user-card,
body.light .hdx-drawer-user-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

/* ==========================================================================
   PROMO CODE PAGE STYLES
   ========================================================================== */
.hdx-promo-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  margin-bottom: 24px;
  align-items: start;
}

@media (max-width: 991px) {
  .hdx-promo-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.hdx-promo-box {
  background: var(--hdx-bg-card);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-lg);
  padding: 36px 28px;
  box-shadow: var(--hdx-shadow-sm);
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  transition: background-color var(--hdx-transition-base), border-color var(--hdx-transition-base);
}

html[data-theme="light"] .hdx-promo-box,
body.light .hdx-promo-box {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.hdx-promo-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #06b6d4 0%, var(--hdx-accent) 50%, var(--hdx-gold) 100%);
}

.hdx-promo-box-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--hdx-text-primary);
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

html[data-theme="light"] .hdx-promo-box-title,
body.light .hdx-promo-box-title {
  color: #0f172a;
}

.hdx-promo-box-desc {
  font-size: 13.5px;
  color: var(--hdx-text-secondary);
  max-width: 480px;
  margin: 0 auto 24px auto;
  line-height: 1.5;
}

html[data-theme="light"] .hdx-promo-box-desc,
body.light .hdx-promo-box-desc {
  color: #475569;
}

.hdx-promo-input-group {
  position: relative;
  max-width: 440px;
  margin: 0 auto 20px auto;
}

.hdx-promo-input-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hdx-accent);
  font-size: 20px;
  pointer-events: none;
}

.hdx-promo-input {
  width: 100%;
  height: 56px;
  background: var(--hdx-bg-elevated);
  border: 2px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  padding: 0 20px 0 52px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--hdx-text-primary);
  text-transform: uppercase;
  text-align: center;
  transition: all var(--hdx-transition-fast);
  box-sizing: border-box;
}

html[data-theme="light"] .hdx-promo-input,
body.light .hdx-promo-input {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

.hdx-promo-input:focus {
  border-color: var(--hdx-accent);
  background: var(--hdx-bg-base);
  box-shadow: 0 0 0 4px rgba(229, 41, 85, 0.25);
  outline: none !important;
}

html[data-theme="light"] .hdx-promo-input:focus,
body.light .hdx-promo-input:focus {
  background: #ffffff;
  border-color: var(--hdx-accent);
}

.hdx-promo-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 36px;
  background: linear-gradient(135deg, var(--hdx-accent) 0%, #b81b3f 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--hdx-radius-md);
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(229, 41, 85, 0.35);
  transition: all var(--hdx-transition-fast);
}

.hdx-promo-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(229, 41, 85, 0.5);
  color: #fff;
}

.hdx-promo-hint {
  font-size: 12.5px;
  color: var(--hdx-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.4;
}

html[data-theme="light"] .hdx-promo-hint,
body.light .hdx-promo-hint {
  color: #64748b;
}

.hdx-promo-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--hdx-bg-elevated);
  border: 1px solid var(--hdx-border);
  border-radius: var(--hdx-radius-md);
  margin-bottom: 10px;
  transition: all var(--hdx-transition-fast);
  text-decoration: none !important;
}

html[data-theme="light"] .hdx-promo-sidebar-item,
body.light .hdx-promo-sidebar-item {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.hdx-promo-sidebar-item:hover {
  border-color: var(--hdx-accent);
  transform: translateX(3px);
}

html[data-theme="light"] .hdx-promo-sidebar-item:hover,
body.light .hdx-promo-sidebar-item:hover {
  background: #f1f5f9;
  border-color: var(--hdx-accent);
}

.hdx-promo-sidebar-item.featured {
  border-color: rgba(212, 160, 66, 0.45);
  background: linear-gradient(90deg, rgba(212, 160, 66, 0.1) 0%, var(--hdx-bg-elevated) 100%);
}

.hdx-promo-sidebar-item.yearly {
  border-color: rgba(139, 92, 246, 0.45);
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.1) 0%, var(--hdx-bg-elevated) 100%);
}

/* Promo Code History Table & Responsive Mobile Cards */
.hdx-promo-history-badge {
  background: var(--hdx-bg-elevated);
  color: var(--hdx-text-secondary);
  border: 1px solid var(--hdx-border);
  padding: 5px 12px;
  border-radius: 12px;
  font-size: 12px;
}

html[data-theme="light"] .hdx-promo-history-badge,
body.light .hdx-promo-history-badge {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}

.hdx-promo-code-pill {
  font-family: monospace;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--hdx-accent);
  background: rgba(229, 41, 85, 0.08);
  border: 1px solid rgba(229, 41, 85, 0.25);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.05em;
  display: inline-block;
}

html[data-theme="light"] .hdx-promo-code-pill,
body.light .hdx-promo-code-pill {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #e11d48;
}

.hdx-promo-status-pill {
  font-size: 12.5px;
  font-weight: 700;
  color: #10b981;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

html[data-theme="light"] .hdx-promo-status-pill,
body.light .hdx-promo-status-pill {
  color: #059669;
}

/* Promo Benefit Badges (Fixes position: absolute bug and guarantees clean flex rendering) */
.hdx-promo-benefit-badge {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

.hdx-promo-benefit-badge.badge-credit {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.hdx-promo-benefit-badge.badge-monthly {
  background: rgba(229, 41, 85, 0.15) !important;
  color: #ff5e82 !important;
  border: 1px solid rgba(229, 41, 85, 0.35) !important;
}

.hdx-promo-benefit-badge.badge-weekly {
  background: rgba(6, 182, 212, 0.15) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(6, 182, 212, 0.35) !important;
}

.hdx-promo-benefit-badge.badge-three-months {
  background: rgba(212, 160, 66, 0.15) !important;
  color: var(--hdx-gold) !important;
  border: 1px solid rgba(212, 160, 66, 0.35) !important;
}

.hdx-promo-benefit-badge.badge-yearly {
  background: rgba(139, 92, 246, 0.15) !important;
  color: #c4b5fd !important;
  border: 1px solid rgba(139, 92, 246, 0.35) !important;
}

.hdx-promo-benefit-badge.badge-default {
  background: var(--hdx-bg-elevated) !important;
  color: var(--hdx-text-secondary) !important;
  border: 1px solid var(--hdx-border) !important;
}

/* Light Theme Benefit Badges */
html[data-theme="light"] .hdx-promo-benefit-badge.badge-credit,
body.light .hdx-promo-benefit-badge.badge-credit {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #059669 !important;
}

html[data-theme="light"] .hdx-promo-benefit-badge.badge-monthly,
body.light .hdx-promo-benefit-badge.badge-monthly {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #e11d48 !important;
}

html[data-theme="light"] .hdx-promo-benefit-badge.badge-weekly,
body.light .hdx-promo-benefit-badge.badge-weekly {
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0284c7 !important;
}

html[data-theme="light"] .hdx-promo-benefit-badge.badge-three-months,
body.light .hdx-promo-benefit-badge.badge-three-months {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
}

html[data-theme="light"] .hdx-promo-benefit-badge.badge-yearly,
body.light .hdx-promo-benefit-badge.badge-yearly {
  background: #f5f3ff !important;
  border-color: #ddd6fe !important;
  color: #7c3aed !important;
}

html[data-theme="light"] .hdx-promo-benefit-badge.badge-default,
body.light .hdx-promo-benefit-badge.badge-default {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

/* Empty History State */
.hdx-promo-empty-history {
  text-align: center;
  padding: 48px 20px;
}

.hdx-promo-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--hdx-bg-elevated);
  border: 1px solid var(--hdx-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px auto;
  font-size: 22px;
  color: var(--hdx-text-muted);
}

.hdx-promo-empty-history h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--hdx-text-primary);
  margin: 0 0 6px 0;
}

.hdx-promo-empty-history p {
  font-size: 13px;
  color: var(--hdx-text-muted);
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.45;
}

/* ==========================================================================
   PROMO CODE PAGE MOBILE RESPONSIVE OPTIMIZATIONS (< 768px)
   ========================================================================== */
@media (max-width: 767px) {
  .hdx-promo-grid {
    gap: 16px !important;
    margin-bottom: 16px !important;
  }

  /* Hero Section on Mobile */
  .hdx-requests-hero {
    flex-direction: column !important;
    padding: 16px 14px !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
    border-radius: 14px !important;
  }

  .hdx-requests-hero-left {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .hdx-requests-hero-icon {
    width: 46px !important;
    height: 46px !important;
    font-size: 20px !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
  }

  .hdx-requests-hero-meta h1 {
    font-size: 17px !important;
    line-height: 1.3 !important;
    margin: 0 0 3px 0 !important;
  }

  .hdx-requests-hero-meta p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .hdx-requests-hero-actions {
    width: 100% !important;
  }

  .hdx-requests-hero-actions .hdx-vip-button,
  .hdx-requests-hero-actions .hdx-btn,
  .hdx-requests-hero-actions a {
    width: 100% !important;
    height: 42px !important;
    justify-content: center !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 13.5px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  /* Activation Box on Mobile */
  .hdx-promo-box {
    padding: 22px 14px !important;
    margin-bottom: 16px !important;
    border-radius: 14px !important;
  }

  .hdx-promo-box-title {
    font-size: 17px !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
  }

  .hdx-promo-box-desc {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 16px !important;
    max-width: 100% !important;
  }

  .hdx-promo-input-group {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 14px !important;
  }

  .hdx-promo-input-icon {
    left: 14px !important;
    font-size: 17px !important;
  }

  .hdx-promo-input {
    height: 48px !important;
    font-size: 14.5px !important;
    letter-spacing: 0.08em !important;
    padding: 0 14px 0 42px !important;
    border-radius: 10px !important;
  }

  .hdx-promo-input::placeholder {
    font-size: 12.5px !important;
    letter-spacing: 0.04em !important;
  }

  .hdx-promo-submit-btn {
    width: 100% !important;
    height: 46px !important;
    font-size: 14px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    justify-content: center !important;
  }

  .hdx-promo-hint {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* 4-Item Benefits Grid on Mobile */
  .hdx-promo-grid .hdx-requests-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  .hdx-promo-grid .hdx-requests-stat-card {
    padding: 12px 10px !important;
    gap: 8px !important;
    border-radius: 10px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .hdx-promo-grid .hdx-requests-stat-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
  }

  .hdx-promo-grid .hdx-requests-stat-info h4 {
    font-size: 12px !important;
    font-weight: 700 !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.3 !important;
  }

  .hdx-promo-grid .hdx-requests-stat-info p {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    color: var(--hdx-text-secondary) !important;
  }

  /* Sidebar VIP Packages on Mobile */
  .hdx-request-card {
    border-radius: 14px !important;
  }

  .hdx-promo-sidebar-item {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
  }

  /* History Table transformed to Cards on Mobile */
  .hdx-promo-table thead {
    display: none !important;
  }

  .hdx-promo-table,
  .hdx-promo-table tbody,
  .hdx-promo-table tr {
    display: block !important;
    width: 100% !important;
  }

  .hdx-promo-table tr {
    padding: 14px 14px !important;
    border-bottom: 1px solid var(--hdx-border) !important;
    background: var(--hdx-bg-card) !important;
  }

  .hdx-promo-table tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02) !important;
  }

  html[data-theme="light"] .hdx-promo-table tr:nth-child(even),
  body.light .hdx-promo-table tr:nth-child(even) {
    background: #f8fafc !important;
  }

  .hdx-promo-table td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 0 !important;
    border: none !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08) !important;
    font-size: 13px !important;
    width: 100% !important;
    text-align: right !important;
    box-sizing: border-box !important;
    position: static !important;
    gap: 12px !important;
  }

  .hdx-promo-table td:last-child {
    border-bottom: none !important;
  }

  html[data-theme="light"] .hdx-promo-table td,
  body.light .hdx-promo-table td {
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
  }

  .hdx-promo-table td::before {
    content: attr(data-label);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--hdx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    text-align: left;
    margin-right: 8px;
  }

  /* Reset all children of td to static positioning so nothing can overlap */
  .hdx-promo-table td > *,
  .hdx-promo-table td .hdx-promo-benefit-badge,
  .hdx-promo-table td .hdx-badge,
  .hdx-promo-table td span,
  .hdx-promo-table td div {
    position: static !important;
  }

  .hdx-promo-benefit-badge {
    position: static !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }

  .hdx-promo-date-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .hdx-promo-date-day {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--hdx-text-primary) !important;
  }

  html[data-theme="light"] .hdx-promo-date-day,
  body.light .hdx-promo-date-day {
    color: #0f172a !important;
  }

  .hdx-promo-date-time {
    font-size: 11.5px !important;
    color: var(--hdx-text-muted) !important;
  }

  html[data-theme="light"] .hdx-promo-date-time,
  body.light .hdx-promo-date-time {
    color: #64748b !important;
  }

  .hdx-promo-code-pill {
    font-size: 12.5px !important;
    padding: 3px 8px !important;
  }

  .hdx-promo-status-pill {
    font-size: 12px !important;
  }

  .hdx-promo-empty-history {
    padding: 32px 14px !important;
  }

  .hdx-promo-empty-icon {
    width: 46px !important;
    height: 46px !important;
    font-size: 18px !important;
  }
}


/* ==========================================================================
   HDX Video Report Modal Styles
   ========================================================================== */
.hdx-report-reasons-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hdx-report-reason-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--hdx-bg-elevated, #1c212d);
  border: 1px solid var(--hdx-card-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--hdx-radius-sm, 8px);
  cursor: pointer;
  margin: 0;
  transition: all 0.2s ease;
  user-select: none;
}

.hdx-report-reason-item:hover {
  border-color: rgba(229, 41, 85, 0.6) !important;
  background: rgba(229, 41, 85, 0.05) !important;
}

.hdx-report-reason-item input[type="radio"] {
  accent-color: var(--hdx-accent, #e52955);
  width: 17px;
  height: 17px;
  margin: 0;
  cursor: pointer;
}

.hdx-report-reason-text {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hdx-text-main, #fff);
}

.hdx-report-reason-item:has(input:checked) {
  border-color: var(--hdx-accent, #e52955) !important;
  background: rgba(229, 41, 85, 0.08) !important;
}

.hdx-watch-btn.reported {
  color: #e52955 !important;
  border-color: rgba(229, 41, 85, 0.35) !important;
  background: rgba(229, 41, 85, 0.1) !important;
}

html[data-theme="light"] .hdx-report-reason-item,
body.light .hdx-report-reason-item {
  background: #f8fafc;
  border-color: #e2e8f0;
}

html[data-theme="light"] .hdx-report-reason-text,
body.light .hdx-report-reason-text {
  color: #1e293b;
}

html[data-theme="light"] .hdx-report-reason-item:hover,
body.light .hdx-report-reason-item:hover {
  background: #fff1f2 !important;
  border-color: #e52955 !important;
}

html[data-theme="light"] .hdx-report-reason-item:has(input:checked),
body.light .hdx-report-reason-item:has(input:checked) {
  background: #ffe4e6 !important;
  border-color: #e52955 !important;
}

html[data-theme="light"] .hdx-btn-secondary,
body.light .hdx-btn-secondary {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

html[data-theme="light"] .hdx-btn-secondary:hover,
body.light .hdx-btn-secondary:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  text-decoration: none !important;
}

/* ==========================================================================
   27. SITE-WIDE GLOBAL MOBILE RESPONSIVENESS & TOUCH OPTIMIZATIONS
   ========================================================================== */

/* Universal Ad Banner Mobile Scaling & Containment */
.hdx-banner-wrap {
  max-width: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.hdx-banner-wrap img,
.hdx-banner-wrap iframe,
.hdx-banner-wrap a,
.hdx-banner-wrap svg {
  max-width: 100% !important;
  height: auto !important;
}

/* Mobile Breadcrumbs */
@media (max-width: 767px) {
  .hdx-breadcrumbs {
    font-size: 12px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-top: 10px !important;
    margin-bottom: 8px !important;
  }

  .hdx-breadcrumb-current {
    max-width: 170px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: bottom !important;
    display: inline-block !important;
  }
}

/* Video Watch Page Mobile Notice & Meta */
@media (max-width: 640px) {
  .hdx-watch-notice {
    padding: 10px 12px !important;
    font-size: 12px !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .hdx-watch-notice i {
    font-size: 16px !important;
  }

  .hdx-watch-meta-strip {
    gap: 6px 12px !important;
    flex-wrap: wrap !important;
  }

  .hdx-meta-item {
    font-size: 12px !important;
  }

  .hdx-watch-desc-content {
    margin-top: 12px !important;
  }

  .hdx-watch-desc-text {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .hdx-comments-empty {
    padding: 24px 14px !important;
  }

  .hdx-comments-empty-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }

  .hdx-comments-empty-text {
    font-size: 12.5px !important;
  }
}

/* Video Watch Page Sidebar Cards on Small Mobile */
@media (max-width: 420px) {
  .hdx-sidebar-thumb {
    width: 125px !important;
  }
  .hdx-sidebar-title {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  .hdx-sidebar-meta {
    font-size: 11px !important;
    gap: 8px !important;
  }
}

/* User Profile & Dashboard Cards Mobile Touch */
@media (max-width: 767px) {
  .hdx-uprofile-card {
    padding: 18px 14px !important;
  }

  .hdx-uprofile-section {
    padding: 16px 12px !important;
    margin-bottom: 16px !important;
  }

  .hdx-uprofile-avatar-circle {
    width: 76px !important;
    height: 76px !important;
    font-size: 34px !important;
  }

  .hdx-uprofile-user-title {
    font-size: 17px !important;
  }

  .hdx-uprofile-stats-grid {
    gap: 8px !important;
    margin: 14px 0 !important;
  }

  .hdx-uprofile-stat-item {
    padding: 10px 6px !important;
  }

  .hdx-uprofile-stat-value {
    font-size: 15px !important;
  }

  .hdx-uprofile-security-banner {
    padding: 12px 14px !important;
    font-size: 12.5px !important;
  }
}

/* VIP & Premium Pricing User Bar Stacking */
@media (max-width: 767px) {
  .hdx-pricing-user-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .hdx-pricing-user-info {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 13px !important;
  }
}

/* Help Desk & Ticket Chat Header/Footer Mobile */
@media (max-width: 767px) {
  .hdx-ticket-chat-header {
    padding: 14px 16px !important;
    gap: 12px !important;
  }

  .hdx-ticket-chat-title {
    font-size: 16px !important;
  }

  .hdx-ticket-chat-footer {
    padding: 14px 16px !important;
  }
}

/* Responsive Tables Global Smooth Touch */
.hdx-table-responsive {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: block !important;
}

/* Global Mobile Modal Optimization */
@media (max-width: 767px) {
  .hdx-modal-dialog {
    width: calc(100% - 24px) !important;
    margin: 12px auto !important;
    border-radius: 14px !important;
  }

  .hdx-modal-header {
    padding: 14px 16px !important;
  }

  .hdx-modal-title {
    font-size: 15px !important;
  }

  .hdx-modal-body {
    padding: 16px 14px !important;
    max-height: calc(85vh - 110px) !important;
  }

  .hdx-modal-footer {
    padding: 12px 14px !important;
    gap: 8px !important;
  }
}

/* Auth Cards Mobile Touch */
@media (max-width: 480px) {
  .hdx-auth-card {
    padding: 22px 16px !important;
  }

  .hdx-auth-input {
    font-size: 14px !important;
    height: 44px !important;
  }

  .hdx-auth-btn-primary {
    height: 44px !important;
    font-size: 14px !important;
  }
}

/* Mobile Header & Sticky Category Sub-Nav Strip */
@media (max-width: 767px) {
  .hdx-mobile-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 56px !important;
    padding: 0 12px !important;
    background: var(--hdx-header-bg) !important;
    border-bottom: 1px solid var(--hdx-border) !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  /* Subnav hidden on mobile */
  .hdx-subnav {
    display: none !important;
  }

  /* All video grids strictly single-column on mobile */
  .hdx-video-grid,
  .hdx-history-grid,
  .hdx-watch-later-grid,
  .hdx-playlist-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Video sections spacing when featured hero is hidden */
  .hdx-featured-hero {
    display: none !important;
  }

  .hdx-container > .hdx-section:first-of-type,
  .hdx-content-wrapper > .hdx-container > .hdx-section:first-of-type {
    margin-top: 18px !important;
  }

  /* ==========================================================================
     USER ACCOUNT & PROFILE MOBILE EXCELLENCE (.hdx-uprofile)
     ========================================================================== */
  .hdx-profile-page .hdx-fav-header-bar,
  .hidden-xs {
    display: none !important;
  }

  .hdx-uprofile-card {
    padding: 20px 16px !important;
    border-radius: 14px !important;
    margin-bottom: 0 !important;
  }

  /* Compact & Modern Mobile Profile Header */
  .hdx-uprofile-id-card {
    padding: 14px 16px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(234, 44, 90, 0.08), rgba(245, 158, 11, 0.05), var(--hdx-bg-card)) !important;
  }

  .hdx-uprofile-avatar-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    padding-bottom: 12px !important;
    gap: 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  .hdx-uprofile-avatar-circle {
    width: 54px !important;
    height: 54px !important;
    font-size: 24px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }

  .hdx-uprofile-crown-badge {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
  }

  .hdx-uprofile-avatar-info {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .hdx-uprofile-user-title {
    font-size: 16px !important;
    margin: 0 0 2px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .hdx-uprofile-user-email {
    font-size: 12px !important;
    margin: 0 0 6px 0 !important;
    color: var(--hdx-text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .hdx-uprofile-tier-badge {
    display: inline-flex !important;
    padding: 2px 8px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
  }

  /* Compact Stats Bar */
  .hdx-uprofile-stats-grid {
    display: flex !important;
    align-items: center !important;
    margin: 10px 0 0 0 !important;
    gap: 8px !important;
  }

  .hdx-uprofile-stat-item {
    flex: 1 !important;
    padding: 8px 10px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px !important;
    text-align: center !important;
  }

  .hdx-uprofile-stat-value {
    font-size: 14.5px !important;
    font-weight: 700 !important;
  }

  .hdx-uprofile-stat-label {
    font-size: 10px !important;
    color: var(--hdx-text-muted) !important;
    margin-top: 2px !important;
  }

  .hdx-uprofile-stat-action {
    display: none !important;
  }

  .hdx-uprofile-vip-expire-box {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding: 7px 12px !important;
    font-size: 11.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: rgba(245, 158, 11, 0.08) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
    border-radius: 8px !important;
  }

  .hdx-uprofile-vip-expire-label {
    font-size: 11px !important;
    margin-bottom: 0 !important;
  }

  .hdx-uprofile-vip-expire-date {
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  /* Form Card Mobile Polish */
  .hdx-uprofile-main {
    padding: 16px 14px !important;
    border-radius: 14px !important;
  }

  /* Compact Security Banner */
  .hdx-uprofile-security-banner {
    padding: 10px 12px !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
    border-radius: 10px !important;
  }

  .hdx-uprofile-security-icon {
    font-size: 18px !important;
  }

  .hdx-uprofile-security-title {
    display: inline !important;
    margin-right: 4px !important;
  }

  /* Compact Form Sections */
  .hdx-uprofile-section {
    padding: 12px !important;
    margin-bottom: 12px !important;
    border-radius: 10px !important;
  }

  .hdx-uprofile-sec-head {
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
  }

  .hdx-uprofile-sec-title {
    font-size: 13.5px !important;
  }

  .hdx-uprofile-group {
    margin-bottom: 10px !important;
  }

  .hdx-uprofile-label {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  .hdx-uprofile-help {
    display: none !important; /* Hide verbose help hints under inputs */
  }

  .hdx-uprofile-input,
  input.hdx-uprofile-input,
  .hdx-uprofile-input-wrap input.hdx-uprofile-input {
    height: 44px !important;
    font-size: 13.5px !important;
    border-radius: 8px !important;
  }

  .hdx-uprofile-form-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }

  .hdx-uprofile-form-footer .hdx-btn-secondary {
    display: none !important; /* Hide redundant Ana Sayfa button */
  }

  .hdx-uprofile-form-footer #btnSaveProfile {
    width: 100% !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
  }

  /* Hide redundant bottom links grid on mobile (cleaner experience) */
  .hdx-uprofile-links-card {
    display: none !important;
  }

  /* Account Management Hub Pages Mobile Polish */
  .hdx-payments-overview {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px 16px !important;
  }

  .hdx-payments-actions {
    width: 100% !important;
    display: flex !important;
    gap: 10px !important;
  }

  .hdx-payments-actions .hdx-btn {
    flex: 1 !important;
    text-align: center !important;
    justify-content: center !important;
    height: 44px !important;
  }

  .hdx-accounts-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .hdx-payment-steps {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hdx-requests-hero {
    flex-direction: column !important;
    padding: 18px 16px !important;
    gap: 14px !important;
  }

  .hdx-requests-hero-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .hdx-requests-hero-actions .hdx-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .hdx-requests-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* ==========================================================================
   GUEST VIP PAYWALL ALERT & TOAST NOTIFICATION
   ========================================================================== */
.hdx-guest-vip-alert {
  margin-top: 18px;
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.35);
  border-radius: var(--hdx-radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  animation: hdxAlertSlideDown 0.25s ease-out;
}

@keyframes hdxAlertSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hdx-guest-vip-alert.pulse-attention {
  animation: hdxAlertPulse 0.5s ease-in-out;
}

@keyframes hdxAlertPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 25px rgba(234, 179, 8, 0.45);
    border-color: #facc15;
  }
}

.hdx-guest-alert-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(234, 179, 8, 0.18);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.hdx-guest-alert-content {
  flex: 1;
  min-width: 0;
}

.hdx-guest-alert-title {
  font-size: 14px;
  font-weight: 700;
  color: #fef08a;
  margin-bottom: 3px;
}

.hdx-guest-alert-text {
  font-size: 12.5px;
  color: #cbd5e1;
  line-height: 1.45;
}

.hdx-guest-alert-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--hdx-accent);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--hdx-radius-sm);
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--hdx-transition-fast);
  box-shadow: 0 2px 10px rgba(229, 41, 85, 0.35);
}

.hdx-guest-alert-action:hover {
  background: var(--hdx-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(229, 41, 85, 0.5);
  color: #fff !important;
}

.hdx-login-btn-pulse {
  animation: hdxLoginBtnPulse 0.6s ease-in-out;
}

@keyframes hdxLoginBtnPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: none;
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 22px rgba(229, 41, 85, 0.75);
  }
}

/* Toast alert container */
.hdx-toast-container {
  position: fixed;
  top: 76px;
  right: 20px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.hdx-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #171a22;
  color: #f3f4f6;
  border: 1px solid rgba(234, 179, 8, 0.4);
  padding: 12px 18px;
  border-radius: var(--hdx-radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 20px rgba(234, 179, 8, 0.15);
  font-size: 13.5px;
  font-weight: 600;
  animation: hdxToastIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.25s, transform 0.25s;
  max-width: 420px;
}

.hdx-toast i.toast-icon {
  color: #facc15;
  font-size: 18px;
  flex-shrink: 0;
}

.hdx-toast .toast-btn {
  margin-left: auto;
  background: var(--hdx-accent);
  color: #fff !important;
  padding: 6px 14px;
  border-radius: var(--hdx-radius-xs);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(229, 41, 85, 0.35);
}

.hdx-toast .toast-btn:hover {
  background: var(--hdx-accent-hover);
}

.hdx-toast-close {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 18px;
  cursor: pointer;
  padding: 0 0 0 6px;
  line-height: 1;
}

.hdx-toast-close:hover {
  color: #fff;
}

@keyframes hdxToastIn {
  from {
    opacity: 0;
    transform: translateY(-15px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Light Theme Overrides */
html[data-theme="light"] .hdx-guest-vip-alert,
body.light .hdx-guest-vip-alert {
  background: #fefce8;
  border-color: #fde047;
}

html[data-theme="light"] .hdx-guest-alert-title,
body.light .hdx-guest-alert-title {
  color: #854d0e;
}

html[data-theme="light"] .hdx-guest-alert-text,
body.light .hdx-guest-alert-text {
  color: #475569;
}

html[data-theme="light"] .hdx-toast,
body.light .hdx-toast {
  background: #ffffff;
  color: #0f172a;
  border-color: #fde047;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

@media (max-width: 767px) {
  .hdx-guest-vip-alert {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .hdx-guest-alert-icon {
    margin: 0 auto;
  }
  .hdx-guest-alert-action {
    width: 100%;
    justify-content: center;
  }
  .hdx-toast-container {
    top: 60px;
    right: 12px;
    left: 12px;
  }
  .hdx-toast {
    max-width: 100%;
  }
}