/* =========================================================
   ZIOFLEX WEBSITE - FINAL CLEAN FRONTEND OVERRIDE
   Cleaned after staged patches: stable grid, card images, article/sidebar, footer.
   Do not add broad grid/image overrides below this file unless scoped by page.
   ========================================================= */

:root{
    --z5-blue:#172bd8;
    --z5-blue-2:#2137ff;
    --z5-navy:#06104f;
    --z5-text:#15213d;
    --z5-muted:#64708a;
    --z5-border:#dfe8f5;
    --z5-soft:#f4f7fc;
    --z5-footer:#eef3f8;
    --z5-white:#ffffff;
    --z5-shadow:0 18px 42px rgba(16,24,40,.075);
}

/* Accessibility */
.zio-skip-link{
    position:absolute;
    left:18px;
    top:-120px;
    z-index:20000;
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:0 16px;
    border-radius:999px;
    background:var(--z5-blue);
    color:#fff;
    font-size:12px;
    font-weight:800;
    transition:top .2s ease;
}
.zio-skip-link:focus{top:12px;outline:2px solid #fff;outline-offset:2px;}

/* Keep header stable, do not enlarge mobile header */
.zio-header{background:rgba(255,255,255,.985)!important;border-bottom:1px solid #edf1f8!important;box-shadow:0 10px 26px rgba(16,24,40,.055)!important;}
.zio-dropdown-menu{border:1px solid rgba(223,232,246,.96)!important;box-shadow:0 26px 70px rgba(7,20,63,.14)!important;border-radius:18px!important;padding:10px!important;}
.zio-dropdown-menu a{border-radius:12px!important;}
.zio-dropdown-menu a:hover{background:#eef3ff!important;color:var(--z5-blue)!important;}

/* Anchor target should not hide under sticky/fixed header */
#product-catalog,
.news-section,
.portfolio-section,
.download-section,
.search-result-section{scroll-margin-top:136px;}

/* General content section polish */
.zio-product-catalog,
.news-section,
.portfolio-section,
.download-section,
.search-result-section{background:#fff!important;}
.content-section-head,
.zio-section-head,
.portfolio-head,
.search-result-head{max-width:820px!important;margin-bottom:30px!important;}
.content-section-head h2,
.zio-section-head h2,
.portfolio-head h2,
.search-result-head h2{font-weight:800!important;letter-spacing:-.025em!important;color:var(--z5-navy)!important;}
.content-section-head p,
.zio-section-head p,
.portfolio-head p,
.search-result-head p{color:var(--z5-muted)!important;line-height:1.7!important;}

/* =========================================================
   DESKTOP GRID: 4 columns for primary listing pages only
   ========================================================= */
@media (min-width:1200px){
    .news-grid,
    .zio-product-grid,
    .portfolio-grid,
    .download-grid,
    .search-card-grid,
    .zio-related-grid,
    .home-admin-article-grid,
    .company-latest-articles-grid{
        display:grid!important;
        grid-template-columns:repeat(4,minmax(0,1fr))!important;
        gap:24px!important;
        align-items:stretch!important;
        max-width:none!important;
        width:100%!important;
        margin-left:0!important;
        margin-right:0!important;
    }
}
@media (min-width:992px) and (max-width:1199px){
    .news-grid,
    .zio-product-grid,
    .portfolio-grid,
    .download-grid,
    .search-card-grid,
    .zio-related-grid,
    .home-admin-article-grid,
    .company-latest-articles-grid{
        display:grid!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:22px!important;
        max-width:none!important;
        width:100%!important;
    }
}
@media (min-width:768px) and (max-width:991px){
    .news-grid,
    .zio-product-grid,
    .portfolio-grid,
    .download-grid,
    .search-card-grid,
    .zio-related-grid,
    .home-admin-article-grid,
    .company-latest-articles-grid{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:20px!important;
        max-width:none!important;
        width:100%!important;
    }
}
@media (max-width:767px){
    .news-grid,
    .zio-product-grid,
    .portfolio-grid,
    .download-grid,
    .search-card-grid,
    .zio-related-grid,
    .home-admin-article-grid,
    .company-latest-articles-grid{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:18px!important;
        max-width:none!important;
        width:100%!important;
    }
}

/* =========================================================
   CARD FOUNDATIONS
   ========================================================= */
.news-card,
.zio-product-card,
.portfolio-card,
.search-card,
.zio-related-card,
.home-admin-article-card,
.company-latest-article-card{
    height:100%!important;
    border:1px solid var(--z5-border)!important;
    border-radius:20px!important;
    background:#fff!important;
    overflow:hidden!important;
    text-decoration:none!important;
    box-shadow:var(--z5-shadow)!important;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.news-card:hover,
.zio-product-card:hover,
.portfolio-card:hover,
.search-card:hover,
.zio-related-card:hover,
.home-admin-article-card:hover,
.company-latest-article-card:hover{
    transform:translateY(-4px)!important;
    border-color:#cbd9ee!important;
    box-shadow:0 24px 58px rgba(16,24,40,.105)!important;
}

/* IMPORTANT: illustration/SVG cards must be CONTAIN, not COVER */
.news-image,
.zio-product-card-image,
.portfolio-card-image,
.company-latest-article-image{
    height:188px!important;
    padding:0!important;
    flex:none!important;
    background:#07106b!important;
    overflow:hidden!important;
    border-bottom:1px solid #e4edf8!important;
}
.home-admin-article-card > img{
    height:178px!important;
    width:100%!important;
    display:block!important;
    object-fit:contain!important;
    padding:16px!important;
    background:#07106b!important;
    border-bottom:1px solid #e4edf8!important;
}
.news-image img,
.zio-product-card-image img,
.portfolio-card-image img,
.company-latest-article-image img{
    width:100%!important;
    height:100%!important;
    display:block!important;
    object-fit:contain!important;
    object-position:center!important;
    padding:16px!important;
    background:#07106b!important;
    transform:none!important;
}
.zio-product-card:hover .zio-product-card-image img,
.news-card:hover .news-image img,
.portfolio-card:hover .portfolio-card-image img,
.company-latest-article-card:hover .company-latest-article-image img{transform:none!important;}

/* Workshop/real photos may keep a photo look when the class is marked manually */
img.zio-real-photo,
.zio-real-photo img{object-fit:cover!important;padding:0!important;background:#f3f6fb!important;}

.news-body,
.zio-product-card-body,
.portfolio-card-body,
.company-latest-article-body{
    padding:22px!important;
    display:flex!important;
    flex-direction:column!important;
    flex:1!important;
}
.news-body h3,
.zio-product-card-body h3,
.portfolio-card-body h3,
.company-latest-article-body h3{
    color:var(--z5-navy)!important;
    font-weight:800!important;
    line-height:1.34!important;
    margin:0 0 10px!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
}
.news-body p,
.zio-product-card-body p,
.portfolio-card-body p,
.company-latest-article-body p{
    color:var(--z5-muted)!important;
    line-height:1.68!important;
    display:-webkit-box!important;
    -webkit-line-clamp:3!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
}
.news-body > span,
.zio-product-card-body > span,
.portfolio-card-body > span,
.company-latest-article-meta span{
    display:inline-flex!important;
    align-self:flex-start!important;
    min-height:25px!important;
    align-items:center!important;
    padding:0 10px!important;
    margin-bottom:12px!important;
    border:1px solid #dbe6ff!important;
    background:#f3f6ff!important;
    color:var(--z5-blue)!important;
    border-radius:999px!important;
    font-size:10px!important;
    font-weight:800!important;
    letter-spacing:.045em!important;
    text-transform:uppercase!important;
}
.news-body strong,
.portfolio-card-body strong,
.zio-product-card-footer strong{color:var(--z5-blue)!important;font-weight:800!important;margin-top:auto!important;}

/* Search cards should be compact */
.search-card{display:grid!important;grid-template-columns:120px minmax(0,1fr)!important;gap:16px!important;padding:14px!important;align-items:center!important;}
.search-card img{width:120px!important;height:86px!important;object-fit:contain!important;background:#07106b!important;padding:10px!important;border-radius:14px!important;}
.search-card div{padding:0!important;}
.search-card h3{font-size:16px!important;margin:4px 0 6px!important;color:var(--z5-navy)!important;}
.search-card p{font-size:12.5px!important;color:var(--z5-muted)!important;line-height:1.5!important;}

/* =========================================================
   NEWS DETAIL / RELATED ARTICLE SIDEBAR
   ========================================================= */
.article-layout{align-items:start!important;}
.article-sidebar{
    position:sticky!important;
    top:132px!important;
    align-self:start!important;
    border:1px solid var(--z5-border)!important;
    border-radius:24px!important;
    background:#fff!important;
    box-shadow:0 20px 54px rgba(16,24,40,.08)!important;
    padding:26px!important;
}
.article-sidebar h3{margin:0 0 8px!important;color:var(--z5-navy)!important;font-weight:900!important;}
.article-sidebar > p{margin:0 0 18px!important;color:var(--z5-muted)!important;font-size:13px!important;line-height:1.6!important;}
.article-related-item{
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:start!important;
    padding:13px 0!important;
    border-bottom:1px solid #e7eef7!important;
    text-decoration:none!important;
}
.article-related-number{width:34px!important;height:34px!important;display:grid!important;place-items:center!important;border-radius:12px!important;background:#eef3ff!important;color:var(--z5-blue)!important;font-weight:900!important;font-size:11px!important;}
.article-related-text small{display:block!important;margin-bottom:4px!important;color:var(--z5-blue)!important;font-size:10px!important;font-weight:900!important;letter-spacing:.045em!important;text-transform:uppercase!important;}
.article-related-text strong{display:block!important;color:var(--z5-navy)!important;font-size:13.5px!important;line-height:1.35!important;font-weight:900!important;}
.article-related-item:hover .article-related-text strong{color:var(--z5-blue)!important;}
.article-sidebar .article-related-all{display:none!important;}
.article-related-more-wrap{width:100%!important;margin-top:20px!important;display:flex!important;justify-content:center!important;align-items:center!important;text-align:center!important;}
.article-related-more-btn{
    width:auto!important;
    min-width:210px!important;
    max-width:240px!important;
    height:46px!important;
    padding:0 20px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    border-radius:999px!important;
    background:#1f33ff!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:900!important;
    line-height:1!important;
    text-align:center!important;
    text-decoration:none!important;
    box-shadow:0 12px 26px rgba(31,51,255,.20)!important;
}
.article-related-more-btn span,
.article-related-more-btn i{color:#fff!important;line-height:1!important;display:inline-flex!important;align-items:center!important;}
.article-related-more-btn:hover{background:#1426d8!important;color:#fff!important;transform:translateY(-1px)!important;}
.content-cta-section{background:#f4f7fc!important;border-top:1px solid #e5edf7!important;}
.content-cta-box{box-shadow:none!important;background:transparent!important;border:0!important;padding-top:18px!important;}

/* =========================================================
   COMPANY / HOME LATEST ARTICLE 4 CARDS
   ========================================================= */
.company-latest-articles-grid,
.home-admin-article-grid{max-width:none!important;}
.company-latest-articles-section{background:linear-gradient(180deg,#f7f9fd 0%,#edf3fa 100%)!important;}
.company-latest-article-meta{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-bottom:12px!important;}
.company-latest-article-meta small{font-size:10px!important;font-weight:800!important;color:var(--z5-blue)!important;}
.zio-section-center-action{display:flex!important;justify-content:center!important;margin-top:28px!important;}
.zio-section-center-action a{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:42px!important;padding:0 20px!important;border-radius:999px!important;background:#fff!important;color:var(--z5-blue)!important;border:1px solid #dbe6ff!important;text-decoration:none!important;font-size:12px!important;font-weight:900!important;box-shadow:0 10px 28px rgba(16,24,40,.055)!important;}

/* =========================================================
   FOOTER FINAL LIGHT
   ========================================================= */
.zio-footer{background:var(--z5-footer)!important;border-top:1px solid #dfe8f5!important;color:var(--z5-text)!important;}
.zio-footer-grid{padding:58px 0!important;}
.zio-footer-company img{width:155px!important;margin-bottom:18px!important;background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;padding:0!important;}
.zio-footer-company p,.zio-footer-column a,.zio-footer-newsletter p{color:#33415f!important;line-height:1.7!important;}
.zio-footer h4,.zio-footer-newsletter strong{color:var(--z5-navy)!important;font-weight:900!important;}
.zio-footer-column a{text-decoration:none!important;}
.zio-footer-column a:hover{color:var(--z5-blue)!important;}
.zio-footer-bottom{background:#06104f!important;color:#fff!important;}

/* Floating buttons */
.zio-wa-button{box-shadow:0 18px 42px rgba(37,211,102,.32)!important;}
.zio-wa-button span{font-weight:900!important;}
.zio-back-to-top{box-shadow:0 12px 28px rgba(16,24,40,.12)!important;}

/* Mobile: keep compact header from previous approved look */
@media (max-width:767px){
    .zio-topbar{height:auto!important;min-height:36px!important;}
    .zio-topbar-inner{min-height:36px!important;display:flex!important;justify-content:center!important;gap:8px!important;}
    .zio-topbar-contact{font-size:11px!important;white-space:nowrap!important;display:flex!important;justify-content:center!important;gap:6px!important;}
    .zio-header-inner{min-height:76px!important;grid-template-columns:1fr auto auto!important;gap:10px!important;padding:10px 0!important;}
    .zio-brand img{width:146px!important;}
    .zio-header-search,.zio-nav{display:none!important;}
    .zio-header-actions{display:flex!important;gap:10px!important;align-items:center!important;}
    .zio-lang-switch{height:44px!important;min-width:112px!important;}
    .zio-mobile-toggle{width:48px!important;height:48px!important;}
    .zio-product-hero{min-height:calc(100vh - 154px)!important;margin-top:0!important;}
    .zio-product-hero-content h1{font-size:34px!important;line-height:1.2!important;}
    .zio-product-hero-content p{font-size:16px!important;line-height:1.65!important;}
    .zio-product-hero-actions a{min-height:48px!important;padding:0 18px!important;}
    .article-sidebar{position:relative!important;top:auto!important;margin-top:24px!important;padding:22px!important;}
    .article-related-more-btn{width:100%!important;max-width:none!important;}
    .search-card{grid-template-columns:1fr!important;}
    .search-card img{width:100%!important;height:160px!important;}
    .news-image,.zio-product-card-image,.portfolio-card-image,.company-latest-article-image{height:205px!important;}
    .zio-footer-grid{grid-template-columns:1fr!important;gap:26px!important;}
}

/* =========================================================
   FIX FLOATING WHATSAPP BUTTON - FINAL
   ========================================================= */

/* Target semua kemungkinan class tombol WhatsApp */
.floating-whatsapp,
.whatsapp-floating,
.whatsapp-float,
.whatsapp-button,
.wa-floating,
.wa-float,
a[href*="wa.me"],
a[href*="api.whatsapp.com"] {
    position: fixed !important;
    right: 28px !important;
    bottom: 34px !important;
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;
    background: #25d366 !important;
    color: #ffffff !important;

    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    text-decoration: none !important;
    overflow: hidden !important;

    font-size: 0 !important;
    line-height: 1 !important;

    box-shadow: 0 16px 38px rgba(37, 211, 102, 0.36) !important;
    z-index: 9999 !important;
}

/* Hilangkan teks "Chat" atau label lain */
.floating-whatsapp span,
.whatsapp-floating span,
.whatsapp-float span,
.whatsapp-button span,
.wa-floating span,
.wa-float span,
a[href*="wa.me"] span,
a[href*="api.whatsapp.com"] span,
.floating-whatsapp .label,
.whatsapp-floating .label,
.whatsapp-float .label,
.whatsapp-button .label,
.wa-floating .label,
.wa-float .label,
.floating-whatsapp .chat-label,
.whatsapp-floating .chat-label,
.whatsapp-float .chat-label,
.whatsapp-button .chat-label,
.wa-floating .chat-label,
.wa-float .chat-label {
    display: none !important;
}

/* Kalau teks Chat muncul dari pseudo element */
.floating-whatsapp::before,
.floating-whatsapp::after,
.whatsapp-floating::before,
.whatsapp-floating::after,
.whatsapp-float::before,
.whatsapp-float::after,
.whatsapp-button::before,
.whatsapp-button::after,
.wa-floating::before,
.wa-floating::after,
.wa-float::before,
.wa-float::after,
a[href*="wa.me"]::before,
a[href*="wa.me"]::after,
a[href*="api.whatsapp.com"]::before,
a[href*="api.whatsapp.com"]::after {
    content: none !important;
    display: none !important;
}

/* Icon WhatsApp tetap terlihat */
.floating-whatsapp i,
.whatsapp-floating i,
.whatsapp-float i,
.whatsapp-button i,
.wa-floating i,
.wa-float i,
a[href*="wa.me"] i,
a[href*="api.whatsapp.com"] i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 32px !important;
    line-height: 1 !important;
}

.floating-whatsapp svg,
.whatsapp-floating svg,
.whatsapp-float svg,
.whatsapp-button svg,
.wa-floating svg,
.wa-float svg,
a[href*="wa.me"] svg,
a[href*="api.whatsapp.com"] svg {
    width: 32px !important;
    height: 32px !important;
    display: block !important;
    color: #ffffff !important;
    fill: #ffffff !important;
}

.floating-whatsapp img,
.whatsapp-floating img,
.whatsapp-float img,
.whatsapp-button img,
.wa-floating img,
.wa-float img,
a[href*="wa.me"] img,
a[href*="api.whatsapp.com"] img {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Hover desktop */
.floating-whatsapp:hover,
.whatsapp-floating:hover,
.whatsapp-float:hover,
.whatsapp-button:hover,
.wa-floating:hover,
.wa-float:hover,
a[href*="wa.me"]:hover,
a[href*="api.whatsapp.com"]:hover {
    transform: translateY(-2px) !important;
    background: #20bf5a !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Back to top jangan tabrakan dengan WhatsApp */
.back-to-top,
.scroll-to-top,
#backToTop {
    right: 34px !important;
    bottom: 112px !important;
    z-index: 9998 !important;
}

/* Mobile */
@media (max-width: 768px) {
    .floating-whatsapp,
    .whatsapp-floating,
    .whatsapp-float,
    .whatsapp-button,
    .wa-floating,
    .wa-float,
    a[href*="wa.me"],
    a[href*="api.whatsapp.com"] {
        right: 18px !important;
        bottom: 22px !important;
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
    }

    .floating-whatsapp i,
    .whatsapp-floating i,
    .whatsapp-float i,
    .whatsapp-button i,
    .wa-floating i,
    .wa-float i,
    a[href*="wa.me"] i,
    a[href*="api.whatsapp.com"] i {
        font-size: 30px !important;
    }

    .floating-whatsapp svg,
    .whatsapp-floating svg,
    .whatsapp-float svg,
    .whatsapp-button svg,
    .wa-floating svg,
    .wa-float svg,
    a[href*="wa.me"] svg,
    a[href*="api.whatsapp.com"] svg {
        width: 30px !important;
        height: 30px !important;
    }

    .floating-whatsapp img,
    .whatsapp-floating img,
    .whatsapp-float img,
    .whatsapp-button img,
    .wa-floating img,
    .wa-float img,
    a[href*="wa.me"] img,
    a[href*="api.whatsapp.com"] img {
        width: 32px !important;
        height: 32px !important;
    }

    .back-to-top,
    .scroll-to-top,
    #backToTop {
        right: 22px !important;
        bottom: 94px !important;
    }
}

/* =========================================================
   FINAL FIX - PRODUCT PNG BACKGROUND WHITE
   =========================================================
   File ini diload setelah zioflex-public.css, jadi override wajib di sini.
   Tujuan: gambar PNG transparan tampil bersih, bukan background biru.
*/

.zio-product-card-image,
.product-card-image,
.corrosion-product-image,
.fabric-product-image,
.related-product-image{
    background:#ffffff !important;
    background-color:#ffffff !important;
    padding:18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-bottom:1px solid #e4edf8 !important;
}

.zio-product-card-image img,
.product-card-image img,
.corrosion-product-image img,
.fabric-product-image img,
.related-product-image img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    padding:0 !important;
    margin:0 auto !important;
    background:transparent !important;
    background-color:transparent !important;
    transform:none !important;
}

.zio-product-card:hover .zio-product-card-image img,
.product-card:hover .product-card-image img,
.corrosion-product-card:hover .corrosion-product-image img,
.fabric-product-card:hover .fabric-product-image img,
.related-product-card:hover .related-product-image img{
    transform:none !important;
}

.zio-product-detail-image,
.product-detail-page-image,
.zio-product-detail-media{
    background:#ffffff !important;
    background-color:#ffffff !important;
}

.zio-product-detail-image img,
.product-detail-page-image img,
.zio-product-detail-media img{
    object-fit:contain !important;
    background:transparent !important;
    background-color:transparent !important;
}


/* =========================================================
   FINAL FIX - ARTICLE IMAGE BACKGROUND WHITE / LIGHT
   =========================================================
   Tujuan: card artikel tidak berat dengan background biru gelap.
   File ini diload setelah zioflex-public.css.
*/

.news-image,
.article-image,
.blog-image,
.zio-news-image,
.zio-article-image,
.news-card .news-image,
.article-card .article-image,
.home-admin-article-card > img,
.company-latest-article-image,
.article-list-card img,
.news-list-card img{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
    border-bottom:1px solid #e4edf8 !important;
    overflow:hidden !important;
}

.news-image img,
.article-image img,
.blog-image img,
.zio-news-image img,
.zio-article-image img,
.news-card img,
.article-card img,
.blog-card img,
.zio-news-card img,
.zio-article-card img,
.home-admin-article-card > img,
.company-latest-article-image img,
.article-list-card img,
.news-list-card img{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    padding:14px !important;
    transform:none !important;
}

.news-card:hover .news-image img,
.article-card:hover .article-image img,
.blog-card:hover img,
.zio-news-card:hover img,
.zio-article-card:hover img,
.home-admin-article-card:hover > img,
.company-latest-article-card:hover .company-latest-article-image img{
    transform:none !important;
}