/* ═══════════════════════════════════════════════════════════════
   INDUSTRIALIST.AE — GLOBAL THEME STYLES v1.1
   Works with Industrialist Portal plugin (no WPDirectoryKit)
════════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    max-width: 100%;
}
a { color: var(--orange); text-decoration: none; transition: color .2s; }
a:hover { color: #FFD400; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); color: #fff; line-height: 1.2; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; padding: 0; margin: 0; }

/* ── Layout ── */
.ind-container { max-width: var(--max-w); margin: 0 auto; padding: 0 28px; }
.ind-page-wrap { min-height: calc(100vh - var(--header-h)); }
.ind-main { padding-top: var(--header-h); }
.ind-page-fullwidth { min-height: 80vh; }
.ind-page-content { padding: 60px 0; }
.ind-page-hero {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 48px 0 36px;
    margin-bottom: 40px;
}
.ind-page-title { font-size: 2.2rem; font-weight: 900; letter-spacing: -.5px; }

/* ── Header ── */
.ind-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: rgba(6,8,11,.92);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    height: var(--header-h);
}
.ind-header-inner {
    max-width: var(--max-w); margin: 0 auto; padding: 0 28px;
    height: 100%; display: flex; align-items: center; gap: 24px;
}

/* Logo */
.ind-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.ind-logo img { max-height: 38px; width: auto; }
.ind-logo-text { font-family: var(--font-head); font-size: 1.35rem; font-weight: 900; color: #fff; letter-spacing: -.5px; }
.ind-logo-dot, .ind-logo-accent { color: var(--orange); }
.ind-logo-wordmark .ind-logo-accent { text-shadow: 0 0 14px rgba(255,212,0,.26); }

/* Nav */
.ind-nav { flex: 1; }
.ind-nav-list { display: flex; gap: 4px; align-items: center; }
.ind-nav-list li a {
    color: var(--muted); font-size: .85rem; font-weight: 700;
    padding: 8px 14px; border-radius: var(--r-xs);
    transition: all .2s; display: block;
}
.ind-nav-list li a:hover,
.ind-nav-list li.current-menu-item a { color: var(--text); background: rgba(255,255,255,.06); }
.ind-nav-list li.current-menu-item a { color: var(--orange); }

/* Header CTA */
.ind-header-cta { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ── Buttons ── */
.ind-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 20px; border-radius: 30px;
    font-size: .8rem; font-weight: 800;
    cursor: pointer; border: none;
    transition: all .2s; text-decoration: none;
    font-family: var(--font-body); line-height: 1;
}
.ind-btn-primary { background: var(--orange); color: #07080b; box-shadow: 0 4px 14px var(--orange-glow); }
.ind-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px var(--orange-glow); color: #07080b; }
.ind-btn-ghost { background: rgba(255,255,255,.06); border: 1px solid var(--border2); color: var(--muted2); }
.ind-btn-ghost:hover { background: rgba(255,255,255,.10); color: var(--text); }
.ind-btn-lg { padding: 14px 28px; font-size: .9rem; }
.ind-btn-sm { padding: 7px 14px; font-size: .75rem; }

/* Hamburger */
.ind-hamburger { display: none; background: none; border: 1px solid var(--border); color: var(--muted); padding: 8px; border-radius: var(--r-xs); cursor: pointer; transition: all .2s; }
.ind-hamburger:hover { color: var(--text); border-color: var(--border2); }

/* Mobile nav */
.ind-mobile-nav { display: none; background: var(--surface); border-top: 1px solid var(--border); padding: 16px 20px; }
.ind-mobile-nav.open { display: block; }
.ind-mobile-nav-list li a { color: var(--muted); font-size: .9rem; font-weight: 700; padding: 10px 14px; border-radius: var(--r-xs); display: block; transition: all .2s; }
.ind-mobile-nav-list li a:hover { color: var(--text); background: rgba(255,255,255,.06); }

/* ── HERO ── */
.ind-hero { padding: 100px 0 80px; position: relative; overflow: hidden; }
.ind-hero-orb { position: absolute; border-radius: 50%; filter: blur(160px); opacity: .09; pointer-events: none; animation: indOrb 20s infinite alternate ease-in-out; }
.ind-hero-orb-1 { width:500px;height:500px;background:var(--orange);top:-150px;right:-80px; }
.ind-hero-orb-2 { width:400px;height:400px;background:var(--cyan);bottom:-100px;left:-60px;animation-delay:-10s; }
@keyframes indOrb { 0%{transform:translate(0,0)scale(1);}50%{transform:translate(-30px,30px)scale(1.15);}100%{transform:translate(30px,-30px)scale(.9);} }

.ind-hero-inner { max-width: 780px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.ind-hero-eyebrow {
    display: inline-block; background: rgba(255,212,0,.12);
    border: 1px solid rgba(255,212,0,.25); color: var(--orange);
    font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    padding: 6px 16px; border-radius: 30px; margin-bottom: 24px;
}
.ind-hero-title { font-size: clamp(2.8rem,6vw,5rem); font-weight: 900; letter-spacing: -2px; margin-bottom: 16px; line-height: 1.05; }
.ind-hero-title-accent { background: linear-gradient(135deg,var(--orange) 0%,#FFE45C 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.ind-hero-sub { font-size: 1.1rem; color: var(--muted2); margin-bottom: 32px; line-height: 1.65; max-width: 600px; margin-left: auto; margin-right: auto; }
.ind-hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.ind-hero-stats { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }
.ind-hero-stat-val { font-family: var(--font-head); font-size: 1.8rem; font-weight: 900; color: var(--orange); }
.ind-hero-stat-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; margin-top: 2px; }

/* ── Section headers ── */
.ind-section-hd { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
.ind-section-title { font-size: 1.8rem; font-weight: 900; letter-spacing: -.5px; }
.ind-section-sub { color: var(--muted); font-size: .88rem; margin-top: 4px; }

/* ── Type chips ── */
.ind-types-section { padding: 40px 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ind-types-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 12px; }
.ind-type-chip {
    background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 16px 18px; display: flex; align-items: center; gap: 12px;
    color: var(--muted2); font-size: .85rem; font-weight: 700;
    transition: all .2s; text-decoration: none;
}
.ind-type-chip:hover { border-color: rgba(255,212,0,.3); background: rgba(255,212,0,.05); color: #fff; }
.ind-type-chip-icon {
    width: 34px; height: 34px; border-radius: 12px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--orange);
    background: rgba(255,212,0,.10);
    border: 1px solid rgba(255,212,0,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.ind-type-chip-icon svg { width: 17px; height: 17px; display: block; }
.ind-type-chip-label { flex: 1; }
.ind-type-chip > svg { color: var(--orange); opacity: .55; transition: opacity .2s; flex-shrink: 0; }
.ind-type-chip:hover > svg { opacity: 1; }

/* ── Sections ── */
.ind-listings-section { padding: 60px 0; }
.ind-zones-section { padding: 0 0 60px; }
.ind-zones-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 12px; }
.ind-zone-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 18px 20px; display: flex; align-items: center; gap: 10px;
    color: var(--text); text-decoration: none; transition: all .2s;
}
.ind-zone-card:hover { border-color: var(--border2); transform: translateX(4px); color: #fff; }
.ind-zone-emirate { font-size: .6rem; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; color: var(--orange); display: block; margin-bottom: 2px; }
.ind-zone-name { font-size: .88rem; font-weight: 700; flex: 1; }
.ind-zone-card svg { color: var(--muted); flex-shrink: 0; transition: color .2s; }
.ind-zone-card:hover svg { color: var(--orange); }

/* ── CTA ── */
.ind-cta-section { padding: 0 0 60px; }
.ind-cta-card {
    background: linear-gradient(135deg,rgba(255,212,0,.06) 0%,rgba(0,222,255,.04) 100%);
    border: 1px solid rgba(255,212,0,.15); border-radius: 28px;
    padding: 56px 48px; text-align: center; position: relative; overflow: hidden;
}
.ind-cta-orb { position:absolute;width:350px;height:350px;background:var(--orange);border-radius:50%;filter:blur(140px);opacity:.06;top:-100px;right:-80px;pointer-events:none; }
.ind-cta-content { position: relative; z-index: 1; }
.ind-cta-title { font-size: 2.2rem; font-weight: 900; letter-spacing: -.5px; margin-bottom: 12px; }
.ind-cta-sub { color: var(--muted2); font-size: .95rem; max-width: 520px; margin: 0 auto 28px; line-height: 1.7; }
.ind-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Suppliers section ── */
.ind-suppliers-section { padding: 0 0 80px; }

/* ── Footer ── */
.ind-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 56px 0 0; }
.ind-footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; }
.ind-footer-brand .ind-logo-text { font-size: 1.4rem; }
.ind-footer-tagline { color: var(--muted); font-size: .85rem; margin-top: 10px; line-height: 1.6; }
.ind-footer-links { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; }
.ind-footer-col-title { font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 14px; }
.ind-footer-col ul li { margin-bottom: 8px; }
.ind-footer-col ul li a { color: var(--muted2); font-size: .83rem; transition: color .2s; }
.ind-footer-col ul li a:hover { color: var(--orange); }
.ind-footer-bottom { margin-top: 48px; border-top: 1px solid var(--border); padding: 18px 0; }
.ind-footer-bottom .ind-footer-inner { display: flex; justify-content: space-between; align-items: center; grid-template-columns: unset; font-size: .78rem; color: var(--muted); }
.ind-footer-badge { background: rgba(255,212,0,.1); border: 1px solid rgba(255,212,0,.2); color: var(--orange); padding: 3px 12px; border-radius: 20px; font-size: .7rem; font-weight: 800; }

/* ── Pagination ── */
.ind-pagination { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 40px 0; }
.ind-pagination a, .ind-pagination span { background: var(--surface); border: 1px solid var(--border); color: var(--muted); padding: 9px 16px; border-radius: var(--r-xs); font-size: .82rem; font-weight: 700; text-decoration: none; transition: all .2s; }
.ind-pagination a:hover, .ind-pagination .current { background: var(--orange); border-color: var(--orange); color: #07080b; }

/* ── Responsive ── */
@media(max-width:1024px) {
    .ind-footer-inner { grid-template-columns: 1fr; gap: 32px; }
    .ind-footer-links { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:768px) {
    .ind-container { padding: 0 18px; }
    .ind-hero { padding: 80px 0 60px; }
    .ind-hero-title { font-size: 2.8rem; letter-spacing: -1px; }
    .ind-nav { display: none; }
    .ind-hamburger { display: flex; }
    .ind-header-cta .ind-btn-primary { display: none; }
    .ind-types-grid { grid-template-columns: repeat(2,1fr); }
    .ind-zones-grid { grid-template-columns: 1fr 1fr; }
    .ind-cta-card { padding: 36px 24px; }
    .ind-cta-title { font-size: 1.6rem; }
    .ind-footer-links { grid-template-columns: 1fr 1fr; }
    .ind-footer-bottom .ind-footer-inner { flex-direction: column; gap: 10px; text-align: center; }
}
@media(max-width:480px) {
    .ind-hero-title { font-size: 2.2rem; }
    .ind-types-grid { grid-template-columns: 1fr; }
    .ind-zones-grid { grid-template-columns: 1fr; }
    .ind-footer-links { grid-template-columns: 1fr; }
    .ind-hero-stats { gap: 20px; }
}

/* Supplier CTA button — cyan/bluish supplier color */
.ind-btn-supplier {
    background: rgba(0,222,255,.10);
    border: 1px solid rgba(0,222,255,.35);
    color: var(--cyan);
    box-shadow: 0 4px 14px rgba(0,222,255,.10);
}
.ind-btn-supplier:hover {
    background: rgba(0,222,255,.18);
    border-color: rgba(0,222,255,.55);
    color: #d9fbff;
    box-shadow: 0 8px 22px rgba(0,222,255,.18);
}


/* ── Mobile app-style bottom navigation ── */
.ind-mobile-bottom-nav { display: none; }
@media (max-width: 768px) {
    /* The app-style bottom navigation replaces the full website header on mobile. */
    .ind-header,
    .ind-mobile-nav,
    .ind-hamburger {
        display: none !important;
    }

    html { scroll-padding-bottom: 106px; }
    body {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }
    .ind-page-wrap {
        padding-top: 0 !important;
        min-height: 100vh;
    }
    .ind-main { padding-top: 0 !important; }

    .ind-mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        z-index: 99999;
        display: grid;
        grid-template-columns: repeat(var(--mbn-cols, 5), 1fr);
        gap: 2px;
        padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
        min-height: calc(82px + env(safe-area-inset-bottom));
        background: rgba(18, 19, 25, .97);
        border-top: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 -18px 46px rgba(0,0,0,.45);
        backdrop-filter: blur(18px) saturate(145%);
        -webkit-backdrop-filter: blur(18px) saturate(145%);
    }

    .ind-mbn-item {
        position: relative;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 8px 4px 7px;
        color: rgba(238,240,244,.64);
        text-decoration: none;
        border-radius: 22px;
        font-size: 10.5px;
        font-weight: 850;
        letter-spacing: -.02em;
        line-height: 1.05;
        transition: background .18s ease, color .18s ease, transform .18s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .ind-mbn-item span:last-child {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
    }
    .ind-mbn-ico {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        color: currentColor;
        position: relative;
    }
    .ind-mbn-ico svg {
        width: 26px;
        height: 26px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .ind-mbn-item:nth-child(3) .ind-mbn-ico svg,
    .ind-mbn-item:nth-child(5) .ind-mbn-ico svg {
        fill: none;
    }
    .ind-mbn-ico b {
        position: absolute;
        top: -12px;
        right: -18px;
        padding: 4px 8px 3px;
        border-radius: 999px;
        background: var(--orange, #FFD400);
        color: #07080b;
        font-size: 9px;
        font-weight: 950;
        letter-spacing: .04em;
        line-height: 1;
        box-shadow: 0 8px 16px rgba(0,0,0,.22);
    }
    .ind-mbn-item.active {
        color: #fff;
    }
    .ind-mbn-item.active .ind-mbn-ico {
        width: 58px;
        border-radius: 999px;
        background: var(--orange, #FFD400);
        color: #07080b;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 8px 22px rgba(255,212,0,.35);
    }
    .ind-mbn-item:active { transform: scale(.97); }

    /* Keep normal footers/content from hiding behind the nav. */
    .ind-footer {
        padding-bottom: calc(90px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 380px) {
    .ind-mbn-item { font-size: 9.5px; }
    .ind-mbn-ico { width: 25px; height: 25px; }
    .ind-mbn-ico svg { width: 23px; height: 23px; }
    .ind-mbn-item.active .ind-mbn-ico { width: 52px; }
}

/* ═══════════════════════════════════════════════════════════
   v1.3.3 — Mobile structural tweaks
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Hide the entire site footer on mobile (bottom nav replaces it) */
    .ind-footer { display: none !important; }

    /* On single listing pages, hide the bottom nav — the in-page photo
       stack provides back/share/agent contact instead. Remove the body
       padding the nav normally reserves so there's no empty gap. */
    body.single-ind_property .ind-mobile-bottom-nav { display: none !important; }
    body.single-ind_property { padding-bottom: 0 !important; } /* detail.css v1.3.5 restores space for the agent contact bar */
}


/* v1.3.4 — keep mobile structure, but hide bottom nav while property filter drawer is open */
@media (max-width: 768px) {
    body.ip-filter-open .ind-mobile-bottom-nav {
        display: none !important;
    }
    body.ip-filter-open {
        overscroll-behavior: contain;
    }
}

/* v1.4.3 — prevent mobile bottom navigation from overflowing viewport */
@media(max-width:760px){
  html,
  body{
    overflow-x:hidden!important;
    max-width:100%!important;
  }
  .ind-mobile-bottom-nav{
    box-sizing:border-box!important;
    width:100vw!important;
    max-width:100vw!important;
    overflow:hidden!important;
  }
}

/* ═══════════════════════════════════════════════════════════
   v1.4.7 — Context-aware bottom nav: "Add" accent + "More" drawer
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* On mobile the new bottom nav is the dashboard's navigation, so hide the
       dashboard's own stacked sidebar (logo + vertical nav) to avoid two navs. */
    .ind-dash .d-sidebar { display: none !important; }

    /* Make the dashboard "Add" stand out as the primary action */
    .ind-mbn-item.ind-mbn-add .ind-mbn-ico {
        background: var(--orange, #FFD400);
        color: #07080b;
        border-radius: 999px;
        box-shadow: 0 6px 16px rgba(255,212,0,.35);
    }
    .ind-mbn-item.ind-mbn-add.active .ind-mbn-ico { width: 58px; }

    /* "More" button matches the other items (it's a <button>, reset native styles) */
    .ind-mbn-more-btn { background: none; border: 0; cursor: pointer; font: inherit; }
}

/* More drawer — compact bottom sheet, sits above the bottom nav */
.ind-mbn-more-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(4,5,8,.6);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ind-mbn-more-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.ind-mbn-more-sheet {
    position: absolute; left: 10px; right: 10px;
    bottom: calc(82px + env(safe-area-inset-bottom) + 10px);
    background: #12131a;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px; padding: 6px;
    box-shadow: 0 -12px 44px rgba(0,0,0,.55);
    transform: translateY(14px); opacity: .6;
    transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s ease;
}
.ind-mbn-more-overlay.open .ind-mbn-more-sheet { transform: translateY(0); opacity: 1; }
.ind-mbn-more-grip {
    width: 38px; height: 4px; border-radius: 999px;
    background: rgba(255,255,255,.18);
    margin: 6px auto 8px;
}
.ind-mbn-more-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 14px;
    color: #eef0f4; text-decoration: none;
    font-size: .92rem; font-weight: 700; line-height: 1;
}
.ind-mbn-more-row svg { width: 21px; height: 21px; flex-shrink: 0; fill: currentColor; opacity: .85; }
.ind-mbn-more-row:active { background: rgba(255,255,255,.06); }
.ind-mbn-more-row + .ind-mbn-more-row { border-top: 1px solid rgba(255,255,255,.05); }
.ind-mbn-more-logout { color: #ff6b6b; }
.ind-mbn-more-logout svg { opacity: 1; }


/* industrialist-industrial-yellow-test-v162 — property-side industrial-yellow accent test */
:root{--orange:#FFD400;--orange-dim:rgba(255,212,0,.15);--orange-glow:rgba(255,212,0,.34);}
a:hover{color:#FFD400;}
.ind-btn-primary,.ind-pagination a:hover,.ind-pagination .current{box-shadow:0 0 24px rgba(255,212,0,.24);}