/* ================================================================
   Nova RFQ — Nav CSS (nav.css)
   [nova_rfq_nav] shortcode 전용 — 모든 페이지에서 로드
   frontend.css와 달리 이 파일은 헤더 버튼 스타일만 포함.
   Elementor/테마 레이아웃에 영향을 주지 않음.
   ================================================================ */

.nova-rfq-nav--2btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1 !important;
}

/* Base button */
.nova-rfq-nav--2btn .nova-nav-btn,
a.nova-nav-btn {
    display: inline-block !important;
    padding: 7px 18px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
    cursor: pointer !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
    box-sizing: border-box !important;
}

/* Sign In — outlined blue */
.nova-rfq-nav--2btn .nova-nav-btn--signin,
a.nova-nav-btn--signin {
    background: transparent !important;
    color: #2563eb !important;
    border: 1.5px solid #2563eb !important;
}
.nova-rfq-nav--2btn .nova-nav-btn--signin:hover,
a.nova-nav-btn--signin:hover {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    text-decoration: none !important;
}

/* Log Out — muted grey */
.nova-rfq-nav--2btn .nova-nav-btn--logout,
a.nova-nav-btn--logout {
    background: transparent !important;
    color: #64748b !important;
    border: 1.5px solid #e2e8f0 !important;
}
.nova-rfq-nav--2btn .nova-nav-btn--logout:hover,
a.nova-nav-btn--logout:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
    text-decoration: none !important;
}

/* Supplier — filled teal */
.nova-rfq-nav--2btn .nova-nav-btn--supplier,
a.nova-nav-btn--supplier {
    background: #0d9488 !important;
    color: #ffffff !important;
    border: 1.5px solid #0d9488 !important;
}
.nova-rfq-nav--2btn .nova-nav-btn--supplier:hover,
a.nova-nav-btn--supplier:hover {
    background: #0f766e !important;
    border-color: #0f766e !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ================================================================
   v2.20.0 — Catalog / Brands nav links
   ================================================================ */

.nova-rfq-nav--2btn .nova-nav-link,
a.nova-nav-link {
    display: inline-block !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    line-height: 1.4 !important;
    transition: color 0.15s, background 0.15s !important;
    white-space: nowrap !important;
}
.nova-rfq-nav--2btn .nova-nav-link:hover,
a.nova-nav-link:hover {
    color: #0f172a !important;
    background: #f1f5f9 !important;
    text-decoration: none !important;
}
.nova-rfq-nav--2btn .nova-nav-link.is-active,
a.nova-nav-link.is-active {
    color: #2563eb !important;
    background: transparent !important;
    position: relative !important;
}
.nova-rfq-nav--2btn .nova-nav-link.is-active::after,
a.nova-nav-link.is-active::after {
    content: '' !important;
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: -2px !important;
    height: 2px !important;
    background: #2563eb !important;
    border-radius: 1px !important;
}

/* Visual separator between nav links and auth buttons */
.nova-rfq-nav--2btn .nova-nav-sep {
    display: inline-block !important;
    width: 1px !important;
    height: 20px !important;
    background: #e2e8f0 !important;
    margin: 0 6px !important;
}

/* Mobile: hide Catalog/Brands text labels on very narrow screens, keep auth buttons */
@media (max-width: 480px) {
    .nova-rfq-nav--2btn .nova-nav-sep {
        display: none !important;
    }
    .nova-rfq-nav--2btn .nova-nav-link,
    a.nova-nav-link {
        padding: 7px 8px !important;
        font-size: 12px !important;
    }
}

/* ================================================================
   v2.20.2 — Brands hover dropdown
   ================================================================ */

/* Wrapper must be relative for absolute-positioned panel */
.nova-nav-dropdown {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Caret next to "Brands" label */
.nova-nav-link--has-dropdown {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.nova-nav-caret {
    transition: transform 0.2s ease !important;
    opacity: 0.6 !important;
}
.nova-nav-dropdown:hover .nova-nav-caret,
.nova-nav-dropdown:focus-within .nova-nav-caret {
    transform: rotate(180deg) !important;
    opacity: 1 !important;
}

/* Panel — hidden by default, shown on hover/focus */
.nova-nav-dropdown__panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-6px) !important;
    width: min(840px, calc(100vw - 32px)) !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05) !important;
    padding: 18px 20px 20px !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s !important;
    box-sizing: border-box !important;
}

/* Hover / focus trigger */
.nova-nav-dropdown:hover .nova-nav-dropdown__panel,
.nova-nav-dropdown:focus-within .nova-nav-dropdown__panel {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Invisible hover bridge so dropdown doesn't close when moving from
   link down to panel */
.nova-nav-dropdown__panel::before {
    content: '' !important;
    position: absolute !important;
    top: -12px !important;
    left: 0 !important;
    right: 0 !important;
    height: 12px !important;
}

/* Panel header — "BROWSE BY BRAND" + "View all N brands →" */
.nova-nav-dropdown__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
}
.nova-nav-dropdown__title {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: #64748b !important;
    text-transform: uppercase !important;
}
.nova-nav-dropdown__all {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #0d9488 !important;
    text-decoration: none !important;
    transition: color 0.12s !important;
}
.nova-nav-dropdown__all:hover {
    color: #0f766e !important;
    text-decoration: none !important;
}

/* Tile grid — 6 columns x 2 rows */
.nova-nav-dropdown__grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

/* Individual brand tile */
.nova-nav-brand-tile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 8px 12px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    text-align: center !important;
    min-height: 100px !important;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s !important;
    box-sizing: border-box !important;
}
.nova-nav-brand-tile:hover {
    border-color: #0d9488 !important;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.08) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

/* Tile logo area */
.nova-nav-brand-tile__logo {
    width: 100% !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
}
.nova-nav-brand-tile__logo img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Fallback brand name (when no logo uploaded) */
.nova-nav-brand-tile__name-big {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
}

/* Item count under logo */
.nova-nav-brand-tile__count {
    font-size: 11px !important;
    color: #64748b !important;
    line-height: 1.3 !important;
}

/* "+N more / View all" tile */
.nova-nav-brand-tile--more {
    background: #f8fafc !important;
    border-style: dashed !important;
}
.nova-nav-brand-tile--more .nova-nav-brand-tile__more-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
}
.nova-nav-brand-tile--more:hover {
    background: #f1f5f9 !important;
    border-style: solid !important;
}

/* Responsive: shrink grid on narrow screens */
@media (max-width: 900px) {
    .nova-nav-dropdown__panel {
        width: min(640px, calc(100vw - 24px)) !important;
        padding: 14px 14px 16px !important;
    }
    .nova-nav-dropdown__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 600px) {
    /* On mobile, dropdown is impractical — hide it and let the plain
       "Brands" link carry users straight to /brands. */
    .nova-nav-dropdown__panel {
        display: none !important;
    }
    .nova-nav-caret {
        display: none !important;
    }
}

/* ================================================================
   v2.20.3 — Compact header sizing + caret visibility
   User feedback: "디자인 크고 안보임" → reduce button padding/font
   and make the Brands caret always visible even if JS is disabled.
   ================================================================ */

/* Smaller button padding across the board */
.nova-rfq-nav--2btn .nova-nav-btn,
a.nova-nav-btn {
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}

/* Smaller link padding */
.nova-rfq-nav--2btn .nova-nav-link,
a.nova-nav-link {
    padding: 6px 10px !important;
    font-size: 12.5px !important;
}

/* Tighter gap between elements */
.nova-rfq-nav--2btn {
    gap: 4px !important;
}

/* Caret: always visible, less aggressive rotation */
.nova-nav-caret {
    display: inline-block !important;
    opacity: 0.7 !important;
    margin-left: 2px !important;
}

/* Slightly lower dropdown panel so user has hover-bridge room */
.nova-nav-dropdown__panel {
    top: calc(100% + 4px) !important;
    padding: 14px 16px 16px !important;
}
.nova-nav-dropdown__panel::before {
    top: -8px !important;
    height: 8px !important;
}

/* Reduce tile min-height — the earlier version was too chunky */
.nova-nav-brand-tile {
    min-height: 80px !important;
    padding: 10px 6px 9px !important;
}
.nova-nav-brand-tile__logo {
    height: 32px !important;
    margin-bottom: 6px !important;
}
.nova-nav-brand-tile__name-big {
    font-size: 12.5px !important;
    font-weight: 600 !important;
}
.nova-nav-brand-tile__count {
    font-size: 10.5px !important;
}
.nova-nav-dropdown__header {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
.nova-nav-dropdown__title {
    font-size: 10.5px !important;
}
.nova-nav-dropdown__all {
    font-size: 12.5px !important;
}

/* ================================================================
   v2.20.4 — Dropdown reliability: z-index + .is-open + host overflow
   ================================================================ */

/* Ensure wrapper is not clipped and sits above header elements */
.nova-rfq-nav {
    position: relative !important;
    z-index: 10000 !important;
    overflow: visible !important;
}

.nova-nav-dropdown {
    position: relative !important;
    overflow: visible !important;
    z-index: 10001 !important;
}

.nova-nav-dropdown__panel {
    z-index: 10002 !important;
}

/* JS-driven open state — works even when hover is not available
   (touch devices, keyboard navigation, Elementor quirks) */
.nova-nav-dropdown.is-open .nova-nav-dropdown__panel {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Elementor HTML widget wrappers sometimes clip absolute children.
   Only touch the direct containers of shortcode output — narrowly
   scoped to avoid breaking unrelated Elementor widgets. */
.elementor-widget-shortcode,
.elementor-widget-shortcode .elementor-widget-container,
.elementor-shortcode {
    overflow: visible !important;
}

/* ════════════════════════════════════════════════════════════════
   v2.20.5 — FORCE RESTORE Brands dropdown
   Earlier rules were being overridden by theme/Elementor CSS.
   This final block uses 99999+ z-index and !important on every
   property so the panel appears reliably.
   ════════════════════════════════════════════════════════════════ */

/* Nav wrapper — never clipped, always on top */
.nova-rfq-nav {
    position: relative !important;
    z-index: 99999 !important;
    overflow: visible !important;
}

.nova-nav-dropdown {
    position: relative !important;
    overflow: visible !important;
    z-index: 100000 !important;
}

.nova-nav-dropdown__panel {
    display: block !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-6px) !important;
    width: min(840px, calc(100vw - 32px)) !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
    padding: 18px 20px 20px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 100001 !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s !important;
    box-sizing: border-box !important;
}

/* Open states — hover, focus-within, OR JS-applied .is-open */
.nova-nav-dropdown:hover .nova-nav-dropdown__panel,
.nova-nav-dropdown:focus-within .nova-nav-dropdown__panel,
.nova-nav-dropdown.is-open .nova-nav-dropdown__panel {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Elementor / shortcode wrappers — prevent clipping.
   Scoped to widget/shortcode containers only so we don't break
   unrelated Elementor layouts. */
.elementor-widget-shortcode,
.elementor-widget-shortcode .elementor-widget-container,
.elementor-shortcode {
    overflow: visible !important;
}