/* Responsive utilities shared across frontend and backend */

/* Make media scale to container width */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* Iframes scale */
iframe {
  max-width: 100%;
}

/* Horizontal scroll for wide tables on small screens */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Utility visibility classes */
@media (max-width: 767.98px) {
  .hide-on-mobile { display: none !important; }
  .only-mobile { display: initial !important; }
}

@media (min-width: 768px) {
  .only-desktop { display: initial !important; }
  .only-mobile { display: none !important; }
}

/* Container padding helpers */
.container-padding {
  padding-left: 16px;
  padding-right: 16px;
}

/* Responsive embed helpers (16:9 by default) */
.responsive-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.responsive-embed > iframe,
.responsive-embed > video,
.responsive-embed > embed,
.responsive-embed > object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Subtle global tweaks for very small screens */
@media (max-width: 575.98px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.1rem; }
  .btn { padding: 0.5rem 0.75rem; }
  .container, .container-fluid, .container-padding { padding-left: 12px; padding-right: 12px; }
  /* Ensure header is visible and compact on phones */
  .header.shop .topbar { background: #fff !important; }
  .header .header-inner { display: block !important; }
  .header.shop .nav li a { padding: 8px 10px; }
  .header.shop .logo img { max-height: 48px; height: auto; width: auto; }
  .header.shop .nav.main-menu > li { margin-right: 8px; }
  .menu-area { padding-top: 6px; padding-bottom: 6px; }

  /* Mobile nav toggle (xs only) */
  .mobile-nav-toggle { background: transparent; border: 0; display: inline-flex; align-items: center; gap: 8px; }
  .mobile-nav-icon { width: 18px; height: 2px; background: #1e1e1e; position: relative; display: inline-block; }
  .mobile-nav-icon::before, .mobile-nav-icon::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: #1e1e1e; }
  .mobile-nav-icon::before { top: -6px; }
  .mobile-nav-icon::after { top: 6px; }
}

/* Collapse nav for screens below lg (<992px) */
@media (max-width: 991.98px) {
  .mobile-nav-toggle { display: inline-flex; }
  #primaryNav { display: none !important; width: 100%; }
  #primaryNav.is-open { display: block !important; }
  #primaryNav .nav.main-menu { flex-direction: column; gap: 4px; }
  #primaryNav .nav.main-menu li a { display: block; padding: 10px 12px; }
  /* Neutralize any Bootstrap navbar-collapse flex on mobile */
  .navbar-collapse { flex-basis: 100% !important; }
  .menu-area { position: relative; z-index: 100; }
  .header.shop .nav li { padding-top: 0 !important; }

  /* Ensure header stays above hero video on home */
  .header.shop { position: relative; z-index: 2000; }
#info { z-index: 2050; }
  #home .video-overlay { pointer-events: none !important; }
  #home .video-overlay .main-title, #home .video-overlay .main-title a { pointer-events: auto !important; }
}

/* Remove any stray orange bars or theme stripes */
.topbar, .header.shop .header-inner, .slicknav_menu { background-image: none; }

/* --- Improved Topbar styling (shared) --- */
.header.shop .topbar { border-bottom: 1px solid #eeeeee; }
.header.shop .topbar .list-main { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0; padding: 6px 0; }
.header.shop .topbar .list-main li { border: none; padding: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #53665C; }
.header.shop .topbar .list-main li i { color: #11574A; font-size: 16px; line-height: 1; }
.header.shop .topbar .right-content .list-main li a { color: #11574A; }

@media (max-width: 575.98px) {
  .header.shop .topbar .top-left, .header.shop .topbar .right-content { text-align: center; }
  .header.shop .topbar .list-main { justify-content: center; gap: 6px 12px; }
  .header.shop .topbar .list-main li { font-size: 13px; }
  .header.shop .topbar .list-main li i { font-size: 14px; }
  .header.shop .topbar .list-main li a { word-break: break-word; }
}
}