body {
    font-family: peydaweb_fanum !important;
}

.wishlist .w-icon-logout {
    font-size: 20px;
    margin-left: 10px;
}

.login-popup {
    margin: 0 auto;
}

.header {
    border-bottom: 1px solid #ddd;
}

.header-middle {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.login-popup .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* CSS */
.menu-label {
    cursor: default;
    color: #666;
    padding: 10px 15px;
    display: block;
}

.has-dropdown:hover .sub-menu {
    display: block;
}

.text-slate-500 {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity));
}

.bg-slate-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}

.rounded-lg {
    border-radius: .5rem;
}

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

.items-center {
    align-items: center;
}

.flex-none {
    flex: none;
}
.w-12 {
    width: 4rem;
}
.h-12 {
    height: 4rem;
}
.flex {
    display: flex !important;
}

.w-7 {
    width: 1.75rem;
}

.h-7 {
    height: 1.75rem;
}

.pr-2 {
    padding-right: 1rem;
}

.flex-grow, .grow {
     flex-grow: 1;
 }

.font-medium {
    font-weight: 500;
}

.text-sm {
    font-size: 1.3rem;
    line-height: 2rem;
}

.space-y-1>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.25rem* calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.25rem* var(--tw-space-y-reverse));
}

.text-slate-500 {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity));
}

.text-slate-400 {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity));
}

.w-4 {
    width: 1.5rem;
}

.h-4 {
    height: 1.5rem;
}

audio, canvas, embed, iframe, img, object, svg, video {
    display: block;
    vertical-align: middle;
}

.float-right {
    float: right;
}

.hr a {

    font-size: 12px;
    padding: 15px 0 !important;
    width: 100%;
}

.hr {
    border-bottom: 1px solid #ddd;
}

ul .hr:last-child {
    border: 0px !important;
}

h1.product-title {
    font-size: 15px !important;
    font-weight: 500 !important;
}

.product-link-wrapper {
    justify-content: center;
    font-size: 14px;
}

.login-popup {
    border: 1px solid #ddd;
    margin: 30px auto;
    border-radius: 10px;
}

.login-popup h1 {
    font-size: 25px;
}

span.text-red-500 {
    color: red;
    font-weight: bold;
}

.login-popup .form-control {
    border-radius: 10px;
}

.login-popup button.btn.btn-primary.w-full {
    width: 100%;
    border-radius: 10px;
    padding: 15px;
}

.tab.tab-vertical.row.gutter-lg {
    padding: 15px;
}

ul.nav.nav-tabs.mb-6 {
    border-radius: 10px;
    border: 1px solid #ddd;
    padding: 0;
}

.tab-vertical .tab-content {
    border-top: 0;
}

#account-dashboard.tab-pane {
    padding-top: 0;
}

.h-8 {
    height: 3rem;
}

.w-8 {
    width: 3rem;
}

.p-4 {
    padding: 1rem;
}

li.nav-item {
    border-bottom: 1px solid #ddd;
}

li.nav-item:last-child {
    border: 0;
}

.tab-vertical .nav-link {
    padding: 20px;
}

.text-black.font-medium {
    font-size: 18px;
}

.h-5 {
    height: 2rem;
}

.w-5 {
    width: 2rem;
}

span.pl-2 {
    font-size: 18px;
    font-weight: 400;
}


#account-dashboard .icon-box {
    border-radius: 10px;
    box-shadow: 0 2rem 3rem rgba(0, 0, 0, 0.05), 0 0 5px rgba(0, 0, 0, 0.05);
}

#account-dashboard .icon-box p {
    font-size: 18px;
}

.main-user .tab-pane  {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
}

.main-user .icon-box-side {
    justify-content: right;
    border-bottom: 1px solid #ddd;
    padding-bottom: 30px;
}

.shop-table tbody {
    text-align: center;
}

form.form.account-details-form {
    padding: 10px 0;
}

.dropdown-box {
    border-radius: 10px;
    border: 1px solid #ddd;
    width: 270px;
}

.dropdown-box > a {
    border-bottom: 1px solid #ddd;
    padding: 15px;
}

.dropdown-box > a:last-child {
    border: 0px;
}

.vendor-register {
    border: 1px solid #ddd;
    margin: 80px;
    padding: 20px;
    border-radius: 10px;
}

.items-center {
    align-items: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.w-80 {
    width: 40rem;
}


.border-neutral-300 {
    --tw-border-opacity: 1;
    border-color: rgb(212 212 212 / var(--tw-border-opacity));
}

.border-b {
    border-bottom: 1px solid #ddd;
}

/*.container, .container-fluid {*/
/*    padding: 0 !important;*/
/*}*/

.product.text-center .ratings-container, .product.text-center .product-action {
    justify-content: right;
}

.product .product-pa-wrapper {
    display: flex;
}

.ratings::before {
    color: #999;
}

.product-price {
    font-size: 1.3rem;
    font-weight: 400;
    color: #000;
    text-align: center;
}

.product-details {
    text-align: right;
    color: #666;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.product-single .product-title {
    font-size: 1.4rem;
    font-weight: 400;
}

.product-action-vertical {
    z-index: 10;
}

/* =================================================================== */
/* ======== کد نهایی و جامع برای مگامنوی عمودی چند ردیفه ======== */
/* =================================================================== */

/*
  مرحله ۰: [مهمترین بخش] اطمینان از موقعیت‌دهی صحیح والد اصلی
  ما به والد اصلی دراپ‌داون (`.category-dropdown`) میگوییم که مبنای موقعیت‌دهی باشد.
  این کار باعث می‌شود تمام فرزندان absolute آن (مثل مگامنو) نسبت به آن تراز شوند.
*/
.category-dropdown {
    position: relative !important;
}

/*
  مرحله ۱: تنظیمات پایه برای کانتینر مگامنو (ستون‌های چند ردیفه)
*/
.vertical-menu .megamenu {
    display: flex !important;
    flex-wrap: wrap !important; /* اجازه شکستن ستون‌ها به ردیف بعدی */
    max-width: 980px;          /* عرض حداکثری مگامنو - قابل تنظیم */
    gap: 20px;                 /* فاصله بین ستون‌ها و ردیف‌ها */
    padding: 20px !important;  /* پدینگ داخلی برای زیبایی */
}

/*
  مرحله ۲: کنترل موقعیت، ارتفاع و اسکرول مگامنو
  این کد فقط زمانی اعمال می‌شود که روی یک آیتم دارای زیرمنو هاور شود.
*/
.vertical-menu li.has-submenu:hover > .megamenu {
    /*
     * موقعیت عمودی مگامنو را نسبت به بالای آیتم والدش (`li`) تنظیم می‌کنیم.
     * top: 0 یعنی لبه بالایی مگامنو با لبه بالایی آیتم `li` تراز شود.
     * این کد حالا به درستی کار خواهد کرد چون والد اصلی (.category-dropdown) موقعیت‌پذیر است.
    */
    top: 0 !important;

    /*
     * [جایگزین bottom] ما از این خاصیت استفاده می‌کنیم تا مگامنو به بالا بچسبد
     * و ارتفاعش به اندازه محتوایش باشد.
    */
    bottom: auto !important;

    /*
     * ارتفاع مگامنو را به حداکثر ۸۵ درصد ارتفاع پنجره مرورگر محدود می‌کنیم.
     * این کار از بیرون زدن منوهای بلند جلوگیری می‌کند.
    */
    max-height: 85vh;

    /*
     * اگر محتوای عمودی از ارتفاع تعیین شده بیشتر شد، اسکرول‌بار داخلی نمایش داده شود.
    */
    overflow-y: auto !important;

    /* بهبود ظاهر اسکرول‌بار (اختیاری) */
    scrollbar-width: thin;
    scrollbar-color: #999 #f1f1f1;
}

/* استایل اسکرول‌بار برای مرورگرهای Webkit (Chrome, Safari, Edge) */
.vertical-menu .megamenu::-webkit-scrollbar {
    width: 8px;
}
.vertical-menu .megamenu::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.vertical-menu .megamenu::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}
.vertical-menu .megamenu::-webkit-scrollbar-thumb:hover {
    background: #555;
}


/*
  مرحله ۳: تنظیمات پایه برای هر ستون در مگامنو
*/
.vertical-menu .megamenu > li {
    flex-basis: 180px; /* عرض پایه هر ستون */
    flex-grow: 1;      /* اجازه بزرگ شدن برای پر کردن فضا */
    flex-shrink: 0;    /* جلوگیری از کوچک شدن ناخواسته */
}


.product-single .btn-new-cart {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-bottom: 1rem;
    padding-right: 0;
    padding-left: 0;
    min-width: 14rem;
    border-radius: 5px;
}

.cart .form-group label {
    margin: 20px 0 5px 0;
}

.ltr {
    direction: ltr;
    text-align: left;
}

.featured-products-bg {
    background-color: #8D93FF!important;
}

.featured-products-bg .product {
    padding: 10px;
    background: #fff;
    border-radius: 5px;
}

.featured-products-bg {
    padding: 25px 0;
}

.btn-section-more {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid #ED1944;
    color: #ED1944;
    text-decoration: none !important;
    font-size: 14px;
    transition: .3s;
}

.featured-products-bg .btn-section-more {
    border: 1px solid #fff;
    color: #fff;
}

.featured-products-bg .btn-section-more:hover {
    color: #fff;
}

.featured-products-bg .title {
    margin: auto 10px auto auto !important;
    font-size: 20px;
    letter-spacing: -1px;
    margin: auto;
}

.featured-products-bg .icon {
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: #000682!important;
    color: #fff;
    font-size: 17px;
}

.align-items-center {
    align-items: center !important;
}

.sticky-content.fixed.fix-top {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.product.product-single {
    box-shadow: 0 0 20px rgba(0, 0, 0, .13);
    border: 0;
    padding: 20px;
    letter-spacing: 0;
}

.product-tabs {
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .13);
}

section.vendor-product-section , section.related-product-section {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .13);
}

.page-content .card-header {
    background: #eee;
    padding: 0;
    margin-bottom: 5px;
    border-radius: 5px;
}

.page-content .card-header a {
    padding: 10px 15px;
    font-size: 15px;
}

.wt-image.wt-image--cover {
    object-fit: cover;
    background-color: #eaeaea;
    border-radius: 5px;
}

.shayvard-icon {
    fill: currentColor;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    display: inline-block;
}

.display-none {
    display: none;
}

.wt-btn--outline {
    color: #222;
    font: inherit;
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: #0000;
    -webkit-appearance: none;
    min-height: 30px;
    min-width: 100%;
    vertical-align: middle;
    z-index: 10;
    background: 0 0;
    border: 1px solid #999;
    border-radius: 24px;
    outline: none;
    padding: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    display: inline-block;
    position: relative;
}

.wt-text-brick {
    color: #d9534f;
}

.category-page .page-content, .cart-page .sticky-sidebar, .cart-page .cart-right,
.cart-page .cart-bottom, .order .order-success, .order-view, .order-details-wrapper,
.sub-orders , #account-addresses {
    box-shadow: 0 0 20px rgba(0, 0, 0, .13);
    padding: 15px;
    border-radius: 5px;
}

.header-search , .header-search input{
    border-radius: 5px !important;
}

.category-toggle {
    border-radius: 5px 5px 0 0;
}

.cart-page figure {
    width: 100px;
}

.cart-page figure img {
    border-radius: 5px;
}

.cart-page button.btn.btn-close {
    padding: 4px;
    border-radius: 5px;
    color: #fff;
    background: red;
    border: 0;
    left: 0;
    width: 20px;
    height: 20px;
    top: 30px;
}

.cart-page button.btn.btn-close i {
    font-size: 10px;
}

.order-view {
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    margin: 3.2rem 0;
}

.order-view li {
    flex-grow: 1;
    padding: 1rem;
    text-align: center;
    font-size: 1.8rem;
}

.order-view strong {
    color: #333;
    display: block;
}

.order .order-table {
    padding: 0.6rem 3rem 3rem;
    border: 1px solid #e1e1e1;
    border-collapse: separate;
}

.order .order-table thead th, .order .order-table tfoot th, .order .order-table tfoot td {
    border-bottom: 1px solid #e1e1e1;
}

.order .order-table thead th {
    padding-bottom: 1.7rem;
    font-size: 1.8rem;
}

.order-table th {
    text-align: start;
    padding: 0.9rem 0;
}

.order .order-table tbody td:first-child {
    min-width: 16rem;
    padding-top: 3rem;
    padding-bottom: 0;
}

.order-table td:last-child {
    text-align: end;
}