:root {
    --bg-main: #efe6d3;
    --brown: #47322B;
    --green: #2bb673;
    --card-bg: #f7f2e7;
}

/* ================= FONT DEFINITIONS ================= */

@font-face {
    font-family: 'ArabicFont';
    src: url('../fonts/Al-Qalam.ttf') format('truetype');
}

@font-face {
    font-family: 'UrduFont';
    src: url('../fonts/Jameel.ttf') format('truetype');
}

@font-face {
    font-family: 'LatinFont';
    src: url('../fonts/Roboto.ttf') format('truetype');
}

@font-face {
    font-family: 'AzeriFont';
    src: url('../fonts/SOUTHRNN.ttf') format('truetype');
}

/* ================= GLOBAL ================= */

body {
    font-family: 'LatinFont', Arial, sans-serif;
    background: var(--bg-main);
    margin: 0;
    padding-top: 75px;
}

body {
    font-weight: normal;
}

/* Apply fonts ONLY when language class exists */

.lang-az {
    font-family: 'AzeriFont', sans-serif;
}

/* ================= HEADER (FINAL FIX) ================= */

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 75px;
    background: rgba(216, 190, 142, 0.95);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    box-sizing: border-box;
    z-index: 5000;
}

/* LEFT — DESKTOP LANG */
.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

/* CENTER — LOGO */
.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.logo {
    height: 40px;
}

/* RIGHT — ICONS */
.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    justify-content: flex-end;
}

.icon-btn {
    font-size: 18px;
    cursor: pointer;
}

/* MOBILE BUTTON (hidden by default) */
.mobile-lang-btn {
    display: none;
    font-size: 18px;
    cursor: pointer;
}

/* MOBILE MENU */
.mobile-lang-menu {
    display: none;
    position: fixed;
    top: 75px;
    left: 10px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    padding: 6px 0;
    z-index: 6000;
}

.mobile-lang-menu a {
    display: block;
    padding: 8px 14px;
    text-decoration: none;
    color: #333;
}

.mobile-lang-menu a:hover {
    background: #f3f3f3;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {

    .desktop-lang {
        display: none !important;
    }

    .mobile-lang-btn {
        display: block !important;
    }

    .logo {
        height: 32px;
    }
}

/* ===== DESKTOP FORCE ===== */
@media (min-width: 769px) {

    .desktop-lang {
        display: flex !important;
    }

    .mobile-lang-btn {
        display: none !important;
    }
}

/* ================= FLOATING SETTINGS ================= */

.floating-settings {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 55px;
    height: 55px;
    background: var(--green);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    z-index: 4000;
}

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

.container {
    max-width: 900px;
    margin: auto;
    padding: 15px;
}

.card {
    background: var(--card-bg);
    margin: 12px 0;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid #d7cbb5;
}

/* ================= ARABIC RULED LINES (LIKE APP) ================= */

.arabic {
    font-family: 'ArabicFont', serif;
    font-size: 28px;
    direction: rtl;
    text-align: center;

    line-height: 2.4em;   /* controls line spacing */

    /* DRAW divider after every visual wrapped line */
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent calc(2.4em - 1px),
        #cdbf9e calc(2.4em - 1px),
        #cdbf9e 2.4em
    );

    background-size: 100% 2.4em;
}

/* ================= TRANSLATION ================= */

.translation {
    font-size: 18px;
    margin-top: 10px;
    line-height: 1.7;
    background: #f4efe6;
    padding: 10px 12px;
    border-radius: 6px;
    text-align: center;
}

/* ================= LANGUAGE FONTS ================= */

.lang-ur {
    font-family: 'UrduFont', serif;
    direction: rtl;
    line-height: 2.4;   /* Increase spacing between lines */
    text-align: right;
}

.lang-en,
.lang-ro {
    font-family: 'LatinFont', sans-serif;
}

.lang-az {
    font-family: 'AzeriFont', sans-serif;
}

/* ================= AUDIO ================= */

.audio-bar {
    position: sticky;
    top: 75px;
    background: var(--brown);
    color: white;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2000;
}

.audio-bar button {
    background: var(--green);
    border: none;
    color: white;
    padding: 8px 12px;
    border-radius: 50%;
    cursor: pointer;
}

/* ================= MOBILE ================= */

/* ================= MOBILE HEADER FIX ================= */

@media (max-width: 768px) {

    .desktop-lang {
        display: none !important;
    }

    .mobile-lang-btn {
        display: block !important;
    }

    .logo {
        height: 32px;
    }
}

/* Ensure desktop always shows correct layout */
@media (min-width: 769px) {

    .desktop-lang {
        display: flex !important;
    }

    .mobile-lang-btn {
        display: none !important;
    }
}

/* ONE BIG CREAM BOX */

.big-card {
    background: var(--card-bg);
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid #d7cbb5;
}

/* Remove box from normal cards (Arabic area must be plain) */
.card {
    background: transparent;
    margin: 12px 0;
    padding: 0;
    border: none;
}

/* ================= MENU BOX STYLE (RESTORE OLD LOOK) ================= */

/* Main menu list container */
.menu-list,
.submenu-list {
    max-width: 520px;
    margin: 25px auto;
}

/* Each menu item box */
.menu-item {
    background: var(--card-bg);
    border: 1px solid #d7cbb5;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 8px 0;
    transition: all 0.15s ease;
}

/* Hover effect like before */
.menu-item:hover {
    background: #efe6d6;
    transform: translateY(-1px);
}


/* ================= SUB MENU (CHILD) ================= */

.menu-list,
.submenu-list {
    max-width: 520px;
    margin: 25px auto;
}

.submenu-item {
    background: var(--card-bg);
    border: 1px solid #d7cbb5;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 8px 0;
}

/* Menu + Submenu links — SAME font & SAME size everywhere */

/* MENU LINKS — Default */
.container > .card a {
    text-decoration: none;
    color: #2f241f;
    font-size: 17px;
    font-weight: 500;
    font-family: 'LatinFont', sans-serif;
    display: block;
}

/* When Urdu (RTL) → apply Jameel */
body[style*="rtl"] .container > .card a {
    font-family: 'UrduFont', serif;
    direction: rtl;
}

/* Auto switch font when Urdu language is active */

html[dir="rtl"] .menu-item a,
html[dir="rtl"] .submenu-item a {
    font-family: 'UrduFont', serif;
}

/* ================= SEARCH BAR STYLE ================= */

.search-bar {
    display: none;
    background: var(--card-bg);
    padding: 10px;
    border-bottom: 1px solid #d7cbb5;
}

.search-bar input {
    width: 92%;
    padding: 8px 10px;
    border-radius: 20px;
    border: 1px solid #cdbf9e;
    outline: none;
}

/* Smooth show */
.search-bar.show {
    display: block;
}

/* ================= MENU FONT BY LANGUAGE ================= */

.lang-ur .container > .card {
    font-family: 'UrduFont', serif;
    direction: rtl;
}

.lang-en .container > .card,
.lang-ro .container > .card {
    font-family: 'LatinFont', sans-serif;
}

.lang-az .container > .card {
    font-family: 'AzeriFont', sans-serif;
}

/* ===== FORCE URDU FONT ON MENU (STRONG OVERRIDE) ===== */
body.lang-ur .container .card {
    font-family: 'UrduFont', serif !important;
    direction: rtl;
}

/* English / Roman */
body.lang-en .container .card,
body.lang-ro .container .card {
    font-family: 'LatinFont', sans-serif !important;
}

/* Azerbaijani */
body.lang-az .container .card {
    font-family: 'AzeriFont', sans-serif !important;
}

/* ===== FORCE URDU FONT FOR MENU (FINAL FIX) ===== */

.lang-ur .menu-item,
.lang-ur .menu-item a,
.lang-ur .submenu-item,
.lang-ur .submenu-item a {
    font-family: 'UrduFont', serif !important;
    direction: rtl;
}