/*
 * Novagent Lab Systems — Widget Specific Styles (widgets.css)
 *
 * CFML SCOPE SAFETY:
 * - All classes use .pl- prefix.
 * - Generic selectors are scoped under .pl-header or .pl-page.
 * - @keyframes names are prefixed with pl- to avoid CFML collisions.
 * - .dropdown-mega is scoped under .pl-header (not global).
 */

/* =========================================
   WIDGET: MEGA MENU
   ========================================= */
.pl-header {
    position: relative;
}
/* Scoped: only inside .pl-header to avoid CFML layout dropdowns */
.pl-header .dropdown-mega:hover .dropdown-menu {
    display: block;
    animation: pl-fadeIn 0.3s ease;
}
.pl-mega-menu {
    border-top: 3px solid var(--pl-primary) !important;
    left: 0;
    right: 0;
    position: absolute;
    top: 100%;
    margin-top: 0 !important;
}

/* Fare menüye giderken aradaki boşlukta hover'ın düşmesini önleyen görünmez köprü */
.pl-mega-menu::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    height: 30px;
    background: transparent;
}

/* Prefixed to avoid collision with CFML template @keyframes */
@keyframes pl-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pl-main-nav .dropdown-toggle::after {
    vertical-align: middle;
    margin-left: 0.5rem;
    font-size: 0.8rem;
    color: var(--pl-text);
}

/* =========================================
   WIDGET: CATEGORY GRID
   ========================================= */
.pl-widget-cat-card .cat-img-box {
    transition: background-color 0.3s ease;
}
.pl-widget-cat-card:hover .cat-img-box {
    background-color: var(--pl-border) !important;
}
.pl-widget-cat-card img {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.pl-widget-cat-card:hover img {
    transform: scale(1.1);
}

/* =========================================
   WIDGET: MORE RESOURCES
   ========================================= */
.pl-resource-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.pl-resource-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    color: var(--pl-primary) !important;
}
.pl-resource-card:hover i {
    color: var(--pl-primary) !important;
}

/* =========================================
   WIDGET: BLOG & NEWS
   ========================================= */
.pl-widget-blog-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pl-widget-blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.15) !important;
}
.pl-widget-blog-card .blog-img-box {
    opacity: 0.85;
    transition: opacity 0.3s ease;
}
.pl-widget-blog-card:hover .blog-img-box {
    opacity: 1;
}
/* =========================================
   WIDGET: MATERIAL TAB SYSTEM (Page A)
   ========================================= */
.pl-tab-btn {
    border: 2px solid var(--pl-border);
    background: white;
    border-radius: 100px !important;
    padding: 0.5rem 1.4rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--pl-text);
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.pl-tab-btn:hover { border-color: var(--pl-primary); color: var(--pl-primary); background: #fff8f2; }
.pl-tab-btn.active { background: var(--pl-primary); border-color: var(--pl-primary); color: white; box-shadow: 0 4px 12px rgba(245, 130, 32, 0.3); }
.pl-tab-panel { display: none; animation: pl-fadeIn 0.35s ease; }
.pl-tab-panel.active { display: block; }
.pl-material-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.pl-spec-table th { background-color: #f8f9fa; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pl-text); border-color: var(--pl-border) !important; font-weight: 600; }
.pl-spec-table td { font-size: 0.875rem; border-color: var(--pl-border) !important; vertical-align: middle; }
.pl-spec-table tr:hover td { background-color: #fff8f2; }

/* =========================================
   WIDGET: STICKY PRODUCT SIDEBAR (Page B)
   ========================================= */
.pl-product-sidebar { position: sticky; top: 90px; }
.pl-download-btn { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.2rem; border: 2px solid var(--pl-border); border-radius: 14px; text-decoration: none; color: var(--pl-dark); background: white; transition: all 0.25s ease; font-weight: 600; font-size: 0.875rem; }
.pl-download-btn:hover { border-color: var(--pl-primary); background: #fff8f2; color: var(--pl-primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(245, 130, 32, 0.15); }
.pl-download-btn .btn-icon { width: 40px; height: 40px; background: var(--pl-secondary); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--pl-primary); flex-shrink: 0; transition: background 0.25s ease; }
.pl-download-btn:hover .btn-icon { background: var(--pl-primary); color: white; }
.pl-tech-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem; background: var(--pl-secondary); border-radius: 100px; font-size: 0.78rem; font-weight: 600; color: var(--pl-text); }
.pl-tech-drawing-box { background: #f8f9fa; border: 2px dashed var(--pl-border); border-radius: 16px; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #adb5bd; }

/* =========================================
   WIDGET: CATEGORY SIDEBAR TREE (Page C)
   ========================================= */
.pl-cat-sidebar { position: sticky; top: 90px; max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--pl-border) transparent; }
.pl-cat-sidebar::-webkit-scrollbar { width: 4px; }
.pl-cat-sidebar::-webkit-scrollbar-thumb { background: var(--pl-border); border-radius: 10px; }
.pl-sidebar-group > summary { cursor: pointer; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pl-dark); padding: 0.6rem 0; list-style: none; display: flex; align-items: center; justify-content: space-between; transition: color 0.2s ease; }
.pl-sidebar-group > summary:hover { color: var(--pl-primary); }
.pl-sidebar-group > summary::marker { display: none; }
.pl-sidebar-group > summary::-webkit-details-marker { display: none; }
.pl-sidebar-link { display: block; padding: 0.38rem 0.5rem 0.38rem 0.75rem; border-radius: 8px; font-size: 0.875rem; color: var(--pl-text); text-decoration: none; transition: all 0.2s ease; border-left: 2px solid transparent; }
.pl-sidebar-link:hover, .pl-sidebar-link.active { color: var(--pl-primary); background: #fff8f2; border-left-color: var(--pl-primary); }
.pl-product-card { background: white; border: 1px solid var(--pl-border); border-radius: 16px; overflow: hidden; transition: all 0.3s cubic-bezier(0.2, 0, 0, 1); }
.pl-product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08) !important; border-color: rgba(245, 130, 32, 0.3); }
.pl-product-card .product-img { height: 180px; background: #f8f9fa; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pl-product-card .product-img img { transition: transform 0.4s ease; max-height: 140px; object-fit: contain; }
.pl-product-card:hover .product-img img { transform: scale(1.06); }
.pl-icon-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; background: var(--pl-secondary); border-radius: 100px; font-size: 0.72rem; font-weight: 600; color: var(--pl-text); }
.pl-icon-badge.primary { background: rgba(245, 130, 32, 0.1); color: var(--pl-primary); }

/* =========================================
   WIDGET: CONFIGURATOR FILTERS (Page D)
   ========================================= */
.pl-filter-chip { border: 2px solid var(--pl-border); background: white; border-radius: 100px; padding: 0.45rem 1.1rem; font-size: 0.82rem; font-weight: 600; color: var(--pl-text); cursor: pointer; transition: all 0.2s ease; white-space: nowrap; user-select: none; }
.pl-filter-chip:hover { border-color: var(--pl-primary); color: var(--pl-primary); }
.pl-filter-chip.active { background: var(--pl-primary); border-color: var(--pl-primary); color: white; }
.pl-tech-icon-item { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1rem 0.75rem; background: white; border: 1px solid var(--pl-border); border-radius: 14px; text-align: center; font-size: 0.72rem; font-weight: 600; color: var(--pl-text); line-height: 1.3; }
.pl-tech-icon-item i { font-size: 1.4rem; color: var(--pl-primary); }
.pl-config-card[data-hidden="true"] { display: none; }

/* =========================================
   WIDGET: SAFETY/PARTS TABLE (Page E)
   ========================================= */
.pl-parts-table { font-size: 0.82rem; }
.pl-parts-table thead th { background: var(--pl-dark); color: white; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.85rem 1rem; border-color: rgba(255,255,255,0.1) !important; font-weight: 600; white-space: nowrap; }
.pl-parts-table tbody td { padding: 0.7rem 1rem; border-color: var(--pl-border) !important; vertical-align: middle; }
.pl-parts-table tbody tr:hover td { background: #fff8f2; }
.pl-cert-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem; border-radius: 100px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; }
.pl-cert-badge.atex { background: rgba(220, 53, 69, 0.1); color: #dc3545; }
.pl-cert-badge.ce { background: rgba(13, 110, 253, 0.1); color: #0d6efd; }
.pl-cert-badge.iso { background: rgba(25, 135, 84, 0.1); color: #198754; }
.pl-cert-badge.tse { background: rgba(102, 16, 242, 0.1); color: #6610f2; }
.pl-part-code { font-family: 'Courier New', monospace; font-size: 0.8rem; background: var(--pl-secondary); padding: 0.2rem 0.5rem; border-radius: 6px; color: var(--pl-dark); font-weight: 700; letter-spacing: 0.05em; }

/* =========================================
   WIDGET: EXPERT CTA SECTION (Shared)
   ========================================= */
.pl-expert-cta { background: linear-gradient(135deg, var(--pl-dark) 0%, #2d3748 100%); border-radius: 24px; overflow: hidden; position: relative; }
.pl-expert-cta::before { content: ''; position: absolute; top: -50%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(245, 130, 32, 0.12) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.pl-expert-cta .cta-form .form-control, .pl-expert-cta .cta-form .form-select { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 12px !important; color: white !important; padding: 0.75rem 1.1rem; }
.pl-expert-cta .cta-form .form-control::placeholder { color: rgba(255,255,255,0.45); }
.pl-expert-cta .cta-form .form-control:focus, .pl-expert-cta .cta-form .form-select:focus { background: rgba(255,255,255,0.12) !important; border-color: var(--pl-primary) !important; box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.25) !important; }
.pl-expert-cta .cta-form label { color: rgba(255,255,255,0.7); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; }
.pl-expert-cta .cta-form .form-select option { color: var(--pl-dark); background: white; }

/* =========================================
   WIDGET: PAGE BREADCRUMB
   ========================================= */
.pl-breadcrumb { background: #f8f9fa; border-bottom: 1px solid var(--pl-border); padding: 0.65rem 0; font-size: 0.82rem; }
.pl-breadcrumb .breadcrumb { margin: 0; }
.pl-breadcrumb .breadcrumb-item a { color: var(--pl-text); text-decoration: none; transition: color 0.2s ease; }
.pl-breadcrumb .breadcrumb-item a:hover { color: var(--pl-primary); }
.pl-breadcrumb .breadcrumb-item.active { color: var(--pl-dark); font-weight: 600; }
/* Scoped to .pl-page to avoid CFML template conflicts */
.pl-page .hover-scale { transition: transform 0.3s ease; }
.pl-page .hover-scale:hover { transform: scale(1.03); }
/* Preferred prefixed version */
.pl-hover-scale { transition: transform 0.3s ease; }
.pl-hover-scale:hover { transform: scale(1.03); }

/* =========================================
   FIX #3: RESPONSIVE BREAKPOINTS
   All scoped under .pl-* to protect CFML
   ========================================= */

/* ---- TABLET (≤ 992px) ---- */
@media (max-width: 992px) {

    /* Sidebar becomes normal flow on tablet */
    .pl-cat-sidebar  { position: static; max-height: none; }
    .pl-product-sidebar { position: static; }

    /* Mega menu disabled below lg — Bootstrap offcanvas takes over */
    .pl-mega-menu {
        min-width: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        position: fixed !important;
        top: 70px !important;
        border-radius: 0 !important;
        overflow-y: auto;
        max-height: calc(100vh - 70px);
    }

    /* Filter chips scroll horizontally instead of wrapping wildly */
    .pl-filter-chip-row {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .pl-filter-chip-row::-webkit-scrollbar { display: none; }
}

/* ---- MOBILE (≤ 768px) ---- */
@media (max-width: 768px) {

    /* Product card images shorter on mobile */
    .pl-product-card .product-img {
        height: 140px;
    }

    /* Tab buttons wrap and scroll horizontally */
    .pl-tab-scroll-row {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0.5rem !important;
    }
    .pl-tab-scroll-row::-webkit-scrollbar { display: none; }
    .pl-tab-btn {
        flex-shrink: 0;
        font-size: 0.8rem;
        padding: 0.45rem 1rem;
    }

    /* Filter chips scroll on mobile */
    .d-flex.flex-wrap.gap-2[id="filterChips"],
    .d-flex.flex-wrap.gap-2 {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    /* Expert CTA padding reduce */
    .pl-expert-cta.p-5 { padding: 2rem 1.5rem !important; }
    .pl-expert-cta { border-radius: 16px; }

    /* Breadcrumb font-size */
    .pl-breadcrumb { font-size: 0.75rem; }
    .pl-breadcrumb .breadcrumb-item { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Parts table: allow horizontal scroll on mobile */
    .pl-parts-table { font-size: 0.75rem; }

    /* Tech icon grid: 3 across on mobile */
    .pl-tech-icon-item { padding: 0.7rem 0.5rem; font-size: 0.65rem; }
    .pl-tech-icon-item i { font-size: 1.1rem; }

    /* Download buttons in sidebar — full natural flow */
    .pl-download-btn { padding: 0.7rem 1rem; }

    /* Spec table: allow h-scroll */
    .pl-spec-table { font-size: 0.78rem; }
}

/* ---- SMALL MOBILE (≤ 480px) ---- */
@media (max-width: 480px) {

    /* Header logo — slightly smaller */
    .pl-header img { height: 36px !important; }

    /* Reduce card body padding */
    .pl-product-card .p-3 {
        padding: 0.85rem !important;
    }

    /* pl-expert-cta even tighter */
    .pl-expert-cta.p-5 { padding: 1.5rem 1rem !important; }

    /* pl-part-code wrap allowed */
    .pl-part-code { letter-spacing: 0; font-size: 0.72rem; }

    /* Badge overflow fix */
    .pl-cert-badge { font-size: 0.65rem; padding: 0.25rem 0.55rem; }

    /* Hero section text rescale */
    .pl-hero h1 { font-size: 1.6rem !important; }
}

/* ---- FIX #1: HEADER MEGA MENU overflow on desktop ---- */
/* Prevent mega menu from exceeding viewport width */
@media (min-width: 993px) {
    .pl-header .dropdown-mega {
        position: static;
    }
    .pl-mega-menu {
        /* Constrain to viewport — use viewport-relative left/right */
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-top: 0 !important;
        top: 70px !important;
        z-index: 1050;
        border-top: 3px solid var(--pl-primary);
        box-shadow: 0 16px 40px rgba(0,0,0,0.08);
        overflow-x: hidden;
    }
    .pl-mega-menu .container-fluid {
        max-width: 1200px;
        margin: 0 auto;
    }
}