/* ════════════════════════════════════════════
   HEADER.CSS — Prime Connect
   All header styling lives here.
   Linked from header.blade.php via:
   <link rel="stylesheet" href="{{ asset('frontend/assets/css/header.css') }}">
   ════════════════════════════════════════════ */

:root {
    --pc-purple: #6c63ff;
    --pc-purple-dark: #5950e6;
    --pc-text-light: #ffffff;
    --pc-text-dark: #1a1a2e;
    --pc-border-light: rgba(255, 255, 255, 0.25);
}

/* ── Reset Google's default translate bar so it never pushes the page down ── */
.goog-te-banner-frame,
.skiptranslate,
body > .skiptranslate {
    display: none !important;
}

body {
    top: 0 !important;
}

.goog-te-gadget {
    display: none !important;
}

/* ════════════════════════════════════════════
   TOP BAR
   ════════════════════════════════════════════ */
.header-top {
    background: var(--pc-purple);
    padding: 11px 0;
}

.header-links ul {
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.header-links li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pc-text-light);
    font-size: 14px;
    white-space: nowrap;
}

.header-links i {
    color: var(--pc-text-light);
    font-size: 13px;
    opacity: 0.9;
}

.header-links a,
.header-links span {
    color: var(--pc-text-light);
    text-decoration: none;
}

.header-links a {
    transition: opacity 0.2s ease;
}

.header-links a:hover {
    opacity: 0.78;
}

/* ── Social icons ── */
.social-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-title {
    color: var(--pc-text-light);
    font-size: 13px;
    font-weight: 500;
    margin-right: 4px;
    white-space: nowrap;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: var(--pc-text-light);
    font-size: 13px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.social-links a:hover {
    background: var(--pc-text-light);
    color: var(--pc-purple);
    transform: translateY(-2px);
}

/* ════════════════════════════════════════════
   LOGO  (fixes the blurry / oversized logo)
   !important + a long, specific selector chain
   are used here on purpose — the theme's own
   stylesheet (style.css) has its own rule for
   header images that loads AFTER this file and
   was winning the specificity fight, which is
   why the logo was rendering at full native size.
   ════════════════════════════════════════════ */
.th-header .header-logo {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
}

.th-header .header-logo .logo-link {
    display: inline-flex !important;
    align-items: center !important;
    max-width: none !important;
}

.th-header .header-logo .logo-link img.main-logo {
    height: 120px !important;
    max-height: 130px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block !important;
}

@media (max-width: 991px) {
    .th-header .header-logo .logo-link img.main-logo {
        height: 64px !important;
        max-height: 64px !important;
    }
}

@media (max-width: 767px) {
    .th-header .header-logo .logo-link img.main-logo {
        height: 50px !important;
        max-height: 50px !important;
    }
}

/* ════════════════════════════════════════════
   MAIN NAV
   ════════════════════════════════════════════ */
.menu-area {
    background: #ffffff;
    padding: 16px 0;
    box-shadow: 0 2px 18px rgba(20, 20, 43, 0.06);
}

.main-menu ul {
    display: flex;
    align-items: center;
    gap: 38px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-menu a {
    position: relative;
    color: var(--pc-text-dark);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 0;
    transition: color 0.2s ease;
}

.main-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--pc-purple);
    transition: width 0.25s ease;
}

.main-menu a:hover {
    color: var(--pc-purple);
}

.main-menu a:hover::after {
    width: 100%;
}

/* ── CTA button ── */
.header-button .th-btn.style8.style-radius {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-purple);
    color: var(--pc-text-light);
    font-size: 15px;
    font-weight: 600;
    padding: 13px 30px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(108, 99, 255, 0.3);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.header-button .th-btn.style8.style-radius:hover {
    background: var(--pc-purple-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(108, 99, 255, 0.4);
}

/* ── Mobile menu toggle (hamburger) ── */
.th-menu-toggle {
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--pc-text-dark);
    cursor: pointer;
    padding: 6px;
}

/* ════════════════════════════════════════════
   OFF-CANVAS MOBILE MENU
   ════════════════════════════════════════════ */
.th-menu-wrapper {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100%;
    background: #ffffff;
    z-index: 1100;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
    transition: right 0.3s ease;
    overflow-y: auto;
    padding: 30px 20px;
}

.th-menu-wrapper.th-body-visible {
    right: 0;
}

.th-menu-area .th-menu-toggle {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 20px;
}

.mobile-logo {
    margin-bottom: 24px;
}

.mobile-logo img {
    height: 40px;
}

.th-mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.th-mobile-menu li {
    border-bottom: 1px solid #eee;
}

.th-mobile-menu a {
    display: block;
    padding: 12px 4px;
    color: var(--pc-text-dark);
    text-decoration: none;
    font-weight: 500;
}

.th-mobile-menu a:hover {
    color: var(--pc-purple);
}

/* ════════════════════════════════════════════
   LANGUAGE SWITCHER (Google Translate)
   ════════════════════════════════════════════ */
.gt-switcher {
    position: relative;
    z-index: 9999;
}

.gt-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid var(--pc-border-light);
    border-radius: 8px;
    padding: 6px 12px;
    color: var(--pc-text-light);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.gt-btn:hover,
.gt-btn.open {
    background: rgba(255, 255, 255, 0.28);
}

.gt-flag {
    font-size: 17px;
    line-height: 1;
}

.gt-code {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.gt-chevron {
    width: 14px;
    height: 14px;
    opacity: 0.8;
    transition: transform 0.25s ease;
}

.gt-btn.open .gt-chevron {
    transform: rotate(180deg);
}

/* ── Dropdown panel ── */
.gt-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 165px;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    pointer-events: none;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: top right;
}

.gt-dropdown.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.gt-dropdown-inner {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 6px;
}

.gt-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: #333333;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    text-align: left;
    margin-bottom: 2px;
    font-family: inherit;
}

.gt-option:last-child {
    margin-bottom: 0;
}

.gt-option:hover {
    background: #f5f3ff;
    color: var(--pc-purple);
}

.gt-option.active {
    background: #f0eeff;
    color: var(--pc-purple);
    font-weight: 600;
}

.go-flag {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.go-name {
    flex: 1;
}

.go-check {
    width: 16px;
    height: 16px;
    color: var(--pc-purple);
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}