/* --- Professional, Responsive, and Scroll-Fixed Theme --- */

/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Nastaliq+Urdu:wght@400;700&display=swap');

/* Color Palette */
:root {
    --primary-bg: #f4f7f6;      /* Lighter Gray */
    --card-bg: #ffffff;         /* White */
    --header-bg: #2c3e50;      /* Dark Slate Blue */
    --header-fg: #ffffff;         /* White */
    --text-color: #34495e;      /* Wet Asphalt */
    --accent-color: #1abc9c;    /* Green Sea (Teal) */
    --accent-hover: #16a085;  /* Darker Teal */
    --button-fg: #ffffff;         /* White */
    --correct-color: #2ecc71;      /* Emerald Green */
    --wrong-color: #e74c3c;        /* Alizarin Red */
    --watermark-color: rgba(189, 195, 199, 0.4); /* Silver (subtle) */
}

/* Base Styles for PC and Mobile */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden; /* Prevent bouncing */
    font-family: 'Lato', sans-serif;
    background-color: var(--primary-bg);
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6vw;
    font-weight: bold;
    color: var(--watermark-color);
    text-align: center;
    pointer-events: none;
    z-index: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.container {
    width: 100%;
    max-width: 900px;
    height: 100%;
    max-height: 750px;
    background-color: var(--card-bg);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    overflow: hidden; /* Prevents container itself from scrolling */
}

/* Header */
.header { background-color: var(--header-bg); color: var(--header-fg); padding: 20px; text-align: center; position: relative; border-bottom: 5px solid var(--accent-color); flex-shrink: 0; }
.header h1 { font-size: 26px; font-weight: 700; margin: 0; }
.header h2 { font-size: 20px; font-weight: 400; margin: 5px 0; }
.chapter-title { font-family: 'Noto Nastaliq Urdu', serif; font-size: 24px; font-weight: 700; margin: 5px 0 10px; }

/* Login Form */
.login-body { flex-grow: 1; overflow-y: auto; display: flex; justify-content: center; align-items: center; } /* SCROLL FIX */
.login-form { display: flex; flex-direction: column; align-items: center; padding: 20px; }
.urdu-title { font-family: 'Noto Nastaliq Urdu', serif; font-size: 40px; font-weight: 700; color: var(--header-bg); margin-bottom: 30px; text-align: center; }
.urdu-label { font-family: 'Noto Nastaliq Urdu', serif; font-size: 24px; font-weight: 700; color: var(--text-color); margin-top: 20px; }

.input-field { font-family: 'Lato', sans-serif; font-size: 16px; font-weight: bold; width: 320px; max-width: 90%; padding: 12px; margin-top: 8px; text-align: center; border: 2px solid #bdc3c7; border-radius: 8px; transition: border-color 0.3s, box-shadow 0.3s; }
.input-field:focus { border-color: var(--accent-color); box-shadow: 0 0 8px rgba(26, 188, 156, 0.4); outline: none; }

.start-button { font-family: 'Lato', 'Noto Nastaliq Urdu', serif; font-size: 20px; font-weight: bold; background-color: var(--accent-color); color: var(--button-fg); border: none; padding: 15px 40px; margin-top: 40px; cursor: pointer; border-radius: 8px; transition: background-color 0.3s, transform 0.2s; }
.start-button:hover { background-color: var(--accent-hover); transform: translateY(-2px); }

/* Footer */
.app-footer {
    background-color: var(--header-bg);
    color: var(--header-fg);
    text-align: center;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    flex-shrink: 0;
}

/* Quiz Screen */
.status-bar { display: flex; justify-content: space-between; padding: 15px 25px; font-size: 18px; font-weight: 700; color: var(--text-color); background-color: #f8f9f9; flex-shrink: 0; }
#score-label { color: var(--correct-color); }
.quiz-body { flex-grow: 1; overflow-y: auto; padding: 20px 0; } /* SCROLL FIX */
.question-area { padding: 0 20px 20px; text-align: center; color: var(--text-color); }
#question-eng { font-size: 22px; font-weight: 700; margin-bottom: 15px; line-height: 1.4; }
#question-urdu { font-family: 'Noto Nastaliq Urdu', serif; font-size: 28px; font-weight: 700; line-height: 1.8; }

.options-area { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 0 20px 20px; }
.option-btn { width: 100%; max-width: 500px; padding: 15px; font-family: 'Lato', sans-serif; font-size: 18px; font-weight: 700; background-color: #ffffff; color: var(--accent-color); border: 2px solid var(--accent-color); border-radius: 8px; cursor: pointer; transition: all 0.3s ease; }
.option-btn:hover:not(:disabled) { background-color: var(--accent-color); color: var(--button-fg); transform: translateY(-2px); }
.option-btn:disabled { cursor: not-allowed; opacity: 0.7; }
.option-btn.correct { background-color: var(--correct-color) !important; color: white !important; border-color: var(--correct-color) !important; }
.option-btn.wrong { background-color: var(--wrong-color) !important; color: white !important; border-color: var(--wrong-color) !important; }

.feedback-area { text-align: center; padding: 15px; min-height: 50px; font-size: 20px; font-weight: bold; }
#feedback-label.correct { color: var(--correct-color); }
#feedback-label.wrong { color: var(--wrong-color); }

/* Modal & Record Button */
.view-record-button { background-color: var(--button-fg); color: var(--header-bg); padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; position: absolute; top: 20px; right: 20px; transition: background-color 0.3s; }
.view-record-button:hover { background-color: #e0e0e0; }
.modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
.modal-content { background-color: var(--card-bg); margin: 15% auto; padding: 30px; border: none; width: 90%; max-width: 450px; border-radius: 10px; text-align: center; color: var(--text-color); box-shadow: 0 5px 20px rgba(0,0,0,0.2); }
.modal-content h3 { color: var(--header-bg); font-size: 22px; }
.modal-content p { font-size: 18px; line-height: 1.7; }
.close-button { color: #aaa; float: right; font-size: 32px; font-weight: bold; cursor: pointer; }
#print-record-btn { background-color: var(--accent-color); color: white; padding: 12px 20px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; margin-top: 20px; transition: background-color 0.3s; }
#print-record-btn:hover { background-color: var(--accent-hover); }

/* --- RESPONSIVE DESIGN FOR MOBILE --- */
@media (max-width: 768px) {
    .container {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
    }
    .header h1 { font-size: 20px; }
    .chapter-title { font-size: 20px; }
    .urdu-title { font-size: 32px; margin-bottom: 20px; }
    .urdu-label { font-size: 20px; }
    .input-field { padding: 10px; width: 90%; }
    .start-button { font-size: 18px; padding: 12px 30px; }
    .app-footer { font-size: 14px; }
    #question-eng { font-size: 18px; }
    #question-urdu { font-size: 24px; }
    .option-btn { font-size: 16px; padding: 12px; }
    .status-bar { font-size: 14px; padding: 10px 15px; }
    .view-record-button { top: 15px; right: 15px; padding: 8px 12px; }
    .modal-content { width: 90%; margin: 30% auto; }
}