@font-face {
    font-family: 'Onest';
    src: url('/assets/fonts/Onest-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Onest';
    src: url('/assets/fonts/Onest-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Onest';
    src: url('/assets/fonts/Onest-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Onest';
    src: url('/assets/fonts/Onest-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Onest';
    src: url('/assets/fonts/Onest-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/webfonts/fa-brands-400.woff2") format("woff2");
}

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("assets/webfonts/fa-solid-900.woff2") format("woff2");
}

:root {
    /* KLIX — mobil tətbiqin tokenləri (klix-app/lib/themes/theme.dart). Alıcı palitrası defoltdur,
       satıcı palitrası .klix-seller-theme ilə gəlir (tətbiqdəki Role.seller kimi). */
    --main-color: #2F80ED;
    --strip-color: #A8CBFF;
    --brand-color: #0F2D6B;
    --focus-color: #2F80ED;
    --bg-color: #EEF5FF;
    --second-color: #0B1B3A;
    --text-color: #0B1B3A;
    --muted-color: #5B6478;
    --grey-color: #8C94A6;
    --hint-color: #A9B0BF;
    --light-color: #EDF0F5;
    --line-color: #EDF0F5;
    --border-color: #E3E7EF;
    --link-color: #2563EB;
    --nav-active-color: #3B8BF5;
    --nav-active-bg: #E3F0FF;
    --border-radius: 14px;
    --card-radius: 16px;
    --large-radius: 20px;
    --form-height: 54px;
    --button-height: 58px;
    --font-family: 'Onest', system-ui, Arial, sans-serif;
}

.klix-seller-theme {
    --main-color: #1A3F86;
    --strip-color: #6F93E0;
    --focus-color: #0B1B3A;
    --bg-color: #F3F5FA;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    line-height: 1.3;
}

html {
    scroll-behavior: smooth;
}

body {
    width: 100%;
    color: var(--text-color);
    background: var(--bg-color);
    font-size: 16px;
    line-height: 1.6;
    font-family: var(--font-family);
    position: relative;
    margin: 0;
    padding: 0;
}

#outer-wrap {
    overflow: hidden;
}

.full-width {
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    left: 50%;
    right: 50%;
    position: relative;
}

.container,
.has-sidebar #content-wrap {
    width: 1150px;
    margin: 0 auto;
    max-width: 90%;
    position: relative;
    z-index: 1;
}

.main-container {
    width: 90%;
    margin: 0 auto;
    max-width: 90%;
    position: relative;
    z-index: 1;
}

#primary {
    padding-bottom: 60px;
}

ul,
ol {
    margin: 0 0 20px 30px;
    padding: 0;
}

button {
    padding: 0;
    border: 0;
    cursor: pointer;
    font-family: var(--font-family);
    transition: .15s all;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

*:focus {
    outline: none;
}

img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

p {
    margin: 0 0 15px;
}

a,
:visited {
    color: inherit;
    text-decoration: none;
    transition: .15s all;
}

iframe {
    border: 0;
    max-width: 100%;
}


/* Layout */
.right-sidebar #content-wrap,
.left-sidebar #content-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.right-sidebar #primary {
    width: calc(100% - 360px);
}

.left-sidebar #primary {
    width: calc(100% - 360px);
}

.has-sidebar #sidebar {
    width: 300px;
    padding-bottom: 60px;
}

.right-sidebar #sidebar {
    order: 2;
}

@media (max-width: 960px) {

    .has-sidebar #primary,
    .has-sidebar #sidebar {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    #primary {
        order: 1;
    }

    #sidebar {
        order: 2;
    }
}


/* Header */
#site-header {
    position: relative;
    z-index: 5;
    background: var(--bg-color);
}

#site-header-inner {
    position: relative;
}

.master-header-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    width: 100%;
}

#site-logo {
    width: auto;
}

#site-logo .site-name {
    color: var(--text-color);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1;
}

#site-logo .site-name:after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 3px;
    border-radius: 50%;
    background: var(--brand-color);
}

#site-logo img {
    object-fit: contain;
}

#site-navigation {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#site-navigation-wrap .master-main-menu {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    gap: 5px;
    align-items: center;
}

#site-navigation-wrap .master-main-menu>.menu-item {
    position: relative;
}

#site-navigation-wrap .master-main-menu>.menu-item:not(.button)>a {
    color: var(--muted-color);
    white-space: nowrap;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    border-radius: 20px;
    display: block;
    position: relative;
    font-size: 15px;
    font-weight: 600;
}

#site-navigation-wrap .master-main-menu>.menu-item:not(.button)>a:hover {
    color: var(--text-color);
}

#site-navigation-wrap .master-main-menu>.current-menu-item:not(.button)>a {
    color: var(--nav-active-color);
    background: var(--nav-active-bg);
}

#site-navigation-wrap .master-main-menu>.button {
    height: 46px;
    margin-left: 10px;
    padding: 0;
}

#site-navigation-wrap .master-main-menu>.button>a {
    color: white;
    padding: 0 25px;
    font-size: 15px;
    font-weight: 700;
}

#site-navigation-wrap .master-main-menu>.menu-item-has-children>a {
    padding-right: 15px;
}

#site-navigation-wrap .master-main-menu>.menu-item-has-children>a:after {
    content: "\e92e";
    font-family: Feather;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    font-size: 13px;
}

#site-navigation-wrap .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    list-style: none;
    padding: 10px 0;
    border-bottom: 0;
    z-index: 10;
    min-width: 160px;
    background: var(--main-color);
}

#site-navigation-wrap .master-main-menu>.menu-item>.sub-menu:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--main-color);
    position: absolute;
    bottom: 100%;
    left: 15px;
}

#site-navigation-wrap .menu-item-has-children:hover>.sub-menu {
    display: block;
}

#site-navigation-wrap .master-main-menu .sub-menu li {
    margin: 0;
    position: relative;
}

#site-navigation-wrap .sub-menu a {
    padding: 5px 15px;
    display: block;
    height: auto;
    white-space: nowrap;
    color: white;
}

#site-navigation-wrap .sub-menu a:hover {
    background: var(--main-color);
}

#site-navigation-wrap .sub-menu .sub-menu {
    position: absolute;
    left: 100%;
    top: 0;
    display: none;
    padding: 5px 0;
}

#site-navigation-wrap .sub-menu .menu-item-has-children>a:after {
    content: '\f105';
    font-family: "Font Awesome 6 Free";
    position: absolute;
    right: 10px;
    top: 50%;
    font-size: 12px;
    font-weight: 600;
    transform: translateY(-50%);
}

#site-navigation-wrap .sub-menu .menu-item-has-children>a {
    padding-right: 30px;
    position: relative;
}

@media (max-width: 960px) {
    #site-navigation-wrap {
        display: none;
    }
}

@media (min-width: 960px) {

    #mobile-sidebar-menu,
    .mobile-menu-area {
        display: none;
    }
}


/* Mobile menu */
#mobile-sidebar-menu {
    width: 25px;
    cursor: pointer;
}

.mobil-menu-line-icon span {
    width: 25px;
    height: 2px;
    margin-bottom: 5px;
    background: var(--text-color);
    border-radius: 2px;
    display: block;
}

.mobil-menu-line-icon span:last-child {
    margin-bottom: 0;
}

.mobile-menu-area {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 90%;
    background: white;
    border-radius: var(--large-radius) 0 0 var(--large-radius);
    visibility: hidden;
    height: 100%;
    z-index: 1000;
    overflow: auto;
    transform: translate3d(100%, 0, 0);
    transition: .3s all;
}

.mobile-menu-area * {
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-close {
    color: var(--text-color);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 75px;
    padding: 0 20px;
}

.mobile-menu-close-icon {
    cursor: pointer;
}

.mobile-menu-container {
    padding: 0 20px 80px;
    transform: translateX(60px);
    opacity: 0;
    transition: .6s all;
}

.animated-mobile-menu-container {
    transform: translateX(0);
    opacity: 1;
    transition-delay: .1s;
}

.active-mobile-menu {
    transform: none;
    visibility: visible;
}

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

.mobile-menu-area .menu-item:not(.button) > a {
    font-size: 17px;
    position: relative;
    color: var(--text-color);
    padding: 0 15px;
    line-height: 48px;
    border-radius: var(--border-radius);
    display: block;
    font-weight: 600;
}

.mobile-menu-area .current-menu-item:not(.button) > a {
    background: var(--nav-active-bg);
    color: var(--nav-active-color);
}

.mobile-menu-area .master-main-menu > .button {
    display: flex;
    margin-top: 15px;
    width: 100%;
}

.mobile-menu-area .master-main-menu > .button > a {
    color: white;
}

.mobile-menu-area .menu-item-has-children>a:after {
    content: "\e92e";
    font-family: Feather;
    margin-left: 7px;
    font-size: 17px;
}

.mobile-menu-area .sub-menu {
    display: none;
    padding-left: 15px;
    padding-bottom: 10px;
    position: relative;
}

.mobile-menu-area .sub-menu a {
    font-weight: 400;
    font-size: 18px;
    padding: 5px 0;
    color: #dddddd;
}

.mobile-menu-area .menu-item:not(.button) > a:hover {
    background: var(--bg-color);
}

.mobile-search-area {
    position: relative;
    padding: 0 30px;
    margin-bottom: 40px;
}

#mobile-search {
    position: relative;
}

.mobile-search-area input[type=text] {
    width: 100%;
    border: 0;
    height: 46px;
    font-size: 15px;
    padding: 0 20px;
    background: #191919;
    color: white;
    border-radius: 30px;
}

.mobile-search-area input::-webkit-input-placeholder {
    opacity: 1;
}

.mobile-search-area button {
    position: absolute;
    top: 0;
    right: 2px;
    width: 46px;
    height: 46px;
    font-size: 18px;
    border-radius: 50%;
    font-weight: 600;
}

.master-overlay {
    position: fixed;
    width: 100%;
    height: calc(100% + 80px);
    top: 0;
    left: 0;
    background: rgba(11, 27, 58, 0.5);
    z-index: 999;
    display: none;
}



/* Menu search */
.master-menu-search-icon {
    cursor: pointer;
    font-size: 22px;
    margin-left: 20px;
}

.master-search-area {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    padding: 60px 0 80px;
    visibility: hidden;
    transform: translateY(-300px);
    transition: .5s all;
}

.visible-search {
    visibility: visible;
    transform: translateY(0);
}

#master-search {
    width: 100%;
    position: relative;
    opacity: 0;
    transition: .5s all;
}

.visible-search #master-search {
    opacity: 1;
    transition-delay: .3s;
}

.master-search-input {
    position: relative;
}

.master-search-input input[type="text"] {
    border: 0;
    padding: 0;
    font-size: 40px;
    height: 80px;
    font-weight: 700;
}

.master-search-input input[type="text"]::placeholder {
    opacity: 1;
    color: black;
}

.master-search-line {
    height: 2px;
    width: 0;
    background: black;
    transition: .8s all;
}

.visible-search .master-search-line {
    width: 100%;
    transition-delay: .5s;
}

.master-search-close {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 22px;
    position: absolute;
    top: 16px;
    right: 0;
    cursor: pointer;
    z-index: 1;
}

.master-search-close i {
    position: relative;
    z-index: 2;
}

.master-search-close:before {
    content: '';
    width: 50px;
    height: 50px;
    background: #eee;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
    transition: .3s all;
}

.master-search-close:hover:before {
    transform: translate(-50%, -50%) scale(1.2);
}

.master-search-results:not(:empty) {
    padding-top: 40px;
}


/* Page header */
#page-header {
    padding: 20px 0 0;
    margin-bottom: 30px;
}

.page-header-title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.6px;
    line-height: 1.15;
}

.breadcrumbs {
    margin-top: 10px;
    color: var(--grey-color);
    font-size: 14px;
}

.breadcrumbs__link:hover {
    color: var(--main-color);
}

.breadcrumbs__separator {
    margin: 0 5px;
}



/* Index */
.master-posts {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px -30px;
}

.master-post {
    width: 33.3%;
    padding: 0 15px 30px;
}

.master-post-thumbnail img {
    background: var(--light-color);
}

.master-post-thumbnail a {
    display: block;
    position: relative;
    overflow: hidden;
}

.master-post-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    transition: .3s all;
}

.master-post-thumbnail a:hover .master-post-overlay {
    opacity: .3;
}

.master-post-details {
    padding: 15px 0;
}

.master-post-title {
    margin-bottom: 15px;
}

.master-post-title a {
    font-size: 19px;
    line-height: 1.4;
    display: block;
}

.master-post-date {
    margin-bottom: 10px;
}

.master-post-excerpt {
    margin-bottom: 15px;
    line-height: 1.6;
    color: #444;
    word-break: break-words;
}

.master-post-button a {
    display: table;
}

@media (max-width: 500px) {
    .master-post {
        width: 100%;
    }
}

@media (min-width: 501px) and (max-width: 999px) {
    .master-post {
        width: 50%;
    }
}


/* Footer — tətbiqin tünd göy (navy) səthi */
#footer {
    background-color: #0B1B3A;
    color: #A9B0BF;
    font-size: 15px;
}

.footer-blocks {
    --g: min(25px, 4vw);
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(var(--g) * -1) -40px;
    padding: 60px 0;
}

.footer-block {
    width: 25%;
    padding: 0 var(--g) 40px;
}

.footer-block-1 {
    width: 50%;
}

.footer-logo {
    color: white;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1;
}

.footer-logo:after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 3px;
    border-radius: 50%;
    background: #6F93E0;
}

#footer a {
    color: white;
}

#footer a:hover {
    color: #A8CBFF;
}

.footer-links ul {
    list-style: none;
    margin: 0;
}

.footer-links .solid-menu > li {
    display: block;
    text-align: left;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    font-size: 15px;
    font-weight: 400;
}

.footer-links .solid-menu > li:not(:last-child) {
    margin-bottom: 10px;
}

.footer-heading {
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 16px;
    color: white;
}

.footer-desc {
    margin: 20px 0;
    line-height: 1.6;
    max-width: 380px;
}

.footer-social .social-networks {
    gap: 10px;
}

#footer .footer-social .social-networks a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #16284D;
    color: white;
    font-size: 16px;
}

#footer .footer-social .social-networks a:hover {
    background: #1A3F86;
}

.footer-contact-block:first-child {
    margin-bottom: 20px;
}

.footer-contact-heading {
    font-size: 13px;
    margin-bottom: 5px;
}

.footer-contact-block a {
    font-size: 17px;
    font-weight: 600;
}

@media (max-width: 991px) {
    .footer-block-1 {
        width: 100%;
    }

    .footer-block {
        width: 50%;
    }
}

@media (max-width: 575px) {
    .footer-block {
        width: 100%;
    }
}



/* Mailchimp */
.footer-form-block {
    position: relative;
}

.footer-form-block input {
    height: 40px;
    border: 1px solid #666;
    border-radius: var(--border-radius);
    font-size: 14px;
    padding-right: 100px;
    background: transparent;
}

.footer-form-block button {
    background: transparent;
    width: 100px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 14px;
    color: white;
}



/* Footer bottom */
#footer-bottom {
    padding: 25px 0;
    border-top: 1px solid #1B2B4D;
    font-size: 14px;
}

#footer-bottom,
#footer #footer-bottom a {
    color: #8C94A6;
}

.mfb-blocks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 767px) {
    .mfb-block {
        width: 100%;
        text-align: center;
    }

    .mfb-second {
        margin-top: 15px;
    }
}



/* Scroll to top */
#site-scroll-top {
    position: fixed;
    right: 40px;
    bottom: 40px;
    z-index: 998;
    cursor: pointer;
    display: none;
    width: var(--form-height);
    height: var(--form-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-color);
    font-size: 22px;
    text-align: center;
}

#site-scroll-top:hover {
    border-color: var(--grey-color);
}

@media (max-width: 767px) {
    #site-scroll-top {
        right: 20px;
        bottom: 70px;
    }
}


/* Social networks */
.social-networks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.colorfull-social .social-networks a {
    color: white;
    width: var(--form-height);
    height: var(--form-height);
    line-height: var(--form-height);
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    font-size: 16px;
    transition: .3s all;
}

.colorfull-social .facebook-social a {
    background: #6f6fd2;
}

.colorfull-social .instagram-social a {
    background: #bb8181;
}

.colorfull-social .youtube-social a {
    background: #e00000;
}

.colorfull-social .whatsapp-social a {
    background: #00da00;
}

.colorfull-social .twitter-social a {
    background: #55adee;
}

.colorfull-social .telegram-social a {
    background: #0088cc;
}

.colorfull-social .linkedin-social a {
    background: #0077b5;
}

.colorfull-social .tiktok-social a {
    background: #333333;
}

.colorfull-social .social-networks a:hover {
    background: #555;
}

.social-network-item-wl {
    width: 100%;
    margin-bottom: 7px;
}

.social-network-item-wl a {
    display: flex;
    align-items: center;
}

.social-network-label {
    padding-left: 12px;
}



/* Search results */
.search-title a {
    display: block;
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
    color: black;
    font-size: 20px;
}

.search-title:last-child a {
    border-bottom: 0;
}

.search-title a:hover {
    color: var(--main-color);
}

.live-search-button {
    margin-top: 30px;
}



/* Social share */
.master-social-share-area {
    margin-bottom: 40px;
}

.master-title {
    border-bottom: 1px solid var(--light-color);
    margin-bottom: 15px;
    padding-bottom: 5px;
}

.master-social-share-area ul {
    padding: 0;
    margin: 0 -5px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.master-social-share-area.share-with-label ul {
    justify-content: space-between;
}

.master-social-share-area:not(.share-with-label) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.master-social-share-area:not(.share-with-label) .master-title {
    border-bottom: 0;
    margin: 0;
    padding: 0 15px 0 0;
}

.master-social-share-area.share-with-label li {
    width: 20%;
}

.master-social-share-area li {
    padding: 0 5px;
    text-align: center;
    transition: .15s all;
}

.master-social-share-area a {
    display: block;
}

.master-social-share-area:not(.simple-share-area) a {
    color: white;
}

.master-social-share-area.simple-share-area a {
    color: black;
}

.master-social-share-area.share-with-label a {
    padding: 5px 15px;
}

.master-social-share-area:not(.share-with-label) a {
    width: var(--form-height);
    height: var(--form-height);
    line-height: var(--form-height);
    text-align: center;
}

.share-with-label li .master-label {
    padding-left: 10px;
}

.simple-share-area.share-with-label a {
    border: 1px solid #eee;
}

.master-social-share-area:not(.simple-share-area) .twitter-share a {
    background: #00aced;
}

.master-social-share-area:not(.simple-share-area) .twitter-share a:hover {
    background: #0093cb;
}

.master-social-share-area:not(.simple-share-area) .facebook-share a {
    background: #3b5998;
}

.master-social-share-area:not(.simple-share-area) .facebook-share a:hover {
    background: #324b80;
}

.master-social-share-area:not(.simple-share-area) .telegram-share a {
    background: #0088cc;
}

.master-social-share-area:not(.simple-share-area) .telegram-share a:hover {
    background: #3e659c;
}

.master-social-share-area:not(.simple-share-area) .email-share a {
    background: #e40303;
}

.master-social-share-area:not(.simple-share-area) .email-share a:hover {
    background: #ca0303;
}

.master-social-share-area:not(.simple-share-area) .whatsapp-share a {
    background: #30d244;
}

.master-social-share-area:not(.simple-share-area) .whatsapp-share a:hover {
    background: #25b938;
}

@media (min-width: 960px) {
    .whatsapp-mobile-share {
        display: none;
    }
}

@media (max-width: 959px) {
    .whatsapp-desktop-share {
        display: none;
    }
}

@media (min-width: 960px) and (max-width: 1050px) {
    .master-label {
        display: none;
    }

    .master-social-share-area li .fa {
        margin-right: 0;
    }
}

@media (min-width: 270px) and (max-width: 767px) {
    .master-label {
        display: none;
    }

    .master-social-share-area li .fa {
        margin-right: 0;
    }
}

@media (max-width: 269px) {
    .master-social-share-area li {
        width: 100%;
        margin-bottom: 5px;
    }
}


/* Post navigation */
#post-navigation-wrap {
    background: var(--light-color);
    padding: 20px 0;
}

.post-navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 -15px;
}

.next-previous-post {
    padding: 0 15px;
}

.no-prev-es-post {
    display: table;
    margin-left: auto;
}

.post-navigation a {
    color: black;
    position: relative;
    width: 50%;
}

.next-previous-heading {
    display: table;
    background-color: var(--main-color);
    color: white;
    padding: 3px 20px;
    margin-bottom: 10px;
    transition: .15s all;
}

.post-navigation a:hover .next-previous-heading {
    background: var(--second-color);
}

.next-post .next-previous-heading {
    margin-left: auto;
    margin-right: 0;
}

.next-post {
    text-align: right;
    margin-left: auto;
}

.prev-post-no {
    display: table;
    margin-right: 0;
    margin-left: auto;
}

.next-previous-post>div {
    position: relative;
}

.next-previous-post>div:before {
    position: absolute;
    top: 0;
    font-family: 'Font Awesome 6 Free';
    width: 25px;
    height: 25px;
    line-height: 25px;
    color: white;
    text-align: center;
    border-radius: 3px;
    background: var(--main-color);
    display: inline-block;
    font-size: 14px;
    font-weight: 900;
}

.prev-post>div {
    padding-left: 40px;
}

.prev-post>div:before {
    content: '\f104';
    margin-right: 15px;
    left: 0;
}

.next-post>div {
    padding-right: 40px;
}

.next-post>div:before {
    content: '\f105';
    margin-left: 15px;
    right: 0;
}

@media (max-width: 767px) {
    .post-navigation a {
        width: 100%;
    }
}



/* Wordpress default gallery css */
.ms-gallery.ms-gallery-type-false {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.ms-gallery-type-true {
    column-gap: 0;
    margin: 0 -10px;
}

.ms-gallery-type-false .ms-image-9 {
    width: calc(100% / 9);
}

.ms-gallery-type-false .ms-image-8 {
    width: calc(100% / 8);
}

.ms-gallery-type-false .ms-image-7 {
    width: calc(100% / 7);
}

.ms-gallery-type-false .ms-image-6 {
    width: calc(100% / 6);
}

.ms-gallery-type-false .ms-image-5 {
    width: 20%;
}

.ms-gallery-type-false .ms-image-4 {
    width: 25%;
}

.ms-gallery-type-false .ms-image-3 {
    width: 33.3%;
}

.ms-gallery-type-false .ms-image-2 {
    width: 50%;
}

.ms-gallery-type-false .ms-image-1 {
    width: 100%;
}

.ms-image {
    padding: 0 10px 20px;
    margin: 0;
}

.ms-image a {
    display: block;
}

.ms-image img {
    background: #eee;
}

figure.image {
    margin: 0 0 20px;
}

.image figcaption {
    font-style: italic;
    margin-top: 5px;
}

.ms-gallery-tools {
    display: none;
}

.ms-gallery-pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background: red;
    border-radius: 50%;
}

.ms-gallery-pagination.swiper-pagination {
    margin: 15px -5px 30px;
}

.ms-gallery-nav:before {
    font-family: Feather;
}

.ms-gallery-nav-prev:before {
    content: "\e910";
}

.ms-gallery-nav-next:before {
    content: "\e912";
}

@media (max-width: 340px) {
    .ms-gallery {
        margin: 0 -7.5px;
    }

    .ms-gallery-type-true {
        column-count: 1 !important;
    }

    .ms-image {
        width: 100% !important;
        padding: 0 7.5px 15px;
    }
}

@media (min-width: 341px) and (max-width: 767px) {
    .ms-gallery {
        margin: 0 -7.5px;
    }

    .ms-gallery-type-true {
        column-count: 2 !important;
    }

    .ms-image {
        width: 50% !important;
        padding: 0 7.5px 15px;
    }
}

@media (min-width: 767px) and (max-width: 959px) {
    .ms-gallery-type-true {
        column-count: 3 !important;
    }

    .ms-image {
        width: 33.3% !important;
    }
}



/* Sidebar */
.master-widget:not(:last-child) {
    margin-bottom: 40px;
}

.master-sidebar-title {
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 15px;
}



/* Sidebar types */
.sidebar-type-item {
    margin-bottom: 10px;
}

.sidebar-type-item a {
    color: black;
    height: 80px;
    display: flex;
    align-items: center;
    background: #eee;
    border-radius: var(--border-radius);
    padding: 0 50px 0 20px;
    line-height: 1.4;
    font-weight: 600;
    position: relative;
    transition: .3s all;
}

.sidebar-type-item a:hover {
    transform: translateX(5px);
}

.active-type-item a {
    background: var(--main-color);
    color: white;
    pointer-events: none;
}

.sidebar-type-icon {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}


/* Sidebar posts */
.sidebar-post-item {
    margin-bottom: 25px;
}

.sidebar-post-item a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: black;
    line-height: 1.4;
}

.sidebar-post-item a:hover {
    color: var(--main-color);
}

.sidebar-post-thumbnail {
    width: 100px;
}

.sidebar-post-thumbnail img {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.sidebar-post-details {
    width: calc(100% - 120px);
}

.sidebar-post-title {
    font-weight: 600;
    margin-bottom: 10px;
}



/* Sidebar archives */
.widget-archives {
    margin-top: 7px;
}

.widget-archives a {
    display: block;
    border-bottom: 1px solid var(--light-color);
    padding-bottom: 7px;
    padding-top: 7px;
    color: black;
}

.widget-archives a:hover {
    color: var(--main-color);
}

.widget-archives a:before {
    content: '\f114';
    font-family: FontAwesome;
    margin-right: 10px;
    color: black;
}

.sidebar-search {
    position: relative;
}

.sidebar-search input {
    width: 100%;
    height: 45px;
    border: 1px solid #ddd;
    color: black;
    padding: 0 15px;
    font-size: 15px;
}

.sidebar-search button {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--form-height);
    height: var(--form-height);
    line-height: var(--form-height);
    background: var(--main-color);
    color: white;
}


/* Single post */
.single-post-title {
    margin-bottom: 30px;
}

.single-post-title h1 {
    font-size: 32px;
}

.single-post-thumbnail {
    margin-bottom: 30px;
}

.single-post-thumbnail img {
    background: var(--light-color);
    width: auto;
    max-height: 350px;
}

.single-post-meta {
    margin-top: 15px;
}

.single-post-date,
.single-post-meta a {
    color: #666;
}

.single-post-date,
.single-post-category,
.single-post-author {
    display: inline-block;
    vertical-align: middle;
    padding-right: 30px;
}

.single-post-date:before {
    content: '\f073';
    font-family: 'FontAwesome';
    margin-right: 10px;
    color: black;
}

.single-post-category:before {
    content: '\f044';
    font-family: 'FontAwesome';
    margin-right: 5px;
}

.single-post-author:before {
    content: '\f2be';
    font-family: 'FontAwesome';
    margin-right: 5px;
}

.single-post-container-main {
    font-size: 16px;
    line-height: 1.8;
    text-align: justify;
}

.single-content {
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 40px;
}

.single-content img {
    width: auto;
    max-height: 350px;
}

.single-content .ms-gallery img {
    width: 100% !important;
    max-height: inherit !important;
    height: 100% !important;
}

.aligncenter {
    margin: 0 auto;
}

.single-content h2,
.single-content h3,
.single-content h4,
.single-content h5,
.single-content h6 {
    text-align: left;
    margin-bottom: 10px;
}

.single-content ul,
.single-content ol {
    text-align: left;
}

.master-embed {
    position: relative;
    padding-top: 56%;
}

.master-embed iframe {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.alignleft {
    float: left;
}

.alignright {
    float: right;
}

.master-table {
    overflow-x: auto;
    max-width: 100%;
}



/* Designed List */
.designed-list ul {
    list-style: none;
    margin-left: 20px;
}

.designed-list ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    line-height: 1.3;
}

.designed-list ul li:before {
    content: '\f138';
    font-family: 'Font Awesome 6 Free';
    position: absolute;
    top: 2px;
    left: 0;
    font-weight: 900;
    color: var(--main-color);
    font-size: 13px;
}



/* Single Post Author */
.single-author-area {
    margin-top: 40px;
}

.single-author {
    display: table;
    width: 100%;
}

.single-author-block {
    display: table-cell;
    vertical-align: top;
}

.single-author-first {
    width: 150px;
}

.single-author-second {
    width: calc(100% - 150px);
    padding-left: 25px;
    padding-top: 5px;
}

.single-author img {
    height: 150px;
    width: 150px;
    -o-object-fit: cover;
    object-fit: cover;
}

.single-author-name {
    font-size: 20px;
}

.single-author-profession {
    font-size: 17px;
    margin-bottom: 10px;
}

.single-author-description {
    margin-bottom: 10px;
}

.no-image-author:before {
    content: '\f2be';
    font-family: FontAwesome;
    width: 150px;
    height: 150px;
    background: var(--light-color);
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 76px;
    color: #999;
}

@media (max-width: 550px) {
    .single-author-block {
        display: block;
    }

    .single-author-second {
        width: 100%;
        padding-left: 0px;
        padding-top: 15px;
    }
}






/* FAQ */
.master-accordion-title {
    color: black;
    font-size: 16px;
    font-weight: 600;
    padding: 15px 15px 15px 30px;
    cursor: pointer;
    border-bottom: 1px solid var(--light-color);
    position: relative;
    line-height: 1.4;
    user-select: none;
}

.master-accordion-title:before {
    content: "\f067";
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 15px;
    font-size: 14px;
    position: absolute;
    left: 0;
    top: 17px;
    color: var(--main-color);
}

.master-accordion-title.active:before {
    content: "\f068";
}

.master-accordion-content {
    color: black;
    margin-top: 15px;
    display: none;
}


/* Default input — tətbiqin InputDecorationTheme-i: ağ, 54px, 14px radius, 17/500,
   fokusda 2px sərhəd (rola görə rəng) */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
    appearance: none;
    font-family: var(--font-family);
    width: 100%;
    border: 1px solid var(--border-color);
    height: var(--form-height);
    line-height: var(--form-height);
    padding: 0 15px;
    color: var(--text-color);
    font-size: 17px;
    font-weight: 500;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: none;
}

textarea {
    appearance: none;
    font-family: var(--font-family);
    border: 1px solid var(--border-color);
    width: 100%;
    padding: 15px;
    color: var(--text-color);
    font-size: 16px;
    resize: vertical;
    min-height: 90px;
    background: white;
    border-radius: var(--large-radius);
    box-shadow: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--hint-color);
    font-weight: 500;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: var(--focus-color);
    box-shadow: 0 0 0 1px var(--focus-color);
}

select[multiple] {
    height: auto;
    line-height: 1.4;
    padding: 10px 15px;
    background-image: none;
}

input[type=radio] {
    box-shadow: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid #c6c6c8;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    position: absolute;
    cursor: pointer;
    background: white;
    top: 1.5px;
    left: 0;
    border-radius: 50%;
}

input[type=radio]:checked {
    border-color: var(--main-color);
}

input[type=radio]:checked:before {
    content: '';
    width: 9px;
    height: 9px;
    display: block;
    border-radius: 50%;
    background: var(--main-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

input[type=radio]+label {
    user-select: none;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding-left: 30px;
}

input[type=checkbox] {
    box-shadow: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border: 1.2px solid #C3CAD6;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    background: white;
    top: 0;
    left: 0;
    margin: 0;
    cursor: pointer;
    border-radius: 6px;
}

input[type=checkbox]:checked {
    background: #1F9D55;
    border-color: #1F9D55;
    color: white;
}

input[type=checkbox]:checked:before {
    content: "\e92b";
    font-family: 'Feather';
    font-weight: 800;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
}

input[type=checkbox]+label {
    user-select: none;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding-left: 35px;
    margin-bottom: 0;
    line-height: 1.4;
    font-size: 15px;
}

input[type=file]::file-selector-button {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    padding: 5px 15px;
}

sup,
sub {
    font-size: 12px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

select {
    -webkit-appearance: none;
    background: white;
    width: 100%;
    background-image: url(/uploads/extra/chevron-down.svg);
    background-repeat: no-repeat;
    background-position-x: calc(100% - 15px);
    background-position-y: center;
    background-size: 18px;
    cursor: pointer;
    padding-right: 45px;
}


/* Form */
.grecaptcha-badge {
    display: none;
}

.form-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 -15px;
}

.form-group .form-element {
    padding: 0 15px 15px;
}

.form-100 {
    width: 100%;
}

.form-85 {
    width: 85%;
}

.form-50 {
    width: 50%;
}

.form-33 {
    width: 33.3%;
}

.form-25 {
    width: 25%;
}

.form-15 {
    width: 15%;
}

.form-element {
    padding-bottom: 15px;
    position: relative;
}

.form-element label {
    display: block;
    width: 100%;
    margin-bottom: 3px;
}

.form-simple-file label {
    border: 1px solid #ddd;
    padding: 10px 15px;
    cursor: pointer;
}

.fsf-blocks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.fsf-button {
    border: 1px solid #ddd;
    background: #eee;
    padding: 5px 15px;
    line-height: 1.3;
    margin-right: 10px;
}

.faf-items {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
}

.faf-items label {
    width: auto;
}

.faf-item {
    padding: 0 5px;
}

.faf-preview img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.faf-item i {
    width: 80px;
    height: 80px;
    border: 2px dashed #ddd;
    line-height: 80px;
    text-align: center;
    font-size: 22px;
    background: #f5f5f5;
    cursor: pointer;
}

.form-result:not(:empty) {
    margin-top: 20px;
}

.form-simple-file input,
.form-advanced-file input {
    display: none;
}

.form-choices {
    display: flex;
    flex-wrap: wrap;
}

.form-choices .form-choice {
    padding-right: 30px;
}

.form-choice {
    position: relative;
}

.alert {
    padding: 10px 15px 10px 55px;
    text-align: left;
    min-height: 42px;
    position: relative;
    border-radius: var(--border-radius);
}

.alert-danger {
    color: #8d423b;
    background-color: #ffe2df;
    border-color: #ffd7d3;
}

.alert-success {
    color: #1d6944;
    background-color: #d4ffd3;
    border-color: #c3ecd8;
}

.alert-info {
    color: #281b80;
    background-color: #e0e0ff;
    border-color: #e0e0ff;
}

.alert:before {
    font-family: 'Font Awesome 6 Free';
    position: absolute;
    top: 50%;
    left: 5px;
    height: 35px;
    width: 35px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    border-radius: var(--border-radius);
    transform: translateY(-50%);
}

.alert-danger:before {
    content: "\f071";
    background: #da6f64;
}

.alert-success:before {
    content: '\f058';
    background: #48c346;
}

.alert-info:before {
    content: "\f05a";
    background: #464fc3;
}

@media (max-width: 650px) {

    .form-50,
    .form-33,
    .form-25 {
        width: 100%;
    }
}


/* Progress bar */
.progress {
    background: #eee;
    border-radius: 5px;
    display: none;
    position: relative;
    margin-bottom: 20px;
    margin-top: 30px;
}

.progress-bar {
    height: 5px;
    line-height: 5px;
    background: red;
    font-weight: 600;
    color: white;
    padding: 0 15px;
    width: 0%;
    position: relative;
    max-width: 100%;
}

.progress-bar-text-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    right: 0;
    top: -25px;
    font-weight: 600;
    width: 100%;
}


/* ACF Map */
.acf-map-area {
    position: relative;
}

.acf-map {
    height: 450px;
    background: #eee;
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.acf-iframe-map iframe {
    width: 100% !important;
    height: 100% !important;
    position: relative;
    z-index: 1;
}

.map-loading {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    background: #ddd;
}

.map-loading-text {
    padding-top: 40px;
    font-weight: 600;
    font-size: 18px;
}



/* Comments */
.default-comment-form-area {
    display: none;
}

.comment-reply-area {
    margin-bottom: 20px;
}

#comments {
    padding-bottom: 20px;
}

.comment-count-heading {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 20px;
    margin-top: 30px;
}

.comment-list {
    list-style: none;
    margin: 0;
}

.comment {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 15px;
}

.comment-author,
.comment-block {
    display: table-cell;
    vertical-align: top;
}

.comment-author {
    width: 70px;
    padding-right: 10px;
}

.comment-author .fa-solid {
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border: 1px solid #ddd;
    background: #f5f5f5;
    font-size: 30px;
    color: #999;
}

.comment-author img {
    border: 1px solid #ddd;
    padding: 3px;
    width: 60px;
    height: 60px;
    -o-object-fit: cover;
    object-fit: cover;
}

.comment-block {
    border: 1px solid #ddd;
    padding: 10px 15px;
    width: calc(100% - 70px);
}

.comment-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 14px;
}

.date.float-right {
    color: #a7a7a7;
}

.comment-rating {
    display: inline-flex;
    color: orange;
    font-size: 13px;
}

.comment-text {
    margin-top: 5px;
}

.comment-text p {
    margin-bottom: 5px;
}

.comment-reply {
    text-decoration: underline;
    color: var(--main-color);
    cursor: pointer;
    display: inline-block;
}

.comments .children {
    margin: 0 0 0 20px;
    list-style: none;
}

.comments .children>.comment {
    margin-bottom: 0;
}

.byuser .comment-block {
    background: #f5f5f5;
}

.comment-reply-heading-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: 600;
}

.comment-reply-heading,
.comment-reply-cancel {
    padding: 5px 0;
}

.comment-reply-cancel {
    text-decoration: underline;
    color: red;
    cursor: pointer;
    font-size: 14px;
}

.logged-user-comment-author {
    margin-bottom: 10px;
}

.comment-name {
    padding-right: 5px;
}

.default-comment-form {
    width: 100%;
    margin-top: 15px;
}

@-webkit-keyframes wd-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes wd-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 600px) {
    .comment-author {
        width: 40px;
        padding-right: 5px;
    }

    .comment-author img {
        width: 35px;
        height: 35px;
    }
}


/* Rating */
.comment-ratings {
    display: flex;
    align-items: center;
    margin: 0 -2px;
}

.comment-ratings input {
    display: none;
}

.comment-rating label {
    padding: 0 2px !important;
}

.comment-rating label:before {
    content: '\f005';
    font-family: 'Font Awesome 6 Free';
    color: var(--light-color);
    font-size: 20px;
}

.active-comment-rating label:before {
    color: orange;
}


/* Gallery */
.master-gallery {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px -20px;
}

.master-image {
    width: 25%;
    padding: 0 10px 20px;
}

.master-image a {
    display: block;
    overflow: hidden;
    position: relative;
}

.master-image img {
    background: var(--light-color);
}

.master-image-overlay {
    background: black;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: .3s all;
}

.master-image a:hover .master-image-overlay {
    opacity: .3;
}

@media (max-width: 350px) {
    .master-image {
        width: 100%;
    }
}

@media (min-width: 351px) and (max-width: 767px) {
    .master-gallery {
        margin: 0 -5px;
    }

    .master-image {
        width: 50%;
        padding: 0 5px 10px;
    }
}

@media (min-width: 768px) and (max-width: 999px) {
    .master-image {
        width: 33.3%;
    }
}



/* Table */
table {
    width: 100%;
    line-height: 1.5;
    border-collapse: collapse;
    margin: 20px 0;
    text-align: left;
}

th,
td {
    border-bottom: 1px solid var(--line-color);
    padding: 10px 15px;
}



/* Toolbar */
.toolbar-area {
    position: fixed;
    bottom: 15px;
    left: 15px;
    z-index: 1000000;
}

.toolbar-area a {
    position: absolute;
    color: white;
    border-radius: 50%;
    left: 0;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    font-size: 20px;
    display: block;
}

.toolbar-phone {
    background: #6565ff;
    bottom: 0;
}

.toolbar-whatsapp {
    background: #45c71b;
    bottom: 55px;
}

@media (min-width: 768px) {
    .toolbar-area {
        display: none;
    }
}


/* Loading */
.loading {
    color: transparent !important;
    position: relative;
    pointer-events: none;
}

.loading:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transition: opacity 0s ease;
    opacity: 1;
    animation: loading 450ms infinite linear;
    transition: opacity .25s ease;
}

.loading:before {
    visibility: hidden;
}

.small-loading-icon:after {
    width: 15px;
    height: 15px;
    margin-left: -7.5px;
    margin-top: -7.5px;
}

.big-loading-icon:after {
    width: 45px;
    height: 45px;
    margin-left: -22.5px;
    margin-top: -22.5px;
}

.light-loading-icon:after {
    border: 1px solid rgba(255, 255, 255, .3);
    border-left-color: #fff;
}

.dark-loading-icon:after {
    border: 1px solid rgba(0, 0, 0, .3);
    border-left-color: #000;
}

@-webkit-keyframes loading {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes loading {
    100% {
        transform: rotate(360deg);
    }
}


/* QR code */
.qr-code img {
    width: 150px;
}



/* Swiper js */
.master-slider {
    height: 0;
    overflow: hidden;
}

.master-slider.swiper-initialized {
    height: auto;
}



/* Hide admin bar */
.active-admin-bar {
    margin-top: 35px;
}

.admin-bar {
    display: none;
}

.active-admin-bar .admin-bar {
    display: flex;
}

.hide-admin-bar {
    position: fixed;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    display: block;
    cursor: pointer;
    z-index: 100000;
}

.active-admin-bar .hide-admin-bar {
    top: 35px;
}


/* Pagination */
.pagination {
    margin: 30px 0 0;
    list-style: none;
}

.page-item {
    display: inline-block;
}

.page-item a {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: var(--light-color);
    margin-right: 5px;
    color: black;
    padding: 0;
}

.page-item.active a,
.page-item a:hover {
    background: var(--main-color);
    color: white;
}


/* Fancybox */
body.compensate-for-scrollbar {
    overflow: unset !important;
}

.fancybox-active .admin-bar {
    z-index: 1;
}


/* Mobile sticky phone */
.mobile-sticky-area {
    position: fixed;
    bottom: 15px;
    left: 15px;
    z-index: 1000;
}

.mobile-sticky-elements a {
    width: 45px;
    height: 45px;
    line-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    margin-top: 7px;
    font-size: 18px;
}

.mobile-sticky-phone {
    background: var(--main-color);
}

.mobile-sticky-whatsapp {
    background: #25ce25;
}

@media (min-width: 801px) {
    .mobile-sticky-area {
        display: none;
    }
}



/* MailChimp */
#mailchimp {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
}

#mailchimp>div {
    padding: 0 5px;
}

.mailchimp-element input {
    border: 1px solid #ddd;
    height: 40px;
    padding: 0 10px;
}

.mailchimp-button button {
    background: red;
    height: 40px;
    padding: 0 30px;
    font-size: 17px;
    color: white;
    text-transform: uppercase;
}

.mailchimp-result:not(:empty) {
    display: table;
    margin: 10px auto 0;
}

.mailchimp-success {
    position: relative;
    padding-left: 35px;
    font-weight: 600;
}

.mailchimp-success:before {
    content: '\f058';
    font-family: FontAwesome;
    position: absolute;
    top: 0;
    left: 0;
    color: var(--main-color);
}



/* Notify template */
.notify-block-area {
    text-align: center;
    margin-bottom: 30px;
}

.notify-block-icon-area {
    width: 150px;
    height: 150px;
    background: #00a900;
    display: flex;
    align-items: center;
    margin: 0 auto 30px;
    justify-content: center;
    border-radius: 30px;
    color: white;
    font-size: 100px;
}

.notify-fe-fe-check {
    background: #00a900;
}

.notify-fe-fe-x {
    background: #ff0000;
}

.notify-block-area h3 {
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.notify-block-description {
    color: #666;
    margin: 0 auto 25px;
    width: 600px;
    max-width: 100%;
}



/* Callout */
.callout-form-element {
    margin-bottom: 10px;
}

.callout-form-element input {
    width: 100%;
    border: 1px solid #ddd;
    height: var(--form-height);
    font-size: 15px;
    padding: 0 15px;
}

.success-message {
    text-align: center;
    color: #ccc;
    display: none;
}

.success-message:before {
    content: '\f058';
    font-family: "Font Awesome 6 Free";
    display: table;
    margin: 0 auto 15px;
    font-size: 24px;
    color: yellow;
}


/* Callout modal */
#callout-modal-form {
    width: 500px;
    display: none;
}


/* Master buttons */
/* Tətbiqin MsButton-u: pill forma, 58px, 18/700; əsas düymənin altında 4px açıq zolaq */
.button {
    height: var(--button-height);
    cursor: pointer;
    padding: 0 30px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    border-radius: 999px;
    line-height: 1.1;
    user-select: none;
    transition: .15s all;
}

.simple-button {
    height: 46px;
    cursor: pointer;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--link-color);
    background: white;
    border: 1px dashed var(--grey-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    border-radius: var(--border-radius);
    line-height: 1.2;
    user-select: none;
    transition: .15s all;
}

.primary-button {
    background: var(--main-color);
    color: white;
    border: 0;
    border-bottom: 4px solid var(--strip-color);
    padding-top: 4px;
}

.primary-button:hover {
    color: white;
    filter: brightness(1.08);
}

.primary-button:active {
    border-bottom-width: 2px;
    padding-top: 2px;
}

.outline-button {
    background: #fff;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.outline-button:hover {
    border-color: var(--grey-color);
    color: var(--text-color);
}

.colored-button {
    background: var(--second-color);
    color: white;
    border: 1px solid var(--second-color);
}

.colored-button:hover {
    background: #f75848;
    border-color: #f75848;
}

.wide-button {
    width: 100%;
}

.icon-right-button:after {
    content: "\e912";
    font-family: Feather;
    margin-left: 10px;
    margin-right: -10px;
    font-size: 14px;
}

.icon-left-button:before {
    content: "\e912";
    font-family: Feather;
    margin-left: -10px;
    margin-right: 10px;
    font-size: 14px;
}

.icon-right-button.loading:after {
    margin-left: -7.5px;
    margin-right: 0;
}



/* Animations */
.animate {
    transition: 1.2s all;
}

.scale-animation {
    transform: scale(0.5);
    opacity: 0;
}

.fade-animation {
    opacity: 0;
}

.left-to-right-animation {
    transform: translateX(-100px);
    opacity: 0;
}

.right-to-left-animation {
    transform: translateX(100px);
    opacity: 0;
}

.top-to-bottom-animation {
    transform: translateY(-100px);
    opacity: 0;
}

.bottom-to-top-animation {
    transform: translateY(100px);
    opacity: 0;
}

.animated {
    opacity: 1;
    transform: none;
}


/* Fixed header */
.has-fixed-header {
    padding-top: 76px;
}

.has-fixed-header #site-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    animation-name: sticky;
    animation-duration: .5s;
    border-bottom: 1px solid var(--border-color);
}

.has-fixed-header.active-admin-bar #site-header {
    margin-top: 35px;
}

.has-fixed-header .header-aside {
    position: absolute;
    right: 0;
}

@keyframes sticky {
    from {
        transform: translateY(-80px);
    }

    to {
        transform: translateY(0);
    }
}


/* Topbar */
#topbar-wrap {
    border-bottom: 1px solid #ddd;
}

.topbar-blocks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 -15px;
}

.topbar-block {
    padding: 5px 15px;
}

.topbar-elements {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0 -15px;
}

.topbar-element {
    padding: 5px 15px;
}



/* Master heading */
.heading-blocks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 -15px -30px;
}

.heading-block {
    padding: 0 15px 30px;
}

.hb-1 {
    width: 66.6%;
}

.hb-2 {
    width: 33.3%;
}

.heading-area {
    margin-bottom: 40px;
}

.heading-blocks .heading-area {
    margin-bottom: 0;
}

.heading {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.56px;
    line-height: 1.2;
}

.sub-heading {
    color: var(--muted-color);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}

.description {
    margin-top: 5px;
    width: 600px;
    max-width: 100%;
}

.center-heading {
    text-align: center;
}

.center-heading .description {
    margin-left: auto;
    margin-right: auto;
}

.light-heading .heading,
.light-heading .sub-heading {
    color: white;
}

@media (max-width: 767px) {
    .heading-block {
        width: 100%;
    }
}



/* Whatsapp */
.whatsapp-toolbar-area {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.whatsapp-icon-box {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whatsapp-toolbar-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 100%;
    padding-right: 20px;
    display: none;
}

.whatsapp-toolbar-text span {
    display: block;
    background: white;
    color: black;
    padding: 8px 15px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgb(92 92 92 / 12%);
    line-height: 1.2;
    text-align: center;
    min-width: 170px;
    font-weight: 500;
    position: relative;
    z-index: -1;
}

.whatsapp-toolbar-text span:after {
    content: '';
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #21ad21;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    z-index: 1;
}

.whatsapp-toolbar-icon {
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    background: #21ad21;
    border-radius: 50%;
    font-size: 32px;
}



/* Language switcher */
.language-list-switcher ul {
    margin: 0 -7px;
    list-style: none;
    display: flex;
}

.language-list-switcher li {
    padding: 0 7px;
}

.language-list-switcher .language-item a {
    display: flex;
    align-items: center;
}

.language-list-switcher .language-item img {
    width: 22px;
    height: 22px;
}

.language-list-switcher .language-label {
    padding-left: 7px;
    font-weight: 600;
    color: black;
}



.language-dropdown-switcher ul {
    margin: 0 10px 0 0;
    list-style: none;
    position: relative;
    cursor: pointer;
    font-size: 16px;
}

.language-dropdown-switcher .ls-sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -8px;
    width: 100%;
    box-shadow: 0 0 10px rgb(0 0 0 / 8%);
    border-radius: 8px;
    min-width: 40px;
    background: white;
    padding: 8px 0;
}

.language-dropdown-switcher img {
    width: 24px;
    height: 24px;
}

.language-dropdown-switcher .language-label {
    padding-left: 10px;
    font-weight: 600;
    transition: .3s all;
}

.language-dropdown-switcher:hover .ls-sub-menu {
    display: block;
}

.language-dropdown-switcher .ls-current-lang {
    display: flex;
    align-items: center;
    height: 38px;
    border-radius: 8px;
}

.language-dropdown-switcher .ls-current-lang:after {
    content: "\e92e";
    font-family: Feather;
    font-size: 14px;
    margin-left: 5px;
}

.language-dropdown-switcher .language-item {
    display: flex;
    justify-content: center;
}

.language-dropdown-switcher .language-item a {
    color: black;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.language-dropdown-switcher .language-item a:hover .language-label {
    opacity: .5;
}

.language-dropdown-switcher .language-item:not(:last-child) {
    margin-bottom: 5px;
}

.language-dropdown-switcher .language-switcher.language-dropdown-switcher {
    margin-left: 15px;
}



/* Canvas sidebar */
.canvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: .7;
    display: block;
    z-index: 999;
    visibility: hidden;
}

.active-canvas-overlay {
    visibility: visible;
}

.canvas-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 350px;
    background: white;
    height: 100%;
    transform: translate3d(100%, 0, 0);
    z-index: 10000;
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all;
}

.active-canvas-sidebar {
    transform: none;
}

.canvas-sidebar-header {
    border-bottom: 1px solid var(--light-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 30px 20px;
}

.csh-heading {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 22px;
}

.canvas-sidebar-body {
    padding: 40px 20px;
    overflow-y: auto;
    height: calc(100% - 97px);
}

.csh-close {
    font-size: 15px;
    cursor: pointer;
}

.csh-close:after {
    content: "\ea02";
    font-family: Feather;
    margin-left: 5px;
    transform: translateY(3px);
    display: inline-block;
    font-size: 18px;
}



/* Audio */
audio {
    height: 40px;
    width: 100%;
}

audio::-webkit-media-controls-enclosure {
    border-radius: 5px;
}

audio::-webkit-media-controls-panel {
    background: #ddd;
    height: 40px;
}



/* Swiper */
.relative-slider {
    position: relative;
}

.side-swiper-nav {
    position: absolute;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
}

.ssn-prev {
    left: -30px;
}

.ssn-next {
    right: -30px;
}

.center-swiper-navigations {
    display: flex;
    justify-content: center;
    margin: 0 -5px;
}

.center-swiper-nav {
    font-size: 22px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 0 5px;
    cursor: pointer;
}

.swiper-pagination {
    display: flex;
    margin: 30px -5px 0;
}

.swiper-pagination .swiper-pagination-bullet {
    margin: 0 5px;
    cursor: pointer;
    background: #ddd;
    transition: .3s all;
}

.swiper-pagination .swiper-pagination-bullet-active,
.swiper-pagination .swiper-pagination-bullet:hover {
    background: #444;
}

.dots-swiper-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
}

.liner-swiper-pagination .swiper-pagination-bullet {
    width: 30px;
    height: 3px;
    display: block;
}

.center-swiper-pagination {
    justify-content: center;
}

.swiper-slide .master-post {
    width: 100%;
    padding: 0;
}



/* Tabs */
.tabs-heading {
    list-style: none;
    margin: 0;
    display: flex;
    border-bottom: 1px solid #ccc;
}

.tabs-heading li {
    text-align: center;
    font-weight: 500;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    padding: 0 20px;
    line-height: 1.2;
    color: #888;
}

.tabs-heading .active-tab {
    color: black;
}

.tabs-heading .active-tab:before {
    content: '';
    height: 3px;
    width: 100%;
    background: var(--main-color);
    left: 0;
    bottom: -1.5px;
    position: absolute;
}

.tabs-body>div:not(:first-child) {
    display: none;
}



/* Master scroll */
.master-scrolls ::-webkit-scrollbar,
.master-scroll::-webkit-scrollbar {
    width: 3px;
}

.master-scrolls ::-webkit-scrollbar-track,
.master-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.master-scrolls ::-webkit-scrollbar-thumb,
.master-scroll::-webkit-scrollbar-thumb {
    background: #888;
}

.master-scrolls ::-webkit-scrollbar-thumb:hover,
.master-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}



/* FontAwesome */
.fa-solid:before {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
}

.fa-brands:before {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
}

.fa-facebook:before {
    content: "\f09a";
}

.fa-instagram:before {
    content: "\f16d";
}

.fa-youtube:before {
    content: "\f167";
}

.fa-x-twitter:before {
    content: "\e61b";
}

.fa-linkedin:before {
    content: "\f08c";
}

.fa-telegram:before {
    content: "\f2c6";
}

.fa-whatsapp:before {
    content: "\f232";
}

.fa-tiktok:before {
    content: "\e07b";
}

.fa-play:before {
    content: "\f04b"
}

.fa-envelope:before {
    content: "\f0e0";
}

.fa-heart:before {
    content: "\f004";
}

.fa-comment:before {
    content: "\f075";
}



/* ==========================================================================
   GSAP FLASH-ın qarşısı — `gsap-hidden` (header.php-də <html>-ə qoyulur,
   master.js-in ƏN ƏVVƏLİNDƏ silinir).
   master.js `defer` ilə yükləndiyi üçün fix olmasa animasiya olunan blok ilk paint-də
   GÖRÜNÜR, sonra GSAP onu gizlədib animasiya ilə gətirir — gözlə görünən sıçrayış.

   ⚠️ BU SİYAHI ANİMASİYA SEÇİCİLƏRİ İLƏ SİNXRON OLMALIDIR.
   Aşağıdakılar motorun standart class-larıdır. Əgər saytda animasiya `fade-in-*` class-ları
   ilə DEYİL, birbaşa blok seçiciləri ilə qurulubsa (master.js-də `.master-post`,
   `.project-block`, `.heading-area` kimi seçicilərlə tween qurmaq), həmin seçiciləri
   AŞAĞIDAKI "sayt seçiciləri" slotuna əlavə et — yoxsa yalnız `fade-in-*` elementləri
   qorunur, saytın qalan bütün blokları flash verir.
   ========================================================================== */
.gsap-hidden .fade-in-only,
.gsap-hidden .fade-in-up,
.gsap-hidden .fade-in-down,
.gsap-hidden .fade-in-left,
.gsap-hidden .fade-in-right,
.gsap-hidden .fade-in-scale,
.gsap-hidden .fade-out-scale {
    opacity: 0;
}

/* --- SAYT SEÇİCİLƏRİ SLOTU ---
   Animasiya `fade-in-*` class-ları ilə deyil, birbaşa blok seçiciləri ilə qurulubsa,
   master.js-dəki tween seçicilərinin EYNİSİNİ bura köçür və komment-i aç:

.gsap-hidden .master-post,
.gsap-hidden .heading-area,
.gsap-hidden .stat-block {
    opacity: 0;
}
   --- */
/* KLIX */
.klix-hidden {
    display: none;
}
.klix-hero-area {
    padding: 40px 0 70px;
}

.klix-hero-area .sub-heading {
    display: inline-block;
    background: #E5EDFF;
    color: var(--link-color);
    border-radius: 6px;
    font-size: 13px;
    padding: 5px 10px;
    margin-bottom: 15px;
}

.klix-hero-area .heading {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -1.4px;
    line-height: 1.05;
}

@media (max-width: 575px) {
    .klix-hero-area .heading {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
}
.klix-hero-blocks {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -18px;
}
.klix-hero-block {
    padding: 0 18px;
    width: 50%;
}
.klix-hero-text {
    color: var(--muted-color);
    font-size: 17px;
    line-height: 1.6;
    margin-top: 18px;
    max-width: 520px;
}
.klix-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.klix-hero-note {
    color: var(--grey-color);
    font-size: 13px;
    margin-top: 14px;
}
.klix-hero-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--large-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 16px 40px rgba(0, 0, 0, .07);
    padding: 20px;
}
.klix-hero-card-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
}
.klix-hero-card-note {
    color: #8C94A6;
    font-size: 12px;
    margin-top: 12px;
}
.klix-hero-table,
.klix-compare-table,
.klix-offer-table {
    border-collapse: collapse;
    font-size: 14px;
    width: 100%;
}
.klix-hero-table th,
.klix-hero-table td,
.klix-compare-table th,
.klix-compare-table td,
.klix-offer-table th,
.klix-offer-table td {
    border: 0;
    border-bottom: 1px solid var(--line-color);
    padding: 10px;
    text-align: left;
}
.klix-hero-table th,
.klix-compare-table th,
.klix-offer-table th {
    color: var(--grey-color);
    font-size: 12px;
    font-weight: 600;
}
.klix-cheap,
.klix-compare-table .klix-cheap {
    background: #E2F5E9;
    color: #15803D;
    font-weight: 700;
}
.klix-table-wrap {
    overflow-x: auto;
}
.klix-steps-area {
    background: #fff;
    padding: 60px 0;
}
.klix-steps-blocks,
.klix-categories-blocks,
.klix-apply-blocks,
.klix-seller-blocks,
.klix-contact-blocks {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}
.klix-steps-block {
    padding: 0 12px;
    width: 33.333%;
}
.klix-steps-icon-box {
    background: var(--bg-color);
    border-radius: var(--large-radius);
    height: 100%;
    padding: 20px;
}
.klix-steps-number {
    align-items: center;
    background: var(--main-color);
    border-radius: 999px;
    color: #fff;
    display: flex;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    margin-bottom: 14px;
    width: 34px;
}
.klix-steps-title,
.klix-categories-title {
    font-size: 17px;
    font-weight: 700;
}
.klix-steps-desc,
.klix-categories-desc {
    color: var(--muted-color);
    font-size: 14px;
    line-height: 1.55;
    margin-top: 10px;
}
.klix-categories-area {
    padding: 60px 0;
}
.klix-categories-block {
    margin-bottom: 24px;
    padding: 0 12px;
    width: 25%;
}
.klix-categories-icon-box {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    height: 100%;
    padding: 20px;
    transition: .15s all;
}
.klix-categories-icon-box:hover {
    border-color: #FFC83D;
    background: #FFF3D6;
}
.klix-seller-area {
    background: #0B1B3A;
    color: #fff;
    padding: 60px 0;
}
.klix-seller-area .heading,
.klix-seller-area .sub-heading {
    color: #fff;
}
.klix-seller-block {
    padding: 0 12px;
    width: 50%;
}
.klix-seller-text {
    color: #C3CAD6;
    line-height: 1.6;
    margin-bottom: 18px;
}
.klix-seller-area .designed-list ul li {
    color: #C3CAD6;
}
.klix-seller-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}
.klix-stats-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.klix-stats-blocks .master-milestone {
    background: #0F2D6B;
    border-radius: 24px;
    flex: 1 1 140px;
    padding: 20px;
}
.klix-stats-blocks .master-milestone-number {
    font-size: 28px;
    font-weight: 700;
}
.klix-stats-blocks .master-milestone-heading {
    color: #A9B0BF;
    font-size: 13px;
    margin-top: 4px;
}
@media (max-width: 991px) {
    .klix-hero-block,
    .klix-seller-block {
        width: 100%;
    }
    .klix-hero-block-2 {
        margin-top: 26px;
    }
    .klix-steps-block {
        margin-bottom: 14px;
        width: 100%;
    }
    .klix-categories-block {
        width: 50%;
    }
}
@media (max-width: 575px) {
    .klix-hero-buttons .button {
        width: 100%;
    }
    .klix-categories-block {
        margin-bottom: 10px;
        padding: 0 5px;
    }
    .klix-categories-blocks {
        margin: 0 -5px;
    }
    .klix-categories-icon-box {
        padding: 15px;
    }
    .klix-categories-desc {
        display: none;
    }
}
@media (max-width: 360px) {
    .klix-categories-block {
        width: 100%;
    }
}

/* Bölmə qabları */
.klix-auth-area,
.klix-apply-area,
.klix-cabinet-area,
.klix-panel-area,
.klix-gate-area,
.klix-text-area,
.klix-contact-area {
    padding: 50px 0 70px;
}
.klix-auth-blocks {
    display: flex;
    justify-content: center;
}
.klix-auth-block {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    max-width: 460px;
    padding: 30px;
    width: 100%;
}
.klix-auth-block .heading-area {
    margin-bottom: 20px;
}
.klix-auth-block .heading {
    font-size: 30px;
    letter-spacing: -0.6px;
}
/* Seqment idarəsi (alıcı/satıcı girişi, çatdırılma seçimi) */
.klix-auth-tabs,
.klix-segment {
    display: flex;
    background: #E8ECF3;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    padding: 4px;
}
.klix-auth-tabs .filter-name,
.klix-segment-item {
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--muted-color);
    cursor: pointer;
    flex: 1;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 40px;
    margin: 0;
    padding: 0;
    text-align: center;
}
.klix-auth-tabs .filter-name.active,
.klix-segment-item.active {
    background: #fff;
    box-shadow: 0 4px 10px rgba(11, 27, 58, .05);
    color: var(--text-color);
}
@media (max-width: 575px) {
    .klix-segment {
        flex-wrap: wrap;
    }
    .klix-segment-item {
        flex: 1 1 140px;
    }
}
/* Əsas tablar (tətbiqin aşağı naviqasiyasının sayt qarşılığı) */
.klix-cabinet-tabs,
.klix-panel-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}
.klix-cabinet-tabs .filter-name,
.klix-panel-tabs .filter-name {
    align-items: center;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    font-size: 15px;
    font-weight: 600;
    gap: 7px;
    line-height: 34px;
    padding: 0 15px;
}
.klix-cabinet-tabs .filter-name.active,
.klix-panel-tabs .filter-name.active {
    background: var(--second-color);
    border-color: var(--second-color);
    color: #fff;
}
.klix-tab-count {
    background: #E5462F;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    min-width: 18px;
    padding: 0 5px;
    text-align: center;
}
.klix-form .form-element {
    margin-bottom: 12px;
}
.klix-form .form-group {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -6px;
}
.klix-form .form-group .form-element {
    padding: 0 6px;
}
.klix-form .form-50 {
    width: 50%;
}
.klix-form .form-33 {
    width: 33.333%;
}
.klix-form .form-choice {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.klix-form .form-submit {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
@media (max-width: 575px) {
    .klix-form .form-50,
    .klix-form .form-33 {
        width: 100%;
    }
}
.klix-field-note,
.klix-auth-note {
    color: var(--muted-color);
    font-size: 13px;
    line-height: 1.5;
    margin-top: 5px;
}
.klix-auth-note a {
    color: var(--link-color);
    font-weight: 600;
}
.klix-auth-forgot {
    color: var(--link-color);
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    margin: 4px 0 14px;
}
#klix-recover-sent {
    margin: 0 0 14px;
}
.klix-otp-code,
.klix-otp-verify {
    display: none;
}
.klix-otp-sent .klix-otp-code,
.klix-otp-sent .klix-otp-verify {
    display: block;
}
.klix-otp-links {
    display: flex;
    margin-top: 14px;
}
/* Kod göndəriləndən sonra «Kod göndər» düyməsi gizlənir, yerinə geri sayımlı link çıxır */
.klix-otp-resend,
.klix-otp-sent #klix-otp-send {
    display: none;
}
.klix-otp-sent .klix-otp-resend {
    display: flex;
}
.klix-otp-links a {
    color: var(--link-color);
    font-size: 14px;
    font-weight: 600;
}
.klix-otp-links a.klix-resend-wait,
.klix-apply-otp-links a.klix-resend-wait {
    color: var(--muted-color);
    cursor: default;
    font-weight: 400;
    pointer-events: none;
}
.klix-apply-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}
/* Iyerarxik checkbox siyahisi (klix_checkbox_list) — multiple select evezine */
.klix-checkbox-list {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--large-radius);
    max-height: 320px;
    overflow-y: auto;
    padding: 12px 14px;
}
.klix-checkbox-list .admin-form-checkbox {
    min-height: 22px;
    margin-bottom: 10px;
    position: relative;
}
.klix-checkbox-list .admin-form-checkbox:last-child {
    margin-bottom: 0;
}
.klix-checkbox-list .admin-form-checkbox:not(.klix-checkbox-child) label {
    font-weight: 600;
}
.klix-checkbox-list .klix-checkbox-child {
    margin-left: 26px;
}
.klix-checkbox-empty {
    display: none;
}
.klix-apply-otp-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}
.klix-apply-otp-text {
    color: var(--muted-color);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 18px;
}
.klix-apply-otp-text b {
    color: var(--text-color);
}
#klix-apply-code {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 8px;
    text-align: center;
}
.klix-apply-otp-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 14px;
}
.klix-apply-otp-links a {
    color: var(--link-color);
    font-size: 14px;
    font-weight: 600;
}
.klix-apply-block-1 {
    padding: 0 12px;
    width: 62%;
}
.klix-apply-block-2 {
    padding: 0 12px;
    width: 38%;
}
.klix-apply-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--large-radius);
    padding: 20px;
}
.klix-apply-card-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}
.klix-apply-card-note {
    color: var(--muted-color);
    font-size: 13px;
    margin-bottom: 14px;
}
@media (max-width: 991px) {
    .klix-apply-block-1,
    .klix-apply-block-2 {
        width: 100%;
    }
    .klix-apply-block-2 {
        margin-top: 20px;
    }
}

/* ===== Ortaq komponentlər (tətbiqin ağ kartları, teqləri, çipləri) ===== */

.klix-panel {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--large-radius);
    margin-bottom: 15px;
    padding: 20px;
}
.klix-panel-title {
    font-size: 16px;
    font-weight: 700;
}
.klix-panel-note {
    color: var(--muted-color);
    font-size: 13px;
    line-height: 1.5;
    margin-top: 5px;
}
.klix-panel-title + .klix-form,
.klix-panel-note + div,
.klix-panel-note + .klix-form {
    margin-top: 15px;
}
.klix-panel-rows {
    padding: 5px 20px;
}
.klix-setting-row {
    align-items: center;
    border-top: 1px solid var(--line-color);
    color: var(--text-color);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 14px 0;
}
.klix-setting-row:first-child {
    border-top: 0;
}
.klix-setting-row:hover {
    color: var(--link-color);
}
.klix-setting-title,
.klix-setting-value {
    font-size: 16px;
    font-weight: 600;
}
.klix-setting-label {
    color: var(--muted-color);
    font-size: 14px;
}
.klix-panel-actions {
    display: flex;
    justify-content: center;
    padding: 10px 0 0;
}
.klix-danger-link {
    color: #B3261E;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
}
.klix-link-button {
    color: var(--link-color);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}
.klix-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}
.klix-block-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin-bottom: 16px;
}
.klix-field {
    margin-bottom: 18px;
}
.klix-field-value {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-weight: 600;
    padding: 14px 16px;
}
.klix-dashed-button {
    background: transparent;
    border: 1px dashed var(--grey-color);
    border-radius: var(--border-radius);
    color: var(--link-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    height: 50px;
    width: 100%;
}
.klix-dashed-button:hover {
    border-color: var(--main-color);
}
.klix-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.klix-chip,
.klix-pill {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    color: var(--text-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 32px;
    padding: 0 14px;
}
.klix-chip.active,
.klix-pill.active {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
}
.klix-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.klix-tag {
    border-radius: 6px;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    padding: 0 8px;
    white-space: nowrap;
}
.klix-tag-small {
    font-size: 11px;
    line-height: 18px;
}
.klix-tag-green {
    background: #E2F5E9;
    color: #15803D;
}
.klix-tag-blue {
    background: #E5EDFF;
    color: #2563EB;
}
.klix-tag-yellow {
    background: #FFC83D;
    color: #0B1B3A;
}
.klix-tag-red {
    background: #FBE7E4;
    color: #9B2C1F;
}
.klix-tag-grey {
    background: #EDF0F5;
    color: #5B6478;
}
.klix-avatar {
    align-items: center;
    background: #E5EDFF;
    border-radius: 999px;
    color: var(--main-color);
    display: flex;
    flex-shrink: 0;
    font-size: 17px;
    font-weight: 800;
    height: 48px;
    justify-content: center;
    overflow: hidden;
    width: 48px;
}
.klix-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.klix-avatar-large {
    font-size: 26px;
    height: 76px;
    width: 76px;
}
.klix-progress {
    background: var(--line-color);
    border-radius: 3px;
    height: 5px;
    overflow: hidden;
}
.klix-progress span {
    background: #1F9D55;
    display: block;
    height: 100%;
}
.klix-rows {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--large-radius);
    margin-bottom: 15px;
    padding: 0 20px;
}
.klix-row {
    align-items: center;
    border-top: 1px solid var(--line-color);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 15px 0;
}
.klix-row:first-child {
    border-top: 0;
}
.klix-row-main {
    min-width: 0;
}
.klix-row-top {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 3px;
}
.klix-row-number {
    color: var(--grey-color);
    font-size: 13px;
    font-weight: 600;
}
.klix-row-title {
    font-size: 16px;
    font-weight: 700;
}
.klix-row-meta {
    color: var(--muted-color);
    font-size: 14px;
    margin-top: 3px;
}
.klix-row-side {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}
.klix-open-request,
.klix-open-feed,
.klix-open-offer,
.klix-place-row {
    cursor: pointer;
}
.klix-row-arrow {
    border-right: 2px solid var(--grey-color);
    border-top: 2px solid var(--grey-color);
    display: block;
    height: 8px;
    transform: rotate(45deg);
    width: 8px;
}
.klix-empty,
.klix-loading-row {
    background: #fff;
    border: 1px dashed #C3CAD6;
    border-radius: var(--large-radius);
    color: var(--grey-color);
    margin-bottom: 15px;
    padding: 30px 20px;
    text-align: center;
}
.klix-empty-title {
    color: var(--text-color);
    font-size: 17px;
    font-weight: 700;
}
.klix-empty-note {
    color: var(--muted-color);
    font-size: 14px;
    line-height: 1.5;
    margin: 6px auto 0;
    max-width: 420px;
}
.klix-note-box {
    background: #FFF9E8;
    border-radius: var(--border-radius);
    color: #6B5400;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
    padding: 14px 16px;
}
.klix-warning-box {
    background: #FBE7E4;
    border-radius: var(--border-radius);
    color: #9B2C1F;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    padding: 14px 16px;
}
.klix-bullet-list,
.klix-check-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.klix-bullet-list li,
.klix-check-list li {
    color: var(--muted-color);
    font-size: 14px;
    line-height: 1.45;
    padding: 0 0 8px 20px;
    position: relative;
}
.klix-bullet-list li:before {
    background: var(--grey-color);
    border-radius: 50%;
    content: "";
    height: 5px;
    left: 4px;
    position: absolute;
    top: 8px;
    width: 5px;
}
.klix-check-list li:before {
    border-right: 2px solid #1F9D55;
    border-bottom: 2px solid #1F9D55;
    content: "";
    height: 10px;
    left: 2px;
    position: absolute;
    top: 3px;
    transform: rotate(45deg);
    width: 6px;
}
.klix-items-actions,
.klix-single-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}
.klix-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 15px;
}
.klix-filter-row select {
    width: auto;
}
.klix-bottom-bar {
    display: flex;
    gap: 10px;
    margin: 20px 0 0;
}
.klix-summary-row {
    border-top: 1px solid var(--line-color);
    display: flex;
    font-size: 15px;
    gap: 12px;
    justify-content: space-between;
    padding: 13px 0;
}
.klix-summary-row:first-child {
    border-top: 0;
}
.klix-summary-row span {
    color: var(--muted-color);
}
.klix-single-head {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--large-radius);
    margin-bottom: 15px;
    padding: 20px;
}
.klix-back-button {
    background: var(--bg-color);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    height: 40px;
    margin-bottom: 14px;
    position: relative;
    width: 40px;
}
.klix-back-button:before {
    border-left: 2px solid var(--text-color);
    border-bottom: 2px solid var(--text-color);
    content: "";
    height: 9px;
    left: 16px;
    position: absolute;
    top: 15px;
    transform: rotate(45deg);
    width: 9px;
}
.klix-single-sub {
    color: var(--muted-color);
    font-size: 14px;
    font-weight: 600;
}
.klix-single-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.56px;
    margin: 4px 0 6px;
}
.klix-single-meta,
.klix-single-note {
    color: var(--muted-color);
    font-size: 14px;
    line-height: 1.5;
}
.klix-single-status {
    margin-top: 12px;
}
.klix-single-facts {
    display: flex;
    flex-wrap: wrap;
    margin: 14px -8px -10px;
}
.klix-fact {
    padding: 0 8px 10px;
    width: 25%;
}
.klix-fact-label {
    color: var(--muted-color);
    font-size: 13px;
}
.klix-fact-value {
    font-size: 16px;
    font-weight: 600;
    margin-top: 2px;
}
@media (max-width: 575px) {
    .klix-fact {
        width: 50%;
    }
    .klix-single-title {
        font-size: 24px;
    }
}

/* ===== Modal (tətbiqin bottom sheet-inin sayt qarşılığı) ===== */

.klix-modal-wrap {
    align-items: center;
    background: rgba(11, 27, 58, .55);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    overflow-y: auto;
    padding: 20px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1100;
}
.klix-modal-open {
    overflow: hidden;
}
.klix-modal {
    background: #fff;
    border-radius: 24px;
    margin: auto;
    max-width: 520px;
    padding: 24px;
    width: 100%;
}
.klix-modal-wide {
    max-width: 760px;
}
.klix-modal-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 16px;
}
.klix-modal-title {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.25;
}
.klix-modal-close {
    background: var(--bg-color);
    border: 0;
    border-radius: 999px;
    color: var(--text-color);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 22px;
    height: 34px;
    line-height: 1;
    width: 34px;
}
.klix-modal-text {
    color: var(--muted-color);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 14px;
}
.klix-modal-amount {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 14px;
}
.klix-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.klix-modal-actions .button {
    flex: 1;
}
.klix-modal-side {
    padding-top: 6px;
    text-align: center;
}
.klix-modal-result:not(:empty) {
    margin-top: 14px;
}
.klix-danger-button,
.button.klix-danger-button {
    background-color: #B3261E;
    border-color: #B3261E;
    color: #fff;
}
.klix-danger-button:hover,
.button.klix-danger-button:hover {
    background-color: #8F1E17;
    border-color: #8F1E17;
    color: #fff;
}
.klix-stars {
    display: flex;
    gap: 6px;
    justify-content: center;
}
.klix-star {
    background: transparent;
    border: 0;
    color: var(--border-color);
    cursor: pointer;
    font-size: 40px;
    line-height: 1;
    padding: 0;
}
.klix-star.active {
    color: #F2B705;
}
.klix-stars-word {
    font-size: 17px;
    font-weight: 700;
    margin: 14px 0;
    text-align: center;
}
.klix-modal .klix-pills {
    justify-content: center;
    margin-bottom: 16px;
}

/* ===== Hesab başlığı (kabinet və satıcı paneli) ===== */

.klix-account-top {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
}
.klix-account-identity {
    align-items: center;
    display: flex;
    gap: 14px;
    min-width: 0;
}
.klix-account-name {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.3px;
}
.klix-account-meta {
    align-items: center;
    color: var(--muted-color);
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    gap: 8px;
    margin-top: 3px;
}
.klix-alert-box {
    background: #FFF3D6;
    border-radius: var(--large-radius);
    margin-top: 20px;
    padding: 18px 20px;
}
.klix-alert-title {
    font-size: 16px;
    font-weight: 700;
}
.klix-alert-text {
    color: #6B5400;
    font-size: 14px;
    line-height: 1.5;
    margin: 4px 0 12px;
}
.klix-pane-head {
    align-items: baseline;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 16px;
}
.klix-pane-title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.6px;
}
@media (max-width: 575px) {
    .klix-pane-title {
        font-size: 24px;
    }
    .klix-account-actions {
        width: 100%;
    }
    .klix-account-actions .button {
        width: 100%;
    }
}
.klix-photo-row {
    align-items: center;
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
}
.klix-photo-title {
    font-size: 15px;
    font-weight: 700;
}
.klix-photo-links {
    display: flex;
    gap: 16px;
    margin-top: 4px;
}
.klix-photo-name {
    color: var(--muted-color);
    font-size: 13px;
    margin-top: 4px;
}
.klix-profile-static {
    background: var(--bg-color);
    border-radius: var(--border-radius);
    margin: 14px 0;
    padding: 14px 16px;
}
.klix-profile-static-row {
    display: flex;
    font-size: 14px;
    gap: 12px;
    justify-content: space-between;
    padding: 5px 0;
}
.klix-profile-static-row span {
    color: var(--muted-color);
}

/* ===== Yeni sorğu: addım zolağı, kateqoriya kartları, məhsul sətirləri ===== */

.klix-stepbar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.klix-stepbar-item {
    align-items: center;
    background: transparent;
    border: 0;
    border-top: 3px solid var(--border-color);
    color: var(--muted-color);
    cursor: default;
    display: flex;
    flex: 1;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    padding: 10px 0 0;
    text-align: left;
}
.klix-stepbar-item.done {
    border-top-color: var(--main-color);
    cursor: pointer;
}
.klix-stepbar-item.active {
    border-top-color: var(--main-color);
    color: var(--text-color);
}
.klix-stepbar-number {
    align-items: center;
    background: var(--light-color);
    border-radius: 999px;
    display: flex;
    flex-shrink: 0;
    height: 24px;
    justify-content: center;
    width: 24px;
}
.klix-stepbar-item.active .klix-stepbar-number,
.klix-stepbar-item.done .klix-stepbar-number {
    background: var(--main-color);
    color: #fff;
}
@media (max-width: 575px) {
    .klix-stepbar-label {
        display: none;
    }
}
.klix-create-step {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--large-radius);
    margin-bottom: 15px;
    padding: 20px;
}
.klix-create-nav {
    display: flex;
    gap: 10px;
}
.klix-create-nav .button {
    flex: 1;
}
.klix-cat-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px -10px;
}
.klix-cat-tile {
    align-items: center;
    background: var(--bg-color);
    border: 1px solid transparent;
    border-radius: var(--card-radius);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-family: inherit;
    gap: 8px;
    justify-content: center;
    margin: 0 5px 10px;
    min-height: 92px;
    padding: 14px;
    text-align: center;
    width: calc(25% - 10px);
}
.klix-cat-tile.active {
    background: #E5EDFF;
    border-color: var(--main-color);
}
.klix-cat-image {
    display: block;
    width: 32px;
}
.klix-cat-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}
.klix-cat-mixed {
    width: calc(100% - 10px);
}
.klix-cat-note {
    color: var(--muted-color);
    font-size: 13px;
}
.klix-cat-refine {
    margin-top: 20px;
}
@media (max-width: 991px) {
    .klix-cat-tile {
        width: calc(33.333% - 10px);
    }
}
@media (max-width: 575px) {
    .klix-cat-tile {
        width: calc(50% - 10px);
    }
}
.klix-items {
    margin-bottom: 12px;
}
.klix-item-row {
    align-items: center;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px;
}
.klix-item-fields {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}
.klix-item-row input,
.klix-item-row select {
    background: var(--bg-color);
    border-color: transparent;
    height: 46px;
    line-height: 46px;
}
.klix-item-row .klix-item-name {
    flex: 1 1 220px;
    width: auto;
}
.klix-item-row .klix-item-quantity {
    width: 90px;
}
.klix-item-row .klix-item-unit {
    width: 120px;
}
.klix-item-row .klix-item-note {
    flex: 1 1 180px;
    width: auto;
}
.klix-item-remove {
    background: #FBE7E4;
    border: 0;
    border-radius: 12px;
    color: #9B2C1F;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 18px;
    height: 46px;
    width: 46px;
}
@media (max-width: 575px) {
    .klix-item-row .klix-item-quantity,
    .klix-item-row .klix-item-unit {
        flex: 1 1 80px;
        width: auto;
    }
}
.klix-days {
    display: flex;
    gap: 10px;
    max-width: 420px;
}
.klix-day {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-color);
    cursor: pointer;
    flex: 1;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    height: 46px;
}
.klix-day.active {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
}
.klix-address-empty {
    color: var(--muted-color);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
}

/* ===== Müqayisə: təklif kartları ===== */

.klix-offer-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--large-radius);
    cursor: pointer;
    margin-bottom: 14px;
    padding: 20px;
}
.klix-offer-card.active {
    border-color: #1F9D55;
    box-shadow: 0 0 0 1px #1F9D55;
}
.klix-offer-head {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}
.klix-offer-identity {
    flex: 1;
    min-width: 0;
}
.klix-offer-name {
    font-size: 16px;
    font-weight: 600;
}
.klix-offer-note {
    color: var(--muted-color);
    font-size: 14px;
    margin-top: 2px;
}
.klix-offer-amount {
    align-items: baseline;
    display: flex;
    font-size: 24px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}
.klix-offer-amount span {
    color: var(--muted-color);
    font-size: 15px;
    font-weight: 400;
}
.klix-offer-positions {
    margin-left: auto;
    text-align: right;
}
.klix-offer-positions.klix-low {
    color: #B3261E;
}
.klix-offer-company {
    background: #E2F5E9;
    border-radius: var(--border-radius);
    color: #15803D;
    font-size: 14px;
    margin-top: 14px;
    padding: 12px 14px;
}
.klix-offer-company-name {
    font-size: 15px;
    font-weight: 700;
}
.klix-offer-company-note {
    line-height: 1.45;
    margin-top: 6px;
}
.klix-offer-seller-note {
    color: var(--muted-color);
    font-size: 14px;
    line-height: 1.5;
    margin-top: 12px;
}
.klix-offer-card .button {
    margin-top: 14px;
    width: 100%;
}

/* ===== Təklif forması (satıcı) ===== */

.klix-offer-form {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--large-radius);
    margin-bottom: 15px;
    padding: 20px;
}
.klix-offer-table input {
    height: 46px;
    line-height: 46px;
    min-width: 90px;
}
.klix-offer-summary {
    background: var(--bg-color);
    border-radius: var(--border-radius);
    color: var(--muted-color);
    font-size: 14px;
    margin: 15px 0;
    padding: 12px 14px;
}
.klix-validity {
    align-items: center;
    display: flex;
    gap: 8px;
}
.klix-validity input {
    width: 90px;
}
.klix-upload-errors {
    margin: 10px 0;
}
.klix-upload-error {
    background: #FFF3D6;
    border-radius: 10px;
    color: #8A5A00;
    font-size: 13px;
    margin-bottom: 6px;
    padding: 9px 12px;
}
.klix-upload-result:not(:empty) {
    margin-top: 15px;
}

/* ===== Satıcı paneli: onlayn kartı, göstərici zolağı ===== */

.klix-strip {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--large-radius);
    display: flex;
    flex-wrap: wrap;
    margin: 18px 0;
}
.klix-strip-item {
    border-left: 1px solid var(--line-color);
    flex: 1 1 120px;
    padding: 14px 18px;
}
.klix-strip-item:first-child {
    border-left: 0;
}
.klix-strip-value {
    font-size: 22px;
    font-weight: 700;
}
.klix-strip-label {
    color: var(--muted-color);
    font-size: 13px;
    margin-top: 2px;
}
.klix-online-card {
    align-items: center;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    transition: .2s all;
}
.klix-online-card.active {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
}
.klix-online-dot {
    background: var(--grey-color);
    border-radius: 50%;
    flex-shrink: 0;
    height: 10px;
    width: 10px;
}
.klix-online-card.active .klix-online-dot {
    background: #5EE08F;
    box-shadow: 0 0 8px rgba(94, 224, 143, .6);
}
.klix-online-details {
    flex: 1;
    min-width: 0;
}
.klix-online-title {
    font-size: 16px;
    font-weight: 700;
}
.klix-online-note {
    color: var(--muted-color);
    font-size: 13px;
    margin-top: 2px;
}
.klix-online-card.active .klix-online-note {
    color: rgba(255, 255, 255, .75);
}
.klix-switch {
    background: var(--light-color);
    border-radius: 14px;
    flex-shrink: 0;
    height: 28px;
    padding: 3px;
    position: relative;
    width: 48px;
}
.klix-switch:after {
    background: #fff;
    border-radius: 50%;
    content: "";
    height: 22px;
    left: 3px;
    position: absolute;
    top: 3px;
    transition: .2s left;
    width: 22px;
}
.klix-online-card.active .klix-switch {
    background: #1F9D55;
}
.klix-online-card.active .klix-switch:after {
    left: 23px;
}

/* ===== Statistika (satıcı) ===== */

.klix-stats-summary {
    background: #0B1B3A;
    border-radius: 24px;
    color: #fff;
    margin-bottom: 15px;
    padding: 24px;
}
.klix-stats-summary-top {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
}
.klix-stats-summary-label {
    color: rgba(255, 255, 255, .7);
    font-size: 15px;
}
.klix-stats-summary-value {
    font-size: 50px;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1;
}
.klix-stats-delta {
    color: #5EE08F;
    font-size: 15px;
    font-weight: 600;
}
.klix-stats-delta-down {
    color: #F2A59B;
}
.klix-stats-summary-cells {
    border-top: 1px solid rgba(255, 255, 255, .15);
    display: flex;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 18px;
}
.klix-stats-summary-cells div {
    flex: 1 1 100px;
}
.klix-stats-summary-cells strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
}
.klix-stats-summary-cells span {
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
}
.klix-chart {
    align-items: flex-end;
    display: flex;
    gap: 10px;
    margin-top: 15px;
    min-height: 130px;
}
.klix-chart-column {
    flex: 1 1 0;
    max-width: 80px;
    text-align: center;
}
.klix-chart-bar {
    background: #D5E3FC;
    border-radius: 8px;
}
.klix-chart-bar.active {
    background: var(--link-color);
}
.klix-chart-label {
    color: var(--muted-color);
    font-size: 12px;
    font-weight: 600;
    margin-top: 6px;
}
.klix-category-row {
    border-top: 1px solid var(--line-color);
    padding: 14px 0;
}
.klix-category-row:first-child {
    border-top: 0;
}
.klix-category-top {
    display: flex;
    font-size: 15px;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 7px;
}

/* ===== Qalib seçildiniz (satıcı) ===== */

.klix-won-hero {
    background: #1F9D55;
    border-radius: 28px;
    color: #fff;
    margin-bottom: 15px;
    padding: 24px;
}
.klix-won-hero .klix-back-button {
    background: rgba(255, 255, 255, .2);
}
.klix-won-hero .klix-back-button:before {
    border-color: #fff;
}
.klix-won-title {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.64px;
    line-height: 1.1;
}
.klix-won-sub {
    font-size: 16px;
    margin-top: 14px;
}
.klix-won-amount {
    font-size: 34px;
    font-weight: 700;
    margin-top: 14px;
}
.klix-contact-identity {
    align-items: center;
    display: flex;
    gap: 14px;
    margin: 15px 0;
}
.klix-contact-name {
    font-size: 18px;
    font-weight: 700;
}
.klix-contact-phone {
    font-size: 16px;
    font-weight: 500;
    margin-top: 2px;
}

/* ===== Bildirişlər ===== */

.klix-notify-group {
    padding: 5px 20px;
}
.klix-notify-day {
    color: var(--grey-color);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 14px 0 4px;
    text-transform: uppercase;
}
.klix-notify-item {
    border-top: 1px solid var(--line-color);
    padding: 14px 0;
}
.klix-notify-item:first-of-type {
    border-top: 0;
}
.klix-notify-link {
    cursor: pointer;
}
.klix-notify-title {
    font-size: 16px;
    font-weight: 700;
}
.klix-notify-text {
    color: var(--muted-color);
    font-size: 14px;
    line-height: 1.5;
    margin-top: 3px;
}
.klix-notify-date {
    color: var(--grey-color);
    font-size: 13px;
    margin-top: 5px;
}

/* ===== Giriş qapısı, əlaqə, mətn səhifələri ===== */

.klix-gate-text {
    color: var(--muted-color);
    margin: 0 auto 22px;
    max-width: 520px;
    text-align: center;
}
.klix-gate-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.klix-contact-block-1 {
    padding: 0 12px;
    width: 60%;
}
.klix-contact-block-2 {
    padding: 0 12px;
    width: 40%;
}
.klix-whatsapp-button {
    align-items: center;
    background: #25D366;
    border-radius: var(--border-radius);
    color: #fff;
    display: flex;
    font-size: 16px;
    font-weight: 700;
    height: 52px;
    justify-content: center;
    margin-bottom: 15px;
}
.klix-whatsapp-button:hover {
    background: #1EBE5B;
    color: #fff;
}
@media (max-width: 991px) {
    .klix-contact-block-1,
    .klix-contact-block-2 {
        width: 100%;
    }
    .klix-contact-block-2 {
        margin-bottom: 20px;
        order: -1;
    }
}
/* ===== ms-icon (SVG dəsti, CSS mask) ===== */
.ms-icon {
    background-color: currentColor;
    display: inline-block;
    height: 1em;
    -webkit-mask: var(--ms-icon) center / contain no-repeat;
            mask: var(--ms-icon) center / contain no-repeat;
    width: 1em;
}
.ms-icon-eye { --ms-icon: url(/uploads/icons/eye.svg?v=2); }
.ms-icon-eye-off { --ms-icon: url(/uploads/icons/eye-off.svg?v=2); }

/* ===== Parol sahəsi: göstər / gizlət düyməsi (master.js → initPasswordToggle) ===== */
.password-field {
    position: relative;
}
.password-field input {
    padding-right: 48px;
}
.password-toggle {
    align-items: center;
    background-color: transparent;
    border: 0;
    bottom: 0;
    color: var(--muted-color);
    cursor: pointer;
    display: flex;
    font-size: 20px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
}
.password-toggle:hover {
    color: var(--text-color);
}
.password-toggle .ms-icon-eye-off,
.password-toggle.is-visible .ms-icon-eye {
    display: none;
}
.password-toggle.is-visible .ms-icon-eye-off {
    display: inline-block;
}