/* ================================================================
   Maximum Builders · Skeleton Loading System
   Lightweight shimmer skeletons that mimic real content structure.
   No JS framework required — pure CSS animations + class toggling.
================================================================ */

/* ── CSS Variables for skeleton colors ── */
:root {
  --skel-base  : rgba(255,255,255,0.055);
  --skel-shine : rgba(255,255,255,0.13);
  --skel-radius: 6px;
  --skel-dur   : 1.7s;
}
[data-theme="light"] {
  --skel-base  : rgba(0,0,0,0.07);
  --skel-shine : rgba(0,0,0,0.13);
}

/* ── Core shimmer animation ── */
@keyframes skel-sweep {
  0%   { background-position: -250% 0; }
  100% { background-position:  250% 0; }
}

/* Base skeleton block — apply to any element */
.skel {
  background: linear-gradient(
    90deg,
    var(--skel-base) 25%,
    var(--skel-shine) 50%,
    var(--skel-base) 75%
  );
  background-size: 250% 100%;
  animation: skel-sweep var(--skel-dur) ease-in-out infinite;
  border-radius: var(--skel-radius);
  display: block;
}

/* Staggered delays for groups of skeletons */
.skel:nth-child(2) { animation-delay: 0.1s; }
.skel:nth-child(3) { animation-delay: 0.2s; }
.skel:nth-child(4) { animation-delay: 0.3s; }
.skel:nth-child(5) { animation-delay: 0.4s; }
.skel:nth-child(6) { animation-delay: 0.5s; }

/* Circle variant (for avatars / icons) */
.skel-circle { border-radius: 50%; }

/* ================================================================
   PAGE-LEVEL SKELETON OVERLAY
   Covers the whole viewport during page load & page transitions.
================================================================ */
#page-skel {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: var(--bg, #202020);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Visibility controlled via JS — starts hidden (matches html opacity:0) */
  pointer-events: none;
}

/* Fade-out transition once content is ready */
#page-skel.skel-fade-out {
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}
#page-skel.skel-gone {
  display: none;
}

/* ── Skeleton Navbar ── */
.skel-nav {
  height: 64px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--skel-base);
  display: flex;
  align-items: center;
  padding: 0 40px;
  gap: 16px;
}
.skel-nav-logo {
  width: 140px;
  height: 22px;
}
.skel-nav-spacer { flex: 1; }
.skel-nav-links {
  display: flex;
  gap: 20px;
}
.skel-nav-link {
  width: 70px;
  height: 14px;
}
.skel-nav-cta {
  width: 110px;
  height: 36px;
  border-radius: 8px;
  margin-left: 10px;
}

/* ================================================================
   HOMEPAGE SKELETON
================================================================ */
.skel-hero-home {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 420px;
  min-height: calc(100vh - 64px);
}

/* Left column */
.skel-hero-left {
  padding: 80px 56px 60px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.skel-hero-badge  { width: 55%;  height: 12px; margin-bottom: 24px; }
.skel-hero-h1a   { width: 82%;  height: 52px; margin-bottom: 10px; border-radius: 6px; }
.skel-hero-h1b   { width: 68%;  height: 52px; margin-bottom: 28px; border-radius: 6px; }
.skel-hero-sub1  { width: 90%;  height: 13px; margin-bottom: 9px; }
.skel-hero-sub2  { width: 74%;  height: 13px; margin-bottom: 9px; }
.skel-hero-sub3  { width: 60%;  height: 13px; margin-bottom: 32px; }
.skel-hero-btns  { display: flex; gap: 12px; }
.skel-hero-btn   { width: 168px; height: 46px; border-radius: 8px; }

/* Right panel */
.skel-hero-right {
  padding: 80px 52px 60px 40px;
  border-left: 1px solid var(--skel-base);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.skel-eyebrow { width: 45%; height: 10px; margin-bottom: 6px; }
.skel-panel-title { width: 70%; height: 26px; margin-bottom: 16px; }
.skel-fmc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1;
}
.skel-fmc-card {
  border-radius: 8px;
  aspect-ratio: 4 / 3;
}

/* ================================================================
   SHOWCASE SECTION SKELETON (Our Fire Safety Solutions)
================================================================ */
.skel-showcase {
  padding: 60px 40px;
  background: var(--bg, #202020);
}
.skel-showcase-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}
.skel-showcase-eyebrow { width: 120px; height: 10px; }
.skel-showcase-title   { width: 280px; height: 36px; }
.skel-showcase-subtitle{ width: 220px; height: 13px; }

.skel-showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
}
.skel-showcase-half {
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.skel-showcase-label  { width: 100px; height: 10px; }
.skel-showcase-stitle { width: 200px; height: 28px; }
.skel-showcase-divider {
  background: var(--skel-base);
  width: 1px;
}

/* Marquee skeleton: horizontal row of cards */
.skel-marquee {
  display: flex;
  gap: 14px;
  overflow: hidden;
  margin-top: 8px;
}
.skel-partner-card {
  flex-shrink: 0;
  width: 220px;
  height: 150px;
  border-radius: 14px;
}

/* ================================================================
   PRODUCTS PAGE SKELETON
================================================================ */
.skel-page-hero {
  padding: 80px 40px 56px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.skel-page-badge   { width: 35%; height: 11px; margin-bottom: 16px; }
.skel-page-h1a     { width: 65%; height: 50px; margin-bottom: 10px; border-radius: 6px; }
.skel-page-h1b     { width: 45%; height: 50px; margin-bottom: 20px; border-radius: 6px; }
.skel-page-sub     { width: 55%; height: 14px; margin-bottom: 30px; }
.skel-stats-row    { display: flex; gap: 36px; }
.skel-stat { display: flex; flex-direction: column; gap: 6px; }
.skel-stat-num     { width: 64px; height: 28px; border-radius: 5px; }
.skel-stat-label   { width: 90px; height: 11px; }

/* Filter bar skeleton */
.skel-filter-bar {
  height: 54px;
  border-bottom: 1px solid var(--skel-base);
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.skel-filter-tag  { width: 90px; height: 26px; border-radius: 100px; }
.skel-filter-btn  { width: 110px; height: 36px; border-radius: 10px; }

/* Product cards grid */
.skel-products-section {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.skel-cat-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--skel-base);
}
.skel-cat-icon   { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; }
.skel-cat-title  { width: 200px; height: 22px; }
.skel-cat-count  { width: 80px; height: 26px; border-radius: 100px; margin-left: auto; }
.skel-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 48px;
}
.skel-product-card {
  border-radius: 12px;
  border: 1px solid var(--skel-base);
  overflow: hidden;
  background: var(--skel-base);
  display: flex;
  flex-direction: column;
}
.skel-card-img  { width: 100%; height: 160px; border-radius: 0; }
.skel-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.skel-card-badge{ width: 80px;  height: 20px; border-radius: 100px; }
.skel-card-name { width: 80%;   height: 26px; border-radius: 5px; }
.skel-card-sub  { width: 55%;   height: 12px; }
.skel-card-desc1{ width: 100%;  height: 11px; }
.skel-card-desc2{ width: 85%;   height: 11px; }
.skel-card-desc3{ width: 65%;   height: 11px; }
.skel-card-foot {
  margin-top: auto;
  border-top: 1px solid var(--skel-base);
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.skel-card-foot-l { width: 100px; height: 11px; }
.skel-card-foot-r { width: 70px;  height: 11px; }

/* ================================================================
   FM-200 PAGE SKELETON
================================================================ */
.skel-fm-hero {
  min-height: 70vh;
  padding: 120px 60px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  max-width: 760px;
}
.skel-fm-badge  { width: 40%;  height: 11px; margin-bottom: 22px; }
.skel-fm-h1a   { width: 80%;  height: 56px; margin-bottom: 12px; border-radius: 6px; }
.skel-fm-h1b   { width: 60%;  height: 56px; margin-bottom: 26px; border-radius: 6px; }
.skel-fm-sub1  { width: 85%;  height: 14px; margin-bottom: 8px; }
.skel-fm-sub2  { width: 70%;  height: 14px; margin-bottom: 8px; }
.skel-fm-sub3  { width: 50%;  height: 14px; margin-bottom: 32px; }
.skel-fm-trust {
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
}
.skel-fm-chip { width: 110px; height: 30px; border-radius: 20px; }
.skel-fm-btns { display: flex; gap: 12px; }
.skel-fm-btn  { width: 160px; height: 46px; border-radius: 8px; }

/* ================================================================
   PAGE-EXIT TRANSITION OVERLAY
   Shown briefly when navigating away from a page.
================================================================ */
#page-exit-skel {
  position: fixed;
  inset: 0;
  z-index: 9200;
  background: var(--bg, #202020);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
#page-exit-skel.skel-exit-active {
  opacity: 1;
  pointer-events: all;
}
/* Shimmer strip inside the exit overlay */
#page-exit-skel::after {
  content: '';
  position: absolute;
  top: 64px;
  left: 0; right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--gold, #FDDC5C) 30%,
    var(--red, #d63228) 60%,
    transparent 100%
  );
  background-size: 300% 100%;
  animation: skel-sweep 1.2s ease-in-out infinite;
}

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 1024px) {
  .skel-hero-home { grid-template-columns: 1fr; }
  .skel-hero-right { display: none; }
  .skel-products-grid { grid-template-columns: repeat(2, 1fr); }
  .skel-showcase-grid { grid-template-columns: 1fr; }
  .skel-showcase-divider { display: none; }
}
@media (max-width: 600px) {
  .skel-products-grid { grid-template-columns: 1fr; }
  .skel-hero-left { padding: 60px 24px 40px; }
  .skel-page-hero { padding: 60px 20px 40px; }
  .skel-products-section { padding: 24px 20px; }
  .skel-stats-row { flex-wrap: wrap; gap: 20px; }
  .skel-nav-links { display: none; }
}

/* ================================================================
   PRODUCT DETAIL PAGE SKELETON (product.php)
================================================================ */
.skel-pd-hero {
  background: var(--bg, #0A0A0A);
  padding: calc(64px + 14px) 0 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Breadcrumb */
.skel-pd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.skel-pd-bc-item  { width: 50px; height: 11px; }
.skel-pd-bc-sep   { width: 8px;  height: 11px; opacity: 0.3; }

/* Hero grid */
.skel-pd-grid {
  display: grid;
  grid-template-columns: 52% 1fr;
  gap: 40px;
  align-items: start;
}
.skel-pd-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
}

/* Right info column */
.skel-pd-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 4px;
}
.skel-pd-badge  { width: 100px; height: 22px; border-radius: 4px; margin-bottom: 12px; }
.skel-pd-title1 { width: 90%;  height: 44px; border-radius: 5px; margin-bottom: 8px; }
.skel-pd-title2 { width: 70%;  height: 44px; border-radius: 5px; margin-bottom: 14px; }
.skel-pd-brand  { width: 160px; height: 30px; border-radius: 6px; margin-bottom: 14px; }
.skel-pd-desc1  { width: 100%; height: 12px; margin-bottom: 8px; }
.skel-pd-desc2  { width: 85%;  height: 12px; margin-bottom: 8px; }
.skel-pd-desc3  { width: 65%;  height: 12px; margin-bottom: 24px; }
.skel-pd-cta-row {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.skel-pd-btn-main { flex: 1; height: 46px; border-radius: 8px; }
.skel-pd-btn-back { width: 130px; height: 46px; border-radius: 8px; opacity: 0.5; }

/* Specs section */
.skel-pd-specs {
  background: var(--bg3, #181818);
  padding: 60px 24px;
}
.skel-pd-specs-header {
  max-width: 1200px;
  margin: 0 auto 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skel-pd-specs-label { width: 120px; height: 11px; }
.skel-pd-specs-title { width: 280px; height: 42px; border-radius: 5px; }

.skel-pd-acc {
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid var(--skel-base);
  border-radius: 10px;
  overflow: hidden;
}
.skel-pd-acc-hd {
  padding: 16px 20px;
  border-bottom: 1px solid var(--skel-base);
  display: flex;
  align-items: center;
}
.skel-pd-acc-title { width: 160px; height: 18px; border-radius: 4px; }

.skel-pd-spec-rows { padding: 8px 20px 16px; }
.skel-pd-spec-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--skel-base);
}
.skel-pd-spec-row:last-child { border-bottom: none; }
.skel-pd-spec-key { width: 46%; height: 11px; flex-shrink: 0; }
.skel-pd-spec-val { height: 11px; }

@media (max-width: 860px) {
  .skel-pd-grid { grid-template-columns: 1fr; }
  .skel-pd-img  { max-width: 480px; }
}
@media (max-width: 600px) {
  .skel-pd-hero { padding-left: 20px; padding-right: 20px; }
  .skel-pd-title1, .skel-pd-title2 { height: 34px; }
  .skel-pd-cta-row { flex-wrap: wrap; }
  .skel-pd-btn-main { min-width: 100%; }
  .skel-pd-btn-back { display: none; }
}

/* ================================================================
   COMPARE PAGE SKELETON
================================================================ */
.skel-cmp-hero {
  padding: 100px 40px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  background: var(--bg3, #2a2a2a);
  border-bottom: 1px solid var(--skel-base);
}
.skel-cmp-badge { width: 30%; height: 11px; margin-bottom: 20px; }
.skel-cmp-h1a   { width: 55%; height: 48px; margin-bottom: 12px; border-radius: 6px; }
.skel-cmp-h1b   { width: 40%; height: 48px; margin-bottom: 20px; border-radius: 6px; }
.skel-cmp-sub   { width: 50%; height: 14px; }

.skel-cmp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 40px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.skel-cmp-col {
  border: 1px solid var(--skel-base);
  border-radius: 14px;
  padding: 20px 18px;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-theme="light"] .skel-cmp-col {
  background: rgba(0,0,0,0.02);
}
.skel-cmp-col-img  { width: 100%; height: 140px; border-radius: 10px; margin-bottom: 4px; }
.skel-cmp-col-name { width: 80%;  height: 22px; border-radius: 5px; }
.skel-cmp-col-sub  { width: 55%;  height: 12px; }
.skel-cmp-col-line { width: 100%; height: 11px; }
.skel-cmp-col-btn  { width: 100%; height: 38px; border-radius: 8px; margin-top: 8px; }

@media (max-width: 768px) {
  .skel-cmp-grid { grid-template-columns: 1fr; padding: 24px 20px; }
  .skel-cmp-hero { padding: 80px 20px 40px; }
  .skel-cmp-badge, .skel-cmp-h1a, .skel-cmp-h1b, .skel-cmp-sub { width: 85%; }
}

/* ── No-data empty state: stops shimmer, static muted look ── */
.skel-no-data .skel,
.skel-no-data .idx-skel,
.skel-no-data .cmp-skel,
.skel-no-data .prd-skel,
.skel-no-data .idx-skel-fmc-card,
.skel-no-data .idx-skel-marquee-card,
.skel-no-data .idx-skel-svc-card,
.skel-no-data .idx-skel-dept-card,
.skel-no-data .prd-skel-card,
.skel-no-data .cmp-skel-selector,
.skel-no-data .cmp-skel-col {
  animation: none !important;
  opacity: 0.25 !important;
  transition: opacity 0.4s ease;
}

/* For direct skeleton elements (cards that are themselves [data-no-data]) */
.idx-skel-svc-card.skel-no-data,
.idx-skel-dept-card.skel-no-data {
  animation: none !important;
  opacity: 0.25 !important;
  transition: opacity 0.4s ease;
}
.idx-skel-svc-card.skel-no-data .idx-skel,
.idx-skel-dept-card.skel-no-data .idx-skel {
  animation: none !important;
  opacity: 1 !important; /* already covered by parent's 0.25 */
}

/* For display:contents wrappers, target children */
[data-no-data].skel-no-data .idx-skel,
[data-no-data].skel-no-data .idx-skel-marquee-card {
  animation: none !important;
  opacity: 0.25 !important;
  transition: opacity 0.4s ease;
}

/* Skeleton span (e.g. resultCount pill) */
span[data-no-data].skel-no-data,
span[data-no-data].skel-no-data.cmp-skel {
  animation: none !important;
  opacity: 0.25 !important;
}

/* Disabled button state for skeleton/no-data */
button[disabled].btn-filter-toggle,
button[disabled].btn-filter-apply,
button[disabled].btn-filter-reset {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Disabled search input state */
input.search-input:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}