*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* برای مرورگرهای مبتنی بر Firefox */
* {
scrollbar-color: #A8C3A0 #A8C3A0; /* رنگ اسکرولبار و پس‌زمینه */
scrollbar-width: thin; /* عرض اسکرولبار */
}

/* برای مرورگرهای مبتنی بر WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
width: 10px; /* عرض اسکرولبار */
height: 10px; /* ارتفاع اسکرولبار (برای اسکرولبار افقی) */
}

::-webkit-scrollbar-track {
background: #A8C3A0; /* رنگ پس‌زمینه اسکرولبار */
border-radius: 5px; /* گرد کردن گوشه‌ها */
}

::-webkit-scrollbar-thumb {
background: #A8C3A0; /* رنگ اسکرولبار */
border-radius: 5px; /* گرد کردن گوشه‌ها */
}

::-webkit-scrollbar-thumb:hover {
background: #A8C3A0; /* رنگ اسکرولبار هنگام hover */
}

@font-face {
font-family: iransans;
font-style: normal;
font-weight: normal;
src: url("../fonts/IRANSansWeb_Medium.eot");
src: url("../fonts/IRANSansWeb_Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/IRANSansWeb_Medium.woff2") format("woff2"), url("../fonts/IRANSansWeb_Medium.woff") format("woff"), url("../fonts/IRANSansWeb_Medium.ttf") format("truetype");
}

@font-face {
  font-family: 'iranx';
  font-style: normal;
  font-weight: 900; /* چون Black هست، وزن زیاد دارد */
  src: url('../fonts/IRANSansX.ttf') format("truetype");
}

@font-face {
  font-family: 'Kalameh';
  font-style: normal;
  font-weight: 900; /* چون Black هست، وزن زیاد دارد */
  src: url('../fonts/Kalameh.ttf') format("truetype");
}


@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap");
:root {
--FontFamily: iransans;
--FontFamily1: iranx;
--FontFamily2: Kalameh;
--sage-green: #CCE5C5;
--honey-gold: #E5910D;
--dark-bg: #0f172a;
--darker-bg: #0a0f1c;
--light-text: #f1f5f9;
--gray-text: #94a3b8;
--theme-color:#ffffff;
--ThemeColor: #03071a;
--ThemeLightColor:#9246de;
--successcolor:#13B792;
--dangercolor:#ff3648;
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
--FontSize: 1rem;
--transition: all 0.6s ease-in-out;
--boxshadow:rgba(0, 0, 0, 0.1) 0px 4px 12px;
--text-shadow: 1px 1px 2px rgba(255, 248, 220, 0.9);
}

* {margin: 0;padding: 0;box-sizing: border-box;}

a {color: var(--dark-bg);text-decoration: none !important;}
.text-gold{ color: var(--honey-gold) !important;text-shadow: var(--text-shadow) !important;}
.text-error{color: var(--dangercolor) !important;text-shadow: var(--text-shadow) !important;font-family: var(--FontFamily1);}

body {text-align: right;font-family: var(--FontFamily);min-height:100vh;display:-ms-flexbox;display:-webkit-box;display:flex;flex-direction: column;height: 100%;background-color: var(--theme-color);color: var(--dark-bg);line-height: 1.6;overflow-x: hidden;}
.dark-bg {background: linear-gradient(to bottom, var(--darker-bg), var(--dark-bg));min-height: 100vh;}
.pattern_class {position: relative;overflow: hidden;height: 100%;padding: 0 !important;}
.pattern_class::before {content: "";position: absolute;inset: 0;background-image: url("https://shopkhoshkam.com/public/img/banner/pattern.jpg");background-repeat: repeat;background-size: auto 100%;opacity: 0.03;pointer-events: none;z-index: 0;}
.pattern_class .container {width: 100%;margin: 0 auto;padding: 0 15px;}
.pattern_class .row {margin-left: 0;margin-right: 0;padding: 0 15px;}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {font-weight: 600;margin-bottom: 1rem;}
.section-title {font-size: 2.2rem;font-weight: 700;position: relative;display: inline-flex;margin-bottom: 0.5rem;font-family: var(--FontFamily2);}
.section-title::after {content: '';position: absolute;bottom: -10px;right: 0;width: 60px;height: 3px;background: linear-gradient(90deg, var(--dark-bg), var(--gray-text));border-radius: 3px;}
.section-subtitle {color: var(--dark-bg);font-size: 1.1rem;}
.neon-title {text-shadow: 0 0 10px rgba(168, 195, 160, 0.7);color: var(--theme-color);}
.hero-content p{color: var(--theme-color);}

/* ===== GLASSMORPHISM STYLES ===== */
.glass-card {background: var(--glass-bg);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border-radius: 16px;border: 1px solid var(--glass-border);box-shadow: var(--glass-shadow);transition: all 0.3s ease;position: relative;overflow: hidden;}
.glass-card::before {content: '';position: absolute;top: 0;right: 0;width: 100%;height: 100%;background-color: var(--sage-green);z-index: -1;}
.glass-card:hover {transform: translateY(-5px);box-shadow: var(--boxshadow);border-color: rgba(168, 195, 160, 0.3);}
.glass-navbar {background: var(--sage-green) !important;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border-bottom: 1px solid rgba(168, 195, 160, 0.2);box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);}
.glass-footer {background: var(--sage-green);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border-top: 1px solid rgba(168, 195, 160, 0.2);padding: 3rem 0 1.5rem;}
.glass-sidebar {background: var(--sage-green) !important;backdrop-filter: blur(15px);-webkit-backdrop-filter: blur(15px);border-left: 1px solid rgba(168, 195, 160, 0.2);}

/* ===== NEON EFFECTS ===== */
.neon-logo {color: var(--light-text);font-size: 1.8rem;text-decoration: none;position: relative;}
.neon-logo::after {content: '';position: absolute;bottom: -5px;right: 0;width: 100%;height: 2px;background: linear-gradient(90deg, transparent, var(--sage-green), transparent);border-radius: 2px;}
.btn-neon {background: transparent;color: var(--sage-green);border: 2px solid var(--honey-gold);border-radius: 50px;padding: 0.75rem 2rem;font-weight: 600;position: relative;overflow: hidden;transition: var(--transition);box-shadow: var(--boxshadow);}
.btn-neon:hover {background: rgba(255, 179, 0, 0.1);color: var(--light-text);box-shadow: var(--boxshadow);transform: translateY(-2px);}
.btn-neon-sm {background: transparent;color: var(--honey-gold);border: 1px solid var(--honey-gold);border-radius: 8px;padding: 0.5rem 1.5rem;font-size: 0.9rem;transition: var(--transition);}
.btn-neon-sm:hover {background: var(--honey-gold);box-shadow: var(--boxshadow);color: var(--dark-bg);border-color: var(--dark-bg);}
.btn-outline-neon {background: transparent;color: var(--honey-gold);border: 2px solid var(--honey-gold);border-radius: 50px;padding: 0.75rem 2rem;font-weight: 600;transition: var(--transition);}
.btn-outline-neon:hover {background: var(--honey-gold);color: var(--light-text);box-shadow: 0 0 20px rgba(168, 195, 160, 0.4);}

/* ===== NAVIGATION ===== */
.nav-link {color: var(--darker-bg) !important;font-weight: 500;margin: 0 0.5rem;position: relative;transition: all 0.3s ease;}
.nav-link:hover, .nav-link.active {color: var(--dark-bg) !important;}
.navbar-toggler i{color: var(--dark-bg);font-size: 1.8rem;}
.navbar-toggler:focus {text-decoration: none !important;outline: 0 !important;box-shadow: none !important;}
.nav-link::after {content: '';position: absolute;bottom: 0;right: 0;width: 0;height: 2px;background: linear-gradient(90deg, var(--dark-bg), var(--gray-text));border-radius: 2px;transition: width 0.3s ease;}
.nav-link:hover::after, .nav-link.active::after {width: 100%;}
.nav-icon {color: var(--dark-bg);font-size: 1.4rem;position: relative;transition: all 0.3s ease;}
.nav-icon:hover {color: var(--darker-bg);}
.cart-badge {position: absolute;top: -8px;right: -8px;background: var(--honey-gold);color: var(--dark-bg);font-size: 0.7rem;width: 20px;height: 20px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: bold;}
/* ===== HERO SLIDER ===== */
.hero-slider {margin-top: 1rem;}
.hero-slide {height: 90vh;min-height: 500px;background-size: cover !important;background-position: center !important;display: flex;align-items: center;overflow: hidden;}
.hero-content {animation: fadeInUp 1s ease;}

.swiper-button-next, .swiper-button-prev {
    color: var(--sage-green) !important;
    background: rgba(15, 23, 42, 0.7);
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    backdrop-filter: blur(5px);
}

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

.swiper-pagination-bullet {
    background: var(--gray-text) !important;
    opacity: 0.7;
}

.swiper-pagination-bullet-active {
    background: var(--sage-green) !important;
    opacity: 1;
    box-shadow: var(--boxshadow);
}

/* ===== CATEGORIES ===== */


/* ===== CIRCULAR CATEGORIES - HORIZONTAL LAYOUT ===== */
.circle-category-horizontal {
    text-align: right;
    cursor: pointer;
    transition: var(--transition);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--sage-green);
    border-radius: 12px;
    box-shadow: var(--boxshadow);
    border: 1px solid #f0f0f0;
    height: 100%;
    min-height: 110px;
}

.circle-category-horizontal:hover {
    transform: translateY(-5px);
    box-shadow: var(--boxshadow);
    border-color: var(--goldColor);
}

.circle-icon-container-horizontal {
    position: relative;
    flex-shrink: 0;
}

.circle-icon-horizontal {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    position: relative;
    z-index: 2;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--honey-gold);
}

.circle-category-horizontal:hover .circle-icon-horizontal {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.8);
}

.circle-icon-horizontal i {
    font-size: 1.8rem;
    color: var(--honey-gold);
    transition: var(--transition);
}

.circle-category-horizontal:hover .circle-icon-horizontal i {
    color: #fff;
    transform: scale(1.1);
}

.circle-glow-horizontal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0) 70%);
    opacity: 0;
    transition: var(--transition);
    z-index: 1;
}

.circle-category-horizontal:hover .circle-glow-horizontal {
    opacity: 1;
    animation: pulseGlowHorizontal 2s infinite alternate;
}

@keyframes pulseGlowHorizontal {
    0% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    }
    100% {
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), 0 0 35px rgba(255, 215, 0, 0.2);
    }
}

.category-content-horizontal {
    flex: 1;
    text-align: right;
}

.category-name-horizontal {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--honey-gold);
    margin-bottom: 0.5rem;
    transition: var(--transition);
    text-shadow: var(--text-shadow);
}

.circle-category-horizontal:hover .category-name-horizontal {
    color: var(--honey-gold);
}

.category-count-horizontal {
    font-size: 0.9rem;
    color: var(--dark-bg);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-shadow: var(--text-shadow);
}

.category-count-horizontal:before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--honey-gold);
    border-radius: 50%;
    display: inline-block;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .circle-icon-horizontal {
        width: 65px;
        height: 65px;
    }
    
    .circle-icon-horizontal i {
        font-size: 1.6rem;
    }
    
    .circle-glow-horizontal {
        width: 80px;
        height: 80px;
    }
    
    .category-name-horizontal {
        font-size: 1rem;
    }
}

@media (max-width: 992px) {
    .circle-category-horizontal {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem 1rem;
    }
    
    .category-content-horizontal {
        text-align: center;
    }
    
    .circle-icon-horizontal {
        width: 80px;
        height: 80px;
    }
    
    .circle-icon-horizontal i {
        font-size: 1.8rem;
    }
    
    .circle-glow-horizontal {
        width: 95px;
        height: 95px;
    }
}

@media (max-width: 768px) {
    .circle-category-horizontal {
        min-height: 100px;
    }
    
    .circle-icon-horizontal {
        width: 60px;
        height: 60px;
    }
    
    .circle-icon-horizontal i {
        font-size: 1.5rem;
    }
    
    .circle-glow-horizontal {
        width: 75px;
        height: 75px;
    }
    
    .category-name-horizontal {
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    .circle-category-horizontal {
        min-height: 90px;
        padding: 1rem;
    }
    
    .circle-icon-horizontal {
        width: 100px;
        height: 100px;
    }
    
    .circle-icon-horizontal i {
        font-size: 1.3rem;
    }
    
    .circle-glow-horizontal {
        width: 65px;
        height: 65px;
    }
    
    .category-name-horizontal {
        font-size: 0.9rem;
    }
    
    .category-count-horizontal {
        font-size: 0.8rem;
    }
}


/* ===== PRODUCT CARDS ===== */
.product-card {
    height: 100%;
    transition: all 0.4s ease;
}

.product-card:hover {
    border-color: rgba(168, 195, 160, 0.5);
    box-shadow: 0 15px 35px rgba(168, 195, 160, 0.2), 0 0 15px rgba(168, 195, 160, 0.1) inset;
}

.product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(135deg,var(--honey-gold),#ffed4e);
    color: var(--dark-bg);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 2;
}

.product-img {
    overflow: hidden;
    border-radius: 12px;
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    border-bottom-right-radius: 7rem;
    border-bottom-left-radius: 7rem;
}

.product-card:hover .product-img img {
    transform: scale(1.05);
}

.product-title {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--honey-gold);
    text-shadow: var(--text-shadow);
}

.product-desc {
    color: var(--dark-bg);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.5;
    text-shadow: var(--text-shadow);
}

.product-price {
    margin-bottom: 1.5rem;
}

.current-price {
    color: var(--honey-gold);
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: var(--text-shadow);
}

.old-price {
    color: var(--dark-bg);
    text-decoration: line-through;
    font-size: 1rem;
    margin-right: 0.5rem;
    text-shadow: var(--text-shadow);
}

.product-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-cart {
    background: transparent;
    color: var(--honey-gold);
    border: 1px solid var(--honey-gold);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    font-size: 1.5rem;
}

.btn-cart:hover {
    background: var(--honey-gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    color: var(--dark-bg);
    border-color: var(--dark-bg);
}

/* ===== PROMO BANNER ===== */
.promo-card {
    padding: 3rem;
    background: linear-gradient(135deg, rgba(168, 195, 160, 0.1), rgba(232, 184, 109, 0.05));
    border: 1px solid rgba(168, 195, 160, 0.3);
}

.promo-title {
    font-size: 2.5rem;
    color: var(--light-text);
    margin-bottom: 1rem;
}

.promo-desc {
    font-size: 1.1rem;
    color: var(--gray-text);
    margin-bottom: 2rem;
}

.promo-image {
    border-radius: 12px;
    overflow: hidden;
}

.promo-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.countdown {
    display: flex;
    gap: 1.5rem;
}

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

.countdown-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--sage-green);
    text-shadow: var(--textshadow);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.countdown-label {
    font-size: 0.9rem;
    color: var(--dark-bg);
}


/*************** login style ***********/

.login_style{
display: flex; 
flex-direction: column; 
background-color: var(--sage-green); 
padding: 2rem;
box-shadow: var(--boxshadow);
margin: 0 auto;
border-bottom-right-radius: 1rem;
border-top-right-radius: 1rem;
}

.login_lock{
display: flex; 
flex-direction: column; 
background-color: #000;  
padding: 2rem;
box-shadow: var(--boxshadow);
margin: 0 auto;   
border-bottom-left-radius: 1rem;
border-top-left-radius: 1rem;
}

.login_content{
display: flex;
flex-direction: column;
}

.login_title{
display: flex;
font-family: var(--FontFamily2);    
font-size: 1.4rem;
}

.continue{
display: flex;    
justify-content: space-between;
}

.continue a{
display: flex;
border-radius: 1rem;
padding: 0.5rem 1.2rem;
cursor: pointer;
background-color: var(--honey-gold);
color: var(--dark-bg);
border: 1px solid var(--textshadow);
}

.img_lock{
display: flex;
width: 100%;
justify-content: center;
align-items: center;
height: 100%;
}

.img_lock img{
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}

/****************** login style ***********/


/*******************************  حساب کاربری *********************/

.page-wrapper {
display: inline-flex;
width: 100%;
justify-content: space-between;
border-radius: 1rem;
padding: 1.6rem;
}

.page-wrapper>div {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.page-wrapper h3 {
font-size: 25px;
margin-bottom: 0;
text-transform: capitalize;
font-weight: 600;
color: var(--dark-bg);
}

.page-wrapper h3 small {
display: block;
font-size: 12px;
margin-bottom: 5px;
text-transform: capitalize;
color: rgba(43, 43, 43, 0.54);
}

.page-wrapper .breadcrumb {
background-color: rgba(0, 0, 0, 0);
padding: 0;
margin-bottom: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--dark-bg);
}

.page-wrapper .breadcrumb li {
font-size: 14px;
font-family: "iransans", "Roboto", sans-serif;
font-weight: 500;
line-height: 16.41px;
}

.page-wrapper .breadcrumb .breadcrumb-item {
color: var(--dark-bg)
}

.page-wrapper .breadcrumb .breadcrumb-item+.breadcrumb-item:before {
content: "/";
font-weight: 500;
color: var(--dark-bg);
}

.page-wrapper .breadcrumb .breadcrumb-item a {
padding: 6px 7px;
background-color: var(--theme-color);
border-radius: 5px;
color: var(--dark-bg);
font-family: var(--FontFamily2);
}

.page-wrapper .breadcrumb .breadcrumb-item a svg {
width: 16px;
height: 16px;
vertical-align: text-top;
}

.page-wrapper .breadcrumb .breadcrumb-item.active {
font-weight: 300;
color: var(--honey-gold);
font-family: var(--FontFamily2);
}


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

.Card_Nav_Account li {
margin-bottom: 0;
}

.Card_Nav_Account_link {
position: relative;
display: block;
padding: 1rem 1rem;
transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border-color 0.25s ease-in-out;
border-top: 1px solid var(--dark-bg);
color: var(--dark-bg);
text-decoration: none;
font-family: var(--FontFamily2);
}

.Card_Nav_Account_link::before {
position: absolute;
display: none;
top: 0;
right: -1.25rem;
width: 0.125rem;
height: 100%;
background-color: var(--sage-green);
content: "";
}

.Card_Nav_Account_link:hover {
color: var(--honey-gold);
}

.Card_Nav_Account_link.active {
background-color: var(--honey-gold);
pointer-events: none;
font-family: var(--FontFamily2);
}

.Card_Nav_Account_link.active::before {
display: block;
}

.Card_Nav_Account_link > i {
margin-top: -0.125rem;
transition: opacity 0.25s ease-in-out;
}

.Card_Nav_Account_link:hover > i, .Card_Nav_Account_link.active > i {
opacity: 1 !important;
}

.Card_Nav_Account_light .Card_Nav_Account_link, .card-light .Card_Nav_Account_link {
border-top-color: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.65);
}

.Card_Nav_Account_light .Card_Nav_Account_link::before, .card-light .Card_Nav_Account_link::before {
background-color: var(--theme-color);
}

.Card_Nav_Account_light .Card_Nav_Account_link:hover, .card-light .Card_Nav_Account_link:hover {
color: var(--theme-color);
}

.Card_Nav_Account_light .Card_Nav_Account_link.active, .card-light .Card_Nav_Account_link.active {
color: var(--theme-color);
}

.btn-link-account {
border: 0;
background-color: rgba(0, 0, 0, 0) !important;
color: var(--dark-bg);
font-weight: bold;
text-decoration: none;
transition: var(--transition);
}

.btn-link-account i {
font-size: 1.4rem;
}

.btn-link-account:hover {
color: var(--dangercolor);
transition: var(--transition);
}


/****** file upload class ******/

.Uploaded_Class{
width: 100%;
height: 100%;
transition: var(--transition);
flex-direction: column;
align-items: center;
position: relative;
border: 1px dashed var(--honey-gold);
border-radius: 1rem;
}

.Uploaded_Class p{
display: flex;
color: var(--sage-green);
position: absolute;
top: 0;
align-items: center;
width: 100%;
padding: 10px;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
left: 0;
flex-direction: column;
}

input[type="file"] {
display: none;
}

.custom-file-upload {
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
cursor: pointer;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
right: 0;
}

.custom-file-upload i{
font-size: 4rem;
}


.custom-file-upload.hide {
display: none;
}

.custom-file-upload .file-info {
position: relative;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}

.file-info .file-name {
font-weight: bold;
}

.file-info .file-size {
font-size: 0.8em;
color: var(--theme-color);
top: 25px;
}

.custom-file-upload .file-info img {
max-width: 60%;
max-height: 60%;
object-fit: contain;
position: absolute;
top: 0;
left: 0;
}

.custom-file-upload .file-info p {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: var(--theme-color);
padding: 5px 10px;
font-size: 12px;
display: flex;
flex-direction: column;
}

.custom-file-upload .file-info .delete-icon {
position: absolute;
top: 10px;
right: 10px;
color: var(--dark-bg);
cursor: pointer;
}

#file-info-display{
width: 100%;
height: 100%;
}

.loader-container {
display: flex;
justify-content: center;
align-items: center;
display: none;
height: 100%;
}

.loader-circle {
border: 4px solid var(--dark-bg);
border-top-color: transparent;
border-right-color: transparent;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
background-color: var(--theme-color);
display: flex;
right: 5px;
position: absolute;

}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}


/****** file upload class ******/

.btn-outline-info{
border-radius: 1rem;
padding: 1rem;   
border: 1px solid var(--sage-green);  
color: var(--sage-green); 
display: inline-flex;
justify-content: center;
transition: var(--transition);
}

.btn-outline-info:hover{
background-color: var(--sage-green); 
color: var(--theme-color);
border: 1px solid var(--sage-green);  
transition: var(--transition);
}

.btn-outline-info:focus{
border: 1px solid var(--sage-green);  
}

.btn-outline-info i{
font-size: 1.4rem !important;
line-height: 1.5;
}

.password-toggle{
display: inline-flex;  
width: 100%;
position: relative;    
}

.password-toggle i{
position: absolute;   
padding: 13px;
font-size: 2.2rem; 
}

.password-toggle input{
padding: 10px 40px;
}

@media (min-width: 768px) {
.border-end-md {
border-left: 1px solid #efecf3 !important;
}
}

@media (min-width: 500px) {
.px-sm-5 {
padding-left:1.5rem !important;
padding-right:1.5rem !important;
}
}

/*******************************  حساب کاربری *********************/
    

/*********************** سبد خرید *****************************/

thead > tr > th{
text-align: center;    
}

tbody > tr > td{
text-align: center;    
}

.remove{
cursor: pointer;
}

.remove i{
font-size: 2rem;    
color: var(--dangercolor);
}

.card-total{
display: flex;
background-color: var(--sage-green);
box-shadow: var(--boxshadow);   
border-radius: 1rem; 
flex-direction: column;
padding: 1rem;
}

.card-total ul{
padding: 0;
}

.card-total ul > li{
padding: 0.5rem;
}

.card-total a{
background-color: var(--theme-color);
padding: 1rem;
border-radius: 1rem; 
color: var(--dark-bg);
font-size: 1.2rem;
}

.card-total a > i{
font-size: 1.8rem;
padding-left: 0.5rem;
}

/*********************** سبد خرید *****************************/


/* ===== FOOTER ===== */
.footer-logo {
    font-size: 1.8rem;
    color: var(--darker-bg);
    margin-bottom: 1rem;
}

.footer-about {
    color: var(--dark-bg);
    margin-bottom: 1.5rem;
}

.footer-title {
    font-size: 1.2rem;
    color: var(--dark-bg);
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 2px;
    background: var(--dark-bg);
    border-radius: 2px;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: var(--dark-bg);
    text-decoration: none;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--honey-gold) !important;
    transition: var(--transition);
    text-shadow: var(--textshadow);
    padding-right: 0.5rem;
}

.footer-contact {list-style: none;padding: 0;}
.footer-contact li {margin-bottom: 1rem;color: var(--dark-bg);display: flex;align-items: center;}
.footer-contact li a {color: var(--dark-bg) !important;transition: var(--transition);}
.footer-contact li a:hover {color: var(--honey-gold) !important;text-shadow: var(--text-shadow);transition: var(--transition);padding-right: 0.5rem;}
.social-links {display: flex;gap: 1rem;}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(59, 59, 59, 0.05);
    border-radius: 50%;
    color: var(--dark-bg);
    text-decoration: none;
    transition: var(--transition);
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.social-link i{
font-size: 1.5rem;
}

.social-link:hover {
    background: var(--honey-gold);
    transform: translateY(-3px);
    color: var(--dark-bg);
    text-shadow: var(--text-shadow);
    transition: var(--transition);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes neonGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(168, 195, 160, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(168, 195, 160, 0.8), 0 0 30px rgba(168, 195, 160, 0.4);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== RESPONSIVE STYLES ===== */
@media (max-width: 992px) {
    .hero-slide {
        height: 60vh;
        min-height: 400px;
    }
    
    .promo-title {
        font-size: 2rem;
    }
    
    .countdown-number {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .hero-slide {
        height: 50vh;
        min-height: 350px;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .promo-card {
        padding: 2rem;
    }
    
    .countdown {
        gap: 1rem;
    }
    
    .countdown-number {
        font-size: 1.8rem;
    }
}

@media (max-width: 576px) {
    .hero-slide {
        height: 40vh;
        min-height: 300px;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .countdown {
        gap: 0.75rem;
    }
    
    .countdown-number {
        font-size: 1.5rem;
    }
    
    .countdown-label {
        font-size: 0.8rem;
    }
}