/*
 * ============================================================
 * QA & POLISH — ShopToolHP Design Kit v1.0
 * Fix: font color inline, cursor, responsive, min-height,
 *      button shimmer, icon size, section header
 * Load sau cùng để override tất cả
 * Requires: design-tokens.css, product-card.css
 * ============================================================ */

/* ============================================================
   1. INLINE COLOR OVERRIDE
   <font color="#ef4444"> dùng trong price-display → đổi sang token
   ============================================================ */
.price-display font[color],
.price-display font {
  color: var(--sth-accent-price) !important;  /* #FCD34D — contrast tốt */
}

/* ============================================================
   2. CURSOR POINTER — tất cả interactive element
   ============================================================ */
.product-card,
.product-card .product-image-container,
.product-card .button,
.product-card a,
.sidebar-wrapper .metismenu a,
.navbar a,
.btn-toggle a,
.navbar-avatar-btn,
.search-close-btn,
.navbar-search-result-item,
[data-bs-toggle],
[onclick],
button:not(:disabled),
input[type="submit"],
input[type="button"],
label[for],
select {
  cursor: pointer !important;
}

/* ============================================================
   3. BUTTON SHIMMER — remove old, dùng simple hover
   ============================================================ */
.product-card .button::before,
.product-card a.button::before {
  display: none !important;
}

/* ============================================================
   4. MIN-HEIGHT OVERRIDE — card không còn cứng chiều cao
   ============================================================ */
.product-card {
  min-height: unset !important;
}

/* ============================================================
   5. PRODUCT IMAGE — enforce aspect-ratio, remove fixed height
   ============================================================ */
.product-image-container {
  height: auto !important;
  aspect-ratio: 16 / 9;
  padding: 0 !important;
}

/* Override inline responsive height rules */
@media (max-width: 1200px) {
  .product-image-container { height: auto !important; }
}
@media (max-width: 991px) {
  .product-image-container { height: auto !important; }
}
@media (max-width: 767px) {
  .product-image-container { height: auto !important; }
  .product-card { min-height: unset !important; }
}
@media (max-width: 480px) {
  .product-image-container { height: auto !important; }
  .product-card { min-height: unset !important; }
}

/* ============================================================
   6. SECTION HEADER — chuẩn hóa tiêu đề section
   ============================================================ */
.section-header {
  display: flex;
  align-items: center;
  gap: var(--sth-space-3);
  margin-bottom: var(--sth-space-6);
  padding-bottom: var(--sth-space-3);
  border-bottom: 1px solid var(--sth-border);
}

.section-title,
.section-header h3.section-title {
  font-family: var(--sth-font-family) !important;
  font-size: var(--sth-text-xl) !important;
  font-weight: var(--sth-font-bold) !important;
  color: var(--sth-text-primary) !important;
  letter-spacing: -0.3px !important;
  margin: 0 !important;
  /* Disable old neon/gradient text effect */
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  text-shadow: none !important;
}

/* ============================================================
   7. MAIN CONTENT AREA — full width, không đụng layout framework
   ============================================================ */
.main-wrapper {
  background-color: var(--sth-bg-base) !important;
}
.main-wrapper .main-content {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Card grid — auto-fill: tự động thêm cột khi màn rộng hơn */
.main-wrapper .row.g-4 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(500px, 100%), 1fr)) !important;
  gap: 1.25rem !important;
  /* Reset Bootstrap row */
  margin-left: 0 !important;
  margin-right: 0 !important;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

/* Các col con — reset Bootstrap width, để grid tự điều chỉnh */
.main-wrapper .row.g-4 > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
}

/* Mobile < 576px: 1 cột full width */
@media (max-width: 575px) {
  .main-wrapper .row.g-4 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .main-wrapper .main-content {
    padding: 0.75rem !important;
  }
  .banner-container img {
    height: 80px !important;
  }
}

/* Tablet 576–768px: 2 cột */
@media (min-width: 576px) and (max-width: 768px) {
  .main-wrapper .row.g-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Tablet 769–1199px: 3 cột, sidebar ẩn nên có thêm không gian */
@media (min-width: 769px) and (max-width: 1199px) {
  .main-wrapper .row.g-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Search bar mobile — thu nhỏ */
@media (max-width: 575px) {
  .search-navbar-wrapper {
    max-width: 100% !important;
  }
  .nav-right-links .gtranslate_wrapper {
    display: none !important;
  }
}

/* ============================================================
   SIDEBAR MINI MODE (desktop toggled)
   ============================================================ */
@media screen and (min-width: 1199px) {
  /* Icon căn giữa khi mini */
  body.toggled:not(.sidebar-hovered) .sidebar-wrapper .parent-icon {
    margin: 0 auto;
  }
  body.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a {
    padding: 10px 0 !important;
    justify-content: center !important;
  }
  /* Logo ẩn khi mini mode */
  body.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {
    padding: 0 !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  body.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .logo-icon {
    display: none !important;
  }
  /* Ẩn nút X trên desktop mini mode, chỉ hiện khi hover */
  body.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-close {
    display: none !important;
  }
  body.toggled.sidebar-hovered .sidebar-wrapper .sidebar-close {
    display: flex !important;
  }
}

/* ============================================================
   MOBILE SIDEBAR FIX
   ============================================================ */
@media (max-width: 1199px) {
  .sidebar-wrapper .sidebar-close {
    display: flex !important;
  }

  .toggled .sidebar-wrapper {
    left: 0 !important;
    width: 260px !important;
    z-index: 13 !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.6) !important;
  }
}

/* ============================================================
   8. TRANSITIONS — đồng nhất 150-200ms
   ============================================================ */
a, button, .nav-item, .dropdown-item {
  transition: var(--sth-transition-fast) !important;
}

/* ============================================================
   9. FOCUS STATES — keyboard navigation
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--sth-accent-blue) !important;
  outline-offset: 2px !important;
}

/* ============================================================
   10. HOVER STATES — card grid trong Bootstrap row
   ============================================================ */
.row .product-card {
  height: 100%;
}

/* ============================================================
   11. THEMIFY ICON SIZE FIX trong badge/download-count
   ============================================================ */
.product-stats .badge i,
.download-count i,
.product-stats i {
  font-size: 13px !important;
  vertical-align: middle;
  line-height: 1;
}

/* ============================================================
   12. BOOTSTRAP ROW GAP — đồng nhất với token
   ============================================================ */
.row.g-4 {
  --bs-gutter-x: var(--sth-card-gap);
  --bs-gutter-y: var(--sth-card-gap);
}

/* ============================================================
   13. MODAL — dark theme
   ============================================================ */
.modal-content {
  background: var(--sth-bg-elevated) !important;
  border: 1px solid var(--sth-border) !important;
  border-radius: var(--sth-radius-lg) !important;
  color: var(--sth-text-primary) !important;
}
.modal-header {
  background: var(--sth-bg-surface) !important;
  border-bottom: 1px solid var(--sth-border) !important;
  border-radius: var(--sth-radius-lg) var(--sth-radius-lg) 0 0 !important;
  color: var(--sth-text-primary) !important;
}
.modal-footer {
  border-top: 1px solid var(--sth-border) !important;
}

/* ============================================================
   14. DROPDOWN MENUS — dark theme chuẩn
   ============================================================ */
.dropdown-menu:not(.dropdown-user) {
  background: var(--sth-bg-elevated) !important;
  border: 1px solid var(--sth-border) !important;
  border-radius: var(--sth-radius-md) !important;
  box-shadow: var(--sth-shadow-lg) !important;
}
.dropdown-menu:not(.dropdown-user) .dropdown-item {
  color: var(--sth-text-secondary) !important;
  font-size: var(--sth-text-sm) !important;
  padding: 8px var(--sth-space-3) !important;
  border-radius: var(--sth-radius-sm) !important;
  transition: var(--sth-transition-fast) !important;
  cursor: pointer !important;
}
.dropdown-menu:not(.dropdown-user) .dropdown-item:hover {
  background: var(--sth-bg-overlay) !important;
  color: var(--sth-text-primary) !important;
}
.dropdown-menu .dropdown-divider {
  border-color: var(--sth-border) !important;
}

/* ============================================================
   15. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   16. HORIZONTAL SCROLL PREVENTION
   ============================================================ */
body {
  overflow-x: hidden;
}
.page-wrapper,
.page-content,
.main-wrapper {
  overflow-x: hidden;
}