@import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

.alert-danger,
.alert-success {
    display: none
}

.mob_banner {
    display: none
}

.mob_header {
    display: none
}

.mob_navbar {
    display: none
}

.drawableMenu {
    display: none
}

.mob_view {
    display: none
}

.com-owerlay-container {
    display: none
}

.homeScreen {
    display: none;
}

.bottomNavigation {
    display: none
}

.mob_logo {
    display: none
}

.categories {
    display: none
}

.categories_list {
    display: none
}



.socialSection {
    position: fixed;
    right: 10px;
    height: 320px;
    width: 65px;
    top: 60%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

span#share_btn {
    width: 55px;
    height: 55px;
    background: #fff;
    line-height: 55px;
    border-radius: 50%;
    box-shadow: 0 0 8px #dcdcdc;
    text-align: center;
    font-size: 17px;
    color: #6dcff6;
}

.listSocialLink {
    width: 55px;
    background: white;
    margin-bottom: 15px;
    border-radius: 35px;
    box-shadow: 0 0 8px #dcdcdc;
    position: relative;
}

.listSocialLink ul {
    padding: 0;
    margin: 0;
}

.listSocialLink li {
    list-style: none;
    width: 100%;
    height: 55px;
    line-height: 55px;
    text-align: center;
    font-size: 18px;
    border-bottom: 1px solid rgb(187, 187, 187)
}

.listSocialLink li:last-child {
    border: none;
}

.listSocialLink li a {
    display: block;
    transition: .2s;
    text-decoration: none;

}

.listSocialLink li:hover a {
    transform: scale(1.3);
    transition: .2s;
}

.listSocialLink li:nth-child(1) a {
    color: #38c;
}

.listSocialLink li:nth-child(2) a {
    color: rgb(250, 9, 190);
}

.listSocialLink li:nth-child(3) a {
    color: red;
}

.listSocialLink:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: white;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    z-index: 1;
    box-shadow: 4px 4px 6px #efefef;
}

.rotates {
    cursor: pointer;
    position: absolute;
    z-index: 999;
}
@media (width >= 48rem) {
    .md\:p-6 {
        padding: calc(var(--spacing) * 6) !important;
    }
}
@media (width >= 64rem) {
    .lg\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}
.max-w-\[1400px\].mx-auto.px-4.-mt-16.md\:-mt-20.relative.z-10 {
    margin-top: 2rem;
}
:root {
    --backgroundcolor: #6dcff6;
}

div#dropdown-menu {
    background: #fff;
    border-radius: 6px;
    border: 1px solid #ddd;
    position: absolute;
    top: 43px;
    overflow: hidden;
    left: -100px;
    display: none;
}

#dropdown-menu.open_dropdown {
    display: block;
}

a.dropdownitem {
    display: block;
    padding: 10px;
    color: #555;
    width: 175px;
}

a.dropdownitem:hover {
    text-decoration: none;
    background: #ddd;
}

.dc_top_header {
    height: 90px;
    background: #fff;
    max-width: 1140px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

.header_content {
    display: flex;
    margin: auto;

}

.d_1 {

    height: 90px;
}

.d_logo {
    /*flex: 1;*/
    width: 280px;
    position: relative;
}

.d_src {
    flex: 2
}


.menuHeader {
    height: 50px;
    background: var(--backgroundcolor);
    margin-bottom: 15px;
}

a.d_btn {
    display: inline-block;
    padding: 10px;
    width: 120px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    margin-top: 25px;
    margin-right: 10px;

}

a.d_btn:last-child {
    margin-right: 0;
}

a.d_btn.add_shop {
    background: #56ed56;
    box-shadow: 0 0 8px #999;
    transition: .2s;
}

a.d_btn.add_shop:hover {
    background: #43d443;
    color: #fff;
    text-decoration: none;
    transition: .2s;
}

a.d_btn.add_model {
    background: #6dcff6;
    box-shadow: 0 0 8px #999;
    transition: .2s;
}

a.d_btn.add_model:hover {
    background: #52b6de;
    color: #fff;
    text-decoration: none;
    transition: .2s;
}

a.d_btn.button_login {
    background: #494949;
    box-shadow: 0 0 8px #999;
    transition: .2s;
}

a.d_btn.button_login:hover {
    background: #5f5e5e;
    color: #fff;
    text-decoration: none;
    transition: .2s;
}

div#searchBox {
    margin-right: 20px;
    margin-top: 27px;
    position: relative;
    z-index: 99;
}

div#searchBox input {
    padding: 7px;
    width: 100%;
    border-radius: 20px;
    border: 1px solid #ddd;
    outline: none;
    padding-left: 10px;
}

.leftCategory {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    transition: .3s;
}

.leftCategory ul {
    padding: 0;
    margin: 0;
    margin-top: 175%;
}

.leftCategory ul>li {
    display: block;
    width: 50px;
    height: 50px;
    background: #fff;
    box-shadow: 0 0 6px #ddd;
    margin: 11px;
    text-align: center;
    line-height: 50px;
    border-radius: 4px;
    position: relative;
}

.leftCategory li>a {
    font-size: 15px;
    color: #444;
    text-decoration: none;
    display: block;
}

.leftCategory li>a:hover {
    text-decoration: none;
    color: #fff;
}

.leftCategory li:hover {
    background: #6dcff6;
    color: #fff;
}

.leftCategory.floating_nav.bottom {
    opacity: 0;
    display: none;
}



.tooltip-inner {
    color: #FFFFFF;
    padding: 5px;
    font-size: 20px;
}


.sliderBox {
    width: 1140px;
    margin: 10px auto;
}

.leftCategory.floating_nav {
    position: fixed;
    top: 190px;
    transition: .3s;
}

.sliderBox img {
    width: 100%;
}

.logoProfile {
    background: #fff;
    width: 115px;
    height: 115px;
    border-radius: 50%;
}

#home_container {
    padding-left: 0px;
    padding-right: 0px;
    min-height: 900px;
}

.menuSide {
    width: 880px;
    margin: auto;
    height: 50px;
}

.menuSide ul {
    padding: 0;
    margin: 0;
}

.menuSide li {
    float: left;
    height: 50px;
    line-height: 50px;
    padding-left: 10px;
    padding-right: 10px;
    list-style: none;
}

.menuSide li a {
    color: #fff;
    text-decoration: none;
}

#logoTitle {
    padding: 0;
    margin: 0;
    position: absolute;
    margin-left: -10px;
}

#logoTitle li {
    float: left;
    list-style: none;
    line-height: 90px;
    font-size: 35px;
    font-weight: 600;
    color: #002556;
}

#logoTitle li:nth-child(1) {
    color: #cb9036;
}

#logoTitle li:nth-child(3) {
    color: #cb9036;
}

#logoTitle li:nth-child(4) {
    color: #cb9036;
}

#logoTitle li:nth-child(2) {
    font-size: 105px;
    margin-top: 19px;
    color: #cb9036;
    font-weight: 500;
    position: relative;
}


#pentagon {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 69% 75%, 33% 76%, 0% 30%);
    background: #cb9036;
    position: absolute;
    width: 26px;
    height: 26px;
    left: 50%;
    transform: translateX(-50%);
    top: -10px;
}


#pentagon_tr {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 69% 75%, 33% 76%, 0% 30%);
    background: white;
    position: absolute;
    width: 15px;
    height: 15px;
    left: 50%;
    transform: translateX(-50%);
    top: -6px;
}

small#d_t {
    position: absolute;
    top: 60px;
    right: 14px;
    font-size: 15px;
}






.centerMenu {
    width: 100%;
    background: #fff;
    min-height: 200px;
    box-shadow: inset 1px 0px 0px #f1f1f1;

}

.dcb-Menu li:hover .centerMenu {
    flex: 1;
    display: block;
}

.homeFilter {
    background: #fbfbfb;
    padding: 10px;
    width: 1140px;
    margin: auto;
}






















#myProgress {
    vertical-align: baseline;
    position: absolute;
    top: 90%;
    left: 0;
}

#loaderSpan {
    width: 30px;
    margin-left: 20px;
    position: absolute;
    margin-top: 5px;
    display: none
}

.vidId {
    height: 220px;
    width: 100%;
    object-fit: cover;
    transform: scale(1.1)
}

.second {
    display: none
}

#playVideo {
    border: none;
    position: absolute;
    z-index: 9;
    font-size: 25px;
    color: #fff;
    background: none;
    right: 10px;
}

#stopVideo {
    border: none;
    position: absolute;
    z-index: 9;
    font-size: 25px;
    color: #fff;
    background: none;
    right: 10px;
}


.error {
    color: red;
    font-style: italic
}

#cn_alert {
    position: absolute;
    left: 0;
    top: 105%;
    font-size: 14px;
    color: red;
    font-style: italic;
}

div#myDropzone {
    width: 100%;
    margin-top: 10px;
}


#dcb_tables td {
    position: relative;
}

#dcb_tables td b {
    margin-left: 10px;
    color: #666;
    display: block;
    margin-top: 5px;
}

#dcb_tables tr {
    height: 55px;
}

#down_arrow {
    position: absolute;
    top: 18px;
    right: 10px;
    pointer-events: none;
}

#screen_td input {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #ced4da;
    padding: 4px;
    width: 98px;
    border-radius: 4px;
}

#screen_td input:nth-child(3) {
    width: 259px;
}

#screen_td input:nth-child(5) {
    width: 120px;
}


#screen_td select {
    border: 1px solid #ced4da;
    padding: 4px;
    border-radius: 4px;
    width: 180px;
    color: #777;
}

#select_br_color {
    position: relative;
    width: 180px;
    display: inline-block;
}


#select_br_color #down_arrow {
    top: 6px;
    color: #777;
}

.formcontrol {
    border: 1px solid #ced4da;
    padding: 5px;
    border-radius: 4px;
    width: 180px;
}


#r-1,
#r-2 {
    display: none;
}

#lr_1,
#lr_2 {
    border: 1px solid #ced4da;
    float: right;
    width: 47px;
    text-align: center;
    padding: 5px;
}

#lr_1 {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer;
    border-left: none;
}

#lr_2 {
    border-right: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    cursor: pointer;
}


#r-1:checked+#lr_1 {
    background-color: #34c8c8;
    border-color: #34c8c8;
    color: #fff;
    box-shadow: inset 1px 0px 5px #118484;
    font-weight: bold
}

#r-2:checked+#lr_2 {
    background-color: #34c8c8;
    border-color: #34c8c8;
    color: #fff;
    box-shadow: inset 1px 0px 5px #118484;
    font-weight: bold
}


.returns {
    width: 185px;
    float: left;
}

.returns span {
    display: block;
    text-align: center;
    margin-bottom: 10px;
}

/* #rtn_1,
#rtn_2 {
    display: none;
} */

#l_rtn_1,
#l_rtn_2 {
    border: 1px solid #999;
    float: left;
    width: 90px;
    padding: 6px;
    text-align: center;
}

#l_rtn_1 {
    border-right: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

#l_rtn_2 {
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}


#rtn_1:checked+#l_rtn_1,
#rtn_2:checked+#l_rtn_2 {
    background: #34c8c8;
    color: #fff;
    border: 1px solid #34c8c8;
    font-weight: bold;
    box-shadow: inset 1px 0px 5px #118484;
}



.status {
    width: 185px;
    float: right;
}

.status span {
    display: block;
    text-align: center;
    margin-bottom: 10px;
}

/* #sts_1,
#sts_2 {
    display: none;
} */

#l_sts_1,
#l_sts_2 {
    border: 1px solid #999;
    float: left;
    width: 90px;
    padding: 6px;
    text-align: center;
}

#l_sts_1 {
    border-right: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

#l_sts_2 {
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}


#sts_1:checked+#l_sts_1,
#sts_2:checked+#l_sts_2 {
    background: #34c8c8;
    color: #fff;
    border: 1px solid #34c8c8;
    font-weight: bold;
    box-shadow: inset 1px 0px 5px #118484;
}

#pr_table tr {
    height: 55px;
}

#pr_table td b {
    margin-left: 10px;
    margin-right: -13px;
    color: #666;
}

#pr_table .form-control {
    width: 98%;
}

#pr_table #adress_delivery {
    height: 10px;
}

#pr_table #adress_delivery a {
    color: #34c8c8;
    font-size: 13px;
    cursor: pointer;
}

/* .extraLink {
    margin-left: 150px;
} */


#pr_table #adress_delivery a:hover {
    color: blue;
}

#adress_delivery td {
    position: relative;
}


.formText {
    border-radius: 4px;
    border: 1px solid #ced4de;
    margin-top: 10px;
    width: 98%;
    padding-left: 5px;
    padding-top: 5px;
    resize: none;
}



#for_br {
    display: none
}

#sts_rtn {
    display: none
}

#ct_title {
    display: none
}

#gb_dc_title {
    display: none
}

#gb_desc {
    display: none
}

#gb_eyar {
    display: none
}

#tb_adress {
    display: none
}


#del_1,
#del_2,
#del_3 {
    display: none
}

#l_del_1,
#l_del_2,
#l_del_3 {
    border: 1px solid #ddd;
    float: left;
    width: 100px;
    text-align: center;
    margin-top: 20px;
}

#l_del_2 {
    border-left: none;
}

#l_del_1 {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

#l_del_3 {
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

#del_1:checked+#l_del_1,
#del_2:checked+#l_del_2,
#del_3:checked+#l_del_3 {
    background: #ffe300;
    color: #444;
    border: 1px solid #ffe300;
}

#pr_table #down_arrow {
    right: 20px;
}


















#btn_remove {
    float: right;
    margin-top: 9px;
    margin-right: 10px;
    background: #38c;
    color: #fff;
    width: 100px;
    padding: 7px;
    border-radius: 4px;
    text-align: center;
}

.fw_list {
    width: 100%;
}

.fw_list ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.fw_list li {
    width: 100%;
    display: block;
    overflow: auto;
    margin-bottom: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
}

.fw_list li a {
    float: right;
    display: inline-block;
    margin: 7px;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    margin-top: 10px;
    padding: 6px;
}

.fw_list li #fw-profile {
    width: 50px;
    height: 50px;
    background: #ddd;
    border-radius: 50%;
    float: left;
    margin-right: 15px;
    box-shadow: 3px 0 4px #999;
    overflow: hidden;
}

.fw_list li #fw-title {
    float: left;
    margin-top: 15px;
}

#fw-profile img {
    width: 100%;
}

#winoblojka {
    height: 300px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    position: relative;
}

#load-more {
    cursor: pointer;
}

.nav-pills li a.active {
    border-bottom: 2px solid #fff;
}

.nav-pills li a {
    padding-bottom: 5px;
}

#pills-model .col-md-3,
#pills-sale .col-md-3,
#pills-ozel .col-md-3 {
    flex: 0 0 25%;
    max-width: 33%;
    margin-left: 0;
}

.shopPagination {
    width: 100%;
    display: flex;
    justify-content: center;
}

.sticky {
    position: sticky;
    top: 30px;
}

#fotooblojka {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(54 87 93 / 50%);
    border-radius: 10px;
    top: 0;
    left: 0;
}


.obloj_tabMenu {
    position: absolute;
    bottom: 10px;
    left: 50%;
    height: 50px;
    transform: translateX(-50%);
}

.obloj_tabMenu ul {
    padding: 0;
    margin: 0;
}

.obloj_tabMenu ul li {
    list-style: none;
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
}

.obloj_tabMenu ul li span {
    display: block;
    font-weight: 600;
}

.obloj_tabMenu li>a {
    color: #fff;
    text-decoration: none;
}












#vidId {
    height: 220px;
    width: 245px;
    object-fit: cover;
    transform: scale(1.1);
}

#videoShow {
    height: 100px;
    width: 100%;
    object-fit: cover;
    transform: scale(1.1);
}

#videoBack {
    width: 100%;
    height: inherit;
    object-fit: scale-down;
    position: absolute;
}






.shopForm {
    padding: 15px;
    background: #fff;
    box-shadow: 0 0 4px #888;
    border-radius: 7px;
    padding-left: 20px;
    padding-right: 20px;
    width: 900px;
    margin: 20px auto;
    height: auto;
    display: flex;
}

.shopForm fieldset {
    border-radius: 10px;
}

.shopForm legend {
    font-weight: 600;
}

.addshop.shop-left h4 {
    text-align: center;
    font-weight: 600;
    color: #34c8c8;
    padding-bottom: 10px;
    position: relative;
}

.btn.btn-succs {
    background: linear-gradient(0deg, #34c8c8 50%, #42d7d7 51%);
    color: #fff;
    margin: 20px 15px;

}

.btn.btn-succs:hover {
    color: #fff;
    box-shadow: 0 5px 6px #999;
}

.alert.alertdanger {
    background: #f7a6a65e;
    margin-left: 15px;
    display: none;
}

.alert.alertsuccess {
    background: #82f9826e;
    margin-left: 15px;
    display: none;
}

.loadingShop {
    margin-right: 47px;
    margin-top: 15px;
    position: absolute;
    top: 13px;
    left: 40%;
    display: none;
}

.loadingShop img {
    width: 63%;
}

.addshop.shop-left h4:before {
    content: '';
    position: absolute;
    width: 10%;
    height: 2px;
    background: #148888;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.shopForm form {
    width: 95%;
    margin-left: 15px;
    margin-right: 15px
}

.shopForm input {
    padding-left: 35px
}

.shopForm select {
    padding-left: 35px
}

.pageUser {
    flex: 1;
}

.pageShop {
    flex: 1;
}

#shopImageLogo {
    display: none
}

#shopImageScreen {
    display: none
}

#upShopLogo {
    border: 1px dashed #ffc107;
    width: 90px;
    display: block;
    text-align: center;
    font-size: 16px;
    color: #777;
    cursor: pointer;
    height: 90px;
    border-radius: 50%;
    box-shadow: 0 5px 8px #999;
    background: #fff;
    z-index: 99;
    position: absolute;
    margin-top: -40px;
    margin-left: 10px;
    padding-top: 20px;
}

#upShopScreen {
    border: 1px dashed #ffc107;
    width: 300px;
    display: block;
    height: 155px;
    text-align: center;
    font-size: 17px;
    color: #777;
    cursor: pointer;
    border-radius: 12px;
    padding-top: 50px;
    margin: 45px auto;
}

.upImage {
    width: 90px;
    position: absolute;
    display: none;
    height: 90px;
    border-radius: 50%;
    margin-top: -40px;
    margin-left: 10px;
    box-shadow: 4px 3px 8px #888;
}

.upImage img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
}

#removePath {
    height: 30px;
    display: block;
    line-height: 26px;
    position: absolute;
    top: 0;
    background: #fff;
    border: 2px solid #555;
    border-radius: 50%;
    width: 30px;
    text-align: center;
    right: -4px;
    color: red;
}

#removePathScreen {
    height: 30px;
    display: block;
    line-height: 26px;
    position: absolute;
    top: -13px;
    background: #fff;
    border: 2px solid #555;
    border-radius: 50%;
    width: 30px;
    text-align: center;
    right: 40px;
    color: red;
}

.upShopScreen img {
    width: 300px;
    height: 155px;
    border-radius: 10px;
    object-fit: cover
}

.upShopScreen {
    width: 300px;
    display: none;
    height: 155px;
    text-align: center;
    line-height: 142px;
    font-size: 20px;
    color: #777;
    border-radius: 12px;
    margin: 45px auto;
}









.gb-comment {
    margin-right: 10px;
}

#commentList {
    padding: 0;
    margin: 0;
}

#commentList li {
    list-style-type: circle;
    margin-left: 20px;
    font-size: 13px;
}

#commentList li.uploader {
    margin-left: 70px;
    margin-right: 33px;
    word-break: break-all;

}

#commentList.gb-Comment li.uploader {
    margin-left: 10px;
}

#commentList li.uploader span {
    color: #0accb1;
}

#commentList li small {
    display: block;
    color: #999;
    margin-bottom: 1px;
}

#commentList li p {
    margin-left: 5px;

}

.gb-outline {
    display: none;
}

.comment_content {
    margin-top: 10px;
    background: #fbfbfb;
    height: 269px;
    overflow: auto;
    scrollbar-width: thin;
}


.gb-Comment pre {
    margin-top: -16px;
    color: #888;
    cursor: pointer;
}


.btn_send_comment {
    border: none;
    background: none;
    float: right;
    font-size: 17px;
    color: #777;
    cursor: pointer;
    outline: none;
    padding: 3px;
    margin-right: 5px;
}

.textBox {
    margin-top: 5px;
}

.textBox input {
    width: 92%;
    padding: 5px;
    border: 1px solid #f9f9f9;
    outline: none;
    border-radius: 20px;
    padding-left: 10px;
}


.link_additions {
    float: right;
    margin-right: 10px;
}



.gb-like {
    margin-right: 10px;
}

#commentList.gb-Comment {
    margin-top: 9px;
}

.following_box {
    background: #fbfbfb;
    height: 50px;
    display: grid;
    grid-template-columns: auto auto auto 1fr;
}

.gb-view {
    float: left;
    margin-right: 10px;
    font-size: 22px;
    margin-top: 4px;
    color: #888;
    text-decoration: none;
    width: 70px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 7px 10px -5px #999;
    transition: .2s;
}

.gb-view small {
    font-size: 12px;
    float: right;
    padding-right: 5px;
}

#btn_like {
    margin: 4px 0px;
    color: #0cd2f2;
    font-size: 22px;
    float: left;
    height: 40px;
    text-align: center;
    border-radius: 7px;
    line-height: 40px;
    padding-right: 5px;
    padding-left: 5px;
    box-shadow: 0 7px 10px -5px #999;
    transition: .2s;
}

#btn_like:hover {
    box-shadow: none;
    transition: .2s;
}

#iconCountWin {
    float: right;
    font-size: 12px;
    margin-left: 7px;
    margin-top: 0px;
}

form pre {
    text-align: center;
}


#likeCountWin {
    float: right;
    font-size: 12px;
    margin-left: 7px;
}


#btn_comment_win {
    font-size: 22px;
    margin: 4px 1px;
    color: #ff6000;
    float: left;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 8px;
    padding-right: 5px;
    padding-left: 5px;
    box-shadow: 0 7px 10px -5px #999;
    transition: .2s;
}

#btn_comment_win:hover {
    box-shadow: none;
    transition: .2s;
}

.gb-Comment {
    margin-top: 10px;
}









#fb {
    border: 1px solid #38c;
    padding: 10px;
    border-radius: 5px;
    width: 164px;
    text-align: center;
    color: #38c;
    cursor: pointer;
    transition: .2s;
}

#filter_src {
    position: absolute;
    top: 0;
    margin: 10px 0px;
    padding-left: 15px;
    cursor: pointer;
}


.flt_shadow {
    width: 100%;
    margin: -8px auto;
    position: relative;
    margin-left: 15px;
}

.filterBox {
    background: white;
    width: 45%;
    position: absolute;
    z-index: 99;
    padding: 15px;
    display: none;
    box-shadow: 0 0px 10px #b7b7b7;
    top: 20px;
    right: 0px;
    border: 1px solid #34c8c8;
    border-radius: 10px;
}

.btn_filter {
    position: absolute;
    height: 50px;
    width: 80px;
    right: 140px;
    margin-top: -35px;
}

.btn.btn-filter {
    background: #34c8c8
        /*#c83434*/
    ;
    color: #fff;
    width: 49%;
}

#selectQuery {
    margin-top: 25px;
    width: 100%;
}

.btn.btn-cleen {
    background: #c83434;
    color: #fff;
    width: 49%;
}

.btn.btn-filter:hover,
.btn.btn-cleen:hover {
    box-shadow: 0 0 7px #999;
    color: #fff;
}

.btn_class {
    color: #34c8c8;
}

.show {
    display: block;
}

/*.blur {filter:blur(3px)}*/
#ortuk {
    background: transparent;
    position: absolute;
    width: 100px;
    height: 45px;
    top: 0;
    z-index: 2;
    display: none;
    cursor: pointer;
}

#fb:hover {
    box-shadow: 0 0 8px #999;
    background-color: #38c;
    color: #fff;
    transition: .2s;
}

.mob_cat {
    display: none
}

.mob_cat_carousel {
    display: none
}

.for_mobile {
    display: none
}

.shop_text_mob {
    display: none
}

.for_mobile_addnew {
    display: none
}

.mobile_detail_page {
    display: none
}

.callbox {
    display: none
}

#drop_mob_Menu {
    display: none
}

.mob-profile-detil {
    display: none
}

#add_new_btn {
    display: none
}

#mob_shop_about {
    display: none
}

.mob_src_header {
    display: none
}

.mob_more {
    display: none
}

#mob_footer {
    display: none
}

#btn_s_social {
    display: none
}

.mob_hd {
    display: none
}

@font-face {
    font-family: JISAZNRegular;
    src: url(jaznr.eot);
    src: url(jaznr.eot?#iefix) format("embedded-opentype"), url(jaznr.woff) format("woff"), url(jaznr.ttf) format("truetype"), url(jaznr.svg#jaznr) format("svg");
    font-weight: 550;
    font-style: normal
}

#ek_icon {
    width: 30px
}

#silver_icon {
    width: 30px
}

#gold_icon {
    width: 30px
}

#super_icon {
    width: 30px;
    margin-top: -5px
}

img#ekanom {
    width: 20px;
    position: absolute;
    bottom: 5px;
    right: 5px
}

img#silver {
    width: 20px;
    position: absolute;
    bottom: 5px;
    right: 5px
}

img#gold {
    width: 20px;
    position: absolute;
    bottom: 5px;
    right: 5px
}

img#super {
    width: 20px;
    position: absolute;
    bottom: 5px;
    right: 5px
}

#azn_icon {
    font-weight: 700
}

/* nav {
    width: max-content;
    margin: auto;
    padding-bottom: 5px;
} */

#filter_search li#no_result {
    text-align: center;
    width: 100%;
    font-size: 14px;
    color: #999
}

.dcbMenuItems {
    padding: 0;
    margin: 0
}

.dcbMenuItems li {
    list-style: none;
    display: block;
    text-align: left;
    line-height: 30px;
    font-size: 14px;
    width: 170px
}

.dcbMenuItems i {
    width: 22px;
    text-align: center
}

#filter_search li:hover {
    background: #ececec;
}

.profile_content {
    height: 100vh
}

.sosialBox {
    width: 100px;
    height: 250px;
    position: fixed;
    right: 10px;
    top: 50%
}

#start_btn {
    width: 50px;
    height: 50px;
    position: absolute;
    background: #34c8c8;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    line-height: 50px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%)
}

#social_list {
    padding: 0;
    margin: 0
}

#social_list li {
    list-style: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    margin-top: 15px
}

#social_list li a {
    color: #fff;
    text-decoration: none
}

#social_list li.fb {
    background: #3b5999;
    bottom: 75%;
    transition: all .4s ease-out
}

#social_list li.in {
    background: #c32aa3;
    bottom: 50%;
    transition: all .4s ease-out
}

#social_list li.yb {
    background: #db4437;
    bottom: 25%;
    transition: all .4s ease-out
}

#uppvideo {
    display: none
}

.w-app {
    position: fixed;
    bottom: 3%;
    left: 5%;
    width: 40px;
    height: 40px
}

#link-logout {
    display: block;
    text-align: left
}

#profile_drop {
    margin-left: -90px;
    position: absolute;
    background: #fff;
    right: 105px;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 0 2px;
    top: 34px;
    z-index: 9;
    display: none
}

.close_drop:disabled {
    background: #999
}

#dropdownMenuProfile {
    font-size: 25px;
    display: inline-block;
    margin-top: -5px
}

#profile_drop a {
    margin-left: 10px
}

.dcb_banner {
    overflow: hidden;
    height: 135px;
    text-align: center;
}

.dcb_banner img {
    object-fit: cover;
    height: 100%;
    max-width: 1349px;
}

@media screen and (min-width:1507px) {
    .dcb_banner img {
        max-width: 1507px;
    }
}

@media screen and (min-width:1686px) {
    .dcb_banner img {
        max-width: 1696px;
    }
}

.dcb_banner iframe {
    width: 1140px
}

#popBanner {
    width: 400px;
    height: 350px;
    background: #fff;
    box-shadow: 0 0 101px #444;
    position: fixed;
    z-index: 9999;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    display: none
}

.closeBann {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 0;
    top: 0;
    background: red;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    color: #fff
}

#emptyMessage {
    color: #999;
    text-align: center;
    display: block;
    width: 100%;
    line-height: 180px
}

#username {
    font-size: 15px;
    float: left;
    margin-top: 8px;
    margin-left: 5px;
    font-weight: 600
}

.yt_video {
    position: fixed;
    width: 380px;
    height: 250px;
    background: #00f3ff;
    bottom: 10px;
    left: 10px;
    z-index: 9999;
    box-shadow: 0 0 10px;
    border-radius: 5px;
    display: none
}

.closeVideo {
    position: absolute;
    right: 7px;
    margin: 5px;
    cursor: pointer;
    color: #002c95
}

video#videos {
    background: #000;
}

#video iframe {
    width: 360px;
    height: 200px
}

.socialLinks {
    height: 40px;
    background: #34c8c8;
    position: sticky;
    line-height: 40px;
    z-index: 999;
    top: 0
}

.link_header {
    width: 1140px;
    margin: auto;
    padding-right: 15px;
    padding-left: 15px;
    position: relative
}

#closeDiv {
    position: absolute;
    width: 45%;
    height: 40px;
    background: 0 0;
    right: 0;
    top: 0;
    z-index: 9999;
    padding-right: 15px
}

.socialLinks a {
    margin-right: 0;
    margin-left: 15px;
    color: #fff;
    text-decoration: none;
    font-size: 14px
}

.socialLinks a:hover {
    text-decoration: none;
    color: #eaeaea
}

.d_socials {
    position: absolute;
    right: 0
}

.d_socials img {
    width: 30px
}

#imgBox img {
    width: 100%;
    height: 265px;
    object-fit: cover
}

.d_socials a:first-child {
    margin-right: 20px;
    color: #999
}

.d_socials a:first-child:hover {
    color: #666
}

.d_socials a:hover {
    text-decoration: none
}

.win_canvas {
    background: #fff;
    display: flex;
    display: none;
    position: sticky;
    z-index: 9999;
    width: 460px;
    margin-left: 570px;
    top: 40px
}

.titleMenu {
    border-right: 1px solid #e0e0e0;
    width: 200px
}

.dcb-Menu {
    padding: 0;
    margin: 0;
    position: relative;
    width: 200px
}

.dcb-Menu li {
    list-style-type: none;
    line-height: 50px;
    border-top: 1px solid #fff;
    display: block
}

.dcb-Menu li a {
    text-decoration: none;
    color: #333;
    margin-left: 15px;
    display: block;
    position: relative
}

.dcb_active {
    position: relative;
    background: var(--backgroundcolor);
    border-top: 1px solid #fff
}

.dcb-Menu .dcb_active a {
    color: #fff
}

.dcb_active:before {
    content: '';
    position: absolute;
    z-index: 99;
    width: 10px;
    height: 10px;
    background: var(--backgroundcolor);
    right: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg)
}

#rowMore {
    min-height: 400px
}

.dcb-Menu li:hover {
    background: var(--backgroundcolor);
    border-top: 1px solid #fff
}

.dcb-Menu li:hover a {
    color: #fff
}

.dcb-Menu li:hover a:before {
    display: block
}






.banner_win img {
    width: 100%;
    height: 210px;
    object-fit: cover;
}

.banner_win {
    overflow: hidden;
    border: 1px solid #ddd;
    height: 210px;
    border-radius: 10px;
    text-align: center;
    width: 330px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.reklam {
    flex: 1;
    width: 330px;
    float: right;
    background: none;
    margin: 15px;
}

.tab_container {
    display: none
}

#gold {
    margin: 0;
    padding: 0;
    float: left;
    margin-right: 70px
}

#gold li a:hover {
    color: #34c8c8
}

#gold:last-child {
    margin-right: 0
}

#gold li:first-child {
    font-weight: 600;
    color: #34c8c8
}

#gold li {
    text-align: left;
    list-style: none;
    line-height: 36px;
    font-size: 15px;
    float: none;
    height: 33px;
    display: block
}

#gold li a {
    text-decoration: none;
    color: #555
}

#add_new {
    background: #34c8c8;
    padding: 5px;
    color: #fff;
    border-radius: 5px;
    width: 100px;
    display: inline-block;
    margin-top: -5px;
    margin-right: 10px
}

.win_antireflection {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    top: 0;
    left: 0;
    z-index: 99;
    display: none
}

#open_win_canvas {
    display: inline-block;
    position: relative
}

#canvas_close {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 0 0;
    display: none
}

#check {
    font-size: 12px;
    width: 170px;
    float: right
}

#check input[type=checkbox] {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border: 1px solid #666;
    position: absolute;
    margin-left: -21px;
    margin-top: 16px;
    cursor: pointer;
    transition: .2s
}

#check input[type=checkbox]:checked {
    background: #34c8c8;
    border: none;
    border-radius: 50%;
    transition: .2s
}

.dcb_topHeader {
    height: 95px;
    background: #fff;
    display: grid;
    grid-template-columns: auto 1fr auto
}

.dropdown {
    margin-top: 35px
}

ol {
    margin: 0;
    padding: 0
}

.nav_section {
    height: 110px;
    vertical-align: top;
    text-align: right
}

.nav_section a {
    margin-right: 12px;
    vertical-align: top;
    display: inline-block
}

#addNew {
    font-size: 20px;
    width: 90px;
    display: inline-block;
    text-align: center;
    margin-top: -10px;
    font-weight: 600
}

.s_search {
    height: 40px;
    width: 60%;
    position: absolute;
    z-index: 9;
    margin-top: -8px;
    margin-left: -10px
}

.forSearch {
    position: fixed;
    background: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;
    z-index: 9;
    display: none
}

.s_search input {
    width: 100%;
    background: #fff;
    padding: 7px;
    padding-left: 17px;
    border: none;
    box-shadow: 0 0 5px #999;
    border-radius: 30px;
    outline: 0
}

#axtar svg {
    width: 20px;
    fill: #999
}

#axtar {
    position: absolute;
    outline: none;
}

#logo {
    width: 280px;
    height: 110px;
    line-height: 110px
}

#logo img {
    width: 80%;
    margin-left: 5px;
    margin-top: -15px
}

.dcb_navbar {
    height: 30px;
    background: #fff;
    z-index: 999
}

.dcb_navbar ul {
    padding: 0;
    margin: 0;
    z-index: 99
}

.dcb_navbar ul li {
    list-style: none;
    line-height: 30px;
    width: 200px;
    display: inline-block;
    text-align: center;
    border-right: 1px solid #ddd;
    position: relative;
    margin-right: -5px
}

#drop_list {
    position: absolute;
    z-index: 99;
    background: #e5e5e5e6;
    margin-top: 4px;
    width: 300px;
    display: none;
    box-shadow: 2px 3px 5px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 99999
}

#drop_list li {
    text-align: left;
    border: none;
    line-height: 35px;
    font-weight: 600;
    position: relative;
    display: inherit
}

#drop_list li a {
    margin-left: 10px;
    color: #f60
}

#drop_list li a .fas {
    position: absolute;
    margin-left: 12px;
    margin-top: 11px;
    transform: rotate(0)
}

.shop-elan-list {
    width: 100%;
    padding-top: 10px;
    background: #fff
}

#dropdown_list {
    margin-left: 15px;
    display: none
}

#dropdown_list li {
    width: 300px;
    font-size: 15px
}

#dropdown_list li a {
    color: #444
}

#dropdown_list #open_list_ex {
    font-weight: 700
}

#open_list_ex #open_br_bb,
#open_list_ex #open_gl_bb,
#open_list_ex #open_gl_mn,
#open_list_ex #open_list_bb,
#open_list_ex #open_list_mn {
    color: #f60
}

#li_style {
    display: inline-block;
    width: 10px;
    color: #f60;
    float: left;
    margin-top: -1.7px
}

.dcb_navbar li span {
    display: inline-block;
    width: 25px;
    color: #f60
}

.dcb_navbar li:nth-child(2) span {
    color: #d02325
}

.dcb_navbar li:nth-child(3) span {
    color: #77c59e
}

.dcb_navbar li:nth-child(4) span {
    color: #f12390
}

.dcb_navbar li:nth-child(1) {
    border-bottom: 4px solid #009cd9
}

.dcb_navbar li:nth-child(2) {
    border-bottom: 4px solid #d02325
}

.dcb_navbar li:nth-child(3) {
    border-bottom: 4px solid #77c59e
}

.dcb_navbar li:nth-child(4) {
    border-bottom: 4px solid #f12390
}

.dcb_navbar li a {
    color: #666;
    text-decoration: none
}

.dcb_navigation {
    height: 105px;
    background: #fff
}

.b_box {
    width: 95%;
    margin: auto;
    position: relative
}

.b_box a {
    width: 164px;
    height: 40px;
    display: inline-block;
    vertical-align: top;
    margin-top: 40px;
    margin-left: 80px
}

.b_box a:hover {
    box-shadow: 3px 4px 6px #999
}

.dcb_buttons {
    position: absolute;
    height: 105px;
    top: 0
}

.dcb_buttons::before {
    content: '';
    position: absolute;
    left: 0;
    width: 81px;
    height: 30%;
    background: #fff;
    top: 40%
}

.dcb_buttons img {
    width: 100%
}

.search_category {
    height: 70px;
    background: #fbfbfb
}

.src_nav {
    display: table;
    height: 70px;
    width: 1110px;
    margin: auto
}

select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none
}

.form {
    vertical-align: top;
    display: table-cell;
    padding-top: 15px;
    padding-right: 5px;
    position: relative
}

#drop_icon {
    position: absolute;
    right: 15px;
    top: 65%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #888;
    cursor: pointer
}

.form:nth-child(1) {
    width: 130px
}

.form:nth-child(2) {
    width: 164px
}

.form:nth-child(3) {
    width: 95px
}

.form:nth-child(4) {
    width: 120px
}

.form:nth-child(5) {
    width: 120px
}

.form:nth-child(7) {
    width: 150px
}

.btn_search {
    display: inline-block;
    font-weight: 400;
    background: #34c8c8;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.btn_search i {
    font-size: 14px;
    margin-left: 10px
}

.category_header {
    border-bottom: 1px dotted #eceaea;
    padding-bottom: 15px;
    width: 1140px;
    margin: auto
}

.category_header .col-md-3 {
    margin-top: 20px
}

.category_header .col-md-3:nth-child(2) span {
    margin-left: -7px
}

.category_header .col-md-3:nth-child(3) span {
    margin-left: 0
}

.category_header .col-md-3:nth-child(4) span {
    margin-left: 0
}

.category_header .col-md-3:nth-child(6) span {
    margin-left: -7px
}

.category_header .col-md-3:nth-child(7) span {
    margin-left: 0
}

.category_header .col-md-3:nth-child(8) span {
    margin-left: 0
}

.category_header .col-md-3 a:hover {
    text-decoration: none
}

.category_header .col-md-3 span {
    margin-left: 15px;
    font-size: 20px;
    font-weight: 600;
    position: absolute
}

.category_header a {
    border: 1px solid #ececec;
    display: inherit;
    line-height: 68px;
    overflow: hidden;
    transition: all .1s ease-in-out;
    box-shadow: 4px 4px 4px #cacaca;
    color: #757474
}

.category_header a:hover,
.category_header a:hover .category_header a:hover .category_header .col-md-3 span:hover {
    color: #fff
}

.category_header img {
    margin-top: -8px
}

#btn_add_new {
    position: absolute;
    height: 40px;
    width: 180px;
    right: 22px;
    border: 0;
    top: 22px;
    background: linear-gradient(0deg, #167979, #34c8c8);
    cursor: pointer;
    border-radius: 30px;
    color: #fff;
    font-size: 26px;
    text-align: center;
    outline: 0
}
img.w-full.h-full.object-cover.transition-transform.duration-500.group-hover\:scale-105 {
    height: 250px;
    object-fit: cover;
}
.w-3 {
    width: calc(var(--spacing) * 3);
}

.h-3 {
    height: calc(var(--spacing) * 3);
}
.btn-gold {
    background: var(--gradient-gold);
    color: #333;
    box-shadow: var(--shadow-luxe);
    font-weight: 600;
    transition: transform .2s, box-shadow .2s, filter .2s;
}

.focus-within\:border-\[var\(--gold\)\].bg-card.overflow-hidden.transition.shadow-sm {
    border-color: var(--gold);
}

.m-1\.5 {
    margin: calc(var(--spacing) * 1.5);
}

.border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
}

.shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

@media (width >=40rem) {
    .sm\:inline {
        display: inline !important;
    }
}

/* .dcb_content {
    background: #fff
} */
.logos {
    width: 220px;
}

.bg-\[var\(--navy\)\].text-\[oklch\(0\.98_0\.01_80\)\].text-xs {
    background: oklch(0.3 0.09 256.77);
    height: 40px;
    line-height: 40px;
    color: var(--card);
}

@media (width >=40rem) {
    .sm\:inline-flex {
        display: inline-flex !important;
    }
}

@media (width >=64rem) {
    .lg\:block {
        display: block !important;
    }
}
.w-3\.5 {
    width: calc(var(--spacing) * 3.5);
}
.max-w-\[1400px\] {
    max-width: 1400px;
}

.h-3\.5 {
    height: calc(var(--spacing) * 3.5);
}

.flex.gap-2.overflow-x-auto.py-3.\[scrollbar-width\:none\].\[\&\:\:-webkit-scrollbar\]\:hidden {
    justify-content: center !important;
}

a.chip.chip-active {
    background: var(--color-foreground);
    color: var(--color-background) !important;
    border-color: var(--color-foreground);
}

.chip {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-foreground);
    white-space: nowrap;
    cursor: pointer;
    border-radius: 9999px;
    align-items: center;
    gap: .375rem;
    padding: .5rem .875rem;
    font-size: .8125rem;
    font-weight: 500;
    transition: all .15s;
    display: inline-flex;
}

.bg-\[var\(--price\)\] {
    background-color: var(--price);
}

.min-w-\[16px\] {
    min-width: 16px;
}

.-right-2 {
    right: calc(var(--spacing) * -2);
}

.-top-1\.5 {
    top: calc(var(--spacing) * -1.5);
}

.text-\[10px\] {
    font-size: 11px;
}

.absolute {
    position: absolute;
}

.text-\[10\.5px\] {
    font-size: 10.5px;
}

.py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
}

.gap-5 {
    gap: calc(var(--spacing) * 5);
}

#link_url {
    text-decoration: none;
    color: #777
}

.dcb_content .col-md-3 {
    margin-bottom: 25px
}

.dcb_content h4 {
    margin-top: 20px;
    display: inline-block;
    margin-left: 10px;
    color: #686868;
    font-size: 20px;
}

.c_box {
    background: #fff;
    position: relative;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1), border-color .35s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#shopSelect option {
    font-size: 13px
}

.ramka {
    width: 100%;
    background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);
    position: relative;
    overflow: hidden;
    text-align: center;
    height: 220px;
    border-bottom: 1px solid #f0f0f0;
}

.ramka img {
    transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);
}

.c_box:hover {
    cursor: pointer;
    box-shadow: 0 16px 40px rgba(34, 166, 166, 0.15), 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-4px);
    border-color: rgba(34, 166, 166, 0.2);
}

.c_box:hover .ramka img {
    transform: scale(1.06);
}

.c_box:hover.old_price small {
    margin-top: 0
}

.iactive i {
    color: #f60
}

#add {
    color: #888
}

#dc_city {
    display: inline-block;
    margin-top: -10px;
    float: right;
    font-size: 12px;
    color: #888;
    margin-bottom: 10px
}

.ramka img {
    width: 100%;
    height: 220px;
    object-fit: cover
}

.detail_banner {
    text-align: center;
    width: 610px;
    margin: 35px auto;
    overflow: hidden
}

.detail_banner iframe {
    width: 610px
}

.d_p_info {
    width: auto;
    margin: 0;
    position: relative;
    padding: 14px 14px 4px;
    height: auto
}

.newPrice {
    position: relative;
    overflow: hidden
}

.p_price {
    padding: 0 12px;
    height: 30px;
    color: #fff;
    font-weight: 700;
    z-index: 9;
    bottom: 0;
    float: left;
    background: var(--primary);
    /* background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%); */
    line-height: 30px;
    border-radius: 8px;
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    box-shadow: 0 3px 10px rgba(34, 166, 166, 0.25);
    letter-spacing: 0.3px;
}

.pricebox {
    position: absolute;
    width: 38px;
    height: 38px;
    right: 10px;
    bottom: -19px;
    text-align: center;
    z-index: 10;
}

.old_price {
    float: left;
    height: 30px;
    bottom: 0;
    left: auto;
    text-decoration: none;
    color: #a0aec0;
    font-weight: 600;
    z-index: 999;
    margin-left: 8px;
    line-height: 30px;
    margin-bottom: 10px;
}

.old_price small {
    color: #a0aec0;
    font-weight: 600;
    z-index: 999;
    text-decoration: line-through;
    font-size: 12px;
}

.bookmark {
    font-size: 16px;
    z-index: 99;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(4px);
    transition: all .25s ease;
}

.bookmark:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
}

.bookmark a {
    color: #cbd5e0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: color .25s ease;
}

.bookmark a:hover {
    color: #ff6600;
}

.bookmark a i.fas.fa-heart {
    transition: transform .25s ease;
}

.bookmark a:hover i.fas.fa-heart {
    transform: scale(1.15);
}

/* #newShop {
    margin-top: 15px;
    margin-bottom: 50px
} */

.col-md-4 .pk_header {
    height: 40px;
    background: linear-gradient(0deg, #cecece 50%, #ddd 51%);
    text-align: center;
    line-height: 40px;
    border-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.col-md-4:nth-child(1) .pk_header {
    background: linear-gradient(0deg, #32bbbb 50%, #34c8c8 51%);
    color: #fff
}

.col-md-4:nth-child(3) .pk_header {
    background: linear-gradient(0deg, #1e41ac 50%, #2268b3 51%);
    color: #fff
}

.col-md-4:nth-child(4) .pk_header {
    background: linear-gradient(0deg, #dbb742 50%, #e3c742 51%);
    color: #fff
}

.col-md-4:nth-child(5) .pk_header {
    background: linear-gradient(0deg, #c12f2f 50%, #c83333F0 51%);
    color: #fff
}

.shared {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center
}

.btn.btn-select {
    background: linear-gradient(0deg, #32bbbb 50%, #34c8c8 51%);
    border-radius: 0;
    width: 60%;
    height: 50px;
    color: #fff;
    outline: 0;
    transition: .2s ease-in-out;
    border-radius: 4px
}

.btn.btn-select:hover {
    box-shadow: 0 0 7px #999;
    transform: scale(.9);
    transition: .2s ease-in-out;
    color: #fff
}

.col-md-4:nth-child(2) .btn.btn-select {
    background: linear-gradient(0deg, #cecece 50%, #ddd 51%);
    color: #666
}

.col-md-4:nth-child(3) .btn.btn-select {
    background: linear-gradient(0deg, #1e41ac 50%, #2268b3 51%);
    color: #fff
}

.col-md-4:nth-child(4) .btn.btn-select {
    background: linear-gradient(0deg, #dbb742 50%, #e3c742 51%);
    color: #fff
}

.col-md-4:nth-child(5) .btn.btn-select {
    background: linear-gradient(0deg, #c12f2f 50%, #c83333F0 51%);
    color: #fff
}

.col-md-4:nth-child(1) .pk_content,
.col-md-4:nth-child(2) .pk_content,
.col-md-4:nth-child(3) .pk_content {
    height: 500px
}

.packed {
    margin-bottom: 30px
}

.pk_content {
    height: 850px;
    width: 100%;
    border: 1px solid #ddd;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-bottom: 30px;
    position: relative
}

.pk_price {
    height: 70px;
    background: #ddd;
    text-align: center;
    line-height: 70px;
    position: relative
}

.pk_price h2 {
    font-weight: 700;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.pk_content ul {
    padding: 0;
    margin: 0
}

.pk_content li {
    list-style: none;
    line-height: 35px;
    font-size: 13px;
    padding-right: 4px;
    padding-left: 4px;
    border-top: 1px solid #c7c7c7
}

.pk_content li:first-child {
    border: none
}

.raiting a {
    color: #888
}

.e_name {
    margin-top: 0;
    color: #2d3748;
}

#s_qeyd {
    font-size: 11px;
    color: #f60;
    font-weight: bold;
}

.e_name h5 {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #2d3748;
    margin: 0 0 6px;
}

.e_detail span {
    display: inline-block;
    margin-left: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #999
}

.e_detail span:nth-child(2) {
    margin-left: 0
}

.e_detail small {
    font-weight: 700;
    font-size: 13px
}

.e_detail span:nth-child(4) {
    margin-left: 0
}

.e_detail .col-md-6 {
    padding-left: 0;
    padding-right: 0
}

.sho_information {
    text-align: center;
    background: #38c8c83b;
    padding: 15px;
    margin-bottom: 30px;
    padding-top: 30px
}

.sho_information span {
    font-weight: 700;
    color: #166173
}

.d_tarix {
    font-size: 12px;
    margin-top: 6px;
    color: #a0aec0;
    font-weight: 500;
}

.d_tarix span {
    color: #a0aec0;
}

/* --- Kart reytinqi --- */
.card_rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 8px;
}

.card_rating .stars {
    display: inline-flex;
    gap: 1px;
    font-size: 12px;
    line-height: 1;
    color: #f5a623;
}

.card_rating .stars .far {
    color: #d9dee6;
}

.card_rating .rate_num {
    font-size: 12px;
    font-weight: 700;
    color: #2d3748;
}

.card_rating .rate_new {
    font-size: 10.5px;
    font-weight: 700;
    color: #22a6a6;
    background: rgba(34, 166, 166, 0.1);
    padding: 1px 7px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* --- Kart qısa açıqlaması --- */
.short_desc {
    font-size: 12.5px;
    line-height: 1.45;
    color: #718096;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
}

.footer {
    background: #f5fafe
}

.dcb_footer {
    height: 350px;
    background: #f5fafe;
    position: relative;
    margin: auto;
    display: flex
}

.dcb_section {
    flex: 1;
    margin-top: 25px
}

.dcb_section img {
    width: 100%
}

.dcb_section p {
    font-family: 'Work Sans';
    color: #616161;
    font-size: 15px;
    margin-top: 20px;
    text-align: justify
}

/*.dcb_section:nth-child(2) a{font-family:'Work sans'; display:block;padding-left:100px;height:30px;line-height:30px;margin-top:20px;text-decoration:none;color:#616161}*/
/*.dcb_section:nth-child(2) a:first-child{height:10px}*/
.dcb_section:nth-child(2) span {
    width: 90%;
    position: relative;
    height: 1px;
    background: #34c8c8;
    display: block
}

.dcb_section:nth-child(2) span:before {
    content: '';
    position: absolute;
    height: 6px;
    width: 100px;
    background: #34c8c8;
    top: -3px
}

/*.dcb_section:nth-child(3) a{font-family:'Work Sans';display:block;padding-left:100px;height:30px;line-height:30px;margin-top:20px;text-decoration:none;color:#616161}
.dcb_section:nth-child(3) a:first-child{height:10px}*/
.dcb_section:nth-child(3) span {
    width: 90%;
    position: relative;
    height: 1px;
    background: #34c8c8;
    display: block
}

.dcb_section:nth-child(3) span:before {
    content: '';
    position: absolute;
    height: 6px;
    width: 100px;
    background: #34c8c8;
    top: -3px
}

.dcb_section:nth-child(1) a {
    display: block;
    color: #616161;
    font-size: 17px;
    font-weight: 500;
    line-height: 45px;
    width: max-content;
    margin: auto;
    font-family: 'Work sans'
}

.dcb_section:nth-child(3),
.dcb_section:nth-child(1) {
    text-align: center;
    font-family: 'Work sans'
}

div#celafrix_footer {
    height: 2px;
    background: #333;
    width: 70%;
    margin: 30px auto;
}

div#celafrix_center {
    width: 2px;
    height: 55px;
    background: #444;
    margin: 10px auto;
}

.bottom_socialLink {
    text-align: center;
}

.bottom_socialLink a {
    margin: 20px;
    font-size: 22px;
    color: #444;
}

a#btn-add {
    border: 1px solid #444;
    width: 70%;
    display: block;
    padding: 11px;
    margin: 45px auto;
    color: #3e3e3e;
    text-align: center;
    font-family: 'Work Sans';
    font-size: 17px;
    text-decoration: none;
}

a#btn-add:hover {
    text-decoration: none;
    box-shadow: 0 0 8px #444;
}



.dcb_section:nth-child(3) a {
    display: block;
    color: #616161;
    font-size: 17px;
    font-weight: 500;
    line-height: 45px;
    width: max-content;
    margin: auto;
}

.btm_logo {
    text-align: center;
}

.dcb_section img {
    width: 60%;
    margin: auto;
}

#span1 {
    font-family: 'Work Sans';
    color: #616161;
    bottom: 10px;
    left: 50%;
    width: 100%;
    display: block;
    text-align: center;
    padding-bottom: 10px
}

.section {
    position: relative;
    height: 100%
}

.s_left_section {
    position: absolute;
    left: 10px;
    top: 35px
}

.s_left_section span {
    display: block;
    font-size: 15px;
    color: #fff;
    font-weight: 600
}

.s_left_section span:nth-child(2) {
    font-size: 13px;
    margin-top: 15px
}

.s_right_section {
    width: 310px;
    margin-top: 10px;
    display: inline flow-root list-item;
    list-style: none
}

#infor {
    color: #34c8c8;
    width: 400px;
    font-size: 14px;
    margin-top: 45px
}

#infor h3 {
    font-size: 19px
}

.s_right_section img {
    width: 100%
}

.dcb_register {
    height: 100vh;
    background: #fff;
    z-index: 1;
    display: flex
}

#register_box {
    flex: 1;
    margin: 10px
}

#info_box {
    flex: 1;
    margin: 10px
}

.registerinfobox {
    background: #fbfafa;
    height: 500px;
    margin-top: 27px;
    position: relative
}

#dcb_info {
    margin-bottom: 30px
}

#dcb_info:nth-child(3) {
    margin-top: 70px
}

#dcb_info p {
    width: 330px;
    margin: auto;
    margin-bottom: 25px;
}

.register_form {
    width: 460px;
    padding: 5px;
    background: #f5f5f5;
    box-shadow: 0 0 12px #888;
    border-radius: 7px;
    margin: 15px auto
}

.register_form h5 {
    display: block;
    border-bottom: 1px solid #dbdbdb;
    padding: 15px;
    text-align: center;
    font-size: 24px;
    width: 300px;
    margin: auto;
    margin-bottom: 20px;
    font-weight: 600;
    color: #34c8c8
}

.register_form form {
    width: 410px;
    margin: auto
}

.register_form input {
    padding-left: 35px
}

.register_form select {
    padding-left: 35px
}

#reg_icon {
    position: absolute;
    top: 7px;
    left: 10px;
    color: #34c8c8
}

#btn_register {
    padding: 10px;
    width: 165px;
    border: none;
    background: linear-gradient(0deg, #177979, #34c8c8);
    color: #fff;
    border-radius: 5px
}

#btn_register:hover {
    background: linear-gradient(180deg, #177979, #34c8c8)
}

.information {
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

#etiket img {
    width: 10%
}

.information span>img {
    width: 30%
}

.form-group small {
    font-size: 12px;
    width: 116px;
    display: inline-block;
    vertical-align: top;
    margin: -7px 47px;
    color: #666;
    position: relative
}

.form-group small:before {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    left: -14px;
    background: #34c8c8;
    top: 25px;
    border-radius: 50%
}

.reg_logo {
    text-align: right;
    margin-top: 40px
}

.reg_logo img {
    width: 40%
}

#alert_limit {
    display: block;
    width: 100%;
    text-align: center;
    padding-top: 16px;
    color: red;
    font-weight: 500
}

.dcb_shop {
    background: #fff;
    z-index: 1
}

.shop_form h5 {
    display: block;
    border-bottom: 1px solid #dbdbdb;
    padding: 15px;
    text-align: left;
    font-size: 24px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 20px;
    font-weight: 600;
    color: #444
}

.shop_form form {
    width: 95%;
    margin-left: 15px;
    margin-right: 15px
}

.shop_form input {
    padding-left: 35px
}

.shop_form select {
    padding-left: 35px
}

#basic-addon1 {
    width: 55px;
    float: left
}

#s_v {
    width: 302px;
    margin-left: 9px;
    float: left;
    padding-left: 5px
}

.two_page {
    display: flex
}

.two_left {
    flex: 1;
    padding: 10px
}

.two_free {
    width: 120px
}

.two_right {
    flex: 1;
    padding: 10px
}

.two_free small {
    margin-top: 179px;
    display: block;
    margin-left: -5px
}

.fa-caret-right {
    padding-left: 7px
}

#btn_newShop {
    border: none;
    background: linear-gradient(0deg, #167979, #34c8c8);
    padding: 10px;
    width: 150px;
    border-radius: 5px;
    color: #fff
}

#btn_newShop:hover {
    background: linear-gradient(180deg, #167979, #34c8c8);
    box-shadow: inset 0 0 5px #444
}

.shop_logo {
    text-align: right;
    padding-bottom: 18px;
    margin-right: 14px
}

.shop_logo img {
    width: 20%
}

.detail_page {
    width: 100%;
    background: #fff;
    display: flex
}

.pro_detail {
    flex: 1
}

.detail_name {
    position: relative;
    padding-left: 15px
}

.detail_name h2 {
    margin: 0;
    padding: 0;
    font-weight: 700
}

.detail_name span {
    display: block
}

#salePrice {
    text-decoration: line-through;
    color: #999
}

#price {
    font-size: 30px;
    font-weight: 700;
    color: #34c8c8;
    display: inline-block;
    vertical-align: top
}

#viewer {
    display: inline-block;
    color: #777;
    font-size: 13px;
    margin-top: 15px;
    margin-left: 30px
}

#more {
    float: right;
    margin: 8px;
    font-size: 20px;
    color: #249d9d;
    text-decoration: none
}

.materials {
    display: flex
}

.punkt {
    flex: 1;
    padding-left: 10px;
    font-size: 14px
}

.punkt:nth-child(1) {
    flex: 1.3
}

.punkt table {
    width: 100%
}

.punkt table b {
    font-size: 12px
}

.punkt ul {
    padding: 0;
    margin: 0
}

.punkt li {
    list-style: none;
    line-height: 30px;
    font-size: 13px
}

.pro_info {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px
}

.pro_info h3 {
    font-weight: 600;
    color: #757473
}

.pro_info p {
    font-size: 13px;
    color: #777
}

#link_process {
    color: #249d9d;
    margin-left: 10px;
    text-decoration: none
}

.link_addto {
    float: left;
    margin-right: 10px;
    font-size: 22px;
    margin-top: 4px;
    color: #888;
    text-decoration: none;
    width: 60px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 7px 10px -5px #999;
    transition: .2s;
}

#res_result {
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 25px;
    color: #999
}

.link_addto:hover {
    text-decoration: none;
    box-shadow: none;
    transition: .2s;
}

.uploader_info {
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center
}

.uploader_info a {
    background: linear-gradient(0deg, #289d9d, #34c8c8);
    display: inline-block;
    width: 180px;
    height: 45px;
    color: #fff;
    text-decoration: none;
    line-height: 45px;
    margin: 20px;
    border-radius: 6px;
    font-weight: 700
}

.valuta {
    transform: translateX(106%);
    z-index: 9
}

.uploader_info a:hover {
    text-decoration: none;
    color: #fff
}

#detail_image_header {
    width: 418px;
    position: relative;
}

.modelSettings {
    width: 30px;
    height: 30px;
    background: #34c8c8;
    color: #fff;
    text-align: center;
    line-height: 30px;
    position: absolute;
    z-index: 9;
    right: 0;
    cursor: pointer;
}

.dropBack {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
}

.dropBack.fadeBack {
    opacity: 1;
    visibility: visible;
}

#dropSettingsWin {
    background: white;
    width: 230px;
    position: fixed;
    padding-left: 10px;
    padding-right: 5px;
    z-index: 9;
    box-shadow: 0 5px 7px;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    z-index: 99992;
    transition: .2s ease-in-out;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%);
}





#dropSettingsWin ul {
    padding: 0;
    margin: 0;
}

#dropSettingsWin li {
    list-style: none;
    line-height: 45px;
    font-size: 15px;
    border-bottom: 1px solid #e1e1e1;
    margin-left: 6px;
    margin-right: 6px;
}

#dropSettingsWin li:last-child {
    border: none;
}

#dropSettingsWin li a {
    text-decoration: none;
    color: #444;
    display: block;
    width: 100%;
}


#dropSettingsWin li a:active {
    color: #34c8c8;
}

#dropSettingsWin.settings_open {
    transition: .2s ease-in-out;
    opacity: 1;
    visibility: visible;
}


#title_header {
    height: 50px;
    background: #f60;
    position: relative
}

#title_header span {
    color: #fff;
    line-height: 50px;
    margin-left: 15px;
    font-size: 30px
}

#title_header span>i {
    font-size: 13px;
    height: 50px;
    vertical-align: top;
    line-height: 50px;
    margin-right: 5px
}

.original_price {
    position: absolute;
    right: 13%;
    background: #f7f7f7;
    font-size: 30px;
    margin: 19px;
    border-radius: 10px;
    color: #646464;
    border: 1px solid#f60;
    top: 0;
    padding: 5px
}

.original_price:before {
    content: '';
    position: absolute;
    width: 80%;
    height: 3px;
    background: red;
    left: 50%;
    top: 50%;
    transform: translateX(-50%)
}

#title_header a {
    position: absolute;
    color: #fff;
    margin-left: 60px;
    height: 50px;
    line-height: 50px;
    font-weight: 700;
    font-size: 20px
}

#title_header a>i {
    font-size: 25px
}

#title_header a:hover {
    text-decoration: none
}

#btn-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    margin-top: 50px
}

#btn-box {
    margin: 15px
}

#btn-name {
    background: #f60;
    width: 240px;
    display: inline flow-root list-item;
    list-style: none;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    border-radius: 4px
}

#btn-phone-wp {
    background: #f60;
    width: 240px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    border-radius: 4px;
    display: inline-block
}

#btn-phone-wp i {
    transform: rotate(90deg)
}

#danger {
    display: none
}

#btn-more {
    background: #fff;
    width: 264px;
    height: 50px;
    line-height: 50px;
    color: #f60;
    font-size: 20px;
    font-weight: 700;
    border-radius: 4px;
    display: inline-block;
    border: 1px solid #f60;
    margin-left: 47px
}

#detail-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 95%;
    margin: 25px auto;
    border-bottom: 2px solid #f60
}

.dt-box:nth-child(1) {
    width: 100%
}

.dt-box:nth-child(2) {
    width: 80%;
    margin-left: 0
}

.dt-box:nth-child(3) {
    margin-left: -10%
}

.dt-box:nth-child(4) {
    margin-top: 10px
}

.dt-box ul {
    padding: 0;
    margin: 0
}

.dt-box ul>li {
    list-style: none;
    line-height: 35px;
    color: #888;
    font-size: 15px
}

.dt-box a {
    display: block;
    border: 1px solid #f60;
    padding: 10px;
    color: #666
}

.dt-box a:hover {
    text-decoration: none;
    color: #444
}

.dt-box strong {
    margin: 10px;
    display: inline-block;
    font-size: 16px;
    color: #777
}

.dt-box a:nth-child(1) {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom: 0
}

.dt-box a:nth-child(2) {
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px
}

#title_header small {
    position: absolute;
    bottom: 10px;
    left: 190px;
    color: #fff
}

.sale_price {
    position: absolute;
    right: 0;
    background: #f7f7f7;
    font-size: 30px;
    margin: 19px;
    border-radius: 10px;
    color: #646464;
    border: 1px solid #f60;
    top: 0;
    padding: 5px
}

#diger {
    display: none
}

.page_center {
    padding: 10px;
    display: flow-root
}

#content_page {
    padding-bottom: 10px;
    overflow: hidden
}

#detail_info {
    width: 95%;
    margin: auto;
    color: #666
}

#create {
    padding: 0;
    border: 1px solid #f60;
    border-radius: 7px;
    margin: 15px
}

#create li {
    list-style-type: none;
    display: block;
    line-height: 40px
}

#create li:first-child {
    border-bottom: 1px solid #f60
}

#create li a {
    margin-left: 10px;
    color: #555;
    width: 100%;
    display: block
}

#create li a:hover {
    color: #333;
    text-decoration: none
}

.similar_ad {
    background: #fff;
    margin-top: 20px;
    padding: 10px;
    width: 100%
}

.similar_ad h4 {
    color: #666
}

.similar_ad .col-md-3 {
    margin-bottom: 20px
}

#extra_h {
    min-height: 130px;
    text-align: center;
    line-height: 130px;
    width: 100%;
    font-size: 14px;
    color: #888;
}

.category {
    min-height: 300px;
    background: #fff;
    padding: 5px
}

.category h4 {
    color: #666;
    background: linear-gradient(0deg, #ddd 50%, #eeebeb 51%);
    height: 45px;
    padding-left: 10px;
    line-height: 45px;
    border-radius: 5px;
    font-size: 15px;
    color: #444
}

.category .col-md-3 {
    margin-bottom: 20px
}

.tab-pane .col-md-3 {
    margin-bottom: 20px;
    display: inline-block;
    margin-left: -10px
}

.dropPopup {
    position: relative
}

.popup_bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    left: 0;
    top: 0;
    z-index: 99;
    display: none
}

#froget_link {
    font-size: 14px;
    margin-right: -10px;
    display: none
}

#view_pass {
    position: absolute;
    margin-top: -32px;
    margin-left: -28px
}

#correct {
    color: red;
    font-size: 14px;
    float: left;
    margin-left: 80px;
    margin-top: -9px;
    display: none
}

#dropMenu {
    padding: 10px;
    background: #fff;
    position: absolute;
    z-index: 99;
    right: 35px;
    top: 36px;
    border-radius: 6px;
    width: 356px;
    transition: .1s;
    transform: scale(0)
}

#dropMenu.open_popup_overlay {
    transition: .3s;
    transform: scale(1)
}

#dropMenu:before {
    content: '';
    width: 15px;
    height: 15px;
    background: #fff;
    transform: rotate(45deg);
    position: absolute;
    right: 100px;
    z-index: -1;
    top: -7px
}

#dropMenu table {
    width: 100%
}

#dropMenu table td {
    padding: 5px
}

.btn.btn-login {
    background: #646464;
    color: #34c8c8;
    width: 160px
}

.btn.btn-login:hover {
    color: #fff
}

.btn.btn-register {
    background: #34c8c8;
    color: #fff;
    width: 160px
}

.btn.btn-register:hover {
    color: #0c5555;
    transform: scale(1)
}

.video_view {
    width: 590px;
    height: 437px;
    background: #999;
    margin: 5px;
    display: inline-block;
    text-align: center;
    line-height: 390px;
    font-size: 50px
}

.screen_view {
    width: 590px;
    height: 437px;
    background: #999;
    margin: 5px;
    display: inline-block;
    text-align: center;
    line-height: 390px;
    font-size: 50px;
    overflow: hidden
}

.screen_view img {
    width: 100%;
    height: inherit
}

.d_albom {
    width: 480px;
    height: 350px;
    display: inline-block;
    vertical-align: top;
    margin: 5px
}

#albom {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr
}

.a_box {
    background: #fff;
    height: 120px;
    margin-right: 10px;
    overflow: hidden
}

.a_box img {
    width: 100%;
    height: 120px
}

.dcb_advertisment {
    background: #fff;
    min-height: 450px
}

.adv_content {
    width: 100%;
    padding: 10px
}

.adv_content h4 {
    font-size: 30px;
    font-weight: 600;
    color: #545757;
    margin-top: 10px
}

#zabil_parol a {
    text-decoration: none;
    color: #38c
}

.a_line {
    display: flex
}

.ad_left {
    flex: 3;
}

.ad_right {
    flex: 2;
    margin-left: 10px;
}

#ad_right_back {
    background: #f9f9f9;
    border-radius: 5px;
    padding: 10px;
    position: sticky;
    top: 50px
}

#ad_right_back ul {
    padding: 0;
    margin: 0
}

#ad_right_back li {
    font-size: 12px;
    margin-left: 10px;
    margin-bottom: 10px
}

#ad_right_back h5 {
    text-align: center;
    width: 100%;
    display: block;
    font-weight: 600;
    color: #717171
}

#ad_right_back p {
    font-size: 13px
}

#w-app {
    overflow: hidden;
    display: flex;
    justify-content: center
}

#w-app input {
    float: left;
    margin-top: 5px;
    margin-right: 5px
}

#w-check {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid #999;
    border-radius: 3px
}

#w-check:checked {
    background: #34c8c8;
    border: none;
    box-shadow: 0 0 3px
}

#w-app span {
    float: left;
    margin-left: 5px;
    color: #f60
}

.dcb_table {
    width: 100%;
    display: table;
    margin-left: -25px
}

.td {
    display: table-cell;
    vertical-align: top;
    padding: 10px
}

#arrow {
    position: absolute;
    margin: 7px;
    right: 19px;
    transform: rotate(90deg);
    color: #f60
}

#extraStyle {
    width: 70px;
    padding: 0;
    margin-left: -60px;
    position: absolute;
    margin-top: 14px;
    font-size: 15px
}

#extrainput {
    width: 230px;
    float: right
}

#td_title {
    width: 127px;
    padding-left: 17px;
    font-size: 15px
}

#td_extra {
    font-size: 10px;
    padding-left: 27px
}

#br_clear {
    width: 57px;
    border: 1px solid #ced4da;
    padding: 3px;
    margin-left: 20px;
    position: absolute;
    margin-top: -10px;
    border-radius: 3px
}

#top_line {
    width: 338px;
    height: 1px;
    background: #ddd;
    position: absolute;
    margin-left: 27px
}

.td_td {
    position: absolute;
    margin-top: -30px;
    margin-left: 152px
}

.td_td input {
    margin-left: 40px;
    position: absolute;
    margin-top: -9px;
    padding: 3px
}

.td_td span {
    position: absolute;
    margin-left: 122px;
    margin-top: -8px;
    font-size: 12px
}

.td_new {
    margin: 15px;
    display: inline-block;
    position: relative;
    margin-right: 150px;
    margin-left: 80px
}

.c_new {
    position: absolute;
    top: 0;
    left: 100px;
    width: max-content;
    margin-left: 10px
}

.c_new span {
    display: block;
    margin-left: 4px;
    font-weight: 600
}

.c_old span {
    display: block;
    font-weight: 600
}

.c_old {
    position: absolute;
    top: 0;
    left: 180px;
    width: max-content;
    margin-right: 30px
}

input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #999;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    margin: 3px;
    outline: 0
}

input[type=radio]:before {
    content: '';
    position: absolute;
    background: 0 0;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .3s
}

input:checked[type=radio]:before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .3s;
    background: #d4b038
}

.c_new b {
    float: right;
    color: red;
    margin-left: 36px;
    position: absolute;
    margin-top: -10px
}

.c_old b {
    float: right;
    color: red;
    margin-left: 60px;
    position: absolute;
    margin-top: -10px
}

.rotated {
    transform: rotate(-90deg)
}

#seeAll {
    background: #34c8c8;
    padding: 15px;
    display: block;
    width: max-content;
    margin: auto;
    text-decoration: none;
    margin-bottom: 10px;
    color: #fff;
    border-radius: 5px;
}

#seeAll:hover {
    text-decoration: none;
    box-shadow: 0 0 10px #ddd;
}


#upload_btn {
    padding: 15px;
    border-radius: 5px;
    color: #444;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 16px;
    border: 1px solid #808080;
    transition: .2s;
}

#upload_btn:hover {
    background-color: #34c8c8;
    color: #fff;
    transition: .2s;
    border: 1px solid #34c8c8;
    box-shadow: 0 0 7px #888;
}


#labVideo {
    border: none;
    padding: 16px;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(to top, #a2a0a0 50%, #b5b5b5 51%);
    position: absolute;
    font-size: 15px;
    font-weight: 600;
    margin-left: 10px;
}

#srcResult {
    color: #999;
    width: 100%;
    text-align: center;
    line-height: 150px
}

#alertQeyd {
    position: absolute;
    margin-top: -29px;
    left: 0px;
    padding: 0;
}

.add_events {
    margin-top: 15px;
    position: relative;
}

.add_events span {
    color: #f00;
    font-size: 12px;
    font-weight: 600;
    margin-left: 0px;
    padding-left: 115px;
    margin-top: 10px;
    display: block;
}

.cebe_item {
    display: inline-block;
    margin-right: 44px;
    vertical-align: top
}

.cebe_item input:disabled {
    background: #fff
}

.cebe_item table {
    width: 100%
}

.cebe_item td {
    padding-bottom: 10px
}

#qeyd {
    text-align: center;
    font-size: 12px;
    margin-top: 40px
}

#qeyd input {
    position: absolute;
    margin-top: -2px;
    margin-left: 13px;
}

#qeyd a {
    color: #34c8c8;
    text-decoration: none
}

/* #qeyd label {
    margin-left: 40px;
} */

.add {
    text-align: center;
    padding: 15px
}

#btn_add {
    width: 200px;
    padding: 10px;
    border: none;
    background: linear-gradient(0deg, #167979, #34c8c8);
    border-radius: 30px;
    color: #fff;
    box-shadow: 0 0 5px #8c8c8c;
    outline: 0
}

#img1,
#img2,
#img3,
#imglogo {
    display: none
}

#icon-play {
    position: absolute;
    z-index: 9;
    font-size: 20px;
    color: #fff;
    text-shadow: 0 0 10px #444;
    right: 21px;
    top: 3px;
}


.dcb_profile_content {
    display: flex;
    width: 100%;
    gap: 24px;
    padding: 28px 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    background: radial-gradient(ellipse at top, rgba(34, 166, 166, 0.04) 0%, transparent 60%);
    position: relative;
}

.dcb-leftbar {
    flex: 0 0 300px;
    position: relative;
    backface-visibility: hidden;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 6px 28px rgba(34, 166, 166, 0.1), 0 1px 3px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    height: fit-content;
    transition: box-shadow .35s ease, transform .35s ease;
}

.dcb-leftbar:hover {
    box-shadow: 0 10px 36px rgba(34, 166, 166, 0.14), 0 1px 3px rgba(0, 0, 0, 0.03);
}

.dcb-profilebox {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    margin: 0;
    padding: 28px 20px 24px;
    border-radius: 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.dcb-profilebox::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.dcb-profilebox::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -30px;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}

.rm_list ul {
    padding: 12px 0;
    margin: 0;
    list-style: none;
}

.rm_list ul>li {
    list-style: none;
    height: 52px;
    line-height: 52px;
    padding: 0;
    position: relative;
    font-size: 14.5px;
    transition: all .25s ease;
    margin: 2px 12px;
    border-radius: 10px;
}

.rm_list ul>li>a {
    color: #4a5568;
    text-decoration: none;
    display: block;
    padding: 0 18px;
    font-weight: 500;
    transition: color .25s ease;
}

#go_arrow {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%) translateX(-6px);
    color: #22a6a6;
    font-size: 12px;
    margin: 0;
    opacity: 0;
    transition: all .25s ease;
}

.rm_list ul>li:hover {
    background: linear-gradient(135deg, rgba(34, 166, 166, 0.08) 0%, rgba(52, 200, 200, 0.08) 100%);
    padding-left: 0;
    transform: translateX(2px);
}

.rm_list ul>li:hover>a {
    color: #22a6a6;
}

.rm_active #go_arrow {
    margin: 0;
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.rm_list ul>li span {
    float: left;
    padding: 0;
    margin-top: 14px;
    margin-right: 12px;
    width: 28px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.seperator {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e2e8f0 50%, transparent 100%);
    margin: 4px 20px;
}

.rm_list ul>li span svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    color: #22a6a6;
    transition: transform .25s ease;
}

.rm_list ul>li:hover span svg {
    transform: scale(1.1);
}

.rm_list ul>li.rm_active {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    padding-left: 0;
    box-shadow: 0 4px 12px rgba(34, 166, 166, 0.25);
}

.rm_list ul>li.rm_active>a,
.rm_list ul>li.rm_active span svg {
    color: #fff;
}

.rm_list ul>li.rm_active #go_arrow {
    color: #fff;
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.rm_list ul>li:hover #go_arrow {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    transition: .25s ease;
}

#pr_link {
    text-decoration: none
}

#pr_link:hover {
    text-decoration: none
}

#proImage {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.5);
    margin: 0 auto 14px;
    position: relative;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    z-index: 1;
    animation: avatarFloat 4s ease-in-out infinite;
    transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#proImage:hover {
    transform: scale(1.06);
}

.pro_imgBox {
    animation: avatarFloat 4s ease-in-out infinite;
    transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pro_imgBox:hover {
    transform: scale(1.04);
}

@keyframes avatarFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dcb-leftbar,
.list_items {
    animation: cardFadeIn .5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.dcb-centerbar,
.result_content {
    animation: cardFadeIn .5s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: .08s;
}

#proImage:hover {
    animation-play-state: paused;
}

.pro_imgBox:hover {
    animation-play-state: paused;
}

#proImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#profile {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    box-shadow: none;
}

.dcb-profilebox span {
    margin: 0;
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.remove {
    color: #666;
    text-decoration: none
}

.page-title.gld-shop {
    font-size: 30px;
    color: #22a6a6;
    border-bottom: 1px dotted #34c8c8;
    padding-bottom: 10px;
    width: 90%;
    margin-bottom: 15px
}

.page-title.new-model {
    font-size: 30px;
    color: #22a6a6;
    border-bottom: 1px dotted #34c8c8;
    padding-bottom: 10px;
    width: 90%;
    margin-bottom: 15px
}

.page-title.gld-company {
    font-size: 30px;
    color: #22a6a6;
    border-bottom: 1px dotted #34c8c8;
    padding-bottom: 10px;
    width: 90%;
    margin-bottom: 15px
}

.edit-content {
    background: #fff;
    width: 500px;
    margin: 10px auto;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 0 5px #999
}

.btn.btn-update {
    background: #f60;
    color: #fff
}

.btn.btn-update:hover {
    color: #fff;
    text-decoration: none
}

.edit-content small {
    display: block;
    width: 100%;
    margin: 10px 0
}

.edit-content small:before {
    content: none
}

#azn {
    position: absolute;
    top: 52%;
    right: 10px
}

#card-img {
    width: 25%
}

#crad-body {
    padding: 5px
}

.preview {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 16px;
    vertical-align: top;
    position: relative
}

.preview #a_remove {
    float: left;
    margin-left: 10px
}

.preview #a_rotate {
    float: right;
    margin-right: 10px
}

.preview img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 0 5px
}

.btn.btn-change {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 13px 32px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.3px;
    box-shadow: 0 6px 18px rgba(34, 166, 166, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.btn-change:hover {
    background: linear-gradient(135deg, #178585 0%, #22a6a6 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(34, 166, 166, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn.btn-change:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(34, 166, 166, 0.25);
}

.user-settings-form {
    width: 100%;
}

.user-settings-form .t_header {
    margin-bottom: 28px;
}

.user-settings-form .form-row {
    display: flex;
    gap: 18px;
    margin-bottom: 0;
}

.user-settings-form .form-col {
    flex: 1;
    min-width: 0;
}

.user-settings-form .form-actions {
    margin-top: 12px;
    text-align: right;
}

@media (max-width: 600px) {
    .user-settings-form .form-row {
        flex-direction: column;
        gap: 0;
    }

    .user-settings-form .form-actions {
        text-align: stretch;
    }

    .user-settings-form .btn.btn-change {
        width: 100%;
    }
}

.dcb-centerbar {
    flex: 1;
    margin: 0;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 6px 28px rgba(34, 166, 166, 0.1), 0 1px 3px rgba(0, 0, 0, 0.03);
    padding: 28px;
    min-height: 400px;
    transition: box-shadow .35s ease;
}

.dcb-centerbar:hover {
    box-shadow: 0 10px 36px rgba(34, 166, 166, 0.14), 0 1px 3px rgba(0, 0, 0, 0.03);
}

.dcb-centerbar .col-md-4 {
    margin-bottom: 20px
}

@media (max-width: 992px) {
    .dcb_profile_content {
        flex-direction: column;
        padding: 16px 12px;
        gap: 16px;
    }

    .dcb-leftbar {
        flex: 1 1 auto;
        width: 100%;
    }

    .dcb-centerbar {
        padding: 16px;
    }
}

.g_right_content .col-md-4 a {
    cursor: move
}

.forget img {
    width: 100%
}

.dcb-imagebox {
    border: 1px solid #f4f4f4;
    height: 225px;
    text-align: center;
    margin: 10px;
    overflow: hidden;
    background: #eee;
    margin-bottom: 0
}

.dcb-imagebox img {
    width: 100%;
    height: inherit
}

.row.pagesRow .col-md-3:hover .dcb-titlebox {
    box-shadow: 0 8px 6px -5px #999;
    transition: .2s
}

.dcb-titlebox {
    border: 1px solid #f4f4f4;
    margin: 0 10px;
    position: relative
}

.gld-shopLogo {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-top: -18px;
    margin-left: -15px;
    background: #fff;
    box-shadow: 0 0 5px;
    text-align: center;
    overflow: hidden;
    line-height: 70px
}

.gld-shopLogo img {
    height: inherit;
    transform: scale(1.1);
    width: 100%
}

.row.pagesRow .col-md-3 {
    margin-top: 30px
}

.row.pagesRow .col-md-3 a {
    text-decoration: none;
    color: #555
}

.dcb-titlebox span {
    font-size: 12px;
    display: block;
    margin: 5px;
    word-wrap: break-word
}

.dcb-titlebox span:nth-child(1) {
    font-weight: 700;
    color: #444;
    font-size: 18px
}

#filter_search {
    background: #fff;
    position: absolute;
    z-index: 90;
    width: 100%;
    margin: 0;
    padding: 0;
    margin-top: 6px;
    border-radius: 5px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 8px #999;
}

#filter_search li {
    list-style: none;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid#ddd;
    text-align: left
}

#filter_search li:last-child {
    border: none
}

#filter_search li a {
    color: #444;
    margin-left: 10px;
    display: block;
    width: 100%;
    text-decoration: none
}

.profile-detail {
    width: 100%;
    display: flex;
    background: #fff;
    margin-bottom: 15px;
    padding: 10px;
    padding-top: 30px
}

.p_left {
    width: 220px
}

.p_content {
    flex: 3;
    padding: 5px;
    margin-left: 15px
}

.header_table {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr
}

.tabl {
    text-align: center;
    display: grid;
    padding: 5px;
    font-weight: 600;
    background: #34c8c8;
    color: #fff
}

.s_about {
    margin-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.s_about p {
    word-break: break-all;
}

.s_photos {
    display: flex
}

.p_img {
    flex: 1;
    background: #ddd;
    margin: 5px;
    height: 263px;
    position: relative;
    overflow: hidden
}

.add_img:hover {
    box-shadow: 0 0 7px #444;
}

.add_img {
    position: absolute;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #34c8c8;
    right: 0;
    color: #fff;
    transition: .2s;
    cursor: pointer;
}

#shop-logo {
    flex: 0;
    margin-right: 30px
}

#optionDrop {
    font-size: 12px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-top: 10px;
}

#dcbTable .dropdown-item {
    padding-left: 10px;
}

#dcbTable .dropdown-menu {
    padding: 0;
}

.dropdownitem {
    padding-left: 10px;
    display: block;
    line-height: 40px;
}

.colTbale p {
    margin: 0;
    display: inline-block;
}

ul#userDropdown .rounded-pill.bg-danger {
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    left: 47%;
    top: 14px;
}

ul#userDropdown li a {
    position: relative;
}

.alertCircle {
    width: 10px;
    height: 10px;
    background: red;
    position: absolute;
    top: 14px;
    right: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-right: 10px;
}


#al_circle {
    position: relative;
    width: max-content;
    margin: auto;
}

#al_circle::before {
    content: '';
    width: 10px;
    height: 10px;
    background: red;
    position: absolute;
    top: 14px;
    right: -5px;
    border-radius: 50%;
    border: 2px solid #fff;
    z-index: 999999;
}

.logo-image {
    width: 210px;
    height: 190px;
    background: transparent;
    border-radius: 6px;
    text-align: center;
    position: relative;
    overflow: hidden
}

.logo-image a img {
    height: 150px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    bottom: 10px;
    border: 1px solid #e1e1e1;
    box-shadow: 5px 5px 5px #888;
}

.balance_box{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:24px;background:#fff;border:1px solid #eee;border-radius:12px;}
.balance_card{display:flex;flex-direction:column;gap:6px;}
.balance_label{font-size:13px;color:#888;}
.balance_amount{font-size:30px;font-weight:700;color:#1f2937;}
.balance_add_btn{display:inline-flex;align-items:center;background:#0f766e;color:#fff;border:none;border-radius:8px;padding:12px 20px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s;}
.balance_add_btn:hover{background:#0d655e;}
.balance_modal_overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;align-items:center;justify-content:center;}
.balance_modal_overlay.is-open{display:flex;}
.balance_modal{width:100%;max-width:380px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.balance_modal_head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #eee;}
.balance_modal_head h4{margin:0;font-size:16px;color:#1f2937;}
.balance_modal_close{background:none;border:none;font-size:24px;line-height:1;color:#999;cursor:pointer;}
.balance_modal_body{padding:20px;}
.balance_modal_body label{display:block;font-size:13px;color:#555;margin-bottom:8px;}
.balance_modal_body input{width:100%;padding:12px 14px;border:1px solid #ddd;border-radius:8px;font-size:15px;outline:none;box-sizing:border-box;}
.balance_modal_body input:focus{border-color:#0f766e;}
.balance_modal_error{display:none;color:#dc2626;font-size:12px;margin-top:8px;}
.balance_modal_error.is-visible{display:block;}
.balance_modal_foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;border-top:1px solid #eee;}
.balance_modal_cancel{background:#f3f4f6;color:#374151;border:none;border-radius:8px;padding:10px 16px;font-size:14px;cursor:pointer;}
.balance_modal_submit{background:#0f766e;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;}
.balance_modal_submit:hover{background:#0d655e;}
.t_header svg {
    height: 40px;
    float: left;
    margin-top: 5px;
}

.logo-image img {
    height: 150px;
    position: absolute;
    left: 0;
    border-radius: 50%;
    bottom: 0px;
    border: 1px solid #e1e1e1;
    box-shadow: 5px 5px 5px #888;
}

.s_name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    text-align: center;
    color: #2d3748;
    letter-spacing: 0.3px;
    padding: 0 16px;
}

.s_name>span {
    display: block;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.s_paket {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1;
}

.s_paket i {
    margin-right: 6px;
    font-size: 11px;
}

.s_paket.pkt-free {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e0 100%);
    color: #2d3748;
}

.s_paket.pkt-silver {
    background: linear-gradient(135deg, #c0c5cc 0%, #8a929d 100%);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(138, 146, 157, 0.3);
}

.s_paket.pkt-gold {
    background: linear-gradient(135deg, #f6c33d 0%, #e0a721 100%);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(224, 167, 33, 0.35);
}

.list_items li a i.menu-ico {
    width: 22px;
    margin-right: 10px;
    color: #22a6a6;
    font-size: 14px;
    text-align: center;
    transition: color .25s ease;
}

.list_items li:hover a i.menu-ico {
    color: #22a6a6;
}

.list_items .set_active a i.menu-ico {
    color: #ffffff;
}

.empty_state {
    text-align: center;
    padding: 60px 20px;
    color: #a0aec0;
}

.empty_state i {
    font-size: 64px;
    color: #cbd5e0;
    margin-bottom: 18px;
    display: block;
}

.empty_state h4 {
    color: #4a5568;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 6px;
}

.empty_state p {
    font-size: 14px;
    color: #718096;
    margin: 0;
}

.logo-image a {
    display: block;
    height: 150px
}

.logo-image span {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.closeDropdownmenu {
    background: 0 0;
    height: 48px;
    width: 100px;
    position: absolute;
    right: 110px;
    top: -5px;
    cursor: pointer;
    display: none
}

.com_title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 18px auto 50px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: #4a5568;
    padding: 14px 26px;
    background: linear-gradient(135deg, rgba(34, 166, 166, 0.06) 0%, rgba(255, 102, 0, 0.05) 100%);
    border-radius: 100px;
    border: 1px dashed rgba(34, 166, 166, 0.25);
    max-width: 540px;
    letter-spacing: 0.2px;
}

.com_title img {
    width: 32px;
    height: 32px;
    margin: 0;
    animation: tagWiggle 3s ease-in-out infinite;
}

.com_title span {
    background: linear-gradient(135deg, #22a6a6 0%, #ff6600 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

@keyframes tagWiggle {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-8deg);
    }

    75% {
        transform: rotate(8deg);
    }
}

.shop-number li a {
    color: #444;
    text-decoration: none
}

.shop-number li a:hover {
    color: #34c8c8
}

#upp-label {
    position: absolute;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    width: 40px;
    margin: 0;
    top: 10px;
    right: 6%;
    background: #34c8c8;
    height: 40px;
    line-height: 40px;
    transition: .4s;
    z-index: 99;
    transform: translateX(-50%);
    border-radius: 50%;
}

#upp-label:hover {
    box-shadow: 0 0 5px #666;
}

#change-upp-label {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    font-size: 17px;
    color: #b0b0b0;
    cursor: pointer;
    width: 100%;
    height: 30px;
    margin-bottom: 0;
    left: 0
}

#shop-info {
    flex: 2;
    padding: 5px;
    position: relative;
    padding-right: 10px
}

#shop-info::before {
    content: '';
    position: absolute
}

#shop-info a {
    display: block;
    width: 100%;
    color: #555;
    font-weight: 700;
    font-size: 22px
}

#shop-info p {
    font-size: 14px;
    word-wrap: anywhere;
    font-size: 12px;
    margin-top: 15px
}

#shop-contact {
    flex: 2
}

#shop_images {
    display: flex;
    border-bottom: 1px solid #999;
    margin-bottom: 20px
}

#imgBox {
    background: #f1f1f1;
    height: 263px;
    background-size: cover;
    background-position: center
}

.dropzone_box {
    flex: 1;
    margin: 10px
}

.dropzone_box span {
    display: block;
    height: 290px;
    background: #f1f1f1;
    line-height: 290px;
    text-align: center
}

.shop-number {
    margin: 5px auto
}

.shop-number ul {
    padding: 0;
    margin: 0
}

.shop-number li {
    list-style: none;
    line-height: 35px;
    font-size: 14px;
    word-wrap: break-word
}

.shop-number .fab,
.shop-number .far,
.shop-number .fas {
    margin-right: 10px
}

.shop-number span:nth-child(1) {
    font-size: 30px;
    display: inline-block;
    padding: 5px;
    float: left;
    margin-right: 15px;
    transform: rotate(100deg);
    color: #f60
}

.shop-number span:nth-child(2),
.shop-number span:nth-child(3) {
    display: block;
    font-weight: 700;
    font-size: 15px
}

.shop-adress {
    width: 320px;
    margin: 30px auto
}

.shop-adress span:nth-child(1) {
    font-size: 30px;
    display: inline-block;
    padding: 5px;
    float: left;
    margin-right: 15px;
    color: #f60
}

.shop-adress span:nth-child(2) {
    display: block;
    font-size: 15px;
    float: left;
    margin-top: 16px;
    margin-left: 5px
}

#countModel {
    display: inline-block;
    margin-left: 15px;
    border: 2px solid #34c8c8;
    padding: 5px;
    border-radius: 8px;
    text-align: center
}

#room {
    background: linear-gradient(0deg, #0b6693, #34c8c8);
    padding: 7px;
    width: 120px;
    display: inline-block;
    text-align: center;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    float: right;
    margin: 5px
}

#emailplaceholder {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    color: #999;
    transition: .3s
}

#passwordplaceholder {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    color: #999;
    transition: .3s
}

.labactive {
    margin-top: -20px;
    transition: .3s;
    font-size: 12px;
    background: #fff;
    padding-left: 10px;
    padding-right: 10px
}

#cat_select {
    display: grid;
    grid-template-columns: 1fr 1fr
}

#cat_select select {
    margin-right: 10px;
    border: 1px solid #ccc;
    padding: 7px;
    border-radius: 5px;
    -webkit-appearance: initial
}

#cat_select select:last-child {
    margin-right: 0
}

#shopheader {
    background: #646464;
    color: #34c8c8
}

.btn.btn-shop {
    background: #646464;
    color: #34c8c8
}

.raiting {
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 20px;
    margin-left: 15px
}

.raiting li {
    float: left;
    list-style: none
}

.rating {
    overflow: hidden;
    position: inherit
}

#elan_list {
    display: block;
    overflow: hidden;
    z-index: 99999
}

.addshop {
    padding: 5px;
    margin: 10px
}

.shop-left {
    min-height: 100vh;
    min-width: 40%
}

.shop-right {
    margin-top: 10px;
    min-height: auto;
    min-width: 55%
}

.dcb-detail {
    margin-top: 10px;
    text-align: center
}

.dcb_detail_image {
    float: left;
    position: relative;
    width: 180px;
    overflow: hidden
}

.detail_image {
    width: 180px
}

.dcb_detail_text {
    float: left;
    width: 340px;
    font-size: 20px;
    text-align: center;
    margin-top: 50px
}

.dcb_detail_text span {
    color: #34c8c8
}

.dcb_detail_text_bootm span {
    color: #34c8c8
}

.dcb_detail_text_bootm {
    width: 100%;
    float: left;
    font-size: 20px;
    margin-top: 50px;
    text-align: center
}

#questionimg {
    width: 200px
}

#dcb_card {
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    overflow: hidden;
    height: 100px;
    width: 118px;
}

#img_load {
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    overflow: hidden;
    height: 100px;
    width: 118px;
    text-align: center;
    line-height: 100px;
    border: 1px solid #999;
    border-radius: 4px;
    background: transparent;
}

#dcb_card img {
    height: 100px;
    object-fit: cover;
    width: 100%;
}

#crad-body {
    padding: 3px;
    background: #fdfaf3;
    overflow: hidden
}

.imageResult {
    margin-bottom: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    max-height: 220px;
    overflow: auto;
    margin: 15px auto;
    scrollbar-width: thin;
}


/* width */
.imageResult::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.imageResult::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.imageResult::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
.imageResult::-webkit-scrollbar-thumb:hover {
    background: #555;
}





.remove {
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    float: left;
    vertical-align: top;
    border: none;
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 5px;
    position: absolute;
    top: 5px;
    right: 5px;
    background: #34c8c8;
    line-height: 25px;
}

.remove:hover {}

#answer {
    text-align: left;
    margin-top: 25px
}

#answer li {
    list-style: none;
    margin-bottom: 30px;
    color: #333;
    font-size: 17px;
    font-weight: 600;
    position: relative;
    padding-left: 40px
}

#answer li:first-child span {
    position: absolute;
    left: 0;
    top: 12px
}

#answer span {
    position: absolute;
    left: 0;
    top: -2px
}

#answer span img {
    width: 30px
}

#image-gallery img {
    width: 100%;
    height: 400px;
    object-fit: contain
}

.contact {
    height: 100vh;
    display: flex
}

.con_left {
    flex: 1
}

.con_right {
    flex: 1
}

#pos_right {
    position: absolute;
    top: 0;
    margin: 7px;
    right: 10px;
    color: green;
}

.gld_contact h3 {
    color: #34c8c8;
    margin-top: 20px;
    margin-bottom: 40px
}

.con_left ul {
    padding: 0;
    margin: 0;
    margin-top: 10px;
    margin-bottom: 10px
}

.con_left ul>li {
    list-style: none
}

.con_left ul>li>a {
    color: #888;
    text-decoration: none
}

.con_left ul>li>a:hover {
    color: #444
}

.con_left i {
    display: inline-block;
    width: 23px;
    height: 23px;
    text-align: center;
    line-height: 23px
}

.con_left ul>li p {
    font-size: 13px;
    color: #888
}

#gld_form {
    margin-top: 80px;
    padding-left: 50px;
    padding-right: 10px
}

.advertisment {
    min-height: 100vh;
    display: flex
}

.right_text {
    flex: 3;
    margin: 10px;
    padding-left: 20px
}

.left_nav {
    flex: 1;
    margin: 10px
}

.left_nav ul {
    background: #ddd;
    padding: 0;
    margin: 0
}

.left_nav ul>li {
    list-style: none;
    background: #34c8c8;
    line-height: 35px;
    padding-left: 10px;
    color: #fff;
    position: relative
}

.left_nav ul>li::before {
    content: '';
    position: absolute;
    top: 0;
    right: -34px;
    border: 17px;
    border-style: solid;
    border-color: #34c8c8;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent
}

.right_text h3 {
    font-weight: 700
}

.right_text a {
    display: block;
    color: #444;
    margin-bottom: 10px
}

.right_text a:hover {
    text-decoration: none;
    color: #34c8c8;
    text-shadow: 0 0 5px;
    width: max-content
}

#gld_advertising {
    width: 100%;
    background: none;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 20px;
    text-align: center;
}

#gld_advertising_extra {
    width: 100%;
    background: none;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 20px;
    margin-left: 0
}

#gld_advertising_extra img {
    object-fit: cover;
    width: 100%;
}

.iconSvg {
    width: 20px;
    display: inline-block;
    margin-right: 10px
}

.ph path {
    fill: #34c8c8
}

.wp path {
    fill: #09aa09
}

.em path {
    fill: #777
}

.agr_content {
    min-height: 100vh;
    margin-top: 25px
}

.follow_btn {
    display: grid;
    grid-template-columns: 1fr 1fr
}

#btn_follow {
    background: #34c8c8;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    padding: 6px;
    text-align: center;
    border-radius: 5px;
    margin-right: 5px
}

#btn_remove_follow {
    background: #666;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    padding: 6px;
    text-align: center;
    border-radius: 5px;
    margin-right: 5px
}

#btn_follow:nth-child(2) {
    background: #061127;
    color: #34c8c8
}

.gl_badge {
    color: red;
    font-weight: 700;
    position: absolute;
    margin-top: -10px;
    margin-left: -5px
}

#btn_settings_shop {
    padding: 7px;
    width: 120px;
    display: inline-block;
    text-align: center;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    float: right;
    margin: 5px
}

.dcb_advertisment {
    padding: 20px;
    background-color: var(--bg-light);
}

.adv_content {
    background: #fff;
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.adv_content h4 {
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
    font-size: 24px;
}

.a_line {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

@media (max-width: 992px) {
    .a_line {
        grid-template-columns: 1fr;
    }
}

.form-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 25px 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gold-primary);
    display: inline-block;
}

.form-group-custom {
    margin-bottom: 20px;
}

.form-group-custom label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: #555;
}

.form-group-custom .form-control,
.form-group-custom select,
.form-group-custom input[type="text"],
.form-group-custom input[type="email"],
.form-group-custom input[type="tel"],
.form-group-custom textarea {
    width: 100%;
    padding: 0px 16px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background-color: #fff;
    transition: all 0.3s ease;
    font-size: 14px;
}

.form-group-custom .form-control:focus {
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    outline: none;
}

.form-group-custom select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    appearance: none;
}

#upload_btn {
    display: inline-block;
    padding: 12px 20px;
    background: var(--gold-primary);
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    font-weight: 600;
}

#upload_btn:hover {
    background: var(--gold-hover);
}

.dropzone {
    border: 2px dashed var(--gold-primary) !important;
    background: #fff9e6 !important;
    border-radius: var(--radius) !important;
    min-height: 150px !important;
}

.ad_right_back {
    background: #fff;
    padding: 25px;
    border-radius: var(--radius);
    border-left: 5px solid var(--gold-primary);
    position: sticky;
    top: 20px;
}

.ad_right_back ul {
    padding-left: 20px;
    list-style-type: none;
}

.ad_right_back ul li {
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.6;
    position: relative;
}

.ad_right_back ul li::before {
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: -25px;
    color: var(--gold-primary);
}

/* Yeni Səliqəli Radio Düymə Stili */
.delivery-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.delivery-card {
    position: relative;
    cursor: pointer;
}

.delivery-card input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.delivery-card label {
    display: block;
    padding: 15px;
    text-align: center;
    background: #fff;
    border: 2px solid #eee;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    margin: 0;
}

.delivery-card input:checked+label {
    border-color: var(--gold-primary);
    background-color: #fffdf5;
    color: var(--gold-primary);
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.1);
}

.delivery-card:hover label {
    border-color: #ddd;
}

#btn_add {
    background: var(--gold-primary);
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.3s;
    width: 100%;
    text-transform: uppercase;
}

#btn_add:hover {
    background: var(--gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.price-row {
    display: flex;
    gap: 15px;
    align-items: center;
}

.radio-group {
    display: flex;
    gap: 15px;
    align-items: center;
}

.currency-toggle {
    display: flex;
    background: #f2f2f2;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    user-select: none;
}

.currency-toggle input {
    display: none;
}

.currency-toggle label {
    padding: 8px 14px;
    margin: 0 !important;
    cursor: pointer;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #777;
    transition: all 0.2s ease;
}

.currency-toggle input:checked+label {
    background: #fff;
    color: var(--gold-primary);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.personal-info-card h5 {
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-dark);
}

#qeyd {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px;
    text-align: left !important;
}

#qeyd input[type="radio"] {
    margin: 4px 0 0 0 !important;
    flex-shrink: 0;
    position: relative !important;
}

.opt_content {
    /* min-height: 100vh; */
    display: flex;
    gap: 24px;
    padding: 28px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    background: radial-gradient(ellipse at top, rgba(34, 166, 166, 0.04) 0%, transparent 60%);
    position: relative;
}

.list_items {
    flex: 0 0 280px;
    padding: 0;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 6px 28px rgba(34, 166, 166, 0.1), 0 1px 3px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    height: fit-content;
    padding-bottom: 12px;
    transition: box-shadow .35s ease;
}

.list_items:hover {
    box-shadow: 0 10px 36px rgba(34, 166, 166, 0.14), 0 1px 3px rgba(0, 0, 0, 0.03);
}

.list_items ul {
    padding: 8px 0;
    margin: 0
}

.list_items li {
    list-style-type: none;
    height: 50px;
    line-height: 50px;
    border-top: none;
    margin: 2px 12px;
    border-radius: 10px;
    transition: all .25s ease;
    position: relative;
}

.list_items li svg {
    width: 20px;
    margin-right: 10px;
    margin-top: -3px;
    color: #22a6a6;
}

.list_items li a {
    padding-left: 18px;
    color: #4a5568;
    text-decoration: none;
    display: block;
    font-weight: 500;
    font-size: 14.5px;
    border-radius: 10px;
    transition: color .25s ease;
}

.list_items li:hover {
    background: linear-gradient(135deg, rgba(34, 166, 166, 0.08) 0%, rgba(52, 200, 200, 0.08) 100%);
    transform: translateX(2px);
}

.list_items li:hover a {
    color: #22a6a6;
    background: transparent;
}

.set_active {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%) !important;
    box-shadow: 0 4px 12px rgba(34, 166, 166, 0.25);
}

.list_items .set_active a {
    color: #ffffff
}

.list_items .set_active:hover {
    transform: translateX(2px);
}

.list_items .set_active:hover a {
    color: #ffffff;
}

.list_items li:first-child {
    border: none
}

.result_content {
    flex: 1;
    margin-left: 0;
    padding: 28px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 6px 28px rgba(34, 166, 166, 0.1), 0 1px 3px rgba(0, 0, 0, 0.03);
    min-height: 400px;
    transition: box-shadow .35s ease;
}

.result_content:hover {
    box-shadow: 0 10px 36px rgba(34, 166, 166, 0.14), 0 1px 3px rgba(0, 0, 0, 0.03);
}

.result_content ul {
    padding: 0;
    margin: 0
}

.result_content li {
    list-style: none;
    min-height: 50px;
    line-height: 50px;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

.result_content li>a {
    float: right
}

.pro_imgBox {
    width: 130px;
    height: 130px;
    background: #fff;
    margin: 24px auto 12px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(34, 166, 166, 0.18);
    border: 4px solid #ffffff;
    outline: 2px solid rgba(34, 166, 166, 0.15);
}

.pro_imgBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item_img {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    float: left;
    margin-right: 14px;
    border-radius: 50%;
    margin-top: 8px;
    margin-left: 5px;
    box-shadow: 0 3px 8px rgba(34, 166, 166, 0.2);
}

#btn_remove_follow {
    background: #ddd;
    color: #555
}

.following_list {
    margin-top: 20px
}

.following_list li a {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    min-width: 110px;
    text-align: center;
    color: #fff;
    border-radius: 8px;
    height: 36px;
    line-height: 36px;
    margin-top: 10px;
    margin-right: 6px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    transition: all .25s ease;
    box-shadow: 0 2px 8px rgba(34, 166, 166, 0.2);
}

.following_list li a:hover {
    text-decoration: none;
    background: linear-gradient(135deg, #178585 0%, #22a6a6 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 166, 166, 0.3);
}

.following_list li {
    padding: 6px 12px;
    min-height: 60px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: #fafafa !important;
    transition: background .25s ease;
}

.following_list li:hover {
    background: #f0f9f9 !important;
}

#dlt_follow {
    min-width: 36px !important;
    width: 36px;
    background: linear-gradient(135deg, #e53935 0%, #d02325 100%) !important;
    color: #fff;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(208, 35, 37, 0.2) !important;
}

#dlt_follow:hover {
    background: linear-gradient(135deg, #c81e1e 0%, #a01818 100%) !important;
    box-shadow: 0 4px 12px rgba(208, 35, 37, 0.3) !important;
}

#block_div {
    text-align: center;
    width: 100%;
    font-size: 25px;
    padding: 20px;
    color: #888
}

.following_list li>span {
    float: left;
    line-height: 60px;
    font-weight: 500;
    color: #2d3748;
}

#remove_follow_btn {
    background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%) !important;
    box-shadow: 0 2px 8px rgba(117, 117, 117, 0.2) !important;
}

.result_content .far,
.result_content .fas {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 8px;
    color: #22a6a6;
    background: rgba(34, 166, 166, 0.08);
    transition: all .25s ease;
}

.result_content a:hover .far,
.result_content a:hover .fas {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(34, 166, 166, 0.25);
}

.pro_imgBox:hover #i_photo {
    bottom: 0;
    transition: .5s ease-in-out
}

#i_photo {
    padding: 0;
    margin: 0;
    color: #fff;
    position: absolute;
    width: 100%;
    height: 50px;
    background: rgba(0, 0, 0, .5);
    bottom: -100px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    transition: .5s ease-in-out
}

.option_me {
    margin-top: 24px;
    padding: 0;
}

.option_me .form-group {
    margin-bottom: 20px;
}

.option_me label {
    font-size: 12px;
    font-weight: 700;
    color: #718096;
    margin-bottom: 8px;
    letter-spacing: 0.8px;
    display: block;
    text-transform: uppercase;
}

.option_me .form-control {
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 14.5px;
    color: #2d3748;
    background: #fafbfc;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
    height: auto;
    width: 100%;
}

.option_me .form-control::placeholder {
    color: #a0aec0;
    font-weight: 400;
}

.option_me .form-control:hover {
    border-color: #cbd5e0;
    background: #ffffff;
}

.option_me .form-control:focus {
    border-color: #22a6a6;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(34, 166, 166, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.02);
    outline: none;
    transform: translateY(-1px);
}

.option_me textarea.form-control {
    min-height: 130px;
    resize: vertical;
    line-height: 1.6;
}

.option_me .btn.btn-success {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    border: none;
    border-radius: 12px;
    padding: 13px 32px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.3px;
    box-shadow: 0 6px 18px rgba(34, 166, 166, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.option_me .btn.btn-success:hover {
    background: linear-gradient(135deg, #178585 0%, #22a6a6 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(34, 166, 166, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.option_me .btn.btn-success:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(34, 166, 166, 0.25);
}

/* Icon-inside-input pattern */
.input-wrap {
    position: relative;
}

.input-wrap .input-ico {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #a0aec0;
    font-size: 14px;
    pointer-events: none;
    transition: color .3s ease, transform .3s ease;
    z-index: 2;
}

.option_me .form-control.has-ico {
    padding-left: 44px;
}

.input-wrap .form-control:focus~.input-ico,
.input-wrap:focus-within .input-ico {
    color: #22a6a6;
    transform: translateY(-50%) scale(1.1);
}

.input-wrap .form-control.is-locked {
    background: #f1f5f9 !important;
    color: #718096 !important;
    cursor: not-allowed;
}

.input-wrap .lock-hint {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #a0aec0;
    font-size: 13px;
    pointer-events: none;
}

/* Shine sweep effect on buttons */
.btn-shine {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
    transform: skewX(-25deg);
    transition: left .6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1;
}

.btn-shine:hover::before {
    left: 125%;
}

.btn-shine>* {
    position: relative;
    z-index: 2;
}

.forw_content {
    min-height: 100vh;
    margin-top: 15px;
    display: flex
}

.g_right_content {
    flex: 3
}

.g_right_content .col-md-4 {
    margin-bottom: 15px
}

.leftBar {
    flex: 1;
    background: #f0f0f0;
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px
}

.leftBar ul {
    padding: 0;
    margin: 0;
    margin-top: 15px
}

.leftBar ul>li {
    list-style: none;
    font-size: 13px;
    line-height: 40px;
    border-top: 1px dotted #666
}

.leftBar li>a {
    color: #777;
    padding-left: 5px;
    text-decoration: none;
    display: block
}

.leftBar li:hover,
.leftBar li:hover a {
    background: #34c8c8;
    color: #fff
}

.leftBar li:first-child {
    font-size: 16px;
    font-weight: 600;
    padding-left: 5px;
    border: none
}

.leftBar li:hover:first-child {
    background: 0 0;
    color: #333
}

fieldset {
    margin-top: 15px;
    border: 1px solid #d5d5d5;
    padding: 10px
}

legend {
    font-size: 15px
}

.s_header {
    background: linear-gradient(0deg, #34c8c8 50%, #5ecece 51%);
    margin-bottom: 15px;
    height: 45px;
    border-radius: 3px;
    line-height: 45px;
    margin-right: 15px;
    margin-left: 15px
}

.s_header a {
    color: #fff;
    text-decoration: none;
    padding-left: 10px;
    text-shadow: 1px 0 1px #777
}

.s_header a:hover {
    text-decoration: none;
    color: #fff
}

.myTab {
    margin-top: 20px;
    border-radius: 12px;
    overflow: hidden;
}

.myTab a {
    color: #777;
    text-decoration: none;
}

.myTab tr {
    transition: background .25s ease;
}

.myTab tr:hover {
    background: #f7fafc;
}

.myTab td {
    padding: 14px 18px !important;
    border-top: 1px solid #f0f0f0 !important;
    vertical-align: middle !important;
    font-size: 14.5px;
    color: #2d3748;
}

.table.table-striped.myTab>tbody>tr:nth-of-type(odd) {
    background-color: #fafbfc;
}

.table.table-striped.myTab>tbody>tr:nth-of-type(even) {
    background-color: #ffffff;
}

.fwTab span {
    line-height: 43px
}

.t_header {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    min-height: 52px;
    border-radius: 12px;
    line-height: 52px;
    padding: 0 22px;
    color: #fff;
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 14px rgba(34, 166, 166, 0.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.t_header a {
    color: #fff !important;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.18);
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    transition: background .25s ease;
    margin-right: 0 !important;
}

.t_header a:hover {
    background: rgba(255, 255, 255, 0.28);
    text-decoration: none;
}

#btn_remove_model {
    position: absolute;
    z-index: 99;
    background: red;
    width: 30px;
    height: 30px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    line-height: 28px;
    cursor: pointer;
    top: 2px;
    right: 17px;
    transform: scale(0);
    transition: .3s
}

#btn_update_model {
    position: absolute;
    z-index: 99;
    background: #38c;
    width: 30px;
    height: 30px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    line-height: 28px;
    cursor: pointer;
    top: 2px;
    right: 17px;
    transform: scale(0);
    transition: .3s
}

.col-md-4:hover #btn_update_model {
    transform: scale(1);
    transition: .3s
}

#btn_update_model:hover {
    box-shadow: 0 0 5px #444
}

#btn_block_model {
    position: absolute;
    z-index: 99;
    background: #444;
    width: 30px;
    height: 30px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    line-height: 28px;
    cursor: pointer;
    top: 2px;
    right: 17px;
    transform: scale(0);
    transition: .3s
}

.col-md-4:hover #btn_remove_model {
    transform: scale(1);
    transition: .3s
}

#btn_remove_model:hover {
    box-shadow: 0 0 5px #444
}

.col-md-4:hover #btn_block_model {
    transform: scale(1);
    transition: .3s
}

#btn_block_model:hover {
    box-shadow: 0 0 5px #444
}

#blocked_model {
    opacity: .5;
    filter: blur(2px)
}

#blocked_model:hover {
    box-shadow: none
}

#blocked_model img {
    filter: grayscale(100%)
}

#unblocked_model {
    opacity: 1;
    filter: unset
}

#unblocked_model img {
    filter: grayscale(0)
}

.previewEdit img {
    width: 100%
}

#pro_table td {
    border: none;
    padding: .4rem
}

#val_bas {
    position: absolute;
    top: 0;
    right: 0;
    background: #ddd
}

@media (max-width: 992px) {
    .opt_content {
        flex-direction: column;
        padding: 16px 12px;
        gap: 16px;
    }

    .list_items {
        flex: 1 1 auto;
        width: 100%;
    }

    .result_content {
        padding: 18px;
    }

    .pro_imgBox {
        width: 110px;
        height: 110px;
        margin: 20px auto 10px;
    }

    .t_header {
        font-size: 15px;
        padding: 0 16px;
        min-height: 48px;
        line-height: 48px;
    }
}

#slc_val option:disabled {
    background: #a6caca;
    color: #fff
}

#slctCity option:disabled {
    background: #a6caca;
    color: #fff
}

.previewEdit {
    width: 33%;
    overflow: hidden;
    border-radius: 5px;
    display: inline-block;
    border: 1px solid #ddd
}

#store_btn {
    text-decoration: none;
    color: #777
}

#store_btn:hover {
    color: #34c9c9
}

#sale_icon {
    position: absolute;
    z-index: 9;
    height: 56px;
    width: 42px;
    top: -2px;
    left: 12px;
    filter: drop-shadow(0 3px 6px rgba(255, 102, 0, 0.35));
    animation: saleSwing 3s ease-in-out infinite;
    transform-origin: top center;
}

#sale_icon img {
    width: 100%;
    height: 100%;
}

@keyframes saleSwing {

    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(6deg);
    }
}

.discount_badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 11;
    background: linear-gradient(135deg, #ff4757 0%, #ff6600 100%);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 5px 11px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.35);
    letter-spacing: 0.4px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.discount_badge::before {
    content: '';
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

.dcb_content .col-md-3 {
    margin-bottom: 28px;
}

.dcb_content .col-md-3 {
    animation: cardFadeIn .5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.dcb_content .col-md-3:nth-child(1) {
    animation-delay: 0s;
}

.dcb_content .col-md-3:nth-child(2) {
    animation-delay: .05s;
}

.dcb_content .col-md-3:nth-child(3) {
    animation-delay: .1s;
}

.dcb_content .col-md-3:nth-child(4) {
    animation-delay: .15s;
}

.dcb_content .col-md-3:nth-child(5) {
    animation-delay: .2s;
}

.dcb_content .col-md-3:nth-child(6) {
    animation-delay: .25s;
}

.dcb_content .col-md-3:nth-child(7) {
    animation-delay: .3s;
}

.dcb_content .col-md-3:nth-child(8) {
    animation-delay: .35s;
}

#g_link {
    text-decoration: none;
    transition: .2s
}

#g_link:hover {
    box-shadow: 0 0 10px #999
}

@media only screen and (min-device-width:320px) and (max-device-width:568px) {
    .t_header {
        font-size: 14px
    }

    .table.table-striped.myTab {
        font-size: 14px
    }
}

/* =========================================================
   Shop Form v2 — modern redesign
   Scope: .gbShopV2 (added to #newShop in formShop.php)
   ========================================================= */

.gbShopV2 {
    background: linear-gradient(135deg, #f4fbfb 0%, #fff8e6 100%);
    min-height: 100vh;
    padding: 30px 15px 60px;
}

.gbShopV2 .addshop.shop-left {
    padding: 0;
    margin: 0 auto;
    max-width: 980px;
    min-width: 0;
    min-height: auto;
}

/* Hero header */
.gbShopHero {
    text-align: center;
    max-width: 720px;
    margin: 10px auto 28px;
    padding: 0 15px;
}

.gbShopHero__badge {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34c8c8 0%, #1aa0a0 100%);
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    box-shadow: 0 12px 24px rgba(52, 200, 200, 0.35);
}

.gbShopHero__title {
    font-size: 30px;
    font-weight: 700;
    color: #1f2d3d;
    margin: 0 0 8px;
    letter-spacing: -0.4px;
}

.gbShopHero__subtitle {
    color: #6b7785;
    font-size: 15px;
    margin: 0 0 18px;
    line-height: 1.5;
}

.gbShopHero__steps {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 6px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(20, 136, 136, 0.08);
}

.gbShopHero__step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #8a96a3;
    background: transparent;
}

.gbShopHero__step b {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eef2f4;
    color: #8a96a3;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gbShopHero__step.is-active {
    background: linear-gradient(135deg, #34c8c8, #148888);
    color: #fff;
}

.gbShopHero__step.is-active b {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Card container — desktop two-column */
.gbShopV2 .shopForm {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 28px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(20, 50, 70, 0.08), 0 2px 6px rgba(20, 50, 70, 0.04);
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.gbShopV2 .pageShop,
.gbShopV2 .pageUser {
    flex: 1;
    min-width: 0;
}

/* Fieldsets */
.gbShopV2 .gbShopFieldset {
    border: 1px solid #eef2f4;
    border-radius: 14px;
    padding: 20px 20px 14px;
    margin: 0 0 18px;
    background: #fcfdfd;
    transition: box-shadow .2s, border-color .2s;
}

.gbShopV2 .gbShopFieldset:hover {
    border-color: #d8efef;
    box-shadow: 0 6px 18px rgba(20, 136, 136, 0.06);
}

.gbShopV2 .gbShopFieldset legend {
    width: auto;
    font-size: 13px;
    font-weight: 700;
    color: #148888;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 12px;
    background: #e6f7f7;
    border-radius: 999px;
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
}

.gbShopV2 .gbShopFieldset legend i {
    font-size: 12px;
}

/* Form groups & inputs */
.gbShopV2 .form-group {
    position: relative;
    margin-bottom: 14px;
}

.gbShopV2 .form-control {
    height: 46px;
    border-radius: 10px;
    border: 1px solid #e3e8ec;
    background: #fff;
    padding-left: 42px;
    font-size: 14px;
    color: #1f2d3d;
    transition: border-color .2s, box-shadow .2s;
    box-shadow: none;
}

.gbShopV2 textarea.form-control {
    height: 90px;
    padding-top: 12px;
    padding-left: 16px;
    resize: vertical;
}

.gbShopV2 .form-control:focus {
    border-color: #34c8c8;
    box-shadow: 0 0 0 4px rgba(52, 200, 200, 0.12);
    outline: none;
}

.gbShopV2 select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%2378848f' d='M4 6l4 4 4-4z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 36px;
}

.gbShopV2 #reg_icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa6b2;
    font-size: 15px;
    z-index: 2;
    pointer-events: none;
}

.gbShopV2 .form-control:focus~#reg_icon,
.gbShopV2 .form-group:focus-within #reg_icon {
    color: #34c8c8;
}

/* Helper line under shop name */
.gbShopV2 .pageShop .form-group p {
    font-size: 12px;
    color: #98a3af !important;
    margin: 6px 0 0;
}

/* Upload zones */
.gbShopV2 #upShopScreen {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 170px;
    margin: 16px auto 60px;
    border: 2px dashed #ffc107;
    border-radius: 14px;
    background: #fffdf4;
    color: #8a7a40;
    font-size: 14px;
    padding-top: 48px;
    transition: background .2s, border-color .2s, transform .2s;
}

.gbShopV2 #upShopScreen:hover {
    background: #fff7d6;
    border-color: #f4b400;
    transform: translateY(-1px);
}

.gbShopV2 #upShopScreen b {
    display: block;
    font-size: 14px;
    color: #2a3a4a;
    margin-bottom: 6px;
}

.gbShopV2 #upShopScreen p {
    margin: 0;
}

.gbShopV2 #upShopScreen p i {
    font-size: 22px;
    color: #f4b400;
}

.gbShopV2 #upShopLogo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    bottom: -42px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #fff;
    border: 2px dashed #34c8c8;
    box-shadow: 0 10px 22px rgba(20, 136, 136, 0.18);
    padding-top: 18px;
    color: #2a3a4a;
    z-index: 3;
}

.gbShopV2 #upShopLogo:hover {
    background: #f3fbfb;
}

.gbShopV2 #upShopLogo b {
    display: block;
    font-size: 12px;
    color: #148888;
}

.gbShopV2 #upShopLogo p i {
    color: #34c8c8;
    font-size: 18px;
}

.gbShopV2 .upImage {
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    bottom: -42px;
    top: auto;
    width: 88px;
    height: 88px;
    z-index: 1
}

.gbShopV2 .upImage img {
    width: 88px;
    height: 88px;
}

.gbShopV2 .upShopScreen {
    width: 100%;
    max-width: 420px;
    height: 170px;
    margin: 16px auto 60px;
    line-height: 1;
}

.gbShopV2 .upShopScreen img {
    width: 100%;
    height: 170px;
    border-radius: 14px;
}

/* Checkbox row */
.gbShopV2 .pageUser .form-group input[type="checkbox"] {
    accent-color: #34c8c8;
    margin-right: 8px;
    vertical-align: middle;
}

.gbShopV2 .pageUser .form-group span a {
    color: #148888;
    text-decoration: underline;
    font-weight: 600;
}

/* Submit button */
.gbShopV2 .gbShopSubmit {
    position: relative;
    margin-top: 6px;
}

.gbShopV2 .btn.btn-succs {
    width: 100%;
    margin: 6px 0 0;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #34c8c8 0%, #148888 100%);
    border: 0;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.3px;
    box-shadow: 0 10px 22px rgba(20, 136, 136, 0.28);
    transition: transform .15s, box-shadow .2s, filter .2s;
}

.gbShopV2 .btn.btn-succs:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 14px 28px rgba(20, 136, 136, 0.36);
}

.gbShopV2 .btn.btn-succs i {
    margin-right: 6px;
}

.gbShopV2 .loadingShop {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.gbShopV2 .loadingShop img {
    width: 32px;
    height: 32px;
}

/* Alerts */
.gbShopV2 .alert.alertdanger,
.gbShopV2 .alert.alertsuccess {
    margin: 8px 0 0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
}

.gbShopV2 .alert.alertdanger {
    background: #fff1f0;
    color: #b02a37;
    border: 1px solid #f3c2c7;
}

.gbShopV2 .alert.alertsuccess {
    background: #ecfbef;
    color: #1f7a34;
    border: 1px solid #b9e7c3;
}

/* ============== Mobile form (shop_form) ============== */
.gbShopV2 .shop_form {
    background: #fff;
    margin: 6px 10px 24px;
    border-radius: 16px;
    padding: 18px 6px 18px;
    box-shadow: 0 12px 28px rgba(20, 50, 70, 0.08);
}

.gbShopV2 .shop_form h5 {
    font-size: 18px;
    font-weight: 700;
    color: #1f2d3d;
    border-bottom: 1px solid #eef2f4;
    margin: 0 16px 16px;
    padding: 4px 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gbShopV2 .shop_form h5 i {
    color: #34c8c8;
}

.gbShopV2 .shop_form form {
    width: auto;
    margin: 0 16px;
}

.gbShopV2 .shop_form input,
.gbShopV2 .shop_form select {
    padding-left: 42px;
}

.gbShopV2 .shop_form #upShopScreen {
    margin-top: 6px;
}

.gbShopV2 .shop_form .btn.btn-warning {
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffc107 0%, #f08c00 100%);
    border: 0;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 10px 22px rgba(240, 140, 0, 0.28);
}

/* ============== Responsive ============== */
@media (max-width: 860px) {
    .gbShopV2 .shopForm {
        flex-direction: column;
        padding: 18px;
    }

    .gbShopHero__title {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .gbShopV2 {
        padding: 16px 0 40px;
    }

    .gbShopV2 .shopForm {
        border-radius: 12px;
        padding: 14px;
    }

    .gbShopHero__title {
        font-size: 22px;
    }

    .gbShopHero__subtitle {
        font-size: 14px;
    }
}

/* =========================================================
   Rules / Terms page v2 — modern redesign
   Scope: .gbRulesV2 (added to .dcb_content in qaydalar.php)
   ========================================================= */

.dcb_content.gbRulesV2 {
    background: linear-gradient(180deg, #f4fbfb 0%, #fff8e6 100%);
    padding: 30px 15px 60px;
    counter-reset: gbRulesCounter;
}

/* Hero */
.gbRulesHero {
    max-width: 820px;
    margin: 6px auto 24px;
    text-align: center;
    padding: 0 15px;
}

.gbRulesHero__badge {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: linear-gradient(135deg, #ffc107 0%, #f08c00 100%);
    color: #fff;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    box-shadow: 0 14px 28px rgba(240, 140, 0, 0.32);
    transform: rotate(-6deg);
}

.gbRulesHero__title {
    font-size: 30px;
    font-weight: 700;
    color: #1f2d3d;
    margin: 0 0 8px;
    letter-spacing: -0.4px;
    line-height: 1.2;
}

.gbRulesHero__subtitle {
    color: #6b7785;
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 16px;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.gbRulesHero__meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 6px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(20, 50, 70, 0.06);
}

.gbRulesHero__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #148888;
    background: #e6f7f7;
}

.gbRulesHero__meta span i {
    font-size: 12px;
}

/* Reading card — wraps all paragraphs after hero */
.dcb_content.gbRulesV2>p,
.dcb_content.gbRulesV2>ul:not(.gbRulesSection),
.dcb_content.gbRulesV2>ol:not(.gbRulesSection) {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.dcb_content.gbRulesV2>p {
    background: #ffffff;
    color: #2a3a4a;
    font-size: 15px;
    line-height: 1.7;
    padding: 14px 22px;
    border-left: 3px solid #e6f7f7;
    margin: 0 auto 10px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(20, 50, 70, 0.03);
}

.dcb_content.gbRulesV2>p:empty,
.dcb_content.gbRulesV2>p:has(> br:only-child) {
    display: none;
}

/* Hide " " only paragraphs visually (they collapse padding) */
.dcb_content.gbRulesV2>p:only-child:empty {
    display: none;
}

/* Sub-heading inside paragraph (e.g., "2.1 İstifadəçilərin hüquq...") */
.dcb_content.gbRulesV2>p>b:first-child:last-child,
.dcb_content.gbRulesV2>p:has(> b:only-child) {
    background: linear-gradient(135deg, #f3fbfb 0%, #fff8e6 100%);
    border-left-color: #34c8c8;
    color: #148888;
    font-weight: 700;
    font-size: 15px;
}

/* Section headers — ul.gbRulesSection / ol.gbRulesSection */
.dcb_content.gbRulesV2 .gbRulesSection {
    max-width: 820px;
    margin: 28px auto 14px;
    padding: 0;
    list-style: none;
    counter-increment: gbRulesCounter;
}

.dcb_content.gbRulesV2 .gbRulesSection li {
    list-style: none !important;
    text-align: left !important;
    background: linear-gradient(135deg, #34c8c8 0%, #148888 100%);
    color: #fff;
    padding: 16px 22px 16px 70px;
    border-radius: 14px;
    position: relative;
    box-shadow: 0 10px 22px rgba(20, 136, 136, 0.18);
}

.dcb_content.gbRulesV2 .gbRulesSection li strong {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.dcb_content.gbRulesV2 .gbRulesSection li::before {
    content: counter(gbRulesCounter);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

/* Inner UL inside content (sub-points like "a) ...") */
.dcb_content.gbRulesV2>ul:not(.gbRulesSection) {
    background: #fffdf4;
    border: 1px solid #faecc1;
    border-radius: 10px;
    padding: 14px 22px 14px 22px;
    margin: 0 auto 10px;
    max-width: 820px;
    list-style: none;
}

.dcb_content.gbRulesV2>ul:not(.gbRulesSection) li {
    color: #2a3a4a;
    font-size: 14.5px;
    line-height: 1.65;
    padding: 4px 0;
}

.dcb_content.gbRulesV2>ul:not(.gbRulesSection) li p {
    margin: 0;
}

/* Contact card */
.gbRulesContact {
    max-width: 820px;
    margin: 30px auto 10px;
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 22px;
    display: flex;
    gap: 16px;
    align-items: center;
    box-shadow: 0 14px 30px rgba(20, 50, 70, 0.08);
    border-left: 4px solid #ffc107;
}

.gbRulesContact__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffc107 0%, #f08c00 100%);
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 22px rgba(240, 140, 0, 0.28);
}

.gbRulesContact__body h4 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: #1f2d3d;
}

.gbRulesContact__body p {
    margin: 0;
    color: #4a5868;
    font-size: 14.5px;
    line-height: 1.6;
}

.gbRulesContact__body a {
    color: #148888;
    font-weight: 700;
    text-decoration: underline;
}

.gbRulesContact__body a:hover {
    color: #0e6868;
}

/* Responsive */
@media (max-width: 720px) {
    .gbRulesHero__title {
        font-size: 24px;
    }

    .dcb_content.gbRulesV2 .gbRulesSection li {
        padding: 14px 16px 14px 60px;
    }

    .dcb_content.gbRulesV2 .gbRulesSection li strong {
        font-size: 14px;
    }

    .dcb_content.gbRulesV2 .gbRulesSection li::before {
        width: 32px;
        height: 32px;
        font-size: 14px;
        left: 12px;
    }

    .gbRulesContact {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .dcb_content.gbRulesV2 {
        padding: 16px 8px 40px;
    }

    .gbRulesHero__title {
        font-size: 22px;
    }

    .dcb_content.gbRulesV2>p {
        padding: 12px 16px;
        font-size: 14.5px;
    }
}

/* =========================================================
   Shops list page v2 — modern card grid
   Scope: .gbShopsV2 (added to .category in shops.php)
   ========================================================= */

.gbShopsV2 {
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 24px 60px;
}

@media (max-width: 991px) {
    .gbShopsV2 {
        padding: 20px 18px 48px;
    }
}

@media (max-width: 600px) {
    .gbShopsV2 {
        padding: 16px 14px 40px;
    }
}

/* Hero header */
.gbShopsHero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px;
    margin: 0 0 28px;
    background: linear-gradient(135deg, #34c8c8 0%, #148888 100%);
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 18px 36px rgba(20, 136, 136, 0.22);
    position: relative;
    overflow: hidden;
}

.gbShopsHero::before {
    content: '';
    position: absolute;
    right: -40px;
    top: -40px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.gbShopsHero::after {
    content: '';
    position: absolute;
    right: 80px;
    bottom: -60px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 193, 7, 0.18);
}

.gbShopsHero__left {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.gbShopsHero__badge {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.gbShopsHero__title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #fff;
}

.gbShopsHero__subtitle {
    margin: 4px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
}

.gbShopsHero__count {
    position: relative;
    z-index: 1;
    background: #fff;
    color: #148888;
    padding: 10px 18px;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    min-width: 96px;
}

.gbShopsHero__count b {
    display: block;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: #148888;
}

.gbShopsHero__count span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6a8688;
    font-weight: 600;
}

/* Grid & cards — override existing rules for cards inside .gbShopsV2 */
.gbShopsV2 .row.pagesRow {
    margin-left: -10px;
    margin-right: -10px;
}

.gbShopsV2 .row.pagesRow .col-md-3.gbShopCard {
    margin-top: 0;
    margin-bottom: 22px;
    padding: 0 10px;
}

.gbShopsV2 .row.pagesRow .col-md-3.gbShopCard a {
    position: relative;
    display: block;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(20, 50, 70, 0.08);
    transition: transform .2s, box-shadow .2s;
    text-decoration: none;
    color: #2a3a4a;
}

.gbShopsV2 .row.pagesRow .col-md-3.gbShopCard a:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(20, 50, 70, 0.14);
}

.gbShopsV2 .row.pagesRow .col-md-3.gbShopCard:hover .dcb-titlebox {
    box-shadow: none;
}

/* Cover image */
.gbShopsV2 .dcb-imagebox.gbShopCard__cover {
    height: 180px;
    border: 0;
    margin: 0;
    background: linear-gradient(135deg, #f1f5f7 0%, #e6f1f1 100%);
    color: #aab8c2;
    font-size: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.gbShopsV2 .dcb-imagebox.gbShopCard__cover img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.gbShopsV2 .dcb-imagebox.gbShopCard__cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.22) 100%);
    pointer-events: none;
}

/* Floating logo */
.gbShopsV2 .gld-shopLogo.gbShopCard__logo {
    position: absolute;
    left: 16px;
    top: 142px;
    margin: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    border: 3px solid #fff;
    overflow: hidden;
    text-align: center;
    line-height: 64px;
    font-size: 12px;
    color: #6b7785;
    font-weight: 600;
    z-index: 2;
}

.gbShopsV2 .gld-shopLogo.gbShopCard__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
}

/* Body */
.gbShopsV2 .dcb-titlebox.gbShopCard__body {
    border: 0;
    margin: 0;
    padding: 22px 16px 16px 96px;
    min-height: 100px;
}

.gbShopsV2 .gbShopCard__name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1f2d3d !important;
    margin: 0 0 8px !important;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gbShopsV2 .gbShopCard__meta {
    font-size: 12.5px !important;
    color: #6b7785 !important;
    margin: 3px 0 !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}

.gbShopsV2 .gbShopCard__meta i {
    width: 14px;
    font-size: 11px;
    color: #34c8c8;
    flex-shrink: 0;
}

/* Package badge — top right */
.gbShopsV2 .gbShopCard__paket {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #fff;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.gbShopsV2 .gbShopCard__paket i {
    font-size: 10px;
}

.gbShopsV2 .gbShopCard.is-silver .gbShopCard__paket {
    background: linear-gradient(135deg, #b8bfc7 0%, #6c7782 100%);
}

.gbShopsV2 .gbShopCard.is-gold .gbShopCard__paket {
    background: linear-gradient(135deg, #ffd54f 0%, #d99a00 100%);
}

.gbShopsV2 .gbShopCard.is-super .gbShopCard__paket {
    background: linear-gradient(135deg, #ff6b6b 0%, #c4296b 100%);
}

/* Package-coloured top border accent */
.gbShopsV2 .gbShopCard.is-gold a {
    box-shadow: 0 6px 18px rgba(217, 154, 0, 0.18);
}

.gbShopsV2 .gbShopCard.is-super a {
    box-shadow: 0 6px 18px rgba(196, 41, 107, 0.18);
}

/* Pagination */
.gbShopsPager {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.gbShopsPager .pagination {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 0;
}

.gbShopsPager .pagination li,
.gbShopsPager a,
.gbShopsPager strong {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    background: #fff;
    color: #2a3a4a;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(20, 50, 70, 0.06);
    transition: background .15s, color .15s, transform .15s;
}

.gbShopsPager a:hover {
    background: #e6f7f7;
    color: #148888;
    transform: translateY(-1px);
}

.gbShopsPager strong {
    background: linear-gradient(135deg, #34c8c8 0%, #148888 100%);
    color: #fff;
}

/* Responsive */
@media (max-width: 991px) {
    .gbShopsV2 .row.pagesRow .col-md-3.gbShopCard {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 600px) {
    .gbShopsHero {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 18px;
    }

    .gbShopsHero__title {
        font-size: 22px;
    }

    .gbShopsHero__count {
        align-self: stretch;
    }

    .gbShopsV2 .row.pagesRow .col-md-3.gbShopCard {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* =========================================================
   Shop Detail page v2 — modern redesign
   Scope: .gbShopDetailV2 (added to .category in shop_detail.php)
   ========================================================= */

.gbShopDetailV2 {
    background: linear-gradient(180deg, #f4fbfb 0%, #fdf6e6 100%);
    padding: 24px 12px 60px;
    min-height: 100vh;
    overflow: visible;
}

.gbShopDetailV2>.row {
    margin-left: 0;
    margin-right: 0;
    overflow: visible;
}

.gbShopDetailV2 .profile-detail {
    display: flex;
    gap: 24px;
    width: 100%;
    align-items: stretch;
}

/* ===== Left sidebar ===== */
.gbShopDetailV2 .p_left {
    flex: 0 0 290px;
    max-width: 290px;
    align-self: stretch;
}

.gbShopDetailV2 .sticky {
    position: sticky;
    top: 80px;
    background: #fff;
    border-radius: 18px;
    padding: 22px 18px 18px;
    box-shadow: 0 10px 28px rgba(20, 50, 70, 0.06), 0 1px 2px rgba(20, 50, 70, 0.04);
    border: 1px solid #eef4f4;
    text-align: center;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cfe5e5 transparent;
}

.gbShopDetailV2 .sticky::-webkit-scrollbar {
    width: 6px;
}

.gbShopDetailV2 .sticky::-webkit-scrollbar-thumb {
    background: #cfe5e5;
    border-radius: 999px;
}

.gbShopDetailV2 .sticky::-webkit-scrollbar-track {
    background: transparent;
}

/* Logo */
.gbShopDetailV2 .logo-image {
    width: 112px;
    height: 112px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e6f7f7 0%, #fff8e6 100%);
    box-shadow: 0 8px 20px rgba(20, 136, 136, 0.14);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #fff;
    outline: 1px solid #e6f3f3;
}

.gbShopDetailV2 .logo-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transform: none;
}

.gbShopDetailV2 .logo-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.gbShopDetailV2 .logo-image a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gbShopDetailV2 .logo-image span {
    font-size: 13px;
    color: #95a3b0;
    line-height: 1;
}

.gbShopDetailV2 #upp-label {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34c8c8 0%, #148888 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    z-index: 4;
    box-shadow: 0 3px 10px rgba(20, 136, 136, 0.32);
    border: 2px solid #fff;
    margin: 0;
    transition: transform .15s;
}

.gbShopDetailV2 #upp-label:hover {
    transform: scale(1.05);
}

/* Shop info (name + paket) */
.gbShopDetailV2 #shop-info {
    text-align: center;
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px dashed #e6eef0;
}

.gbShopDetailV2 #shop-info::before {
    content: none;
}

.gbShopDetailV2 #shop-info a {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #1f2d3d;
    text-decoration: none;
    margin: 0 0 8px;
    line-height: 1.25;
    letter-spacing: -0.2px;
}

.gbShopDetailV2 .gbShopDetail__paket {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.gbShopDetailV2 .gbShopDetail__paket i {
    font-size: 10px;
}

.gbShopDetailV2 .gbShopDetail__paket.is-ekanom {
    background: linear-gradient(135deg, #8aa7b8 0%, #506a7c 100%);
}

.gbShopDetailV2 .gbShopDetail__paket.is-silver {
    background: linear-gradient(135deg, #b8bfc7 0%, #6c7782 100%);
}

.gbShopDetailV2 .gbShopDetail__paket.is-gold {
    background: linear-gradient(135deg, #ffd54f 0%, #d99a00 100%);
}

.gbShopDetailV2 .gbShopDetail__paket.is-super {
    background: linear-gradient(135deg, #ff6b6b 0%, #c4296b 100%);
}

/* Info list */
.gbShopDetailV2 .shop-number {
    padding-top: 0;
    text-align: left;
}

.gbShopDetailV2 .shop-number ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gbShopDetailV2 .shop-number li {
    padding: 8px 10px;
    margin: 0 0 2px;
    border-radius: 10px;
    font-size: 13px;
    color: #4a5868;
    line-height: 1.35;
    transition: background .15s, transform .15s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gbShopDetailV2 .shop-number li:hover {
    background: #f3fafa;
}

.gbShopDetailV2 .shop-number li .fab,
.gbShopDetailV2 .shop-number li .far,
.gbShopDetailV2 .shop-number li .fas {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #ecf8f8;
    color: #148888;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
}

.gbShopDetailV2 .shop-number li b {
    color: #1f2d3d;
    font-weight: 600;
}

.gbShopDetailV2 .shop-number li a {
    color: #4a5868;
    text-decoration: none;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.gbShopDetailV2 .shop-number li a:hover {
    color: #148888;
}

.gbShopDetailV2 .shop-number .badge {
    margin-left: auto;
    background: #ff5b6b;
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

/* Follow button block (guest variant) */
.gbShopDetailV2 .follow_btn {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e6eef0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gbShopDetailV2 .follow_btn a,
.gbShopDetailV2 #btn_follow,
.gbShopDetailV2 #btn_remove_follow {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    height: 42px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    background: linear-gradient(135deg, #34c8c8 0%, #148888 100%);
    color: #fff !important;
    text-decoration: none !important;
    border: 0;
    box-shadow: 0 6px 14px rgba(20, 136, 136, 0.22);
    transition: transform .15s, box-shadow .2s, filter .2s;
    margin: 0 !important;
    width: 100% !important;
    text-align: center;
}

.gbShopDetailV2 .follow_btn a:hover,
.gbShopDetailV2 #btn_follow:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.gbShopDetailV2 #btn_remove_follow,
.gbShopDetailV2 .follow_btn .removefollowing {
    background: linear-gradient(135deg, #ff6b6b 0%, #c4296b 100%) !important;
    box-shadow: 0 8px 18px rgba(196, 41, 107, 0.22) !important;
}

/* ===== Right content ===== */
.gbShopDetailV2 .p_content {
    flex: 1;
    min-width: 0;
}

/* Cover banner */
.gbShopDetailV2 #winoblojka {
    border-radius: 18px;
    overflow: hidden;
    background-size: cover !important;
    background-position: center !important;
    position: relative;
    min-height: 280px;
    box-shadow: 0 12px 32px rgba(20, 50, 70, 0.10);
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.gbShopDetailV2 #winoblojka::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.45) 100%);
    pointer-events: none;
}

.gbShopDetailV2 #fotooblojka {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent !important;
    pointer-events: none;
    border-radius: 18px;
}

.gbShopDetailV2 #fotooblojka .add_img,
.gbShopDetailV2 #fotooblojka label {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #148888;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    transition: transform .15s, background .15s;
    margin: 0;
    pointer-events: auto;
}

.gbShopDetailV2 #fotooblojka input[type="file"] {
    display: none;
}

.gbShopDetailV2 #fotooblojka .add_img:hover {
    background: #fff;
    transform: scale(1.05);
}

/* Tabs over cover */
.gbShopDetailV2 .obloj_tabMenu {
    position: relative;
    z-index: 3;
    padding: 18px 18px;
}

.gbShopDetailV2 .obloj_tabMenu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px;
    margin: 0;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
    list-style: none;
    width: fit-content;
    max-width: 100%;
}

.gbShopDetailV2 .obloj_tabMenu ul li.aktivLi {
    margin: 0;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 10px;
}

.gbShopDetailV2 .obloj_tabMenu li>a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 13.5px;
    background: transparent !important;
    border: 0 !important;
    transition: background .2s;
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 1;
}

.gbShopDetailV2 .obloj_tabMenu li>a:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

.gbShopDetailV2 .obloj_tabMenu li>a.active {
    background: #fff !important;
    color: #148888 !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

.gbShopDetailV2 .obloj_tabMenu li>a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
}

.gbShopDetailV2 .obloj_tabMenu li>a.active span {
    background: #e6f7f7;
    color: #148888;
}

.gbShopDetailV2 .obloj_tabMenu li>a span b {
    font-weight: 700;
}

/* About */
.gbShopDetailV2 .s_about {
    background: #fff;
    border-radius: 14px;
    padding: 16px 20px;
    margin: 0 0 16px;
    box-shadow: 0 6px 18px rgba(20, 50, 70, 0.06);
    border-left: 4px solid #ffc107;
}

.gbShopDetailV2 .s_about p {
    margin: 0;
    color: #2a3a4a;
    font-size: 14.5px;
    line-height: 1.65;
}

.gbShopDetailV2 .s_about #load-more {
    color: #148888 !important;
    font-weight: 700;
    cursor: pointer;
}

/* Elan list header */
.gbShopDetailV2 .shop-elan-list {
    background: transparent;
    padding: 0;
    margin: 0;
}

.gbShopDetailV2 .shop-elan-list {
    position: relative;
    padding-top: 4px;
}

.gbShopDetailV2 #countModel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: #148888;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(20, 50, 70, 0.06);
    border: 1px solid #eef4f4;
}

.gbShopDetailV2 #countModel::before {
    content: '\f03a';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 12px;
    color: #34c8c8;
}

/* Filter button & box */
.gbShopDetailV2 .btn_filter {
    position: absolute;
    top: 0;
    right: 0;
    float: none;
    height: auto;
    width: auto;
    margin: 0;
    padding: 0;
}

.gbShopDetailV2 #filter_src {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    margin: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffc107 0%, #f08c00 100%);
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(240, 140, 0, 0.28);
    transition: transform .15s, box-shadow .2s, filter .2s;
    border: 0;
}

.gbShopDetailV2 #filter_src::before {
    content: none;
}

.gbShopDetailV2 #filter_src i {
    font-size: 13px;
}

.gbShopDetailV2 #filter_src:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 20px rgba(240, 140, 0, 0.34);
}

.gbShopDetailV2 #ortuk {
    display: none !important;
}

.gbShopDetailV2 .flt_shadow {
    margin: 0;
    position: static;
}

.gbShopDetailV2 .filterBox {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 36px rgba(20, 50, 70, 0.16);
    padding: 18px;
    margin: 0;
    position: absolute;
    top: 52px;
    right: 0;
    width: 320px;
    max-width: calc(100vw - 32px);
    z-index: 20;
    border: 1px solid #eef4f4;
}

.gbShopDetailV2 .filterBox::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 22px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-left: 1px solid #eef4f4;
    border-top: 1px solid #eef4f4;
    transform: rotate(45deg);
}

.gbShopDetailV2 .filterBox.show,
.gbShopDetailV2 .filterBox[style*="block"] {
    display: block;
}

.gbShopDetailV2 .filterBox strong {
    display: block;
    text-align: center;
    color: #6b7785;
    font-size: 14px;
    padding: 8px 0;
}

.gbShopDetailV2 .filterBox label {
    font-size: 12px;
    font-weight: 700;
    color: #1f2d3d;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
    display: block;
}

.gbShopDetailV2 .filterBox .form-control {
    height: 42px;
    border-radius: 10px;
    border: 1px solid #e3e8ec;
    font-size: 14px;
}

.gbShopDetailV2 .filterBox .form-control:focus {
    border-color: #34c8c8;
    box-shadow: 0 0 0 4px rgba(52, 200, 200, 0.12);
}

.gbShopDetailV2 .filterBox .form-group {
    margin-bottom: 12px;
}

.gbShopDetailV2 .filterBox .form-group:last-child {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
    margin-top: 14px;
}

.gbShopDetailV2 .btn.btn-filter {
    background: linear-gradient(135deg, #34c8c8 0%, #148888 100%);
    color: #fff;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 600;
    border: 0;
    margin: 0;
    width: auto;
    flex: 1;
    box-shadow: 0 6px 14px rgba(20, 136, 136, 0.22);
}

.gbShopDetailV2 .btn.btn-cleen {
    background: #fff;
    color: #4a5868;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 600;
    border: 1px solid #e3e8ec;
    width: auto;
    flex: 0 0 auto;
}

.gbShopDetailV2 .btn.btn-cleen:hover {
    background: #f5fbfb;
    color: #148888;
    border-color: #cfe5e5;
}

/* Tab content headings */
.gbShopDetailV2 .tab-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1f2d3d;
    margin: 18px 0 14px;
    position: relative;
    padding-left: 14px;
}

.gbShopDetailV2 .tab-content h4::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, #34c8c8, #148888);
}

/* Block / follow prompt */
.gbShopDetailV2 #block_div {
    background: #fff;
    border-radius: 16px;
    padding: 36px 24px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(20, 50, 70, 0.06);
    color: #4a5868;
    font-size: 15px;
    line-height: 1.6;
    margin: 16px 0;
    width: 100%;
}

.gbShopDetailV2 #block_div img {
    width: 96px;
    height: 96px;
    display: block;
    margin: 0 auto 14px;
    opacity: 0.85;
}

.gbShopDetailV2 #block_div a {
    display: inline-block;
    margin-top: 10px;
    background: linear-gradient(135deg, #34c8c8 0%, #148888 100%);
    color: #fff !important;
    padding: 10px 22px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 8px 18px rgba(20, 136, 136, 0.22);
}

.gbShopDetailV2 #block_div a:hover {
    transform: translateY(-1px);
}

.gbShopDetailV2 #extra_h {
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(20, 50, 70, 0.06);
    color: #4a5868;
    font-size: 16px;
    line-height: 1.6;
    margin: 16px 0;
}

.gbShopDetailV2 #extra_h a {
    color: #148888;
    font-weight: 700;
    text-decoration: underline;
}

/* Follower list */
.gbShopDetailV2 .fw_list {
    background: #fff;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 8px 22px rgba(20, 50, 70, 0.06);
    margin: 0 0 16px;
}

.gbShopDetailV2 .fw_list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gbShopDetailV2 .fw_list li {
    background: transparent !important;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    margin: 4px 0;
    transition: background .15s;
}

.gbShopDetailV2 .fw_list li:hover {
    background: #f5fbfb !important;
}

.gbShopDetailV2 .fw_list li #fw-profile {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: #e6f7f7;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gbShopDetailV2 .fw_list li #fw-profile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gbShopDetailV2 .fw_list li #fw-title {
    flex: 1;
    font-size: 14.5px;
    font-weight: 600;
    color: #1f2d3d;
}

.gbShopDetailV2 .fw_list li a#btn_remove,
.gbShopDetailV2 .fw_list li .removefollowing {
    background: #fff;
    color: #c4296b;
    padding: 6px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 12.5px;
    border: 1px solid #f3c2c7;
    transition: background .15s;
}

.gbShopDetailV2 .fw_list li a#btn_remove:hover,
.gbShopDetailV2 .fw_list li .removefollowing:hover {
    background: #fff1f0;
}

/* Login modal */
#exampleModalShop #shopheader {
    background: linear-gradient(135deg, #34c8c8 0%, #148888 100%);
    border-radius: 16px 16px 0 0;
    border: 0;
    color: #fff;
}

#exampleModalShop #shopheader .modal-title {
    color: #fff;
    font-weight: 700;
}

#exampleModalShop .modal-content {
    border-radius: 16px;
    border: 0;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(20, 50, 70, 0.24);
}

#exampleModalShop .form-control {
    height: 46px;
    border-radius: 10px;
    border: 1px solid #e3e8ec;
}

#exampleModalShop .btn.btn-shop {
    background: linear-gradient(135deg, #34c8c8 0%, #148888 100%);
    color: #fff;
    border-radius: 10px;
    padding: 10px 22px;
    font-weight: 600;
    border: 0;
    box-shadow: 0 8px 18px rgba(20, 136, 136, 0.22);
}

/* Responsive */
@media (max-width: 991px) {
    .gbShopDetailV2 .profile-detail {
        flex-direction: column;
    }

    .gbShopDetailV2 .p_left {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .gbShopDetailV2 .sticky {
        position: static;
    }
}

@media (max-width: 600px) {
    .gbShopDetailV2 #winoblojka {
        min-height: 200px;
    }

    .gbShopDetailV2 .obloj_tabMenu li>a {
        padding: 6px 10px !important;
        font-size: 12px;
    }

    .gbShopDetailV2 .obloj_tabMenu ul {
        gap: 4px;
    }

    .gbShopDetailV2 #countModel {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* === Seçilmişlər səhifəsi === */
.secilmis-wrap {
    padding: 24px 0 40px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    background: radial-gradient(ellipse at top, rgba(255, 102, 0, 0.04) 0%, transparent 60%);
}

.gb-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    margin-bottom: 22px;
    padding: 10px 18px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    width: fit-content;
}

.gb-breadcrumb a {
    color: #718096;
    text-decoration: none;
    font-weight: 500;
    transition: color .25s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gb-breadcrumb a:hover {
    color: #22a6a6;
    text-decoration: none;
}

.gb-breadcrumb .bc-sep {
    color: #cbd5e0;
    font-size: 10px;
}

.gb-breadcrumb .bc-current {
    color: #2d3748;
    font-weight: 600;
}

.secilmis-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 26px 30px;
    margin-bottom: 32px;
    background: linear-gradient(135deg, #fff5f0 0%, #ffeae0 100%);
    border-radius: 18px;
    border: 1px solid rgba(255, 102, 0, 0.12);
    box-shadow: 0 6px 24px rgba(255, 102, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.secilmis-hero::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255, 102, 0, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.secilmis-hero__icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #ff4757 0%, #ff6600 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3);
    animation: heartBeat 2.2s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

@keyframes heartBeat {

    0%,
    100% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.08);
    }

    50% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.04);
    }
}

.secilmis-hero__body {
    flex: 1;
    position: relative;
    z-index: 1;
}

.secilmis-hero__body h1 {
    font-size: 24px;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 4px;
    letter-spacing: 0.2px;
}

.secilmis-hero__body p {
    font-size: 14px;
    color: #718096;
    margin: 0;
    line-height: 1.5;
}

.secilmis-hero__count {
    flex-shrink: 0;
    text-align: center;
    background: #fff;
    border-radius: 14px;
    padding: 14px 22px;
    box-shadow: 0 4px 14px rgba(255, 102, 0, 0.15);
    position: relative;
    z-index: 1;
}

.secilmis-hero__count .count-num {
    display: block;
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, #ff4757 0%, #ff6600 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.secilmis-hero__count .count-lbl {
    display: block;
    font-size: 11px;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    margin-top: 4px;
}

.secilmis-grid {
    margin: 0 -10px;
}

.secilmis-grid>[class*="col-"] {
    padding: 10px;
}

.secilmis-empty {
    padding: 70px 24px 60px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    text-align: center;
}

.secilmis-empty i {
    color: #fbb6a4;
    font-size: 72px;
}

.secilmis-empty .btn {
    margin-top: 20px;
    display: inline-block;
}

@media (max-width: 600px) {
    .secilmis-hero {
        flex-direction: column;
        text-align: center;
        padding: 24px 18px;
        gap: 14px;
    }

    .secilmis-hero__body h1 {
        font-size: 20px;
    }

    .secilmis-hero__count {
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 16px;
    }

    .secilmis-hero__count .count-num {
        font-size: 22px;
    }

    .secilmis-hero__count .count-lbl {
        margin-top: 0;
    }
}

/* === Contact (Bizimlə əlaqə) === */
.gld_contact {
    padding: 30px 16px 60px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    background: radial-gradient(ellipse at top, rgba(34, 166, 166, 0.04) 0%, transparent 60%);
}

.gld_contact h3 {
    margin: 0;
    color: #fff;
}

.gb-contact-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 28px 32px;
    margin-bottom: 32px;
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(34, 166, 166, 0.25);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.gb-contact-hero::before,
.gb-contact-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.gb-contact-hero::before {
    width: 220px;
    height: 220px;
    top: -80px;
    right: -50px;
}

.gb-contact-hero::after {
    width: 140px;
    height: 140px;
    bottom: -60px;
    left: -30px;
    background: rgba(255, 255, 255, 0.06);
}

.gb-contact-hero__icon {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    position: relative;
    z-index: 1;
}

.gb-contact-hero__body {
    position: relative;
    z-index: 1;
}

.gb-contact-hero__body h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: 0.3px;
}

.gb-contact-hero__body p {
    margin: 0;
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.55;
    max-width: 620px;
}

.gb-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 24px;
    align-items: start;
}

.gb-contact-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gb-info-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    color: #2d3748;
    text-decoration: none;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
}

.gb-info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: #2d3748;
}

.gb-info-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 19px;
    flex-shrink: 0;
    transition: transform .3s ease;
}

.gb-info-card:hover .gb-info-card__icon {
    transform: scale(1.08) rotate(-4deg);
}

.gb-info-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gb-info-card__label {
    font-size: 11px;
    font-weight: 700;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.gb-info-card__value {
    font-size: 15px;
    color: #2d3748;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gb-info-card__arrow {
    color: #cbd5e0;
    font-size: 13px;
    transition: transform .3s ease, color .3s ease;
}

.gb-info-card:hover .gb-info-card__arrow {
    transform: translateX(4px);
    color: #22a6a6;
}

.gb-info-card--teal .gb-info-card__icon {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    box-shadow: 0 6px 16px rgba(34, 166, 166, 0.3);
}

.gb-info-card--green .gb-info-card__icon {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3);
}

.gb-info-card--orange .gb-info-card__icon {
    background: linear-gradient(135deg, #ff6600 0%, #ff8533 100%);
    box-shadow: 0 6px 16px rgba(255, 102, 0, 0.3);
}

.gb-info-card--purple .gb-info-card__icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.3);
}

.gb-note-card {
    display: flex;
    gap: 14px;
    padding: 18px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-radius: 14px;
    border: 1px solid #fde68a;
    margin-top: 4px;
}

.gb-note-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.gb-note-card__body strong {
    display: block;
    color: #92400e;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
    font-weight: 700;
}

.gb-note-card__body p {
    margin: 0;
    font-size: 13.5px;
    color: #78350f;
    line-height: 1.55;
}

.gb-contact-form-wrap {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 6px 28px rgba(34, 166, 166, 0.1), 0 1px 3px rgba(0, 0, 0, 0.03);
    padding: 28px;
    transition: box-shadow .35s ease;
}

.gb-contact-form-wrap:hover {
    box-shadow: 0 10px 36px rgba(34, 166, 166, 0.14), 0 1px 3px rgba(0, 0, 0, 0.03);
}

.gb-contact-form .t_header {
    margin: -28px -28px 24px;
    border-radius: 18px 18px 0 0;
}

.gb-contact-form .form-actions {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gb-contact-form #alertDanger,
.gb-contact-form #alertSuccess {
    font-size: 13.5px;
    font-weight: 500;
}

.gb-contact-form #alertDanger:not(:empty) {
    color: #e53935;
    background: #fee2e2;
    padding: 6px 12px;
    border-radius: 8px;
}

.gb-contact-form #alertSuccess:not(:empty) {
    color: #047857;
    background: #d1fae5;
    padding: 6px 12px;
    border-radius: 8px;
}

.gb-contact-form .btn.btn-success {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

@media (max-width: 900px) {
    .gb-contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .gb-contact-hero {
        flex-direction: column;
        text-align: center;
        padding: 24px 18px;
        gap: 14px;
    }

    .gb-contact-hero__body h1 {
        font-size: 22px;
    }

    .gb-contact-form-wrap {
        padding: 20px;
    }

    .gb-contact-form .t_header {
        margin: -20px -20px 20px;
        border-radius: 18px 18px 0 0;
    }

    .gb-contact-form .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .gb-contact-form .btn.btn-success {
        width: 100%;
    }
}

/* === Agreement (İstifadəçi razılaşması) === */
.gb-agreement {
    padding: 28px 0 60px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    background: radial-gradient(ellipse at top, rgba(34, 166, 166, 0.04) 0%, transparent 60%);
    min-height: 100vh;
    margin-top: 0;
}

.gb-agr-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 30px 32px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #1e3a5f 0%, #22a6a6 100%);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(30, 58, 95, 0.22);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.gb-agr-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -50px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.gb-agr-hero__icon {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(6px);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    position: relative;
    z-index: 1;
}

.gb-agr-hero__body {
    position: relative;
    z-index: 1;
}

.gb-agr-hero__kicker {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.gb-agr-hero__body h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: 0.2px;
}

.gb-agr-hero__body p {
    margin: 0;
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.55;
    max-width: 680px;
}

.gb-agr-tabs {
    display: flex;
    gap: 8px;
    background: #fff;
    padding: 8px;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(34, 166, 166, 0.06);
    margin-bottom: 22px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}

.gb-agr-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    text-decoration: none;
    color: #4a5568;
    font-size: 14px;
    font-weight: 600;
    transition: all .25s ease;
    white-space: nowrap;
}

.gb-agr-tab:hover {
    background: rgba(34, 166, 166, 0.08);
    color: #22a6a6;
    text-decoration: none;
}

.gb-agr-tab.is-active {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(34, 166, 166, 0.25);
}

.gb-agr-tab i {
    font-size: 13px;
}

.gb-agr-article {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 6px 28px rgba(34, 166, 166, 0.08), 0 1px 3px rgba(0, 0, 0, 0.03);
    padding: 36px 40px;
    color: #2d3748;
    line-height: 1.75;
    font-size: 14.5px;
}

.gb-agr-clause {
    display: flex;
    gap: 18px;
    margin: 0 0 18px;
    padding: 16px 18px;
    border-radius: 12px;
    transition: background .25s ease;
}

.gb-agr-clause:hover {
    background: #f7fafc;
}

.gb-agr-num {
    flex-shrink: 0;
    width: 52px;
    height: 32px;
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.4px;
    box-shadow: 0 3px 10px rgba(34, 166, 166, 0.22);
    align-self: flex-start;
}

.gb-agr-text {
    flex: 1;
    color: #2d3748;
    line-height: 1.7;
}

.gb-agr-list {
    list-style: none;
    padding: 0 18px;
    margin: 0 0 18px 70px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gb-agr-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(34, 166, 166, 0.04) 0%, rgba(52, 200, 200, 0.04) 100%);
    border-left: 3px solid #22a6a6;
    border-radius: 0 10px 10px 0;
}

.gb-agr-bullet {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    background: #fff;
    color: #22a6a6;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    border: 1.5px solid rgba(34, 166, 166, 0.3);
    text-transform: lowercase;
}

.gb-agr-list li span:last-child {
    flex: 1;
    color: #4a5568;
    line-height: 1.65;
    font-size: 14px;
}

.gb-agr-landing {
    text-align: center;
    padding: 30px 20px;
}

.gb-agr-landing h2 {
    font-size: 22px;
    color: #2d3748;
    margin: 0 0 8px;
    font-weight: 700;
}

.gb-agr-landing>p {
    color: #718096;
    margin: 0 0 30px;
}

.gb-agr-landing__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
    max-width: 640px;
    margin: 0 auto;
}

.gb-agr-landing__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 22px;
    background: linear-gradient(135deg, #fafbfc 0%, #f0f9f9 100%);
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    text-decoration: none;
    color: #2d3748;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gb-agr-landing__card:hover {
    transform: translateY(-4px);
    border-color: #22a6a6;
    box-shadow: 0 12px 28px rgba(34, 166, 166, 0.15);
    text-decoration: none;
    color: #2d3748;
}

.gb-agr-landing__card i {
    font-size: 34px;
    color: #22a6a6;
    margin-bottom: 14px;
    width: 64px;
    height: 64px;
    background: rgba(34, 166, 166, 0.1);
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
}

.gb-agr-landing__card:hover i {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    transform: scale(1.05);
}

.gb-agr-landing__card h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px;
    color: #2d3748;
}

.gb-agr-landing__card span {
    font-size: 13px;
    color: #22a6a6;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.gb-agr-contact {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 30px -16px -10px;
    padding: 22px 26px;
    background: linear-gradient(135deg, rgba(34, 166, 166, 0.06) 0%, rgba(52, 200, 200, 0.06) 100%);
    border-radius: 14px;
    border: 1px dashed rgba(34, 166, 166, 0.3);
}

.gb-agr-contact__icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 6px 16px rgba(34, 166, 166, 0.28);
}

.gb-agr-contact__body {
    flex: 1;
    min-width: 0;
}

.gb-agr-contact__body strong {
    display: block;
    font-size: 15px;
    color: #2d3748;
    font-weight: 700;
    margin-bottom: 2px;
}

.gb-agr-contact__body p {
    margin: 0;
    font-size: 13.5px;
    color: #718096;
}

.gb-agr-contact__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13.5px;
    box-shadow: 0 4px 14px rgba(34, 166, 166, 0.25);
    transition: all .3s ease;
    white-space: nowrap;
}

.gb-agr-contact__btn:hover {
    background: linear-gradient(135deg, #178585 0%, #22a6a6 100%);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(34, 166, 166, 0.35);
}

@media (max-width: 700px) {
    .gb-agr-hero {
        flex-direction: column;
        text-align: center;
        padding: 24px 18px;
        gap: 14px;
    }

    .gb-agr-hero__body h1 {
        font-size: 22px;
    }

    .gb-agr-article {
        padding: 24px 18px;
    }

    .gb-agr-clause {
        flex-direction: column;
        gap: 10px;
        padding: 14px;
    }

    .gb-agr-num {
        align-self: flex-start;
    }

    .gb-agr-list {
        margin-left: 0;
    }

    .gb-agr-contact {
        flex-direction: column;
        text-align: center;
        margin: 24px 0 0;
    }

    .gb-agr-contact__btn {
        width: 100%;
        justify-content: center;
    }
}

/* === Advertising (Saytda reklam) === */
.gb-ads {
    padding: 28px 16px 60px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

.gb-ads-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: center;
    padding: 50px 48px;
    margin-bottom: 32px;
    background: linear-gradient(135deg, #0f2942 0%, #22a6a6 70%, #34c8c8 100%);
    border-radius: 24px;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 18px 50px rgba(15, 41, 66, 0.25);
}

.gb-ads-hero__content {
    position: relative;
    z-index: 2;
}

.gb-ads-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 7px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 18px;
}

.gb-ads-hero h1 {
    font-size: 38px;
    font-weight: 800;
    margin: 0 0 16px;
    line-height: 1.15;
    letter-spacing: -0.4px;
}

.gb-ads-hero__accent {
    background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.gb-ads-hero p {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 28px;
    max-width: 540px;
}

.gb-ads-hero__cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.gb-ads-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.2px;
}

.gb-ads-hero__btn--primary {
    background: #fff;
    color: #0f2942;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.gb-ads-hero__btn--primary:hover {
    transform: translateY(-2px);
    color: #0f2942;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.gb-ads-hero__btn--ghost {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.gb-ads-hero__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.gb-ads-hero__visual {
    position: relative;
    height: 240px;
    z-index: 1;
}

.gb-ads-hero__badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 54px;
    box-shadow: 0 20px 50px rgba(255, 140, 0, 0.4);
    z-index: 2;
    animation: gemFloat 4s ease-in-out infinite;
}

@keyframes gemFloat {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(-6deg);
    }

    50% {
        transform: translate(-50%, -55%) rotate(6deg);
    }
}

.gb-ads-hero__shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.gb-ads-hero__shape--1 {
    width: 200px;
    height: 200px;
    top: -40px;
    right: -30px;
}

.gb-ads-hero__shape--2 {
    width: 120px;
    height: 120px;
    bottom: -30px;
    left: 20px;
    background: rgba(255, 215, 0, 0.12);
}

.gb-ads-hero__shape--3 {
    width: 70px;
    height: 70px;
    top: 30%;
    right: 30%;
    background: rgba(255, 255, 255, 0.14);
}

.gb-ads-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 50px;
}

.gb-ads-stat {
    background: #fff;
    padding: 24px 18px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(34, 166, 166, 0.08);
    border: 1px solid #f0f0f0;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gb-ads-stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(34, 166, 166, 0.15);
    border-color: rgba(34, 166, 166, 0.2);
}

.gb-ads-stat__num {
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(135deg, #22a6a6 0%, #ff6600 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.gb-ads-stat__label {
    font-size: 12.5px;
    color: #718096;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gb-ads-section-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 8px;
    letter-spacing: -0.2px;
}

.gb-ads-section-sub {
    text-align: center;
    color: #718096;
    font-size: 15px;
    margin: 0 auto 40px;
    max-width: 560px;
    line-height: 1.6;
}

.gb-ads-features {
    margin-bottom: 60px;
}

.gb-ads-features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
}

.gb-ads-feature {
    background: #fff;
    padding: 28px 24px;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f0f0;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.gb-ads-feature::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #22a6a6 0%, #34c8c8 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.gb-ads-feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(34, 166, 166, 0.12);
}

.gb-ads-feature:hover::after {
    transform: scaleX(1);
}

.gb-ads-feature__icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    margin-bottom: 18px;
    transition: transform .35s ease;
}

.gb-ads-feature:hover .gb-ads-feature__icon {
    transform: scale(1.08) rotate(-5deg);
}

.gb-ads-feature__icon--teal {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    box-shadow: 0 8px 20px rgba(34, 166, 166, 0.3);
}

.gb-ads-feature__icon--orange {
    background: linear-gradient(135deg, #ff6600 0%, #ff8533 100%);
    box-shadow: 0 8px 20px rgba(255, 102, 0, 0.3);
}

.gb-ads-feature__icon--purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
}

.gb-ads-feature__icon--gold {
    background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
    box-shadow: 0 8px 20px rgba(255, 140, 0, 0.3);
}

.gb-ads-feature h3 {
    font-size: 17px;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 8px;
}

.gb-ads-feature p {
    font-size: 14px;
    color: #718096;
    line-height: 1.6;
    margin: 0;
}

.gb-ads-contact-section {
    padding: 50px 32px;
    background: linear-gradient(135deg, #fafbfc 0%, #f0f9f9 100%);
    border-radius: 24px;
    border: 1px solid #e2e8f0;
}

.gb-ads-contact__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    max-width: 980px;
    margin: 0 auto;
}

.gb-ads-ccard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    background: #fff;
    border-radius: 18px;
    text-decoration: none;
    color: #2d3748;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
    transition: all .35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.gb-ads-ccard::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.gb-ads-ccard:hover {
    transform: translateY(-6px);
    text-decoration: none;
    color: #2d3748;
    box-shadow: 0 18px 40px rgba(34, 166, 166, 0.15);
}

.gb-ads-ccard:hover::before {
    transform: scaleX(1);
}

.gb-ads-ccard__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: transform .35s ease;
}

.gb-ads-ccard__icon svg {
    width: 26px;
    height: 26px;
}

.gb-ads-ccard:hover .gb-ads-ccard__icon {
    transform: scale(1.06) rotate(-4deg);
}

.gb-ads-ccard__label {
    font-size: 11px;
    font-weight: 700;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}

.gb-ads-ccard__value {
    font-size: 18px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 16px;
    word-break: break-word;
}

.gb-ads-ccard__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    margin-top: auto;
    transition: gap .25s ease;
}

.gb-ads-ccard:hover .gb-ads-ccard__cta {
    gap: 12px;
}

.gb-ads-ccard--teal .gb-ads-ccard__icon {
    background: rgba(34, 166, 166, 0.12);
}

.gb-ads-ccard--teal .gb-ads-ccard__icon svg path {
    fill: #22a6a6;
}

.gb-ads-ccard--teal:hover .gb-ads-ccard__icon {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
}

.gb-ads-ccard--teal:hover .gb-ads-ccard__icon svg path {
    fill: #fff;
}

.gb-ads-ccard--teal::before {
    background: linear-gradient(90deg, #22a6a6 0%, #34c8c8 100%);
}

.gb-ads-ccard--teal .gb-ads-ccard__cta {
    color: #22a6a6;
}

.gb-ads-ccard--green .gb-ads-ccard__icon {
    background: rgba(37, 211, 102, 0.12);
}

.gb-ads-ccard--green .gb-ads-ccard__icon svg path {
    fill: #25d366;
}

.gb-ads-ccard--green:hover .gb-ads-ccard__icon {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}

.gb-ads-ccard--green:hover .gb-ads-ccard__icon svg path {
    fill: #fff;
}

.gb-ads-ccard--green::before {
    background: linear-gradient(90deg, #25d366 0%, #128c7e 100%);
}

.gb-ads-ccard--green .gb-ads-ccard__cta {
    color: #25d366;
}

.gb-ads-ccard--orange .gb-ads-ccard__icon {
    background: rgba(255, 102, 0, 0.12);
}

.gb-ads-ccard--orange .gb-ads-ccard__icon svg path {
    fill: #ff6600;
}

.gb-ads-ccard--orange:hover .gb-ads-ccard__icon {
    background: linear-gradient(135deg, #ff6600 0%, #ff8533 100%);
}

.gb-ads-ccard--orange:hover .gb-ads-ccard__icon svg path {
    fill: #fff;
}

.gb-ads-ccard--orange::before {
    background: linear-gradient(90deg, #ff6600 0%, #ff8533 100%);
}

.gb-ads-ccard--orange .gb-ads-ccard__cta {
    color: #ff6600;
}

@media (max-width: 900px) {
    .gb-ads-hero {
        grid-template-columns: 1fr;
        padding: 36px 26px;
    }

    .gb-ads-hero h1 {
        font-size: 28px;
    }

    .gb-ads-hero__visual {
        order: -1;
        height: 160px;
    }

    .gb-ads-hero__badge {
        width: 100px;
        height: 100px;
        font-size: 40px;
        border-radius: 24px;
    }

    .gb-ads-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .gb-ads-section-title {
        font-size: 22px;
    }

    .gb-ads-contact-section {
        padding: 36px 20px;
    }
}

@media (max-width: 500px) {
    .gb-ads-hero {
        padding: 28px 20px;
    }

    .gb-ads-hero h1 {
        font-size: 24px;
    }

    .gb-ads-hero__btn {
        flex: 1;
        justify-content: center;
        padding: 12px 16px;
        font-size: 13.5px;
    }
}

/* === Modern Footer (Light) === */
.gb-footer {
    position: relative;
    background: linear-gradient(180deg, #f8fbff 0%, #eef7f7 100%);
    color: #4a5568;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    margin-top: 60px;
    padding: 0;
    border-top: 1px solid rgba(34, 166, 166, 0.08);
}

.gb-footer__waves {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
    transform: translateY(-99%);
    pointer-events: none;
}

.gb-footer__waves svg {
    width: 100%;
    height: 60px;
    display: block;
}

.gb-footer__waves svg path {
    fill: #f8fbff;
}

.gb-footer::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(34, 166, 166, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.gb-footer::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -50px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.07) 0%, transparent 70%);
    pointer-events: none;
}

.gb-footer__mobLogo {
    display: none;
}

.gb-footer__main {
    height: auto;
    background: transparent;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 36px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 60px 30px 40px;
    position: relative;
    z-index: 1;
}

.gb-footer__col {
    flex: unset;
    margin: 0;
    text-align: left;
}

.gb-footer__col--brand {
    max-width: 320px;
}

.gb-footer__logo {
    margin: 0 0 18px;
    text-align: left;
}

.gb-footer__logo img {
    width: 150px !important;
    margin: 0 !important;
    height: auto;
    opacity: 1;
}

.gb-footer__tagline {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.65;
    color: #718096;
    margin: 0 0 22px;
    text-align: left;
}

.gb-footer__title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: #1e3a5f;
    margin: 0 0 22px;
    position: relative;
    padding-bottom: 10px;
}

.gb-footer__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #22a6a6 0%, #34c8c8 100%);
    border-radius: 2px;
}

.gb-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gb-footer__links li {
    margin: 0 0 10px;
    line-height: 1.3;
}

.gb-footer__links li {
    margin: 0 0 6px;
}

.gb-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #4a5568;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    transition: all .25s ease;
    width: auto;
    margin: 0;
    padding: 6px 10px 6px 6px;
    border-radius: 10px;
    font-family: inherit;
}

.gb-footer__links .gb-link-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(34, 166, 166, 0.1);
    color: #22a6a6;
    border-radius: 8px;
    font-size: 12px;
    flex-shrink: 0;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gb-footer__links .gb-link-ico i {
    font-size: 12px;
    line-height: 1;
}

.gb-footer__links a:hover {
    color: #22a6a6;
    text-decoration: none;
    background: rgba(34, 166, 166, 0.06);
    transform: translateX(2px);
}

.gb-footer__links a:hover .gb-link-ico {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    transform: scale(1.05) rotate(-5deg);
    box-shadow: 0 4px 12px rgba(34, 166, 166, 0.3);
}

.gb-footer__social {
    display: flex;
    gap: 12px;
    text-align: left;
    margin: 0;
}

.gb-social-btn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    text-decoration: none;
    border: none;
    transition: all .35s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin: 0;
    position: relative;
    overflow: hidden;
}

.gb-social-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.18);
    opacity: 0;
    transition: opacity .25s ease;
}

.gb-social-btn i {
    position: relative;
    z-index: 1;
    transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gb-social-btn:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-4px) scale(1.06);
}

.gb-social-btn:hover::after {
    opacity: 1;
}

.gb-social-btn:hover i {
    transform: rotate(-8deg) scale(1.08);
}

.gb-social-btn--fb {
    background: linear-gradient(135deg, #1877f2 0%, #4267b2 100%);
    box-shadow: 0 6px 16px rgba(24, 119, 242, 0.32);
}

.gb-social-btn--fb:hover {
    box-shadow: 0 12px 26px rgba(24, 119, 242, 0.45);
}

.gb-social-btn--ig {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 6px 16px rgba(220, 39, 67, 0.32);
}

.gb-social-btn--ig:hover {
    box-shadow: 0 12px 26px rgba(220, 39, 67, 0.45);
}

.gb-social-btn--yt {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    box-shadow: 0 6px 16px rgba(255, 0, 0, 0.32);
}

.gb-social-btn--yt:hover {
    box-shadow: 0 12px 26px rgba(255, 0, 0, 0.45);
}

.gb-footer__col--cta {
    background: #ffffff;
    border: 1px solid rgba(34, 166, 166, 0.18);
    border-radius: 16px;
    padding: 24px 22px;
    box-shadow: 0 6px 22px rgba(34, 166, 166, 0.08);
}

.gb-footer__ctaText {
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.6;
    color: #718096;
    margin: 0 0 18px;
    text-align: left;
}

a#btn-add.gb-footer__cta,
.gb-footer__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    border: none;
    margin: 0;
    color: #fff !important;
    text-align: center;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: var(--primary);
    /* background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%); */
    border-radius: 12px;
    box-shadow: 0 8px 22px rgb(253 102 32 / 32%), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

a#btn-add.gb-footer__cta:hover,
.gb-footer__cta:hover {
    background: linear-gradient(135deg, #178585 0%, #22a6a6 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(34, 166, 166, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    text-decoration: none;
    color: #fff;
}

.gb-footer__cta--ghost {
    background: transparent;
    color: #22a6a6 !important;
    border: 1.5px solid rgba(34, 166, 166, 0.35);
    margin-top: 10px;
    box-shadow: none;
}

.gb-footer__cta--ghost:hover {
    background: rgba(34, 166, 166, 0.08);
    color: #178585 !important;
    border-color: #22a6a6;
    box-shadow: none;
}

.gb-footer__bottom {
    background: rgba(34, 166, 166, 0.06);
    border-top: 1px solid rgba(34, 166, 166, 0.1);
    padding: 18px 24px;
    position: relative;
    z-index: 1;
}

.gb-footer__copy {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    color: #718096;
    font-size: 13px;
    text-align: center;
}

.gb-footer__bottom #span1 {
    font-family: inherit;
    color: #4a5568;
    width: auto;
    display: inline;
    text-align: center;
    padding: 0;
    bottom: auto;
    left: auto;
    font-weight: 500;
}

.gb-footer__dot {
    color: #cbd5e0;
}

.gb-footer__madeIn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #718096;
}

.gb-footer__madeIn i {
    color: #ff4757;
    animation: heartBeat 1.6s ease-in-out infinite;
    font-size: 11px;
}

.gb-footer #celafrix_footer,
.gb-footer #celafrix_center {
    display: none;
}

.gb-footer .dcb_section img {
    width: auto;
    margin: 0;
}

@media (max-width: 992px) {
    .gb-footer__main {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        padding: 48px 24px 32px;
    }

    .gb-footer__col--brand {
        grid-column: 1 / -1;
        max-width: none;
    }

    .gb-footer__col--cta {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .gb-footer {
        margin-top: 40px;
    }

    .gb-footer__main {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 40px 20px 28px;
    }

    .gb-footer__logo {
        text-align: center;
    }

    .gb-footer__tagline,
    .gb-footer__ctaText {
        text-align: center;
    }

    .gb-footer__social {
        justify-content: center;
    }

    .gb-footer__title {
        text-align: center;
    }

    .gb-footer__title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .gb-footer__col {
        text-align: center;
    }

    .gb-footer__links {
        display: inline-block;
        text-align: left;
    }

    .gb-footer__copy {
        font-size: 12px;
        gap: 8px;
    }

    .gb-footer__waves svg {
        height: 40px;
    }


}

/* ============================================
   User Notifications (notification.php)
   ============================================ */
.gb-notifications {
    width: 100%;
}

.gb-notifications .t_header {
    margin-bottom: 22px;
}

.gb-notifications .t_header span i {
    margin-right: 8px;
}

.gb-notif-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 12px;
    line-height: 1.4;
    min-width: 30px;
    text-align: center;
}

.gb-notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gb-notif-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.gb-notif-item:hover {
    border-color: #cbd5e0;
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(34, 166, 166, 0.1);
}

.gb-notif-item.is-unread {
    background: linear-gradient(135deg, #f0fdfa 0%, #f8feff 100%);
    border-color: #b8eded;
}

.gb-notif-item.is-unread:hover {
    border-color: #5fc8c8;
}

.gb-notif-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
}

.gb-notif-item.is-unread .gb-notif-status {
    background: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
    animation: gb-notif-pulse 2s infinite;
}

@keyframes gb-notif-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.05);
    }
}

.gb-notif-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    color: #22a6a6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    transition: transform .25s ease;
}

.gb-notif-item:hover .gb-notif-ico {
    transform: scale(1.05);
}

.gb-notif-item.is-unread .gb-notif-ico {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(34, 166, 166, 0.28);
}

.gb-notif-body {
    flex: 1;
    min-width: 0;
}

.gb-notif-source {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #718096;
    margin-bottom: 4px;
    letter-spacing: 0.2px;
}

.gb-notif-item.is-unread .gb-notif-source {
    color: #22a6a6;
}

.gb-notif-tag {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(34, 166, 166, 0.3);
}

.gb-notif-text {
    font-size: 14.5px;
    color: #2d3748;
    line-height: 1.5;
    word-break: break-word;
}

.gb-notif-item.is-unread .gb-notif-text {
    font-weight: 600;
    color: #1a202c;
}

.gb-notif-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.gb-notif-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #fafbfc;
    color: #718096;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: all .25s ease;
}

.gb-notif-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.gb-notif-btn-view:hover {
    background: #f0fdfa;
    color: #22a6a6;
    border-color: #5fc8c8;
    box-shadow: 0 4px 12px rgba(34, 166, 166, 0.15);
}

.gb-notif-btn-delete:hover {
    background: #fef2f2;
    color: #ef4444;
    border-color: #fca5a5;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

/* Empty state */
.gb-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: #ffffff;
    border: 1.5px dashed #e2e8f0;
    border-radius: 14px;
}

.gb-notif-empty .gb-empty-ico {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    color: #22a6a6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(34, 166, 166, 0.12);
}

.gb-notif-empty h4 {
    color: #2d3748;
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 6px;
}

.gb-notif-empty p {
    margin: 0;
    font-size: 14px;
    color: #718096;
}

/* Modal */
.gb-notif-modal .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.gb-notif-modal .modal-header {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    border-bottom: none;
    padding: 18px 22px;
    align-items: center;
}

.gb-notif-modal .modal-title {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.gb-notif-modal .modal-title i {
    font-size: 18px;
}

.gb-notif-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background .2s ease;
}

.gb-notif-close:hover {
    background: rgba(255, 255, 255, 0.32);
}

.gb-notif-modal .modal-body {
    padding: 24px;
    color: #2d3748;
    font-size: 14.5px;
    line-height: 1.65;
    min-height: 100px;
}

.gb-notif-modal-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #a0aec0;
    font-size: 13px;
    padding: 20px;
}

.gb-notif-loader {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid #e2e8f0;
    border-top-color: #22a6a6;
    animation: gb-notif-spin 0.8s linear infinite;
}

@keyframes gb-notif-spin {
    to {
        transform: rotate(360deg);
    }
}

.gb-notif-modal .modal-footer {
    border-top: 1.5px solid #edf2f7;
    padding: 14px 22px;
    background: #fafbfc;
}

.gb-btn-close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #4a5568;
    border-radius: 10px;
    padding: 9px 20px;
    font-weight: 500;
    font-size: 13.5px;
    cursor: pointer;
    transition: all .2s ease;
}

.gb-btn-close:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
    color: #2d3748;
}

@media (max-width: 600px) {
    .gb-notif-item {
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px;
    }

    .gb-notif-status {
        order: -1;
    }

    .gb-notif-ico {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .gb-notif-body {
        flex: 1 1 calc(100% - 60px);
    }

    .gb-notif-actions {
        width: 100%;
        justify-content: flex-end;
        padding-top: 4px;
        border-top: 1px dashed #edf2f7;
        margin-top: 4px;
    }
}

/* ============================================
   MySell — Satdıqlarım (sold items)
   ============================================ */
.gb-mysell {
    width: 100%;
}

.gb-mysell .t_header {
    margin-bottom: 22px;
}

.gb-mysell .t_header span i {
    margin-right: 8px;
}

.gb-mysell-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 12px;
    line-height: 1.4;
    min-width: 30px;
    text-align: center;
}

.gb-sell-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gb-sell-card {
    position: relative;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 20px 18px 26px;
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.gb-sell-card:hover {
    border-color: #cbd5e0;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(34, 166, 166, 0.08);
}

.gb-sell-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #22a6a6 0%, #34c8c8 100%);
}

.gb-sell-card.is-pending {
    background: linear-gradient(135deg, #f0fdfa 0%, #f8feff 100%);
    border-color: #b8eded;
}

.gb-sell-card.is-pending .gb-sell-accent {
    background: linear-gradient(180deg, #22a6a6 0%, #34c8c8 100%);
}

.gb-sell-card.is-shipped {
    background: linear-gradient(135deg, #fffbeb 0%, #fffef5 100%);
    border-color: #fde68a;
}

.gb-sell-card.is-shipped .gb-sell-accent {
    background: linear-gradient(180deg, #f59e0b 0%, #fbbf24 100%);
}

.gb-sell-card.is-completed {
    background: linear-gradient(135deg, #f0fdf4 0%, #f8fffa 100%);
    border-color: #bbf7d0;
}

.gb-sell-card.is-completed .gb-sell-accent {
    background: linear-gradient(180deg, #16a34a 0%, #22c55e 100%);
}

.gb-sell-card.is-cancelled {
    background: #fafafa;
    border-color: #e5e7eb;
    opacity: 0.85;
}

.gb-sell-card.is-cancelled .gb-sell-accent {
    background: linear-gradient(180deg, #9ca3af 0%, #d1d5db 100%);
}

.gb-sell-card.is-cancelled .gb-sell-token,
.gb-sell-card.is-cancelled .gb-sell-price,
.gb-sell-card.is-cancelled .gb-sell-buyer {
    text-decoration: line-through;
    color: #6b7280;
}

/* Head row */
.gb-sell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #edf2f7;
}

.gb-sell-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.gb-sell-info-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    color: #22a6a6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-decoration: none;
    flex-shrink: 0;
    transition: all .25s ease;
}

.gb-sell-info-btn:hover {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 166, 166, 0.28);
    text-decoration: none;
}

.gb-sell-code {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gb-sell-code .gb-sell-label {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.gb-sell-token {
    font-size: 15px;
    font-weight: 700;
    color: #1a202c;
    letter-spacing: 0.3px;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
}

/* Status badge */
.gb-sell-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.gb-sell-status i {
    font-size: 11px;
}

.gb-sell-status.is-pending {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(34, 166, 166, 0.3);
}

.gb-sell-status.is-shipped {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.gb-sell-status.is-completed {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
}

.gb-sell-status.is-cancelled {
    background: #e5e7eb;
    color: #6b7280;
}

/* Field grid */
.gb-sell-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}

.gb-sell-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.gb-sell-field .gb-sell-label {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.gb-sell-field .gb-sell-label i {
    font-size: 10px;
    color: #b8c0cc;
}

.gb-sell-value {
    font-size: 14px;
    color: #2d3748;
    font-weight: 500;
    word-break: break-word;
}

.gb-sell-price {
    font-weight: 700;
    color: #22a6a6;
    font-size: 15px;
}

.gb-sell-buyer {
    color: #2d3748;
    text-decoration: none;
    transition: color .2s ease;
}

.gb-sell-buyer:hover {
    color: #22a6a6;
    text-decoration: underline;
}

/* Action buttons */
.gb-sell-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px dashed #edf2f7;
}

.gb-sell-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 9px;
    border: 1.5px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all .25s ease;
    line-height: 1;
}

.gb-sell-btn i {
    font-size: 12px;
}

.gb-sell-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.gb-sell-btn.is-static {
    cursor: default;
}

.gb-sell-btn.is-static:hover {
    transform: none;
}

.gb-sell-btn-primary {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(34, 166, 166, 0.25);
}

.gb-sell-btn-primary:hover {
    color: #fff;
    box-shadow: 0 6px 16px rgba(34, 166, 166, 0.35);
}

.gb-sell-btn-success {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}

.gb-sell-btn-success:hover {
    color: #fff;
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.35);
}

.gb-sell-btn-ghost {
    background: #fafbfc;
    border-color: #e2e8f0;
    color: #4a5568;
}

.gb-sell-btn-ghost:hover {
    background: #f0fdfa;
    border-color: #5fc8c8;
    color: #22a6a6;
    box-shadow: 0 4px 12px rgba(34, 166, 166, 0.15);
}

.gb-sell-btn-danger {
    background: #fff;
    border-color: #fecaca;
    color: #ef4444;
}

.gb-sell-btn-danger:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

/* Empty state */
.gb-mysell-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: #ffffff;
    border: 1.5px dashed #e2e8f0;
    border-radius: 14px;
}

.gb-mysell-empty .gb-empty-ico {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    color: #22a6a6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(34, 166, 166, 0.12);
}

.gb-mysell-empty h4 {
    color: #2d3748;
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 6px;
}

.gb-mysell-empty p {
    margin: 0;
    font-size: 14px;
    color: #718096;
}

/* Modal */
.gb-sell-modal .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.gb-sell-modal .modal-header {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    border-bottom: none;
    padding: 18px 22px;
    align-items: center;
}

.gb-sell-modal .modal-title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}

.gb-sell-modal .modal-title i {
    font-size: 18px;
}

.gb-sell-close {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease;
}

.gb-sell-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

.gb-sell-modal .modal-body {
    padding: 22px;
    color: #2d3748;
    font-size: 14.5px;
    line-height: 1.55;
}

.gb-sell-modal .modal-footer {
    border-top: 1px solid #edf2f7;
    padding: 14px 22px;
}

.gb-sell-modal-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 0;
    color: #718096;
    font-size: 13px;
}

/* Responsive */
@media (max-width: 992px) {
    .gb-sell-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .gb-sell-card {
        padding: 16px 16px 16px 22px;
    }

    .gb-sell-head {
        flex-wrap: wrap;
    }

    .gb-sell-status {
        font-size: 11px;
        padding: 5px 10px;
    }

    .gb-sell-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .gb-sell-actions {
        gap: 6px;
    }

    .gb-sell-btn {
        font-size: 12px;
        padding: 7px 11px;
        flex: 1;
        justify-content: center;
        min-width: max-content;
    }
}

@media (max-width: 460px) {
    .gb-sell-grid {
        grid-template-columns: 1fr 1fr;
    }

    .gb-sell-info-btn {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .gb-sell-token {
        font-size: 14px;
    }
}

/* ============================================
   MyTake — Aldıqlarım (purchases)
   reuses .gb-sell-* card styles + adds notice
   banners and the muted/disabled button state
   ============================================ */
.gb-mytake {
    width: 100%;
}

.gb-mytake .t_header {
    margin-bottom: 22px;
}

.gb-mytake .t_header span i {
    margin-right: 8px;
}

/* Info notice (light teal) */
.gb-mytake-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(135deg, #f0fdfa 0%, #f8feff 100%);
    border: 1.5px solid #b8eded;
    border-left: 5px solid #22a6a6;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 14px;
    color: #1a4c4c;
    font-size: 13.5px;
    line-height: 1.55;
}

.gb-mytake-notice-ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(34, 166, 166, 0.25);
}

.gb-mytake-notice-body {
    flex: 1;
    min-width: 0;
}

.gb-mytake-notice-body strong {
    color: #0f5f5f;
    font-weight: 700;
    margin-right: 4px;
}

.gb-mytake-notice-body em {
    font-style: normal;
    font-weight: 700;
    color: #22a6a6;
}

/* Seller-rejection alert (light red) */
.gb-mytake-reject {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(135deg, #fff5f5 0%, #fffafa 100%);
    border: 1.5px solid #fecaca;
    border-left: 5px solid #ef4444;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 14px;
    color: #7f1d1d;
    font-size: 13.5px;
    line-height: 1.55;
}

.gb-mytake-reject-ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.gb-mytake-reject-body {
    flex: 1;
    min-width: 0;
}

.gb-mytake-reject-body strong {
    color: #991b1b;
    font-weight: 700;
    margin-right: 4px;
}

.gb-mytake-reject-body q {
    font-weight: 600;
    color: #b91c1c;
    quotes: '«' '»';
}

.gb-mytake-reject-body q::before {
    content: open-quote;
}

.gb-mytake-reject-body q::after {
    content: close-quote;
}

/* Muted/disabled button (e.g. inactive "Təhvil al") */
.gb-sell-btn-muted {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
}

.gb-sell-btn-muted:hover {
    background: #f1f5f9;
    color: #94a3b8;
    transform: none;
}

.gb-mytake .gb-mysell-empty .gb-empty-ico {
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    color: #22a6a6;
}

@media (max-width: 700px) {

    .gb-mytake-notice,
    .gb-mytake-reject {
        padding: 14px;
        gap: 12px;
        font-size: 13px;
    }

    .gb-mytake-notice-ico,
    .gb-mytake-reject-ico {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
}

/* ============================================
   MyOrders — Elanlarım (user's own ads)
   reuses .c_box / .ramka / etc for the cards,
   adds a header, grid layout, badges, empty.
   ============================================ */
.gb-myorders {
    width: 100%;
}

.gb-myorders .t_header {
    margin-bottom: 22px;
    padding-right: 8px;
}

.gb-myorders .t_header span i {
    margin-right: 8px;
}

.gb-myorders-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gb-myorders-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.28);
    padding: 7px 14px !important;
    border-radius: 8px;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none;
    line-height: 1 !important;
    transition: background .2s ease, transform .2s ease;
    margin-right: 0 !important;
}

.gb-myorders-add:hover {
    background: rgba(255, 255, 255, 0.32) !important;
    transform: translateY(-1px);
    text-decoration: none;
}

.gb-myorders-add i {
    font-size: 11px;
}

/* Grid */
.gb-myorders-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.gb-myorders-cell {
    position: relative;
    min-width: 0;
}

.gb-myorders-cell .c_box {
    position: relative;
    height: 100%;
}

/* Badge overlay on cards */
.gb-myorders-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    z-index: 5;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.gb-myorders-badge i {
    font-size: 10px;
}

.gb-myorders-badge-discount {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

/* Empty state */
.gb-myorders-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: #ffffff;
    border: 1.5px dashed #e2e8f0;
    border-radius: 14px;
}

.gb-myorders-empty .gb-empty-ico {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    color: #22a6a6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(34, 166, 166, 0.12);
}

.gb-myorders-empty h4 {
    color: #2d3748;
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 6px;
}

.gb-myorders-empty p {
    margin: 0 0 18px;
    font-size: 14px;
    color: #718096;
    max-width: 320px;
}

.gb-myorders-empty .gb-sell-btn-primary {
    text-decoration: none;
}

/* Responsive */
@media (max-width: 992px) {
    .gb-myorders-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (max-width: 600px) {
    .gb-myorders-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .gb-myorders-add {
        padding: 6px 11px !important;
        font-size: 12px !important;
    }

    .gb-myorders-add span,
    .gb-myorders-add {
        white-space: nowrap;
    }
}

/* ============================================
   Account / Register page (account.php)
   ============================================ */
.acc-page {
    background: #f4f7fb;
    padding: 48px 16px;
    min-height: calc(100vh - 80px);
}

.acc-container {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 28px;
    align-items: stretch;
}

/* ---- Form card ---- */
.acc-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(18, 38, 63, 0.08);
    padding: 36px 36px 30px;
    border: 1px solid #eef1f6;
}

.acc-card__header {
    text-align: center;
    margin-bottom: 26px;
}

.acc-card__title {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 700;
    color: #1f2d3d;
    letter-spacing: -0.3px;
}

.acc-card__subtitle {
    margin: 0;
    color: #6b7a90;
    font-size: 14px;
}

/* ---- Form layout ---- */
.acc-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.acc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ---- Inputs ---- */
.acc-field {
    position: relative;
}

.acc-field__icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #9aa6b8;
    font-size: 14px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.acc-field__icon--right {
    left: auto;
    right: 14px;
    color: #25d366;
}

.acc-input {
    width: 100%;
    height: 46px;
    padding: 0 16px 0 40px;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 14px;
    color: #1f2d3d;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.acc-input::placeholder {
    color: #9aa6b8;
}

.acc-input:hover {
    background: #fff;
}

.acc-input:focus {
    background: #fff;
    border-color: #34c8c8;
    box-shadow: 0 0 0 4px rgba(52, 200, 200, 0.12);
}

.acc-field:focus-within .acc-field__icon {
    color: #34c8c8;
}

.acc-field:focus-within .acc-field__icon--right {
    color: #25d366;
}

/* ---- Alerts (hidden by default; toggled via JS) ---- */
.acc-alerts:empty {
    display: none;
}

.acc-alert {
    display: none;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 8px;
}

.acc-alert--success {
    background: #e8f8f1;
    color: #1f7a52;
    border: 1px solid #c7ecd9;
}

.acc-alert--danger {
    background: #fdecec;
    color: #b3261e;
    border: 1px solid #f5c6c6;
}

/* ---- Checkbox ---- */
.acc-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #4a5568;
    cursor: pointer;
    margin: 4px 0 6px;
}

.acc-check input[type="checkbox"] {
    margin-top: 3px;
    accent-color: #34c8c8;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.acc-check__link {
    color: #34c8c8;
    font-weight: 600;
    text-decoration: none;
}

.acc-check__link:hover {
    text-decoration: underline;
}

/* ---- Buttons ---- */
.acc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 22px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
    text-decoration: none;
    width: 100%;
}

.acc-btn:hover {
    transform: translateY(-1px);
}

.acc-btn--primary {
    background: linear-gradient(135deg, #34c8c8 0%, #1aa3a3 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(52, 200, 200, 0.28);
}

.acc-btn--primary:hover {
    box-shadow: 0 8px 22px rgba(52, 200, 200, 0.4);
    color: #fff;
}

.acc-btn--fb {
    background: #1877f2;
    color: #fff;
    box-shadow: 0 6px 16px rgba(24, 119, 242, 0.22);
}

.acc-btn--fb:hover {
    background: #166fe0;
    color: #fff;
    box-shadow: 0 8px 22px rgba(24, 119, 242, 0.32);
}

.acc-btn--ghost {
    background: #fff;
    color: #1f7a7a;
    border: 1.5px solid #34c8c8;
}

.acc-btn--ghost:hover {
    background: #34c8c8;
    color: #fff;
}

/* ---- Divider ---- */
.acc-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #9aa6b8;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 6px 0;
}

.acc-divider::before,
.acc-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5eaf2;
}

.acc-divider span {
    padding: 0 12px;
}

.acc-social {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.acc-social__status {
    text-align: center;
    font-size: 13px;
    color: #6b7a90;
}

/* ---- Side info panel ---- */
.acc-side {
    background: linear-gradient(160deg, #ecfafa 0%, #f7fcff 100%);
    border-radius: 16px;
    border: 1px solid #d9eff0;
    padding: 40px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.acc-side::before {
    content: '';
    position: absolute;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(52, 200, 200, 0.18) 0%, transparent 70%);
    top: -60px;
    right: -60px;
    border-radius: 50%;
}

.acc-side__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 320px;
}

.acc-side__img {
    width: 60%;
    max-width: 180px;
    margin-bottom: 24px;
    height: auto;
}

.acc-side__text {
    font-size: 16px;
    line-height: 1.55;
    color: #2d3f54;
    margin-bottom: 28px;
}

.acc-side__brand {
    color: #1aa3a3;
    font-weight: 700;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .acc-container {
        grid-template-columns: 1fr;
    }

    .acc-side {
        order: -1;
        padding: 28px 20px;
    }

    .acc-side__img {
        width: 40%;
        max-width: 140px;
        margin-bottom: 16px;
    }
}

@media (max-width: 560px) {
    .acc-page {
        padding: 20px 12px;
    }

    .acc-card {
        padding: 24px 20px;
    }

    .acc-card__title {
        font-size: 24px;
    }

    .acc-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Authentication / Login page (authentications.php)
   ============================================ */
.auth-page {
    background: #f4f7fb;
    padding: 48px 16px;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-wrap {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---- Card ---- */
.auth-card {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(18, 38, 63, 0.08);
    border: 1px solid #eef1f6;
    padding: 36px 32px 28px;
    position: relative;
}

.auth-card--shop::before {
    content: 'Mağaza';
    position: absolute;
    top: 16px;
    right: 16px;
    background: #ecfafa;
    color: #1aa3a3;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
}

.auth-card__brand {
    text-align: center;
    margin-bottom: 24px;
}

.auth-card__logo {
    max-width: 130px;
    height: auto;
    margin-bottom: 14px;
}

.auth-card__title {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: #1f2d3d;
    letter-spacing: -0.3px;
}

.auth-card__subtitle {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #6b7a90;
}

/* ---- Form ---- */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Reset bootstrap .input-group sticking together inside auth card */
.auth-card .input-group {
    display: block;
    width: 100%;
}

.auth-field {
    position: relative;
}

.auth-field__icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #9aa6b8;
    font-size: 14px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.auth-field__toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: #9aa6b8;
    cursor: pointer;
    font-size: 14px;
    z-index: 2;
    /* override legacy #view_pass positioning */
    margin: 0 !important;
}

.auth-field__toggle:hover {
    color: #34c8c8;
}

.auth-input {
    width: 100%;
    height: 46px;
    padding: 0 16px 0 40px;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 14px;
    color: #1f2d3d;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.auth-input--password {
    padding-right: 40px;
}

.auth-input::placeholder {
    color: #9aa6b8;
}

.auth-input:hover {
    background: #fff;
}

.auth-input:focus {
    background: #fff;
    border-color: #34c8c8;
    box-shadow: 0 0 0 4px rgba(52, 200, 200, 0.12);
}

.auth-field:focus-within .auth-field__icon {
    color: #34c8c8;
}

/* ---- Alert row (error + forgot link) ---- */
.auth-alert {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 22px;
    margin: -2px 0 4px;
}

.auth-alert__msg {
    /* keep #correct override: jQuery toggles display via fadeIn/fadeOut */
    color: #d93838 !important;
    font-size: 12.5px !important;
    background: #fdecec;
    padding: 6px 10px;
    border-radius: 8px;
    /* legacy float/margin overrides */
    float: none !important;
    margin: 0 !important;
}

.auth-link {
    color: #34c8c8;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.auth-link:hover {
    color: #1aa3a3;
    text-decoration: underline;
}

.auth-link--muted {
    color: #6b7a90;
    font-size: 12.5px;
    margin-left: auto;
    white-space: nowrap;
}

.auth-link--muted:hover {
    color: #34c8c8;
}

/* ---- Success message ---- */
.auth-success {
    display: none;
    text-align: center;
    color: #1f7a52;
    background: #e8f8f1;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 10px;
}

/* ---- Buttons ---- */
.auth-actions {
    margin-top: 4px;
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    padding: 0 22px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.auth-btn:hover {
    transform: translateY(-1px);
}

.auth-btn--primary {
    background: linear-gradient(135deg, #34c8c8 0%, #1aa3a3 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(52, 200, 200, 0.28);
}

.auth-btn--primary:hover {
    color: #fff;
    box-shadow: 0 8px 22px rgba(52, 200, 200, 0.4);
}

.auth-btn--fb {
    background: #1877f2;
    color: #fff;
    box-shadow: 0 6px 16px rgba(24, 119, 242, 0.22);
}

.auth-btn--fb:hover {
    background: #166fe0;
    color: #fff;
    box-shadow: 0 8px 22px rgba(24, 119, 242, 0.32);
}

/* ---- Divider ---- */
.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #9aa6b8;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 20px 0 14px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5eaf2;
}

.auth-divider span {
    padding: 0 12px;
}

/* ---- Social / Status ---- */
.auth-social {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-social__status {
    text-align: center;
    font-size: 13px;
    color: #6b7a90;
    min-height: 18px;
}

/* ---- Alert box (ajax errors) ---- */
.auth-alertbox {
    color: #d93838;
    font-size: 13px;
    text-align: center;
    margin-top: 8px;
}

.auth-alertbox:empty {
    display: none;
}

/* ---- Switch link (shop / user) ---- */
.auth-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eef1f6;
    color: #6b7a90;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.auth-switch:hover {
    color: #34c8c8;
}

/* ---- Bottom note ---- */
.auth-note {
    margin: 18px 0 0;
    font-size: 12.5px;
    color: #6b7a90;
    text-align: center;
    line-height: 1.55;
    padding: 0 12px;
}

/* ---- Responsive ---- */
@media (max-width: 560px) {
    .auth-page {
        padding: 24px 12px;
    }

    .auth-card {
        padding: 28px 22px 22px;
    }

    .auth-card__title {
        font-size: 22px;
    }

    .auth-alert {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .auth-link--muted {
        margin-left: 0;
    }
}

/* ============================================
   Forget password page (forget_password.php)
   ============================================ */
.fp-page {
    background: #f4f7fb;
    padding: 48px 16px;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-wrap {
    width: 100%;
    max-width: 440px;
}

/* ---- Back link ---- */
.fp-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7a90;
    font-size: 13px;
    text-decoration: none;
    margin-bottom: 16px;
    transition: color 0.2s ease;
}

.fp-back:hover {
    color: #34c8c8;
}

/* ---- Card ---- */
.fp-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(18, 38, 63, 0.08);
    border: 1px solid #eef1f6;
    padding: 36px 32px 28px;
    text-align: center;
    /* override legacy .avtorizasiya defaults if any */
    width: 100%;
    margin: 0;
}

.fp-card__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ecfafa 0%, #d5f3f3 100%);
    color: #1aa3a3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 6px 14px rgba(52, 200, 200, 0.18);
}

.fp-card--shop .fp-card__icon {
    background: linear-gradient(135deg, #fff5e6 0%, #ffe4bd 100%);
    color: #c67a14;
    box-shadow: 0 6px 14px rgba(198, 122, 20, 0.18);
}

.fp-card__title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: #1f2d3d;
    letter-spacing: -0.3px;
}

.fp-card__subtitle {
    margin: 0 0 24px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #6b7a90;
}

/* ---- Form ---- */
.fp-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.fp-field {
    position: relative;
}

.fp-field__icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #9aa6b8;
    font-size: 14px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.fp-input {
    width: 100%;
    height: 46px;
    padding: 0 16px 0 40px;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 14px;
    color: #1f2d3d;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.fp-input::placeholder {
    color: #9aa6b8;
}

.fp-input:hover {
    background: #fff;
}

.fp-input:focus {
    background: #fff;
    border-color: #34c8c8;
    box-shadow: 0 0 0 4px rgba(52, 200, 200, 0.12);
}

.fp-field:focus-within .fp-field__icon {
    color: #34c8c8;
}

/* ---- Button ---- */
.fp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    padding: 0 22px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.fp-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.fp-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.fp-btn--primary {
    background: linear-gradient(135deg, #34c8c8 0%, #1aa3a3 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(52, 200, 200, 0.28);
}

.fp-btn--primary:hover:not(:disabled) {
    color: #fff;
    box-shadow: 0 8px 22px rgba(52, 200, 200, 0.4);
}

/* ---- Messages (jQuery toggles display via fadeIn/fadeOut) ---- */
.fp-msg {
    display: none;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    text-align: center;
    margin-top: 4px;
}

.fp-msg--success {
    background: #e8f8f1;
    color: #1f7a52;
    border: 1px solid #c7ecd9;
}

.fp-msg--error {
    /* base style; JS injects bg/color inline on error, but provide a sensible default */
    background: #fdecec;
    color: #b3261e;
    border: 1px solid #f5c6c6;
}

/* ---- Switch link ---- */
.fp-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eef1f6;
    width: 100%;
    color: #6b7a90;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.fp-switch:hover {
    color: #34c8c8;
}

/* ---- Responsive ---- */
@media (max-width: 560px) {
    .fp-page {
        padding: 24px 12px;
    }

    .fp-card {
        padding: 28px 22px 22px;
    }

    .fp-card__title {
        font-size: 20px;
    }

    .fp-card__icon {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }
}


/* ============================================
   Category listing page (category.php)
   ============================================ */
.cat-page {
    background: #f4f7fb;
    padding: 24px 0 48px;
    min-height: 60vh;
}

/* ---- Breadcrumb ---- */
.cat-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #6b7a90;
    padding: 14px 18px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #eef1f6;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.cat-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7a90;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.18s ease;
}

.cat-breadcrumb__link:hover {
    color: #34c8c8;
}

.cat-breadcrumb__link i {
    font-size: 12px;
}

.cat-breadcrumb__sep {
    font-size: 10px;
    color: #c6cfdc;
}

.cat-breadcrumb__current {
    color: #1f2d3d;
    font-weight: 600;
}

/* ---- Header ---- */
.cat-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding: 22px 24px;
    background: linear-gradient(135deg, #ffffff 0%, #f7fcfc 100%);
    border-radius: 14px;
    border: 1px solid #eef1f6;
    box-shadow: 0 4px 14px rgba(18, 38, 63, 0.04);
    position: relative;
    overflow: hidden;
}

.cat-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #34c8c8 0%, #1aa3a3 100%);
}

.cat-header__title-wrap {
    flex: 1;
    min-width: 0;
    padding-left: 8px;
}

.cat-header__title {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 700;
    color: #1f2d3d;
    letter-spacing: -0.3px;
}

.cat-header__subtitle {
    margin: 0;
    font-size: 13.5px;
    color: #6b7a90;
}

/* ---- Override legacy .category styles inside this page ---- */
.cat-page .category {
    background: transparent;
    padding: 0;
    min-height: 200px;
}

.cat-page .category>h4,
.cat-page .category>hr {
    display: none;
}

/* ---- Grid / card spacing ---- */
.cat-grid {
    margin: 0 -8px;
}

.cat-page .category .col-md-3,
.cat-page .category [class*="col-"] {
    padding: 0 8px;
    margin-bottom: 20px;
}

.cat-page .category [class*="col-"]>* {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cat-page .category [class*="col-"]>*:hover {
    transform: translateY(-3px);
}

/* ---- Empty state ---- */
.cat-page .category #rowcategory:empty::before {
    content: 'Bu kateqoriyada hələ elan yoxdur';
    display: block;
    text-align: center;
    padding: 60px 20px;
    color: #9aa6b8;
    font-size: 14px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px dashed #dfe5ee;
    margin: 0 8px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .cat-page {
        padding: 16px 0 32px;
    }

    .cat-header {
        padding: 18px 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .cat-header__title {
        font-size: 20px;
    }

    .cat-breadcrumb {
        padding: 12px 14px;
        font-size: 12.5px;
    }
}

/* ============================================================
   leftBar (generals/leftBar.php) refinements
   ============================================================ */
.list_items .card {
    border: none;
    background: transparent;
    box-shadow: none;
    margin: 0;
}

.list_items .card-header {
    background: transparent;
    border: none;
    text-align: center;
    padding: 2px 18px 12px;
}

.list_items .card-header span {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #2d3748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.2px;
}

.settingList {
    padding: 8px 0;
    margin: 0;
    list-style: none;
}

.settingList li a {
    display: flex;
    align-items: center;
}

.settingList__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settingList li a i {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 9px;
    font-size: 14px;
    margin-right: 12px;
    color: #22a6a6;
    background: rgba(34, 166, 166, 0.08);
    transition: all .25s ease;
}

.settingList li:hover a i {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    box-shadow: 0 3px 8px rgba(34, 166, 166, 0.25);
}

.list_items .set_active a i {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.settingList .badge {
    flex: 0 0 auto;
    margin-left: auto;
    background: linear-gradient(135deg, #e53935 0%, #d02325 100%) !important;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 20px;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(208, 35, 37, 0.25);
}

.settingList .badge:empty {
    display: none;
}

/* ============================================================
   Gələn rəylər — comments (generals/comment.php)
   ============================================================ */
.comments-card {
    border: none;
    background: transparent;
}

.comments-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    padding: 16px 22px;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(34, 166, 166, 0.22);
    margin-bottom: 18px;
}

.comments-card__header svg {
    width: 22px;
    height: 22px;
}

.comments-card__header h5 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.comments-card__count {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    padding: 4px 13px;
    font-size: 13px;
    font-weight: 700;
}

.comments-table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid #eef2f2;
    box-shadow: 0 2px 12px rgba(34, 166, 166, 0.06);
}

.comments-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.comments-table thead th {
    background: #f6fbfb;
    color: #5a6a7a;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 16px;
    text-align: left;
    border-bottom: 2px solid #e6f2f2;
    white-space: nowrap;
}

.comments-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f4f4;
    color: #2d3748;
    vertical-align: middle;
}

.comments-table tbody tr {
    transition: background .2s ease;
}

.comments-table tbody tr:hover {
    background: #f7fdfd;
}

.comments-table tbody tr:last-child td {
    border-bottom: none;
}

.ta-center {
    text-align: center !important;
}

.cmt-author {
    white-space: nowrap;
}

.cmt-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    margin-right: 10px;
    vertical-align: middle;
    box-shadow: 0 2px 6px rgba(34, 166, 166, 0.25);
}

.cmt-name {
    font-weight: 600;
    vertical-align: middle;
}

.cmt-text {
    color: #4a5568;
    line-height: 1.5;
    min-width: 180px;
}

.cmt-code {
    display: inline-block;
    background: rgba(34, 166, 166, 0.1);
    color: #178585;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    transition: all .2s ease;
}

.cmt-code:hover {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    text-decoration: none;
}

.cmt-date {
    color: #718096;
    font-size: 13px;
    white-space: nowrap;
}

.cmt-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(229, 57, 53, 0.1);
    color: #e53935;
    text-decoration: none;
    transition: all .2s ease;
}

.cmt-delete:hover {
    background: linear-gradient(135deg, #e53935 0%, #d02325 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(208, 35, 37, 0.3);
}

.comments-empty {
    text-align: center;
    padding: 56px 20px;
    color: #a0aec0;
}

.comments-empty svg {
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
    color: #cbd9d9;
}

.comments-empty p {
    margin: 0;
    font-size: 15px;
}

@media (max-width: 768px) {
    .comments-table {
        font-size: 13px;
    }

    .comments-table thead th,
    .comments-table tbody td {
        padding: 11px 12px;
    }

    .cmt-avatar {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .comments-card__header {
        padding: 14px 18px;
    }
}

/* ============================================================
   Messages — chat (generals/messages.php)
   ============================================================ */
.result_content.messages {
    padding: 0;
    overflow: hidden;
}

.messages>.row {
    margin: 0;
    --bs-gutter-x: 0;
    flex-wrap: nowrap;
}

.messages>.row>[class*="col-"] {
    padding: 0;
}

/* Both panels share one tall, borderless card */
.messages .col-4>.card,
.messages .col-8>.card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    height: 560px;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.messages .col-4>.card {
    border-right: 1px solid #eef2f2;
}

/* Panel headers */
.messages .card-header {
    background: #fff;
    border-bottom: 1px solid #eef2f2;
    padding: 18px 20px;
    flex: 0 0 auto;
}

.messages .card-header h6 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 9px;
}

.messages .card-header svg {
    width: 18px;
    height: 18px;
    color: #22a6a6;
}

/* Inbox contact list */
.msg-inbox__list {
    flex: 1 1 auto;
    overflow-y: auto;
}

.messages #adminlink,
.messages #item {
    display: block;
    padding: 14px 16px;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease;
}

.messages #adminlink:hover,
.messages #item:hover {
    background: #f5fbfb;
    text-decoration: none;
}

.messages #adminlink .row,
.messages #item .row {
    margin: 0;
    align-items: center;
    flex-wrap: nowrap;
}

.messages #adminlink .col-3,
.messages #item .col-3 {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
}

.messages #adminlink .col-9,
.messages #item .col-9 {
    padding: 0 0 0 12px;
    color: #2d3748;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.3;
    overflow: hidden;
}

.messages #adminlink .col-9 small,
.messages #item .col-9 small {
    display: block;
    color: #94a3b8;
    font-weight: 500;
    font-size: 12px;
    margin-top: 3px;
}

.messages #adminlink .col-9 small svg,
.messages #item .col-9 small svg {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    vertical-align: -1px;
    color: #94a3b8;
}

.messages .adminLogo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 3px 8px rgba(34, 166, 166, 0.25);
    overflow: hidden;
    flex: 0 0 auto;
}

.messages .adminLogo svg {
    width: 20px;
    height: 20px;
    color: #fff;
}

.messages .adminLogo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.messages .hr {
    height: 1px;
    background: #eef2f2;
    margin: 0;
}

/* Chat body */
.messages .card-body {
    flex: 1 1 auto;
    height: auto !important;
    overflow-y: auto;
    padding: 20px;
    background-color: #eef6f6;
    background-image: radial-gradient(rgba(34, 166, 166, 0.07) 1px, transparent 1px);
    background-size: 18px 18px;
}

.messages .textarena {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.messages .message_baloon {
    display: flex;
    width: 100%;
}

.messages .message_baloon.me {
    justify-content: flex-end;
}

.messages .message_baloon.you {
    justify-content: flex-start;
}

.messages .mee,
.messages .your {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    word-break: break-word;
}

.messages .mee {
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    border-bottom-right-radius: 5px;
}

.messages .your {
    background: #fff;
    color: #2d3748;
    border-bottom-left-radius: 5px;
}

.messages .msg-name {
    display: block;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 2px;
}

.messages .mee .msg-name {
    color: rgba(255, 255, 255, 0.9);
}

.messages .your .msg-name {
    color: #22a6a6;
}

.messages .msg-content {
    display: block;
}

.messages .msg-time {
    display: inline-block;
    margin-left: 6px;
    font-size: 10.5px;
    opacity: .8;
    white-space: nowrap;
}

.messages .mee .msg-time {
    color: rgba(255, 255, 255, 0.85) !important;
}

.messages .your .msg-time {
    color: #94a3b8 !important;
}

.messages .msg-time svg {
    width: 11px;
    height: 11px;
    vertical-align: -1px;
    margin-right: 2px;
}

/* Empty state */
.messages .emptyBox {
    height: 100%;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.messages .emptyBox svg {
    width: 54px;
    height: 54px;
    color: #a7cece;
    margin-bottom: 14px;
}

.messages .emptyBox h5 {
    font-size: 16px;
    font-weight: 700;
    color: #475569;
    margin: 0 0 6px;
}

.messages .emptyBox p {
    margin: 0;
    font-size: 13.5px;
    color: #94a3b8;
}

/* Chat footer / composer */
.messages .card-footer {
    padding: 0 !important;
    background: #fff;
    border-top: 1px solid #eef2f2;
    flex: 0 0 auto;
}

.messages .card-footer .input-group {
    padding: 12px 14px;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.messages .card-footer .form-control {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 11px 18px;
    font-size: 14px;
    box-shadow: none;
}

.messages .card-footer .form-control:focus {
    border-color: #34c8c8 !important;
    box-shadow: 0 0 0 3px rgba(34, 166, 166, 0.12);
}

.messages #basic-addon2 {
    border: 0;
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: all .2s ease;
}

.messages #basic-addon2:hover {
    box-shadow: 0 4px 12px rgba(34, 166, 166, 0.35);
    transform: translateY(-1px);
}

.messages #basic-addon2 svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 768px) {
    .messages>.row {
        flex-wrap: wrap;
    }

    .messages .col-4,
    .messages .col-8 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .messages .col-4>.card {
        height: auto;
        max-height: 230px;
        border-right: none;
        border-bottom: 1px solid #eef2f2;
    }

    .messages .col-8>.card {
        height: 460px;
    }
}

/* ==========================================================================
   MySell — Satılanlar (modern teal redesign)
   ========================================================================== */
.mysell-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #eef3f3;
    overflow: hidden;
    box-shadow: 0 4px 22px rgba(34, 166, 166, 0.07);
}

.mysell-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: linear-gradient(135deg, #22a6a6 0%, #34c8c8 100%);
    color: #ffffff;
}

.mysell-card__title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mysell-card__title h5 {
    margin: 0;
    padding: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .2px;
}

.mysell-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
}

.mysell-card__icon svg {
    width: 20px;
    height: 20px;
    margin: 0;
    color: #ffffff;
}

.mysell-card__count {
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    white-space: nowrap;
}

.mysell-tablewrap {
    overflow-x: auto;
    scrollbar-width: thin;
}

/* Table base */
.mysell-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

.mysell-table thead th {
    background: #f4f9f9;
    color: #6b8a8a;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    text-align: center;
    padding: 13px 14px;
    border: none;
    border-bottom: 1px solid #e7efef;
    white-space: nowrap;
}

.mysell-table thead th:first-child {
    text-align: left;
    padding-left: 22px;
}

.mysell-table tbody td {
    font-size: 13px;
    color: #3d4a4a;
    text-align: center;
    padding: 14px;
    vertical-align: middle;
    border: none;
    border-bottom: 1px solid #f1f5f5;
    background: transparent;
}

.mysell-table tbody td:first-child {
    padding-left: 22px;
    text-align: left;
}

.mysell-row {
    transition: background .2s ease;
}

.mysell-row:hover td {
    background: #f6fbfb;
}

.mysell-row:last-child td {
    border-bottom: none;
}

/* Cell accents */
.mysell-id {
    font-weight: 700;
    color: #22a6a6;
}

.mysell-code {
    font-family: "SF Mono", "Roboto Mono", ui-monospace, monospace;
    font-size: 12px;
    color: #55676a;
    background: #f2f7f7;
    border-radius: 6px;
}

.mysell-price {
    font-weight: 700;
    color: #1f7a7a;
    white-space: nowrap;
}

.mysell-date {
    color: #8a9a9a;
    font-size: 12px;
    white-space: nowrap;
}

.mysell-pay {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    color: #5a6b7a;
    background: #eef3f7;
    padding: 4px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Buyer chip */
.mysell-buyer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #2c3e50;
    text-decoration: none;
    padding: 5px 12px 5px 8px;
    border-radius: 999px;
    background: #f1f7f7;
    transition: all .2s ease;
}

.mysell-buyer svg {
    width: 15px;
    height: 15px;
    margin: 0;
    color: #22a6a6;
}

.mysell-buyer:hover {
    background: #22a6a6;
    color: #ffffff;
}

.mysell-buyer:hover svg {
    color: #ffffff;
}

/* Row state variants */
.mysell-row--canceled td {
    opacity: .65;
}

.mysell-row--canceled .mysell-code,
.mysell-row--canceled .mysell-price {
    text-decoration: line-through;
}

.mysell-row--foreign td {
    box-shadow: none;
}

.mysell-row--foreign td:first-child {
    box-shadow: inset 4px 0 0 #f0b429;
}

.mysell-row--pending td:first-child {
    box-shadow: inset 4px 0 0 #e85d5d;
}

/* Action buttons */
.mysell-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
    position: relative;
}

.mysell-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 36px;
    height: 36px;
    padding: 0 11px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    line-height: 1;
    box-shadow: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.mysell-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12);
}

.mysell-actions .btn svg {
    width: 16px;
    height: 16px;
    margin: 0;
}

.mysell-actions .dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    padding: 6px;
    font-size: 13px;
}

.mysell-actions .dropdown-item {
    border-radius: 8px;
    padding: 8px 12px;
    transition: background .15s ease;
}

.mysell-actions .dropdown-item:hover {
    background: #f1f7f7;
    color: #1f7a7a;
}

/* Empty state */
.mysell-empty {
    text-align: center;
    padding: 56px 20px;
    color: #8a9a9a;
}

.mysell-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f2f9f9;
    margin-bottom: 14px;
}

.mysell-empty__icon svg {
    width: 28px;
    height: 28px;
    color: #22a6a6;
    margin: 0;
}

.mysell-empty p {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: #4a5a5a;
}

.mysell-empty small {
    font-size: 12.5px;
}

/* --- Notification variant ------------------------------------------------ */
.mysell-card--notif .mysell-table thead th,
.mysell-card--notif .mysell-table tbody td {
    text-align: left;
}

.mysell-card--notif .mysell-table tbody td:first-child {
    width: 130px;
    white-space: nowrap;
}

.mysell-card--notif .mysell-actions {
    justify-content: flex-start;
}

/* Sender brand chip */
.mysell-sender {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
}

.mysell-sender__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5d5;
    flex: 0 0 auto;
}

/* Message cell */
.mysell-msg {
    color: #5a6b6b;
    line-height: 1.45;
    max-width: 480px;
}

.mysell-msg strong {
    color: #2c3e50;
    font-weight: 700;
}

.mysell-msg span {
    color: #8a9a9a;
}

/* Unread state */
.mysell-row--unread td {
    background: #f3fbfb;
}

.mysell-row--unread:hover td {
    background: #ecf8f8;
}

.mysell-row--unread td:first-child {
    box-shadow: inset 4px 0 0 #22a6a6;
}

.mysell-row--unread .mysell-sender {
    color: #1f7a7a;
}

.mysell-row--unread .mysell-sender__dot {
    background: #22a6a6;
    box-shadow: 0 0 0 4px rgba(34, 166, 166, 0.15);
}

.mysell-row--unread .mysell-msg strong {
    color: #1f7a7a;
}

@media (max-width: 768px) {
    .mysell-card__head {
        padding: 15px 16px;
    }

    .mysell-table thead th,
    .mysell-table tbody td {
        padding: 11px 10px;
    }

    .mysell-table thead th:first-child,
    .mysell-table tbody td:first-child {
        padding-left: 14px;
    }

    .mysell-actions .btn {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
    }
}

/* =====================================================================
   HOME PRODUCT CARDS — extra polish (2026)
   Scoped to .dc-products-main so the global .c_box used elsewhere
   (myroom, shops, sales…) is not affected.
   ===================================================================== */

/* breathing room between cards already comes from the grid gap;
   make sure each card body has a tidy bottom rhythm */
.dc-products-main .c_box {
    padding-bottom: 4px;
}

/* sweep-in accent line on hover */
.dc-products-main .c_box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #22a6a6, #34c8c8);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.2, .8, .25, 1);
    z-index: 6;
}

.dc-products-main .c_box:hover::after {
    transform: scaleX(1);
}

/* product name — cleaner typography, consistent single-line height */
.dc-products-main .e_name h5 {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    min-height: 20px;
    letter-spacing: .1px;
    transition: color .2s ease;
}

.dc-products-main .c_box:hover .e_name h5 {
    color: #167f7f;
}

/* location + date row with a pin icon */
.dc-products-main .d_tarix {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}

.dc-products-main .d_tarix::before {
    content: "\f3c5";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    color: #22a6a6;
    flex: none;
}

.dc-products-main .d_tarix span {
    color: #94a3b8;
}

/* keep the price strip nicely separated from the info block */
.dc-products-main .newPrice {
    padding-top: 6px;
}

/* glassy video indicator instead of a bare icon */
.dc-products-main #icon-play {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: rgba(20, 30, 30, .55);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    text-shadow: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}


/* =====================================================================
   PRODUCT DETAIL PAGE (desktop) — modern redesign (2026)
   Scoped to .detail_page (+ sibling .similar_ad). Mobile (.mobile_*) and
   the lightSlider gallery internals are left untouched.
   ===================================================================== */

.detail_page {
    gap: 30px;
    padding: 26px 18px 12px;
    align-items: flex-start;
}

/* rounded gallery thumbnails/images (visual only, no slider math touched) */
.detail_page #image-gallery img {
    border-radius: 12px;
}

/* ---- Social action bar (like / comment / bookmark / view) ---- */
.detail_page .following_box {
    background: #f6f9f9;
    border: 1px solid var(--gb-line);
    border-radius: 14px;
    height: auto;
    padding: 8px;
    gap: 8px;
    margin-top: 14px;
    align-items: center;
}

.detail_page .following_box #btn_like,
.detail_page .following_box #btn_comment_win,
.detail_page .following_box .gb-view,
.detail_page .following_box .addbookmark a {
    box-shadow: none;
    background: #fff;
    border: 1px solid var(--gb-line);
    border-radius: 10px;
    height: 40px;
    line-height: 40px;
    min-width: 48px;
    margin: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.detail_page .following_box #btn_like:hover,
.detail_page .following_box #btn_comment_win:hover,
.detail_page .following_box .gb-view:hover,
.detail_page .following_box .addbookmark a:hover {
    border-color: var(--gb-accent);
    transform: translateY(-2px);
    box-shadow: none;
}

.detail_page .following_box .gb-view {
    color: #6b7a7c;
    font-size: 15px;
    gap: 5px;
}

.detail_page .following_box .addbookmark a {
    color: #cbd5e0;
}

/* ---- Title + price ---- */
.detail_page .detail_name {
    padding-left: 4px;
}

.detail_page .detail_name h2 {
    font-size: 26px;
    color: #1f2d2e;
    letter-spacing: .2px;
    margin-bottom: 10px;
    line-height: 1.25;
}

.detail_page #salePrice {
    font-size: 15px;
    color: #a0aec0;
    margin-bottom: 2px;
}

.detail_page #price {
    font-size: 28px;
    color: #178f8f;
    background: var(--gb-accent-soft);
    padding: 4px 16px;
    border-radius: 12px;
    line-height: 1.35;
}

.detail_page #viewer {
    background: #f3f5f5;
    color: #6b7a7c;
    padding: 6px 13px;
    border-radius: 30px;
    margin-left: 12px;
    margin-top: 0;
    vertical-align: middle;
}

/* shop link + "other ads" as pills */
.detail_page #store_btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gb-accent-soft);
    color: #178f8f;
    padding: 5px 14px;
    border-radius: 30px;
    font-weight: 600;
    margin-top: 6px;
    transition: background .2s ease, color .2s ease;
}

.detail_page #store_btn:hover {
    background: var(--gb-accent);
    color: #fff;
}

.detail_page #more {
    float: right;
    font-size: 13.5px;
    background: #fff;
    border: 1px solid var(--gb-line);
    padding: 7px 15px;
    border-radius: 30px;
    color: #178f8f;
    font-weight: 600;
    margin: 6px 0;
    transition: border-color .2s ease, background .2s ease;
}

.detail_page #more:hover {
    border-color: var(--gb-accent);
    background: var(--gb-accent-soft);
}

/* ---- Rating stars ---- */
.detail_page #raiting {
    margin: 10px 0 4px;
}

.detail_page .raiting {
    font-size: 22px;
}

/* ---- Spec tables (.materials > .punkt) ---- */
.detail_page .materials {
    gap: 14px;
    margin: 8px 0 4px;
}

.detail_page .punkt {
    background: #f8fafa;
    border: 1px solid var(--gb-line);
    border-radius: 14px;
    padding: 4px 14px;
}

.detail_page .punkt table {
    width: 100%;
}

.detail_page .punkt td {
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px dashed #e4ecec;
    vertical-align: top;
}

.detail_page .punkt tr:last-child td {
    border-bottom: none;
}

.detail_page .punkt td:first-child {
    color: #8a9a9a;
    white-space: nowrap;
    padding-right: 10px;
    width: 42%;
}

.detail_page .punkt td b {
    font-size: 13px;
    color: #28403f;
    font-weight: 600;
}

/* ---- Location strip ---- */
.detail_page #dc_city {
    display: block;
    float: none;
    margin: 6px 0 0;
    background: #f8fafa;
    border: 1px solid var(--gb-line);
    border-left: 3px solid var(--gb-accent);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 13px;
    color: #5a6a6a;
}

.detail_page #dc_city b {
    color: #28403f;
}

/* ---- Description ---- */
.detail_page .pro_info {
    background: #f8fafa;
    border-radius: 14px;
    padding: 14px 18px;
    margin-top: 14px;
}

.detail_page .pro_info h3 {
    position: relative;
    padding-left: 13px;
    font-size: 16px;
    color: #1f2d2e;
    margin-top: 0;
}

.detail_page .pro_info h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    border-radius: 3px;
    background: var(--gb-accent);
}

.detail_page .pro_info p {
    font-size: 14px;
    color: #5a6a6a;
    line-height: 1.65;
    margin-bottom: 0;
}

/* soften the divider rules */
.detail_page .pro_detail hr {
    border: none;
    border-top: 1px solid var(--gb-line);
    margin: 16px 0;
}

/* ---- Owner action links (edit / delete / view) ---- */
.detail_page .pro_detail #link_process {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--gb-line);
    padding: 7px 13px;
    border-radius: 9px;
    margin: 8px 6px 0 0;
    font-size: 13px;
    color: #5a6a6a;
    transition: border-color .2s ease, color .2s ease;
}

.detail_page .pro_detail #link_process:hover {
    border-color: var(--gb-accent);
    color: #178f8f;
}

/* ---- Contact buttons ---- */
.detail_page .uploader_info a {
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 170px;
    padding: 0 24px;
    box-shadow: 0 12px 24px -12px rgba(15, 181, 173, .65);
    transition: transform .2s ease, box-shadow .2s ease;
}

.detail_page .uploader_info a:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 30px -12px rgba(15, 181, 173, .75);
}

.detail_page .uploader_info a#wh_app {
    background: linear-gradient(0deg, #1da851, #25d366);
    box-shadow: 0 12px 24px -12px rgba(37, 211, 102, .6);
}

.detail_page .uploader_info a#wh_app:hover {
    box-shadow: 0 18px 30px -12px rgba(37, 211, 102, .7);
}

/* ---- "Bənzər elanlar" (sibling of .detail_page) ---- */
.similar_ad {
    border: 1px solid var(--gb-line);
    border-radius: 18px;
    padding: 18px 20px;
    margin-top: 24px;
    box-shadow: 0 14px 32px -22px rgba(18, 48, 48, .3);
}

.similar_ad h4 {
    position: relative;
    padding-left: 15px;
    font-weight: 700;
    font-size: 19px;
    color: #1f2d2e;
}

.similar_ad h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 22px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--gb-accent), var(--gb-accent-dark));
}

/* =====================================================================
   HOMEPAGE (win_content) — FULL REDESIGN v2 (2026)
   A unified, airy, teal-accented look across every section.
   Selectors are specific enough to win over main.css (which loads after
   style.css). Swiper / owl / SVG mechanics are left untouched.
   ===================================================================== */

/* ---------- 1. Category strip ---------- */
body .category_list {
    width: auto;
    max-width: 1420px;
    height: auto;
    margin: 18px auto 6px;
    padding: 16px 10px;
    background: #fff;
    border: 1px solid var(--gb-line);
    border-radius: 20px;
    box-shadow: 0 12px 30px -22px rgba(18, 48, 48, .35);
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: space-between;
}

body .category_list::-webkit-scrollbar {
    display: none;
}

.category_list .sw-swipper {
    width: 96px;
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 2px;
    border-radius: 16px;
    transition: transform .25s ease, background .25s ease;
}

.category_list .sw-swipper:hover {
    transform: translateY(-4px);
    background: var(--gb-accent-soft);
}

.category_list .sw-swipper .dc_sw_title {
    margin-top: 12px;
    color: var(--gb-ink);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category_list .sw-swipper:hover .dc_sw_title {
    color: var(--gb-accent-dark);
}

/* ---------- 2. Hero slider ---------- */
body .dc_slider {
    height: auto;
    max-width: 1180px;
    margin: 16px auto;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 44px -24px rgba(18, 48, 48, .45);
}

.dc_slider .swiper-container,
.dc_slider .swiper-slide {
    border-radius: 22px;
}

.dc_slider .swiper-slide img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

.dc_slider .swiper-button-next,
.dc_slider .swiper-button-prev {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    color: var(--gb-accent-dark);
}

.dc_slider .swiper-button-next::after,
.dc_slider .swiper-button-prev::after {
    font-size: 17px;
    font-weight: 700;
}

.dc_slider .swiper-pagination-bullet {
    background: #fff;
    opacity: .7;
    width: 9px;
    height: 9px;
}

.dc_slider .swiper-pagination-bullet-active {
    background: var(--gb-accent);
    opacity: 1;
    width: 26px;
    border-radius: 5px;
}

/* ---------- 3. Section wrappers + unified headings ---------- */
body .dc-products-wrap {
    max-width: 1680px;
    padding: 6px 40px 0;
}

.dc-products-main .dc-advertisment {
    /* background: #fff; */
    border: 1px solid var(--gb-line);
    border-radius: 20px;
    padding: 20px 22px;
    margin-bottom: 24px;
    /* box-shadow: 0 14px 34px -26px rgba(18, 48, 48, .3); */
}

.dc-products-main .dcb_content {
    position: relative;
}

.dc-products-main .dcb_content .dc-ad-title {
    padding-left: 16px;
    height: auto;
    line-height: 1.2;
    margin-bottom: 18px;
}

.dc-products-main .dcb_content .dc-ad-title h3 {
    position: relative;
    display: inline-block;
    font-size: 21px;
    font-weight: 700;
    color: var(--gb-ink);
    line-height: 1.2;
}

.dc-products-main .dcb_content .dc-ad-title h3::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 24px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--gb-accent), var(--gb-accent-dark));
}

/* "Hamısını gör" → pill button */
.dc-advertisment a#dc-getMore {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 14px 0 0;
    padding: 9px 20px;
    border-radius: 30px;
    background: var(--gb-accent-soft);
    color: var(--gb-accent-dark);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.dc-advertisment a#dc-getMore::after {
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    transition: transform .2s ease;
}

.dc-advertisment a#dc-getMore:hover {
    background: var(--gb-accent);
    color: #fff;
    box-shadow: 0 12px 22px -8px rgba(15, 181, 173, .6);
}

.dc-advertisment a#dc-getMore:hover::after {
    transform: translateX(4px);
}

/* ---------- 4. Products grid (slider disabled → clean grid) ---------- */
.dc-products-main .dcb_content .row,
.dc-products-main .ad-carousel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0;
}

.dc-products-main .dcb_content .row>*,
.dc-products-main .ad-carousel>* {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    float: none;
}

/* in-feed full-width banners (i==12, 24 …) span the whole row */
.dc-products-main .dcb_content .row>.col-md-12,
.dc-products-main .ad-carousel>.col-md-12 {
    grid-column: 1 / -1;
}

@media (max-width: 1200px) {

    .dc-products-main .dcb_content .row,
    .dc-products-main .ad-carousel {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 820px) {

    .dc-products-main .dcb_content .row,
    .dc-products-main .ad-carousel {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (max-width: 480px) {

    .dc-products-main .dcb_content .row,
    .dc-products-main .ad-carousel {
        grid-template-columns: 1fr;
    }
}

/* ---------- 5. Side banners — re-themed to teal ---------- */
.dc-side-banner .dc-banner-box {
    border-radius: 20px;
    background: linear-gradient(160deg, #f3fbfb 0%, #e6f5f4 100%);
    border: 1px dashed #b9e0dd;
    color: #6aa3a0;
}

.dc-side-banner .dc-banner-box:hover {
    box-shadow: 0 16px 34px -18px rgba(15, 181, 173, .35);
    color: #6aa3a0;
}

.dc-side-banner .dc-banner-box__tag {
    color: var(--gb-accent-dark);
}

/* ---------- 6. YouTube section ---------- */
body .yt_col {
    max-width: 1180px;
    margin: 10px auto 36px;
    padding: 0 12px;
}

.yt_col .yt {
    height: auto;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 32px -22px rgba(18, 48, 48, .4);
    background: #000;
}

.yt_col .yt iframe {
    width: 100%;
    height: 240px;
    display: block;
    border: 0;
}

/* =====================================================================
   STICKY PRODUCT FILTER (homepage, top of .dc-products-main)
   Sticks to the top of the viewport while the page scrolls.
   ===================================================================== */
.gb-filter {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border: 1px solid var(--gb-line);
    border-radius: 18px;
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: 0 16px 36px -24px rgba(18, 48, 48, .45);
}

.gb-filter__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 150px;
    min-width: 130px;
}

.gb-filter__group>label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--gb-muted);
}

.gb-filter select,
.gb-filter input {
    height: 44px;
    border: 1px solid var(--gb-line);
    border-radius: 11px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--gb-ink);
    background: #f7fafa;
    outline: none;
    width: 100%;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.gb-filter select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230b938c' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 34px;
    cursor: pointer;
}

.gb-filter select:focus,
.gb-filter input:focus {
    border-color: var(--gb-accent);
    background: #fff;
    box-shadow: 0 0 0 3px var(--gb-accent-soft);
}

.gb-filter__price-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gb-filter__price-row span {
    color: var(--gb-muted);
}

.gb-filter__btn {
    height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 11px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #22a6a6, #34c8c8);
    box-shadow: 0 10px 22px -8px rgba(34, 166, 166, .55);
    transition: transform .2s ease, box-shadow .2s ease;
}

.gb-filter__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -8px rgba(34, 166, 166, .7);
}

@media (max-width: 700px) {
    .gb-filter {
        gap: 10px;
        padding: 14px;
    }

    .gb-filter__group {
        flex: 1 1 calc(50% - 10px);
        min-width: 0;
    }

    .gb-filter__btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ===== Filter kateqoriya dropdown (klik açır, hover alt kateqoriya) ===== */
.gb-cat {
    position: relative;
}

.gb-cat__toggle {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border: 1px solid var(--gb-line);
    border-radius: 11px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--gb-ink);
    background: #f7fafa;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.gb-cat__toggle:hover {
    background: #fff;
}

.gb-cat.is-open .gb-cat__toggle {
    border-color: var(--gb-accent);
    background: #fff;
    box-shadow: 0 0 0 3px var(--gb-accent-soft);
}

.gb-cat__toggle i {
    color: var(--gb-accent);
    transition: transform .25s ease;
}

.gb-cat.is-open .gb-cat__toggle i {
    transform: rotate(180deg);
}

.gb-cat__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--gb-line);
    border-radius: 14px;
    box-shadow: 0 24px 48px -24px rgba(18, 48, 48, .5);
    padding: 8px;
    z-index: 120;
    display: none;
    /* overflow VERMİRİK — əks halda yan flyout (left:100%) kəsilir */
    overflow: visible;
}

.gb-cat.is-open .gb-cat__panel {
    display: block;
}

.gb-cat__list,
.gb-cat__sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gb-cat__item {
    position: relative;
}

.gb-cat__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 14px;
    color: var(--gb-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.gb-cat__link:hover,
.gb-cat__item:hover>.gb-cat__link {
    background: var(--gb-accent-soft);
    color: var(--gb-accent);
}

.gb-cat__link i {
    font-size: 12px;
    opacity: .7;
}

/* əsas kateqoriya başlığı link deyil — masaüstündə hover açır */
.gb-cat__head {
    cursor: default;
}

/* hover ilə açılan alt kateqoriya paneli */
.gb-cat__sub {
    position: absolute;
    top: -8px;
    left: 100%;
    min-width: 220px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--gb-line);
    border-radius: 14px;
    box-shadow: 0 24px 48px -24px rgba(18, 48, 48, .5);
    display: none;
    max-height: 62vh;
    overflow-y: auto;
}

.gb-cat__item.has-children:hover>.gb-cat__sub {
    display: block;
}

.gb-cat__sub li a {
    display: block;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--gb-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.gb-cat__sub li a:hover {
    background: var(--gb-accent-soft);
    color: var(--gb-accent);
}

@media (max-width: 700px) {
    .gb-cat__panel {
        min-width: 200px;
        left: 0;
        right: 0;
        /* mobil: alt kateqoriyalar sətir altında (static) açılır — yan flyout yoxdur,
           ona görə panelin öz scroll-u problemsizdir */
        max-height: 62vh;
        overflow-y: auto;
    }

    /* mobil: hover yoxdur — alt kateqoriya toxunuşla açılır, sətir altında göstərilir */
    .gb-cat__sub {
        position: static;
        display: none;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--gb-accent-soft);
        border-radius: 0;
        margin: 2px 0 4px 14px;
        padding: 2px 0;
        max-height: none;
    }

    .gb-cat__item.is-expanded>.gb-cat__sub {
        display: block;
    }

    .gb-cat__item.has-children:hover>.gb-cat__sub {
        display: none;
    }

    .gb-cat__item.is-expanded>.gb-cat__link i {
        transform: rotate(90deg);
    }

    .gb-cat__item.has-children>.gb-cat__head {
        cursor: pointer;
    }
}







/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */

/* ==========================================
   1. LAYER: PROPERTIES (CSS Variables & Types)
   ========================================== */
*,
:before,
:after,
::backdrop {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-translate-z: 0;
    --tw-rotate-x: initial;
    --tw-rotate-y: initial;
    --tw-rotate-z: initial;
    --tw-skew-x: initial;
    --tw-skew-y: initial;
    --tw-space-y-reverse: 0;
    --tw-space-x-reverse: 0;
    --tw-border-style: solid;
    --tw-leading: initial;
    --tw-font-weight: initial;
    --tw-tracking: initial;
    --tw-ordinal: initial;
    --tw-slashed-zero: initial;
    --tw-numeric-figure: initial;
    --tw-numeric-spacing: initial;
    --tw-numeric-fraction: initial;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-color: initial;
    --tw-shadow-alpha: 100%;
    --tw-inset-shadow: 0 0 #0000;
    --tw-inset-shadow-color: initial;
    --tw-inset-shadow-alpha: 100%;
    --tw-ring-color: initial;
    --tw-ring-shadow: 0 0 #0000;
    --tw-inset-ring-color: initial;
    --tw-inset-ring-shadow: 0 0 #0000;
    --tw-ring-inset: initial;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-outline-style: solid;
    --tw-backdrop-blur: initial;
    --tw-backdrop-brightness: initial;
    --tw-backdrop-contrast: initial;
    --tw-backdrop-grayscale: initial;
    --tw-backdrop-hue-rotate: initial;
    --tw-backdrop-invert: initial;
    --tw-backdrop-opacity: initial;
    --tw-backdrop-saturate: initial;
    --tw-backdrop-sepia: initial;
    --tw-duration: initial;
    --tw-ease: initial;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-scale-z: 1;
    --tw-content: "";
    --tw-animation-delay: 0s;
    --tw-animation-direction: normal;
    --tw-animation-duration: initial;
    --tw-animation-fill-mode: none;
    --tw-animation-iteration-count: 1;
    --tw-enter-blur: 0;
    --tw-enter-opacity: 1;
    --tw-enter-rotate: 0;
    --tw-enter-scale: 1;
    --tw-enter-translate-x: 0;
    --tw-enter-translate-y: 0;
    --tw-exit-blur: 0;
    --tw-exit-opacity: 1;
    --tw-exit-rotate: 0;
    --tw-exit-scale: 1;
    --tw-exit-translate-x: 0;
    --tw-exit-translate-y: 0;
}





/* ==========================================
   2. LAYER: THEME (Design Tokens)
   ========================================== */


:root,
:host {
    /* Fonts */
    --font-sans: "Inter", system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-display: "Manrope", system-ui, sans-serif;
    --default-font-family: "Inter", system-ui, sans-serif;
    --default-mono-font-family: var(--font-mono);

    /* Layout & Spacing */
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-7xl: 80rem;
    --aspect-video: 16 / 9;

    --radius: 1rem;
    --background: oklch(98.5% .005 80);
    --foreground: oklch(18% .02 40);
    --surface: oklch(97% .012 70);
    --card: oklch(100% 0 0);
    --card-foreground: oklch(18% .02 40);
    --popover: oklch(100% 0 0);
    --popover-foreground: oklch(18% .02 40);
    --primary: oklch(69.4% .198 41.5) !important;
    --primary-foreground: oklch(99% 0 0) !important;
    --primary-soft: oklch(96% .04 55) !important;
    --secondary: oklch(95% .01 70);
    --secondary-foreground: oklch(22% .02 40);
    --muted: oklch(95% .008 70);
    --muted-foreground: oklch(52% .02 50);
    --accent: oklch(96% .04 55);
    --accent-foreground: oklch(35% .15 38);
    --destructive: oklch(60% .22 25);
    --destructive-foreground: oklch(99% 0 0);
    --border: oklch(92% .01 70) !important;
    --input: oklch(92% .01 70);
    --ring: oklch(69.4% .198 41.5);

    /* Typography Sizes */
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;

    /* Typography Weights & Settings */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -.025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;

    /* Colors Mapping */
    --color-black: #000;
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-border: var(--border);

    /* Animations & Transitions */
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --blur-xl: 24px;

    /* Custom Premium Shadows */
    --shadow-soft: 0 1px 2px oklch(0% 0 0 / .04), 0 8px 24px oklch(0% 0 0 / .06);
    --shadow-glow: 0 20px 60px -20px oklch(66% .21 38 / .45);


    --radius: 1rem;
    --background: oklch(98.5% .005 80);
    --foreground: oklch(18% .02 40);
    --surface: oklch(97% .012 70);
    --card: oklch(100% 0 0);
    --card-foreground: oklch(18% .02 40);
    --popover: oklch(100% 0 0);
    --popover-foreground: oklch(18% .02 40);
    --primary: oklch(69.4% .198 41.5);
    --primary-foreground: oklch(99% 0 0);
    --primary-soft: oklch(96% .04 55);
    --secondary: oklch(95% .01 70);
    --secondary-foreground: oklch(22% .02 40);
    --muted: oklch(95% .008 70);
    --muted-foreground: oklch(52% .02 50);
    --accent: oklch(96% .04 55);
    --accent-foreground: oklch(35% .15 38);
    --destructive: oklch(60% .22 25);
    --destructive-foreground: oklch(99% 0 0);
    --border: oklch(92% .01 70);
    --input: oklch(92% .01 70);
    --ring: oklch(78% .13 80);
    --gold: oklch(78% .14 82);
    --gold-light: oklch(88% .1 88);
    --gold-dark: oklch(62% .13 70);
    --navy: oklch(22% .05 260);
    --price: oklch(68% .21 35);
    --gradient-gold: linear-gradient(135deg, oklch(85% .13 88) 0%, oklch(72% .15 75) 50%, oklch(60% .13 65) 100%);
    --gradient-hero: linear-gradient(135deg, oklch(22% .05 260) 0%, oklch(28% .06 270) 100%);
    --shadow-luxe: 0 20px 50px -20px oklch(62% .13 70 / .35);
    --shadow-card: 0 2px 12px -2px oklch(22% .05 260 / .08);
    --shadow-card-hover: 0 18px 40px -12px oklch(22% .05 260 / .18);
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-border: var(--border);
    --color-gold: var(--gold);
    --color-gold-dark: var(--gold-dark);
}


/* ==========================================
   3. LAYER: BASE (CSS Reset / Preflight)
   ========================================== */



.mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
}

.w-12 {
    width: calc(var(--spacing) * 12);
}

.h-12 {
    height: calc(var(--spacing) * 12);
}

.items-center {
    align-items: center;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gap-3 {
    gap: calc(var(--spacing) * 3);
}

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

.rounded-full {
    border-radius: 3.40282e38px;
}

.grid {
    display: grid;
}

.p-6 {
    padding: calc(var(--spacing) * 6);
}

.bg-surface {
    background-color: var(--surface);
}

.py-8 {
    padding-block: calc(var(--spacing) * 8);
}

.gap-8 {
    gap: calc(var(--spacing) * 8);
}

a {
    text-decoration: none !important;
}

.rounded-2xl {
    border-radius: calc(var(--radius) + 8px);
}

.fill-primary {
    fill: var(--primary);
}

.gap-3 {
    gap: calc(var(--spacing) * 3);
}

.col-md-3 {
    margin-bottom: 2rem;
}

@media (width >=50rem) {
    .sm\:flex-row {
        flex-direction: row !important;
    }
}

.leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
}

.text-border {
    color: var(--border) !important;
}

@media (hover: hover) {
    .hover\:scale-110:hover {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
    }
}

article.rounded-2xl.border.border-border.bg-card.p-6 {
    margin-bottom: 20px;
}

.text-muted-foreground {
    color: var(--muted-foreground);
}

.gap-6 {
    gap: calc(var(--spacing) * 6);
}

.mt-4 {
    margin-top: calc(var(--spacing) * 4);
}

.mt-16 {
    margin-top: calc(var(--spacing) * 16);
}

@media (width >=64rem) {
    .lg\:grid-cols-\[2fr_1fr\] {
        grid-template-columns: 2fr 1fr;
    }
}

.gap-10 {
    gap: calc(var(--spacing) * 10);
}

.mt-16 {
    margin-top: calc(var(--spacing) * 16);
}

.py-4 {
    padding-block: calc(var(--spacing) * 4);
}

.px-5 {
    padding-inline: calc(var(--spacing) * 5);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
}

.px-6 {
    padding-inline: calc(var(--spacing) * 6);
}

.w-14 {
    width: calc(var(--spacing) * 14);
}

.h-14 {
    height: calc(var(--spacing) * 14);
}

.w-14 {
    width: calc(var(--spacing) * 14);
}

.h-14 {
    height: calc(var(--spacing) * 14);
}

.text-primary {
    color: var(--primary);
}

.w-4 {
    width: calc(var(--spacing) * 4);
}

.h-4 {
    height: calc(var(--spacing) * 4);
}

.text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
}

.gap-3 {
    gap: calc(var(--spacing) * 3);
}

@media (width >=64rem) {
    .lg\:grid-cols-\[1\.15fr_1fr\] {
        grid-template-columns: 1fr 1.05fr;
    }
}

@media (hover: hover) {
    .hover\:border-primary:hover {
        border-color: var(--primary) !important;
    }
}


*,
:after,
:before,
::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
}

::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    letter-spacing: -.02em;
}

a {
    color: inherit;
    text-decoration: inherit;
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
samp,
pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
}

small {
    font-size: 80%;
}

sub,
sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
}

sub {
    bottom: -.25em;
}

sup {
    top: -.5em;
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
}

abbr:where([title]) {
    text-decoration: underline dotted;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    vertical-align: middle;
    display: block;
}

img,
video {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
}

button,
input:where([type=button], [type=reset], [type=submit]),
::file-selector-button {
    appearance: button;
}

textarea {
    resize: vertical;
}

::placeholder {
    opacity: 1;
}

@supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
        color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
        ::placeholder {
            color: color-mix(in oklab, currentcolor 50%, transparent);
        }
    }
}

* {
    border-color: var(--color-border);
}


/* ==========================================
   4. LAYER: COMPONENTS & UTILITIES
   ========================================== */

/* Background Colors */
.bg-transparent {
    background-color: transparent;
}

.bg-background {
    background-color: var(--background);
}

.bg-card {
    background-color: var(--card);
}

.bg-popover {
    background-color: var(--popover);
}

.bg-primary {
    background-color: var(--primary);
}

.bg-primary-soft {
    background-color: var(--primary-soft);
}

.bg-secondary {
    background-color: var(--secondary);
}

.bg-muted {
    background-color: var(--muted);
}

.bg-accent {
    background-color: var(--accent);
}

.bg-destructive {
    background-color: var(--destructive);
}

.bg-surface {
    background-color: var(--surface);
}

/* Layout & Display Utilities */
.block {
    display: block;
}

.flex {
    display: flex;
}

.grid {
    display: grid;
}

.hidden {
    display: none;
}

.inline-flex {
    display: inline-flex;
}

.table {
    display: table;
}

.pointer-events-none {
    pointer-events: none;
}

.invisible {
    visibility: hidden;
}

/* Position Utilities */
.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.relative {
    position: relative;
}

.sticky {
    position: sticky;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-30 {
    z-index: 30;
}

.z-50 {
    z-index: 50;
}

.z-\[1\] {
    z-index: 1;
}

/* Inset Utilities */
.inset-0 {
    inset: 0;
}

.inset-x-0 {
    inset-inline: 0;
}

.inset-y-0 {
    inset-block: 0;
}

.top-0 {
    top: 0;
}

.top-1\/2 {
    top: 50%;
}

.top-full {
    top: 100%;
}

.right-0 {
    right: 0;
}

.bottom-0 {
    bottom: 0;
}

.left-0 {
    left: 0;
}

.left-1\/2 {
    left: 50%;
}

/* Sizing Utilities */
.w-full {
    /* width: 100%; */
}
textarea#in_cmt {
    width: 100%;
}
img#mainImg {
    margin: auto;
}

.w-fit {
    width: fit-content;
}

.w-max {
    width: max-content;
}

.w-auto {
    width: auto;
}

.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

.h-svh {
    height: 100svh;
}

.h-fit {
    height: fit-content;
}

.h-auto {
    height: auto;
}

.max-w-7xl {
    max-w: var(--container-7xl);
}

.max-w-lg {
    max-w: var(--container-lg);
}

.max-w-md {
    max-w: var(--container-md);
}

.aspect-square {
    aspect-ratio: 1;
}

.aspect-video {
    aspect-ratio: var(--aspect-video);
}

/* Width & Height Multipliers (Spacing Based) */
.size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
}

.w-64 {
    width: calc(var(--spacing) * 64);
}

.w-72 {
    width: calc(var(--spacing) * 72);
}

/* Flexbox & Grid Alignment */
.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-between {
    justify-content: space-between;
}

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

.flex-1 {
    flex: 1 1 0%;
}

.shrink-0 {
    flex-shrink: 0;
}

.grow {
    flex-grow: 1;
}

/* Spacing (Gap) Utilities */
.gap-1 {
    gap: calc(var(--spacing) * 1);
}

.gap-2 {
    gap: calc(var(--spacing) * 2);
}

.gap-3 {
    gap: calc(var(--spacing) * 3);
}

.gap-4 {
    gap: calc(var(--spacing) * 4);
}

.gap-6 {
    gap: calc(var(--spacing) * 6);
}

.gap-8 {
    gap: calc(var(--spacing) * 8);
}

/* Margin Utilities */
.mx-auto {
    margin-inline: auto;
}

.mt-auto {
    margin-top: auto;
}

.ml-auto {
    margin-left: auto;
}

.mt-1 {
    margin-top: calc(var(--spacing) * 1);
}

.mt-2 {
    margin-top: calc(var(--spacing) * 2);
}

.mt-4 {
    margin-top: calc(var(--spacing) * 4);
}

.mt-6 {
    margin-top: calc(var(--spacing) * 6);
}

.mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
}

/* Padding Utilities */
.p-0 {
    padding: 0;
}

.p-1 {
    padding: calc(var(--spacing) * 1);
}

.p-2 {
    padding: calc(var(--spacing) * 2);
}

.p-3 {
    padding: calc(var(--spacing) * 3);
}

.p-4 {
    padding: calc(var(--spacing) * 4);
}

.p-6 {
    padding: calc(var(--spacing) * 6);
}

.px-4 {
    padding-inline: calc(var(--spacing) * 4);
}

.py-2 {
    padding-block: calc(var(--spacing) * 2);
}

/* Border Radius Utilities */
.rounded-none {
    border-radius: 0;
}

.rounded-sm {
    border-radius: calc(var(--radius) - 4px);
}

.rounded-md {
    border-radius: calc(var(--radius) - 2px);
}

.rounded-lg {
    border-radius: var(--radius);
}

.rounded-xl {
    border-radius: calc(var(--radius) + 4px);
}

.rounded-2xl {
    border-radius: calc(var(--radius) + 8px);
}

.rounded-3xl {
    border-radius: calc(var(--radius) + 12px);
}

.rounded-full {
    border-radius: 9999px;
}

/* Border Width & Color Utilities */
.border {
    border-style: var(--tw-border-style);
    border-width: 1px;
}

.border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
}

.border-transparent {
    border-color: transparent;
}

.border-input {
    border-color: var(--input);
}

.border-border {
    border-color: var(--border);
}

.border-primary {
    border-color: var(--primary);
}

/* Background Colors */
.bg-transparent {
    background-color: transparent;
}

.bg-background {
    background-color: var(--background);
}

.bg-card {
    background-color: var(--card);
}

.bg-popover {
    background-color: var(--popover);
}

.bg-primary {
    background-color: var(--primary);
}

.bg-primary-soft {
    background-color: var(--primary-soft);
}

.bg-secondary {
    background-color: var(--secondary);
}

.bg-muted {
    background-color: var(--muted);
}

.bg-accent {
    background-color: var(--accent);
}

.bg-destructive {
    background-color: var(--destructive);
}

.bg-surface {
    background-color: var(--surface);
}

/* Typography Utilities */
.text-left {
    text-align: left;
}

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

.text-right {
    text-align: right;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.break-words {
    overflow-wrap: break-word;
}

.whitespace-nowrap {
    white-space: nowrap;
}

/* Font Sizes */
.text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
}

.text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
}

.text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
}

.text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
}

.text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
}

.text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
}

.text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
}

.text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
}

.text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
}

/* Font Weights & Letter Spacing */
.font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
}

.font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
}

.tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
}

.leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
}

.leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
}

/* Text Colors */
.text-foreground {
    color: var(--foreground);
}

.text-muted-foreground {
    color: var(--muted-foreground);
}

.text-primary {
    color: var(--primary);
}

.text-primary-foreground {
    color: var(--primary-foreground);
}

.text-destructive {
    color: var(--destructive);
}

/* Shadows & Effects */
.shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-shadow);
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-shadow);
}

.shadow {
    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    box-shadow: var(--tw-shadow);
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    box-shadow: var(--tw-shadow);
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    box-shadow: var(--tw-shadow);
}

.shadow-\[var\(--shadow-soft\)\] {
    --tw-shadow: var(--shadow-soft);
    box-shadow: var(--tw-shadow);
}

.shadow-\[var\(--shadow-glow\)\] {
    --tw-shadow: var(--shadow-glow);
    box-shadow: var(--tw-shadow);
}

/* Backdrop Blur & Filters */
.backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    backdrop-filter: var(--tw-backdrop-blur);
}

.backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    backdrop-filter: var(--tw-backdrop-blur);
}

/* Transitions & Animations */
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.duration-200 {
    transition-duration: .2s;
}

.duration-300 {
    transition-duration: .3s;
}

.ease-in-out {
    transition-timing-function: var(--ease-in-out);
}

.animate-pulse {
    animation: var(--animate-pulse);
}

/* Interaction States (Hover & Focus) */
@media (hover: hover) {
    .hover\:scale-105:hover {
        scale: 1.05;
    }

    .hover\:bg-accent:hover {
        background-color: var(--accent);
    }

    .hover\:text-primary:hover {
        color: var(--primary);
    }

    .hover\:underline:hover {
        text-decoration-line: underline;
    }
}

.focus\:outline-none:focus {
    outline: none;
}

.focus\:ring-2:focus {
    --tw-ring-shadow: 0 0 0 2px var(--ring);
    box-shadow: var(--tw-ring-shadow);
}

/* ==========================================
     5. RESPONSIVE MEDIA QUERIES (Breakpoints)
     ========================================== */
@media (width >=40rem) {

    /* sm breakpoint (640px) */
    .sm\:flex {
        display: flex;
    }

    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:text-left {
        text-align: left;
    }
}

@media (width >=48rem) {

    /* md breakpoint (768px) */
    .md\:block {
        display: block;
    }

    .md\:flex {
        display: flex;
    }

    .md\:text-5xl {
        font-size: var(--text-5xl);
    }
}

@media (width >=64rem) {

    /* lg breakpoint (1024px) */
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }
}


/* ==========================================
   6. AT-RULES & KEYFRAMES (Animation Engines)
   ========================================== */
@keyframes pulse {
    50% {
        opacity: .5;
    }
}

@keyframes enter {
    0% {
        opacity: var(--tw-enter-opacity, 1);
        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
        filter: blur(var(--tw-enter-blur, 0));
    }
}

@keyframes exit {
    to {
        opacity: var(--tw-exit-opacity, 1);
        transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
        filter: blur(var(--tw-exit-blur, 0));
    }
}

@keyframes accordion-down {
    0% {
        height: 0;
    }

    to {
        height: var(--radix-accordion-content-height, auto);
    }
}

@keyframes accordion-up {
    0% {
        height: var(--radix-accordion-content-height, auto);
    }

    to {
        height: 0;
    }
}

@keyframes caret-blink {

    0%,
    70%,
    to {
        opacity: 1;
    }

    20%,
    50% {
        opacity: 0;
    }
}


/* =========================================================
   Header — "Bütün kateqoriyalar" mega-dropdown
   Scope: #gbCatWrap / .gb-catpanel
   ========================================================= */

.gb-catdrop__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground, #2a2118);
    border: none;
    border-right: 1px solid var(--border, #e2e8f0);
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, background .15s;
}

.gb-catdrop__toggle:hover {
    color: var(--gold-dark, #b8860b);
    background: var(--accent, #fbf3e3);
}

.gb-catdrop__toggle svg {
    flex-shrink: 0;
    color: var(--gold-dark, #b8860b);
}

.gb-catdrop__chev {
    transition: transform .2s ease;
}

.gb-catdrop__toggle.is-open .gb-catdrop__chev {
    transform: rotate(180deg);
}

/* ===== Panel ===== */
.gb-catpanel {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: min(940px, calc(100vw - 32px));
    background: var(--card, #fff);
    border: 1px solid var(--border, #ece3cf);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(60, 45, 15, 0.18), 0 4px 12px rgba(60, 45, 15, 0.06);
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    overflow: hidden;
}

.gb-catpanel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gb-catpanel::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 28px;
    width: 14px;
    height: 14px;
    background: var(--card, #fff);
    border-left: 1px solid var(--border, #ece3cf);
    border-top: 1px solid var(--border, #ece3cf);
    transform: rotate(45deg);
    z-index: 1;
}

.gb-catpanel__inner {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 196px;
    align-items: stretch;
    max-height: min(560px, calc(100vh - 160px));
}

/* ===== Left rail: main categories ===== */
.gb-catpanel__rail {
    background: var(--accent, #faf4e7);
    border-right: 1px solid var(--border, #ece3cf);
    padding: 18px 14px;
    overflow-y: auto;
}

.gb-catpanel__title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--gold-dark, #b8860b);
    margin: 0 0 12px;
    padding: 0 8px;
}

.gb-catrail {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gb-catrail li {
    margin: 0;
}

.gb-catrail li a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--foreground, #3a3024);
    text-decoration: none;
    transition: background .14s, color .14s, padding .14s;
}

.gb-catrail li a:hover {
    background: var(--card, #fff);
    color: var(--gold-dark, #b8860b);
    padding-left: 14px;
    box-shadow: 0 2px 8px rgba(60, 45, 15, 0.07);
}

.gb-catrail .gb-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold, #d4af37);
    flex-shrink: 0;
}

/* ===== Center: grouped columns ===== */
.gb-catpanel__cols {
    padding: 22px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.gb-catgroup {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 20px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--border, #ece3cf);
}

.gb-catgroup:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.gb-catcol {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.gb-catcol__head {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--foreground, #2a2118);
    margin: 0 0 10px;
    padding-bottom: 7px;
    position: relative;
}

.gb-catcol__head::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold, #d4af37), transparent);
}

.gb-catcol li a {
    display: block;
    padding: 5px 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--muted-foreground, #6b6253);
    text-decoration: none;
    transition: color .14s, transform .14s;
}

.gb-catcol li a:hover {
    color: var(--gold-dark, #b8860b);
    transform: translateX(3px);
}

/* ===== Right: promo banners ===== */
.gb-catpanel__promo {
    padding: 18px;
    background: linear-gradient(180deg, var(--accent, #faf4e7) 0%, var(--card, #fff) 100%);
    border-left: 1px solid var(--border, #ece3cf);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

.gb-promo-card {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(60, 45, 15, 0.12);
    transition: transform .18s ease, box-shadow .18s ease;
    line-height: 0;
}

.gb-promo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(60, 45, 15, 0.18);
}

.gb-promo-card img {
    width: 100%;
    height: auto;
    display: block;
}

.gb-catpanel__promo:empty {
    display: none;
}

/* thin scrollbars inside panel */
.gb-catpanel__rail::-webkit-scrollbar,
.gb-catpanel__cols::-webkit-scrollbar,
.gb-catpanel__promo::-webkit-scrollbar {
    width: 6px;
}

.gb-catpanel__rail::-webkit-scrollbar-thumb,
.gb-catpanel__cols::-webkit-scrollbar-thumb,
.gb-catpanel__promo::-webkit-scrollbar-thumb {
    background: #e0d2ac;
    border-radius: 999px;
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
    .gb-catpanel {
        width: min(720px, calc(100vw - 32px));
    }

    .gb-catpanel__inner {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .gb-catpanel__promo {
        display: none;
    }
}

/* ===== Mega-dropdown: category tabs (rail → panes) ===== */
.gb-catrail__item {
    display: flex;
    align-items: center;
    gap: 9px;
}

.gb-catrail__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gb-catrail__arrow {
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-4px);
    color: var(--gold-dark, #b8860b);
    transition: opacity .14s ease, transform .14s ease;
}

.gb-catrail__item:hover .gb-catrail__arrow,
.gb-catrail__item.is-active .gb-catrail__arrow {
    opacity: 1;
    transform: none;
}

.gb-catrail__item.is-active {
    background: var(--card, #fff);
    color: var(--gold-dark, #b8860b);
    font-weight: 700;
    padding-left: 14px;
    box-shadow: 0 2px 8px rgba(60, 45, 15, 0.08);
}

.gb-catrail__item.is-active .gb-dot {
    background: var(--gold-dark, #b8860b);
    transform: scale(1.3);
}

.gb-catpane {
    display: none;
}

.gb-catpane.is-active {
    display: block;
    animation: gbCatFade .2s ease;
}

@keyframes gbCatFade {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

.gb-catpane__empty {
    color: var(--muted-foreground, #6b6253);
    font-size: 14px;
    line-height: 1.6;
    padding: 26px 6px;
}

.gb-catpane__empty span {
    color: var(--gold-dark, #b8860b);
    font-weight: 700;
}