* { font-family: 'IRANSansX'; }

body { margin: 0; padding: 0; background-color: #F7F7F7; }

.container { display: flow-root; box-sizing: content-box; max-width: 1440px; padding-left: 15px; padding-right: 15px; display: flex; justify-content: center; flex-direction: column; width: 100%; margin: auto; box-sizing: border-box; }

@media (min-width: 640px) {
    .container { padding-left: 30px; padding-right: 30px; }
}

@media (min-width: 960px) {
    .container { padding-left: 40px; padding-right: 40px; }
}

header { background-color: white; margin-bottom: 8px; }
.site-header { height: 80px; display: flex; align-items: center; }
.site-header > div { display: flex; align-items: center; }
.site-header > div.nav { gap: 10px; }
.site-header .nav { flex: 1; }
.site-header ul { list-style: none; margin: 0; padding: 0; }
.site-header ul li { display: inline-block; }
.site-header ul li a { color: #676D7C; text-decoration: none; font-weight: 600; padding: 0 6px; font-size: 14px; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.site-header ul li.active a { color: #121212; border-bottom: 2px solid #E40428; }
.site-header ul li a:hover { color: #121212; text-decoration: none; border-bottom: 2px solid #E40428; }
.site-header .btn-nav-login { text-decoration: none; display: flex; align-items: center; color: #676D7C; border: 1px solid #676D7C; border-radius: 10px; padding: 8px 16px !important; font-size: 12px; font-weight: 600; gap: 8px; margin: 0 10px; }
.site-header .search { width: 200px; padding-right: 40px; background: #F7F7F7; border: none; font-size: 13px; } 
.site-header .search { background-image: url("/images/icon/search-input.png"); background-position: right; background-repeat: no-repeat; background-size: contain; }
.site-header .left { gap: 5px; }
.site-header .left > a { padding: 5px; }

#side-nav { background-color: white; position: absolute; top: 80px; bottom: 0; width: 0; right: 0; display: none; transition: width 300ms linear; z-index: 1000; border-left: solid 1px #ECECEC; }
#side-nav ul { list-style: none; padding: 0; margin: 0; }
#side-nav li a { display: none; }
#side-nav.show li a { height: 48px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 400; color: #676D7C; text-decoration: none; padding: 0 25px; white-space: nowrap; overflow: hidden; }


.footer-services { background-color: #F1F1F1; display: flex; gap: 60px; align-items: center; justify-content: center; padding: 30px 0px; margin-top: 20px; text-align: center; }
.footer-services > div { display: flex; align-items: center; flex-direction: column; gap: 10px; font-weight: 600; font-size: 13px; color: #676D7C; }
.footer-services > div img { width: 48px; height: 48px; }

footer { background-color: #FFF; padding-top: 32px; padding-bottom: 32px; }
footer .container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
footer .social { flex: 4; text-align: center; font-weight: 600; }
footer .links { flex: 1; text-align: center; display: flex; justify-content: space-between; border-bottom: 2px solid #C8C8C8; gap: 25px; }
footer .links a { font-size: 12px; font-weight: 400; color: #121212; line-height: 30px; text-decoration: none; }
footer .links a:hover { color: #121212; text-decoration: none; }
footer .social { display: flex; font-size: 12px; padding: 10px 0; }
footer .copyright { display: flex; font-size: 10px; }
.header-menu { padding: 15px; }
.header-menu img { transition: all 300ms linear; }
.header-menu.show img { transform: rotate(90deg); transition: all 300ms linear; }

.bottom-nav { background-color: rgba(247, 247, 247, 1); position: fixed; bottom: 0; right: 0; left: 0; z-index: 1000; display: none; justify-content: space-around; }
.bottom-nav a { padding: 16px; display: inline-block; display: flex; position: relative; }
.bottom-nav a.active::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background-color: #E30D29; position: absolute; bottom: 8px; left: 0; right: 0; margin: auto; }

@media (max-width: 1100px) {
    header.container { padding: 0 !important; }
    .nav ul { display: none; }
    footer { display: none; }

    #side-nav { display: inline-block; width: 0; height: 0; opacity: 0; transition: width 300ms linear; }
    #side-nav.show { width: 275px; height: unset; opacity: 1; transition: width 300ms linear; }
}

@media (min-width: 1100px) {
    .header-menu { display: none; }
}

@media (max-width: 640px) {
    .nav { justify-content: center; }
    .txt-search { display: none; }
    .btn-nav-login { display: none !important; }
    .header-cart { display: none; }
    body { padding-bottom: 55px; }
    .bottom-nav { display: flex; }
}

.icon  { background-position: center; background-size: contain; background-repeat: no-repeat; display: flex; width: 24px; height: 24px; transition: all 100ms ease-in-out; }
.icon-container:hover .icon { transition: all 100ms ease-in-out; }

.dot { width: 12px; height: 12px; background-color: #E30D29; border-radius: 50%; display: inline-block; }

.user-edit-icon { background-image: url('/images/icon/user-edit.svg'); }
.icon-container:hover .icon.user-edit-icon { background-image: url('/images/icon/user-edit-blue.svg'); }
.order-icon { background-image: url('/images/icon/bag-tick.svg'); }
.icon-container:hover .icon.order-icon { background-image: url('/images/icon/bag-tick-blue.svg'); }
.address-icon { background-image: url('/images/icon/routing.svg'); }
.icon-container:hover .icon.address-icon { background-image: url('/images/icon/routing-bluelight.svg'); }
.logout-icon { background-image: url('/images/icon/logout.svg'); }
.icon-container:hover .icon.logout-icon { background-image: url('/images/icon/logout-active.svg'); }

.datepicker-plot-area { width: 288px !important; font-family: "IRANSansX"; }
.datepicker-plot-area .datepicker-day-view .table-days td span { height: 30px !important; line-height: 33px !important; }
.datepicker-plot-area .datepicker-day-view .month-grid-box .header { background-color: #555; }
.datepicker-plot-area .datepicker-day-view .month-grid-box .header .header-row-cell { line-height: 30px !important; font-weight: normal !important; color: #EEE !important; }
.datepicker-plot-area .datepicker-day-view .table-days td.selected span, .datepicker-plot-area .datepicker-year-view .year-item.selected, .datepicker-plot-area .datepicker-month-view .month-item.selected { background-color: #BE0321 !important; color: white !important; }
.datepicker-plot-area .datepicker-day-view .table-days td.selected span .datepicker-plot-area .datepicker-day-view .table-days td:hover, .datepicker-plot-area .datepicker-day-view .table-days td span:hover, .datepicker-plot-area .datepicker-year-view .year-item:hover, .datepicker-plot-area .datepicker-month-view .month-item:hover { background-color: #E40428 !important; color: white !important; }
.pwt-btn.pwt-btn-switch { color: #BE0321 !important; }
.datepicker-day-view tr td:last-child span { color: #BE0321 !important; background-color: #F5F5F5 !important; }
.datepicker-plot-area .datepicker-day-view .table-days td.today span { background-color: #333 !important; color: #fff !important; }

.box-loader { display: flex; position: absolute; top: 0; left: 0; bottom: 0; right: 0; align-items: center; justify-content: center; backdrop-filter: blur(2px); background-color: rgba(255, 255, 255, 0.5); }
.box-loader .dialog-loader-content { background-color: white; padding: 10px 20px; border: solid 2px #E40428; border-radius: 8px; font-weight: 600; color: #E40428; display: flex; gap: 10px; align-items: center; }

.pagination { list-style: none; display: flex; gap: 5px; }
.pagination li > * { width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; border: 1px solid #F1F1F1; border-radius: 2px; display: flex; padding-top: 3px; color: #121212; }
.pagination li a, .pagination li a:hover { text-decoration: none; }
.pagination li.active > * { border: 1px solid #00C1D4 !important; }
.pagination li.active span { color: #00C1D4; }

.money-label { position: absolute; left: 10px; top: 13px; color: #A4A4A4; }