body {
    font-family: 'Tiro Devanagari Hindi', serif;
    background-color: #f5efdc; /* Parchment-like color for the page background */
    color: #3a2d27; /* Dark brown, like old ink, for default text */
    margin: 0;
    padding: 4px; /* Padding around the entire page */
    /* line-height: 2.2; Removed for more specific control */
}
.container {
    max-width: 800px; /* Limits the width of the content */
    margin: 40px auto; /* Centers the container on the page */
    padding: 30px 40px; /* Padding inside the container */
    background-color: #fdf5e6; /* Lighter parchment for the content area */
    border: 2px solid #d2b48c; /* Tan border, like an old page edge */
    box-shadow: 0 0 15px rgba(0,0,0,0.2); /* Subtle shadow to lift the container */
    border-radius: 16px; /* Slightly rounded corners */
}
h1, h2 {
    text-align: center;
    color: #5a3d2b; /* Richer brown for headers */
    line-height: 1.4; /* Adjusted line height for headings */
    margin-bottom: 1em;
}
h1 {
    font-size: 2.5em;
    margin-top: 0;
}
h2 {
    font-size: 1.8em;
    margin-top: 0.5em;
    margin-bottom: 1.5em; /* Space below subtitle before shlokas */
}

.shloka {
    display: flex; /* Aligns number and text block side-by-side */
    align-items: baseline; /* Aligns baseline of number with first line of text */
    margin-bottom: 2em; /* Space between shlokas */
    padding: 10px 15px; /* Padding inside the shloka block */
    border-bottom: 3px solid #8B4513; /* SaddleBrown, for a manuscript accent */
    border-right: 3px solid #8B4513; /* SaddleBrown, for a manuscript accent */
    background-color: #faf6f0; /* Slightly off-white, distinct from container */
    border-radius: 16px; /* Rounded corners on the right side of the border */
}

.shloka-number {
    display: block;
    font-weight: bold;
    color: #704214; /* Darker, richer brown for numbers */
    font-size: 1.4em; /* Make numbers prominent */
    line-height: 2; /* Match with shloka-line's line-height for baseline alignment */
    margin-right: 0.7em; /* Space between number and the text block */
    min-width: 1.5em; /* Ensures alignment for 1-digit vs 2-digit numbers (e.g., १ vs १०) */
    text-align: right; /* Aligns numbers to the right within their allocated space */
}

.shloka-main-content { /* New wrapper for title and text block */
    flex-grow: 1; /* Allows the text block to take up remaining space */
}

.shloka-title {
    font-size: 1.4em; /* Relative to shloka block */
    color: #7d5a44;    /* A manuscript title color, less prominent than shloka text */
    margin-bottom: 0.5em; /* Space between title and shloka text */
    font-weight: normal; /* Tiro Devanagari has good intrinsic weight */
    line-height: 1.5;   /* Readability for title */
    text-align: left;
    font-style: italic; /* Differentiate title from shloka text */
}
.shloka-title a {
    color: inherit; /* Inherit the color from .shloka-title */
    text-decoration: none; /* Remove default underline */
    border-bottom: 1px dashed #704214; /* A slightly darker, richer brown for the underline */
    padding-bottom: 1px; /* Small space for the underline */
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.shloka-title a:hover {
    color: #5a3d2b; /* Darken text on hover */
    border-bottom-color: #5a3d2b; /* Darken underline on hover */
}


.shloka-line {
    font-size: 1.4em; /* Readable size for shloka text */
    color: #4a3c33; /* Main text color for shlokas */
    margin-bottom: 0.4em; /* Space between the two lines of a single shloka */
    line-height: 1.8; /* Adjusted for better readability with spans */
}
.shloka-translation {
    display: none; /* Initially hidden */
    font-size: 1.2em;
    color: #5a4e44; /* Slightly muted text for translation */
    line-height: 1.7;
    margin-top: 0.8em; /* Space above translation */
    padding: 10px 15px;
    border-radius: 8px;
    background-color: #f0e9e1; /* A very light background for the translation */
}

/* Styles for clickable spans within the translation popup to make them appear as plain text */
.info-popup-translation .clickable-number-code,
.info-popup-translation .clickable-planet,
.info-popup-translation .clickable-term { /* Added clickable-term */
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    color: inherit !important; /* Inherit color from the popup text */
    cursor: default !important;
    text-decoration: none !important;
    pointer-events: none !important; /* Make them non-interactive in translation popup */
}
.clickable-planet, .clickable-number-code, .clickable-term {
    cursor: pointer;
    position: relative; /* For potential pseudo-elements if needed later */
}

.clickable-planet {
    color: #2a4b7c; /* A deep celestial blue */
    text-decoration: underline dotted #2a4b7c;
    background-color: #2a4b7c11;
}

.clickable-number-code {
    background-color: #efe8d9; /* Very light parchment highlight */
    padding: 0 2px;
    border-radius: 3px;
    border-bottom: 1px dashed #8B4513; /* SaddleBrown dashed underline */
}
/* Style for clickable-term (can be same as number-code or different) */
.clickable-term {
    color: #006400; /* Dark green for terms */
    text-decoration: underline dotted #006400;
    background-color: #00640011; /* Light green highlight */
}


#info-popup {
    position: absolute;
    display: none;
    background-color: #fdf5e6;
    border: 1px solid #d2b48c;
    padding: 24px ;
    border-radius: 6px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.15);
    z-index: 1000;
    font-size: 1.1em;
    color: #3a2d27;
    word-wrap: break-word;
}

.toggle-translation-button {
    display: block;
    margin: 15px auto 5px auto; /* Centered with some margin */
    padding: 8px 18px;
    background-color: #8B4513; /* SaddleBrown */
    color: #fdf5e6; /* Light text */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Tiro Devanagari Hindi', serif;
    font-size: 0.95em;
    transition: background-color 0.2s ease;
}
.toggle-translation-button:hover {
    background-color: #704214; /* Darker brown */
}
.shloka-line:last-child {
    margin-bottom: 0; /* No bottom margin for the second line within a shloka */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    body {
        padding: 0px; /* Reduce body padding */
    }
    .container {
        margin: 20px auto; /* Reduce top/bottom margin */
        padding: 20px 15px; /* Reduce padding inside container */
        border-radius: 8px; /* Slightly smaller radius */
    }
    h1 {
        font-size: 2em; /* Smaller H1 */
    }
    h2 {
        font-size: 1.5em; /* Smaller H2 */
        margin-bottom: 1em;
    }
    .shloka {
        padding: 8px 10px; /* Reduce padding inside shloka block */
        margin-bottom: 1.5em;
    }
    .shloka-line, .shloka-title, .shloka-number {
        font-size: 1.2em; /* Adjust font size for shloka content */
    }
    #info-popup {
        padding: 15px; /* Smaller padding for popup */
        font-size: 1em;
    }
}