/* =========================================
   Hammertech Korea - Subpage Dark Mode Overrides
========================================= */

/* Body and global wrapper resets */
body {
  background-color: var(--bg-dark) !important;
  color: var(--text-main) !important;
}

.wrapper, .contact_wrapper, .case_sub_bg, .subject {
  background-color: var(--bg-dark) !important;
  background-image: none !important;
  color: var(--text-main) !important;
}

/* Contact Form Overrides */
.contact_form_left {
  background-color: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(10px);
}

.contact_form_right {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-main) !important;
}

.contact_bt {
  background-color: transparent !important;
}

.contact_txt p, .contact_txt h {
  color: var(--metallic-silver) !important;
}

/* Inputs & Forms */
input, select, textarea {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 4px;
  padding: 5px 10px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--metallic-silver) !important;
}

button {
  background: var(--primary-color) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  background: #6e1c16 !important;
}

/* Fix product title text colors in subpages if they exist */
.middle_title, .title_sub {
  color: var(--text-main) !important;
  background: none !important;
}

/* Adjust padding for fixed modern nav */
body {
  padding-top: 80px; /* Space for fixed header */
}

/* Comprehensive Text & Background Overrides for Subpage Product Cards */
div[class$='_wrap'], .h1_wrap, .m_wrap, .i_wrap, .keyboard_wrap, .mouse_wrap, .accessory_wrap, .tunning_wrap {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--glass-border) !important;
}

.h_product_white, .m_product_white, .i_product_white, 
.keyboard_product_white, .mouse_product_white, 
.accessory_product_white, .tunning_product_white,
.h1_casename, .m1_casename, .i1_casename {
  color: var(--text-main) !important;
}

.h_product_white p, .m_product_white p, .i_product_white p,
.keyboard_product_white p, .mouse_product_white p,
.accessory_product_white p, .tunning_product_white p {
  color: var(--metallic-silver) !important;
}

.h_product, .m_product, .i_product, .keyboard_product, .mouse_product, .accessory_product, .tunning_product {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

div[class$='_product_bg'], div[class$='_series_wrapper'], div[class$='_wrapper'], .case_click_m1_wrapper {
  background-color: transparent !important;
}

/* Specific fix for contact form inputs to make text visible when typing */
input, select, textarea {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}
option {
  background-color: #333 !important;
  color: #fff !important;
}

/* Force light text color on all generic elements to ensure visibility in dark mode */
html body div, html body p, html body span, html body li, html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body th, html body td {
  color: var(--text-main) !important;
}

html body a {
  color: var(--text-main) !important;
}

/* Exempt specific interactive elements or colored accents if necessary */
.nav-links a { color: var(--text-main) !important; }
.nav-links a:hover { color: #fff !important; }


/* Fix select and input heights clipping */
input, select {
  height: auto !important;
  min-height: 40px;
  box-sizing: border-box;
}

/* Fix the white contact info box on the right */
.contact_input {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px;
  color: var(--text-main) !important;
  box-sizing: border-box;
}

/* Dropdown Menu Visibility Fix (Overrides old inline nav styles in subpages) */
.modern-nav .dropdown-menu {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--glass-border) !important;
}

.modern-nav .dropdown-menu li {
  border: none !important;
}

.modern-nav .dropdown-menu li a {
  background-color: transparent !important;
  color: var(--text-main) !important;
  padding: 12px 20px !important;
}

.modern-nav .dropdown-menu li a:hover {
  background-color: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
}

/* Hide rogue loading text artifacts generated by old scripts */
.cloud-zoom-loading,
.cycle-loading,
[data-u="loading"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Dark Mode Overrides for Product Specification Tables and Feature Lists */
.spec_0203, .bg_0203 {
  background-color: transparent !important;
}

.spec_03, .h1_spec_test ul {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--glass-border) !important;
}

table th {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--glass-border) !important;
}

table td {
  background-color: rgba(0, 0, 0, 0.2) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--glass-border) !important;
}

table {
  border: 1px solid var(--glass-border) !important;
}

/* Feature title banners (like "FEATURES" and "SPECIFICATIONS") */
.feature, .fullspec2, .spec_04 {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
}

/* Icons next to features if any */
#fullspec_icon1, #fullspec_icon2 {
  filter: brightness(0) invert(1);
}

/* =========================================
   Mobile Overrides for Product Listing Pages
   (Stack items vertically and fix fixed heights)
========================================= */
@media (max-width: 768px) {
  /* Allow wrappers to expand based on content height instead of fixed 1500px */
  .h_series_wrapper, .m_series_wrapper, .i_series_wrapper, 
  .keyboard_wrapper, .mouse_wrapper, .accessory_wrapper, .tunning_wrapper,
  .case_sub_bg, .subject {
    height: auto !important;
    min-height: 100vh !important;
    padding-bottom: 50px !important;
  }

  .h_product_bg, .m_product_bg, .i_product_bg {
    height: auto !important;
    min-height: 100vh !important;
    padding-bottom: 50px !important;
  }

  /* Make the header banner responsive */
  .h_product, .m_product, .i_product, .keyboard_product, .mouse_product, .accessory_product, .tunning_product {
    width: 90% !important;
    margin: 0 auto !important;
  }

  /* Container for the products */
  .h_product_list, .m_product_list, .i_product_list {
    width: 100% !important;
    padding: 30px 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Stack the ul/li vertically */
  .h_product_list ul, .m_product_list ul, .i_product_list ul {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .h_product_list li, .m_product_list li, .i_product_list li {
    float: none !important;
    margin-right: 0 !important;
    margin-bottom: 50px !important;
    width: auto !important;
  }

  /* Ensure the product card itself is centered */
  div[class$='_wrap'], .h1_wrap, .m_wrap, .i_wrap, .keyboard_wrap, .mouse_wrap, .accessory_wrap, .tunning_wrap {
    margin: 0 auto !important;
  }
}

/* Fix product description overlap, white background, and container overflow */
.h2_product_color ul, .h2_product_color, .h4_product_color ul, .h4_product_color, .m_product_color ul, .m_product_color, div[class$='_product_color'] ul, div[class$='_product_color'] {
  background-color: transparent !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.h2_product_color li, .h4_product_color li, .m_product_color li, div[class$='_product_color'] li {
  display: inline-block !important;
  margin-right: 10px !important;
  margin-bottom: 5px !important;
  float: none !important;
}

.h_product_list img, .m_product_list img, .i_product_list img, .keyboard_product_list img, .mouse_product_list img, .accessory_product_list img, .tunning_product_list img {
  position: relative !important;
  left: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

.h1_casename, .m1_casename, .i1_casename {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  padding: 10px 0 10px 0 !important;
  line-height: 1.4;
  word-wrap: break-word;
}

.h_product_white, .m_product_white, .i_product_white, .keyboard_product_white, .mouse_product_white, .accessory_product_white, .tunning_product_white {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  height: auto !important;
  min-height: auto !important;
  padding-bottom: 20px !important;
  margin-top: 20px !important;
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.h1_wrap, .m_wrap, .i_wrap, .keyboard_wrap, .mouse_wrap, .accessory_wrap, .tunning_wrap {
  position: relative !important;
  height: auto !important;
  min-height: auto !important;
  padding: 20px 20px 30px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Prevent product tags from wrapping and breaking inline */
.h_product_white h, div[class*='_product_white'] h {
  display: inline-block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

/* Global Wrapper Height Fix (prevents footer overlap on PC and Mobile) */
.h_series_wrapper, .m_series_wrapper, .i_series_wrapper, 
.keyboard_wrapper, .mouse_wrapper, .accessory_wrapper, .tunning_wrapper,
.case_sub_bg, .subject, .h_product_bg, .m_product_bg, .i_product_bg {
  height: auto !important;
  min-height: 100vh !important;
  padding-bottom: 80px !important;
}

/* Global Product List Grid Fix (prevents jumbled floats on PC) */
.h_product_list ul, .m_product_list ul, .i_product_list ul, 
.keyboard_product_list ul, .mouse_product_list ul, 
.accessory_product_list ul, .tunning_product_list ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 30px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 1200px !important;
}

.h_product_list li, .m_product_list li, .i_product_list li, 
.keyboard_product_list li, .mouse_product_list li, 
.accessory_product_list li, .tunning_product_list li {
  float: none !important;
  margin: 0 !important;
  display: flex !important;
}

/* Ensure the link tags fill the li container */
.h_product_list li > a, .m_product_list li > a, .i_product_list li > a, 
.keyboard_product_list li > a, .mouse_product_list li > a, 
.accessory_product_list li > a, .tunning_product_list li > a {
  display: flex !important;
  flex: 1 !important;
  text-decoration: none !important;
  width: 100% !important;
}

/* Ensure consistent card heights and layout */
.h1_wrap, .m_wrap, .i_wrap, .keyboard_wrap, .mouse_wrap, .accessory_wrap, .tunning_wrap {
  margin: 0 !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Align product description and colors to the bottom across the grid */
div[class*='_product_white'] {
  position: relative !important;
  padding-bottom: 115px !important; /* Increased space for multi-line casenames */
  flex: 1 1 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

div[class*='_casename'] {
  position: absolute !important;
  top: auto !important; /* CRITICAL: Override original inline top:58px */
  bottom: 55px !important; /* Push text higher above color dots */
  left: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}

div[class*='_product_color'], .color_div {
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}