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

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

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

/* English + Roman - Roboto */
@font-face {
    font-family: 'LatinFont';
    src: url('../fonts/Roboto.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

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

body {
    font-family: 'LatinFont', Arial, sans-serif;
    background: #f5f5f5;
    margin: 0;
}

/* Prevent fake bold rendering */
body, .arabic, .translation, .lang-ur, .lang-en, .lang-ro, .lang-az {
    font-weight: normal
    font-synthesis: none;
}

/* ============================= */
/* ARABIC TEXT */
/* ============================= */

/* Arabic */
.arabic {
    font-family: 'ArabicFont', serif;
    font-size: 25px;
    direction: rtl;
    text-align: right;
    line-height: 1.9;
    font-weight: normal;
}

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

.translation {
    font-size: 18px;
    margin-top: 6px;
    line-height: 1.6;
}

/* ============================= */
/* LANGUAGE-SPECIFIC FONTS */
/* ============================= */

/* Urdu */
.lang-ur {
    font-family: 'UrduFont', serif;
    direction: rtl;
    text-align: right;
    font-size: 20px;
    line-height: 2;
    font-weight: normal;
}

/* English */
.lang-en {
    font-family: 'LatinFont', sans-serif;
    font-weight: normal;
}

/* Roman */
.lang-ro {
    font-family: 'LatinFont', sans-serif;
    font-weight: normal;
}

/* Azeri */
.lang-az {
    font-family: 'AzeriFont', sans-serif;
    font-weight: normal;
}

/* ============================= */
/* CARD LAYOUT */
/* ============================= */

.card {
    background: #ffffff;
    margin: 15px;
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* ============================= */
/* HEADING */
/* ============================= */

h2 {
    margin: 18px 0;
    text-align: center;
}

/* ============================= */
/* RESPONSIVE LAYOUT */
/* ============================= */

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

/* Card full width on mobile */
.card {
    margin: 12px auto;
    width: 95%;
}

/* Arabic scaling on small screens */
@media (max-width: 600px) {

    .translation {
        font-size: 16px;
        line-height: 1.5;
    }

    .lang-ur {
        font-size: 18px;
        line-height: 1.9;
    }
    /* ================= AUDIO BAR ================= */

.audio-bar {
    position: sticky;
    top: 0;
    background: #6b4a3b;
    color: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1000;
}

.audio-bar button {
    background: #2bb673;
    border: none;
    color: white;
    padding: 8px 12px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
}

.audio-bar input[type=range] {
    flex: 1;
}

.audio-bar span {
    font-size: 14px;
}
}