/*
 * glamorina-fixes.css
 * Targeted fixes — 6 issues
 * Date: 2026-04-19
 *
 * Load AFTER main.css via functions.php:
 *   wp_enqueue_style( 'glamorina-fixes',
 *     get_template_directory_uri() . '/assets/css/glamorina-fixes.css',
 *     array( 'glamorina-main' ), '1.0.1' );
 */


/* ═══════════════════════════════════════════════════════
   FIX 1 — PROMO MODAL: Remove static positioning
   Problem: modal renders visually "stuck" under footer
   because it appears in the DOM after the footer and
   inherits a stacking context that prevents fixed from
   working correctly in some browsers when a parent has
   transform/filter/will-change.
   Solution: Force the modal to escape any stacking context
   + ensure z-index is highest.
═══════════════════════════════════════════════════════ */

.promo-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;     /* higher than everything */
  isolation: isolate;            /* own stacking context  */
}

/* Guarantee the inner box doesn't escape viewport on mobile */
.promo-modal-inner {
  max-height: min(90vh, 560px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


/* ═══════════════════════════════════════════════════════
   FIX 2 — FOOTER MOBILE: Tighter, more compact layout
   Problem: footer columns too tall on small screens.
   Solution: reduce padding, font-sizes, and gaps on
   both 767px and 479px breakpoints.
═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  .site-footer {
    padding-block-start: clamp(24px, 4vw, 40px);  /* was clamp(40px,5vw,72px) */
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px 14px;                               /* was 28px */
  }

  .footer-col--brand {
    grid-column: 1 / -1;
    text-align: center;
    align-items: center;
  }

  .footer-logo {
    margin-block-end: 8px;
  }
  .footer-logo .logo-glm  { font-size: 1.3rem; }
  .footer-logo .logo-text { font-size: 0.5rem; }

  .footer-tagline {
    font-size: 0.72rem;
    margin-block-end: 10px;
  }

  .footer-contact {
    gap: 5px;
    margin-block-end: 12px;
  }
  .footer-contact-item,
  .ft-contact-item {
    font-size: 0.72rem;
  }
  .footer-contact svg { width: 13px; height: 13px; }

  .footer-col-title {
    font-size: 0.76rem;
    margin-block-end: 4px;
  }

  .footer-links {
    gap: 4px;
  }
  .footer-links a,
  .footer-link {
    font-size: 0.72rem;
    line-height: 1.4;
  }

  .footer-bottom {
    padding-block: 12px;
  }
  .footer-legal { font-size: 0.7rem; }
  .pay-chip     { font-size: 0.65rem; padding: 2px 7px; }
}

@media (max-width: 479px) {

  .footer-grid {
    gap: 14px 12px;
  }

  .footer-col-title { font-size: 0.72rem; }
  .footer-links a,
  .footer-link      { font-size: 0.68rem; }
}


/* ═══════════════════════════════════════════════════════
   FIX 3 — NO HORIZONTAL SCROLL ON MOBILE
   Problem: some wide child elements (cards, sliders,
   tables) can break the body overflow-x: hidden.
   Solution: clamp all potential offenders + enforce
   overflow-x on html as well as body.
═══════════════════════════════════════════════════════ */

html,
body {
  overflow-x: hidden !important;
  max-width: 100%;
}

/* Prevent any direct child of body from overflowing */
body > * {
  max-width: 100%;
}

/* Common horizontal-overflow culprits */
.products-grid,
.slide-circles,
.reviews-track,
.subcat-grid,
.gallery-thumbs,
.filter-bar,
.card-grid {
  max-width: 100%;
}

@media (max-width: 767px) {

  /* Make sure sliders scroll internally, not push body */
  .slide-circles,
  .reviews-track {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .slide-circles::-webkit-scrollbar,
  .reviews-track::-webkit-scrollbar { display: none; }

  /* Prevent card images from pushing layout */
  .product-card,
  .card,
  .review-card {
    min-width: 0;
  }
}


/* ═══════════════════════════════════════════════════════
   FIX 4 — HEADER: tighter icon gap + wider search bar
   Problem: header-actions gap too wide; search too narrow.
   Solution: reduce gap, increase search bar flex-grow.
═══════════════════════════════════════════════════════ */

/* Desktop — tighter icon group */
.header-actions {
  gap: clamp(4px, 1vw, 12px);   /* was clamp(6px, 1.6vw, 18px) */
}

/* Each action button slightly narrower */
.action-btn {
  width: 46px;                   /* was 52px */
}

/* Give search bar more room to grow */
.search-bar {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;              /* remove 580px cap so it stretches */
}

/* Desktop: restore a reasonable cap but bigger than before */
@media (min-width: 1024px) {
  .search-bar { max-width: 700px; }  /* was 620px */
}

@media (min-width: 768px) and (max-width: 1023px) {
  .search-bar { max-width: 480px; }  /* tablet: give more room */
  .header-actions { gap: 6px; }
}

/* Mobile: keep actions tight, hide labels (already done, reinforce) */
@media (max-width: 767px) {
  .header-actions { gap: 6px; }     /* was 10px */
  .action-btn     { width: 36px; }
  .lang-switcher  { display: none; } /* save space on very small screens */
}


/* ═══════════════════════════════════════════════════════
   FIX 5 — PANELS: always show close button,
            especially visible on mobile
   Problem: .panel-close might be hidden or too small
   on 100vw panels on mobile.
   Solution: enforce visibility + adequate tap target.
═══════════════════════════════════════════════════════ */

.panel-close {
  display: flex !important;      /* never hidden */
  align-items: center !important;
  justify-content: center !important;
  width: 38px  !important;       /* was 34px */
  height: 38px !important;
  min-width: 38px;
  min-height: 38px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.18) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 1.2rem !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Ensure panel-head is always flex with space-between */
.panel-head,
.panel-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0;
}

/* Mobile: panels take full width → close btn must be reachable */
@media (max-width: 767px) {
  .panel-close {
    width: 42px  !important;
    height: 42px !important;
    min-width: 42px;
    min-height: 42px;
    font-size: 1.3rem !important;
  }

  /* Ensure panel head has enough padding for thumb tapping */
  .panel-head,
  .panel-header {
    padding: 16px 16px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   FIX 6 — LOGO: smaller on inner pages (non-home)
   Problem: logo renders at full size on all inner pages.
   WordPress adds .home class to body only on the
   front page. Use :not(.home) to target inner pages.
   Solution: reduce logo max-height on inner pages.
═══════════════════════════════════════════════════════ */

/* Inner pages: smaller logo */
body:not(.home) .logo-img {
  max-height: 34px;              /* was 44px */
  max-width: 120px;
}
body:not(.home) .header--scrolled .logo-img {
  max-height: 28px;
}

/* Fallback text-logo also smaller on inner pages */
body:not(.home) .logo-glm  { font-size: 1.2rem; }
body:not(.home) .logo-text { font-size: 0.52rem; }

/* Mobile: even more restrained on inner pages */
@media (max-width: 767px) {
  body:not(.home) .logo-img {
    max-height: 28px;
    max-width: 100px;
  }
}