z/* ================================
   MODERN SAHAND SHOP UI – 2026
   Optimized + Premium + Smooth
================================ */

/* -------------------------------
   ROOT VARIABLES
-------------------------------- */

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;

    --success: #16a34a;
    --danger: #dc2626;
    --warning: #f59e0b;

    --dark: #0f172a;
    --dark-2: #1e293b;

    --light: #ffffff;
    --gray: #64748b;
    --gray-light: #f8fafc;

    --border: #e2e8f0;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --shadow-sm: 0 4px 12px rgba(0,0,0,.05);
    --shadow-md: 0 12px 30px rgba(0,0,0,.08);
    --shadow-lg: 0 20px 50px rgba(0,0,0,.12);

    --glass: rgba(255,255,255,.15);
    --glass-border: rgba(255,255,255,.25);
}

/* -------------------------------
   RESET
-------------------------------- */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl;
    color: var(--dark);
    background: radial-gradient(circle at top right, #dbeafe 0%, transparent 25%),
                radial-gradient(circle at bottom left, #e0f2fe 0%, transparent 25%),
                #f8fafc;
    line-height: 1.8;
}

/* -------------------------------
   GLOBAL
-------------------------------- */

a { text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.container {
    width: 95%;
    max-width: 1400px;
    margin: auto;
    padding: 0 15px;
}

/* -------------------------------
   HEADER
-------------------------------- */

header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(226,232,240,.8);
    box-shadow: var(--shadow-sm);
    transition: .3s;
}

#siteInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 20px 0;
}

#siteLogo {
    width: 85px;
    transition: .4s;
}

#siteLogo:hover {
    transform: rotate(-4deg) scale(1.08);
}

#siteTitle {
    font-size: 32px;
    font-weight: 800;
    color: var(--dark);
}

#siteSubtitle {
    font-size: 14px;
    color: var(--gray);
}

/* -------------------------------
   NAVIGATION
-------------------------------- */

nav {
    background: linear-gradient(135deg, #0f172a, #1e293b);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

nav ul {
    display: flex;
    gap: 6px;
    padding: 10px 0;
}

nav ul li a {
    display: block;
    padding: 14px 22px;
    color: white;
    border-radius: 12px;
    font-weight: 500;
    transition: .3s;
}

nav ul li a:hover {
    background: rgba(255,255,255,.1);
    transform: translateY(-2px);
}

/* -------------------------------
   PRODUCT GRID
-------------------------------- */

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
    gap: 28px;
    margin-top: 30px;
}

/* -------------------------------
   PRODUCT CARD
-------------------------------- */

.product-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #edf2f7;
    box-shadow: var(--shadow-sm);
    transition: .35s;
    position: relative;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.product-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: .5s;
}

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

.product-info {
    padding: 22px;
}

.product-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 10px;
    min-height: 60px;
}

.product-description {
    color: var(--gray);
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 18px;
    min-height: 70px;
}

.product-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 18px;
}

.product-stock {
    display: inline-block;
    padding: 6px 12px;
    background: #dcfce7;
    color: #166534;
    border-radius: 50px;
    font-size: 13px;
    margin-bottom: 12px;
}

/* -------------------------------
   BUTTONS
-------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: .3s;
}

/* BUY BUTTON */
.buy-btn {
    flex: 1;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    padding: 12px 18px;
    border-radius: 14px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(37,99,235,.25);
}

.buy-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(37,99,235,.35);
}

/* CART BUTTON */
.btn-cart {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid var(--border);
    color: var(--dark);
}

.btn-cart:hover {
    background: var(--primary);
    color: white;
}

/* DETAILS BUTTON */
.btn-details {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid var(--border);
    color: var(--dark);
}

.btn-details:hover {
    background: var(--dark);
    color: white;
}

/* -------------------------------
   PRODUCT DETAIL PAGE
-------------------------------- */

.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 40px 0;
}

.product-detail-image img {
    width: 100%;
    border-radius: 24px;
    box-shadow: var(--shadow-md);
}

.product-detail-info h1 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 15px;
}

.detail-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 10px;
}

.detail-description {
    color: var(--gray);
    line-height: 2;
    margin-top: 15px;
}

/* -------------------------------
   FORM BOXES
-------------------------------- */

.form-box,
.login-box,
.register-box {
    background: white;
    padding: 40px;
    border-radius: 28px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    max-width: 600px;
    margin: 40px auto;
}

/* -------------------------------
   CART PAGE
-------------------------------- */

.cart-container {
    background: white;
    padding: 30px;
    border-radius: 24px;
    box-shadow: var(--shadow-md);
    margin: 30px 0;
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 20px;
    overflow: hidden;
}

.cart-table th {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    padding: 18px;
}

.cart-table td {
    padding: 18px;
    border-bottom: 1px solid var(--border);
}

/* -------------------------------
   SUCCESS PAGE
-------------------------------- */

.success-box {
    background: white;
    padding: 50px;
    border-radius: 30px;
    box-shadow: var(--shadow-lg);
    text-align: center;
    margin: 60px auto;
    max-width: 800px;
}

.success-icon {
    font-size: 80px;
    margin-bottom: 20px;
}

.order-code {
    background: #eff6ff;
    padding: 20px;
    border-radius: 18px;
    border: 1px solid #bfdbfe;
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
    margin-top: 25px;
}

/* -------------------------------
   FOOTER
-------------------------------- */

footer {
    margin-top: 70px;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: white;
    padding: 50px 20px;
    text-align: center;
}

/* -------------------------------
   DARK MODE
-------------------------------- */

.dark-mode {
    background: #0f172a !important;
    color: #f8fafc !important;
}

.dark-mode .product-card,
.dark-mode .form-box,
.dark-mode .cart-container {
    background: #1e293b;
    border-color: #334155;
    color: white;
}

.dark-mode .btn-details {
    background: #334155;
    color: white;
}

/* -------------------------------
   RESPONSIVE
-------------------------------- */

@media(max-width: 900px) {
    .product-detail {
        grid-template-columns: 1fr;
    }
}

@media(max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap');


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

body {
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl;
    background: #f8fafc;
    color: #1e2937;
    line-height: 1.6;
}

/* Container */
.container {
    width: 95%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Header */
header {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

#siteInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 18px 0;
}

#siteLogo {
    width: 75px;
    height: auto;
}

#siteTitle {
    font-size: 28px;
    font-weight: 700;
    color: var(--dark);
}

#siteSubtitle {
    font-size: 14px;
    color: var(--gray);
}

/* Navigation */
nav {
    background: var(--dark);
    position: relative;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
}

nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

nav ul li a {
    display: block;
    padding: 14px 18px;
    color: white;
    text-decoration: none;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
}

nav ul li a:hover {
    background: var(--primary);
    transform: translateY(-2px);
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    padding: 10px;
}

.hamburger span {
    width: 28px;
    height: 3px;
    background: white;
    border-radius: 3px;
    transition: 0.3s;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
    color: white;
    padding: 80px 0;
    text-align: center;
    margin-bottom: 40px;
}

.hero h1 {
    font-size: 2.8rem;
    margin-bottom: 16px;
}

.hero p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 30px;
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: auto;
    gap: 28px;
}

.product-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

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

.product-card img {
    width: 100%;
    height: 240px;
    object-fit: contain;
    background: #fff;
    padding: 15px;
    transition: transform 0.4s ease;
}

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

.product-content {
    padding: 18px;
}

.product-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--dark);
}

.product-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--danger);
    margin-bottom: 8px;
}

.product-stock {
    color: var(--success);
    font-weight: 500;
    margin-bottom: 12px;
}

.product-desc {
    color: var(--gray);
    font-size: 14.5px;
    line-height: 1.7;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Buttons */
.btn {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: center;
    width: 100%;
    margin-top: 8px;
}

.btn:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
}

.btn-danger {
    background: var(--danger);
}

.btn-danger:hover {
    background: #b91c1c;
}

/* Product Detail */
.product-detail {
    display: flex;
    gap: 50px;
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

.product-detail-image img {
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius: 16px;
}

.product-detail-info h1 {
    font-size: 28px;
    margin-bottom: 20px;
}

.detail-price {
    font-size: 26px;
    font-weight: 700;
    color: var(--danger);
    margin: 20px 0;
}

/* Forms */
.form-box {
    background: white;
    max-width: 580px;
    margin: 40px auto;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Admin */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.admin-table th {
    background: var(--primary);
    color: white;
    padding: 16px;
    text-align: center;
}

.admin-table td {
    padding: 16px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

/* Footer */
footer {
    background: var(--dark);
    color: #cbd5e1;
    text-align: center;
    padding: 40px 0;
    margin-top: 60px;
}

/* Responsive */
@media (max-width: 992px) {
    .product-detail {
        flex-direction: column;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    nav ul {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: var(--dark);
        flex-direction: column;
        align-items: center;
        justify-content: start;
        padding-top: 40px;
        transition: 0.4s;
        z-index: 999;
    }

    nav ul.active {
        left: 0;
    }

    .hero h1 {
        font-size: 2.2rem;
    }
}

/* Utility Classes */
.text-center { text-align: center; }
.mt-4 { margin-top: 25px; }

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Vazirmatn',sans-serif;
}

body{
    direction:rtl;
    background:#f5f7fa;
    color:#333;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* Header */

header{
    background:#ffffff;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    padding:15px 0;
}

#siteInfo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
}

#siteLogo{
    width:80px;
    height:auto;
}

#siteTitle{
    font-size:28px;
    color:#0f172a;
    font-weight:bold;
}

#siteSubtitle{
    color:#64748b;
    font-size:14px;
}

/* Navigation */

nav{
    background:#0f172a;
}

nav ul{
    list-style:none;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}

nav ul li{
    margin:0;
}

nav ul li a{
    display:block;
    padding:15px 20px;
    color:white;
    text-decoration:none;
    transition:.3s;
}

nav ul li a:hover{
    background:#2563eb;
}

/* Main */

main{
    min-height:600px;
    padding:30px 0;
}

/* Product Grid */
.products-grid{
    display:grid;
	grid-template-columns: auto;
	gap:25px;
}

.product-card{
    background:white;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    transition:.3s;
}

.product-card:hover{
    transform:translateY(-5px);
}

.product-card img{
    width:100%;
    height:220px;
    object-fit:contain;
    background:#fff;
    padding:10px;
}

.product-content{
    padding:15px;
}

.product-title{
    font-size:18px;
    margin-bottom:10px;
    color:#0f172a;
}

.product-price{
    color:#dc2626;
    font-weight:bold;
    margin-bottom:10px;
}

.product-stock{
    color:#16a34a;
    margin-bottom:10px;
}

.product-desc{
    color:#64748b;
    font-size:14px;
    line-height:1.8;
}

.btn{
    display:inline-block;
    background:#2563eb;
    color:white;
    text-decoration:none;
    padding:10px 18px;
    border-radius:8px;
    margin-top:15px;
    transition:.3s;
}

.btn:hover{
    background:#1d4ed8;
}

/* Forms */

.form-box{
    background:white;
    max-width:600px;
    margin:auto;
    padding:30px;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.form-group{
    margin-bottom:15px;
}

.form-group label{
    display:block;
    margin-bottom:5px;
}

.form-group input,
.form-group textarea{
    width:100%;
    padding:12px;
    border:1px solid #ddd;
    border-radius:8px;
}

.form-group textarea{
    resize:none;
}

button,
input[type=submit],
input[type=button]{
    background:#2563eb;
    color:white;
    border:none;
    padding:12px 20px;
    border-radius:8px;
    cursor:pointer;
}

button:hover,
input[type=submit]:hover,
input[type=button]:hover{
    background:#1d4ed8;
}

/* Footer */

footer{
    background:#0f172a;
    color:white;
    text-align:center;
    padding:25px;
    margin-top:40px;
}
/* Product Detail */

.product-detail{
    display:flex;
    gap:40px;
    background:#fff;
    padding:30px;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.product-detail-image{
    flex:1;
    text-align:center;
}

.product-detail-image img{
    width:100%;
    max-width:450px;
    height:auto;
}

.product-detail-info{
    flex:1;
}

.product-detail-info h1{
    margin-bottom:20px;
    color:#0f172a;
}

.detail-price{
    color:#dc2626;
    font-size:24px;
    font-weight:bold;
    margin-bottom:15px;
}

.detail-stock{
    color:#16a34a;
    margin-bottom:20px;
}

.detail-description{
    line-height:2;
    color:#444;
}
/* Admin Panel */

.admin-card{
    background:#fff;
    padding:25px;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    margin-bottom:30px;
}

.admin-title{
    margin-bottom:20px;
    color:#0f172a;
}

.admin-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.admin-table th{
    background:#2563eb;
    color:#fff;
    padding:12px;
}

.admin-table td{
    padding:12px;
    border-bottom:1px solid #eee;
    text-align:center;
}

.admin-table img{
    width:70px;
    height:70px;
    object-fit:contain;
}

.btn-danger{
    background:#dc2626;
    color:white;
    padding:8px 12px;
    border-radius:8px;
    text-decoration:none;
}

.btn-danger:hover{
    background:#b91c1c;
}
/* =========================   PAGE CONTAINER
========================= */
.page-container{
    width:90%;
    max-width:900px;
    margin:40px auto;
}

/* =========================
   TITLES
========================= */
.page-title{
    text-align:center;
    margin-bottom:20px;
    font-size:26px;
    color:#0f172a;
}

/* =========================
   INFO BOX (CONTACT)
========================= */
.info-box{
    background:linear-gradient(135deg,#2563eb,#1e40af);
    color:white;
    padding:20px;
    border-radius:15px;
    margin-bottom:20px;
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

/* =========================
   ABOUT BOX
========================= */
.about-box{
    background:white;
    padding:20px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    line-height:2;
    margin-bottom:20px;
}

/* =========================
   FEATURES (ABOUT PAGE)
========================= */
.features{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.feature-box{
    flex:1;
    min-width:200px;
    background:#f1f5f9;
    padding:15px;
    border-radius:12px;
    text-align:center;
    font-weight:bold;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

/* =========================
   FORM IMPROVEMENT (CONTACT)
========================= */
form{
    background:white;
    padding:20px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

form input,
form textarea{
    width:100%;
    padding:12px;
    margin:8px 0;
    border-radius:10px;
    border:1px solid #e2e8f0;
    transition:0.3s;
}

form input:focus,
form textarea:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,0.15);
    outline:none;
}
/* =========================   CART BUTTON
========================= */
.btn-cart{
    display:inline-block;
    margin-top:10px;
    padding:8px 12px;
    background:#2563eb;
    color:white;
    border-radius:10px;
    text-decoration:none;
    transition:0.3s;
}

.btn-cart:hover{
    background:#1d4ed8;
}

/* =========================
   CHECKOUT BUTTON
========================= */
.btn-checkout{
    display:inline-block;
    background:linear-gradient(135deg,#10b981,#059669);
    color:white;
    padding:12px 18px;
    border-radius:12px;
    text-decoration:none;
    font-weight:bold;
    transition:0.3s;
}

.btn-checkout:hover{
    transform:scale(1.05);
}
.page-container{    width:90%;
    max-width:1000px;
    margin:40px auto;
}

/* جدول سبد خرید */
table{
    width:100%;
    border-collapse:collapse;
    background:white;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

table th{
    background:#0f172a;
    color:white;
    padding:15px;
    text-align:center;
    font-size:14px;
}

table td{
    padding:14px;
    text-align:center;
    border-bottom:1px solid #f1f1f1;
    font-size:14px;
}

table tr:hover{
    background:#f8fafc;
}

/* جلوگیری از چسبیدن متن */
table td, table th{
    white-space:nowrap;
}

/* دکمه‌ها */
.btn-checkout{
    display:inline-block;
    background:linear-gradient(135deg,#10b981,#059669);
    color:white;
    padding:12px 18px;
    border-radius:12px;
    text-decoration:none;
    font-weight:bold;
    margin-top:15px;
}

.btn-checkout:hover{
    transform:scale(1.05);
}
.success-box{    width:90%;
    max-width:500px;
    margin:80px auto;
    background:white;
    padding:30px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

.success-icon{
    width:80px;
    height:80px;
    background:#10b981;
    color:white;
    font-size:40px;
    line-height:80px;
    border-radius:50%;
    margin:0 auto 20px;
    box-shadow:0 10px 20px rgba(16,185,129,0.3);
}

.success-box h1{
    font-size:22px;
    margin-bottom:10px;
    color:#0f172a;
}

.success-box p{
    color:#64748b;
    margin-bottom:10px;
}

.order-code{
    background:#f1f5f9;
    padding:15px;
    border-radius:12px;
    margin:15px 0;
    font-weight:bold;
}

.order-code span{
    color:#2563eb;
    font-size:20px;
}

.hint{
    font-size:13px;
    color:#94a3b8;
}

.btn-home{
    display:inline-block;
    margin-top:15px;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:white;
    padding:12px 18px;
    border-radius:12px;
    text-decoration:none;
    transition:0.3s;
}

.btn-home:hover{
    transform:scale(1.05);
}
.btn-danger{    background:#ef4444;
    color:white;
    padding:8px 12px;
    border-radius:10px;
    text-decoration:none;
    transition:0.3s;
    font-size:13px;
}

.btn-danger:hover{
    background:#dc2626;
    transform:scale(1.05);
}

/* دکمه خالی کردن سبد */
.btn-clear{
    display:inline-block;
    background:#f97316;
    color:white;
    padding:10px 14px;
    border-radius:12px;
    text-decoration:none;
    margin-bottom:15px;
    transition:0.3s;
}

.btn-clear:hover{
    background:#ea580c;
    transform:scale(1.05);
}
.products-grid{    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:20px;
    padding:20px;
}

/* کارت محصول */
.product-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:0.3s;
    display:flex;
    flex-direction:column;
}

.product-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

/* عکس محصول */
.product-card img{
    width:100%;
    height:200px;
    object-fit:cover;
}

/* محتوای داخل کارت */
.product-info{
    padding:15px;
    text-align:center;
}

.product-name{
    font-size:16px;
    font-weight:bold;
    margin-bottom:8px;
    color:#111;
}

.product-price{
    color:#2563eb;
    font-size:15px;
    font-weight:bold;
    margin-bottom:10px;
}

/* دکمه خرید */
.buy-btn{
    display:inline-block;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:white;
    padding:10px 14px;
    border-radius:12px;
    text-decoration:none;
    transition:0.3s;
    font-size:14px;
}

.buy-btn:hover{
    transform:scale(1.05);
}
/* ============================
   DARK MODE FIX — CART PAGE
============================ */

.dark-mode .cart-container {
    background: #1e293b;
    color: #f8fafc;
    border-color: #334155;
}

/* جدول */
.dark-mode .cart-table th {
    background: #334155;
    color: black;
}

.dark-mode .cart-table td {
    color: black;;
    border-color: #475569;
}

.dark-mode .cart-table tr:hover {
    background: #2d3648;
}

/* جمع کل */
.dark-mode .cart-total,
.dark-mode .cart-summary h3 {
    color: black;;
}

/* دکمه حذف */
.dark-mode .btn-danger {
    background: #dc2626;
    color: white;
}

/* دکمه ادامه خرید */
.dark-mode .btn-checkout {
    background: linear-gradient(135deg, #22c55e, #15803d);
    color: white;
}

/* لینک‌ها */
.dark-mode a {
    color: #bfdbfe;
}
/* ============================
   FIX — DARK MODE FORM TEXTS
   (Only make form texts dark)
============================ */

.dark-mode .form-box label,
.dark-mode .form-box input,
.dark-mode .form-box textarea,
.dark-mode .login-box label,
.dark-mode .login-box input,
.dark-mode .register-box label,
.dark-mode .register-box input,
.dark-mode .register-box textarea,
.dark-mode .about-box p,
.dark-mode .contact-box p,
.dark-mode .checkout-box label,
.dark-mode .checkout-box input,
.dark-mode .checkout-box textarea {
    color: #111 !important;   /* مشکی */
}

/* placeholder ها */
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #333 !important;   /* خاکستری تیره */
}

/* پس‌زمینه فیلدها روشن بماند */
.dark-mode input,
.dark-mode textarea {
    background: #fff !important;
    border-color: #ccc !important;
}
/* ============================
   FIX — DARK MODE FORM TEXTS
   (Only make form texts dark)
============================ */

.dark-mode .form-box label,
.dark-mode .form-box input,
.dark-mode .form-box textarea,
.dark-mode .login-box label,
.dark-mode .login-box input,
.dark-mode .register-box label,
.dark-mode .register-box input,
.dark-mode .register-box textarea,
.dark-mode .about-box p,
.dark-mode .contact-box p,
.dark-mode .contact-box label,
.dark-mode .contact-box input,
.dark-mode .contact-box textarea,
.dark-mode .checkout-box label,
.dark-mode .checkout-box input,
.dark-mode .checkout-box textarea {
    color: #111 !important;   /* مشکی */
}

/* placeholder ها */
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #333 !important;   /* خاکستری تیره */
}

/* پس‌زمینه فیلدها روشن بماند */
.dark-mode input,
.dark-mode textarea {
    background: #fff !important;
    border-color: #ccc !important;
}
/* بهبود ظاهر Toast و Back to Top */

.toast{
    position:fixed;
    top:30px;
    left:30px;
    background:#0f172a;
    color:#f9fafb;
    padding:14px 20px;
    border-radius:15px;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
    z-index:9999;
    font-size:14px;
}

.back-to-top{
    position:fixed;
    bottom:90px;
    left:20px;
    width:50px;
    height:50px;
    border-radius:50%;
    background:#0f172a;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    font-size:20px;
}
/* DASHBOARD HEADER */
.admin-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

/* BADGE ADMIN */
.badge-admin{
    background:#dbeafe;
    color:#1d4ed8;
    padding:8px 14px;
    border-radius:30px;
    font-size:14px;
    font-weight:700;
}

/* TABLE HOVER */
.admin-table tr:hover{
    background:#f1f5f9;
}
/* ============================
   ADMIN DASHBOARD LAYOUT
============================ */

.admin-dashboard {
    display: flex;
    gap: 20px;
    margin: 30px auto;
    max-width: 1400px;
    padding: 0 20px;
}

/* ============================
   SIDEBAR
============================ */

.admin-sidebar {
    width: 260px;
    background: #0f172a;
    color: #fff;
    padding: 25px;
    border-radius: 18px;
    height: fit-content;
    position: sticky;
    top: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.admin-sidebar h3 {
    font-size: 20px;
    margin-bottom: 25px;
    font-weight: 700;
}

.admin-sidebar a {
    display: block;
    padding: 12px 15px;
    margin-bottom: 10px;
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 12px;
    transition: .2s;
    font-size: 15px;
}

.admin-sidebar a:hover {
    background: #334155;
    transform: translateX(-4px);
}

/* ============================
   MAIN CONTENT
============================ */

.admin-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* ============================
   CARDS
============================ */

.admin-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.admin-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
}

/* ============================
   BADGE ADMIN
============================ */

.badge-admin {
    background: #dbeafe;
    color: #1d4ed8;
    padding: 8px 16px;
    border-radius: 25px;
    font-weight: 700;
}

/* ============================
   STATS GRID
============================ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 20px;
}

.stat-card {
    background: #f8fafc;
    padding: 20px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,.05);
    transition: .2s;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-card h4 {
    font-size: 16px;
    color: #475569;
    margin-bottom: 10px;
}

.stat-card .number {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
}

/* ============================
   TABLES
============================ */

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.admin-table th {
    background: #1e293b;
    color: #fff;
    padding: 12px;
    font-size: 14px;
}

.admin-table td {
    padding: 12px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
}

.admin-table tr:hover {
    background: #f1f5f9;
}

.admin-table img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
}

/* ============================
   QUICK ACTION CARDS
============================ */

.card {
    background: #ffffff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 5px 15px rgba(0,0,0,.08);
    transition: .2s;
    text-decoration: none;
    color: #0f172a;
}

.card:hover {
    transform: translateY(-5px);
    background: #f8fafc;
}

/* ============================
   DARK MODE SUPPORT
============================ */

.dark-mode .admin-sidebar {
    background: #0f172a;
}

.dark-mode .admin-sidebar a {
    background: #1e293b;
    color: #e2e8f0;
}

.dark-mode .admin-sidebar a:hover {
    background: #334155;
}

.dark-mode .admin-card {
    background: #1e293b;
    color: #f8fafc;
}

.dark-mode .stat-card {
    background: #1e293b;
    color: #f8fafc;
}

.dark-mode .stat-card h4 {
    color: #cbd5e1;
}

.dark-mode .stat-card .number {
    color: #fff;
}

.dark-mode .admin-table th {
    background: #334155;
}

.dark-mode .admin-table td {
    color: #e2e8f0;
    border-color: #475569;
}

.dark-mode .admin-table tr:hover {
    background: #2d3648;
}

.dark-mode .card {
    background: #1e293b;
    color: #f8fafc;
}

.dark-mode .card:hover {
    background: #334155;
}
/* ============================
   BUTTONS – GLOBAL STYLE
============================ */

.btn-edit,
.btn-danger,
.btn-add,
.btn-search,
.btn-save {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: .2s;
    cursor: pointer;
}

/* ============================
   EDIT BUTTON
============================ */

.btn-edit {
    background: #2563eb;
    color: #fff;
}

.btn-edit:hover {
    background: #1d4ed8;
    transform: translateY(-3px);
}

/* ============================
   DELETE BUTTON
============================ */

.btn-danger {
    background: #dc2626;
    color: #fff;
}

.btn-danger:hover {
    background: #b91c1c;
    transform: translateY(-3px);
}

/* ============================
   ADD NEW PRODUCT BUTTON
============================ */

.btn-add {
    background: #059669;
    color: #fff;
    padding: 12px 20px;
    border-radius: 14px;
}

.btn-add:hover {
    background: #047857;
    transform: translateY(-3px);
}

/* ============================
   SEARCH BUTTON
============================ */

.btn-search {
    background: #0f172a;
    color: #fff;
    padding: 10px 20px;
}

.btn-search:hover {
    background: #1e293b;
    transform: translateY(-3px);
}

/* ============================
   SAVE BUTTON (FOR EDIT PAGE)
============================ */

.btn-save {
    background: #4f46e5;
    color: #fff;
    padding: 12px 22px;
    border-radius: 14px;
}

.btn-save:hover {
    background: #4338ca;
    transform: translateY(-3px);
}

/* ============================
   DARK MODE SUPPORT
============================ */

.dark-mode .btn-edit {
    background: #3b82f6;
}

.dark-mode .btn-edit:hover {
    background: #2563eb;
}

.dark-mode .btn-danger {
    background: #ef4444;
}

.dark-mode .btn-danger:hover {
    background: #dc2626;
}

.dark-mode .btn-add {
    background: #10b981;
}

.dark-mode .btn-add:hover {
    background: #059669;
}

.dark-mode .btn-search {
    background: #334155;
}

.dark-mode .btn-search:hover {
    background: #1e293b;
}

.dark-mode .btn-save {
    background: #6366f1;
}

.dark-mode .btn-save:hover {
    background: #4f46e5;
}
/* MOBILE HEADER FIX */
@media (max-width:768px){

    nav{
        position:relative;
    }

    .hamburger{
        display:flex;
        flex-direction:column;
        gap:5px;
        padding:15px;
        cursor:pointer;
        align-items:flex-start;
    }

    .hamburger span{
        width:28px;
        height:3px;
        background:#fff;
        border-radius:10px;
    }

    nav ul{
        display:none;
        flex-direction:column;
        width:100%;
        background:#0f172a;
    }

    nav ul.active{
        display:flex;
    }

    nav ul li{
        width:100%;
    }

    nav ul li a{
        width:100%;
        text-align:center;
        border-bottom:1px solid rgba(255,255,255,.1);
    }

    #siteInfo{
        flex-direction:column;
        text-align:center;
    }

    #siteLogo{
        width:60px;
    }

    #siteTitle{
        font-size:22px;
    }

    #siteSubtitle{
        font-size:12px;
        line-height:1.8;
    }
}
/* ==================================   MOBILE RESPONSIVE FIX
   SAHAND SHOP
================================== */

@media (max-width: 768px){

    /* HEADER */
    #siteInfo{
        flex-direction:column;
        text-align:center;
        gap:10px;
        padding:15px 10px;
    }

    #siteLogo{
        width:60px;
    }

    #siteTitle{
        font-size:22px;
    }

    #siteSubtitle{
        font-size:12px;
    }

    /* NAVIGATION */

    nav{
        overflow-x:auto;
    }

    nav ul{
        display:flex;
        flex-wrap:nowrap;
        justify-content:flex-start;
        overflow-x:auto;
        white-space:nowrap;
        padding:0;
        scrollbar-width:none;
    }

    nav ul::-webkit-scrollbar{
        display:none;
    }

    nav ul li a{
        padding:12px 15px;
        font-size:14px;
    }

    /* PRODUCTS */

    .products-grid{
        grid-template-columns:1fr !important;
        gap:15px;
        padding:10px;
    }

    .product-card{
        width:100%;
    }

    .product-card img{
        height:220px;
    }

    .product-name,
    .product-title{
        font-size:15px;
    }

    .product-price{
        font-size:16px;
    }

    /* PRODUCT DETAIL */

    .product-detail{
        flex-direction:column;
        padding:15px;
        gap:20px;
    }

    .product-detail-image img{
        max-width:100%;
    }

    .product-detail-info h1{
        font-size:22px;
    }

    /* FORMS */

    .form-box,
    .login-box,
    .register-box{
        width:100%;
        padding:20px;
    }

    /* CART TABLE */

    .cart-container{
        overflow-x:auto;
    }

    .cart-table,
    table{
        min-width:650px;
    }

    /* ADMIN DASHBOARD */

    .admin-dashboard{
        flex-direction:column;
        padding:10px;
    }

    .admin-sidebar{
        width:100%;
        position:relative;
        top:auto;
    }

    .admin-content{
        width:100%;
    }

    /* STATS */

    .stats-grid{
        grid-template-columns:1fr;
    }

    /* BUTTONS */

    .buy-btn,
    .btn,
    .btn-add,
    .btn-save,
    .btn-search{
        width:100%;
        text-align:center;
    }

    /* PAGE CONTAINER */

    .page-container{
        width:95%;
    }

    /* SUCCESS PAGE */

    .success-box{
        width:95%;
        padding:20px;
    }

    /* FEATURE BOX */

    .features{
        flex-direction:column;
    }

    .feature-box{
        width:100%;
    }

    /* TOAST */

    .toast{
        left:10px;
        right:10px;
        width:auto;
    }

    /* BACK TO TOP */

    .back-to-top{
        left:15px;
        bottom:15px;
    }

}

/* EXTRA SMALL DEVICES */

@media (max-width: 480px){

    #siteTitle{
        font-size:18px;
    }

    .hero h1{
        font-size:1.6rem;
    }

    .hero p{
        font-size:14px;
    }

    .product-card img{
        height:180px;
    }

    .product-detail-info h1{
        font-size:18px;
    }

    .detail-price{
        font-size:20px;
    }

}
/* =================================
   MOBILE TABLE FIX
================================= */

@media (max-width:768px){

    /* سبد خرید */
    .cart-container,
    .admin-card,
    .table-responsive{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .cart-table,
    .admin-table,
    table{
        min-width:700px;
        width:100%;
    }

    .cart-table th,
    .cart-table td,
    .admin-table th,
    .admin-table td,
    table th,
    table td{
        white-space:nowrap;
    }

}
.table-responsive{    width:100%;
    overflow-x:auto;
}
@media (max-width:768px){
    #siteInfo{
        padding:10px 5px !important;
    }

    #siteLogo{
        width:45px !important;
    }

    #siteTitle{
        font-size:18px !important;
    }

    #siteSubtitle{
        font-size:11px !important;
        line-height:1.5;
    }

}
/* FIX HEADER MOBILE */
@media (max-width:768px){

    header{
        position:relative !important;
        padding:0 !important;
        margin:0 !important;
    }

    #siteInfo{
        display:flex !important;
        flex-direction:row !important;
        justify-content:center !important;
        align-items:center !important;
        gap:5px !important;

        padding:5px !important;
        min-height:auto !important;
    }

    #siteLogo{
        width:35px !important;
        height:35px !important;
        max-width:35px !important;
    }

    #siteTitle{
        font-size:14px !important;
        line-height:1.2 !important;
        margin:0 !important;
    }

    #siteSubtitle{
        display:none !important;
    }

}
@media (max-width:768px){
    nav{
        margin-top:0 !important;
        clear:both !important;
    }

    header{
        overflow:hidden !important;
    }

}
.shop-filter{    margin:25px 0;
}

.shop-filter form{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
}

.shop-filter input,
.shop-filter select{
    padding:10px 14px;
    border:1px solid #ddd;
    border-radius:10px;
    min-width:220px;
}

.shop-filter button{
    padding:10px 18px;
    border:none;
    border-radius:10px;
    cursor:pointer;
}
.reset-filter{    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    border-radius:10px;
    text-decoration:none;
    color:#fff;
    background:#666;
    transition:.2s;
}

.reset-filter:hover{
    opacity:.9;
}
/* ===== Reviews Section ===== */
.reviews-section{
    margin-top:50px;
}

.reviews-section h2{
    margin-bottom:25px;
    font-size:28px;
    font-weight:bold;
}

.review-item{
    background:#fff;
    padding:20px;
    margin-bottom:20px;
    border-radius:12px;
    border:1px solid #e5e5e5;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    transition:.3s;
}

.review-item:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,.12);
}

.review-item h4{
    margin:0 0 10px 0;
    font-size:18px;
    font-weight:bold;
    color:#222;
}

.review-item .rating{
    color:#ffb400;
    font-size:18px;
    margin-bottom:10px;
}

.review-item p{
    margin:10px 0;
    line-height:1.8;
    color:#444;
}

.review-item small{
    display:block;
    margin-top:10px;
    color:#888;
    font-size:13px;
}
.error-icon{
    width:80px;
    height:80px;
    margin:auto;
    border-radius:50%;
    background:#dc3545;
    color:#fff;
    font-size:40px;
    display:flex;
    align-items:center;
    justify-content:center;
}