/* =============================================================
   Smart-Projector site customizations (theme-v2 child)
   Spec tables · P4 header RFQ CTA / WhatsApp float
   / mobile sticky CTA bar.
   Navigation uses agon's native dropdown styles (the custom
   mega panel was reverted 2026-09-14).
   Kept in a separate file because the published child style.css is
   shadowed by the inherited agon style.css (publish copies parent
   first, child same-name files never overwrite it).
   ============================================================= */

/* Product Specification Table Styles */
.specification-table-wrapper {
    padding: 20px 0;
}
.spec-group {
    margin-bottom: 30px;
}
.spec-group-title {
    padding-bottom: 10px;
    border-bottom: 2px solid #3C78D8;
    margin-bottom: 15px !important;
}
.table-specification {
    margin-bottom: 0;
    background: #fff;
}
.table-specification th.spec-attr-name {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
    padding: 12px 16px;
    vertical-align: middle;
    width: 35%;
}
.table-specification td.spec-attr-value {
    padding: 12px 16px;
    color: #555;
    vertical-align: middle;
}
.table-specification tr:hover th,
.table-specification tr:hover td {
    background-color: #f0f4ff;
}
/* =============================================================
   P4: Header RFQ CTA + WhatsApp float + mobile sticky CTA bar
   ============================================================= */
.action-header-cta {
    display: inline-block;
}
.rfq-header-btn {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff !important;
    font-weight: 700;
    border-radius: 8px;
    padding: 10px 18px;
    line-height: 1.2;
    white-space: nowrap;
}
.rfq-header-btn:hover {
    background-color: #00585f;
    border-color: #00585f;
    color: #fff;
}
.header-nav-right .box-search-top {
    vertical-align: middle;
}
@media (max-width: 575.98px) {
    .rfq-header-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
    .header-nav-right .me-2 {
        margin-right: 0.4rem !important;
    }
}

/* Desktop WhatsApp floating button */
.wa-float {
    position: fixed;
    right: 22px;
    bottom: 26px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #25d366;
    color: #fff;
    border-radius: 50px;
    padding: 13px 20px 13px 14px;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.wa-float.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.wa-float:hover {
    background: #1fb858;
    color: #fff;
}
.wa-float-label {
    font-family: var(--secondary-font), sans-serif;
    font-weight: 700;
    font-size: 14px;
}

/* Mobile sticky CTA bar */
.mobile-cta-bar {
    display: none;
}
@media (max-width: 991.98px) {
    body {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    }
    .wa-float {
        display: none;
    }
    .mobile-cta-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 990;
        display: flex;
        align-items: stretch;
        height: calc(58px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #fff;
        box-shadow: 0 -4px 18px rgba(16, 24, 40, 0.12);
        border-top: 1px solid #eef0f3;
    }
    .mobile-cta-bar a {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-family: var(--secondary-font), sans-serif;
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
    }
    .mobile-cta-wa {
        color: #1f9d55;
        background: #fff;
        border-right: 1px solid #eef0f3;
    }
    .mobile-cta-rfq {
        color: #fff;
        background: var(--color-primary);
    }
    .mobile-cta-rfq:active {
        background: #00585f;
    }
}

/* =============================================================
   20260915 (rev2, minimal): Desktop main navigation
   Native agon menu styling is LEFT AS-IS. Only narrow fixes:
   - Bootstrap .container maxes out at 1320px, so on EVERY desktop
     width the five native 18px/22px items (813px) are wider than
     the space between the logo and the RFQ button (~788px even at
     xxl, 578px at xl), which makes the float items wrap to a
     second line. Two stepped trims, horizontal spacing only:
       >=1400px: native 18px font kept, padding 22 -> 18
       1200-1399px (1140 container): font 15, padding 6
   - Products only: the panel keeps its native anchor (the li
     stays position:relative; ul keeps top:100%;left:0) and is
     just laid out as two compact groups with static sub-lists,
     using the node classes already in the menu data
     (mega-menu / mega-group-platform / mega-group-application).
     No template or markup change; mobile menu untouched.
   ============================================================= */

/* 1a) xxl: tiny trim only, native 18px look */
@media (min-width: 1400px) {
    .header .main-header .header-logo {
        margin-right: 40px;
    }
    .header .nav-main-menu .main-menu > li > a {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* 1b) xl band: tighter trim so all five items fit the 1140 container */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .header .main-header .header-logo {
        margin-right: 30px;
    }
    .header .nav-main-menu .main-menu > li > a {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 15px;
    }
}

/* 2) Products: two-group panel, natively anchored to its own li */
@media (min-width: 1200px) {
    .header .nav-main-menu .main-menu > li.mega-menu > .sub-menu {
        columns: 2;
        column-gap: 26px;
        width: 500px;
        min-width: 0;
        padding: 12px 18px 14px;
    }
    .header .nav-main-menu .main-menu li.mega-menu > .sub-menu > li {
        float: none;
        width: auto;
        break-inside: avoid;
    }
    /* 4 platform nodes fill column 1; application nodes start column 2 */
    .header .nav-main-menu .main-menu li.mega-menu > .sub-menu > li:nth-child(5) {
        break-before: column;
    }
    /* Portable = 1st DOM node, Business = 5th (4 platform nodes) */
    .header .nav-main-menu .main-menu li.mega-menu > .sub-menu > li:nth-child(1)::before,
    .header .nav-main-menu .main-menu li.mega-menu > .sub-menu > li:nth-child(5)::before {
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #98a2b3;
        margin-bottom: 6px;
    }
    .header .nav-main-menu .main-menu li.mega-menu > .sub-menu > li:nth-child(1)::before {
        content: "Product Types";
    }
    .header .nav-main-menu .main-menu li.mega-menu > .sub-menu > li:nth-child(5)::before {
        content: "By Application";
    }
    /* sub-categories are expanded inline, so no native flyout caret */
    .header .nav-main-menu .main-menu li.mega-menu > .sub-menu > li.has-children > a::after {
        display: none;
    }
    /* second level becomes a static list: kill the flyout box */
    .header .nav-main-menu .main-menu li.mega-menu > .sub-menu > li > .sub-menu {
        position: static;
        min-width: 0;
        padding: 0 0 8px;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
    }
    .header .nav-main-menu .main-menu li.mega-menu > .sub-menu > li > .sub-menu > li {
        float: none;
        width: auto;
    }
    .header .nav-main-menu .main-menu li.mega-menu > .sub-menu > li > .sub-menu > li > a {
        padding: 3px 0 3px 12px;
        font-size: 13.5px;
        color: #475467;
    }
    .header .nav-main-menu .main-menu li.mega-menu > .sub-menu > li > .sub-menu > li > a:hover {
        padding-left: 12px;
    }
}

/* safety net: never render an empty dropdown box/caret */
.header .main-menu li > ul:empty {
    display: none;
}

/* 20260915: top-bar language dropdown was trapped at z-index:2 and got
   covered by the homepage hero image (same z-index, later in the DOM).
   Lift the top bar one level only. */
.header-top-green {
    z-index: 3;
}

/* 20260916 audit fix: Google Map block on /contact — responsive 16:9-ish frame */
.sp-contact-map .sp-contact-map-frame {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 42%;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}
.sp-contact-map .sp-contact-map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
@media (max-width: 767.98px) {
    .sp-contact-map .sp-contact-map-frame {
        padding-bottom: 90%;
    }
}