
<!DOCTYPE html>
<html lang="ku" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title id="page-title"></title>
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#ff9900">
    <link rel="stylesheet" href="css/all.min.css">
    <script src="js/i18n.js?v=1.2.0"></script>
    <link rel="stylesheet" href="css/style.css">
    <style>
:root {
    --primary-color: #ff9900;
}


 /* وێنەکە گەورەتر دەبێت بۆ ئەوەی چوارچێوەکە پڕ بکاتەوە */
}

/* ستایلی وێنە بۆ ئەوەی تێک نەچێت */
.horizontal-scroll .prod-img {
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

/* ڕێکخستنی نووسینەکان بە قەبارەی گونجاو */
.horizontal-scroll .prod-title {
    font-size: 11px !important;
    line-height: 1.2 !important;
    height: 28px !important;
    margin: 4px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ستایلی نرخەکان (کۆن لە سەرەوە، نوێ لە خوارەوە) */
.price-column {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.old-price-style {
    color: #e74c3c;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    font-size: 12px;
    font-weight: 700;
    display: block;
}

.current-price-style {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 13px;
}

   /* رێکخستنی گشتی کارتەکان لە سکڕۆڵی ئاسۆیی */
.horizontal-scroll .product-card {
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border-radius: 12px !important;
    padding: 8px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
}



/* ٢. زۆرترین داواکاری - هەمان قیاسی ئۆفەری تایبەت */
#top-orders-container .product-card {
    height: 235px !important;
    min-width: 155px !important;
    border: 1px solid #eee !important;
}

#top-orders-container .product-card img {
    height: 125px !important;
    object-fit: cover !important;
}

/* ٣. ڕێکخستنی نرخەکان (کۆن لەسەر نوێ) */
.price-row {
    display: flex;
    flex-direction: column; /* نرخەکان دەخاتە سەر یەک */
    margin-top: auto;
}

/* نرخی کۆن - بە سوور و هێڵ بەسەردا هاتوو */
.old-price-style {
    color: #e74c3c !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 1px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 1px;
}

/* نرخی نوێ */
.current-price-style {
    color: var(--primary-color) !important;
    font-weight: bold !important;
    font-size: 13px !important;
}
 
#top-orders-section .section-title {
    text-align: right !important; /* دەگەڕێتەوە لای ڕاست */
    margin-top: 5px !important;
    padding-right: 15px !important; /* بۆ ئەوەی نەنوسێت بە لێوارەکەوە */
}

#top-orders-container {
    justify-content: flex-start !important; /* کاڵاکان لە ڕاستەوە دەست پێ دەکەن */
}

/* رێکخستنی گشتی کارتەکان لە سکڕۆڵی ئاسۆیی */
.horizontal-scroll .product-card {
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border-radius: 12px !important;
    padding: 8px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* ١. ئۆفەری تایبەت 🔥 */
#special-offers-container .product-card {
    height: 235px !important; 
    min-width: 150px !important;
    border: 2px solid var(--primary-color) !important;
    padding: 4px !important; /* بۆشایی کەم بۆ نزیکبوونەوەی وێنە */
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
}

#special-offers-container .product-card img {
    height: 125px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

/* ٢. زۆرترین داواکاری - هەمان قیاسی ئۆفەری تایبەت 🌟 */


#top-orders-container .product-card img {
    height: 125px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

/* ٣. ڕێکخستنی ناو و نووسینەکان بۆ هەردوو بەشەکە */
.horizontal-scroll .prod-title {
    font-size: 11px !important;
    padding: 0 4px !important;
    margin-top: 8px !important;
    height: 32px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ٤. ڕێکخستنی نرخ بۆ ئەوەی لە خوارەوە جێگیر بێت */
.horizontal-scroll .price {
    margin-top: auto !important;
    padding: 0 4px 8px 4px !important;
    color: var(--primary-color) !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

/* ٥. ڕێکخستنی گشتی سکڕۆڵەکە */
.horizontal-scroll {
    display: flex !important;
    gap: 12px !important;
    padding: 10px 15px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
}
.horizontal-scroll::-webkit-scrollbar { display: none; }
/* ١. ئۆفەری تایبەت - وەک خۆی هێڵراوەتەوە 🔥 */
div#special-offers-container .product-card {
    height: 235px !important; 
    min-width: 155px !important;
    padding: 5px !important;
    border: 2px solid var(--primary-color) !important;
    border-radius: 12px !important;
}

div#special-offers-container .product-card img {
    height: 125px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

/* ٢. زۆرترین داواکاری - چاککردنی کێشەی دەرچوونی ئیشارەتە پرتەقاڵییەکە */
/* ستایلی نوێ و زیرەک بۆ هەموو کارتەکان */
.horizontal-scroll .product-card {
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border-radius: 12px !important;
    padding: 10px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    width: 155px !important; 
    height: 235px !important; 
    border: 1px solid #eee !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* ڕێکخستنی وێنەکان - بەرزتر و ڕێکتر */
.horizontal-scroll .product-card img {
    width: 100% !important;
    height: 125px !important; 
    object-fit: cover !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
}

/* ڕێکخستنی ناوی کاڵا بۆ ئەوەی هەرگیز دەرنەچێت */
.horizontal-scroll .prod-title {
    font-size: 11px !important;
    line-height: 1.4 !important;
    height: 32px !important; /* جێگەی دوو دێڕ نووسین */
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    margin-bottom: 5px !important;
    color: #333 !important;
}

/* نرخەکان هەمیشە دەچنە خوارەوەی کارتەکە */
.price-row {
    margin-top: auto !important; 
    padding-bottom: 5px !important;
}

.current-price-style {
    color: var(--primary-color) !important;
    font-weight: bold !important;
    font-size: 13.5px !important;
}

.old-price-style {
    color: #e74c3c !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 1px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* جیاکاری ئۆتۆماتیکی بۆ بەشی ئۆفەری تایبەت */
#special-offers-container .product-card {
    border: 2px solid var(--primary-color) !important;
}


/* دڵنیابوونەوە لەوەی ئیشارەتە پرتەقاڵییەکە (یان هەر باجێک) لە ناو چوارچێوەکە دەمێنێتەوە */
div#top-orders-container .product-card .badge, 
div#top-orders-container .product-card span[class*="offer"] {
    top: 10px !important;
    right: 10px !important;
    font-size: 10px !important;
}

/* بەرزکردنەوەی نرخ بۆ ئەوەی نەچێتە دەرەوە */
div#top-orders-container .price {
    margin-top: auto !important;
    margin-bottom: 12px !important; /* نرخەکە کەمێکی تر بەرز کرایەوە */
    font-weight: bold !important;
    color: var(--primary-color) !important;
    font-size: 13px !important;
}


/* ٢. زۆرترین داواکاری - هەمان قیاسی ئۆفەری تایبەت */


#top-orders-container .product-card img {
    height: 125px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 8px;
}

/* ٣. ڕێکخستنی ناو و نرخ (بۆ هەردوولا) */
.horizontal-scroll .prod-title {
    font-size: 11px !important;
    height: 30px !important;
    overflow: hidden !important;
    margin-top: 5px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.horizontal-scroll .price {
    margin-top: auto !important; /* نرخەکە دەچەسپێنێت بە بنبێژەوە */
    color: var(--primary-color) !important;
    font-weight: bold !important;
    font-size: 13px !important;
}

    .all-cats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* سێ بەش لە تەنیشت یەک */
    gap: 15px;
    padding: 20px;
}

.cat-card-full {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.cat-card-full .icon-circle {
    width: 70px; /* قەبارەی بازنەی وێنەکە */
    height: 70px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    overflow: hidden;
    margin-bottom: 5px;
}

.cat-card-full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

        /* لێرەدا هەموو ستایلەکانت وەک خۆی ماوەتەوە بەبێ گۆڕانکاری */
        @font-face {
            font-family: 'NRT-Reg';
            src: url('Fonts/NRT-Reg.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        *, html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, button, input, textarea, select, li, label, .header-title, .checkout-input, .prod-title, .price {
            font-family: 'NRT-Reg', sans-serif !important;
        }

        .fa, .fas, .far, .fab, .fa-solid, .fa-brands, .fa-regular, i {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "FontAwesome" !important;
            font-weight: 900 !important;
        }

        .horizontal-scroll {
            display: flex;
            overflow-x: auto;
            gap: 12px;
            padding: 5px 15px !important;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            margin-top: 0 !important;
        }
        .horizontal-scroll::-webkit-scrollbar {
            display: none;
        }
        .horizontal-scroll {
            display: flex;
            overflow-x: auto;
            gap: 12px;
            margin-left: 15px !important;
            margin-right: 15px !important;
            padding-top: 10px !important;
            padding-bottom: 15px !important;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            overflow-y: hidden;
        }

        .horizontal-scroll .product-card {
            min-width: 155px;
            max-width: 155px;
            scroll-snap-align: start;
            flex-shrink: 0;
            background: #fff;
            border-radius: 12px;
            padding: 8px;
            border: 1px solid #eee;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            position: relative;
        }

      /* ستایلی هاوشێوەی وێنەکە بۆ ئۆفەری تایبەت */
.special-card {
    border: 2px solid var(--primary-color) !important; /* چوارچێوەی پرتەقاڵی وەک وێنەکە */
    border-radius: 15px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* ستایلی هاوشێوەی وێنەکە بۆ زۆرترین داواکاری */
.regular-card {
    border: 1px solid #ddd !important; /* چوارچێوەیەکی زۆر کاڵ و سادە */
    border-radius: 15px !important;
}


        .main-content > div {
            margin-bottom: 5px !important;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            margin-top: 5px !important;
            margin-bottom: 0px !important;
        }

        .section-title {
            margin-top: 5px !important;
            margin-bottom: 2px !important;
            padding: 0 15px;
            display: block;
            width: 100%;
        }

        .categories-scroll {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            padding-bottom: 5px !important;
        }

        .load-more-container {
            text-align: center;
            margin: 15px 0 30px 0;
        }
        .load-more-btn {
            background: #fff;
            color: var(--primary-color);
            border: 2px solid var(--primary-color);
            padding: 10px 25px;
            border-radius: 25px;
            font-weight: bold;
            cursor: pointer;
            transition: 0.3s;
        }
        .load-more-btn:active {
            background: var(--primary-color);
            color: #fff;
        }

        .notif-bar {
            background: var(--primary-color);
            color: white;
            text-align: center;
            padding: 10px 15px;
            font-size: 14px;
            font-weight: bold;
            display: none; 
            animation: slideDown 0.5s ease;
            position: relative;
            z-index: 1001;
            border-bottom: 2px solid rgba(0,0,0,0.1);
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        @keyframes slideDown {
            from { transform: translateY(-100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .top-nav {
            display: flex !important;
            justify-content: center !important; 
            align-items: center !important;
            padding: 0 !important;
            margin: 0 !important;
            height: 60px !important;
            position: relative !important;
            width: 100% !important;
            overflow: hidden !important;
        }

        .header-logo-container {
            position: absolute !important;
            right: 0px !important;
            display: flex !important;
            align-items: center !important;
            z-index: 10 !important;
            padding-right: 2px !important;
        }

        .nav-icons {
            position: absolute !important;
            left: 0px !important;
            display: flex !important;
            align-items: center !important;
            gap: 5px !important;
            z-index: 10 !important;
            padding-left: 2px !important;
        }

        .logo.animated-store-name {
            margin: 0 !important;
            z-index: 1;
            position: relative !important;
        }

        .header-logo-img {
            width: 35px !important;
            height: 35px !important;
            border-radius: 50% !important;
            object-fit: cover !important;
            border: 1px solid #ddd !important;
        }

        .notif-wrapper {
            position: relative;
            display: inline-block;
        }
        .notif-dot {
            position: absolute;
            top: -2px;
            right: -2px;
            width: 10px;
            height: 10px;
            background: #ff4757;
            border-radius: 50%;
            border: 2px solid white;
            display: none;
        }

        /* جۆری بازنەیی دایرەیی */
        .cat-box-circle {
            width: 70px;
            height: 70px;
            border-radius: 50% !important;
            overflow: hidden;
            border: 2px solid #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
        }
        .cat-box-circle.active {
            border-color: var(--primary-color) !important;
            box-shadow: 0 0 0 1px var(--primary-color);
        }
        .cat-circle-style {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            min-width: 75px;
        }

        .category-item.no-img {
            min-width: max-content !important;
            margin-left: 8px !important;
        }

        .category-item.no-img .cat-box {
            width: auto !important;
            height: 38px !important;
            padding: 0 15px !important;
            border-radius: 20px !important;
            background: #fff !important;
            border: 1px solid #eee !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 5px !important;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
            white-space: nowrap !important;
        }
        
        .category-item.no-img .cat-box.active {
            background: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
            color: white !important;
        }

        .category-item.no-img .cat-name {
            margin-top: 0 !important;
            font-size: 13px !important;
            font-weight: bold !important;
            white-space: nowrap !important;
        }

        .category-item.no-img img {
            display: none !important;
        }

        .all-cats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            padding: 20px;
        }

        .cat-card-full {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            background: #fdfdfd;
            padding: 15px 10px;
            border-radius: 15px;
            border: 1px solid #eee;
            box-shadow: 0 4px 8px rgba(0,0,0,0.03);
            cursor: pointer;
        }

        .cat-card-full .icon-circle {
            width: 55px;
            height: 55px;
            background: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--primary-color);
            overflow: hidden;
        }

        .cat-card-full .icon-circle img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .cat-card-full span {
            font-size: 12px;
            font-weight: bold;
            color: #333;
            text-align: center;
        }

        .product-header {
            position: sticky !important;
            top: 0;
            z-index: 1000;
            background-color: #ffffff !important;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .about-logo-main {
            width: 120px;
            height: 120px;
            border-radius: 25px;
            border: 3px solid var(--primary-color);
            margin: 20px auto;
            object-fit: cover;
            display: block;
            box-shadow: 0 5px 15px rgba(255,153,0,0.2);
        }

        .about-text-container {
            padding: 20px 15px;
            background: #fff;
            border-radius: 15px;
            margin: 15px;
            border: 1px solid #eee;
            line-height: 1.8;
            color: #444;
            text-align: center; 
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100px;
            font-size: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.02);
        }

        .bottom-nav {
            display: grid !important;
            grid-template-columns: repeat(4, 1fr) !important;
        }


        .promo-container {
            background: #f8f9fa;
            padding: 12px;
            border-radius: 12px;
            margin-bottom: 15px;
            display: flex;
            gap: 8px;
            border: 1px dashed var(--primary-color);
        }
        .promo-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            outline: none;
            font-size: 14px;
        }
        .promo-apply-btn {
            background: #2ed573;
            color: white;
            border: none;
            padding: 0 15px;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
        }
        .delivery-select {
            width: 100%;
            padding: 12px;
            margin-bottom: 15px;
            border-radius: 10px;
            border: 1px solid #ddd;
            font-size: 14px;
            background-color: #fff;
        }
        .whatsapp-order-btn {
            background: #25d366 !important;
            color: white !important;
            margin-top: 5px;
        }

        .slider-container {
            margin-bottom: 0px !important;
            padding-bottom: 0px !important;
        }
    </style>
<style>
        /* ======= نرخی کۆن - چارەسەری تەواو ======= */
        .product-card .prod-details {
            display: flex !important;
            flex-direction: column !important;
            flex-grow: 1 !important;
        }
        /* نرخی کۆن لە هەموو بەشێکدا */
        .product-card span[style*="line-through"],
        .product-card .old-price-style {
            display: block !important;
            color: #e74c3c !important;
            text-decoration: line-through !important;
            text-decoration-thickness: 1px !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            line-height: 1.4 !important;
            opacity: 0.9 !important;
        }
        /* نرخی نوێ لە هەموو بەشێکدا */
        .product-card .price,
        .product-card span[style*="ff9900"],
        .product-card span[style*="primary"] {
            display: block !important;
            font-weight: 800 !important;
            font-size: 13px !important;
            line-height: 1.4 !important;
        }
        /* horizontal scroll کارتەکان */
        .horizontal-scroll .product-card {
            height: 240px !important;
            min-width: 150px !important;
            width: 150px !important;
            display: flex !important;
            flex-direction: column !important;
            position: relative !important;
            overflow: hidden !important;
        }
        .horizontal-scroll .product-card .prod-img {
            height: 120px !important;
            width: 100% !important;
            object-fit: cover !important;
            flex-shrink: 0 !important;
        }
        .horizontal-scroll .product-card .prod-details {
            display: flex !important;
            flex-direction: column !important;
            flex-grow: 1 !important;
            padding: 6px 8px 8px !important;
            justify-content: space-between !important;
        }
        .horizontal-scroll .product-card .prod-title {
            font-size: 11px !important;
            line-height: 1.3 !important;
            height: 28px !important;
            overflow: hidden !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            color: #333 !important;
            font-weight: 600 !important;
        }
        /* ===== 4 قالبی جیاواز ===== */
</style>
</head>
<body>

    <div id="top-notif-bar" class="notif-bar"></div>

    <div id="install-banner" class="install-banner">
        <div style="display:flex; gap:10px; align-items:center;">
            <i class="fa-brands fa-android"></i> <span>داگرتنی ئەپڵیکەیشن</span>
        </div>
        <button id="install-btn">داگرتن</button>
        <button id="close-install"><i class="fa-solid fa-xmark"></i></button>
    </div>

    <!-- Splash یەکەم: کۆنترۆڵ بە خانەی Splash (splashName + splashImage) لە ڕێکخستنەکان -->
    <div id="splash-screen-1" style="display:none;">
        <div class="splash-content">
            <img id="splash1-img" src="" alt="" style="display:none; width:90px; height:90px; object-fit:cover; border-radius:18px; margin-bottom:14px; box-shadow:0 4px 18px rgba(0,0,0,0.18);">
            <h1 id="splash-title-1" style="display:none;"></h1>
            <div class="loader"></div>
        </div>
    </div>

    <!-- Splash دووەم: کۆنترۆڵ بە خانەی Store Name + splash2Image لە ڕێکخستنەکان -->
    <div id="splash-screen-2" style="display:none;">
        <div class="splash-content">
            <img id="splash2-img" src="" alt="" style="display:none; width:90px; height:90px; object-fit:cover; border-radius:18px; margin-bottom:14px; box-shadow:0 4px 18px rgba(0,0,0,0.18);">
            <h1 id="splash-title-2" style="display:none;"></h1>
            <div class="loader"></div>
        </div>
    </div>
    
    <div id="toast-notification">کردارەکە سەرکەوتوو بوو!</div>

    <div id="home-page" class="page active-page">
        <header class="sticky-header">
            <div class="top-nav">
                <div class="nav-icons">
                    <div class="notif-wrapper" onclick="toggleNotifBar()">
                        <button class="icon-btn"><i class="fa-solid fa-bell"></i></button>
                        <span id="notif-dot" class="notif-dot"></span>
                    </div>
                    
                    <div class="cart-wrapper" onclick="showPage('cart-page')">
                        <button class="icon-btn"><i class="fa-solid fa-cart-shopping"></i></button>
                        <span id="cart-count">0</span>
                    </div>
                </div>

                <div class="logo animated-store-name" id="store-name-display"></div>

                <div class="header-logo-container">
    <img id="logo-img" src="https://api-y.run.place/Photos/reshoplogo.png" class="header-logo-img" alt="Logo">
</div>

            </div>
            
            <div class="search-container">
                <div class="search-box">
                    <input type="text" id="main-search-input" placeholder="گەڕان بۆ کاڵا...">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </div>
            </div>
        </header>

        <div class="main-content">
            <div class="slider-container">
                <div class="slider-wrapper" id="dynamic-slider">
                    <!-- Skeleton: بانەر -->
                    <div id="skeleton-banner" class="skeleton skeleton-banner"></div>
                </div>
            </div>

            <h3 class="section-title" id="categories-section" style="font-size: 13px !important; font-weight: 800 !important;">بەشەکان</h3>
            <div class="categories-scroll" id="dynamic-categories">
                <!-- Skeleton: بەشەکان -->
                <div id="skeleton-categories" class="skeleton-category-scroll">
                    <div class="skeleton-cat-item"><div class="skeleton skeleton-cat-circle"></div><div class="skeleton skeleton-cat-text"></div></div>
                    <div class="skeleton-cat-item"><div class="skeleton skeleton-cat-circle"></div><div class="skeleton skeleton-cat-text"></div></div>
                    <div class="skeleton-cat-item"><div class="skeleton skeleton-cat-circle"></div><div class="skeleton skeleton-cat-text"></div></div>
                    <div class="skeleton-cat-item"><div class="skeleton skeleton-cat-circle"></div><div class="skeleton skeleton-cat-text"></div></div>
                    <div class="skeleton-cat-item"><div class="skeleton skeleton-cat-circle"></div><div class="skeleton skeleton-cat-text"></div></div>
                </div>
            </div>

            <div id="special-offers-section" style="display: block !important;"> 
                <style>
                    @keyframes pulse-text-red {
                        0% { color: #ff4757; }
                        50% { color: rgba(255, 71, 87, 0.3); }
                        100% { color: #ff4757; }
                    }
                    .limited-tag-text {
                        color: #ff4757;
                        font-size: 12px;
                        font-weight: bold;
                        animation: pulse-text-red 1.5s infinite ease-in-out;
                        white-space: nowrap;
                        background: none !important;
                        padding: 0;
                    }
                </style>
                <div class="section-header" style="display: flex; align-items: center; gap: 10px; padding: 0 15px; margin-top: 15px; margin-bottom: 5px;">
                    <h3 class="section-title" style="margin: 0; width: auto; padding: 0;">ئۆفەری تایبەت 🔥</h3>
                    <span class="limited-tag-text">بۆ ماوەیەکی دیاریکراو!</span>
                </div>
                <div class="horizontal-scroll" id="special-offers-container" style="min-height: 50px;">
                    <!-- Skeleton: ئۆفەری تایبەت -->
                    <div id="skeleton-special" class="skeleton-horizontal-scroll" style="padding:0;gap:12px;display:flex;">
                        <div class="skeleton-product-card-h"><div class="skeleton skeleton-product-img-h"></div><div class="skeleton skeleton-product-title-h"></div><div class="skeleton skeleton-product-title2-h"></div><div class="skeleton skeleton-product-price-h"></div></div>
                        <div class="skeleton-product-card-h"><div class="skeleton skeleton-product-img-h"></div><div class="skeleton skeleton-product-title-h"></div><div class="skeleton skeleton-product-title2-h"></div><div class="skeleton skeleton-product-price-h"></div></div>
                        <div class="skeleton-product-card-h"><div class="skeleton skeleton-product-img-h"></div><div class="skeleton skeleton-product-title-h"></div><div class="skeleton skeleton-product-title2-h"></div><div class="skeleton skeleton-product-price-h"></div></div>
                    </div>
                </div>
            </div>

            <div id="top-orders-section" style="display: block !important; margin-top: -5px !important;">
    <h3 class="section-title">زۆرترین داواکاری 🌟</h3>
    <div class="horizontal-scroll" id="top-orders-container">
                <!-- Skeleton: زۆرترین داواکاری -->
                <div id="skeleton-toporders" class="skeleton-horizontal-scroll" style="padding:0;gap:12px;display:flex;">
                    <div class="skeleton-product-card-h"><div class="skeleton skeleton-product-img-h"></div><div class="skeleton skeleton-product-title-h"></div><div class="skeleton skeleton-product-title2-h"></div><div class="skeleton skeleton-product-price-h"></div></div>
                    <div class="skeleton-product-card-h"><div class="skeleton skeleton-product-img-h"></div><div class="skeleton skeleton-product-title-h"></div><div class="skeleton skeleton-product-title2-h"></div><div class="skeleton skeleton-product-price-h"></div></div>
                    <div class="skeleton-product-card-h"><div class="skeleton skeleton-product-img-h"></div><div class="skeleton skeleton-product-title-h"></div><div class="skeleton skeleton-product-title2-h"></div><div class="skeleton skeleton-product-price-h"></div></div>
                </div>
            </div>
</div>




            <div id="latest-products-section" style="margin-top: -5px !important;">
    <h3 class="section-title">نوێترین کاڵاکان ⏰</h3>
</div>
            <div class="products-grid" id="products-container">
                <!-- Skeleton: کاڵاکانی گشتی -->
                <div id="skeleton-products" class="skeleton-grid" style="padding:0;gap:12px;grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);">
                    <div class="skeleton-product-card-g"><div class="skeleton skeleton-product-img-g"></div><div class="skeleton skeleton-product-title-g"></div><div class="skeleton skeleton-product-title2-g"></div><div class="skeleton skeleton-product-price-g"></div></div>
                    <div class="skeleton-product-card-g"><div class="skeleton skeleton-product-img-g"></div><div class="skeleton skeleton-product-title-g"></div><div class="skeleton skeleton-product-title2-g"></div><div class="skeleton skeleton-product-price-g"></div></div>
                    <div class="skeleton-product-card-g"><div class="skeleton skeleton-product-img-g"></div><div class="skeleton skeleton-product-title-g"></div><div class="skeleton skeleton-product-title2-g"></div><div class="skeleton skeleton-product-price-g"></div></div>
                    <div class="skeleton-product-card-g"><div class="skeleton skeleton-product-img-g"></div><div class="skeleton skeleton-product-title-g"></div><div class="skeleton skeleton-product-title2-g"></div><div class="skeleton skeleton-product-price-g"></div></div>
                </div>
            </div>

            <div class="load-more-container">
                <button id="load-more-btn" class="load-more-btn" style="display: none;">زیاتر ببینە</button>
            </div>
        </div>

        <nav class="bottom-nav">
            <div class="nav-item active" onclick="showPage('home-page')"><i class="fa-solid fa-house"></i><span>سەرەتا</span></div>
            <div class="nav-item" onclick="scrollToCategories()"> <i class="fa-solid fa-layer-group"></i><span>بەشەکان</span></div>
            <div class="nav-item" onclick="showPage('cart-page')"><i class="fa-solid fa-bag-shopping"></i><span>سەبەتە</span></div>
            <div class="nav-item" onclick="showPage('about-page')"><i class="fa-solid fa-address-card"></i><span>دەربارە</span></div>
        </nav>
    </div>

    <div id="all-categories-page" class="page">
        <div class="product-header">
            <button class="back-btn" onclick="showPage('home-page')"><i class="fa-solid fa-arrow-right"></i></button>
            <span class="header-title">هەموو بەشەکان</span>
        </div>
        <div class="all-cats-grid" id="full-categories-list"></div>
    </div>

    <div id="product-page" class="page">
        <div class="product-header">
            <button class="back-btn" onclick="showPage('home-page')"><i class="fa-solid fa-arrow-right"></i></button>
            <span class="header-title">وردەکاری کاڵا</span>
        </div>
        <div class="product-view-scroll">
            <!-- Image Gallery -->
            <div class="gallery-container" id="gallery-container">
                <div class="gallery-main-wrap">
                    <img id="detail-img" src="" onclick="openGalleryFull(this.src)">
                </div>
            </div>
            <div class="detail-content">
                <div style="display:flex; align-items:center; justify-content:space-between; padding: 4px 0 4px 0;">
                    <div class="gallery-thumbs" id="gallery-thumbs" style="padding-left: 0px;"></div>
                    <a id="whatsapp-seller-btn" href="#" style="display:flex; align-items:center; justify-content:center; background:#25d366; color:#fff; border-radius:50%; width:44px; height:44px; text-decoration:none; flex-shrink:0; box-shadow:0 2px 8px rgba(37,211,102,0.4);">
                        <i class="fa-brands fa-whatsapp" style="font-size:24px;"></i>
                    </a>
                </div>
                <h2 id="detail-title"></h2>
                <div class="detail-price" id="detail-price"></div>
                <div class="detail-desc"><p id="detail-desc-text"></p></div>
            </div>
            <!-- Similar Products -->
            <div id="similar-products-section" style="padding:15px 15px 100px; display:none;">
                <h3 style="font-size:14px; font-weight:bold; color:#333; margin-bottom:10px; border-bottom:2px solid var(--primary-color); padding-bottom:6px;">هەروەها لەبەشی هاوشێوە</h3>
                <div id="similar-products-list" style="display:grid; grid-template-columns:repeat(3,1fr); gap:10px;"></div>
            </div>
        </div>
<style>
    #detail-img { width:100%; height:300px; object-fit:cover; cursor:pointer; display:block; background:#f0f0f0; }
    .gallery-container { padding: 10px 32px 0; background: var(--light); }
    .detail-content { padding: 2px 32px 15px; background: #fff; border-radius: 0; position: relative; margin-top: 0; }
    .gallery-main-wrap { border-radius: 16px 16px 0 0; overflow:hidden; background:#f0f0f0; box-shadow: 0 2px 12px rgba(0,0,0,0.10); }
    #detail-title { font-size: 16px !important; }
    .gallery-thumbs { display:flex; gap:6px; padding: 8px 0 10px 0; overflow-x:auto; justify-content: flex-start; background: #fff; margin-right: 0; }
    .gallery-thumb { width:38px; height:38px; object-fit:cover; border-radius:6px; border:1.5px solid #ddd; cursor:pointer; flex-shrink:0; transition:border-color 0.2s; }
    .gallery-thumb.active { border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color); }
    .gallery-fullscreen { position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:9999; display:flex; align-items:center; justify-content:center; }
    .gallery-fullscreen img { max-width:95%; max-height:90vh; border-radius:12px; }
    .gallery-fullscreen .close-btn { position:absolute; top:20px; right:20px; background:rgba(255,255,255,0.2); border:none; color:white; font-size:22px; width:40px; height:40px; border-radius:50%; cursor:pointer; }
    .similar-product-card { background:white; border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.08); cursor:pointer; }
    .similar-product-card img { width:100%; height:80px; object-fit:cover; }
    .similar-product-card .sim-info { padding:6px; font-size:11px; }
    .similar-product-card .sim-title { font-weight:bold; color:#333; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-bottom:2px; }
    .similar-product-card .sim-price { color:var(--primary-color); font-weight:bold; font-size:11px; }
</style>

<div class="detail-footer" style="position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; padding: 15px; box-shadow: 0 -5px 15px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 10px; z-index: 2000; height: auto;">
    <div style="display: flex; align-items: center; justify-content: space-between; background: #f8f9fa; padding: 10px 20px; border-radius: 15px; border: 1px solid #eee;">
        <button onclick="changeQty(1)" style="width: 40px; height: 40px; border-radius: 10px; border: none; background: var(--primary-color); color: white; font-size: 18px;"><i class="fa-solid fa-plus"></i></button>
        <div style="text-align: center;">
            <span style="display: block; font-size: 11px; color: #777;">بڕی داواکراو</span>
            <span id="item-qty" style="font-weight: bold; font-size: 20px; color: #333;">1</span>
        </div>
        <button onclick="changeQty(-1)" style="width: 40px; height: 40px; border-radius: 10px; border: none; background: var(--primary-color); color: white; font-size: 18px;"><i class="fa-solid fa-minus"></i></button>
    </div>
    <button class="add-to-cart-full" onclick="addToCartFromDetail()" style="width: 100%; margin: 0; height: 50px; border-radius: 15px; font-size: 16px;">زیادکردن بۆ سەبەتە <i class="fa-solid fa-cart-plus"></i></button>
</div>
    </div>

    <div id="cart-page" class="page">
        <div class="product-header">
            <button class="back-btn" onclick="showPage('home-page')"><i class="fa-solid fa-arrow-right"></i></button>
            <span class="header-title">سەبەتەی کڕین</span>
            <button class="icon-btn" onclick="clearCart()"><i class="fa-regular fa-trash-can"></i></button>
        </div>
        <div class="cart-items-container" id="cart-items-list"></div>
        <div class="cart-footer">
            <div style="display:flex; justify-content:space-between; margin-bottom:5px;">
                <span>کۆی کاڵاکان:</span><span id="cart-subtotal">0 د.ع</span>
            </div>
            <div id="cart-discount-row" style="display:none; justify-content:space-between; margin-bottom:5px; color:#2ed573;">
                <span>داشکاندن:</span><span id="cart-discount-amount">0 د.ع</span>
            </div>
            <div style="display:flex; justify-content:space-between; margin-bottom:10px; font-weight:bold; font-size:18px;">
                <span>کۆی گشتی:</span><span id="cart-total-price">0 د.ع</span>
            </div>
            <button class="checkout-btn" onclick="showPage('checkout-page')">تەواوکردنی کڕین</button>
        </div>
    </div>

        <div id="checkout-page" class="page">
        <div class="product-header">
            <button class="back-btn" onclick="showPage('cart-page')"><i class="fa-solid fa-arrow-right"></i></button>
            <span class="header-title">زانیاری گەیاندن</span>
        </div>
        <div style="padding:20px;">
            <input id="order-name" type="text" placeholder="ناوی تەواو" class="checkout-input">
            <input id="order-phone" type="tel" placeholder="ژمارەی مۆبایل" class="checkout-input">
            
            <div style="display: flex; gap: 10px; width: 100%;">
                <select id="order-province" class="delivery-select" onchange="filterCitiesByProvince()" style="flex: 1;">
                    <option value="" disabled selected>پارێزگا...</option>
                    <option value="سلێمانی">سلێمانی</option>
                    <option value="هەولێر">هەولێر</option>
                    <option value="دهۆک">دهۆک</option>
                    <option value="کەرکوک">کەرکوک</option>
                    <option value="هەڵەبجە">هەڵەبجە</option>
                    <option value="بەغداد">بەغداد</option>
                </select>

                <select id="order-city" class="delivery-select" onchange="updateDeliveryCost()" style="flex: 1;">
                    <option value="" disabled selected>شار...</option>
                </select>
            </div>

            <div style="display:flex; justify-content:space-between; margin-bottom:15px; background:#fff3e0; padding:10px; border-radius:8px;">
                <span>کرێی گەیاندن:</span>
                <span id="delivery-cost-display">0 د.ع</span>
            </div>
            <div class="promo-container">
                <input type="text" id="promo-code-input" class="promo-input" placeholder="کۆدی داشکاندن">
                <button class="promo-apply-btn" onclick="applyPromoCode()">بەکارهێنان</button>
            </div>
            <textarea id="order-address" placeholder="ناونیشانی ورد (گەڕەک، شەقام، نزیک شوێنێکی ناسراو)" class="checkout-input"></textarea>
            <textarea id="order-note" placeholder="تێبینی بۆ داواکاری (ئارەزوومەندانە)" class="checkout-input"></textarea>
            <div style="margin: 15px 0; padding: 10px; border-top: 1px solid #eee;">
                <div style="display:flex; justify-content:space-between; font-weight:bold; font-size:16px; color:var(--primary-color);">
                    <span>کۆی گشتی بۆ پارەدان:</span>
                    <span id="final-checkout-total">0 د.ع</span>
                </div>
            </div>
            <button class="checkout-btn" onclick="processCheckout('firebase')">ناردنی داواکاری</button>
            <button class="checkout-btn whatsapp-order-btn" onclick="processCheckout('whatsapp')">ناردن لەڕێگەی واتسئەپ <i class="fa-brands fa-whatsapp"></i></button>
        </div>
    </div>


    <div id="about-page" class="page">
        <div class="product-header">
            <button class="back-btn" onclick="showPage('home-page')"><i class="fa-solid fa-arrow-right"></i></button>
            <span class="header-title">دەربارەی ئێمە</span>
        </div>
        <div class="profile-content">
            <img src="https://api-y.run.place/Photos/reshoplogo.png" class="about-logo-main">
            <h3 id="about-store-name" style="text-align:center; color:var(--primary-color);">ReShop</h3>
            <div class="about-text-container" id="about-us-content">باردەکرێت...</div>
            <div class="profile-menu">
                <div class="menu-item" onclick="openWhatsAppSupport()">
                    <div class="icon-box" style="background:#e0f2f1; color:#25d366"><i class="fa-brands fa-whatsapp"></i></div>
                    <span>پەیوەندی کردن (واتسئەپ)</span>
                </div>
            </div>
        </div>
    </div>

    <script src="js/script.js"></script>
</body>
</html>
