@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700;900&display=swap');

:root {
    --primary-green: #145A32;
    --secondary-green: #27AE60;
    --light-green: #F0F7F2;
    --accent-gold: #D4A356;
    --text-dark: #2C3E50;
    --text-light: #7F8C8D;
    --background: #FFFFFF;
    --border-color: #EAECEE;
    --bs-font-sans-serif: 'Vazirmatn', sans-serif;
    --bs-border-radius: 0.75rem;
}

/* Base Reset & Safety Rule */
*, *::before, *::after {
    box-sizing: border-box;
}
html, body {
    overflow-x: hidden !important;
    position: relative;
    width: 100%;
}
body {
    background-color: var(--background);
    font-family: var(--bs-font-sans-serif);
    color: var(--text-dark);
    line-height: 1.7;
    padding-top: 108px; /* 36px for marquee + 72px for header */
    padding-bottom: 70px; /* Space for bottom nav on mobile */
}
::selection { background: var(--primary-green); color: #fff; }
h1, h2, h3, h4, h5, h6 { 
    font-weight: 700; 
    color: var(--text-dark);
}

/* =================================================================
   Announcement Marquee (FINAL FIX)
================================================================= */
.announcement-bar {
    background-color: var(--primary-green);
    color: #fff;
    padding: 8px 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1031;
    font-size: 0.9rem;
    white-space: nowrap; /* CRITICAL: Prevents text from wrapping */
}
.marquee {
    display: inline-block; /* Ensures the element behaves correctly for animation */
    animation: marquee 20s linear infinite;
}
.marquee span {
    display: inline-block; /* Ensures spans flow in a single line */
    padding: 0 2rem;
}
@keyframes marquee {
    from { transform: translateX(0%); }
    to { transform: translateX(-50%); }
}

/* =================================================================
   Header & Navigation
================================================================= */
.main-header {
    background-color: #fff;
    border-bottom: 1px solid #eaecee;
    position: fixed;
    top: 36px;
    right: 0;
    left: 0;
    z-index: 1030;
}
.navbar-brand-custom { display: flex; align-items: center; text-decoration: none; }
.navbar-brand-custom img { height: 40px; }
.navbar-brand-custom .brand-name { font-size: 1.5rem; font-weight: 700; color: var(--primary-green); margin-right: 15px; }
.hamburger-menu-button { background: none; border: 1px solid var(--border-color); color: var(--text-dark); border-radius: var(--bs-border-radius); width: 45px; height: 45px; }

/* Fullscreen Overlay Menu */
.overlay-menu { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(20, 90, 50, 0.98); z-index: 1040; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.3s, visibility 0.3s; opacity: 0; visibility: hidden; }
.overlay-menu.open { opacity: 1; visibility: visible; }
.overlay-menu .close-btn { position: absolute; top: 20px; right: 20px; font-size: 36px; color: #fff; background: none; border: none; }
.overlay-menu ul { list-style: none; padding: 0; text-align: center; }
.overlay-menu ul li a { color: #fff; font-size: 1.8rem; font-weight: 500; text-decoration: none; display: block; padding: 10px; }
.overlay-menu ul li .overlay-menu-button { background: none; border: none; color: #fff; font-size: 1.5rem; font-weight: 500; padding: 15px; font-family: var(--bs-font-sans-serif); }

/* Bottom Nav & Floating Buttons */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background-color: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,0.08); display: flex; justify-content: space-around; z-index: 1000; }
.bottom-nav .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 0; color: var(--text-light); text-decoration: none; flex-grow: 1; }
.bottom-nav .nav-item i { font-size: 20px; margin-bottom: 4px; }
.bottom-nav .nav-item span { font-size: 11px; font-weight: 500; }
.bottom-nav .nav-item.active { color: var(--primary-green); }
.scroll-to-top { position: fixed; bottom: 80px; left: 20px; width: 45px; height: 45px; background-color: var(--text-dark); color: #fff; border-radius: 50%; text-align: center; line-height: 45px; font-size: 20px; z-index: 1029; opacity: 0; visibility: hidden; transition: all 0.3s; text-decoration: none; }
.scroll-to-top.show { opacity: 1; visibility: visible; }
.floating-call-btn { position: fixed; bottom: 80px; right: 20px; width: 55px; height: 55px; background-color: #25D366; color: #fff; border-radius: 50%; text-align: center; line-height: 55px; font-size: 28px; z-index: 1029; box-shadow: 0 4px 12px rgba(0,0,0,0.2); text-decoration: none; transition: transform 0.2s; }
.floating-call-btn:hover { color: #fff; transform: scale(1.1); }
@media (min-width: 992px) { body { padding-bottom: 0; } .bottom-nav { display: none; } .scroll-to-top, .floating-call-btn { bottom: 30px; } }

/* =================================================================
   Content Styles
================================================================= */
.section-padding { padding: 4rem 0; }
.section-title { margin-bottom: 3rem; text-align: center; }
.section-title h2 { font-size: 2.25rem; font-weight: 700; position: relative; display: inline-block; padding-bottom: 1rem; }
.section-title h2::after { content: ''; position: absolute; bottom: 0; right: 50%; transform: translateX(50%); width: 60px; height: 4px; background: var(--primary-green); border-radius: 2px; }

.hero-simple { background-color: var(--light-green); padding: 3rem 15px; text-align: center; overflow: hidden; }
.hero-simple h1 { font-size: 2rem; font-weight: 700; color: var(--primary-green); }
.category-card { display: flex; align-items: center; background: #fff; border: 1px solid var(--border-color); border-radius: var(--bs-border-radius); padding: 1rem; text-decoration: none; color: var(--text-dark); transition: box-shadow 0.3s, transform 0.3s; }
.category-card:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1); }
.category-card img { height: 40px; width: 40px; object-fit: contain; margin-left: 1rem; }
.category-card .title { font-weight: 700; }

.main-footer { background-color: var(--text-dark); color: #adb5bd; }
.main-footer .btn-outline-light { border-color: #7F8C8D; color: #fff; }
.main-footer .btn-outline-light:hover { background-color: #fff; color: var(--text-dark); }
.footer-bottom { background-color: #000; color: #6c757d; }

/* =================================================================
   NEW: Custom Drawn Category Card Styles
================================================================= */

.category-card-custom {
    display: block;
    background-color: #fff;
    border: 2px solid var(--primary-green);
    border-radius: 1rem; /* Rounded corners */
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.category-card-custom:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(20, 90, 50, 0.2);
}

.category-card-image {
    height: 150px;
    width: 100%;
}

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

.category-card-title-bar {
    background-color: var(--primary-green);
    padding: 0.75rem 1rem;
    text-align: center;
}

.category-card-title {
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0;
}

.category-card-products {
    padding: 1rem;
    flex-grow: 1; /* Takes up remaining space */
}

.category-card-products ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-light);
}

.category-card-products ul li {
    padding: 0.2rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-card-products ul li::before {
    content: '- ';
}

.category-card-products .more-products-link {
    color: var(--text-dark);
    font-weight: 500;
    margin-top: 0.5rem;
}
.category-card-products .more-products-link::before {
    content: ''; /* Remove the dash */
}

/* =================================================================
   Single Product Page Styles
================================================================= */
.product-gallery .main-image img {
    border: 1px solid var(--border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05);
}

.product-details-content .product-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
}
.product-details-content .stock-status {
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    display: inline-block;
}
.stock-status.in-stock { background-color: var(--light-green); color: var(--primary-green); }
.stock-status.low-stock { background-color: #FFF3CD; color: #664d03; }
.stock-status.out-of-stock { background-color: #F8D7DA; color: #58151c; }

.product-details-content .price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-green);
}

.product-meta-list { list-style: none; padding: 0; color: var(--text-light); }
.product-meta-list li { margin-bottom: 0.75rem; display: flex; align-items: center; }
.product-meta-list i { color: var(--secondary-green); margin-left: 0.75rem; font-size: 1.2rem; }

.product-tabs .nav-tabs {
    border-bottom: 2px solid var(--border-color);
}
.product-tabs .nav-link {
    color: var(--text-light);
    font-weight: 500;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem 0.5rem 0 0 !important;
}
.product-tabs .nav-link.active {
    color: var(--primary-green);
    border-bottom-color: var(--primary-green);
    font-weight: 700;
    background-color: var(--light-green);
}
.product-tabs .tab-content {
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
    background-color: #fff;
}
.specs-table td {
    padding: 0.75rem;
    border-top: 1px solid var(--border-color);
}
.specs-table tr:first-child td {
    border-top: none;
}
.specs-table td:first-child {
    font-weight: 500;
    color: var(--text-light);
}

/* =================================================================
   User Dashboard Styles
================================================================= */
.dashboard-sidebar .card {
    border: 1px solid var(--border-color);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05);
}
.dashboard-sidebar .list-group-item {
    font-weight: 500;
    color: var(--text-dark);
    border-right: 3px solid transparent !important;
    border-radius: 0 !important;
}
.dashboard-sidebar .list-group-item.active {
    background-color: var(--light-green);
    color: var(--primary-green);
    border-right-color: var(--primary-green) !important;
    font-weight: 700;
}
.dashboard-sidebar .list-group-item-action:hover {
    background-color: #f8f9fa;
}
.dashboard-sidebar .btn-link {
    font-family: var(--bs-font-sans-serif);
    font-weight: 500;
}

.dashboard-card {
    border: 1px solid var(--border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05);
}
.dashboard-card .card-header {
    background-color: #fff;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.dashboard-card .card-header h4 {
    font-size: 1.25rem;
}
.dashboard-card .card-body {
    padding: 1.5rem;
}

.ticket-reply { border: 1px solid var(--border-color); border-radius: 0.5rem; margin-bottom: 1rem; }
.ticket-reply-header { background-color: #f8f9fa; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); }
.ticket-reply-body { padding: 1rem; }
.ticket-reply.admin-reply .ticket-reply-header { background-color: var(--light-green); }


/* =================================================================
   Auth Pages (Login/Register) - Final Modern Style
================================================================= */

/* A clever trick to detect if we're on an auth page and hide main layout elements */
body:has(.auth-page-wrapper) .main-header,
body:has(.auth-page-wrapper) .announcement-bar,
body:has(.auth-page-wrapper) .main-footer,
body:has(.auth-page-wrapper) .footer-bottom,
body:has(.auth-page-wrapper) .floating-call-btn,
body:has(.auth-page-wrapper) .scroll-to-top,
body:has(.auth-page-wrapper) .bottom-nav,
body:has(.auth-page-wrapper) #global-flash-container {
    display: none !important;
}

/* Reset body padding for a full-screen experience on auth pages */
body:has(.auth-page-wrapper) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.auth-page-wrapper {
    background-color: var(--light-green);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem; /* Increased padding for better spacing on all sides */
}

.auth-card {
    max-width: 450px;
    width: 100%;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--bs-border-radius-lg); /* Larger radius for modern look */
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.08);
    padding: 2rem;
}

@media (min-width: 768px) {
    .auth-card {
        padding: 3rem;
    }
}

.auth-card .form-label {
    font-weight: 500;
}

.auth-card .form-control {
    height: 50px;
    border-radius: var(--bs-border-radius);
    padding: 0 1rem;
    background-color: #f8f9fa;
    border-color: var(--border-color);
    transition: all 0.2s ease-in-out;
}

.auth-card .form-control:focus {
    background-color: #fff;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.25rem rgba(20, 90, 50, 0.1);
}

.auth-card .btn-primary {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    font-weight: 700;
    padding: 12px;
    border-radius: 50px; /* Pill shape */
    transition: all 0.2s ease-in-out;
}

.auth-card .btn-primary:hover {
    background-color: var(--secondary-green);
    border-color: var(--secondary-green);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(20, 90, 50, 0.2);
}

.auth-card .auth-links {
    font-size: 0.9rem;
}

.auth-card .auth-links a {
    text-decoration: none;
    font-weight: 500;
    color: var(--primary-green);
}
.auth-card .auth-links a:hover {
    text-decoration: underline;
}
/* =================================================================
   Shop Page Header & Search (FINAL Polished Version)
================================================================= */
.shop-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.shop-page-title {
    font-size: 1.75rem;
    margin: 0;
    color: var(--text-dark);
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* The search icon button that is always visible */
.search-toggle-btn {
    width: 45px;
    height: 45px;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-dark);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.3s ease-in-out;
    z-index: 2; /* Keep it above the form */
}

.search-toggle-btn:hover {
    background-color: var(--light-green);
    color: var(--primary-green);
    transform: scale(1.1);
}

/* The form container that expands */
.shop-search-form {
    position: absolute;
    right: 0;
    top: 0;
    height: 45px;
    width: 45px; /* Starts collapsed */
    visibility: hidden;
    opacity: 0;
    transition: width 0.3s ease, opacity 0.2s ease, visibility 0.3s;
    overflow: hidden;
    background-color: #fff;
    border-radius: 50px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    z-index: 1; /* Under the toggle button */
}

/* Active state when search is open */
.shop-search-form.is-active {
    width: 100%; /* Expands to full container width */
    visibility: visible;
    opacity: 1;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* The input field inside the form */
.shop-search-form .form-control {
    flex-grow: 1;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0 1rem 0 55px; /* Right padding for text, left padding for button */
    font-size: 0.9rem;
    color: var(--text-dark);
}

.shop-search-form .form-control:focus {
    box-shadow: none;
    outline: none;
}

/* The submit button inside the form */
.shop-search-form button[type="submit"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 45px;
    height: 100%;
    background-color: var(--primary-green);
    color: #fff;
    border: none;
    border-radius: 50% 0 0 50%;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-search-form button[type="submit"]:hover {
    background-color: var(--secondary-green);
}

/* On smaller screens, adjust layout */
@media (max-width: 575.98px) {
    .shop-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .search-container {
        width: 100%;
    }
}
/* =================================================================
   Shop Page & Category Hub Styles (FINAL)
================================================================= */
.shop-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.shop-page-title {
    font-size: 1.75rem;
    margin: 0;
}
.search-container {
    position: relative;
}
.search-toggle-btn {
    width: 45px;
    height: 45px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-dark);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 2;
    position: relative; /* Add position relative */
}
.search-toggle-btn:hover {
    background-color: var(--light-green);
    color: var(--primary-green);
}

.shop-search-form {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 45px;
    display: flex;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    width: 45px;
    transition: width 0.3s ease, opacity 0.3s ease;
    z-index: 1;
}
.shop-search-form.is-active {
    visibility: visible;
    opacity: 1;
    width: 100%;
}

.shop-search-form .form-control {
    width: 100%;
    height: 100%;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 0 1rem 0 50px; /* Padding for the submit button */
}
.shop-search-form .form-control:focus{
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.25rem rgba(20, 90, 50, 0.1);
}

.shop-search-form .shop-search-submit {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 45px;
    border: none;
    background: transparent;
    color: var(--text-light);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
}

@media (max-width: 575.98px) {
    .shop-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .search-container {
        width: 100%;
    }
}

/* Category Hub Card Styles */
.category-hub-card {
    display: block;
    background-color: #fff;
    border-radius: var(--bs-border-radius);
    padding: 1rem;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.category-hub-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.category-hub-card .content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.category-hub-card .category-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-dark);
}
.category-hub-card .category-icon {
    width: 45px;
    height: 45px;
    object-fit: contain;
}
.category-hub-card .category-arrow-icon {
    background-color: var(--primary-green);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}
/* =================================================================
   Shop Header & Description Card (Unified & Minimal)
================================================================= */
.shop-header-card {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.shop-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0; /* Remove the old border */
    padding-bottom: 0; /* Remove old padding */
}

.shop-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.search-container {
    position: relative;
}

.search-toggle-btn {
    width: 40px; /* Make button smaller */
    height: 40px;
    background-color: transparent;
    border: none;
    color: var(--text-dark);
    font-size: 1.2rem; /* Make icon slightly bigger */
    cursor: pointer;
    z-index: 2;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.search-toggle-btn:hover {
    color: var(--primary-green);
}

.shop-search-form {
    position: absolute;
    right: -5px; /* Adjust position */
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
    visibility: hidden;
    opacity: 0;
    width: 40px;
    transition: width 0.3s ease, opacity 0.3s ease;
    z-index: 1;
}

.shop-search-form.is-active {
    visibility: visible;
    opacity: 1;
    width: calc(100% + 10px); /* Expand to full container width */
}

.shop-search-form .form-control {
    width: 100%;
    height: 100%;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 0 1rem 0 45px;
    font-size: 0.9rem;
}
.shop-search-form .form-control:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.2rem rgba(20, 90, 50, 0.1);
}

.shop-search-form .shop-search-submit {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 40px;
    border: none;
    background: transparent;
    color: var(--text-light);
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
}

/* --- Collapsible Description Refined --- */
.collapsible-description {
    padding: 0;
    margin-top: 0.5rem; /* Space from header */
    background-color: transparent;
    border: none;
    text-align: right;
}

.collapsible-description .collapse-content {
    text-align: justify;
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--text-light);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
}
.collapsible-description .collapse-content.collapsing {
    transition: height 0.3s ease;
}

.collapsible-description .read-more-btn {
    color: var(--primary-green);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0;
}
.collapsible-description .read-more-btn .less-text {
    display: none;
}
.collapsible-description .read-more-btn i {
    margin-right: 0.25rem;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}
.collapsible-description .read-more-btn[aria-expanded="true"] .less-text {
    display: inline;
}
.collapsible-description .read-more-btn[aria-expanded="true"] .more-text {
    display: none;
}
.collapsible-description .read-more-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* Hide description elements if there's no description */
.collapsible-description:empty {
    display: none;
}

/* Remove old category-description-box if it exists */
.category-description-box:not(.collapsible-description) {
    display: none;
}
/* =================================================================
   Product Review (Star Rating & Comments) Styles
================================================================= */

/* --- Star Rating Input --- */
.star-rating {
    display: flex;
    flex-direction: row-reverse; /* To make stars fill from right to left */
    justify-content: flex-end;
    font-size: 1.5rem;
}

.star-rating input {
    display: none;
}

.star-rating label {
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0 0.1em;
}

.star-rating input:checked ~ label,
.star-rating:not(:checked) > label:hover,
.star-rating:not(:checked) > label:hover ~ label {
    color: #ffc107;
}

.star-rating input:checked + label:hover,
.star-rating input:checked ~ label:hover,
.star-rating label:hover ~ input:checked ~ label,
.star-rating input:checked ~ label:hover ~ label {
    color: #ffc107;
}

/* --- Star Rating Display (for showing existing reviews) --- */
.star-rating-display {
    color: #ccc;
    font-size: 1rem;
}

.star-rating-display .fa-star.filled {
    color: #ffc107;
}


/* --- Review Form & List --- */
.review-form {
    background-color: var(--light-green);
    padding: 1.5rem;
    border-radius: var(--bs-border-radius);
}

.review-item {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}

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

.review-item strong {
    color: var(--text-dark);
}
/* =================================================================
   Product Review (Star Rating & Comments) Styles
================================================================= */

/* --- Star Rating Input --- */
.star-rating {
    display: flex;
    flex-direction: row-reverse; /* To make stars fill from right to left */
    justify-content: flex-end;
    font-size: 1.5rem;
}

.star-rating input {
    display: none;
}

.star-rating label {
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0 0.1em;
}

.star-rating input:checked ~ label,
.star-rating:not(:checked) > label:hover,
.star-rating:not(:checked) > label:hover ~ label {
    color: #ffc107;
}

.star-rating input:checked + label:hover,
.star-rating input:checked ~ label:hover,
.star-rating label:hover ~ input:checked ~ label,
.star-rating input:checked ~ label:hover ~ label {
    color: #ffc107;
}

/* --- Star Rating Display (for showing existing reviews) --- */
.star-rating-display {
    color: #ccc;
    font-size: 1rem;
}

.star-rating-display .fa-star.filled {
    color: #ffc107;
}

/* --- Review Form & List --- */
.review-form {
    background-color: var(--light-green);
    padding: 1.5rem;
    border-radius: var(--bs-border-radius);
}

.review-item {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}

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

.review-item strong {
    color: var(--text-dark);
}
/* =================================================================
   Shopping Cart Final Responsive Styles
================================================================= */

.cart-item-card-mobile {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--bs-border-radius);
    padding: 1rem;
    margin-bottom: 1rem;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.cart-item-image-mobile {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: var(--bs-border-radius-sm);
    margin-left: 1rem;
}

.item-name-mobile {
    font-weight: 700;
    color: var(--text-dark);
    text-decoration: none;
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.item-price-mobile {
    font-size: 0.9rem;
    color: var(--text-light);
}

.item-total-price-mobile {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-green);
}

.remove-form-mobile {
    position: absolute;
    top: 5px;
    left: 5px;
}
.remove-form-mobile .btn {
    font-size: 0.8rem;
}
/* =================================================================
   Single Product Page - Beauty Refinements
================================================================= */

/* Main container for product details */
.product-details-card {
    padding: 1rem;
}
@media (min-width: 992px) {
    .product-details-card {
        padding: 2rem;
    }
}

/* Image styling */
.product-gallery .main-image img {
    border: 1px solid var(--border-color);
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.07);
    aspect-ratio: 1 / 1; /* Makes the image a perfect square */
    object-fit: contain;
    background-color: #f8f9fa
    width: 100%;
}

/* Title and Price */
.product-details-content .product-title {
    font-size: 1.8rem;
    font-weight: 700;
}
.product-details-content .price {
    font-size: 2rem;
    font-weight: 900;
    color: var(--primary-green);
}
.product-details-content .price .price-unit {
    font-size: 1rem;
    font-weight: 400;
    margin-right: 0.25rem;
}

/* Stock status badges */
.product-details-content .stock-status {
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.4rem 1rem;
}

/* "Add to Cart" button refinement */
.product-details-content .btn {
    font-size: 1rem; /* Reduced font size */
    padding: 0.75rem 1.5rem; /* Reduced padding */
}
.product-details-content .btn i {
    font-size: 1.1rem; /* Makes the icon slightly bigger */
}

/* Meta list (guarantees, etc.) */
.product-meta-list {
    font-size: 0.9rem;
}
.product-meta-list i {
    color: var(--secondary-green);
    margin-left: 0.75rem;
    font-size: 1.2rem;
}

/* Product Tabs Refinement */
.product-tabs .nav-tabs {
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 0;
}
.product-tabs .nav-link {
    color: var(--text-light);
    font-weight: 500;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    margin-bottom: -2px; /* Pulls the tab down over the border */
}
.product-tabs .nav-link.active {
    color: var(--primary-green);
    border-color: var(--primary-green);
    font-weight: 700;
    background-color: var(--light-green);
}
.product-tabs .tab-content {
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
    background-color: #fff;
}
/* =================================================================
   Toast Notification Position Fix for Mobile
================================================================= */

/* On mobile devices (where the bottom-nav is visible), 
   move the toast container up to avoid overlapping.
   The bottom value should be slightly more than the height of your bottom nav.
   Your bottom nav is 70px high, so we use 80px for some spacing.
*/
@media (max-width: 991.98px) {
    .toast-container {
        bottom: 80px !important;
        /* We use !important to override Bootstrap's default inline styles */
    }
}
/* =================================================================
   NEW: Icon-based Services Section Styles
================================================================= */
.services-section {
    background-color: #fff;
}

.service-card {
    background-color: #fff;
    padding: 2rem 1.5rem;
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--border-color);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.1);
}

.service-icon {
    font-size: 2.5rem;
    color: var(--primary-green);
    margin-bottom: 1.5rem;
    display: inline-block;
}

.service-title {
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.service-text {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.8;
}
/* =================================================================
   NEW: Stacked Card Showcase Section
================================================================= */
.stacked-showcase-section {
    text-align: center;
}

.stacked-card-wrapper {
    position: relative;
    padding-top: 150px; /* Space for the top card to overlap */
    margin-bottom: 4rem;
}

.stacked-card {
    background-color: #fff;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.1);
    width: 100%;
}

.stacked-card.content-card {
    position: absolute;
    top: 0;
    right: 50%;
    transform: translateX(50%);
    z-index: 2;
    padding: 1.5rem;
    width: 90%;
    max-width: 450px;
    background-color: #f7f3e9; /* Same as section background */
    box-shadow: none;
    border-radius: var(--bs-border-radius);
}

.stacked-card.image-card {
    position: relative;
    z-index: 1;
    padding: 1rem;
    max-width: 500px;
    margin: 0 auto;
}
.stacked-card.image-card img {
    width: 100%;
    border-radius: var(--bs-border-radius);
}

.special-offer-badge {
    display: inline-block;
    background-color: #dc3545;
    color: #fff;
    font-weight: 700;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    margin-bottom: 1.5rem;
}

.special-offer-title {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-dark);
}

.special-offer-excerpt {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0.5rem auto 1.5rem;
}

.countdown-timer-stacked {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    direction: ltr;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 2rem !important;
}

.bestsellers-wrapper {
    background-color: #fff;
    border-radius: var(--bs-border-radius-lg);
    padding: 2rem 1.5rem;
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.1);
}

.section-title-minimal h2 {
    margin-bottom: 2rem;
}
/* =================================================================
   FINAL & REFINED STYLES for Homepage (OCTOBER 2025)
================================================================= */

/* --- 1. Hero Section --- */
.hero-branding-section {
    position: relative;
    padding: 5rem 1.5rem;
    overflow: hidden;
    background-color: var(--primary-green);
    color: #fff;
}
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/img/hero-bg-pattern.png');
    background-size: cover;
    opacity: 0.1;
    animation: slow-pan 60s linear infinite alternate;
}
@keyframes slow-pan {
    from { background-position: 0% 0%; }
    to { background-position: 100% 100%; }
}
.hero-content-animated {
    position: relative;
    z-index: 2;
    animation: fade-in-up 1s ease-out forwards;
}
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero-logo {
    height: 70px;
    margin-bottom: 1rem;
}
.hero-title {
    font-size: 2.8rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
}
.hero-buttons .btn-primary {
    background-color: #fff;
    color: var(--primary-green);
    border-color: #fff;
    font-weight: 700;
}
.hero-buttons .btn-primary:hover {
    background-color: transparent;
    color: #fff;
}
@media (min-width: 768px) {
    .hero-branding-section { padding: 6rem 1.5rem; }
    .hero-title { font-size: 3.5rem; }
}

/* --- 2. Services Section --- */
.service-card {
    background-color: #fff;
    padding: 2rem 1.5rem;
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--border-color);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.08);
}
.service-icon {
    font-size: 2.5rem;
    color: var(--primary-green);
    margin-bottom: 1.5rem;
}
.service-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}
.service-text {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.7;
}

/* --- 3. Special Offer Section (REFINED) --- */
.special-offer-card {
    background-color: #fff;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.1);
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.offer-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
@media (min-width: 768px) {
    .offer-image {
        height: 100%;
        border-top-right-radius: var(--bs-border-radius-lg);
        border-bottom-right-radius: var(--bs-border-radius-lg);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}
.offer-content {
    padding: 1.5rem;
    text-align: center;
}
@media (min-width: 768px) {
    .offer-content {
        text-align: right;
        padding: 2rem;
    }
}
.offer-badge {
    display: inline-block;
    background-color: #dc3545;
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    margin-bottom: 1rem;
}
.offer-title {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--text-dark);
}
.offer-excerpt {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-top: 0.5rem;
}
.offer-footer {
    background-color: #fff;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
@media (min-width: 768px) {
    .offer-footer {
        flex-direction: row;
        justify-content: space-between;
    }
}
.countdown-timer-compact {
    display: flex;
    gap: 0.5rem;
    direction: ltr;
}
.timer-box-compact {
    background-color: #f8f9fa;
    border-radius: var(--bs-border-radius-sm);
    padding: 0.5rem;
    text-align: center;
    min-width: 55px;
    border: 1px solid var(--border-color);
}
.timer-box-compact span {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
    display: block;
    font-family: monospace;
}
.timer-box-compact small {
    font-size: 0.65rem;
    color: var(--text-light);
}
.offer-footer .btn {
    width: 100%;
    font-weight: 700;
}
@media (min-width: 768px) {
    .offer-footer .btn {
        width: auto;
    }
}

/* --- 4. Bestsellers Section (Card v3) --- */
.product-card-v3 {
    background-color: #fff;
    border-radius: var(--bs-border-radius);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s;
}
.product-card-v3:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1);
}
.product-image-wrapper {
    position: relative;
}
.product-image-wrapper img {
    width: 100%;
    height: 200px;
    object-fit: contain;
}
.stock-badge-v3 {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    color: #fff;
}
.stock-badge-v3.out-of-stock {
    background-color: #dc3545;
}
.product-info-v3 {
    padding: 1rem;
    text-align: right;
}
.product-title-v3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-title-v3 a {
    text-decoration: none;
    color: var(--text-dark);
}
.product-title-v3 a:hover {
    color: var(--primary-green);
}
.product-price-v3 {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-green);
}
.add-btn-v3 {
    width: 38px;
    height: 38px;
    padding: 0;
}
/* =================================================================
   NEW: Compact Category Card Styles
================================================================= */

.category-card-compact {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    border: 2px solid var(--primary-green);
    border-radius: 1rem;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}

.category-card-compact:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(20, 90, 50, 0.2);
}

.category-card-compact-image {
    height: 120px; /* Reduced height */
    width: 100%;
}

.category-card-compact-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.category-card-compact-title-bar {
    background-color: var(--primary-green);
    padding: 0.5rem 0.75rem; /* Reduced padding */
    text-align: center;
}

.category-card-compact-title {
    color: #fff;
    font-weight: 700;
    font-size: 1rem; /* Reduced font size */
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-card-compact-products {
    padding: 0.75rem; /* Reduced padding */
    flex-grow: 1;
}

.category-card-compact-products ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8rem; /* Reduced font size */
    color: var(--text-light);
}

.category-card-compact-products ul li {
    padding: 0.1rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-card-compact-products ul li::before {
    content: '- ';
}

.category-card-compact-products .more-products-link {
    color: var(--text-dark);
    font-weight: 500;
    margin-top: 0.25rem;
    font-size: 0.8rem;
}

.category-card-compact-products .more-products-link::before {
    content: '';
}
/* =================================================================
   IMPROVEMENT: Add horizontal padding for category cards on mobile
================================================================= */

/* Target the grid container specifically within the products-hub page */
main .row.row-cols-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
/* =================================================================
   NEW: Custom Drawn Horizontal Product Card Styles
================================================================= */

.product-card-horizontal {
    display: flex;
    background-color: #fff;
    border: 2px solid var(--primary-green);
    border-radius: 1rem;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s, transform 0.3s;
    min-height: 150px; /* Minimum height for consistency */
}

.product-card-horizontal:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.horizontal-card-image {
    flex-shrink: 0; /* Prevents the image from shrinking */
    width: 40%; /* Image takes 40% of the card width */
    max-width: 150px; /* Max width for the image part */
}

.horizontal-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.horizontal-card-content {
    flex-grow: 1; /* Content takes the remaining space */
    display: flex;
    flex-direction: column;
}

.horizontal-card-title-bar {
    background-color: var(--primary-green);
    padding: 0.5rem 1rem;
    text-align: center;
}

.horizontal-card-title {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.horizontal-card-excerpt {
    font-size: 0.85rem;
    color: var(--text-light);
    padding: 0.75rem 1rem;
    line-height: 1.6;
    margin: 0;
    /* This ensures the excerpt doesn't stretch the card */
    flex-grow: 1; 
    overflow: hidden;
    /* Limit the text to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
}

.horizontal-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--primary-green);
    color: #fff;
    padding: 0.5rem 1rem;
    margin-top: auto; /* Pushes the footer to the bottom */
}

.price-text {
    font-weight: 700;
    font-size: 1rem;
}

.details-arrow {
    background-color: #fff;
    color: var(--primary-green);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: transform 0.2s;
}

.product-card-horizontal:hover .details-arrow {
    transform: scale(1.1);
}
/* =================================================================
   FINAL & ELEGANT Product Card Styles
================================================================= */

.product-card-final {
    background-color: #fff;
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 25px rgba(0,0,0,0.07);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card-final:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}

.final-card-img-link {
    display: block;
}

.final-card-img-link img {
    width: 100%;
    height: 220px;
    object-fit: cover; /* Crop to fill the space beautifully */
    border-top-left-radius: var(--bs-border-radius-lg);
    border-top-right-radius: var(--bs-border-radius-lg);
}

.final-card-body {
    padding: 1rem;
    text-align: center;
    flex-grow: 1; /* Pushes footer to the bottom */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.final-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.final-card-title a {
    text-decoration: none;
    color: var(--text-dark);
    transition: color 0.2s;
}
.final-card-title a:hover {
    color: var(--primary-green);
}

.final-card-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-green);
    margin-bottom: 0;
}

.final-card-footer {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    background-color: #fcfcfc; /* a very light gray */
    border-bottom-left-radius: var(--bs-border-radius-lg);
    border-bottom-right-radius: var(--bs-border-radius-lg);
}

.final-card-footer .btn {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    font-weight: 500;
    border-radius: 50px;
    padding: 0.6rem 1rem;
    transition: background-color 0.2s;
}

.final-card-footer .btn:hover {
    background-color: var(--secondary-green);
    border-color: var(--secondary-green);
}
/* =================================================================
   FINAL & ELEGANT Product Card Styles (Version 2 - No Conflict)
================================================================= */

.product-card-final-v2 {
    background-color: #fff;
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 25px rgba(0,0,0,0.07);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card-final-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}

.final-v2-card-img-link {
    display: block;
}

.final-v2-card-img-link img {
    width: 100%;
    height: 220px;
    object-fit: cover; /* Crop to fill the space beautifully */
    border-top-left-radius: var(--bs-border-radius-lg);
    border-top-right-radius: var(--bs-border-radius-lg);
}

.final-v2-card-body {
    padding: 1rem;
    text-align: center;
    flex-grow: 1; /* Pushes footer to the bottom */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.final-v2-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.final-v2-card-title a {
    text-decoration: none;
    color: var(--text-dark);
    transition: color 0.2s;
}
.final-v2-card-title a:hover {
    color: var(--primary-green);
}

.final-v2-card-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-green);
    margin-bottom: 0;
}

.final-v2-card-footer {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    background-color: #fcfcfc; /* a very light gray */
    border-bottom-left-radius: var(--bs-border-radius-lg);
    border-bottom-right-radius: var(--bs-border-radius-lg);
}

.final-v2-card-footer .btn {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    font-weight: 500;
    border-radius: 50px;
    padding: 0.6rem 1rem;
    transition: background-color 0.2s;
}

.final-v2-card-footer .btn:hover {
    background-color: var(--secondary-green);
    border-color: var(--secondary-green);
}
/* =================================================================
   FINAL: Professional Horizontal Product Card
================================================================= */

.product-card-pro-horizontal {
    display: flex;
    background-color: #fff;
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: 0 4px 25px rgba(0,0,0,0.07);
    transition: all 0.3s ease;
    text-decoration: none;
    min-height: 160px;
}
.product-card-pro-horizontal:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.pro-card-image {
    flex-shrink: 0;
    width: 140px; /* Fixed width for the image part */
}
.pro-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pro-card-content {
    flex-grow: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.pro-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}
.pro-card-features {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-light);
}
.pro-card-features li {
    display: flex;
    align-items: center;
}
.pro-card-features i {
    color: var(--secondary-green);
    margin-left: 0.3rem;
}
.pro-card-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
}
.pro-card-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-green);
}
.pro-card-price small {
    font-size: 0.8rem;
    font-weight: 400;
}
.pro-card-footer .btn {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    border-radius: 50px;
    font-size: 0.9rem;
    padding: 0.4rem 1.2rem;
}
.pro-card-footer .btn:hover {
    background-color: var(--secondary-green);
    border-color: var(--secondary-green);
}
/* =================================================================
   ELEGANT PRELOADER STYLES
================================================================= */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff; /* A clean white background */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    visibility: visible;
    opacity: 1;
}

#preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.preloader-content {
    text-align: center;
}

.preloader-content img {
    height: 60px;
    animation: pulse 1.5s ease-in-out infinite;
}

.preloader-content .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-green);
    border-top-color: transparent;
    border-radius: 50%;
    margin: 20px auto 0;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}
/*
============================================================
>> بخش جدید: بازطراحی کامل پنل کاربری <<
============================================================
*/

/* 1. سایدبار جدید و مدرن */
.dashboard-sidebar-new {
    background-color: #fff;
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 25px rgba(0,0,0,0.07);
    padding: 1.5rem 0;
    height: 100%;
}

.user-profile-summary {
    text-align: center;
    padding: 0 1rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.user-avatar {
    width: 80px;
    height: 80px;
    background-color: var(--light-green);
    color: var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2.5rem;
}

.user-name {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text-dark);
    margin: 0;
}

.user-role {
    font-size: 0.9rem;
    color: var(--text-light);
}

.dashboard-nav {
    padding: 1rem 0;
}

.dashboard-nav a, .dashboard-nav button {
    display: flex;
    align-items: center;
    padding: 0.9rem 1.5rem;
    color: var(--text-dark);
    font-weight: 500;
    text-decoration: none;
    border-right: 4px solid transparent;
    transition: all 0.2s ease;
}

.dashboard-nav button {
    width: 100%;
    text-align: right;
    background: none;
    border: none;
    border-right: 4px solid transparent; /* Keep consistent with links */
}

.dashboard-nav a:hover, .dashboard-nav button:hover {
    background-color: var(--light-green);
    color: var(--primary-green);
}

.dashboard-nav a.active, .dashboard-nav button.active {
    background-color: var(--light-green);
    color: var(--primary-green);
    border-right-color: var(--primary-green);
    font-weight: 700;
}

.dashboard-nav i {
    margin-left: 1rem;
    width: 20px; /* To align text */
    text-align: center;
}

/* 2. کارت اصلی برای نمایش محتوا */
.dashboard-content-card {
    background-color: #fff;
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 25px rgba(0,0,0,0.07);
    overflow: hidden; /* To contain header background */
}

.card-header-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.card-header-custom .h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

/* 3. استایل جداول بهبودیافته */
.dashboard-table {
    margin-bottom: 0; /* Remove default table margin */
}

.dashboard-table thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid var(--border-color);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--text-light);
    vertical-align: middle;
}

.dashboard-table tbody td {
    padding: 1rem 1.25rem;
    vertical-align: middle;
}

.dashboard-table tbody tr:last-child td {
    border-bottom: none;
}

/* 4. بج‌های وضعیت با رنگ برند */
.badge-status {
    padding: 0.4em 0.8em;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 50px;
}

.status-paid { background-color: var(--light-green); color: var(--primary-green); }
.status-completed { background-color: var(--secondary-green); color: #fff; }
.status-pending { background-color: #FFF3CD; color: #664d03; }
.status-failed { background-color: #F8D7DA; color: #58151c; }
.status-open { background-color: #FFF3CD; color: #664d03; }
.status-answered { background-color: var(--light-green); color: var(--primary-green); }
.status-customer-reply { background-color: #cfe2ff; color: #084298; }
.status-closed { background-color: #e2e3e5; color: #41464b; }

/* 5. استایل فرم ویرایش پروفایل */
.edit-profile-form .form-label {
    font-weight: 700;
    font-size: 0.9rem;
}

.edit-profile-form .form-control {
    background-color: #f8f9fa;
}

.edit-profile-form .form-control:focus {
    background-color: #fff;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.2rem rgba(20, 90, 50, 0.1);
}

/* 6. استایل برای صفحات خالی (بدون سفارش/تیکت) */
.empty-state {
    text-align: center;
    padding: 3rem;
}

.empty-state i {
    font-size: 4rem;
    color: var(--border-color);
    margin-bottom: 1rem;
}

.empty-state p {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

/* 7. واکنش‌گرایی برای سایدبار */
@media (max-width: 991.98px) {
    .dashboard-sidebar-new {
        margin-bottom: 2rem;
    }
}
/*
============================================================
>> بخش جدید: بازطراحی صفحه درباره ما <<
============================================================
*/

/* Main About Section */
.about-image-wrapper img {
    border: 10px solid #fff;
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.15);
}

.about-content .about-title {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary-green);
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.about-content .about-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 80px;
    height: 4px;
    background: var(--accent-gold);
}

/* Mission Section */
.mission-section .section-title h2 {
    color: var(--primary-green);
}

.mission-card {
    background-color: #fff;
    border-radius: var(--bs-border-radius-lg);
    padding: 2rem;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    height: 100%;
    box-shadow: 0 4px 25px rgba(0,0,0,0.05);
}

.mission-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.1);
    border-color: var(--primary-green);
}

.mission-icon {
    font-size: 3rem;
    color: var(--primary-green);
    margin-bottom: 1.5rem;
}

.mission-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.mission-text {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Final Call to Action Section */
.final-cta-title {
    font-weight: 700;
    color: var(--text-dark);
}
/*
============================================================
>> بخش جدید: استایل‌های صفحه درباره ما (طرح داستانی) <<
============================================================
*/

/* Story-driven Hero Section */
.about-hero {
    position: relative;
    height: 60vh; /* 60% of the viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 2rem;
}

.about-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* You MUST have a high-quality image at /img/about-us-hero.jpg */
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/img/about-us-hero.jpg') center center/cover no-repeat;
    z-index: 1;
}

.about-hero-content {
    position: relative;
    z-index: 2;
    animation: aboutFadeIn 1.5s ease-out;
}

.about-hero-title {
    font-size: 2.5rem;
    font-weight: 900;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.about-hero-subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 768px) {
    .about-hero-title {
        font-size: 3.5rem;
    }
    .about-hero-subtitle {
        font-size: 1.3rem;
    }
}

@keyframes aboutFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Mission Section */
.about-section-title {
    font-weight: 700;
    color: var(--text-dark);
    position: relative;
    display: inline-block;
    padding-bottom: 0.75rem;
}

.about-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--primary-green);
}

.about-mission-list {
    list-style: none;
    padding: 0;
}

.about-mission-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: var(--light-green);
    border-radius: var(--bs-border-radius);
    border-right: 5px solid var(--primary-green);
}

.about-mission-list i {
    font-size: 1.8rem;
    color: var(--primary-green);
    margin-left: 1.5rem;
    margin-top: 5px;
    width: 30px; /* To align the text */
}

.about-mission-list strong {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.about-mission-list p {
    color: var(--text-light);
}
/*
============================================================
>> اصلاحیه: افزایش خوانایی متن در هیرو صفحه درباره ما <<
============================================================
*/

/* 1. Make the overlay darker */
.about-hero::before {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/img/about-us-hero.jpg') center center/cover no-repeat;
}

/* 2. Change title color to accent gold for contrast and style */
.about-hero-title {
    color: var(--accent-gold, #D4A356); /* Fallback to gold color */
    text-shadow: 0 3px 12px rgba(0,0,0,0.7); /* Stronger shadow */
}

/* 3. Make subtitle fully opaque white */
.about-hero-subtitle {
    color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6); /* Add a subtle shadow here too */
}
/*
============================================================
>> بخش جدید: بازطراحی صفحه وبلاگ <<
============================================================
*/

/* Call to Action Section */
.blog-cta-section {
    background-color: var(--light-green);
    border-radius: var(--bs-border-radius-lg);
    padding: 3rem;
    border: 1px solid var(--border-color);
}

.cta-icon {
    font-size: 3rem;
    color: var(--primary-green);
    margin-bottom: 1.5rem;
}

.cta-title {
    font-weight: 900;
    font-size: 2rem;
    color: var(--text-dark);
}

.cta-text {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 700px;
    margin: 1rem auto 2rem;
}

/* New Post Card Style */
.post-card {
    background-color: #fff;
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 25px rgba(0,0,0,0.07);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}

.post-card-img-link img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-top-left-radius: var(--bs-border-radius-lg);
    border-top-right-radius: var(--bs-border-radius-lg);
}

.post-card .card-body {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.post-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.post-card-title a {
    text-decoration: none;
    color: var(--text-dark);
    transition: color 0.2s;
}
.post-card-title a:hover {
    color: var(--primary-green);
}

.post-card-excerpt {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.8;
    flex-grow: 1; /* Pushes footer to the bottom */
}

.post-card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background-color: #fcfcfc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.post-meta {
    font-size: 0.8rem;
    color: var(--text-light);
}

.post-meta span {
    margin-left: 1rem;
}

.post-meta i {
    margin-left: 0.25rem;
}

.read-more-link {
    font-weight: 700;
    color: var(--primary-green);
    text-decoration: none;
    transition: all 0.2s;
}

.read-more-link:hover {
    color: var(--text-dark);
}

.read-more-link i {
    font-size: 0.8em;
    transition: transform 0.2s;
}

.read-more-link:hover i {
    transform: translateX(-5px);
}
/*
============================================================
>> بخش جدید: بازطراحی صفحه تماس با ما <<
============================================================
*/
.contact-card {
    background-color: #fff;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.08);
    padding: 2rem;
    height: 100%;
    border: 1px solid var(--border-color);
}
@media (min-width: 992px) {
    .contact-card {
        padding: 2.5rem;
    }
}

.contact-card-title {
    font-weight: 700;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.75rem;
}

.contact-card-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 3px;
    background-color: var(--primary-green);
}

.contact-info-list {
    list-style: none;
    padding: 0;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.75rem;
}
.contact-info-item:last-child {
    margin-bottom: 0;
}

.contact-info-item i {
    font-size: 1.5rem;
    color: var(--primary-green);
    margin-left: 1.25rem;
    width: 30px;
    text-align: center;
    padding-top: 5px;
}

.contact-info-item a {
    text-decoration: none;
    color: var(--text-dark);
    transition: color 0.2s;
}

.contact-info-item a:hover {
    color: var(--primary-green);
}

.map-container {
    height: 400px;
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

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

.contact-card .form-control {
    background-color: #f8f9fa;
    border-color: var(--border-color);
}
.contact-card .form-control:focus {
    background-color: #fff;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.2rem rgba(20, 90, 50, 0.1);
}
.contact-card .btn-primary {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}
.contact-card .btn-primary:hover {
    background-color: var(--secondary-green);
    border-color: var(--secondary-green);
}
/*
============================================================
>> FIX: Increased horizontal padding for contact cards on mobile
============================================================
*/

/* This media query targets screens smaller than 992px (mobile and tablets) */
@media (max-width: 991.98px) {
    /* We remove the padding from the wrapper columns */
    .contact-card-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    /* And instead, add more padding to the main container */
    .container.section-padding {
        padding-left: 24px;  /* 1.5rem */
        padding-right: 24px; /* 1.5rem */
    }
}
/*
============================================================
>> بخش جدید: استایل‌های نهایی جستجوی زنده <<
============================================================
*/
.live-search-wrapper-card {
    background-color: #fff;
    border-radius: var(--bs-border-radius-lg);
    padding: 1.5rem;
    box-shadow: 0 4px 25px rgba(0,0,0,0.07);
    border: 1px solid var(--border-color);
}

.live-search-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    text-align: center;
    margin-bottom: 1rem;
}

.live-search-container {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.live-search-container .input-group {
    border-radius: 50px;
    border: 2px solid var(--border-color);
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}
.live-search-container .input-group:focus-within {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.25rem rgba(20, 90, 50, 0.1);
}

.live-search-container .form-control {
    border: none;
    padding: 0.75rem 1.5rem;
}
.live-search-container .form-control:focus {
    box-shadow: none;
}

.live-search-container .input-group-text {
    background-color: transparent;
    border: none;
    padding: 0 1.5rem;
    color: var(--text-light);
}

.live-search-results-box {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 350px;
    overflow-y: auto;
    display: none;
}

.live-search-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--text-dark);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}
.live-search-item:last-child { border-bottom: none; }
.live-search-item:hover { background-color: var(--light-green); }

.live-search-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    margin-left: 1rem;
}

.live-search-item-info strong {
    display: block;
    font-weight: 700;
}
.live-search-item-info small {
    color: var(--text-light);
    font-size: 0.8rem;
}
.live-search-no-results,
.live-search-error {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-light);
}