/* ====== SITE THEME (TechTitans storefront) ====== */
/* Uses html.theme-light class, just like dashboards. */

/* Light theme overrides the per-page CSS variables (defined inline in pages). */
html.theme-light {
  --color-bg: #f0f2f5;
  --color-surface: #ffffff;
  --color-text: #0f172a; /* slate-900 */
  --color-text-muted: rgba(15, 23, 42, 0.72);
  --color-border: rgba(15, 23, 42, 0.12);
  --tt-text-soft: rgba(15, 23, 42, 0.62);
  --tt-text-faint: rgba(15, 23, 42, 0.50);
  --tt-link: #0f172a;
  --tt-link-hover: #ff5d06;
  --gradient-dark: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
  --tt-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 1px rgba(16, 24, 40, 0.04);
  --tt-shadow-md: 0 10px 26px rgba(16, 24, 40, 0.10);
  --tt-radius-lg: 16px;
  --tt-radius-md: 12px;
  --tt-ring: 0 0 0 4px rgba(255, 93, 6, 0.22);
}

/* Base surfaces */
html.theme-light body {
  background: var(--color-bg);
  color: var(--color-text);
}
html.theme-light p,
html.theme-light li,
html.theme-light dt,
html.theme-light dd {
  color: var(--color-text);
}
html.theme-light small,
html.theme-light .muted,
html.theme-light .subtle,
html.theme-light .hint,
html.theme-light .helper-text {
  color: var(--tt-text-soft) !important;
}
html.theme-light a {
  color: var(--tt-link);
}
html.theme-light a:hover {
  color: var(--tt-link-hover);
}

/* Fix gradient/transparent text headings used in some pages (FAQ/Help/Privacy, etc.) */
html.theme-light .section-header h1 {
  background: none !important;
  -webkit-text-fill-color: unset !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* Remove heavy dark-only overlays in light mode */
html.theme-light body::before {
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(255, 93, 6, 0.10) 0%, rgba(255, 93, 6, 0) 60%),
    radial-gradient(760px 460px at 82% 22%, rgba(255, 122, 51, 0.08) 0%, rgba(255, 122, 51, 0) 62%),
    linear-gradient(180deg, rgba(255, 93, 6, 0.04) 0%, rgba(255, 93, 6, 0) 55%);
}

/* Many pages force black section backgrounds; neutralize for light theme */
html.theme-light section {
  background-color: transparent !important;
}

/* Header bars */
html.theme-light .top-contact-bar {
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text-muted);
  border-bottom-color: rgba(255, 93, 6, 0.22);
}
html.theme-light .navbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(255, 93, 6, 0.35);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}
html.theme-light .category-navbar {
  background: rgba(255, 255, 255, 0.9);
  border-top-color: rgba(255, 93, 6, 0.18);
  border-bottom-color: rgba(255, 93, 6, 0.28);
}

/* Nav links */
html.theme-light .nav-links a,
html.theme-light .top-contact-item {
  color: var(--tt-text-soft);
}
html.theme-light .nav-links a:hover,
html.theme-light .top-contact-item:hover {
  color: var(--color-accent);
}
html.theme-light .nav-links a.active {
  color: rgba(15, 23, 42, 0.92) !important;
  background: rgba(255, 93, 6, 0.10) !important;
  border-radius: 999px;
}

/* Index/header inline CSS overrides: force readable colors in light mode */
html.theme-light .top-contact-bar,
html.theme-light .top-contact-bar .top-contact-item {
  color: var(--tt-text-soft) !important;
}
/* Light theme request: all icons in the top contact bar should be orange */
html.theme-light .top-contact-bar .top-contact-item i,
html.theme-light .top-contact-bar .top-contact-item svg {
  color: var(--color-accent) !important;
}
html.theme-light .top-contact-bar .top-contact-item svg {
  fill: currentColor;
}
html.theme-light .top-contact-bar .top-contact-item:hover,
html.theme-light .top-contact-bar .top-contact-item:hover i {
  color: var(--color-accent) !important;
}

html.theme-light .navbar .nav-links a {
  color: var(--tt-text-soft) !important;
}
html.theme-light .navbar .nav-links a:hover {
  color: var(--color-accent) !important;
}

html.theme-light .category-navbar .cat-trigger,
html.theme-light .category-navbar .cat-trigger--plain,
html.theme-light .category-navbar .category-toplinks,
html.theme-light .category-navbar .category-toplinks * {
  color: rgba(15, 23, 42, 0.86) !important;
}
html.theme-light .category-navbar .cat-trigger:hover,
html.theme-light .category-navbar .cat-trigger:focus-visible {
  color: var(--color-accent) !important;
}

/* Place theme toggle in top-contact-bar (top-right) */
.top-contact-inner {
  position: relative;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.top-contact-theme-slot {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.top-contact-theme-slot .site-theme-toggle-btn {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

/* Category search */
html.theme-light .category-search .search-wrap {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--tt-shadow-sm);
}
html.theme-light .category-search .search-wrap i {
  color: rgba(0, 0, 0, 0.55);
}
html.theme-light .category-search input {
  color: var(--color-text);
}
html.theme-light .category-search input::placeholder {
  color: rgba(0, 0, 0, 0.45);
}
html.theme-light .category-search select {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.7);
  color: rgba(0, 0, 0, 0.8);
}

/* Category dropdowns */
html.theme-light .cat-dropdown,
html.theme-light .category-search-suggest {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(255, 93, 6, 0.22);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12);
}
html.theme-light .cat-col a,
html.theme-light .category-search-suggest a {
  color: rgba(15, 23, 42, 0.82);
}
html.theme-light .cat-col a:hover,
html.theme-light .category-search-suggest a:hover,
html.theme-light .category-search-suggest a:focus-visible {
  background: rgba(255, 93, 6, 0.08);
  color: rgba(0, 0, 0, 0.95);
}
html.theme-light .cat-col h4 {
  color: var(--color-primary);
}
html.theme-light .cat-footer {
  border-top-color: rgba(0, 0, 0, 0.08);
}
html.theme-light .cat-pill {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.75);
  color: rgba(15, 23, 42, 0.92);
}

/* Buttons/links used across storefront */
html.theme-light .footer-login-btn,
html.theme-light .btn-continue,
html.theme-light .btn-checkout,
html.theme-light .product-card-add-btn {
  border-radius: 999px !important;
  box-shadow: var(--tt-shadow-sm);
}
html.theme-light .btn-checkout,
html.theme-light .product-card-add-btn {
  background: linear-gradient(135deg, #ff5d06 0%, #ff7a33 100%) !important;
  border: 1px solid rgba(255, 93, 6, 0.35) !important;
  color: #fff !important;
}
html.theme-light .btn-checkout:hover,
html.theme-light .product-card-add-btn:hover {
  filter: brightness(0.98);
  box-shadow: var(--tt-shadow-md);
}
html.theme-light .btn-checkout:focus-visible,
html.theme-light .product-card-add-btn:focus-visible,
html.theme-light .footer-login-btn:focus-visible,
html.theme-light .btn-continue:focus-visible {
  outline: none;
  box-shadow: var(--tt-ring), var(--tt-shadow-sm);
}

/* Common text hierarchy */
html.theme-light .page-title,
html.theme-light .section-header h1,
html.theme-light .section-header h2 {
  color: var(--color-accent) !important;
  letter-spacing: -0.02em;
}
html.theme-light .section-header p,
html.theme-light .builds-empty p,
html.theme-light .loading-state,
html.theme-light .builds-loading,
html.theme-light .cat-products-loading,
html.theme-light .cat-products-empty {
  color: var(--tt-text-soft) !important;
}

/* Product listing (products.html) */
html.theme-light .products-section {
  background: transparent !important;
}
html.theme-light .filters-bar {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: var(--tt-radius-lg) !important;
  box-shadow: var(--tt-shadow-sm);
}
html.theme-light .filters-bar .search-wrap,
html.theme-light .filters-bar input,
html.theme-light .filters-bar select {
  background: rgba(255, 255, 255, 0.9) !important;
  color: rgba(0, 0, 0, 0.90) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
}
html.theme-light .filters-bar input::placeholder {
  color: rgba(0, 0, 0, 0.45) !important;
}

html.theme-light .product-card {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: var(--tt-radius-lg) !important;
  box-shadow: var(--tt-shadow-sm);
  transform: translateY(0);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
html.theme-light .product-card-image {
  background: transparent !important;
}
html.theme-light .product-card-image img {
  background: transparent !important;
}

/* Generic: make product image area blend with card surface */
html .product-card-image {
  background: transparent;
}

/* Contact form (index.html #contact) – light theme UI */
html.theme-light #contact {
  background: transparent !important;
}
html.theme-light .contact-info h3,
html.theme-light .contact-info p,
html.theme-light .contact-detail {
  color: rgba(15, 23, 42, 0.90) !important;
}
html.theme-light .contact-detail i {
  color: var(--color-accent) !important;
}
html.theme-light .contact-form {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: var(--tt-radius-lg) !important;
  box-shadow: var(--tt-shadow-md);
}
html.theme-light .form-group label {
  color: rgba(15, 23, 42, 0.86) !important;
}
html.theme-light .form-group input,
html.theme-light .form-group textarea {
  background: rgba(255, 255, 255, 0.92) !important;
  color: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  border-radius: var(--tt-radius-md) !important;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.04);
}
html.theme-light .form-group input::placeholder,
html.theme-light .form-group textarea::placeholder {
  color: rgba(15, 23, 42, 0.50) !important;
}
html.theme-light .form-group input:focus,
html.theme-light .form-group textarea:focus {
  border-color: rgba(255, 93, 6, 0.55) !important;
  box-shadow: var(--tt-ring);
}
html.theme-light #contactFormStatus.form-status {
  background: rgba(255, 93, 6, 0.10) !important;
  border: 1px solid rgba(255, 93, 6, 0.25) !important;
  color: rgba(15, 23, 42, 0.90) !important;
}
html.theme-light .product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--tt-shadow-md);
  border-color: rgba(255, 93, 6, 0.35) !important;
}
html.theme-light .product-card-type {
  color: var(--tt-text-soft) !important;
}
html.theme-light .product-card-name {
  color: rgba(15, 23, 42, 0.95) !important;
}
html.theme-light .product-card-price {
  color: rgba(15, 23, 42, 0.95) !important;
}
html.theme-light .product-card .placeholder-icon,
html.theme-light .build-card-image-placeholder i {
  color: rgba(15, 23, 42, 0.45) !important;
}

/* Pagination */
html.theme-light .pagination-wrap button {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  color: rgba(15, 23, 42, 0.82) !important;
  box-shadow: var(--tt-shadow-sm);
}
html.theme-light .pagination-wrap button.active {
  border-color: rgba(255, 93, 6, 0.55) !important;
  box-shadow: var(--tt-ring), var(--tt-shadow-sm);
}

/* PC builds cards (pc-builds.html) */
html.theme-light .build-card {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: var(--tt-radius-lg) !important;
  box-shadow: var(--tt-shadow-sm);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
html.theme-light .build-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--tt-shadow-md);
  border-color: rgba(255, 93, 6, 0.35) !important;
}
html.theme-light .build-card-name,
html.theme-light .build-card-price {
  color: rgba(0, 0, 0, 0.92) !important;
}
html.theme-light .build-card-meta {
  color: var(--tt-text-soft) !important;
}

/* Mobile nav drawer */
html.theme-light .nav-links.active {
  background: var(--color-surface);
  box-shadow: -4px 0 22px rgba(0, 0, 0, 0.12);
}

/* Footer */
html.theme-light footer {
  background: var(--gradient-dark);
  color: var(--color-text);
  border-top-color: rgba(255, 93, 6, 0.6);
}
html.theme-light footer .footer-brand p,
html.theme-light footer .footer-links a,
html.theme-light footer .footer-bottom p {
  color: var(--color-text);
}
html.theme-light footer .footer-social a {
  border-color: rgba(255, 93, 6, 0.45);
  color: rgba(15, 23, 42, 0.70);
}

/* Cart & modals (fix hard-coded dark RGBA backgrounds in light mode) */
html.theme-light .cart-items,
html.theme-light .cart-summary {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: var(--tt-shadow-md);
  border-radius: var(--tt-radius-lg) !important;
}
html.theme-light .cart-item {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
html.theme-light .cart-item-name,
html.theme-light .cart-summary h3 {
  color: rgba(15, 23, 42, 0.95);
}
html.theme-light .cart-item-type,
html.theme-light .cart-summary-row {
  color: var(--tt-text-soft);
}
html.theme-light .cart-summary-inclusive {
  color: var(--tt-text-faint) !important;
}
html.theme-light .cart-item-qty button,
html.theme-light .cart-item-qty input {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.85);
  color: rgba(0, 0, 0, 0.85);
}
html.theme-light .cart-item-remove {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  color: rgba(0, 0, 0, 0.75) !important;
  border-radius: 999px !important;
  box-shadow: var(--tt-shadow-sm);
}
html.theme-light .cart-item-remove:hover {
  border-color: rgba(255, 93, 6, 0.35) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}

html.theme-light .req-quote-modal {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(6px);
}
html.theme-light .req-quote-box {
  background: var(--color-surface);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: var(--tt-radius-lg) !important;
  box-shadow: var(--tt-shadow-md);
}
html.theme-light .req-quote-box input,
html.theme-light .req-quote-box textarea {
  background: #fff;
  color: var(--color-text);
  border-color: rgba(0, 0, 0, 0.12) !important;
  border-radius: var(--tt-radius-md) !important;
}
html.theme-light .req-quote-box input:focus,
html.theme-light .req-quote-box textarea:focus {
  outline: none;
  box-shadow: var(--tt-ring);
  border-color: rgba(255, 93, 6, 0.45) !important;
}

/* Index page sections (many have hard-coded white text in inline CSS) */
html.theme-light .hero-slide-content {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--tt-radius-lg);
  box-shadow: var(--tt-shadow-md);
  padding: 1.1rem 1.15rem;
  backdrop-filter: blur(8px);
}
html.theme-light .hero-slide-content h2 {
  color: rgba(15, 23, 42, 0.96) !important;
  text-shadow: none !important;
}
html.theme-light .hero-slide-content p {
  color: var(--tt-text-soft) !important;
  text-shadow: none !important;
}

html.theme-light .categories-section,
html.theme-light .deals-carousel-section,
html.theme-light .pcbuilds-carousel-section,
html.theme-light .gaming-gpu-section {
  background: transparent !important;
}

/* Cards used on index page carousels */
html.theme-light .deals-product-card,
html.theme-light .pcbuild-card,
html.theme-light .gpu-product-card,
html.theme-light .feature-item {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: var(--tt-radius-lg) !important;
  box-shadow: var(--tt-shadow-sm);
}
html.theme-light .deals-product-card:hover,
html.theme-light .pcbuild-card:hover,
html.theme-light .gpu-product-card:hover,
html.theme-light .feature-item:hover {
  box-shadow: var(--tt-shadow-md);
  border-color: rgba(255, 93, 6, 0.28) !important;
}

html.theme-light .deals-card-type,
html.theme-light .pcbuild-card-meta,
html.theme-light .gpu-card-type,
html.theme-light .feature-item p {
  color: var(--tt-text-soft) !important;
}
html.theme-light .deals-card-name,
html.theme-light .deals-card-price,
html.theme-light .pcbuild-card-name,
html.theme-light .pcbuild-card-price,
html.theme-light .gpu-card-name,
html.theme-light .gpu-card-price,
html.theme-light .feature-item h3 {
  color: rgba(15, 23, 42, 0.95) !important;
}

/* Match index.html selector specificity (its inline CSS is very specific) */
html.theme-light .deals-carousel-section .deals-product-card .deals-card-type,
html.theme-light .deals-carousel-section .deals-product-card .deals-card-name,
html.theme-light .deals-carousel-section .deals-product-card .deals-card-price,
html.theme-light .deals-carousel-section .deals-loading,
html.theme-light .deals-carousel-section .deals-empty {
  color: rgba(15, 23, 42, 0.92) !important;
  text-shadow: none !important;
}
html.theme-light .deals-carousel-section .deals-product-card .deals-card-image .placeholder-icon,
html.theme-light .pcbuilds-carousel-section .pcbuild-card .pcbuild-card-image-wrap .placeholder-icon,
html.theme-light .gaming-gpu-section .gpu-product-card .gpu-card-image .placeholder-icon {
  color: rgba(15, 23, 42, 0.45) !important;
}
html.theme-light .pcbuilds-carousel-section .pcbuild-card .pcbuild-card-name,
html.theme-light .pcbuilds-carousel-section .pcbuild-card .pcbuild-card-price,
html.theme-light .pcbuilds-carousel-section .pcbuild-card .pcbuild-card-meta,
html.theme-light .pcbuilds-carousel-section .pcbuilds-loading,
html.theme-light .pcbuilds-carousel-section .pcbuilds-empty {
  color: rgba(15, 23, 42, 0.92) !important;
  text-shadow: none !important;
}
html.theme-light .gaming-gpu-section .gpu-product-card .gpu-card-name,
html.theme-light .gaming-gpu-section .gpu-product-card .gpu-card-price,
html.theme-light .gaming-gpu-section .gpu-loading,
html.theme-light .gaming-gpu-section .gpu-empty {
  color: rgba(15, 23, 42, 0.92) !important;
  text-shadow: none !important;
}

/* Index "About" section heading + body text */
html.theme-light .about-content h2 {
  color: var(--color-accent) !important;
}
html.theme-light .about-content p {
  color: rgba(15, 23, 42, 0.86) !important;
}

/* Index banner headings */
html.theme-light .banner-section h2,
html.theme-light .deals-carousel-section .section-header h2,
html.theme-light .pcbuilds-carousel-section .section-header h2,
html.theme-light .gaming-gpu-section .section-header h2 {
  color: var(--color-accent) !important;
}

/* Index "About" stats (25+, 10K+, 100%) */
html.theme-light .stat-item {
  background: rgba(255, 93, 6, 0.18) !important;
  border-color: rgba(255, 93, 6, 0.55) !important;
  box-shadow: var(--tt-shadow-sm);
}
html.theme-light .stat-item .number,
html.theme-light .stat-item .label {
  color: rgba(15, 23, 42, 0.95) !important;
}

/* ====== Theme toggle button (matches dashboard feel) ====== */
.site-theme-toggle-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.18s ease;
}
.site-theme-toggle-btn:hover {
  background: transparent;
  border: none;
}
.site-theme-toggle-btn:focus-visible {
  outline: 3px solid rgba(255, 93, 6, 0.55);
  outline-offset: 2px;
}
.site-theme-toggle-btn .theme-toggle-sun {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
}
.site-theme-toggle-btn .theme-toggle-sun svg {
  width: 100%;
  height: 100%;
  color: inherit;
}
.site-theme-toggle-btn .theme-toggle-moon {
  font-size: 1.35rem;
  display: none;
}
html.theme-light .site-theme-toggle-btn {
  background: transparent;
  border: none;
}
html.theme-light .site-theme-toggle-btn:hover {
  background: transparent;
}
html.theme-light .site-theme-toggle-btn .theme-toggle-sun {
  display: none;
}
html.theme-light .site-theme-toggle-btn .theme-toggle-moon {
  display: inline-flex;
}

@media (max-width: 680px) {
  /* When top-contact bar wraps, don't absolute-position the toggle */
  .top-contact-inner {
    position: static;
  }
  .top-contact-theme-slot {
    position: static;
    transform: none;
    margin-left: 0.35rem;
  }
}

/* Login page: top-right theme icon */
.login-theme-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 20;
  width: 40px;
  height: 40px;
}