@font-face {
    font-family: Vazir;
    src: url('fonts/Farsi-Digits/Vazir-Light-FD.eot');
    src: url('fonts/Farsi-Digits/Vazir-Light-FD.eot?#iefix') format('embedded-opentype'),
        url('fonts/Farsi-Digits/Vazir-Light-FD.woff2') format('woff2'),
        url('fonts/Farsi-Digits/Vazir-Light-FD.woff') format('woff'),
        url('fonts/Farsi-Digits/Vazir-Light-FD.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Vazir;
    src: url('fonts/Farsi-Digits/Vazir-Bold-FD.eot');
    src: url('fonts/Farsi-Digits/Vazir-Bold-FD.eot?#iefix') format('embedded-opentype'),
        url('fonts/Farsi-Digits/Vazir-Bold-FD.woff2') format('woff2'),
        url('fonts/Farsi-Digits/Vazir-Bold-FD.woff') format('woff'),
        url('fonts/Farsi-Digits/Vazir-Bold-FD.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: Vazir;
    src: url('fonts/Farsi-Digits/Vazir-Black-FD.eot');
    src: url('fonts/Farsi-Digits/Vazir-Black-FD.eot?#iefix') format('embedded-opentype'),
        url('fonts/Farsi-Digits/Vazir-Black-FD.woff2') format('woff2'),
        url('fonts/Farsi-Digits/Vazir-Black-FD.woff') format('woff'),
        url('fonts/Farsi-Digits/Vazir-Black-FD.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: Vazir;
    src: url('fonts/Farsi-Digits/Vazir-Medium-FD.eot');
    src: url('fonts/Farsi-Digits/Vazir-Medium-FD.eot?#iefix') format('embedded-opentype'),
        url('fonts/Farsi-Digits/Vazir-Medium-FD.woff2') format('woff2'),
        url('fonts/Farsi-Digits/Vazir-Medium-FD.woff') format('woff'),
        url('fonts/Farsi-Digits/Vazir-Medium-FD.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: Vazir;
    src: url('fonts/Farsi-Digits/Vazir-Light-FD.eot');
    src: url('fonts/Farsi-Digits/Vazir-Light-FD.eot?#iefix') format('embedded-opentype'),
        url('fonts/Farsi-Digits/Vazir-Light-FD.woff2') format('woff2'),
        url('fonts/Farsi-Digits/Vazir-Light-FD.woff') format('woff'),
        url('fonts/Farsi-Digits/Vazir-Light-FD.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: Vazir;
    src: url('fonts/Farsi-Digits/Vazir-Thin-FD.eot');
    src: url('fonts/Farsi-Digits/Vazir-Thin-FD.eot?#iefix') format('embedded-opentype'),
        url('fonts/Farsi-Digits/Vazir-Thin-FD.woff2') format('woff2'),
        url('fonts/Farsi-Digits/Vazir-Thin-FD.woff') format('woff'),
        url('fonts/Farsi-Digits/Vazir-Thin-FD.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}



:root {

    --primary-color: #1ee6e9;
    --primary-color-hover: #19d9c7;
    --primary-color-transparent: #0A4B56;
    --primary-color-secendery: #065E6A;
    --body-bg: #042832;
    --box-bg: #053f4e;
    --box-bg-lighter: rgba(255, 255, 255, 0.05);
    --text-color: #fafafa;
    --text-color-secondary: #e5e5e5;
    --border-color: #234b55;
    --danger-color: #FF5D60;
    --danger-color-transparent: #483F4E;
    --footer-bg: #031f27;
    --Zest-200: #ECA94C;
    --Malachite-200: #1EE921;
    --disabale-primary-color: #00808B;
    --Sonic-Silver-500: #737373;


}

[data-theme="light"] {
    --primary-color: #00808b;
    --primary-color-hover: #1ee6e9;
    --body-bg: #e5e5e5;
    --box-bg: #fafafa;
    --box-bg-lighter: rgba(0, 0, 0, 0.03);
    --text-color: #333333;
    --text-color-secondary: #666666;
    --border-color: #e0e0e0;
    --footer-bg: #fafafa;
    --Malachite-200: #0D9010;
    --primary-color-transparent: #FAFAFA;
    --disabale-primary-color: #B9B9B9;
}
[data-theme="light"] .orders-list .order-item .suggestion-item{
    border-radius: 8px;
border: 0.6px solid  #E5E5E5;
background:  #FAFAFA;
}
[data-theme="light"] .comment-item{
    border: 0.6px solid  #E5E5E5; 
}
[data-theme="light"] .comment-body p{
    color: var(--text-color);
}
[data-theme="light"] .comment-action svg path{
    stroke: var(--text-color) !important;
}

[data-theme="dark"] del svg path , [data-theme="light"] del svg path  {
    fill: #979292 !important;
}

[data-theme="light"] .action-btn.edit-btn svg path ,[data-theme="light"]  .location-address svg path  {

    fill: var(--text-color) !important;
}
[data-theme="light"] .book-now-btn-white.primary-color svg path  {
    stroke: var(--primary-color) ;
}
[data-theme="light"] .mobile-footer svg path  {
    stroke: var(--text-color) ;
}
[data-theme="light"] .mobile-footer{

    border-top: 1px solid var(--text-color);
}

[data-theme="light"] .product-slider-action a.call {
    background-color: var(--primary-color);
    color: #fff;
}
[data-theme="light"] .timer-box  {
    border-radius: 4px;
    border: 0.6px solid  #FF5D60;
    background:  #FFE5E6;
     color:  #FF5D60;
   
    }
[data-theme="light"]  .nav-link svg path{

    stroke:var(--text-color) !important; ;
}

[data-theme="light"] .date.selected{
    color: #f5f5f5;
}

[data-theme="light"] .btn-info {
    background: #00808B !important;
    border-color: #00808B !important;
}

[data-theme="light"] .product-slider-action-item-right .share svg path ,
[data-theme="light"] .product-slider-action-item-right .heart svg path,
[data-theme="light"] .product-slider-action-item-left .share svg path,
[data-theme="light"] .product-slider-action-item-left  svg path{
    stroke: var(--text-color) !important;
}

[data-theme="light"] .status-verified svg path:first-child {
    fill: #0D9010;
    stroke: #0D9010;
}

[data-theme="light"] .btn-primary svg path,
[data-theme="light"] .btn-info svg path {
    stroke: var(--box-bg) !important;
}

[data-theme="light"] #sportTypeTabs svg path 
,[data-theme="light"]  .title-calender-text svg path
,[data-theme="light"]  .specs-item svg path{
    stroke: var(--text-color) !important;
}

[data-theme="light"] .no-image-placeholder {
    background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.20) 50%) bottom right / 50% 50% no-repeat, linear-gradient(to bottom left, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.20) 50%) bottom left / 50% 50% no-repeat, linear-gradient(to top left, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.20) 50%) top left / 50% 50% no-repeat, linear-gradient(to top right, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.20) 50%) top right / 50% 50% no-repeat, lightgray 50% / cover no-repeat;
}

[data-theme="dark"] .no-image-placeholder {
    background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.20) 50%) bottom right / 50% 50% no-repeat, linear-gradient(to bottom left, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.20) 50%) bottom left / 50% 50% no-repeat, linear-gradient(to top left, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.20) 50%) top left / 50% 50% no-repeat, linear-gradient(to top right, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.20) 50%) top right / 50% 50% no-repeat, url(<path-to-image>) lightgray 50% / cover no-repeat;
}


.no-image-placeholder i {

    font-size: 60px;
}

[data-theme="light"]  .feature-icon svg path   {

    stroke: var(--text-color) !important;
}

[data-theme="light"] .phone-header svg path ,[data-theme="light"] .main-header-left a svg path {
    stroke: var(--text-color) !important;
}
[data-theme="light"] .profile-img svg path {
    stroke: var(--text-color) !important;
    fill: #A3A3A3;
}
[data-theme="light"] .panel-side-bar-item-icon svg path ,[data-theme="light"] .main-header-right svg path {

    stroke: var(--text-color) !important;
}

[data-theme="light"] .selected-slot {
    border-radius: 4px;
    border: 0.6px solid #00808B;
    background: #DCFEFC !important;
    color: #00808B !important;
}

[data-theme="light"] .slot-time,
[data-theme="light"] .slot-price {

    color: #171717;

}

[data-theme="dark"] .book-now-btn svg path {

    fill: #333 !important
}

[data-theme="dark"] .price-unit-container svg path,
[data-theme="dark"] .new-price svg path {
    fill: #FAFAFA !important;
}

[data-theme="light"] .archive-box {
    background-color: #171717 !important;
}

[data-theme="light"] .archive-box h4 {
    color: #fff !important;
}

[data-theme="light"] .archive-box p {
    color: var(--text-color-secondary) !important;
}

[data-theme="light"] .operator-profile {
    background: #F5F5F5 !important;
}

[data-theme="light"] .section-header svg path {
    stroke: var(--text-color) !important;
}

[data-theme="light"] .book-now-btn svg path {

    fill: #fff !important
}

[data-theme="light"] .bdge-outline-primary svg path {
    d: path("M 4.39275 8.85261 H 6.45275 V 13.6526 C 6.45275 14.7726 7.05942 14.9993 7.79942 14.1593 L 12.8461 8.42595 C 13.4661 7.72595 13.2061 7.14595 12.2661 7.14595 H 10.2061 V 2.34595 C 10.2061 1.22595 9.59942 0.999281 8.85942 1.83928 L 3.81275 7.57261 C 3.19942 8.27928 3.45942 8.85261 4.39275 8.85261 Z");
    stroke: rgb(0, 128, 139);
    stroke-width: 1.2;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
}

[data-theme="light"] .bdge-outline-primary {

    border: 1px solid #00808B !important;
    color: #00808B !important;
    background: #DCFefc;
}



[data-theme="light"] .bdge-outline-danger {
    background: #ffe5e6 !important;
}

[data-theme="light"] .book-now-btn-white:hover {

    color: #fff !important;
}

[data-theme="light"] .faq-item {
    background: var(--box-bg);

}

[data-theme="light"] .text-white,
[data-theme="light"] a.text-white,
[data-theme="light"] .fa-circle-user,
[data-theme="light"] .fas.fa-phone {
    color: #333333 !important;
}

[data-theme="light"] .cities ul {
    background-color: var(--box-bg);
}

[data-theme="light"] .btn-primary {
    color: #fff !important;
}

[data-theme="light"] .archive-item h6,
[data-theme="light"] .archive-text,
[data-theme="light"] .score-overlay,
[data-theme="light"] .title-overlay {
    color: #333333 !important;
}

[data-theme="light"] .title-overlay,
[data-theme="light"] .score-overlay {
    background: rgba(230, 230, 230, 0.8) !important;
}

[data-theme="light"] .vertical-menu li a {
    color: #333333 !important;
}

[data-theme="light"] .footer-list a,
[data-theme="light"] .footer-title,
[data-theme="light"] .social-icon,
[data-theme="light"] .footer-description {
    color: #333333 !important;
}

[data-theme="light"] .score-overlay .score-number {
    color: #333333 !important;
}


[data-theme="light"] .btn-primary .fas,
[data-theme="light"] .btn-primary .far,
[data-theme="light"] .btn-primary .fab,
[data-theme="light"] .btn-primary .fa-solid {
    color: #ffffff !important;
}

[data-theme="light"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(51, 51, 51, 0.5)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

[data-theme="light"] .address-box {

    background: transparent;
}

.nobat-text{
    overflow: hidden;
    color: var(--text-color);
    text-align: right;
    text-overflow: ellipsis;
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 171.429% */
}

* {
    box-sizing: border-box !important;
}

.inner-body {
    max-width: 1224px !important;
    margin: auto;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}


::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
}


::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) #f1f1f1;
}

/* کلاس برای تغییر تم */
.theme-switch {
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: var(--box-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--body-bg);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: Vazir;

    unicode-bidi: embed;
    direction: rtl;
    overflow-x: hidden;

}

html {
    overflow-x: hidden;
}

a,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Vazir !important;
}

.mr-8 {
    margin-right: 8px;
}

.ml-8 {
    margin-left: 8px;
}

.pr-8 {
    padding-right: 8px;
}

.pl-8 {

    padding-left: 8px;
}

.content-container {

    margin-top: 74px !important;
    width: calc(100% - 98px) !important;
    margin: auto;
    max-width: 1440px !important;
    margin-right: 98px !important;

}


a {
    text-decoration: none;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.navbar-toggler {
    border: var(--bs-border-width) solid var(--box-bg) !important;
}

.fa-circle-user {
    font-size: 1.8rem;
    transform: scale(0.9, 1.1);
}

.bg-custom-dark {
    background-color: var(--box-bg);
}

#mainSlider {
    background-color: var(--box-bg);
    opacity: 0.8;
    border-radius: 15px;
    padding: 16px;
    margin-top: 24px;
}

#pills-tabContent .tab-content {
    background-color: transparent;
    border-radius: 15px;
    padding: 0;
    border-top-right-radius: 0;
    margin-top: -8px;
}

#pills-tabContent .tab-content .suggestion-item {

    margin-bottom: 16px;


}

/* اگر هر ردیف با کلاس row-products مشخص شده باشد */

.main-sidebar-sticky {
    background: var(--box-bg) !important;
    top: 65px !important;
    border-top: 1px solid var(--border-color);

}

.main-header {
    background: var(--box-bg) !important;
    color: var(--text-color) !important;
}

.main-header-menu-icon span,
.main-header-menu-icon span:after,
.main-header-menu-icon span:before {
    background-color: var(--text-color) !important;
}

.main-body .side-header {
    border-bottom: none !important;
}

@media (min-width: 992px) {

    .main-body .side-header {

        padding-right: 24px !important;
    }

}

.main-sidebar-body .nav-link {
    color: var(--text-color) !important;
    gap: 8px;
}

.left-sidebar {
    flex: 0 0 calc(8.333% - 50px);
    border-top: 1px solid var(--border-color);
    position: fixed;
    top: 76px;
    right: 0;
    height: calc(100vh - 60px);
    z-index: 1000;
    max-width: 85px;
}

.left-sidebar .vertical-menu {
    text-align: center;
}



.menu-text {
    font-size: 0.9rem;
}

.vertical-menu li a {
    padding: 8px 0;
    transition: all 0.3s ease;
}

.vertical-menu li a i {
    margin-left: 10px;
}

.vertical-menu li a:hover {
    opacity: 0.8;
    padding-right: 10px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 20px;
}

.slider-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gray-text-custome {
    color: var(--text-color-secondary);
}

.search-form {
    display: flex;
    align-items: center;
    gap: 8px;

}

.search-form button {
    height: 48px !important;
}

.btn-primary {
    background: var(--primary-color);
    border: var(--primary-color);
}

.btn-primary:hover {
    background: var(--primary-color-hover);
}

.search-form select {
    background-color: var(--body-bg);
    color: var(--text-color-secondary);
    border: none;
    height: 48px;
}

.date-input {
    background-color: var(--body-bg);
    color: var(--text-color-secondary);
    border: none;
    height: 48px !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--box-bg);
    color: var(--primary-color) !important;
    border-radius: 10px 10px 0 0;
    margin-bottom: -2px;
    z-index: 2;
    transform: skewX(0deg);
}

#pills-tabContent .nav-pills .nav-link {
    background-color: var(--box-bg);
    color: var(--text-color) !important;


}

#sportTypeTabs {
    display: flex;
    flex-wrap: nowrap;
    border-bottom: none !important;
}

#sportTypeTabs .nav-link {
    background-color: var(--box-bg);
    color: var(--text-color) !important;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 8px;
    margin-bottom: 8px;
}

#sportTypeTabs .nav-link.active::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 20px;
    background-color: var(--box-bg);
    margin-bottom: -4px;
}

.main-sidebar-hide .nav-item {
    position: relative;
    margin-left: 8px;
}

#pills-tabContent .nav-pills .nav-link.active::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 20px;
    background-color: var(--box-bg);
    margin-bottom: -4px;
}

#sportTypeTabs .nav-link.active {
    background-color: var(--box-bg);
    color: var(--text-color) !important;

    border: none !important;
    color: var(--primary-color) !important;
}

#sportTabContent {
    padding: 16px;
    background-color: var(--box-bg);
    border-radius: 8px;
    margin-top: -5px;
    border-top-right-radius: 0;
}

/* استایل برای نوار پیشرفت */
.progress {
    height: 5px;
    display: none;
    position: relative;
    z-index: 10;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--primary-color);
    transition: width 0.1s ease-in-out;
}

#pills-tabContent .nav-link.active+.progress {
    display: block;
}

#pills-tabContent .nav-link {
    text-align: center;
}

.progress {
    display: inline-block;

    height: 3px !important;
    border-radius: 9px;
    display: block;

    border-radius: 9px;
    margin: auto 5px;
}

.progress-bar {
    background-color: var(--primary-color);
}

#pills-tabContent .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
}

#pills-tabContent .nav-link .icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* اضافه کردن این استایل‌ها */
.swiper {
    width: 100%;
    padding: 20px 0;
}

.product-container {
    overflow: hidden;
    position: relative;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--text-color) !important;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 50%;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 1.5rem !important;
}

.product-card {
    background: #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s;
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.cities ul {
    background-color: #053f4d;
    display: flex;
    padding: 14px;
    border-radius: 15px;
    border-top-right-radius: 0;
    align-items: center;
    direction: ltr;
}

.city-tabs ul {
    direction: rtl;
    height: 48px;
}

#sports-tab li {

    height: 48px !important;
    margin-left: 8px;
}

.cities .right {
    width: 100%;
    float: right;
}

.club-card {
    text-align: center;
    padding: 10px;

    border-radius: 8px;
}

.club-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.club-price {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
}

.club-location {
    margin-top: 5px;
    font-size: 12px;
    color: #777;
}

.club-stars {
    margin-top: 5px;
}

.star {
    color: #ccc;
    font-size: 16px;
}

.star.filled {
    color: gold;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
}

.heade-welcome {
    display: flex;
    flex-direction: column;
}

.heade-welcome .username {
    color: var(--text-color);

    font-family: Vazir;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 150% */
}

.heade-welcome .welcome {
    color: var(--text-color-secondary);
    text-align: right;
    font-family: Vazir;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 133.333% */
}

.invite-friend {
    display: flex;
    padding-left: 16px;
    align-items: center;
    gap: 8px;
    border-radius: 24px;
    background: var(--body-bg);
    position: relative;
    margin-top: 2px;
}

.pull-left {
    float: left;
}

.mission-count {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 1px;
    right: 9px;
    font-size: 11px;
}

.all-count-mission {
    color: var(--text-color-secondary);
    text-align: right;
    font-family: Vazir;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
    /* 120% */
}

.curent-mision {
    color: var(--text-color);
    text-align: right;
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 12px;
    /* 85.714% */
}

.invitation .title {
    color: var(--text-color);
    text-align: right;
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    /* 114.286% */
}

@media (max-width: 576px) {
    .left-sidebar {
        display: none;
    }


    .navbar-toggler {
        display: block;
    }
}

.archive {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.archive p {
    font-size: 12px;
    color: var(--text-color-secondary);
}

.archive-box {
    background-color: var(--box-bg);
    margin-top: 48px;
    padding: 16px;
    border-radius: 16px;

}

.archive-list-item {
    position: relative;
}

.archive-list-item svg {

    position: absolute;
    bottom: 8px;
    left: 8px;
}

.archive-items {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    gap: 16px;
    /* فاصله بین آیتم‌ها */
}

.archive-item {
    flex: 1 1 calc(33.33% - 16px);
    /* یک‌سوم عرض صفحه منهای فاصله */

    text-align: end;
    box-sizing: border-box;
}

.archive-text {
    width: 100%;
    color: var(--text-color);
    margin-right: 16px;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.archive-image:first-child {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

.archive-image {
    width: 100px;
    height: 90px !important;
    border-radius: 10px;
    object-fit: cover;
}

.archive-item h6 {
    margin-top: 5px;
    font-size: 14px;
    color: var(--text-color);
}

.camera-frame.archive-item:first-child {
    position: relative;
    margin-top: 16px;
    display: flex;
    min-width: 354px;
    height: 198px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    max-width: 354px;
    aspect-ratio: 4/2;

}



.camera-frame.archive-item:first-child img {
    width: 100%;
    height: 198px !important;
    border-radius: 10px;
    object-fit: cover;
}





.camera-frame.archive-item:first-child .timestamp {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: white;
    font-size: 12px;
}

.camera-frame.archive-item:first-child .live-broadcast {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    font-size: 12px;
}

.archive-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: transparent;
    color: var(--text-color);
    border-radius: 15px 15px 0 0;
    margin-bottom: 10px;
}

.new-clubs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: transparent;
    color: var(--text-color);
    border-radius: 15px 15px 0 0;
    margin-bottom: 10px;
}

.live-section {
    font-weight: bold;
}

.view-all-archive {
    font-weight: bold;
    cursor: pointer;
    color: var(--text-color);
}

.new-clubs {
    position: relative;
    z-index: 2;
    background-color: var(--box-bg);
    padding: 16px;
    border-radius: 15px;
}

.new-club-item {
    background-color: var(--box-bg);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    color: var(--text-color);
}

.new-club-item img {
    width: 100%;
    height: 200px !important;
    border-radius: 8px;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.club-info {
    margin-top: 10px;
}

.club-location {
    font-size: 12px;
    color: var(--text-color-secondary);
}

.stars {
    margin-top: 5px;
}


.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-container {
    width: 100%;
    overflow: hidden;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.new-club-item {
    background-color: var(--box-bg-lighter);
    border-radius: 10px;
    padding: 15px;
    margin: 5px;
    transition: transform 0.3s ease;
    border: 1px solid var(--border-color);
    max-width: 100%;
}

.new-club-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-sizing: border-box;
}

.new-club-item .club-info {
    text-align: center;
}

.new-club-item .club-info h6 {
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--text-color);
}

.new-club-item .club-location {
    font-size: 14px;
    color: var(--text-color-secondary);
    margin-bottom: 10px;
}

.suggestion-image {
    width: 100%;
    max-height: 270px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.new-club-item .stars {
    color: var(--primary-color);
    font-size: 16px;
}

.instant-suggestions {
    background-color: var(--box-bg);
    border-radius: 15px;
    margin-bottom: 20px;
    position: relative;
    min-height: 200px;
}

.instant-swiper {
    width: 100%;
}

.instant-suggestions .swiper-container {
    padding: 0;
}

.suggestion-item {
    border-radius: 10px;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.timer-container {
    padding: 8px;
    text-align: center;
    color: var(--text-color);
    background-color: var(--body-bg) !important;
    transform: translateY(0);
    transition: transform 0.3s ease;
    height: 64px;
    margin: 16px 0 !important;
}

.timer-box {
    background: var(--danger-color-transparent);
    border-radius: 4px;
    min-width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
    height: 48px;
    justify-content: center;
    border: 0.6px solid var(--danger-color);

}

/* حذف hover effect */
.suggestion-item:hover .timer-container {
    transform: translateY(0);
}

.timer {
    font-size: 20px;
    font-weight: bold;
    color: var(--primary-color);
    border-radius: 15px;
}

.timer-label {
    font-size: 12px;
    opacity: 0.8;
}

.club-score {
    display: flex;
    gap: 8px;
    margin: 10px 0;
    color: var(--text-color);
}

.score-number {
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
}

.score-dot {
    width: 3px;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: inline-block;
    margin-top: 10px;
}

.athlete-score {
    font-size: 14px;
}

.reviews {
    font-size: 12px;
    color: var(--text-color-secondary);
}

/* استایل بخش نظرات */
.reviews-section {
    background-color: var(--box-bg);
    border-radius: 16px;
    padding: 16px;
}

/* اضافه کردن اسکرول نرم به کل صفحه */
html {
    scroll-behavior: smooth;
}

/* استایل لودر نظرات */
.reviews-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    padding: 16px;
}

.spinner-border {
    width: 15px !important;
    height: 15px !important;
    border: 1px solid #333 !important;
    color: #333 !important;
    margin-bottom: 8px;
}

.loader-text {
    color: var(--text-color-secondary);
    font-size: 14px;
}

/* انیمیشن چرخش برای لودر */
@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* افکت فید برای نظرات جدید */
.review-item.new-review {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.review-item.new-review.show {
    opacity: 1;
    transform: translateY(0);
}

/* تنظیم ارتفاع ستون نظرات برای اسکرول داخلی */
@media (min-width: 992px) {

    .right-sidebar {
        position: absolute;
        left: 0;
    }

    .reviews-list {
        max-height: 600px;
        overflow-y: auto;

    }

    /* استایل اسکرول‌بار */
    .reviews-list::-webkit-scrollbar {
        width: 6px;
    }

    .reviews-list::-webkit-scrollbar-track {
        background: var(--border-color);
        border-radius: 3px;
    }

    .reviews-list::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 3px;
    }

    /* تنظیم ارتفاع یکسان برای کارت‌های نظرات */
    .review-item {
        display: flex;
        flex-direction: column;
    }

    .review-content {
        flex-grow: 1;
    }
}

/* برای موبایل و تبلت، نظرات تک ستونه نمایش داده شوند */
@media (max-width: 991px) {
    .reviews-grid>[class*="col-"] {
        margin-bottom: 16px;
    }
}

/* استایل باکس آمار امتیازات */
.ratings-stats-box {

    height: 100%;
}

.overall-rating {
    text-align: center;
    margin-bottom: 24px;
}

.big-rating {
    font-size: 48px;
    font-weight: bold;
    color: var(--primary-color);

}

.overall-rating .stars {
    color: var(--primary-color);
    font-size: 18px;
    margin-bottom: 8px;
}

.rating-count {
    color: var(--text-color-secondary);
    font-size: 14px;
}

/* استایل نوارهای پیشرفت */
.rating-bars {
    margin-top: 16px;
}

.rating-bar-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.rating-label {
    width: 70px;
    font-size: 14px;
}

.progress {
    flex: 1;
    height: 8px;
    background-color: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    margin: 0 8px;
}

.progress-bar {
    background-color: var(--primary-color);
    height: 100%;
}

.rating-bar-item .rating-count {
    width: 40px;
    text-align: right;
    font-size: 14px;
}

/* استایل لیست نظرات */
.reviews-list {
    height: 100%;
}

.review-item {
    padding: 16px;

    margin-bottom: 16px;
}

.review-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reviewer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
}

.reviewer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reviewer-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.review-date {
    font-size: 12px;
    color: var(--text-color-secondary);
    margin-top: 4px;
}

.review-rating {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.review-rating .stars {
    color: var(--primary-color);
    font-size: 14px;
    margin-bottom: 4px;
}

.review-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

#show-more-reviews {
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#show-more-reviews:hover {
    background-color: var(--primary-color);
    color: var(--text-color) !important;
}

/* استایل برای موبایل */
@media (max-width: 991px) {
    .ratings-stats-box {
        margin-bottom: 16px;
    }
}

@media (max-width: 576px) {
    .review-header {
        flex-direction: column;
    }

    .review-rating {
        align-items: flex-start;
        margin-top: 8px;
    }
}

.book-now-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--primary-color);
    color: var(--box-bg);
    border: none;
    border-radius: 5px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    line-height: 32px;
}

.book-now-btn-white {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    line-height: 32px;
}

.btn-primary-outline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}



.book-now-btn-white:hover {
    background: var(--primary-color-hover);
}

.book-now-btn:hover {
    background: var(--primary-color-hover);
}

.suggestion-info {
    padding: 16px;
}

.timer-container {

    text-align: center;
    color: var(--text-color);

    border-radius: 8px;
    margin-top: 10px;
    background-color: var(--primary-color-transparent);
    height: 64px;
    padding: 8px;

}

.timer-title {
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--danger-color);
    font-weight: 800;
}

.bdge-outline-danger {
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
    font-size: 12px;
    border-radius: 5px;
    background: var(--danger-color-transparent);
    padding: 2px 10px;
}

.bdge-outline-primary {
    border-radius: 5px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background-color: #0a4b56;
    padding: 2px 10px;
    font-size: 12px;
}

.btn-outline-primary:hover {
    color: var(--text-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.timer {
    display: flex;
    justify-content: space-around;
    gap: 8px;
}

.timer-value {
    color: var(--danger-color);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 100% */
    letter-spacing: -0.72px;
}

.timer-unit {

    color: var(--danger-color);


    font-family: Vazir;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 160% */
    letter-spacing: -0.3px;
}

.address-box {
    background-color: var(--box-bg);
    border-radius: 8px;
    color: var(--text-color-secondary);
}

.city {
    color: var(--text-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.rest-of-address {
    font-size: 0.9rem;
}

.price-box {
    color: var(--text-color);
    display: flex;
    align-items: center;

}

.price-box del {
    color: #979292;
    font-size: 12px;
}

.new-price {
    margin: 0 10px;
}

.discounted-price {
    font-size: 0.9rem;
    color: var(--primary-color);
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0 !important;
    color: var(--text-color);

}




/* تنظیم فاصله‌ها در باکس top-clubs */
.tab-content .top-clubs {
    padding: 16px;
    padding-bottom: 0 !important;

}


.tab-content .top-clubs .row {
    margin-right: -8px;
    margin-left: -8px;
}

.tab-content .top-clubs .row>[class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;

}




.top-clubs {
    background: var(--box-bg);
    padding: 16px;
    border-radius: 15px;
}

.tab-content .top-clubs {

    padding: 16px;
}

.tab-content .top-clubs .row>* {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.top-clubs .suggestion-item {

    background-color: var(--box-bg);
    border: 1px solid var(--border-color);
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;


}

.right-sidebar .top-clubs {

    padding: 16px 8px;
}

.right-sidebar .top-clubs .suggestion-item {
    margin-right: 8px;
    margin-left: 8px;
}

.top-clubs .suggestion-image {
    height: 200px;
    object-fit: cover;
}

.suggestion-item {
    border-radius: 10px;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.suggestion-image-container {
    position: relative;
    width: 100%;
}

.title-overlay {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    background: rgba(5, 63, 77, 0.8);
    padding: 10px;
    color: var(--text-color);
    font-weight: bold;
    margin: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.score-overlay {
    position: absolute;
    top: 10px;
    left: 8px;
    background: rgba(5, 63, 77, 0.8);
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
}

.swipper-button-group {
    position: absolute;
    top: 20px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.score-overlay .score-number {
    color: var(--text-color);
}

.score-overlay .score-dot {
    margin-top: 0;
}

/* استایل برای باکس‌های جدید در تب‌بندی */
.user-clubs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.user-clubs .suggestion-item {
    border: 1px solid var(--border-color);
}

/* استایل برای اسلایدر جدیدترین باشگاه‌ها */
.new-club-item {
    border: 1px solid var(--border-color);
    background-color: var(--box-bg);
    border-radius: 10px;
}

.new-club-item .suggestion-image-container {
    position: relative;
}



.score-overlay .star-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.score-overlay .star-container {
    position: relative;
    display: inline-block;
}

.score-overlay .rating-number {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: bold;
}

.swiper-slide {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.footer {
    background-color: var(--footer-bg);
    color: var(--text-color);
    margin-top: 50px;
    position: relative;
    z-index: 799;
}

.footer-title {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

.footer-list {
    padding: 0;
    margin: 0;
}

.footer-list a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 12px;
}

.footer-list a:hover {
    color: var(--primary-color);
}

.footer-description {
    color: var(--text-color-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.social-title {
    color: var(--text-color);
    font-size: 16px;
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icon {
    color: var(--primary-color);
    font-size: 20px;
    transition: color 0.3s ease;
}

.social-icon:hover {
    color: var(--primary-color);
}

.footer-middle {
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
}

.contact-info {
    color: var(--text-color-secondary);
}

.contact-info span {
    margin-left: 20px;
}

.contact-info i {
    color: var(--primary-color);
    margin-left: 5px;
}

.footer-bottom {
    background-color: var(--box-bg);
    padding: 20px 0;
}

.footer-bottom p {
    color: var(--text-color-secondary);
}


.footer {
    background-color: var(--footer-bg);
    color: var(--text-color);
    margin-top: 48px;
    position: relative;
    z-index: 999;
    width: 100%;
}

.footer-main {
    padding: 20px 0;
}

.footer-columns {
    display: flex;
    flex-wrap: wrap;
}

.footer-column {
    padding: 0 15px;
}

.footer-column:nth-child(-n+3) {
    width: calc(50% / 3);
}

.footer-column:nth-child(4) {
    width: 50%;
}

.footer-title {
    color: var(--white-color);
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-right: -20px;
}



@media(max-width:949px) {

    .bdge-outline-danger,
    .bdge-outline-primary {

        font-size: 10px;
    }

    .archive-box {
        padding: 16px;
    }

    .archive {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .camera-frame {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px;
    }

    .archive-image {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }

    .archive-text {
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
        margin-right: 0 !important;
        margin-top: 0 !important;
    }

    .archive-items {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        /* IE Ùˆ Edge */
        scrollbar-width: none;
        /* Firefox */
        padding: 10px 0;
        width: 100%;
    }

    .archive-items::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari Ùˆ Opera */
    }

    .archive-item {

        width: 150px;

        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .archive-item:last-child {
        margin-right: 0;
    }

    .club-image {
        width: 100vw !important;
        /* عرض کامل viewport */
        max-width: 100% !important;
        height: auto !important;
        /* حفظ نسبت تصویر */
        object-fit: cover;
        /* پر کردن فضای تصویر بدون کشیدگی */
        margin-left: calc(-50vw + 50%);
        /* جبران مارجینهای body یا container */
    }
}

@media (max-width: 768px) {

    .footer-column:nth-child(-n+3),
    .footer-column:nth-child(4) {
        width: 100%;
        margin-bottom: 30px;
    }

    .contact-info {
        text-align: center;
        margin-top: 15px;
    }

    .footer-bottom {
        text-align: center;
    }

    .footer-bottom .text-md-end {
        text-align: center !important;
        margin-top: 15px;
    }

    .footer-title {
        margin-right: 0;
    }

    .footer-list {
        columns: 2;
        column-gap: 30px;
        padding: 10px 20px;
    }

    .footer-list li {
        break-inside: avoid;
    }


}

.info-top {
    min-height: 70px;
    text-align: right;
}

.swipper-price {
    display: inline-block;
    font-size: 12px;
}

.price-line {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.price-unit-container {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
    vertical-align: bottom;
    font-size: 12px;
}

.price-currency {
    font-size: 10px;
    margin-top: -2px;
}

.blogs-row {
    background: var(--box-bg);
    padding: 16px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;

}

.blog-item {
    background: var(--box-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;

}

.blog-image {
    object-fit: cover;
    width: 100%;
    height: 200px;
    border-radius: 8px;
    margin-bottom: 16px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.blog-info {
    flex: 1;
    padding: 16px;
}


.blogs-row .row {
    margin-right: -8px;
    margin-left: -8px;
}

.blogs-row .row>[class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
}


.user-info {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-color-secondary);
    font-size: 11px;
}

.separator {
    margin: 0 5px;
}

.blog-title {
    font-size: 18px;
    color: var(--text-color);
    margin: 10px 0;
}

.blog-description {
    color: var(--text-color-secondary);
    font-size: 14px;
}

.articles-header {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.articles-title {
    font-size: 20px;
    color: var(--text-color);
}

.section-header {
    display: flex;
    justify-content: space-between;

}




.view-all i {
    font-size: 12px;
    margin-right: 8px;
}

.view-all {
    color: var(--primary-color);
    text-decoration: none;
}

.faq-container {
    background: transparent;
    border-radius: 10px;
    ;
    color: var(--text-color);
}

.faq-title {
    font-size: 24px;
    margin-bottom: 20px;
}

.faq-item {
    border: 1px solid var(--border-color);
    padding: 15px 10px;
    border-bottom: none;

}

.faq-item.first-item {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.faq-item.last-item {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom: 1px solid var(--border-color) !important;
}

.faq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-header i {
    margin-left: 10px;
    margin-top: 6px;
    color: var(--primary-color);
}

.faq-toggle {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 18px;
    cursor: pointer;
}

.faq-content {
    display: none;
    margin-top: 10px;
}

.faq-item.active .faq-content {
    display: block;
}

.course-info-line {
    display: flex;
    align-items: center;
    color: var(--text-color);
    font-size: 12px;
    gap: 8px;
}

.course-info-line .text-primary,
.text-primary {
    color: var(--primary-color) !important;
}

.dot {
    width: 4px;
    height: 4px;
    background-color: var(--text-color);
    border-radius: 50%;
    display: inline-block;
    margin: auto 5px;
}

.trainer-avatar {
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
}

.trainer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-description {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-color-secondary) !important;
}

.course-title {
    font-weight: bold;
    color: var(--text-color);
}

.course-level {
    color: var(--primary-color);
}

.suggestion-image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.ribbon {
    display: none;
    position: absolute;
    top: 20px;
    right: -35px;
    background: var(--danger-color);
    color: white;
    padding: 5px 40px;
    transform: rotate(45deg);
    font-size: 12px;
    font-weight: bold;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.has-discount .ribbon {
    display: block;
}

.slide-progress-bar {
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    width: calc(100% - 20px);
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 10;
    margin-bottom: 6px;
    border-radius: 4px;
}

.progress-inner {
    height: 100%;
    background: var(--primary-color);
    width: 0;
    transition: width 5s linear;
    border-radius: 4px;
}

#mainSlider .title-overlay {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    background: rgba(5, 63, 77, 0.8);
    padding: 10px 5px 0 5px;
    color: var(--text-color);
    font-weight: bold;
    margin: 10px;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
}

#mainSlider .title-overlay span {
    font-size: 12px;
    font-weight: 500;
}

.swiper-wrapper .title-overlay {

    flex-direction: row;
    text-align: right;
}

.title-overlay-title {
    font-size: 14px !important;
    font-weight: 600 !important;
}

.title-overlay .city {
    font-size: 14px !important;
    font-weight: 600 !important;
}

@media (max-width: 992px) {
    .left-sidebar {
        display: none !important;
    }

    .main-content {
        margin-right: 0;
        max-width: 100%;
        flex: 0 0 100%;
        padding: 0 15px;
    }

    .user-clubs {
        grid-template-columns: repeat(2, 1fr);
    }

    .score-overlay {

        top: 6px;
    }

 

}

@media (max-width: 576px) {

    .camera-frame.archive-item:first-child {

        min-width: auto !important;

    }

    .main-content {
        padding: 0 10px;
        margin: 0;
    }

    .user-clubs {
        grid-template-columns: 1fr;
    }

    #mainSlider {
        margin-top: 30px;
    }

 

    .title-overlay {
        flex-direction: column;
        gap: 5px;
    }

    .title-overlay-title,
    .title-overlay .city {
        font-size: 12px !important;
    }
}

.mySwiperList2 img,
.mySwiper img {
    height: 160px !important;
}

.title-overlay .fa-chevron-left {
    margin-top: 2px;
}

.image-slider-container {
    background: transparent;
    border-radius: 15px;
    margin-top: 48px;
}

.image-swiper {
    width: 100%;
    padding: 10px 0;
    overflow: hidden;
}

.image-slide {
    padding: 5px;
    transition: transform 0.3s ease;
    height: 100%;
}

.image-slide img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* تنظیمات pagination */
.image-swiper .swiper-pagination {
    position: relative;
    margin-top: 15px;
}

.image-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;

    opacity: 0.7;
}

.image-swiper .swiper-pagination-bullet-active {
    background-color: var(--primary-color);
    opacity: 1;
}

.mobile-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    z-index: 1000;
    background: var(--box-bg);

    height: 56px;
    max-height: 773px;

    justify-content: space-between;

    gap: 16px;

}

.mobile-footer i {
    font-size: 25px;
    color: var(--text-color)
}

.mobile-footer .parent {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: auto 16px;
}

.mobile-footer .parent .item {

    text-align: center;
}



.mobile-footer .parent .item.item-float {
    text-align: center;
    line-height: 70px;
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--shadow-xl)
}

.mobile-footer .item.item-float i {
    color: var(--main-color-one)
}

.mobile-footer .item i {
    display: inline-block;
    height: 25px;

    position: relative;
}

.mobile-footer i {
    font-size: 25px;
    color: #fff;
}

.mobile-footer .item .title {
    color: var(--text-color-secondary);
    font-size: 10px;
    line-height: normal;
    margin: 5px 0;
}

.mobile-footer .menu-cart-counter {
    position: absolute;
    top: 10px;
    right: 10px;
    transform: translate(50%, -50%);
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    min-width: 22px;
    background: #ff8a7e;
    display: block;
    text-align: center;
    padding: 0 5px;
    color: #fff;
    border-radius: 11px;
    box-shadow: 0 0 0 1px #fff;
    -webkit-box-shadow: #fff 0 0 0 1px;
    -webkit-animation-name: BasketBadge;
    animation-name: BasketBadge;
    -webkit-animation-duration: .4s;
    animation-duration: .4s
}

.mobile-footer li.active i {
    color: var(--main-color-one)
}

.mobile-footer ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center
}

/* تنظیمات responsive */
@media (max-width: 768px) {
    .image-slide img {
        height: 200px;
    }
}

@media (max-width: 576px) {
    .image-slide img {
        height: 180px;
    }
}

.image-slider-container .swiper-pagination {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
}

.image-slider-container .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #ccc;
    opacity: 0.7;
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.image-slider-container .swiper-pagination-bullet-active {
    background-color: #007bff;
    /* رنگ دلخواه برای pagination فعال */
    opacity: 1;
    width: 14px;
    height: 14px;
}

.image-slider-container .swiper-pagination-bullet:hover {
    opacity: 1;
}

/* اطمینان از نمایش pagination در تمام حالات */
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
    right: 0 !important;
    width: 20% !important;
    position: absolute !important;
    bottom: -48px !important;
}

.mt-24 {
    margin-top: 24px !important;
}

.mt-48 {
    margin-top: 48px !important;
}

.mb-24 {
    margin-bottom: 24px !important;
}

.mb-0 {

    margin-bottom: 0 !important;
}

.line-height-16 {
    line-height: 16px !important;
}

.mb-8 {
    margin-bottom: 8px !important;
}

.mb-48 {
    margin-bottom: 48px !important;
}

.mt-16 {
    margin-top: 16px !important;
}

.mb-16 {
    margin-bottom: 16px !important;
}

.mt-8 {
    margin-top: 8px !important;
}

.mr-16 {
    margin-right: 16px;
}

.ml-4 {
    margin-left: 4px;
}

.bottom-img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* استایل‌های لودر */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--body-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.loader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    position: relative;
}

.circle {
    width: 20px;
    height: 20px;
    margin: 0 5px;
    border-radius: 50%;
    background: var(--primary-color);
    animation: bounce 1.3s ease-in-out infinite;
}

.circle:nth-child(1) {
    animation-delay: 0s;
}

.circle:nth-child(2) {
    animation-delay: 0.3s;
}

.circle:nth-child(3) {
    animation-delay: 0.6s;
}

.circle:nth-child(4) {
    animation-delay: 0.9s;
}

@keyframes bounce {

    0%,
    100% {
        transform: scale(0.2);
        opacity: 0.5;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }
}

.preloader.loaded {
    opacity: 0;
    visibility: hidden;
}


/*  gym listing*/
.page-title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    background-color: var(--box-bg);
    margin-bottom: 24px;
    box-sizing: border-box;
}

.title-and-location {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.title-and-location h1 {
    font-size: 24px;
    margin-bottom: 8px;
}

.rating-and-actions {
    flex: 1;
    display: flex;
    justify-content: center;

}

.primary-color {
    color: var(--primary-color) !important;
    font-feature-settings: 'calt' off;

    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.48px;
}

.rating-info .d-flex {

    gap: 8px;
}

.rating-info .d-flex span {
    padding-top: 6px;

}

.star-text {
    color: var(--text-color);
    text-align: right;
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.location-info {
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-buttons {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.action-buttons span {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.gap-16 {
    gap: 16px;
}

.page-title-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    flex-wrap: wrap;
    gap: 16px;
}

.title-and-location {
    flex: 2;
    min-width: 0;
    /* برای جلوگیری از سرریز محتوا */
}

.rating-and-actions {

    display: flex;
    flex-direction: column;
    align-items: center;
}


.contact-button {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-button:hover {
    background-color: var(--primary-color-hover);
}


.product-gallery {
    width: 100%;

}

.product-slider-action{

    display: none !important;
}

.product-gallery .mobile-gallery {
 
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.product-gallery .mobile-gallery .swiper-slide {
    width: 100%;
    height: auto;
}

.home-filter-date {
    background-color: var(--body-bg) !important;
    color: var(--text-color-secondary);
    border: none;
    height: 48px !important;
    border-radius: 8px !important;
}

.product-gallery .mobile-gallery .product-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}

.image-swiper img {
    max-height: 200px;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* نسخه دسکتاپ - گرید */
.product-gallery .desktop-gallery {
    display: block !important;
    width: 100%;
}

.bottom-img-row {
    width: 100%;
    margin: 0;
    padding: 0;
}

.product-gallery .gallery-container {
    display: grid;
    grid-template-columns: 0.75fr 0.75fr 0.75fr;
    grid-template-rows: 1fr 1fr;
    height: 472px;
    align-items: center;
    gap: 24px;
    align-self: stretch;

}

/* عکس بزرگ سمت راست - دو ردیف ارتفاع */
.product-gallery .large-image {
    grid-column: 1;
    grid-row: 1 / span 2;
    /* از ردیف اول شروع و دو ردیف را پوشش می‌دهد */
    height: 100%;
}

/* عکس‌های کوچک در ستون‌های دوم و سوم */
.product-gallery .small-image {
    height: 100%;
}

/* استایل مشترک آیتم‌های گالری */
.product-gallery .gallery-item {
    border-radius: 10px;
    overflow: hidden;
}

.product-gallery .gallery-item .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.product-gallery .gallery-item .product-image:hover {
    transform: scale(1.05);
}

/* تنظیمات pagination برای اسلایدر */
.product-gallery .mobile-gallery .swiper-pagination {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

.product-gallery .mobile-gallery .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.7);
    opacity: 0.7;
    margin: 0 4px;
}

.product-gallery .mobile-gallery .swiper-pagination-bullet-active {
    background-color: white;
    opacity: 1;
}

/* تنظیمات رسپانسیو */
@media (max-width: 768px) {
    .product-gallery .desktop-gallery {
        display: none !important;
    }

    .product-gallery .mobile-gallery {
        display: block !important;
    }

    .product-gallery .mobile-gallery.swiper {
        height: auto;
    }
}

/* سازگاری با صفحه‌های عریض */
@media (min-width: 1200px) {
    .product-gallery .gallery-container {
        height: 600px;
    }
}

/* سازگاری با صفحه‌های متوسط */
@media (max-width: 992px) and (min-width: 769px) {
    .product-gallery .gallery-container {
        height: 400px;
    }
}

/* استایل منوی محصول */

.product-menu-items {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: auto;
    gap: 24px;
}


.product-menu-items li.active {
    border-bottom: 2px solid var(--primary-color);
    color: var(--text-color);
}



.product-menu-items li a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    display: block;
}

.breadcrumb {
    display: flex;
    justify-content: right;
    align-items: center;
    margin-bottom: 0 !important;
}

.breadcrumb-item {}

.breadcrumb-item+.breadcrumb-item::before {
    content: "\f053" !important;
    /* کد آیکون fa-chevron-left */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: var(--primary-color-secendery) !important;
    margin-top: 5px;
    font-size: 10px;
}

.breadcrumb-item a,
.breadcrumb-item.active span {
    background: var(--box-bg);
    padding: 8px 12px;
    border-radius: 16px;
    min-width: 112px;
    color: var(--text-color-secondary);
    font-family: Vazir;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;

}

/* استایل بخش‌های محتوا */
.product-section {
    width: 100%;

    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 24px;

}

/* استایل بخش نقشه و مکان‌یابی */
.map-container {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.address-line {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.location-address {
    display: flex;
    align-items: center;
}

.location-address i {
    color: var(--bs-primary);
    margin-left: 8px;
    font-size: 18px;
}

.map-buttons {
    display: flex;
    gap: 8px;
}

.map-button {
    padding: 6px 12px;
    color: var(--text-color);
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid var(--text-color);
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0px 12px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.map-button i {
    margin-left: 5px;
}

.map-button:hover {
    background-color: var(--bs-primary);

}

/* رسپانسیو منوی محصول */
@media (max-width: 768px) {


    .map-container {
        height: 200px;
    }

    .address-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .map-buttons {
        width: 100%;
        justify-content: right !important;
    }
}

/* استایل بخش نظرات ورزشکاران */
.reviews-section {
    display: flex;
    flex-wrap: wrap;

}

.primary-color:hover {
    color: var(--primary-color-secendery);
}

.reviews-stats {
    flex: 1;

}

.reviews-list {
    flex: 2;

}

.rating-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.reviews-grid>[class*="col-"] {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.big-stars {
    font-size: 24px;
    margin-bottom: 10px;
}

.rating-value {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 5px;
}

.rating-count {
    color: #777;
    font-size: 14px;
}

.rating-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.rating-label {
    flex: 1;
}

.rating-progress {
    flex: 2;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin: 0 10px;
}

.rating-progress-bar {
    height: 100%;
    background-color: var(--bs-primary);
}

.review-card {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.review-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.reviewer-info {
    display: flex;
    align-items: center;
}

.reviewer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}

.reviewer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reviewer-name {
    font-weight: 500;
}

.review-date {
    color: #777;
    font-size: 12px;
}

.review-stars {
    margin-bottom: 8px;
}

.review-text {
    line-height: 1.5;
    font-size: 14px;
}

.reviews-swiper {
    overflow: hidden;
    padding: 5px;
}

@media (max-width: 768px) {
    .reviews-section {
        flex-direction: column;
    }
}

/* استایل بخش امکانات و ویژگی‌ها */
.features-section {
    padding-top: 24px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

}

.feature-item {

    gap: 8px;
}

.feature-icon {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: right;

}

.feature-text {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: var(--text-color-secondary);
}

.features-divider {
    height: 0.6px;
    background-color: var(--primary-color-secendery);

}


.small-feature {

    display: flex;
    flex-direction: column;
    align-items: right;
    text-align: right;
}

.small-feature-icon {
    width: 35px;
    height: 35px;

    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    margin-bottom: 8px;
}

.small-feature-text {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;/
}

@media (max-width: 992px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .other-features {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 576px) {
    .features-grid {
        grid-template-columns: 1fr;
    }

    .other-features {
        grid-template-columns: repeat(4, 1fr);
    }
}

#map-section,
.reviews-section,
#features-section,
.classes-container,
#teammates,
#rules-section,
#about-section {

    border-radius: 16px !important;
}

/* استایل منوی محصول */
.product-menu {
    width: 100%;
    background-color: var(--box-bg);
    border-radius: 8px;
    padding: 16px;

}

.product-menu-items {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    white-space: nowrap;
}

.product-menu-items li {
    padding-bottom: 16px;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    font-weight: 500;
    text-align: center;
}



.product-menu-items li:hover:not(.active) {
    background-color: rgba(0, 0, 0, 0.05);
}

.product-menu-items li a {
    color: inherit;
    text-decoration: none;
    display: block;
    font-size: 13px;
}

/* استایل بخش‌های محصول */
.product-section {
    width: 100%;
    background-color: var(--box-bg);
    border-radius: 16px;
    padding: 16px;
}



/* 1. بخش نقشه و مکان‌یابی */
.map-container {
    width: 100%;
    height: 276px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.address-line {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.location-address {
    display: flex;
    align-items: center;
}

.location-address i {
    color: var(--bs-primary);
    font-size: 16px;
    margin-left: 10px;
}

.map-buttons {
    display: flex;
    gap: 8px;
}


.map-button i {
    margin-left: 5px;
}

.map-button:hover {
    background-color: var(--bs-gray-200);
    border-color: var(--bs-gray-400);
}

/* 2. بخش نظرات ورزشکاران */
.reviews-section {
    display: flex;
    flex-direction: row;

    width: 100%;

}

.reviews-stats {
    flex: 0 0 40%;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.reviews-list {
    flex: 0 0 60%;
}

.rating-summary {
    text-align: center;
    margin-bottom: 20px;
}

.big-stars {
    font-size: 24px;
    color: #FFD700;
    margin-bottom: 10px;
}

/* اضافه کردن media query برای حالت موبایل */
@media (max-width: 768px) {
    .reviews-section {
        flex-direction: column;
    }

    .reviews-stats,
    .reviews-list {
        flex: 0 0 100%;
        width: 100%;
    }
}

/* 3. بخش امکانات و ویژگی‌ها */


.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

}


.feature-icon {

    color: var(--text-color);
    border-radius: 50%;
    font-size: 24px;
    margin-bottom: 16px;
}


hr {
    margin: 0 !important;
}

.other-features {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 24px;
    padding-top: 16px;
}


@media (max-width: 992px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .other-features {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 576px) {
    .features-grid {
        grid-template-columns: 1fr;
    }

    .other-features {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 4. بخش کلاس‌ها */
.classes-container {
    width: 100%;
}

.class-card {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.class-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.class-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.class-time {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 15px;
    font-size: 12px;
    text-align: center;
}

.class-info {
    padding: 15px;
}

.class-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.class-instructor {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
}

.class-instructor i {
    margin-left: 5px;
    color: var(--bs-primary);
}

.class-detail {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
}

.class-detail span {
    display: flex;
    align-items: center;
}

.class-detail i {
    margin-left: 5px;
    color: var(--bs-primary);
}

.class-level {
    margin-bottom: 15px;
}

.level-tag {
    display: inline-block;
    padding: 4px 10px;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    border-radius: 20px;
    font-size: 12px;
}

.book-class-btn {
    display: block;
    width: 100%;
    padding: 8px 15px;
    background-color: var(--bs-primary);
    color: white;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.book-class-btn:hover {
    background-color: var(--bs-primary-dark);
    color: white;
}

.class-swiper {
    padding-bottom: 40px;
}

.class-swiper .swiper-pagination {
    bottom: 0;
}

@media (max-width: 768px) {
    .class-card {
        margin: 0 5px;
    }
}

/* 5. بخش همبازی‌های باشگاه */

.teammates-container {
    width: 100%;
    margin-top: 24px;
}

.teammates-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 16px;
}

.teammate-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    padding: 8px;
    text-align: center;
}

.teammate-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
}

.teammate-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.teammate-info {
    width: 100%;
}

.teammate-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teammate-skill {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
}

.skill-stars {
    color: #FFD700;
    font-size: 12px;
}

.contact-teammate-btn {
    display: inline-block;
    padding: 6px 12px;
    background-color: var(--bs-primary);
    color: white;
    font-size: 12px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.contact-teammate-btn:hover {
    background-color: var(--bs-primary-dark);
    color: white;
}

/* Media queries برای حالت‌های مختلف نمایش */
@media (max-width: 1400px) {
    .teammates-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (max-width: 1200px) {
    .teammates-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 992px) {
    .teammates-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 768px) {
    .teammates-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}



@media (max-width: 400px) {
    .teammates-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pt-8 {

    padding-top: 8px;
}

/* 6. بخش قوانین باشگاه */
.rules-container {
    padding-top: 24px;
    width: 100%;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
}

.rule-text-bottom {

    display: flex;
    justify-content: space-between;
    padding-top: 16px;
}

.d-none {

    display: none !important;
}

.rule-item {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.rule-icon {


    color: var(--text-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: 20px;

    flex-shrink: 0;
}

.text-orange {

    font-size: 14px;
    font-weight: 600;
    color: rgb(218, 155, 40);
}

.rule-content {
    flex-grow: 1;
    color: var(--text-color);

}

.rule-title {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.rule-text {

    color: var(--text-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}



/* 7. بخش درباره مجموعه */
.about-container {
    display: flex;
    gap: 30px;
}

.about-content {
    flex: 0 0 60%;
}

.about-content p {
    font-size: 14px;
    color: var(--bs-gray-600);
    line-height: 1.8;
    margin-bottom: 20px;
}

.about-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--bs-primary);
    margin-bottom: 5px;
}

.stat-label {
    font-size: 13px;
    color: var(--bs-gray-600);
}

.about-images {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}



/* 8. بخش باشگاه‌های مشابه */
.similar-clubs-container {
    width: 100%;
}

.similar-clubs-swiper {
    padding-bottom: 40px;
}

.similar-club-card {
    background-color: var(--text-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin: 0 5px;
}

.similar-club-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.similar-club-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.club-distance {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.club-distance i {
    margin-left: 5px;
}

.similar-club-info {
    padding: 15px;
}

.similar-club-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.similar-club-rating {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.similar-stars {
    color: #FFD700;
    font-size: 14px;
    margin-left: 5px;
}

.similar-rating-count {
    font-size: 12px;
    color: var(--bs-gray-600);
}

.similar-club-features {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.feature-badge {
    padding: 4px 10px;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-gray-700);
    border-radius: 20px;
    font-size: 11px;
}

.similar-club-price {
    display: flex;
    align-items: baseline;
    margin-bottom: 15px;
}

.price-label {
    font-size: 12px;
    color: var(--bs-gray-600);
    margin-left: 5px;
}

.price-value {
    font-size: 18px;
    font-weight: 700;
    margin-left: 5px;
}

.price-unit {
    font-size: 12px;
    color: var(--bs-gray-600);
}

.view-similar-btn {
    display: block;
    width: 100%;
    padding: 8px 15px;
    background-color: var(--bs-primary);
    color: white;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.view-similar-btn:hover {
    background-color: var(--bs-primary-dark);
    color: white;
}

.similar-clubs-swiper .swiper-pagination {
    bottom: 0;
}

@media (max-width: 768px) {
    .similar-club-card {
        margin: 0 5px;
    }
}



/* calendar-container */


.calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;

    border-top: 0.6px solid var(--primary-color-secendery);
    padding-top: 16px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    margin: 20px 0;
}

.calendar-text {
    color: var(--primary-color);

    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}

.calendar-text i {
    font-size: 9px;

}

.calendar-text.disabled {
    color: var(--bs-gray-600);
}

.day {
    text-align: center;
    font-size: 12px;
    margin-bottom: 10px;
}

.day span {
    display: inherit;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
}

.day .gray-text-custome {


    color: var(--text-color-secondary);
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
}

.gap-8 {
    gap: 8px;
}

.gap-4p {
    gap: 4px !important;
}

.cutom-span {
    color: var(--text-color-secondary);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.date {

    padding: 2px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 11px;
    text-align: center;
}

.date span:first-child {
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}

.date span {
    display: inherit;
}

.date.selected {
    border-radius: 8px;
    border: 0.6px solid var(--primary-color) !important;
    background: var(--primary-color-secendery) !important;
}

.reservation-info {
    margin-top: 20px;
    font-size: 14px;
}



.font-bold {
    font-weight: bold;
}

.main-sidebar-body li.nav-item.active .nav-link {
    background-color: var(--body-bg) !important;
}

.main-sidebar-body .nav-item.active .nav-link:after,
.main-sidebar-body .nav-item.active .nav-link:before {
    border-left: 20px solid var(--box-bg) !important;
}

.date-input {
    background-color: var(--body-bg) !important;
    color: var(--text-color) !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 20px 10px !important;
    font-size: 12px !important;
}

/* در عرض‌های بیشتر از 768px (تبلت به بالا) */
@media (max-width: 991.999px) {

    .jumps-prevent {
        display: none !important;
    }




    .home .filter-date {

        width: 80%;
    }


    .search-form {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }


    .search-form .input-group {
        display: flex;
        width: 100%;

        flex-direction: row;

    }




    .search-form input[type="text"],
    .search-form button[type="submit"] {
        margin: 0;
        display: block;

    }


    .search-form select,
    .search-form input[type="text"],
    .search-form button[type="submit"] {
        height: 40px;
    }


    .search-form>* {
        margin: 0;
    }


    .search-form button[type="submit"] span {
        display: none;
    }

    .search-form button[type="submit"] i {
        display: inline-block;
    }


    #mainSlider {

        padding: 16px !important;
    }

    #mainSlider p {

        margin-bottom: 0 !important;
    }

    #mainSlider .title-overlay {

        flex-direction: row !important;
    }

}

.swiper-pagination-bullet-active {
    background-color: var(--primary-color) !important;
}

.view-all {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.remaining-time {
    color: var(--Sonic-Silver-250, #B9B9B9);
    text-align: right;
    font-family: Vazir;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 160% */
}

@media (max-width: 766.999px) {
    .product-gallery {
        background-color: var(--box-bg);
        display: flex;
        padding: 16px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
        align-self: stretch;
        border-radius: 16px;
        margin-top: 24px;
    }

    .title-and-location h1 {
        font-size: 18px;
        margin-bottom: 8px;
        margin-top: 16px;
        text-align: center;
    }

    .rating-and-actions {

        flex-direction: row;
    }

    .d-sm-block {
        display: block !important;
    }

    .d-none-sm {
        display: none !important;
    }

    .rule-text {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
    }

    .section-title {
        text-align: right;
        font-family: Vazir;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 32px;
    }

    .view-all {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    #map-section {

        display: flex;
        flex-direction: column;
    }

    .notbat-box {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .blogs-row {
        margin-top: 48px;
    }

    .blog-title {
        font-size: 14px;
        margin: 10px 0;
        line-height: 2;
    }

    .blog-info {
        margin: auto;
        display: flex;
        flex-direction: column;
    }

    .blog-item {
        display: flex;
        flex-direction: row;
        margin-bottom: 16px;

    }

    .blog-description {
        display: none !important;
    }

    .d-none-sm {
        display: none !important;
    }

    .blog-item .blog-image {
        flex-shrink: 0;
        width: 40%;
        height: 100%;
        position: relative;
        margin-bottom: 0 !important;
        min-height: 125px;
        border-radius: 0 8px 8px 0;
    }

    .classes .title-overlay {
        flex-direction: row !important;

    }

    .header-contact {

        display: none !important;
    }

    .suggestion .discount-reserve-btn .reserve-ani {

        display: none;
    }

    .suggestion.suggestion-item {
        display: flex;
        flex-direction: row;

    }

    .suggestion .discount-reserve-btn .bdge-outline-primary {

        position: absolute !important;
        right: 10px;
        top: 10px;
    }

    .suggestion .discount-reserve-btn .bdge-outline-danger {

        position: absolute;
        right: 5px;
        bottom: 10px;
        font-size: 10px;
    }


    .suggestion .suggestion-image-container {
        flex-shrink: 0;
        width: 40%;
        height: 100%;
        position: relative;
    }

    .top-clubs .suggestion .suggestion-image-container {

        width: 45%;
    }

    .suggestion .suggestion-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        min-height: 208px;
    }

    .suggestion .title-overlay {
        display: none;
    }

    .suggestion .title-overlay-mobile {
        text-align: right;
        text-overflow: ellipsis;
        font-family: Vazir;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
    }


    .suggestion .score-overlay {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 1px 5px;
        font-size: 12px;
    }



    .suggestion .address-box {
        font-size: 12px;
        color: #666;

    }


    .suggestion .price-box {
        position: relative;
        color: var(--text-color);
        padding: 5px;
        border-radius: 3px;
        font-size: 12px;
        margin-top: 0 !important;
    }


    .top-clubs .suggestion .suggestion-info {
        min-height: 120px;

        padding: 8px !important;
        padding-right: 0 !important;
        margin: auto;
        flex: 1;
        width: 60%;
    }

    .suggestion .info-top {

        min-height: 50px;
    }

    .suggestion-image {
        margin-bottom: 0 !important;
    }

    .score-number {

        font-size: 12px !important;
    }

    .instant-suggestions .suggestion .address-box {
        display: none;
    }

    .instant-suggestions .info-top {

        min-height: 50px !important;
    }

    .instant-suggestions .timer-container {
        padding: 2px !important;

    }

    .instant-suggestions .timer-box {
        min-width: 40px;
        width: 25%;
    }

    .instant-suggestions .timer-value {

        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    .instant-suggestions .timer {
        gap: 2px;
        margin: 0 !important;
    }

    .instant-suggestions .swiper-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {

        bottom: -50px;
        right: -43%;
    }

    .mobile-gallery .swiper-horizontal>.swiper-pagination-bullets,
    .mobile-gallery .swiper-pagination-bullets.swiper-pagination-horizontal {

        width: 100% !important;
        position: absolute !important;
        z-index: 999;
        bottom: 30% !important;
    }

    .product-slider-action {

        display: flex !important;
        justify-content: space-between !important;
        width: 100%;
        top: 0;
        padding: 16px;
    }

    .field-specs-box {

        margin-top: 24px;
    }

    .product-slider-action a {

        border-radius: 6px;

        background: var(--box-bg);
        padding: 12px;
    }

    .product-slider-action a.call {

        border: 1px solid var(--primary-color);
    }

    .product-slider-action-item-left a {
        display: inline-block;
    }

    #map-section .address-line {
        align-items: revert;
    }

    .footer {
        padding: 5px 15px !important;
    }

    .home.row {
        flex-direction: column;
    }

    .order-mb-1 {
        order: 1;
    }

    .order-mb-2 {
        order: 2;
    }

    .order-mb-3 {
        order: 3;
    }

    .order-mb-4 {
        order: 4;
    }

    .order-mb-5 {
        order: 5;
    }

    .instant-suggestions .suggestion-item .bdge-outline-primary {
        display: none;
    }

    .instant-suggestions .suggestion-item .bdge-outline-danger {
        position: absolute;
        right: 10px;
        bottom: 35px;
    }

    .instant-suggestions .notbat-box {
        display: none !important;
    }

    .instant-suggestions .button-group {

        margin-top: 5px !important;
    }

    .d-block-sm {
        display: block !important;
    }

    .mobile-header {

        margin-top: 24px;
        text-align: left;
    }

    .phone-header svg,
    .login-text {

        display: none !important;
    }

    .top-clubs .discount-reserve-btn {

        margin-top: 10px;
    }

    .top-clubs .suggestion .price-box {

        display: none !important;

    }

    .suggestion .city {
        font-size: 12px;
        font-weight: 700;
    }

    .suggestion .rest-of-address {
        font-size: 12px;
        font-weight: 400;
    }

    .top-clubs .suggestion-item {

        grid: 0 !important;
        min-height: 120px !important;
    }

    .top-clubs .book-now-btn-white {
        height: 32px;
        padding: 8px 12px;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
    }

}
.flex-end{
    align-items: flex-end
}
@media (max-width: 478px) {





    .instant-suggestions .timer-container {

        max-height: 50px;
    }



    .instant-suggestions .info-top {

        min-height: 10px !important;
    }



    .instant-suggestions .timer-box {

        min-width: 35px !important;
    }


    .book-now-btn {

        font-size: 10px !important;
        margin: 0;
        padding: 5px;
        margin-top: 10px;
    }

    .instant-suggestions .bdge-outline-danger {

        font-size: 10px !important;
    }

    .d-block-sm {
        display: block !important;
    }

    .instant-suggestions .suggestion-item .bdge-outline-danger {
        position: absolute;
        right: 2px;
        bottom: 35px;
    }


}

@media screen and (min-width: 768px) {
    .home {
        position: relative;
    }

    .col-4-fixed {
        position: absolute;
        top: 546px;
        left: 0;
    }
}

.product-menu-items {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

/* Chrome, Edge, Safari */
.product-menu-items::-webkit-scrollbar {
    display: none;
}
.date.disabled {

    color: var(--primary-color-secendery) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.7;
}

.select2-container--default .select2-selection--single {
    background-color: var(--body-bg);
    color: var(--text-color-secondary);
    border: none;
    height: 48px;
    padding: 8px;
}

.select2-results__option {
    color: #333;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--primary-color);
}


#sports-tab {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-bottom: 8px;
}

#sports-tab::-webkit-scrollbar,
.product-menu-items::-webkit-scrollbar {
    display: none;
}


#sports-tab .nav-item {
    flex: 0 0 auto;
}

.city-tabs .nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.city-tabs .nav-pills::-webkit-scrollbar {
    display: none;
}


.city-tabs .nav-pills .nav-link.active {

    border-bottom: 2px solid var(--primary-color) !important;

}


.filter-container {
    background-color: var(--box-bg);
    border-radius: 10px;
    padding: 16px;

    flex-direction: column;
    justify-content: center;
    gap: 16px;
    align-self: stretch;
}

.filter-top-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
}

.filter-item-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background-color: var(--box-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px;
    min-width: 120px;
    cursor: pointer;
}

.filter-tags-container {
    position: relative;
    width: 100%;
    background: var(--body-bg);
    padding-right: 8px;
    border-radius: 8px;
}

.filter-tags-scroll {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    padding: 8px;
    align-items: center;
    align-self: stretch;
}

.filter-tags-scroll::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.filter-tag {
    flex: 0 0 auto;
    background-color: var(--body-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 6px 16px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--box-bg);
    height: 80px;
    width: 88px;
    align-items: center;
    gap: 16px;
    justify-content: center;
    flex-direction: column;
    border-radius: 8px;
}


.filter-tag:hover,
.filter-tag.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* استایل‌های ریسپانسیو */
@media (max-width: 768px) {
    .filter-top-row {
        flex-direction: row;
        gap: 8px;
    }

    .filter-item-btn {
        width: 100%;
    }

    .filter-tag {

        height: auto !important;
        flex-direction: row !important;
    }
}

/* استایل برای فیلترهای انتخاب شده */
.filter-tag {
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-tag.selected {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    border-radius: 4px;
    border: 0.6px solid var(--primary-color);
    background: var(--primary-color-secendery);
}

/* استایل مودال‌ها */
.modal-content {
    background-color: var(--box-bg);
    color: var(--text-color);
}

/* استایل اسلایدر قیمت */
.price-slider-container {
    position: relative;
    height: 40px;
    margin-bottom: 20px;
}

.price-slider {
    position: absolute;
    width: 100%;
    height: 5px;
    background: var(--body-bg);
    outline: none;
    -webkit-appearance: none;
    pointer-events: none;
}

.price-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    pointer-events: auto;
}

.price-inputs {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.price-input {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.price-input input {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background-color: var(--body-bg);
    color: var(--text-color);
}

/* استایل تقویم */
.calendar-week-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.calendar-day:hover {
    background-color: var(--body-bg);
}

.calendar-day.selected {
    background-color: var(--primary-color);
    color: white;
}

.action-buttons-list {
    display: flex;
    gap: 4px !important;
    margin-right: 24px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    justify-content: space-between;

}

.action-btn-list {
    display: flex;
    align-items: center;
    background-color: var(--box-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 168px;
    height: 40px;
    justify-content: space-between;
}

.near-me-btn {

    background: var(--primary-color);
    color: var(--box-bg);
    font-feature-settings: 'calt' off;
    font-family: Vazir;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
    letter-spacing: -0.48px;
}

.map-view-btn {
    color: var(--primary-color);
}

.action-btn-list i:first-child {
    margin-top: 6px;
    font-size: 14px;

}

.action-btn-list:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.action-btn-list:hover i {
    color: white !important;
}

@media (max-width: 768px) {


    .action-buttons-list {
        margin-top: 12px;
        width: 100%;
    }

    .action-btn-list {
        flex: 1;
        justify-content: center;
    }
}

.section-title-single {

    margin-bottom: 0 !important;
    color: var(--text-color);
    text-align: right;
    font-family: Vazir;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
}

.no-bg {
    background-color: transparent !important;
    padding: 0 !important;
}

.full-height-slider {
    height: 100vh;
    min-height: 600px;
    position: relative;
}

.full-height-slider .carousel-inner {
    height: 100%;
}

.full-height-slider .carousel-item {
    height: 100%;
}

.full-height-item {
    display: flex;
    align-items: flex-end;
    padding-bottom: 50px;
}

.full-height-item .row {
    width: 100%;
}

.title-and-location{

    display: none !important;
}
@media (max-width: 767px) {
    .title-and-location{

        display: flex !important;
    }
    .product-slider-action{

        display: block !important;
    }
    .mt-48 {

        margin-top: 24px !important;
    }

    .mb-48 {

        margin-bottom: 24px !important;
    }

    .full-height-slider {
        height: auto;
        min-height: auto;
    }

    .full-height-item {
        padding-bottom: 20px;
    }

    .blogs-row {
        margin-top: 24px !important;
    }
}
.reviews-grid {
    margin-right: 0;
    margin-left: 0;
    width: 100%;
    overflow-x: hidden;
}

.reviews-grid>[class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
}

/* اطمینان از اینکه محتوای نظرات از عرض کانتینر بیرون نزند */
.review-item {
    height: 100%;
    padding: 16px;
    border-radius: 8px;
    border-radius: 8px;
    border: 0.6px solid var(--primary-color-secendery) !important;
    word-wrap: break-word;
    overflow: hidden;
}

/* تنظیم عرض کانتینر اصلی نظرات */
.reviews-container {
    width: 100%;
    overflow-x: hidden;
    /* جلوگیری از اسکرول افقی */
}

.reviews-list {
    width: 100%;
    overflow-x: hidden;
    /* جلوگیری از اسکرول افقی */
}

/* تنظیم عرض hidden-reviews */
.hidden-reviews {
    width: 100%;
    overflow-x: hidden;
    /* جلوگیری از اسکرول افقی */
}

/* تنظیم عرض محتوای نظرات */
.review-content {
    width: 100%;
    overflow-wrap: break-word;
    /* شکستن کلمات طولانی */
}

/* تنظیم عرض هدر نظرات */
.review-header {
    width: 100%;
    flex-wrap: wrap;
    /* اجازه شکستن به خط بعدی در صفحات کوچک */
}

/* تنظیم اندازه آواتار کاربر */
.reviewer-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    /* جلوگیری از تغییر اندازه */
}

/* تنظیم عرض اطلاعات کاربر */
.reviewer-info {
    flex-wrap: wrap;
    /* اجازه شکستن به خط بعدی در صفحات کوچک */
    max-width: 100%;
}

/* تنظیم عرض امتیازدهی */
.review-rating {
    flex-shrink: 0;
    /* جلوگیری از فشرده شدن */
}

/* تنظیمات ریسپانسیو برای موبایل */
@media (max-width: 576px) {
    .review-header {
        flex-direction: column;
    }

    .review-rating {
        align-items: flex-start;
        margin-top: 8px;
    }

    .reviewer-name {
        font-size: 14px;
        /* کاهش اندازه فونت در موبایل */
    }

    .review-content p {
        font-size: 13px;
        /* کاهش اندازه فونت در موبایل */
    }

  

    .home .filter-date {
        width: 60%;
    }

    .home .search-form button.btn-primary {

        height: 40px !important;
        width: 35%;
    }

}

/* استایل باکس مشخصات زمین */
.field-specs-box {
    background-color: var(--box-bg);
    border-radius: 8px;
    padding: 16px;
}



.specs-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;

}

.specs-item:last-child {
    border-bottom: none;
}

.specs-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
}

.specs-label span {

    color: var(--text-color);
}

.specs-label i {
    color: var(--primary-color);
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.specs-value {
    color: var(--text-color-secondary);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

/* استایل باکس اطلاعات سرویس */
.service-info-box {
    background-color: var(--body-bg);
    border-radius: 12px;
    padding: 16px;
}

.service-info-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
}

.last-service,
.next-service {
    display: flex;
    flex-direction: column;
}

.info-label {
    color: var(--text-color-secondary);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.jalali-date {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.info-value {
    color: var(--text-color);
    font-weight: 500;
    font-size: 16px;
}

.service-info-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 4px 0 12px 0;
}

.service-info-description {
    color: var(--text-color-secondary);
    font-size: 14px;
    line-height: 1.5;
}

.service-info-description p {
    margin: 0;
}

/* تنظیمات ریسپانسیو */
@media (max-width: 768px) {


    .next-service {
        align-items: flex-start;
    }
}

/* استایل برای اسکرول افقی در سایز موبایل */
@media (max-width: 768px) {

    /* استایل برای ردیف بالای فیلترها */
    .filter-top-row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding-bottom: 8px;
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color) transparent;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
    }

    /* پنهان کردن اسکرول‌بار عمودی در Chrome, Safari */
    .filter-top-row::-webkit-scrollbar {
        height: 4px;
    }

    .filter-top-row::-webkit-scrollbar-track {
        background: transparent;
    }

    .filter-top-row::-webkit-scrollbar-thumb {
        background-color: var(--primary-color);
        border-radius: 4px;
    }

    .filter-top-row .filter-main-button,
    .filter-top-row .filter-location,
    .filter-top-row .filter-price,
    .filter-top-row .filter-sport,
    .filter-top-row .filter-date {
        flex: 0 0 auto;
        margin-right: 8px;
        width: auto;
    }

    /* استایل برای کانتینر تگ‌های فیلتر */
    .filter-tags-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding-bottom: 8px;
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color) transparent;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
    }

    /* پنهان کردن اسکرول‌بار عمودی در Chrome, Safari */
    .filter-tags-container::-webkit-scrollbar {
        height: 4px;
    }

    .filter-tags-container::-webkit-scrollbar-track {
        background: transparent;
    }

    .filter-tags-container::-webkit-scrollbar-thumb {
        background-color: var(--primary-color);
        border-radius: 4px;
    }

    .filter-tags-container .filter-tag {
        flex: 0 0 auto;
        margin-right: 8px;
        width: auto;
    }

    /* تنظیم فاصله و عرض دکمه‌های فیلتر */
    .filter-item-btn {
        white-space: nowrap;
        padding: 8px 12px;
    }

    /* اطمینان از اینکه متن دکمه‌ها در یک خط نمایش داده می‌شود */
    .filter-item-btn span {
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* برای کانتینر اصلی فیلتر تا حاشیه‌ها درست باشند */
    .filter-container {
        padding: 8px;
        margin-bottom: 16px;
    }
}

/* استایل برای panel-side-bar */
.panel-side-bar {
    background-color: var(--box-bg);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}

.panel-side-bar-body {
    padding: 8px;
}

.panel-side-bar-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;

    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.panel-side-bar-item:last-child {
    margin-bottom: 0;
}

.panel-side-bar-item:hover {
    background-color: rgba(30, 230, 233, 0.1);
}

.panel-side-bar-item.active {
    background-color: var(--primary-color-transparent);
}

.panel-side-bar-item-right {
    display: flex;
    align-items: center;
}

.panel-side-bar-item-icon {
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 12px;
}

.badge-orange {
    color: var(--box-bg);
    text-align: right;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    background: var(--Zest-200);
    display: flex;
    width: 16px;
    height: 16px;
    padding: 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: var(--Zest-200);
}

.line {

    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    display: block;
    float: right;
    margin-top: 4px;
    margin-bottom: 4px;
}

.border-bottom-primary {
    border-bottom: 1px solid var(--border-color);
}

.panel-side-bar-item.active .panel-side-bar-item-icon {


    color: white;
}

.panel-side-bar-item-icon i {
    font-size: 16px;
    color: var(--primary-color);
}

.panel-side-bar-item.active .panel-side-bar-item-icon i {
    color: white;
}

.panel-side-bar-item-content {
    display: flex;
    flex-direction: column;
}

.panel-side-bar-item-title {
    color: var(--text-color);
    text-align: right;
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 150% */
}

.panel-side-bar-item-subtitle {
    color: var(--text-color-secondary);
    text-align: right;
    margin-top: 4px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.panel-side-bar-item-left {
    fill: var(--text-muted);
}

.panel-side-bar-item.active .panel-side-bar-item-left {
    color: var(--primary-color);
}

.panel-side-bar-item.active svg path {

    color: var(--primary-color-hover)
}

/* ریسپانسیو */
@media (max-width: 767px) {
    .panel-side-bar {
        margin-bottom: 0 !important;
    }
}

.mission .row>* {

    padding-left: 4px !important;
    padding-right: 4px !important;

}

.ads-card,
.mission-card {
    background-color: var(--body-bg);
    color: var(--text-color);
    border-radius: 8px;

    padding: 8px 8px 8px 12px;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mission-card h4 {
    color: var(--text-color);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.mission .row>* {
    margin-bottom: 8px;
}

.mission-card p {
    color: var(--text-color-secondary);
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    margin-bottom: 0;
}

.btn-start {
    background-color: var(--primary-color);
    height: 32px;
    border-radius: 8px;
    color: var(--box-bg);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    display: flex;
    height: 32px;
    padding: 4px 6px;
    align-items: center;
    gap: 4px
}

.text-orange-small {
    color: var(--Zest-200);
    text-align: right;

    font-family: Vazir;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    /* 133.333% */
    margin-right: 4px;
    margin-left: 4px;
}

.btn-start:hover {
    background-color: #0056b3;
}

.opacity-50 {
    opacity: 0.5;
}

.completed-badge {
    background-color: #28a745;
    color: white;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: inline-block;
    text-align: center;
    line-height: 15px;
    margin-right: 5px;
}



.panel-header h2 {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    color: var(--text-color);
}

.mission-info span {
    color: var(--text-color);
    text-align: right;
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
}

.mission-info .text-primary {
    color: var(--text-color-secondary) !important;
    text-align: right;
    font-family: Vazir;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 133.333% */
}

.mission-info .text-danger {
    color: var(--danger-color);
    text-align: right;

    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.progress-section .progress {
    background-color: var(--body-bg);
    border-radius: 8px;
    margin-top: 9px;
}

.progress-section .progress-bar {
    background-color: var(--primary-color) !important;
    border-radius: 8px;

}

.progress-section {

    margin-top: 16px;
    align-items: center;
}

.progress-section span {
    font-size: 12px;
    color: var(--text-muted);

}

.scrol-sm {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.nav-item {
    position: relative !important;
}

.reward-btn {
    display: flex;
    align-items: center;
    background-color: var(--primary-color-transparent);
    border-radius: 30px;
    padding: 2px 8px;
    margin-right: 8px;
    font-size: 12px;
    color: var(--text-color);
    margin-top: 0;
    padding-left: 0;
    border: none;
}

.reward-btn span {
    margin-left: 4px;
}

.reward-btn svg {
    margin-right: 2px;
}

/* یکسان‌سازی ارتفاع input و دکمه */
.equal-height .form-control,
.equal-height .btn,
.equal-height .input-group-text {
    height: 48px !important;
    line-height: normal;
    display: flex;
    align-items: center;
}

/* استایل برچسب input */
.social-account-box label {
    color: var(--text-color-secondary);
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
}

/* اطمینان از یکسان بودن ارتفاع در همه مرورگرها */
.social-account-box .input-group {
    flex-wrap: nowrap;
}

.social-account-box .btn-info {
    white-space: nowrap;
}

.all-mission {


    color: var(--primary-color);

    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 114.286% */
}

.all-mission a {
    color: var(--primary-color) !important;
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


.order-details .text-danger {

    color: var(--danger-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.mt-5 {
    margin-top: 5px;
}

.order-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.order-date,
.order-price {
    color: var(--text-color-secondary);
    font-size: 12px;
}

.order-status {
    display: flex;
    align-items: center;
}

.status {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 100px;
}

.status.delivered {
    background-color: rgba(30, 233, 33, 0.1);
    color: var(--Malachite-200);
}

.status.processing {
    background-color: rgba(236, 169, 76, 0.1);
    color: var(--Zest-200);
}

/* Responsive styles */
@media (max-width: 576px) {
    .order-meta {
        flex-direction: column;
        gap: 4px;
    }

    .order-image {
        width: 60px;
        height: 60px;
    }

    .slot-time {
        font-size: 9px !important;
        font-weight: 500;
    }

    .slot-price {
        font-size: 8px !important;
    }

    .calender-body {

        padding: 12px 4px;
    }
}

.panel-page .nav-tabs {
    border-bottom: 0 !important;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    height: 50px;

}

#sportTypeTabs ul li {

    position: relative;
}

.panel-page .tab-content {

    background-color: transparent !important;
    border-radius: 12px;
    padding: 0 !important;
    border-top-right-radius: 0;
}

.panel-card-container {
    background-color: var(--box-bg);
    padding: 16px;
    border-radius: 16px;
    border-top-right-radius: 0;
}

.panel-page #sportTypeTabs .nav-link {

    position: relative;
}

.panel-page form label {
    color: var(--text-color-secondary);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.panel-page .form-control,
.panel-page .form-select {
    background-color: var(--body-bg);
    border-radius: 6px;
    padding: 12px;
    border: 0.6px solid var(--border-color);
    background: var(--body-bg);
    height: 48px;
    color: var(--text-color);
}



.panel-page #sportTypeTabs .nav-link.active::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 20px;
    background-color: var(--box-bg);
    margin-bottom: -4px;
}

.panel-page #sportTypeTabs .nav-link.active svg path {
    stroke: var(--primary-color);
}


.panel-page #sportTypeTabs .nav-link.active::before {
    content: '';
    display: block;
    position: absolute;
    bottom: -7px;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--primary-color);
    margin-bottom: -4px;
    margin: auto;
    z-index: 9;
    width: 80%;
    border-radius: 4px;
}

#sportTypeTabs .nav-link.active::before {
    content: '';
    display: block;
    position: absolute;
    bottom: -7px;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--primary-color);
    margin-bottom: -4px;
    margin: auto;
    z-index: 9;
    width: 80%;
    border-radius: 4px;
}

/* استایل‌های بخش کامنت‌ها */
.comment-card {
    background-color: var(--box-bg);
    border-radius: 8px;
    padding: 16px;
    height: 100%;
    border: 1px solid var(--border-color);
}

.user-avatar img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}



/* استایل سفارشی برای form-switch */
.form-check-input:not(:checked) {
    background-color: var(--body-bg) !important;
    border-color: var(--body-bg) !important;
}

.form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* تغییر رنگ دکمه کناری در حالت‌های مختلف */
.form-switch .form-check-input:not(:checked)::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--box-bg);
    transform: translateX(-2px);
    transition: transform .25s;
}

/* تنظیم سایز و حاشیه */
.form-switch .form-check-input {
    height: 20px;
    width: 36px;
    cursor: pointer;
}

/* تغییر ترتیب نمایش label و input در form-switch */
.form-check.form-switch {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.form-check.form-switch .form-check-input {
    order: 2;
    margin-left: 0;
    margin-right: 0;
}

.form-check.form-switch .form-check-label {
    order: 1;
    margin-left: 8px;
    padding-right: 0;
    margin-bottom: 0;
}

.btn-info {

    width: auto;
    color: var(--box-bg);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.48px;
    margin-right: auto;

}

.panel-page textarea {

    height: auto !important;
}

/* استایل‌های بخش مدیریت کارت بانکی */
.card {
    background-color: var(--box-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 16px;
}

.card-header {
    background-color: rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
}

.card-body {
    padding: 16px;
}

.table {
    color: var(--text-color);
    margin-bottom: 0;
}

.table thead th {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color-secondary);
    font-size: 14px;
    font-weight: 500;
}

.table td,
.table th {
    border-top: 1px solid var(--border-color);
    padding: 12px 16px;
    vertical-align: middle;
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background-color: transparent;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--box-bg);
}

.btn-outline-danger {
    color: var(--danger-color);
    border-color: var(--danger-color);
    background-color: transparent;
}

.btn-outline-danger:hover {
    background-color: var(--danger-color);
    color: var(--box-bg);
}

.bank-card .card-item {

    background-color: var(--primary-color-transparent);
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 8px;
}

.text-success {

    color: var(--Malachite-200);
    text-align: right;
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;

}

.panel-page .subject {

    color: var(--text-color);
    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;

}

.panel-page .title {

    color: var(--text-color-secondary);
    text-align: right;
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.bank-card-top-info {

    align-items: baseline;
    justify-content: center;
}

.bank-card-top-info .dot {

    margin: 0;
}

/* استایل کامپوننت آپلود عکس */
.image-upload-container {
    position: relative;
}

.border-radius-right {
    border-top-right-radius: 16px;
}

.graid-span-2 {
    grid-column: span 2;
}

.profile-picture-container .image-preview-wrapper {
    width: 176px;
    height: 176px;
    max-width: 176px;
}

.profile-picture-container .image-edit-button {
    border-radius: 8px;
}

.image-upload-label {
    color: var(--text-color);
    font-weight: 500;
    font-size: 14px;
}

.image-upload-hint {
    color: var(--text-color-secondary);
    font-size: 12px;
}

.image-preview-wrapper {
    position: relative;
    max-width: 252px;
    height: 252px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px dashed var(--border-color);
}

.preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.image-edit-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.image-edit-overlay i {
    color: white;
    font-size: 24px;
}

.image-preview-wrapper:hover .image-edit-overlay {
    opacity: 1;
}

.image-preview-wrapper:hover .preview-image {
    filter: brightness(0.8);
}

.default-image-icon {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-color-secondary);
    background-color: var(--box-bg);
}

.image-edit-button {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    background-color: var(--body-bg);

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;

}

.image-edit-button i {
    color: var(--text-color);
    font-size: 16px;
}


.image-preview-wrapper:hover .image-edit-overlay {
    opacity: 0;

}


.progress-section {
    margin: 16px 0;
    width: 100%;
    position: relative;
    z-index: 10;
}

.progress-section .progress {
    flex: 1;
    margin: 0 10px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* اطمینان از نمایش در همه حالات */
.tab-pane .progress-section .progress,
.tab-content .progress-section .progress,
.collapse .progress-section .progress {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.form-check.form-switch {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 8px;
}

.form-switch {
    padding-right: 0 !important;
}

/* استایل‌های بخش شبکه‌های اجتماعی */
.social-account-box {
    display: flex;
    gap: 8px;
    background-color: var(--body-bg);
    border-radius: 8px;
    padding: 8px;
    transition: all 0.3s ease;
    justify-content: space-between;
}


.social-account-box:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(30, 230, 233, 0.2);
}

.social-account-title {
    min-width: 190px;
    flex-grow: 1;
}

.form-check.form-switch .form-check-label {
    color: var(--text-color);
    font-family: Vazir;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.social-account-title h5 {
    color: var(--text-color);
    text-align: center;
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 114.286% */
}

.checked-btn {
    height: 40px !important;
    margin-right: 8px !important;
    width: 72px;
    padding: 8px 16px;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-radius: 4px;
    background: transparent;
    border: none;
}

.social-account-box .text-muted {
    color: var(--text-color-secondary) !important;
    text-align: right;
    font-family: Vazir;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    justify-content: space-between
}

.social-account-box .reward-btn {

    background-color: transparent !important;
}

.social-account-box .reward-btn span {
    color: var(--Zest-200);
}

.social-account-title p {
    color: var(--text-color-secondary);
    font-size: 12px;
}

.input-group-text {
    background-color: var(--primary-color-transparent);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.input-group-text i {
    font-size: 16px;
}

.social-account-box .form-control {
    background-color: var(--body-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    height: 48px !important;
    width: 300px;
}

.social-account-box .form-control {
    padding: 4px 12px;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    align-self: stretch;
    height: 40px !important;
    border-radius: 6px;
}

.social-account-box .btn-info {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    height: 40px !important;
    margin-right: 8px !important;
    width: 72px;
    padding: 8px 16px;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-radius: 4px;
}

.social-account-box .btn-info:hover {
    background-color: var(--primary-color-hover);
    border-color: var(--primary-color-hover);
}

/* تنظیمات ریسپانسیو */
@media (max-width: 767.98px) {
    .social-account-title {
        margin-bottom: 16px;
    }

    .social-account-box .row {
        flex-direction: column;
    }
}

/* استایل برای قرار دادن برچسب در بالا سمت راست input */
.social-account-box .form-group {
    position: relative;
}

.social-account-box label {
    position: absolute;
    top: -6px;
    right: 10px;
    background-color: var(--body-bg);
    padding: 0 8px;
    font-size: 12px;
    color: var(--text-color-secondary);
    z-index: 900;
    border-radius: 4px;
}

#social-account {
    border-radius: 6px;
    width: 100%;
}

.orders-list .order-item .suggestion-item {
    display: flex;

    align-items: flex-start;
    gap: 12px;
    flex: 1 0 0;
    border-radius: 8px;
    border: 0.6px solid var(--primary-color-secendery);
    background: var(--box-bg);
    justify-content: space-between;
}

.orders-list .order-item .suggestion-item .suggestion-image-container {
    display: flex;
    width: 160px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    align-self: stretch;
}

.orders-list .order-item .suggestion-item .suggestion-image-container img {

    border-top-left-radius: 0 !important;
}

.orders-list .order-item .suggestion-item .suggestion-info {

    padding-right: 0;
}

.orders-list .order-item .suggestion-item .info-top {

    min-height: 20px;
}

.orders-list .order-item .suggestion-item .score-overlay-show {

    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.orders-list .order-item .book-now-btn-white {

    display: flex;
    height: 32px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.comment-item-waiting .suggestion-image-container img {

    width: 160px;
    height: 100%;
    margin-bottom: 0 !important;

}

.score-overlay-show-text {
    color: var(--text-color);
    text-align: center;
    font-family: Vazir;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    /* 133.333% */
}

.oreder-item .score-number {
    color: var(--text-color);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;

}

.oreder-item .title-overlay-mobile span {
    overflow: hidden;
    color: var(--Sonic-Silver-50, #FAFAFA);
    text-align: right;
    text-overflow: ellipsis;
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    /* 114.286% */
}

.show-mobile {

    display: none !important;
}

.orders-list .order-item .price-box .old-price,
.orders-list .order-item .price-box .new-price {
    overflow: hidden;
    color: var(--text-color);
    text-align: right;
    text-overflow: ellipsis;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    /* 133.333% */
}


.custome-border {
    border-radius: 8px;
    border: 0.6px solid var(--primary-color-secendery);
    background: var(--box-bg);
}

.custom-size img {

    width: 288px;
    height: 175px;
    object-fit: cover;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.padding-0-12 {

    padding: 12px 0px 12px 12px;

}

.flex-grow-1 {
    flex-grow: 1;
}

.order-item .product-title {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.order-item .suggestion-info {
    flex-grow: 1;

}

.vertical-tabs .nav-link {
    border: none;
    border-radius: 0;
    color: var(--text-color);
    text-align: right;
    transition: all 0.3s ease;
    padding: 0;
    margin-bottom: 16px !important;
    border-radius: 8px;
    border: 0.6px solid var(--disabale-primary-color);
    box-shadow: 0px 1px 4px 0px var(--primary-color-transparent);
    margin-left: 2px;
    width: 100% !important;
}

.vertical-tabs-container .row>* {

    padding-left: 8px !important;
    padding-right: 8px !important;
}


.vertical-tabs-content {
    min-height: 250px;
}

.vertical-tabs .nav-link.active {
    width: 108% !important;
    background: var(--primary-color-transparent);
    color: var(--text-color);
    border-left: none !important;
    position: relative;
    border-radius: 0 !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;

}


.fc-theme-standard td {

    width: 110% !important;
}


.shamsi-calendar {
    height: auto !important;
    direction: rtl;
}

.fc-header-toolbar {
    margin-bottom: 1.5em !important;
}

/* استایل‌های مربوط به نوار آمار */
.amar-section {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    background: var(--box-bg);
    margin-top: 24px;
}



.stats-bar {
    width: 100%;
}

.stats-bar .stat-item {
    display: flex;
    padding: 12px;
    justify-content: space-between;
    flex: 1 0 0;
    border-radius: 8px;
    border: 0.6px solid var(--disabale-primary-color);
    box-shadow: 0px 1px 4px 0px rgba(12, 96, 47, 0.15);

}

.stats-bar .row>* {
    padding-right: 8px !important;
}

.stats-bar .stat-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background-color: rgba(var(--text-color-rgb), 0.2);
}

.stats-bar .stat-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-grow: 1;
}

.stat-value-green {
    color: var(--Malachite-200);

    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 160% */
}

.stat-value-red {
    color: var(--danger-color);

    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 160% */
}

.stats-bar .stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 2px;
}

.stats-bar .stat-label {
    color: var(--text-color);
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;

}

.stats-bar .stat-count {

    color: var(--text-color);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    float: right;
    margin-top: 8px;

}




.fc {
    direction: rtl !important;
    text-align: right;
}

.fc-header-toolbar {
    margin-bottom: 1.5em !important;
}



.gym-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}







.fc {
    direction: rtl !important;
    text-align: right;
}

.fc-header-toolbar {
    margin-bottom: 1.5em !important;
}

.fc-day-today {
    background-color: rgba(30, 230, 233, 0.1) !important;
}

.gym-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.time-price-info {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}

.time-price-info .time {
    font-weight: bold;
}

.time-price-info .price {
    font-size: 12px;
}


.gym-logo {
    width: 40%;
    height: 64px;
    margin-left: 10px;
    object-fit: cover;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.gym-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

/* استایل نمایش زمان و قیمت */
.slot-time {
    font-weight: bold;
    font-size: 13px !important;
    text-align: center;
    line-height: 1.5;

}

.slot-price {
    color: var(--text-color-secondary);
    font-size: 11px !important;
    font-style: normal;
    font-weight: 500;
    line-height: 12px;
    text-align: center;
}

.slot-user,
.slot-permanent {
    font-size: 11px !important;
    font-style: normal;
    font-weight: 500;
    line-height: 12px;
    text-align: center;
}


/* رنگ‌های مختلف برای قیمت‌های متفاوت */
.fc-timegrid-event-harness {
    position: absolute !important;
    min-height: 40px !important;
    padding: 2px 1px;
}

/* تایم‌های گذشته */
.past-slot {
    pointer-events: none !important;
}

/* افزایش ارتفاع سلول‌های تقویم */
.fc-timegrid-slot {
    height: 50px !important;
}

/* بهبود نمایش رویدادها */
.fc-timegrid-event-harness {
    margin-top: 0 !important;
}

@media (max-width: 767.98px) {
    .slot-time {
        font-size: 9px !important;
        font-weight: 500;
    }


}



.selected-slots {

    color: var(--text-color);
    width: 100%;
}


.slot-bookedby {
    font-weight: bold;
}


.fc-timegrid-event-harness>.fc-timegrid-event {

    position: relative !important;
}

.fc-theme-standard .fc-scrollgrid,
.fc-theme-standard td,
.fc-theme-standard th {

    border: none !important;
}

.fc .fc-scrollgrid-section-sticky>* {

    background: transparent !important;
}

.slot-user {
    font-size: 12px !important;
    font-weight: bold !important;

    background-color: transparent !important;
    border-radius: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
}

.fc .fc-timegrid-col-frame {
    cursor: pointer !important;
}

.available-slot {

    background-color: transparent !important;
    border: none !important;

}

.fc-timegrid-event-harness-inset .fc-timegrid-event,
.fc-timegrid-event.fc-event-mirror,
.fc-timegrid-more-link {
    box-shadow: none !important;
    height: 34px;
}




.disabled-slot {

    border: 1px solid var(--disabale-primary-color) !important;
    cursor: not-allowed !important;
    background-color: transparent !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
}

.disabled-slot::after {
    content: '';
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 0 10px 10px 0 !important;
    border-color: transparent var(--disabale-primary-color) transparent transparent;
    z-index: 10 !important;
    pointer-events: none !important;
    display: block !important;
}

.disabled-slot-nont-border {

    border: none !important;
    cursor: not-allowed !important;
    background-color: transparent !important;
    color: var(--disabale-primary-color) !important;
}

.disabled-slot-nont-border .slot-time,
.disabled-slot-nont-border .slot-price,
.disabled-slot .slot-user,
.disabled-slot .slot-time,
.permanent-slot .slot-time,
.permanent-slot .slot-permanent {

    color: var(--disabale-primary-color) !important;
    font-weight: 700;
}

.disabled-slot .slot-price {
    position: absolute;
    left: -14px;
    top: 20%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: right center;
    white-space: nowrap;
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 2px;
    color: var(--disabale-primary-color) !important;
    font-weight: 700;
}

.text-green {

    color: var(--Malachite-200) !important;

}

.calender-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border: none !important;
}

.title-calender-text-title {
    color: var(--text-color);
    font-family: Vazir;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    /* 160% */
}
.title-calender-text  small{

    color: var(--text-color-secondary);
    text-align: right;
    font-family: Vazir;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.shamsi-calendar {

    border-radius: 8px 0px 8px 8px;
    border: 0.6px solid var(--disabale-primary-color);
    background: var(--primary-color-transparent);
    display: flex;
    padding: 12px;
}


.fc .fc-toolbar-title {
    color: var(--text-color);
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 24px !important;
}

.day-letter {
    color: var(--text-color-secondary);
    font-family: Vazir;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.day-number {
    color: var(--text-color-secondary);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */

}

.permanent-slot {

    border-radius: 4px;
    border: 0.6px solid var(--danger-color) !important;
    background-color: transparent !important;
    text-align: center !important;

}

.permanent-slot::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent var(--danger-color) transparent transparent;
    z-index: 10;
}

.reservation-slot {

    border-radius: 4px;
    border: 0.6px solid var(--Zest-200) !important;
    background-color: transparent !important;
    text-align: center !important;

}

.reservation-slot::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent var(--Zest-200) transparent transparent;
    z-index: 10;
}

.selected-slot {

    border-radius: 4px;
    border: 0.6px solid var(--primary-color) !important;
    background: var(--disabale-primary-color) !important;
}

.selected-slot::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;

    border-width: 0 10px 10px 0;
    border-color: transparent var(--primary-color) transparent transparent;
    z-index: 10;
}

.selected-slot .slot-price,
.selected-slot .slot-user,
.selected-slot .slot-time {

    color: var(--text-color) !important;
}

.fc .fc-col-header-cell-cushion {

    color: var(--text-color) !important;
}

.gym-title {

    color: var(--text-color);

    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;

}

.fc-timegrid-slot-label-frame {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.fc-timegrid-slot-label-cushion {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fc .fc-timegrid-slot-label-cushion {

    color: transparent !important;
}

.day-checkbox.form-check-input {
    margin-bottom: 4px !important;
}

.fc .fc-col-header-cell-cushion {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.calender-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-calender-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-guide {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.guide-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.guide-text {
    font-size: 14px;
}

.reservation-form-container {
    margin: 16px auto;
    border-radius: 8px;
}

/* استایل‌های سربرگ فرم رزرو */
.reservation-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-radius: 6px;

}

.reservation-type-info {
    display: flex;
    align-items: center;
}

.reservation-type-text {
    font-size: 14px;
    font-weight: 500;
}

.reservation-type-badge {
    display: flex;
    align-items: center;

    font-size: 12px;
}

.form-control:disabled {
    background-color: none !important;
}

.reservation-type-badge i {
    margin-left: 4px;
}

/* استایل‌های آیکون‌های font-awesome */
.fas.fa-user:before {
    content: "\f007";
}

.fas.fa-users:before {
    content: "\f500";
}


/* استایل‌های گرید برای فرم رزرو */
.reservation-grid-row {
    display: grid;
    gap: 4px;
    margin-bottom: 16px;
}

.reservation-grid-row.first-row-re {
    grid-template-columns: 2fr 1fr 1fr;
}

.reservation-grid-row .new-price {
    margin: 0
}

.reservation-grid-row.second-row-re {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.reservation-grid-row.list-row {
    grid-template-columns: 1fr;
}

.reservation-grid-row.form-row {
    grid-template-columns: 1fr 1fr 1fr;
}

.reservation-grid-cell {
    padding: 0;
    position: relative;
}

.reservation-grid-cell label {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    color: var(--text-color-secondary);
    position: absolute;
    right: 8px;
    top: -7px;
    z-index: 3;
}

.reservation-grid-cell input,
.reservation-grid-cell select {
    width: 100%;
    border-radius: 6px;

    background-color: var(--body-bg);
    border: none !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.reservation-form .form-control,
.reservation-form .form-select {
    border-radius: 6px;
    padding: 12px;
    background-color: var(--body-bg);
    border: none !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: var(--text-color);
}

.reservation-form .form-select {

    padding: 8px;
}

.date-time-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 8px;
    max-height: 150px;
    overflow-y: auto;

    border-radius: 4px;
    padding: 8px 12px;
    background-color: var(--body-bg);
}

.date-time-list li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--text-color);
    font-size: 14px;
    color: var(--text-color);

}

.date-time-list li:last-child {
    border-bottom: none;
}

.selected-date-times label {
    font-weight: 600;
    margin-bottom: 8px;
}

.ads-reservation-text {
    color: var(--primary-color);
    font-family: Vazir;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.ads-card-title {
    color: var(--text-color);
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    /* 114.286% */
}

.ads-price {
    overflow: hidden;
    color: var(--text-color);
    text-align: right;
    text-overflow: ellipsis;
    font-family: Vazir;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    margin-top: 15px;
}

.fc-timegrid-col-events .fc-timegrid-event-harness {

    border: 1px solid transparent;
}

.fc-timegrid-slot-label-cushion.fc-scrollgrid-shrink-cushion {

    height: 40px !important;
}

.date-time-list[aria-readonly="true"] {
    pointer-events: none;
    opacity: 0.6;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.fc .fc-timegrid-slot {

    height: 40px !important;
}

.fc-timegrid-event-harness.fc-timegrid-event-harness-inset {

    height: unset !important;
    min-height: unset !important;
    max-height: unset !important;
    transform: none !important;
}


.fc-timegrid-col-events {
    position: relative !important;
}

.fc-timegrid-col-events .fc-timegrid-event-harness {
    width: 100% !important;
    margin: 0 !important;
}

.mission-card {
    position: relative;
    overflow: hidden;
}

.mission-card .ribbon {

    display: block !important;
    top: 8px;
    color: #333;
    padding: 5px 33px;
    font-size: 11px;
}


.reservation-box {

    border-radius: 16px;
    color: var(--text-color);
    width: 100%;
    position: relative;
    overflow: hidden;
    border: 0.6px solid var(--border-color);
}


.reservation-image {
    width: 100%;

    object-fit: cover;
    border-radius: 12px;
}


.venue-title {
    font-size: 18px;
    font-weight: 600;

}


.price-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
}

.price {
    font-size: 16px;
    font-weight: 500;
}

.discount-badge {
    background-color: rgba(255, 82, 82, 0.2);
    color: #FF5252;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 14px;
}

/* استایل زمان و تاریخ */
.time-section {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 8px 0;
    font-size: 14px;
}

.time-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* استایل آدرس */
.address {
    font-size: 14px;
    margin: 8px 0;
    color: rgba(255, 255, 255, 0.8);
}

.nobat-top {

    display: flex;
    gap: 16;
    align-items: center;
}

.vertical-line {
    width: 0.6px;
    height: 16px;
    background: var(--primary-color-secendery)
}

.details .title-box {

    color: var(--text-color);

    font-style: normal;
    font-weight: 500;
    font-size: 16px;

    /* 150% */
}

.nobat-bottom {

    display: flex;
    gap: 8px;
}

/* استایل دکمه‌ها */
.button-group {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-map {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.btn-share {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.btn-cancel {
    color: #FF5252;
    background-color: transparent;
    border: 1px solid #FF5252;
    margin-top: 15px;
    width: 100%;
    justify-content: center;
}

/* مدیا کوئری برای دسکتاپ */
@media (min-width: 768px) {
    .reservation-box {
        display: flex;
        gap: 16px;
    }

    .reservation-image {
        width: 288px;
        border-radius: 0px 8px 8px 0px;
        flex-shrink: 0;
        max-height: 150px;
    }

    .content-section {
        flex-grow: 1;
    }

    .btn-cancel {
        width: auto;
        margin-top: 0;
    }
}

/* مدیا کوئری برای موبایل کوچک */
@media (max-width: 480px) {


    .venue-title {
        font-size: 16px;
    }

    .price {
        font-size: 14px;
    }

    .time-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .button-group {
        flex-wrap: wrap;
    }

    .btn {
        padding: 6px 12px;

    }
}


.tab-content {
    background-color: var(--box-bg);
    border-radius: 16px;

    color: var(--text-color);
}

/* هدر بالای صفحه */
.header-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 16px;
}

.action-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    background-color: var(--box-bg);
    color: var(--text-color);
    cursor: pointer;
    border: 1px solid var(--border-color);
}

.action-button.active {
    background-color: var(--primary-color-transparent);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* استایل جدول تراکنش‌ها */
.transaction-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.transaction-table th {
    text-align: right;
    padding: 12px;
    color: var(--text-color-secondary);
    font-weight: normal;
}

.transaction-table td {
    color: var(--text-color);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.transaction-table tr td:first-child {
    border-radius: 0 8px 8px 0;
}

.transaction-table tr td:last-child {
    border-radius: 8px 0 0 8px;
}

/* استایل مبالغ */
.amount {
    direction: ltr;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.amount.positive {
    color: var(--success-color);
}

.amount.negative {
    color: var(--danger-color);
}

/* استایل فرم شارژ */
.charge-form {
    max-width: 600px;
    margin: 0 auto;
}



.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-color-secondary);
}

.form-control {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    background-color: var(--box-bg-lighter);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.form-control:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* استایل دکمه‌ها */
.btn-primary {
    background-color: var(--primary-color);
    color: var(--body-bg);
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: var(--primary-color-hover);
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--primary-color-transparent);
    color: var(--primary-color);
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid var(--primary-color);
    cursor: pointer;
}

/* استایل پیجینیشن */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.pagination-item {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background-color: var(--box-bg-lighter);
    color: var(--text-color);
    cursor: pointer;
    border: 1px solid var(--border-color);
}

.pagination-item.active {
    background-color: var(--primary-color-transparent);
    border-color: var(--primary-color);
    color: var(--primary-color);
}


.search-box {
    position: relative;
}

.search-box input {
    padding-right: 40px;
    background-color: var(--box-bg-lighter);
    border: 1px solid var(--border-color);
}


.credit-info {

    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;

}

.credit-row {
    display: flex;
    justify-content: space-between;

    color: var(--text-color-secondary);
    flex-grow: 1;
    gap: 8px;
    position: relative;
}

.credit-row span {
    color: var(--text-color);
    text-align: right;

    font-size: 16px;
    font-style: normal;
    font-weight: 400;

}

.form-group {
    position: relative;
    margin-bottom: 0;
}

.form-group label {
    position: absolute;
    top: -8px;
    z-index: 3;
    right: 12px;
    color: var(--text-color-secondary);
    font-family: Vazir;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.warning-message {
    color: var(--Zest-200);
    text-align: right;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;

}

/* استایل‌های ریسپانسیو */
@media (max-width: 768px) {
    .header-actions {
        flex-wrap: wrap;
    }

    .transaction-table {
        display: block;
        overflow-x: auto;
    }

    .transaction-table th,
    .transaction-table td {
        white-space: nowrap;
        padding: 8px;
    }
}

@media (max-width: 480px) {

    .action-button {
        padding: 6px 12px;
        font-size: 14px;
    }

    .btn-primary,
    .btn-back {
        padding: 8px 16px;
        font-size: 14px;
    }
}

/* ----- تب لیست تراکنش‌ها ----- */
.transactions-list {
    width: 100%;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-direction: row-reverse;
    /* تغییر جهت برای قرارگیری صحیح */
}

.search-box {
    position: relative;
    max-width: 250px;
}

.search-box input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    background-color: var(--box-bg-lighter);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 14px;
}

.search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color-secondary);
}

.results-count,
.filter-clubs,
.filter-operators {
    padding: 8px;
    border-radius: 8px;
    color: var(--text-color);
    font-size: 14px;
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
}

.results-count span,
.filter-clubs span,
.filter-operators span {
    color: var(--text-color);
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    min-width: 50px;

}

.filter-clubs select,
.filter-operators select {

    width: 160px;
}

.search-box svg {
    position: absolute;
    left: 16px;
    top: 12px;
}

.results-count select {

    width: 80px;
}

.left-club-filter {
    display: flex;
    gap: 8px;
}

.transaction-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.transaction-table th {
    text-align: right;
    padding: 12px 16px;
    color: var(--text-color-secondary);
    font-weight: normal;
    font-size: 14px;
    border-bottom: 1px solid var(--border-color);
}

.transaction-table td {
    padding: 12px 16px;

}

/* رنگ یک در میان ردیف‌ها */
.transaction-table tbody tr:nth-child(odd) {
    background-color: transparent !important;
}

.transaction-table tbody tr:nth-child(even) {
    background-color: var(--box-bg-lighter);
}

.amount {

    display: flex;
    align-items: center;
    color: var(--text-color);
    font-size: 12px;
    gap: 8px;

}

.amount svg {
    vertical-align: middle;
}

.amount.positive {
    color: var(--success-color);
}



.amount.negative {
    color: var(--danger-color);
}


.transaction-date {
    white-space: nowrap;
    font-family: monospace;
}

/* استایل پیجینیشن */
.pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 16px;
}

.pagination-item {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: var(--box-bg);
    color: var(--text-color);
    cursor: pointer;
    font-size: 14px;
    border: 1px solid var(--border-color);
}

.pagination-item.active {
    background-color: var(--primary-color);
    color: var(--body-bg);
    border: none;
}

.price-unit-icon {
    margin-top: -7px;
}

/* استایل‌های ریسپانسیو */
@media (max-width: 768px) {
    .table-header {
        flex-direction: column-reverse;
        /* در موبایل حفظ ترتیب درست */
        gap: 10px;
        align-items: stretch;
    }

    .search-box {
        max-width: 100%;
    }

    .transaction-table {
        display: block;
        overflow-x: auto;
    }

    .transaction-table th,
    .transaction-table td {
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {


    .results-count {
        width: 100%;
        text-align: center;
    }
}

.panel-container {
    display: flex;
    gap: 20px;
}

/* === Sidebar (Tabs Navigation) === */
.panel-sidebar {
    flex: 0 0 250px;
    /* Fixed width for sidebar on desktop */
    background-color: var(--box-bg);
    border-radius: 12px;
    padding: 15px;
}

.panel-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.panel-nav-item {
    margin-bottom: 8px;
}

.panel-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    color: var(--text-color-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s, color 0.3s;
}

.panel-nav-link i {
    /* Assuming FontAwesome or similar */
    width: 18px;
    text-align: center;
    color: var(--primary-color);
}

.panel-nav-link:hover {
    background-color: var(--box-bg-lighter);
    color: var(--text-color);
}

.panel-nav-link.active {
    background-color: var(--primary-color-transparent);
    color: var(--primary-color);
    font-weight: 500;
}

.panel-nav-link.active i {
    color: var(--primary-color);
}

/* === Content Area === */
.panel-content {
    flex-grow: 1;
}

.panel-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.panel-card-title {
    color: var(--text-color);
    font-size: 16px;
    font-weight: 700;
}

.panel-card-title i {
    margin-left: 8px;
    color: var(--primary-color);
}

/* === Form Styles === */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Default to 1 column */
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
}



.form-control,
.form-select {
    background-color: var(--body-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--text-color);
    font-size: 14px;
}

textarea.form-control {
    min-height: 80px;
    resize: vertical;
}

/* === Image Upload Styles === */
.image-upload-area {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.image-preview-box {
    flex: 0 0 150px;
    height: 150px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--body-bg);
    position: relative;
    overflow: hidden;
}

.image-preview-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.image-preview-placeholder i {
    font-size: 40px;
    color: var(--text-color-secondary);
}

.image-thumbnails {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid var(--border-color);
}

.image-upload-info label {
    cursor: pointer;
}

.upload-btn {
    background-color: var(--primary-color);
    color: var(--body-bg);
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.upload-btn:hover {
    background-color: var(--primary-color-hover);
}

/* === Button Styles === */
.btn-save {
    background-color: var(--primary-color);
    color: var(--body-bg);
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

.btn-save:hover {
    background-color: var(--primary-color-hover);
}

.profile-card {
    background-color: var(--box-bg-lighter);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-color);
}

.profile-info h5 {
    color: var(--text-color);
    font-size: 15px;
    margin-bottom: 4px;
}

.profile-info p {
    color: var(--text-color-secondary);
    font-size: 13px;
    margin-bottom: 0;
}

/* === Responsive Styles === */
@media (min-width: 768px) {

    /* Desktop styles */
    .form-grid-2-col {
        grid-template-columns: 1fr 1fr;
        /* 2 columns on desktop */
    }

    .form-grid-3-col {
        grid-template-columns: 1fr 1fr 1fr;
        /* 3 columns on desktop */
    }
}

@media (max-width: 991px) {
    .panel-sidebar {
        flex: 0 0 200px;
        /* Slightly smaller sidebar */
    }

    .panel-nav-link {
        padding: 10px 12px;
        font-size: 13px;
    }
}


@media (max-width: 767px) {

    /* Mobile styles */
    .panel-container {
        flex-direction: column;
    }

    .panel-sidebar {
        flex: 0 0 auto;
        /* Reset flex basis */
        width: 100%;
        display: flex;
        /* Horizontal scroll for tabs on mobile */
        overflow-x: auto;
        padding: 10px;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    .panel-sidebar::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari/Opera */
    }

    .panel-nav {
        display: flex;
        gap: 10px;
    }

    .panel-nav-item {
        margin-bottom: 0;
        flex-shrink: 0;
        /* Prevent tabs from shrinking */
    }

    .panel-nav-link {
        padding: 8px 12px;
        font-size: 13px;
        white-space: nowrap;
    }

    .panel-nav-link i {
        margin-left: 6px;
    }




    .panel-card-title {
        font-size: 15px;
    }

    .image-upload-area {
        flex-direction: column;
    }

    .image-preview-box {
        width: 100%;
        max-width: 200px;
        /* Limit preview size on mobile */
        height: 200px;
        align-self: center;
    }

    .image-upload-info {
        width: 100%;
    }

    .btn-save {
        width: 100%;
        text-align: center;
    }

    .profile-card {
        flex-direction: column;
        text-align: center;
    }
}

/* استایل‌های کلی با استفاده از متغیرهای رنگی شما */
.profile-section {
    width: 100%;

    display: flex;
    /* برای چیدمان در موبایل */
    flex-direction: column;
    justify-content: space-between;
}

/* بخش تصویر پروفایل */
.profile-picture-container {
    text-align: center;
    margin-bottom: 25px;
    width: 100%;
    /* عرض کامل در موبایل */
    order: 1;
    /* ترتیب اول در موبایل */
}

.picture-title {
    color: var(--text-color);
    /* رنگ متن اصلی */
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
}

.picture-subtitle {
    color: var(--text-color-secondary);
    /* رنگ متن ثانویه */
    font-size: 13px;
    margin-bottom: 15px;
}

.profile-image-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    /* حاشیه با رنگ مرز */
}

.profile-picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edit-picture-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    /* در موبایل سمت راست */
    left: auto;
    /* اطمینان از عدم تاثیر left */
    background-color: var(--box-bg);
    /* رنگ پس‌زمینه باکس */
    color: var(--text-color);
    /* رنگ متن اصلی */
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.edit-picture-btn i {
    font-size: 16px;
}

/* بخش فیلدهای اطلاعات */
.profile-info-container {
    width: 100%;
    /* عرض کامل در موبایل */
    order: 2;
    /* ترتیب دوم در موبایل */
}

.profile-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* پیش‌فرض تک ستونه برای موبایل */
    gap: 12px;
    flex-grow: 1;
}

.info-field {
    position: relative;
    background-color: var(--body-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    height: 46px;
    display: flex;
    align-items: center;
    padding: 12px;
}

.field-label {
    position: absolute;
    top: -10px;
    right: 12px;
    padding: 0 6px;
    font-size: 12px;
    color: var(--text-color-secondary);
    z-index: 1;
}

.field-value {
    color: var(--text-color);
    font-size: 15px;
    font-weight: 500;
    text-align: right;
    direction: rtl;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.status-verified {
    color: var(--Malachite-200) !important;
    text-align: right;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
    letter-spacing: -0.48px;
}

.status-verified span {
    flex-grow: 1;
    /* متن فضای باقی‌مانده را بگیرد */
    text-align: right;
    /* متن راست‌چین */
}

.status-verified i {
    font-size: 18px;
    flex-shrink: 0;
    /* آیکون کوچک نشود */
}

.status-un-verified {
    color: var(--Sonic-Silver-500);
    text-align: right;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
    letter-spacing: -0.48px;
}

.status-un-verified span {
    flex-grow: 1;
    /* متن فضای باقی‌مانده را بگیرد */
    text-align: right;
    /* متن راست‌چین */
}

.status-un-verified i {
    font-size: 18px;
    flex-shrink: 0;
    /* آیکون کوچک نشود */
}

.gender-field .field-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

}

.gender-field .form-control {
    width: 100%;
    border: none;
    height: 44px;
}

.gender-field i {
    color: var(--text-color-secondary);
    /* رنگ متن ثانویه */
    flex-shrink: 0;
}

.gender-field .form-group {
    width: 100%;
}

/* خط جداکننده و دکمه (در صورت وجود، می‌توانید استایل دهید) */
.profile-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 25px 0;
    order: 3;
    /* ترتیب سوم در موبایل */
}

.update-button-container {
    order: 4;
    /* ترتیب چهارم در موبایل */
    width: 100%;
    /* عرض کامل در موبایل */
}

.btn-update {
    background-color: var(--primary-color);
    color: var(--body-bg);
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    transition: background-color 0.3s;
}

.btn-update:hover {
    background-color: var(--primary-color-hover);
}

.btn-update i {
    font-size: 16px;
}


@media (min-width: 768px) {
    .profile-section {
        flex-direction: row-reverse;
        gap: 16px;

        align-items: flex-start;

    }

    .profile-picture-container {
        flex: 0 0 180px;
        /* عرض ثابت برای بخش تصویر */
        order: 2;
        /* ترتیب دوم در دسکتاپ */
        margin-bottom: 0;
        /* حذف مارجین پایین در دسکتاپ */
    }

    .profile-image-wrapper {
        width: 100%;
        /* عرض کانتینر والد */
        height: auto;
        /* ارتفاع خودکار */
        padding-top: 100%;
        /* نسبت ۱:۱ */
        position: relative;
        border-radius: 16px;
    }

    .profile-image-wrapper .profile-picture {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .edit-picture-btn {
        bottom: 10px;
        right: 10px;
    }

    .profile-info-container {
        flex-grow: 1;
        /* بخش اطلاعات فضای باقی‌مانده را بگیرد */
        order: 1;
        /* ترتیب اول در دسکتاپ */
    }

    .profile-info-grid {
        grid-template-columns: 1fr 1fr;
        /* دو ستونه در دسکتاپ */
        gap: 16px;
        /* فاصله بیشتر در دسکتاپ */
    }

    /* فیلد جنسیت در دسکتاپ تمام عرض */
    .gender-field {
        grid-column: 1 / -1;
    }

    /* جداکننده و دکمه زیر اطلاعات قرار گیرند */
    .profile-divider,
    .update-button-container {
        grid-column: 1 / -1;
        /* تمام عرض گرید اطلاعات */
        order: 3;
        /* بعد از گرید اطلاعات */
        width: auto;
        /* ریست عرض */
    }

    .update-button-container {
        margin-top: 10px;
        /* فاصله دکمه از جداکننده */
        order: 4;
    }

    .btn-update {
        width: auto;
        /* عرض خودکار برای دکمه در دسکتاپ */
        padding: 10px 25px;
        margin-right: auto;
        /* دکمه در سمت راست قرار گیرد */
    }
}

.operator-profile-img {
    width: 171px;
    height: 162px;
}

.profile-card {
    background-color: #0f4b52;
    color: white;
    border-radius: 8px;
    padding: 16px;
    max-width: 400px;
    margin: 16px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.profile-image {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
    margin-bottom: 16px;
}

.row {
    margin-bottom: 8px;
}

.label {
    font-weight: bold;
}

.green {
    color: #00e676;
}

@media(min-width: 768px) {
    .profile-card {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .profile-image {
        width: 150px;
        height: 150px;
        margin-bottom: 0;
    }
}

.operator-profile {


    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-radius: 8px;
    background: var(--primary-color-transparent);

}

.operator-profile-img {
    width: 171px;
    height: 162px;

}

.operator-profile-info .subject {
    color: var(--text-color);
    text-align: right;

    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    /* 114.286% */
}

.operator-profile-info .title {
    color: var(--text-color-secondary);
    text-align: right;

    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 114.286% */
}


.operator-profile-img img {
    border-radius: 8px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.operator-profile-info {
    flex-grow: 1;
    display: flex;
    padding: 16px 0px 16px 16px;
    flex-direction: column;
    justify-content: space-between;

    flex: 1 0 0;
    align-self: stretch;
    flex-grow: 1;
}

.operator-profile-info .actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}

.operator-profile-info .edit,
.operator-profile-info .delete {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}



.operator-profile-info .delete {
    color: var(--danger-color);
}

.operator-profile-info .edit {
    color: var(--text-color);
}

.operator-profile-info .profile-info {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.account-form-container {
    display: flex;
    justify-content: space-between;
    gap: 8px;

}

.account-form-container .form-group {
    width: 70%;
}

.account-form-container #icon {
    width: 50px;
    color: var(--text-color);
}

.facility-text {
    color: var(--text-color-secondary);
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

#addButton {
    display: flex;
    padding: 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    border: 1px solid var(--primary-color-secendery);
    background: transparent;
    color: var(--text-color);
    flex-grow: 1;
    background: transparent;
    width: 134px;
}

@media (max-width:1400px) {

    .operator-profile-info .actions,
    .operator-profile-info .profile-info {
        gap: 8px;
    }
}

.padding-0-a11 {
    padding: 0 !important;
}

.Task-card {
    position: relative;
    background-color: var(--body-bg);
    border-radius: 8px;
    padding: 8px;
}

.task-text {
    color: var(--text-color);
    text-align: center;

    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 114.286% */
}

.task-notice {
    color: var(--text-color-secondary);
    text-align: right;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 160% */
    margin-right: 8px;
}

.finance-table {
    display: flex;
    padding: 8px 0px 8px 8px;
    justify-content: space-between;
    row-gap: 6px;
    align-self: stretch;
    flex-wrap: wrap;
    border-radius: 8px;
    border: 0.6px solid var(--primary-color-secendery);
}

.finance-content {
    display: flex;

    padding-right: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
}

.first-row {

    display: flex;
    width: 32px;
    height: 64px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 32px;
    max-width: 40px;
}

.paid-btn {
    display: flex;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 4px;
    background: rgba(13, 144, 16, 0.50);
    color: var(--Malachite-200);

    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    min-width: 115px;
    max-height: 46px;
}

.returned-btn {
    display: flex;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 4px;
    background: #483F4E;
    color: var(--danger-color);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    min-width: 115px;
}

.awaiting-btn {
    display: flex;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 4px;
    background: rgba(223, 138, 38, 0.50);
    color: var(--Zest-200, );

    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    min-width: 115px;
    max-height: 46px;
}

.credit-row .price-unit {

    position: absolute;
    left: 16px;
    top: 8px;
}

.comment {

    padding: 12px;
    border-radius: 8px;
    border: 0.6px solid var(--primary-color-secendery);
    background: var(--box-bg);
}

.comment.no-border {
    border: none;
    padding-right: 0;
    flex-grow: 1;
}

.comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    margin-top: 12px;
}

.counter-challenge span {
    color: var(--text-color-secondary);
    text-align: right;

    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 160% */
}

.comment-status {

    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;

}

.comment-status-un-verified {
    color: var(--Zest-200) !important;
}

.comment-status-verified {
    color: var(--Malachite-200) !important;
}

.comment-club-title {
    color: var(--primary-color);
    text-align: right;
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    /* 114.286% */
}

.comment .user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-left: 10px;
}

.delete-text {
    color: var(--danger-color);
    text-align: right;
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.comment-image-container {

    width: 171px !important;
}

.comment-image-container img {
    width: 171px;
    height: 100%;
    object-fit: cover;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.comment-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: 0.6px solid var(--primary-color-secendery);
    border-radius: 8px;
}

.comment .user-info {
    flex-grow: 1;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 4px;
}

.comment .username {
    color: var(--text-color-secondary);
    text-align: right;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 133.333% */
}

.comment .timestamp {
    color: var(--text-color);
    text-align: right;

    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 150% */
}

.comment .rating {
    display: flex;
    align-items: center;
}

.comment-top {

    display: flex;
    justify-content: space-between;
}


.comment .star-title {
    color: var(--text-color-secondary);
    text-align: right;

    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 133.333% */
}

.comment-date {
    color: var(--text-color-secondary);
    text-align: right;

    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 133.333% */
}

.comment-body p {
    color: var(--Sonic-Silver-200, #E5E5E5);
    text-align: right;
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 0;
}

.comment-actions {
    text-align: left;
}

.comment .text-answer {

    color: var(--Zest-200);
    text-align: right;

    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.comment .text-delete {

    color: var(--danger-color);
    text-align: right;

    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.reply-text {
    color: var(--text-color);
    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.me-answer {
    display: flex;
    padding: 12px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    background: var(--primary-color-transparent);
    margin-bottom: 12px;
}

.me-answer p,
.admin-answer p {
    color: var(--text-color-secondary);
    text-align: right;

    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 171.429% */
}

.admin-answer {
    display: flex;

    padding: 12px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    border-radius: 8px;
    background: var(--primary-color-secendery);
}

.comment .subject {

    margin-top: -11px;
}

.slider-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.swiper {
    width: 100%;
}

.mainSwiper {
    height: 252px;

    margin: 0 auto 10px auto;
}

.mainSwiper .swiper-slide {
    box-sizing: border-box;
    position: relative;
    height: 252px;

}

.mainSwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.thumbnailSwiper {
    height: 80px;
    max-width: 254px;
    margin: 0 auto;
}

.thumbnailSwiper .swiper-slide {
    width: 48px !important;
    height: 48px;

    align-items: center;
    aspect-ratio: 1 / 1;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.3s;
    margin-top: 10px;
}

.thumbnailSwiper .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid #1EE6E9;
    border-radius: 6px;
}

.thumbnailSwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.swiper-button-next,
.swiper-button-prev {
    color: #1EE6E9;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 20px;
    font-weight: bold;
}

.section-header {
    color: var(--text-color);
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
    text-align: right;
}

.info-row {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
    align-items: center;
}

.info-row-title {
    color: var(--text-color);
    font-weight: bold;
    font-size: 16px;
    flex: 1;
    text-align: right;
}

.info-row-content {
    flex: 2;
    text-align: right;
}

.category-dropdown {
    background-color: var(--primary-color-transparent);
    border: none;
    border-radius: 8px;
    color: var(--text-color);
    padding: 10px 15px;
    position: relative;
    cursor: pointer;
    width: 100%;
    text-align: right;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-dropdown .dropdown-icon {
    transition: transform 0.3s;
}

.category-dropdown.open .dropdown-icon {
    transform: rotate(180deg);
}

.status-badge {
    background-color: transparent;
    border-radius: 8px;
    padding: 8px 16px;
    display: inline-block;
    text-align: center;
    font-size: 14px;
}

.status-badge.pending {
    color: var(--text-color-secondary);
}

.coach-count {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 16px;
}

.coach-count .count {
    font-weight: bold;
    margin-left: 5px;
}

.dropdown-arrow {
    margin-right: 8px;
}

.club-description {

    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color-secondary);

}

.special-conditions,
.club-rules {
    margin-bottom: 24px;
}

.add-item-btn {
    background-color: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    font-size: 14px;
}

.add-item-btn i {
    margin-left: 8px;
}

.condition-item,
.rule-item {
    background-color: var(--box-bg);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.action-buttons {
    display: flex;
    gap: 10px;
}

.action-btn {
    background-color: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 5px;
}

.delete-btn {
    color: var(--danger-color);
}

.edit-btn {
    color: var(--primary-color);
}

.condition-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    margin-left: 12px;
}

.condition-text {
    flex: 1;
}

.facility-section {
    margin-bottom: 24px;
}

.facilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.facility-item {
    display: flex;
    align-items: center;

    gap: 8px;
}

.facility-icon {
    margin-left: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.facility-checkbox {
    width: 20px;
    height: 20px;
    margin-right: 12px;
}

.update-btn {
    background-color: var(--primary-color);
    color: #333;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.update-btn:hover {
    background-color: var(--primary-color-hover);
}

.cart-numbers {

    display: flex;
    flex-direction: column;
    gap: 16px;
}


.form-section-container {
    padding: 20px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 15px;

}

.form-group {
    flex: 1 1 calc(50% - 10px);

    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: 12px;
    color: var(--text-color-secondary);
    margin-bottom: 2px;

}

.form-control {
    background-color: var(--form-bg-color);

    border: 1px solid var(--border-color);

    color: var(--text-color);

    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.form-control:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 30, 230, 233), 0.2);
}


.custom-select-wrapper {
    position: relative;
}

.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-left: 30px;
    /* فضا برای آیکون */
    cursor: pointer;
}

.select-arrow {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--text-color-secondary);
    pointer-events: none;
}

/* استایل Input Group برای قیمت */
.input-group {
    display: flex;
    align-items: stretch;
    /* کشیدن آیتم‌ها به ارتفاع کامل */
    background-color: var(--form-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.3s;
}

/* تغییر بوردر کل گروه هنگام فوکوس روی input یا select */
.input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 30, 230, 233), 0.2);
}


.price-input {
    border: none;
    flex-grow: 1;
    background: none;
    padding: 10px 12px;
    /* پدینگ مشابه سایر فیلدها */
    color: var(--text-color);
    font-size: 14px;
}

.price-input:focus {
    outline: none;
    box-shadow: none;
}

.input-group-text {
    background: none;
    border: none;
    color: var(--text-color-secondary);
    padding: 0 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
    /* وسط‌چین عمودی */
    border-left: 1px solid var(--border-color);
    /* خط جداکننده واحد */
}

.price-dropdown {
    border-left: 1px solid var(--border-color);
    /* خط جداکننده select */
    flex-shrink: 0;
    position: relative;
    /* برای select-arrow */
}

.small-select {
    padding: 10px 8px 10px 25px;
    border: none;
    background: none;
    width: auto;
    min-width: 50px;
    color: var(--text-color);
    /* رنگ متن select */
    cursor: pointer;
}

.small-select+.select-arrow {
    left: 8px;
    border-top-color: var(--text-color-secondary);

}


.form-group.button-group {
    justify-content: flex-end;
    align-items: flex-end;

}

.add-club-btn {
    display: inline-flex;

    padding: 8px 12px;
    justify-content: space-between;

    flex: 1 0 0;
    align-self: stretch;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 1px 15px;
    /* پدینگ مشابه فیلدها */
    height: 48px;
    /* ارتفاع ثابت مشابه فیلدها (اگر لازم است) */
    box-sizing: border-box;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.add-club-btn:hover {
    background-color: var(--border-color);
    /* کمی تغییر رنگ در هاور */
    border-color: var(--primary-color);

}

.add-club-btn svg {
    color: var(--text-color-secondary);
}

.add-club-btn .btn-icon-right {
    margin-right: 5px;
}


@media (max-width: 768px) {
    .form-group {
        flex-basis: 100%;

    }

    .form-row {
        gap: 15px;
        /* فاصله کمتر در موبایل */
    }

    .form-group.button-group {
        align-items: stretch;
        /* دکمه تمام عرض شود */
    }

    .add-club-btn {
        width: 100%;
        /* دکمه تمام عرض */
    }
}

.venue-list-section {
    margin-top: 30px;
    /* فاصله از فرم بالایی */
}

.list-title {
    /* استایل عنوان اختیاری لیست */
    color: var(--text-color);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
    padding-right: 10px;
    /* کمی فاصله از لبه */
}

.venue-list {
    display: flex;
    gap: 15px;
    /* فاصله بین کارت‌ها */
    overflow-x: auto;
    /* فعال کردن اسکرول افقی در صورت نیاز */
    padding: 10px 5px 20px 5px;
    /* پدینگ برای اسکرول و زیبایی */
    /* مخفی کردن اسکرول بار پیش‌فرض (اختیاری) */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.venue-list::-webkit-scrollbar {
    /* Chrome, Safari, Opera */
    display: none;
}


.venue-card {
    display: flex;
    background-color: var(--box-bg, var(--form-bg-color));

    border-radius: 8px;
    overflow: hidden;

    width: 300px;

    flex-shrink: 0;

    border: 1px solid var(--border-color);

    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}


.select2-container--default .select2-selection--single {
    background-color: var(--body-bg) !important;
    color: var(--text-color-secondary) !important;
    border: none !important;
    height: 48px !important;
    padding: 8px !important;
}

.select2-results__option {
    color: #333;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--primary-color);
}



.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--danger-color) !important;
}

.venue-image-container {
    position: relative;
    width: 100px;

    height: 100px;

    flex-shrink: 0;
}

.venue-image-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.score-badge {
    position: absolute;
    top: 8px;
    right: 8px;

    background-color: rgba(10, 25, 35, 0.75);

    color: #ffffff;

    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.score-badge .star-icon {
    color: var(--primary-color, #1EE6E9);

    width: 10px;
    height: 10px;
    margin-bottom: 1px;

}

.venue-content {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    justify-content: space-between;
}

.venue-title {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.venue-address {
    color: var(--text-color-secondary);
    font-size: 11px;
    line-height: 1.5;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;
    overflow: hidden;
}

.venue-favorite {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    flex-shrink: 0;
}

.venue-favorite svg {
    color: var(--primary-color, #1EE6E9);
    cursor: pointer;
    transition: transform 0.2s;
}

.venue-favorite svg:hover {
    transform: scale(1.1);
}

.unit-svg svg {
    position: absolute;
    left: 29px;
    top: 34%;

}

.date-svg svg {
    position: absolute;
    left: 9px;
    top: 23%;

}


.unit-svg svg path {
    fill: var(--text-color-secondary);
}

.panel-card-container .club-card {

    padding: 0;
}

.club-card {
    background: var(--primary-color-transparent);
    color: var(--text-color);
    border-radius: 8px;

    overflow: hidden;
    font-family: inherit;
}

.club-card-main {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    padding: 0;
}

.club-card-image-side {
    width: 171px;
    min-width: 171px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
}

.club-card-image {
    width: 171px;
    height: 160px;
    object-fit: cover;
    margin: 0;
    display: block;
}

.club-card-info-side {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.club-card-actions {
    display: flex;
    align-items: center;
}

.club-card-actions button {
    background: none;
    border: none;
    color: var(--text-color-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s;
}

.club-card-actions .delete-btn {
    color: var(--danger-color);
}

.club-card-actions button:hover {
    color: var(--primary-color);
}

.club-card-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.club-card-title b {
    font-weight: 700;
}

.club-card-info {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
    color: var(--text-color-secondary);
}

.club-card-info b {
    color: var(--text-color);
    font-weight: 700;
}

.details-toggle {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    cursor: pointer;
    padding: 8px 0 0 0;
    width: 100%;
    text-align: right;
    transition: color 0.2s;
    text-align: left;
}

.details-toggle span {
    font-size: 13px;
}

.club-card-details {
    display: none;
    background: var(--primary-color-transparent);
    color: var(--text-color);

    animation: fadeIn 0.3s;
}

.club-card-details.active {
    display: block;
}

.club-card-details-inner {
    display: flex;
    flex-direction: row-reverse;
    gap: 8px;
    padding: 16px;
}

.club-card-details .club-card-image-side {
    width: 171px;
    min-width: 171px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.club-card-details .club-card-image {
    width: 171px;
    height: 160px;
    object-fit: cover;

    margin: 0;
    display: block;
}

.image-add-button {
    position: absolute;
    bottom: 35px !important;
    right: 19px !important;
    text-align: center;
    border-radius: 8px;
    border: 1px solid var(--primary-color-secendery);
    display: flex;
    padding: 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
}


.colum-reverse-sm .image-preview-wrapper {
    border-radius: 16px;
    border: 0.6px solid var(--primary-color-secendery) !important;
    background: var(--box-bg);
}

.club-features {
    margin: 8px 0 0 0;
    padding: 0;
    list-style: none;
    color: var(--text-color-secondary);
    font-size: 14px;
}

.club-features li {
    margin-bottom: 4px;
    position: relative;
    text-align: right;
    list-style: none;
}



.club-card-details-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
    border-top: 0.6px solid var(--primary-color-secendery);
    margin-top: -46px;
}

.club-description,
.club-conditions,
.club-rules,
.club-gallery {
    margin-bottom: 8px;
}

.club-description b,
.club-conditions b,
.club-rules b,
.club-gallery b {
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

.club-description p {
    color: var(--text-color-secondary);
    text-align: right;
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
}

.club-conditions ul,
.club-rules ul {
    margin: 0;
    padding-right: 0;
    color: var(--text-color-secondary);
    font-size: 12px;
    font-weight: 400;
    list-style: none;
    text-align: right;
}

.club-gallery .gallery-list {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.club-gallery .gallery-list img {
    width: 80px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    background: #222;
}

.club-description h4,
.club-conditions h4,
.club-rules h4,
.club-gallery h4,
.club-card-image-side h4 {
    color: var(--text-color);
    text-align: right;
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;

}


/* Swiper Gallery Navigation and Action Buttons */
.swipper-button-group {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.swipper-button-group .swiper-button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.swipper-button-group .swiper-button:hover {
    background-color: #fff;
    transform: scale(1.05);
}

.swipper-button-group .swiper-button i {
    color: var(--primary-color);
    font-size: 16px;
}

.product-slider-action {
    position: absolute;

    left: 10px;

    display: flex;
    justify-content: space-between;
    z-index: 10;
}

.product-slider-action-item-left,
.product-slider-action-item-right {
    display: flex;
    gap: 8px;
}

.product-slider-action a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 6px;
    background-color: var(--body-bg);
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.product-slider-action a i {
    margin-right: 6px;
}

.product-slider-action a:hover {
    background-color: #fff;
    transform: translateY(-2px);
}



.product-slider-action a.call:hover {
    background-color: var(--primary-color-dark, #0a3a42);
}

@media (max-width: 576px) {
    .product-slider-action {
    
        gap: 8px;
        ;
    }

    .product-slider-action-item-left,
    .product-slider-action-item-right {
        justify-content: center;
    }

    .product-slider-action a {
        padding: 6px 12px;
        font-size: 12px;
    }

    .swipper-button-group {
        top: 5px;
        right: 5px;
        gap: 5px;
    }

    .swipper-button-group .swiper-button {
        width: 30px;
        height: 30px;
    }
}

.colum-reverse-sm .image-preview-wrapper {
    width: 100% !important;
    max-width: 900px;

}

.swiper-rtl .swiper-button-next {
    left: 0 !important;
    border-radius: 8px;
    border: 0.6px solid var(--primary-color-secendery);
    background: var(--primary-color-transparent);
}

.swiper-rtl .swiper-button-prev {
    right: 0 !important;
    border-radius: 8px;
    border: 0.6px solid var(--primary-color-secendery);
    background: var(--primary-color-transparent);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--danger-color) !important;
}

.search-input {

    background: transparent;
    border: none;
}

.skeleton-container {
    padding: 20px 0;
}

.skeleton-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: 280px;
}

.skeleton-image {
    width: 100%;
    height: 160px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8px;
    margin-bottom: 12px;
}

.skeleton-content {
    padding: 8px 0;
}

.skeleton-title {
    width: 80%;
    height: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 8px;
}

.skeleton-text {
    width: 100%;
    height: 14px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 6px;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-price {
    width: 40%;
    height: 18px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
    margin-top: 12px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@media (max-width: 768px) {
    .skeleton-card {
        height: 250px;
    }

    .skeleton-image {
        height: 140px;
    }
}

/* Default Image Placeholder */
.default-image-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
    border: 2px dashed #d1d5db;
    transition: all 0.3s ease;
    position: relative;
}

.default-image-placeholder:hover {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    border-color: #9ca3af;
}

.default-image-placeholder svg {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.default-image-placeholder:hover svg {
    opacity: 1;
}

.default-image-placeholder span {
    margin-top: 4px;
    text-align: center;
    line-height: 1.4;
    font-family: 'IRANSans', sans-serif;
}

@media (max-width: 768px) {
    .default-image-placeholder {
        height: 160px;
        font-size: 12px;
    }

    .default-image-placeholder svg {
        width: 36px;
        height: 36px;
    }
}

.slot-holiday {
    margin-top: -10px;
    margin-right: 20px;
}

.sort-btn {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: inherit;
    font-weight: inherit;
    padding: 0;
    width: 100%;
    text-align: right;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sort-btn:hover {
    color: var(--primary-color);
}

.sort-btn:focus {
    outline: none;
}



.default-image-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.default-image-icon svg {
    width: 80px;
    height: 80px;
}



.image-upload-hint {
    font-size: 12px;
    color: var(--text-color-secondary);
}

.gallery-grid {
    margin-top: 20px;
}

.gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.gallery-item.featured {
    border: 3px solid var(--Malachite-200);
}

.gallery-item img {
    height: 150px;
    object-fit: cover;
    width: 100%;
    transition: transform 0.3s;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 5px;
    opacity: 0.4;
    transition: opacity 0.3s;
}

.gallery-item:hover .gallery-actions {
    opacity: 1;
}

.featured-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--Malachite-200);
    color: var(--text-color);
    font-size: 12px;
    padding: 3px 8px;
    text-align: center;
    font-weight: bold;
}



.reserved-text {
    color: var(--Zest-200);
    font-weight: bold;
}

.deactivated-text {
    color: var(--danger-color);
    font-weight: bold;
}

.available-text {
    color: var(--Malachite-200);
    font-weight: bold;
}





/* تنظیم ستون روزهای تعطیل - دقیقاً مشابه استایل امروز با رنگ پررنگ‌تر */
.fc-day.fc-day-holiday {
    background-color: transparent !important;
    color: var(--text-color) !important;
    position: relative !important;
}

/* ماستار صفحه‌های متوسط - ماستار ماستار */
.fc-col-header-cell.fc-day-holiday,
.fc-day.fc-day-holiday .fc-col-header-cell {
    color: var(--text-color) !important;
}



/* Search form layout */
.search-form {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center !important;
    width: 100% !important;
}

.first-row-search {
    display: flex !important;
    gap: 6px !important;
    flex: 1 !important;
}

.second-row-search {
    display: flex !important;
    gap: 6px !important;
}

.search-form .form-select {
    flex: 1 1 0% !important;
    width: auto !important;
}

.search-form .btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-width: fit-content !important;
}

.span.space {
    display: none !important;
}

/* Mobile Layout */
@media (max-width: 768px) {
    .search-form {
        display: block !important;
        width: 100% !important;
        margin: 16px 0;
    }

    /* ردیف اول - 3 ستون که ستون سوم 90px */
    .first-row-search {
        display: grid !important;
        grid-template-columns: 1fr 1fr 90px !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    .first-row-search .form-select:nth-child(1) {
        grid-column: 1 / 2 !important;
    }

    .first-row-search .form-select:nth-child(2) {
        grid-column: 2 / 3 !important;
    }

    .first-row-search .span.space {
        grid-column: 3 / 4 !important;
        display: block !important;
        width: 90px !important;
    }

    /* ردیف دوم - 2 ستون که ستون دوم 90px */
    .second-row-search {
        display: grid !important;
        grid-template-columns: 1fr 90px !important;
        gap: 8px !important;
    }

    .second-row-search .form-select.date {
        grid-column: 1 / 2 !important;
    }

    .second-row-search .btn {
        grid-column: 2 / 3 !important;
        width: 90px !important;
    }

    /* استایل‌های عمومی موبایل */
    .search-form .form-select {
        font-size: 14px !important;
        padding: 8px 6px !important;
        height: 45px !important;
    }

    .search-form .btn {
        padding: 10px 12px !important;
        font-size: 14px !important;
        height: 45px !important;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .first-row-search {
        grid-template-columns: 1fr 1fr 80px !important;
        gap: 6px !important;
    }

    .first-row-search .span.space {
        width: 80px !important;
    }

    .second-row-search {
        grid-template-columns: 1fr 80px !important;
        gap: 6px !important;
    }

    .second-row-search .btn {
        width: 80px !important;
    }

    .search-form .form-select {
        font-size: 13px !important;
        padding: 6px 4px !important;
        height: 42px !important;
    }

    .search-form .btn {
        padding: 8px 10px !important;
        font-size: 13px !important;
        height: 42px !important;
    }
}

/* Extra small screens */
@media (max-width: 360px) {
    .first-row-search {
        grid-template-columns: 1fr 1fr 70px !important;
        gap: 4px !important;
    }

    .first-row-search .span.space {
        width: 70px !important;
    }

    .second-row-search {
        grid-template-columns: 1fr 70px !important;
        gap: 4px !important;
    }

    .second-row-search .btn {
        width: 70px !important;
    }

    .search-form .form-select {
        font-size: 12px !important;
        padding: 4px 2px !important;
        height: 38px !important;
    }

    .search-form .btn {
        padding: 6px 8px !important;
        font-size: 12px !important;
        height: 38px !important;
    }
}

/* Override conflicting Select2 styles */
.select2-container--bootstrap-5 .select2-selection {
    background-color: var(--body-bg) !important;
    color: var(--text-color-secondary) !important;
    border: 1px solid var(--border-color) !important;
    height: 48px !important;
    padding: 8px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    letter-spacing: 0px !important;
    width: 100% !important;
}

/* Mobile select2 adjustments */
@media (max-width: 768px) {
    .select2-container--bootstrap-5 .select2-selection {
        height: 45px !important;
        padding: 8px 6px !important;
        font-size: 14px !important;
    }

    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
        line-height: 27px !important;
    }

    /* Third select with fixed width */
    .search-form .form-select:nth-child(3) .select2-container--bootstrap-5 .select2-selection {
        width: 90px !important;
        font-size: 12px !important;
        padding: 8px 4px !important;
    }

    /* Button styling for 90px width */
    .search-form .btn {
        font-size: 12px !important;
        padding: 10px 6px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (max-width: 480px) {
    .select2-container--bootstrap-5 .select2-selection {
        height: 42px !important;
        padding: 6px 4px !important;
        font-size: 13px !important;
    }

    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
        line-height: 28px !important;
    }

    .search-form .form-select:nth-child(3) .select2-container--bootstrap-5 .select2-selection {
        width: 80px !important;
        font-size: 11px !important;
        padding: 6px 2px !important;
    }

    /* Button styling for 80px width */
    .search-form .btn {
        font-size: 11px !important;
        padding: 8px 4px !important;
    }
}

@media (max-width: 360px) {
    .select2-container--bootstrap-5 .select2-selection {
        height: 38px !important;
        padding: 4px 2px !important;
        font-size: 12px !important;
    }

    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
        line-height: 28px !important;
    }

    .search-form .form-select:nth-child(3) .select2-container--bootstrap-5 .select2-selection {
        width: 70px !important;
        font-size: 10px !important;
        padding: 4px 1px !important;
    }

    /* Button styling for 70px width */
    .search-form .btn {
        font-size: 10px !important;
        padding: 6px 2px !important;
    }
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--text-color-secondary) !important;
    line-height: 30px !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    color: var(--text-color-muted) !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--primary-color) !important;
    box-shadow: none !important;
}

.select2-dropdown {
    background-color: var(--body-bg) !important;
    border-color: var(--border-color) !important;
    z-index: 9999 !important;
}

.select2-results__option {
    color: var(--text-color) !important;
    background-color: var(--body-bg) !important;
}

.select2-results__option--highlighted {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.select2-search__field {
    background-color: var(--body-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {

    display: none !important;
}

.select2-container--default .select2-selection--multiple {
    background-color: var(--body-bg) !important;
    border: none !important;
    border-radius: 4px;
    cursor: text;
    padding-bottom: 5px;
    padding-right: 5px;
    position: relative;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    cursor: pointer;
    font-weight: bold;
    height: 20px;
    margin-right: 10px;
    margin-top: 5px;
    position: absolute;
    right: auto !important;
    padding: 1px;
    left: 11px !important;
    color: var(--text-color) !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear {

    right: auto !important;
    left: 11px !important;

    color: var(--text-color) !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field {
    margin-top: -7px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--box-bg) !important;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    margin-left: 5px;
    margin-top: 5px;
    padding: 0;
    padding-left: 20px;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-color) !important;
    line-height: 28px;
}

.flatpickr-calendar {

    background: var(--box-bg) !important;
    border: none !important;

    box-shadow: none !important;

    color: var(--text-color) !important;
}


.image-preview-wrapper:hover {
    background-color: rgba(6, 94, 106, 0.1);
}

.default-image-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.default-image-icon svg {
    width: 80px;
    height: 80px;
}

.image-add-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: var(--body-bg);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.image-upload-hint {
    font-size: 12px;
    color: #6c757d;
}

.gallery-grid {
    margin-top: 20px;
}

.gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.gallery-item.featured {
    border: 3px solid #28a745;
}

.gallery-item img {
    height: 150px;
    object-fit: cover;
    width: 100%;
    transition: transform 0.3s;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 5px;
    opacity: 0.4;
    transition: opacity 0.3s;
}

.gallery-item:hover .gallery-actions {
    opacity: 1;
}

.featured-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--Malachite-200);
    color: white;
    font-size: 12px;
    padding: 3px 8px;
    text-align: center;
    font-weight: bold;
}

.smal-p {
    color: var(--text-color);
    font-family: Vazir;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.default-image-icon img {
    width: 100%;
    margin: 4px;
    border-radius: 8px;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear {

    display: none !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {

    padding: 5px !important;
    color: #fff !important;
}

.select2-selection__choice__display {
    color: var(--text-color);
    font-weight: 12px;
}

.select2-selection__choice__remove {
    color: var(--text-color);
}

.select2-selection__choice__remove:hover {
    color: var(--text-color);
}


.notification {
    display: flex;
    padding: 15px 20px;
    border-radius: 6px;
    margin-bottom: 10px;
    border-right: var(--primary-color);
    background-color: var(--text-color);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    direction: rtl;
    min-width: 280px;
    color: #333;
    position: relative;
}

.notification-success {
    border-right-color: var(--Malachite-200);
    color: #333;
}

.notification-error {
    border-right-color: var(--danger-color);
}

.notification-warning {
    border-right-color: var(--Zest-200);
}

.notification-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.notification-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 3px;
}

/* دکمه بستن */
.notification-close {
    position: absolute;
    top: 10px;
    left: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.notification-close:hover {
    color: #333;
}

/* نوار پیشرفت */
.notification-progress-container {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 3px;
    background-color: var(--text-color);
    overflow: hidden;
    border-radius: 0 0 6px 6px;
}

.notification-progress-bar {
    height: 100%;
    background-color: var(--primary-color);
    transition: width 0.1s linear;
}

.notification-success .notification-progress-bar {
    background-color: var(--Malachite-200);
}

.notification-error .notification-progress-bar {
    background-color: var(--danger-color);
}

.notification-warning .notification-progress-bar {
    background-color: var(--Zest-200);
}

/* ترنزیشن‌ها */
.transition {
    transition-property: transform, opacity;
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.transform {
    transform: translateX(0) translateY(0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
}

.translate-y-0 {
    transform: translateY(0px);
}

.translate-y-2 {
    transform: translateY(0.5rem);
}

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}


[x-cloak] {
    display: none !important;
}

.notification {
    display: flex;
    padding: 15px 20px;
    border-radius: 6px;
    margin-bottom: 10px;
    border-right: 4px solid #3991d3;
    background-color: white;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    direction: rtl;
    min-width: 280px;
    color: #333;
    position: relative;
}

.notification-success {
    border-right-color: var(--Malachite-200) !important;
    background-color: #f0fff0 !important;
}

.notification-error {
    border-right-color: var(--danger-color) !important;
    background-color: #fff0f0 !important;
}

.notification-warning {
    border-right-color: var(--Zest-200) !important;
    background-color: #fffcf0 !important;
}

.notification-info {
    border-right-color: var(--primary-color) !important;
    background-color: #f0f8ff !important;
}

.notification-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.notification-success .notification-title {
    color: #1a7a1a;
}

.notification-error .notification-title {
    color: #a93226;
}

.notification-warning .notification-title {
    color: #9a6d00;
}

.notification-info .notification-title {
    color: #2163a5;
}

/* نوار پیشرفت */
.notification-progress-bar {
    background-color: #3991d3;
}

.notification-success .notification-progress-bar {
    background-color: var(--Malachite-200) !important;
}

.notification-error .notification-progress-bar {
    background-color: var(--danger-color) !important;
}

.notification-warning .notification-progress-bar {
    background-color: var(--Zest-200) !important;

}

.notification-info .notification-progress-bar {
    background-color: var(--primary-color) !important;

}

.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
    height: auto !important;
    max-width: 150px !important;
    background: var(--body-bg) !important;
    color: var(--text-color) !important;
}

.flatpickr-day,
span.flatpickr-weekday {
    color: var(--text-color) !important;
}

.flatpickr-day.prevMonthDay {
    color: var(--text-color-secondary) !important;

}

.service-date .flatpickr-calendar.animate.open {

    max-width: 100% !important;
}

.step-title {
    color: var(--text-color);
    text-align: right;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    /* 150% */
}

.step-subtitle {
    color: var(--text-color-secendery);
    text-align: right;
    font-family: Vazir;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 133.333% */
}

.step-wizard-container {
    background: var(--box-bg);
    border-radius: 16px;
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 24px;
}

.step-indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;


}

/* خط پس‌زمینه (خاکستری) */
.step-indicator::before {
    content: '';
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    left: 50px;
    right: 50px;
    height: 4px;
    background-color: var(--body-bg);
    z-index: 0;
    border-radius: 2px;
}

/* خط progress (رنگی) */
.step-indicator::after {
    content: '';
    position: absolute;
    top: 45%;
    transform: translateY(-50%);

    width: 0;
    height: 4px;
    background: var(--primary-color);
    z-index: 0;
    border-radius: 2px;
    transition: width 0.6s ease-in-out;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 15;
    flex: 1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.step-icon-wrapper {

    border-radius: 50%;
    background: var(--body-bg);
    border: 1px solid var(--body-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    position: relative;
    z-index: 15;
    padding: 8px;
}

.step-icon {
    width: 28px;
    height: 28px;
    color: var(--text-color);
    font-size: 20px;
    transition: all 0.3s ease;
}


/* مرحله فعال */
.step-item.active .step-icon-wrapper {

    border: 1px solid var(--primary-color);

}


.step-item.active .step-title {
    color: var(--text-color);
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* مرحله تکمیل شده */
.step-item.completed .step-icon-wrapper {

    border-radius: 24px;
    border: 1px solid var(--primary-color);
    background: var(--primary-color-transparent);

}

.step-item.completed svg path {

    stroke: var(--primary-color);
}

.step-item.completed {
    position: relative;
}

.tick-svg {
    display: none;
    position: absolute;
    right: 47%;
    top: 49px;
}

.step-item.completed .tick-svg {
    display: block;
}

.step-item.completed .step-icon {
    color: white;
}

.step-item.completed .step-title {
    color: #10b981;
    font-weight: 600;
}

/* مرحله غیرفعال */
.step-item.disabled {

    cursor: not-allowed;
}

.step-item.disabled .step-icon-wrapper {
    background: var(--body-bg);
    border: 1px solid var(--body-bg);
}



/* مرحله در حال بارگذاری */
.step-item.loading .step-icon-wrapper {
    background: rgba(251, 191, 36, 0.9);
    border: 4px solid rgba(251, 191, 36, 0.6);
    animation: pulse 1.5s infinite;
}



.step-item:hover:not(.disabled):not(.active) .step-icon-wrapper {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

.step-content {
    min-height: 400px;
    padding: 12px 0;
    margin-bottom: 64px !important;
}

.step-pane {
    display: none;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.step-pane.active {
    display: block;
    opacity: 1;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.pointer {
    cursor: pointer;
}

.step-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 16px;

    left: 0;
    gap: 16px;
    align-self: stretch;
    background: var(--box-bg);
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
}

.btn-outline-secondary {
    border-color: var(----text-color);
    color: var(--text-color);
}

.step-navigation .btn {
    min-width: 120px;

    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-size: 12px;
}

.step-navigation .btn:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.step-navigation .btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

@media (max-width: 768px) {
    .step-wizard-container {
        padding: 20px 15px;
    }

    .step-indicator {
        flex-wrap: nowrap;
        gap: 5px;
        padding: 15px 0;
    }

    .step-item {
        min-width: 70px;
    }

    .step-icon-wrapper {
        width: 55px;
        height: 55px;
    }

    .step-icon {
        font-size: 18px;
    }



}

@media (max-width: 480px) {

    .step-indicator::before,
    .step-indicator::after {
        left: 12%;
        right: 12%;
    }

    .step-item {
        min-width: 60px;
    }

    .step-icon-wrapper {
        width: 50px;
        height: 50px;
    }


}

.guid-ul {

    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    border-radius: 16px;
    background: var(--box-bg);
    margin-bottom: 24px;
}

.guid-ul li {
    display: flex;
    padding: 16px;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.guid-ul button {
    color: var(--text-color);
    text-align: right;
    font-family: Vazir;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.guid-p {
    color: var(--text-color-secondary);
    text-align: right;
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;

}

.help-title {
    color: var(--text-color);
    text-align: right;
    font-family: Vazir;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;

}

.select2-container {

    width: 100% !important;
}

.secendery-bg {
    background-color: var(--primary-color-transparent);
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 8px;
}

.clubs-list {

    color: var(--text-color);
    text-align: right;
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    min-width: 100px
}

.primary-line {

    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    display: block;
    float: right;
    margin-top: 4px;
    margin-bottom: 4px;

}

.select2-container--default .select2-selection--single .select2-selection__arrow {

    display: none !important;
}

.card-item .actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.card-item .actions .delete,
.card-item .actions .edit {

    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.card-item .actions .delete {
    color: var(--danger-color);
}

.card-item .actions .edit {

    color: var(--text-color);
}

.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.custom-modal-content {
    background: #163c44;
    color: #fff;
    border-radius: 24px;
    padding: 32px 24px 16px 24px;
    min-width: 350px;
    max-width: 95vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    position: relative;
    width: 400px;
    animation: modalIn 0.25s;
}

@keyframes modalIn {
    from {
        transform: translateY(60px);
        opacity: 0;
    }

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

.close-modal {
    position: absolute;
    left: 16px;
    top: 16px;
    font-size: 28px;
    cursor: pointer;
    color: #fff;
    opacity: 0.7;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.modal-title {
    font-size: 18px;
    font-weight: bold;
}

.modal-body {
    margin-bottom: 16px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    font-size: 15px;
}

.discount-row span:last-child {
    color: var(--danger-color);
}

.modal-footer {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.add-to-cart-btn {
    width: 100%;
    background: var(--primary-color);
    color: var(--body-bg);
    font-weight: bold;
    border-radius: 12px;
    padding: 12px 0;
    font-size: 16px;
    border: none;
    margin-top: 8px;
}

.selected-datetime-info {
    background: #0a4b56;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 15px;
    text-align: center;
}

@media (max-width: 767px) {
    .custom-modal {
        align-items: flex-end;
        justify-content: center;
    }

    .custom-modal-content {
        width: 100vw;
        min-width: unset;
        max-width: unset;
        border-radius: 24px 24px 0 0;
        padding: 24px 12px 12px 12px;
        animation: modalInMobile 0.25s;
    }

    @keyframes modalInMobile {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

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

    .close-modal {
        left: 12px;
        top: 12px;
    }
}

.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.booking-modal-advanced {
    background: #163c44;
    color: #fff;
    border-radius: 24px;
    padding: 24px 16px 16px 16px;
    min-width: 340px;
    max-width: 95vw;
    width: 480px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    position: relative;
    animation: modalIn 0.25s;
}

@keyframes modalIn {
    from {
        transform: translateY(60px);
        opacity: 0;
    }

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

.close-modal {
    position: absolute;
    left: 16px;
    top: 16px;
    font-size: 28px;
    cursor: pointer;
    color: #fff;
    opacity: 0.7;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.modal-title {
    font-size: 18px;
    font-weight: bold;
}

.selected-datetime-info {
    background: #0a4b56;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 15px;
    text-align: center;
}

.modal-main-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
}

.modal-col {
    flex: 1;
    min-width: 0;
}

.modal-col-divider {
    width: 1px;
    background: #1ee6e9;
    height: 100%;
    margin: 0 12px;
}

.session-count-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.session-input-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.session-btn {
    background: #1ee6e9;
    color: #163c44;
    border: none;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

#sessionCountInput {
    width: 48px;
    text-align: center;
    border-radius: 6px;
    border: 1px solid #1ee6e9;
    background: #fff;
    color: #163c44;
    font-size: 16px;
}

.month-btn-group {
    display: flex;
    gap: 0;
    margin-bottom: 8px;
}

.month-btn {
    flex: 1;
    border: none;
    background: #0a4b56;
    color: #fff;
    padding: 8px 0;
    font-size: 15px;
    border-radius: 0;
    border-right: 1px solid #1ee6e9;
    cursor: pointer;
    transition: background 0.2s;
}

.month-btn:last-child {
    border-left: 1px solid #1ee6e9;
}

.month-btn.active,
.month-btn:focus {
    background: #1ee6e9;
    color: #163c44;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin: 6px 0;
    font-size: 12px;
}

.payable-row {
    display: flex;
    justify-content: space-between;
    margin: 10px 0 6px 0;
    font-size: 16px;
    font-weight: bold;
    color: #1ee6e9;
}

.slider-row {
    margin: 10px 0;
}

#sessionSlider {
    width: 100%;
}

.discount-code-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
}

#discountCodeInput {
    flex: 1;
    border-radius: 8px;
    border: 1px solid #1ee6e9;
    padding: 8px;
    font-size: 15px;
    max-width: 130px;
}

#applyDiscountBtn {
    background: #1ee6e9;
    color: #163c44;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
}

.add-to-cart-btn {
    width: 100%;
    background: #1ee6e9;
    color: #163c44;
    font-weight: bold;
    border-radius: 12px;
    padding: 12px 0;
    font-size: 16px;
    border: none;
    margin-top: 8px;
}

@media (max-width: 600px) {
    .custom-modal {
        align-items: flex-end;
    }

    .booking-modal-advanced {
        width: 100vw;
        min-width: unset;
        max-width: unset;
        border-radius: 24px 24px 0 0;
        padding: 16px 6px 8px 6px;
        animation: modalInMobile 0.25s;
    }

    @keyframes modalInMobile {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

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

    .close-modal {
        left: 8px;
        top: 8px;
    }

    .modal-main-row {
        flex-direction: column;
    }

    .modal-col-divider {
        display: none;
    }

    .modal-col {
        width: 100%;
    }
}

.dropdown-toggle::after {

    display: none !important;
}
.fc .fc-button-primary{

    background-color:transparent !important;
    border-color: transparent !important;
    color: var(--primary-color) !important;
font-family: Vazir !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 16px; /* 133.333% */
}
.fc .fc-button-primary:hover{
    cursor: pointer;
}

.page-title-box  .title-and-location {
    display: block !important;
}
.custome-text{

    color: var(--text-color);
}

.book-now-btn-white.primary-color:hover{

    color: var(--text-color) !important;
}

.book-now-btn-white.primary-color:hover svg path{
    fill: var(--text-color) !important;
}

.profile-img{

    position: relative;
}
.circle-line{
    position: absolute;
    bottom: 6px;
    left: -1px;
}

.profile-img img{

    width: 32px;
    height: 32px;
    border-radius: 100%;
}
.justify-direction-column{

    flex-direction: column;

}

.suggestion-item .default-image-placeholder{
    border: none;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.price-setting-tab {
    border-radius: 8px 0px 8px 8px;
    border: 0.6px solid var(--disabale-primary-color);
    background: var(--primary-color-transparent);
    padding: 12px;
}

.price-setting-tab .profile-info-grid {
    margin-top: 16px
}

.price-text {
    color: var(--text-color-secendery);
    text-align: right;
    font-family: Vazir;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}