/* YouTube Dark Theme - Modern, Sleek, Video-Centric Design */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

[data-theme="youtube"] {
  /* Core Variables */
  --yt-font-primary: 'Roboto', system-ui, sans-serif;
  --yt-primary: #FF0000;      /* YouTube Red */
  --yt-secondary: #AAAAAA;    /* Light Gray */
  --yt-accent: #3EA6FF;       /* Blue for links/actions */
  --yt-bg: #0F0F0F;          /* Dark background */
  --yt-surface: #282828;      /* Card/Element background */
  --yt-border: #3F3F3F;       /* Subtle borders */
  --yt-text: #FFFFFF;         /* White text */
  --yt-text-secondary: #AAAAAA; /* Secondary text */
  --yt-hover-bg: #3F3F3F;     /* Hover state background */
  --yt-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  --yt-text-light: #e0e0e0;   /* Lighter text for paragraphs */
  --yt-bg-soft: #1A1A1A;      /* Lighter background for soft elements */
}

/* Base Typography */
[data-theme="youtube"],
[data-theme="youtube"] html,
[data-theme="youtube"] body {
  font-family: var(--yt-font-primary);
  background-color: var(--yt-bg) !important;
  color: var(--yt-text);
  letter-spacing: 0;
}

/* Content Background */
[data-theme="youtube"] .content.container-fluid {
  background-color: var(--yt-bg) !important;
}

[data-theme="youtube"] main#content {
  background-color: var(--yt-bg) !important;
}

[data-theme="youtube"] h1,
[data-theme="youtube"] h2,
[data-theme="youtube"] h3,
[data-theme="youtube"] h4,
[data-theme="youtube"] h5,
[data-theme="youtube"] h6 {
  font-family: var(--yt-font-primary);
  font-weight: 500;
  color: #fff !important;
}

/* Navigation */
[data-theme="youtube"] .navbar {
  background: var(--yt-bg) !important;
  border: none;
  box-shadow: none;
  padding: 0.5rem 1rem !important;
}

[data-theme="youtube"] .navbar-brand,
[data-theme="youtube"] #brand_name {
  color: var(--yt-text) !important;
  font-weight: 500;
}

/* Category Headers */
[data-theme="youtube"] .category-header {
  background: transparent !important;
  color: var(--yt-text) !important;
  border: none;
  font-weight: 500;
}

/* Product Grid */
[data-theme="youtube"] .product-item {
  background: var(--yt-surface);
  border: none;
  border-radius: 4px;
  transition: all 0.2s ease;
  margin: 0.5rem;
  overflow: hidden;
}

[data-theme="youtube"] .product-item:hover {
  background: var(--yt-hover-bg);
  transform: translateY(-2px);
}

[data-theme="youtube"] .product-details {
  padding: 1rem;
}

[data-theme="youtube"] .product-title {
  font-weight: 500;
  color: var(--yt-text);
}

[data-theme="youtube"] .product-price {
  color: var(--yt-text);
  font-weight: 500;
}

/* Buttons */
[data-theme="youtube"] .btn {
  border: none !important;
  border-radius: 2px;
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}

[data-theme="youtube"] .btn:hover {
  transform: translateY(-1px);
  background: var(--yt-hover-bg);
}

[data-theme="youtube"] .btn-success,
[data-theme="youtube"] #buy_now_top .btn-success {
  background: var(--yt-primary) !important;
  color: var(--yt-text) !important;
}

[data-theme="youtube"] .btn-primary {
  background: var(--yt-accent) !important;
  color: var(--yt-text) !important;
}

/* Danger Elements */
[data-theme="youtube"] .btn-danger,
[data-theme="youtube"] .bg-danger {
  background-color: var(--yt-primary) !important;
}

[data-theme="youtube"] .text-danger {
  color: var(--yt-primary) !important;
}

/* Cards */
[data-theme="youtube"] .card {
  background: var(--yt-surface);
  border: none !important;
  border-radius: 12px;
  box-shadow: var(--yt-shadow);
}

/* Form Elements */
[data-theme="youtube"] .form-control,
[data-theme="youtube"] .ts-control {
  background: var(--yt-surface);
  border: 1px solid var(--yt-border) !important;
  border-radius: 8px;
  color: var(--yt-text);
}

[data-theme="youtube"] .form-check-input {
  border: 1px solid var(--yt-border);
  border-radius: 4px;
}

/* Dropdowns */
[data-theme="youtube"] .dropdown-menu,
[data-theme="youtube"] .hs-sub-menu {
  background: var(--yt-surface);
  border: 1px solid var(--yt-border);
  border-radius: 8px;
  box-shadow: var(--yt-shadow);
}

[data-theme="youtube"] .dropdown-item {
  color: var(--yt-text);
  font-weight: 400;
  padding: 0.5rem 1rem;
}

[data-theme="youtube"] .dropdown-item:hover {
  background: var(--yt-hover-bg);
  color: var(--yt-text);
}

/* Footer */
[data-theme="youtube"] footer#store_footer {
  background: var(--yt-bg);
  border-top: 1px solid var(--yt-border);
  color: var(--yt-text-secondary);
  padding: 2rem 0;
}

[data-theme="youtube"] footer#store_footer a {
  color: var(--yt-text-secondary) !important;
  font-weight: 400;
  text-decoration: none;
}

[data-theme="youtube"] footer#store_footer a:hover {
  color: var(--yt-text) !important;
}

/* Badges */
[data-theme="youtube"] .badge {
  background: var(--yt-surface);
  color: var(--yt-text) !important;
  border: none;
  border-radius: 4px;
  font-weight: 500;
  padding: 0.1rem 0.1rem !important;
}

/* Cart Elements */
[data-theme="youtube"] div#cart_col * {
  font-family: var(--yt-font-primary) !important;
}

[data-theme="youtube"] .cart-item {
  background: var(--yt-surface);
  border: 1px solid var(--yt-border);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* Select Options */
[data-theme="youtube"] select option {
  font-family: var(--yt-font-primary);
  background: var(--yt-surface);
  color: var(--yt-text);
}

/* Product Featured Title */
[data-theme="youtube"] .product-title-featured {
  background: var(--yt-surface);
  color: var(--yt-text);
  border-radius: 8px;
  padding: 1rem;
  font-weight: 500;
}

/* Soft Background Elements */
[data-theme="youtube"] .bg-soft-secondary {
  background: var(--yt-bg-soft) !important;
  border: none;
  border-radius: 4px;
}

/* Cart Count Badge */
[data-theme="youtube"] span#cart_count {
  background: var(--yt-primary) !important;
  color: var(--yt-text) !important;
  border: none;
  border-radius: 12px;
  font-weight: 500;
  padding: 0.2em 0.5em !important;
}

/* Alert Styling */
[data-theme="youtube"] .alert-soft-info {
  border-radius: 8px;
  color: var(--yt-text) !important;
}

/* Tags */
[data-theme="youtube"] div#tags .badge {
  background: var(--yt-surface) !important;
  color: var(--yt-text-secondary) !important;
  border: 1px solid var(--yt-border);
}

/* Fix for page content height */
[data-theme="youtube"] main#content.not-iframe {
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
}

[data-theme="youtube"] .content {
  flex: 1;
}

/* Additional Button Styles */
[data-theme="youtube"] .btn-outline-primary {
  border: 1px solid var(--yt-accent) !important;
  color: var(--yt-accent) !important;
  background: transparent !important;
}

[data-theme="youtube"] .btn-outline-primary:hover {
  background: var(--yt-accent) !important;
  color: var(--yt-text) !important;
}

/* Cart Page Specific */
[data-theme="youtube"] .cart-page .btn-primary,
[data-theme="youtube"] .cart-page .btn-outline-primary:hover {
  color: var(--yt-text) !important;
}

/* Buy Now Top */
[data-theme="youtube"] li#buy_now_top {
  margin-right: 1rem !important;
}

/* Form Check Input */
[data-theme="youtube"] .form-check-input:checked {
  background-color: var(--yt-accent) !important;
  border-color: var(--yt-accent) !important;
}

/* Cart Dropdown */
[data-theme="youtube"] div#cart_dropdown select,
[data-theme="youtube"] div#cart_dropdown .ts-control {
  color: var(--yt-text) !important;
  background: var(--yt-surface) !important;
}

[data-theme="youtube"] div#cart_dropdown .ts-dropdown * {
  color: var(--yt-text) !important;
}

/* Cart Items */
[data-theme="youtube"] .cart-item select,
[data-theme="youtube"] .cart-item .form-select {
  font-family: var(--yt-font-primary) !important;
  background: var(--yt-surface);
  color: var(--yt-text);
}

/* Buyer Div */
[data-theme="youtube"] div#buyer_div .card-body * {
  font-family: var(--yt-font-primary) !important;
}

/* Tom Select Custom */
[data-theme="youtube"] .tom-select-custom .ts-control {
  height: 38px !important;
  background: var(--yt-surface);
}

[data-theme="youtube"] .tom-select-custom .ts-dropdown {
  background: var(--yt-surface);
  border: 1px solid var(--yt-border);
  border-radius: 8px;
  color: var(--yt-text);
}

[data-theme="youtube"] .tom-select-custom .ts-dropdown .option.active {
  color: var(--yt-text);
}

/* Product Tab Pane */
[data-theme="youtube"] div#product_page_tabs .nav-link.active {
  color: var(--yt-accent) !important;
  border-bottom: 2px solid var(--yt-accent) !important;
}

[data-theme="youtube"] div#product_page_tabs .nav-link {
  color: var(--yt-text-secondary) !important;
}

/* Form Check Label */
[data-theme="youtube"] .form-check-label-highlighter .form-check-label {
  background: var(--yt-surface);
  border: 1px solid var(--yt-border);
  border-radius: 8px;
}

/* Cart Paid */
[data-theme="youtube"] #cart_paid {
  min-height: calc(100vh - 400px);
  background: var(--yt-bg);
}

/* Logo */
[data-theme="youtube"] .navbar-brand-logo {
  margin-left: 1rem !important;
}

/* Powered By Section */
[data-theme="youtube"] div#powered_by {
  margin-top: 2rem !important;
}

[data-theme="youtube"] div#powered_by a {
  color: var(--yt-text-secondary) !important;
}

/* Right Panel */
[data-theme="youtube"] div#right_panel {
  background: var(--yt-surface);
  border: none !important;
  border-radius: 12px;
}

/* Cart and Category Buttons */
[data-theme="youtube"] .btn-ghost-secondary.cart-button.btn-icon.rounded-circle,
[data-theme="youtube"] .btn-ghost-secondary.btn-icon.rounded-circle {
  border-radius: 50% !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0.5rem !important;
  position: relative !important;
  background: var(--yt-surface) !important;
  color: var(--yt-text) !important;
}

[data-theme="youtube"] .btn-ghost-secondary.cart-button.btn-icon.rounded-circle:hover,
[data-theme="youtube"] .btn-ghost-secondary.btn-icon.rounded-circle:hover {
  background: var(--yt-hover-bg) !important;
}

/* Ensure the nav items have proper spacing */
[data-theme="youtube"] #store_navbar .nav-item {
  margin: 0 0.25rem !important;
  position: relative !important;
}

/* Add padding to the navbar nav wrap */
[data-theme="youtube"] .navbar-nav-wrap {
  padding: 0.5rem !important;
}

/* Header */
[data-theme="youtube"] header#header {
  background: var(--yt-bg) !important;
  border: none !important;
}

[data-theme="youtube"] .btn-ghost-secondary, [data-theme="youtube"] .btn-ghost-dark {
  border: none !important;
  box-shadow: none !important;
}

/* Text Elements */
[data-theme="youtube"] #product_tab_pane #product_description,
[data-theme="youtube"] #page_body {
  color: var(--yt-text-light) !important;
}

[data-theme="youtube"] p,
[data-theme="youtube"] ul li,
[data-theme="youtube"] ol li,
[data-theme="youtube"] .form-label {
  color: var(--yt-text-light) !important;
}

[data-theme="youtube"] .text-dark {
  color: var(--yt-text) !important;
}

[data-theme="youtube"] a,
[data-theme="youtube"] a:visited {
  color: var(--yt-accent) !important;
}

[data-theme="youtube"] a:hover,
[data-theme="youtube"] a:active {
  color: #156fc1 !important;
}

[data-theme="youtube"] .btn-group-segment,
[data-theme="youtube"] .btn-group-fill {
  background: #18191b !important;
  border-radius: 8px;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="youtube"] .btn-group-segment .btn.btn-sm,
[data-theme="youtube"] .btn-group-fill .btn.btn-sm {
  background: #23272b !important;
  color: #fff !important;
  border: 1px solid #23272b !important;
  box-shadow: none !important;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}

[data-theme="youtube"] .btn-group-segment .btn.btn-sm:hover,
[data-theme="youtube"] .btn-group-fill .btn.btn-sm:hover,
[data-theme="youtube"] .btn-group-segment .btn.btn-sm:focus,
[data-theme="youtube"] .btn-group-fill .btn.btn-sm:focus {
  background: #282828 !important;
  color: #3EA6FF !important;
  border-color: #3EA6FF !important;
}

[data-theme="youtube"] .btn-check:checked + .btn.btn-sm {
  background: #23272b !important;
  color: #fff !important;
  border-color: #23272b !important;
}

[data-theme="youtube"] .border-danger {
  border-color: #FF0000 !important;
}

[data-theme="youtube"] .product-title-featured p {
  color: #fff !important;
  text-shadow: none !important;
}

[data-theme="youtube"] span#cart_count {
  right: 0 !important;
  top: 0 !important;
  padding-top: 0.2em !important;
}

[data-theme="youtube"] .nav-tabs {
  border-bottom: 2px solid #111 !important;
}

[data-theme="youtube"] .bg-white {
  background: var(--yt-surface) !important;
}

[data-theme="youtube"] div#cookie_consent_offcanvas {
  background: var(--yt-bg) !important;
}

[data-theme="youtube"] .btn-white {
  background: var(--yt-surface) !important;
  color: var(--yt-text) !important;
  border: none !important;
}

[data-theme="youtube"] .navbar-nav-wrap .ms-auto {
  display: flex !important;
  align-items: center !important;
}

/* Brand Description Color Override */
[data-theme="youtube"] #brand_description p,
[data-theme="youtube"] #brand_description span,
[data-theme="youtube"] #brand_description div,
[data-theme="youtube"] #brand_description a,
[data-theme="youtube"] #brand_description strong,
[data-theme="youtube"] #brand_description em {
  color: #fff !important;
}

/* Page Body Color Override */
[data-theme="youtube"] #page_body p,
[data-theme="youtube"] #page_body span,
[data-theme="youtube"] #page_body div,
[data-theme="youtube"] #page_body a,
[data-theme="youtube"] #page_body strong,
[data-theme="youtube"] #page_body em {
  color: #fff !important;
}

@media (max-width: 767.98px) {
  [data-theme="youtube"] .navbar-nav-wrap .ms-auto {
    display: flex !important;
    align-items: center !important;
  }
  [data-theme="youtube"] .navbar-nav-wrap {
    padding: 0 !important;
  }
  [data-theme="youtube"] .navbar-brand-logo {
    margin-left: 0 !important;
  }
  [data-theme="youtube"] .navbar {
    padding: 0 1rem !important;
  }
  [data-theme="youtube"] nav#store_navbar {
    background: #1A1A1A !important;
  }
}