@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

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

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #fdf6ef;
    color: #2c1a0e;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

.juna-page {
    max-width: 100%;
    overflow-x: hidden;
}

.juna-page {
    background-color: #fdf6ef;
    background-image:
        repeating-radial-gradient(circle at 0 0, transparent 0, rgba(139,90,46,0.025) 40px),
        repeating-radial-gradient(circle at 0 0, transparent 0, rgba(139,90,46,0.025) 40px);
    background-position: 0 0, 20px 20px;
}

/* ==========================================================================
   HEADER / LOGO
   ========================================================================== */
.juna-header {
    text-align: center;
    padding: 60px 20px 30px;
}
.juna-logo {
    max-width: 220px;
    width: 40%;
    margin: -20px auto 90px;
    display: block;
}
.juna-logo-row-juna-new-badge {
    margin-left: 60px;
}
.juna-divider {
    width: 160px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #c9a05c 20%, #c9a05c 80%, transparent);
    margin: 18px auto 0;
    position: relative;
    border: none;
}
.juna-divider::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #c9a05c;
    box-shadow: 0 0 0 3px #fdf6ef;
    transform: translate(-50%, -50%);
}
.juna-tagline {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.15rem;
    color: #b9863f;
    margin-top: 18px;
}

/* ==========================================================================
   PRODUCTS GRID — 2 columns
   ========================================================================== */
.juna-products {
    max-width: 1080px;
    margin: 20px auto 0;
    padding: 10px 24px 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}

.juna-card {
    border-radius: 16px;
    border: 1.5px solid;
    padding: 24px 22px 22px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(44,26,14,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.juna-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(44,26,14,0.12);
}

.juna-number {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: #ffffff;
    border-radius: 8px;
    padding: 4px 14px;
    margin-bottom: 10px;
    float: left;
}

.juna-img-wrap {
    clear: both;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 170px;
    margin-bottom: 14px;
}
.juna-img-wrap img {
    max-width: 100%;
    max-height: 290px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.15));
}

.juna-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #2c1a0e;
    margin-bottom: 10px;
}

.juna-ingredients-label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.juna-ingredients-text {
    font-size: 0.76rem;
    color: #4a3a2c;
    line-height: 1.55;
    margin-bottom: 6px;
}
.juna-allergen-note {
    font-size: 0.74rem;
    font-weight: 700;
    color: #2c1a0e;
    margin-bottom: 14px;
}

.juna-meta {
    display: flex;
    justify-content: center;
    gap: 22px;
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 12px;
}
.juna-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #2c1a0e;
    line-height: 1.25;
    text-align: left;
}
.juna-meta-item i { font-size: 1rem; }

/* ==========================================================================
   PER-CARD COLOR THEMES — يطابق الصورة المرجعية بالظبط
   ========================================================================== */

/* 01 - Hazelnut & Cocoa powder Cream (أحمر/وردي فاتح) */
.juna-card.jc-01 { background-color: #fcebe9; border-color: #f0c9c4; }
.juna-card.jc-01 .juna-number { background-color: #c0392e; }
.juna-card.jc-01 .juna-ingredients-label,
.juna-card.jc-01 .juna-meta-item i { color: #c0392e; }

/* 02 - Hazelnut & Milk Cream (أصفر خردلي فاتح) */
.juna-card.jc-02 { background-color: #f8efd9; border-color: #e8d6a3; }
.juna-card.jc-02 .juna-number { background-color: #c9a227; }
.juna-card.jc-02 .juna-ingredients-label,
.juna-card.jc-02 .juna-meta-item i { color: #b3911e; }

/* 03 - Pistachio Cream (أخضر فاتح) */
.juna-card.jc-03 { background-color: #eaf2e3; border-color: #cde0bd; }
.juna-card.jc-03 .juna-number { background-color: #6e9c4a; }
.juna-card.jc-03 .juna-ingredients-label,
.juna-card.jc-03 .juna-meta-item i { color: #5d8a3a; }

/* 04 - Roasted Coffee Cream (بني فاتح) */
.juna-card.jc-04 { background-color: #f1e3d4; border-color: #ddc3a3; }
.juna-card.jc-04 .juna-number { background-color: #8a5a2e; }
.juna-card.jc-04 .juna-ingredients-label,
.juna-card.jc-04 .juna-meta-item i { color: #7a4a22; }

/* 05 - Almond Cream (كهرماني/برتقالي فاتح) */
.juna-card.jc-05 { background-color: #faecd2; border-color: #efce97; }
.juna-card.jc-05 .juna-number { background-color: #d99a2b; }
.juna-card.jc-05 .juna-ingredients-label,
.juna-card.jc-05 .juna-meta-item i { color: #c1841f; }

/* 06 - Caramelized Biscuit & Cinnamon Cream (برتقالي محروق) */
.juna-card.jc-06 { background-color: #fbe6d4; border-color: #f0c19a; }
.juna-card.jc-06 .juna-number { background-color: #d2641f; }
.juna-card.jc-06 .juna-ingredients-label,
.juna-card.jc-06 .juna-meta-item i { color: #b9531a; }

/* 07 - Biscuit & Cocoa Cream (أزرق كحلي غامق) */
.juna-card.jc-07 { background-color: #e6e8f0; border-color: #c3c8de; }
.juna-card.jc-07 .juna-number { background-color: #1b2f5c; }
.juna-card.jc-07 .juna-ingredients-label,
.juna-card.jc-07 .juna-meta-item i { color: #1b2f5c; }

/* 08 - Peanut Butter (بنفسجي) */
.juna-card.jc-08 { background-color: #ede3f0; border-color: #d3bfe0; }
.juna-card.jc-08 .juna-number { background-color: #7a3f96; }
.juna-card.jc-08 .juna-ingredients-label,
.juna-card.jc-08 .juna-meta-item i { color: #6b3485; }

/* 09 - White Chocolate Cream (بيج فاتح) */
.juna-card.jc-09 { background-color: #f5eedd; border-color: #e3d4ad; }
.juna-card.jc-09 .juna-number { background-color: #8a6d3a; }
.juna-card.jc-09 .juna-ingredients-label,
.juna-card.jc-09 .juna-meta-item i { color: #7a5e30; }

/* 10 - Dark Chocolate Cream (بني غامق جداً) */
.juna-card.jc-10 { background-color: #e6d9d2; border-color: #c9b0a3; }
.juna-card.jc-10 .juna-number { background-color: #3d1f0a; }
.juna-card.jc-10 .juna-ingredients-label,
.juna-card.jc-10 .juna-meta-item i { color: #3d1f0a; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .juna-products { grid-template-columns: 1fr; gap: 20px; }
    .juna-logo { width: 65%; }
}

@media (max-width: 480px) {
    .juna-card { padding: 18px 16px; }
    .juna-title { font-size: 1rem; }
}

/* ==========================================================================
   NEW ADDITIONS — NEW badge + language toggle + brochure + find us
   (لم يتم تعديل أي قاعدة موجودة بالأعلى، الإضافات فقط تحت هذا الفاصل)
   ========================================================================== */

/* الهيدر يحتاج position:relative عشان لوجو NEW يتموضع بالنسبة له */
.juna-header {
    position: relative;
}

.juna-logo-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    max-width: 100%;
}
.juna-logo-row .juna-logo {
    width: auto;
    max-width: 160px;
    margin: 0;
}

/* ---- شعار NEW: ثابت في أقصى يمين الصفحة ----
   .juna-new-badge يتحكم في الحجم فقط.
   .juna-new-badge-position يتحكم في المكان بالكامل (top / right) — عدّلهم زي ما تحب. */
.juna-new-badge {
    width: 172px;
    height: auto;
}
.juna-new-badge-position {
    position: absolute;
    top: 106px;
    right: 205px;
}
@media (max-width: 768px) {
    .juna-new-badge {
        width: 70px;
    }
    .juna-new-badge-position {
        top: 16px;
        right: 16px;
    }
}
@media (max-width: 480px) {
    .juna-new-badge {
        width: 96px;
    }
    .juna-new-badge-position {
        top: 102px;
        right: 12px;
    }
}

/* Language toggle button */
.lang-toggle-btn {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 999;
    background-color: #c0392e;
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 30px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 16px rgba(192,57,46,0.32);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lang-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(192,57,46,0.4);
}
.lang-toggle-btn i { font-size: 0.9rem; }

@media (max-width: 480px) {
    .lang-toggle-btn {
        top: 12px;
        left: 12px;
        padding: 8px 14px;
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   DOWNLOAD BROCHURE + FIND JUNA AT
   ========================================================================== */
.juna-actions {
    max-width: 1080px;
    margin: 10px auto 60px;
    padding: 0 24px;
    text-align: center;
}

.juna-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background-color: #c0392e;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 16px 32px;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(192,57,46,0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.juna-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(192,57,46,0.36);
}
.juna-download-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.juna-findus {
    margin-top: 60px;
}
/* ---- لوجو اللوكيشن: كلاس مخصص للتحكم في الحجم والمسافة ---- */
.juna-location-logo {
    width: 304px;
    height: auto;
    margin: 0 auto 5px;
    display: block;
}
.juna-findus h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    font-size: 2rem;
    color: #2c1a0e;
    margin-top: -38px;
}
.juna-findus-divider {
    margin-top: 14px;
}
.juna-findus p {
    font-size: 0.95rem;
    color: #7a5c3e;
    margin-top: 14px;
}
/* .juna-findus-juna-partner-logo {
   width: 140px;
} */

@media (max-width: 480px) {
    .juna-download-btn {
        font-size: 0.8rem;
        padding: 14px 24px;
        gap: 10px;
    }
    .juna-location-logo { width: 44px; }
    .juna-findus h2 { font-size: 1.5rem; }
    .juna-findus p { font-size: 0.85rem; }
}

/* Arabic language mode — text only, layout/order untouched */
body.lang-ar {
    font-family: 'Tajawal', sans-serif;
}
body.lang-ar .juna-tagline,
body.lang-ar .juna-title,
body.lang-ar .juna-ingredients-label,
body.lang-ar .juna-ingredients-text,
body.lang-ar .juna-allergen-note,
body.lang-ar .juna-meta-item,
body.lang-ar .juna-download-btn span,
body.lang-ar .juna-findus h2,
body.lang-ar .juna-findus p {
    font-family: 'Tajawal', sans-serif;
    direction: rtl;
}