/* =========================================
   MALLAK – Surfactants | surfactants.css
   Overrides only — base styles from style.css
   ========================================= */

/* ─────────────────────────────────────────────
   BUG FIX 1: Mega-menu bleed
   The shared header's .mega-menu has z-index:1500
   and position:fixed; top:90px. On the surfactants
   page this causes it to sit OVER the hero.
   We force it hidden when the page first loads via JS
   (surfactants.js removes .active on DOMContentLoaded).
   The CSS below ensures the hero and tab-nav stack
   correctly ABOVE any leftover menu state.
───────────────────────────────────────────── */

/* Hero sits below the fixed header but above any residual mega-menu */
.surfactants-page .hero-container {
  position: relative;
  z-index: 1;       /* below header (1000) and mega-menu (1500), that's fine —
                       the mega-menu is position:fixed so it overlays anyway,
                       but JS clears .active immediately on load */
}

/* Tab nav sits just below the header */
.surfactants-page .tab-nav-outer {
  position: sticky;
  top: 90px;        /* sticks just below the 90px fixed header */
  z-index: 800;     /* below header (1000) but above page content */
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ─────────────────────────────────────────────
   BUG FIX 2: Chopped / short content area
   .main-content in style.css has padding:36px 60px 60px
   which is correct. The issue is the Introduction
   section shows nothing because it relied on the API.
   Now that content is server-side, we just need the
   section body to have readable spacing.
───────────────────────────────────────────── */
.surf-section-body {
  max-width: 820px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.75;
  color: #444;
  text-align: justify;
}
.surf-section-body p {
  margin-bottom: 14px;
}

/* ─────────────────────────────────────────────
   HERO — surfactants-specific background
───────────────────────────────────────────── */
.surf-hero {
  background: url('/static/img/orange.png') no-repeat center center;
  background-size: cover;
}

/* ─────────────────────────────────────────────
   PRODUCT FILTER PANEL
   Two-level dropdown selects + clear button
   above the shared .table-section
───────────────────────────────────────────── */
.surf-filter-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

/* Both the primary and sub selects share this style */
.surf-select {
  padding: 9px 36px 9px 14px;
  border: 1.5px solid #ddd;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: #333;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  outline: none;
  min-width: 190px;
  transition: border-color 0.2s;
}
.surf-select:focus { border-color: #1d2939; }

/* Disabled — still visible, muted so user knows to pick left select first */
.surf-select:disabled {
  background-color: #f5f5f5;
  color: #bbb;
  cursor: not-allowed;
  border-color: #e8e8e8;
}

/* Clear filter button */
.surf-clear-btn {
  padding: 9px 18px;
  border: 1.5px solid #ddd;
  border-radius: 10px;
  background: #fff;
  color: #888;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.surf-clear-btn:hover {
  background: #f5f5f5;
  color: #333;
  border-color: #bbb;
}

/* ─────────────────────────────────────────────
   INFRASTRUCTURE — equipment list (image 4)
───────────────────────────────────────────── */
.equip-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
}
.equip-list li {
  padding: 12px 18px;
  background: rgba(255,255,255,0.85);
  border-left: 4px solid #1d2939;
  border-radius: 0 10px 10px 0;
  font-size: 14px;
  color: #333;
  line-height: 1.55;
}

/* ─────────────────────────────────────────────
   LOGISTICS — container table (image 5)
───────────────────────────────────────────── */
.container-table {
  width: 100%;
  max-width: 780px;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 8px;
}
.container-table th {
  background: #1d2939;
  color: #fff;
  padding: 10px 16px;
  text-align: left;
  font-weight: 600;
}
.container-table td {
  padding: 10px 16px;
  border-bottom: 1px solid #eee;
  color: #333;
}
.container-table tr:nth-child(even) td { background: #f8f8f8; }

/* ─────────────────────────────────────────────
   PURCHASE NEEDS tagline
───────────────────────────────────────────── */
.surf-purchase-tagline {
  font-size: 15px;
  color: #555;
  max-width: 640px;
  margin: 0 auto 24px;
  line-height: 1.6;
  text-align: center;
}

/* ─────────────────────────────────────────────
   LOCK PAGE BG — no colour-reactive background
   on the surfactants page (that's pigments-only)
───────────────────────────────────────────── */
body.surfactants-page {
  --page-bg: #f5f6f8;
  --nav-bg:  rgba(255,255,255,0.93);
  background-color: #f5f6f8 !important;
}

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 900px) {
  .surf-filter-panel    { flex-direction: column; }
  .surf-filter-group    { min-width: 100%; }
  .surfactants-page .tab-nav-outer { top: 0; }
}

/* =============================================================
   SECTION IMAGE SLIDER
   ============================================================= */
/* .section-slider-wrap {
    margin-top: 40px;
}

.sec-slider-outer {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.sec-slider-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25,1,0.5,1);
}

.sec-slide {
    min-width: 100%;
    cursor: pointer;
}

.sec-slide img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    border-radius: 16px 16px 0 0;
}

.sec-slide-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 24px 32px;
}

.sec-slide-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #1d2939;
    margin-bottom: 8px;
}

.sec-slide-card p {
    font-size: 14px;
    color: #667085;
    line-height: 1.6;
    margin: 0;
}

.sec-slider-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

.sec-slider-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #1d2939;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec-slider-btn:hover { background: #0b4ea2; transform: scale(1.1); }

.sec-slider-dots { display: flex; gap: 8px; }

.sec-slider-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d1d5db;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.sec-slider-dot.active {
    background: #1d2939;
    transform: scale(1.3);
} */

/* Lightbox */
/* .sec-lightbox {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.sec-lightbox.open { display: flex; }

.sec-lightbox-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.sec-lightbox-box {
    position: relative;
    z-index: 2;
    max-width: 85vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.sec-lightbox-box img {
    max-width: 85vw;
    max-height: 75vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    object-fit: contain;
}

.sec-lightbox-caption {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
}

.sec-lightbox-close {
    position: absolute;
    top: -48px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 38px;
    cursor: pointer;
    line-height: 1;
}

.sec-slider-empty {
    color: #aaa;
    font-size: 14px;
    padding: 20px 0;
    text-align: center;
} */
 
/*
this peice is critical to prevent chopped content and ensure the slider works at all widths.
The slider's JS calculates the current slide's translateX as a percentage based on the total numberof slides. 
If the slides don't have a consistent width of 100% / totalSlides, the slider will break and show multiple slides at once or chop content.
Only problem is there isnt any horizontal barrier to stop the content from overflowing out of the slide container, so we have to set a max-width on the slides equal to the actual pixel width of the container. 
This ensures that even if the percentage widths cause them to stretch wider than the container, they will visually cap at the container's width and not bleed into each other.
That I have not done here rn because that is not the priority and I want to get the basic slider functionality working first, but this is a note to self for the next step.
*/
/*
.surfactants-page .sec-slide {
  min-width: 100% !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

.surfactants-page .sec-slider-outer {
  overflow: hidden !important;
  width: 100% !important;
}

.surfactants-page .sec-slider-track {
  display: flex !important;
  will-change: transform;
} */