/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #2c3e50;
    --accent-color: #e67e22;
    --dark-footer: #1a252f; /* Footer ke liye dark color */
    --light-bg: #f4f4f4;
    --text-color: #333;
}

body {
    font-family: "Poppins", sans-serif;
    background-color: var(--light-bg);
    color: var(--text-color);
}

body.urdu-mode {
    font-family: "Noto Nastaliq Urdu", serif;
    direction: rtl;
    text-align: right;
}

/* Navbar */
.navbar {
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky; /* Sticky navbar */
    top: 0;
    z-index: 1000;
}

.logo {
    /* Purani settings */
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    display: flex;
    align-items: center;

    /* Nayi settings (Image aur text ke liye) */
    gap: 12px; /* Icon aur Text ke darmiyan faasla */
    text-decoration: none; /* Agar link ho to underline khatam */
    cursor: pointer;
}

/* Icon (Image) ka size set karne ke liye yeh add karein */
.logo-icon {
    height: 45px; /* Navbar ke hisaab se height */
    width: auto; /* Width khud adjust ho */
    object-fit: contain; /* Image pichke gi nahi */
}

/* Text ko align karne ke liye */
.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.logo span span {
    color: var(--accent-color);
}
.logo-ur {
    display: none;
}
body.urdu-mode .logo-en {
    display: none;
}
body.urdu-mode .logo-ur {
    display: block;
    font-family: "Noto Nastaliq Urdu", serif;
    font-size: 1.4rem;
    margin-top: -8px;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
}
.nav-links a {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 500;
    transition: 0.3s;
}
.nav-links a:hover {
    color: var(--accent-color);
}
.btn-upload {
    background: var(--primary-color);
    color: #fff !important;
    padding: 5px 12px;
    border-radius: 4px;
}
.lang-btn {
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
}
.menu-toggle {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Slider */
.full-slider {
    width: 100%;
    position: relative;
    height: auto;
    overflow: hidden;
}
.slide {
    display: none;
    width: 100%;
}
.slide img {
    width: 100%;
    height: auto;
    display: block;
}
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}
@keyframes fade {
    from {
        opacity: 0.6;
    }
    to {
        opacity: 1;
    }
}
.dots-container {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}
.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 4px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: inline-block;
    transition: 0.3s;
}
.active-dot,
.dot:hover {
    background-color: #fff;
}

/* --- NEW: ABOUT SECTION --- */
.about-section {
    background: #fff;
    border-radius: 10px;
    margin-top: 30px;
    padding: 40px !important;
}
.about-content {
    display: flex;
    gap: 40px;
    align-items: center;
}
.about-img img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 10px 10px 0px var(--accent-color);
}
.about-text {
    flex: 1;
}
/* RTL support for about */
body.urdu-mode .about-img img {
    box-shadow: -10px 10px 0px var(--accent-color);
}
body.urdu-mode .section-title {
    text-align: right !important;
}

/* Books Grid */
.container {
    padding: 30px 5%;
}
.section-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.8rem;
    color: var(--primary-color);
    position: relative;
    display: inline-block;
    width: 100%;
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}
.book-card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}
.book-card:hover {
    transform: translateY(-3px);
}
.book-cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: #ddd;
}
.book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.book-info {
    padding: 10px;
    text-align: center;
}
.book-info h3 {
    font-size: 0.9rem;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.btn-read {
    display: inline-block;
    padding: 4px 12px;
    background: var(--accent-color);
    color: #fff;
    text-decoration: none;
    border-radius: 15px;
    font-size: 0.8rem;
}

/* Blog Section */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.blog-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}
.blog-card:hover {
    transform: translateY(-5px);
}
.blog-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.blog-content {
    padding: 20px;
}
.blog-content h3 {
    margin-bottom: 10px;
    color: var(--primary-color);
}
.read-more {
    display: inline-block;
    margin-top: 15px;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: bold;
}

/* Projects Section */
.projects-section {
    background-color: #e9ecef;
    margin-top: 40px;
    border-radius: 10px;
}
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.project-card {
    background: #fff;
    padding: 30px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: 0.3s;
    border: 1px solid transparent;
}
.project-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-5px);
}
.project-card i {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 15px;
}
.project-card h3 {
    margin-bottom: 10px;
    color: var(--primary-color);
}

/* --- AWESOME FOOTER STYLES --- */
.footer-area {
    background-color: var(--dark-footer);
    color: #bbb;
    padding-top: 50px;
    margin-top: 50px;
}
.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    padding: 0 5% 40px 5%;
}
.footer-col h3 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.2rem;
    position: relative;
}
.footer-col h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 50px;
    height: 2px;
    background: var(--accent-color);
}
/* RTL support for Footer heading underline */
body.urdu-mode .footer-col h3::after {
    left: auto;
    right: 0;
}

.footer-col ul {
    list-style: none;
}
.footer-col ul li {
    margin-bottom: 10px;
}
.footer-col ul li a {
    color: #bbb;
    text-decoration: none;
    transition: 0.3s;
}
.footer-col ul li a:hover {
    color: var(--accent-color);
    padding-left: 5px;
}
.footer-col ul li i {
    margin-right: 10px;
    color: var(--accent-color);
}
body.urdu-mode .footer-col ul li a:hover {
    padding-left: 0;
    padding-right: 5px;
}
body.urdu-mode .footer-col ul li i {
    margin-right: 0;
    margin-left: 10px;
}

.social-links {
    margin-top: 20px;
}
.social-links a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    margin-right: 10px;
    border-radius: 50%;
    text-decoration: none;
    transition: 0.3s;
}
.social-links a:hover {
    background: var(--accent-color);
}

.newsletter-box {
    margin-top: 15px;
    display: flex;
}
.newsletter-box input {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 4px 0 0 4px;
    outline: none;
}
.newsletter-box button {
    padding: 10px 15px;
    background: var(--accent-color);
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
}
body.urdu-mode .newsletter-box input {
    border-radius: 0 4px 4px 0;
}
body.urdu-mode .newsletter-box button {
    border-radius: 4px 0 0 4px;
}

.footer-bottom {
    background: #111;
    padding: 15px;
    text-align: center;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 900px) {
    .books-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .about-content {
        flex-direction: column;
        text-align: center;
    }
    .about-text h2 {
        text-align: center !important;
    }
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #fff;
        position: absolute;
        top: 60px;
        left: 0;
        padding: 20px;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    }
    .nav-links.active {
        display: flex;
    }
    .menu-toggle {
        display: block;
    }
}
@media (max-width: 600px) {
    .books-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- ABOUT PAGE STYLES --- */

/* Page Header (Grey Banner) */
.page-header {
    background: var(--primary-color);
    color: #fff;
    text-align: center;
    padding: 60px 20px;
}
.page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}
.page-header p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Biography Layout */
.about-full {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    padding: 60px 5%;
}

.bio-image-large {
    flex: 1;
    position: relative;
}
.bio-image-large img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 15px 15px 0px var(--accent-color); /* Stylish border */
    object-fit: cover;
}
/* Urdu mode mein shadow doosri taraf ho */
body.urdu-mode .bio-image-large img {
    box-shadow: -15px 15px 0px var(--accent-color);
}

.bio-content-large {
    flex: 1.5; /* Text area thora bara ho */
}
.bio-content-large h2 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}
.bio-content-large h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: var(--accent-color);
    margin-top: 5px;
}
.bio-content-large h3 {
    margin-top: 20px;
    color: var(--primary-color);
    font-size: 1.4rem;
}

/* Stats Counter Section */
.stats-section {
    background: var(--accent-color);
    color: #fff;
    padding: 50px 5%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 20px;
}
.stat-box i {
    font-size: 2.5rem;
    margin-bottom: 10px;
    opacity: 0.8;
}
.stat-box h3 {
    font-size: 2.5rem;
    font-weight: bold;
}
.stat-box p {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Mission Grid */
.mission-section {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
}
.mission-box {
    background: #fff;
    padding: 30px;
    flex: 1;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-top: 4px solid var(--accent-color);
}
.mission-box i {
    font-size: 2rem;
    color: var(--accent-color);
    margin-bottom: 15px;
}
.mission-box h3 {
    margin-bottom: 10px;
    color: var(--primary-color);
}

/* Mobile Responsiveness for About Page */
@media (max-width: 768px) {
    .about-full {
        flex-direction: column;
    }
    .bio-image-large img {
        width: 100%;
        box-shadow: 10px 10px 0px var(--accent-color);
    }
    .mission-section {
        flex-direction: column;
    }
    .stats-section {
        flex-direction: column;
    }
}

/* --- CONTACT PAGE STYLES --- */

.contact-container {
    display: flex;
    gap: 30px;
    padding: 60px 5%;
}

/* Contact Info Box */
.contact-info {
    flex: 1;
    background: var(--primary-color);
    color: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.contact-info h2 {
    font-size: 2rem;
    margin-bottom: 15px;
}
.contact-info p {
    margin-bottom: 30px;
    opacity: 0.9;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}
.info-item i {
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-right: 15px;
    width: 30px;
    text-align: center;
}
.info-item h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
}
.info-item p {
    margin-bottom: 0;
    font-size: 0.95rem;
}

/* RTL Adjustment for Contact Info */
body.urdu-mode .info-item i {
    margin-right: 0;
    margin-left: 15px;
}

.social-links-contact {
    margin-top: 40px;
}
.social-links-contact a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    margin-right: 10px;
    border-radius: 5px;
    text-decoration: none;
    transition: 0.3s;
}
.social-links-contact a:hover {
    background: var(--accent-color);
}

/* Contact Form */
.contact-form {
    flex: 1.5;
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.contact-form h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: "Poppins", sans-serif;
    outline: none;
    transition: 0.3s;
}
.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 5px rgba(230, 126, 34, 0.2);
}

/* Button */
.btn-submit {
    background: var(--accent-color);
    color: #fff;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: 0.3s;
}
.btn-submit:hover {
    background: #d35400;
    transform: translateY(-2px);
}

/* Map Section */
.map-section {
    width: 100%;
    margin-top: -20px; /* Thora sa merge karne ke liye */
    margin-bottom: -50px; /* Footer ke sath gap khatam karne ke liye */
    filter: grayscale(
        100%
    ); /* Map ko black & white shade dene ke liye (Professional look) */
    transition: 0.3s;
}
.map-section:hover {
    filter: grayscale(0%);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }
    .contact-info,
    .contact-form {
        padding: 25px;
    }
}

/* --- SINGLE BLOG LAYOUT (8 vs 4) --- */

/* Main Wrapper for Flexbox */
.blog-layout {
    display: flex;
    gap: 40px; /* Space between main content and sidebar */
    align-items: flex-start; /* Top se align kare */
}

/* LEFT COLUMN (The 8 parts) */
.blog-main-content {
    flex: 2; /* Yeh hissa double width lega (approx 66%) */
    width: 100%; /* Ensure it fills space */
}

/* RIGHT COLUMN (The 4 parts) */
.blog-sidebar {
    flex: 1; /* Yeh hissa single width lega (approx 33%) */
    position: sticky; /* Sticky sidebar for professional look */
    top: 100px;
}

/* Related Post Items Styling */
.recent-post-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}
.recent-post-item:last-child {
    border-bottom: none;
}

.recent-post-item img {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    object-fit: cover;
}

.recent-post-item a {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    display: block;
    margin-bottom: 5px;
    transition: 0.3s;
}
.recent-post-item a:hover {
    color: var(--accent-color);
}
.recent-post-item span {
    font-size: 0.8rem;
    color: #999;
}

/* Widget Styles (Reuse from previous, ensure these exist) */
.widget {
    background: #fff;
    padding: 25px;
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.widget h3 {
    margin-bottom: 20px;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
    display: inline-block;
    font-size: 1.2rem;
    color: var(--primary-color);
}

/* Comments adjustments */
.comments-section {
    margin-top: 40px; /* Thora gap main article se */
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .blog-layout {
        flex-direction: column; /* Mobile par upar neechay ho jayen */
    }
    .blog-sidebar {
        width: 100%;
        position: static; /* Mobile par sticky na ho */
    }
}

/* Search Widget Fix */
.search-widget {
    display: flex;
    padding: 0; /* Padding remove ki taake input full aye */
    border: 1px solid #eee; /* Border add kiya */
    overflow: hidden;
}
.search-widget input {
    flex: 1;
    border: none;
    padding: 15px;
    outline: none;
    font-family: inherit;
}
.search-widget button {
    background: var(--accent-color);
    color: #fff;
    border: none;
    padding: 0 20px;
    cursor: pointer;
    transition: 0.3s;
}
.search-widget button:hover {
    background: var(--primary-color);
}

/* Categories List Styling */
.cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cat-list li {
    border-bottom: 1px solid #f0f0f0;
    padding: 12px 0;
}
.cat-list li:last-child {
    border-bottom: none;
}

.cat-list li a {
    text-decoration: none;
    color: #555;
    display: flex;
    justify-content: space-between; /* Text left, number right */
    align-items: center;
    font-weight: 500;
    transition: 0.3s;
}
.cat-list li a span {
    background: #f4f4f4;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    color: #888;
}
.cat-list li a:hover {
    color: var(--accent-color);
    padding-left: 5px;
}
/* Urdu mode hover adjustment */
body.urdu-mode .cat-list li a:hover {
    padding-left: 0;
    padding-right: 5px;
}

/* --- FIX: FOLLOW US (Social Icons) --- */
.social-links-contact {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.social-links-contact a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #f4f4f4;
    color: #555;
    border-radius: 5px;
    text-decoration: none;
    transition: 0.3s ease;
    font-size: 1.1rem;
}
.social-links-contact a:hover {
    background: var(--accent-color);
    color: #fff;
    transform: translateY(-3px);
}

/* --- FIX: COMMENTS SECTION DETAILS --- */
/* Comment Item */
.comment {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 25px;
    margin-bottom: 25px;
}
.comment img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-color); /* Image border */
}
.comment-body h4 {
    margin: 0 0 5px;
    color: var(--primary-color);
    font-weight: 700;
}
.comment-body p {
    margin: 0;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
}

/* Comment Form */
.comment-form {
    margin-top: 40px;
    background: #f9f9f9;
    padding: 25px;
    border-radius: 10px;
}
.comment-form h4 {
    margin-bottom: 15px;
    color: var(--primary-color);
}
.comment-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 15px;
    outline: none;
}
.comment-form textarea:focus {
    border-color: var(--accent-color);
}
.btn-submit {
    background: var(--accent-color);
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}
.btn-submit:hover {
    background: var(--primary-color);
}

/* =========================================
   BLOG LISTING PAGE STYLES (blog.html) - MISSING PART
   ========================================= */

/* Main Wrapper that holds Grid and Sidebar */
.blog-wrapper {
    display: flex;
    gap: 40px;
    padding: 60px 5%;
    align-items: flex-start;
}

/* Left Side: Blog Grid Container */
.blog-main {
    flex: 2.5; /* Takes approx 70% width */
    width: 100%;
}

/* Right Side: Sidebar (Specific to blog.html) */
.sidebar {
    flex: 1; /* Takes approx 30% width */
    position: sticky;
    top: 100px;
}

/* 2-Column Grid for Posts */
.blog-grid-page {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 items per row */
    gap: 30px;
}

/* Date Styling inside cards */
.blog-date {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 5px;
    display: block;
    font-weight: 500;
}

/* Pagination (1, 2, 3 Next) */
.pagination {
    margin-top: 50px;
    text-align: center;
}
.pagination a {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid #ddd;
    margin: 0 5px;
    color: var(--primary-color);
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
    font-weight: 600;
}
.pagination a.active,
.pagination a:hover {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}
.pagination a i {
    font-size: 0.9rem;
}

/* Mobile Responsive for Blog Listing */
@media (max-width: 900px) {
    .blog-wrapper {
        flex-direction: column; /* Stack on mobile */
    }
    .sidebar {
        width: 100%;
        margin-top: 40px;
        position: static;
    }
    .blog-grid-page {
        grid-template-columns: 1fr; /* 1 item per row on mobile */
    }
}

/* =========================================
   BOOK READING PAGE STYLES (MISSING PART)
   ========================================= */

.reader-layout {
    display: flex;
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 20px;
    gap: 40px;
    align-items: flex-start;
}

/* --- MAIN READING AREA --- */
.reader-content {
    flex: 3;
    background: #fff;
    padding: 50px;
    border-radius: 5px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
}

.reader-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f4f4f4;
    padding-bottom: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}
.reader-header h1 {
    font-size: 1.8rem;
    color: var(--primary-color);
}

/* Language Toggle Buttons */
.content-toggle {
    display: flex;
    align-items: center;
}
.btn-toggle {
    background: #f4f4f4;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: 600;
    color: #555;
    border-radius: 4px;
    transition: 0.3s;
    border: 1px solid #ddd;
    margin-left: 5px;
}
.btn-toggle:hover {
    background: #ddd;
}
.btn-toggle.active {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

/* --- BOOK TEXT STYLING --- */
.book-text {
    min-height: 400px;
}

.book-text p {
    margin-bottom: 20px;
    color: #2c3e50;
    text-align: justify;
}

/* English Typography */
.english-font {
    font-family: "Merriweather", serif;
    font-size: 1rem;
    line-height: 1.8;
}

/* Urdu Typography */
.urdu-font {
    font-family: "Noto Nastaliq Urdu", serif;
    font-size: 1.15rem;
    line-height: 2.2;
    text-align: right;
    direction: rtl;
}
.urdu-font h3 {
    margin-bottom: 20px;
}

/* Chapter Navigation */
.chapter-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.nav-btn {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}
.nav-btn:hover {
    background: var(--accent-color);
}

/* --- SIDEBAR STYLING --- */
.reader-sidebar {
    flex: 1;
    position: sticky;
    top: 100px;
}

.book-meta-card {
    background: #fff;
    padding: 30px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}
.book-meta-card img {
    width: 120px;
    height: auto;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;
}
.book-meta-card h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: var(--primary-color);
}
.book-meta-card .author-name {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.btn-download {
    background: #27ae60;
    color: #fff;
    border: none;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
}
.btn-download:hover {
    background: #219150;
}

/* Table of Contents */
.toc-widget {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.toc-widget h3 {
    margin-bottom: 15px;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 5px;
    display: inline-block;
    font-size: 1.1rem;
}
.toc-list {
    list-style: none;
    padding: 0;
}
.toc-list li {
    border-bottom: 1px solid #f9f9f9;
}
.toc-list li a {
    display: block;
    padding: 10px 5px;
    text-decoration: none;
    color: #555;
    font-size: 0.95rem;
    transition: 0.2s;
}
.toc-list li a:hover,
.toc-list li a.active-chapter {
    color: var(--accent-color);
    background: #fff8f3;
    padding-left: 10px;
    font-weight: 600;
}
body.urdu-mode .toc-list li a:hover {
    padding-left: 0;
    padding-right: 10px;
}

/* Responsive Reader */
@media (max-width: 900px) {
    .reader-layout {
        flex-direction: column-reverse;
    }
    .reader-sidebar {
        width: 100%;
        position: static;
    }
    .reader-content {
        padding: 20px;
    }
    .reader-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Jab body par urdu-mode class ho, to button ke andar bhi Urdu font lagay */
body.urdu-mode .btn-download {
    font-family: "Noto Nastaliq Urdu", serif !important;
    font-size: 0.8rem; /* Urdu font thora chhota lagta hai, is liye size barhaya */
    line-height: 1.5;
    padding: 8px 20px; /* Padding adjust ki taake text katay na */
}

/* Agar span ke andar specific font chahiye */
body.urdu-mode .btn-download span {
    font-family: "Noto Nastaliq Urdu", serif !important;
}

/* --- FIX: CHAPTER NAVIGATION URDU FONT --- */

body.urdu-mode .nav-btn {
    font-family: "Noto Nastaliq Urdu", serif !important;
    font-size: 0.7rem; /* Font thora bara kiya taake parha jaye */
    padding: 10px 25px;
    font-weight: bold;
}

/* Optional: Agar aap chahte hain ke RTL mein arrows bhi ghoom jayen */
body.urdu-mode .nav-btn .fa-arrow-left {
    transform: rotate(180deg);
}
body.urdu-mode .nav-btn .fa-arrow-right {
    transform: rotate(180deg);
}

/* Jab Urdu mode on ho to "Read in" ka font aur margin set karein */
body.urdu-mode .content-toggle span {
    font-family: "Noto Nastaliq Urdu", serif !important;
    font-size: 1.1rem;

    /* Inline style ka margin-right khatam kar ke left par lagayen */
    margin-right: 0 !important;
    margin-left: 10px;
}

/* --- NEW SECTION 1: QUOTE BANNER STYLE --- */
.quote-banner {
    position: relative;
    /* Agar koi real image ho to wo lagayen */
    padding: 80px 20px;
    text-align: center;
    color: #fff;
    margin: 50px 0;
    background-attachment: fixed; /* Parallax Effect */
}

.quote-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 62, 80, 0.85); /* Dark Overlay */
}

.quote-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.quote-content i {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 20px;
}

.quote-content h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.quote-content blockquote {
    font-size: 1.8rem;
    font-style: italic;
    font-family: "Georgia", serif;
    line-height: 1.6;
}

.quote-author {
    margin-top: 20px;
    font-size: 1.2rem;
    color: var(--accent-color);
    font-weight: bold;
}

/* Urdu Font Adjustment for Quote */
body.urdu-mode .quote-content blockquote {
    font-family: "Noto Nastaliq Urdu", serif;
    line-height: 2;
}

/* --- NEW SECTION 2: EVENTS SECTION STYLE --- */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.event-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid #eee;
    transition: 0.3s;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-color);
}

.event-date {
    background: var(--primary-color);
    color: #fff;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    min-width: 80px;
}

.event-date .day {
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1;
}

.event-date .month {
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-top: 5px;
}

.event-details {
    flex: 1;
}

.event-details h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: var(--primary-color);
}

.event-details p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.4;
}

.event-details .location {
    font-size: 0.85rem;
    color: var(--accent-color);
    font-weight: 600;
}

.btn-join {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
    white-space: nowrap;
}

.btn-join:hover {
    background: var(--primary-color);
    color: #fff;
}

/* Mobile Responsive for Events */
@media (max-width: 600px) {
    .event-card {
        flex-direction: column;
        text-align: center;
    }
    .btn-join {
        width: 100%;
        text-align: center;
    }
}

/* --- VIDEO GALLERY STYLES --- */
.video-section {
    padding: 50px 5%;
    background: #fff; /* White background to clean up */
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.video-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.video-frame {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio maintain karne ke liye */
    height: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.video-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-card h3 {
    margin-top: 15px;
    font-size: 1.1rem;
    color: var(--primary-color);
    text-align: center;
}

/* --- NEWSLETTER CTA STRIP STYLES --- */
.newsletter-cta {
    background:
        linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9)),
        url("/frontend/images/img02.jpg") center/cover;
    padding: 80px 20px;
    text-align: center;
    color: #fff;
    margin-top: 50px;
}

.cta-content {
    max-width: 700px;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #fff; /* Force white text */
}

.cta-content p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.cta-form {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.cta-form input {
    padding: 15px;
    width: 60%;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    outline: none;
}

.cta-form button {
    padding: 15px 30px;
    background: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    transition: 0.3s;
}

.cta-form button:hover {
    background: #d35400; /* Darker Orange */
    transform: scale(1.05);
}

/* Mobile Responsive for Newsletter */
@media (max-width: 600px) {
    .cta-form {
        flex-direction: column;
    }
    .cta-form input {
        width: 100%;
    }
    .cta-form button {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .comment-box form div {
        flex-direction: column; /* Inputs upar neechay ho jayen */
    }
}

/* --- FIX: VERTICAL SPACING FOR Q&A WIDGET --- */

.qa-widget-box {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    border: 1px solid #eee;

    margin-top: 30px; /* Upar walay element se faasla */
    margin-bottom: 30px; /* Yeh zaroori hai: Neechay walay widget se faasla */
}
.qa-widget-box h3 {
    margin-bottom: 10px;
    color: var(--primary-color);
}
.qa-widget-box p {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 20px;
}

.btn-qa {
    background: var(--accent-color);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    width: 100%;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.btn-qa:hover {
    background: var(--primary-color);
}
/* Urdu Font for Button */
body.urdu-mode .btn-qa span {
    font-family: "Noto Nastaliq Urdu", serif !important;
}

/* --- MODAL STYLES --- */
.modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2000; /* Sab se upar */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Black background with opacity */
    overflow-y: auto; /* Agar modal bara ho to scroll ho */
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 30px;
    border: 1px solid #888;
    width: 90%;
    max-width: 600px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: slideDown 0.4s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.modal-header h2 {
    margin: 0;
    color: var(--primary-color);
}
.close-modal {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}
.close-modal:hover {
    color: red;
}

/* --- ACCORDION STYLES --- */
.qa-item {
    border-bottom: 1px solid #f0f0f0;
}
.qa-item:last-child {
    border-bottom: none;
}

.qa-question {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 15px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s;
}
.qa-question:hover {
    color: var(--accent-color);
}
.qa-question.active {
    color: var(--accent-color);
}
.qa-question i {
    transition: 0.3s;
}
.qa-question.active i {
    transform: rotate(45deg);
}

.qa-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0;
}
.qa-answer p {
    padding-bottom: 15px;
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Urdu Mode Tweaks */
body.urdu-mode .qa-question {
    text-align: right;
}
body.urdu-mode .modal-header h2,
body.urdu-mode .qa-question span,
body.urdu-mode .qa-answer p {
    font-family: "Noto Nastaliq Urdu", serif;
}
body.urdu-mode .qa-question i {
    margin-right: auto;
    margin-left: 0;
}

/* =========================================
   AUDIO BOOKS LISTING STYLES
   ========================================= */

/* Filters */
.audio-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.audio-filters button {
    padding: 8px 20px;
    border: 1px solid var(--accent-color);
    background: transparent;
    color: var(--accent-color);
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}
.audio-filters button.active,
.audio-filters button:hover {
    background: var(--accent-color);
    color: #fff;
}

/* Audio Grid */
.audio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.audio-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: 0.3s;
    text-align: center;
}
.audio-card:hover {
    transform: translateY(-5px);
}

.audio-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1; /* Square Image */
    overflow: hidden;
}
.audio-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}

/* Play Overlay on Hover */
.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.3s;
}
.audio-card:hover .play-overlay {
    opacity: 1;
}
.play-overlay a {
    color: #fff;
    font-size: 3rem;
    background: var(--accent-color);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.audio-info {
    padding: 20px;
}
.audio-info h3 {
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}
.audio-info p {
    color: #777;
    font-size: 0.9rem;
    margin-bottom: 15px;
}
.btn-listen {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.9rem;
    transition: 0.3s;
}
.btn-listen:hover {
    background: var(--primary-color);
    color: #fff;
}

/* =========================================
   AUDIO SINGLE PLAYER PAGE STYLES
   ========================================= */

.player-container {
    display: flex;
    max-width: 1000px;
    margin: 40px auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    align-items: center;
    padding: 40px;
    gap: 50px;
}

/* Left: Cover */
.player-cover-area {
    flex: 1;
    text-align: center;
}
.disk-cover img {
    width: 100%;
    max-width: 300px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
}
.player-cover-area h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
}

/* Right: Controls */
.player-controls-area {
    flex: 1.5;
    width: 100%;
}

.custom-player {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 30px;
    text-align: center;
}

.progress-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
    font-weight: bold;
    color: #666;
}
.progress-wrapper input[type="range"] {
    flex: 1;
    accent-color: var(--accent-color); /* Orange Slider */
    cursor: pointer;
}

.controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.controls button {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #555;
    cursor: pointer;
    transition: 0.3s;
}
.controls button.play-main {
    width: 60px;
    height: 60px;
    background: var(--accent-color);
    color: #fff;
    border-radius: 50%;
    font-size: 1.5rem;
    box-shadow: 0 5px 15px rgba(230, 126, 34, 0.4);
}
.controls button:hover {
    transform: scale(1.1);
    color: var(--accent-color);
}
.controls button.play-main:hover {
    color: #fff;
    transform: scale(1.1);
}

/* Playlist */
.playlist-widget h3 {
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}
.track-list {
    list-style: none;
    padding: 0;
    max-height: 250px;
    overflow-y: auto;
}
.track-list li {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #f4f4f4;
    cursor: pointer;
    transition: 0.2s;
    border-radius: 5px;
}
.track-list li:hover,
.track-list li.active-track {
    background: #fff8f3; /* Light Orange */
}
.track-list li.active-track .track-info h4 {
    color: var(--accent-color);
}

.track-num {
    font-weight: bold;
    color: #ccc;
    margin-right: 15px;
}
.track-info {
    flex: 1;
}
.track-info h4 {
    margin: 0;
    font-size: 0.95rem;
    color: #333;
}
.track-info span {
    font-size: 0.8rem;
    color: #888;
}
.track-list li i {
    opacity: 0;
    color: var(--accent-color);
}
.track-list li:hover i,
.track-list li.active-track i {
    opacity: 1;
}

/* Responsive */
@media (max-width: 900px) {
    .player-container {
        flex-direction: column;
        text-align: center;
    }
    .player-controls-area {
        width: 100%;
    }
}

/* --- AUDIO PLAYER MAIN CONTENT STYLES --- */
.custom-player-ui {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #f0f0f0;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.02);
}

.audio-visualizer img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 30px;
    opacity: 0.8;
}

.controls-main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 20px;
}

.ctrl-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #555;
    cursor: pointer;
    transition: 0.3s;
}
.ctrl-btn:hover {
    color: var(--accent-color);
    transform: scale(1.1);
}

.play-big {
    width: 70px;
    height: 70px;
    background: var(--accent-color);
    color: #fff;
    border-radius: 50%;
    font-size: 1.8rem;
    box-shadow: 0 5px 20px rgba(230, 126, 34, 0.4);
}
.play-big:hover {
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(230, 126, 34, 0.6);
}

/* Live Badge */
.live-badge {
    background: #ffeb3b;
    color: #333;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.pulse {
    width: 8px;
    height: 8px;
    background: red;
    border-radius: 50%;
    animation: pulse-anim 1s infinite;
}
@keyframes pulse-anim {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Playlist Styling in Sidebar */
.track-list li {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    transition: 0.3s;
}
.track-list li:hover,
.track-list li.active-track {
    color: var(--accent-color);
    background: #fff8f3;
    padding-left: 15px;
}
.track-num {
    font-weight: bold;
    color: #ccc;
    margin-right: 10px;
}

/* --- FIX: AUDIO FILTERS URDU FONT --- */
body.urdu-mode .audio-filters button {
    font-family: "Noto Nastaliq Urdu", serif !important;
    font-size: 1rem; /* Font size thora barhaya taake parha jaye */
    padding-bottom: 5px; /* Urdu text thora neeche hota hai, usay balance karne ke liye */
}

/* =========================================
   GALLERY PAGE STYLES
   ========================================= */

/* Filters (Reuse Audio Filters style base) */
.gallery-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    margin-top: 40px;
    flex-wrap: wrap;
}
.gallery-filters button {
    padding: 8px 25px;
    border: 2px solid var(--accent-color);
    background: transparent;
    color: var(--accent-color);
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}
.gallery-filters button.active,
.gallery-filters button:hover {
    background: var(--accent-color);
    color: #fff;
}

/* Album Grid */
.album-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding-bottom: 50px;
}

.album-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: 0.3s;
}
.album-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.album-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.album-thumb {
    position: relative;
    height: 200px;
    overflow: hidden;
}
.album-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}
.album-card:hover .album-thumb img {
    transform: scale(1.1);
}

.album-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.3s;
}
.album-card:hover .album-overlay {
    opacity: 1;
}
.album-overlay i {
    font-size: 2.5rem;
    color: #fff;
}

.album-details {
    padding: 20px;
}
.album-date {
    font-size: 0.85rem;
    color: #888;
    display: block;
    margin-bottom: 5px;
}
.album-details h3 {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}
.album-details p {
    color: var(--accent-color);
    font-weight: bold;
    font-size: 0.9rem;
}

/* =========================================
   SINGLE GALLERY PAGE STYLES
   ========================================= */

.album-header {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}
.btn-back {
    display: inline-block;
    text-decoration: none;
    color: #555;
    margin-bottom: 15px;
    font-weight: 500;
    transition: 0.3s;
}
.btn-back:hover {
    color: var(--accent-color);
}
/* Urdu mode back button */
body.urdu-mode .btn-back .fa-arrow-left {
    transform: rotate(180deg);
}

.album-header h1 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}
.album-meta {
    color: #777;
}

/* Photo Grid */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    padding-bottom: 60px;
}
.photo-item {
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    height: 300px; /* Fixed height for clean grid */
}
.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s;
}
.photo-item:hover img {
    transform: scale(1.05);
    filter: brightness(0.9);
}

/* =========================================
   LIGHTBOX MODAL STYLES
   ========================================= */
.lightbox {
    display: none;
    position: fixed;
    z-index: 2000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.lightbox-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 800px;
    max-height: 80vh; /* Screen se bara na ho */
    object-fit: contain;
    border: 3px solid #fff;
    border-radius: 5px;
    animation: zoom 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.close-lightbox {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}
.close-lightbox:hover {
    color: var(--accent-color);
}

@media only screen and (max-width: 700px) {
    .lightbox-content {
        width: 95%;
    }
}

/* =========================================
   AUTHENTICATION PAGES STYLES
   ========================================= */

/* Background Image for Auth Pages */
.auth-body {
    background:
        linear-gradient(rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.8)),
        url("https://placehold.co/1920x1080/2c3e50/000?text=Library+Background")
            no-repeat center center/cover;
    height: 100vh;
    overflow: hidden; /* Scroll khatam karne ke liye */
}

/* Back to Home Button */
.back-home-btn {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 5px;
    transition: 0.3s;
}
.back-home-btn:hover {
    background: #f4f4f4;
    color: var(--accent-color);
}

/* Center Container */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 80px); /* Navbar height minus karke */
    padding: 20px;
    margin-top: 35px;
}

/* Card Style */
.auth-card {
    background: #fff;
    width: 100%;
    max-width: 400px;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-card h2 {
    color: var(--primary-color);
    margin-bottom: 5px;
}
.auth-card p {
    color: #777;
    font-size: 0.9rem;
    margin-bottom: 30px;
}

/* Input Fields */
.input-group {
    position: relative;
    margin-bottom: 20px;
}
.input-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}
.input-group input {
    width: 100%;
    padding: 12px 12px 12px 40px; /* Icon ke liye jagah */
    border: 1px solid #ddd;
    border-radius: 5px;
    outline: none;
    transition: 0.3s;
}
.input-group input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 5px rgba(230, 126, 34, 0.2);
}

/* Form Options (Remember me etc) */
.form-options {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 20px;
    align-items: center;
}
.forgot-link {
    color: var(--accent-color);
    text-decoration: none;
}
.forgot-link:hover {
    text-decoration: underline;
}

/* Buttons */
.btn-auth {
    width: 100%;
    padding: 12px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}
.btn-auth:hover {
    background: var(--accent-color);
}

/* Divider */
.auth-divider {
    margin: 20px 0;
    position: relative;
}
.auth-divider::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #eee;
    z-index: 0;
}
.auth-divider span {
    background: #fff;
    padding: 0 10px;
    position: relative;
    z-index: 1;
    color: #888;
    font-size: 0.8rem;
}

/* Social Login */
.social-login {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.social-login button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.3s;
}
.btn-google {
    background: #db4437;
}
.btn-google:hover {
    background: #c1351d;
}
.btn-facebook {
    background: #4267b2;
}
.btn-facebook:hover {
    background: #365899;
}

/* Auth Footer */
.auth-footer {
    font-size: 0.9rem;
    margin-top: 10px;
}
.auth-footer a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
}
.auth-footer a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 500px) {
    .auth-card {
        padding: 25px;
    }
    .social-login {
        flex-direction: column;
    }
}

/* --- NAVBAR ACTION BUTTONS --- */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Buttons ke darmiyan faasla */
    margin-left: 20px;
}

/* Login Link Style (Simple Text) */
.auth-link {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.95rem;
    transition: 0.3s;
}
.auth-link:hover {
    color: var(--accent-color);
}

/* Sign Up Button Style (Highlighted) */
.auth-btn {
    text-decoration: none;
    background: var(--accent-color);
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px; /* Pill Shape */
    font-size: 0.9rem;
    font-weight: 600;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(230, 126, 34, 0.2);
}
.auth-btn:hover {
    background: #d35400; /* Thora dark orange hover par */
    transform: translateY(-2px);
    color: #fff;
}

/* Urdu Mode Font Fixes */
body.urdu-mode .auth-link,
body.urdu-mode .auth-btn {
    font-family: "Noto Nastaliq Urdu", serif;
    padding-bottom: 5px; /* Text balance karne ke liye */
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .nav-actions {
        display: none; /* Mobile par filhal hide karein ya menu mein move karein */
        /* Agar mobile par bhi dikhana hai to 'display: flex' rakhein lekin size chhota karein */
    }

    /* Mobile Menu ke andar dikhane ke liye JS logic change karni paregi, 
       filhal asaan hal ye hai ke hum isay mobile menu ke andar alag se add kar dein 
       agar aap chahein. */
}

/* =========================================
   SHOP & CHECKOUT STYLES
   ========================================= */

/* Shop Layout */
.shop-layout {
    display: flex;
    gap: 30px;
    margin-top: 40px;
}
.shop-sidebar {
    flex: 1;
    display: none; /* Mobile par hide */
}
.shop-main {
    flex: 3;
}

/* Desktop Sidebar Visible */
@media (min-width: 900px) {
    .shop-sidebar {
        display: block;
    }
}

/* Product Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.product-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: 0.3s;
    text-align: center;
    border: 1px solid #eee;
    padding-bottom: 15px;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.product-link {
    text-decoration: none;
    color: inherit;
}

.product-img {
    position: relative;
    height: 320px;
    overflow: hidden;
}
.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e74c3c;
    color: #fff;
    padding: 3px 10px;
    font-size: 0.8rem;
    border-radius: 3px;
}

.product-info {
    padding: 15px;
}
.product-info h3 {
    font-size: 1rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}
.price {
    color: var(--accent-color);
    font-weight: bold;
}
.old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 0.85rem;
    margin-right: 5px;
}

.btn-add-cart {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: 0.3s;
}
.btn-add-cart:hover {
    background: var(--accent-color);
}

/* Cart Icon in Navbar */
.cart-icon {
    position: relative;
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-right: 15px;
    text-decoration: none;
}
.cart-icon .badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--accent-color);
    color: #fff;
    font-size: 0.7rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- SINGLE PRODUCT PAGE --- */
.product-detail-container {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}
.product-gallery {
    flex: 1;
}
.main-img img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
    border: 1px solid #eee;
}
.thumb-list {
    display: flex;
    gap: 10px;
}
.thumb-list img {
    width: 80px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 5px;
    opacity: 0.7;
}
.thumb-list img:hover {
    opacity: 1;
    border-color: var(--accent-color);
}

.product-summary {
    flex: 1.2;
}
.product-summary h1 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}
.price-large {
    font-size: 1.5rem;
    color: var(--accent-color);
    font-weight: bold;
    margin: 15px 0;
}
.product-desc {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}

.product-meta {
    list-style: none;
    margin-bottom: 20px;
    padding: 0;
}
.product-meta li {
    margin-bottom: 5px;
    color: #555;
}

.cart-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}
.qty-input {
    width: 60px;
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.btn-buy {
    flex: 1;
    background: var(--accent-color);
    color: #fff;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}
.btn-add-cart-outline {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}
.btn-add-cart-outline:hover {
    background: var(--primary-color);
    color: #fff;
}

/* Tabs */
.product-tabs {
    margin-top: 50px;
}
.tabs-header {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}
.tabs-header button {
    background: none;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    color: #555;
    border-bottom: 3px solid transparent;
}
.tabs-header button.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
    font-weight: bold;
}

/* --- CHECKOUT PAGE --- */
.checkout-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    margin-top: 30px;
}
.billing-form input,
.billing-form select,
.billing-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 15px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.order-summary-box {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 10px;
    border: 1px solid #eee;
}
.order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.order-table td,
.order-table th {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    text-align: left;
}
.order-table th {
    color: var(--primary-color);
}
.total-row td {
    border-bottom: none;
    font-size: 1.1rem;
    color: var(--accent-color);
}

.btn-place-order {
    width: 100%;
    padding: 15px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
}
.btn-place-order:hover {
    background: #1a252f;
}

/* Responsive Shop */
@media (max-width: 900px) {
    .product-detail-container,
    .checkout-grid {
        flex-direction: column;
        grid-template-columns: 1fr;
    }
}

/* =========================================
   DASHBOARD STYLES
   ========================================= */

.dashboard-layout {
    display: flex;
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 50px;
}

/* Sidebar */
.dash-sidebar {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 20px;
    height: fit-content;
    position: sticky;
    top: 100px;
}

.user-profile-card {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}
.user-profile-card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 10px;
    border: 3px solid var(--accent-color);
}
.user-profile-card h3 {
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}
.user-profile-card p {
    font-size: 0.85rem;
    color: #888;
}

.dash-nav {
    list-style: none;
    padding: 0;
}
.dash-nav li {
    margin-bottom: 5px;
}
.dash-nav li a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    color: #555;
    text-decoration: none;
    border-radius: 8px;
    transition: 0.3s;
    font-weight: 500;
}
.dash-nav li a:hover,
.dash-nav li a.active {
    background: #e67e2220; /* Light Orange */
    color: var(--accent-color);
}
.dash-nav li.logout a:hover {
    background: #ffebee;
    color: #e74c3c;
}

/* Main Content */
.dash-content {
    flex: 3;
}
.dash-header {
    margin-bottom: 30px;
}
.dash-header h1 {
    font-size: 1.8rem;
    color: var(--primary-color);
}
.dash-header p {
    color: #777;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.stat-card {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    gap: 20px;
}
.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}
.stat-info h3 {
    font-size: 1.5rem;
    margin: 0;
    color: #333;
}
.stat-info p {
    margin: 0;
    color: #888;
    font-size: 0.9rem;
}

/* Section Styles */
.dash-section {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    margin-bottom: 30px;
}
.section-heading {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--primary-color);
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* Current Read Card */
.current-read-card {
    display: flex;
    gap: 20px;
    align-items: center;
}
.current-read-card img {
    width: 60px;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}
.read-info {
    flex: 1;
}
.read-info h4 {
    margin: 0 0 5px;
    font-size: 1.1rem;
}
.read-info p {
    margin: 0 0 10px;
    color: #777;
    font-size: 0.9rem;
}

.progress-bar-container {
    background: #eee;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 5px;
}
.progress-fill {
    background: var(--accent-color);
    height: 100%;
}
.progress-text {
    font-size: 0.8rem;
    color: #888;
    display: block;
    margin-bottom: 10px;
}
.btn-resume {
    background: var(--primary-color);
    color: #fff;
    padding: 5px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85rem;
}

/* Table */
.dash-table {
    width: 100%;
    border-collapse: collapse;
}
.dash-table th {
    text-align: left;
    padding: 12px;
    background: #f8f9fa;
    color: #555;
}
.dash-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
}
.badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
}
.badge.success {
    background: #e8f5e9;
    color: #2e7d32;
}
.badge.warning {
    background: #fff3e0;
    color: #ef6c00;
}
.btn-view {
    background: none;
    border: 1px solid #ddd;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    color: #555;
}

/* Responsive Dashboard */
@media (max-width: 900px) {
    .dashboard-layout {
        flex-direction: column;
    }
    .dash-sidebar {
        position: static;
    }
}

/* =========================================
   404 ERROR PAGE STYLES
   ========================================= */
.error-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 50px 20px;
}
.error-content {
    max-width: 600px;
}
.error-code {
    font-size: 8rem;
    font-weight: bold;
    color: #eee;
    margin: 0;
    line-height: 1;
}
.error-content h2 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-top: -30px;
    margin-bottom: 20px;
}
.error-illustration {
    font-size: 5rem;
    color: var(--accent-color);
    margin-bottom: 30px;
    animation: float 3s ease-in-out infinite;
}
.error-content p {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 40px;
}
.btn-home {
    background: var(--primary-color);
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}
.btn-home:hover {
    background: var(--accent-color);
    transform: translateY(-3px);
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* --- FIX: USER MENU ALIGNMENT --- */
.user-menu {
    display: flex;
    align-items: center; /* Yeh text ko image ke bilkul center mein lay aye ga */
    gap: 10px; /* Image aur Text ke darmiyan faasla */
    margin-right: 15px; /* Language button se faasla */
}

/* Image ko bhi fix kar dein taake wo hamesha gol rahay */
.user-menu img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ddd; /* Optional: Border acha lagta hai */
}

/* =========================================
   FAQ PAGE STYLES
   ========================================= */

/* Header Search Box */
.faq-search-box {
    margin-top: 20px;
    position: relative;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.faq-search-box input {
    width: 100%;
    padding: 15px 15px 15px 45px;
    border-radius: 30px;
    border: none;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    outline: none;
}
.faq-search-box i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

/* FAQ Layout */
.faq-section {
    max-width: 900px !important; /* Thora narrow rakha taake parhne mein asaan ho */
    margin-bottom: 60px;
    margin-top: 40px;
}

.faq-category {
    margin-bottom: 40px;
}
.faq-category h2 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    display: inline-block;
}

/* Accordion Styling */
.faq-item {
    background: #fff;
    border: 1px solid #eee;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    transition: 0.3s;
}
.faq-item:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 20px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s;
}

.faq-question:hover,
.faq-question.active {
    background: #fcfcfc;
    color: var(--accent-color);
}

.faq-question i {
    transition: 0.3s;
    font-size: 0.9rem;
}
.faq-question.active i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #fff;
}
.faq-answer p {
    padding: 0 20px 20px 20px;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* Urdu Alignment */
body.urdu-mode .faq-question {
    text-align: right;
    flex-direction: row-reverse; /* Arrow left side par */
}
body.urdu-mode .faq-question i {
    margin-right: 0;
    margin-left: 10px; /* Urdu mein icon aur text ka faasla */
}

/* =========================================
   SEARCH RESULTS PAGE STYLES
   ========================================= */

/* Search Header */
.search-header-area {
    background: #fff;
    padding: 40px 0;
    border-bottom: 1px solid #eee;
    text-align: center;
}
.search-label {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 10px;
}
.result-count {
    font-size: 0.9rem;
    color: var(--accent-color);
    margin-top: 10px;
    font-weight: 600;
}

.big-search-box {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}
.big-search-box input {
    width: 100%;
    padding: 15px 20px;
    font-size: 1.1rem;
    border: 2px solid #eee;
    border-radius: 50px;
    outline: none;
    transition: 0.3s;
}
.big-search-box input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 5px 15px rgba(230, 126, 34, 0.1);
}
.big-search-box button {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    width: 50px;
    border-radius: 50%;
    border: none;
    background: var(--primary-color);
    color: #fff;
    cursor: pointer;
    font-size: 1.1rem;
    transition: 0.3s;
}
.big-search-box button:hover {
    background: var(--accent-color);
}

/* Tabs */
.search-tabs {
    display: flex;
    gap: 15px;
    margin: 30px 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0;
}
.search-tabs button {
    background: none;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    color: #555;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: 0.3s;
}
.search-tabs button:hover,
.search-tabs button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

/* Results Grid */
.search-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.result-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    gap: 25px;
    align-items: flex-start;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
    transition: 0.3s;
    border: 1px solid transparent;
}
.result-card:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    border-color: #eee;
}

/* Thumbnails */
.result-thumb {
    position: relative;
    flex-shrink: 0;
}
.result-thumb img {
    border-radius: 5px;
    display: block;
}
.book-type .result-thumb img {
    width: 100px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.audio-type .result-thumb img {
    width: 100px;
    border-radius: 10px;
}
.blog-type .result-thumb img {
    width: 150px;
    height: 100px;
    object-fit: cover;
}

/* Type Badge */
.type-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
}
.type-badge.audio {
    background: #e67e22;
}
.type-badge.blog {
    background: #27ae60;
}

/* Info Area */
.result-info {
    flex: 1;
}
.result-info h3 {
    margin: 0 0 5px;
    font-size: 1.2rem;
    color: var(--primary-color);
}
.result-info .meta {
    color: #888;
    font-size: 0.85rem;
    margin-bottom: 10px;
}
.result-info .desc {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Buttons */
.result-actions {
    display: flex;
    gap: 10px;
}
.btn-primary-sm {
    background: var(--accent-color);
    color: #fff;
    padding: 6px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85rem;
    transition: 0.3s;
}
.btn-primary-sm:hover {
    background: #d35400;
}

.btn-outline-sm {
    border: 1px solid #ddd;
    color: #555;
    padding: 6px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85rem;
    transition: 0.3s;
}
.btn-outline-sm:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-text {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}
.btn-text:hover {
    text-decoration: underline;
}

/* Responsive Search */
@media (max-width: 600px) {
    .result-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .result-thumb {
        margin-bottom: 15px;
    }
    .result-actions {
        justify-content: center;
    }
    .search-tabs {
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* =========================================
   VIDEO GALLERY STYLES
   ========================================= */

/* Video Grid (4 Columns) */
.video-grid {
    display: grid;
    /* Large screens par 4 columns, choti par kam */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}
/* Specifically forcing 4 columns on large screens if container allows */
@media (min-width: 1200px) {
    .video-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.video-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: 0.3s;
}
.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.video-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.video-thumb {
    position: relative;
    height: 180px;
    overflow: hidden;
}
.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}
.video-card:hover .video-thumb img {
    transform: scale(1.05);
}

/* Play Button Overlay */
.play-btn-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 1.2rem;
    border: 2px solid #fff;
    transition: 0.3s;
}
.video-card:hover .play-btn-overlay {
    background: #e74c3c;
    border-color: #e74c3c;
}

.vid-duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

.video-info {
    padding: 15px;
}
.video-info h3 {
    font-size: 1rem;
    margin: 0 0 5px;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vid-date {
    font-size: 0.8rem;
    color: #888;
}

/* =========================================
   SINGLE VIDEO PAGE STYLES
   ========================================= */

.video-watch-layout {
    display: flex;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 50px;
}

/* Left Content */
.video-main-content {
    flex: 2.5;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    background: #000;
    border-radius: 10px;
    margin-bottom: 20px;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-details-box {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #eee;
    margin-bottom: 20px;
}
.video-details-box h1 {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}
.vid-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666;
    font-size: 0.9rem;
}
.vid-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: #555;
    margin-left: 15px;
}
.vid-actions button:hover {
    color: var(--accent-color);
}
.vid-desc {
    color: #444;
    line-height: 1.6;
    font-size: 0.95rem;
    margin-top: 15px;
}

/* Sidebar */
.video-sidebar {
    flex: 1;
}
.video-sidebar h3 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: #333;
}

.side-video-item {
    display: flex;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    margin-bottom: 15px;
}
.side-thumb {
    position: relative;
    flex-shrink: 0;
    width: 160px;
    height: 90px;
}
.side-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}
.side-thumb .time {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 0.7rem;
    padding: 1px 4px;
    border-radius: 3px;
}

.side-info h4 {
    font-size: 0.9rem;
    margin: 0 0 5px;
    color: #333;
    line-height: 1.4;
}
.side-info span {
    display: block;
    font-size: 0.8rem;
    color: #777;
}

/* Responsive */
@media (max-width: 900px) {
    .video-watch-layout {
        flex-direction: column;
    }
    .side-video-item {
        margin-bottom: 20px;
    }
    .side-thumb {
        width: 140px;
        height: 80px;
    }
}

/* --- MOBILE MENU BUTTONS FIX --- */

/* Default: Desktop par Mobile waly buttons chupay rahen */
.mobile-only {
    display: none;
}

/* Mobile View Styles (Max Width 900px) */
@media (max-width: 900px) {
    /* 1. Desktop waly side buttons chhupa dein */
    .nav-actions {
        display: none;
    }

    /* 2. Mobile waly buttons menu ke andar dikhayen */
    .mobile-only {
        display: block;
        width: 100%;
        text-align: center;
        margin: 10px 0;
    }

    /* Divider Line */
    .mobile-only.divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.2); /* Halki si line */
        margin: 15px 0;
    }

    /* Style for Links in Mobile Menu */
    .mobile-only a {
        background: rgba(255, 255, 255, 0.1);
        padding: 10px;
        border-radius: 5px;
        display: block;
        margin: 0 auto;
        width: 80%; /* Thora chhota button */
    }

    /* Mobile Language Button Style */
    .mobile-lang-btn {
        background: var(--accent-color);
        color: #fff;
        border: none;
        padding: 10px 30px;
        border-radius: 20px;
        font-size: 1rem;
        cursor: pointer;
        width: 80%;
        font-family: "Noto Nastaliq Urdu", serif;
    }
}

/* --- MOBILE MENU SCROLL FIX --- */
@media (max-width: 900px) {
    .nav-links {
        /* Agar content screen se bara ho to scroll karne de */
        overflow-y: auto !important;

        /* Menu ki height screen se thori kam rakhein taake neechay na chupay */
        max-height: 100vh !important;

        /* Neechay thori extra jagah chorein taake last button katay nahi */
        padding-bottom: 80px !important;

        /* Scrollbar ko smooth banaye */
        scrollbar-width: thin;
    }
}

/* =========================================
   DROPDOWN MENU STYLES (UPDATED)
   ========================================= */

/* Common Styles */
.dropdown-li {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none; /* Default Hidden */
    position: absolute;
    background-color: #fff;
    min-width: 180px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    top: 100%;
    left: 0;
    border-radius: 5px;
    padding: 10px 0;
    list-style: none;
}

.dropdown-content li {
    display: block;
    margin: 0;
}

/* --- DESKTOP VIEW (Hover System) --- */
@media (min-width: 901px) {
    /* Sirf Desktop par Hover se khulega */
    .dropdown-li:hover .dropdown-content {
        display: block;
        animation: fadeIn 0.3s ease;
    }

    .dropdown-content li a {
        color: #333 !important; /* Black Text */
        padding: 10px 20px;
        text-decoration: none;
        display: block;
        font-size: 0.95rem;
        transition: 0.3s;
    }

    .dropdown-content li a:hover {
        background-color: var(--accent-color);
        color: #fff !important;
        padding-left: 25px;
    }
}

/* --- MOBILE VIEW (Click System & Color Fix) --- */
@media (max-width: 900px) {
    /* Hover khatam kar diya, ab yeh class ane par khulega */
    .dropdown-content.show {
        display: block;
        position: static; /* Neechay shift ho jaye */
        box-shadow: none;
        background: rgba(
            0,
            0,
            0,
            0.2
        ); /* Thora dark background taake nazar aye */
        width: 100%;
        margin-top: 5px;
        padding: 0;
    }

    /* Links ka color White karein */
    .dropdown-content li a {
        color: #fff !important; /* White Text */
        padding: 10px 40px; /* Thora andar ki taraf indent */
        text-decoration: none;
        display: block;
        font-size: 0.9rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .dropdown-content li a:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    /* Arrow Icon Rotation when open */
    .dropdown-li.active .dropbtn i {
        transform: rotate(180deg);
        transition: 0.3s;
    }
}
/* =========================================
   BOOKS GRID (COVERS ONLY)
   ========================================= */

.books-cover-grid {
    display: grid;
    /* Desktop par 5 columns (1 line mein 5 books) */
    grid-template-columns: repeat(5, 1fr);
    gap: 20px; /* Books ke darmiyan faasla */
}

.book-cover-item {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Halka saya */
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    border: 1px solid transparent;
}

.book-cover-item img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 2 / 3; /* Book shape maintain karne ke liye */
    object-fit: cover;
}

/* Hover Effect (Mouse jane par thora uthay) */
.book-cover-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    border-color: var(--accent-color); /* Orange Border on Hover */
}

/* --- RESPONSIVE SETTINGS --- */

/* Tablet (1024px se neeche): 4 Books per row */
@media (max-width: 1200px) {
    .books-cover-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Small Tablet (768px se neeche): 3 Books per row */
@media (max-width: 900px) {
    .books-cover-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

/* Mobile (500px se neeche): 2 Books per row */
@media (max-width: 500px) {
    .books-cover-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* =========================================
   SINGLE BLOG POST STYLES (MISSING PART)
   ========================================= */

.blog-post-content {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
}

/* Meta Data (Date & Category) */
.post-meta {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 10px;
    display: flex;
    gap: 15px;
    align-items: center;
}
.post-meta .category {
    background: #f4f4f4;
    color: var(--accent-color);
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
}
.post-meta i {
    margin-right: 5px;
}

/* Title */
.post-title {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 25px;
    line-height: 1.3;
}

/* Featured Image */
.post-image {
    width: 100%;
    margin-bottom: 30px;
    border-radius: 10px;
    overflow: hidden;
}
.post-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Post Content Text */
.post-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 40px;
}
.post-text p {
    margin-bottom: 20px;
}

/* Blockquote Style */
.post-text blockquote {
    background: #fff8f3; /* Light Orange Tint */
    border-left: 5px solid var(--accent-color);
    margin: 30px 0;
    padding: 20px 30px;
    font-style: italic;
    font-size: 1.2rem;
    color: #555;
    font-family: "Georgia", serif;
}
/* Urdu Blockquote Alignment */
body.urdu-mode .post-text blockquote {
    border-left: none;
    border-right: 5px solid var(--accent-color);
    font-family: "Noto Nastaliq Urdu", serif;
}

/* Content List inside Post */
.content-list {
    margin: 20px 0 20px 20px;
}
.content-list li {
    margin-bottom: 10px;
    padding-left: 10px;
}
body.urdu-mode .content-list {
    margin: 20px 20px 20px 0;
}

/* Share Buttons Section */
.share-buttons {
    border-top: 1px solid #eee;
    padding-top: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.share-buttons span {
    font-weight: 600;
    color: var(--primary-color);
}
.share-buttons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
    font-size: 1rem;
}

/* Social Colors */
.share-buttons .fb {
    background: #3b5998;
}
.share-buttons .fb:hover {
    background: #2d4373;
    transform: translateY(-3px);
}

.share-buttons .tw {
    background: #1da1f2;
}
.share-buttons .tw:hover {
    background: #0c85d0;
    transform: translateY(-3px);
}

.share-buttons .wa {
    background: #25d366;
}
.share-buttons .wa:hover {
    background: #128c7e;
    transform: translateY(-3px);
}

/* Responsive Typography */
@media (max-width: 768px) {
    .post-title {
        font-size: 1.8rem;
    }
    .blog-post-content {
        padding: 20px;
    }
}

/* Cookie Consent Box */
.cookie-consent {
    position: fixed;
    bottom: 20px;
    left: 20px; /* Left side par fix */
    width: 340px;
    background: #1a1a1a; /* Dark background */
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 9999; /* Sab se upar dikhe */
    display: none; /* By default chupa rahega */
    animation: slideUp 0.5s ease-out;
    border-left: 5px solid #e67e22; /* Golden line for style */
}

/* Flexbox for Icon and Text */
.cookie-content {
    display: flex;
    align-items: start;
    gap: 15px;
    margin-bottom: 15px;
}

.cookie-icon {
    font-size: 24px;
    color: #e67e22; /* Golden color for cookie icon */
    margin-top: 2px;
}

.cookie-consent p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #e0e0e0;
}

/* Button Styling */
.cookie-btn {
    width: 100%;
    padding: 10px;
    background: #e67e22;
    color: #1a1a1a;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.cookie-btn:hover {
    background: #c58f5e;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .cookie-consent {
        left: 10px;
        right: 10px;
        width: auto; /* Mobile par full width */
        bottom: 10px;
    }
}

/* Animation */
@keyframes slideUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* =========================================
   BOTTOM TICKER STYLES
   ========================================= */

/* =========================================
   FLOATING TICKER WIDGET (FINAL FIXED)
   ========================================= */

.ticker-bar {
    position: fixed;
    bottom: 30px; /* Neechay se thora oper */
    right: 30px; /* Right side par (Hamesha yahan rahega) */
    left: auto;
    width: auto;

    background-color: rgba(26, 37, 47, 0.95);
    color: #fff;

    border-top: none;
    border-right: 5px solid var(--accent-color); /* Border Right side par hi rahega */
    border-radius: 8px;

    padding: 15px 25px;
    z-index: 9999;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    font-family: "Poppins", sans-serif;
    transition: 0.3s;
}

.ticker-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Text hamesha Right taraf align rahega */
    gap: 2px;
}

/* Time ko bara dikhayen */
#ticker-time {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--accent-color);
}

/* Dates ko chota dikhayen */
#ticker-date-gregorian,
#ticker-date-hijri {
    font-size: 0.8rem;
    color: #ccc;
}

.separator {
    display: none;
}

/* --- URDU MODE SETTINGS (UPDATED) --- */
body.urdu-mode .ticker-bar {
    /* Humne yahan se Right/Left change karne wala code HATA diya hai */
    /* Ab ye sirf Font change karega, Jagah change nahi karega */
    font-family: "Noto Nastaliq Urdu", serif;
    direction: rtl;
}

body.urdu-mode .ticker-content {
    align-items: flex-end; /* Urdu mein bhi text Right side par hi align rahe */
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 600px) {
    .ticker-bar {
        /* Mobile par wapis neechay full width */
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        border-radius: 0;
        border-right: none;
        border-top: 3px solid var(--accent-color);
        padding: 5px 10px;
        text-align: center;
    }

    .ticker-content {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    #ticker-time {
        font-size: 0.9rem;
        font-weight: bold;
    }

    #ticker-date-gregorian,
    #ticker-date-hijri {
        font-size: 0.75rem;
        display: inline-block;
    }

    .separator {
        display: inline;
        font-size: 0.8rem;
        opacity: 0.7;
    }
}

/* =========================================
   SETTINGS PAGE STYLES
   ========================================= */

/* Profile Upload Section */
.profile-upload-box {
    display: flex;
    align-items: center;
    gap: 30px;
}

.img-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.edit-icon {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: var(--accent-color);
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
    cursor: pointer;
    font-size: 0.9rem;
}

.upload-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-upload-photo {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: 0.3s;
}
.btn-upload-photo:hover {
    background: var(--accent-color);
}

.btn-delete-photo {
    background: transparent;
    border: 1px solid #e74c3c;
    color: #e74c3c;
    padding: 8px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
}
.btn-delete-photo:hover {
    background: #e74c3c;
    color: #fff;
}

.upload-hint {
    font-size: 0.8rem;
    color: #888;
    margin: 0;
}

/* Form Styling */
.settings-form {
    margin-top: 10px;
}

/* 2 Column Layout for Forms */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 5px rgba(230, 126, 34, 0.2);
}

/* Button Alignment */
.form-actions-right {
    text-align: right;
}

.btn-save {
    background: var(--accent-color);
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}
.btn-save:hover {
    background: #d35400;
    transform: translateY(-2px);
}

.btn-save.btn-dark {
    background: var(--primary-color);
}
.btn-save.btn-dark:hover {
    background: #1a252f;
}

/* Responsive Settings */
@media (max-width: 768px) {
    .profile-upload-box {
        flex-direction: column;
        text-align: center;
    }
    .form-grid-2 {
        grid-template-columns: 1fr; /* Mobile par single column */
    }
    .form-actions-right {
        text-align: center;
    }
    .btn-save {
        width: 100%;
    }
}

/* Urdu Alignment Fixes */
body.urdu-mode .form-actions-right {
    text-align: left; /* Urdu mein button left side par acha lagega */
}

/* =========================================
   ALERTS / NOTIFICATIONS STYLES
   ========================================= */

.alert {
    position: relative;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 8px; /* Thora golai mein */
    border-left-width: 5px; /* Left side moti line */
    display: flex;
    align-items: center;
    gap: 15px; /* Icon aur Text ka faasla */
    font-size: 0.95rem;
    line-height: 1.5;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); /* Halka saya */
    transition: 0.3s;
}

/* --- 1. SUCCESS (Green) --- */
.alert-success {
    background-color: #e8f5e9; /* Light Green */
    color: #2e7d32; /* Dark Green Text */
    border-color: #c8e6c9; /* Halka Border */
    border-left-color: #2e7d32; /* Mota Left Border */
}
/* Icon: Check Circle */
.alert-success::before {
    content: "\f058"; /* FontAwesome Code */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.2rem;
}

/* --- 2. DANGER / ERROR (Red) --- */
.alert-danger {
    background-color: #ffebee; /* Light Red */
    color: #c62828; /* Dark Red Text */
    border-color: #ffcdd2;
    border-left-color: #c62828;
}
/* Icon: Exclamation Circle */
.alert-danger::before {
    content: "\f06a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.2rem;
}

/* --- 3. WARNING (Orange/Yellow) --- */
.alert-warning {
    background-color: #fff3e0; /* Light Orange */
    color: #ef6c00; /* Dark Orange Text */
    border-color: #ffe0b2;
    border-left-color: #ef6c00;
}
/* Icon: Warning Triangle */
.alert-warning::before {
    content: "\f071";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.2rem;
}

/* --- 4. INFO (Blue) --- */
.alert-info {
    background-color: #e3f2fd; /* Light Blue */
    color: #0277bd; /* Dark Blue Text */
    border-color: #b3e5fc;
    border-left-color: #0277bd;
}
/* Icon: Info Circle */
.alert-info::before {
    content: "\f05a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.2rem;
}

/* --- CLOSE BUTTON (Optional) --- */
.alert .close-btn {
    margin-left: auto; /* Right side par bhejne ke liye */
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0.6;
    color: inherit; /* Jo text color ho wahi le le */
    transition: 0.3s;
}
.alert .close-btn:hover {
    opacity: 1;
}

/* --- URDU MODE SUPPORT (RTL) --- */
body.urdu-mode .alert {
    border-left-width: 1px; /* Left border wapis normal */
    border-right-width: 5px; /* Right border mota karein */

    /* Colors ko swap karne ki zaroorat nahi, bas border-style change hoga */
}

/* Urdu mein colors fix rahein, bas border side change ho */
body.urdu-mode .alert-success {
    border-right-color: #2e7d32;
    border-left-color: #c8e6c9;
}
body.urdu-mode .alert-danger {
    border-right-color: #c62828;
    border-left-color: #ffcdd2;
}
body.urdu-mode .alert-warning {
    border-right-color: #ef6c00;
    border-left-color: #ffe0b2;
}
body.urdu-mode .alert-info {
    border-right-color: #0277bd;
    border-left-color: #b3e5fc;
}

body.urdu-mode .alert .close-btn {
    margin-left: 0;
    margin-right: auto; /* Urdu mein left side par close button */
}