body {
    font-family: 'Assistant', sans-serif; /* Using a child-friendly font */
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    /* Background gradient kept, but image added on top/behind main */
    background: linear-gradient(to bottom, #80deea 0%, #e1bee7 100%); /* Brighter, more playful gradient */
    background-image: url('/Generated Image June 08, 2025 - 11_10PM.jpeg'); /* Add background image - Corrected filename */
    background-size: cover; /* Cover the entire body */
    background-position: center center; /* Center the image */
    background-attachment: fixed; /* Fix the background so it doesn't scroll with content */
    text-align: right; /* Align text to the right for RTL */
    direction: rtl; /* Set overall direction to RTL */
    color: #212121; /* Darker text for better contrast */
}

header {
    /* background-color: #ff8a65; /* Brighter orange */
    background-color: #4fc3f7; /* Light blue shade */
    color: #e1f5fe; /* Very light blue */
    padding: 20px 0; /* Increased padding */
    text-align: center;
    margin-bottom: 40px; /* Increased margin */
    /* border-bottom: 6px solid #ff7043; /* Added border */
    border-bottom: 6px solid #29b6f6; /* Darker blue border */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Larger shadow */
    border-radius: 0 0 20px 20px; /* Rounded corners only at the bottom */
}

h1, h2, h3 {
    color: #424242; /* Keep dark color for readability, slightly softer */
    font-weight: 800; /* Extra bold Assistant */
    margin-top: 0;
}
h1 { font-size: 2.5em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; color: #616161; } /* Slightly lighter for section titles */


main {
    max-width: 850px; /* Slightly wider main area */
    margin: 20px auto; /* Added top/bottom margin */
    /* background: rgba(255, 255, 255, 0.98); /* Almost opaque white */
    background: rgba(255, 255, 255, 0.9); /* Slightly more transparent white */
    padding: 30px; /* Increased padding */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Softer, larger shadow */
    border-radius: 20px; /* More rounded corners */
}

.content-section {
    margin-bottom: 25px; /* Increased margin */
    padding: 20px; /* Increased padding */
    border-radius: 12px; /* More rounded corners */
    border-right: 8px solid; /* Define border color per section type */
    box-shadow: inset 2px 2px 8px rgba(0, 0, 0, 0.08); /* Inner shadow */
}

/* Specific colors for different sections */
.summary-section {
    background-color: #e0f7fa; /* Light cyan */
    border-right-color: #00bcd4; /* Brighter border color */
}

.points-section {
     background-color: #e8f5e9; /* Light green */
     border-right-color: #4caf50; /* Green border color */
}

.message-section {
     background-color: #fffde7; /* Lightest yellow */
     border-right-color: #ffeb3b; /* Yellow border color */
}


#parasha-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Increased gap */
    justify-content: center;
    margin-bottom: 30px; /* Increased margin */
}

.parasha-button, .button {
    display: inline-block;
    background-color: #4dd0e1; /* Light cyan */
    color: #333; /* Darker text for contrast */
    padding: 14px 30px; /* Increased padding */
    border: none;
    border-radius: 30px; /* Very rounded, pill shape */
    cursor: pointer;
    font-size: 1.2em; /* Slightly larger font */
    font-weight: 600; /* Semi-bold Assistant */
    transition: background-color 0.3s ease, transform 0.1s ease; /* Added transform for press effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Button shadow */
    min-width: 120px; /* Minimum width for consistency */
    text-align: center;
}

.parasha-button:hover:not(.selected), .button:hover {
    background-color: #26a69a; /* Teal */
    color: white;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
.parasha-button:active, .button:active {
     transform: scale(0.97); /* Slight shrink effect when pressed */
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}


.parasha-button.selected {
    background-color: #ffb74d; /* Orange */
    color: #333;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); /* Reduced shadow */
    border: 2px solid #ffa726; /* Add a border for emphasis */
}
.parasha-button.selected:hover {
    background-color: #ffa726; /* Darker orange */
     color: #333;
     box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}


#parasha-points li {
    list-style: none; /* Remove default list style */
    padding: 12px 0; /* Increased padding */
    border-bottom: 1px dashed #b2ebf2; /* Dashed border */
    margin-bottom: 8px; /* Add margin between items */
}

#parasha-points li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.point-title {
    font-weight: bold;
    cursor: pointer;
    color: #0277bd; /* Dark blue */
    transition: color 0.3s ease, text-decoration 0.3s ease;
    display: block; /* Make the whole line clickable */
    padding: 5px 0; /* Add some padding for easier clicking */
}

.point-title:hover {
    color: #01579b; /* Darker blue */
    text-decoration: underline;
}

.point-detail {
    margin-top: 10px; /* Increased margin */
    padding: 15px; /* Increased padding */
    background-color: #e1f5fe; /* Lighter blue */
    border-right: 6px solid #039be5; /* Brighter border */
    border-radius: 8px; /* More rounded corners */
    font-size: 1em; /* Slightly larger font */
    line-height: 1.5;
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.08); /* Inner shadow */
    /* Added for smooth transition */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out, margin-top 0.5s ease-in-out;
}
.point-detail:not(.hidden) {
    max-height: 300px; /* Sufficient height for content */
    padding: 15px;
    margin-top: 10px;
}


/* Quiz Styling */
#quiz-area {
    margin-top: 30px; /* Increased margin */
    background-color: #f3e5f5; /* Light purple background for quiz */
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
}

#quiz-progress {
    width: 100%;
    background-color: #e1bee7; /* Light purple */
    border-radius: 15px; /* Very rounded */
    overflow: hidden;
    margin-bottom: 25px; /* Increased margin */
    position: relative;
    height: 35px; /* Taller bar */
    text-align: center;
    line-height: 35px;
    color: #4a148c; /* Dark purple text */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1); /* Inner shadow */
    font-weight: bold;
    font-size: 1.1em;
}

#progress-bar {
    height: 100%;
    width: 0%;
    background-color: #a5d6a7; /* Light green */
    background: linear-gradient(to right, #a5d6a7, #66bb6a); /* Gradient */
    color: white; /* Text color on the bar */
    border-radius: 15px 0 0 15px; /* Rounded only on one side */
    position: absolute;
    top: 0;
    right: 0; /* Start from the right for RTL */
    transition: width 0.8s ease-in-out; /* Slower, smoother transition */
    text-indent: -9999px; /* Hide text inside bar, text is in #progress-text */
}
/* Progress text is overlaid */
#progress-text {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    color: #4a148c; /* Ensure text is visible over bar */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* More pronounced shadow for contrast */
}


#quiz-question {
    background-color: #fff9c4; /* Light yellow */
    padding: 25px; /* Increased padding */
    border: 2px dashed #ffecb3; /* Dashed yellow border */
    border-radius: 10px; /* Rounded corners */
    margin-bottom: 20px; /* Increased margin */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Subtle shadow */
}

#question-text {
    font-size: 1.4em; /* Larger font */
    margin-bottom: 25px; /* Increased margin */
    font-weight: 600; /* Semi-bold */
    color: #424242; /* Softer color */
    text-align: center; /* Center the question */
}

#answer-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Increased gap */
}

.answer-button {
    display: block;
    width: 100%;
    padding: 14px 20px; /* Increased padding */
    border: 1px solid #bdbdbd; /* Grey border */
    border-radius: 10px; /* More rounded corners */
    text-align: right; /* Align text to the right */
    cursor: pointer;
    background-color: #f5f5f5; /* Lighter grey */
    font-size: 1.1em;
    font-weight: 400;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.answer-button:hover:not(:disabled) { /* Only hover effect on enabled buttons */
    background-color: #e0e0e0; /* Darker grey on hover */
}
.answer-button:active:not(:disabled) {
     transform: scale(0.98);
}


.answer-button.correct {
    background-color: #a5d6a7; /* Light green */
    border-color: #4caf50; /* Green */
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    color: #1b5e20; /* Dark green text */
}

.answer-button.incorrect {
    background-color: #ef9a9a; /* Light red */
    border-color: #f44336; /* Red */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    color: #b71c1c; /* Dark red text */
}

.answer-button:disabled {
    opacity: 0.8; /* Make them look disabled but still readable */
    cursor: default;
}


#feedback {
    margin-top: 20px; /* Increased margin */
    padding: 15px; /* Increased padding */
    border-radius: 8px; /* Rounded corners */
    min-height: 2em; /* Reserve more space */
    font-weight: 600;
    text-align: center; /* Center feedback text */
    font-size: 1.2em; /* Larger font */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.feedback.correct {
    background-color: #c8e6c9; /* Lighter green */
    color: #2e7d32; /* Dark green */
    border: 1px solid #a5d6a7;
}

.feedback.incorrect {
    background-color: #ffcdd2; /* Lighter red */
    color: #c62828; /* Dark red */
    border: 1px solid #ef9a9a;
}

#quiz-score {
    font-size: 1.3em; /* Larger font */
    font-weight: 800; /* Extra bold */
    text-align: center;
    margin-top: 25px; /* Added margin */
    margin-bottom: 25px; /* Increased margin */
    color: #0288d1; /* Blue color */
}

#quiz-result {
     text-align: center;
     padding: 30px; /* Increased padding */
     background-color: #b3e5fc; /* Light blue */
     border-radius: 15px; /* Rounded corners */
     margin-top: 30px; /* Increased margin */
     border: 3px dashed #81d4fa; /* Dashed border */
     color: #01579b; /* Dark blue text */
}

#quiz-result h3 {
    color: #0277bd; /* Dark blue */
    margin-bottom: 15px;
    font-size: 1.8em;
}

#quiz-result p {
    font-size: 1.3em;
    margin-bottom: 25px;
    font-weight: 600;
}

#quiz-result span {
    font-weight: 800;
    color: #004d40; /* Dark cyan */
}


.hidden {
    display: none;
}

/* Add styles for disabled buttons during quiz */
.answer-button:disabled {
    opacity: 0.6; /* Make them look disabled */
    cursor: default;
}