/* ============================================================================
   PetraZone — Başlıq (referans): tünd yuxarı zolaq + ağ əsas başlıq (ikonlu nav)
   design-system.css token-lərini işlədir. Köhnə tema başlıq stillərindən sonra.
   ========================================================================== */

/* ---------------- YUXARI TÜND ZOLAQ ---------------- */
.pz-topbar {
    background: rgb(30, 42, 120); /* brend tünd göy */
    /*background: linear-gradient(90deg, #131a4c 0%, #1560a0 100%); !* brend tünd göy *!*/
    color: rgba(255, 255, 255, .9);
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.pz-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    flex-wrap: wrap;
}

.pz-topbar__left, .pz-topbar__right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.pz-topbar__link {
    color: rgba(255, 255, 255, .88) !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 500;
    transition: color var(--pz-transition-fast);
    white-space: nowrap;
}

.pz-topbar__link i {
    color: var(--pz-accent);
    font-size: 14px;
}

.pz-topbar__link:hover {
    color: #fff !important;
}

.pz-topbar__icon {
    color: rgba(255, 255, 255, .88) !important;
    font-size: 16px;
    display: inline-flex;
    transition: color var(--pz-transition-fast), transform var(--pz-transition-fast);
}

.pz-topbar__icon:hover {
    color: var(--pz-accent) !important;
    transform: translateY(-1px);
}

/* Səbət (dropdown) yuxarı zolaqda */
.pz-topbar__cart {
    position: relative;
}

.pz-topbar__cart .cart-toggle {
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    position: relative;
}

.pz-topbar__cart .cart-toggle .fa-shopping-cart {
    color: rgba(255, 255, 255, .9);
    font-size: 18px;
}

.pz-topbar__cart .cart-toggle:hover .fa-shopping-cart {
    color: #fff;
}

/* Badge — ikonun sağ-üst küncündə, təmiz ağ halqa ilə */
#cart.pz-topbar__cart .cart-toggle .cart-badge {
    position: absolute !important;
    top: -4px;
    right: -7px;
    margin: 0 !important;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    background: var(--pz-primary) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--pz-r-pill);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); /* tünd fondan ayıran ağ halqa */
}

/* ============================================================
   Dil switcher (select2) — düymə görünüşü (globe + AZ + ox).
   VACİB: custom.css-də köhnə "#form-language .select2-*" dizaynı var
   (ID spesifikliyi, 200px ağ pill). Bura header-modern SONRA yükləndiyi
   üçün EYNİ #form-language spesifikliyi ilə yazırıq → düzgün üstələyir.
   ============================================================ */
.pz-topbar__lang {
    width: 78px;
    flex: 0 0 auto;
}

/* Eni HƏR qatda kilidlə (custom.css 200px/min-width:150px-i sındırır) */
#form-language .select2-container {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    box-sizing: border-box !important;
}

/* Açılan siyahı: düymə menyusu görünüşü — ağ, yumşaq kölgəli, sağa hizalı */
#form-language .select2-container .select2-dropdown,
#form-language .select2-dropdown {
    min-width: 250px !important;
    width: 250px !important;
    left: auto !important;
    right: 0 !important;
    border: 1px solid var(--pz-line) !important;
    border-radius: var(--pz-r) !important;
    box-shadow: var(--pz-shadow-lg) !important;
    overflow: hidden;
    margin-top: 8px;
}

#form-language .select2-search--dropdown {
    padding: 10px !important;
    border-bottom: 1px solid var(--pz-line-2);
}

#form-language .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--pz-line) !important;
    border-radius: var(--pz-r-sm) !important;
    padding: 8px 11px !important;
    font-size: 13px !important;
    outline: none !important;
}

#form-language .select2-results__option {
    font-size: 13.5px !important;
    padding: 8px 12px !important;
    color: var(--pz-ink) !important;
}

#form-language .select2-results__option--highlighted[aria-selected] {
    background: var(--pz-primary-tint) !important;
    color: var(--pz-primary-700) !important;
}

/* Bağlı düymə — pill + hover (custom.css-in ağ/40px/200px dizaynını sındırır) */
#form-language .select2-container--default .select2-selection--single {
    width: 78px !important;
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: var(--pz-r-pill) !important;
    height: 32px !important;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: background var(--pz-transition-fast);
}

#form-language .select2-container--default .select2-selection--single:hover {
    background: rgba(255, 255, 255, .20) !important;
}

#form-language .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
    line-height: 30px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    padding: 0 22px 0 11px !important;
    text-align: left;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* globe ikonu — düymə dizaynındakı kimi (accent rəngli) */
#form-language .select2-container--default .select2-selection--single .select2-selection__rendered::before {
    content: "\f0ac";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    color: var(--pz-accent);
    margin-right: 6px;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    flex: 0 0 auto;
}

#form-language .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px !important;
    right: 7px !important;
}

#form-language .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #fff transparent transparent !important;
}

/* köhnə <select> fallback (JS hələ işə düşməyibsə ağ qutu görünməsin);
   eni 78px — wrapper-i aşıb qonşunun üstünə çıxmasın */
#form-language > select.form-control,
.pz-topbar__lang > select.form-control {
    height: 32px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--pz-r-pill);
    font-size: 13px;
    padding: 0 10px;
    width: 78px !important;
    max-width: 78px !important;
    box-sizing: border-box;
}

.pz-topbar__lang > select.form-control option {
    color: #1d2430;
}

/* ---------------- HESAB dropdown ---------------- */
.pz-acct {
    position: relative;
}

.pz-acct__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 2px;
    transition: color var(--pz-transition-fast);
}

.pz-acct__btn:hover {
    color: #fff;
}

.pz-acct__btn i.fa-user-circle {
    color: var(--pz-accent);
    font-size: 16px;
}

.pz-acct__caret {
    font-size: 11px;
    opacity: .85;
    transition: transform var(--pz-transition-fast);
}

.pz-acct.is-open .pz-acct__caret {
    transform: rotate(180deg);
}

.pz-acct__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 190px;
    background: #fff;
    border: 1px solid var(--pz-line);
    border-radius: var(--pz-r);
    box-shadow: var(--pz-shadow-lg);
    list-style: none;
    margin: 0;
    padding: 6px;
    z-index: 1200;
    display: none;
}

.pz-acct.is-open .pz-acct__menu {
    display: block;
}

.pz-acct__menu li {
    list-style: none;
}

.pz-acct__menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--pz-r-sm);
    color: rgb(30, 42, 120)!important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background var(--pz-transition-fast), color var(--pz-transition-fast);
}

.pz-acct__menu a i {
    color: rgb(30, 42, 120);
    width: 18px;
    text-align: center;
}

.pz-acct__menu a:hover {
    background: var(--pz-primary-tint);
    color: var(--pz-primary-700) !important;
}

/* ---------------- İSTƏK SİYAHISI (heart + badge) ---------------- */
.pz-topbar__wish {
    position: relative;
    color: rgba(255, 255, 255, .9) !important;
    font-size: 16px;
    display: inline-flex;
    transition: color var(--pz-transition-fast), transform var(--pz-transition-fast);
}

.pz-topbar__wish:hover {
    color: var(--pz-accent) !important;
    transform: translateY(-1px);
}

.pz-topbar__wish .pz-wish-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    background: var(--pz-accent);
    color: #3a2c00;
    border-radius: var(--pz-r-pill);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}

.pz-topbar__wish .pz-wish-badge:empty {
    display: none;
}

/* say yoxdursa gizli */

/* ---------------- DİL — təmiz custom dropdown (bütün dillər) ---------------- */
.pz-lang {
    position: relative;
    flex: 0 0 auto;
}

.pz-lang__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: var(--pz-r-pill);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    transition: background var(--pz-transition-fast);
}

.pz-lang__btn:hover {
    background: rgba(255, 255, 255, .20);
}

.pz-lang__btn i.fa-globe {
    color: var(--pz-accent);
    font-size: 13px;
}

.pz-lang__caret {
    font-size: 10px;
    opacity: .85;
    transition: transform var(--pz-transition-fast);
}

.pz-lang.is-open .pz-lang__caret {
    transform: rotate(180deg);
}

.pz-lang__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0; /* sağa hizalı — qonşuları örtmür */
    width: 250px;
    background: #fff;
    border: 1px solid var(--pz-line);
    border-radius: var(--pz-r);
    box-shadow: var(--pz-shadow-lg);
    z-index: 1200;
    display: none;
    overflow: hidden;
}

.pz-lang.is-open .pz-lang__menu {
    display: block;
}

.pz-lang__search {
    padding: 10px;
    border-bottom: 1px solid var(--pz-line-2);
}

.pz-lang__search input {
    width: 100%;
    border: 1px solid var(--pz-line);
    border-radius: var(--pz-r-sm);
    padding: 8px 11px;
    font-size: 13px;
    color: var(--pz-ink);
    outline: none;
}

.pz-lang__search input:focus {
    border-color: var(--pz-primary);
    box-shadow: 0 0 0 3px var(--pz-primary-tint);
}

.pz-lang__list {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.pz-lang__list::-webkit-scrollbar {
    width: 6px;
}

.pz-lang__list::-webkit-scrollbar-thumb {
    background: var(--pz-line);
    border-radius: 20px;
}

.pz-lang__list li {
    list-style: none;
}

.pz-lang__list button {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 8px 10px;
    border-radius: var(--pz-r-sm);
    font-size: 13.5px;
    color: var(--pz-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background var(--pz-transition-fast), color var(--pz-transition-fast);
}

.pz-lang__list button:hover {
    background: var(--pz-primary-tint);
    color: var(--pz-primary-700);
}

.pz-lang__code {
    display: inline-block;
    min-width: 30px;
    font-weight: 800;
    color: var(--pz-primary);
    font-size: 11px;
}

.pz-lang__name {
    flex: 1 1 auto;
}

/* ---------------- ƏSAS BAŞLIQ (ağ) ---------------- */
.pz-header {
    background: #eef3f9; /* referansdakı açıq mavimtıl fon */
    border-bottom: 1px solid var(--pz-line);
    padding: 0;
}

.pz-header__inner {
    display: flex;
    align-items: center;
    gap: 30px;
    min-height: 84px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.pz-header__logo {
    flex: 0 0 auto;
}

.pz-header__logo img {
    max-height: 46px;
    width: auto;
    display: block;
}

/* Axtarış — yuvarlaq pill */
.pz-header__search {
    flex: 1 1 auto;
    max-width: 480px;
}

.pz-header__search .search-wrapper.desktop-search {
    display: flex !important;
    align-items: center;
    width: 100%;
    background: #fff;
    border: 1px solid var(--pz-line);
    border-radius: var(--pz-r-pill);
    padding: 4px 5px 4px 18px;
    box-shadow: var(--pz-shadow-xs);
    position: static;
}

.pz-header__search .desktop-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--pz-ink);
}

.pz-header__search .desktop-search input::placeholder {
    color: var(--pz-faint);
}

.pz-header__search .desktop-search .pz-voice {
    border: 0;
    background: transparent;
    color: var(--pz-muted);
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--pz-transition-fast);
}

.pz-header__search .desktop-search .pz-voice:hover {
    color: rgb(30, 42, 120);
}

.pz-header__search .desktop-search .pz-search-go {
    border: 0;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--pz-r-pill);
    background: rgb(30, 42, 120);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: var(--pz-shadow-primary);
    transition: transform var(--pz-transition-fast);
}

.pz-header__search .desktop-search .pz-search-go:hover {
    transform: translateY(-1px);
}

/* Əsas naviqasiya (ikonlu) */
.pz-nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 22px;
}

.pz-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--pz-body);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 2px;
    position: relative;
    white-space: nowrap;
    transition: color var(--pz-transition-fast);
}

.pz-nav__link i {
    font-size: 15px;
    color: var(--pz-muted);
    transition: color var(--pz-transition-fast);
}

.pz-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--pz-primary);
    transition: right var(--pz-transition);
}

.pz-nav__link:hover, .pz-nav__link.is-active {
    color: rgb(30, 42, 120);
}

.pz-nav__link:hover i, .pz-nav__link.is-active i {
    color: rgb(30, 42, 120);
}

.pz-nav__link:hover::after, .pz-nav__link.is-active::after {
    right: 0;
}

/* Mobil idarəetmə düymələri (defolt gizli) */
.pz-header__mobile {
    display: none;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.pz-header__mobile .mobile-search-icon,
.pz-header__mobile .pz-burger {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--pz-line);
    background: #fff;
    color: var(--pz-ink);
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Mobil açılan nav (defolt gizli) */
.pz-mnav {
    display: none;
    flex-direction: column;
    background: #fff;
    border-top: 1px solid var(--pz-line);
}

.pz-mnav.is-open {
    display: flex;
}

.pz-mnav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    color: var(--pz-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 1px solid var(--pz-line-2);
}

.pz-mnav a i {
    color: var(--pz-primary);
    width: 20px;
    text-align: center;
}

.pz-mnav a:hover {
    background: var(--pz-primary-tint);
    color: var(--pz-primary-700);
}

/* ---------------- RESPONSİV ---------------- */
@media (max-width: 991px) {
    .pz-nav {
        display: none;
    }

    /* desktop nav gizlənir */
    .pz-header__mobile {
        display: flex;
    }

    /* burger + axtarış ikonu */
    .pz-header__search {
        display: none;
    }

    /* mobil: axtarış ikon/modaldan */
    .pz-header__inner {
        min-height: 68px;
        gap: 14px;
    }
}

@media (max-width: 575px) {
    .pz-topbar__left {
        display: none;
    }

    /* dar ekranda sol linkləri gizlət */
    .pz-topbar__inner {
        min-height: 40px;
        justify-content: flex-end;
    }

    .pz-topbar__right {
        gap: 12px;
    }

    .pz-header__logo img {
        max-height: 38px;
    }
}