html,
body {
overflow-x: clip;
}
::selection{
background-color: #2E63CC;
color: #ffffff;
}
::-webkit-scrollbar {
width: 12px;
height: 8px;
}
::-webkit-scrollbar-track {
background-color: #E7F3F3;
}
::-webkit-scrollbar-thumb {
background: #9CB5B5;
border-radius: 15px;
box-shadow: 0 0 0 3px #E7F3F3 inset;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none; /* IE 10+ */
scrollbar-width: none; /* Firefox */
}
*:focus{
outline: transparent;
}
.categoryBtn {
column-gap: 5px;
align-items: center;
background-color: transparent;
color: #494949;
border: 0px;
cursor: pointer;
transition: all 0.3s;
border-radius: 8px;
padding: 8px 14px;
}
.categoryBtn:hover{
background-color: #ececec;
transition: all 0.3s;
color: #1d1d1d;
}
.overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 10;
display: none;
}
.menu-container {
position: fixed;
top: 60px;
bottom: 0;
right: 0;
display: none;
flex-direction: row;
z-index: 11;
}
.menu-box {
width: 250px;
background: white;
border-left: 1px solid #ccc;
overflow-y: auto;
padding: 10px;
display: none;
}
.menu-box.level-1 {
box-shadow: -5px 1px 16px -1px rgba(0,0,0,0.10);
z-index: 100;
}
.menu-box.level-2 {
box-shadow: -5px 1px 16px -1px rgba(0,0,0,0.10);
z-index: 90;
}
.menu-box.level-3 {
background-color: rgb(219 234 254);
}
.menu-item {
padding: 10px;
cursor: pointer;
border-radius: 6px;
transition: background 0.2s;
}
.menu-title {
font-weight: bold;
font-size: 14px;
color: #444;
padding: 10px;
}
.menu-item:hover {
background-color: rgb(246, 246, 246);
}
.menu-item2:hover {
background-color: transparent;
}
.menu-level-1{
display: flex;
align-items: center;
font-size: 13px;
column-gap: 8px;
}
.menu-level-1:hover{
font-size: 14px;
}
.icon{
display: flex;
align-items: center;
justify-content: center;
background-color: white;
border-radius: 50%;
box-shadow: 0 2px 8px 0 rgba(0,0,0,.1);
padding: 5px;
}
/* .rotate-180 {
transform: rotate(180deg);
} */
.swiper-button-next2,
.swiper-button-prev2 {
cursor: pointer;
}
.swiper-button-next2:after,
.swiper-button-prev2:after {
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
color: rgb(113 113 122);
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.15s;
}
.swiper-button-next2:hover:after,
.swiper-button-prev2:hover:after {
color: rgb(63 63 70);
}
.swiper-button-next2.swiper-button-disabled,
.swiper-button-prev2.swiper-button-disabled {
opacity: 40%;
}
/* hero slider next and prev btn */
.swiper-button-next,
.swiper-button-prev {
height: 2.2rem;
width: 2.2rem;
top: 52%;
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
color: rgb(113 113 122);
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.15s;
}
.swiper-button-next:hover:after,
.swiper-button-prev:hover:after {
color: rgb(63 63 70);
}
.swiper-pagination-bullet{
margin-left: 4px;
margin-right: 4px;
opacity: 0.9;
background-color: white;
width: 10px;
height: 10px;
}
.swiper-pagination-bullet-active{
background-color: #214792;
border: 1px solid white;
width: 10px;
height: 20px;
border-radius: 5px;
transition: all 0.3s;
}
.swiper-pagination2{
background-color: #676767;
margin-right: auto;
margin-left: 5px;
margin-bottom: 5px;
}
.swiper-pagination2 .swiper-pagination-bullet{
margin-left: 2px;
margin-right: 2px;
opacity: 0.6;
background-color: white;
width: 6px;
height: 6px;
}
.swiper-pagination2 .swiper-pagination-bullet-active{
background-color: white;
opacity: 1;
width: 14px;
height: 6px;
border-radius: 5px;
transition: all 0.3s;
}
@media (max-width: 768px) {
.swiper-pagination-bullet {
width: 7px;
height: 7px;
}
}
@media (max-width: 768px) {
.swiper-pagination-bullet-active {
width: 7px;
height: 15px;
}
}
@media (max-width: 768px) {
.heroSlider .swiper-button-prev {
display: none;
}
}
@media (max-width: 768px) {
.heroSlider .swiper-button-next {
display: none;
}
}
.noUi-handle-upper {
top: -9px;
border: 1px solid;
border-color: #d1d5db;
border-radius: 50%;
background: #FFF;
cursor: default;
}
.noUi-handle-upper::before {
display: none;
}
.noUi-handle-upper::after {
display: none;
}
.noUi-handle-lower {
top: -9px;
border: 1px solid;
border-color: #d1d5db;
border-radius: 50%;
background: #FFF;
cursor: default;
}
.noUi-handle-lower::before {
display: none;
}
.noUi-handle-lower::after {
display: none;
}
.rtl-filter { direction: rtl; text-align: right; }
.rtl-prices { flex-direction: row-reverse; }
.phone_wrapper div nav .tab {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
/* main */
.phone_wrapper div {
overflow: hidden;
}
.phone_wrapper div .tab_reel {
width: 200%;
height: 100%;
display: flex;
transition: 0.5s cubic-bezier(.18, 1.14, .5, 1.18);
}
.phone_wrapper div .tab_panel1,
.phone_wrapper div .tab_panel2 {
width: 50%;
}
.activeTabPanel{
color: #214792;
border-bottom-width: 2px;
border-color: #214792;
}
/* page loader — minimal top-right spinner */
.page-loader {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 99999;
width: 2rem;
height: 2rem;
padding: 0.3rem;
box-sizing: border-box;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
pointer-events: none;
opacity: 1;
transform: scale(1);
transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-loader.is-hidden {
opacity: 0;
transform: scale(0.72);
visibility: hidden;
}
.page-loader__svg {
width: 100%;
height: 100%;
display: block;
animation: page-loader-spin 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.page-loader__track {
fill: none;
stroke: rgba(33, 71, 146, 0.14);
stroke-width: 2.25;
}
.page-loader__arc {
fill: none;
stroke: #214792;
stroke-width: 2.25;
stroke-linecap: round;
stroke-dasharray: 28 70;
animation: page-loader-dash 1.35s ease-in-out infinite;
}
@keyframes page-loader-spin {
to {
transform: rotate(360deg);
}
}
@keyframes page-loader-dash {
0% {
stroke-dasharray: 18 80;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 42 56;
stroke-dashoffset: -18;
}
100% {
stroke-dasharray: 18 80;
stroke-dashoffset: -98;
}
}
/* search shortcut — Ctrl + K */
.search-shortcut {
position: absolute;
left: 0.85rem;
top: 50%;
transform: translateY(-50%);
z-index: 56;
display: inline-flex;
align-items: center;
gap: 0.15rem;
padding: 0.28rem 0.5rem;
border-radius: 0.45rem;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(161, 161, 170, 0.35);
color: #71717a;
font-family: inherit;
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.03em;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
line-height: 1;
}
.search-shortcut span {
display: inline-block;
}
#search-container:focus-within .search-shortcut,
#search-container.is-typing .search-shortcut {
opacity: 0;
transform: translateY(-50%) scale(0.9);
}
.h-auto{
height: auto !important;
}
.categorySlider {
width: 100%;
height: 200px;
}
.categorySlider .swiper-wrapper {
height: 200px;
align-items: stretch;
}
.categorySlider .swiper-slide {
height: 200px !important;
}
.footer-logo {
position: absolute;
left: 50%;
top: -55px;
transform: translateX(-50%);
max-width: 8rem;
height: auto;
z-index: 2;
}
@media (min-width: 1024px) {
.footer-logo {
top: -3rem;
max-width: 12rem;
}
}
.search-dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 100%;
min-width: 620px;
max-width: 720px;
padding: 12px;
background: #ffffff;
border: 1px solid #e4e4e7;
border-radius: 16px;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.08),
0 2px 8px rgba(0, 0, 0, 0.04);
z-index: 55;
direction: rtl;
transform-origin: top right;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.search-dropdown.is-open {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.search-shortcut {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 3px;
padding: 4px 7px;
border: 1px solid #d4d4d8;
border-radius: 6px;
background: #ffffff;
color: #71717a;
font-size: 10px;
pointer-events: none;
}
.search-dropdown-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 2px 12px;
border-bottom: 1px solid #e4e4e7;
}
.search-product-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding-top: 12px;
}
.search-product-card {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 8px;
border-radius: 12px;
background: #ffffff;
box-shadow:
0 2px 10px rgba(0, 0, 0, 0.05);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
text-decoration: none;
}
.search-product-card:hover {
transform: translateY(-2px);
box-shadow:
0 5px 16px rgba(0, 0, 0, 0.08);
}
.search-product-card-image {
width: 64px;
height: 64px;
flex: 0 0 64px;
object-fit: contain;
border-radius: 10px;
background: #f4f4f5;
}
.search-product-card-content {
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.search-product-card-title {
color: #27272a;
font-size: 12px;
line-height: 1.7;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.search-product-card-price {
color: #27272a;
font-size: 12px;
font-weight: 600;
direction: rtl;
}
.search-product-card-old-price {
margin-right: 5px;
color: #a1a1aa;
text-decoration: line-through;
font-size: 10px;
}
.search-category-section,
.search-brand-section {
margin-top: 18px;
}
.search-section-heading {
margin-bottom: 8px;
color: #52525c;
font-size: 12px;
font-weight: 600;
}
.search-category-list,
.search-brand-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.search-category-item,
.search-brand-item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 10px;
border: 1px solid #e4e4e7;
border-radius: 999px;
color: #52525c;
font-size: 11px;
background: #ffffff;
transition:
background 0.2s ease,
border-color 0.2s ease;
}
.search-category-item:hover,
.search-brand-item:hover {
background: #fafafa;
border-color: #d4d4d8;
}
.search-brand-image {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
background: #f4f4f5;
}
.search-dropdown-footer {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #e4e4e7;
color: #2563eb;
font-size: 12px;
text-decoration: none;
}
.search-loading {
min-height: 160px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
color: #71717a;
font-size: 12px;
}
.search-spinner {
width: 28px;
height: 28px;
border: 3px solid #e4e4e7;
border-top-color: #52525c;
border-radius: 50%;
animation: search-spin 0.8s linear infinite;
}
@keyframes search-spin {
to {
transform: rotate(360deg);
}
}
.search-empty {
min-height: 180px;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.search-empty-icon {
width: 56px;
height: 56px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f4f4f5;
color: #a1a1aa;
}
.search-mobile-panel {
will-change: transform;
}
.search-mobile-panel.is-open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.search-mobile-input {
direction: rtl;
}
.search-mobile-content {
direction: rtl;
}
.search-section-title {
font-size: 13px;
color: #3f3f46;
font-weight: 500;
}
.search-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.search-tag {
display: inline-flex;
align-items: center;
padding: 7px 14px;
border: 1px solid #d4d4d8;
border-radius: 999px;
color: #52525c;
font-size: 11px;
text-decoration: none;
background: #ffffff;
transition:
background 0.2s ease,
border-color 0.2s ease;
}
.search-tag:hover {
background: #fafafa;
border-color: #a1a1aa;
}
.search-recent-list {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 8px;
}
.search-recent-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
border: 0;
background: transparent;
color: #52525c;
cursor: pointer;
text-align: right;
border-radius: 10px;
}
.search-recent-item:hover {
background: #f4f4f5;
}
.search-mobile-result {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid #f1f1f1;
text-decoration: none;
}
.search-mobile-result:last-child {
border-bottom: 0;
}
.search-mobile-result-image {
width: 68px;
height: 68px;
flex: 0 0 68px;
object-fit: contain;
border-radius: 10px;
background: #f4f4f5;
}
.search-mobile-result-content {
min-width: 0;
flex: 1;
}
.search-mobile-result-title {
color: #3f3f46;
font-size: 13px;
line-height: 1.8;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.search-mobile-result-meta {
margin-top: 6px;
font-size: 11px;
color: #a1a1aa;
}
.search-result-section {
margin-top: 18px;
}
.search-result-section:first-child {
margin-top: 0;
}
.search-result-section-title {
margin-bottom: 8px;
color: #3f3f46;
font-size: 13px;
font-weight: 500;
}
.search-result-pill-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.search-result-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 11px;
border: 1px solid #e4e4e7;
border-radius: 999px;
color: #52525c;
font-size: 11px;
text-decoration: none;
}
@media (max-width: 1023px) {
.search-dropdown {
display: none !important;
}
}
@media (min-width: 1024px) {
.search-mobile-panel,
#mobileSearchBtn {
display: none !important;
}
}
/* =========================================================
Blog Page
========================================================= */
.blog-page {
width: 100%;
min-height: 100vh;
padding-bottom: 5rem;
}
/* =========================================================
Container
========================================================= */
.blog-container {
width: min(100% - 2rem, 1380px);
margin-inline: auto;
}
/* =========================================================
Page Header
========================================================= */
.blog-page-header {
margin-bottom: 2rem;
padding-top: 1.5rem;
}
.blog-page-header-inner {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
}
.blog-title-wrapper {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.blog-title-line {
width: 4px;
min-width: 4px;
height: 42px;
margin-top: 4px;
border-radius: 999px;
background: var(--color-primary-500, #7c3aed);
}
.blog-page-title {
margin: 0;
color: #27272a;
font-family: inherit;
font-size: 1.7rem;
font-weight: 700;
line-height: 1.5;
}
.blog-page-description {
margin: 0.4rem 0 0;
color: #71717a;
font-size: 0.9rem;
line-height: 1.8;
}
.blog-result-count {
color: #a1a1aa;
font-size: 0.8rem;
}
.blog-result-count strong {
color: #52525b;
}
/* =========================================================
Featured
========================================================= */
.blog-featured-section {
margin-bottom: 2rem;
}
.blog-featured-grid {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: 1rem;
min-height: 470px;
}
.blog-featured-main {
position: relative;
overflow: hidden;
min-height: 470px;
border-radius: 1.5rem;
background: #f4f4f5;
}
.blog-featured-main-link,
.blog-featured-small-link {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.blog-featured-main-image,
.blog-featured-small-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-featured-main-link img,
.blog-featured-small-link img {
transition: transform 700ms ease;
}
.blog-featured-main:hover img,
.blog-featured-small:hover img {
transform: scale(1.05);
}
.blog-featured-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.88) 0%,
rgba(0, 0, 0, 0.35) 45%,
rgba(0, 0, 0, 0.05) 100%
);
}
.blog-featured-content {
position: absolute;
right: 0;
left: 0;
bottom: 0;
padding: 2rem;
color: #fff;
}
.blog-featured-category {
display: inline-flex;
align-items: center;
margin-bottom: 0.8rem;
padding: 0.3rem 0.75rem;
border: 1px solid rgba(255,255,255,.2);
border-radius: 0.6rem;
background: rgba(255,255,255,.12);
backdrop-filter: blur(10px);
color: #fff;
font-size: 0.7rem;
}
.blog-featured-main-title {
margin: 0;
color: #fff;
font-size: 1.7rem;
font-weight: 700;
line-height: 1.9;
}
.blog-featured-main-excerpt {
max-width: 700px;
margin: 0.8rem 0 0;
color: rgba(255,255,255,.84);
font-size: 0.88rem;
line-height: 1.9;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-featured-meta {
display: flex;
align-items: center;
gap: 0.6rem;
margin-top: 1.1rem;
color: rgba(255,255,255,.7);
font-size: 0.72rem;
}
.blog-meta-separator {
color: rgba(255,255,255,.35);
}
.blog-featured-secondary {
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: 1rem;
}
.blog-featured-small {
position: relative;
min-height: 0;
overflow: hidden;
border-radius: 1.5rem;
background: #f4f4f5;
}
.blog-featured-small-content {
position: absolute;
right: 0;
left: 0;
bottom: 0;
padding: 1.25rem;
color: #fff;
}
.blog-featured-small-title {
margin: 0;
color: #fff;
font-size: 1rem;
font-weight: 600;
line-height: 1.8;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* =========================================================
Search
========================================================= */
.blog-search-section {
margin-bottom: 2.5rem;
}
.blog-search-form {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px auto;
gap: 0.75rem;
padding: 0.75rem;
border: 1px solid #f0f0f2;
border-radius: 1.25rem;
background: #fff;
box-shadow:
0 5px 20px rgba(0,0,0,.03);
}
.blog-search-field {
position: relative;
}
.blog-search-icon {
position: absolute;
top: 50%;
right: 1rem;
width: 20px;
height: 20px;
transform: translateY(-50%);
fill: #a1a1aa;
pointer-events: none;
}
.blog-search-input,
.blog-category-select {
width: 100%;
height: 50px;
border: 1px solid #e4e4e7;
border-radius: 0.85rem;
background: #fafafa;
color: #3f3f46;
font-size: 0.85rem;
outline: none;
transition:
border-color 200ms ease,
background-color 200ms ease,
box-shadow 200ms ease;
}
.blog-search-input {
padding-right: 3rem;
padding-left: 1rem;
}
.blog-category-select {
padding-inline: 1rem;
}
.blog-search-input:focus,
.blog-category-select:focus {
border-color: #a78bfa;
background: #fff;
box-shadow:
0 0 0 3px rgba(124,58,237,.08);
}
.blog-search-input::placeholder {
color: #a1a1aa;
}
.blog-search-button {
min-width: 110px;
height: 50px;
padding-inline: 1.5rem;
border: 0;
border-radius: 0.85rem;
background: var(--color-primary-500, #7c3aed);
color: #fff;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition:
opacity 200ms ease,
transform 200ms ease;
}
.blog-search-button:hover {
opacity: .88;
}
.blog-search-button:active {
transform: scale(.98);
}
/* =========================================================
Active Filters
========================================================= */
.blog-active-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-top: 0.75rem;
}
.blog-active-label {
color: #71717a;
font-size: 0.75rem;
}
.blog-filter-chip {
padding: 0.35rem 0.7rem;
border-radius: 0.6rem;
background: #f5f3ff;
color: #6d28d9;
font-size: 0.72rem;
}
.blog-clear-filters {
color: #ef4444;
font-size: 0.72rem;
text-decoration: none;
}
.blog-clear-filters:hover {
color: #dc2626;
}
/* =========================================================
Main Layout
========================================================= */
.blog-content-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 310px;
align-items: start;
gap: 2rem;
}
/* =========================================================
Section Heading
========================================================= */
.blog-section-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
}
.blog-section-heading-right {
display: flex;
align-items: center;
gap: 0.65rem;
}
.blog-section-line {
width: 4px;
height: 25px;
border-radius: 999px;
background: var(--color-primary-500, #7c3aed);
}
.blog-section-heading h2 {
margin: 0;
color: #27272a;
font-size: 1.2rem;
font-weight: 600;
}
.blog-section-count {
color: #a1a1aa;
font-size: 0.75rem;
}
/* =========================================================
Post List
========================================================= */
.blog-post-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.blog-post-card {
display: grid;
grid-template-columns: 270px minmax(0, 1fr);
gap: 1.25rem;
padding: 0.75rem;
border: 1px solid #f0f0f2;
border-radius: 1.2rem;
background: #fff;
box-shadow:
0 2px 8px rgba(0,0,0,.025);
transition:
border-color 250ms ease,
box-shadow 250ms ease,
transform 250ms ease;
}
.blog-post-card:hover {
border-color: #e4e4e7;
box-shadow:
0 12px 30px rgba(0,0,0,.06);
transform: translateY(-2px);
}
.blog-post-card-image-link {
display: block;
width: 270px;
height: 190px;
overflow: hidden;
border-radius: 0.9rem;
background: #f4f4f5;
}
.blog-post-card-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.blog-post-card:hover .blog-post-card-image {
transform: scale(1.05);
}
.blog-post-card-content {
display: flex;
min-width: 0;
flex-direction: column;
justify-content: space-between;
padding: 0.25rem 0;
}
.blog-post-card-categories {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 0.5rem;
}
.blog-category-tag {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.55rem;
border-radius: 0.45rem;
background: #f5f3ff;
color: #7c3aed;
font-size: 0.65rem;
text-decoration: none;
}
.blog-category-tag:hover {
background: #ede9fe;
}
.blog-post-card-title {
margin: 0;
color: #27272a;
font-size: 1.15rem;
font-weight: 600;
line-height: 1.8;
}
.blog-post-card-title a {
color: inherit;
text-decoration: none;
}
.blog-post-card-title a:hover {
color: #7c3aed;
}
.blog-post-card-excerpt {
margin: 0.55rem 0 0;
color: #71717a;
font-size: 0.82rem;
line-height: 1.9;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-post-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid #f4f4f5;
}
.blog-post-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.45rem;
color: #a1a1aa;
font-size: 0.7rem;
}
.blog-dot {
color: #d4d4d8;
}
.blog-read-more {
color: #7c3aed;
font-size: 0.7rem;
opacity: 0;
transform: translateX(-5px);
transition:
opacity 200ms ease,
transform 200ms ease;
}
.blog-post-card:hover .blog-read-more {
opacity: 1;
transform: translateX(0);
}
/* =========================================================
Image Placeholder
========================================================= */
.blog-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: #f4f4f5;
color: #a1a1aa;
}
.blog-image-placeholder span {
font-size: 0.7rem;
}
/* =========================================================
Empty State
========================================================= */
.blog-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 5rem 1.5rem;
border: 1px solid #f0f0f2;
border-radius: 1.25rem;
background: #fff;
text-align: center;
}
.blog-empty-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin-bottom: 1rem;
border-radius: 1rem;
background: #f4f4f5;
}
.blog-empty-icon svg {
width: 32px;
height: 32px;
fill: #a1a1aa;
}
.blog-empty-state h3 {
margin: 0;
color: #3f3f46;
font-size: 1rem;
}
.blog-empty-state p {
margin: 0.5rem 0 0;
color: #a1a1aa;
font-size: 0.8rem;
}
.blog-empty-state a {
display: inline-flex;
margin-top: 1.25rem;
padding: 0.65rem 1rem;
border-radius: 0.75rem;
background: #7c3aed;
color: #fff;
font-size: 0.78rem;
text-decoration: none;
}
/* =========================================================
Sidebar
========================================================= */
.blog-sidebar {
position: sticky;
top: 90px;
display: flex;
flex-direction: column;
gap: 1rem;
}
.blog-sidebar-box {
padding: 1rem;
border: 1px solid #f0f0f2;
border-radius: 1.2rem;
background: #fff;
box-shadow:
0 2px 8px rgba(0,0,0,.025);
}
.blog-sidebar-title {
display: flex;
align-items: center;
gap: 0.6rem;
padding-bottom: 0.85rem;
border-bottom: 1px solid #f0f0f2;
}
.blog-sidebar-title > span {
width: 4px;
height: 20px;
border-radius: 999px;
background: #7c3aed;
}
.blog-sidebar-title h2 {
margin: 0;
color: #3f3f46;
font-size: 0.95rem;
font-weight: 600;
}
/* =========================================================
Sidebar Latest
========================================================= */
.blog-sidebar-list {
display: flex;
flex-direction: column;
}
.blog-sidebar-post {
display: grid;
grid-template-columns: 82px minmax(0, 1fr);
gap: 0.75rem;
padding: 0.85rem 0;
border-bottom: 1px solid #f4f4f5;
text-decoration: none;
}
.blog-sidebar-post:last-child {
border-bottom: 0;
}
.blog-sidebar-image {
width: 82px;
height: 66px;
overflow: hidden;
border-radius: 0.7rem;
background: #f4f4f5;
}
.blog-sidebar-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 400ms ease;
}
.blog-sidebar-post:hover .blog-sidebar-image img {
transform: scale(1.05);
}
.blog-sidebar-post-content {
min-width: 0;
}
.blog-sidebar-post-content h3 {
margin: 0;
color: #52525b;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.8;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 200ms ease;
}
.blog-sidebar-post:hover h3 {
color: #7c3aed;
}
.blog-sidebar-post-content time {
display: block;
margin-top: 0.35rem;
color: #a1a1aa;
font-size: 0.6rem;
}
.blog-sidebar-empty {
padding: 1.5rem 0;
color: #a1a1aa;
font-size: 0.75rem;
text-align: center;
}
/* =========================================================
Sidebar Categories
========================================================= */
.blog-sidebar-categories {
padding-top: 0.5rem;
}
.blog-sidebar-category {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.75rem 0.55rem;
border-radius: 0.65rem;
color: #52525b;
font-size: 0.78rem;
text-decoration: none;
transition:
background-color 200ms ease,
color 200ms ease;
}
.blog-sidebar-category:hover {
background: #f5f3ff;
color: #7c3aed;
}
.blog-sidebar-category svg {
width: 15px;
height: 15px;
fill: #d4d4d8;
transition: fill 200ms ease;
}
.blog-sidebar-category:hover svg {
fill: #7c3aed;
}
/* =========================================================
Pagination
========================================================= */
.blog-pagination {
display: flex;
justify-content: center;
margin-top: 2rem;
}
.blog-pagination nav {
width: 100%;
}
.blog-pagination nav > div {
display: flex;
justify-content: center;
}
.blog-pagination ul {
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.blog-pagination li {
list-style: none;
}
.blog-pagination a,
.blog-pagination span {
display: flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding-inline: 0.75rem;
border: 1px solid #f0f0f2;
border-radius: 0.65rem;
background: #fff;
color: #71717a;
font-size: 0.72rem;
text-decoration: none;
transition:
background-color 200ms ease,
border-color 200ms ease,
color 200ms ease;
}
.blog-pagination a:hover {
border-color: #7c3aed;
background: #7c3aed;
color: #fff;
}
.blog-pagination span[aria-current="page"] {
border-color: #7c3aed;
background: #7c3aed;
color: #fff;
}
/* =========================================================
Responsive - Tablet
========================================================= */
@media (max-width: 1100px) {
.blog-content-layout {
grid-template-columns: minmax(0, 1fr) 280px;
gap: 1.25rem;
}
.blog-post-card {
grid-template-columns: 220px minmax(0, 1fr);
}
.blog-post-card-image-link {
width: 220px;
height: 165px;
}
.blog-featured-main-title {
font-size: 1.4rem;
}
}
/* =========================================================
Responsive - Mobile
========================================================= */
@media (max-width: 900px) {
.blog-container {
width: min(100% - 1rem, 680px);
}
.blog-page-header {
padding-top: 1rem;
}
.blog-page-header-inner {
align-items: flex-start;
}
.blog-page-description {
font-size: 0.78rem;
}
.blog-result-count {
display: none;
}
.blog-featured-grid {
grid-template-columns: 1fr;
min-height: auto;
}
.blog-featured-main {
min-height: 380px;
}
.blog-featured-secondary {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: none;
}
.blog-featured-small {
min-height: 220px;
}
.blog-content-layout {
grid-template-columns: 1fr;
}
.blog-sidebar {
position: static;
}
}
/* =========================================================
Responsive - Small Mobile
========================================================= */
@media (max-width: 640px) {
.blog-container {
width: min(100% - 1rem, 100%);
}
.blog-page-title {
font-size: 1.4rem;
}
.blog-page-description {
font-size: 0.72rem;
}
.blog-title-line {
height: 34px;
}
/* Featured */
.blog-featured-main {
min-height: 300px;
border-radius: 1.1rem;
}
.blog-featured-small {
min-height: 170px;
border-radius: 1rem;
}
.blog-featured-content {
padding: 1rem;
}
.blog-featured-main-title {
font-size: 1.1rem;
line-height: 1.8;
}
.blog-featured-main-excerpt {
display: none;
}
.blog-featured-small-content {
padding: 0.8rem;
}
.blog-featured-small-title {
font-size: 0.78rem;
line-height: 1.7;
}
.blog-featured-category {
margin-bottom: 0.4rem;
padding: 0.2rem 0.5rem;
font-size: 0.58rem;
}
/* Search */
.blog-search-form {
grid-template-columns: 1fr;
padding: 0.65rem;
border-radius: 1rem;
}
.blog-search-button {
width: 100%;
}
/* Section */
.blog-section-heading h2 {
font-size: 1rem;
}
/* Post card */
.blog-post-card {
display: flex;
flex-direction: column;
gap: 0.8rem;
padding: 0.65rem;
border-radius: 1rem;
}
.blog-post-card-image-link {
width: 100%;
height: 210px;
border-radius: 0.8rem;
}
.blog-post-card-content {
padding: 0.25rem 0.2rem 0.4rem;
}
.blog-post-card-title {
font-size: 0.95rem;
line-height: 1.8;
}
.blog-post-card-excerpt {
font-size: 0.73rem;
line-height: 1.8;
}
.blog-post-card-footer {
margin-top: 0.8rem;
}
.blog-read-more {
display: none;
}
/* Sidebar */
.blog-sidebar-box {
border-radius: 1rem;
}
}
/* =========================================
Product Listing
========================================= */
/*
|--------------------------------------------------------------------------
| Product listing — theme tokens (scoped: .product-list-page)
|--------------------------------------------------------------------------
| Presentation for resources/views/pages/product/index.blade.php.
| Values reuse the compiled palette from output.css (Tailwind theme).
|
| --color-primary is redefined here because the legacy sorting / filter
| rules reference it while the storefront bundle never declared it. That
| silently disabled the active sort item, the filter checkboxes, the
| availability switch and the mobile apply button (white on white).
*/
.product-list-page {
--color-primary: var(--color-primary-500, #214792);
--pl-primary: var(--color-primary-500, #214792);
--pl-primary-strong: var(--color-primary-600, #1C3C7C);
--pl-primary-tint: #EFF3FA;
--pl-primary-border: #D6E1F3;
--pl-border: var(--color-zinc-200, #e4e4e7);
--pl-border-soft: #f1f1f3;
--pl-surface: #fff;
--pl-surface-muted: #fafafa;
--pl-hover: #f7f7f8;
--pl-text: var(--color-zinc-800, #27272a);
--pl-text-secondary: var(--color-zinc-600, #52525b);
--pl-text-muted: var(--color-zinc-500, #71717a);
--pl-text-faint: var(--color-zinc-400, #a1a1aa);
--pl-radius: 1rem;
--pl-radius-sm: 0.75rem;
--pl-shadow: 0 1px 2px rgb(24 24 27 / 0.05);
--pl-focus: 0 0 0 3px rgb(33 71 146 / 0.16);
}
.product-list-page {
margin-top: 2rem;
padding-bottom: 5rem;
}
.product-list-container {
max-width: 1440px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* =========================================
Header
========================================= */
.product-list-header {
margin-bottom: 1.5rem;
}
.product-breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
font-size: 0.75rem;
color: #a1a1aa;
}
.product-breadcrumb a {
transition: color 0.2s ease;
}
.product-breadcrumb a:hover {
color: var(--color-primary);
}
.product-list-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.product-list-title {
color: #27272a;
font-family: 'YekanBakhBold', sans-serif;
font-size: 1.6rem;
}
.product-list-title-highlight {
color: var(--color-primary);
}
.product-count {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.3rem 0.7rem;
border-radius: 999px;
background: #f4f4f5;
color: #71717a;
font-size: 0.75rem;
}
/* =========================================
Active Filters
========================================= */
.active-filters {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1.25rem;
}
.active-filters-title {
color: var(--pl-text-muted);
font-size: 0.75rem;
}
.active-filter {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.42rem 0.8rem;
border: 1px solid var(--pl-primary-border);
border-radius: 999px;
background: var(--pl-primary-tint);
color: var(--pl-primary-strong);
font-size: 0.72rem;
}
.clear-filters {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-right: 0.5rem;
padding: 0.42rem 0.8rem;
border: 1px solid #fee2e2;
border-radius: 999px;
background: #fef2f2;
color: #dc2626;
font-size: 0.72rem;
white-space: nowrap;
text-decoration: none;
transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
.clear-filters:hover {
border-color: #fecaca;
background: #fee2e2;
color: #b91c1c;
}
/* =========================================
Main Layout
========================================= */
.product-list-layout {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 1.5rem;
}
/* =========================================
Filter Sidebar
========================================= */
.product-filter {
position: sticky;
top: 1rem;
height: fit-content;
border: 1px solid var(--pl-border);
border-radius: var(--pl-radius);
background: var(--pl-surface);
box-shadow: var(--pl-shadow);
overflow: hidden;
}
/* Panel Header (shared by the desktop sidebar and the mobile drawer) */
.mobile-filter-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.95rem 1.1rem;
border-bottom: 1px solid var(--pl-border-soft);
background: var(--pl-surface);
}
.mobile-filter-header-text {
display: flex;
align-items: center;
gap: 0.65rem;
min-width: 0;
}
.mobile-filter-header-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 0.6rem;
background: var(--pl-primary-tint);
color: var(--pl-primary);
}
.mobile-filter-header-icon svg {
display: block;
}
.mobile-filter-header h2 {
margin: 0;
color: var(--pl-text);
font-family: 'YekanBakhBold', sans-serif;
font-size: 0.92rem;
}
.mobile-filter-header p {
margin: 0.15rem 0 0;
color: var(--pl-text-faint);
font-size: 0.68rem;
}
/* The close button only exists while the panel is an overlay (mobile) */
.mobile-filter-close {
display: none;
}
.filter-section {
border-bottom: 1px solid var(--pl-border-soft);
}
.filter-section:last-child {
border-bottom: 0;
}
.filter-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
min-height: 50px;
padding: 0.95rem 1.1rem;
border: 0;
background: transparent;
color: var(--pl-text);
font-family: 'YekanBakhBold', sans-serif;
font-size: 0.85rem;
text-align: right;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease;
}
.filter-toggle:hover {
background: var(--pl-hover);
}
.filter-toggle:focus-visible {
outline: 2px solid var(--pl-primary);
outline-offset: -2px;
}
.filter-toggle-icon {
width: 1rem;
height: 1rem;
flex-shrink: 0;
color: var(--pl-text-faint);
transition:
transform 0.25s ease,
color 0.2s ease;
}
.filter-toggle:hover .filter-toggle-icon {
color: var(--pl-text);
}
.filter-toggle.active .filter-toggle-icon {
transform: rotate(180deg);
}
.filter-content {
padding: 0 1.1rem 1.1rem;
}
.filter-content.hidden {
display: none;
}
/* =========================================
Checkbox Filter
========================================= */
.filter-options {
display: flex;
flex-direction: column;
gap: 0.15rem;
max-height: 260px;
overflow-y: auto;
overflow-x: hidden;
/* Slim, on-brand scrollbar (the global one is 12px wide) */
scrollbar-width: thin;
scrollbar-color: var(--pl-border) transparent;
}
.filter-options::-webkit-scrollbar {
width: 6px;
}
.filter-options::-webkit-scrollbar-track {
background: transparent;
}
.filter-options::-webkit-scrollbar-thumb {
border: 0;
border-radius: 999px;
background: var(--pl-border);
box-shadow: none;
}
.filter-option {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.6rem;
border: 1px solid transparent;
border-radius: var(--pl-radius-sm);
cursor: pointer;
transition:
background 0.2s ease,
border-color 0.2s ease;
}
.filter-option:hover {
background: var(--pl-hover);
}
/* Selected rows stay highlighted, so the active filters are readable */
.filter-option:has(input:checked) {
border-color: var(--pl-primary-border);
background: var(--pl-primary-tint);
}
.filter-option input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
margin: 0;
flex-shrink: 0;
border: 1.5px solid var(--color-zinc-300, #d4d4d8);
border-radius: 0.35rem;
background-color: var(--pl-surface);
cursor: pointer;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease;
}
.filter-option input[type="checkbox"]:hover {
border-color: var(--pl-primary);
}
.filter-option input[type="checkbox"]:checked {
border-color: var(--pl-primary);
background-color: var(--pl-primary);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.filter-option input[type="checkbox"]:focus-visible {
outline: none;
box-shadow: var(--pl-focus);
}
.filter-option-label {
color: var(--pl-text-secondary);
font-size: 0.8rem;
transition: color 0.2s ease;
}
.filter-option:has(input:checked) .filter-option-label {
color: var(--pl-primary-strong);
}
/* =========================================
Price Filter
========================================= */
.price-values {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.price-box {
padding: 0.6rem;
border: 1px solid #e4e4e7;
border-radius: 0.75rem;
background: #fafafa;
text-align: center;
}
.price-box-label {
display: block;
margin-bottom: 0.2rem;
color: #a1a1aa;
font-size: 0.65rem;
}
.price-box-value {
color: #3f3f46;
font-size: 0.75rem;
}
/* =========================================
Availability Toggle
========================================= */
.availability-filter {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.1rem;
}
.availability-title {
color: var(--pl-text);
font-family: 'YekanBakhBold', sans-serif;
font-size: 0.82rem;
}
.availability-description {
margin-top: 0.2rem;
color: var(--pl-text-faint);
font-size: 0.68rem;
}
.switch {
position: relative;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.switch input {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
cursor: pointer;
}
.switch-slider {
position: absolute;
inset: 0;
border-radius: 999px;
background: var(--color-zinc-200, #e4e4e7);
cursor: pointer;
transition: background 0.25s ease;
}
.switch-slider::after {
content: "";
position: absolute;
top: 2px;
right: 2px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
transition: transform 0.25s ease;
}
.switch input:checked + .switch-slider {
background: var(--pl-primary);
}
.switch input:checked + .switch-slider::after {
transform: translateX(-20px);
}
.switch input:focus-visible + .switch-slider {
box-shadow: var(--pl-focus);
}
/* =========================================
Sorting Toolbar
========================================= */
.product-sort {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.6rem 0.7rem;
margin-bottom: 1rem;
border: 1px solid var(--pl-border);
border-radius: var(--pl-radius);
background: var(--pl-surface);
box-shadow: var(--pl-shadow);
}
.product-sort-list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.25rem;
min-width: 0;
}
.product-sort-title {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-left: 0.5rem;
padding-left: 0.85rem;
border-left: 1px solid var(--pl-border-soft);
color: var(--pl-text-muted);
font-family: 'YekanBakhBold', sans-serif;
font-size: 0.78rem;
white-space: nowrap;
}
.product-sort-title svg {
display: block;
flex-shrink: 0;
width: 16px;
height: 16px;
color: var(--pl-text-faint);
}
.product-sort-item {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 0 0.75rem;
border: 1px solid transparent;
border-radius: 999px;
background: transparent;
color: var(--pl-text-muted);
font-family: inherit;
font-size: 0.76rem;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
.product-sort-item:hover {
background: var(--pl-hover);
color: var(--pl-text);
}
.product-sort-item:focus-visible {
outline: none;
box-shadow: var(--pl-focus);
}
.product-sort-item.active {
border-color: var(--pl-primary-border);
background: var(--pl-primary-tint);
color: var(--pl-primary-strong);
font-family: 'YekanBakhBold', sans-serif;
}
.product-sort-result {
display: inline-flex;
align-items: center;
padding: 0.34rem 0.7rem;
border: 1px solid var(--pl-border-soft);
border-radius: 999px;
background: var(--pl-surface-muted);
color: var(--pl-text-muted);
font-size: 0.72rem;
white-space: nowrap;
}
/* =========================================
Mobile Sort
========================================= */
.mobile-sort {
display: none;
}
.mobile-sort-select {
width: 100%;
height: 46px;
appearance: none;
-webkit-appearance: none;
padding: 0 1rem 0 2.5rem;
border: 1px solid var(--pl-border);
border-radius: var(--pl-radius-sm);
background-color: var(--pl-surface);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left 0.9rem center;
color: var(--pl-text);
font-family: 'YekanBakhBold', sans-serif;
font-size: 0.78rem;
box-shadow: var(--pl-shadow);
cursor: pointer;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.mobile-sort-select:hover {
border-color: var(--pl-primary-border);
}
.mobile-sort-select:focus-visible {
outline: none;
border-color: var(--pl-primary);
box-shadow: var(--pl-focus);
}
/* Prevent iOS Safari auto-zoom on focus (needs >= 16px) */
@media (pointer: coarse) {
.mobile-sort-select {
font-size: 1rem;
}
}
/* =========================================
Product Grid
========================================= */
.products-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
/* =========================================
Product Card
========================================= */
.product-card {
position: relative;
overflow: hidden;
border: 1px solid #f0f0f2;
border-radius: 1.25rem;
background: #fff;
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.product-card:hover {
z-index: 2;
transform: translateY(-4px);
border-color: #e4e4e7;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.07);
}
/* =========================================
Product Image
========================================= */
.product-card-image {
position: relative;
aspect-ratio: 1 / 1;
padding: 1.5rem;
background: #fafafa;
overflow: hidden;
}
.product-card-image img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.5s ease;
}
.product-card:hover .product-card-image img {
transform: scale(1.06);
}
/* =========================================
Discount Badge
========================================= */
.product-discount {
position: absolute;
top: 0.9rem;
right: 0.9rem;
z-index: 5;
padding: 0.3rem 0.6rem;
border-radius: 999px;
background: var(--color-primary);
color: #fff;
font-family: 'YekanBakhBold', sans-serif;
font-size: 0.65rem;
}
/* =========================================
Product Colors
========================================= */
.product-colors {
position: absolute;
top: 1rem;
left: 1rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.product-color {
width: 13px;
height: 13px;
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px #d4d4d8;
}
/* =========================================
Product Hover Action
========================================= */
.product-quick-view {
position: absolute;
right: 1rem;
bottom: 1rem;
left: 1rem;
display: flex;
justify-content: center;
opacity: 0;
transform: translateY(8px);
transition: all 0.3s ease;
}
.product-card:hover .product-quick-view {
opacity: 1;
transform: translateY(0);
}
.product-quick-view-button {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.55rem 0.9rem;
border-radius: 0.7rem;
background: rgba(255, 255, 255, 0.95);
color: #52525b;
font-size: 0.7rem;
box-shadow:
0 5px 15px rgba(0, 0, 0, 0.1);
}
/* =========================================
Product Information
========================================= */
.product-card-content {
padding: 1rem;
}
.product-brand {
margin-bottom: 0.4rem;
color: #a1a1aa;
font-size: 0.65rem;
}
.product-title {
min-height: 48px;
display: -webkit-box;
overflow: hidden;
color: #3f3f46;
font-size: 0.85rem;
line-height: 1.8;
font-family: 'YekanBakhBold', sans-serif;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
transition: color 0.2s ease;
}
.product-card:hover .product-title {
color: var(--color-primary);
}
/* =========================================
Rating
========================================= */
.product-rating {
display: flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.65rem;
}
.product-rating-stars {
display: flex;
align-items: center;
gap: 2px;
}
.product-rating-star {
width: 14px;
height: 14px;
color: #fbbf24;
fill: #fbbf24;
}
.product-rating-number {
color: #a1a1aa;
font-size: 0.65rem;
}
/* =========================================
Product Divider
========================================= */
.product-card-divider {
width: 100%;
height: 1px;
margin: 0.9rem 0;
background: #f4f4f5;
}
/* =========================================
Product Price
========================================= */
.product-price-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 0.5rem;
}
.product-price-old {
margin-bottom: 0.15rem;
color: #a1a1aa;
font-size: 0.65rem;
text-decoration: line-through;
}
.product-price {
display: flex;
align-items: center;
gap: 0.3rem;
}
.product-price-value {
color: #27272a;
font-family: 'YekanBakhExtraBold', sans-serif;
font-size: 1.05rem;
}
.product-price-currency {
color: #71717a;
font-size: 0.6rem;
}
/* =========================================
Stock
========================================= */
.product-stock {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: #059669;
font-size: 0.65rem;
}
.product-stock-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #10b981;
}
.product-stock.out-of-stock {
color: #ef4444;
}
.product-stock.out-of-stock .product-stock-dot {
background: #ef4444;
}
/* Out-of-stock label shown in place of the price on product cards:
a larger, bolder variant of the stock badge. */
.product-stock.product-unavailable {
font-size: 0.85rem;
font-family: 'YekanBakhBold', sans-serif;
gap: 0.4rem;
}
.product-stock.product-unavailable .product-stock-dot {
width: 8px;
height: 8px;
}
/* =========================================
Empty State
========================================= */
.product-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 420px;
padding: 2rem;
border: 1px dashed #d4d4d8;
border-radius: 1.5rem;
background: #fff;
text-align: center;
}
.product-empty-icon {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 50%;
background: #f4f4f5;
color: #a1a1aa;
}
.product-empty-title {
margin-top: 1.2rem;
color: #3f3f46;
font-family: 'YekanBakhBold', sans-serif;
font-size: 1rem;
}
.product-empty-description {
max-width: 400px;
margin-top: 0.5rem;
color: #a1a1aa;
font-size: 0.75rem;
}
/* =========================================
Pagination
========================================= */
.product-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin-top: 2.5rem;
}
.product-pagination a,
.product-pagination span {
min-width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.65rem;
border: 1px solid #f1f1f3;
border-radius: 0.7rem;
background: #fff;
color: #71717a;
font-size: 0.75rem;
transition: all 0.2s ease;
}
.product-pagination a:hover {
border-color: var(--color-primary);
background: var(--color-primary);
color: #fff;
}
.product-pagination .active {
border-color: var(--color-primary);
background: var(--color-primary);
color: #fff;
}
/* =========================================
Mobile Filter Button - Final (bottom position)
========================================= */
.mobile-filter-button {
display: none; /* hidden on desktop */
}
.mobile-filter-button-icon,
.mobile-filter-button-label,
.mobile-filter-count {
display: none;
}
/* =========================================
Filter Overlay - hidden on desktop
========================================= */
.filter-overlay {
display: none;
}
/* =========================================
Mobile Filter Actions - hidden on desktop
========================================= */
.mobile-filter-actions {
display: none;
}
.mobile-filter-submit {
width: 100%;
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border: 0;
border-radius: var(--pl-radius-sm);
background: var(--pl-primary);
color: #fff;
font-family: 'YekanBakhBold', sans-serif;
font-size: 0.85rem;
line-height: 1;
cursor: pointer;
box-shadow:
0 8px 20px rgb(33 71 146 / 0.22);
transition:
background 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
.mobile-filter-submit:hover {
background: var(--pl-primary-strong);
box-shadow:
0 10px 24px rgb(33 71 146 / 0.28);
}
.mobile-filter-submit:active {
transform: translateY(1px);
box-shadow:
0 5px 12px rgb(33 71 146 / 0.2);
}
.mobile-filter-submit:focus-visible {
outline: 3px solid rgb(33 71 146 / 0.25);
outline-offset: 2px;
}
/* =========================================
Tablet / Mobile (<= 1024px)
========================================= */
@media (max-width: 1024px) {
/* Layout */
.product-list-container {
padding: 0 1rem;
}
.product-list-layout {
grid-template-columns: 1fr;
}
/* Fullscreen Filter Overlay */
.product-filter {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 110;
width: 100%;
max-width: none;
/* iOS Safari: 100% / 100vh fallback, then dvh when supported */
height: 100%;
height: 100dvh;
max-height: none;
display: flex;
flex-direction: column;
border: 0;
border-radius: 0;
background: #fff;
overflow: hidden;
overscroll-behavior: none;
transform: translateY(100%);
visibility: hidden;
opacity: 0;
pointer-events: none;
transition:
transform 0.35s ease,
opacity 0.25s ease,
visibility 0.35s ease;
}
.product-filter.is-open {
transform: translateY(0);
visibility: visible;
opacity: 1;
pointer-events: auto;
}
/* Filter Form */
.product-filter form {
min-height: 0;
display: flex;
flex: 1;
flex-direction: column;
}
/* Mobile Header */
.mobile-filter-header {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
padding: 0.95rem 1.1rem;
padding-top: calc(0.95rem + env(safe-area-inset-top));
border-bottom: 1px solid var(--pl-border-soft);
background: var(--pl-surface);
}
.mobile-filter-header-text {
gap: 0.7rem;
}
.mobile-filter-header h2 {
font-size: 0.95rem;
}
.mobile-filter-header p {
font-size: 0.68rem;
}
.mobile-filter-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
flex-shrink: 0;
border: 1px solid var(--pl-border);
border-radius: var(--pl-radius-sm);
background: var(--pl-surface-muted);
color: var(--pl-text-secondary);
cursor: pointer;
transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
.mobile-filter-close:hover {
background: var(--pl-hover);
border-color: var(--pl-primary-border);
color: var(--pl-text);
}
.mobile-filter-close:focus-visible {
outline: none;
box-shadow: var(--pl-focus);
}
/* Scrollable Filter Body */
.mobile-filter-body {
min-height: 0;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--pl-border) transparent;
}
.mobile-filter-body::-webkit-scrollbar {
width: 6px;
}
.mobile-filter-body::-webkit-scrollbar-track {
background: transparent;
}
.mobile-filter-body::-webkit-scrollbar-thumb {
border: 0;
border-radius: 999px;
background: var(--pl-border);
box-shadow: none;
}
/* Sections */
.filter-toggle {
min-height: 54px;
padding: 0.9rem 1.1rem;
font-size: 0.85rem;
}
.filter-content {
padding: 0 1.1rem 1.1rem;
}
.filter-options {
max-height: 300px;
}
.filter-option {
min-height: 44px;
padding: 0.6rem 0.65rem;
}
.filter-option-label {
font-size: 0.82rem;
}
/* Availability */
.availability-filter {
padding: 1rem 1.1rem;
}
/* Filter Overlay */
.filter-overlay {
position: fixed;
inset: 0;
z-index: 100;
display: block;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.3s ease,
visibility 0.3s ease;
}
.filter-overlay.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Mobile Filter Button - FIXED */
.mobile-filter-button {
position: fixed;
right: 1rem;
bottom: calc(64px + 1rem + env(safe-area-inset-bottom));
z-index: 120; /* بالاتر از ناوبری موبایل */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 46px;
padding: 0.55rem 0.7rem 0.55rem 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 0.9rem;
background: linear-gradient(135deg, var(--pl-primary) 0%, var(--pl-primary-strong) 100%);
color: #fff;
font-family: 'YekanBakhBold', sans-serif;
font-size: 0.78rem;
line-height: 1;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.16);
cursor: pointer;
transition:
transform 0.2s ease,
opacity 0.2s ease,
visibility 0.2s ease,
box-shadow 0.2s ease;
}
.mobile-filter-button:hover {
transform: translateY(-2px);
box-shadow: 0 13px 30px rgba(0, 0, 0, 0.2);
}
.mobile-filter-button:active {
transform: translateY(0);
}
.mobile-filter-button:focus-visible {
outline: 3px solid rgb(33 71 146 / 0.25);
outline-offset: 3px;
}
/* Button Icon */
.mobile-filter-button-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 0.65rem;
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
.mobile-filter-button-icon svg {
display: block;
}
/* Button Label */
.mobile-filter-button-label {
display: inline;
white-space: nowrap;
}
/* Active Filter Count */
.mobile-filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 21px;
height: 21px;
padding: 0 0.35rem;
flex-shrink: 0;
border-radius: 999px;
background: #fff;
color: var(--pl-primary);
font-family: 'YekanBakhBold', sans-serif;
font-size: 0.62rem;
line-height: 1;
}
/* Hide Button While Filter Open */
.mobile-filter-button.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(10px);
}
/* Mobile Filter Actions */
.mobile-filter-actions {
display: block;
flex-shrink: 0;
padding: 0.8rem 1.1rem;
border-top: 1px solid var(--pl-border-soft);
background: var(--pl-surface);
box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.04);
padding-bottom: calc(0.8rem + env(safe-area-inset-bottom));
}
/* Mobile Sort */
.product-sort {
display: none;
}
.mobile-sort {
display: block;
margin-bottom: 1rem;
}
/* Sort + Filters Row */
.mobile-sort-row {
display: flex;
align-items: stretch;
gap: 0.5rem;
min-width: 0;
}
.mobile-sort-select {
flex: 1 1 0;
min-width: 0;
}
/* Filters Button (next to sorting) */
.mobile-sort-filter-button {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: 44px;
padding: 0 0.9rem;
border: 0;
border-radius: var(--pl-radius-sm);
background: var(--pl-primary);
color: #fff;
font-family: 'YekanBakhBold', sans-serif;
font-size: 0.78rem;
line-height: 1;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 6px 16px rgb(33 71 146 / 0.2);
transition:
background 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
.mobile-sort-filter-button svg {
display: block;
flex-shrink: 0;
}
.mobile-sort-filter-button:hover {
background: var(--pl-primary-strong);
box-shadow: 0 8px 20px rgb(33 71 146 / 0.26);
}
.mobile-sort-filter-button:active {
transform: translateY(1px);
}
.mobile-sort-filter-button:focus-visible {
outline: 3px solid rgb(33 71 146 / 0.25);
outline-offset: 2px;
}
/* Product Grid */
.products-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Body Lock (html + body for iOS Safari) */
html.filter-open,
body.filter-open {
overflow: hidden;
overscroll-behavior: none;
}
}
/* =========================================
Mobile (<= 768px)
========================================= */
@media (max-width: 768px) {
.product-list-page {
margin-top: 1rem;
}
.product-list-title {
font-size: 1.25rem;
}
.product-list-title-row {
align-items: flex-start;
flex-direction: column;
}
.products-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
.product-card {
border-radius: 1rem;
}
.product-card-image {
padding: 1rem;
}
.product-card-content {
padding: 0.8rem;
}
.product-title {
font-size: 0.75rem;
}
.product-price-value {
font-size: 0.9rem;
}
.product-quick-view {
display: none;
}
/* Mobile Filter Button - FIXED */
.mobile-filter-button {
right: 0.75rem;
bottom: calc(60px + 0.8rem + env(safe-area-inset-bottom)); /* بالاتر از ناوبری */
min-height: 44px;
padding: 0.5rem 0.65rem 0.5rem 0.75rem;
border-radius: 0.85rem;
font-size: 0.75rem;
}
.mobile-filter-button-icon {
width: 29px;
height: 29px;
}
.mobile-filter-count {
min-width: 20px;
height: 20px;
}
/* Fullscreen Filter */
.product-filter {
max-height: 100dvh;
border-radius: 0;
}
}
/* =========================================
Small Mobile (<= 480px)
========================================= */
@media (max-width: 480px) {
.product-list-container {
padding: 0 0.75rem;
}
.products-grid {
gap: 0.6rem;
}
.product-card-content {
padding: 0.7rem;
}
.product-discount {
top: 0.6rem;
right: 0.6rem;
font-size: 0.55rem;
}
.product-colors {
top: 0.7rem;
left: 0.7rem;
}
.product-price-currency {
display: none;
}
/* Mobile Filter Button - FIXED */
.mobile-filter-button {
right: 0.65rem;
bottom: calc(60px + 0.75rem + env(safe-area-inset-bottom));
}
/* Filter Actions */
.mobile-filter-actions {
padding-right: 0.85rem;
padding-left: 0.85rem;
padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
}
.mobile-filter-submit {
min-height: 48px;
border-radius: 0.85rem;
font-size: 0.8rem;
}
}
/* =========================================
Mobile Navigation z-index
========================================= */
.mobile-navigation {
z-index: 100;
}
/* ==========================================================================
Product Reviews
========================================================================== */
.product-reviews {
margin-top: 3.5rem;
scroll-margin-top: 5rem;
}
/* ==========================================================================
Header
========================================================================== */
.product-reviews__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
}
.product-reviews__title {
margin: 0;
color: rgb(39 39 42);
font-family: YekanBakhBold, sans-serif;
font-size: 1.125rem;
line-height: 1.75rem;
}
.product-reviews__subtitle {
margin: 0.25rem 0 0;
color: rgb(161 161 170);
font-size: 0.75rem;
line-height: 1.25rem;
}
.product-reviews__count {
color: rgb(161 161 170);
font-size: 0.75rem;
line-height: 1rem;
}
/* ==========================================================================
Rating Summary
========================================================================== */
.product-reviews__summary {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 1.5rem;
}
.product-reviews__overall {
border: 1px solid rgb(228 228 231);
border-radius: 1rem;
background: rgb(250 250 250 / 70%);
padding: 1.25rem;
}
.product-reviews__overall-content {
display: flex;
align-items: center;
gap: 1rem;
}
.product-reviews__score-wrapper {
min-width: 5rem;
flex-shrink: 0;
text-align: center;
}
.product-reviews__score {
color: rgb(39 39 42);
font-family: YekanBakhExtraBold, sans-serif;
font-size: 2.25rem;
line-height: 1;
}
.product-reviews__stars {
display: flex;
align-items: center;
justify-content: center;
gap: 0.125rem;
margin-top: 0.5rem;
}
.product-reviews__stars svg {
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
.product-reviews__rating-count {
margin-top: 0.5rem;
color: rgb(161 161 170);
font-size: 0.6875rem;
line-height: 1rem;
}
/* ==========================================================================
Rating Distribution
========================================================================== */
.product-reviews__distribution {
border: 1px solid rgb(228 228 231);
border-radius: 1rem;
background: white;
padding: 1.25rem;
}
.product-reviews__distribution-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.product-reviews__distribution-row {
display: flex;
align-items: center;
gap: 0.75rem;
}
.product-reviews__distribution-number {
width: 1rem;
flex-shrink: 0;
color: rgb(82 82 91);
font-size: 0.75rem;
line-height: 1rem;
text-align: center;
}
.product-reviews__distribution-star {
width: 0.875rem;
height: 0.875rem;
flex-shrink: 0;
fill: rgb(250 204 21);
}
.product-reviews__progress {
flex: 1;
height: 0.5rem;
overflow: hidden;
border-radius: 9999px;
background: rgb(244 244 245);
}
.product-reviews__progress-bar {
height: 100%;
border-radius: 9999px;
background: rgb(250 204 21);
transition: width 300ms ease;
}
.product-reviews__distribution-count {
width: 2rem;
flex-shrink: 0;
color: rgb(161 161 170);
font-size: 0.6875rem;
line-height: 1rem;
text-align: left;
}
/* ==========================================================================
Review Form
========================================================================== */
.product-reviews__form {
margin-top: 1.5rem;
border: 1px solid rgb(228 228 231);
border-radius: 1rem;
background: white;
padding: 1.5rem;
}
.product-reviews__form-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.product-reviews__form-title {
color: rgb(39 39 42);
font-family: YekanBakhBold, sans-serif;
font-size: 1rem;
line-height: 1.5rem;
}
.product-reviews__form-description {
margin-top: 0.25rem;
color: rgb(161 161 170);
font-size: 0.75rem;
line-height: 1.5rem;
}
.product-reviews__form-note {
padding-top: 0.125rem;
color: rgb(161 161 170);
font-size: 0.6875rem;
line-height: 1rem;
}
/* ==========================================================================
Rating Selector
========================================================================== */
.product-reviews__rating-field {
margin-top: 1.5rem;
}
.product-reviews__field-label {
display: block;
margin-bottom: 0.5rem;
color: rgb(82 82 91);
font-size: 0.75rem;
line-height: 1rem;
}
.product-reviews__rating-input {
display: flex;
align-items: center;
gap: 0.25rem;
}
.product-reviews__rating-star {
border: 0;
background: transparent;
padding: 0;
color: rgb(212 212 216);
font-size: 1.875rem;
line-height: 1;
cursor: pointer;
transition:
color 150ms ease,
transform 150ms ease;
}
.product-reviews__rating-star:hover {
color: rgb(250 204 21);
transform: scale(1.08);
}
.product-reviews__rating-star.is-active {
color: rgb(250 204 21);
}
.product-reviews__rating-value {
margin-top: 0.5rem;
color: rgb(161 161 170);
font-size: 0.75rem;
line-height: 1rem;
}
/* ==========================================================================
Textarea
========================================================================== */
.product-reviews__body-field {
margin-top: 1.25rem;
}
.product-reviews__textarea {
display: block;
width: 100%;
min-height: 8.5rem;
resize: vertical;
border: 1px solid rgb(228 228 231);
border-radius: 0.875rem;
background: rgb(250 250 250 / 40%);
color: rgb(63 63 70);
font-family: inherit;
font-size: 0.875rem;
line-height: 1.9;
padding: 0.875rem 1rem;
outline: none;
transition:
border-color 150ms ease,
background-color 150ms ease,
box-shadow 150ms ease;
}
.product-reviews__textarea:hover {
border-color: rgb(212 212 216);
}
.product-reviews__textarea:focus {
border-color: rgb(147 197 253);
background: white;
box-shadow: 0 0 0 3px rgb(219 234 254);
}
.product-reviews__textarea::placeholder {
color: rgb(161 161 170);
font-size: 0.75rem;
}
.product-reviews__textarea-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 0.5rem;
}
.product-reviews__textarea-hint {
color: rgb(161 161 170);
font-size: 0.6875rem;
line-height: 1rem;
}
.product-reviews__textarea-counter {
color: rgb(161 161 170);
font-size: 0.6875rem;
line-height: 1rem;
}
/* ==========================================================================
Submit Button
========================================================================== */
.product-reviews__form-footer {
display: flex;
justify-content: flex-end;
margin-top: 1.25rem;
}
.product-reviews__submit {
min-width: 9rem;
height: 2.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 0.75rem;
background: rgb(59 130 246);
color: white;
font-family: YekanBakhSemiBold, sans-serif;
font-size: 0.875rem;
cursor: pointer;
transition:
background-color 150ms ease,
transform 150ms ease,
box-shadow 150ms ease,
opacity 150ms ease;
}
.product-reviews__submit:hover {
background: rgb(96 165 250);
box-shadow: 0 8px 20px rgb(59 130 246 / 15%);
}
.product-reviews__submit:active {
background: rgb(37 99 235);
transform: translateY(1px);
}
.product-reviews__submit:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
/* ==========================================================================
Guest / Login
========================================================================== */
.product-reviews__guest {
margin-top: 1.5rem;
border: 1px dashed rgb(212 212 216);
border-radius: 1rem;
background: rgb(250 250 250 / 60%);
padding: 2rem 1.5rem;
text-align: center;
}
.product-reviews__guest-icon {
width: 3rem;
height: 3rem;
margin-inline: auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgb(228 228 231);
border-radius: 9999px;
background: white;
}
.product-reviews__guest-icon svg {
width: 1.5rem;
height: 1.5rem;
fill: rgb(161 161 170);
}
.product-reviews__guest-title {
margin-top: 1rem;
color: rgb(63 63 70);
font-family: YekanBakhBold, sans-serif;
font-size: 0.875rem;
line-height: 1.5rem;
}
.product-reviews__guest-description {
max-width: 32rem;
margin: 0.25rem auto 0;
color: rgb(161 161 170);
font-size: 0.75rem;
line-height: 1.75rem;
}
.product-reviews__login {
display: inline-flex;
align-items: center;
justify-content: center;
height: 2.5rem;
margin-top: 1rem;
padding-inline: 1.25rem;
border-radius: 0.75rem;
background: rgb(59 130 246);
color: white;
font-family: YekanBakhSemiBold, sans-serif;
font-size: 0.75rem;
text-decoration: none;
transition:
background-color 150ms ease,
box-shadow 150ms ease;
}
.product-reviews__login:hover {
background: rgb(96 165 250);
box-shadow: 0 6px 16px rgb(59 130 246 / 15%);
}
/* ==========================================================================
Reviews List
========================================================================== */
.product-reviews__list {
margin-top: 2rem;
}
.product-review {
position: relative;
padding: 1.5rem 0;
}
.product-review:first-child {
padding-top: 0;
}
.product-review + .product-review {
border-top: 1px solid rgb(228 228 231);
}
/* ==========================================================================
Review Header
========================================================================== */
.product-review__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.product-review__author {
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
}
.product-review__avatar {
width: 2.5rem;
height: 2.5rem;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
background: rgb(244 244 245);
}
.product-review__avatar svg {
width: 1.25rem;
height: 1.25rem;
fill: rgb(161 161 170);
}
.product-review__author-info {
min-width: 0;
}
.product-review__author-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.product-review__author-name {
color: rgb(63 63 70);
font-family: YekanBakhBold, sans-serif;
font-size: 0.875rem;
line-height: 1.25rem;
}
.product-review__verified {
display: inline-flex;
align-items: center;
border-radius: 9999px;
background: rgb(240 253 244);
color: rgb(22 163 74);
padding: 0.25rem 0.5rem;
font-size: 0.625rem;
line-height: 1rem;
}
.product-review__date {
margin-top: 0.125rem;
color: rgb(161 161 170);
font-size: 0.6875rem;
line-height: 1rem;
}
/* ==========================================================================
Review Rating
========================================================================== */
.product-review__rating {
display: flex;
align-items: center;
gap: 0.125rem;
flex-shrink: 0;
}
.product-review__rating svg {
width: 0.875rem;
height: 0.875rem;
}
.product-review__rating svg.is-filled {
fill: rgb(250 204 21);
}
.product-review__rating svg.is-empty {
fill: rgb(212 212 216);
}
/* ==========================================================================
Review Body
========================================================================== */
.product-review__body {
margin-top: 1rem;
}
.product-review__text {
margin: 0;
color: rgb(63 63 70);
font-size: 0.875rem;
line-height: 2.1;
}
/* ==========================================================================
Helpful Section
========================================================================== */
.product-review__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1.25rem;
}
.product-review__helpful {
color: rgb(161 161 170);
font-size: 0.75rem;
line-height: 1rem;
}
.product-review__votes {
display: flex;
align-items: center;
gap: 0.5rem;
}
.product-review__vote {
min-width: 3.5rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
padding-inline: 0.625rem;
border: 1px solid rgb(228 228 231);
border-radius: 0.5rem;
background: white;
color: rgb(82 82 91);
font-family: inherit;
font-size: 0.75rem;
cursor: pointer;
transition:
color 150ms ease,
border-color 150ms ease,
background-color 150ms ease;
}
.product-review__vote:hover {
background: rgb(250 250 250);
}
.product-review__vote--positive:hover {
border-color: rgb(134 239 172);
background: rgb(240 253 244);
color: rgb(22 163 74);
}
.product-review__vote--negative:hover {
border-color: rgb(252 165 165);
background: rgb(254 242 242);
color: rgb(220 38 38);
}
.product-review__vote svg {
width: 1rem;
height: 1rem;
}
/* ==========================================================================
Replies
========================================================================== */
.product-review__replies {
margin-top: 1.25rem;
margin-right: 1rem;
padding-right: 1rem;
border-right: 2px solid rgb(244 244 245);
}
.product-review__reply {
padding: 0.75rem 0;
}
.product-review__reply-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.product-review__reply-author {
color: rgb(63 63 70);
font-family: YekanBakhBold, sans-serif;
font-size: 0.75rem;
line-height: 1rem;
}
.product-review__reply-date {
color: rgb(161 161 170);
font-size: 0.625rem;
line-height: 1rem;
}
.product-review__reply-text {
margin: 0.5rem 0 0;
color: rgb(82 82 91);
font-size: 0.75rem;
line-height: 1.9;
}
/* ==========================================================================
Empty State
========================================================================== */
.product-reviews__empty {
border: 1px dashed rgb(228 228 231);
border-radius: 1rem;
background: rgb(250 250 250 / 30%);
padding: 2.5rem 1.5rem;
text-align: center;
}
.product-reviews__empty-icon {
width: 3.5rem;
height: 3.5rem;
margin-inline: auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
background: rgb(250 250 250);
}
.product-reviews__empty-icon svg {
width: 1.75rem;
height: 1.75rem;
fill: rgb(212 212 216);
}
.product-reviews__empty-title {
margin-top: 1rem;
color: rgb(82 82 91);
font-family: YekanBakhBold, sans-serif;
font-size: 0.875rem;
line-height: 1.5rem;
}
.product-reviews__empty-description {
margin-top: 0.25rem;
color: rgb(161 161 170);
font-size: 0.75rem;
line-height: 1.25rem;
}
/* ==========================================================================
Form Validation / Error
========================================================================== */
.product-reviews__field-error {
margin-top: 0.375rem;
color: rgb(239 68 68);
font-size: 0.6875rem;
line-height: 1.25rem;
}
.product-reviews__textarea.is-error {
border-color: rgb(252 165 165);
}
.product-reviews__textarea.is-error:focus {
border-color: rgb(248 113 113);
box-shadow: 0 0 0 3px rgb(254 226 226);
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1023px) {
.product-reviews__summary {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.product-reviews {
margin-top: 2.5rem;
}
.product-reviews__header {
align-items: flex-start;
}
.product-reviews__count {
padding-top: 0.125rem;
}
.product-reviews__overall,
.product-reviews__distribution,
.product-reviews__form {
padding: 1rem;
}
.product-reviews__form-header {
flex-direction: column;
}
.product-reviews__form-note {
display: none;
}
.product-review__header {
gap: 0.75rem;
}
.product-review__author {
gap: 0.625rem;
}
.product-review__avatar {
width: 2.25rem;
height: 2.25rem;
}
.product-review__rating {
gap: 0.0625rem;
}
.product-review__rating svg {
width: 0.75rem;
height: 0.75rem;
}
.product-review__text {
font-size: 0.8125rem;
line-height: 2;
}
}
@media (max-width: 640px) {
.product-reviews__header {
flex-direction: column;
gap: 0.25rem;
}
.product-reviews__title {
font-size: 1rem;
}
.product-reviews__summary {
gap: 0.75rem;
}
.product-reviews__overall-content {
justify-content: center;
}
.product-reviews__distribution-list {
gap: 0.625rem;
}
.product-reviews__form {
padding: 1rem;
}
.product-reviews__rating-star {
font-size: 1.75rem;
}
.product-reviews__form-footer {
display: block;
}
.product-reviews__submit {
width: 100%;
}
.product-review__header {
flex-direction: column;
}
.product-review__rating {
margin-right: 3rem;
}
.product-review__actions {
align-items: flex-start;
flex-direction: column;
}
.product-review__votes {
width: 100%;
}
.product-review__vote {
flex: 1;
}
.product-review__replies {
margin-right: 0.5rem;
padding-right: 0.75rem;
}
.product-reviews__empty {
padding: 2rem 1rem;
}
}
/* =========================================================
Rich Content (Tiptap output: products, blog, pages)
========================================================= */
.rich-content {
direction: rtl;
text-align: right;
line-height: 2;
word-wrap: break-word;
}
.rich-content > *:first-child {
margin-top: 0 !important;
}
.rich-content > *:last-child {
margin-bottom: 0 !important;
}
.rich-content p {
margin: 0 0 1rem;
}
.rich-content h1,
.rich-content h2,
.rich-content h3 {
margin: 1.75rem 0 0.75rem;
color: #27272a;
font-weight: 700;
line-height: 1.6;
}
.rich-content h1 {
font-size: 1.5rem;
}
.rich-content h2 {
font-size: 1.25rem;
}
.rich-content h3 {
font-size: 1.1rem;
}
.rich-content ul,
.rich-content ol {
margin: 0 0 1rem;
padding-right: 1.5rem;
}
.rich-content ul {
list-style: disc;
}
.rich-content ol {
list-style: decimal;
}
.rich-content ul ul,
.rich-content ol ol,
.rich-content ul ol,
.rich-content ol ul {
margin-bottom: 0;
}
.rich-content li {
margin-bottom: 0.4rem;
}
.rich-content li > p {
margin-bottom: 0.25rem;
}
.rich-content blockquote {
margin: 1.25rem 0;
padding: 0.75rem 1rem;
border-right: 4px solid var(--color-primary-300, #2e63cc);
background: #f8f8fa;
border-radius: 0.5rem;
color: #3f3f46;
}
.rich-content blockquote p:last-child {
margin-bottom: 0;
}
.rich-content a {
color: var(--color-primary-300, #2e63cc);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 150ms ease;
}
.rich-content a:hover {
color: var(--color-primary-200, #658ddc);
}
.rich-content img {
max-width: 100%;
height: auto;
display: block;
margin: 1.25rem auto;
border-radius: 0.75rem;
}
.rich-content hr {
margin: 2rem 0;
border: 0;
border-top: 1px solid #e4e4e7;
}
.rich-content code {
padding: 0.1rem 0.4rem;
border-radius: 0.375rem;
background: #f4f4f5;
border: 1px solid #e4e4e7;
color: #c2410c;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.9em;
}
.rich-content pre {
margin: 1.25rem 0;
padding: 1rem;
background: #18181b;
color: #f4f4f5;
border-radius: 0.75rem;
overflow-x: auto;
direction: ltr;
text-align: left;
}
.rich-content pre code {
padding: 0;
background: transparent;
border: 0;
color: inherit;
}
.rich-content table {
width: 100%;
margin: 1.25rem 0;
border-collapse: collapse;
}
.rich-content th,
.rich-content td {
padding: 0.5rem 0.75rem;
border: 1px solid #e4e4e7;
text-align: right;
}
.rich-content th {
background: #f8f8fa;
font-weight: 700;
}
.rich-content strong {
color: #18181b;
}
/* حفظ ترازبندی تولیدشده توسط تیپتپ (text-align در استایل درونخطی) */
.rich-content [style*="text-align:center"],
.rich-content [style*="text-align:center;"],
.rich-content [style*="text-align: center"] {
text-align: center;
}
.rich-content [style*="text-align:left"],
.rich-content [style*="text-align: left"] {
text-align: left;
}
.rich-content [style*="text-align:right"],
.rich-content [style*="text-align: right"] {
text-align: right;
}
.rich-content [style*="text-align:justify"],
.rich-content [style*="text-align: justify"] {
text-align: justify;
}
/*
|--------------------------------------------------------------------------
| Storefront cart/checkout utilities (additions)
|--------------------------------------------------------------------------
| Utilities referenced by the storefront cart, checkout and header
| mini-cart views that were not part of the pre-compiled stylesheet.
| Values follow the same scale as the compiled Tailwind output.
*/
.min-w-0 { min-width: 0px; }
.p-6 { padding: calc(var(--spacing, 0.25rem) * 6); }
.p-7 { padding: calc(var(--spacing, 0.25rem) * 7); }
.gap-y-6 { row-gap: calc(var(--spacing, 0.25rem) * 6); }
.leading-none { line-height: 1; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.disabled\:opacity-40:disabled { opacity: 0.4; }
.disabled\:opacity-50:disabled { opacity: 0.5; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.disabled\:pointer-events-none:disabled { pointer-events: none; }
.object-contain { object-fit: contain; }
.line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.shadow-xl {
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
0 8px 10px -6px rgb(0 0 0 / 0.1);
}
/* Colors missing from the compiled palette */
.border-primary-100 { border-color: #E8EEF9; }
.border-primary-400 { border-color: #2755AF; }
.bg-primary-100 { background-color: #E8EEF9; }
.bg-primary-50\/40 { background-color: color-mix(in oklab, #DAE4F6 40%, transparent); }
.hover\:bg-primary-50\/60:hover { background-color: color-mix(in oklab, #DAE4F6 60%, transparent); }
.bg-primary-500\/10 { background-color: color-mix(in oklab, #214792 10%, transparent); }
.border-amber-200 { border-color: #FDE68A; }
.text-amber-700 { color: #B45309; }
.fill-amber-500 { fill: #F59E0B; }
.border-green-200 { border-color: #BBF7D0; }
.text-green-700 { color: #15803D; }
.text-red-300 { color: #FCA5A5; }
.divide-zinc-100 > :not(:last-child) { border-color: #F4F4F5; }
.peer-checked\:border-primary-500 {
&:is(:where(.peer):checked ~ *) {
border-color: var(--color-primary-500);
}
}
.size-full { width: 100%; height: 100%; }
.size-12 { width: calc(var(--spacing, 0.25rem) * 12); height: calc(var(--spacing, 0.25rem) * 12); }
.size-16 { width: calc(var(--spacing, 0.25rem) * 16); height: calc(var(--spacing, 0.25rem) * 16); }
.size-24 { width: calc(var(--spacing, 0.25rem) * 24); height: calc(var(--spacing, 0.25rem) * 24); }
.w-24 { width: calc(var(--spacing, 0.25rem) * 24); }
.max-w-24 { max-width: calc(var(--spacing, 0.25rem) * 24); }
.md\:w-1\/2 { width: 50%; }
.md\:text-right { text-align: right; }
.md\:text-left { text-align: left; }
.md\:my-0 { margin-block: 0px; }
.last\:border-0:last-child { border-bottom-width: 0px; }
.lg\:sticky { position: sticky; }
.lg\:top-28 { top: calc(var(--spacing, 0.25rem) * 28); }
@media (min-width: 48rem) {
.md\:flex-row { flex-direction: row; }
.md\:items-center { align-items: center; }
.md\:gap-x-6 { column-gap: calc(var(--spacing, 0.25rem) * 6); }
.md\:gap-x-8 { column-gap: calc(var(--spacing, 0.25rem) * 8); }
.md\:col-span-2 { grid-column: span 2 / span 2; }
.md\:p-6 { padding: calc(var(--spacing, 0.25rem) * 6); }
.md\:p-7 { padding: calc(var(--spacing, 0.25rem) * 7); }
.md\:pt-5 { padding-top: calc(var(--spacing, 0.25rem) * 5); }
.md\:w-24 { width: calc(var(--spacing, 0.25rem) * 24); }
.md\:h-24 { height: calc(var(--spacing, 0.25rem) * 24); }
}
@media (min-width: 64rem) {
.lg\:col-span-4 { grid-column: span 4 / span 4; }
.lg\:col-span-8 { grid-column: span 8 / span 8; }
.lg\:gap-x-10 { column-gap: calc(var(--spacing, 0.25rem) * 10); }
}
.md\:justify-end { justify-content: flex-end; }
.mb-0\.5 { margin-bottom: calc(var(--spacing, 0.25rem) * 0.5); }
.mt-0\.5 { margin-top: calc(var(--spacing, 0.25rem) * 0.5); }
.py-12 { padding-block: calc(var(--spacing, 0.25rem) * 12); }
.md\:p-5 { padding: calc(var(--spacing, 0.25rem) * 5); }
.space-y-1 > :not(:last-child) { margin-block-end: calc(var(--spacing, 0.25rem) * 1); }
@media (min-width: 40rem) {
.sm\:flex-row { flex-direction: row; }
.sm\:items-center { align-items: center; }
}
.peer-checked\:bg-primary-500 {
&:is(:where(.peer):checked ~ *) {
background-color: var(--color-primary-500);
}
}
.sm\:w-auto { width: auto; }
.border-red-200 { border-color: #FECACA; }
.text-red-600 { color: #DC2626; }
.border-primary-500 { border-color: var(--color-primary-500); }
.focus\:border-primary-300:focus { border-color: var(--color-primary-300); }
.focus\:ring-primary-100:focus {
--tw-ring-color: #E8EEF9;
box-shadow: 0 0 0 calc(2px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color);
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.flex-col-reverse { flex-direction: column-reverse; }
.opacity-25 { opacity: 0.25; }
.opacity-75 { opacity: 0.75; }
.align-middle { vertical-align: middle; }
/*
|--------------------------------------------------------------------------
| Checkout — information step (scoped: .checkout-page / .checkout-form)
|--------------------------------------------------------------------------
| Presentation for resources/views/pages/checkout/information.blade.php.
| Everything is namespaced under .checkout-* so other storefront pages
| are unaffected. Values reuse the compiled palette variables.
*/
:root {
--co-primary: var(--color-primary-500, #214792);
--co-primary-strong: var(--color-primary-400, #2755AF);
--co-primary-focus: var(--color-primary-300, #2E63CC);
--co-primary-tint: #EEF3FB;
--co-border: var(--color-zinc-200, #e4e4e7);
--co-border-input: var(--color-zinc-300, #d4d4d8);
--co-border-hover: var(--color-zinc-400, #a1a1aa);
--co-text: var(--color-zinc-800, #27272a);
--co-text-muted: var(--color-zinc-500, #71717a);
--co-text-faint: var(--color-zinc-400, #a1a1aa);
--co-danger: #DC2626;
--co-radius: 0.75rem;
}
/* ---------------------------------------------------------------- Heading */
.checkout-heading {
margin-bottom: 1.5rem;
}
.checkout-heading-title {
font-family: yekanBakhBold, sans-serif;
font-size: 1.0625rem;
line-height: 1.8;
color: var(--co-text);
}
.checkout-heading-desc {
margin-top: 0.25rem;
font-size: 0.815rem;
line-height: 1.8;
color: var(--co-text-muted);
}
@media (min-width: 48rem) {
.checkout-heading-title {
font-size: 1.25rem;
}
}
/* -------------------------------------------------------------------- Form */
.checkout-form {
background-color: #fff;
border: 1px solid var(--co-border);
border-radius: 1rem;
padding: 1.25rem;
box-shadow: 0 1px 2px rgb(24 24 27 / 0.04);
}
@media (min-width: 48rem) {
.checkout-form {
padding: 1.75rem;
}
}
/* --------------------------------------------------------------- Sections */
.checkout-section + .checkout-section {
margin-top: 1.75rem;
padding-top: 1.75rem;
border-top: 1px dashed var(--co-border);
}
.checkout-section-head {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.checkout-section-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--co-radius);
background-color: var(--co-primary-tint);
color: var(--co-primary);
}
.checkout-section-title {
font-family: yekanBakhBold, sans-serif;
font-size: 0.965rem;
line-height: 1.7;
color: var(--co-text);
}
.checkout-section-desc {
margin-top: 0.125rem;
font-size: 0.75rem;
line-height: 1.8;
color: var(--co-text-muted);
}
/* ------------------------------------------------------------------ Fields */
.checkout-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 48rem) {
.checkout-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.125rem 1.25rem;
}
}
.checkout-field--full {
grid-column: 1 / -1;
}
.checkout-label {
display: block;
margin-bottom: 0.5rem;
font-family: yekanBakhSemiBold, sans-serif;
font-size: 0.815rem;
line-height: 1.6;
color: var(--color-zinc-700, #3f3f46);
}
.checkout-req {
color: var(--co-danger);
}
.checkout-opt {
font-family: yekanBakhRegular, sans-serif;
font-size: 0.715rem;
color: var(--co-text-faint);
}
.checkout-input {
width: 100%;
min-height: 46px;
border: 1px solid var(--co-border-input);
border-radius: var(--co-radius);
background-color: #fff;
padding: 0.6875rem 1rem;
font-family: yekanBakhRegular, sans-serif;
font-size: 0.875rem;
line-height: 1.6;
color: var(--co-text);
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.checkout-input::placeholder {
color: var(--co-text-faint);
}
.checkout-input:hover:not(:disabled):not(:focus) {
border-color: var(--co-border-hover);
}
.checkout-input:focus {
outline: none;
border-color: var(--co-primary-focus);
box-shadow: 0 0 0 3.5px rgb(46 99 204 / 0.14);
}
.checkout-input:disabled {
background-color: var(--color-zinc-50, #fafafa);
color: var(--co-text-faint);
cursor: not-allowed;
}
/* Numeric/contact inputs are LTR inside the RTL layout */
.checkout-input--ltr {
direction: ltr;
text-align: left;
}
/* Validation state */
.checkout-input.is-invalid,
.checkout-input.is-invalid:hover:not(:disabled):not(:focus) {
border-color: var(--co-danger);
}
.checkout-input.is-invalid:focus {
box-shadow: 0 0 0 3.5px rgb(220 38 38 / 0.12);
}
.checkout-error {
margin-top: 0.4375rem;
font-size: 0.75rem;
line-height: 1.7;
color: var(--co-danger);
}
/*
* Prevent iOS Safari auto-zoom on focus (needs >= 16px) while the
* desktop stays at the compact 14px scale.
*/
@media (pointer: coarse) {
.checkout-input {
font-size: 1rem;
}
}
/* Selects: native RTL-aware arrow, options keep native rendering */
.checkout-select {
appearance: none;
-webkit-appearance: none;
padding-left: 2.75rem;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left 1rem center;
cursor: pointer;
}
.checkout-select:disabled {
cursor: not-allowed;
}
.checkout-textarea {
min-height: 5.5rem;
}
/* ---------------------------------------------------------- Address cards */
.checkout-address-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
@media (min-width: 48rem) {
.checkout-address-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.checkout-address-card {
position: relative;
display: flex;
align-items: flex-start;
gap: 0.75rem;
border: 1px solid var(--co-border);
border-radius: var(--co-radius);
padding: 1rem;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.checkout-address-card:hover {
border-color: var(--co-border-hover);
}
/* Selection frame: driven purely by the checked state (no JS needed) */
.checkout-address-frame {
position: absolute;
inset: 0;
border-radius: inherit;
border: 1.5px solid transparent;
background-color: transparent;
pointer-events: none;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.checkout-address-card input:checked ~ .checkout-address-frame {
border-color: var(--co-primary);
background-color: rgb(33 71 146 / 0.04);
}
.checkout-address-card input:focus-visible ~ .checkout-address-frame {
box-shadow: 0 0 0 3.5px rgb(46 99 204 / 0.14);
}
/* Custom radio */
.checkout-address-radio {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.125rem;
border: 2px solid var(--co-border-input);
border-radius: 9999px;
transition: border-color 0.2s ease;
}
.checkout-address-radio > span {
width: 0.625rem;
height: 0.625rem;
border-radius: 9999px;
background-color: transparent;
transition: background-color 0.2s ease, transform 0.2s ease;
transform: scale(0.6);
}
.checkout-address-card input:checked ~ .checkout-address-radio {
border-color: var(--co-primary);
}
.checkout-address-card input:checked ~ .checkout-address-radio > span {
background-color: var(--co-primary);
transform: scale(1);
}
.checkout-address-body {
display: flex;
flex-direction: column;
min-width: 0;
}
.checkout-address-title {
font-family: yekanBakhSemiBold, sans-serif;
font-size: 0.815rem;
line-height: 1.6;
color: var(--co-text);
}
.checkout-address-meta {
margin-top: 0.375rem;
font-size: 0.715rem;
line-height: 1.7;
color: var(--color-zinc-600, #52525b);
}
.checkout-address-text {
margin-top: 0.25rem;
font-size: 0.715rem;
line-height: 1.8;
color: var(--co-text-muted);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* "New address" variant */
.checkout-address-card--new {
border-style: dashed;
align-items: center;
justify-content: center;
min-height: 4rem;
}
.checkout-address-card--new input:checked ~ .checkout-address-frame {
background-color: rgb(33 71 146 / 0.06);
}
.checkout-address-new {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: yekanBakhSemiBold, sans-serif;
font-size: 0.815rem;
color: var(--co-primary);
}
/* ---------------------------------------------------------------- Actions */
.checkout-actions {
display: flex;
flex-direction: column-reverse;
align-items: stretch;
gap: 0.75rem;
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: 1px dashed var(--co-border);
}
@media (min-width: 40rem) {
.checkout-actions {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.checkout-back {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 0.815rem;
color: var(--color-zinc-600, #52525b);
transition: color 0.2s ease;
}
.checkout-back:hover {
color: var(--co-primary-focus);
}
.checkout-back svg {
transition: transform 0.2s ease;
}
.checkout-back:hover svg {
transform: translateX(3px);
}
.checkout-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
min-height: 48px;
border-radius: var(--co-radius);
background-color: var(--co-primary);
padding: 0.75rem 2.5rem;
font-family: yekanBakhSemiBold, sans-serif;
font-size: 0.875rem;
color: #fff;
box-shadow: 0 10px 18px -8px rgb(33 71 146 / 0.55);
transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
@media (min-width: 40rem) {
.checkout-submit {
width: auto;
}
}
.checkout-submit:hover {
background-color: var(--co-primary-strong);
}
.checkout-submit:active {
transform: translateY(1px);
box-shadow: 0 6px 12px -8px rgb(33 71 146 / 0.55);
}
.checkout-submit:focus-visible {
outline: none;
box-shadow: 0 0 0 3.5px rgb(46 99 204 / 0.25);
}
.checkout-submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
.checkout-page *,
.checkout-page *::before,
.checkout-page *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/*
|--------------------------------------------------------------------------
| Checkout — shipping & payment selection cards
|--------------------------------------------------------------------------
| Scoped: .checkout-page .checkout-option — radio cards for the
| shipping-method and payment-method steps. The whole card is
| clickable via a stretched label; the state is driven purely by
| the :checked input (no JS needed).
*/
.checkout-option-list {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.checkout-option {
position: relative;
display: flex;
align-items: center;
gap: 0.875rem;
border: 1.5px solid var(--co-border);
border-radius: var(--co-radius);
padding: 1rem 1.125rem;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.checkout-option:hover {
border-color: var(--co-border-hover);
}
.checkout-option:active {
transform: translateY(1px);
}
/* Selection frame — driven purely by the checked input */
.checkout-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.checkout-option input:checked ~ .checkout-option-frame {
border-color: var(--co-primary);
background-color: rgb(33 71 146 / 0.045);
box-shadow: 0 0 0 1px rgb(33 71 146 / 0.35);
}
.checkout-option input:focus-visible ~ .checkout-option-frame {
box-shadow: 0 0 0 3.5px rgb(46 99 204 / 0.18);
}
.checkout-option-frame {
position: absolute;
inset: 0;
border-radius: inherit;
border: 1.5px solid transparent;
background-color: transparent;
pointer-events: none;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
/* Custom radio dot */
.checkout-option-radio {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.375rem;
height: 1.375rem;
border: 2px solid var(--co-border-input);
border-radius: 9999px;
transition: border-color 0.2s ease;
}
.checkout-option-radio > span {
width: 0.625rem;
height: 0.625rem;
border-radius: 9999px;
background-color: transparent;
transform: scale(0.5);
transition: background-color 0.2s ease, transform 0.2s ease;
}
.checkout-option input:checked ~ .checkout-option-radio {
border-color: var(--co-primary);
}
.checkout-option input:checked ~ .checkout-option-radio > span {
background-color: var(--co-primary);
transform: scale(1);
}
/* Body */
.checkout-option-body {
display: flex;
flex: 1;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.checkout-option-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: yekanBakhSemiBold, sans-serif;
font-size: 0.875rem;
line-height: 1.6;
color: var(--co-text);
}
.checkout-option-desc {
font-size: 0.75rem;
line-height: 1.8;
color: var(--co-text-muted);
}
/* Price column (shipping) */
.checkout-option-side {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.25rem;
flex-shrink: 0;
text-align: left;
}
.checkout-option-price {
font-family: yekanBakhBold, sans-serif;
font-size: 0.875rem;
color: var(--co-text);
white-space: nowrap;
}
.checkout-option-price .checkout-option-currency {
font-family: yekanBakhRegular, sans-serif;
font-size: 0.6875rem;
color: var(--co-text-faint);
}
.checkout-option-note {
font-size: 0.6875rem;
line-height: 1.6;
color: var(--co-text-faint);
white-space: nowrap;
}
/* Provider badge (payment) */
.checkout-option-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.625rem;
border-radius: 9999px;
background-color: var(--color-zinc-100, #f4f4f5);
font-family: yekanBakhSemiBold, sans-serif;
font-size: 0.6875rem;
line-height: 1.6;
color: var(--color-zinc-600, #52525b);
white-space: nowrap;
}
.checkout-option input:checked ~ .checkout-option-meta .checkout-option-badge {
background-color: var(--co-primary-tint);
color: var(--co-primary);
}
.checkout-option-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.375rem;
flex-shrink: 0;
}
/* Mobile: side column moves under the body */
@media (max-width: 47.99rem) {
.checkout-option {
align-items: flex-start;
padding: 0.875rem 1rem;
}
.checkout-option-meta,
.checkout-option-side {
flex-direction: row;
align-items: center;
gap: 0.5rem;
}
.checkout-option-body {
padding-top: 0.125rem;
}
}
/*
|--------------------------------------------------------------------------
| Checkout — coupon box
|--------------------------------------------------------------------------
| Scoped: .checkout-coupon — apply/remove a discount code during
| checkout. Server-side validation only; the box shows the result.
*/
.checkout-coupon {
border: 1px solid var(--co-border);
border-radius: var(--co-radius);
padding: 1rem 1.125rem;
}
.checkout-coupon-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: yekanBakhBold, sans-serif;
font-size: 0.875rem;
color: var(--co-text);
}
.checkout-coupon-form {
display: flex;
gap: 0.625rem;
margin-top: 0.875rem;
}
.checkout-coupon-input {
flex: 1;
min-width: 0;
min-height: 46px;
border: 1px solid var(--co-border-input);
border-radius: var(--co-radius);
background-color: #fff;
padding: 0.6875rem 1rem;
font-family: yekanBakhRegular, sans-serif;
font-size: 0.875rem;
color: var(--co-text);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.checkout-coupon-input::placeholder {
color: var(--co-text-faint);
}
.checkout-coupon-input:focus {
outline: none;
border-color: var(--co-primary-focus);
box-shadow: 0 0 0 3.5px rgb(46 99 204 / 0.14);
}
@media (pointer: coarse) {
.checkout-coupon-input {
font-size: 1rem;
}
}
.checkout-coupon-submit {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-height: 46px;
padding: 0.6875rem 1.5rem;
border-radius: var(--co-radius);
background-color: var(--co-primary);
font-family: yekanBakhSemiBold, sans-serif;
font-size: 0.815rem;
color: #fff;
transition: background-color 0.2s ease, transform 0.15s ease;
}
.checkout-coupon-submit:hover {
background-color: var(--co-primary-strong);
}
.checkout-coupon-submit:active {
transform: translateY(1px);
}
.checkout-coupon-submit:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.checkout-coupon-msg {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-top: 0.75rem;
border-radius: 0.625rem;
padding: 0.625rem 0.875rem;
font-size: 0.75rem;
line-height: 1.8;
}
.checkout-coupon-msg--success {
background-color: rgb(22 163 74 / 0.08);
border: 1px solid rgb(22 163 74 / 0.25);
color: #15803d;
}
.checkout-coupon-msg--error {
background-color: rgb(220 38 38 / 0.06);
border: 1px solid rgb(220 38 38 / 0.2);
color: var(--co-danger);
}
/* Applied state: code chip + remove action */
.checkout-coupon-applied {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 0.875rem;
}
.checkout-coupon-chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border: 1.5px dashed rgb(22 163 74 / 0.45);
border-radius: 9999px;
background-color: rgb(22 163 74 / 0.07);
padding: 0.4375rem 0.875rem;
font-family: yekanBakhSemiBold, sans-serif;
font-size: 0.815rem;
color: #15803d;
}
.checkout-coupon-remove {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.75rem;
color: var(--co-text-muted);
transition: color 0.2s ease;
}
.checkout-coupon-remove:hover {
color: var(--co-danger);
}
.checkout-coupon-remove svg {
transition: transform 0.2s ease;
}
.checkout-coupon-remove:hover svg {
transform: rotate(90deg);
}
/*
|--------------------------------------------------------------------------
| Payment countdown (pending-payment window)
|--------------------------------------------------------------------------
| Scoped: .payment-countdown — displays the server-computed seconds
| remaining before the order expires. The backend stays the source
| of truth: the JS only renders the number and reloads on zero.
*/
.payment-countdown {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border: 1.5px dashed rgb(217 119 6 / 0.5);
border-radius: 9999px;
background-color: rgb(245 158 11 / 0.09);
padding: 0.5rem 1.125rem;
font-family: yekanBakhSemiBold, sans-serif;
font-size: 0.875rem;
color: #b45309;
direction: rtl;
}
.payment-countdown__time {
display: inline-flex;
align-items: center;
direction: ltr;
font-family: yekanBakhBold, sans-serif;
font-size: 1rem;
letter-spacing: 0.06em;
color: #92400e;
}
.payment-countdown__time::before {
content: '⏳';
font-size: 0.875rem;
margin-inline-end: 0.25rem;
}
.payment-countdown--expired {
border-color: rgb(220 38 38 / 0.4);
background-color: rgb(220 38 38 / 0.06);
color: #b91c1c;
}
/*
|--------------------------------------------------------------------------
| Payment result page
|--------------------------------------------------------------------------
| Scoped: .payment-result — the final payment state page with four
| distinct visual states (success / failed / cancelled / pending).
*/
.payment-result-card {
background-color: #fff;
border-radius: 1.25rem;
overflow: hidden;
}
.payment-result-banner {
padding: 2.5rem 1.5rem 2rem;
text-align: center;
}
@media (min-width: 48rem) {
.payment-result-banner {
padding: 3rem 2.5rem 2.5rem;
}
}
.payment-result-banner--success {
background: linear-gradient(180deg, rgb(22 163 74 / 0.10), rgb(22 163 74 / 0.02));
border-bottom: 1px solid rgb(22 163 74 / 0.18);
}
.payment-result-banner--failed {
background: linear-gradient(180deg, rgb(220 38 38 / 0.09), rgb(220 38 38 / 0.02));
border-bottom: 1px solid rgb(220 38 38 / 0.16);
}
.payment-result-banner--cancelled {
background: linear-gradient(180deg, rgb(113 113 122 / 0.10), rgb(113 113 122 / 0.02));
border-bottom: 1px solid rgb(113 113 122 / 0.2);
}
.payment-result-banner--pending {
background: linear-gradient(180deg, rgb(245 158 11 / 0.12), rgb(245 158 11 / 0.02));
border-bottom: 1px solid rgb(245 158 11 / 0.22);
}
.payment-result-icon {
display: flex;
align-items: center;
justify-content: center;
width: 5rem;
height: 5rem;
margin-inline: auto;
border-radius: 9999px;
}
@media (min-width: 48rem) {
.payment-result-icon {
width: 6rem;
height: 6rem;
}
}
.payment-result-icon--success {
background-color: rgb(22 163 74 / 0.12);
color: #16a34a;
}
.payment-result-icon--failed {
background-color: rgb(220 38 38 / 0.1);
color: #dc2626;
}
.payment-result-icon--cancelled {
background-color: rgb(113 113 122 / 0.12);
color: var(--co-text-muted);
}
.payment-result-icon--pending {
background-color: rgb(245 158 11 / 0.14);
color: #d97706;
}
.payment-result-title {
margin-top: 1.25rem;
font-family: yekanBakhBold, sans-serif;
font-size: 1.125rem;
line-height: 1.8;
color: var(--co-text);
}
@media (min-width: 48rem) {
.payment-result-title {
font-size: 1.375rem;
}
}
.payment-result-desc {
margin-top: 0.625rem;
max-width: 32rem;
margin-inline: auto;
font-size: 0.875rem;
line-height: 2;
color: var(--co-text-muted);
}
.payment-result-body {
padding: 1.5rem;
}
@media (min-width: 48rem) {
.payment-result-body {
padding: 2rem 2.5rem;
}
}
.payment-result-list {
border: 1px solid var(--co-border);
border-radius: var(--co-radius);
overflow: hidden;
}
.payment-result-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.875rem 1.25rem;
font-size: 0.815rem;
}
.payment-result-row + .payment-result-row {
border-top: 1px solid var(--color-zinc-100, #f4f4f5);
}
.payment-result-row dt {
color: var(--co-text-muted);
flex-shrink: 0;
}
.payment-result-row dd {
font-family: yekanBakhSemiBold, sans-serif;
color: var(--co-text);
text-align: left;
word-break: break-word;
}
.payment-result-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
}
@media (min-width: 40rem) {
.payment-result-actions {
flex-direction: row;
align-items: center;
justify-content: center;
}
}
.payment-result-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 48px;
border-radius: var(--co-radius);
padding: 0.75rem 2rem;
font-family: yekanBakhSemiBold, sans-serif;
font-size: 0.875rem;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.payment-result-btn:active {
transform: translateY(1px);
}
.payment-result-btn--primary {
background-color: var(--co-primary);
color: #fff;
box-shadow: 0 10px 18px -8px rgb(33 71 146 / 0.55);
}
.payment-result-btn--primary:hover {
background-color: var(--co-primary-strong);
}
.payment-result-btn--secondary {
border: 1px solid var(--co-border-input);
color: var(--color-zinc-700, #3f3f46);
background-color: #fff;
}
.payment-result-btn--secondary:hover {
background-color: var(--color-zinc-50, #fafafa);
}
.payment-result-btn--ghost {
color: var(--co-text-muted);
}
.payment-result-btn--ghost:hover {
color: var(--co-primary-focus);
}
/* Card-to-card instructions block */
.payment-result-transfer {
border: 1px solid rgb(245 158 11 / 0.35);
border-radius: var(--co-radius);
background-color: rgb(245 158 11 / 0.05);
padding: 1.25rem 1.5rem;
margin-top: 1.5rem;
text-align: right;
}
.payment-result-transfer-title {
font-family: yekanBakhBold, sans-serif;
font-size: 0.875rem;
color: var(--co-text);
margin-bottom: 1rem;
}
.payment-result-transfer dl {
display: flex;
flex-direction: column;
gap: 0.625rem;
font-size: 0.815rem;
}
.payment-result-transfer .payment-result-transfer-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.payment-result-transfer .payment-result-transfer-row dt {
color: var(--co-text-muted);
flex-shrink: 0;
}
.payment-result-transfer .payment-result-transfer-row dd {
font-family: yekanBakhBold, sans-serif;
color: var(--co-text);
}
.payment-result-transfer-card-number {
direction: ltr;
letter-spacing: 0.12em;
}
/* Receipt form inside the result page */
.payment-result-receipt {
border: 1px solid var(--co-border);
border-radius: var(--co-radius);
padding: 1.25rem 1.5rem;
margin-top: 1rem;
text-align: right;
}
.payment-result-receipt-label {
display: block;
font-family: yekanBakhSemiBold, sans-serif;
font-size: 0.815rem;
color: var(--color-zinc-700, #3f3f46);
margin-bottom: 0.5rem;
}
.payment-result-receipt-input {
width: 100%;
min-height: 46px;
border: 1px solid var(--co-border-input);
border-radius: var(--co-radius);
background-color: #fff;
padding: 0.6875rem 1rem;
font-family: yekanBakhRegular, sans-serif;
font-size: 0.875rem;
color: var(--co-text);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.payment-result-receipt-input:focus {
outline: none;
border-color: var(--co-primary-focus);
box-shadow: 0 0 0 3.5px rgb(46 99 204 / 0.14);
}
.payment-result-receipt input[type="file"] {
width: 100%;
font-size: 0.815rem;
border: 1px solid var(--co-border);
border-radius: var(--co-radius);
padding: 0.625rem;
background-color: #fff;
}
.payment-result-error {
margin-top: 0.5rem;
font-size: 0.75rem;
color: var(--co-danger);
}
@media (pointer: coarse) {
.payment-result-receipt-input {
font-size: 1rem;
}
}
/*
|--------------------------------------------------------------------------
| Account — orders (status tabs & cards)
|--------------------------------------------------------------------------
| Scoped: .account-orders — tabbed order management. Tabs are pure
| links (URL-driven) so they work without JS and stay shareable.
*/
.account-orders-tabs {
display: flex;
gap: 0.375rem;
overflow-x: auto;
padding-bottom: 0.25rem;
margin-bottom: 1.25rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.account-orders-tab {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
border: 1px solid var(--co-border);
border-radius: 9999px;
padding: 0.5rem 1.125rem;
font-family: yekanBakhSemiBold, sans-serif;
font-size: 0.815rem;
color: var(--co-text-muted);
background-color: #fff;
white-space: nowrap;
transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.account-orders-tab:hover {
color: var(--co-primary-focus);
border-color: var(--co-border-hover);
}
.account-orders-tab[aria-current="page"] {
color: #fff;
background-color: var(--co-primary);
border-color: var(--co-primary);
}
.account-orders-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.375rem;
height: 1.375rem;
border-radius: 9999px;
padding: 0 0.375rem;
font-size: 0.6875rem;
background-color: var(--color-zinc-100, #f4f4f5);
color: var(--co-text-muted);
}
.account-orders-tab[aria-current="page"] .account-orders-tab-count {
background-color: rgb(255 255 255 / 0.25);
color: #fff;
}
.account-orders-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.875rem;
padding: 3.5rem 1rem;
text-align: center;
}
.account-orders-empty-title {
font-family: yekanBakhBold, sans-serif;
font-size: 0.965rem;
color: var(--co-text);
}
.account-orders-empty-desc {
font-size: 0.815rem;
line-height: 1.9;
color: var(--co-text-muted);
}
.account-order-card {
display: flex;
flex-direction: column;
gap: 1rem;
border: 1px solid var(--co-border);
border-radius: var(--co-radius);
background-color: #fff;
padding: 1rem 1.125rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.account-order-card:hover {
border-color: var(--co-border-hover);
box-shadow: 0 4px 14px -6px rgb(24 24 27 / 0.1);
}
.account-order-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.account-order-card-number {
font-family: yekanBakhBold, sans-serif;
font-size: 0.875rem;
color: var(--co-text);
direction: ltr;
}
.account-order-card-date {
display: block;
margin-top: 0.25rem;
font-size: 0.715rem;
color: var(--co-text-faint);
}
.account-order-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.account-order-card-items {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.815rem;
color: var(--co-text-muted);
}
.account-order-card-items img {
width: 2.75rem;
height: 2.75rem;
border-radius: 0.625rem;
border: 1px solid var(--color-zinc-100, #f4f4f5);
object-fit: contain;
background-color: var(--color-zinc-50, #fafafa);
padding: 0.125rem;
}
.account-order-card-amount {
font-family: yekanBakhBold, sans-serif;
font-size: 0.965rem;
color: var(--co-text);
display: flex;
align-items: baseline;
gap: 0.375rem;
}
.account-order-card-amount .account-order-card-currency {
font-family: yekanBakhRegular, sans-serif;
font-size: 0.6875rem;
color: var(--co-text-faint);
}
.account-order-card-actions {
display: flex;
align-items: center;
gap: 0.625rem;
flex-wrap: wrap;
}
.account-order-card-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
min-height: 40px;
border-radius: 0.625rem;
padding: 0.5rem 1.25rem;
font-family: yekanBakhSemiBold, sans-serif;
font-size: 0.815rem;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.account-order-card-link--primary {
background-color: var(--co-primary);
color: #fff;
}
.account-order-card-link--primary:hover {
background-color: var(--co-primary-strong);
}
.account-order-card-link--secondary {
border: 1px solid var(--co-border-input);
color: var(--color-zinc-700, #3f3f46);
background-color: #fff;
}
.account-order-card-link--secondary:hover {
background-color: var(--color-zinc-50, #fafafa);
}
/* Status badges */
.account-order-status {
display: inline-flex;
align-items: center;
gap: 0.375rem;
border-radius: 9999px;
padding: 0.3125rem 0.75rem;
font-family: yekanBakhSemiBold, sans-serif;
font-size: 0.715rem;
white-space: nowrap;
}
.account-order-status::before {
content: '';
width: 0.375rem;
height: 0.375rem;
border-radius: 9999px;
background-color: currentColor;
}
.account-order-status--pending {
background-color: rgb(245 158 11 / 0.12);
color: #b45309;
}
.account-order-status--confirmed,
.account-order-status--processing,
.account-order-status--ready_to_ship,
.account-order-status--shipped {
background-color: rgb(33 71 146 / 0.08);
color: var(--co-primary);
}
.account-order-status--delivered {
background-color: rgb(22 163 74 / 0.1);
color: #15803d;
}
.account-order-status--cancelled,
.account-order-status--returned {
background-color: rgb(220 38 38 / 0.08);
color: var(--co-danger);
}
/*
|--------------------------------------------------------------------------
| Account — order details
|--------------------------------------------------------------------------
| Scoped: .order-details
*/
.order-details-header {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
@media (min-width: 48rem) {
.order-details-header {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.order-details-number {
font-family: yekanBakhBold, sans-serif;
font-size: 1rem;
color: var(--co-text);
direction: ltr;
text-align: right;
}
.order-details-section {
border: 1px solid var(--co-border);
border-radius: var(--co-radius);
background-color: #fff;
padding: 1.25rem 1.375rem;
}
@media (min-width: 48rem) {
.order-details-section {
padding: 1.5rem 1.75rem;
}
}
.order-details-section + .order-details-section {
margin-top: 1rem;
}
.order-details-section-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 1.125rem;
font-family: yekanBakhBold, sans-serif;
font-size: 0.965rem;
color: var(--co-text);
}
.order-details-list {
display: flex;
flex-direction: column;
}
.order-details-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 0;
font-size: 0.815rem;
}
.order-details-row + .order-details-row {
border-top: 1px solid var(--color-zinc-100, #f4f4f5);
}
.order-details-row dt {
color: var(--co-text-muted);
flex-shrink: 0;
}
.order-details-row dd {
font-family: yekanBakhSemiBold, sans-serif;
color: var(--co-text);
text-align: left;
word-break: break-word;
}
.order-details-item {
display: flex;
align-items: center;
gap: 0.875rem;
padding: 0.875rem 0;
}
.order-details-item + .order-details-item {
border-top: 1px solid var(--color-zinc-100, #f4f4f5);
}
.order-details-item-image {
flex-shrink: 0;
width: 4rem;
height: 4rem;
border-radius: 0.75rem;
border: 1px solid var(--color-zinc-100, #f4f4f5);
background-color: var(--color-zinc-50, #fafafa);
object-fit: contain;
padding: 0.25rem;
}
.order-details-item-body {
flex: 1;
min-width: 0;
}
.order-details-item-title {
display: block;
font-family: yekanBakhSemiBold, sans-serif;
font-size: 0.815rem;
color: var(--co-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.order-details-item-title:hover {
color: var(--co-primary-focus);
}
.order-details-item-variation {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.375rem;
font-size: 0.6875rem;
color: var(--co-text-muted);
}
.order-details-item-variation span {
display: inline-flex;
align-items: center;
gap: 0.25rem;
background-color: var(--color-zinc-100, #f4f4f5);
border-radius: 9999px;
padding: 0.1875rem 0.625rem;
}
.order-details-item-side {
flex-shrink: 0;
text-align: left;
font-size: 0.75rem;
}
.order-details-item-qty {
display: block;
color: var(--co-text-faint);
margin-bottom: 0.25rem;
}
.order-details-item-total {
font-family: yekanBakhBold, sans-serif;
color: var(--co-text);
}
.order-details-item-total .order-details-item-currency {
font-family: yekanBakhRegular, sans-serif;
font-size: 0.6875rem;
color: var(--co-text-faint);
}
.order-details-summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.5rem 0;
font-size: 0.815rem;
color: var(--co-text-muted);
}
.order-details-summary-row--total {
border-top: 1px dashed var(--co-border);
margin-top: 0.625rem;
padding-top: 1rem;
}
.order-details-summary-row--discount,
.order-details-summary-row--coupon {
color: var(--co-danger);
}
.order-details-summary-value {
display: flex;
align-items: baseline;
gap: 0.375rem;
font-family: yekanBakhSemiBold, sans-serif;
color: var(--co-text);
}
.order-details-summary-row--total .order-details-summary-value {
font-family: yekanBakhBold, sans-serif;
font-size: 1.125rem;
color: var(--co-primary);
}
.order-details-summary-currency {
font-family: yekanBakhRegular, sans-serif;
font-size: 0.6875rem;
color: var(--co-text-faint);
}
/*
|--------------------------------------------------------------------------
| Product page — mobile sticky purchase bar
|--------------------------------------------------------------------------
| Scoped: .product-mobile-buybar — the compact price + purchase CTA
| shown on small screens while the main Buy Box is out of view.
| Stacks above the storefront's fixed bottom navigation bar.
*/
.product-mobile-buybar {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 90; /* below the fixed bottom navigation (z-index 100) */
display: flex;
border-top: 1px solid var(--co-border);
background-color: rgb(255 255 255 / 0.96);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: 0 -8px 24px -12px rgb(24 24 27 / 0.25);
transform: translateY(100%);
transition: transform 0.3s ease;
}
/* Hidden entirely on large screens (the sticky rail takes over) */
@media (min-width: 64rem) {
.product-mobile-buybar {
display: none;
}
}
/* Stack above the storefront's fixed bottom navigation bar. */
@media (max-width: 63.99rem) {
.product-mobile-buybar {
bottom: 4.25rem;
}
}
.product-mobile-buybar:not(.product-mobile-buybar--visible) {
transform: translateY(100%);
visibility: hidden;
}
.product-mobile-buybar--visible {
transform: translateY(0);
visibility: visible;
}
.product-mobile-buybar__inner {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
width: 100%;
}
.product-mobile-buybar__price {
font-family: yekanBakhExtraBold, sans-serif;
font-size: 1.125rem;
line-height: 1;
color: var(--co-text);
}
.product-mobile-buybar__currency {
font-size: 0.6875rem;
color: var(--co-text-faint);
}
.product-mobile-buybar__before {
display: flex;
align-items: center;
gap: 0.375rem;
}
.product-mobile-buybar__before-price {
font-size: 0.6875rem;
color: var(--co-text-faint);
text-decoration: line-through;
}
.product-mobile-buybar__discount {
border-radius: 0.375rem;
background-color: var(--co-danger);
padding: 0.0625rem 0.375rem;
color: #fff;
font-family: yekanBakhBold, sans-serif;
font-size: 0.625rem;
}
.product-mobile-buybar__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 3rem;
padding: 0 1.5rem;
border-radius: var(--co-radius);
background-color: var(--co-primary);
color: #fff;
font-family: yekanBakhSemiBold, sans-serif;
font-size: 0.875rem;
box-shadow: 0 10px 18px -8px rgb(33 71 146 / 0.55);
transition: background-color 0.2s ease, transform 0.15s ease;
flex-shrink: 0;
}
.product-mobile-buybar__cta:hover {
background-color: var(--co-primary-strong);
}
.product-mobile-buybar__cta:active {
transform: translateY(1px);
}
.product-mobile-buybar__cta:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
.product-mobile-buybar {
transition-duration: 0.01ms !important;
}
}
/* ==========================================================================
Desktop Mega Menu — category navigation (sections/header.blade.php)
--------------------------------------------------------------------------
Plain CSS on purpose: the storefront stylesheet (output.css) is a
pre-compiled Tailwind artifact without a live build for the front, so
the structural styles of this component live here and never depend on
the Tailwind build state. Loaded through front/assets/css/main.css.
========================================================================== */
/* ---------- Panel container ---------- */
/* Hover bridge: keeps the pointer inside the menu while travelling
from the trigger into the panel (prevents flicker / early close). */
#mega-menu-panel {
padding-top: 0.5rem;
/* Close instantly on leave */
transition-delay: 0ms;
}
/* Small intent delay when opening (hover or keyboard focus) */
.group:hover > #mega-menu-panel,
.group:focus-within > #mega-menu-panel {
transition-delay: 100ms;
}
/* Keyboard support: keep the panel visible while focus is inside */
.group:focus-within > #mega-menu-panel {
opacity: 1;
visibility: visible;
}
.mega-menu-panel {
/* Responsive width — never overflows the viewport */
width: min(calc(100% - 3rem), 86rem);
height: 28rem;
border: 1px solid rgba(24, 24, 27, 0.06);
box-shadow:
0 16px 48px -12px rgba(24, 24, 27, 0.16),
0 4px 16px -8px rgba(24, 24, 27, 0.08);
}
/* ---------- Right panel — parent categories (#f5f5f5) ---------- */
.mega-menu-parents {
flex-shrink: 0;
width: 15.5rem;
height: 100%;
background-color: #f5f5f5;
overflow-y: auto;
overscroll-behavior: contain;
}
.mega-menu-parents-list {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.65rem;
}
.mega-menu-parent-item {
display: flex;
align-items: center;
gap: 0.65rem;
width: 100%;
padding: 0.6rem 0.7rem;
border-radius: 0.75rem;
font-size: 0.815rem;
color: #52525b;
cursor: pointer;
transition:
background-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
.mega-menu-parent-item:hover {
background-color: rgba(24, 24, 27, 0.05);
color: #3f3f46;
}
.mega-menu-parent-item.is-active {
background-color: #ffffff;
color: #214792; /* --color-primary-500 */
font-family: var(--font-yekanBakhSemiBold), inherit;
box-shadow: 0 2px 10px -4px rgba(24, 24, 27, 0.14);
}
.mega-menu-parent-icon {
display: grid;
place-items: center;
flex-shrink: 0;
}
.mega-menu-parent-icon img,
.mega-menu-parent-icon svg {
width: 1.5rem;
height: 1.5rem;
object-fit: contain;
}
.mega-menu-parent-item.is-active .mega-menu-parent-icon svg,
.mega-menu-parent-item:hover .mega-menu-parent-icon svg {
fill: #214792;
}
.mega-menu-parent-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Forward-pointing chevron (RTL: points towards the child panel);
hidden until the row is hovered or active. */
.mega-menu-parent-chevron {
margin-inline-start: auto;
flex-shrink: 0;
opacity: 0;
transition: opacity 0.2s ease;
}
.mega-menu-parent-item:hover .mega-menu-parent-chevron,
.mega-menu-parent-item.is-active .mega-menu-parent-chevron {
opacity: 1;
}
/* Thin, subtle scrollbar for the parents list */
.mega-menu-parents::-webkit-scrollbar {
width: 6px;
}
.mega-menu-parents::-webkit-scrollbar-track {
background: transparent;
}
.mega-menu-parents::-webkit-scrollbar-thumb {
background: rgba(24, 24, 27, 0.12);
border-radius: 999px;
}
/* ---------- Left panel — child categories (white) ---------- */
.mega-menu-content {
flex: 1 1 auto;
min-width: 0;
height: 100%;
padding: 1.5rem;
overflow-y: auto;
overscroll-behavior: contain;
}
.mega-menu-all-link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-bottom: 1.25rem;
font-size: 0.9rem;
color: #214792; /* --color-primary-500 */
transition: opacity 0.2s ease;
}
.mega-menu-all-link:hover {
opacity: 0.75;
}
/* Multiple columns when necessary; adapts to the viewport */
.mega-menu-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem 2.5rem;
}
@media (min-width: 80rem) {
.mega-menu-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 96rem) {
.mega-menu-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* Second-level category heading — visually stronger than links */
.mega-menu-group-title {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-bottom: 0.4rem;
font-size: 0.85rem;
font-family: var(--font-yekanBakhSemiBold), inherit;
color: #27272a;
transition: color 0.2s ease;
}
.mega-menu-group-title:hover {
color: #214792;
}
.mega-menu-group-chevron {
color: #a1a1aa;
}
.mega-menu-group-links {
display: flex;
flex-direction: column;
}
.mega-menu-group-links a {
display: block;
padding: 0.3rem 0;
font-size: 0.75rem;
color: #71717a;
transition: color 0.15s ease;
}
.mega-menu-group-links a:hover {
color: #1c3c7c; /* --color-primary-600 */
}
.mega-menu-empty {
padding: 2rem 0;
font-size: 0.815rem;
color: #a1a1aa;
text-align: center;
}
/* =========================================================
Product Buy Box
========================================================= */
.buybox {
/* Themable variables — override at any ancestor */
--bb-primary: var(--color-primary-500, #e11d48);
--bb-primary-hover: var(--color-primary-400, #be123c);
--bb-primary-soft: color-mix(in srgb, var(--bb-primary) 8%, #fff);
--bb-radius-lg: 20px;
--bb-radius-md: 14px;
--bb-radius-sm: 10px;
--bb-border: #ececef;
--bb-border-strong: #d9d9de;
--bb-bg: #ffffff;
--bb-bg-soft: #fafafa;
--bb-text: #18181b;
--bb-text-soft: #52525b;
--bb-text-muted: #a1a1aa;
--bb-success: #16a34a;
--bb-success-soft: #ecfdf3;
--bb-warning: #d97706;
--bb-warning-soft: #fffbeb;
--bb-danger: #dc2626;
--bb-danger-soft: #fef2f2;
--bb-shadow:
0 1px 2px rgba(24, 24, 27, .04),
0 24px 48px -28px rgba(24, 24, 27, .22);
position: relative;
display: flex;
flex-direction: column;
background: var(--bb-bg);
border: 1px solid var(--bb-border);
border-radius: var(--bb-radius-lg);
box-shadow: var(--bb-shadow);
overflow: hidden;
isolation: isolate;
font-feature-settings: "ss01";
}
/* Accent top bar */
.buybox__accent {
display: block;
height: 4px;
background: linear-gradient(270deg, var(--bb-primary) 0%, #fb7185 55%, #fecdd3 100%);
}
.buybox__body {
display: flex;
flex-direction: column;
gap: 18px;
padding: 20px;
}
/* ---------- Price ---------- */
.buybox__price { display: flex; flex-direction: column; gap: 6px; }
.buybox__price-before {
display: flex;
align-items: center;
gap: 8px;
min-height: 20px;
}
.buybox__price-before-label {
font-size: 11px;
color: var(--bb-text-muted);
}
.buybox__price-before-value {
font-size: 13px;
color: var(--bb-text-muted);
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.buybox__discount-badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 20px;
padding: 0 8px;
border-radius: 999px;
background: linear-gradient(180deg, #ef4444, #dc2626);
color: #fff;
font-size: 11px;
font-weight: 700;
box-shadow: 0 4px 10px -4px rgba(220, 38, 38, .55);
}
.buybox__price-current {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.buybox__price-current-wrap {
display: flex;
align-items: baseline;
gap: 6px;
}
.buybox__price-current-value {
font-size: 30px;
font-weight: 800;
line-height: 1;
letter-spacing: -.02em;
color: var(--bb-text);
font-variant-numeric: tabular-nums;
}
.buybox__price-currency {
font-size: 13px;
color: var(--bb-text-soft);
}
/* Stock pill */
.buybox__stock {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
background: var(--bb-bg-soft);
border: 1px solid var(--bb-border);
}
.buybox__stock-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.buybox__stock-dot--success { background: var(--bb-success); }
.buybox__stock-dot--warning { background: var(--bb-warning); }
.buybox__stock-dot--danger { background: var(--bb-danger); }
.buybox__stock-text--success { color: var(--bb-success); }
.buybox__stock-text--warning { color: var(--bb-warning); }
.buybox__stock-text--danger { color: var(--bb-danger); }
.buybox__stock:has(.buybox__stock-dot--success) { background: var(--bb-success-soft); border-color: transparent; }
.buybox__stock:has(.buybox__stock-dot--warning) { background: var(--bb-warning-soft); border-color: transparent; }
.buybox__stock:has(.buybox__stock-dot--danger) { background: var(--bb-danger-soft); border-color: transparent; }
/* ---------- Countdown ---------- */
.buybox__countdown {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border-radius: var(--bb-radius-md);
background: linear-gradient(90deg, #fef2f2, #fff1f2);
border: 1px solid #fee2e2;
}
.buybox__countdown-label {
display: inline-flex;
align-items: center;
gap: 6px;
color: #dc2626;
font-size: 12px;
font-weight: 600;
}
.buybox__countdown-digits {
display: inline-flex;
align-items: center;
gap: 4px;
}
.buybox__digit-group {
display: inline-flex;
align-items: center;
gap: 4px;
}
.buybox__digit {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 6px;
border-radius: 8px;
background: #fff;
color: #dc2626;
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
box-shadow: 0 1px 2px rgba(220, 38, 38, .12);
}
.buybox__digit-sep {
color: #fca5a5;
font-size: 13px;
font-weight: 700;
padding: 0 1px;
}
/* ---------- Variation chips ---------- */
.buybox__variations {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.buybox__chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 999px;
background: var(--bb-bg-soft);
border: 1px solid var(--bb-border);
font-size: 11.5px;
line-height: 1;
}
.buybox__chip-label { color: var(--bb-text-muted); }
.buybox__chip-value {
color: var(--bb-text);
font-weight: 600;
}
/* ---------- Quantity ---------- */
.buybox__qty {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 14px;
border-top: 1px solid var(--bb-border);
}
.buybox__qty-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.buybox__qty-title {
font-size: 13px;
font-weight: 700;
color: var(--bb-text);
}
.buybox__qty-hint {
font-size: 11px;
color: var(--bb-text-muted);
}
.buybox__qty-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.buybox__counter {
display: inline-flex;
align-items: center;
padding: 3px;
border-radius: var(--bb-radius-md);
background: #fff;
border: 1px solid var(--bb-border-strong);
box-shadow: 0 1px 2px rgba(24, 24, 27, .03);
}
.buybox__counter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: none;
border-radius: 10px;
background: transparent;
cursor: pointer;
transition: background .15s, color .15s, transform .1s;
}
.buybox__counter-btn:active { transform: scale(.94); }
.buybox__counter-btn:disabled { opacity: .35; cursor: not-allowed; }
.buybox__counter-btn--minus { color: #dc2626; }
.buybox__counter-btn--minus:hover:not(:disabled) { background: #fee2e2; }
.buybox__counter-btn--plus { color: #16a34a; }
.buybox__counter-btn--plus:hover:not(:disabled) { background: #dcfce7; }
.buybox__counter-input {
width: 48px;
height: 38px;
text-align: center;
border: 0;
outline: 0;
background: transparent;
font-size: 15px;
font-weight: 700;
color: var(--bb-text);
font-variant-numeric: tabular-nums;
}
.buybox__qty-max {
font-size: 11px;
color: var(--bb-text-muted);
text-align: left;
flex: 1;
}
/* ---------- Alerts ---------- */
.buybox__alert {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
border-radius: var(--bb-radius-sm);
font-size: 11.5px;
font-weight: 500;
}
.buybox__alert.hidden { display: none; }
.buybox__alert--warning {
background: var(--bb-warning-soft);
color: #b45309;
border: 1px solid #fde68a;
}
.buybox__alert--muted {
background: var(--bb-bg-soft);
color: var(--bb-text-soft);
border: 1px solid var(--bb-border);
}
/* ---------- CTA ---------- */
.buybox__cta-wrap {
display: flex;
flex-direction: column;
gap: 10px;
}
.buybox__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 52px;
padding: 0 20px;
border: 0;
border-radius: var(--bb-radius-md);
background: linear-gradient(180deg, var(--bb-primary), var(--bb-primary-hover));
color: #fff;
font-size: 15px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--bb-primary) 65%, transparent),
inset 0 1px 0 rgba(255, 255, 255, .18);
transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.buybox__cta:hover:not(:disabled) { filter: brightness(1.05); }
.buybox__cta:active:not(:disabled) { transform: translateY(1px); }
.buybox__cta:disabled {
background: #e4e4e7;
color: #a1a1aa;
box-shadow: none;
cursor: not-allowed;
}
/* After-add state */
.buybox__added {
display: none;
align-items: center;
gap: 10px;
}
.buybox__added:not(.hidden) { display: flex; }
.buybox__added-counter {
display: inline-flex;
align-items: center;
padding: 3px;
border-radius: var(--bb-radius-md);
background: var(--bb-bg-soft);
border: 1px solid var(--bb-border);
}
.buybox__added-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 0;
border-radius: 9px;
background: #fff;
cursor: pointer;
transition: background .15s, transform .1s;
}
.buybox__added-btn:active { transform: scale(.94); }
.buybox__added-btn--minus { color: #dc2626; }
.buybox__added-btn--minus:hover { background: #fee2e2; }
.buybox__added-btn--plus { color: #16a34a; }
.buybox__added-btn--plus:hover { background: #dcfce7; }
.buybox__added-input {
width: 40px;
height: 36px;
text-align: center;
border: 0;
outline: 0;
background: transparent;
font-size: 14px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.buybox__added-link {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 44px;
border-radius: var(--bb-radius-md);
border: 1.5px solid var(--bb-primary);
color: var(--bb-primary);
font-size: 13px;
font-weight: 700;
text-decoration: none;
background: #fff;
transition: background .15s, color .15s;
}
.buybox__added-link:hover {
background: var(--bb-primary-soft);
}
/* ---------- Trust features ---------- */
.buybox__features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding-top: 16px;
border-top: 1px solid var(--bb-border);
margin: 0;
list-style: none;
}
.buybox__feature {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}
.buybox__feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
}
.buybox__feature-icon svg { width: 18px; height: 18px; }
.buybox__feature-icon--green { background: var(--bb-success-soft); color: var(--bb-success); }
.buybox__feature-icon--blue { background: #eff6ff; color: #2563eb; }
.buybox__feature-icon--amber { background: var(--bb-warning-soft); color: var(--bb-warning); }
.buybox__feature-text {
display: flex;
flex-direction: column;
gap: 1px;
line-height: 1.35;
}
.buybox__feature-text strong {
font-size: 11.5px;
font-weight: 700;
color: var(--bb-text);
}
.buybox__feature-text small {
font-size: 10.5px;
color: var(--bb-text-muted);
}
/* ---------- Responsive tweaks ---------- */
@media (max-width: 1023.98px) {
.buybox__price-current-value { font-size: 26px; }
.buybox__body { padding: 16px; gap: 14px; }
.buybox__features { gap: 6px; }
.buybox__feature-text small { display: none; }
}
@media (max-width: 420px) {
.buybox__price-current-value { font-size: 24px; }
.buybox__cta { height: 48px; font-size: 14px; }
}
/* =========================================================
Sticky Buy Box (rail)
========================================================= */
.stickybuy {
--sb-primary: var(--bb-primary, var(--color-primary-500, #e11d48));
--sb-primary-hover: var(--bb-primary-hover, var(--color-primary-400, #be123c));
--sb-border: #ececef;
--sb-border-strong: #d9d9de;
--sb-bg: #ffffff;
--sb-bg-soft: #fafafa;
--sb-text: #18181b;
--sb-text-soft: #52525b;
--sb-text-muted: #a1a1aa;
--sb-success: #16a34a;
--sb-success-soft: #ecfdf3;
--sb-warning: #d97706;
--sb-warning-soft: #fffbeb;
--sb-danger: #dc2626;
--sb-danger-soft: #fef2f2;
--sb-radius-lg: 18px;
--sb-radius-md: 12px;
--sb-radius-sm: 9px;
position: sticky;
top: 5rem;
background: var(--sb-bg);
border: 1px solid var(--sb-border);
border-radius: var(--sb-radius-lg);
overflow: hidden;
box-shadow:
0 1px 2px rgba(24, 24, 27, .04),
0 20px 40px -26px rgba(24, 24, 27, .22);
isolation: isolate;
}
.stickybuy__accent {
display: block;
height: 4px;
background: linear-gradient(270deg, var(--sb-primary) 0%, #fb7185 55%, #fecdd3 100%);
}
.stickybuy__body {
display: flex;
flex-direction: column;
gap: 14px;
padding: 16px;
}
/* ---------- Price ---------- */
.stickybuy__price {
display: flex;
flex-direction: column;
gap: 4px;
}
.stickybuy__price-label {
font-size: 11px;
color: var(--sb-text-muted);
}
.stickybuy__price-before {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 20px;
}
.stickybuy__price-before.hidden { display: none; }
.stickybuy__price-before-value {
font-size: 12.5px;
color: var(--sb-text-muted);
text-decoration: line-through;
text-decoration-thickness: 1px;
font-variant-numeric: tabular-nums;
}
.stickybuy__discount-badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 20px;
padding: 0 8px;
border-radius: 999px;
background: linear-gradient(180deg, #ef4444, #dc2626);
color: #fff;
font-size: 11px;
font-weight: 700;
box-shadow: 0 4px 10px -4px rgba(220, 38, 38, .5);
}
.stickybuy__price-current {
display: flex;
align-items: baseline;
gap: 5px;
}
.stickybuy__price-current-value {
font-size: 24px;
font-weight: 800;
line-height: 1;
letter-spacing: -.02em;
color: var(--sb-text);
font-variant-numeric: tabular-nums;
}
.stickybuy__price-currency {
font-size: 12px;
color: var(--sb-text-soft);
}
/* ---------- Stock ---------- */
.stickybuy__stock {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 999px;
background: var(--sb-bg-soft);
border: 1px solid var(--sb-border);
font-size: 11.5px;
font-weight: 600;
align-self: flex-start;
}
.stickybuy__stock.hidden { display: none; }
.stickybuy__stock-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.stickybuy__stock-dot--success { background: var(--sb-success); }
.stickybuy__stock-dot--warning { background: var(--sb-warning); }
.stickybuy__stock-dot--danger { background: var(--sb-danger); }
.stickybuy__stock-text--success { color: var(--sb-success); }
.stickybuy__stock-text--warning { color: var(--sb-warning); }
.stickybuy__stock-text--danger { color: var(--sb-danger); }
.stickybuy__stock:has(.stickybuy__stock-dot--success) { background: var(--sb-success-soft); border-color: transparent; }
.stickybuy__stock:has(.stickybuy__stock-dot--warning) { background: var(--sb-warning-soft); border-color: transparent; }
.stickybuy__stock:has(.stickybuy__stock-dot--danger) { background: var(--sb-danger-soft); border-color: transparent; }
/* ---------- Quantity ---------- */
.stickybuy__qty {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--sb-border);
}
.stickybuy__qty-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.stickybuy__qty-title {
font-size: 12.5px;
font-weight: 700;
color: var(--sb-text);
}
.stickybuy__counter {
display: flex;
align-items: center;
justify-content: space-between;
padding: 3px;
border-radius: var(--sb-radius-md);
background: #fff;
border: 1px solid var(--sb-border-strong);
box-shadow: 0 1px 2px rgba(24, 24, 27, .03);
}
.stickybuy__counter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 0;
border-radius: 8px;
background: transparent;
cursor: pointer;
transition: background .15s, transform .1s;
}
.stickybuy__counter-btn:active { transform: scale(.94); }
.stickybuy__counter-btn:disabled { opacity: .35; cursor: not-allowed; }
.stickybuy__counter-btn--minus { color: #dc2626; }
.stickybuy__counter-btn--minus:hover:not(:disabled) { background: #fee2e2; }
.stickybuy__counter-btn--plus { color: #16a34a; }
.stickybuy__counter-btn--plus:hover:not(:disabled) { background: #dcfce7; }
.stickybuy__counter-input {
flex: 1;
height: 32px;
text-align: center;
border: 0;
outline: 0;
background: transparent;
font-size: 14px;
font-weight: 700;
color: var(--sb-text);
font-variant-numeric: tabular-nums;
}
/* ---------- CTA ---------- */
.stickybuy__cta-wrap {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 4px;
}
.stickybuy__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 46px;
padding: 0 14px;
border: 0;
border-radius: var(--sb-radius-md);
background: linear-gradient(180deg, var(--sb-primary), var(--sb-primary-hover));
color: #fff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
box-shadow:
0 10px 20px -12px color-mix(in srgb, var(--sb-primary) 60%, transparent),
inset 0 1px 0 rgba(255, 255, 255, .18);
transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
}
.stickybuy__cta:hover:not(:disabled) { filter: brightness(1.05); }
.stickybuy__cta:active:not(:disabled) { transform: translateY(1px); }
.stickybuy__cta:disabled {
background: #e4e4e7;
color: #a1a1aa;
box-shadow: none;
cursor: not-allowed;
}
.stickybuy__added {
display: none;
align-items: center;
gap: 8px;
}
.stickybuy__added:not(.hidden) { display: flex; }
.stickybuy__added-counter {
display: inline-flex;
align-items: center;
padding: 3px;
border-radius: var(--sb-radius-md);
background: var(--sb-bg-soft);
border: 1px solid var(--sb-border);
}
.stickybuy__added-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 0;
border-radius: 8px;
background: #fff;
cursor: pointer;
transition: background .15s, transform .1s;
}
.stickybuy__added-btn:active { transform: scale(.94); }
.stickybuy__added-btn--minus { color: #dc2626; }
.stickybuy__added-btn--minus:hover { background: #fee2e2; }
.stickybuy__added-btn--plus { color: #16a34a; }
.stickybuy__added-btn--plus:hover { background: #dcfce7; }
.stickybuy__added-input {
width: 34px;
height: 30px;
text-align: center;
border: 0;
outline: 0;
background: transparent;
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.stickybuy__added-link {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
height: 40px;
padding: 0 10px;
border-radius: var(--sb-radius-md);
border: 1.5px solid var(--sb-primary);
color: var(--sb-primary);
font-size: 12px;
font-weight: 700;
text-decoration: none;
background: #fff;
transition: background .15s;
}
.stickybuy__added-link:hover { background: color-mix(in srgb, var(--sb-primary) 8%, #fff); }
/* ---------- Benefits ---------- */
.stickybuy__features {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 12px;
border-top: 1px solid var(--sb-border);
margin: 0;
list-style: none;
}
.stickybuy__feature {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 11.5px;
color: var(--sb-text-soft);
}
.stickybuy__feature-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.stickybuy__feature-dot--success { background: var(--sb-success); }
:root {
--bb-primary: var(--color-primary-500, #e11d48);
--bb-primary-hover: var(--color-primary-400, #be123c);
}
/* =========================================
Product Pagination
========================================= */
.product-pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 32px;
padding: 20px 0;
direction: rtl;
}
/* ---------- Prev / Next Buttons ---------- */
.pagination-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 42px;
padding: 0 16px;
border: 1px solid #e5e7eb;
background: #ffffff;
color: #374151;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
white-space: nowrap;
transition: border-color .2s ease, color .2s ease,
background .2s ease, transform .15s ease,
box-shadow .2s ease;
}
.pagination-btn:hover:not(.is-disabled) {
border-color: #3b82f6;
color: #2563eb;
background: #eff6ff;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(59, 130, 246, .15);
}
.pagination-btn:active:not(.is-disabled) {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(59, 130, 246, .15);
}
.pagination-btn.is-disabled {
opacity: .45;
cursor: not-allowed;
background: #f9fafb;
color: #9ca3af;
border-color: #f1f5f9;
}
/* ---------- Pages Wrapper ---------- */
.pagination-pages {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 4px;
}
/* ---------- Page Number ---------- */
.pagination-page {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 10px;
border: 1px solid #e5e7eb;
background: #ffffff;
color: #374151;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: border-color .2s ease, color .2s ease,
background .2s ease, transform .15s ease,
box-shadow .2s ease;
}
.pagination-page:hover {
border-color: #3b82f6;
color: #2563eb;
background: #eff6ff;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(59, 130, 246, .15);
}
.pagination-page:active {
transform: translateY(0);
}
/* ---------- Active Page ---------- */
.pagination-page.is-active {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
border-color: #2563eb;
color: #ffffff;
cursor: default;
box-shadow: 0 8px 18px rgba(37, 99, 235, .30);
}
.pagination-page.is-active:hover {
transform: none;
}
/* ---------- Ellipsis ---------- */
.pagination-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
color: #9ca3af;
font-size: 18px;
font-weight: 700;
user-select: none;
letter-spacing: 1px;
}
/* ---------- Focus (دسترسپذیری) ---------- */
.pagination-btn:focus-visible,
.pagination-page:focus-visible {
outline: 2px solid #93c5fd;
outline-offset: 2px;
}
/* =========================================
Responsive
========================================= */
@media (max-width: 768px) {
.product-pagination {
gap: 4px;
margin-top: 24px;
padding: 16px 0;
}
.pagination-btn {
height: 38px;
padding: 0 12px;
border-radius: 9px;
}
.pagination-page {
min-width: 38px;
height: 38px;
font-size: 13px;
border-radius: 9px;
}
.pagination-ellipsis {
min-width: 30px;
height: 38px;
font-size: 16px;
}
}
@media (max-width: 480px) {
.pagination-btn-text {
display: none; /* فقط آیکون در موبایل */
}
.pagination-btn {
padding: 0 10px;
}
.pagination-pages {
gap: 4px;
margin: 0;
}
.pagination-page {
min-width: 36px;
height: 36px;
font-size: 13px;
}
}
/*
|--------------------------------------------------------------------------
| Checkout — bank transfer modal (additions)
|--------------------------------------------------------------------------
| Tailwind utilities referenced by
| resources/views/pages/checkout/partials/bank-transfer-modal.blade.php
| that were not part of the pre-compiled stylesheet.
| Values follow the same scale and palette as the compiled Tailwind output.
*/
/* ------------------------------------------------------------ Modal shell */
.max-w-lg { max-width: 32rem; }
.max-h-\[calc\(100vh-16rem\)\] { max-height: calc(100vh - 16rem); }
.place-items-center { place-items: center; }
.bg-zinc-900\/60 {
background-color: color-mix(in oklab, #18181B 60%, transparent);
}
.backdrop-blur-\[2px\] {
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
/* -------------------------------------------------- Instruction note (amber) */
.bg-amber-50 { background-color: #FFFBEB; }
.text-amber-800 { color: #92400E; }
/* ------------------------------------------------- Reference input focus ring */
.focus\:border-primary-400:focus { border-color: var(--color-primary-400, #2755AF); }
.focus\:ring-primary-400:focus {
--tw-ring-color: var(--color-primary-400, #2755AF);
box-shadow: 0 0 0 calc(2px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color);
}
/* ------------------------------------- Receipt upload (::file-selector-button) */
.file\:ms-0::file-selector-button { margin-inline-start: 0px; }
.file\:me-4::file-selector-button { margin-inline-end: calc(var(--spacing, 0.25rem) * 4); }
.file\:py-2\.5::file-selector-button { padding-block: calc(var(--spacing, 0.25rem) * 2.5); }
.file\:px-4::file-selector-button { padding-inline: calc(var(--spacing, 0.25rem) * 4); }
.file\:rounded-e-xl::file-selector-button {
border-start-end-radius: var(--radius-xl, 0.75rem);
border-end-end-radius: var(--radius-xl, 0.75rem);
}
.file\:border-0::file-selector-button { border-style: solid; border-width: 0px; }
.file\:text-s::file-selector-button { font-size: var(--text-s, 0.965rem); }
.file\:font-semibold::file-selector-button { font-weight: 600; }
.file\:bg-zinc-50::file-selector-button { background-color: #FAFAFA; }
.file\:text-zinc-700::file-selector-button { color: #3F3F46; }
.hover\:file\:bg-zinc-100:hover::file-selector-button { background-color: #F4F4F5; }
/* ------------------------------------------------------- Row dividers (dl rows) */
/*
* The compiled output.css ships .divide-y only as a native-CSS-nesting rule
* (`.divide-y { :where(& > :not(:last-child)) { … } }`), which engines
* without nesting support discard silently — rows lost their separators on
* such screens while the rest of the utilities still applied.
* Unnested longhand fallback, identical in value to the compiled output:
* separator on every child except the last (:not(:last-child)).
*/
.divide-y > :not(:last-child) {
--tw-divide-y-reverse: 0;
border-top-style: var(--tw-border-style, solid);
border-bottom-style: var(--tw-border-style, solid);
border-top-width: calc(1px * var(--tw-divide-y-reverse, 0));
border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse, 0)));
}
/* =========================================
Category Filter (Hierarchical)
========================================= */
/* ==========================================================================
PRODUCT CATEGORY FILTER
========================================================================== */
.category-filter {
--category-text: #27272a;
--category-text-secondary: #52525b;
--category-text-muted: #a1a1aa;
--category-border: #e4e4e7;
--category-hover: #f8f8f8;
--category-active-background: #EFF3FA;
--category-active-text: #1C3C7C;
--category-active-border: #D6E1F3;
--category-count-background: #f4f4f5;
--category-count-text: #71717a;
width: 100%;
min-width: 0;
}
/* ==========================================================================
FILTER HEADER
========================================================================== */
.category-filter .filter-toggle {
width: 100%;
min-height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
/* Match the other filter sections (this overrides the base rule) */
padding: 0.95rem 1.1rem;
border: 0;
background: transparent;
color: var(--category-text);
font: inherit;
cursor: pointer;
}
.category-filter .filter-toggle > span {
min-width: 0;
font-size: 14px;
font-weight: 700;
line-height: 1.6;
}
.category-filter .filter-toggle-icon {
width: 18px;
height: 18px;
flex: 0 0 18px;
color: #71717a;
transition:
transform 180ms ease,
color 180ms ease;
}
.category-filter
.filter-toggle[aria-expanded="false"]
.filter-toggle-icon {
transform: rotate(180deg);
}
.category-filter
.filter-toggle:focus-visible {
outline: 2px solid rgba(33, 71, 146, .35);
outline-offset: 3px;
}
/* ==========================================================================
CONTENT
========================================================================== */
.category-filter-content {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.category-filter-content[hidden] {
display: none;
}
/* ==========================================================================
SEARCH
========================================================================== */
.category-search {
position: relative;
width: 100%;
min-width: 0;
}
.category-search-input {
width: 100%;
height: 42px;
display: block;
box-sizing: border-box;
padding: 0 40px 0 38px;
border: 1px solid var(--category-border);
border-radius: 10px;
background: #fafafa;
color: var(--category-text);
font-size: 12px;
font-weight: 500;
outline: none;
transition:
border-color 180ms ease,
background-color 180ms ease,
box-shadow 180ms ease;
}
.category-search-input::placeholder {
color: #a1a1aa;
}
.category-search-input:hover {
border-color: #d4d4d8;
}
.category-search-input:focus {
border-color: #fdba74;
background: #ffffff;
box-shadow:
0 0 0 3px rgba(33, 71, 146, .08);
}
.category-search-icon {
position: absolute;
top: 50%;
right: 13px;
width: 16px;
height: 16px;
color: #a1a1aa;
transform: translateY(-50%);
pointer-events: none;
}
.category-search-clear {
position: absolute;
top: 50%;
left: 8px;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 7px;
background: transparent;
color: #a1a1aa;
cursor: pointer;
transform: translateY(-50%);
transition:
color 180ms ease,
background-color 180ms ease;
}
.category-search-clear:hover {
background: #f4f4f5;
color: #52525b;
}
.category-search-clear:focus-visible {
outline: 2px solid rgba(33, 71, 146, .35);
outline-offset: 1px;
}
.category-search-clear svg {
width: 14px;
height: 14px;
}
.category-search-clear[hidden] {
display: none;
}
/* ==========================================================================
ACTIVE CATEGORY
========================================================================== */
.category-active-chip {
width: 100%;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
box-sizing: border-box;
padding: 8px 9px;
border: 1px solid var(--category-active-border);
border-radius: 9px;
background: var(--category-active-background);
color: var(--category-active-text);
}
.category-active-chip[hidden] {
display: none;
}
.category-active-chip-title {
min-width: 0;
flex: 1 1 auto;
font-size: 11px;
font-weight: 600;
line-height: 1.8;
overflow-wrap: anywhere;
word-break: break-word;
}
.category-clear {
width: 27px;
height: 27px;
flex: 0 0 27px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
color: var(--category-active-text);
text-decoration: none;
transition:
color 180ms ease,
background-color 180ms ease;
}
.category-clear:hover {
background: rgba(234, 88, 12, .1);
color: #c2410c;
}
.category-clear:focus-visible {
outline: 2px solid rgba(33, 71, 146, .4);
outline-offset: 2px;
}
.category-clear svg {
width: 14px;
height: 14px;
}
/* ==========================================================================
CATEGORY TREE
========================================================================== */
.category-tree {
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
max-height: 340px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
list-style: none;
}
/* ==========================================================================
CATEGORY ITEM
========================================================================== */
.category-item {
display: block;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
}
/* ==========================================================================
PARENT ROW
========================================================================== */
.category-parent-row {
width: 100%;
min-width: 0;
display: grid;
/*
* ستون اول = فلش
* ستون دوم = عنوان
*/
grid-template-columns: 30px minmax(0, 1fr);
align-items: stretch;
}
/* ==========================================================================
EXPAND COLUMN
========================================================================== */
.category-expand-column {
width: 30px;
min-width: 30px;
display: flex;
align-items: flex-start;
justify-content: center;
}
.category-expand {
width: 27px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
margin: 2px 0 0;
padding: 0;
border: 0;
border-radius: 7px;
background: transparent;
color: #a1a1aa;
cursor: pointer;
transition:
color 180ms ease,
background-color 180ms ease;
}
.category-expand:hover {
background: #f4f4f5;
color: #52525b;
}
.category-expand:focus-visible {
outline: 2px solid rgba(33, 71, 146, .35);
outline-offset: 1px;
}
.category-expand svg {
width: 15px;
height: 15px;
transition: transform 180ms ease;
}
.category-expand[aria-expanded="true"] svg {
transform: rotate(90deg);
}
/* ==========================================================================
PARENT CATEGORY LINK
========================================================================== */
.category-link {
width: 100%;
min-width: 0;
min-height: 38px;
display: flex;
align-items: flex-start;
gap: 8px;
box-sizing: border-box;
padding: 7px 8px;
border-radius: 9px;
background: transparent;
color: var(--category-text-secondary);
text-decoration: none;
transition:
background-color 180ms ease,
color 180ms ease;
}
.category-link:hover {
background: var(--category-hover);
color: var(--category-text);
}
.category-link:focus-visible {
outline: 2px solid rgba(33, 71, 146, .35);
outline-offset: 2px;
}
/* ==========================================================================
TITLE
========================================================================== */
.category-title {
min-width: 0;
flex: 1 1 auto;
color: inherit;
font-size: 12px;
font-weight: 500;
line-height: 1.9;
/*
* بسیار مهم:
*
* عنوان محدود نمیشود.
* در صورت طولانی بودن به خط بعد میرود.
*/
overflow-wrap: anywhere;
word-break: break-word;
}
/* ==========================================================================
PRODUCT COUNT
========================================================================== */
.category-count {
min-width: 26px;
min-height: 22px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 0 6px;
border-radius: 999px;
background: var(--category-count-background);
color: var(--category-count-text);
font-size: 9px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
/* ==========================================================================
SELECTED PARENT
========================================================================== */
.category-parent
> .category-parent-row
> .category-link.is-selected {
background: var(--category-active-background);
color: var(--category-active-text);
}
.category-parent
> .category-parent-row
> .category-link.is-selected
> .category-title {
font-weight: 700;
}
.category-parent
> .category-parent-row
> .category-link.is-selected
> .category-count {
background: #ffedd5;
color: #c2410c;
}
/* ==========================================================================
CHILDREN
========================================================================== */
.category-children {
width: 100%;
min-width: 0;
display: none;
margin: 0;
padding: 0 0 5px;
padding-inline-start: 30px;
list-style: none;
}
.category-children.is-open {
display: block;
}
/* ==========================================================================
CHILD
========================================================================== */
.category-child {
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
}
/* ==========================================================================
CHILD LINK
========================================================================== */
.category-child-link {
width: 100%;
min-width: 0;
min-height: 38px;
display: flex;
align-items: flex-start;
gap: 8px;
box-sizing: border-box;
padding: 6px 8px;
border-radius: 8px;
background: transparent;
color: #71717a;
text-decoration: none;
transition:
background-color 180ms ease,
color 180ms ease;
}
.category-child-link:hover {
background: #fafafa;
color: var(--category-text);
}
.category-child-link:focus-visible {
outline: 2px solid rgba(33, 71, 146, .35);
outline-offset: 2px;
}
/* ==========================================================================
CHILD SELECTED
========================================================================== */
.category-child-link.is-selected {
background: var(--category-active-background);
color: var(--category-active-text);
}
.category-child-link.is-selected
.category-title {
font-weight: 700;
}
.category-child-link.is-selected
.category-count {
background: #ffedd5;
color: #c2410c;
}
/* ==========================================================================
SEARCH MATCH
========================================================================== */
.category-item.is-match
> .category-parent-row
> .category-link {
background: #EFF3FA;
color: #c2410c;
}
.category-child.is-match
> .category-child-link {
background: #EFF3FA;
color: #c2410c;
}
.category-child[hidden] {
display: none;
}
/* ==========================================================================
EMPTY
========================================================================== */
.category-empty {
width: 100%;
box-sizing: border-box;
margin: 4px 0 0;
padding: 15px 10px;
border: 1px dashed var(--category-border);
border-radius: 9px;
color: var(--category-text-muted);
font-size: 11px;
line-height: 1.8;
text-align: center;
}
.category-search-empty[hidden] {
display: none;
}
/* ==========================================================================
HIDDEN ITEMS
========================================================================== */
.category-item[hidden] {
display: none !important;
}
/* ==========================================================================
MOBILE
========================================================================== */
@media (max-width: 767px) {
.category-filter .filter-toggle {
min-height: 46px;
}
.category-filter-content {
gap: 10px;
}
.category-search-input {
height: 44px;
}
.category-parent-row {
grid-template-columns: 30px minmax(0, 1fr);
}
.category-link {
min-height: 40px;
padding: 7px;
}
.category-title {
font-size: 12px;
line-height: 1.95;
}
.category-children {
padding-inline-start: 26px;
}
.category-expand {
height: 40px;
}
.category-child-link {
width: 100%;
min-height: 40px;
padding: 7px;
}
.category-child-link
.category-title {
font-size: 11.5px;
line-height: 1.95;
}
.category-count {
min-width: 24px;
min-height: 21px;
padding-inline: 5px;
font-size: 9px;
}
}
/* ==========================================================================
REDUCED MOTION
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.category-filter *,
.category-filter *::before,
.category-filter *::after {
transition: none !important;
}
}
/* ============================================
Error Pages (404 / 500)
============================================ */
.error-page {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 60vh;
padding: 3rem 1rem;
background-color: #fcfcfc;
}
.error-page__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
max-width: 34rem;
background-color: #ffffff;
border: 1px solid #e4e4e7;
border-radius: 1rem;
box-shadow: -5px 1px 16px -1px rgba(0, 0, 0, 0.10);
padding: 2.5rem 1.5rem;
}
.error-page__icon {
display: flex;
align-items: center;
justify-content: center;
width: 5.5rem;
height: 5.5rem;
color: var(--color-primary-500, #214792);
margin-bottom: 1rem;
}
.error-page__icon svg {
width: 100%;
height: 100%;
}
.error-page__code {
font-family: var(--font-yekanBakhExtraBold, "yekanBakhExtraBold"), sans-serif;
font-size: 5.5rem;
line-height: 1;
letter-spacing: 0.05em;
color: var(--color-primary-500, #214792);
margin-bottom: 0.75rem;
}
.error-page__title {
font-family: var(--font-yekanBakhBold, "yekanBakhBold"), sans-serif;
font-size: 1.5rem;
line-height: 2.25rem;
color: #3f3f46;
margin-bottom: 0.75rem;
}
.error-page__text {
font-family: var(--font-yekanBakhRegular, "yekanBakhRegular"), sans-serif;
font-size: 0.965rem;
line-height: 1.9;
color: #52525b;
max-width: 30rem;
margin-bottom: 1.75rem;
}
.error-page__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
}
.error-page__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: var(--font-yekanBakhSemiBold, "yekanBakhSemiBold"), sans-serif;
font-size: 0.965rem;
line-height: 1;
padding: 0.85rem 1.75rem;
border-radius: 0.75rem;
border: 1px solid transparent;
cursor: pointer;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.error-page__btn--primary {
background-color: var(--color-primary-500, #214792);
color: #ffffff;
}
.error-page__btn--primary:hover {
background-color: var(--color-primary-600, #1C3C7C);
}
.error-page__btn:focus-visible {
outline: 2px solid var(--color-primary-300, #2E63CC);
outline-offset: 2px;
}
@media (min-width: 576px) {
.error-page__inner {
padding: 3rem 2.5rem;
}
}
@media (min-width: 992px) {
.error-page {
min-height: 70vh;
}
.error-page__inner {
padding: 3.5rem 3rem;
}
.error-page__code {
font-size: 7rem;
}
.error-page__title {
font-size: 1.875rem;
}
}
.max-w-full {
max-width: 100%;
}
/* Mega Menu */
#mega-menu-panel {
width: min(1200px, calc(100vw - 2rem));
max-width: calc(100vw - 2rem);
}
#mega-menu-panel > .mega-menu-panel {
display: flex;
width: 100%;
min-width: 0;
}
.mega-menu-parents {
flex: 0 0 240px;
width: 240px;
}
.mega-menu-content {
flex: 1 1 auto;
min-width: 0;
width: 100%;
}
.mega-menu-section {
width: 100%;
min-width: 0;
}
.mega-menu-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
width: 100%;
}
#mega-menu-panel {
width: min(1200px, calc(100vw - 2rem));
max-width: calc(100vw - 2rem);
}
#mega-menu-panel > .mega-menu-panel {
display: flex;
width: 100%;
max-height: min(70vh, 600px);
min-width: 0;
}
.mega-menu-parents {
flex: 0 0 240px;
width: 240px;
overflow-y: auto;
}
.mega-menu-content {
flex: 1 1 0;
min-width: 0;
width: 0;
overflow-y: auto;
overflow-x: hidden;
}
.mega-menu-section {
width: 100%;
}
.mega-menu-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
width: 100%;
}
/* =========================================
Brand & Model Filter (Divar-style modal)
========================================= */
.product-list-page .brand-model-summary {
margin: 0 0 0.6rem;
color: var(--pl-text-muted);
font-size: 0.72rem;
line-height: 1.8;
}
.product-list-page .brand-model-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.product-list-page .brand-model-open-button {
flex: 1;
padding: 0.55rem 0.9rem;
border: 1px solid var(--pl-border);
border-radius: var(--pl-radius-sm);
background: var(--pl-surface);
color: var(--pl-text);
font-family: inherit;
font-size: 0.78rem;
cursor: pointer;
transition:
border-color 0.2s ease,
color 0.2s ease;
}
.product-list-page .brand-model-open-button:hover {
border-color: var(--pl-primary);
color: var(--pl-primary);
}
.product-list-page .brand-model-clear-button {
padding: 0.55rem 0.7rem;
border: 0;
border-radius: var(--pl-radius-sm);
background: transparent;
color: var(--pl-text-faint);
font-family: inherit;
font-size: 0.72rem;
cursor: pointer;
transition: color 0.2s ease;
}
.product-list-page .brand-model-clear-button:hover {
color: var(--color-red-500, #ef4444);
}
body.brand-model-modal-open {
overflow: hidden;
}
.product-list-page .brand-model-modal {
position: fixed;
inset: 0;
z-index: 120;
display: flex;
align-items: flex-end;
justify-content: center;
}
.product-list-page .brand-model-modal[hidden] {
display: none;
}
.product-list-page .brand-model-modal__backdrop {
position: absolute;
inset: 0;
background: rgb(9 9 11 / 0.55);
}
.product-list-page .brand-model-modal__panel {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: 30rem;
max-height: 85vh;
height: 32rem;
border-radius: var(--pl-radius) var(--pl-radius) 0 0;
background: var(--pl-surface);
overflow: hidden;
}
@media (min-width: 768px) {
.product-list-page .brand-model-modal {
align-items: center;
}
.product-list-page .brand-model-modal__panel {
border-radius: var(--pl-radius);
height: 34rem;
}
}
.product-list-page .brand-model-modal__header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.9rem 1rem;
border-bottom: 1px solid var(--pl-border-soft);
}
.product-list-page .brand-model-modal__title {
flex: 1;
margin: 0;
color: var(--pl-text);
font-family: 'YekanBakhBold', sans-serif;
font-size: 0.9rem;
text-align: center;
}
.product-list-page .brand-model-modal__back,
.product-list-page .brand-model-modal__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--pl-text-muted);
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease;
}
.product-list-page .brand-model-modal__back:hover,
.product-list-page .brand-model-modal__close:hover {
background: var(--pl-hover);
color: var(--pl-text);
}
.product-list-page .brand-model-modal__back svg,
.product-list-page .brand-model-modal__close svg {
width: 1.15rem;
height: 1.15rem;
}
.product-list-page .brand-model-modal__search {
position: relative;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--pl-border-soft);
}
.product-list-page .brand-model-modal__search-icon {
position: absolute;
inset-inline-start: 1.65rem;
top: 50%;
width: 1rem;
height: 1rem;
color: var(--pl-text-faint);
transform: translateY(-50%);
pointer-events: none;
}
.product-list-page .brand-model-modal__search-input {
width: 100%;
padding: 0.6rem 2.4rem 0.6rem 0.9rem;
border: 1px solid var(--pl-border);
border-radius: var(--pl-radius-sm);
background: var(--pl-surface-muted);
color: var(--pl-text);
font-family: inherit;
font-size: 0.8rem;
}
.product-list-page .brand-model-modal__search-input:focus {
border-color: var(--pl-primary);
outline: none;
box-shadow: var(--pl-focus);
}
.product-list-page .brand-model-modal__body {
position: relative;
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
}
.product-list-page .brand-model-modal__state {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
padding: 2.5rem 1rem;
color: var(--pl-text-muted);
font-size: 0.78rem;
text-align: center;
}
.product-list-page .brand-model-modal__spinner {
width: 1.4rem;
height: 1.4rem;
border: 2px solid var(--pl-border);
border-top-color: var(--pl-primary);
border-radius: 999px;
animation: brand-model-spin 0.8s linear infinite;
}
@keyframes brand-model-spin {
to {
transform: rotate(360deg);
}
}
.product-list-page .brand-model-modal__retry {
padding: 0.45rem 1rem;
border: 1px solid var(--pl-primary-border);
border-radius: var(--pl-radius-sm);
background: var(--pl-primary-tint);
color: var(--pl-primary);
font-family: inherit;
font-size: 0.75rem;
cursor: pointer;
}
.product-list-page .brand-model-modal__list {
margin: 0;
padding: 0.35rem 0;
list-style: none;
}
.product-list-page .brand-model-item {
display: flex;
align-items: stretch;
}
.product-list-page .brand-model-item__select {
flex: 1;
display: flex;
align-items: center;
gap: 0.65rem;
min-height: 2.9rem;
padding: 0.55rem 1.1rem;
border: 0;
background: transparent;
color: var(--pl-text);
font-family: inherit;
font-size: 0.82rem;
text-align: right;
cursor: pointer;
transition: background 0.15s ease;
}
.product-list-page .brand-model-item__select:hover {
background: var(--pl-hover);
}
.product-list-page .brand-model-item__select:focus-visible {
outline: 2px solid var(--pl-primary);
outline-offset: -2px;
}
.product-list-page .brand-model-item--all .brand-model-item__select {
font-family: 'YekanBakhBold', sans-serif;
}
.product-list-page .brand-model-item__checkbox {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.05rem;
height: 1.05rem;
flex-shrink: 0;
border: 1.5px solid var(--pl-border);
border-radius: 0.3rem;
background: var(--pl-surface);
color: #fff;
transition:
background 0.15s ease,
border-color 0.15s ease;
}
.product-list-page .brand-model-item__checkbox svg {
width: 0.75rem;
height: 0.75rem;
}
.product-list-page .brand-model-item__checkbox.is-checked {
border-color: var(--pl-primary);
background: var(--pl-primary);
}
.product-list-page .brand-model-item__label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.product-list-page .brand-model-item__count {
padding: 0.1rem 0.45rem;
border-radius: 999px;
background: var(--pl-surface-muted);
color: var(--pl-text-faint);
font-size: 0.65rem;
}
.product-list-page .brand-model-item__expand {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.6rem;
border: 0;
background: transparent;
color: var(--pl-text-faint);
cursor: pointer;
transition:
background 0.15s ease,
color 0.15s ease;
}
.product-list-page .brand-model-item__expand:hover {
background: var(--pl-hover);
color: var(--pl-text);
}
.product-list-page .brand-model-item__expand svg {
width: 1rem;
height: 1rem;
}
.product-list-page .brand-model-modal__more {
display: block;
width: calc(100% - 2rem);
margin: 0.5rem 1rem 0.9rem;
padding: 0.6rem;
border: 1px dashed var(--pl-border);
border-radius: var(--pl-radius-sm);
background: transparent;
color: var(--pl-text-muted);
font-family: inherit;
font-size: 0.76rem;
cursor: pointer;
transition:
border-color 0.2s ease,
color 0.2s ease;
}
.product-list-page .brand-model-modal__more:hover {
border-color: var(--pl-primary);
color: var(--pl-primary);
}
.product-list-page .brand-model-modal__footer {
display: flex;
gap: 0.6rem;
padding: 0.8rem 1rem;
border-top: 1px solid var(--pl-border-soft);
background: var(--pl-surface);
}
.product-list-page .brand-model-modal__apply {
flex: 1;
padding: 0.65rem;
border: 0;
border-radius: var(--pl-radius-sm);
background: var(--pl-primary);
color: #fff;
font-family: 'YekanBakhBold', sans-serif;
font-size: 0.82rem;
cursor: pointer;
transition: background 0.2s ease;
}
.product-list-page .brand-model-modal__apply:hover {
background: var(--pl-primary-strong);
}
.product-list-page .brand-model-modal__reset {
padding: 0.65rem 1rem;
border: 1px solid var(--pl-border);
border-radius: var(--pl-radius-sm);
background: transparent;
color: var(--pl-text-muted);
font-family: inherit;
font-size: 0.78rem;
cursor: pointer;
transition:
border-color 0.2s ease,
color 0.2s ease;
}
.product-list-page .brand-model-modal__reset:hover {
border-color: var(--color-red-500, #ef4444);
color: var(--color-red-500, #ef4444);
}
/* =========================================
Category-Scoped Filters (AJAX refresh)
========================================= */
/*
* با تعویض دسته، سایدبار تا رسیدن پاسخ AJAX در حالت بارگذاری است
* تا داده دسته قبلی بهعنوان داده معتبر نمایش داده نشود.
*/
.product-list-page [data-category-scoped-filters] {
position: relative;
transition: opacity 0.15s ease;
}
.product-list-page [data-category-scoped-filters].is-loading {
opacity: 0.45;
pointer-events: none;
}
.product-list-page [data-category-scoped-filters].is-loading::after {
content: '';
position: absolute;
inset-inline-start: 0;
top: 0.75rem;
width: 0.85rem;
height: 0.85rem;
border: 2px solid var(--pl-border);
border-top-color: var(--pl-primary);
border-radius: 50%;
animation: pl-category-scoped-spin 0.7s linear infinite;
}
@keyframes pl-category-scoped-spin {
to {
transform: rotate(360deg);
}
}
/* ==========================================================================
Compare page — attribute table (pages/compare/index.blade.php)
--------------------------------------------------------------------------
Plain CSS on purpose: the storefront stylesheet (output.css) is a
pre-compiled Tailwind artifact without a live build for the front, so the
column width of the comparison table lives here and never depends on the
Tailwind build state. Loaded through front/assets/css/style.css.
========================================================================== */
/*
* One label track (6.5rem) plus one equal track per compared product.
* --compare-columns is rendered inline by the Blade view (1–4), so two
* products still fit a phone while wider comparisons scroll sideways inside
* their card (the wrapping element carries Tailwind's overflow-x-auto).
*/
[data-compare-table] {
min-width: calc(6.5rem + 6.5rem * var(--compare-columns, 2));
}