/* ====================================================
   FONTS IMPORT (Gemini / Professional Style)
   Includes: Roboto (Google Standard), Inter (Clean UI), Noto Sans Sinhala (Sinhala)
   ==================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&family=Noto+Sans+Sinhala:wght@300;400;500;600;700&display=swap');

/* Apply Global Font Family */
body, 
.ssd-dashboard-container, 
.ssd-sidebar, 
.ssd-main-content,
button, 
input, 
select, 
textarea {
    font-family: 'Roboto', 'Inter', 'Noto Sans Sinhala', sans-serif !important;
    -webkit-font-smoothing: antialiased; /* Make fonts look smoother like Mac/Gemini */
    -moz-osx-font-smoothing: grayscale;
}

/* Sidebar Specific Font Styles for "Gemini" Look */
.ssd-nav-group h3 {
    font-family: 'Roboto', 'Noto Sans Sinhala', sans-serif !important;
    font-weight: 700 !important; /* Bold headers */
    letter-spacing: 0.5px;
}

.ssd-nav-item span {
    font-family: 'Roboto', 'Inter', 'Noto Sans Sinhala', sans-serif !important;
    font-weight: 500; /* Semi-bold for navigation items */
    font-size: 0.95rem; /* Slightly larger text for readability */
}

/* --- Notices & Popups --- */
.ssd-notice-info {
    background-color: #1e3a8a; color: #eff6ff; border: 1px solid #3b82f6;
    padding: 1.5rem 2rem; border-radius: 8px; text-align: center;
    margin: 3rem auto; max-width: 800px; font-size: 1.1rem; font-weight: 500;
}
/* Toast/Popup Notification Styles */
#ssd-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.ssd-toast {
    background-color: #22c55e; /* Default success color */
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-bottom: 10px;
    opacity: 0;
    transform: translateX(110%);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.ssd-toast.show {
    opacity: 1;
    transform: translateX(0);
}
.ssd-toast.error {
    background-color: #ef4444; /* Red for errors */
}


/* --- Dashboard Layout --- */
.ssd-dashboard-container {
    display: flex;
    background-color: #111827;
    color: #d1d5db;
    /* FIX: Set a fixed height of the full viewport and hide overflow */
    height: 100vh;
    overflow: hidden;
}
.ssd-sidebar {
    width: 260px;
    background-color: #1f2937;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease-in-out;
    flex-shrink: 0;
}
.ssd-main-content {
    flex-grow: 1;
    padding: 2rem;
    /* FIX: This will now scroll independently of the sidebar */
    overflow-y: auto;
}
.ssd-tab-pane { display: none; }
.ssd-tab-pane.active { display: block; }
.ssd-mobile-header { display: none; }

/* --- Sidebar Styles --- */
.ssd-sidebar-header { text-align: center; padding-bottom: 1.5rem; border-bottom: 1px solid #374151; }
.ssd-sidebar-header .ssd-profile-photo {
    width: 80px; height: 80px; border-radius: 50%;
    margin: 0 auto 1rem; object-fit: cover; border: 3px solid #4b5563;
}
.ssd-sidebar-header h2 { margin: 0; font-size: 1.25rem; color: #fff; }
.ssd-sidebar-header p { margin: 0.25rem 0 0; color: #9ca3af; }
.ssd-nav {
    flex-grow: 1;
    margin-top: 1.5rem;
    /* FIX: Allow only the tab list to scroll if it's too long */
    overflow-y: auto;
}
.ssd-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Gap between icon and text */
    padding: 0.85rem 1rem;
    border-radius: 8px;
    color: #d1d5db;
    text-decoration: none;
    margin-bottom: 0.5rem;
    transition: background-color 0.2s, color 0.2s;
}
.ssd-nav-item:hover { background-color: #374151; }
.ssd-nav-item.active { background-color: #3b82f6; color: #fff; }
.ssd-sidebar-footer a {
    display: block; text-align: center; padding: 0.75rem;
    border-radius: 8px; background-color: #374151;
    color: #d1d5db; text-decoration: none;
}
/* New Label Style */
.ssd-new-label {
    background-color: #3b82f6;
    color: white;
    font-size: 0.6rem; /* Made smaller */
    font-weight: 700;
    padding: 2px 5px; /* Made smaller */
    border-radius: 4px;
    line-height: 1;
    margin-left: auto; /* Pushes the label to the far right */
}

/* --- Card & Content Styles --- */
.ssd-card { background-color: #1f2937; border-radius: 0.75rem; padding: 1.5rem 2rem; border: 1px solid #374151; margin-bottom: 1.5rem; }
.ssd-card-title { font-size: 1.5rem; font-weight: 700; color: #ffffff; margin-top: 0; margin-bottom: 1.5rem; }
.ssd-sub-title { font-size: 1.2rem; font-weight: 600; color: #e5e7eb; margin-top: 2rem; margin-bottom: 1rem; border-bottom: 1px solid #374151; padding-bottom: 0.5rem; }

/* Grids */
.ssd-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem 1.5rem; }
.ssd-details-grid div { background: #374151; padding: 0.75rem 1rem; border-radius: 6px; }
.ssd-ranks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }

.ssd-rank-box { background-color: #374151; padding: 1rem; border-radius: 0.5rem; text-align: center; }
.ssd-rank-box p { margin: 0 0 0.5rem 0; font-size: 0.875rem; color: #9ca3af; }
.ssd-rank-main { font-size: 1.875rem; font-weight: 800; color: #ffffff; }
.ssd-rank-island { font-size: 1.875rem; font-weight: 800; color: #22c55e; }
.ssd-rank-district { font-size: 1.875rem; font-weight: 800; color: #eab308; }

/* Edit Profile Form */
.ssd-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ssd-profile-edit-form label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #9ca3af; }
.ssd-profile-edit-form input, .ssd-profile-edit-form select {
    width: 100%; padding: 0.75rem; border-radius: 6px;
    border: 1px solid #4b5563; background-color: #374151; color: #d1d5db;
}
.ssd-subject-checkboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.ssd-button-update { background: #22c55e; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; margin-top: 1.5rem; font-weight: 600; transition: background-color 0.2s, opacity 0.2s; }
.ssd-button-update:disabled { background-color: #4b5563; border-color: #4b5563; color: #9ca3af; cursor: not-allowed; opacity: 0.7; }

/* Info notice inside a form */
.ssd-form-notice {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background-color: #374151;
    color: #facc15; /* Yellow for info */
    border-radius: 6px;
    text-align: center;
    font-size: 0.9rem;
    border: 1px solid #4b5563;
}

/* Rankers & Gifts */
.ssd-rankers-list { margin-top: 1.5rem; }
.ssd-inner-tabs { display: flex; background-color: #374151; border-radius: 0.5rem; padding: 0.25rem; margin-bottom: 1rem; }
.ssd-inner-tab-btn { flex: 1; padding: 0.5rem; border: none; background-color: transparent; color: #d1d5db; cursor: pointer; border-radius: 0.375rem; }
.ssd-inner-tab-btn.active { background-color: #3b82f6; color: white; }
.ssd-inner-tab-content { display: none; }
.ssd-inner-tab-content.active { display: block; }
.ssd-ranker-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0.25rem; border-bottom: 1px solid #374151; }
.rank-num { font-weight: 700; width: 2rem; text-align: center; }
.ranker-details { flex: 1; }
.ranker-details p { margin: 0; }
.ranker-details small { color: #9ca3af; }
.ranker-mark { font-weight: 700; color: #60a5fa; }
.ssd-gifts-list { display: flex; flex-direction: column; gap: 0.75rem; }
.ssd-gift-item { display: flex; justify-content: space-between; align-items: center; background-color: #374151; padding: 0.75rem 1rem; border-radius: 0.5rem; }
.ssd-enroll-btn { background-color: #3b82f6; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; text-decoration: none; }

/* Chart */
.ssd-chart-container { 
    margin-top: 2rem; 
    height: 350px;
    background-image: 
        linear-gradient(rgba(55, 65, 81, 0.5) 1px, transparent 1px),
        linear-gradient(to right, rgba(55, 65, 81, 0.5) 1px, transparent 1px);
    background-size: 20px 20px;
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 10px;
}

/* --- Professional All Classes Section - New UI --- */
.ssd-professional-classes-grid {
    display: grid;
    /* FIX: Reduced the minmax value to prevent overflow on smaller screens */
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    .ssd-dashboard-container { flex-direction: column; }
    .ssd-sidebar {
        position: fixed; top: 0; left: 0; height: 100%;
        z-index: 1000; transform: translateX(-100%);
        box-shadow: 5px 0 15px rgba(0,0,0,0.2);
    }
    .ssd-sidebar.open { transform: translateX(0); }
    .ssd-main-content { padding: 1rem; margin-top: 60px; }
    .ssd-mobile-header {
        display: flex; justify-content: space-between; align-items: center;
        padding: 0 1rem; height: 60px; background-color: #1f2937;
        position: fixed; top: 0; left: 0; right: 0;
        z-index: 999; border-bottom: 1px solid #374151;
    }
    .ssd-mobile-title { font-size: 1.2rem; color: #fff; margin: 0; }
    #ssd-mobile-menu-btn { background: none; border: none; color: #fff; cursor: pointer; padding: 0.5rem; }
    .ssd-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5); z-index: 998; display: none;
    }
    .ssd-overlay.active { display: block; }
    .ssd-card { padding: 1rem; }

    /* FIX: Display User Detail stat boxes in a 2x2 grid */
    #tab-details .ssd-ranks-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* FIX: Reduce font size for index number on mobile to prevent wrapping */
    .ssd-rank-box .ssd-rank-main {
        font-size: 1.5rem; /* Reduced font size further */
        word-break: keep-all; /* Prevents the number from breaking */
        white-space: nowrap;
    }
}

/* --- Quiz Section Styles --- */
.ssd-quiz-list { display: flex; flex-direction: column; gap: 1rem; }
.ssd-quiz-item {
    background-color: #374151;
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 5px solid #3b82f6;
}
.ssd-quiz-details h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    color: #ffffff;
}
.ssd-quiz-details p {
    margin: 0;
    display: flex;
    gap: 1.5rem;
    font-size: 0.9rem;
    color: #9ca3af;
}
.ssd-button-start-quiz {
    background-color: #22c55e;
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s;
}
.ssd-button-start-quiz:hover {
    background-color: #16a34a;
}
@media (max-width: 600px) {
    .ssd-quiz-item { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .ssd-quiz-details p { flex-direction: column; gap: 0.5rem; }
}

.ssd-quiz-action { text-align: right; }
.ssd-button-completed, .ssd-button-expired {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    font-weight: 600;
    background-color: #4b5563;
    color: #d1d5db;
    cursor: not-allowed;
}
.ssd-button-expired { background-color: #991b1b; }
.quiz-countdown {
    font-size: 0.85rem;
    font-weight: bold;
    color: #facc15; /* Yellow color */
    margin-top: 0.5rem;
    padding: 0.25rem 0;
}

@media (min-width: 1200px) {
    .ssd-professional-classes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.ssd-pro-class-card {
    background-color: #1f2937;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #374151;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ssd-pro-class-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.ssd-pro-class-header {
    height: 180px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #374151;
}
.ssd-pro-class-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.ssd-pro-class-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}
.ssd-pro-class-meta {
    font-size: 0.9rem;
    color: #9ca3af;
    margin: 0 0 1rem 0;
    display: flex;
    gap: 0.75rem;
}
.ssd-pro-class-meta span {
    background-color: #374151;
    padding: 3px 8px;
    border-radius: 4px;
}
.ssd-pro-class-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #374151;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ssd-pro-class-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
}
.ssd-pro-class-btn {
    background-color: #3b82f6;
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}
.ssd-pro-class-btn:hover {
    background-color: #2563eb;
}
.ssd-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    border: 2px dashed #374151;
    border-radius: 0.75rem;
    width: 100%;
    margin-top: 1.5rem;
}
.ssd-empty-state-icon { color: #4b5563; margin-bottom: 1rem; }
.ssd-empty-state h4 { font-size: 1.5rem; color: #ffffff; margin: 0 0 0.5rem 0; }
.ssd-empty-state p { color: #9ca3af; max-width: 450px; margin: 0 auto; }

/*
======================================================================
--- REFINED MODERN THEME FOR SINGLE CLASS VIEW (SEPTEMBER 12, 2025) ---
--- This replaces all previous single-class-view styles.           ---
======================================================================
*/

/* --- 1. The Main "Glass Box" Container --- */
.ssd-single-class-container {
    /* Apply Glassmorphism to the entire container */
    background: var(--ssd-bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--ssd-border-color);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    border-radius: 16px; /* A larger radius for a larger box */
    padding: 2rem; /* Add padding so content doesn't touch the edges */
    
    /* Keep the grid layout */
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 992px) {
    .ssd-single-class-container {
        grid-template-columns: 3fr 2fr;
    }
}


/* --- 2. Balancing the Content Inside the New Box --- */

/* (a) Base text size reduction for this view */
.ssd-single-class-view-wrapper {
    font-size: 80%;
}

/* (b) Re-balance Typography */
.ssd-class-main-title {
    font-size: 2.5rem; /* Slightly reduced for better balance inside the box */
    font-weight: 700;
    letter-spacing: -1px;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.ssd-class-tutor {
    font-size: 1.1rem;
    color: var(--ssd-text-secondary);
    margin-bottom: 1.5rem;
}

.ssd-class-tab-content {
    font-size: 1.05rem; /* Slightly adjusted for balance */
    line-height: 1.7;
    color: var(--ssd-text-secondary);
}

/* (c) Adjust the Nested Meta Grid */
.ssd-class-meta-grid {
    /* To avoid a "double-glass" effect, we make this a simpler, nested box */
    background: rgba(17, 24, 39, 0.5); /* A darker, less transparent background */
    border: 1px solid var(--ssd-border-color);
    border-radius: 12px;
    padding: 1.25rem;
    
    /* Remove the blur and shadow from this nested element */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.ssd-class-meta-grid strong {
    color: var(--ssd-text-primary);
    font-size: 1.2rem;
}
.ssd-class-meta-grid span {
    font-size: 0.9rem;
}

/* (d) Modernize Buttons and Tabs (styles remain similar) */
.ssd-join-button {
    background-color: var(--ssd-accent-color);
    color: var(--ssd-bg-dark);
    font-weight: 700;
    border-radius: 8px;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px -5px var(--ssd-accent-color);
    width: 100%;
    padding: 1rem;
    font-size: 1.2rem;
}

.ssd-join-button:hover {
    background-color: var(--ssd-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -5px var(--ssd-accent-color);
}
.ssd-join-button.pending { background-color: var(--ssd-yellow); box-shadow: 0 4px 15px -5px var(--ssd-yellow); }
.ssd-join-button.enrolled { background-color: var(--ssd-green); box-shadow: 0 4px 15px -5px var(--ssd-green); }

.ssd-class-tab-nav { border-bottom-color: var(--ssd-border-color); }
.ssd-class-tab-btn { color: var(--ssd-text-secondary); padding: 0.75rem 0; margin-right: 2rem; font-size: 1.1rem; }
.ssd-class-tab-btn.active { color: var(--ssd-accent-color); border-bottom-color: var(--ssd-accent-color); }

/* (e) Other elements */
.ssd-back-to-classes-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ssd-border-color);
    color: var(--ssd-text-primary);
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}
.ssd-back-to-classes-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: var(--ssd-accent-color);
}

/* Ensure the payment modal still has the glass effect */
.ssd-modal-content {
    background: var(--ssd-bg-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--ssd-border-color);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* --- Payment Modal Styles --- */
.ssd-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; display: flex; justify-content: center; align-items: center; }
.ssd-modal-content { background-color: #1f2937; padding: 2rem; border-radius: 12px; width: 90%; max-width: 500px; position: relative; border: 1px solid #374151; }
.ssd-modal-close { position: absolute; top: 15px; right: 20px; background: none; border: none; color: #9ca3af; font-size: 2rem; cursor: pointer; }
.ssd-bank-details { background-color: #374151; padding: 1rem; border-radius: 8px; margin: 1rem 0; line-height: 1.6; }
.ssd-form-group { margin-bottom: 1rem; }
.ssd-form-group label { display: block; margin-bottom: 0.5rem; color: #9ca3af; }
.ssd-form-group input[type="file"] { width: 100%; color: #d1d5db; background-color: #374151; border: 1px solid #4b5563; padding: 0.5rem; border-radius: 6px; }
.ssd-submit-receipt-btn { width: 100%; padding: 0.75rem; font-size: 1rem; font-weight: 700; color: #ffffff; background-color: #3b82f6; border: none; border-radius: 8px; cursor: pointer; }
.ssd-submit-receipt-btn:disabled { background-color: #4b5563; cursor: not-allowed; }

/* --- My Classes Section Styles --- */
.ssd-start-learning-btn {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #22c55e; /* Green color for Start */
    color: white;
    padding: 0.75rem 1.2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: background-color 0.2s;
}
.ssd-start-learning-btn:hover {
    background-color: #16a34a;
}

/* --- UPDATED Payment Modal & Bank Card Styles --- */
.ssd-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 24, 39, 0.8);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
.ssd-modal-content {
    background-color: #1f2937;
    padding: 1.5rem;
    border-radius: 12px;
    width: 100%;
    max-width: 550px;
    position: relative;
    border: 1px solid #374151;
}
.ssd-modal-content.compact h2 {
    font-size: 1.2rem;
    color: #3b82f6;
    margin-top: 0;
    text-align: center;
}
.ssd-modal-content.compact p {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-bottom: 1rem;
    text-align: center;
}
.ssd-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
}
.ssd-bank-details-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 1rem 0;
}
.bank-card {
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem; 
}
.bank-card:hover {
    background-color: #374151;
}
.bank-card.selected {
    border-color: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}
.bank-logo {
    max-height: 35px;
    width: auto;
    object-fit: contain;
}
.account-details {
    font-size: 0.7rem;
    line-height: 1.4;
    color: #d1d5db;
    text-align: center;
}
.account-details .bank-name {
    font-weight: bold;
    color: #ffffff;
    font-size: 0.8rem;
}
.account-details .account-number {
    font-weight: bold;
}
.account-details .account-name, .account-details .account-branch {
    font-size: 0.65rem;
    color: #9ca3af;
}
.ssd-form-group { margin-bottom: 1rem; }
.ssd-form-group label { display: block; margin-bottom: 0.5rem; color: #9ca3af; font-size: 0.8rem; }
.ssd-form-group input[type="file"] { width: 100%; color: #d1d5db; background-color: #374151; border: 1px solid #4b5563; padding: 0.5rem; border-radius: 6px; font-size: 0.8rem; }
.ssd-submit-receipt-btn { width: 100%; padding: 0.75rem; font-size: 1rem; font-weight: 700; color: #ffffff; background-color: #3b82f6; border: none; border-radius: 8px; cursor: pointer; }
.ssd-submit-receipt-btn:disabled { background-color: #4b5563; cursor: not-allowed; }
.ssd-form-status p { font-size: 0.8rem; margin-bottom: 0; }
.ssd-form-status p:last-child { margin-top: 0.5rem !important; }

.ssd-modal-content {
    font-size: 80%;
}

.ssd-modal-content h2 {
    color: #3b82f6;
}

/* Professional Study Summary Table Styles */
.ssd-summary-table-container {
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
}

.ssd-summary-table {
    width: 100%;
    border-collapse: collapse;
    color: #d1d5db;
}

.ssd-summary-table th,
.ssd-summary-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid #374151;
}

.ssd-summary-table thead th {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #4b5563;
}

.ssd-summary-table tbody tr {
    transition: background-color 0.2s ease-in-out;
}

.ssd-summary-table tbody tr:hover {
    background-color: #2b3748;
}

.ssd-summary-table tbody tr:last-child td {
    border-bottom: none;
}

.ssd-summary-table td:nth-child(1) {
    font-weight: 500;
    color: #e5e7eb;
}

.ssd-summary-table td:nth-child(2),
.ssd-summary-table td:nth-child(3) {
    font-family: monospace;
    font-weight: 700;
    font-size: 1.1rem;
    color: #a5b4fc;
    text-align: right;
}

.ssd-summary-table th:nth-child(2),
.ssd-summary-table th:nth-child(3) {
    text-align: right;
}

/* Chart Header and Controls */
.ssd-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.ssd-chart-header .ssd-sub-title {
    margin: 0;
}

.ssd-chart-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ssd-chart-controls label {
    font-weight: 500;
    color: #9ca3af;
}

.ssd-chart-controls select {
    background-color: #374151;
    color: #d1d5db;
    border: 1px solid #4b5563;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

.ssd-chart-container {
    margin-top: 0; 
}

/* --- My Offers Tab Styles --- */
.ssd-offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.ssd-offer-card {
    background-color: #2b3748;
    border: 1px solid #4b5563;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.offer-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
    min-height: 45px;
}

.offer-card-for {
    background-color: #374151;
    color: #d1d5db;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.offer-card-for span {
    color: #9ca3af;
}

.offer-card-price {
    margin-bottom: 1rem;
    margin-top: auto;
}

.offer-card-price .new-price {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    display: block;
}

.offer-card-price .original-price {
    text-decoration: line-through;
    color: #9ca3af;
    font-size: 1rem;
}

/* --- ADDED: Countdown Timer Style --- */
.offer-countdown {
    font-size: 0.9rem;
    font-weight: 600;
    color: #facc15; /* Yellow color */
    margin-bottom: 1.5rem;
    padding: 0.5rem;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    line-height: 1.4;
}

.redeem-offer-btn {
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    border: none;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.redeem-offer-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.redeem-offer-btn.primary {
    background-color: #eab308;
    color: #111827;
}

.redeem-offer-btn.secondary {
    background-color: #22c55e;
    color: #ffffff;
}

.redeem-offer-btn.disabled,
.redeem-offer-btn:disabled {
    background-color: #4b5563;
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.7;
}
.redeem-offer-btn.disabled:hover,
.redeem-offer-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}
.redeem-offer-btn.disabled.pending {
    background-color: #eab308;
    color: #111827;
    opacity: 0.8;
}

/* --- Single Class View Offer Highlight --- */
.ssd-class-meta-grid.has-offer {
    background-color: #facc15; /* Bright yellow */
    border: 2px solid #eab308;
}

.ssd-class-meta-grid.has-offer,
.ssd-class-meta-grid.has-offer span,
.ssd-class-meta-grid.has-offer strong {
    color: #1f2937;
}

.ssd-offer-notice-box {
    background-color: #374151;
    color: #facc15;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-top: -1rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 500;
}

/* --- Time Table Styles --- */
.ssd-pro-class-footer.dual-button {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.ssd-view-timetable-btn {
    background-color: #3b82f6;
    color: white;
    padding: 0.75rem 1.2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
    text-align: center;
    font-size: 1rem;
}

.ssd-view-timetable-btn:hover {
    background-color: #2563eb;
}

.ssd-view-pane {
    display: none;
}

.ssd-back-to-my-classes-btn {
    background: none;
    border: 1px solid #4b5563;
    color: #d1d5db;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 1.5rem;
    display: inline-block;
}

.ssd-back-to-my-classes-btn:hover {
    background-color: #374151;
}

.ssd-timetable-content-wrapper {
    width: 100%;
    height: 75vh;
    border: 1px solid #374151;
    border-radius: 8px;
    overflow: hidden;
}

.ssd-timetable-iframe {
    width: 100%;
    height: 100%;
}

/* --- Global Font Size Adjustment --- */

/* Reduce the base font size for the main content area by 20% */
.ssd-main-content {
    font-size: 80%;
}

/* Optional: After reducing the base size, we can slightly increase 
  the main titles to maintain a strong visual hierarchy. 
  This ensures titles still stand out.
*/
.ssd-card-title {
    font-size: 1.7rem; /* Original was 1.5rem, relative size is now larger */
}

.ssd-sub-title {
    font-size: 1.3rem; /* Original was 1.2rem, relative size is now larger */
}

/*
===============================================
--- ADVANCED & MODERN THEME OVERRIDE ---
Add this block to the end of your frontend-style.css
===============================================
*/

/* --- 1. Modern Color Palette & Root Variables --- */
:root {
    --ssd-bg-dark: #111827;       /* Deep dark blue/grey */
    --ssd-bg-card: rgba(31, 41, 55, 0.6); /* Semi-transparent card background */
    --ssd-border-color: rgba(75, 85, 99, 0.5);
    --ssd-text-primary: #e5e7eb;
    --ssd-text-secondary: #9ca3af;
    --ssd-accent-color: #38bdf8;   /* A vibrant light blue for accents */
    --ssd-accent-hover: #7dd3fc;
    --ssd-green: #34d399;
    --ssd-yellow: #f59e0b;
    --ssd-red: #f43f5e;
}

/* --- 2. Main Layout & Background --- */
body {
    background-color: var(--ssd-bg-dark);
}

.ssd-main-content {
    background: 
        radial-gradient(circle at 1% 1%, var(--ssd-accent-color), transparent 25%),
        radial-gradient(circle at 99% 99%, var(--ssd-accent-color), transparent 25%);
    background-color: var(--ssd-bg-dark);
    padding: 2.5rem;
}

/* --- 3. Glassmorphism Card Effect --- */
.ssd-card {
    background: var(--ssd-bg-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari */
    border: 1px solid var(--ssd-border-color);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    padding: 2rem;
    transition: all 0.3s ease;
}

.ssd-card:hover {
    transform: translateY(-5px);
    border-color: rgba(56, 189, 248, 0.6);
}

/* --- 4. Advanced Typography --- */
.ssd-card-title {
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #ffffff;
    border-bottom: 1px solid var(--ssd-border-color);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.ssd-sub-title {
    font-weight: 600;
    color: var(--ssd-text-primary);
}

/* --- 5. Sidebar Enhancements --- */
.ssd-sidebar {
    background-color: rgba(17, 24, 39, 0.8); /* Slightly more transparent */
    border-right: 1px solid var(--ssd-border-color);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.ssd-nav-item {
    color: var(--ssd-text-secondary);
    transition: all 0.2s ease-in-out;
}

.ssd-nav-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--ssd-text-primary);
}

.ssd-nav-item.active {
    background-color: var(--ssd-accent-color);
    color: var(--ssd-bg-dark);
    font-weight: 600;
}

.ssd-new-label {
    background-color: var(--ssd-red);
}

/* --- 6. Modern Form Elements & Buttons --- */
.ssd-button-update, .ssd-submit-receipt-btn, .ssd-pro-class-btn {
    background-color: var(--ssd-accent-color);
    color: var(--ssd-bg-dark);
    font-weight: 700;
    border-radius: 8px;
    padding: 0.8rem 1.5rem;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px -5px var(--ssd-accent-color);
}

.ssd-button-update:hover, .ssd-submit-receipt-btn:hover, .ssd-pro-class-btn:hover {
    background-color: var(--ssd-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -5px var(--ssd-accent-color);
}

.ssd-profile-edit-form input, .ssd-profile-edit-form select {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ssd-border-color);
}

.ssd-profile-edit-form input:focus, .ssd-profile-edit-form select:focus {
    border-color: var(--ssd-accent-color);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.3);
}

/* --- 7. Rank Box Polish --- */
.ssd-rank-box {
    background: transparent;
    border: 1px solid var(--ssd-border-color);
    transition: all 0.3s ease;
}
.ssd-rank-box:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--ssd-accent-color);
}

.ssd-rank-main, .ssd-rank-island, .ssd-rank-district {
    font-family: 'Inter', sans-serif; /* A modern font for numbers */
}

.ssd-rank-island { color: var(--ssd-green); }
.ssd-rank-district { color: var(--ssd-yellow); }

/* --- Global Font Size Adjustment --- */

/* Reduce the base font size for the main content area by 20% */
.ssd-main-content {
    font-size: 80%;
}

/* Optional: After reducing the base size, we can slightly increase 
  the main titles to maintain a strong visual hierarchy. 
  This ensures titles still stand out.
*/
.ssd-card-title {
    font-size: 1.7rem; /* Original was 1.5rem, relative size is now larger */
}

.ssd-sub-title {
    font-size: 1.3rem; /* Original was 1.2rem, relative size is now larger */
}

/* ===============================================
--- UI REFINEMENT - SEPTEMBER 12, 2025 ---
===============================================
*/

/* --- 1. Reduce Main Content Padding --- */
.ssd-main-content {
    padding: 1.5rem; /* Original was 2.5rem */
}

@media (max-width: 768px) {
    .ssd-main-content {
        padding: 1rem; /* Adjust for mobile view */
    }
}

/* --- 2. Organize Content Sizes and Hierarchy within Cards --- */

/* (a) General Card Content Sizing */
.ssd-card-title {
    font-size: 1.5rem; /* A fixed, clear size for the main title */
    font-weight: 600;
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}

.ssd-card p, .ssd-details-grid div, .ssd-form-group label {
    font-size: 0.95rem; /* Standardize paragraph and label text size */
}

/* (b) Fix for "ශිෂ්‍ය විස්තර" (Student Details) Card */
.ssd-ranks-grid {
    gap: 0.75rem; /* Slightly reduce the gap between boxes */
}

.ssd-rank-box {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center;     /* Center content horizontally */
    min-height: 100px;       /* Ensure all boxes have the same height */
}

.ssd-rank-box p {
    font-size: 0.8rem;   /* Make the label text smaller */
    margin-bottom: 0.5rem;
    text-align: center;
    line-height: 1.2;
}

.ssd-rank-box .ssd-rank-main, 
.ssd-rank-box .ssd-rank-island, 
.ssd-rank-box .ssd-rank-district {
    font-size: 1.75rem; /* Make the value text slightly smaller but bold */
}

/* (c) Fix for "Available Classes" Card */
.ssd-pro-class-card .ssd-pro-class-body {
    padding: 1rem; /* Reduce padding inside the class card */
}

.ssd-pro-class-title {
    font-size: 1.1rem; /* Standardize class title size */
    margin-bottom: 0.5rem;
}

.ssd-pro-class-meta span {
    font-size: 0.75rem; /* Make tags smaller */
    padding: 4px 8px;
}

.ssd-pro-class-footer {
    padding-top: 0.75rem;
}

.ssd-pro-class-price {
    font-size: 1.1rem; /* Adjust price size */
    font-weight: 600;
}

.ssd-pro-class-btn {
    padding: 0.5rem 1rem; /* Make the button slightly smaller */
    font-size: 0.85rem;
}

/* (d) Fix for "Empty State" messages (e.g., My Classes, My Offers) */
.ssd-empty-state h4 {
    font-size: 1.2rem;
}
.ssd-empty-state p {
    font-size: 0.9rem;
    line-height: 1.6;
}

/* --- 3. Reduce Sidebar Navigation Text Size --- */

.ssd-nav-item span, .ssd-sidebar-footer a {
    font-size: 80%; /* Reduce text size by 20% */
}

/*
===============================================
--- Mobile Header Logo with Glowing Effect ---
===============================================
*/

.ssd-mobile-logo-link {
    display: flex;
    align-items: center;
}

.ssd-mobile-logo {
    height: 40px; /* Adjust the logo height as needed */
    width: auto;
}

/*
============================================================
--- SINGLE CLASS VIEW LAYOUT & STYLE UPDATES (SEPT 13, 2025) ---
============================================================
*/

/* --- 1. Desktop: Make Tabs Container Full-Width --- */
@media (min-width: 992px) {
    .ssd-class-content-tabs {
        /* This makes the tabs container span across both grid columns */
        grid-column: 1 / -1;
        margin-top: 2rem;
    }
}


/* --- 2. Mobile: Horizontally Scrolling Tabs --- */
@media (max-width: 768px) {
    .ssd-class-tab-nav {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        padding-bottom: 10px; /* Add space for the scrollbar */
    }

    /* Optional: Style the scrollbar for a cleaner look */
    .ssd-class-tab-nav::-webkit-scrollbar {
        height: 4px;
    }
    .ssd-class-tab-nav::-webkit-scrollbar-track {
        background: transparent;
    }
    .ssd-class-tab-nav::-webkit-scrollbar-thumb {
        background-color: var(--ssd-border-color);
        border-radius: 20px;
    }
}


/* --- 3. Remove Red/Blue Highlight from Active Tab --- */
.ssd-class-tab-btn.active {
    /* Change the active color to the primary text color (white/light grey) */
    color: var(--ssd-text-primary);
    border-bottom-color: var(--ssd-text-primary);
    font-weight: 600; /* Make it bold instead of colored */
}

/* A subtle hover effect for non-active tabs */
.ssd-class-tab-btn:not(.active):hover {
    color: var(--ssd-text-primary);
}

/* --- Remove Red Highlight from Active Tab & Apply Modern Style --- */

.ssd-class-tab-btn.active {
    background-color: transparent !important; /* රතු පැහැති පසුබිම ඉවත් කරයි */
    color: var(--ssd-text-primary) !important; /* ප්‍රධාන සුදු/ලා අළු පැහැය ලබා දෙයි */
    border-bottom: 2px solid var(--ssd-accent-color) !important; /* නවීන තේමාවේ නිල් පැහැති යටින් ඉරක් එක් කරයි */
    font-weight: 600;
}

/* Remove any remaining background on other tabs */
.ssd-class-tab-btn {
    background: none !important;
}

/*
============================================================
--- MOBILE VIEW BALANCING & BUTTON COLOR RESTORE ---
============================================================
*/

/* --- 1. Restore Original Button Colors (Green & Yellow) --- */
/* This will apply to both Desktop and Mobile views */

.ssd-join-button {
    background-color: #22c55e; /* Default "Join Now" to Green */
    color: #ffffff;
    box-shadow: 0 4px 15px -5px #22c55e;
}

.ssd-join-button:hover {
    background-color: #16a34a; /* Darker Green on hover */
    box-shadow: 0 6px 20px -5px #16a34a;
}

.ssd-join-button.pending {
    background-color: #eab308; /* Pending to Yellow/Orange */
    color: #1f2937; /* Dark text for better visibility */
    box-shadow: 0 4px 15px -5px #eab308;
}

.ssd-join-button.enrolled {
    background-color: #4b5563; /* Enrolled to Grey */
    box-shadow: 0 4px 15px -5px #4b5563;
    cursor: not-allowed;
}


/* --- 2. Balance Sizes for Mobile View --- */
@media (max-width: 768px) {

    /* Make the entire glass box container more compact on mobile */
    .ssd-single-class-container {
        padding: 1rem;
    }

    /* Reduce the main title size on mobile */
    .ssd-class-main-title {
        font-size: 1.8rem;
    }

    /* Reduce the "Join Now" button size by approx 20% on mobile */
    .ssd-join-button {
        font-size: 1rem; /* Adjust font size */
        padding: 0.8rem; /* Adjust padding */
    }

}

/*
============================================================
--- MOBILE VIEW: CENTERING CLASS DETAILS & JOIN BUTTON ---
============================================================
*/

@media (max-width: 768px) {

    /* Center-align the text for the main details container */
    .ssd-class-details-main {
        text-align: center;
    }

    /* Override the centering for the meta grid to keep text left-aligned and readable */
    .ssd-class-meta-grid {
        text-align: left;
        max-width: 320px; /* Set a max-width for the box */
        margin-left: auto;   /* Center the box itself */
        margin-right: auto;  /* Center the box itself */
    }

    /* Add a gap between the details box and the join button */
    .ssd-class-join-box {
        margin-top: 1.5rem;
    }

}

/* --- Countdown Timer and Enrollment Closed Styles --- */

.ssd-class-countdown {
    text-align: center;
    margin-top: 1rem; /* Add a positive gap FROM the top */
    margin-bottom: 1.5rem;
    padding: 0.5rem;
    background-color: rgba(245, 158, 11, 0.1); /* Light yellow background */
    color: var(--ssd-yellow, #f59e0b);
    font-size: 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--ssd-yellow, #f59e0b);
}

.ssd-enrollment-closed-notice {
    text-align: center;
    padding: 1rem;
    background-color: rgba(244, 63, 94, 0.2); /* Light red background */
    color: var(--ssd-red, #f43f5e);
    border: 1px solid var(--ssd-red, #f43f5e);
    border-radius: 8px;
    font-weight: 500;
}

/*
============================================================
--- FINAL UI SIZING ADJUSTMENTS (SEPT 13, 2025) ---
============================================================
*/

/* --- 1. Reduce Class Name (Topic) Size on ALL Devices --- */

.ssd-class-main-title {
    /* Reducing font size by approximately 20% from the previous 2.5rem */
    font-size: 2.0rem; 
}


/* --- 2. Balance Sizes Specifically for MOBILE View --- */
@media (max-width: 768px) {

    /* Further reduce the Class Name size on mobile */
    .ssd-class-main-title {
        font-size: 1.6rem;
        line-height: 1.3; /* Adjust line height for multi-line titles */
    }

    /* Make the details box (price, subject etc.) more compact */
    .ssd-class-meta-grid {
        padding: 1rem;
        font-size: 0.9rem;
    }

    /* Reduce the size of the "Join Now" button */
    .ssd-join-button {
        padding: 0.8rem;
        font-size: 1rem;
    }

    /* Reduce the size of the countdown timer */
    .ssd-class-countdown {
        padding: 0.4rem;
        font-size: 0.8rem;
    }

    /* Reduce the size of the "Enrollment Closed" notice */
    .ssd-enrollment-closed-notice {
        padding: 0.8rem;
        font-size: 0.9rem;
    }
}

/*
============================================================
--- DESKTOP SINGLE VIEW LAYOUT ADJUSTMENT (SEPT 13, 2025) ---
============================================================
*/

@media (min-width: 992px) {
    /* Style the media column which now contains the title */
    .ssd-class-media {
        /* This ensures the title and tutor name are left-aligned */
        text-align: left;
    }

    /* Add a gap between the thumbnail/video and the title below it */
    .ssd-class-media .ssd-class-main-title {
        margin-top: 1.5rem;
    }

    /* Vertically align the right-side details to the top */
    .ssd-class-details-main {
       align-self: start;
    }
}

/* --- Telegram Button Styles --- */

.ssd-class-action-buttons {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap; /* Allows buttons to wrap on smaller screens */
}

.ssd-class-join-box {
    flex-grow: 1; /* Allows the main join button to take more space */
}

.ssd-telegram-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #2AABEE; /* Telegram's brand blue color */
    color: #ffffff;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
    border: none;
    cursor: pointer;
    flex-shrink: 0; /* Prevents the button from shrinking too much */
}

.ssd-telegram-button:hover {
    background-color: #1a9cd6;
}

.ssd-telegram-button svg {
    width: 20px;
    height: 20px;
}

/* --- Tutors Tab Styles --- */
.ssd-tutors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
.ssd-tutor-card {
    background-color: #374151;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
    transition: background-color 0.2s, transform 0.2s;
    cursor: pointer;
}
.ssd-tutor-card:hover {
    background-color: #4b5563;
    transform: translateY(-4px);
}
.ssd-tutor-card-img-wrapper img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #60a5fa;
}
.ssd-tutor-card-details h4 {
    margin: 0 0 0.25rem 0;
    color: #ffffff;
    font-size: 1.1rem;
}
.ssd-tutor-card-meta {
    margin: 0;
    font-size: 0.8rem;
    color: #9ca3af;
}
.ssd-tutor-card-meta.subjects {
    color: #d1d5db;
}

/* --- Professional Single Tutor Page Styles (UPDATED) --- */
.ssd-professional-tutor-view .tutor-profile-container {
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 1.5rem;
}

.ssd-professional-tutor-view .tutor-cover-photo {
    height: 220px; /* Reduced height slightly */
    background-size: cover;
    background-position: center;
    background-color: #374151;
}

.ssd-professional-tutor-view .tutor-header-section {
    display: flex;
    flex-direction: column;
    padding: 0 1.5rem 1.5rem 1.5rem;
    margin-top: -80px;
    position: relative;
    z-index: 2;
}

.ssd-professional-tutor-view .tutor-profile-photo-wrapper {
    margin-bottom: 1rem;
}

.ssd-professional-tutor-view .tutor-profile-photo {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #1f2937;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.ssd-professional-tutor-view .tutor-header-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ssd-professional-tutor-view .tutor-header-info h1 {
    font-size: 2.25rem; /* Increased font size */
    font-weight: 800; /* Bolder font */
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.ssd-professional-tutor-view .tutor-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.ssd-professional-tutor-view .tutor-meta-pills span {
    background-color: #374151;
    color: #9ca3af;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}
.ssd-professional-tutor-view .tutor-meta-pills span.year-pill {
    background-color: #3b82f6;
    color: #ffffff;
}

.ssd-professional-tutor-view .tutor-follower-stats {
    color: #d1d5db;
    margin-bottom: 1.5rem;
}

.ssd-professional-tutor-view .tutor-follower-stats strong {
    font-weight: 700;
}

.ssd-professional-tutor-view .ssd-follow-btn {
    background-color: #3b82f6;
    color: white;
    font-weight: 600;
    padding: 0.6rem 2rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ssd-professional-tutor-view .ssd-follow-btn.following {
    background-color: #4b5563;
}

.ssd-professional-tutor-view .ssd-follow-btn:hover {
    opacity: 0.9;
}

/* Other styles like tabs and content panes remain the same */
@media (min-width: 768px) {
    .ssd-professional-tutor-view .tutor-header-section {
        flex-direction: row;
        align-items: flex-end;
    }
    .ssd-professional-tutor-view .tutor-header-main {
        align-items: flex-start;
        text-align: left;
        margin-left: 1.5rem;
    }
    .ssd-professional-tutor-view .tutor-meta-pills {
        justify-content: flex-start;
    }
}

/* Other styles for tabs, content, etc., continue from the previous response */

/* =================================================================== */
/* === UPDATED: Professional Layouts for Cards, Tutors, and Shops === */
/* =================================================================== */

/* --- Modern Profile Card Grid (Tutor & Shop LISTS) --- */
.ssd-profile-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 column on mobile */
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .ssd-profile-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 2+ columns on larger screens */
    }
}

.ssd-profile-card {
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ssd-profile-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
}
.profile-card-banner { height: 120px; background-size: cover; background-position: center; background-color: #374151; }
.profile-card-picture-wrapper { margin-top: -50px; display: flex; justify-content: center; position: relative; z-index: 2; }
.profile-card-picture { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 4px solid #1f2937; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.profile-card-content { padding: 1rem 1.5rem 1.5rem; text-align: center; }
.profile-card-name { font-size: 1.25rem; font-weight: 600; color: #ffffff; margin: 0.5rem 0 0.25rem; }
.profile-card-meta { font-size: 0.85rem; color: #9ca3af; margin: 0 0 1rem; min-height: 34px; }
.profile-card-stats { display: inline-flex; align-items: center; gap: 0.5rem; background-color: #374151; padding: 0.25rem 0.75rem; border-radius: 20px; color: #d1d5db; font-size: 0.8rem; }


/* =================================================================== */
/* === UPDATED: Professional Layouts for Single Tutor & Shop Pages === */
/* =================================================================== */

.ssd-fb-profile-view {
    font-family: 'Inter', 'Noto Sans Sinhala', sans-serif;
}

.ssd-fb-profile-view .tutor-profile-container {
    background-color: transparent;
    border: none;
    margin: 0 -1.5rem; /* Mobile full-width effect */
}

.ssd-fb-profile-view .tutor-cover-photo {
    height: 140px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.ssd-fb-profile-view .ssd-back-to-classes-btn {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 20;
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.ssd-fb-profile-view .tutor-header-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* UPDATED: padding-top: 0 ලෙස වෙනස් කරන ලදී */
    padding: 0 1.5rem 1.5rem 1.5rem; /* (top, sides, bottom) */
    position: relative;
}

.ssd-fb-profile-view .tutor-profile-picture-wrapper {
    margin-top: -50px;
    margin-bottom: 0.75rem;
}

.ssd-fb-profile-view .tutor-profile-picture {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid #111827;
    object-fit: cover;
}

.ssd-fb-profile-view .tutor-info-actions-wrapper {
    width: 100%;
    text-align: left;
    padding-bottom: 1rem;
    border-bottom: 1px solid #374151;
}

.ssd-fb-profile-view .tutor-info h1 { font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0; }
.ssd-fb-profile-view .tutor-followers { color: #9ca3af; font-size: 0.9rem; margin: 0.25rem 0; }
.ssd-fb-profile-view .tutor-bio-short { color: #d1d5db; margin-bottom: 1rem; font-size: 0.9rem; }

/* --- UPDATED: Professional Action Buttons --- */
.ssd-fb-profile-view .tutor-actions {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
}

.ssd-fb-profile-view .tutor-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-grow: 1; 
    font-size: 0.9rem;
    white-space: nowrap; /* Prevents text from wrapping */
}
.ssd-fb-profile-view .tutor-action-btn i {
    margin-right: 0.5rem;
}

/* Facebook Style Follow Button */
.ssd-fb-profile-view .follow-btn,
.ssd-fb-profile-view .shop-follow-btn,
.ssd-fb-profile-view .student-follow-btn,
.ssd-fb-profile-view #edit-profile-btn { /* This line is added */
    background-color: #1877F2; /* Facebook Blue */
    color: #fff;
}
.ssd-fb-profile-view .follow-btn.following,
.ssd-fb-profile-view .shop-follow-btn.following,
.ssd-fb-profile-view .student-follow-btn.following {
    background-color: #374151;
    color: #d1d5db;
}
.ssd-fb-profile-view .follow-btn:hover,
.ssd-fb-profile-view .shop-follow-btn:hover,
.ssd-fb-profile-view .student-follow-btn:hover {
    filter: brightness(110%);
}

/* YouTube Button */
.ssd-fb-profile-view .youtube-btn {
    background-color: #CD201F; /* YouTube Red */
    color: #fff;
}
.ssd-fb-profile-view .youtube-btn:hover {
    filter: brightness(110%);
}


/* --- UPDATED: Facebook Style Tabs --- */
.ssd-fb-profile-view .tutor-tabs-nav-wrapper { padding: 0 1.5rem; border-bottom: 1px solid #374151; }
.ssd-fb-profile-view .tutor-tabs-nav { display: flex; gap: 1rem; }
.ssd-fb-profile-view .tutor-tab-btn { padding: 0.8rem 0.25rem; color: #9ca3af; background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; font-weight: 600; font-size: 0.9rem; transition: all 0.2s ease; }
.ssd-fb-profile-view .tutor-tab-btn:hover { background-color: rgba(255, 255, 255, 0.05); border-radius: 6px 6px 0 0; }
.ssd-fb-profile-view .tutor-tab-btn.active { color: #3b82f6; border-bottom-color: #3b82f6; }
.ssd-fb-profile-view .tutor-content-wrapper { padding: 1.5rem; }
.ssd-fb-profile-view .tutor-tab-pane { display: none; }
.ssd-fb-profile-view .tutor-tab-pane.active { display: block; }


/* --- Desktop Overrides (CORRECTED) --- */
@media (min-width: 768px) {
    .ssd-fb-profile-view .tutor-profile-container { background-color: #1f2937; border: 1px solid #374151; border-radius: 12px; margin: 1.5rem 0; }
    .ssd-fb-profile-view .tutor-cover-photo { height: 300px; border-radius: 12px 12px 0 0; }
    .ssd-fb-profile-view .tutor-header-content { flex-direction: row; align-items: flex-end; max-width: 1000px; margin: -50px auto 0; padding: 0 2rem; }
    .ssd-fb-profile-view .tutor-profile-picture { width: 160px; height: 160px; border-color: #1f2937; }
    
    .ssd-fb-profile-view .tutor-info-actions-wrapper { 
        display: flex; 
        align-items: center; 
        justify-content: space-between; 
        flex-grow: 1; 
        text-align: left; 
        padding-bottom: 1rem; 
        margin-left: 1.5rem; 
        border-bottom: none; 
    }
    .ssd-fb-profile-view .tutor-info { 
        margin-bottom: 0;
        flex-shrink: 1; /* Allow info to shrink if needed */
        margin-right: 1rem; /* Add gap between bio and buttons */
    }
    .ssd-fb-profile-view .tutor-info h1 { font-size: 2rem; }
    
    .ssd-fb-profile-view .tutor-actions { 
        margin-top: 0; 
        flex-grow: 0; 
        width: auto;
        flex-shrink: 0; /* Prevent buttons from shrinking */
    }
    .ssd-fb-profile-view .tutor-tabs-nav-wrapper { max-width: 1000px; margin: 0 auto; padding: 0 2rem; }
    .ssd-fb-profile-view .tutor-tab-btn { font-size: 1rem; padding: 0.75rem 1rem; }
    .ssd-fb-profile-view .tutor-content-wrapper { max-width: 1000px; margin: 0 auto; padding: 1.5rem 2rem; }
}
/* --- FIX for Student Profile Spacing (Name, Username, Follows) --- */
.ssd-fb-profile-view .tutor-info {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Consistent gap */
    margin-bottom: 0; /* Override any existing margins */
}

.ssd-fb-profile-view .tutor-info h1 {
    margin: 0; /* Remove any default h1 margin */
}

.ssd-fb-profile-view .tutor-username {
    color: #38bdf8;
    margin: 0; /* Remove default <p> tag margins */
    line-height: 1.2; /* Add line-height for safety */
}

.ssd-fb-profile-view .tutor-follow-stats {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0; /* Remove any default margins */
}
/* --- End of FIX --- */


/* --- Shop & Product Card Styles (UPDATED for Mobile) --- */
.ssd-products-grid, .ssd-professional-classes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns on mobile */
    gap: 1rem;
}
@media (min-width: 768px) {
    .ssd-products-grid, .ssd-professional-classes-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* More columns on desktop */
        gap: 1.5rem;
    }
}

.ssd-product-card, .ssd-pro-class-card {
    background-color: #374151;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #4b5563;
    transition: transform 0.2s, box-shadow 0.2s;
}
.ssd-product-card:hover, .ssd-pro-class-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.ssd-product-image, .ssd-pro-class-header {
    height: 120px; /* Adjusted height for 2-column mobile view */
    background-size: cover;
    background-position: center;
    background-color: #4b5563;
}
.ssd-product-details, .ssd-pro-class-body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.ssd-product-details h4, .ssd-pro-class-title {
    color: #ffffff;
    font-size: 0.9rem; /* Adjusted font size */
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}
.ssd-product-pricing { margin-bottom: 0.75rem; }
.ssd-product-price { color: #a5b4fc; font-size: 1rem; font-weight: 700; }
.ssd-product-buy-btn, .ssd-pro-class-footer { margin-top: auto; }
.ssd-product-buy-btn {
    display: block; text-align: center; background-color: #22c55e;
    color: #fff; padding: 0.5rem; border-radius: 6px; text-decoration: none;
    font-weight: 600; font-size: 0.8rem; transition: background-color 0.2s;
}
.ssd-product-buy-btn:hover { background-color: #16a34a; }

/* Style for the yellow 'Book Now' button */
.ssd-book-now-btn {
    background-color: #eab308 !important;
    color: #1f2937 !important;
}
.ssd-book-now-btn:hover {
    background-color: #f59e0b !important;
}

/* Style for the yellow 'Book Now' button (replaces old .ssd-book-now-btn) */
.btn-book-now-style {
    background-color: #eab308 !important; /* Yellow */
    color: #1f2937 !important; /* Dark text */
}
.btn-book-now-style:hover {
    background-color: #f59e0b !important; /* Lighter yellow on hover */
}

/* --- Product Image Slider Styles --- */
.ssd-product-gallery .main-image {
    position: relative;
    margin-bottom: 10px;
}
.ssd-product-gallery .main-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #374151;
}
.slider-prev, .slider-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    background-color: rgba(0,0,0,0.3);
    transition: background-color 0.3s ease;
}
.slider-prev:hover, .slider-next:hover {
    background-color: rgba(0,0,0,0.6);
}
.slider-prev { left: 0; border-radius: 0 5px 5px 0; }
.slider-next { right: 0; border-radius: 5px 0 0 5px; }

.thumbnail-images {
    display: flex;
    gap: 10px;
}
.thumbnail-images .thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid #374151;
    border-radius: 4px;
    opacity: 0.6;
    transition: all 0.2s ease;
}
.thumbnail-images .thumbnail:hover, .thumbnail-images .thumbnail.active {
    border-color: #3b82f6;
    opacity: 1;
}

/* --- Single Product Page Two-Column Layout for Desktop (NEW) --- */

/* On screens larger than 992px, apply a two-column grid layout */
@media (min-width: 992px) {
    .ssd-single-product-container {
        display: grid;
        /* The grid will have two columns: left one is larger (3fr), right one is smaller (2fr) */
        grid-template-columns: 3fr 2fr;
        gap: 2rem; /* Add a gap between the two columns */
        align-items: start; /* Align items to the top of their grid area */
    }
}

/* Minor adjustments for the gallery and details within the grid */
.ssd-product-gallery {
    width: 100%;
}

.ssd-product-details-main {
    width: 100%;
}

/* --- Login Overlay Styles for Logged-Out Users --- */

.ssd-guest-view-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.ssd-dummy-content {
    filter: blur(8px);
    -webkit-filter: blur(8px);
    opacity: 0.5;
    pointer-events: none; /* Make content unclickable */
}

.ssd-dummy-card {
    background-color: #1f2937;
    border-radius: 0.75rem;
    height: 150px;
    margin-bottom: 1.5rem;
}
.ssd-dummy-card.wide {
    height: 300px;
}

.ssd-login-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(17, 24, 39, 0.6); /* Semi-transparent dark background */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.ssd-login-box {
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    width: 100%;
    max-width: 400px;
    text-align: center;
    color: #d1d5db;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.ssd-login-box h3 {
    font-size: 1.5rem;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.ssd-login-box p {
    margin-bottom: 1.5rem;
    color: #9ca3af;
}

/* Styling the WordPress Login Form */
.ssd-login-box .login-form label {
    display: block;
    text-align: left;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #9ca3af;
}

.ssd-login-box .login-form input[type="text"],
.ssd-login-box .login-form input[type="password"] {
    width: 100%;
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid #4b5563;
    background-color: #374151;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.ssd-login-box .login-remember {
    text-align: left;
    margin-bottom: 1rem;
}

.ssd-login-box .login-submit input[type="submit"] {
    width: 100%;
    background-color: #3b82f6;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s;
}
.ssd-login-box .login-submit input[type="submit"]:hover {
    background-color: #2563eb;
}

/* ========================================================== */
/* === NEW: Professional Layout & Back Button Styles === */
/* ========================================================== */

/* 1. Make the main content area padding consistent */
.ssd-main-content {
    padding: 1.5rem; /* Adjusted padding for mobile */
}
@media (min-width: 768px) {
    .ssd-main-content {
        padding: 2rem; /* Adjusted padding for desktop */
    }
}


/* 2. "Cardless" Design: Make the main card container transparent */
.ssd-card {
    background-color: transparent;
    border: none;
    padding: 0;
    margin-bottom: 2.5rem; /* Add space between sections */
    box-shadow: none;
}


/* 3. Adjust Title styles to fit the new cardless design */
.ssd-card-title {
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #374151;
}


/* 4. New Style for the Universal Back Button */
.ssd-back-to-classes-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #374151;
    color: #d1d5db;
    border: 1px solid #4b5563;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 2rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ssd-back-to-classes-btn:hover {
    background-color: #4b5563;
    color: #ffffff;
}

/* Ensure the button icon (arrow) is styled correctly */
.ssd-back-to-classes-btn::before {
    content: '\2190'; /* This is the left arrow character */
    font-size: 1.2em;
    line-height: 1;
}

/* Remove the text part of the back button to make it a small icon button */
.ssd-back-to-classes-btn {
    font-size: 0; /* Hide the text like "Back to..." */
    padding: 0.6rem; /* Make it a square-like button */
    width: 40px;
    height: 40px;
    justify-content: center;
}

.ssd-back-to-classes-btn::before {
    font-size: 1.2rem; /* Set the arrow size */
}

/* ========================================================== */
/* === FINAL LAYOUT UPDATES (Cardless Single Pages & Solid Background) === */
/* ========================================================== */

/* 1. Remove the gradient and set a solid background color for the main content area */
.ssd-main-content {
    background: #111827 !important; /* Use !important to override any other styles */
}

/* 2. Remove the "boxed" look from all single view pages */
.ssd-fb-profile-view .tutor-profile-container,
.ssd-single-class-container,
.ssd-single-product-container {
    background-color: transparent;
    border: none;
    box-shadow: none;
    margin-top: 0;
    padding: 0;
}

/* 3. Adjust spacing for the back button on single pages */
.ssd-single-view-wrapper .ssd-back-to-classes-btn {
    margin-bottom: 1.5rem;
}

/* 4. Adjust the border below the header on single profile pages */
.ssd-fb-profile-view .tutor-info-actions-wrapper {
    border-bottom-color: transparent; /* Remove the line below the name */
}

/* 5. Add a border to the tab navigation to create separation */
.ssd-fb-profile-view .tutor-tabs-nav-wrapper {
    border-bottom: 1px solid #374151;
}

/* --- FIX: Stack Price and Button on Class Cards for Mobile View --- */

.ssd-pro-class-footer {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the left */
    gap: 0.75rem; /* Add a small gap between the price and button */
}

.ssd-pro-class-footer .ssd-pro-class-btn {
    width: 100%; /* Make the button full-width */
    text-align: center;
}

/* ========================================================== */
/* === FIX: Vertical Button Layout for "My Classes" Tab === */
/* ========================================================== */

/* Target the footer container specifically within the 'My Classes' tab */
#tab-my-classes .ssd-pro-class-footer {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 0.75rem;           /* Add space between the buttons */
}

/* Style all buttons within this footer to be full-width and consistent */
#tab-my-classes .ssd-pro-class-footer .ssd-start-learning-btn,
#tab-my-classes .ssd-pro-class-footer .ssd-view-timetable-btn {
    width: 100%;
    text-align: center;
    white-space: nowrap; /* Prevent text from wrapping */
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s;
    cursor: pointer;
    border: none; /* Remove border if any */
    font-size: 0.9rem;
}

/* Specific color for the 'Time Table' button to differentiate it */
#tab-my-classes .ssd-pro-class-footer .ssd-view-timetable-btn {
    background-color: #4b5563; /* Gray secondary color */
    color: #fff;
}

#tab-my-classes .ssd-pro-class-footer .ssd-view-timetable-btn:hover {
    background-color: #6b7280;
}

/* Ensure the green 'Start Learning' button style is applied correctly */
#tab-my-classes .ssd-pro-class-footer .ssd-start-learning-btn {
    background-color: #22c55e;
    color: white;
}
#tab-my-classes .ssd-pro-class-footer .ssd-start-learning-btn:hover {
    background-color: #16a34a;
}

/* --- FIX: YouTube Button Color --- */

.ssd-fb-profile-view .tutor-action-btn.secondary-btn {
    background-color: #CD201F; /* YouTube Red */
    color: #fff;
}

.ssd-fb-profile-view .tutor-action-btn.secondary-btn:hover {
    background-color: #E62117; /* A slightly darker red on hover */
    color: #fff;
}

/* --- FIX: Desktop Tutor Profile Picture Shape --- */

@media (min-width: 768px) {
    /* Prevent the container from shrinking */
    .ssd-fb-profile-view .tutor-profile-picture-wrapper {
        flex-shrink: 0;
    }

    /* Set a slightly smaller, fixed square size for the photo */
    .ssd-fb-profile-view .tutor-profile-picture {
        width: 140px;
        height: 140px;
        object-fit: cover; /* Ensures the image fills the circle without stretching */
    }
}

/* --- NEW: Content Area Header Styles --- */
.ssd-content-header {
    display: none; /* Hide on mobile by default */
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ssd-border-color);
}

.ssd-header-icon-btn {
    background: transparent;
    border: none;
    color: var(--ssd-text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

.ssd-header-icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--ssd-text-primary);
}

/* --- Mobile Header Actions --- */
.ssd-mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Show desktop header only on larger screens */
@media (min-width: 769px) {
    .ssd-content-header {
        display: flex;
    }
    #ssd-header-search-btn-mobile {
        display: none; /* Hide mobile search icon on desktop */
    }
}

/* --- NEW: AJAX Loading Spinner and Overlay Styles --- */
.ssd-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 24, 39, 0.6); /* Semi-transparent dark background */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9998; /* Below sidebar on mobile */
    border-radius: 0.75rem; /* Match card radius */
}

.ssd-loader-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top-color: #38bdf8; /* Accent color */
    border-radius: 50%;
    animation: ssd-spin 1s linear infinite;
}

@keyframes ssd-spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- NEW: Glowing Logo Loader Styles --- */
.ssd-loading-overlay .ssd-glowing-logo {
    height: 80px; /* Adjust logo size as needed */
    width: auto;
    /* The glowing animation */
    animation: glow 2s infinite ease-in-out;
}

/* Define the glowing animation keyframes */
@keyframes glow {
  0%, 100% {
    /* filter: drop-shadow() is best for transparent PNG logos */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7)) 
            drop-shadow(0 0 10px rgba(56, 189, 248, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1)) 
            drop-shadow(0 0 20px rgba(56, 189, 248, 0.8));
  }
}

.my-pages-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.my-pages-header .ssd-card-title {
    margin: 0;
}
.ssd-my-pages-list .ssd-edit-page-btn {
    font-size: 0.75rem;
    margin-left: auto;
    background-color: #4b5563;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    text-decoration: none;
}
.ssd-cancel-edit-page-btn {
    display: inline-block;
    margin-left: 1rem;
    color: #9ca3af;
    text-decoration: none;
}

/* --- Professional Search Results Styles --- */
.ssd-search-notice {
    text-align: center;
    color: #9ca3af;
    padding: 2rem;
}

.ssd-search-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ssd-search-result-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background-color: #1f2937;
    border: 1px solid #374151;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.ssd-search-result-item:hover {
    background-color: #374151;
    border-color: #4b5563;
}

.result-item-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.result-item-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.result-item-name {
    font-weight: 600;
    color: #ffffff;
    font-size: 1rem;
}

.result-item-username {
    color: #9ca3af;
    font-size: 0.85rem;
}

.result-item-tag {
    background-color: #3b82f6; /* Blue background for the tag */
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    margin-left: auto; /* Pushes the tag to the far right */
}

/* --- Page Button Color Customization --- */
.ssd-fb-profile-view .tutor-actions .page-follow-btn,
.ssd-fb-profile-view .tutor-actions .ssd-edit-page-btn {
    background-color: #3b82f6; /* Blue Color */
    color: #ffffff;
}

.ssd-fb-profile-view .tutor-actions .page-follow-btn:hover,
.ssd-fb-profile-view .tutor-actions .ssd-edit-page-btn:hover {
    background-color: #2563eb; /* Darker Blue on Hover */
}

/* Style for following state */
.ssd-fb-profile-view .tutor-actions .page-follow-btn.following {
    background-color: #4b5563; /* Grey when following */
    color: #d1d5db;
}

/* --- Fix for Button Click Area --- */
.ssd-product-buy-btn button {
    width: 100%;
    display: block;
    text-align: center;
}

/* --- Multi-Step Registration Form Styles --- */
.ssd-registration-container {
    max-width: 700px;
    margin: 2rem auto;
    background-color: #1f2937;
    border: 1px solid #374151;
    padding: 2rem;
    border-radius: 12px;
    color: #d1d5db;
}
.ssd-registration-container .ssd-form-group {
    margin-bottom: 1.5rem;
}
.ssd-registration-container .ssd-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.ssd-registration-container input[type="text"],
.ssd-registration-container input[type="email"],
.ssd-registration-container input[type="password"],
.ssd-registration-container textarea {
    width: 100%;
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid #4b5563;
    background-color: #374151;
    color: #d1d5db;
}
.ssd-form-status-error {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid #ef4444;
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}
.reg-step-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}
.ssd-button-secondary {
    background: #4b5563;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* --- Profile Preview Styles --- */
.ssd-profile-preview {
    margin-bottom: 2rem;
    border: 1px solid #374151;
    border-radius: 12px;
    overflow: hidden;
}
.ssd-profile-preview .tutor-profile-container {
    margin: 0;
}
.ssd-profile-preview .tutor-cover-photo {
    height: 150px;
    background-size: cover;
    background-position: center;
    background-color: #374151;
    position: relative;
    cursor: pointer;
}
.ssd-profile-preview .tutor-profile-picture-wrapper {
    margin-top: -50px;
    position: relative;
    width: 100px; /* Set fixed width */
    height: 100px; /* Set fixed height */
}
.ssd-profile-preview .tutor-profile-picture {
    width: 100px;
    height: 100px;
}
.ssd-profile-preview .photo-upload-label {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(0,0,0,0.6);
    color: white;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ssd-profile-preview .photo-upload-label.small {
    border-radius: 50%;
    padding: 0.5rem;
    right: 0;
}
.ssd-profile-preview .photo-upload-label .fas {
    font-size: 1rem;
}

/* --- STYLES FOR FULL-SCREEN REGISTRATION PAGE --- */

/* 1. Full Screen Dark Background */
body.ssd-registration-page {
    background-color: #111827; /* Dark background from the dashboard */
}
/* Ensure the form is centered on the dark page */
body.ssd-registration-page .ssd-registration-container {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

/* 2. White Font Color for Inputs */
.ssd-registration-container input[type="text"],
.ssd-registration-container input[type="email"],
.ssd-registration-container input[type="password"],
.ssd-registration-container textarea {
    color: #ffffff !important; /* Make typed text white */
}
.ssd-registration-container input::placeholder,
.ssd-registration-container textarea::placeholder {
    color: #9ca3af; /* Light grey for placeholder text */
    opacity: 1;
}

/* 3. Styles for New FB Profile UI in Step 2 */
#reg-step-2 .ssd-fb-profile-view {
    border: 1px solid #374151;
    border-radius: 12px;
    margin-bottom: 2rem;
    background-color: #111827;
}
#reg-step-2 .ssd-fb-profile-view .tutor-profile-container {
    border: none;
    margin: 0;
}
#reg-step-2 .ssd-fb-profile-view .tutor-cover-photo {
    height: 180px;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #374151;
    background-size: cover;
    background-position: center;
    position: relative;
}
#reg-step-2 .ssd-fb-profile-view .photo-upload-label {
    background-color: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(4px);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease-in-out;
}
#reg-step-2 .ssd-fb-profile-view .photo-upload-label:hover {
    background-color: rgba(17, 24, 39, 0.9);
}
#reg-step-2 .ssd-fb-profile-view .tutor-profile-picture-wrapper {
    margin-top: -60px;
    margin-left: 1rem;
    position: relative;
}
#reg-step-2 .ssd-fb-profile-view .tutor-profile-picture {
    width: 120px;
    height: 120px;
    border: 4px solid #1f2937;
}
#reg-step-2 .ssd-fb-profile-view .photo-upload-label.small {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
#reg-step-2 .ssd-fb-profile-view .tutor-header-content {
    padding-bottom: 1rem;
}
#reg-step-2 .ssd-fb-profile-view .tutor-info-actions-wrapper {
    padding: 0.5rem 1rem 1rem 1rem;
    border: none;
}
#reg-step-2 .ssd-fb-profile-view h1 {
    color: #ffffff;
    font-size: 1.8rem;
    margin: 0;
}
#reg-step-2 .ssd-fb-profile-view p {
    color: #9ca3af;
    margin: 0.25rem 0 0 0;
}

/* --- Professional Two-Step Login Page Styles --- */
#ssd-login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    font-family: 'Inter', sans-serif;
}
.login-box {
    width: 100%;
    max-width: 400px;
    background-color: #1f2937;
    border: 1px solid #374151;
    padding: 2.5rem;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}
.login-step {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    display: none;
}
.login-step.active {
    display: block;
}
.login-title {
    font-size: 1.8rem;
    color: #ffffff;
    text-align: center;
    margin: 0 0 0.5rem 0;
}
.login-subtitle {
    font-size: 1rem;
    color: #9ca3af;
    text-align: center;
    margin: 0 0 2rem 0;
}
#ssd-login-container .ssd-form-group {
    margin-bottom: 1.5rem;
}
#ssd-login-container input[type="text"],
#ssd-login-container input[type="password"] {
    width: 100%;
    padding: 0.85rem;
    font-size: 1rem;
}
#ssd-login-container .ssd-button-update {
    width: 100%;
    padding: 0.85rem;
    font-size: 1rem;
}
#login-user-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid #374151;
    border-radius: 20px;
    margin: 1.5rem auto;
    width: fit-content;
    color: #d1d5db;
}
#login-user-display .fas {
    font-size: 1.2rem;
}
#login-back-btn {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
}

/* ========================================================== */
/* === FULL SCREEN LMS & CLASS BUILDER STYLES === */
/* ========================================================== */

/* 1. Full Screen Container */
.ssd-dashboard-container.lms-mode .ssd-sidebar,
.ssd-dashboard-container.lms-mode .ssd-mobile-header,
.ssd-dashboard-container.lms-mode .ssd-content-header { /* <-- UPDATED */
    display: none; /* Hide main sidebar and mobile header */
}

.ssd-dashboard-container.lms-mode .ssd-main-content {
    padding: 0; /* Remove padding for a true full-screen experience */
    margin-top: 0; /* <-- ADDED */
    height: 100vh;
    overflow: hidden;
}

/* 2. Advanced Class Builder UI/UX Improvements */
.master-study-style {
    display: flex;
    height: 100%; /* Fill the entire viewport height */
    background-color: #1f2937;
    font-size: 0.9rem; /* Standardize font size */
}

.builder-sidebar {
    width: 350px;
    background-color: #111827;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #374151;
    transition: width 0.3s ease;
}

.builder-header {
    padding: 1rem;
    border-bottom: 1px solid #374151;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.builder-header .back-btn {
    background: #374151;
    border: none;
    color: #d1d5db;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.builder-header .back-btn:hover { background: #4b5563; }

.builder-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.curriculum-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0.5rem;
}
.curriculum-list::-webkit-scrollbar { width: 4px; }
.curriculum-list::-webkit-scrollbar-thumb { background: #4b5563; }

.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid #374151;
    display: flex;
    gap: 0.5rem;
}
.sidebar-footer input { flex-grow: 1; }
.sidebar-footer button { background-color: #22c55e; color: white; white-space: nowrap; }

.builder-main-content {
    flex-grow: 1;
    padding: 2rem;
    position: relative;
    overflow-y: auto;
}

/* Section and Lesson Items */
.section-item {
    margin-bottom: 0.5rem;
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 6px;
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    color: #e5e7eb;
    font-weight: 600;
}
.lesson-items {
    padding: 0 0.5rem 0.5rem;
    border-top: 1px solid #374151;
}
.lesson-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    color: #d1d5db;
    transition: background-color 0.2s;
}
.lesson-item:hover { background-color: #374151; }
.lesson-item.active { background-color: #3b82f6; color: white; }
.add-lesson-btn {
    background: transparent;
    border: 1px dashed #4b5563;
    color: #9ca3af;
    width: 100%;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: background-color 0.2s, color 0.2s;
}
.add-lesson-btn:hover { background-color: #374151; color: #fff; }

/* Lesson Pane Professional Styles */
.lesson-pane { display: flex; flex-direction: column; height: 100%; }
.pane-header { display:flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #374151; padding-bottom: 1rem; margin-bottom: 1.5rem; }
.pane-header h4 { margin: 0; font-size: 1.2rem; color: #fff; display: flex; align-items: center; gap: 0.5rem;}
.pane-header .save-lesson-btn { background-color: #3b82f6; color: white; font-weight: 600; padding: 0.6rem 1.5rem; }
.pane-body { flex-grow: 1; }

.ssd-form-group label {
    font-weight: 500;
    color: #9ca3af;
}

/* 3. Student LMS UI Improvements */
.ssd-student-lms-wrapper { height: 100%; }
.lms-sidebar-header .ssd-back-to-my-classes-btn {
    background: #374151;
    border: none;
    color: #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: background-color 0.2s;
}
.lms-sidebar-header .ssd-back-to-my-classes-btn:hover { background-color: #4b5563; }

/* ================================== */
/* === Accordion Menu for LMS V2 === */
/* ================================== */

.lms-month-accordion {
    margin-bottom: 0.5rem;
    border: 1px solid #374151;
    border-radius: 6px;
    overflow: hidden;
}
.lms-month-header {
    background-color: #2a3444;
    color: #e5e7eb;
    cursor: pointer;
    padding: 1rem;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lms-month-header:hover, .lms-month-header.active {
    background-color: #374151;
}
.lms-month-header .fa-chevron-down {
    transition: transform 0.3s ease;
}
.lms-month-header.active .fa-chevron-down {
    transform: rotate(180deg);
}

.lms-month-panel {
    padding: 0 1rem 1rem 1rem;
    background-color: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.lms-month-panel .lms-section {
    margin-top: 1rem;
    margin-bottom: 0;
}

/*
======================================================================
--- NEW: MODERN SINGLE CLASS VIEW STYLES ---
======================================================================
*/

.modern-lms-style {
    color: #d1d5db;
}

.modern-lms-style .ssd-back-to-classes-btn {
    margin-bottom: 1.5rem;
}

.ssd-class-header-modern {
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.ssd-class-header-modern .class-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem 0;
}

.ssd-class-header-modern .class-tagline {
    font-size: 1rem;
    color: #9ca3af;
    margin: 0 0 1.5rem 0;
    max-width: 80ch;
}

.ssd-class-header-modern .class-meta-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.9rem;
}

.class-meta-info > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.class-meta-info .tutor-info img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.class-meta-info .rating-info .star-rating {
    font-weight: 600;
    color: #facc15; /* Yellow for stars */
}

.ssd-class-body-modern {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 992px) {
    .ssd-class-body-modern {
        grid-template-columns: 1fr 320px; /* Main content and a fixed-width sidebar */
    }
    .ssd-class-sidebar-action {
        order: 2; /* Sidebar on the right */
    }
    .ssd-class-content-main {
        order: 1; /* Main content on the left */
    }
}

.action-card {
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 12px;
    overflow: hidden;
    position: sticky; /* Makes the card sticky */
    top: 2rem; /* Stick 2rem from the top */
}

.action-card-media {
    height: 180px;
    background-size: cover;
    background-position: center;
}

.action-card-media iframe {
    width: 100%;
    height: 100%;
}

.action-card-content {
    padding: 1.5rem;
}

.action-card .price-info {
    margin-bottom: 1rem;
}

.action-card .current-price {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}

.action-card .original-price {
    font-size: 1.1rem;
    color: #9ca3af;
    margin-left: 0.75rem;
}

.action-card .action-card-btn {
    width: 100%;
    padding: 0.85rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #3b82f6;
    color: #fff;
}
.action-card .action-card-btn:hover {
    background-color: #2563eb;
}
.action-card .action-card-btn.pending { background-color: #eab308; color: #111827; }
.action-card .action-card-btn.enrolled { background-color: #4b5563; cursor: not-allowed; }

.action-card .class-includes {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #374151;
}

.action-card .class-includes h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.action-card .class-includes ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: #d1d5db;
}

.action-card .class-includes ul li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.action-card .class-includes ul li .fas {
    color: #9ca3af;
}

/* Curriculum styles (reusing from student LMS) */
.ssd-class-content-main .curriculum-list {
    margin-top: 1.5rem;
}
.ssd-class-content-main .lesson-item-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.5rem;
    color: #d1d5db;
}

/*
======================================================================
--- REFINED MONTHLY BAR FOR SINGLE CLASS VIEW ---
======================================================================
*/

/* Target the container within the single class view's curriculum tab */
.modern-lms-style #tab-curriculum .month-bar-container {
    background-color: transparent;
    padding: 0 0 1rem 0; /* No horizontal padding, padding at the bottom */
    border-bottom: 1px solid #374151;
    margin-bottom: 1.5rem;
}

.modern-lms-style #tab-curriculum .month-tabs {
    gap: 0.5rem; /* Adjust gap between tabs */
}

/* Style the individual month tabs to be less like buttons */
.modern-lms-style #tab-curriculum .month-bar-button {
    background-color: #374151; /* Darker, less prominent background */
    border: 1px solid #4b5563;
    color: #9ca3af; /* Greyish text */
    font-size: 0.8rem; /* Make font smaller */
    font-weight: 500;
    padding: 0.4rem 0.8rem; /* Smaller padding */
    border-radius: 6px;
    white-space: nowrap;
}

/* Hover state for non-active tabs */
.modern-lms-style #tab-curriculum .month-bar-button:hover {
    background-color: #4b5563;
    color: #ffffff;
}

/* Active state for the selected month tab */
.modern-lms-style #tab-curriculum .month-bar-button.active {
    background-color: #3b82f6; /* Blue accent color */
    border-color: #3b82f6;
    color: #ffffff;
    font-weight: 600;
}

/*
======================================================================
--- STYLES FOR MONTHLY PAYMENT SELECTOR ---
======================================================================
*/
#ssd-monthly-payment-selector {
    margin: 1.5rem 0;
    padding: 1rem;
    background-color: #374151;
    border-radius: 8px;
}
.ssd-form-group-label {
    font-weight: 600;
    color: #e5e7eb;
    margin-bottom: 1rem;
    display: block;
}
.ssd-months-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.ssd-months-checkbox-grid label {
    display: flex;
    align-items: center;
    background-color: #1f2937;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #4b5563;
    transition: all 0.2s ease;
}
.ssd-months-checkbox-grid label:hover {
    background-color: #2b3748;
}
.ssd-months-checkbox-grid label.disabled {
    cursor: not-allowed;
    background-color: #2b3748;
    opacity: 0.6;
}
.ssd-months-checkbox-grid input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 16px;
    height: 16px;
}
.enrolled-badge {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: bold;
    color: #1f2937;
    background-color: #22c55e;
    padding: 2px 6px;
    border-radius: 4px;
}
.ssd-total-price-display {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #4b5563;
    text-align: right;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
}
.price-info .per-month-text {
    font-size: 0.9rem;
    color: #9ca3af;
    margin-left: 0.5rem;
}

/*
============================================================
--- STYLES FOR LOCKED LMS CONTENT ---
============================================================
*/
.lms-content-locked {
    text-align: center;
    padding: 2rem 1rem;
    color: #9ca3af;
    border: 2px dashed #374151;
    border-radius: 8px;
    margin: 1rem;
}
.lms-content-locked .fas.fa-lock {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #4b5563;
}
.lms-content-locked h4 {
    font-size: 1.2rem;
    color: #e5e7eb;
    margin: 0 0 0.5rem 0;
}
.lms-content-locked p {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}
/* This will re-use the existing button style for "Join Now" */
.lms-content-locked .ssd-pro-class-btn {
    font-size: 0.9rem;
}

/*
======================================================================
--- RESPONSIVE PAYMENT MODAL WITH STICKY FOOTER ---
======================================================================
*/

/* --- 1. General Styles --- */
.modal-body-grid {
    display: flex;
    flex-direction: column; /* Default to single column for mobile */
    gap: 1.5rem;
}
.modal-left-column { min-width: 0; }
.modal-right-column { display: flex; flex-direction: column; gap: 1rem; }
.modal-right-column > p { margin-bottom: 0; }
.ssd-modal-content.compact .modal-title { font-size: 1.2rem; color: #3b82f6; margin-top: 0; text-align: center; flex-shrink: 0; margin-bottom: 1rem; }

/* --- 2. Mobile View: Sticky Footer Implementation (max-width: 767px) --- */
@media (max-width: 767px) {
    .ssd-modal-content.compact {
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        padding: 1rem;
    }
    #ssd-receipt-upload-form {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        min-height: 0;
    }
    .modal-scroll-area {
        flex-grow: 1;
        overflow-y: auto;
        min-height: 0;
        padding: 0.5rem;
        margin: 0 -0.5rem;
    }
    .modal-sticky-footer {
        flex-shrink: 0;
        padding-top: 1rem;
        background-color: #1f2937;
        border-top: 1px solid #374151;
        margin: 0 -1rem -1rem -1rem;
        padding: 1rem;
    }
    .ssd-months-checkbox-grid {
        grid-template-columns: 1fr; /* Force single column on very narrow screens */
    }
    @media (min-width: 400px) {
        .ssd-months-checkbox-grid {
             grid-template-columns: 1fr 1fr; /* Two columns on slightly wider mobile screens */
        }
    }
}

/* --- 3. Desktop & Tablet: Two-Column Layout (min-width: 768px) --- */
@media (min-width: 768px) {
    .modal-body-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
    .ssd-modal-content.compact {
        max-width: 850px;
        width: 100%;
    }
    #ssd-monthly-payment-selector {
        height: 100%;
    }
    .modal-right-column .ssd-total-price-display {
        display: none; /* Hide total price from right column on desktop */
    }
    .modal-left-column .ssd-total-price-display {
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid #4b5563;
        text-align: right;
        font-size: 1.1rem;
        font-weight: bold;
        color: #fff;
    }
}

/*
============================================================
--- UNIFIED MODERN SEARCH BAR STYLES ---
============================================================
*/

.ssd-search-form-wrapper {
    margin-bottom: 2rem;
    position: relative;
}

.ssd-live-search-input,
#ssd-multi-search-input { /* Target all search inputs */
    width: 100%;
    padding: 1rem 1.2rem; /* Increased padding */
    padding-left: 3rem; /* Add space for an icon */
    font-size: 1.1rem; /* Increased font size */
    border-radius: 8px;
    border: 1px solid #4b5563;
    background-color: #374151;
    color: #d1d5db;
    transition: all 0.2s ease-in-out;
}

.ssd-live-search-input:focus,
#ssd-multi-search-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
    outline: none;
    background-color: #1f2937;
}

.ssd-live-search-input::placeholder,
#ssd-multi-search-input::placeholder {
    color: #9ca3af;
}

/* Add a search icon inside the bar */
.ssd-search-form-wrapper::before {
    content: '\f002'; /* Font Awesome search icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1.1rem;
    pointer-events: none; /* Make the icon unclickable */
}

/* ===================================== */
/* === Styles for "Login to..." Links === */
/* ===================================== */

/* Style for "Login to Join Class", "Login to Buy/Book" links */
.action-card-content a.action-card-btn {
    display: block; /* Make it take full width like a button */
    padding: 0.8rem 1.5rem; /* Match button padding */
    font-size: 0.95rem; /* Match button font size */
    font-weight: 600; /* Match button font weight */
    color: #ffffff; /* White text */
    background-color: var(--ssd-accent-color, #3b82f6); /* Use accent color */
    border: none;
    border-radius: 6px; /* Match button border radius */
    text-align: center;
    text-decoration: none; /* Remove underline */
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1.5; /* Ensure proper line height */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.action-card-content a.action-card-btn:hover {
    background-color: var(--ssd-accent-color-dark, #2563eb); /* Darker on hover */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    text-decoration: none; /* Ensure no underline on hover */
    color: #ffffff; /* Keep text white on hover */
}

/* Style for "Login to Follow" link on page profiles */
.tutor-actions a.tutor-action-btn {
    display: inline-flex; /* Align icon and text */
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between icon and text */
    padding: 10px 18px; /* Match follow button padding */
    font-size: 0.9rem; /* Match follow button font size */
    font-weight: 500;
    color: #e5e7eb; /* Light text */
    background-color: #22c55e; /* Match follow button background */
    border: 1px solid #4b5563;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tutor-actions a.tutor-action-btn:hover {
    background-color: #22c55e; /* Slightly lighter on hover */
    border-color: #6b7280;
    color: #ffffff; /* White text on hover */
    text-decoration: none;
}

.tutor-actions a.tutor-action-btn i {
    font-size: 0.9em; /* Adjust icon size if needed */
}

/* --- 
    ============================================================
    --- NEW MODERN PROFESSIONAL STYLES ---
    --- (FOR tab-my-pages.php) ---
    ============================================================
--- */

/* --- Base Card Styles --- */
.ssd-card {
    color: #cbd5e0;
}
/* Dark Content Card (for forms and lists) */
.ssd-card.ssd-card-dark {
    background-color: #2d3748;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    border: 1px solid #4a5568;
}
/* Transparent Card (for main title/button) */
.ssd-card.ssd-card-transparent {
    background-color: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}
.ssd-card-title {
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #4a5568;
    padding-bottom: 1rem;
}
.ssd-card-transparent .ssd-card-title {
    border-bottom: none; /* No border for transparent card title */
}

/* --- Modern Button Styles --- */
.ssd-button-update { /* Primary */
    background-color: #3b82f6;
    color: white;
    border: none;
    padding: 0.85rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background-color 0.2s;
}
.ssd-button-update:hover { background-color: #2563eb; }

 .ssd-button-secondary { /* Secondary */
     background-color: #4a5568;
     color: #e2e8f0;
     border: none;
     padding: 0.85rem 1.5rem;
     border-radius: 8px;
     font-weight: 600;
     cursor: pointer;
     font-size: 0.95rem;
     transition: background-color 0.2s;
 }
 .ssd-button-secondary:hover { background-color: #636b77; }

 .ssd-button-danger { /* Danger */
     background-color: #ef4444; 
     color: white; 
     border: none; 
     padding: 0.85rem 1.5rem; 
     border-radius: 8px; 
     cursor: pointer; 
     font-weight: 600; 
     font-size: 0.95rem;
     transition: background-color 0.2s;
     width: 100%; /* Full width */
 }
.ssd-button-danger:hover { background-color: #dc2626; }

/* --- Modern Form Styles ("Page Settings" & "Create Page") --- */
 .ssd-sub-title { 
     font-size: 1.1rem; 
     color: #cbd5e1; 
     margin-top: 2rem; 
     margin-bottom: 1rem; 
     padding-bottom: 0.75rem; 
     border-bottom: 1px solid #4a5568;
 }
 .ssd-sub-title:first-child { margin-top: 0; }
 
 .ssd-form-group { margin-bottom: 1.5rem; }
 .ssd-form-group label { 
     display: block; 
     margin-bottom: 0.5rem; 
     font-weight: 500; 
     font-size: 0.9rem; 
     color: #cbd5e0;
 }
 .ssd-form-group label i { color: #9ca3af; margin-right: 0.35rem; width: 1.2em; }
 .ssd-form-group small { color: #9ca3af; display: block; margin-top: 5px; font-size: 0.8rem; }
 
 /* All input fields */
 .ssd-form-group input[type="text"],
 .ssd-form-group input[type="tel"],
 .ssd-form-group input[type="url"],
 .ssd-form-group input[type="date"],
 .ssd-form-group select,
 .ssd-form-group textarea { 
     width: 100%; 
     padding: 0.75rem 1rem; 
     border-radius: 8px;
     border: 1px solid #636b77;
     background-color: #4a5568;
     color: #e2e8f0;
     font-size: 0.95rem;
     box-sizing: border-box;
     transition: border-color 0.2s, box-shadow 0.2s;
 }
 .ssd-form-group input[type="file"] { 
     background-color: #4a5568; 
     border: 1px solid #636b77;
     padding: 0.6rem;
     color: #cbd5e0;
     font-size: 0.9rem;
 }
 .ssd-form-group input[type="file"]::file-selector-button {
    background-color: #6b7280;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 0.5rem;
    font-weight: 500;
 }
 .ssd-form-group input:focus, 
 .ssd-form-group select:focus, 
 .ssd-form-group textarea:focus { 
     border-color: #3b82f6; 
     box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4); 
     outline: none;
 }
 .ssd-form-group input[disabled] {
     background-color: #374151;
     color: #9ca3af;
     cursor: not-allowed;
 }
 
 .ssd-form-grid { 
     display: grid; 
     grid-template-columns: 1fr; 
     gap: 1.5rem;
 }
 @media(min-width: 768px) { /* Use 768px for tablet */
    .ssd-form-grid { grid-template-columns: 1fr 1fr; } 
    .ssd-button-danger { width: auto; } /* Auto width on desktop */
 }

/* --- "Your Existing Pages" Card List Styles --- */
.ssd-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}
.ssd-profile-card {
    background-color: #2d3748; /* Use main card color */
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid #4a5568;
    display: flex;
    flex-direction: column;
    cursor: default; 
}
.ssd-profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}
.profile-card-clickable-area {
    cursor: pointer; 
    flex-grow: 1;
    text-decoration: none;
    color: inherit;
}
.profile-card-banner { height: 80px; background-size: cover; background-position: center; background-color: #4a5568;}
.profile-card-picture-wrapper { margin-top: -40px; display: flex; justify-content: center; margin-bottom: 0.5rem;}
.profile-card-picture { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 4px solid #2d3748; background-color: #4a5568;}
.profile-card-content { padding: 0 1.5rem 1rem; text-align: center; flex-grow: 1;}
.profile-card-name { margin: 0 0 0.25rem 0; font-size: 1.1rem; color: #fff; font-weight: 600;}
.profile-card-meta { font-size: 0.85rem; color: #a0aec0; margin: 0; line-height: 1.4;}

.profile-card-footer { 
    display: flex; 
    justify-content: stretch; /* Make buttons stretch */
    align-items: center; 
    padding: 1rem; 
    margin-top: auto; 
    border-top: 1px solid #4a5568;
    gap: 0.75rem;
}
.profile-card-footer .tutor-action-btn { 
    padding: 0.5rem 0.8rem; 
    font-size: 0.8rem; 
    border-radius: 6px; 
    background-color: #4a5568; 
    color: #e2e8f0; 
    border: none; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    gap: 0.4rem; 
    flex-grow: 1; /* Make buttons share space */
    transition: background-color 0.2s;
}
.profile-card-footer .tutor-action-btn:hover { background-color: #636b77; }
.profile-card-footer .ssd-my-business-btn { 
    background-color: #10b981; 
    color: white;
}
.profile-card-footer .ssd-my-business-btn:hover { background-color: #059669;}
 
 /* --- Danger Zone --- */
 .danger-zone-box {
    border: 1px solid #ef4444; 
    padding: 1.5rem; 
    border-radius: 8px; 
    background-color: rgba(239, 68, 68, 0.05);
 }
 .danger-zone-box p {
    margin-top:0; 
    color:#fca5a5;
    font-size: 0.9rem;
 }

/* --- 
    STYLES FOR SINGLE PAGE TEMPLATE
    Includes: About Tab, Store Tab, Classes Tab
--- */

/* --- 1. About Tab Styles (Original) --- */
.profile-section { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #374151; }
.profile-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.profile-section h4, .profile-section h5 { color: #cbd5e1; margin-bottom: 0.75rem; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; }
.profile-section h5 { font-size: 0.85rem; margin-top: 1rem; color: #9ca3af;}
.profile-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.profile-detail-item { display: flex; align-items: center; gap: 0.75rem; color: #d1d5db; font-size: 0.95rem; }
.profile-detail-item i { color: #9ca3af; width: 1.2em; text-align: center; }
.profile-social-links a { color: #9ca3af; font-size: 1.5rem; margin-right: 1.5rem; transition: color 0.2s; }
.profile-social-links a:hover { color: #e5e7eb; }
.profile-social-links a:last-child { margin-right: 0; }
.profile-bio-full p, /* Style paragraphs from wpautop */
.profile-section p { line-height: 1.6; color: #d1d5db; margin-top: 0;}

/* Ensure inactive tabs are hidden (can be redundant if main script handles it) */
.page-content-wrapper .page-tab-pane { display: none; } /* Use specific class */
.page-content-wrapper .page-tab-pane.active { display: block; } /* Use specific class */

.ssd-verified-tick {
    color: #3b82f6; /* A nice blue color */
    font-size: 0.8em; /* Make it slightly smaller than the h1 text */
    margin-left: 6px;
    vertical-align: middle; /* Aligns it nicely with the text */
}

/* --- 
    NEW MODERN STYLES FOR STORE & CLASSES TABS
    (Replaces the old styles)
--- */

/* --- 1. Modern Search Bar (Shared) --- */
.ssd-search-form-wrapper {
    margin-bottom: 2rem;
    position: relative; /* Needed for the icon */
}
.ssd-live-search-input {
    width: 100%;
    padding: 1rem 1.2rem;
    padding-left: 3rem; /* Space for icon */
    font-size: 1.1rem;
    border-radius: 8px;
    border: 1px solid #4b5563;
    background-color: #374151;
    color: #d1d5db;
    transition: all 0.2s ease-in-out;
}
.ssd-live-search-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
    outline: none;
    background-color: #1f2937;
}
.ssd-live-search-input::placeholder { color: #9ca3af; }

/* Search icon */
.ssd-search-form-wrapper::before {
    content: '\f002'; /* Font Awesome search icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1.1rem;
    pointer-events: none;
}

/* --- 2. Card Grids (Store & Classes) --- */
/* (Targets the classes you provided) */
.ssd-products-grid, 
.ssd-professional-classes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns on mobile */
    gap: 1rem;
}

/* --- 3. Advanced Card Design (Shared) --- */
.ssd-pro-class-card {
    background-color: #2d3748;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid #4a5568; /* Use new border color */
}
.ssd-pro-class-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.ssd-pro-class-header {
    aspect-ratio: 16 / 9; /* Use 16:9 ratio */
    height: auto; /* Remove fixed height */
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #4a5568; /* Use new border color */
    background-color: #4b5563; /* Keep fallback color */
}

.ssd-pro-class-body {
    padding: 1rem; /* Consistent padding */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ssd-pro-class-title {
    font-size: 1.1rem; /* Larger title */
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ssd-pro-class-meta {
    font-size: 0.85rem;
    color: #a0aec0;
    margin: 0 0 1rem 0;
    display: block; /* Change from flex to block */
}
.ssd-pro-class-meta span {
    /* Remove the pill style, make it plain text */
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.ssd-pro-class-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #4a5568; /* Use new border color */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ssd-pro-class-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #63b3ed; /* Use accent price color */
}
    
/* --- 4. Button Styles --- */

/* Classes Tab Button ("View Class") */
.ssd-pro-class-btn {
    background-color: #3b82f6;
    color: white;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
    box-shadow: 0 4px 15px -5px rgba(59, 130, 246, 0.3);
}
.ssd-pro-class-btn:hover {
    transform: translateY(-2px);
    background-color: #2563eb;
}

/* Store Tab Buttons ("Buy Now" / "Book Now") */
/* (Assuming the loaded content uses these classes from bookstore) */
.bookstore-btn {
    padding: 0.6rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
}
.bookstore-btn:hover {
    transform: translateY(-2px);
}
.bookstore-btn.buy-now {
    background-color: #3b82f6;
    color: white;
    box-shadow: 0 4px 15px -5px rgba(59, 130, 246, 0.3);
}
.bookstore-btn.buy-now:hover {
    background-color: #2563eb;
}
.bookstore-btn.book-now {
    background-color: #eab308;
    color: #1f2937;
    box-shadow: 0 4px 15px -5px rgba(234, 179, 8, 0.3);
}
.bookstore-btn.book-now:hover {
    background-color: #f59e0b;
}

/* --- 5. Empty State --- */
.ssd-empty-state,
#bookstore-no-results,
#all-classes-no-results {
    background-color: #2d3748;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    color: #a0aec0;
}
.ssd-empty-state h4,
#bookstore-no-results h4,
#all-classes-no-results h4 {
    color: #ffffff;
    margin-top: 0;
    font-size: 1.25rem;
}

/* --- 6. Desktop Grid (5 Columns) --- */
@media (min-width: 768px) {
    .ssd-products-grid, 
    .ssd-professional-classes-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.5rem;
    }
}

@media (min-width: 1400px) {
    .ssd-products-grid, 
    .ssd-professional-classes-grid {
        grid-template-columns: repeat(5, 1fr); /* 5 columns */
    }
}
/* === 1. Order History Page Styling === */
.order-history-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.order-list {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first: 1 column */
    gap: 20px;
}

/* On larger screens, show 2 columns */
@media (min-width: 768px) {
    .order-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.order-card {
    background-color: #1f2937; /* Dark card background */
    border: 1px solid #374151;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}

.order-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    padding: 16px 20px;
    background-color: rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #374151;
}

.order-id {
    font-weight: 600;
    color: #e5e7eb;
}

.order-date {
    font-size: 0.875rem;
    color: #9ca3af;
}

.order-card-body {
    padding: 20px;
    flex-grow: 1;
}

.product-name {
    display: block;
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 8px;
}

.order-price {
    font-size: 1rem;
    color: #9ca3af;
}

.order-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background-color: #1a222c; /* Slightly darker footer */
    border-top: 1px solid #374151;
}


/* === 2. Modern Modal Styling === */

.ssd-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 24, 39, 0.8); /* Darker overlay */
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 15px;
}

.ssd-modal-content {
    background-color: #1f2937; /* Card background */
    border: 1px solid #374151;
    border-radius: 16px;
    width: 100%;
    max-width: 650px; /* Wider modal */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Prevent overly tall modal */
}

/* Modal Header */
.ssd-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1px solid #374151;
}

.ssd-modal-header h4 {
    margin: 0;
    color: #fff;
    font-size: 1.25rem;
}

.modal-order-id {
    font-size: 0.9rem;
    color: #9ca3af;
    margin-top: 4px;
}

.modal-header-status {
    margin-left: auto;
    margin-right: 16px;
    padding-top: 4px; /* Align with title */
}

.ssd-modal-close-btn {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 1.75rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s;
}
.ssd-modal-close-btn:hover {
    color: #fff;
}

/* Modal Body */
.ssd-modal-body {
    padding: 24px;
    overflow-y: auto; /* Allow scrolling if content is tall */
    color: #d1d5db;
}

.modal-section {
    margin-bottom: 24px;
}
.modal-section:last-child {
    margin-bottom: 0;
}

.modal-section h5 {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-top: 0;
    margin-bottom: 16px;
    border-bottom: 1px solid #374151;
    padding-bottom: 8px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 576px) {
    .info-grid {
        grid-template-columns: 1fr 1fr; /* 2 columns on larger screens */
    }
}

.info-grid .full-span {
    grid-column: 1 / -1; /* Make address span full width */
}

.info-grid strong {
    color: #9ca3af;
    margin-right: 8px;
}

.info-grid span {
    color: #fff;
}

/* Modal Footer */
.ssd-modal-footer {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    align-items: center;
    padding: 20px 24px;
    background-color: #1a222c; /* Darker footer */
    border-top: 1px solid #374151;
    gap: 12px;
}

/* Button container for approve/reject */
#modal-action-buttons {
    display: flex;
    gap: 12px;
    margin-right: auto; /* Push "Close" button to the far right */
}

/* === 3. General Button Styles (Add or modify existing) === */
.ssd-btn {
    display: inline-block;
    font-weight: 500;
    padding: 9px 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.ssd-btn-outline {
    background-color: transparent;
    border-color: #556172;
    color: #aeb8c5;
}
.ssd-btn-outline:hover {
    background-color: #374151;
    border-color: #6b7280;
    color: #fff;
}

.ssd-btn-secondary {
    background-color: #374151;
    color: #e5e7eb;
}
.ssd-btn-secondary:hover {
    background-color: #4b5563;
}

.ssd-btn-primary {
    background-color: #2563eb; /* Blue accent */
    color: #fff;
}
.ssd-btn-primary:hover {
    background-color: #1d4ed8;
}

.ssd-btn-success {
    background-color: #16a34a; /* Green */
    color: #fff;
}
.ssd-btn-success:hover {
    background-color: #15803d;
}

.ssd-btn-danger {
    background-color: #dc2626; /* Red */
    color: #fff;
}
.ssd-btn-danger:hover {
    background-color: #b91c1c;
}

/* Status Pill (ඔබට දැනටමත් මෙය තිබිය හැක) */
.ssd-status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
}
.ssd-status-pill-approved {
    background-color: rgba(22, 163, 74, 0.1);
    color: #22c55e;
}
.ssd-status-pill-pending {
    background-color: rgba(234, 179, 8, 0.1);
    color: #eab308;
}
.ssd-status-pill-rejected {
    background-color: rgba(220, 38, 38, 0.1);
    color: #ef4444;
}

/* =========================================
   Notification System Styles
   ========================================= */

/* --- Header Icon and Badge --- */
.ssd-header-icon-btn.ssd-notification-btn {
    position: relative;
}

.ssd-notification-count {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: #3b82f6; /* Red */
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid #1f2937; /* Matches mobile header bg */
    box-sizing: border-box;
}

/* Badge position relative to desktop header */
.ssd-content-header .ssd-notification-count {
    border-color: #111827; /* Matches desktop content bg */
}

/* --- Notifications Tab (tab-notifications.php) --- */
.ssd-notification-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ssd-notification-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    background-color: #1f2937; /* gray-800 */
    border: 1px solid #374151; /* gray-700 */
    position: relative;
    overflow: hidden;
    transition: background-color 0.2s ease;
}

.ssd-notification-item.unread {
    background-color: #25344d; /* Slightly lighter blue/gray for unread */
    border-color: #4b5563; /* gray-600 */
}

.ssd-notification-icon {
    flex-shrink: 0;
    margin-top: 4px;
    color: #9ca3af; /* gray-400 */
    width: 40px; /* Set fixed width */
    height: 40px; /* Set fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.ssd-notification-icon .ssd-notification-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #4b5563; /* gray-600 */
}

.ssd-notification-item.unread .ssd-notification-icon svg {
    color: #60a5fa; /* blue-400 */
}

.ssd-notification-content {
    flex-grow: 1;
}

.ssd-notification-sender {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.ssd-notification-sender .ssd-sender-name {
    font-size: 1rem;
    font-weight: 600;
    color: #f3f4f6; /* gray-100 */
}

.ssd-notification-sender .ssd-verified-tick {
    color: #60a5fa; /* blue-400 */
    flex-shrink: 0;
}

.ssd-notification-message {
    margin: 0;
    font-size: 0.9rem;
    color: #d1d5db; /* gray-300 */
    line-height: 1.5;
}

.ssd-notification-message strong {
    color: #f9fafb; /* gray-50 */
    font-weight: 600;
}

.ssd-notification-date {
    font-size: 0.8rem;
    color: #9ca3af; /* gray-400 */
    margin-top: 8px; /* Changed margin-top */
    display: block;
}

.ssd-notification-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #60a5fa; /* blue-400 */
    text-decoration: none;
}
.ssd-notification-link:hover {
    color: #93c5fd; /* blue-300 */
}

.ssd-notification-unread-dot {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #60a5fa; /* blue-400 */
}

/* Empty State for Notifications */
.ssd-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: #9ca3af; /* gray-400 */
}
.ssd-empty-state svg {
    color: #4b5563; /* gray-600 */
    margin-bottom: 16px;
}
.ssd-empty-state h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #d1d5db; /* gray-300 */
    margin: 0 0 8px 0;
}
.ssd-empty-state p {
    font-size: 0.9rem;
    margin: 0;
}

/* =========================================
   Follower/Following List Styles
   ========================================= */

/* --- Follow Counts in Header --- */
.tutor-follow-counts {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.9rem;
    color: #9ca3af; /* gray-400 */
    margin-top: 4px; /* Add some space */
}
.tutor-follow-dot {
    color: #6b7280; /* gray-500 */
    font-weight: 700;
}

/* --- Follow List Container --- */
.ssd-follow-list-container {
    max-width: 600px; /* Constrain width for better readability */
    margin: 0 auto; /* Center the list */
}

.ssd-follow-list-loader {
    text-align: center;
    color: #9ca3af;
    padding: 2rem;
    font-size: 0.9rem;
}

.ssd-follow-list-empty {
    text-align: center;
    color: #9ca3af;
    padding: 2rem;
    font-size: 0.9rem;
}

.ssd-follow-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ssd-follow-list-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background-color: #1f2937; /* gray-800 */
    border: 1px solid #374151; /* gray-700 */
    border-radius: 8px;
}

.ssd-follow-list-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ssd-follow-list-info {
    flex-grow: 1;
    overflow: hidden; /* Prevent long names from breaking layout */
}

.ssd-follow-list-name {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #f3f4f6; /* gray-100 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ssd-follow-list-username {
    display: block;
    font-size: 0.85rem;
    color: #9ca3af; /* gray-400 */
}

.ssd-follow-list-action {
    flex-shrink: 0;
}

/* Smaller follow button for lists */
.tutor-action-btn.small-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.tutor-action-btn.small-btn i {
    margin-right: 4px;
}

/* --- Ensure correct file is loaded --- */
.ssd-fb-profile-view {
    /* This style ensures the profile container has the student ID for JS */
    display: block; 
}

/* --- My Business Button Green Color --- */
.ssd-my-business-btn {
    background-color: #10b981 !important; /* Green */
    border-color: #10b981 !important;
    color: white !important;
}

/* Optional: Darker green on hover */
.ssd-my-business-btn:hover {
    background-color: #0d9268 !important;
    border-color: #0d9268 !important;
}

/*
============================================================
--- Professional Sidebar Toggle Styles (Nov 7, 2025) ---
============================================================
*/

/* 1. Icon Button Style (භාවිතා කළ පොදු style එක) */
.ssd-icon-btn {
    background: transparent;
    border: none;
    color: #9ca3af; /* Secondary text color */
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}
.ssd-icon-btn:hover {
    background-color: #374151; /* Hover effect */
    color: #fff;
}

/* 2. New Sidebar Header (Logo + Menu Button) */
.ssd-sidebar-new-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.5rem 1.25rem 0.75rem; /* Adjusted padding */
    border-bottom: 1px solid #374151; /* Use existing border color */
    margin-bottom: 1rem; /* Space before nav items */
}

.ssd-sidebar-logo {
    height: 40px; 
    width: 40px;
    object-fit: contain;
    border-radius: 8px; /* Telegram look */
}

/* 3. Main Content Toggle Button (මුලින් සඟවා තබයි) */
#ssd-main-content-toggle-btn {
    display: none; /* Hide by default */
    margin-right: 0.5rem; /* Space from other icons */
}

/* 4. Sidebar Nav Adjustments (පැරණි margin ඉවත් කිරීම) */
.ssd-nav {
    margin-top: 0; /* Remove old margin, new header provides it */
}

/* 5. Collapsed State (Desktop Only) */
@media (min-width: 769px) {
    
    /* Sidebar එකට smooth transition එකක් එක් කිරීම */
    .ssd-sidebar {
        /* transform transition එක mobile සඳහා පමණක් තබා, width transition එක desktop සඳහා යෙදීම */
        transition: width 0.3s ease-in-out, padding 0.3s ease-in-out;
        overflow-x: hidden; /* Hide content when shrinking */
    }

    /* Mobile සඳහා transform එක තවමත් ක්‍රියාත්මක වීම */
    @media (max-width: 768px) {
        .ssd-sidebar {
            transition: transform 0.3s ease-in-out;
        }
    }

    .ssd-dashboard-container.ssd-sidebar-collapsed .ssd-sidebar {
        width: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* Sidebar එක තුල ඇති toggle button එක hide කිරීම */
    .ssd-dashboard-container.ssd-sidebar-collapsed .ssd-sidebar-new-header {
        visibility: hidden;
    }
    
    /* Main content එකේ toggle button එක පෙන්වීම */
    .ssd-dashboard-container.ssd-sidebar-collapsed #ssd-main-content-toggle-btn {
        display: flex;
    }
}

/* =========================================
   --- SIDEBAR STYLE OVERRIDE (Nov 7, 2025) ---
   ========================================= */

/* 1. Active tab වර්ණය #3b82f6 (නිල්) සහ සුදු අකුරු ලෙස වෙනස් කිරීම */
.ssd-nav-item.active {
    background-color: #3b82f6 !important; /* !important යෙදීම මගින් පැරණි var() අගය override කිරීම සහතික කරයි */
    color: #ffffff !important;
    font-weight: 600;
}

/* 2. Tabs අතර ඇති පරතරය (gap) අඩු කිරීම */
.ssd-nav-item {
    margin-bottom: 0.25rem; /* Original was 0.5rem */
}

/* 3. Logout බොත්තමට ඉහළින් ඇති "Mehewara Facts" සහ version සඳහා Styles */
.ssd-sidebar-meta-footer {
    padding: 0.5rem 1rem 0.5rem 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: #9ca3af; /* gray-400 */
    border-top: 1px solid #374151; /* Separator line */
    margin-top: 0.5rem; /* Space from the scrolling nav */
}
.ssd-sidebar-meta-footer a {
    color: #9ca3af; /* gray-400 */
    text-decoration: none;
    display: block; /* Make it take its own line */
    margin-bottom: 0.25rem;
    transition: color 0.2s;
}
.ssd-sidebar-meta-footer a:hover {
    color: #e5e7eb; /* gray-200 */
}
.ssd-sidebar-meta-footer span {
    font-size: 0.75rem;
    color: #4b5563; /* gray-600 */
}

/* =========================================
   --- SIDEBAR SCROLL & STYLE OVERRIDE (Nov 7, 2025) ---
   ========================================= */

/* --- 1. Tabs අතර පරතරය අඩු කිරීම --- */
.ssd-nav-item {
    margin-bottom: 0.25rem; /* Original was 0.5rem */
}

/* --- 2. Active tab නිල් පැහැයට හැරවීම --- */
.ssd-nav-item.active {
    background-color: #3b82f6 !important; /* User specified blue color */
    color: #ffffff !important;
}

/* --- 3. සම්පූර්ණ sidebar එක scroll කිරීම --- */

/* (a) ਪੁਰਾਣਾ nav scroll එක ඉවත් කිරීම */
.ssd-nav {
    flex-grow: 0; /* Stop nav from growing */
    overflow-y: visible; /* Stop nav from scrolling */
    margin-top: 0; /* Remove top margin, will be added to parent */
}

/* (b) Mehewara Facts වලින් margin ඉවත් කිරීම */
.ssd-sidebar-meta-footer {
    margin-top: 0; /* Remove top margin */
}

/* (c) සියල්ල scroll වන නව wrapper එක සැකසීම */
.ssd-sidebar-scroll-area {
    flex-grow: 1; /* Make this new wrapper fill the space */
    overflow-y: auto; /* Make THIS wrapper scroll */
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* (d) අභ්‍යන්තර මූලද්‍රව්‍ය (elements) නැවත සකස් කිරීම */
.ssd-sidebar-scroll-area .ssd-nav {
    margin-top: 1.5rem; /* Add original margin back */
    padding: 0 0.75rem 0 1rem; /* (top, right, bottom, left) - Right padding to avoid scrollbar */
}

.ssd-sidebar-scroll-area .ssd-sidebar-meta-footer {
    margin-top: auto; /* This PUSHES the footer block to the bottom */
    padding: 0.5rem 1rem 0.5rem 1rem;
}

.ssd-sidebar-scroll-area .ssd-sidebar-footer {
    padding: 0 1rem 0.5rem 1rem; /* Padding for logout button */
}

/* --- 4. Modern Scrollbar එක සැකසීම --- */
.ssd-sidebar-scroll-area::-webkit-scrollbar {
    width: 6px; /* Scroll bar එකේ පළල */
}

.ssd-sidebar-scroll-area::-webkit-scrollbar-track {
    background: transparent; /* Track එක නොපෙන්වීම */
}

.ssd-sidebar-scroll-area::-webkit-scrollbar-thumb {
    background-color: #4b5563; /* gray-600 */
    border-radius: 20px;
     /* Sidebar එකේ background වර්ණයෙන් padding එකක් වැනි effect එකක් දීම */
    border: 2px solid #1f2937;
}

.ssd-sidebar-scroll-area::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280; /* gray-500 */
}

/* =========================================
   --- MODERN SCROLLBAR (Main Content) ---
   ========================================= */

/* --- ප්‍රධාන content area එකේ scroll bar එක සැකසීම --- */
.ssd-main-content::-webkit-scrollbar {
    width: 6px; /* Scroll bar එකේ පළල */
}

.ssd-main-content::-webkit-scrollbar-track {
    background: transparent; /* Track එක නොපෙන්වීම */
}

.ssd-main-content::-webkit-scrollbar-thumb {
    background-color: #4b5563; /* gray-600 */
    border-radius: 20px;
     /* Content area එකේ background වර්ණයෙන් padding එකක් වැනි effect එකක් දීම */
    border: 2px solid #111827;
}

.ssd-main-content::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280; /* gray-500 */
}

/*
============================================================
--- ADVANCED FULLSCREEN "MEHEWARA FACTS" PAGE STYLES ---
============================================================
*/

/* 1. Main Fullscreen Wrapper */
.ssd-facts-page-wrapper .ssd-main-content {
    background: #111827; /* Solid dark background */
}

.ssd-facts-container {
    width: 100%;
    max-width: 1200px; /* Limit content width */
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem 1.5rem; /* top, sides, bottom */
}

/* 2. Header Section (Logo, Title, Button) */
.ssd-facts-header {
    text-align: center;
    padding: 2rem 0;
    border-bottom: 1px solid #374151;
    margin-bottom: 2.5rem;
}

.ssd-facts-logo-link {
    display: inline-block;
    margin-bottom: 1.5rem;
}

.ssd-facts-logo {
    height: 60px;
    width: auto;
    animation: glow 3s infinite ease-in-out; /* Re-use glowing logo animation */
}

.ssd-facts-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.ssd-facts-header p {
    font-size: 1.1rem;
    color: #9ca3af;
    margin: 0 0 1.5rem 0;
}

.ssd-facts-main-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background-color: #38bdf8; /* Accent color */
    color: #111827; /* Dark text */
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px -5px rgba(56, 189, 248, 0.4);
}
.ssd-facts-main-btn:hover {
    background-color: #7dd3fc;
    box-shadow: 0 6px 20px -5px rgba(56, 189, 248, 0.6);
    transform: translateY(-2px);
}
.ssd-facts-main-btn i {
    font-size: 1rem;
}

/* 3. Main Topics Navigation (Desktop: 3-col horizontal) */
.ssd-facts-main-nav {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 column */
    gap: 1rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .ssd-facts-main-nav {
        grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
        gap: 1.5rem;
    }
}

.ssd-facts-nav-btn {
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    color: #d1d5db;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.ssd-facts-nav-btn:hover {
    background-color: #374151;
    border-color: #4b5563;
    transform: translateY(-5px);
}
.ssd-facts-nav-btn.active {
    background-color: #38bdf8;
    border-color: #38bdf8;
    color: #111827;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(56, 189, 248, 0.15);
}

.ssd-facts-nav-btn i {
    font-size: 1.75rem;
    line-height: 1;
}

.ssd-facts-nav-btn span {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
}
.ssd-facts-nav-btn.active i,
.ssd-facts-nav-btn.active span {
    color: #111827;
}


/* 4. Content Area (Sub-Topics) */
.ssd-facts-tab-pane {
    display: none; /* Hide all panes by default */
}
.ssd-facts-tab-pane.active {
    display: block; /* Show only the active one */
}

/* 5. Sub-Topic Accordion Styles (Re-using from Help Center) */
.ssd-help-center-accordion {
    max-width: 800px; /* Limit width for readability */
    margin: 0 auto;
}
.ssd-accordion-item {
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden; /* For max-height transition */
}
.ssd-accordion-header {
    background-color: transparent;
    border: none;
    width: 100%;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    color: #e5e7eb;
}
.ssd-accordion-header span {
    font-size: 1.05rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ssd-accordion-header i.fa-chevron-down {
    transition: transform 0.3s ease;
}
.ssd-accordion-header.active i.fa-chevron-down {
    transform: rotate(180deg);
}

.ssd-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    font-size: 0.95rem;
    color: #d1d5db;
    line-height: 1.7;
    padding: 0 1.5rem; /* No padding when closed */
}
.ssd-accordion-header.active + .ssd-accordion-content {
    /* This style is now set by JS (facts-page-script.js) */
}
.ssd-accordion-content p {
    margin-top: 0;
    margin-bottom: 1rem;
}
.ssd-accordion-content ul {
    margin-bottom: 1rem;
    padding-left: 20px;
}
.ssd-accordion-content li {
    margin-bottom: 0.5rem;
}

/*
============================================================
--- ADVANCED FULLSCREEN "MEHEWARA FACTS" PAGE STYLES (v2) ---
============================================================
*/

/* 1. Main Fullscreen Wrapper */
/* Ensure the body is dark, and html/body take full height */
html, body {
    background-color: #111827;
}

/* Force the wrapper to be dark, overriding any theme styles */
.ssd-facts-page-v2-wrapper {
    background-color: #111827 !important;
    min-height: 100vh;
}

/* Remove main content constraints for full-screen mode */
.ssd-facts-page-v2-wrapper .ssd-main-content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
}

/* 2. New Public Header (with Social Links) */
.ssd-facts-public-header {
    width: 100%;
    background-color: #1f2937; /* gray-800 */
    border-bottom: 1px solid #374151; /* gray-700 */
    padding: 0.75rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1001; /* Above sticky sidebar */
}

.ssd-facts-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.ssd-facts-header-logo-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.ssd-facts-header-logo {
    height: 32px;
    width: 32px;
    object-fit: contain;
    border-radius: 6px;
}

.ssd-facts-header-logo-link span {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    display: none; /* Hide text on mobile */
}

@media (min-width: 768px) {
    .ssd-facts-header-logo-link span {
        display: block; /* Show text on desktop */
    }
}

.ssd-facts-social-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ssd-facts-social-links a {
    color: #9ca3af; /* gray-400 */
    font-size: 1.1rem;
    padding: 0.5rem;
    display: block;
    transition: color 0.2s;
}
.ssd-facts-social-links a:hover {
    color: #fff;
}

/* 3. New 2-Column Layout (Telegram Style) */
.ssd-facts-container-new {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
}

@media (min-width: 992px) {
    .ssd-facts-container-new {
        display: flex;
        gap: 2rem;
        padding: 2rem;
    }
}

/* 4. Left Sidebar (Main Topics Nav) */
.ssd-facts-sidebar {
    width: 100%;
    flex-shrink: 0;
}

@media (min-width: 992px) {
    .ssd-facts-sidebar {
        width: 300px;
        position: -webkit-sticky;
        position: sticky;
        top: 100px; /* Header height + padding */
        height: calc(100vh - 120px);
        overflow-y: auto;
    }
    /* Simple scrollbar for sidebar */
    .ssd-facts-sidebar::-webkit-scrollbar { width: 4px; }
    .ssd-facts-sidebar::-webkit-scrollbar-thumb { background: #374151; }
}

.ssd-facts-sidebar-nav {
    display: flex;
    flex-direction: row; /* Horizontal on mobile */
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 1rem; /* Space for scrollbar */
    border-bottom: 1px solid #374151;
}

@media (min-width: 992px) {
    .ssd-facts-sidebar-nav {
        flex-direction: column; /* Vertical on desktop */
        overflow-x: hidden;
        border-bottom: none;
        padding-bottom: 0;
    }
}

.ssd-facts-nav-link {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    color: #d1d5db; /* gray-300 */
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap; /* Keep text on one line for mobile scrolling */
    transition: all 0.2s;
}
.ssd-facts-nav-link:hover {
    background-color: #1f2937; /* gray-800 */
}
.ssd-facts-nav-link.active {
    background-color: #38bdf8; /* Accent */
    color: #111827; /* Dark text */
    font-weight: 600;
}

/* 5. Right Content Area (Sub-Topics) */
.ssd-facts-content-new {
    flex-grow: 1;
    min-width: 0; /* Fix for flexbox overflow */
    margin-top: 1.5rem;
}

@media (min-width: 992px) {
    .ssd-facts-content-new {
        margin-top: 0;
    }
}

.ssd-facts-tab-pane-new {
    display: none;
}
.ssd-facts-tab-pane-new.active {
    display: block;
}

.ssd-facts-tab-pane-new h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #374151;
}

/* 6. Re-using Accordion Styles (Already in your file, but with tweaks) */
.ssd-help-center-accordion {
    max-width: 100%; /* Allow full width in this column */
}
.ssd-accordion-item {
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden; /* For max-height transition */
}
.ssd-accordion-header {
    background-color: transparent;
    border: none;
    width: 100%;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    color: #e5e7eb;
}
.ssd-accordion-header span {
    font-size: 1.05rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ssd-accordion-header i.fa-chevron-down {
    transition: transform 0.3s ease;
}
.ssd-accordion-header.active i.fa-chevron-down {
    transform: rotate(180deg);
}
.ssd-accordion-header.active {
    color: #38bdf8; /* Highlight active accordion header */
}

.ssd-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    font-size: 0.95rem;
    color: #d1d5db;
    line-height: 1.7;
    padding: 0 1.5rem; /* No padding when closed */
}
.ssd-accordion-content p {
    margin-top: 0;
    margin-bottom: 1rem;
}
.ssd-accordion-content ul {
    margin-bottom: 1rem;
    padding-left: 20px;
}
.ssd-accordion-content li {
    margin-bottom: 0.5rem;
}

/*
============================================================
--- THEME TOGGLE ICON STYLES ---
============================================================
*/

.ssd-theme-toggle .icon-moon {
    display: none; /* Hide moon icon by default (in dark mode) */
}

.ssd-theme-toggle .icon-sun {
    display: block; /* Show sun icon by default (in dark mode) */
}

/* These styles are in light-theme.css, but adding here for safety */
body.light-mode .ssd-theme-toggle .icon-sun {
    display: none; /* Hide sun icon in light mode */
}

body.light-mode .ssd-theme-toggle .icon-moon {
    display: block; /* Show moon icon in light mode */
}

/* ==========================================================
   DARK MODE FIX: Theme Toggle Icon Visibility
   ========================================================== */

/* Default (Dark Mode): "ඉර" (Sun) පෙන්වීම, "හඳ" (Moon) සඟවා තැබීම */
.ssd-theme-toggle .icon-moon {
    display: none;
}
.ssd-theme-toggle .icon-sun {
    display: inline-block;
}

/*
============================================================
--- BUSINESS PANEL & EARNINGS MOBILE OPTIMIZATION OVERRIDES ---
============================================================
*/

/* --- 1. View Public Page Button FIX (Mobile) --- */
@media (max-width: 768px) {
    /* Hide the original button in the content body */
    .ssd-card.ssd-business-panel .ssd-view-page-btn {
        display: none !important;
    }
    
    /* Create a placeholder area in the mobile header */
    .ssd-mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Inject the button into the Mobile Header Action area */
    #ssd-mobile-header-view-btn {
        display: flex; /* Show the injected button */
        background-color: #3b82f6;
        color: white;
        /* Reduce size by ~30% from the original 0.9rem (14px) size */
        padding: 0.5rem 0.8rem;
        font-size: 0.75rem; 
        font-weight: 500;
        border-radius: 6px;
        transition: background-color 0.2s;
        /* Positioning logic is handled by JS inserting it into the header */
    }

    /* Mobile Header's 'View Public Page' Button Specific Styles */
    .ssd-mobile-header #ssd-mobile-header-view-btn {
        display: inline-block; /* Ensure it is displayed */
    }

    /* FIX: Ensure mobile header has enough space */
    .ssd-mobile-header {
        justify-content: space-between;
    }
}

/* --- 2. Earnings Stat Boxes FIX (2x2 Grid on Mobile) --- */
/* Targeting the existing ssd-ranks-grid which holds the 4 boxes */
@media (max-width: 600px) {
    .ssd-ranks-grid {
        grid-template-columns: 1fr 1fr !important; /* Force 2 columns on mobile */
        gap: 0.6rem; /* Smaller gap */
    }

    /* Small Adjustments for the boxes in the 2x2 grid */
    .ssd-rank-box {
        padding: 0.8rem;
        min-height: 80px; /* Ensure boxes are small but readable */
    }

    /* Reduce text sizes in the boxes */
    .ssd-rank-box p {
        font-size: 0.7rem; /* Smaller label */
        margin-bottom: 0.4rem;
    }
    .ssd-rank-main, .ssd-rank-island {
        font-size: 1.3rem !important; /* Smaller value */
    }

    /* Payout Notice Box (adjust size) */
    .payout-window-notice {
        padding: 0.4rem;
    }
    .payout-window-notice p {
        font-size: 0.7rem !important;
    }
}

/* --- MOBILE EARNINGS GRID LAYOUT FIX (Unchanged) --- */
@media (max-width: 991px) {
    .ssd-earnings-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
    }
    .ssd-earnings-grid .box-available {
        grid-column: 1 / -1; 
    }
    .ssd-earnings-grid .box-pending,
    .ssd-earnings-grid .box-canceled,
    .ssd-earnings-grid .box-withdrawn {
        padding: 0.8rem;
        min-height: 80px; 
    }
    .ssd-earnings-grid .box-pending p,
    .ssd-earnings-grid .box-canceled p,
    .ssd-earnings-grid .box-withdrawn p {
        font-size: 0.7rem;
        margin-bottom: 0.2rem;
    }
    .ssd-earnings-grid .box-pending .ssd-rank-main,
    .ssd-earnings-grid .box-canceled .ssd-rank-main,
    .ssd-earnings-grid .box-withdrawn .ssd-rank-main {
        font-size: 1.3rem !important;
    }
    @media (max-width: 600px) {
         .ssd-earnings-grid {
            grid-template-columns: 1fr 1fr;
            gap: 0.6rem;
        }
    }
}

/* --- MOBILE EARNINGS GRID LAYOUT FIX --- */
/* Desktop (Min 992px): Default 4 columns */

@media (max-width: 991px) {
    /* Tablet/Wide Mobile: Show 2 columns (Available Payout + 3 smaller boxes arranged 1x3) */
    .ssd-earnings-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
    }
    
    /* Available Payout Box must span full width */
    .ssd-earnings-grid .box-available {
        grid-column: 1 / -1; 
    }

    /* Reduce font sizes inside the 3 smaller boxes (Pending, Canceled, Withdrawn) */
    .ssd-earnings-grid .box-pending,
    .ssd-earnings-grid .box-canceled,
    .ssd-earnings-grid .box-withdrawn {
        padding: 0.8rem;
        min-height: 80px; 
    }

    .ssd-earnings-grid .box-pending p,
    .ssd-earnings-grid .box-canceled p,
    .ssd-earnings-grid .box-withdrawn p {
        font-size: 0.7rem; /* Smaller label */
        margin-bottom: 0.2rem;
    }
    
    .ssd-earnings-grid .box-pending .ssd-rank-main,
    .ssd-earnings-grid .box-canceled .ssd-rank-main,
    .ssd-earnings-grid .box-withdrawn .ssd-rank-main {
        font-size: 1.3rem !important; /* Smaller value */
    }

    /* Mobile (Max 600px): Force 2 columns for the smaller boxes */
    @media (max-width: 600px) {
         .ssd-earnings-grid {
            /* Keep available payout spanning 100% width, others follow 2x2 grid */
            grid-template-columns: 1fr 1fr;
            gap: 0.6rem;
        }
    }
}

/* --- INNER TAB BAR OPTIMIZATION --- */
.ssd-inner-tabs.earnings-tabs {
    /* Make bar horizontally scrollable on small screens */
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none;
    padding-bottom: 5px; /* Add space for the bottom line */
}
.ssd-inner-tabs.earnings-tabs::-webkit-scrollbar {
    display: none;
}

.ssd-inner-tabs.earnings-tabs .ssd-inner-tab-btn {
    /* Reduce padding and font size for mobile fit */
    padding: 0.5rem 0.6rem; 
    font-size: 0.8rem;
    margin-right: 0.2rem;
}

/* ==========================================================================
   SMART STUDENT DASHBOARD - PROFESSIONAL CLASS BUILDER (FULL SCREEN)
   ========================================================================== */

/* --- 1. Main Full Screen Container --- */
.ssd-class-builder-wrapper.professional-builder {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important; /* Top of everything */
    background-color: #1a202c; /* Dark Background */
    color: #e2e8f0;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

/* WordPress Admin Bar Offset fix */
body.admin-bar .ssd-class-builder-wrapper.professional-builder {
    top: 32px;
    height: calc(100vh - 32px) !important;
}
@media (max-width: 782px) {
    body.admin-bar .ssd-class-builder-wrapper.professional-builder {
        top: 46px;
        height: calc(100vh - 46px) !important;
    }
}

/* --- 2. Builder Header --- */
.builder-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background-color: #2d3748;
    border-bottom: 1px solid #4a5568;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.builder-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ssd-back-to-manage-classes.ssd-button-secondary {
    background-color: #4a5568;
    color: #e2e8f0;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.2s;
}
.ssd-back-to-manage-classes.ssd-button-secondary:hover {
    background-color: #718096;
    color: #fff;
}

/* --- 3. Monthly Builder Tabs (Horizontal Scroll) --- */
.month-bar-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background-color: #1a202c;
    border-bottom: 1px solid #4a5568;
    padding: 0.5rem 1rem;
}

.add-month-btn {
    background-color: #38a169;
    color: #fff;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    margin-right: 1rem;
    white-space: nowrap;
    transition: background-color 0.2s;
}
.add-month-btn:hover {
    background-color: #2f855a;
}

.month-tabs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 4px;
    /* Hide Scrollbar */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.month-tabs::-webkit-scrollbar { display: none; }

.month-bar-button {
    background-color: #2d3748;
    color: #a0aec0;
    border: 1px solid #4a5568;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}
.month-bar-button:hover {
    background-color: #4a5568;
    color: #fff;
}
.month-bar-button.active {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

/* --- 4. Mobile Tab Switcher (Hidden on Desktop) --- */
.builder-mobile-tabs {
    display: none;
    grid-template-columns: 1fr 1fr;
    background-color: #2d3748;
    border-bottom: 1px solid #4a5568;
    flex-shrink: 0;
}
.builder-mobile-tab-btn {
    padding: 1rem;
    background: none;
    border: none;
    color: #9ca3af;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}
.builder-mobile-tab-btn.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.1);
}
.builder-mobile-tab-btn:disabled {
    color: #4a5568;
    cursor: not-allowed;
}

/* --- 5. Layout (Sidebar + Main Content) --- */
.builder-content-wrapper {
    display: flex;
    flex-grow: 1;
    overflow: hidden; /* Prevent double scrollbars */
}

/* Sidebar */
.builder-sidebar {
    width: 380px;
    background-color: #232b38; /* Slightly lighter dark */
    border-right: 1px solid #4a5568;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.curriculum-list-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
}

/* Sidebar Footer */
.sidebar-footer {
    flex-shrink: 0;
    padding: 1rem;
    background-color: #2d3748;
    border-top: 1px solid #4a5568;
}
.sidebar-footer input {
    width: 100%;
    background-color: #1a202c;
    border: 1px solid #4a5568;
    color: #fff;
    padding: 0.6rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}
.sidebar-footer input:focus {
    border-color: #3b82f6;
    outline: none;
}
.sidebar-footer .ssd-btn {
    width: 100%;
    padding: 0.6rem;
}

/* Main Content (Editor Pane) */
.builder-main-content {
    flex-grow: 1;
    background-color: #1a202c;
    overflow-y: auto;
    position: relative;
}
#lesson-pane-wrapper {
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

/* --- 6. UI Components: Sections & Lessons --- */
.section-item {
    background-color: #2d3748;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid #4a5568;
    overflow: hidden;
    transition: border-color 0.2s;
}
.section-item:hover {
    border-color: #636b77;
}

.section-header {
    padding: 0.8rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: #333c4d;
}
.section-header:hover {
    background-color: #3b4658;
}
.section-title {
    font-weight: 600;
    color: #e2e8f0;
}

.section-toggle {
    transition: transform 0.3s ease;
}
.section-item.open .section-toggle {
    transform: rotate(180deg);
}

.lesson-items {
    display: none; /* Hidden by default */
    padding: 0.5rem;
    background-color: #262f3e;
}
.section-item.open .lesson-items {
    display: block;
}

.lesson-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.25rem;
    border-radius: 6px;
    cursor: pointer;
    color: #a0aec0;
    transition: all 0.2s;
}
.lesson-item:hover {
    background-color: #3b82f6;
    color: #fff;
}
.lesson-item:hover .lesson-icon {
    color: #fff;
}
.lesson-icon {
    color: #63b3ed;
}

.builder-item-actions {
    display: flex;
    gap: 0.8rem;
    opacity: 0.6;
}
.section-header:hover .builder-item-actions,
.lesson-item:hover .builder-item-actions {
    opacity: 1;
}
.builder-item-actions i:hover {
    color: #f56565; /* Red for delete */
}
.builder-item-actions i.edit-item-btn:hover {
    color: #ecc94b; /* Yellow for edit */
}

.add-lesson-btn {
    width: 100%;
    background: transparent;
    border: 2px dashed #4a5568;
    color: #9ca3af;
    padding: 0.6rem;
    border-radius: 6px;
    margin-top: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}
.add-lesson-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.05);
}

/* --- 7. Empty States & Placeholders --- */
.no-lesson-selected, .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #718096;
    padding: 2rem;
}
.no-lesson-selected img, .empty-state img {
    max-width: 150px;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}
.no-lesson-selected h4 {
    color: #e2e8f0;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

/* --- 8. Modals (Lesson Type & Month) --- */
.ssd-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000000; /* Higher than builder */
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
}
.ssd-modal-content {
    background-color: #2d3748;
    padding: 2rem;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    color: #e2e8f0;
    border: 1px solid #4a5568;
}
.ssd-modal-close {
    position: absolute;
    top: 1rem; right: 1rem;
    background: none; border: none;
    color: #a0aec0;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Lesson Type Grid */
.lesson-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.lesson-type-item {
    background-color: #1a202c;
    border: 1px solid #4a5568;
    border-radius: 8px;
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}
.lesson-type-item:hover {
    transform: translateY(-3px);
    border-color: #3b82f6;
    background-color: #232b38;
}
.lesson-type-item i {
    font-size: 2rem;
    color: #3b82f6;
    margin-bottom: 0.5rem;
}
.lesson-type-item.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Month Grid */
.month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin: 1rem 0;
}
.month-grid-button {
    padding: 0.8rem;
    background-color: #1a202c;
    border: 1px solid #4a5568;
    color: #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
}
.month-grid-button.selected {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

/* --- 9. Mobile Responsiveness --- */
@media (max-width: 768px) {
    /* Enable Mobile Tabs */
    .builder-mobile-tabs {
        display: grid;
    }

    /* Adjust Header */
    .builder-header {
        padding: 0.5rem 1rem;
    }
    .builder-header h3 {
        font-size: 1rem;
    }

    /* Stack Layout */
    .builder-content-wrapper {
        flex-direction: column;
    }

    /* Logic to Hide/Show panes based on mobile tabs */
    .builder-sidebar, 
    .builder-main-content {
        width: 100%;
        height: 100%;
        display: none; /* Hidden by default on mobile */
    }
    
    /* Only show active pane */
    .mobile-tab-content.active {
        display: flex;
        flex-direction: column;
    }

    /* Adjust sidebar footer for mobile */
    .sidebar-footer {
        margin-top: auto;
    }
    
    /* Hide back button on main builder header to save space if needed, 
       or keep it. Keeping it is better UX. */
    
    /* Add Back button inside Editor Pane for Mobile (Added via JS) */
    .pane-back-btn {
        display: inline-block;
        margin-bottom: 1rem;
    }
}

/* ==========================================================================
   FIXED MODAL STYLES (CENTERED, RESPONSIVE & HIDDEN BY DEFAULT)
   ========================================================================== */

/* 1. Main Overlay Settings */
.ssd-modal-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.85); /* Darker background */
    z-index: 10000000 !important; /* Always on top */
    
    /* Flexbox for Centering */
    align-items: center;
    justify-content: center;
    
    backdrop-filter: blur(4px);
    padding: 1rem;
    box-sizing: border-box;
    
    /* IMPORTANT: Removed 'display: flex !important' to allow JS to toggle visibility */
}

/* Ensure proper centering when JS sets display to flex or block */
.ssd-modal-overlay[style*="display: block"],
.ssd-modal-overlay[style*="display: flex"] {
    display: flex !important; /* Force Flex layout ONLY when visible */
}

/* 2. Modal Content Box */
.ssd-modal-content {
    background-color: #2d3748;
    padding: 2rem;
    border-radius: 16px;
    width: 100%;
    max-width: 600px; /* Desktop max width */
    position: relative;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    color: #e2e8f0;
    border: 1px solid #4a5568;
    max-height: 90vh;
    overflow-y: auto;
    margin: auto; /* Ensures centering in all contexts */
    animation: ssdModalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Animation */
@keyframes ssdModalPop {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* Header Styles */
.ssd-modal-content h4 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #fff;
    text-align: center;
}
.ssd-modal-content p {
    color: #a0aec0;
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Close Button */
.ssd-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: #718096;
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    z-index: 10;
}
.ssd-modal-close:hover { color: #fff; }

/* --- LESSON TYPE GRID (Class Builder) --- */
.lesson-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.lesson-type-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background-color: #1a202c;
    border: 1px solid #4a5568;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.lesson-type-item:hover:not(.disabled) {
    transform: translateY(-4px);
    border-color: #3b82f6;
    background-color: #232b38;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
.lesson-type-item i {
    font-size: 2rem;
    color: #3b82f6;
    margin-bottom: 0.8rem;
}
.lesson-type-item span {
    font-weight: 600;
    font-size: 0.9rem;
    color: #e2e8f0;
}

/* --- MONTHLY CALENDAR STYLES --- */
.month-calendar-selector {
    padding: 1rem;
    background-color: #1a202c;
    border-radius: 12px;
    margin-bottom: 1.2rem;
    border: 1px solid #4a5568;
}
.month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-top: 1rem;
}
.month-grid-button {
    padding: 0.8rem 0;
    background-color: #2d3748;
    border: 1px solid #4a5568;
    border-radius: 8px;
    color: #cbd5e0;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.month-grid-button:hover { background-color: #4a5568; color: white; }
.month-grid-button.selected {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

/* ==========================================================================
   MOBILE OPTIMIZATIONS (Scale Down & Layout Fix)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* 1. Modal Box Sizing */
    .ssd-modal-content {
        width: 90% !important;
        max-width: 380px !important;
        padding: 1.5rem 1rem !important;
    }

    .ssd-modal-content h4 { font-size: 1.2rem; }
    .ssd-modal-content p { font-size: 0.85rem; margin-bottom: 1rem; }

    /* 2. Lesson Grid - Compact */
    .lesson-type-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    .lesson-type-item {
        padding: 0.8rem 0.4rem !important;
        border-radius: 8px;
    }
    .lesson-type-item i {
        font-size: 1.4rem !important;
        margin-bottom: 0.4rem;
    }
    .lesson-type-item span {
        font-size: 0.7rem !important;
        line-height: 1.1;
    }

    /* 3. Month Selector - Compact */
    .month-calendar-selector { padding: 0.8rem; }
    .month-grid { gap: 0.4rem; }
    .month-grid-button {
        padding: 0.5rem 0 !important;
        font-size: 0.8rem;
    }
    #new-year-select {
        padding: 0.4rem !important;
        font-size: 0.9rem;
        margin-bottom: 0.8rem !important;
    }
    #confirm-add-month-btn {
        padding: 0.6rem;
        font-size: 0.9rem;
    }
}

/* Extra Small Screens */
@media (max-width: 380px) {
    .lesson-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================
   MOBILE LESSON EDITOR FIXES
   ========================================================== */
@media (max-width: 768px) {

    /* 1. Remove the Curriculum (Back) Button */
    .pane-header .pane-back-btn {
        display: none !important;
    }

    /* 2. Fix Header Layout (Title & Save Button) */
    .pane-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 1.5rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 1px solid #374151;
    }

    /* 3. Reduce Text Size (~10% Smaller) */
    .pane-header h4 {
        font-size: 1rem !important; /* Reduced from 1.2rem */
        margin: 0 !important;
        white-space: nowrap;
    }

    .pane-header .save-lesson-btn {
        font-size: 0.85rem !important; /* Reduced size */
        padding: 0.5rem 1rem !important;
        width: auto !important; /* Prevent it from being squished */
    }

    /* 4. Fix Input Fields Width (Make them wider) */
    #lesson-pane-wrapper {
        padding: 1rem 0.5rem !important; /* Reduce wrapper padding */
        width: 100% !important;
        box-sizing: border-box;
    }

    .lesson-pane {
        width: 100% !important;
        display: block !important; /* Ensure it takes full width */
    }

    /* Force inputs to fill the screen width */
    .lesson-pane input[type="text"],
    .lesson-pane textarea,
    .lesson-pane select,
    .ssd-form-group input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Fix Label Positions */
    .ssd-form-group label {
        margin-left: 0 !important;
        display: block !important;
        width: 100% !important;
    }
}

/*
============================================================
--- DESKTOP PROFILE LAYOUT FIX V2 (Keep FB Style) ---
============================================================
*/

/* This targets desktop view (768px) and above */
@media (min-width: 768px) {

    /* 1. Overlap එකට හේතු වූ negative margin එක ඉවත් කිරීම */
    .ssd-fb-profile-view .tutor-header-content {
        margin-top: 0; /* This removes the -50px overlap */
        padding-top: 1.5rem; /* Banner එක සහ content එක අතර ඉඩක් තැබීම */
    }

    /* 2. Profile Picture එකේ border වර්ණය නිවැරදි කිරීම */
    .ssd-fb-profile-view .tutor-profile-picture {
        /* හි තිබූ #1f2937 වර්ණයම නැවත යෙදීම */
        border-color: #1f2937;
    }

    /* 3. නම සහ Tabs අතර වෙන්වීමක් සෑදීම */
    .ssd-fb-profile-view .tutor-info-actions-wrapper {
        border-bottom: 1px solid #374151; /* */
        padding-bottom: 1.5rem; /* */
    }

    /* 4. Tabs වලට ඉහළින් ඇති අනවශ්‍ය ඉර ඉවත් කිරීම */
    .ssd-fb-profile-view .tutor-tabs-nav-wrapper {
        border-bottom: none; /* */
    }
}
/*
============================================================
--- DESKTOP PROFILE LAYOUT FIX V3 (Reduce Gaps) ---
============================================================
*/

/* This targets desktop view (768px) and above */
@media (min-width: 768px) {

    /* 1. Banner එක සහ content එක අතර ඉඩ අඩු කිරීම */
    .ssd-fb-profile-view .tutor-header-content {
        padding-top: 0.1rem; /* Default fix was 1.5rem */
    }

    /* 2. නම/Bio එක සහ Tabs අතර ඉඩ අඩු කිරීම */
    .ssd-fb-profile-view .tutor-info-actions-wrapper {
        padding-bottom: 0.1rem; /* Default fix was 1.5rem */
    }
}

/*
============================================================
--- CUSTOM VERIFIED ICON UPDATE ---
============================================================
*/

/* 1. Hide the old FontAwesome icon if it was used */
.ssd-verified-tick, 
.fa-check-circle.text-blue-500,
.verification-badge i {
    /* Instead of display:none, we override the content/background */
    display: inline-block;
    width: 16px;  /* Adjust size as needed */
    height: 16px; /* Adjust size as needed */
    background-image: url('https://mehewara.lk/wp-content/uploads/2025/11/verify.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-left: 4px;
    
    /* Remove FontAwesome specific styles */
    font-family: sans-serif !important; 
    content: "" !important; /* Remove the icon character */
    color: transparent !important; /* Hide any text color */
}

/* Ensure it overrides FontAwesome's ::before */
.ssd-verified-tick::before,
.fa-check-circle::before {
    content: none !important;
    display: none !important;
}

/* Specific fix for larger profile headers */
.ssd-fb-profile-view h1 .ssd-verified-tick,
.profile-card-name .ssd-verified-tick {
    width: 20px;
    height: 20px;
}

/* ============================================================
   --- FIX: REMOVE GAP BETWEEN HEADER & COVER PHOTO (MOBILE) ---
   ============================================================ */

@media (max-width: 768px) {
    
    /* Profile & Page Container එක ඉහළට ඇද ගැනීම */
    .ssd-fb-profile-view .tutor-profile-container {
        /* Top padding එක ඉවත් කිරීමට negative margin භාවිතා කිරීම */
        margin-top: -1.5rem !important; 
        
        /* දෙපස (Left/Right) සම්පූර්ණ තිරය ආවරණය කිරීමට */
        margin-left: -1.5rem !important;
        margin-right: -1.5rem !important;
        
        /* Width එක නිවැරදිව සැකසීම */
        width: calc(100% + 3rem) !important;
    }

    /* Cover Photo එකේ මුලු ඉහළ කොටසම තියුණු (Sharp) කිරීම */
    .ssd-fb-profile-view .tutor-cover-photo {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }
}

/* ============================================================
   --- FIX: REDUCE GAP BETWEEN BUTTONS & TABS (MOBILE) ---
   ============================================================ */

@media (max-width: 768px) {
    
    /* Buttons අඩංගු කොටසේ පහළ පරතරය ඉවත් කිරීම */
    .ssd-fb-profile-view .tutor-info-actions-wrapper {
        padding-bottom: 0 !important; /* තිබූ ලොකු පරතරය ඉවත් කරයි */
        border-bottom: none !important; /* Buttons වලට යටින් ඇති ඉර ඉවත් කරයි (අවශ්‍ය නම් තබාගන්න) */
        margin-bottom: 0.5rem !important; /* කුඩා පරතරයක් පමණක් තබයි */
    }

    /* Tabs පටන් ගන්නා තැන margin ඉවත් කිරීම */
    .ssd-fb-profile-view .tutor-tabs-nav-wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: 1px solid #374151; /* Tabs වලට උඩින් ඉරක් එක් කරයි (වඩා හොඳ පෙනුමක් සඳහා) */
    }
    
    /* Tabs වල උස (Height) තරමක් අඩු කිරීම (Optional) */
    .ssd-fb-profile-view .tutor-tab-btn {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}

/* --- Message/Chat Button Style (Green) --- */
.tutor-action-btn.ssd-start-chat-btn {
    background-color: #10b981; /* Green */
    color: #ffffff;
    border: none;
}
.tutor-action-btn.ssd-start-chat-btn:hover {
    background-color: #059669; /* Darker Green */
}

.ssd-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none; 
    justify-content: center;
    align-items: center;
    z-index: 999999 !important; /* ඉතා ඉහළ අගයක් ලබා දෙන්න */
    backdrop-filter: blur(3px);
}

.ssd-modal-content {
    background: #1f2937;
    padding: 2rem;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border: 1px solid #374151;
    position: relative; /* Content එක position කිරීමට */
}

/* =========================================
   1. ADMIN MANAGEMENT SECTION (Modern UI)
   ========================================= */

/* Main Container Styling */
.ssd-admin-management-section {
    background: rgba(31, 41, 55, 0.4); /* Semi-transparent dark */
    border: 1px solid #374151;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ssd-sub-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #f3f4f6;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Search Bar Area */
.ssd-admin-search-wrapper {
    background: #1f2937;
    padding: 1.25rem;
    border-radius: 10px;
    border: 1px solid #374151;
    margin-bottom: 1.5rem;
    position: relative;
}

.ssd-search-input-group {
    display: flex;
    gap: 10px;
}

.ssd-search-input-group input {
    flex-grow: 1;
    background: #111827;
    border: 1px solid #4b5563;
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.ssd-search-input-group input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Search Results Dropdown */
#ssd-admin-search-results {
    margin-top: 10px;
    max-height: 0; /* Hidden by default */
    transition: max-height 0.3s ease;
}

#ssd-admin-search-results:not(:empty) {
    max-height: 300px; /* Slide down effect */
}

#ssd-admin-search-results ul {
    background: #111827;
    border: 1px solid #374151;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#ssd-admin-search-results li {
    padding: 12px 15px;
    border-bottom: 1px solid #1f2937;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

#ssd-admin-search-results li:hover {
    background: #1f2937;
}

/* --- Current Admin List --- */
.ssd-admin-list {
    background: #111827;
    border-radius: 10px;
    border: 1px solid #374151;
    overflow: hidden;
}

.ssd-admin-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #1f2937;
    transition: background 0.2s;
}

.ssd-admin-item:last-child {
    border-bottom: none;
}

.ssd-admin-item:hover {
    background: rgba(31, 41, 55, 0.5);
}

.ssd-admin-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ssd-admin-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #374151;
    object-fit: cover;
}

.ssd-admin-details h4 {
    margin: 0;
    color: #f3f4f6;
    font-size: 0.95rem;
    font-weight: 500;
}

.ssd-admin-details span {
    color: #9ca3af;
    font-size: 0.8rem;
}

.ssd-admin-actions {
    display: flex;
    gap: 8px;
}

/* =========================================
   2. MAKE OWNER POPUP (Modern Modal)
   ========================================= */

/* Overlay with Blur Effect */
.ssd-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Darker overlay */
    backdrop-filter: blur(5px); /* Glass effect */
    z-index: 999999 !important;
    display: none; /* Flex toggled via JS */
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    animation: ssdFadeIn 0.3s forwards; /* Entrance Animation */
}

/* Modal Content Box */
.ssd-modal-content {
    background: #1f2937;
    width: 100%;
    max-width: 450px;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid #374151;
    position: relative;
    transform: scale(0.95);
    animation: ssdScaleUp 0.3s 0.1s forwards; /* Pop-up Animation */
}

/* Modal Header & Icon */
.ssd-modal-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.ssd-warning-icon-wrapper {
    width: 60px;
    height: 60px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
}

.ssd-warning-icon-wrapper i {
    font-size: 24px;
    color: #ef4444;
}

.ssd-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem 0;
}

.ssd-modal-desc {
    color: #9ca3af;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Modal Input Field */
.ssd-modal-input-group {
    margin-bottom: 1.5rem;
}

.ssd-modal-input-group label {
    display: block;
    color: #d1d5db;
    font-size: 0.9rem;
    margin-bottom: 8px;
    font-weight: 500;
}

.ssd-modal-input {
    width: 100%;
    padding: 12px;
    background: #111827;
    border: 1px solid #374151;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: border 0.3s;
}

.ssd-modal-input:focus {
    border-color: #ef4444; /* Red border for critical action */
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Modal Buttons */
.ssd-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ssd-modal-btn {
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: none;
    transition: transform 0.1s;
}

.ssd-modal-btn:active {
    transform: scale(0.98);
}

.ssd-btn-cancel {
    background: #374151;
    color: #fff;
}

.ssd-btn-cancel:hover {
    background: #4b5563;
}

.ssd-btn-confirm {
    background: #ef4444;
    color: #fff;
}

.ssd-btn-confirm:hover {
    background: #dc2626;
}

/* --- Animations --- */
@keyframes ssdFadeIn {
    to { opacity: 1; }
}

@keyframes ssdScaleUp {
    to { transform: scale(1); }
}

/* =========================================
   3. MOBILE RESPONSIVE DESIGN (Mobile UI)
   ========================================= */

@media (max-width: 600px) {
    /* Admin Section Adjustments */
    .ssd-admin-management-section {
        padding: 1rem;
    }

    .ssd-search-input-group {
        flex-direction: column;
    }

    .ssd-search-input-group button {
        width: 100%;
        padding: 12px;
    }

    /* Admin List Items Stack */
    .ssd-admin-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .ssd-admin-actions {
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }

    .ssd-admin-actions button {
        flex: 1; /* Buttons take full width */
        justify-content: center;
        padding: 8px;
    }

    /* Modal Mobile */
    .ssd-modal-content {
        padding: 1.5rem;
        width: 95%; /* Wider on mobile */
    }

    .ssd-modal-actions {
        grid-template-columns: 1fr; /* Stack buttons */
    }
    
    .ssd-modal-actions button {
        width: 100%;
    }
}

.ssd-action-btn-warning {
    background-color: #f59e0b !important;
    color: #000 !important; /* Black text for better visibility on yellow */
}

/* --- Affiliate Posts Grid --- */
.ssd-affiliate-posts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Desktop: 4 Columns */
    gap: 1.5rem;
    margin-top: 1rem;
}

.ssd-affiliate-post-card {
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ssd-affiliate-post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    border-color: #4b5563;
}

.post-card-image {
    height: 150px;
    background-size: cover;
    background-position: center;
    width: 100%;
}

.post-card-content {
    padding: 1rem;
}

.post-card-content h4 {
    margin: 0 0 5px 0;
    color: #f3f4f6;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-preview-text {
    color: #9ca3af;
    font-size: 0.8rem;
    margin-bottom: 10px;
    line-height: 1.4;
}

.ssd-view-post-btn {
    width: 100%;
    padding: 6px;
    background: #374151;
    border: none;
    color: #d1d5db;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s;
}

.ssd-affiliate-post-card:hover .ssd-view-post-btn {
    background: #3b82f6;
    color: white;
}

/* --- Mobile Responsive (2 Columns) --- */
@media (max-width: 768px) {
    .ssd-affiliate-posts-grid {
        grid-template-columns: repeat(2, 1fr); /* Mobile: 2 Columns */
        gap: 10px;
    }
    
    .post-card-image {
        height: 120px;
    }
    
    .post-card-content {
        padding: 0.8rem;
    }
    
    .post-card-content h4 {
        font-size: 0.85rem;
    }
    
    .post-preview-text {
        display: none; /* Hide text preview on mobile to save space */
    }
}

/* --- FLOATING CART BUTTON --- */
#ssd-floating-cart-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #3b82f6; /* Primary Blue */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    cursor: pointer;
    z-index: 9990;
    font-size: 1.5rem;
    transition: transform 0.2s, background-color 0.2s;
}
#ssd-floating-cart-btn:hover {
    transform: scale(1.1);
    background-color: #2563eb;
}
#ssd-cart-count-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ef4444; /* Red */
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #1f2937;
}

/* --- CART OVERLAY --- */
#ssd-cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    z-index: 9998;
    display: none; /* Hidden by default */
    opacity: 0;
    transition: opacity 0.3s ease;
}
#ssd-cart-overlay.active {
    display: block;
    opacity: 1;
}

/* --- CART DRAWER (Common) --- */
#ssd-cart-drawer {
    position: fixed;
    background-color: #1f2937; /* Dark theme bg */
    z-index: 9999;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- DESKTOP: RIGHT SIDEBAR --- */
@media (min-width: 768px) {
    #ssd-cart-drawer {
        top: 0;
        right: 0;
        width: 400px;
        height: 100%;
        transform: translateX(100%); /* Hidden to right */
        border-left: 1px solid #374151;
    }
    #ssd-cart-drawer.open {
        transform: translateX(0);
    }
}

/* --- MOBILE: BOTTOM SHEET --- */
@media (max-width: 767px) {
    #ssd-cart-drawer {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 85vh; /* Takes up 85% of screen */
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        transform: translateY(100%); /* Hidden to bottom */
        border-top: 1px solid #374151;
    }
    #ssd-cart-drawer.open {
        transform: translateY(0);
    }
}

/* --- CART CONTENT STYLES --- */
.ssd-cart-header {
    padding: 1.5rem;
    border-bottom: 1px solid #374151;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #111827;
    border-top-left-radius: 20px; /* For mobile */
    border-top-right-radius: 20px; /* For mobile */
}
.ssd-cart-header h3 {
    margin: 0;
    color: #fff;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ssd-close-cart-btn {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}
.ssd-close-cart-btn:hover { color: #fff; }

#ssd-cart-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.ssd-cart-loader {
    text-align: center;
    color: #9ca3af;
    margin-top: 2rem;
    font-size: 1.1rem;
}

/* Scrollbar for Cart */
#ssd-cart-content::-webkit-scrollbar { width: 6px; }
#ssd-cart-content::-webkit-scrollbar-thumb { background-color: #4b5563; border-radius: 3px; }

/* Floating Cart Button (Bottom Right) */
#ssd-floating-cart-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex; /* Hidden by default in PHP, shown by JS */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    cursor: pointer;
    z-index: 9990;
    font-size: 1.5rem;
    transition: transform 0.2s;
}
#ssd-floating-cart-btn:hover {
    transform: scale(1.1);
    background-color: #2563eb;
}
#ssd-cart-count-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ef4444;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #1f2937;
}

/* Cart Remove Button */
.ssd-cart-remove-btn {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 5px;
    font-size: 1rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.ssd-cart-remove-btn:hover {
    opacity: 1;
    color: #dc2626;
}

/* Empty State */
.ssd-empty-cart {
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
}
.ssd-empty-cart i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* --- CART DRAWER STYLES (FIXED DESIGN) --- */

/* Cart Header */
.ssd-cart-header {
    padding: 1.25rem;
    border-bottom: 1px solid #374151;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #111827;
    color: #fff;
}
.ssd-cart-header h3 {
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Cart Content Area */
#ssd-cart-content {
    padding: 1rem;
    overflow-y: auto;
    height: calc(100% - 60px); /* Adjust based on header height */
    background-color: #1f2937; /* Ensure dark background */
}

/* Seller Group Box */
.ssd-cart-seller-group {
    background-color: #111827; /* Slightly darker than drawer */
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.ssd-cart-seller-header {
    font-size: 0.9rem;
    color: #fbbf24; /* Amber color for seller name */
    border-bottom: 1px solid #374151;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

/* --- CART ITEM ROW (The Fix) --- */
.ssd-cart-item {
    display: flex;           /* Flexbox to align image and text side-by-side */
    align-items: center;     /* Vertically center */
    gap: 12px;               /* Space between elements */
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #374151;
}
.ssd-cart-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Thumbnail Image Fix */
.ssd-cart-thumb {
    width: 60px;             /* Fixed width */
    height: 60px;            /* Fixed height */
    border-radius: 6px;
    object-fit: cover;       /* Crop image nicely */
    flex-shrink: 0;          /* Prevent shrinking */
    border: 1px solid #4b5563;
}

/* Text Details Area */
.ssd-cart-details {
    flex-grow: 1;            /* Take up remaining space */
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;        /* Prevent text overflow */
}

.ssd-cart-p-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f3f4f6;          /* White text */
    line-height: 1.2;
    margin-bottom: 2px;
}

.ssd-cart-p-meta {
    font-size: 0.8rem;
    color: #9ca3af;          /* Gray text */
}

.ssd-cart-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: #e5e7eb;          /* Light gray price */
    margin-top: 2px;
}

/* Remove Button (Trash Icon) */
.ssd-cart-remove-btn {
    background: transparent;
    border: none;
    color: #ef4444;          /* Red icon */
    cursor: pointer;
    padding: 8px;
    font-size: 1rem;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ssd-cart-remove-btn:hover {
    color: #dc2626;
    background-color: rgba(239, 68, 68, 0.1);
    border-radius: 4px;
}

/* --- SUMMARY SECTION --- */
.ssd-cart-summary {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #4b5563;
}

.ssd-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #d1d5db;
    margin-bottom: 5px;
}

.ssd-summary-row.total {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #374151;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

/* Checkout Button */
.ssd-checkout-btn {
    width: 100%;
    background-color: #2563eb; /* Blue */
    color: white;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: 600;
    margin-top: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.ssd-checkout-btn:hover {
    background-color: #1d4ed8;
}

/* =========================================
   MODERN DARK CART DRAWER STYLES
   ========================================= */

/* Drawer Container */
#ssd-cart-drawer {
    background: #121212; /* Deep Dark Background */
    width: 400px;
    max-width: 90vw;
    height: 100vh;
    position: fixed;
    top: 0;
    right: -450px; /* Hidden by default */
    z-index: 10000;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.7);
    transition: right 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    display: flex;
    flex-direction: column;
    border-left: 1px solid #333;
}

#ssd-cart-drawer.open {
    right: 0;
}

/* Header Section */
.ssd-cart-header-modern {
    padding: 20px 25px;
    border-bottom: 1px solid #2a2a2a;
    background: #181818;
}

.ssd-cart-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.ssd-cart-header-modern h3 {
    margin: 0;
    font-size: 1.4rem;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ssd-cart-count-bubble {
    background: #3b82f6; /* Modern Blue */
    color: #fff;
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 700;
}

.ssd-cart-subtitle {
    margin: 0;
    color: #888;
    font-size: 0.9rem;
}

.ssd-close-cart-btn-modern {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ssd-close-cart-btn-modern:hover {
    background: #ef4444; /* Red on hover */
    transform: rotate(90deg);
}

/* Scroll Area */
.ssd-cart-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Custom Scrollbar */
.ssd-cart-scroll-area::-webkit-scrollbar {
    width: 6px;
}
.ssd-cart-scroll-area::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
}

/* Seller Card (Group) */
.ssd-seller-card {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 12px;
    margin-bottom: 25px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.ssd-seller-header {
    padding: 12px 15px;
    background: #252525;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ssd-seller-info {
    color: #e0e0e0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ssd-seller-info i {
    color: #3b82f6;
}

.ssd-seller-badge {
    font-size: 0.7rem;
    background: #333;
    color: #aaa;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Cart Item Modern */
.ssd-cart-item-modern {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #2a2a2a;
    transition: background 0.2s;
}

.ssd-cart-item-modern:last-child {
    border-bottom: none;
}

.ssd-cart-item-modern:hover {
    background: #232323;
}

.ssd-item-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 15px;
    background: #2a2a2a;
    flex-shrink: 0;
}

.ssd-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ssd-item-details {
    flex: 1;
}

.ssd-item-name {
    margin: 0 0 4px 0;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
}

.ssd-item-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.ssd-meta-tag {
    font-size: 0.75rem;
    color: #888;
    background: #2a2a2a;
    padding: 1px 6px;
    border-radius: 4px;
}

.ssd-item-price {
    color: #3b82f6;
    font-weight: 700;
    font-size: 0.9rem;
}

.ssd-remove-btn-modern {
    background: transparent;
    border: none;
    color: #555;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

.ssd-remove-btn-modern:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Footer & Summary */
.ssd-seller-footer {
    padding: 15px;
    background: #1a1a1a;
    border-top: 1px solid #333;
}

.ssd-summary-grid {
    margin-bottom: 15px;
}

.ssd-sum-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: #aaa;
}

.ssd-sum-row.total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #333;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.ssd-checkout-btn-modern {
    width: 100%;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
    font-size: 0.95rem;
}

.ssd-checkout-btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.ssd-checkout-btn-modern i {
    font-size: 0.8rem;
}

/* Empty State */
.ssd-empty-state {
    text-align: center;
    padding-top: 50px;
    color: #555;
}

.ssd-empty-state i {
    font-size: 3rem;
    margin-bottom: 15px;
    color: #333;
}

.ssd-empty-state p {
    color: #888;
}

.ssd-btn-secondary {
    margin-top: 15px;
    background: transparent;
    border: 1px solid #444;
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}

.ssd-btn-secondary:hover {
    border-color: #fff;
}

/* Overlay */
#ssd-cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px); /* Glass effect */
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

#ssd-cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ==============================================
   MODERN SINGLE PRODUCT REDESIGN (Mobile First)
   ============================================== */

/* Wrapper & Layout */
.ssd-product-modern-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 80px; /* Space for sticky footer */
    font-family: 'Inter', sans-serif;
    color: #e5e7eb;
}

.ssd-product-nav {
    padding: 1rem 0;
    margin-bottom: 1rem;
}

.ssd-back-icon-btn {
    color: #9ca3af;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}
.ssd-back-icon-btn:hover { color: #fff; }

.ssd-product-grid-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* Desktop Grid (min-width: 992px) */
@media (min-width: 992px) {
    .ssd-product-grid-layout {
        grid-template-columns: 1.2fr 1fr; /* Image wider than info */
        align-items: start;
    }
    .ssd-mobile-sticky-footer {
        display: none !important; /* Hide mobile footer on desktop */
    }
    .ssd-product-modern-wrapper {
        padding-bottom: 0;
    }
}

/* --- GALLERY STYLES --- */
.ssd-product-gallery-modern {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ssd-main-image-frame {
    background: #1f2937;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1 / 1; /* Square image */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #374151;
}

.ssd-main-image-frame img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ssd-badge-out-of-stock {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.ssd-thumb-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.ssd-thumb-item {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
    background: #1f2937;
    flex-shrink: 0;
}
.ssd-thumb-item.active { border-color: #3b82f6; }
.ssd-thumb-item img { width: 100%; height: 100%; object-fit: cover; }

/* --- INFO SECTION STYLES --- */
.ssd-product-info-modern {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Seller Pill */
.ssd-seller-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    padding: 6px 12px;
    border-radius: 30px;
    width: fit-content;
    text-decoration: none;
    color: #93c5fd;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.2s;
}
.ssd-seller-pill:hover { background: rgba(59, 130, 246, 0.2); }
.ssd-seller-pill img { width: 24px; height: 24px; border-radius: 50%; }
.ssd-seller-pill .verified { color: #3b82f6; font-size: 0.8rem; }

/* Title & Ratings */
.ssd-product-title-modern {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.ssd-product-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #9ca3af;
}
.ssd-stars { display: flex; align-items: center; gap: 4px; color: #facc15; font-weight: 700; }
.ssd-meta-dot { color: #4b5563; }

/* Price Block */
.ssd-product-price-block {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}
.ssd-currency { font-size: 1rem; color: #9ca3af; font-weight: 500; margin-right: 4px; }
.ssd-price-large { font-size: 2.2rem; font-weight: 800; color: #fff; }
.ssd-price-large.free { color: #22c55e; }

/* Tabs System */
.ssd-modern-tabs {
    background: #1f2937;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid #374151;
}

.ssd-tab-headers {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid #374151;
    margin-bottom: 1.5rem;
}

.ssd-tab-link {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 1rem;
    font-weight: 600;
    padding-bottom: 10px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
.ssd-tab-link.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

.ssd-tab-body { display: none; animation: fadeIn 0.3s; }
.ssd-tab-body.active { display: block; }

.ssd-feature-list {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.ssd-feature-list li {
    font-size: 0.85rem;
    color: #d1d5db;
    background: #111827;
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ssd-feature-list li i { color: #3b82f6; }

/* Reviews */
.ssd-review-card-modern {
    background: #111827;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 10px;
    border: 1px solid #374151;
}
.review-header { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.review-header img { width: 32px; height: 32px; border-radius: 50%; }
.review-header .stars { color: #facc15; font-size: 0.8rem; }

/* Buttons (Modern) */
.ssd-btn-primary-modern {
    background: #3b82f6;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 50px; /* Pill shape */
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.ssd-btn-primary-modern:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
}
.ssd-btn-primary-modern.large {
    padding: 16px 32px;
    font-size: 1.1rem;
}
.ssd-btn-disabled {
    background: #4b5563;
    color: #9ca3af;
    border: none;
    padding: 12px 24px;
    border-radius: 50px;
    width: 100%;
    cursor: not-allowed;
}

/* --- MOBILE STICKY FOOTER --- */
.ssd-mobile-sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #1f2937;
    border-top: 1px solid #374151;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
    /* Safe area for iPhone X+ */
    padding-bottom: env(safe-area-inset-bottom, 20px);
}

.ssd-footer-price {
    display: flex;
    flex-direction: column;
}
.ssd-footer-price small { font-size: 0.75rem; color: #9ca3af; }
.ssd-footer-price span { font-size: 1.2rem; font-weight: 700; color: #fff; }

.ssd-footer-action {
    width: 50%;
}

/* Hide Desktop Actions on Mobile */
@media (max-width: 991px) {
    .ssd-desktop-actions { display: none; }
}

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

/* =========================================================
   MOBILE UI REFINEMENTS (Product Page & Cart)
   ========================================================= */

@media (max-width: 768px) {

    /* 1. Product Image: Full Width 1:1 Background Style */
    .ssd-main-image-frame {
        width: 100vw;           /* Screen width එකට සමාන කරයි */
        height: 100vw;          /* 1:1 Aspect Ratio (Square) */
        
        /* Parent container padding එක neutral කිරීමට negative margins */
        margin-left: -1.5rem;   
        margin-right: -1.5rem;
        margin-top: -1rem;      /* Header එකට ලං කිරීමට */
        margin-bottom: 1rem;

        border-radius: 0 !important; /* Border radius ඉවත් කරයි */
        border: none !important;     /* Border ඉවත් කරයි */
        background-color: transparent !important; /* Background පාට ඉවත් කරයි */
        box-shadow: none !important; /* Shadow ඉවත් කරයි */
    }

    .ssd-main-image-frame img {
        object-fit: contain;    /* රූපය කැපෙන්නේ නැතිව සම්පූර්ණයෙන් පෙන්වයි */
        padding: 10px;          /* දාරවලට නොගෑවී තැබීමට */
        background-color: #111827; /* පසුබිම අඳුරු කරයි (Theme එකට ගැලපෙන පරිදි) */
    }

    /* Thumbnails ලස්සනට පෙන්වීමට */
    .ssd-thumb-list {
        padding-left: 10px;
        margin-top: -10px;
    }

    /* 2. Product Title: 30% Smaller */
    .ssd-product-title-modern {
        font-size: 1.3rem !important; /* 1.8rem සිට අඩු කරන ලදී */
        line-height: 1.3;
        padding: 0 5px;
    }

    /* 3. Floating Cart Icon Position */
    #ssd-floating-cart-btn {
        /* Sticky Footer එක (80px පමණ) මගහැර ඊට ඉහලින් පෙන්වීමට */
        bottom: 110px !important; 
    }

    /* Seller Info එක තරමක් කුඩා කිරීමට (Optional) */
    .ssd-seller-pill {
        font-size: 0.8rem;
        padding: 4px 10px;
    }
}

/* =========================================================
   PINTEREST STYLE MOBILE UI (Full Image + Overlay Back)
   ========================================================= */

/* Default Back Button (Hidden on Mobile, Visible on Desktop) */
.ssd-floating-back-btn {
    display: none; 
}

@media (max-width: 768px) {

    /* 1. Main Image Frame: Full Width & Height (1:1 Aspect) */
    .ssd-main-image-frame {
        width: 100vw;           
        height: 100vw;          /* Square Aspect Ratio */
        position: relative;     /* To allow absolute positioning inside */
        
        /* Reset margins to touch screen edges */
        margin-left: -1.5rem;   
        margin-right: -1.5rem;
        margin-top: -1rem;     
        margin-bottom: 1.5rem;

        border-radius: 0 !important;
        border: none !important;
        background-color: #111827;
        box-shadow: none !important;
        overflow: hidden;
    }

    .ssd-main-image-frame img#ssd-main-product-img {
        width: 100%;
        height: 100%;
        object-fit: cover;      /* Fill the square completely */
        padding: 0;             /* No padding */
        background-color: transparent;
    }

    /* 2. Floating Back Button (White Circle Icon) */
    .ssd-floating-back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 50;
        
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.9); /* White background */
        color: #111827; /* Dark Icon */
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        
        text-decoration: none;
        font-size: 1.1rem;
        transition: transform 0.2s;
    }
    .ssd-floating-back-btn:active {
        transform: scale(0.9);
    }

    /* 3. Floating Thumbnails (Overlay at Bottom) */
    .ssd-thumb-list.floating {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 50;
        
        background: rgba(31, 41, 55, 0.7); /* Semi-transparent dark bg */
        backdrop-filter: blur(8px);       /* Blur effect */
        padding: 8px;
        border-radius: 16px;
        
        display: flex;
        gap: 8px;
        max-width: 90%;
        overflow-x: auto;
    }

    .ssd-thumb-item {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        border: 2px solid transparent;
        background-color: #374151;
    }
    .ssd-thumb-item.active {
        border-color: #3b82f6;
    }

    /* 4. Product Title: Scaled Down (30%) */
    .ssd-product-title-modern {
        font-size: 1.3rem !important; 
        line-height: 1.3;
        padding: 0 5px;
    }

    /* 5. Lift Cart Icon (Above Footer) */
    #ssd-floating-cart-btn {
        bottom: 110px !important; 
    }
}

		/* =========================================================
   ADVANCED MOBILE UI: INFO CARD & FLOATING FOOTER
   ========================================================= */

@media (max-width: 768px) {

    /* 1. THE "INFO SHEET" DESIGN (පින්තූරය මතට එන කොටස) */
    .ssd-product-info-modern {
        background-color: #1f2937; /* Card Background */
        
        /* Card Effect: පින්තූරය මතට මඳක් ඉහලට ගැනීම */
        margin-top: -30px; 
        position: relative;
        z-index: 20; /* පින්තූරයට ඉහළින් පෙන්වයි */
        
        /* Rounded Corners (Top Only) */
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        
        /* Compact Padding (ඉඩ පරතර අඩු කිරීම) */
        padding: 25px 20px 100px 20px; /* Bottom padding added for footer space */
        
        box-shadow: 0 -10px 20px rgba(0,0,0,0.3); /* Shadow for depth */
    }

    /* Seller Pill එක Title එකට උඩින් ලස්සනට තැබීම */
    .ssd-seller-pill {
        margin-bottom: 10px;
        font-size: 0.75rem;
        padding: 4px 10px;
        background: rgba(59, 130, 246, 0.15);
    }

    /* Title & Price Spacing Compact */
    .ssd-product-title-modern {
        margin-bottom: 5px; /* අඩු පරතරය */
    }

    .ssd-product-rating-row {
        margin-bottom: 10px;
    }

    .ssd-product-price-block {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 2. COMPACT TABS (Description / Reviews) */
    .ssd-modern-tabs {
        background: transparent; /* Remove box bg */
        border: none;
        padding: 0;
        margin-top: 0;
    }

    .ssd-tab-headers {
        margin-bottom: 15px;
        border-bottom: 1px solid #374151;
        gap: 15px;
    }

    .ssd-tab-link {
        padding-bottom: 8px;
        font-size: 0.95rem;
        color: #9ca3af;
        flex: 1;
        text-align: center;
    }
    .ssd-tab-link.active {
        color: #fff;
        border-bottom: 2px solid #3b82f6;
    }

    .ssd-description-content p {
        font-size: 0.9rem;
        line-height: 1.5;
        color: #d1d5db;
        margin-bottom: 10px;
    }

    /* 3. ADVANCED FLOATING FOOTER (Capsule Style) */
    .ssd-mobile-sticky-footer {
        /* සම්පූර්ණ තීරුවක් වෙනුවට පාවෙන පෙත්තක් (Pill) ලෙස */
        background: #2d3748; /* Lighter Dark for Contrast */
        
        /* Positioning */
        bottom: 20px; 
        left: 15px; 
        right: 15px;
        width: auto; /* Auto width based on left/right */
        
        /* Shape */
        border-radius: 50px; /* Pill Shape */
        border: 1px solid #4b5563;
        padding: 8px 8px 8px 25px; /* Padding: Left text space, Right button space */
        
        box-shadow: 0 10px 25px rgba(0,0,0,0.5); /* Deep Shadow */
        backdrop-filter: blur(10px); /* Glass effect support */
    }

    /* Price Text inside Footer */
    .ssd-footer-price {
        flex-direction: row; /* Side by side label/price */
        align-items: baseline;
        gap: 5px;
    }
    .ssd-footer-price small {
        font-size: 0.7rem;
        color: #9ca3af;
        text-transform: uppercase;
    }
    .ssd-footer-price span {
        font-size: 1.1rem;
        color: #fff;
    }

    /* Button inside Footer */
    .ssd-footer-action {
        width: auto; /* Let it shrink */
    }
    
    .ssd-footer-action button,
    .ssd-footer-action a {
        border-radius: 40px; /* Round Button */
        padding: 10px 25px;
        font-size: 0.95rem;
        box-shadow: none; /* Remove button shadow to blend */
    }

    /* Cart Icon එක Footer එකට උඩින් තැබීම */
    #ssd-floating-cart-btn {
        bottom: 95px !important; /* Footer එකට උඩින් */
        right: 15px !important;
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}

/* =========================================================
   DESKTOP UI FIXES: Compact Info & Floating Thumbnails
   ========================================================= */

/* 1. Reduce Gaps in Product Info (Desktop Only) */
@media (min-width: 992px) {
    
    /* Info Column එකේ මූලික පරතරය අඩු කිරීම */
    .ssd-product-info-modern {
        gap: 6px !important; /* 1rem තිබූ පරතරය 6px දක්වා අඩු කරයි */
    }

    /* Seller Pill එකේ පහළ ඉඩ අඩු කිරීම */
    .ssd-seller-pill {
        margin-bottom: 0 !important;
    }

    /* Title එකේ උඩ/පහළ ඉඩ අඩු කිරීම */
    .ssd-product-title-modern {
        margin-top: 0 !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
    }

    /* Rating Row එකේ පහළ ඉඩ අඩු කිරීම */
    .ssd-product-rating-row {
        margin-bottom: 5px !important;
    }

    /* Price Block එකේ පරතරය සීරුමාරු කිරීම */
    .ssd-product-price-block {
        margin-top: 5px !important;
        margin-bottom: 15px !important;
        padding-bottom: 15px;
        border-bottom: 1px solid #374151;
    }
}

/* 2. Floating Thumbnails on Desktop (Make them appear inside the image) */

/* ප්‍රධාන රූප රාමුව Relative ලෙස සැකසීම */
.ssd-main-image-frame {
    position: relative !important;
    overflow: hidden; /* රාමුවෙන් පිටතට යාම වැළැක්වීමට */
}

/* Thumbnails List එක පාවෙන (Floating) ලෙස සැකසීම */
.ssd-thumb-list.floating {
    position: absolute !important;
    bottom: 20px !important; /* පහළ සිට 20px උඩින් */
    left: 50% !important;
    transform: translateX(-50%) !important; /* මැදට ගැනීමට */
    z-index: 20 !important;
    
    /* Glass Effect Background */
    background: rgba(17, 24, 39, 0.7) !important; /* අඳුරු පසුබිම */
    backdrop-filter: blur(5px) !important;       /* බොඳ වූ පෙනුම */
    padding: 8px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    
    display: flex !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 90% !important;
}

/* කුඩා පින්තූර (Thumb Items) හැඩගැන්වීම */
.ssd-thumb-item {
    width: 45px !important;  /* Desktop එකේදී තරමක් කුඩා කොටු */
    height: 45px !important;
    border-radius: 8px !important;
    border: 2px solid transparent !important;
    background-color: #374151 !important;
    cursor: pointer;
    transition: transform 0.2s ease;
    opacity: 0.8;
}

.ssd-thumb-item:hover, 
.ssd-thumb-item.active {
    opacity: 1;
    border-color: #3b82f6 !important; /* Active වර්ණය (නිල්) */
    transform: scale(1.1); /* Hover වූ විට තරමක් විශාල වීම */
}

/* Desktop එකේ පින්තූරය පහළින් තිබිය හැකි පරණ Thumbnails ලැයිස්තුව සැඟවීම */
.ssd-product-gallery-modern > .ssd-thumb-list:not(.floating) {
    display: none !important;
}

/* =========================================================
   MODERN SINGLE CLASS UI (Redesigned)
   ========================================================= */

.ssd-class-modern-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Inter', sans-serif;
    color: #e5e7eb;
    padding-bottom: 100px; /* Space for footer */
}

/* 1. HERO SECTION (Video/Image) */
.ssd-class-hero {
    position: relative;
    background: #111827;
}

.ssd-hero-media-frame {
    width: 100%;
    aspect-ratio: 16 / 9; /* Video standard ratio */
    background: #000;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    .ssd-hero-media-frame {
        width: 100vw;
        margin-left: -1.5rem; /* Full width on mobile */
        margin-right: -1.5rem;
        margin-top: -1rem;
    }
}

.ssd-hero-media-frame iframe,
.ssd-hero-media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Floating Back Button */
.ssd-floating-back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 50;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}
.ssd-floating-back-btn:active { transform: scale(0.9); }

/* 2. INFO SHEET (The Overlapping Card) */
.ssd-class-info-sheet {
    background-color: #1f2937;
    position: relative;
    z-index: 20;
    /* Desktop Default */
    padding: 20px; 
    border-radius: 12px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .ssd-class-info-sheet {
        margin-top: -25px; /* Overlap video */
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding: 25px 20px 80px 20px;
        box-shadow: 0 -10px 20px rgba(0,0,0,0.4);
    }
}

/* Header Row (Owner + Badges) */
.ssd-sheet-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.ssd-owner-pill {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    cursor: pointer;
}
.ssd-owner-pill img { width: 22px; height: 22px; border-radius: 50%; }

.ssd-meta-badges {
    display: flex;
    gap: 8px;
}
.ssd-badge {
    font-size: 0.8rem;
    color: #9ca3af;
    background: #111827;
    padding: 4px 8px;
    border-radius: 6px;
}
.ssd-badge.star { color: #facc15; }

/* Title */
.ssd-class-title-modern {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 15px 0;
    line-height: 1.3;
}

/* 3. MONTHLY SELECTOR (Horizontal Scroll) */
.ssd-horizontal-months {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    scrollbar-width: none; /* Hide scrollbar */
}
.ssd-horizontal-months::-webkit-scrollbar { display: none; }

.ssd-month-chip {
    background: #111827;
    border: 1px solid #374151;
    color: #9ca3af;
    padding: 8px 16px;
    border-radius: 8px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}
.ssd-month-chip.active {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}

/* 4. CURRICULUM LIST */
.ssd-section-card {
    background: #111827;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid #374151;
    overflow: hidden;
}
.ssd-sec-header {
    padding: 12px 15px;
    background: #232d3f;
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 0.95rem;
    color: #e5e7eb;
}
.ssd-sec-header .sec-count {
    font-size: 0.8rem;
    color: #9ca3af;
    font-weight: normal;
}
.ssd-lesson-row {
    padding: 10px 15px;
    border-top: 1px solid #374151;
    color: #d1d5db;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ssd-lesson-row i { color: #3b82f6; }

/* 5. PARTNERS (Collaborators) */
.ssd-partners-block {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #374151;
}
.ssd-partners-block h5 {
    font-size: 0.85rem;
    color: #9ca3af;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.ssd-partner-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ssd-partner-chip {
    background: #111827;
    border: 1px solid #4b5563;
    color: #d1d5db;
    padding: 5px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    cursor: pointer;
}
.ssd-partner-chip img { width: 18px; height: 18px; border-radius: 50%; }

/* 6. FOOTER (Capsule Style - Reused from Product Page) */
/* (Styles from previous answer apply here, ensuring consistent look) */
.ssd-footer-price span small.per-month {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-left: 2px;
}

/* Desktop Specifics */
@media (min-width: 992px) {
    .ssd-class-modern-wrapper {
        display: grid;
        grid-template-columns: 2fr 1fr; /* Media+Content | Sidebar */
        gap: 30px;
        padding-top: 20px;
    }
    .ssd-class-hero {
        grid-column: 1 / -1; /* Hero spans full width or confined */
        border-radius: 12px;
        overflow: hidden;
    }
    .ssd-class-info-sheet {
        margin-top: 0;
    }
    .ssd-mobile-sticky-footer {
        display: none !important;
    }
}

/* =========================================================
   ADVANCED CLASS LAYOUT: Split Desktop & Sticky Footer
   ========================================================= */

/* Default (Mobile) Styles */
.ssd-class-modern-wrapper {
    padding-bottom: 100px; /* Footer Space */
}

/* 1. MOBILE HERO (Visible on Mobile) */
.ssd-class-hero {
    display: block; /* Show on Mobile */
}

/* 2. RIGHT SIDEBAR (Hidden on Mobile) */
.ssd-class-sidebar-action {
    display: none; /* Hide on Mobile */
}

/* 3. STICKY FOOTER (Common) */
.ssd-mobile-sticky-footer {
    position: fixed;
    bottom: 20px;
    left: 15px;
    right: 15px;
    background: rgba(31, 41, 55, 0.95); /* Dark Glass */
    backdrop-filter: blur(10px);
    border: 1px solid #4b5563;
    border-radius: 50px;
    padding: 10px 10px 10px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.ssd-footer-price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.ssd-footer-price small { font-size: 0.7rem; color: #9ca3af; }
.ssd-footer-price span { font-size: 1.1rem; font-weight: 700; color: #fff; }

.ssd-footer-action button, 
.ssd-footer-action a {
    border-radius: 40px;
    padding: 12px 30px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: none;
}

/* =========================================================
   DESKTOP SPECIFIC OVERRIDES (Min-Width: 992px)
   ========================================================= */
@media (min-width: 992px) {

    /* 1. Grid Layout: Left (Details) | Right (Thumbnail) */
    .ssd-class-body-modern {
        display: grid;
        grid-template-columns: 1.6fr 1fr; /* Details are wider */
        gap: 40px;
        align-items: start;
        max-width: 1100px;
        margin: 0 auto;
        padding-top: 20px;
    }

    /* 2. HIDE TOP HERO on Desktop */
    .ssd-class-hero {
        display: none !important;
    }

    /* 3. SHOW SIDEBAR on Desktop */
    .ssd-class-sidebar-action {
        display: block !important;
        position: sticky;
        top: 20px;
    }

    /* Sidebar Card Styling */
    .action-card {
        background: #1f2937;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid #374151;
    }
    .action-card-media {
        aspect-ratio: 16 / 9;
        background: #000;
    }
    .action-card-media img, 
    .action-card-media iframe {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .class-includes {
        padding: 20px;
    }
    .class-includes ul {
        list-style: none;
        padding: 0;
    }
    .class-includes li {
        margin-bottom: 10px;
        color: #d1d5db;
        font-size: 0.9rem;
    }
    .class-includes li i {
        width: 20px;
        color: #3b82f6;
    }

    /* 4. DESKTOP STICKY FOOTER (Centered & Floating) */
    .ssd-mobile-sticky-footer {
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        min-width: 600px; /* Wider on desktop */
        bottom: 30px;
    }
    
    /* Adjust Info Sheet for Desktop Grid */
    .ssd-class-info-sheet {
        margin-top: 0 !important; /* Reset mobile negative margin */
        background: #1f2937;
        border-radius: 16px;
        padding: 30px;
        border: 1px solid #374151;
    }
}

/* =========================================================
   FINAL DESKTOP ADJUSTMENT: Hide Sticky Footer
   ========================================================= */

@media (min-width: 992px) {
    
    /* Desktop එකේදී Sticky Footer එක අනිවාර්යයෙන්ම සඟවන්න */
    .ssd-mobile-sticky-footer {
        display: none !important;
    }

    /* Desktop Sidebar Card එක ලස්සනට පෙන්වන්න */
    .action-card-content {
        padding: 20px;
    }

    .price-info-desktop span {
        color: #fff;
    }
    
    /* Sidebar එක Sticky කරන්න */
    .ssd-class-sidebar-action {
        position: sticky;
        top: 20px;
    }
}

/* =========================================================
   CART ICON: TOP RIGHT POSITION (Small & Below Header)
   ========================================================= */

#ssd-floating-cart-btn {
    /* Position: Top Right */
    bottom: auto !important;   /* පහළ පිහිටීම ඉවත් කරයි */
    top: 90px !important;      /* Header එකට පහළින් (අවශ්‍ය පරිදි වෙනස් කරගන්න) */
    right: 15px !important;    /* දකුණු පසින් ඇති ඉඩ */
    
    /* Size: Smaller */
    width: 40px !important;    /* කුඩා පළල */
    height: 40px !important;   /* කුඩා උස */
    font-size: 1rem !important; /* Icon එකේ ප්‍රමාණය අඩු කිරීම */
    
    /* Styling */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    z-index: 9999 !important; /* සියල්ලටම උඩින් */
}

/* Badge එක (රතු පාට අංකය) කුඩා කිරීම */
#ssd-cart-count-badge {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.7rem !important;
    top: -5px !important;
    right: -5px !important;
    border: 1px solid #1f2937 !important;
}

/* --- MODERN DRAWER STYLES --- */

/* The Steps Container */
.ssd-cart-step {
    display: none;
    height: 100%;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
}
.ssd-cart-step.active {
    display: flex;
}

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

/* Header */
.ssd-cart-header-modern {
    padding: 20px;
    background: #1f2937;
    border-bottom: 1px solid #374151;
}
.ssd-cart-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ssd-cart-header-top h3 {
    margin: 0;
    color: white;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ssd-back-to-cart-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    margin-right: 15px;
}
.ssd-cart-subtitle {
    margin: 5px 0 0;
    color: #9ca3af;
    font-size: 0.85rem;
}

/* Scroll Area */
.ssd-cart-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background: #111827; /* Dark BG */
}

/* Seller Card */
.ssd-seller-card {
    background: #1f2937;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #374151;
}

/* Cart Item */
.ssd-cart-item-modern {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #374151;
    position: relative;
}
.ssd-cart-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
}
.ssd-item-details {
    flex: 1;
}
.ssd-item-name {
    margin: 0 0 5px;
    color: #f3f4f6;
    font-size: 0.95rem;
}
.ssd-item-price-row {
    display: flex;
    gap: 10px;
    font-size: 0.9rem;
}
.qty-badge {
    background: #374151;
    padding: 2px 6px;
    border-radius: 4px;
    color: #d1d5db;
}
.price {
    color: #63b3ed;
    font-weight: 600;
}
.ssd-remove-icon {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 5px;
}

/* Checkout Button (In Step 1) */
.ssd-checkout-btn-modern {
    width: 100%;
    background: #3b82f6;
    color: white;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- CHECKOUT FORM UI (Mobile Optimized) --- */

.ssd-checkout-summary-card {
    background: #2d3748;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.ssd-checkout-summary-card .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #cbd5e0;
    font-size: 0.9rem;
}
.ssd-checkout-summary-card .total {
    border-top: 1px solid #4a5568;
    padding-top: 8px;
    margin-top: 8px;
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
}

.ssd-input-group {
    margin-bottom: 12px;
    position: relative;
}
.ssd-input-group input, 
.ssd-input-group textarea {
    width: 100%;
    background: #374151;
    border: 1px solid #4b5563;
    color: white;
    padding: 12px;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
}
.ssd-input-group.icon-left input {
    padding-left: 40px;
}
.ssd-input-group.icon-left i {
    position: absolute;
    left: 14px;
    top: 14px;
    color: #9ca3af;
}

/* Bank Selector */
.ssd-bank-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}
.ssd-bank-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid #4b5563;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.ssd-bank-option.selected {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}
.ssd-bank-option img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Upload Box */
.ssd-upload-box label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #4b5563;
    padding: 20px;
    border-radius: 8px;
    color: #9ca3af;
    cursor: pointer;
    text-align: center;
}
.ssd-upload-box input {
    display: none;
}

/* Sticky Footer Pay Button */
.ssd-drawer-footer-sticky {
    position: sticky;
    bottom: 0;
    background: #111827;
    padding: 15px 0;
    border-top: 1px solid #374151;
    margin-top: 20px;
}
.ssd-pay-now-btn {
    width: 100%;
    background: #10b981; /* Green for Action */
    color: white;
    border: none;
    padding: 15px;
    border-radius: 50px; /* Pill shape */
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

/* --- MODERN PROFESSIONAL CART DRAWER (UPDATED) --- */

/* 1. Drawer Container & Width */
#ssd-cart-drawer {
    position: fixed;
    top: 0;
    right: -550px; /* Hide initially */
    width: 500px; /* WIDER WIDTH FOR DESKTOP */
    height: 100vh;
    background: #0f172a; /* Deep Slate Dark */
    z-index: 9999;
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    border-left: 1px solid #1e293b;
}

#ssd-cart-drawer.open {
    right: 0;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    #ssd-cart-drawer {
        width: 100%; /* Full width on mobile */
        right: -100%;
    }
}

/* 2. Header Styles */
.ssd-cart-header-modern {
    padding: 25px;
    background: #1e293b;
    border-bottom: 1px solid #334155;
}

.ssd-cart-header-top h3 {
    color: #ffffff; /* Pure White */
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ssd-cart-subtitle {
    color: #94a3b8; /* Light Blue-Gray */
    font-size: 0.95rem;
    margin-top: 5px;
}

.ssd-close-cart-btn-modern {
    background: #334155;
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
}
.ssd-close-cart-btn-modern:hover {
    background: #ef4444; /* Red on hover */
}

/* 3. Scroll Area & Backgrounds */
.ssd-cart-scroll-area {
    background: #0f172a; /* Deep Dark Background */
    padding: 25px;
    overflow-y: auto;
    flex: 1;
}

/* 4. Input Fields (High Contrast Text) */
.ssd-input-group label {
    display: block;
    color: #e2e8f0; /* Bright Text */
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.ssd-input-group input, 
.ssd-input-group textarea {
    width: 100%;
    background: #1e293b; /* Slightly lighter dark */
    border: 1px solid #334155;
    color: #ffffff !important; /* Force White Text */
    padding: 14px;
    border-radius: 10px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}

.ssd-input-group input:focus, 
.ssd-input-group textarea:focus {
    border-color: #3b82f6; /* Blue Focus */
    background: #253045;
}

.ssd-input-group input::placeholder,
.ssd-input-group textarea::placeholder {
    color: #64748b; /* Placeholder Color */
}

/* 5. NEW BANK CARD DESIGN (Clear & Professional) */
.ssd-bank-selector {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ssd-bank-card-modern {
    background: linear-gradient(145deg, #1e293b, #26334d);
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.ssd-bank-card-modern:hover {
    border-color: #64748b;
    transform: translateY(-2px);
}

.ssd-bank-card-modern.selected {
    border: 2px solid #3b82f6; /* Blue Border when selected */
    background: linear-gradient(145deg, #1e3a8a, #172554); /* Blue Tint BG */
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}

.ssd-bank-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.ssd-bank-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: #fff;
    padding: 4px;
    border-radius: 6px;
}

.ssd-bank-name {
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ssd-bank-account-number {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 5px;
    font-family: 'Courier New', monospace; /* Monospace for numbers */
}

.ssd-bank-details-row {
    color: #cbd5e1;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
}

.check-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #3b82f6;
    font-size: 1.2rem;
    display: none;
}
.ssd-bank-card-modern.selected .check-icon {
    display: block;
}

/* 6. Upload Box */
.ssd-upload-box label {
    background: #1e293b;
    border: 2px dashed #475569;
    color: #e2e8f0;
    padding: 30px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.ssd-upload-box label:hover {
    border-color: #3b82f6;
    background: #253045;
}

/* 7. Footer & Buttons */
.ssd-drawer-footer-sticky {
    background: #0f172a;
    border-top: 1px solid #1e293b;
    padding: 20px 25px;
}

.ssd-pay-now-btn {
    background: #3b82f6; /* Bright Blue */
    color: white;
    font-size: 1.1rem;
    padding: 16px;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.ssd-pay-now-btn:hover {
    background: #2563eb;
}

/* --- MODERN PROFESSIONAL CART STYLES (V2) --- */

/* 1. Drawer Container */
#ssd-cart-drawer {
    position: fixed;
    top: 0;
    right: -550px;
    width: 500px;
    height: 100vh;
    background: #0f172a;
    z-index: 9999;
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    border-left: 1px solid #1e293b;
}
#ssd-cart-drawer.open { right: 0; }
@media (max-width: 600px) { #ssd-cart-drawer { width: 100%; right: -100%; } }

/* 2. Calculation Box (New) */
.ssd-calculation-box {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
}
.ssd-calculation-box.highlight {
    background: #1e293b;
    border: 1px solid #3b82f6; /* Blue border for checkout summary */
}
.calc-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #cbd5e1; /* Light Gray text */
    font-size: 0.95rem;
}
.calc-row.total {
    border-top: 1px solid #475569;
    padding-top: 10px;
    margin-top: 5px;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
}

/* 3. Input Labels (FORCED WHITE) */
.ssd-input-group label {
    display: block;
    color: #ffffff !important; /* Force White */
    margin-bottom: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.ssd-section-title {
    color: #94a3b8;
    margin-bottom: 15px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #334155;
    padding-bottom: 5px;
}

/* 4. Form Grid (for 2 phones) */
.ssd-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
@media (max-width: 400px) { .ssd-form-grid-2 { grid-template-columns: 1fr; } }

/* 5. Input Fields */
.ssd-input-group input, 
.ssd-input-group textarea {
    width: 100%;
    background: #1e293b;
    border: 1px solid #475569;
    color: #ffffff !important;
    padding: 12px;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    box-sizing: border-box;
}
.ssd-input-group input:focus, .ssd-input-group textarea:focus {
    border-color: #3b82f6;
    background: #253045;
}

/* 6. MODERN BANK CARD (Professional) */
.ssd-bank-selector { display: flex; flex-direction: column; gap: 15px; }

.ssd-bank-card-modern {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}
.ssd-bank-card-modern:hover { border-color: #64748b; }
.ssd-bank-card-modern.selected {
    border: 2px solid #3b82f6;
    background: linear-gradient(145deg, #1e3a8a, #172554);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.ssd-bank-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.ssd-bank-logo {
    width: 35px; height: 35px; object-fit: contain;
    background: #fff; padding: 3px; border-radius: 5px;
}
.ssd-bank-name {
    color: #e2e8f0; /* White/Light Gray */
    font-size: 0.9rem; font-weight: 600; text-transform: uppercase;
}
.ssd-bank-account-number {
    color: #ffffff; /* PURE WHITE */
    font-size: 1.4rem; font-weight: 700;
    margin: 8px 0;
    font-family: monospace;
    letter-spacing: 1px;
}
.ssd-bank-details-row {
    display: flex; justify-content: space-between;
    color: #cbd5e1; /* Light text */
    font-size: 0.85rem;
}

/* Check Icon */
.check-icon {
    position: absolute; top: 15px; right: 15px;
    color: #3b82f6; font-size: 1.2rem; display: none;
}
.ssd-bank-card-modern.selected .check-icon { display: block; }

/* --- FIX: CHECKOUT INPUTS STYLING (Dark Mode) --- */

/* 1. සියලුම Input සහ Textarea එකම විදියට Dark කිරීම */
.ssd-input-group input,
.ssd-input-group input[type="text"], 
.ssd-input-group input[type="tel"],
.ssd-input-group textarea {
    background-color: #1e293b !important; /* තද නිල් පැහැති පසුබිම */
    border: 1px solid #475569 !important; /* Border එක */
    color: #ffffff !important; /* අකුරු සුදු පාටින් */
    padding: 12px;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    box-sizing: border-box;
    width: 100%;
    transition: border-color 0.2s, background-color 0.2s;
}

/* 2. ක්ලික් කළ විට (Focus) පාට වෙනස් වීම */
.ssd-input-group input:focus, 
.ssd-input-group textarea:focus {
    border-color: #3b82f6 !important; /* නිල් පාට Border */
    background-color: #253045 !important; /* තරමක් ලා පසුබිම */
}

/* 3. Browser Autofill Fix (සුදු පාට වීම වැළැක්වීම) */
/* මෙය ඉතා වැදගත් වේ. Browser එකෙන් auto-fill වූ විට පසුබිම සුදු වීම මෙය නතර කරයි */
.ssd-input-group input:-webkit-autofill,
.ssd-input-group input:-webkit-autofill:hover, 
.ssd-input-group input:-webkit-autofill:focus, 
.ssd-input-group input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #1e293b inset !important; /* පසුබිම බලහත්කාරයෙන් Dark කරයි */
    -webkit-text-fill-color: white !important; /* අකුරු සුදු කරයි */
    transition: background-color 5000s ease-in-out 0s;
}

/* --- TRUCK ORDER BUTTON ANIMATION --- */

.truck-button {
    --color: #fff;
    --background: #3b82f6; /* App Blue */
    --tick: #16bf78;
    --base: #0d0f18;
    --wheel: #2b3044;
    --wheel-inner: #646b8c;
    --wheel-dot: #fff;
    --back: #3d4a6b; /* Truck Body */
    --back-inner: #2f3851;
    --back-inner-shadow: #1f2537;
    --front: #a6accd;
    --front-shadow: #535a79;
    --front-light: #fff8b1;
    --window: #2b3044;
    --window-shadow: #404660;
    --street: #646b8c;
    --street-fill: #404660;
    --box: #dcb97a;
    --box-shadow: #b89b66;
    padding: 12px 0;
    width: 100%; /* Full Width */
    cursor: pointer;
    text-align: center;
    position: relative;
    border: none;
    outline: none;
    color: var(--color);
    background: var(--background);
    border-radius: 8px; /* Match your theme */
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    transition: background 0.2s;
    overflow: hidden; /* Important for masking */
    -webkit-tap-highlight-color: transparent;
}

.truck-button .default,
.truck-button .success {
    position: relative;
    z-index: 2;
    transition: opacity .3s, transform .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.truck-button .success {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateY(10px);
}

.truck-button .success svg {
    width: 14px;
    height: 12px;
    display: inline-block;
    stroke: var(--tick);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: stroke-dashoffset .3s .3s;
}

/* Animation State: Animation Playing */
.truck-button.animation .default {
    opacity: 0;
    transform: translateY(-10px);
}
.truck-button.animation .success {
    opacity: 0; 
}

/* Animation State: Done */
.truck-button.done {
    background: #1e293b; /* Darker BG on success */
}
.truck-button.done .success {
    opacity: 1;
    transform: translateY(0);
}
.truck-button.done .success svg {
    stroke-dashoffset: 0;
}

/* Truck Styles */
.truck-button .truck {
    position: absolute;
    width: 72px;
    height: 28px;
    transform: rotateX(90deg) translate3d(-24px, 30px, 0);
    top: 50%;
    left: 50%;
    margin-left: -36px;
    margin-top: -14px;
    z-index: 1;
}

.truck-button .truck:before,
.truck-button .truck:after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: var(--l, 18px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 2;
    box-shadow: inset 0 0 0 2px var(--wheel), inset 0 0 0 4px var(--wheel-inner);
    background: var(--wheel-dot);
    transform: translateY(5px) scale(.4);
}
.truck-button .truck:after { --l: 54px; }

.truck-button .truck .wheel,
.truck-button .truck .wheel:before {
    position: absolute;
    bottom: var(--b, -6px);
    left: var(--l, 6px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--wheel);
    transform: translateZ(0);
}
.truck-button .truck .wheel { transform: translateY(5px) scale(.4); }
.truck-button .truck .wheel:before {
    --l: 35px;
    --b: 0;
    content: '';
}

.truck-button .truck .front,
.truck-button .truck .back,
.truck-button .truck .box {
    position: absolute;
}

.truck-button .truck .back {
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 47px;
    height: 28px;
    border-radius: 1px 1px 0 0;
    background: linear-gradient(to bottom, var(--back-inner-shadow) 32%, var(--back-inner) 100%);
}
.truck-button .truck .back:before,
.truck-button .truck .back:after {
    content: '';
    position: absolute;
}
.truck-button .truck .back:before {
    left: 11px;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    border-radius: 0 1px 0 0;
    background: var(--back);
}
.truck-button .truck .back:after {
    border-radius: 1px;
    width: 73px;
    height: 2px;
    left: -1px;
    bottom: -2px;
    background: var(--base);
    z-index: 3;
}

.truck-button .truck .front {
    left: 47px;
    bottom: -1px;
    height: 22px;
    width: 24px;
    -webkit-clip-path: polygon(55% 0, 72% 44%, 100% 58%, 100% 100%, 0 100%, 0 0);
    clip-path: polygon(55% 0, 72% 44%, 100% 58%, 100% 100%, 0 100%, 0 0);
    background: linear-gradient(to bottom, var(--front-shadow) 10%, var(--front) 100%);
}
.truck-button .truck .front:before,
.truck-button .truck .front:after {
    content: '';
    position: absolute;
}
.truck-button .truck .front:before {
    width: 7px;
    height: 8px;
    background: #fff;
    left: 7px;
    top: 2px;
    -webkit-clip-path: polygon(0 0, 60% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 60% 0%, 100% 100%, 0% 100%);
    background: linear-gradient(to bottom, var(--window-shadow) 0%, var(--window) 100%);
}
.truck-button .truck .front:after {
    width: 3px;
    height: 2px;
    right: 0;
    bottom: 3px;
    background: var(--front-light);
}

.truck-button .truck .box {
    width: 13px;
    height: 13px;
    right: 56px;
    bottom: 0;
    z-index: 10;
    border-radius: 1px;
    overflow: hidden;
    transform: translate(0, -100%) rotate(0deg);
    background: linear-gradient(to bottom, var(--box-shadow) 50%, var(--box) 100%);
}
.truck-button .truck .box:before,
.truck-button .truck .box:after {
    content: '';
    position: absolute;
}
.truck-button .truck .box:before {
    background: rgba(0,0,0,.15);
    left: 0;
    top: 0;
    width: 100%;
    height: 50%;
}
.truck-button .truck .box:after {
    background: rgba(0,0,0,.15);
    left: 3px;
    top: 3px;
    width: 2px;
    height: 2px;
}

/* ANIMATION KEYFRAMES */
.truck-button.animation .truck {
    animation: truck 4s ease forwards;
}
.truck-button.animation .truck:before,
.truck-button.animation .truck:after {
    animation: wheels 4s ease forwards;
}
.truck-button.animation .truck .wheel,
.truck-button.animation .truck .wheel:before {
    animation: wheels 4s ease forwards;
}
.truck-button.animation .truck .box {
    animation: box 4s ease forwards;
}

@keyframes truck {
    0% { transform: rotateX(90deg) translate3d(-24px, 30px, 0); }
    10%, 30% { transform: rotateX(0deg) translate3d(-24px, 0, 0); }
    40% { transform: rotateX(0deg) translate3d(-24px, 0, 0); }
    80% { transform: rotateX(0deg) translate3d(200px, 0, 0); }
    100% { transform: rotateX(0deg) translate3d(200px, 0, 0); }
}
@keyframes wheels {
    0%, 30% { transform: translateY(5px) scale(.4); }
    40% { transform: translateY(5px) scale(.4) rotate(-20deg); }
    80% { transform: translateY(5px) scale(.4) rotate(-360deg); }
    100% { transform: translateY(5px) scale(.4) rotate(-360deg); }
}
@keyframes box {
    0%, 10% { transform: translate(0, -100%) rotate(0deg); }
    20%, 40% { transform: translate(5px, 2px) rotate(0deg); }
    50% { transform: translate(5px, 2px) rotate(15deg); }
    80% { transform: translate(200px, 2px) rotate(15deg); }
    100% { transform: translate(200px, 2px) rotate(15deg); }
}

/* --- MODERN ORDER TRACKING VIEW --- */

.modern-tracking-view {
    font-family: 'Inter', sans-serif;
    color: #e2e8f0;
    max-width: 1100px;
    margin: 0 auto;
}

/* Header */
.ssd-tracking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #334155;
    padding-bottom: 15px;
}
.ssd-back-btn {
    background: transparent;
    border: 1px solid #475569;
    color: #94a3b8;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}
.ssd-back-btn:hover { background: #334155; color: white; }
.ssd-header-info { display: flex; align-items: center; gap: 12px; }
.ssd-title { margin: 0; font-size: 1.5rem; color: white; font-weight: 700; }
.ssd-date { color: #64748b; font-size: 0.9rem; }
.ssd-badge { padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.ssd-badge.approved { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.ssd-badge.pending { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.ssd-badge.rejected { background: rgba(239, 68, 68, 0.2); color: #f87171; }

/* Grid Layout */
.ssd-tracking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}
@media (max-width: 900px) { .ssd-tracking-grid { grid-template-columns: 1fr; } }

/* Cards */
.ssd-card-modern {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    overflow: hidden;
}
.ssd-card-head {
    background: #0f172a;
    padding: 15px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: #e2e8f0;
    border-bottom: 1px solid #334155;
    display: flex; align-items: center; gap: 10px;
}
.ssd-card-content { padding: 20px; }

/* Details */
.ssd-detail-row { display: flex; justify-content: space-between; }
.ssd-detail-group label { display: block; color: #64748b; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 4px; font-weight: 600; }
.ssd-detail-group span { font-size: 1rem; color: white; font-weight: 500; display: block; }
.ssd-detail-group small { color: #94a3b8; }
.ssd-phone-link { color: #3b82f6; text-decoration: none; font-weight: 600; }
.ssd-address-text { background: #0f172a; padding: 10px; border-radius: 6px; color: #cbd5e1; font-size: 0.9rem; line-height: 1.5; margin: 0; border: 1px solid #334155; }

/* Order Items List */
.ssd-order-items-list { max-height: 300px; overflow-y: auto; }
.ssd-order-item {
    display: flex; align-items: center; gap: 15px;
    padding: 12px 20px;
    border-bottom: 1px solid #334155;
}
.item-thumb { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; background: #334155; }
.item-info h4 { margin: 0 0 4px 0; font-size: 0.95rem; color: white; }
.item-meta { font-size: 0.85rem; color: #94a3b8; }
.item-total { margin-left: auto; font-weight: 600; color: #3b82f6; }

.ssd-order-total-section { padding: 15px 20px; background: #0f172a; }
.total-row { display: flex; justify-content: space-between; font-size: 0.9rem; color: #94a3b8; margin-bottom: 5px; }
.total-row.grand { font-size: 1.1rem; color: white; font-weight: 700; border-top: 1px solid #334155; padding-top: 10px; margin-top: 10px; }
.ssd-btn-slip { display: inline-block; padding: 6px 12px; background: #334155; color: white; border-radius: 6px; font-size: 0.85rem; text-decoration: none; margin-top: 5px; }

/* Stepper */
.ssd-stepper-wrapper { display: flex; justify-content: space-between; align-items: center; position: relative; padding: 10px 0; }
.ssd-step { text-align: center; z-index: 2; position: relative; opacity: 0.5; transition: 0.3s; }
.ssd-step.active { opacity: 1; }
.ssd-step .circle { width: 40px; height: 40px; background: #334155; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; color: #94a3b8; transition: 0.3s; }
.ssd-step.active .circle { background: #3b82f6; color: white; box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); }
.line { flex: 1; height: 3px; background: #334155; margin: 0 10px; margin-bottom: 25px; transition: 0.3s; }
.line.active { background: #3b82f6; }

/* Controls */
.ssd-select { background: #0f172a; color: white; border: 1px solid #475569; padding: 8px; border-radius: 6px; outline: none; }
.ssd-btn-save { background: #10b981; color: white; border: none; padding: 8px 15px; border-radius: 6px; cursor: pointer; }
.ssd-courier-tabs { display: flex; border-bottom: 1px solid #334155; }
.tab-link { flex: 1; background: transparent; border: none; padding: 12px; color: #94a3b8; cursor: pointer; border-bottom: 2px solid transparent; }
.tab-link.active { color: #3b82f6; border-bottom-color: #3b82f6; font-weight: 600; }
.courier-content-area { padding: 20px; min-height: 150px; }
.info-grid { display: flex; gap: 15px; margin-bottom: 15px; }
.info-item { background: #0f172a; padding: 8px; border-radius: 6px; font-size: 0.85rem; border: 1px solid #334155; }
.ssd-btn-track { display: block; width: 100%; text-align: center; background: #334155; color: white; padding: 10px; border-radius: 8px; text-decoration: none; transition: 0.2s; }
.ssd-btn-track:hover { background: #3b82f6; }

/* Student Return Button */
.ssd-btn-return-init {
    background: #ef4444;
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    margin-left: 10px;
}
.ssd-btn-return-init:hover { background: #dc2626; }

/* Status Box */
.ssd-return-status-box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #1f2937;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #374151;
    margin-left: 10px;
}
.btn-delete-req {
    background: none; border: none; color: #ef4444; font-size: 1.2rem; cursor: pointer;
}
.ssd-btn-withdraw-return {
    background: #10b981; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8rem;
}

/* Seller Manage Box */
.ssd-return-manage-item {
    background: #1f2937;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 10px;
    border-left: 3px solid #ef4444;
}
.ssd-return-manage-item .reason {
    font-style: italic; color: #9ca3af; font-size: 0.9rem; margin: 5px 0;
}
.ssd-btn-small {
    padding: 5px 10px; border-radius: 4px; border: none; cursor: pointer; font-size: 0.8rem; margin-right: 5px;
}
.btn-packaging { background: #3b82f6; color: white; }
.btn-delivery { background: #f59e0b; color: white; }
.btn-reject { background: #ef4444; color: white; }
.btn-confirm-receipt { background: #10b981; color: white; width: 100%; margin-top: 5px; }

/* Same CSS as before - keeping layout consistent */
    body { margin: 0; padding: 0; overflow-x: hidden; background: #111827; font-family: 'Inter', sans-serif; color: #d1d5db; }
    .ssd-docs-layout { display: flex; min-height: 100vh; }
    
    .ssd-docs-sidebar { 
        width: 280px; background: #1f2937; border-right: 1px solid #374151; 
        position: fixed; height: 100vh; overflow-y: auto; top: 0; left: 0; z-index: 1000; 
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    }
    .ssd-docs-sidebar::-webkit-scrollbar { width: 6px; }
    .ssd-docs-sidebar::-webkit-scrollbar-thumb { background-color: #4b5563; border-radius: 4px; }
    
    .ssd-docs-logo { padding: 25px; border-bottom: 1px solid #374151; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.2rem; color: #fff; }
    .ssd-docs-logo img { height: 35px; }
    
    .ssd-docs-nav { padding: 20px 20px 50px 20px; }
    .nav-group h3 { font-size: 0.75rem; text-transform: uppercase; color: #9ca3af; font-weight: 800; margin: 25px 0 12px 12px; }
    .nav-group a { display: flex; align-items: center; gap: 12px; padding: 10px 15px; color: #9ca3af; text-decoration: none; border-radius: 8px; font-size: 0.95rem; font-weight: 500; transition: all 0.2s ease; }
    .nav-group a:hover { background: #374151; color: #e5e7eb; transform: translateX(3px); }
    .nav-group a.active { background: #3b82f6; color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
    .nav-group a i { width: 20px; text-align: center; font-size: 1rem; }

    /* Lang Switcher */
    .ssd-lang-switcher-wrapper { padding: 0 10px; margin-bottom: 15px; }
    .ssd-lang-switcher { display: flex; background: #111827; padding: 4px; border-radius: 8px; border: 1px solid #374151; }
    .ssd-lang-switcher .lang-btn { flex: 1; background: transparent; color: #9ca3af; border: none; padding: 6px; cursor: pointer; font-size: 0.85rem; font-weight: 600; border-radius: 6px; transition: all 0.2s; }
    .ssd-lang-switcher .lang-btn:hover { color: #fff; }
    .ssd-lang-switcher .lang-btn.active { background: #3b82f6; color: #fff; }

    
    /* Default (Dark Mode): Show Sun, Hide Moon */
    .ssd-theme-toggle .icon-moon { display: none; }
    .ssd-theme-toggle .icon-sun { display: block; color: #facc15; }

    /* Content Area */
    .ssd-docs-content { flex: 1; margin-left: 280px; background: #111827; min-height: 100vh; width: calc(100% - 280px); }
    .ssd-docs-container-fluid { max-width: 1000px; margin: 0 auto; padding: 40px 50px; }
    .ssd-docs-breadcrumbs { color: #6b7280; font-size: 0.9rem; margin-bottom: 30px; display: flex; align-items: center; }
    .ssd-docs-breadcrumbs a { color: #9ca3af; text-decoration: none; transition: color 0.2s; }
    .ssd-docs-breadcrumbs a:hover { color: #3b82f6; }
    .ssd-docs-breadcrumbs i { font-size: 0.65rem; margin: 0 10px; color: #4b5563; }
    
    .ssd-docs-body-full { color: #d1d5db; }
    .ssd-docs-body-full h1 { font-size: 2.5rem; color: #fff; margin-top: 0; margin-bottom: 2rem; border-bottom: 1px solid #374151; padding-bottom: 1rem; line-height: 1.2; }
    .ssd-docs-body-full h2 { font-size: 1.8rem; color: #f3f4f6; margin-top: 3rem; margin-bottom: 1.5rem; font-weight: 700; }
    .ssd-docs-body-full h3 { font-size: 1.4rem; color: #e5e7eb; margin-top: 2rem; margin-bottom: 1rem; font-weight: 600; }
    .ssd-docs-body-full p { color: #9ca3af; line-height: 1.8; margin-bottom: 1.5rem; font-size: 1.05rem; }
    .ssd-docs-body-full ul, .ssd-docs-body-full ol { margin-bottom: 1.5rem; padding-left: 1.5rem; color: #9ca3af; }
    .ssd-docs-body-full li { margin-bottom: 0.8rem; line-height: 1.7; }
    .ssd-docs-body-full strong { color: #fff; }

    /* Alert Boxes */
    .ssd-alert-box { padding: 20px; border-radius: 8px; margin: 25px 0; font-size: 1rem; border-left: 4px solid; }
    .ssd-alert-box.warning { background: rgba(245, 158, 11, 0.1); color: #fbbf24; border-color: #f59e0b; }
    .ssd-alert-box.info { background: rgba(59, 130, 246, 0.1); color: #60a5fa; border-color: #3b82f6; }

    /* Accordion (FAQ) */
    .ssd-accordion-item { border-bottom: 1px solid #374151; margin-bottom: 0; }
    .ssd-accordion-header { background: transparent; border: none; width: 100%; padding: 1.5rem 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-align: left; color: #e5e7eb; font-size: 1.1rem; font-weight: 600; transition: color 0.2s; }
    .ssd-accordion-header:hover { color: #3b82f6; }
    .ssd-accordion-header i { transition: transform 0.3s ease; color: #6b7280; }
    .ssd-accordion-header.active i { transform: rotate(180deg); color: #3b82f6; }
    .ssd-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; color: #9ca3af; padding-right: 1rem; }
    .ssd-accordion-content p { margin-bottom: 1.5rem; }

    /* --- Mobile Header --- */
    .ssd-docs-mobile-header { display: none; }
    .ssd-docs-mobile-close { display: none; }
    .ssd-docs-overlay { display: none; }

    /* --- Mobile Responsive Styles --- */
    @media (max-width: 991px) {
        .ssd-docs-layout { display: block; padding-top: 60px; }
        .ssd-docs-content { margin-left: 0; width: 100%; padding: 0; }
        .ssd-docs-container-fluid { padding: 30px 20px; }
        
        .ssd-docs-mobile-header { display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; width: 100%; height: 60px; background: #1f2937; border-bottom: 1px solid #374151; z-index: 990; padding: 0 20px; box-sizing: border-box; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
        #ssd-docs-mobile-toggle { background: none; border: none; font-size: 1.4rem; color: #9ca3af; cursor: pointer; padding: 5px; }
        .ssd-mobile-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; font-size: 1.1rem; }
        .ssd-mobile-logo img { height: 28px; }

        .ssd-docs-sidebar { transform: translateX(-100%); width: 280px; box-shadow: 5px 0 25px rgba(0,0,0,0.5); }
        .ssd-docs-sidebar.active { transform: translateX(0); }
        .ssd-docs-mobile-close { display: block; position: absolute; top: 15px; right: 15px; background: #374151; border: none; width: 32px; height: 32px; border-radius: 50%; color: #d1d5db; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }

        .ssd-docs-overlay { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 995; opacity: 0; visibility: hidden; transition: 0.3s ease; }
        .ssd-docs-overlay.active { opacity: 1; visibility: visible; }

        .ssd-docs-body-full h1 { font-size: 1.8rem; margin-bottom: 1.5rem; }
        .ssd-docs-body-full h2 { font-size: 1.4rem; margin-top: 2rem; }
        .ssd-docs-body-full h3 { font-size: 1.15rem; }
        .ssd-docs-body-full p, .ssd-docs-body-full li { font-size: 0.95rem; line-height: 1.6; }
    }

/* --- Mehewara Facts: Step Titles Enhancement (Dark Mode) --- */
.ssd-docs-body-full h3, 
.ssd-docs-body-full h4,
.ssd-docs-body-full p strong,
.ssd-docs-body-full li strong {
    color: #e2e8f0 !important; /* Light Gray / White for Step Titles */
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    display: block; /* Ensures headers stand out */
}

/* Specifically target steps like "පියවර 1:", "පියවර 2:" if they are plain text */
.ssd-docs-body-full p {
    color: #cbd5e1; /* Lighter gray for body text to improve readability */
}

/* --- Mehewara Facts: Table Styles (Default Dark Mode) --- */
.ssd-docs-body-full table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    border: 1px solid #374151; /* අඳුරු මායිම් (Dark Border) */
    background-color: transparent;
}

.ssd-docs-body-full th,
.ssd-docs-body-full td {
    padding: 12px 15px;
    border: 1px solid #374151; /* අඳුරු මායිම් */
    color: #e2e8f0; /* සුදු පැහැති අකුරු (White Text) */
    text-align: left;
}

.ssd-docs-body-full th {
    background-color: rgba(255, 255, 255, 0.05); /* මාතෘකා සඳහා අඳුරු පසුබිමක් */
    font-weight: bold;
    color: #ffffff; /* තද සුදු (Pure White) */
}

/* =========================================================
   MODERN SOCIAL FEED & MODALS (REDESIGNED)
   ========================================================= */

/* --- 1. Floating Action Button (FAB) - Neon Glow Style --- */
.ssd-fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9990;
}

.ssd-fab-btn {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: white;
    border-radius: 50%;
    border: none;
    font-size: 1.8rem;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ssd-fab-btn:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.8);
}

/* --- 2. Modern Modal Overlay (Glassmorphism) --- */
.ssd-modal-overlay {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px); /* Strong blur behind modal */
    transition: opacity 0.3s ease;
}

/* --- 3. Create Post Modal (Advanced Composer) --- */
.ssd-modern-modal-box {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 20px;
    width: 95%;
    max-width: 600px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: slideUpFade 0.4s ease forwards;
}

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

.ssd-modal-header-modern {
    padding: 20px 25px;
    border-bottom: 1px solid #334155;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0f172a;
}

.ssd-modal-header-modern h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Tab Pills */
.ssd-post-type-pills {
    display: flex;
    gap: 10px;
    padding: 15px 25px;
    background: #1e293b;
    overflow-x: auto;
}

.post-pill-btn {
    background: #334155;
    color: #94a3b8;
    border: none;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.post-pill-btn:hover { background: #475569; color: #fff; }
.post-pill-btn.active {
    background: #3b82f6;
    color: #fff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Inputs */
.ssd-composer-body {
    padding: 25px;
}

.ssd-modern-textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.1rem;
    resize: none;
    min-height: 120px;
    outline: none;
    line-height: 1.6;
}
.ssd-modern-textarea::placeholder { color: #64748b; }

.ssd-modern-input {
    width: 100%;
    background: #0f172a;
    border: 1px solid #334155;
    padding: 12px 15px;
    border-radius: 10px;
    color: #fff;
    margin-bottom: 15px;
    outline: none;
    transition: border-color 0.2s;
}
.ssd-modern-input:focus { border-color: #3b82f6; }

/* Upload Area */
.ssd-upload-zone {
    border: 2px dashed #475569;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(15, 23, 42, 0.5);
}
.ssd-upload-zone:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}
.ssd-upload-zone i { font-size: 2rem; color: #94a3b8; margin-bottom: 10px; }
.ssd-upload-zone span { color: #cbd5e1; font-weight: 500; }

.ssd-modal-footer-modern {
    padding: 15px 25px;
    border-top: 1px solid #334155;
    background: #0f172a;
    display: flex;
    justify-content: flex-end;
}

.ssd-btn-gradient {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
    transition: transform 0.2s;
}
.ssd-btn-gradient:hover { transform: translateY(-2px); }

/* --- 4. Single Blog Reader (Immersive) --- */
.ssd-blog-reader-modal {
    background: #0f172a; /* Deep Dark */
    width: 100%;
    max-width: 900px;
    height: 90vh;
    border-radius: 16px;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

.ssd-blog-hero {
    width: 100%;
    height: 350px;
    background-size: cover;
    background-position: center;
    position: relative;
}
.ssd-blog-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, #0f172a 0%, transparent 100%);
}

.ssd-blog-container {
    padding: 0 40px 60px 40px;
    margin-top: -80px; /* Pull text over image */
    position: relative;
    z-index: 2;
}

.ssd-blog-title-lg {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.ssd-blog-meta-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}
.ssd-blog-author-img { width: 45px; height: 45px; border-radius: 50%; border: 2px solid #3b82f6; }
.ssd-blog-author-info span { display: block; color: #fff; font-weight: 600; font-size: 1rem; }
.ssd-blog-author-info small { color: #94a3b8; }

.ssd-blog-body-text {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #e2e8f0;
    font-family: 'Georgia', serif; /* Better reading font */
}
.ssd-blog-body-text p { margin-bottom: 1.5rem; }
.ssd-blog-body-text img { max-width: 100%; border-radius: 8px; margin: 20px 0; }

/* Mobile Adjustments for Blog */
@media (max-width: 768px) {
    .ssd-blog-hero { height: 250px; }
    .ssd-blog-title-lg { font-size: 1.8rem; }
    .ssd-blog-container { padding: 0 20px 40px 20px; margin-top: -60px; }
    .ssd-blog-body-text { font-size: 1rem; }
}

/* --- 5. Modern Feed Cards (The Grid) --- */
.ssd-post-card-modern {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ssd-post-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
    border-color: #475569;
}

.ssd-card-img-top {
    width: 100%;
    aspect-ratio: 16/9; /* Standard video/image ratio */
    object-fit: cover;
    background: #0f172a;
}

.ssd-card-body-modern {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.ssd-card-title-modern {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ssd-card-excerpt {
    font-size: 0.9rem;
    color: #94a3b8;
    margin-bottom: 15px;
    line-height: 1.5;
    flex-grow: 1;
}

.ssd-card-footer-modern {
    border-top: 1px solid #334155;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 23, 42, 0.3);
}

.ssd-btn-icon-text {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: color 0.2s;
}
.ssd-btn-icon-text:hover { color: #3b82f6; }
.ssd-btn-icon-text.liked { color: #f43f5e; }
.ssd-btn-icon-text i { font-size: 1.1rem; }

/* Grid Gap Fix */
.ssd-social-feed {
    gap: 25px; /* More space between cards */
}

/* =========================================================
   MODERN COMMENT DRAWER (Chat Style)
   ========================================================= */

/* 1. Overlay (Backdrop) */
.ssd-comment-drawer-overlay {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dark Dim */
    z-index: 10000;
    display: none;
    backdrop-filter: blur(4px); /* Blur Background */
    animation: fadeIn 0.3s ease;
}

/* 2. Main Drawer Container */
.ssd-comment-drawer {
    position: fixed;
    bottom: -100%; /* Hidden initially */
    left: 0;
    width: 100%;
    height: 85vh; /* Mobile Height */
    background: #0f172a; /* Deep Dark Blue */
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
    z-index: 10001;
    transition: bottom 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ssd-comment-drawer.open {
    bottom: 0; /* Slide Up */
}

/* Desktop Adjustment (Right Side Panel) */
@media (min-width: 768px) {
    .ssd-comment-drawer {
        left: auto;
        right: -500px; /* Hidden Right */
        bottom: 0;
        width: 450px;
        height: 100vh; /* Full Height */
        border-radius: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        transition: right 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .ssd-comment-drawer.open {
        right: 0;
        bottom: 0;
    }
}

/* 3. Header */
.ssd-drawer-header {
    padding: 18px 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 23, 42, 0.95);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

.ssd-drawer-header span {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

.ssd-drawer-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #94a3b8;
    width: 32px; 
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: all 0.2s;
}
.ssd-drawer-close:hover {
    background: #ef4444;
    color: white;
    transform: rotate(90deg);
}

/* 4. Body (Scroll Area) */
.ssd-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #0f172a;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Scrollbar Styling */
.ssd-drawer-body::-webkit-scrollbar { width: 5px; }
.ssd-drawer-body::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }

/* 5. Comment Items (Chat Bubbles) */
.ssd-drawer-comment-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    animation: msgSlideIn 0.3s ease forwards;
}

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

.ssd-comment-avatar {
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    object-fit: cover;
    border: 2px solid #1e293b;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.ssd-comment-box {
    background: #1e293b;
    padding: 12px 16px;
    border-radius: 0 18px 18px 18px; /* Chat bubble shape */
    color: #e2e8f0;
    font-size: 0.95rem;
    max-width: 85%;
    line-height: 1.5;
    position: relative;
    border: 1px solid #334155;
}

.ssd-comment-author {
    font-weight: 700;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 4px;
    color: #3b82f6; /* Blue Name */
}

.ssd-comment-time {
    display: block;
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 5px;
    text-align: right;
}

/* 6. Footer (Input Area) */
.ssd-drawer-footer {
    padding: 15px 20px;
    background: rgba(15, 23, 42, 0.95); /* Glass effect */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    gap: 12px;
    align-items: center;
    /* Safe area for iPhone */
    padding-bottom: env(safe-area-inset-bottom, 15px);
}

.ssd-drawer-input {
    flex: 1;
    background: #1e293b;
    border: 1px solid #334155;
    color: white;
    padding: 12px 20px;
    border-radius: 25px; /* Pill Shape */
    outline: none;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.ssd-drawer-input:focus {
    border-color: #3b82f6;
    background: #253045;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.ssd-drawer-input::placeholder {
    color: #64748b;
}

/* Send Button */
.ssd-drawer-send-btn {
    width: 45px; 
    height: 45px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    transition: transform 0.2s;
}

.ssd-drawer-send-btn:hover {
    transform: scale(1.1);
    background: #1d4ed8;
}

.ssd-drawer-send-btn i {
    font-size: 1.1rem;
    margin-left: -2px; /* Center alignment optical adjustment */
}

/* =========================================================
   MOBILE SCROLLABLE TABS (NON-STICKY / MOVE WITH PAGE)
   ========================================================= */

/* 1. Tabs Wrapper */
.tutor-tabs-nav-wrapper {
    width: 100%;
    background-color: #111827; /* Dark Background */
    border-bottom: 1px solid #374151; /* Border Line */
    
    /* CHANGE: Sticky ඉවත් කර Relative දැමීමෙන් එය Page එක සමග Move වේ */
    position: relative; 
    top: auto; 
    z-index: 1; /* අඩු Z-index අගයක් */
    
    margin-top: 0;
    overflow: hidden; /* Hide outer overflow */
}

/* 2. Scrollable Tabs Container (Horizontal Scroll) */
.tutor-tabs-nav {
    display: flex;
    flex-wrap: nowrap !important; /* Prevent wrapping */
    overflow-x: auto !important;  /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    white-space: nowrap; /* Keep text on one line */
    gap: 0; 
    padding: 0;
    margin: 0;
    
    /* Hide Scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Hide Scrollbar (Chrome/Safari/Webkit) */
.tutor-tabs-nav::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* 3. Individual Tab Buttons */
.tutor-tab-btn {
    flex: 0 0 auto; /* Prevent shrinking */
    display: inline-block;
    padding: 15px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #9ca3af;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

/* Active Tab Style */
.tutor-tab-btn.active {
    color: #3b82f6; 
    border-bottom-color: #3b82f6; 
    background-color: rgba(59, 130, 246, 0.05);
}

/* 4. Mobile Specific Adjustments */
@media (max-width: 768px) {
    .tutor-tabs-nav-wrapper {
        box-shadow: none; /* Remove shadow to blend with page */
    }

    .tutor-tab-btn {
        padding: 12px 16px;
        font-size: 0.9rem;
    }
}

/* --- SOCIAL FEED STYLES --- */

/* 1. Grid Layout */
.ssd-social-feed-grid, 
.ssd-feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    padding: 20px 0;
}

/* 2. Post Card Design */
.ssd-post-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.ssd-post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

/* 3. Card Header (Author Info) */
.ssd-post-header {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.ssd-post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.ssd-post-meta h4 {
    margin: 0;
    font-size: 0.95rem;
    color: #0f172a;
    font-weight: 600;
}

.ssd-post-meta span {
    font-size: 0.75rem;
    color: #64748b;
}

.ssd-verified-badge {
    color: #3b82f6;
    font-size: 0.8rem;
    margin-left: 4px;
}

/* 4. Card Media (Images/Videos) */
.ssd-post-media {
    position: relative;
    width: 100%;
    background: #000;
    overflow: hidden;
}

.ssd-post-media img {
    width: 100%;
    height: 220px; /* Fixed height for uniformity */
    object-fit: cover;
    display: block;
}

/* Video Indicator Overlay */
.ssd-video-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;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

/* 5. Card Content */
.ssd-post-content {
    padding: 15px;
    flex-grow: 1;
}

.ssd-post-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #1e293b;
    line-height: 1.4;
}

.ssd-post-excerpt {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Show only 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 6. Card Footer (Likes/Comments) */
.ssd-post-footer {
    padding: 12px 15px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ssd-post-action {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
}

.ssd-post-action:hover {
    color: #3b82f6;
}

.ssd-post-action.liked {
    color: #ef4444;
}

.ssd-post-action i {
    font-size: 1rem;
}

/* Filter Buttons (Updates) */
.ssd-feed-filters button.active,
.ssd-chip.active {
    background-color: #2563eb;
    color: white;
    border-color: #2563eb;
}

/* Responsive Fix */
@media (max-width: 600px) {
    .ssd-social-feed-grid, 
    .ssd-feed-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
}

/* Feed Styles */
.ssd-feed-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #334155;
}

.ssd-feed-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ssd-feed-tab-btn {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 20px;
    padding: 8px 16px;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.ssd-feed-tab-btn:hover {
    background: #2d3748;
    color: #fff;
}

.ssd-feed-tab-btn.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* Post Type Pills */
.ssd-post-type-pills {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    background: #1e293b;
    padding: 8px;
    border-radius: 12px;
}

.post-pill-btn {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.post-pill-btn:hover {
    background: #2d3748;
    color: #fff;
}

.post-pill-btn.active {
    background: #3b82f6;
    color: white;
}

/* Modern Card Grid */
.ssd-social-feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .ssd-social-feed {
        grid-template-columns: 1fr;
    }
}

.ssd-post-card-modern {
    background: #1e293b;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #334155;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ssd-post-card-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.ssd-card-body-modern {
    padding: 16px;
}

.ssd-card-footer-modern {
    padding: 12px 16px;
    border-top: 1px solid #334155;
    display: flex;
    gap: 15px;
}

.ssd-btn-icon-text {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.ssd-btn-icon-text:hover {
    color: #fff;
}

.ssd-btn-icon-text.liked {
    color: #ef4444;
}

.ssd-card-img-top {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-top: 1px solid #334155;
    border-bottom: 1px solid #334155;
}

.ssd-card-excerpt {
    color: #d1d5db;
    line-height: 1.6;
    margin-top: 10px;
    max-height: 4.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Comment Drawer */
.ssd-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100vh;
    background: #0f172a;
    border-left: 1px solid #334155;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 10002;
    display: flex;
    flex-direction: column;
}

.ssd-drawer.open {
    transform: translateX(0);
}

.ssd-drawer-header {
    padding: 20px;
    border-bottom: 1px solid #334155;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ssd-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.ssd-drawer-footer {
    padding: 20px;
    border-top: 1px solid #334155;
}

.ssd-drawer-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 24px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.ssd-drawer-close:hover {
    background: #334155;
}

.ssd-drawer-comment-item {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.ssd-comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ssd-comment-box {
    background: #1e293b;
    padding: 12px 16px;
    border-radius: 12px;
    flex: 1;
}

.ssd-comment-author {
    display: block;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.ssd-comment-time {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 4px;
}

/* FORCE STORY RING */
.tutor-profile-picture.ssd-story-active {
    border: 3px solid #3b82f6 !important; /* Bright Blue */
    padding: 3px !important;
    box-sizing: content-box !important;
    border-radius: 50% !important;
}

.tutor-profile-picture.ssd-story-seen {
    border: 3px solid #64748b !important; /* Gray */
    padding: 3px !important;
    box-sizing: content-box !important;
}

/* Ensure Feed Stories Tray items are visible */
.ssd-story-ring {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    padding: 3px;
    border-radius: 50%;
}
.ssd-story-ring img {
    border: 2px solid #0f172a; /* Dark background match */
    border-radius: 50%;
    display: block;
}

/* --- Manage Drawer / Popup Styles --- */
.ssd-manage-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ssd-manage-drawer-overlay.active {
    display: block;
    opacity: 1;
}

.ssd-manage-drawer {
    position: fixed;
    background: #1f2937; /* Dark background matches your theme */
    z-index: 9999;
    padding: 20px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    border: 1px solid #374151;
}

/* Header inside the drawer */
.ssd-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #374151;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.ssd-drawer-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #f3f4f6;
    margin: 0;
}

.ssd-drawer-close {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 1.2rem;
    cursor: pointer;
}

/* Drawer Items List */
.ssd-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ssd-drawer-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: #111827;
    border: 1px solid #374151;
    border-radius: 8px;
    color: #d1d5db;
    font-size: 0.95rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
    text-decoration: none;
    width: 100%;
}

.ssd-drawer-btn:hover {
    background: #374151;
    color: #fff;
}

.ssd-drawer-btn i {
    width: 20px;
    text-align: center;
}

/* Specific Colors for Actions */
.ssd-btn-edit:hover { border-color: #3b82f6; color: #3b82f6; }
.ssd-btn-lessons:hover { border-color: #8b5cf6; color: #8b5cf6; }
.ssd-btn-grow:hover { border-color: #10b981; color: #10b981; }
.ssd-btn-delete:hover { border-color: #ef4444; color: #ef4444; }

/* --- RESPONSIVE BEHAVIOR --- */

/* Mobile: Bottom Sheet (Slide Up) */
@media (max-width: 768px) {
    .ssd-manage-drawer {
        bottom: 0;
        left: 0;
        width: 100%;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        max-height: 80vh;
        overflow-y: auto;
    }
    .ssd-manage-drawer.active {
        transform: translateY(0);
    }
}

/* Desktop: Side Drawer (Slide from Right) */
@media (min-width: 769px) {
    .ssd-manage-drawer {
        top: 0;
        right: 0;
        height: 100vh;
        width: 350px;
        border-radius: 0;
        transform: translateX(100%);
        border-left: 1px solid #374151;
    }
    .ssd-manage-drawer.active {
        transform: translateX(0);
    }
}

/* Highlight Animation for Shared Post */
@keyframes ssdHighlightPulse {
    0% { background-color: rgba(59, 130, 246, 0.2); border-left: 3px solid #3b82f6; }
    50% { background-color: rgba(59, 130, 246, 0.1); border-left: 3px solid #3b82f6; }
    100% { background-color: transparent; border-left: 3px solid transparent; }
}

.ssd-highlight-anim {
    animation: ssdHighlightPulse 2s ease-out;
    border-radius: 8px; /* Optional rounded corners */
}

/* --- REACTION SYSTEM --- */
.ssd-reaction-wrapper {
    position: relative;
    display: inline-block;
}

/* Hover to show reactions (Desktop) */
.ssd-reaction-wrapper:hover .ssd-reaction-popup {
    display: flex;
    opacity: 1;
    transform: translateY(-10px) scale(1);
    visibility: visible;
}

.ssd-reaction-popup {
    display: none; /* Hidden by default */
    position: absolute;
    bottom: 100%;
    left: 0;
    background: #ffffff;
    border-radius: 50px;
    padding: 5px 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    gap: 8px;
    z-index: 100;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-bottom: 5px;
    white-space: nowrap;
}

.ssd-reaction-popup span {
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.2s;
    display: inline-block;
}

.ssd-reaction-popup span:hover {
    transform: scale(1.3);
}

/* --- COMMENT MENU --- */
.ssd-comment-actions {
    position: relative;
}
.ssd-comment-actions button {
    background: none; border: none; color: #94a3b8; cursor: pointer;
}
.ssd-comment-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 20px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    width: 100px;
    z-index: 50;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.ssd-comment-dropdown div {
    padding: 8px 12px;
    color: #e2e8f0;
    font-size: 0.85rem;
    cursor: pointer;
    border-bottom: 1px solid #334155;
}
.ssd-comment-dropdown div:hover { background: #334155; }
.ssd-comment-dropdown div.delete { color: #ef4444; }

/* Comment Layout */
.ssd-comment-item { display: flex; gap: 10px; margin-bottom: 15px; }
.ssd-comment-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.ssd-comment-content-box { flex: 1; }
.ssd-comment-bubble { background: #1e293b; padding: 8px 12px; border-radius: 15px; border: 1px solid #334155; display: inline-block; }
.ssd-comment-author { font-weight: 700; font-size: 0.85rem; color: #f8fafc; margin-bottom: 2px; }
.ssd-comment-text { font-size: 0.9rem; color: #cbd5e1; }
.ssd-comment-meta { font-size: 0.75rem; color: #64748b; margin-top: 4px; margin-left: 5px; }

/* --- PROFESSIONAL ICONS --- */
.ssd-action-item {
    font-size: 0.95rem;
    font-weight: 600;
    color: #94a3b8;
    display: flex; align-items: center; gap: 6px;
    transition: 0.2s;
    background: none; border: none;
}
.ssd-action-item:hover { color: #3b82f6; }
.ssd-action-item i { font-size: 1.1rem; }

/* =========================================
   SSD COMMENT DRAWER - DARK MODE STYLES
   ========================================= */

/* 1. Main Drawer Container */
#ssd-comment-drawer {
    background-color: #0f172a !important; /* Dark Blue-Black Background */
    border-top: 1px solid #1e293b !important; /* Subtle Border */
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

/* 2. Drawer Header */
.ssd-drawer-header {
    border-bottom: 1px solid #1e293b !important;
    background-color: #0f172a !important;
}

.ssd-drawer-header h3, 
.ssd-drawer-header span {
    color: #f8fafc !important; /* White Text */
    font-weight: 700 !important;
}

.ssd-drawer-close {
    color: #94a3b8 !important; /* Muted Blue-Gray Icon */
    background: transparent !important;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.ssd-drawer-close:hover {
    background: #1e293b !important;
    color: #fff !important;
}

.ssd-drawer-handle {
    background: #334155 !important; /* Dark Handle */
}

/* 3. Comment Body Area */
.ssd-drawer-body {
    background-color: #0f172a !important;
    scrollbar-color: #334155 #0f172a; /* For Firefox */
}

.ssd-drawer-body::-webkit-scrollbar-thumb {
    background-color: #334155;
    border-radius: 4px;
}

/* 4. Comment Bubbles */
.ssd-comment-bubble {
    background: #1e293b !important; /* Dark Slate Bubble */
    border: 1px solid #334155 !important; /* Slight Border Definition */
    color: #e2e8f0 !important;
    box-shadow: none !important;
}

.ssd-comment-author {
    color: #f8fafc !important; /* Bright White Name */
}

.ssd-comment-text {
    color: #cbd5e1 !important; /* Light Gray Comment Text */
}

.ssd-comment-meta span {
    color: #64748b !important; /* Darker Muted Timestamp */
}

/* 5. Footer & Input Area */
.ssd-drawer-footer {
    background: #1e293b !important;
    border-top: 1px solid #334155 !important;
}

.ssd-drawer-footer input {
    background: #0f172a !important; /* Very Dark Input Bg */
    border: 1px solid #334155 !important;
    color: #f1f5f9 !important; /* White Typing Text */
}

.ssd-drawer-footer input::placeholder {
    color: #64748b !important;
}

.ssd-drawer-send-btn {
    background: #3b82f6 !important; /* Primary Blue Button */
    color: #ffffff !important;
}

.ssd-drawer-send-btn:hover {
    background: #2563eb !important;
}

/* 6. Dropdown Menu (Edit/Delete) */
.ssd-comment-dropdown {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
}

.ssd-comment-dropdown div {
    color: #e2e8f0 !important;
    border-bottom: 1px solid #334155;
}

.ssd-comment-dropdown div:hover {
    background: #334155 !important;
}

/* Video Play Button Overlay Style */
.ssd-video-wrapper {
    position: relative;
    background: #000;
    display: block;
    width: 100%;
}

.ssd-play-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    transition: 0.2s;
    pointer-events: none; /* Click එක wrapper එකට යන්න */
}

.ssd-play-icon-overlay i {
    color: #fff;
    font-size: 24px;
    margin-left: 4px; /* Icon එක පොඩ්ඩක් මැදට ගන්න */
}

.ssd-video-wrapper:hover .ssd-play-icon-overlay {
    background: #ff0000; /* YouTube Red color on hover */
    border-color: #ff0000;
}

/* --- Action Buttons (Like, Comment, Share) Clean Style --- */

/* 1. බොත්තම් වල පසුබිම් සහ කොටු ඉවත් කිරීම (Common for all) */
.ssd-action-item {
    background-color: transparent !important; /* පසුබිම විනිවිද පෙනෙන ලෙස */
    border: none !important;
    outline: none !important; /* Focus ඉර ඉවත් කිරීම */
    box-shadow: none !important;
    transition: transform 0.1s ease; /* පොඩි Click Animation එකක් */
    -webkit-tap-highlight-color: transparent !important; /* Mobile Click Blue Box ඉවත් කිරීම */
}

/* 2. Click කරන මොහොතේ (Active State) පසුබිම ඉවත් කිරීම */
.ssd-action-item:active, 
.ssd-action-item:focus {
    background-color: transparent !important;
    color: inherit; /* කලින් තිබුන පාටම ගන්න */
}

/* 3. Click කරන විට පොඩි ගැස්සීමක් (Optional - හොඳ Feel එකක් දෙනවා) */
.ssd-action-item:active {
    transform: scale(0.95);
}

/* --- Like Button Colors (JS මගින් පාලනය වේ, නමුත් CSS මගින් සහාය දීම) --- */

/* Default (Like කර නැති විට) - අළු පාට */
.ssd-action-item i, 
.ssd-action-item span {
    font-weight: 600;
}

/* Like කළ විට (Blue) - මෙය JS එකෙන් style="color: #3b82f6" ලෙස වැටේ */
/* නමුත් CSS මගින් බල කිරීමට අවශ්‍ය නම් පහත Class එක JS මගින් Add කළ හැක. 
   දැනට පවතින JS එකේ inline style භාවිතා වන නිසා මෙය අවශ්‍යම නැත. */

    :root {
        /* DARK MODE VARS */
        --ssd-bg: #111827;
        --ssd-sidebar-bg: #0f172a;
        --ssd-box-bg: #1e293b;
        --ssd-border: #334155;
        --ssd-accent: #3b82f6;
        --ssd-text: #f1f5f9;
        --ssd-text-muted: #94a3b8;
    }

    /* LIGHT MODE VARS */
    body.light-mode {
        --ssd-bg: #f3f4f6;
        --ssd-sidebar-bg: #ffffff;
        --ssd-box-bg: #f8fafc;
        --ssd-border: #e2e8f0;
        --ssd-accent: #2563eb;
        --ssd-text: #0f172a;
        --ssd-text-muted: #64748b;
    }

    body { background: var(--ssd-bg); color: var(--ssd-text); margin: 0; font-family: 'Inter', sans-serif; }
    .ssd-dashboard-container { display: flex; min-height: 100vh; }

    /* --- SIDEBAR --- */
    .ssd-sidebar {
        width: 300px;
        background: var(--ssd-sidebar-bg);
        border-right: 1px solid var(--ssd-border);
        height: 100dvh;
        position: fixed; top: 0; left: 0;
        display: flex; flex-direction: column;
        z-index: 2000;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #334155 var(--ssd-sidebar-bg);
    }
    .ssd-sidebar::-webkit-scrollbar { width: 6px; }
    .ssd-sidebar::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }

    /* Header Areas */
    .ssd-sidebar-top { padding: 15px 12px; border-bottom: 1px solid var(--ssd-border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .ssd-profile-brief { display: flex; align-items: center; gap: 10px; }
    .ssd-profile-brief img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #333; }
    .ssd-profile-text { display: flex; flex-direction: column; }
    .ssd-welcome { font-size: 0.65rem; color: var(--ssd-text-muted); text-transform: uppercase; }
    .ssd-name { font-size: 0.85rem; font-weight: 700; color: var(--ssd-text); }
    
    .ssd-icon-action { width: 32px; height: 32px; background: var(--ssd-box-bg); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--ssd-text-muted); border: 1px solid var(--ssd-border); cursor: pointer; text-decoration: none; transition: 0.2s; }
    .ssd-icon-action:hover { background: var(--ssd-accent); color: white; border-color: var(--ssd-accent); }

    /* Search */
    .ssd-sidebar-search-row { padding: 10px 12px; display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
    .ssd-search-wrapper { position: relative; flex: 1; }
    .ssd-search-wrapper input { width: 100%; height: 36px; background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); padding: 0 10px 0 32px; border-radius: 8px; color: var(--ssd-text); font-size: 0.8rem; box-sizing: border-box; }
    .ssd-search-wrapper input:focus { outline: none; border-color: var(--ssd-accent); }
    .ssd-search-wrapper i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ssd-text-muted); font-size: 0.75rem; }

    /* Content Area */
    .ssd-sidebar-content { padding: 5px 12px 20px 12px; flex-grow: 1; }
    .ssd-nav-section { margin-bottom: 15px; }
    .ssd-nav-section label { display: block; font-size: 0.65rem; color: var(--ssd-text-muted); font-weight: 800; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; }

    .ssd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .ssd-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }

    /* =========================================================
       PROFESSIONAL BOX ITEMS (WHITE TEXT FIXED)
       ========================================================= */
    .ssd-box-item {
        position: relative;
        background: var(--ssd-box-bg);
        border: 1px solid var(--ssd-border);
        padding: 15px 5px;
        border-radius: 12px;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
        cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-align: center; text-decoration: none;
        overflow: hidden;
        min-height: 70px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        
        /* FORCE WHITE TEXT */
        color: #ffffff !important;
    }

    /* Icon & Text Specifics */
    .ssd-box-item i { 
        font-size: 1.2rem; 
        color: #ffffff !important; /* White Icon */
        position: relative; z-index: 2; transition: 0.2s; 
        text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .ssd-box-item span { 
        font-size: 0.7rem; 
        color: #ffffff !important; /* White Text */
        font-weight: 600; position: relative; z-index: 2; transition: 0.2s; 
        text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    /* Watermark Icon (Faint Background) */
    .ssd-box-item::after {
        content: ''; 
        font-family: "Font Awesome 5 Free"; font-weight: 900;
        position: absolute; right: -10px; bottom: -10px;
        font-size: 3rem; opacity: 0.15; /* Increased visibility slightly */
        transform: rotate(-20deg); z-index: 1; color: white;
        transition: all 0.3s ease;
    }

    /* Hover Effects */
    .ssd-box-item:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.2); }
    .ssd-box-item:hover::after { opacity: 0.25; transform: rotate(-10deg) scale(1.1); }
    
    /* Active State */
    .ssd-box-item.active { border: 2px solid #ffffff; box-shadow: 0 0 10px rgba(255,255,255,0.4); }

    /* --- SPECIFIC COLORS (GRADIENTS) --- */

    /* 1. SERVICES */
    .ssd-box-item[data-tab="bookstore"], .ssd-box-item[href*="store"] { background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%); }
    .ssd-box-item[data-tab="bookstore"]::after, .ssd-box-item[href*="store"]::after { content: '\f02d'; }

    .ssd-box-item[data-tab="all-classes"], .ssd-box-item[href*="courses"] { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }
    .ssd-box-item[data-tab="all-classes"]::after, .ssd-box-item[href*="courses"]::after { content: '\f51c'; }

    /* 2. ACCOUNTS */
    .ssd-box-item[data-tab="my-profile"] { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
    .ssd-box-item[data-tab="my-profile"]::after { content: '\f007'; }

    .ssd-box-item[data-tab="my-pages"] { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }
    .ssd-box-item[data-tab="my-pages"]::after { content: '\f024'; }

    .ssd-box-item[data-tab="my-wallet"] { background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); }
    .ssd-box-item[data-tab="my-wallet"]::after { content: '\f555'; }

    /* 3. STUDY */
    .ssd-box-item[data-tab="my-classes"] { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
    .ssd-box-item[data-tab="my-classes"]::after { content: '\f5fc'; }

    .ssd-box-item[data-tab="study-room"] { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); }
    .ssd-box-item[data-tab="study-room"]::after { content: '\f2f2'; }

    /* 4. SUPPORT */
    .ssd-box-item[data-tab="chat"] { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
    .ssd-box-item[data-tab="chat"]::after { content: '\f4ad'; }

    .ssd-box-item[data-tab="help"], .ssd-box-item[href*="about"] { background: linear-gradient(135deg, #64748b 0%, #475569 100%); }
    .ssd-box-item[data-tab="help"]::after { content: '\f059'; }

    .ssd-box-item[data-tab="settings"] { background: linear-gradient(135deg, #4b5563 0%, #374151 100%); }
    .ssd-box-item[data-tab="settings"]::after { content: '\f013'; }

    /* 5. PUBLIC ACTIONS */
    .ssd-box-item[href*="login"] { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
    .ssd-box-item[href*="login"]::after { content: '\f2f6'; }

    .ssd-box-item[href*="register"] { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
    .ssd-box-item[href*="register"]::after { content: '\f234'; }

    /* Footer */
    .ssd-sidebar-footer { padding-top: 10px; border-top: 1px solid var(--ssd-border); margin-top: 10px; }
    .ssd-logout-btn { display: block; width: 100%; padding: 10px; border: 1px solid var(--ssd-border); text-align: center; color: #ef4444; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.85rem; transition: 0.2s; box-sizing: border-box; }
    .ssd-logout-btn:hover { background: rgba(239, 68, 68, 0.1); border-color: #ef4444; }
    .ssd-version { text-align: center; font-size: 0.7rem; color: var(--ssd-text-muted); margin-top: 8px; }

    /* MOBILE RESPONSIVE */
    .ssd-mobile-header {
        display: none; position: fixed; top: 0; left: 0; width: 100%; height: 60px;
        background: var(--ssd-sidebar-bg); z-index: 1000;
        border-bottom: 1px solid var(--ssd-border);
        align-items: center; justify-content: space-between; padding: 0 15px; box-sizing: border-box;
    }
    .ssd-mobile-logo { height: 30px; }
    .ssd-header-avatar { width: 35px; height: 35px; border-radius: 50%; border: 2px solid var(--ssd-accent); }
    .ssd-header-login-link { color: var(--ssd-text); font-size: 1.5rem; }
    #ssd-mobile-menu-btn { background: none; border: none; color: var(--ssd-text); font-size: 1.5rem; }

    .ssd-main-content { margin-left: 300px; width: calc(100% - 300px); padding: 30px; background: var(--ssd-bg); min-height: 100vh; box-sizing: border-box; }
    
    @media (max-width: 991px) {
        .ssd-mobile-header { display: flex; }
        .ssd-sidebar { transform: translateX(-100%); width: 100% !important; height: 100dvh; z-index: 9999; overflow-y: auto; }
        .ssd-sidebar.open { transform: translateX(0); }
        .ssd-main-content { margin-left: 0; width: 100%; padding: 20px 15px; margin-top: 60px; }
        .ssd-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 1500; }
        .ssd-overlay.active { display: block; }
    }
		/* 1. Updated Search Row Logic */
    .ssd-sidebar-search-row { 
        padding: 10px 12px; 
        display: flex; gap: 8px; align-items: center; 
        flex-shrink: 0;
    }
    
    /* Search Wrapper (Flexible width) */
    .ssd-search-wrapper { position: relative; flex: 1; width: auto; }
    
    /* Feed Button (Custom Width for Text) */
    .ssd-icon-action.feed-btn {
        width: auto !important; /* Allow width to expand */
        padding: 0 12px;
        gap: 6px;
        border-radius: 8px; /* Slightly more rounded */
        justify-content: center;
        background: var(--ssd-box-bg);
        text-decoration: none;
    }
    
    /* Feed Text */
    .ssd-feed-text {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--ssd-text-muted);
        display: inline-block;
    }
    
    /* Hover Effects */
    .ssd-icon-action.feed-btn:hover .ssd-feed-text { color: white; }

/* =========================================================
   MODERN WALLET SYSTEM - DARK MODE (Dashboard Integrated)
   ========================================================= */

:root {
    /* Dashboard Dark Theme Color Mapping */
    --wallet-primary: #3b82f6;   /* Dashboard Blue */
    --wallet-secondary: #ffffff; /* Headings */
    --wallet-accent: #10b981;    /* Green */
    --wallet-bg: #111827;        /* Dashboard Main BG */
    --wallet-card-bg: #1f2937;   /* Dashboard Card BG */
    --wallet-border: #374151;    /* Dashboard Border */
    --wallet-text: #d1d5db;      /* Body Text */
    --wallet-text-light: #9ca3af;/* Muted Text */
    
    /* Shadows optimized for Dark Mode */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* --- Main Container --- */
.ssd-wallet-wrapper {
    background: var(--wallet-bg);
    min-height: 600px;
    border-radius: 16px;
    padding: 20px;
    position: relative;
    padding-bottom: 80px; /* Space for mobile nav */
    color: var(--wallet-text);
}

/* --- Header Section --- */
.wallet-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--wallet-border);
    padding-bottom: 15px;
}
.wallet-title h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--wallet-secondary);
    margin: 0;
}
.wallet-title p {
    color: var(--wallet-text-light);
    margin: 5px 0 0;
    font-size: 0.95rem;
}

/* --- Desktop Navigation (Pills) --- */
.wallet-desktop-nav {
    display: flex;
    gap: 10px;
    background: #1f2937; /* Darker container */
    padding: 5px;
    border-radius: 12px;
    width: fit-content;
    margin-bottom: 30px;
    border: 1px solid var(--wallet-border);
}

.w-nav-item {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--wallet-text-light);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.w-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.w-nav-item.active {
    background: #3b82f6; /* Dashboard Blue */
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

/* --- Mobile Bottom Navigation (App Style) --- */
.wallet-mobile-nav {
    display: none; /* Hidden on Desktop */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #1f2937; /* Dark Card BG */
    border-top: 1px solid var(--wallet-border);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
    z-index: 9999;
    padding: 10px 0 15px; /* Safe area */
    justify-content: space-around;
    align-items: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.m-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--wallet-text-light);
    font-size: 0.75rem;
    cursor: pointer;
    width: 20%;
}

.m-nav-item i {
    font-size: 1.2rem;
    margin-bottom: 2px;
    transition: transform 0.2s;
}

.m-nav-item.active {
    color: var(--wallet-primary);
    font-weight: 600;
}

.m-nav-item.active i {
    transform: translateY(-3px);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* --- ATM Card Design (Glassmorphism) --- */
.wallet-atm-card {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); /* Darker Blue Gradient */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    margin-bottom: 30px;
}

.wallet-atm-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    z-index: 0;
}

.atm-content { position: relative; z-index: 1; }
.atm-label { font-size: 0.85rem; opacity: 0.8; text-transform: uppercase; letter-spacing: 1px; color: #bfdbfe; }
.atm-balance { font-size: 2.8rem; font-weight: 700; margin: 10px 0 5px; color: #ffffff; }
.atm-actions { display: flex; gap: 15px; margin-top: 25px; }

.btn-atm {
    background: rgba(31, 41, 55, 0.6); /* Semi-transparent dark */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    backdrop-filter: blur(5px);
    cursor: pointer;
    font-weight: 500;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-atm:hover { 
    background: rgba(59, 130, 246, 0.4); 
    border-color: rgba(59, 130, 246, 0.6);
    transform: translateY(-2px); 
}
.btn-atm.withdraw { 
    background: #eab308; /* Yellow/Gold */
    border: none; 
    color: #111827; /* Dark Text */
    font-weight: 700;
}
.btn-atm.withdraw:hover { background: #facc15; }

/* --- Stats Grid --- */
.wallet-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.w-stat-card {
    background: var(--wallet-card-bg);
    padding: 20px;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--wallet-border);
    transition: transform 0.2s;
}
.w-stat-card:hover { transform: translateY(-2px); border-color: #4b5563; }

.w-stat-card h4 { color: var(--wallet-text-light); margin: 0 0 5px 0; font-size: 0.85rem; text-transform: uppercase; }
.w-stat-card span { font-size: 1.4rem; font-weight: 700; color: #fff; }

.w-icon-box {
    width: 50px; height: 50px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
/* Adjusted icon background colors for Dark Mode */
.w-icon-box.green { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.2); }
.w-icon-box.red { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.2); }

/* --- Transactions List (Mobile Friendly) --- */
.trx-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--wallet-card-bg);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
    transition: 0.2s;
    border: 1px solid var(--wallet-border);
}
.trx-list-item:hover { 
    transform: translateX(5px); 
    border-color: #4b5563; 
    background-color: #252f3f;
}

.trx-left { display: flex; align-items: center; gap: 15px; }
.trx-icon { 
    width: 40px; height: 40px; 
    border-radius: 50%; 
    background: #111827; /* Darker bg for icon */
    border: 1px solid #374151;
    display: flex; align-items: center; justify-content: center; 
    color: #9ca3af; 
}

.trx-meta h4 { margin: 0; font-size: 0.95rem; color: #f3f4f6; } /* White text */
.trx-meta span { font-size: 0.8rem; color: #9ca3af; } /* Muted text */

.trx-amount { font-weight: 700; font-size: 1rem; }
.trx-amount.plus { color: #34d399; } /* Bright Green */
.trx-amount.minus { color: #f87171; } /* Bright Red */

/* --- Responsive Media Queries --- */
@media (max-width: 768px) {
    .wallet-desktop-nav { display: none; }
    .wallet-mobile-nav { display: flex; }
    .ssd-wallet-wrapper { padding: 15px; padding-bottom: 90px; }
    .atm-balance { font-size: 2.2rem; }
}

/* --- Professional Modal Styles --- */
.sbp-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.6); /* Backdrop blur feel */
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

.sbp-modal-content {
    background: #fff;
    width: 90%;
    max-width: 400px;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    position: relative;
    animation: slideUp 0.3s ease-out;
}

.sbp-modal-content.large {
    max-width: 500px;
}

.sbp-modal-header {
    padding: 20px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sbp-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #1e293b;
    font-weight: 600;
}

.close-modal {
    font-size: 1.5rem;
    color: #94a3b8;
    cursor: pointer;
    transition: 0.2s;
}

.close-modal:hover { color: #ef4444; }

.sbp-modal-body {
    padding: 25px;
}

/* --- Professional Form Elements --- */
.form-group { margin-bottom: 15px; }
.form-row { display: flex; gap: 15px; }
.form-group.half { flex: 1; }

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
}

.sbp-input, .sbp-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #334155;
    transition: 0.2s;
    background: #f8fafc;
}

.sbp-input:focus, .sbp-select:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input-with-icon {
    position: relative;
}
.input-with-icon i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}
.input-with-icon input {
    padding-left: 35px;
}

.sbp-btn-primary.full-width {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
}

/* --- Saved Bank Accounts Grid --- */
.bank-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.bank-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.2s;
    position: relative;
}

.bank-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.bank-icon {
    width: 45px;
    height: 45px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 1.2rem;
}

.bank-details h5 {
    margin: 0 0 2px 0;
    font-size: 1rem;
    color: #1e293b;
}

.bank-details p {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
}

.bank-delete-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 0.9rem;
}
.bank-delete-btn:hover { color: #ef4444; }

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

/* --- Modern Bank Grid Layout --- */
.bank-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* Responsive Grid */
    gap: 20px;
}

/* 1. The Bank Account Card */
.bank-card-modern {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.bank-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

.bc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.bc-icon {
    width: 40px; height: 40px;
    background: #eff6ff;
    color: #3b82f6;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}

.bc-name h4 {
    margin: 0; font-size: 0.95rem; color: #1e293b; font-weight: 600;
}
.bc-name span {
    font-size: 0.75rem; color: #64748b;
}

.bc-number {
    font-family: 'Courier New', monospace; /* Monospace for card numbers */
    font-size: 1.1rem;
    color: #334155;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.bc-holder {
    font-size: 0.8rem;
    color: #94a3b8;
    text-transform: uppercase;
}

.bc-delete-btn {
    position: absolute;
    top: 15px; right: 15px;
    color: #cbd5e1;
    cursor: pointer;
    transition: 0.2s;
}
.bc-delete-btn:hover { color: #ef4444; }

/* 2. The "Add New" Card (Dashed Box) */
.bank-card-add {
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-height: 140px;
    transition: all 0.3s ease;
    color: #64748b;
}

.bank-card-add:hover {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #3b82f6;
}

.bank-card-add i {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.bank-card-add span {
    font-weight: 500;
    font-size: 0.95rem;
}

.bank-actions-top {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 10px;
}

.action-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.8rem;
    transition: 0.2s;
}

.action-btn:hover { transform: scale(1.1); }
.action-btn.edit:hover { background: #dbeafe; color: #2563eb; }
.action-btn.delete:hover { background: #fee2e2; color: #dc2626; }

.bank-actions-top {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 10px;
}

.action-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.8rem;
    transition: 0.2s;
}

.action-btn:hover { transform: scale(1.1); }
.action-btn.edit:hover { background: #dbeafe; color: #2563eb; }
.action-btn.delete:hover { background: #fee2e2; color: #dc2626; }

.ssd-pay-option {
    flex: 1;
    padding: 12px;
    border: 1px solid #334155;
    background: #0f172a;
    color: #94a3b8;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.ssd-pay-option.selected {
    border-color: #3b82f6;
    background: #1e293b;
    color: white;
    font-weight: 600;
}
.ssd-pay-option i { margin-right: 5px; }

/* SUCCESS MODAL STYLES */
.ssd-success-content {
    background: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    width: 320px;
    transform: scale(0.8);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popIn {
    to { transform: scale(1); }
}

.ssd-success-content h3 { color: #10b981; margin: 20px 0 10px; font-size: 1.4rem; }
.ssd-success-content p { color: #64748b; margin: 0; font-size: 0.95rem; }
.ssd-redirect-text { margin-top: 15px !important; font-size: 0.85rem !important; opacity: 0.7; }

/* CHECKMARK ANIMATION */
.ssd-checkmark { width: 80px; height: 80px; border-radius: 50%; display: block; stroke-width: 2; stroke: #10b981; stroke-miterlimit: 10; margin: 0 auto; box-shadow: inset 0px 0px 0px #10b981; animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; }
.ssd-checkmark-circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #10b981; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.ssd-checkmark-check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }

@keyframes stroke { 100% { stroke-dashoffset: 0; } }
@keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
@keyframes fill { 100% { box-shadow: inset 0px 0px 0px 50px #d1fae5; } }


/* --- SECURITY PIN OVERLAY --- */
.ssd-pin-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.85); /* Dark Blue Transparent */
    backdrop-filter: blur(15px); /* Strong Blur Effect */
    -webkit-backdrop-filter: blur(15px);
    z-index: 999999; /* Top most layer */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.ssd-pin-overlay.active {
    opacity: 1;
    visibility: visible;
}

.ssd-pin-container {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    text-align: center;
    max-width: 400px;
    width: 90%;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.ssd-pin-overlay.active .ssd-pin-container {
    transform: scale(1);
}

.ssd-pin-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    font-size: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.ssd-pin-input-row {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 30px 0;
}

.ssd-access-digit {
    width: 50px;
    height: 60px;
    font-size: 1.5rem;
    text-align: center;
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid #334155;
    border-radius: 12px;
    color: #fff;
    transition: all 0.2s;
}

.ssd-access-digit:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
    outline: none;
    transform: translateY(-2px);
}

.ssd-pin-error {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    padding: 10px;
    border-radius: 8px;
    margin-top: 15px;
    display: none;
    font-size: 0.9rem;
}

/* =========================================
   APP-LIKE UI STYLES (Classes Tab)
   ========================================= */

.ssd-classes-wrapper { padding-bottom: 80px; }

/* SLIDER STYLES */
.ssd-sponsored-section { margin-bottom: 25px; }
.ssd-section-header { font-size: 1.1rem; color: #fff; margin-bottom: 10px; font-weight: 600; padding-left: 5px; }

.ssd-slider-container {
    width: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 10px;
}
.ssd-slider-container::-webkit-scrollbar { display: none; }

.ssd-slider-wrapper { display: flex; gap: 15px; }

.ssd-slider-item {
    min-width: 85%; max-width: 85%; aspect-ratio: 2 / 1;
    background: #1f2937; border-radius: 15px; overflow: hidden;
    position: relative; scroll-snap-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
@media (min-width: 768px) { .ssd-slider-item { min-width: 400px; max-width: 400px; } }

.ssd-slider-item img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }

.ssd-slider-overlay {
    position: absolute; bottom: 0; left: 0; right: 0; top: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 10%, rgba(0,0,0,0.4) 50%, transparent 100%);
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
    padding: 15px;
}

.ssd-slider-content { width: 100%; text-align: left; }

.ssd-slider-tag {
    background: #f59e0b; color: #000; font-size: 0.55rem; font-weight: 700;
    padding: 2px 6px; border-radius: 4px; text-transform: uppercase;
    display: inline-block; margin-bottom: 5px;
}

.ssd-slider-content h3 {
    color: #fff; margin: 0 0 8px 0; font-size: 0.9rem; line-height: 1.3;
    font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.ssd-slider-enroll-btn {
    background: #3b82f6; color: #fff; border: none; padding: 5px 14px;
    border-radius: 20px; font-weight: 600; font-size: 0.7rem; cursor: pointer;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); display: inline-flex; align-items: center; gap: 4px;
}

/* FILTER BAR & GRID */
.ssd-classes-header-area { margin-bottom: 20px; }
.ssd-section-title { font-size: 1.1rem; color: #fff; margin: 0; font-weight: 600; }
.ssd-section-desc { color: #9ca3af; margin: 0; font-size: 0.95rem; }

.ssd-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.ssd-search-box, .ssd-select-box {
    position: relative; background: #1f2937; border: 1px solid #374151;
    border-radius: 10px; height: 45px; display: flex; align-items: center;
}
.ssd-search-box { flex-grow: 2; min-width: 200px; }
.ssd-select-box { flex-grow: 1; min-width: 120px; }
.ssd-search-box input, .ssd-select-box select {
    width: 100%; background: transparent; border: none; color: #fff;
    font-size: 0.9rem; outline: none; padding: 0 40px 0 15px;
    appearance: none; -webkit-appearance: none; height: 100%;
}
.ssd-search-box input { padding-left: 40px; }
.ssd-search-box .search-icon { position: absolute; left: 15px; color: #9ca3af; pointer-events: none; }
.ssd-select-box .select-icon { position: absolute; right: 15px; color: #9ca3af; pointer-events: none; font-size: 0.8rem; }

@media (max-width: 600px) {
    .ssd-filter-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .ssd-search-box { grid-column: 1 / -1; min-width: auto; }
}

/* CARD STYLES */
.ssd-classes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 1024px) { .ssd-classes-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; } }

.ssd-pro-class-card { background: #1f2937; border: 1px solid #374151; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform 0.2s; }
.ssd-class-header { width: 100%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: #111827; }
.ssd-class-header img { width: 100%; height: 100%; object-fit: cover; }
.ssd-class-overlay-tag { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,0.8); color: #fff; font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; backdrop-filter: blur(2px); text-transform: uppercase; }
.ssd-badge-offer { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #000; font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 3px; }

.ssd-class-body { padding: 10px; display: flex; flex-direction: column; flex-grow: 1; }
.ssd-class-title { font-size: 0.9rem; font-weight: 700; color: #fff; margin: 0 0 5px 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.6em; }
.ssd-class-tutor { font-size: 0.75rem; color: #9ca3af; margin-bottom: 8px; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.ssd-verified-tick { color: #3b82f6; font-size: 0.8em; flex-shrink: 0; }
.ssd-class-footer { margin-top: auto; border-top: 1px solid #374151; padding-top: 8px; }
.ssd-class-price { font-size: 0.9rem; font-weight: 700; color: #10b981; margin-bottom: 8px; }

.ssd-btn-group { display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 992px) { .ssd-btn-group { flex-direction: row; } }
.ssd-pro-class-btn, .ssd-share-feed-btn { width: 100%; padding: 6px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; border: none; cursor: pointer; text-align: center; display: flex; align-items: center; justify-content: center; gap: 5px; color: white; }
.ssd-pro-class-btn { background: #3b82f6; }
.ssd-share-feed-btn { background: #10b981; }

.ssd-empty-state { text-align: center; padding: 40px; background: #1f2937; border-radius: 12px; border: 1px dashed #374151; color: #9ca3af; }
.ssd-empty-state h4 { color: #fff; margin: 5px 0; font-size: 1.2rem; }
@media (max-width: 600px) { .ssd-class-title { font-size: 0.85rem !important; } .ssd-class-overlay-tag, .ssd-badge-offer { font-size: 0.55rem; padding: 1px 4px; } }

.ssd-desktop-top-row { display: flex; gap: 20px; align-items: stretch; margin-bottom: 25px; }
.ssd-stats-overview-card { flex: 2; background: #1e293b; border: 1px solid #334155; border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); margin-bottom: 0; }
.ssd-stat-rank-col { flex: 0 0 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid #334155; padding-right: 20px; text-align: center; }
.ssd-rank-trophy { font-size: 2.8rem; color: #f59e0b; margin-bottom: 8px; filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.4)); }
.ssd-rank-info .lbl { font-size: 0.75rem; color: #94a3b8; display: block; text-transform: uppercase; letter-spacing: 1px; }
.ssd-rank-info .val { font-size: 1.6rem; font-weight: 800; color: #fff; display: block; line-height: 1.2; }
.ssd-rank-info .sub-lbl { font-size: 0.7rem; color: #10b981; background: rgba(16, 185, 129, 0.1); padding: 2px 8px; border-radius: 10px; }
.ssd-stat-grid-col { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.ssd-mini-stat { background: #0f172a; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; border: 1px solid #334155; }
.ssd-mini-stat .lbl { font-size: 0.75rem; color: #64748b; margin-bottom: 3px; }
.ssd-mini-stat .val { font-size: 1rem; font-weight: 700; color: #fff; }
.text-orange { color: #f97316 !important; }
.ssd-badges-card { flex: 1; background: #1e293b; border: 1px solid #334155; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; margin-bottom: 0; }
.ssd-modern-badges-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; height: 100%; }
.ssd-badge-item { background: #0f172a; border: 1px solid #334155; border-radius: 10px; padding: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: 0.2s; }
.ssd-badge-item:hover { border-color: #3b82f6; transform: translateY(-2px); }
.badge-icon { width: 35px; height: 35px; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; }
.badge-icon img { width: 100%; height: 100%; object-fit: contain; }
.badge-icon i { font-size: 1.2rem; color: #475569; }
.badge-name { display: block; font-size: 0.7rem; color: #cbd5e1; font-weight: 600; }
.ssd-badge-item.locked { opacity: 0.6; }
.ssd-modern-chart-card { background: #1e293b; border-radius: 16px; padding: 25px; margin-bottom: 25px; border: 1px solid #334155; }
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }

@media (max-width: 768px) {
    .ssd-desktop-top-row { flex-direction: column; gap: 15px; }
    .ssd-stats-overview-card { flex-direction: row !important; padding: 10px !important; min-height: auto; }
    .ssd-stat-rank-col { flex: 0 0 32% !important; border-right: 1px solid #334155 !important; padding-right: 8px !important; border-bottom: none !important; }
    .ssd-rank-trophy { font-size: 1.8rem !important; margin-bottom: 4px !important; }
    .ssd-rank-info .val { font-size: 1.2rem !important; }
    .ssd-rank-info .lbl { font-size: 0.6rem !important; }
    .ssd-rank-info .sub-lbl { font-size: 0.6rem !important; padding: 1px 6px !important; }
    .ssd-stat-grid-col { gap: 6px !important; }
    .ssd-mini-stat { padding: 6px 8px !important; min-height: 50px; }
    .ssd-mini-stat .val { font-size: 0.85rem !important; }
    .ssd-mini-stat .lbl { font-size: 0.6rem !important; }
    .ssd-badges-card { padding: 12px !important; }
    .ssd-modern-badges-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
    .ssd-badge-item { padding: 6px !important; min-height: 70px; }
    .badge-icon { width: 28px !important; height: 28px !important; }
    .badge-name { font-size: 0.6rem !important; }
    .ssd-modern-chart-card { padding: 15px !important; }
    .ssd-profile-chart-wrap { height: 200px !important; }
}

.ssd-option:hover, .ssd-option.active { background: #374151; color: #fff; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 768px) { .ssd-search-box { min-width: 250px; width: auto; } .ssd-select-group { width: auto; } }

/* --- SLIDERS --- */
.ssd-sponsored-section { margin-bottom: 25px; }
.ssd-section-header { font-size: 1.1rem; color: #fff; margin-bottom: 10px; font-weight: 600; padding-left: 5px; }
.ssd-slider-container { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
.ssd-slider-wrapper { display: flex; gap: 15px; }
.ssd-slider-item { min-width: 85%; max-width: 85%; aspect-ratio: 2 / 1; background: #1f2937; border-radius: 15px; overflow: hidden; position: relative; scroll-snap-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
@media (min-width: 768px) { .ssd-slider-item { min-width: 400px; max-width: 400px; } }
.ssd-slider-item img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.ssd-slider-overlay { position: absolute; bottom: 0; left: 0; right: 0; top: 0; background: linear-gradient(to top, rgba(0,0,0,0.95) 10%, rgba(0,0,0,0.4) 50%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 15px; }
.ssd-slider-content { width: 100%; text-align: left; }
.ssd-slider-tag { background: #f59e0b; color: #000; font-size: 0.55rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; display: inline-block; margin-bottom: 5px; }
.ssd-slider-content h3 { color: #fff; margin: 0 0 8px 0; font-size: 0.9rem; line-height: 1.3; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ssd-slider-enroll-btn { background: #3b82f6; color: #fff; border: none; padding: 5px 14px; border-radius: 20px; font-weight: 600; font-size: 0.7rem; cursor: pointer; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); display: inline-flex; align-items: center; gap: 4px; }

.ssd-classes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 1024px) { .ssd-classes-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; } }
.ssd-empty-state { text-align: center; padding: 40px; background: #1f2937; border-radius: 12px; border: 1px dashed #374151; color: #9ca3af; }
.ssd-empty-state h4 { color: #fff; margin: 5px 0; font-size: 1.2rem; }

@media (max-width: 600px) { 
    .ssd-class-title { font-size: 0.85rem !important; } 
    .ssd-class-overlay-tag, .ssd-badge-offer { font-size: 0.55rem; padding: 1px 4px; } 
    .ssd-classes-header-area { margin-bottom: 15px !important; }
}

/* Light Mode Overrides */
body.light-mode .ssd-select-trigger { background: #ffffff; border-color: #e2e8f0; color: #1e293b; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
body.light-mode .ssd-select-trigger:hover { background: #f8fafc; color: #0f172a; }
body.light-mode .ssd-options-list { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
body.light-mode .ssd-option { color: #475569; border-color: #f1f5f9; }
body.light-mode .ssd-option:hover, body.light-mode .ssd-option.active { background: #eff6ff; color: #3b82f6; }

/* Main Layout */
    .ssd-exam-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; flex-wrap: wrap; gap: 20px; }
    .header-text h2 { margin: 0; font-size: 2rem; color: white; display:flex; align-items:center; gap:10px; }
    .header-text p { margin: 5px 0 0; color: #94a3b8; }

    /* Filter Bar */
    .ssd-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
    .ssd-search-wrap { position: relative; min-width: 250px; flex-grow: 1; }
    .ssd-search-wrap input { width: 100%; background: #1f2937; border: 1px solid #334155; padding: 10px 15px 10px 40px; border-radius: 30px; color: white; outline: none; transition: 0.3s; height: 42px; box-sizing: border-box; }
    .ssd-search-wrap input:focus { border-color: #3b82f6; box-shadow: 0 0 15px rgba(59, 130, 246, 0.2); }
    .ssd-search-wrap i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #64748b; }

    /* Dropdowns */
    .ssd-custom-select { position: relative; width: 180px; }
    .ssd-select-trigger { background: #1f2937; border: 1px solid #334155; border-radius: 30px; padding: 0 15px; height: 42px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 0.85rem; user-select: none; }
    .ssd-select-trigger:hover { border-color: #3b82f6; color: white; }
    .ssd-options-list { display: none; position: absolute; top: 110%; left: 0; right: 0; background: #1e293b; border: 1px solid #334155; border-radius: 10px; z-index: 50; max-height: 250px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
    .ssd-custom-select.active .ssd-options-list { display: block; }
    .ssd-option { padding: 10px 15px; cursor: pointer; color: #cbd5e1; border-bottom: 1px solid #334155; font-size: 0.85rem; transition: 0.2s; }
    .ssd-option:last-child { border-bottom: none; }
    .ssd-option:hover, .ssd-option.active { background: #3b82f6; color: white; }

    /* Grid & Cards */
    .ssd-exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 25px; }
    .ssd-exam-card { background: #1e293b; border-radius: 12px; overflow: hidden; border: 1px solid #334155; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; }
    .ssd-exam-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.3); border-color: #475569; }

    .exam-thumb { position: relative; width: 100%; padding-top: 60%; overflow: hidden; background: #000; }
    .exam-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: 0.3s; }
    .ssd-exam-card:hover .exam-thumb img { opacity: 1; transform: scale(1.05); }
    
    /* BADGES */
    .exam-duration-badge { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.75); color: #fbbf24; padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; backdrop-filter: blur(4px); }
    
    .exam-attempts-badge { 
        position: absolute; 
        top: 10px; 
        left: 10px; 
        background: rgba(59, 130, 246, 0.9); /* Blue */
        color: white; 
        padding: 4px 8px; 
        border-radius: 6px; 
        font-size: 0.75rem; 
        font-weight: 600; 
        backdrop-filter: blur(4px);
        display: flex; align-items: center; gap: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: 5;
    }

    .exam-card-body { padding: 15px; display: flex; flex-direction: column; flex-grow: 1; }
    .exam-meta { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.7rem; }
    .subject-tag { color: #38bdf8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
    .type-tag { background: #334155; color: #cbd5e1; padding: 2px 6px; border-radius: 4px; }

    .exam-title { font-size: 1rem; font-weight: 700; color: white; margin: 0 0 15px 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 44px; }
    
    .exam-actions-grid { display: grid; grid-template-areas: "view video" "start start"; grid-template-columns: 1fr 40px; gap: 8px; margin-top: auto; }
    .ssd-btn { border: none; border-radius: 6px; padding: 8px 0; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: 0.2s; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 5px; }
    .btn-view { grid-area: view; background: #334155; color: white; }
    .btn-view:hover { background: #475569; }
    .btn-video { grid-area: video; background: #dc2626; color: white; }
    .btn-video:hover { background: #ef4444; }
    .btn-start { grid-area: start; background: linear-gradient(135deg, #2563eb, #3b82f6); color: white; margin-top: 5px; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3); }
    .btn-start:hover { background: linear-gradient(135deg, #1d4ed8, #2563eb); transform: translateY(-2px); }
    .ssd-btn.disabled { opacity: 0.3; cursor: not-allowed; filter: grayscale(1); pointer-events: none; }

    @media (max-width: 768px) {
        .ssd-exam-header { flex-direction: column; gap: 15px; }
        .ssd-filter-bar { width: 100%; flex-direction: column; }
        .ssd-search-wrap, .ssd-custom-select { width: 100% !important; }
        .ssd-exam-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .exam-title { font-size: 0.85rem; height: 38px; }
    }

/* ==============================================================
   SMART STUDENT EXAM SYSTEM - COMBINED CSS (FRONTEND)
   Includes: Single Exam View & Exam Dashboard (Tab Exams)
   ============================================================== */

/* --- Global Variables --- */
:root {
    --ssd-bg: #0f172a;
    --ssd-card: #1e293b;
    --ssd-text: #f8fafc;
    --ssd-text-muted: #94a3b8;
    --ssd-border: #334155;
    --ssd-primary: #3b82f6;
    --ssd-primary-hover: #2563eb;
    --ssd-premium-grad: linear-gradient(135deg, #60a5fa, #2563eb);
}

body.light-mode {
    --ssd-bg: #f8fafc;
    --ssd-card: #ffffff;
    --ssd-text: #0f172a;
    --ssd-text-muted: #64748b;
    --ssd-border: #e2e8f0;
    --ssd-primary: #2563eb;
    --ssd-primary-hover: #1d4ed8;
}

/* ==============================================================
   1. SINGLE EXAM VIEW CSS (content-single-exam)
   ============================================================== */
.ssd-modern-exam-wrapper { font-family: 'Inter', sans-serif; background: var(--ssd-bg); display: flex; flex-direction: column; min-height: 80vh; }
.ssd-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.2), var(--ssd-bg)); }
.ssd-top-nav { position: absolute; top: 15px; left: 15px; right: 15px; display: flex; justify-content: space-between; align-items: center; z-index: 10; }
.ssd-back-circle { width: 40px; height: 40px; background: rgba(255,255,255,0.2); backdrop-filter: blur(8px); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; transition: 0.2s; border: 1px solid rgba(255,255,255,0.1); text-decoration:none; }
.ssd-back-circle:hover { background: rgba(255,255,255,0.4); transform: scale(1.05); color:white; }
.ssd-page-title { color: white; font-weight: 600; text-shadow: 0 2px 4px rgba(0,0,0,0.5); opacity: 0; animation: fadeIn 0.5s forwards 0.2s; }
@keyframes fadeIn { to { opacity: 1; } }

.ssd-verified-badge { padding: 6px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: bold; background: rgba(0,0,0,0.6); color: #cbd5e1; backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.1); }
.ssd-verified-badge.active { background: var(--ssd-premium-grad); color: white; border: none; box-shadow: 0 2px 10px rgba(37, 99, 235, 0.3); }

.ssd-hero-content { position: absolute; bottom: 45px; left: 20px; z-index: 5; display: flex; gap: 8px; }
.ssd-badge-subject { background: var(--ssd-primary); color: white; padding: 5px 12px; border-radius: 8px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); }

.ssd-exam-title { margin: 0 0 15px 0; font-size: 1.6rem; color: var(--ssd-text); line-height: 1.3; }
.ssd-meta-row { display: flex; gap: 20px; margin-bottom: 25px; border-bottom: 1px solid rgba(128,128,128,0.1); padding-bottom: 20px; overflow-x: auto; }
.meta-item { font-size: 0.85rem; color: var(--ssd-text-muted); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.meta-item i { color: var(--ssd-primary); }
.ssd-description-box { margin-bottom: 30px; }
.desc-text { font-size: 0.95rem; color: var(--ssd-text-muted); line-height: 1.6; }

.ssd-actions-grid { display: grid; gap: 15px; margin-top: 30px; width: 100%; }
.ssd-grid-box { background: rgba(128,128,128,0.05); border: 1px solid rgba(128,128,128,0.1); border-radius: 16px; padding: 15px 5px; text-align: center; cursor: pointer; transition: 0.2s; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 110px; position: relative; width: 100%; box-sizing: border-box; }
.ssd-grid-box:hover { transform: translateY(-3px); background: rgba(59, 130, 246, 0.08); border-color: var(--ssd-primary); }
.icon-circle { width: 45px; height: 45px; background: var(--ssd-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 10px; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.box-label { font-size: 0.75rem; color: var(--ssd-text); font-weight: 600; display: block; width: 100%; }

.btn-view .icon-circle { color: #3b82f6; }
.btn-marking .icon-circle { color: #f59e0b; }
.btn-discuss .icon-circle { color: #c026d3; }
.btn-upload .icon-circle { color: #10b981; }
.lock-badge { position: absolute; bottom: -2px; right: -2px; background: var(--ssd-premium-grad); color: #fff; width: 18px; height: 18px; border-radius: 50%; font-size: 0.6rem; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ssd-card); }

.ssd-rank-section { margin-top: 30px !important; padding: 30px; border-radius: 20px !important; }
.ssd-podium-container { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin-top: 40px; margin-bottom: 10px; height: 200px; }
.podium-step { display: flex; flex-direction: column; align-items: center; width: 30%; max-width: 110px; position: relative; }
.podium-avatar { width: 55px; height: 55px; border-radius: 50%; border: 3px solid #cbd5e1; object-fit: cover; margin-bottom: -15px; z-index: 2; background: var(--ssd-card); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.podium-rank-1 .podium-avatar { width: 75px; height: 75px; border-color: #fbbf24; margin-bottom: -20px; }
.podium-rank-2 .podium-avatar { border-color: #94a3b8; }
.podium-rank-3 .podium-avatar { border-color: #d97706; }
.podium-box { width: 100%; border-radius: 12px 12px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 25px; color: white; font-weight: 900; position: relative; }
.rank-num { font-size: 1.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.podium-rank-1 .rank-num { font-size: 2rem; }
.podium-rank-1 .podium-box { height: 140px; background: linear-gradient(180deg, #f59e0b, #fbbf24); box-shadow: 0 -10px 20px rgba(245, 158, 11, 0.2); }
.podium-rank-2 .podium-box { height: 100px; background: linear-gradient(180deg, #64748b, #94a3b8); box-shadow: 0 -10px 20px rgba(100, 116, 139, 0.2); }
.podium-rank-3 .podium-box { height: 80px; background: linear-gradient(180deg, #b45309, #d97706); box-shadow: 0 -10px 20px rgba(180, 83, 9, 0.2); }
.podium-name { font-size: 0.75rem; text-align: center; color: var(--ssd-text); margin-top: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.podium-marks { font-size: 0.85rem; color: var(--ssd-primary); font-weight: 800; margin-top: 2px; }

.ssd-rank-table { width: 100%; border-collapse: collapse; }
.ssd-rank-table th, .ssd-rank-table td { padding: 12px 5px; text-align: left; border-bottom: 1px solid rgba(128,128,128,0.1); }
.ssd-rank-table th { font-size: 0.75rem; color: var(--ssd-text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; }
.ssd-rank-table .rank-col { font-weight: 800; color: var(--ssd-text-muted); width: 30px; text-align: center; }
.rank-grade-badge { background: rgba(128,128,128,0.1); padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: bold; color: var(--ssd-text); display: inline-block; }

.ssd-sticky-footer { background: var(--ssd-card); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; z-index: 9999; box-sizing: border-box; }
.footer-text .lbl { display: block; font-size: 0.7rem; color: var(--ssd-text-muted); text-transform: uppercase; font-weight: bold; margin-bottom: 2px; }
.footer-text .val { display: block; font-size: 1rem; color: var(--ssd-text); font-weight: 700; }
.ssd-btn-start-floating { background: linear-gradient(135deg, #2563eb, #3b82f6); color: white; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: bold; font-size: 1rem; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4); display: flex; align-items: center; gap: 10px; transition: 0.2s; }
.ssd-btn-start-floating:hover { background: linear-gradient(135deg, #1d4ed8, #2563eb); color:white; }

.ssd-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 10000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.ssd-modal-glass { background: rgba(30, 41, 59, 0.95); border: 1px solid rgba(255,255,255,0.1); padding: 30px; border-radius: 20px; text-align: center; width: 85%; max-width: 380px; position: relative; color: white; box-shadow: 0 25px 50px rgba(0,0,0,0.5); }
.ssd-modal-glass h3 { margin: 0 0 10px 0; font-size: 1.4rem; color: #ffffff !important; }
.ssd-btn-premium { display: inline-block; background: var(--ssd-premium-grad); color: #fff; padding: 12px 25px; border-radius: 30px; text-decoration: none; font-weight: bold; transition: 0.2s; box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3); margin-top: 10px; width: 100%; box-sizing: border-box; }
.ssd-btn-premium:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5); color: #fff; }
.ssd-close-icon { position: absolute; top: 15px; right: 15px; background: none; border: none; color: #94a3b8; font-size: 1.2rem; cursor: pointer; }
.file-drop-area { border: 2px dashed #475569; padding: 30px; border-radius: 12px; margin: 20px 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #94a3b8; transition: 0.2s; }
.file-drop-area input { position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-drop-area i { font-size: 2rem; color: #475569; }
.ssd-btn-upload-submit { width: 100%; padding: 14px; background: #10b981; color: white; border: none; border-radius: 12px; font-weight: bold; cursor: pointer; font-size: 1rem; }

.lang-select-btn { padding: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: white; cursor: pointer; transition: 0.2s; font-weight: bold; text-align: left; padding-left: 20px; }
.lang-select-btn:hover { background: rgba(59, 130, 246, 0.2); border-color: var(--ssd-primary); transform: translateX(5px); }

.ssd-modal-video-container { display: flex; width: 95%; max-width: 1000px; height: 75vh; background: var(--ssd-bg); border-radius: 16px; overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 25px 50px rgba(0,0,0,0.5); }
.video-player-area { flex: 1; background: #000; position: relative; }
.video-player-area iframe { width: 100%; height: 100%; border: none; }
.video-playlist-area { width: 300px; background: var(--ssd-card); border-left: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; }
.video-playlist-area h4 { padding: 20px; margin: 0; font-size: 1.1rem; color: white; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; gap: 10px; }
.playlist-items-wrapper { flex: 1; overflow-y: auto; padding: 10px; }
.playlist-item { padding: 15px; border-radius: 12px; cursor: pointer; color: var(--ssd-text-muted); font-size: 0.95rem; font-weight: 600; margin-bottom: 5px; transition: 0.2s; border: 1px solid transparent; }
.playlist-item:hover { background: rgba(255,255,255,0.05); color: white; }
.playlist-item.active { background: rgba(59, 130, 246, 0.1); color: #60a5fa; border-color: rgba(59, 130, 246, 0.3); }
.ssd-close-video { position: absolute; top: -15px; right: -15px; z-index: 10000; color: white; background: #ef4444; border: none; font-size: 1.2rem; cursor: pointer; width: 35px; height: 35px; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

/* --- LIGHT MODE SPECIFIC CSS (Single Exam) --- */
body.light-mode .ssd-hero-overlay { background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(248,250,252,1)); }
body.light-mode .ssd-content-card { box-shadow: 0 10px 40px rgba(0,0,0,0.06); border: 1px solid #e2e8f0; }
body.light-mode .ssd-grid-box { background: #f8fafc; border-color: #e2e8f0; }
body.light-mode .ssd-grid-box:hover { background: #eff6ff; border-color: #3b82f6; box-shadow: 0 10px 20px rgba(37,99,235,0.1); }
body.light-mode .icon-circle { background: #ffffff; box-shadow: 0 4px 15px rgba(0,0,0,0.06); }
body.light-mode .ssd-meta-row, body.light-mode .ssd-rank-table th, body.light-mode .ssd-rank-table td { border-color: #e2e8f0; }
body.light-mode .podium-avatar { background: #ffffff; box-shadow: 0 5px 15px rgba(0,0,0,0.08); }
body.light-mode .rank-grade-badge { background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; }
body.light-mode .ssd-sticky-footer { background: rgba(255, 255, 255, 0.95); border-color: #e2e8f0; box-shadow: 0 -10px 30px rgba(0,0,0,0.05); }
body.light-mode .ssd-modal-glass { background: #ffffff; border: 1px solid #e2e8f0; color: #0f172a; box-shadow: 0 25px 50px rgba(0,0,0,0.15); }
body.light-mode .ssd-modal-glass p { color: #475569; }
body.light-mode .ssd-close-icon { color: #64748b; }
body.light-mode .file-drop-area { border-color: #cbd5e1; background: #f8fafc; }
body.light-mode .lang-select-btn { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
body.light-mode .lang-select-btn:hover { background: #eff6ff; border-color: #3b82f6; }


.ssd-eh-wrapper { font-family: 'Inter', sans-serif; background: transparent; color: var(--ssd-text); padding: 10px 0; min-height: 70vh; }
    
    .ssd-eh-header-area { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; border-bottom: 1px solid var(--ssd-border); padding-bottom: 20px; margin-bottom: 25px; }
    .ssd-eh-header-text h2 { margin: 0 0 5px 0; font-size: 1.8rem; font-weight: 800; color: var(--ssd-text); display: flex; align-items: center; flex-wrap: wrap; }
    .ssd-eh-total-badge { font-size: 0.85rem; background: rgba(59, 130, 246, 0.2); color: var(--ssd-primary); padding: 4px 12px; border-radius: 20px; font-weight: 700; border: 1px solid rgba(59, 130, 246, 0.3); margin-left: 10px; }
    .ssd-eh-header-text p { margin: 0; color: var(--ssd-text-muted); font-size: 0.95rem; }
    
    .ssd-eh-tabs { display: flex; gap: 10px; background: rgba(255,255,255,0.05); padding: 6px; border-radius: 12px; border: 1px solid var(--ssd-border); }
    .ssd-eh-tab-btn { background: transparent; border: none; padding: 10px 20px; font-size: 0.9rem; font-weight: 600; color: var(--ssd-text-muted); border-radius: 8px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 8px; }
    .ssd-eh-tab-btn:hover { color: var(--ssd-text); }
    .ssd-eh-tab-btn.active { background: var(--ssd-primary); color: white; box-shadow: 0 4px 15px rgba(59,130,246,0.3); }

    .ssd-eh-filters { display: flex; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; }
    .ssd-eh-search-box { flex: 1; min-width: 250px; position: relative; }
    .ssd-eh-search-box i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--ssd-text-muted); z-index: 2; }
    
    .ssd-eh-search-box input { width: 100%; padding: 14px 15px 14px 45px; background: var(--ssd-card) !important; border: 1px solid var(--ssd-border) !important; border-radius: 12px; font-size: 0.95rem; color: var(--ssd-text) !important; outline: none; transition: 0.2s; box-sizing: border-box; }
    .ssd-eh-search-box input:focus { border-color: var(--ssd-primary) !important; box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important; }
    .ssd-eh-search-box input::placeholder { color: var(--ssd-text-muted) !important; opacity: 0.8; }
    
    .ssd-eh-filter-selects { display: flex; gap: 15px; flex-wrap: wrap; }
    .ssd-custom-select { position: relative; min-width: 170px; user-select: none; }
    .ssd-select-trigger { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 20px; background: var(--ssd-card); border: 1px solid var(--ssd-border); border-radius: 12px; font-size: 0.9rem; font-weight: 600; color: var(--ssd-text); cursor: pointer; transition: 0.2s; box-sizing: border-box; }
    .ssd-select-trigger:hover { border-color: var(--ssd-primary); }
    .transition-icon { transition: transform 0.3s ease; color: var(--ssd-text-muted); }
    .ssd-custom-select.active .ssd-select-trigger { border-color: var(--ssd-primary); box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
    .ssd-custom-select.active .transition-icon { transform: rotate(180deg); color: var(--ssd-primary); }
    
    .ssd-select-options { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--ssd-card); border: 1px solid var(--ssd-border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 100; max-height: 250px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: 0.2s ease; padding: 5px; }
    .ssd-custom-select.active .ssd-select-options { opacity: 1; visibility: visible; transform: translateY(0); }
    .ssd-option { padding: 10px 15px; font-size: 0.85rem; color: var(--ssd-text-muted); cursor: pointer; transition: 0.2s; border-radius: 8px; margin-bottom: 2px; }
    .ssd-option:hover { background: rgba(59, 130, 246, 0.1); color: var(--ssd-primary); }
    .ssd-option.active { background: var(--ssd-primary); color: white; font-weight: bold; }

    .ssd-eh-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
    .ssd-eh-card { background: var(--ssd-card); border-radius: 16px; overflow: hidden; border: 1px solid var(--ssd-border); transition: all 0.3s ease; display: flex; flex-direction: column; position: relative; }
    .ssd-eh-card:hover { transform: translateY(-5px); border-color: var(--ssd-primary); box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
    .ssd-eh-card-img { height: 130px; background-size: cover; background-position: center; position: relative; border-bottom: 1px solid var(--ssd-border); }
    .ssd-eh-card-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,23,42,0.1), rgba(15,23,42,0.8)); }
    .ssd-eh-badge-type { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; color: white; letter-spacing: 0.5px; z-index: 2; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
    .ssd-eh-badge-type.mcq { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
    .ssd-eh-badge-type.essay { background: linear-gradient(135deg, #ec4899, #db2777); }
    .ssd-eh-card-body { padding: 15px; flex: 1; display: flex; flex-direction: column; }
    .ssd-eh-card-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--ssd-text-muted); margin-bottom: 10px; font-weight: 600; }
    .ssd-eh-card-meta .sub i { color: var(--ssd-primary); }
    .ssd-eh-card-title { margin: 0 0 10px 0; font-size: 1.05rem; line-height: 1.4; color: var(--ssd-text); font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .ssd-eh-card-grade { font-size: 0.8rem; color: var(--ssd-text-muted); margin-bottom: 15px; display: flex; align-items: center; gap: 5px; }
    .ssd-eh-card-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 12px; }
    .ssd-eh-btn-view { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; padding: 10px; background: rgba(59, 130, 246, 0.15); color: #60a5fa; border-radius: 10px; font-weight: 700; text-decoration: none; transition: 0.2s; box-sizing: border-box; }
    .ssd-eh-btn-view:hover { background: var(--ssd-primary); color: white; }

    /* Pagination Styles */
    .ssd-pagination-wrapper ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 5px; }
    .ssd-pagination-wrapper li { display: inline-block; }
    .ssd-pagination-wrapper a, .ssd-pagination-wrapper span { display: inline-block; padding: 8px 12px; border-radius: 8px; background: var(--ssd-card); border: 1px solid var(--ssd-border); color: var(--ssd-text); text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: all 0.2s ease; }
    .ssd-pagination-wrapper a:hover { background: rgba(59, 130, 246, 0.1); border-color: var(--ssd-primary); color: var(--ssd-primary); }
    .ssd-pagination-wrapper span.current { background: var(--ssd-primary); color: white; border-color: var(--ssd-primary); box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); }

    .ssd-overall-grade-banner { position: relative; background: linear-gradient(135deg, #3b82f6, #1d4ed8); border-radius: 16px; padding: 30px; color: white; display: flex; flex-direction: column; overflow: hidden; margin-bottom: 25px; box-shadow: 0 10px 30px rgba(37,99,235,0.3); }
    .ssd-overall-grade-banner .banner-content { position: relative; z-index: 2; }
    .ssd-overall-grade-banner p { margin: 0 0 5px 0; font-size: 1.1rem; opacity: 0.9; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
    .ssd-overall-grade-banner .bg-icon { position: absolute; right: 20px; top: -20px; font-size: 10rem; opacity: 0.1; transform: rotate(-15deg); pointer-events: none; }
    
    .grades-wrapper { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 15px; }
    .ssd-subject-grade-badge { background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.2); padding: 10px 20px; border-radius: 12px; display: flex; align-items: center; gap: 15px; backdrop-filter: blur(5px); }
    .ssd-subject-grade-badge .sub-name { font-size: 1rem; color: #e2e8f0; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
    .ssd-subject-grade-badge .sub-grade { font-size: 1.8rem; font-weight: 900; line-height: 1; }
    .ssd-subject-grade-badge .grade-a { color: #10b981; text-shadow: 0 0 10px rgba(16, 185, 129, 0.5); }
    .ssd-subject-grade-badge .grade-b { color: #fbbf24; text-shadow: 0 0 10px rgba(251, 191, 36, 0.5); }
    .ssd-subject-grade-badge .grade-c { color: #f59e0b; text-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }
    .ssd-subject-grade-badge .grade-s { color: #f97316; text-shadow: 0 0 10px rgba(249, 115, 22, 0.5); }
    .ssd-subject-grade-badge .grade-f { color: #ef4444; text-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }

    .ssd-analytics-controls { margin-bottom: 25px; display: flex; align-items: center; gap: 15px; background: var(--ssd-card); padding: 15px 20px; border-radius: 12px; border: 1px solid var(--ssd-border); }
    .ssd-analytics-controls label { font-weight: 600; color: var(--ssd-text-muted); }
    .ssd-form-select { padding: 10px 15px; border-radius: 8px; border: 1px solid var(--ssd-border); background: rgba(0,0,0,0.2); color: white !important; outline: none; font-weight: bold; min-width: 250px; cursor: pointer; }
    .ssd-form-select:focus { border-color: var(--ssd-primary); }

    .ssd-chart-card { background: var(--ssd-card); border: 1px solid var(--ssd-border); border-radius: 16px; padding: 25px; margin-top: 25px; }
    
    /* Buttons */
    .ssd-btn-pdf { background: #ef4444; color: white; border: none; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 0.8rem; font-weight: bold; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3); }
    .ssd-btn-pdf:hover { background: #dc2626; color: white; transform: translateY(-2px); }
    
    .ssd-btn-essay { background: #8b5cf6; color: white; border: none; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 0.8rem; font-weight: bold; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s; box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3); }
    .ssd-btn-essay:hover { background: #7c3aed; color: white; transform: translateY(-2px); }
    
    .ssd-eh-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
    .ssd-eh-stat-box { background: var(--ssd-card); border: 1px solid var(--ssd-border); border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 20px; }
    .ssd-eh-stat-box .icon { width: 55px; height: 55px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
    .ssd-eh-stat-box .details span { display: block; font-size: 0.85rem; color: var(--ssd-text-muted); font-weight: 600; margin-bottom: 5px; }
    .ssd-eh-stat-box .details strong { display: block; font-size: 1.5rem; color: var(--ssd-text); font-weight: 800; line-height: 1; }

    .ssd-eh-table-container { background: var(--ssd-card); border: 1px solid var(--ssd-border); border-radius: 16px; padding: 25px; }
    .ssd-eh-table-title { margin: 0 0 20px 0; font-size: 1.2rem; color: var(--ssd-text); display: flex; align-items: center; gap: 10px; }
    .ssd-eh-table-title i { color: var(--ssd-primary); }
    
    .ssd-eh-table { width: 100%; border-collapse: collapse; min-width: 700px; }
    .ssd-eh-table th, .ssd-eh-table td { padding: 15px 10px; border-bottom: 1px solid var(--ssd-border); text-align: left; }
    .ssd-eh-table th { font-size: 0.8rem; color: var(--ssd-text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; }
    
    .ssd-eh-grade-badge { padding: 5px 12px; border-radius: 8px; font-weight: 800; font-size: 0.85rem; display: inline-block; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
    .grade-a { color: #10b981; border-color: #10b981; }
    .grade-b { color: #3b82f6; border-color: #3b82f6; }
    .grade-c { color: #f59e0b; border-color: #f59e0b; }
    .grade-s { color: #f97316; border-color: #f97316; }
    .grade-f { color: #ef4444; border-color: #ef4444; }

    .ssd-eh-empty { text-align: center; padding: 60px 20px; background: rgba(255,255,255,0.02); border-radius: 20px; border: 2px dashed var(--ssd-border); grid-column: 1 / -1; }
    .ssd-eh-empty i { font-size: 3rem; color: var(--ssd-text-muted); margin-bottom: 15px; opacity: 0.5; }
    .ssd-eh-empty h3 { margin: 0 0 10px 0; color: var(--ssd-text); font-size: 1.3rem; }
    .ssd-eh-btn-primary { margin-top: 20px; background: var(--ssd-primary); color: white; border: none; padding: 12px 25px; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.2s; }

    /* --- RESPONSIVE / MOBILE APP UI DESIGN --- */
    @media (max-width: 1200px) { .ssd-eh-grid { grid-template-columns: repeat(4, 1fr); } }
    @media (max-width: 992px) { .ssd-eh-grid { grid-template-columns: repeat(3, 1fr); } }
    
    @media (max-width: 768px) {
        .ssd-eh-header-area { flex-direction: column; align-items: flex-start; padding: 0 5px 15px 5px; margin-bottom: 15px; }
        .ssd-eh-header-text h2 { font-size: 1.4rem; }
        
        /* Mobile App Style Tabs */
        .ssd-eh-tabs { width: 100%; display: flex; padding: 4px; }
        .ssd-eh-tab-btn { flex: 1; justify-content: center; text-align: center; padding: 10px 0; font-size: 0.85rem; }

        .ssd-eh-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
        .ssd-eh-search-box { width: 100%; }
        
        /* Mobile View - Filters Horizontal (තිරස් අතට) */
        .ssd-eh-filter-selects {
            display: grid;
            grid-template-columns: 1fr 1fr; /* කොටස් 2කට සමානව බෙදීම */
            gap: 10px;
            width: 100%;
        }
        .ssd-custom-select { min-width: auto; width: 100%; }
        .ssd-select-trigger { padding: 12px 10px; font-size: 0.8rem; }
        .ssd-select-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 85%; }

        /* Mobile App Card List Style (වමට පින්තූරය, දකුණට විස්තරය) */
        .ssd-eh-grid { grid-template-columns: 1fr; gap: 12px; padding: 0; }
        .ssd-eh-card { flex-direction: row; height: auto; min-height: 120px; align-items: stretch; border-radius: 12px; }
        .ssd-eh-card-img { width: 110px; height: auto; border-bottom: none; border-right: 1px solid var(--ssd-border); }
        .ssd-eh-badge-type { top: 5px; right: 5px; padding: 3px 6px; font-size: 0.55rem; left: 5px; right: auto; } /* Badge moved to left for mobile */
        
        .ssd-eh-card-body { padding: 10px 12px; flex: 1; justify-content: center; display: flex; flex-direction: column; }
        .ssd-eh-card-meta { margin-bottom: 6px; font-size: 0.75rem; }
        .ssd-eh-card-title { font-size: 0.95rem; margin-bottom: 6px; -webkit-line-clamp: 2; }
        .ssd-eh-card-grade { margin-bottom: 8px; font-size: 0.75rem; }
        .ssd-eh-card-footer { padding-top: 0; border-top: none; margin-top: auto; }
        .ssd-eh-btn-view { padding: 8px; font-size: 0.8rem; border-radius: 8px; }

        .ssd-analytics-controls { flex-direction: column; align-items: flex-start; }
        .ssd-form-select { width: 100%; }
        .grades-wrapper { justify-content: center; }
    }

/* --- LIGHT MODE SPECIFIC CSS (Exam Dashboard) --- */
body.light-mode .ssd-form-select { background: #f8fafc; color: #0f172a !important; }
body.light-mode .ssd-subject-grade-badge .sub-name { color: #fff; }
body.light-mode .ssd-pagination-wrapper a, body.light-mode .ssd-pagination-wrapper span { background: #f8fafc; border-color: #e2e8f0; color: #0f172a; }
body.light-mode .ssd-pagination-wrapper span.current { background: #2563eb; color: white; border-color: #2563eb; }

/* --- Lottie Loader Centering Fix --- */
.ssd-loading-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(17, 24, 39, 0.7) !important;
    z-index: 1000 !important;
    display: block !important; /* පැරණි flexbox තිබුණානම් එය ඉවත් කිරීමට */
}

/* Lottie Container එක හරියටම Screen එකේ මැදට ගැනීම */
.ssd-loading-overlay > div {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1001 !important;
}

/* SVG Animation එක Container එකට ගැලපෙන ලෙස සැකසීම */
.ssd-loading-overlay > div svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* ========================================================== */
/* DEFAULT (DARK MODE) STYLES - LOGIN & REGISTRATION          */
/* ========================================================== */

/* 1. Main Backgrounds */
.ssd-login-pro-layout,
.ssd-reg-pro-layout {
    background-color: #0F172A;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(249, 115, 22, 0.1) 0%, transparent 40%);
    color: #d1d5db;
}

/* 2. Headings & Text */
.promo-content h1,
.ssd-form-header h2,
.ssd-form-header h4,
#google-username-modal h3,
.ssd-ios-pwa-content h4 {
    color: #ffffff !important;
}

.promo-content p,
.ssd-form-header p,
.login-remember label,
#google-username-modal p,
.ssd-ios-instructions {
    color: #94a3b8 !important;
}

/* 3. Form Labels */
.ssd-form-group label {
    color: #e2e8f0;
}

/* 4. Input Fields & Textareas */
.ssd-login-container input[type="text"], 
.ssd-login-container input[type="password"],
.ssd-lost-password-form input[type="text"], 
.ssd-reset-password-form input[type="text"],
.ssd-reset-password-form input[type="password"],
.ssd-form-group input, 
.ssd-form-group textarea,
#google_custom_username,
#reg_otp_code,
input[name="otp_code"] {
    background-color: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Input Focus State */
.ssd-login-container input:focus, 
.ssd-lost-password-form input:focus, 
.ssd-reset-password-form input:focus,
.ssd-form-group input:focus, 
.ssd-form-group textarea:focus {
    border-color: #3b82f6;
    background-color: rgba(30, 41, 59, 0.9);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
    outline: none;
}

/* Placeholders */
.ssd-login-container input::placeholder,
.ssd-form-group input::placeholder, 
.ssd-form-group textarea::placeholder {
    color: #475569;
}

/* 5. "OR" Divider text */
span[style*="background: #0F172A"] {
    background: #0F172A !important;
    color: #64748b !important;
}
hr[style*="border-color: rgba(255,255,255,0.1)"] {
    border-color: rgba(255,255,255,0.1) !important;
}

/* 6. Modals & Popups (Username & iOS PWA) */
#google-username-modal > div,
.ssd-ios-pwa-content {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
}
.ssd-ios-close {
    color: #94a3b8;
}

/* 7. Secondary Buttons (e.g., "Change Email" / "Back") */
.ssd-button-secondary {
    background-color: rgba(255,255,255,0.1);
    color: #ffffff;
    border: none;
}
.ssd-button-secondary:hover {
    background-color: rgba(255,255,255,0.15);
}

/* 8. Info & OTP Boxes */
.reg-otp-info {
    background-color: rgba(31, 41, 55, 0.6);
    color: #d1d5db;
    border: 1px solid rgba(255,255,255,0.1);
}
.ssd-notice-info {
    background-color: rgba(30, 58, 138, 0.3);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* 9. Links & Footer */
.login-lost-password, 
.login-signup-link, 
.back-to-login,
.reg-login-link,
.ssd-login-meta-footer {
    color: #64748b;
}

/* 10. Profile & Cover Photo Upload (Registration) */
.cover-photo-preview {
    border: 1px dashed rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
}
#preview-profile-photo {
    border-color: #0F172A;
    background-color: #1f2937;
}
.camera-btn {
    background-color: rgba(31, 41, 55, 0.8);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.2);
}
.camera-btn:hover {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

/* 11. PWA Buttons */
.ssd-pwa-btn {
    background-color: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.ssd-pwa-btn:hover {
    background-color: rgba(30, 41, 59, 0.9);
}
#pwa-install-apple {
    background-color: #111827;
    border-color: #111827;
}
#pwa-install-apple i {
    color: #ffffff;
}
#pwa-install-apple .ssd-pwa-lbl {
    color: #94a3b8;
}
#pwa-install-apple:hover {
    background-color: #000000;
    border-color: #ffffff;
}

/* Global Styles */
    :root { --ssd-bg: #0f172a; --ssd-card: #1e293b; --ssd-text: #f8fafc; --ssd-text-muted: #94a3b8; --ssd-primary: #3b82f6; --ssd-premium-grad: linear-gradient(135deg, #60a5fa, #2563eb); }
    .ssd-modern-exam-wrapper { background: var(--ssd-bg); font-family: 'Inter', sans-serif; display: flex; flex-direction: column; min-height: 80vh; }
    .ssd-main-layout-grid { display: grid; grid-template-columns: 1fr; gap: 30px; width: 100%; align-items: start; }
    
    /* Thumbnail Fit & Overlay Update */
    .ssd-hero-banner { 
        position: relative; 
        overflow: hidden; 
        background-size: contain; 
        background-repeat: no-repeat; 
        background-position: center center; 
        background-color: var(--ssd-card); 
    }
    .ssd-hero-bg-blur {
        position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(25px); opacity: 0.5; z-index: 1;
    }
    .ssd-hero-image {
        position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 2;
    }
    /* Clear Top, Dark Bottom for readability */
    .ssd-hero-overlay { 
        position: absolute; inset: 0; 
        background: linear-gradient(to bottom, transparent 60%, rgba(15,23,42,0.85) 100%); 
        z-index: 3; pointer-events: none; 
    }
    .ssd-top-nav, .ssd-hero-content { position: relative; z-index: 10; }
    
    .ssd-top-nav { position: absolute; top: 15px; left: 15px; right: 15px; display: flex; justify-content: space-between; align-items: center; }
    .ssd-back-circle { width: 40px; height: 40px; background: rgba(255,255,255,0.2); backdrop-filter: blur(8px); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; transition: 0.2s; border: 1px solid rgba(255,255,255,0.1); text-decoration:none; }
    .ssd-back-circle:hover { background: rgba(255,255,255,0.4); transform: scale(1.05); color:white; }
    .ssd-page-title { color: white; font-weight: 600; text-shadow: 0 2px 4px rgba(0,0,0,0.5); opacity: 0; animation: fadeIn 0.5s forwards 0.2s; }
    @keyframes fadeIn { to { opacity: 1; } }
    @keyframes pulse { 0% { transform: scale(4); } 50% { transform: scale(4.5); } 100% { transform: scale(4); } }
    
    .ssd-hero-content { position: absolute; bottom: 30px; left: 20px; display: flex; gap: 8px; }
    .ssd-badge-subject { background: var(--ssd-primary); color: white; padding: 5px 12px; border-radius: 8px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); }
    .ssd-exam-title { margin: 0 0 15px 0; font-size: 1.6rem; color: var(--ssd-text); line-height: 1.3; }
    .ssd-meta-row { display: flex; gap: 20px; margin-bottom: 25px; border-bottom: 1px solid rgba(128,128,128,0.1); padding-bottom: 20px; overflow-x: auto; align-items: center; }
    .meta-item { font-size: 0.85rem; color: var(--ssd-text-muted); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
    .meta-item i { color: var(--ssd-primary); }
    .ssd-description-box { margin-bottom: 30px; }
    .desc-text { font-size: 0.95rem; color: var(--ssd-text-muted); line-height: 1.6; }
    .ssd-actions-grid { display: grid; gap: 15px; margin-top: 30px; width: 100%; }
    .ssd-grid-box { background: rgba(128,128,128,0.05); border: 1px solid rgba(128,128,128,0.1); border-radius: 16px; padding: 15px 5px; text-align: center; cursor: pointer; transition: 0.2s; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 110px; position: relative; width: 100%; box-sizing: border-box; }
    .ssd-grid-box:hover { transform: translateY(-3px); background: rgba(59, 130, 246, 0.08); border-color: var(--ssd-primary); }
    .icon-circle { width: 45px; height: 45px; background: var(--ssd-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 10px; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
    .box-label { font-size: 0.75rem; color: var(--ssd-text); font-weight: 600; display: block; width: 100%; }
    .btn-view .icon-circle { color: #3b82f6; }
    .btn-marking .icon-circle { color: #f59e0b; }
    .btn-discuss .icon-circle { color: #c026d3; }
    .btn-upload .icon-circle { color: #10b981; }
    .lock-badge { position: absolute; bottom: -2px; right: -2px; background: var(--ssd-premium-grad); color: #fff; width: 18px; height: 18px; border-radius: 50%; font-size: 0.6rem; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ssd-card); }
    .ssd-rank-section { padding: 30px; border-radius: 20px !important; margin-top: 0 !important; }
    .ssd-podium-container { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin-top: 65px; margin-bottom: 10px; height: 200px; }
    .podium-step { display: flex; flex-direction: column; align-items: center; width: 30%; max-width: 110px; position: relative; }
    .podium-step > a { position: relative; z-index: 10; display: block; }
    .podium-avatar { width: 55px; height: 55px; border-radius: 50%; border: 3px solid #cbd5e1; object-fit: cover; margin-bottom: -15px; z-index: 10; background: var(--ssd-card); box-shadow: 0 5px 15px rgba(0,0,0,0.5); transition: 0.2s; position: relative; }
    .podium-avatar:hover { transform: scale(1.1); }
    .podium-rank-1 .podium-avatar { width: 75px; height: 75px; border-color: #fbbf24; margin-bottom: -20px; }
    .podium-rank-2 .podium-avatar { border-color: #94a3b8; }
    .podium-rank-3 .podium-avatar { border-color: #d97706; }
    .podium-box { width: 100%; border-radius: 12px 12px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 25px; color: white; font-weight: 900; position: relative; }
    .rank-num { font-size: 1.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
    .podium-rank-1 .rank-num { font-size: 2rem; }
    .podium-rank-1 .podium-box { height: 140px; background: linear-gradient(180deg, #f59e0b, #fbbf24); box-shadow: 0 -10px 20px rgba(245, 158, 11, 0.2); }
    .podium-rank-2 .podium-box { height: 100px; background: linear-gradient(180deg, #64748b, #94a3b8); box-shadow: 0 -10px 20px rgba(100, 116, 139, 0.2); }
    .podium-rank-3 .podium-box { height: 80px; background: linear-gradient(180deg, #b45309, #d97706); box-shadow: 0 -10px 20px rgba(180, 83, 9, 0.2); }
    .podium-name { font-size: 0.75rem; text-align: center; color: var(--ssd-text); margin-top: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
    .podium-marks { font-size: 0.85rem; color: var(--ssd-primary); font-weight: 800; margin-top: 2px; }
    .ssd-rank-table { width: 100%; border-collapse: collapse; }
    .ssd-rank-table th, .ssd-rank-table td { padding: 12px 5px; text-align: left; border-bottom: 1px solid rgba(128,128,128,0.1); }
    .ssd-rank-table th { font-size: 0.75rem; color: var(--ssd-text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; }
    .ssd-rank-table .rank-col { font-weight: 800; color: var(--ssd-text-muted); width: 30px; text-align: center; }
    .rank-grade-badge { background: rgba(128,128,128,0.1); padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: bold; color: var(--ssd-text); display: inline-block; }
    .rank-grade-badge.grade-a { color: #10b981; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); }
    .rank-grade-badge.grade-b { color: #3b82f6; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); }
    .rank-grade-badge.grade-c { color: #f59e0b; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); }
    .rank-grade-badge.grade-s { color: #a855f7; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); }
    .rank-grade-badge.grade-f { color: #ef4444; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); }
    .ssd-sticky-footer { background: var(--ssd-card); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; z-index: 999; box-sizing: border-box; }
    .footer-text .lbl { display: block; font-size: 0.7rem; color: var(--ssd-text-muted); text-transform: uppercase; font-weight: bold; margin-bottom: 2px; }
    .footer-text .val { display: block; font-size: 1rem; color: var(--ssd-text); font-weight: 700; }
    .ssd-btn-start-floating { background: linear-gradient(135deg, #2563eb, #3b82f6); color: white; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: bold; font-size: 1rem; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4); display: flex; align-items: center; gap: 10px; transition: 0.2s; }
    .ssd-btn-start-floating:hover { background: linear-gradient(135deg, #1d4ed8, #2563eb); color:white; }
    
    .ssd-share-coin-btn { display: flex; align-items: center; justify-content: center; background: transparent; border: none; box-shadow: none; cursor: pointer; transition: all 0.3s ease; }
    .ssd-share-coin-btn:hover { transform: scale(1.1) translateY(-2px); filter: drop-shadow(0 4px 10px rgba(245, 158, 11, 0.4)); }

    /* LMS PDF Layout Styling inside Popup */
    .lms-pdf-wrapper { height: 100%; width: 100%; background: #f8fafc; box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .lms-pdf-inner { display: flex; flex-direction: row-reverse; min-height: 100%; width: 100%; padding: 80px 30px 30px 30px; box-sizing: border-box; gap: 30px; }
    .lms-pdf-preview { flex: 7; background: #e2e8f0; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); overflow: hidden; position: relative; display: flex; flex-direction: column; border: 1px solid #cbd5e1; }
    .lms-pdf-sidebar { flex: 3; background: #fff; border-radius: 16px; padding: 40px 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; display: flex; flex-direction: column; align-items: center; text-align: center; }
    .lang-switcher-btn { padding: 10px 15px; border-radius: 10px; border: 1px solid #cbd5e1; background: #fff; color: #475569; font-weight: bold; cursor: pointer; transition: 0.2s; display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 10px; }
    .lang-switcher-btn.active { background: #eff6ff; border-color: #3b82f6; color: #2563eb; }
    .lang-switcher-btn:hover:not(.active) { background: #f8fafc; }
    
    /* Modals & Overlays */
    .ssd-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 10000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
    .ssd-modal-glass { background: rgba(30, 41, 59, 0.95); border: 1px solid rgba(255,255,255,0.1); padding: 30px; border-radius: 20px; text-align: center; width: 85%; max-width: 400px; position: relative; color: white; box-shadow: 0 25px 50px rgba(0,0,0,0.5); }
    .ssd-btn-premium { display: inline-block; background: var(--ssd-premium-grad); color: #fff; padding: 12px 25px; border-radius: 30px; text-decoration: none; font-weight: bold; transition: 0.2s; box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3); margin-top: 10px; width: 100%; box-sizing: border-box; }
    .ssd-close-icon { position: absolute; top: 15px; right: 15px; background: none; border: none; color: #94a3b8; font-size: 1.2rem; cursor: pointer; }
    .share-icon-btn { color:white; padding:12px; border-radius:50%; width:50px; height:50px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; text-decoration:none; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

    @media (max-width: 900px) {
        .lms-pdf-inner { flex-direction: column !important; padding: 80px 15px 40px 15px !important; display: block !important; }
        .lms-pdf-sidebar { width: 100% !important; margin-bottom: 20px !important; }
        .lms-pdf-preview { width: 100% !important; height: 75vh !important; min-height: 500px !important; }
    }

    @media (max-width: 767px) {
        /* Fix Mobile Gap and Margins */
        .ssd-modern-exam-wrapper { padding: 0 !important; padding-bottom: 120px !important; margin-top: -15px; } 
        .ssd-hero-banner { 
            width: 100vw; 
            margin-left: -50vw; 
            margin-right: -50vw; 
            left: 50%; 
            right: 50%; 
            border-radius: 0; 
            height: 35vh; 
            min-height: 250px; 
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }
        .ssd-content-card { position: relative; background: var(--ssd-card); border-radius: 25px 25px 0 0; padding: 30px 20px; z-index: 10; margin-top: -25px; } 
        .ssd-actions-grid { grid-template-columns: repeat(2, 1fr); }
        .ssd-rank-section { margin-top: 30px !important; }
        .ssd-sticky-footer { position: fixed; bottom: 30px; left: 4%; width: 92%; border-radius: 16px; background: rgba(30, 41, 59, 0.95); backdrop-filter: blur(10px); }
    }
    @media (min-width: 768px) {
        .ssd-modern-exam-wrapper { padding: 20px; max-width: 1200px; margin: 0 auto; }
        .ssd-main-layout-grid { grid-template-columns: 1fr 1fr; }
        .ssd-hero-banner { height: 35vh; border-radius: 20px; margin-bottom: 30px; }
        /* Desktop Card Margin Fix */
        .ssd-left-col > .ssd-main-card { margin-top: 0; } 
        .ssd-content-card { background: var(--ssd-card); border-radius: 20px; padding: 30px; z-index:10; }
        .ssd-actions-grid { grid-template-columns: repeat(2, 1fr); }
        .ssd-sticky-footer { position: sticky; bottom: 20px; border-radius: 20px; margin-top: 20px; width: 100%; }
    }

/* --- General Dashboard Layout --- */
.ssd-desktop-top-row { display: flex; gap: 20px; align-items: stretch; margin-bottom: 25px; }
.ssd-stats-overview-card { flex: 2; background: #1e293b; border: 1px solid #334155; border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); margin-bottom: 0; z-index: 1;}
.ssd-stat-rank-col { flex: 0 0 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid #334155; padding-right: 20px; text-align: center; }
.ssd-rank-trophy { font-size: 2.8rem; color: #f59e0b; margin-bottom: 8px; filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.4)); }
.ssd-rank-info .lbl { font-size: 0.75rem; color: #94a3b8; display: block; text-transform: uppercase; letter-spacing: 1px; }
.ssd-rank-info .val { font-size: 1.6rem; font-weight: 800; color: #fff; display: block; line-height: 1.2; }
.ssd-rank-info .sub-lbl { font-size: 0.7rem; color: #10b981; background: rgba(16, 185, 129, 0.1); padding: 2px 8px; border-radius: 10px; }
.ssd-stat-grid-col { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.ssd-mini-stat { background: #0f172a; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; border: 1px solid #334155; }
.ssd-mini-stat .lbl { font-size: 0.75rem; color: #64748b; margin-bottom: 3px; }
.ssd-mini-stat .val { font-size: 1rem; font-weight: 700; color: #fff; }
.text-orange { color: #f97316 !important; }
.ssd-modern-chart-card { background: #1e293b; border-radius: 16px; padding: 25px; margin-bottom: 25px; border: 1px solid #334155; }
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }

/* --- APP-LIKE DIRECT BADGES SECTION --- */
.ssd-app-badges-widget { flex: 1; background: #1e293b; border: 1px solid #334155; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; z-index: 10; }
.ssd-badge-categories-container { display: flex; flex-direction: column; gap: 15px; }

.ssd-centered-badge-title { text-align: center; font-size: 0.85rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; margin-top: 0; margin-bottom: 15px; font-weight: 700; display: block; width: 100%; }

/* Three Large Badges Row */
.ssd-top-badges-row { display: flex; gap: 10px; width: 100%; margin-bottom: 5px; }
.ssd-top-badge-item { flex: 1; min-width: 0; background: #0f172a; border-radius: 16px; border: 1px solid #334155; display: flex; flex-direction: column; align-items: center; padding: 15px 5px; cursor: pointer; transition: 0.3s; position: relative; justify-content: center;}
.ssd-top-badge-item:hover { background: #152033; transform: translateY(-2px); border-color: #3b82f6; }
.ssd-top-badge-item img { width: 55px; height: 55px; object-fit: contain; margin-bottom: 10px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.ssd-top-badge-item .locked-placeholder { width: 55px; height: 55px; border-radius: 50%; background: #1e293b; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #475569; margin-bottom: 10px; border: 1px solid #334155; }
.ssd-top-badge-item .tb-name { color: #f1f5f9; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 1.1; word-wrap: break-word; width: 100%;}

.ssd-top-badge-item.unlocked { border-color: rgba(59, 130, 246, 0.4); box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.05); }
.ssd-top-badge-item.locked { opacity: 0.7; }
.ssd-top-badge-item.locked img { filter: grayscale(100%) opacity(0.5); }

/* FLOATING ABSOLUTE DROPDOWN (Scroll Fix included) */
.ssd-bc-dropdown-content { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    width: 100%; 
    z-index: 1050; 
    margin-top: 10px; 
    background: #152033; 
    border: 1px solid #3b82f6; 
    border-radius: 16px; 
    padding: 15px; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.6); 
    animation: slideDown 0.3s ease; 
    box-sizing: border-box;
    max-height: 250px; 
    overflow-y: auto;
}
.ssd-bc-dropdown-content::-webkit-scrollbar { width: 5px; }
.ssd-bc-dropdown-content::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 5px; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Grid */
.ssd-bc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; }
.ssd-dropdown-item { background: #0f172a; padding: 12px 8px; border-radius: 12px; text-align: center; border: 1px solid #334155; position: relative; transition: 0.2s; }
.ssd-dropdown-item img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 8px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.ssd-dropdown-item .item-name { display: block; font-size: 0.6rem; color: #94a3b8; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; }

.ssd-dropdown-item.earned { border-color: rgba(59, 130, 246, 0.4); box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.08); }
.ssd-dropdown-item.earned .item-name { color: #f1f5f9; }
.ssd-dropdown-item.not-earned { opacity: 0.6; }
.ssd-dropdown-item.not-earned img { filter: grayscale(100%) opacity(0.6); }

.item-lock { position: absolute; top: 4px; right: 4px; background: #1e293b; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 0.55rem; color: #94a3b8; border: 1px solid #334155; }

/* --- BUILDING GRAPH STYLES --- */
.ssd-building-graph-canvas { height: 220px; display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.05); position: relative; margin-top: 15px; }
.ssd-graph-bar-wrap { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; margin: 0 4px; z-index: 2; }
.ssd-bar-seg { width: 100%; max-width: 35px; border-radius: 4px 4px 0 0; background: #f59e0b; transition: all 0.2s ease; cursor: pointer; }
.ssd-bar-seg:hover { filter: brightness(1.2); transform: translateY(-2px); }
.ssd-bar-seg-blue { background: #06b6d4; }
.ssd-bar-seg-green { background: #10b981; }
.ssd-graph-date-label { position: absolute; bottom: -22px; font-size: 0.65rem; color: #94a3b8; font-weight: 600; white-space: nowrap; }
.ax-y-grid-line { position: absolute; width: 100%; border-bottom: 1px dashed rgba(255,255,255,0.1); z-index: 1; left: 0; }
.ax-bar-time-lbl { position: absolute; font-size: 0.65rem; color: #fff; font-weight: 600; white-space: nowrap; z-index: 5; transform: translateY(-100%); margin-bottom: 5px; }

/* --- Mobile Responsive Fixes --- */
@media (max-width: 768px) {
    .ssd-desktop-top-row { flex-direction: column; gap: 15px; }
    .ssd-stats-overview-card { flex-direction: row !important; padding: 10px !important; min-height: auto; }
    .ssd-stat-rank-col { flex: 0 0 32% !important; border-right: 1px solid #334155 !important; padding-right: 8px !important; border-bottom: none !important; }
    .ssd-rank-trophy { font-size: 1.8rem !important; margin-bottom: 4px !important; }
    .ssd-rank-info .val { font-size: 1.2rem !important; }
    .ssd-rank-info .lbl { font-size: 0.6rem !important; }
    .ssd-rank-info .sub-lbl { font-size: 0.6rem !important; padding: 1px 6px !important; }
    .ssd-stat-grid-col { gap: 6px !important; }
    .ssd-mini-stat { padding: 6px 8px !important; min-height: 50px; }
    .ssd-mini-stat .val { font-size: 0.85rem !important; }
    .ssd-mini-stat .lbl { font-size: 0.6rem !important; }
    .ssd-modern-chart-card { padding: 15px !important; }
    
    .ssd-app-badges-widget { padding: 12px !important; }
    .ssd-top-badges-row { gap: 5px; }
    .ssd-top-badge-item { padding: 10px 4px; border-radius: 12px; }
    .ssd-top-badge-item img { width: 40px; height: 40px; margin-bottom: 6px; }
    .ssd-top-badge-item .locked-placeholder { width: 40px; height: 40px; font-size: 1.2rem; margin-bottom: 6px; }
    .ssd-top-badge-item .tb-name { font-size: 0.55rem; letter-spacing: 0; }
    
    .ssd-bc-dropdown-content { padding: 10px; border-radius: 12px; }
    .ssd-bc-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .ssd-dropdown-item { padding: 10px 4px; }
    .ssd-dropdown-item img { width: 50px; height: 50px; margin-bottom: 4px; }
    .ssd-dropdown-item .item-name { font-size: 0.5rem; }
    .item-lock { width: 14px; height: 14px; font-size: 0.5rem; top: 4px; right: 4px; }

    /* Feed Edge-to-Edge Fix */
    .tutor-content-wrapper { padding-left: 0 !important; padding-right: 0 !important; overflow-x: hidden; }
    #my-tab-home, #my-tab-about, #my-tab-classes { padding-left: 15px; padding-right: 15px; }
    #my-tab-posts, #my-tab-photos, #my-tab-videos, #my-tab-blogs, #my-tab-files { width: 100%; margin: 0; padding: 0; }
    .ssd-feed-wrapper { max-width: 100% !important; }
    .ssd-post-card { border-radius: 0 !important; border-left: none !important; border-right: none !important; padding-left: 20px !important; padding-right: 20px !important; }
    
    .ssd-building-graph-canvas { height: 180px; }
    .ssd-bar-seg { max-width: 25px; }
}

.ssd-desktop-top-row { display: flex; gap: 20px; align-items: stretch; margin-bottom: 25px; }
.ssd-stats-overview-card { flex: 2; background: #1e293b; border: 1px solid #334155; border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); margin-bottom: 0; z-index: 1;}
.ssd-stat-rank-col { flex: 0 0 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid #334155; padding-right: 20px; text-align: center; }
.ssd-rank-trophy { font-size: 2.8rem; color: #f59e0b; margin-bottom: 8px; filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.4)); }
.ssd-rank-info .lbl { font-size: 0.75rem; color: #94a3b8; display: block; text-transform: uppercase; letter-spacing: 1px; }
.ssd-rank-info .val { font-size: 1.6rem; font-weight: 800; color: #fff; display: block; line-height: 1.2; }
.ssd-rank-info .sub-lbl { font-size: 0.7rem; color: #10b981; background: rgba(16, 185, 129, 0.1); padding: 2px 8px; border-radius: 10px; }
.ssd-stat-grid-col { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.ssd-mini-stat { background: #0f172a; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; border: 1px solid #334155; }
.ssd-mini-stat .lbl { font-size: 0.75rem; color: #64748b; margin-bottom: 3px; }
.ssd-mini-stat .val { font-size: 1rem; font-weight: 700; color: #fff; }
.text-orange { color: #f97316 !important; }
.ssd-modern-chart-card { background: #1e293b; border-radius: 16px; padding: 25px; margin-bottom: 25px; border: 1px solid #334155; }
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }

/* 3 BADGES LAYOUT CSS */
.ssd-app-badges-widget { flex: 1; background: #1e293b; border: 1px solid #334155; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; z-index: 10; }
.ssd-badge-categories-container { display: flex; flex-direction: column; gap: 15px; }
.ssd-centered-badge-title { text-align: center; font-size: 0.85rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; margin-top: 0; margin-bottom: 15px; font-weight: 700; display: block; width: 100%; }

.ssd-top-badges-row { display: flex; gap: 10px; width: 100%; margin-bottom: 5px; }
.ssd-top-badge-item { flex: 1; min-width: 0; background: #0f172a; border-radius: 16px; border: 1px solid #334155; display: flex; flex-direction: column; align-items: center; padding: 15px 8px; cursor: pointer; transition: 0.3s; position: relative; justify-content: center;}
.ssd-top-badge-item:hover { background: #152033; transform: translateY(-2px); border-color: #3b82f6; }
.ssd-top-badge-item img { width: 55px; height: 55px; object-fit: contain; margin-bottom: 10px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.ssd-top-badge-item .locked-placeholder { width: 55px; height: 55px; border-radius: 50%; background: #1e293b; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #475569; margin-bottom: 10px; border: 1px solid #334155; }
.ssd-top-badge-item .tb-name { color: #f1f5f9; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 1.1; word-wrap: break-word; width: 100%;}
.ssd-top-badge-item.unlocked { border-color: rgba(59, 130, 246, 0.4); box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.05); }
.ssd-top-badge-item.locked { opacity: 0.7; }
.ssd-top-badge-item.locked img { filter: grayscale(100%) opacity(0.5); }

/* FLOATING ABSOLUTE DROPDOWN (Scroll Fix included) */
.ssd-bc-dropdown-content { position: absolute; top: 100%; left: 0; width: 100%; z-index: 1050; margin-top: 10px; background: #152033; border: 1px solid #3b82f6; border-radius: 16px; padding: 15px; box-shadow: 0 15px 40px rgba(0,0,0,0.6); animation: slideDown 0.3s ease; box-sizing: border-box; max-height: 250px; overflow-y: auto; }
.ssd-bc-dropdown-content::-webkit-scrollbar { width: 5px; }
.ssd-bc-dropdown-content::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 5px; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.ssd-bc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; }
.ssd-dropdown-item { background: #0f172a; padding: 12px 8px; border-radius: 12px; text-align: center; border: 1px solid #334155; position: relative; transition: 0.2s; }
.ssd-dropdown-item img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 8px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.ssd-dropdown-item .item-name { display: block; font-size: 0.6rem; color: #94a3b8; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; }
.ssd-dropdown-item.earned { border-color: rgba(59, 130, 246, 0.4); box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.08); }
.ssd-dropdown-item.earned .item-name { color: #f1f5f9; }
.ssd-dropdown-item.not-earned { opacity: 0.6; }
.ssd-dropdown-item.not-earned img { filter: grayscale(100%) opacity(0.6); }
.item-lock { position: absolute; top: 4px; right: 4px; background: #1e293b; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 0.55rem; color: #94a3b8; border: 1px solid #334155; }

/* --- BUILDING GRAPH STYLES --- */
.ssd-building-graph-canvas { height: 220px; display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.05); position: relative; margin-top: 15px; }
.ssd-graph-bar-wrap { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; margin: 0 4px; z-index: 2; }
.ssd-bar-seg { width: 100%; max-width: 35px; border-radius: 4px 4px 0 0; background: #f59e0b; transition: all 0.2s ease; cursor: pointer; }
.ssd-bar-seg:hover { filter: brightness(1.2); transform: translateY(-2px); }
.ssd-bar-seg-blue { background: #06b6d4; }
.ssd-bar-seg-green { background: #10b981; }
.ssd-graph-date-label { position: absolute; bottom: -22px; font-size: 0.65rem; color: #94a3b8; font-weight: 600; white-space: nowrap; }
.ax-y-grid-line { position: absolute; width: 100%; border-bottom: 1px dashed rgba(255,255,255,0.1); z-index: 1; left: 0; }
.ax-bar-time-lbl { position: absolute; font-size: 0.65rem; color: #fff; font-weight: 600; white-space: nowrap; z-index: 5; transform: translateY(-100%); margin-bottom: 5px; }

/* --- Mobile Responsive Fixes --- */
@media (max-width: 768px) {
    .ssd-desktop-top-row { flex-direction: column; gap: 15px; }
    .ssd-stats-overview-card { flex-direction: row !important; padding: 10px !important; min-height: auto; }
    .ssd-stat-rank-col { flex: 0 0 32% !important; border-right: 1px solid #334155 !important; padding-right: 8px !important; border-bottom: none !important; }
    .ssd-rank-trophy { font-size: 1.8rem !important; margin-bottom: 4px !important; }
    .ssd-rank-info .val { font-size: 1.2rem !important; }
    .ssd-rank-info .lbl { font-size: 0.6rem !important; }
    .ssd-rank-info .sub-lbl { font-size: 0.6rem !important; padding: 1px 6px !important; }
    .ssd-stat-grid-col { gap: 6px !important; }
    .ssd-mini-stat { padding: 6px 8px !important; min-height: 50px; }
    .ssd-mini-stat .val { font-size: 0.85rem !important; }
    .ssd-mini-stat .lbl { font-size: 0.6rem !important; }
    .ssd-modern-chart-card { padding: 15px !important; }
    
    .ssd-app-badges-widget { padding: 12px !important; }
    .ssd-top-badges-row { gap: 5px; }
    .ssd-top-badge-item { padding: 10px 4px; border-radius: 12px; }
    .ssd-top-badge-item img { width: 40px; height: 40px; margin-bottom: 6px; }
    .ssd-top-badge-item .locked-placeholder { width: 40px; height: 40px; font-size: 1.2rem; margin-bottom: 6px; }
    .ssd-top-badge-item .tb-name { font-size: 0.55rem; letter-spacing: 0; }
    
    .ssd-bc-dropdown-content { padding: 10px; border-radius: 12px; }
    .ssd-bc-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .ssd-dropdown-item { padding: 10px 4px; }
    .ssd-dropdown-item img { width: 50px; height: 50px; margin-bottom: 4px; }
    .ssd-dropdown-item .item-name { font-size: 0.5rem; }
    .item-lock { width: 14px; height: 14px; font-size: 0.5rem; top: 4px; right: 4px; }

    /* Feed Edge-to-Edge Fix */
    .tutor-content-wrapper { padding-left: 0 !important; padding-right: 0 !important; overflow-x: hidden; }
    #pub-tab-home, #pub-tab-about, #pub-tab-classes { padding-left: 15px; padding-right: 15px; }
    #pub-tab-posts, #pub-tab-photos, #pub-tab-videos { width: 100%; margin: 0; padding: 0; }
    .ssd-feed-wrapper { max-width: 100% !important; }
    .ssd-post-card { border-radius: 0 !important; border-left: none !important; border-right: none !important; padding-left: 20px !important; padding-right: 20px !important; }
    
    .ssd-building-graph-canvas { height: 180px; }
    .ssd-bar-seg { max-width: 25px; }
}

/* --- LAYOUT --- */
.ssd-classes-wrapper { padding-bottom: 40px; padding-top: 10px; min-height: 80vh; font-family: system-ui, -apple-system, sans-serif; }

/* --- MODERN CARD DESIGN --- */
.ssd-pro-class-card { 
    background: #1f2937; 
    border: 1px solid #374151; 
    border-radius: 16px; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    transition: all 0.3s ease; 
}
.ssd-pro-class-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* SOLID BLUE PREMIUM CARD */
.smart-card-premium { 
    border: 2px solid #3b82f6 !important; 
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15); 
}
.smart-card-premium:hover { 
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.25); 
}

.ssd-class-header { width: 100%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: #111827; }
.ssd-class-header img.main-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.ssd-pro-class-card:hover .ssd-class-header img.main-thumb { transform: scale(1.05); }

.ssd-badge-offer { position: absolute; top: 10px; right: 10px; background: #f59e0b; color: #000; font-size: 0.65rem; font-weight: 700; padding: 4px 10px; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 5;}

.ssd-class-body { padding: 16px; display: flex; flex-direction: column; flex-grow: 1; }

.ssd-class-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: #9ca3af; margin-bottom: 10px; font-weight: 600; }
.ssd-class-meta .sub i { color: #3b82f6; margin-right: 4px; }
.ssd-class-meta .grd i { color: #3b82f6; margin-right: 4px; }

.ssd-class-title { font-size: 1.05rem; font-weight: 700; color: #f9fafb; margin: 0 0 8px 0; line-height: 1.4; height: 2.8em; overflow: hidden; }
.ssd-class-tutor { font-size: 0.8rem; color: #9ca3af; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.ssd-class-footer { margin-top: auto; border-top: 1px solid #374151; padding-top: 12px; }
.smart-card-premium .ssd-class-footer { border-top: 1px solid rgba(59, 130, 246, 0.2); }
.ssd-class-price { font-size: 0.95rem; font-weight: 700; color: #10b981; margin-bottom: 12px; }

/* --- BUTTONS --- */
.ssd-btn-group { display: flex; flex-direction: row; gap: 8px; align-items: center; width: 100%; }

/* Default / Non-Smart Class Buttons (White) */
.ssd-pro-class-btn { 
    flex: 1; 
    padding: 10px; 
    border-radius: 10px; 
    font-size: 0.85rem; 
    font-weight: 700; 
    border: 1px solid #d1d5db; 
    cursor: pointer; 
    text-align: center; 
    color: #111827; 
    background: #ffffff; 
    transition: all 0.2s ease; 
}
.ssd-pro-class-btn:hover { background: #f3f4f6; }

/* Smart Class Buttons (Blue) */
.smart-card-premium .ssd-pro-class-btn { 
    background: #3b82f6; 
    color: #ffffff; 
    border: none;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25); 
}
.smart-card-premium .ssd-pro-class-btn:hover { background: #2563eb; }

/* Share Icon Button */
.ssd-share-icon-btn { 
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; border: 1px solid #d1d5db; cursor: pointer; display: flex; align-items: center; justify-content: center; background: #ffffff; color: #4b5563; font-size: 1rem; transition: all 0.2s ease; 
}
.ssd-share-icon-btn:hover { background: #f3f4f6; color: #111827; }

/* Smart Share Icon Button */
.smart-card-premium .ssd-share-icon-btn { 
    background: rgba(59, 130, 246, 0.1); 
    color: #3b82f6; 
    border: none;
}
.smart-card-premium .ssd-share-icon-btn:hover { background: #3b82f6; color: #ffffff; }

/* --- FILTERS & DROPDOWNS --- */
.ssd-filter-bar { display: flex; flex-wrap: wrap; gap: 12px; }
.ssd-search-box { flex-grow: 2; min-width: 100%; position: relative; background: #1f2937; border: 1px solid #374151; border-radius: 12px; height: 48px; display: flex; align-items: center; transition: border-color 0.2s; }
.ssd-search-box:focus-within { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }

.ssd-search-box input { width: 100%; background: transparent; border: none; color: #ffffff !important; font-size: 0.95rem; padding: 0 40px 0 15px; height: 100%; outline: none; padding-left: 50px !important; }
.ssd-search-box input::placeholder { color: #9ca3af; }
.ssd-search-box .search-icon { position: absolute; left: 16px !important; top: 50%; transform: translateY(-50%); z-index: 10; color: #9ca3af; pointer-events: none; }

.ssd-select-group { display: flex; gap: 12px; flex-grow: 1; width: 100%; }
.ssd-custom-select { flex: 1; position: relative; min-width: 0; }
.ssd-select-trigger { background: #1f2937; border: 1px solid #374151; border-radius: 12px; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; cursor: pointer; color: #d1d5db; font-size: 0.95rem; white-space: nowrap; overflow: hidden; transition: all 0.2s; }
.ssd-select-trigger:hover { border-color: #3b82f6; color: #ffffff; }
.ssd-custom-select.active .ssd-select-trigger { border-color: #3b82f6; color: #ffffff; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
.ssd-custom-select.active .arrow { transform: rotate(180deg); color: #3b82f6; }
.arrow { transition: transform 0.3s; font-size: 0.8rem; }

.ssd-options-list { display: none; position: absolute; top: 55px; left: 0; right: 0; background: #1f2937; border: 1px solid #374151; border-radius: 12px; z-index: 100; max-height: 250px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.ssd-custom-select.active .ssd-options-list { display: block; animation: fadeIn 0.2s; }
.ssd-option { padding: 12px 16px; cursor: pointer; color: #d1d5db; font-size: 0.95rem; transition: background 0.2s; border-bottom: 1px solid #374151; }
.ssd-option:last-child { border-bottom: none; }
.ssd-option:hover, .ssd-option.active { background: #374151; color: #ffffff; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 768px) { .ssd-search-box { min-width: 300px; width: auto; } .ssd-select-group { width: auto; } }

/* --- SLIDERS --- */
.ssd-sponsored-section { margin-bottom: 30px; }
.ssd-section-header { font-size: 1.2rem; color: #ffffff; margin-bottom: 12px; font-weight: 700; }
.ssd-slider-container { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; }
.ssd-slider-container::-webkit-scrollbar { display: none; }
.ssd-slider-wrapper { display: flex; gap: 20px; }
.ssd-slider-item { min-width: 85%; max-width: 85%; aspect-ratio: 2 / 1; background: #1f2937; border-radius: 20px; overflow: hidden; position: relative; scroll-snap-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
@media (min-width: 768px) { .ssd-slider-item { min-width: 420px; max-width: 420px; } }
.ssd-slider-item img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform 0.5s ease; }
.ssd-slider-item:hover img { transform: scale(1.05); }
.ssd-slider-overlay { position: absolute; bottom: 0; left: 0; right: 0; top: 0; background: linear-gradient(to top, rgba(17,24,39,0.95) 5%, rgba(17,24,39,0.4) 50%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 20px; }
.ssd-slider-content { width: 100%; text-align: left; }
.ssd-slider-tag { background: #f59e0b; color: #000; font-size: 0.6rem; font-weight: 700; padding: 4px 8px; border-radius: 6px; text-transform: uppercase; display: inline-block; margin-bottom: 8px; }
.ssd-slider-content h3 { color: #ffffff; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.4; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ssd-slider-enroll-btn { background: #ffffff; color: #111827; border: none; padding: 8px 18px; border-radius: 20px; font-weight: 700; font-size: 0.8rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s ease; }
.ssd-slider-enroll-btn:hover { background: #e5e7eb; }

.ssd-classes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
@media (min-width: 1024px) { .ssd-classes-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; } }
.ssd-empty-state { text-align: center; padding: 60px 20px; background: #1f2937; border-radius: 16px; border: 1px dashed #4b5563; color: #9ca3af; }
.ssd-empty-state h4 { color: #f9fafb; margin: 10px 0 5px 0; font-size: 1.3rem; }

/* --- RESPONSIVE / MOBILE APP UI DESIGN --- */
@media (max-width: 768px) { 
    .ssd-classes-header-area { margin-bottom: 20px !important; }
    .ssd-classes-grid { grid-template-columns: 1fr; gap: 12px; }
    .ssd-pro-class-card { flex-direction: row; height: auto; min-height: 130px; align-items: stretch; border-radius: 12px; }
    
    .ssd-class-header { width: 130px; aspect-ratio: auto; flex-shrink: 0; border-right: 1px solid #374151; border-bottom: none; }
    .ssd-badge-offer { top: 6px; right: 6px; padding: 2px 6px; font-size: 0.6rem; }

    .ssd-class-body { padding: 12px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
    .ssd-class-meta { margin-bottom: 8px; font-size: 0.75rem; flex-wrap: wrap; gap: 8px; }
    .ssd-class-title { font-size: 0.95rem !important; -webkit-line-clamp: 2; height: auto; margin-bottom: 6px; }
    .ssd-class-tutor { font-size: 0.75rem; margin-bottom: 8px; }
    
    .ssd-class-footer { padding-top: 8px; border-top: none; margin-top: auto; }
    .ssd-class-price { font-size: 0.9rem; margin-bottom: 8px; }
    .ssd-btn-group { gap: 8px; }
    .ssd-pro-class-btn { padding: 8px; font-size: 0.85rem; border-radius: 8px; }
    .ssd-share-icon-btn { width: 36px; height: 36px; font-size: 0.9rem; }
}

/* --- SMART CLASSES TOGGLE (ONLY SWITCH, NO TEXT) --- */
.ssd-title-with-toggle { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 15px; 
    flex-wrap: wrap; 
    gap: 15px; 
}

.ssd-smart-toggle-wrapper { 
    display: flex; 
    align-items: center; 
}

.ssd-toggle-switch { 
    position: relative; 
    display: inline-block; 
    width: 44px; 
    height: 24px; 
    margin: 0; 
}

.ssd-toggle-switch input { 
    opacity: 0; 
    width: 0; 
    height: 0; 
}

.ssd-toggle-slider { 
    position: absolute; 
    cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #4b5563; 
    transition: .4s; 
    border-radius: 24px; 
}

.ssd-toggle-slider:before { 
    position: absolute; 
    content: ""; 
    height: 18px; 
    width: 18px; 
    left: 3px; 
    bottom: 3px; 
    background-color: white; 
    transition: .4s; 
    border-radius: 50%; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Checked State Solid Blue */
.ssd-toggle-switch input:checked + .ssd-toggle-slider { 
    background: #3b82f6; 
}

.ssd-toggle-switch input:checked + .ssd-toggle-slider:before { 
    transform: translateX(20px); 
}

/* =========================================
   STORE STYLES (Updated Filters & Badges)
   ========================================= */

.ssd-store-wrapper { padding-bottom: 80px; font-family: 'Inter', sans-serif; }

/* Header & Icons */
.ssd-store-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 0 5px; }
.ssd-store-title { font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0; }
.ssd-cart-icon-area { font-size: 1.1rem; color: #fff; background: #374151; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; transition: 0.2s; }
.ssd-cart-icon-area:hover { background: #4b5563; }

/* Slider */
.ssd-store-slider { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; margin-bottom: 20px; -webkit-overflow-scrolling: touch; }
.ssd-store-slider::-webkit-scrollbar { display: none; }
.ssd-slider-track { display: flex; gap: 10px; padding-bottom: 5px; }
.ssd-slider-card { 
    min-width: 85%; aspect-ratio: 2.2/1; background: #1f2937; border-radius: 12px; overflow: hidden; position: relative; scroll-snap-align: center;
}
@media (min-width: 768px) { .ssd-slider-card { min-width: 40%; aspect-ratio: 2.5/1; } }
.ssd-slider-card img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.ssd-slider-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); }
.ssd-slider-tag { background: #f59e0b; color: #000; font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; }
.ssd-slider-content h3 { color: #fff; margin: 5px 0 8px; font-size: 1.1rem; }
.ssd-slider-btn { background: #3b82f6; color: #fff; border: none; padding: 5px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 5px; width: fit-content; }

/* Search */
.ssd-store-search-container { margin-bottom: 15px; }
.ssd-store-search-box { position: relative; background: #1f2937; border-radius: 12px; height: 44px; display: flex; align-items: center; border: 1px solid #374151; }
.ssd-store-search-box i { position: absolute; left: 14px; color: #9ca3af; font-size: 1rem; }
.ssd-store-search-box input { width: 100%; background: transparent; border: none; padding: 0 10px 0 40px; color: #fff; font-size: 0.95rem; outline: none; height: 100%; }

/* CATEGORIES */
.ssd-category-scroller { margin-bottom: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ssd-category-scroller::-webkit-scrollbar { display: none; }
.ssd-category-track { display: flex; gap: 12px; padding: 5px 2px; }

.ssd-cat-item { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 70px; cursor: pointer; transition: transform 0.2s; }
.ssd-cat-item:active { transform: scale(0.95); }

.ssd-cat-icon { 
    width: 50px; height: 50px; 
    border-radius: 14px; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 1.2rem; 
    border: 1px solid transparent; 
    transition: 0.2s;
}

.ssd-cat-item:hover .ssd-cat-icon { filter: brightness(0.9); }
.ssd-cat-item.active .ssd-cat-icon { box-shadow: 0 0 0 2px #fff; transform: translateY(-2px); }

.ssd-cat-item span { font-size: 0.75rem; color: #9ca3af; font-weight: 500; text-align: center; }
.ssd-cat-item.active span { color: #fff; font-weight: 600; }

/* Filters */
.ssd-store-filters { display: flex; gap: 10px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 5px; }
.ssd-store-filters::-webkit-scrollbar { display: none; }
.ssd-filter-select { background: #1f2937; color: #e5e7eb; border: 1px solid #374151; padding: 8px 12px; border-radius: 8px; font-size: 0.85rem; outline: none; flex-shrink: 0; }

/* GRID & CARD STYLES */
.ssd-store-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .ssd-store-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
@media (min-width: 1200px) { .ssd-store-grid { grid-template-columns: repeat(6, 1fr); gap: 20px; } }

.ssd-store-card { background: #1f2937; border-radius: 12px; overflow: hidden; border: 1px solid #374151; display: flex; flex-direction: column; height: 100%; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; }
.ssd-store-card:hover { transform: translateY(-4px); border-color: #4b5563; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

.ssd-card-img { width: 100%; padding-top: 133.33%; position: relative; background: #111827; overflow: hidden; }
.ssd-card-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.ssd-store-card:hover .ssd-card-img img { transform: scale(1.05); }

/* BADGES */
.ssd-tag { position: absolute; top: 8px; left: 8px; font-size: 0.6rem; font-weight: 800; padding: 3px 6px; border-radius: 4px; color: #fff; text-transform: uppercase; z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.ssd-tag.out { background: #ef4444; }
.ssd-tag.offer { background: #f59e0b; color: #000; }
.ssd-tag.free { background: #10b981; }
.ssd-tag.digital { background: #8b5cf6; } 
.ssd-tag.used { background: #64748b; }    

/* DETAILS */
.ssd-card-details { padding: 10px; display: flex; flex-direction: column; flex-grow: 1; }
.ssd-card-title { font-size: 0.85rem; color: #f3f4f6; margin: 0 0 6px; line-height: 1.3em; max-height: 2.6em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; }
.ssd-card-author { font-size: 0.7rem; color: #9ca3af; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.ssd-card-price-row { margin-top: auto; margin-bottom: 10px; display: flex; align-items: baseline; gap: 6px; }
.new-price { color: #3b82f6; font-weight: 700; font-size: 0.95rem; }
.old-price { color: #6b7280; text-decoration: line-through; font-size: 0.7rem; }
.ssd-card-actions { display: flex; gap: 8px; }

/* === BUTTON COLORS LOGIC === */
.ssd-btn-buy { flex: 1; border: none; padding: 6px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.2s; z-index: 5; }
.ssd-btn-buy.btn-smart { background: #3b82f6; color: #fff; } /* Smart Class -> Blue */
.ssd-btn-buy.btn-smart:hover { background: #2563eb; }
.ssd-btn-buy.btn-normal { background: #ffffff; color: #000; border: 1px solid #d1d5db; } /* Normal -> White */
.ssd-btn-buy.btn-normal:hover { background: #f3f4f6; }

.ssd-btn-share { width: 32px; background: #374151; color: #fff; border: none; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: background 0.2s; z-index: 5; }
.ssd-btn-share:hover { background: #4b5563; }
.ssd-btn-buy.disabled { background: #4b5563; opacity: 0.5; cursor: not-allowed; color: #fff; border: none; }

:root {
    /* DARK MODE VARS */
    --ssd-bg: #111827;
    --ssd-sidebar-bg: #0f172a;
    --ssd-box-bg: #1e293b;
    --ssd-border: #334155;
    --ssd-accent: #3b82f6;
    --ssd-text: #f1f5f9;
    --ssd-text-muted: #94a3b8;
}

/* LIGHT MODE VARS */
body.light-mode {
    --ssd-bg: #f3f4f6;
    --ssd-sidebar-bg: #ffffff;
    --ssd-box-bg: #f8fafc;
    --ssd-border: #e2e8f0;
    --ssd-accent: #2563eb;
    --ssd-text: #0f172a;
    --ssd-text-muted: #64748b;
}

/* Spinning Animation for SVGs */
@keyframes side_spin_ring { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 
.side-spin-ring-shape { transform-box: fill-box; transform-origin: center; animation: side_spin_ring 4s linear infinite; }

/* ========================================================
   COUNTDOWN WIDGET STYLES
   ======================================================== */
.ssd-sidebar-countdown-container {
    margin-bottom: 15px;
    padding: 0 5px;
}

/* Add Button */
.ssd-cd-add-btn {
    width: 100%;
    background: transparent;
    border: 1px dashed var(--ssd-border);
    color: var(--ssd-text-muted);
    padding: 10px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.ssd-cd-add-btn:hover {
    border-color: var(--ssd-accent);
    color: var(--ssd-accent);
    background: rgba(59, 130, 246, 0.05);
}

.ssd-cd-active-bar {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.3) 0%, rgba(15, 23, 42, 0.8) 100%);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-left: 4px solid var(--ssd-accent);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    position: relative;
}

.ssd-cd-bg-icon {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.ssd-cd-bg-icon::after {
    content: '\f501'; 
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%) rotate(-10deg);
    font-size: 4rem;
    color: #3b82f6;
    opacity: 0.06;
}

.ssd-cd-icon, .ssd-cd-info, .ssd-cd-menu-wrapper {
    position: relative;
    z-index: 2;
}

.ssd-cd-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ssd-cd-title {
    font-size: 0.65rem;
    color: #93c5fd; 
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.ssd-cd-timer {
    font-size: 0.8rem; 
    color: #ffffff;
    font-weight: 800;
    font-family: monospace;
    letter-spacing: -0.2px;
    white-space: nowrap; 
}

/* Menu Dots & Dropdown */
.ssd-cd-menu-wrapper { position: relative; z-index: 10; }
.ssd-cd-dots-btn {
    background: none; border: none;
    color: #94a3b8;
    cursor: pointer; padding: 5px;
    transition: 0.2s;
}
.ssd-cd-dots-btn:hover { color: #ffffff; }

.ssd-cd-dropdown-menu {
    position: absolute;
    right: 0; top: 25px;
    background: var(--ssd-box-bg);
    border: 1px solid var(--ssd-border);
    border-radius: 8px;
    padding: 5px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    display: none;
    z-index: 9999;
    min-width: 110px;
}
.ssd-cd-dropdown-menu.show { display: block; }
.ssd-cd-dropdown-menu button {
    width: 100%; text-align: left;
    background: none; border: none;
    padding: 8px 10px;
    color: var(--ssd-text);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 5px;
    display: flex; align-items: center; gap: 8px;
}
.ssd-cd-dropdown-menu button:hover { background: rgba(255,255,255,0.05); }
#ssd-cd-delete-btn { color: #ef4444; }
#ssd-cd-delete-btn:hover { background: rgba(239, 68, 68, 0.1); }

/* Setup Box */
.ssd-cd-setup-box {
    background: var(--ssd-box-bg);
    border: 1px solid var(--ssd-border);
    border-radius: 12px;
    padding: 12px;
}
.ssd-cd-setup-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ssd-text);
    margin-bottom: 10px;
}
.ssd-cd-input {
    width: 100%;
    background: var(--ssd-bg);
    border: 1px solid var(--ssd-border);
    color: var(--ssd-text);
    padding: 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    margin-bottom: 8px;
    box-sizing: border-box;
}
.ssd-cd-input:focus { outline: none; border-color: var(--ssd-accent); }

.ssd-cd-actions { display: flex; gap: 6px; margin-top: 5px; }
.ssd-cd-btn-primary, .ssd-cd-btn-secondary {
    flex: 1; padding: 6px; border: none; border-radius: 6px;
    font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.ssd-cd-btn-primary { background: var(--ssd-accent); color: white; }
.ssd-cd-btn-secondary { background: var(--ssd-border); color: var(--ssd-text); }


/* --- SIDEBAR STRUCTURE --- */
.ssd-sidebar {
    width: 300px;
    background: var(--ssd-sidebar-bg);
    border-right: 1px solid var(--ssd-border);
    height: 100dvh;
    position: fixed; top: 0; left: 0;
    display: flex; flex-direction: column;
    z-index: 2000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #334155 var(--ssd-sidebar-bg);
}
.ssd-sidebar::-webkit-scrollbar { width: 6px; }
.ssd-sidebar::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }

/* Header Areas */
.ssd-sidebar-top { padding: 15px 12px; border-bottom: 1px solid var(--ssd-border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.ssd-profile-brief { display: flex; align-items: center; gap: 10px; }
.ssd-profile-brief img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #333; }
.ssd-profile-text { display: flex; flex-direction: column; }
.ssd-welcome { font-size: 0.65rem; color: var(--ssd-text-muted); text-transform: uppercase; }
.ssd-name { font-size: 0.85rem; font-weight: 700; color: var(--ssd-text); }

.ssd-icon-action { width: 32px; height: 32px; background: var(--ssd-box-bg); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--ssd-text-muted); border: 1px solid var(--ssd-border); cursor: pointer; text-decoration: none; transition: 0.2s; }
.ssd-icon-action:hover { background: var(--ssd-accent); color: white; border-color: var(--ssd-accent); }

/* Search */
.ssd-sidebar-search-row { padding: 10px 12px; display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.ssd-search-wrapper { position: relative; flex: 1; width: auto; }
.ssd-search-wrapper input { width: 100%; height: 36px; background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); padding: 0 10px 0 32px; border-radius: 8px; color: var(--ssd-text); font-size: 0.8rem; box-sizing: border-box; }
.ssd-search-wrapper input:focus { outline: none; border-color: var(--ssd-accent); }
.ssd-search-wrapper i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ssd-text-muted); font-size: 0.75rem; }

.ssd-search-link-wrapper:hover .ssd-search-wrapper { border-color: var(--ssd-accent); }
.ssd-search-link-wrapper:hover .ssd-search-wrapper input { border-color: var(--ssd-accent); }

/* Feed Button */
.ssd-icon-action.feed-btn { width: auto !important; padding: 0 12px; gap: 6px; border-radius: 8px; justify-content: center; background: var(--ssd-box-bg); text-decoration: none; display: flex; align-items: center; height: 36px; border: 1px solid var(--ssd-border); color: var(--ssd-text-muted); }
.ssd-feed-text { font-size: 0.75rem; font-weight: 600; }
.ssd-icon-action.feed-btn:hover { background: var(--ssd-accent); color: white; border-color: var(--ssd-accent); }
.ssd-icon-action.feed-btn:hover .ssd-feed-text { color: white; }

/* Content Area */
.ssd-sidebar-content { padding: 5px 12px 20px 12px; flex-grow: 1; }
.ssd-nav-section { margin-bottom: 15px; }
.ssd-nav-section label { display: block; font-size: 0.65rem; color: var(--ssd-text-muted); font-weight: 800; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; }

.ssd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ssd-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }

/* Box Items */
.ssd-box-item {
    position: relative;
    background: var(--ssd-box-bg);
    border: 1px solid var(--ssd-border);
    padding: 15px 5px;
    border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center; text-decoration: none;
    overflow: hidden;
    min-height: 70px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    color: #ffffff !important;
}
.ssd-box-item i { font-size: 1.2rem; color: #ffffff !important; position: relative; z-index: 2; transition: 0.2s; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.ssd-box-item span { font-size: 0.7rem; color: #ffffff !important; font-weight: 600; position: relative; z-index: 2; transition: 0.2s; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.ssd-box-item::after {
    content: ''; font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; right: -10px; bottom: -10px; font-size: 3rem; opacity: 0.15; 
    transform: rotate(-20deg); z-index: 1; color: white; transition: all 0.3s ease;
}
.ssd-box-item:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.2); }
.ssd-box-item:hover::after { opacity: 0.25; transform: rotate(-10deg) scale(1.1); }
.ssd-box-item.active { border: 2px solid #ffffff; box-shadow: 0 0 10px rgba(255,255,255,0.4); }

.ssd-box-item.disabled-item {
    opacity: 0.55; pointer-events: none; cursor: default; filter: grayscale(80%);
    background: var(--ssd-box-bg) !important; border-color: var(--ssd-border) !important;
}
.ssd-box-item.disabled-item:hover { transform: none; box-shadow: none; }
.ssd-box-item.disabled-item i, .ssd-box-item.disabled-item span { color: var(--ssd-text-muted) !important; text-shadow: none; }

/* Gradients for items */
.ssd-box-item[href*="store"]:not(.disabled-item) { background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%); }
.ssd-box-item[href*="store"]::after { content: '\f02d'; }
.ssd-box-item[href*="courses"]:not(.disabled-item) { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }
.ssd-box-item[href*="courses"]::after { content: '\f51c'; }
.ssd-box-item[href*="exams"]:not(.disabled-item) { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.ssd-box-item[href*="exams"]::after { content: '\f573'; }
.ssd-box-item[data-tab="my-profile"]:not(.disabled-item), .ssd-box-item[href*="my-profile"]:not(.disabled-item) { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.ssd-box-item[data-tab="my-profile"]::after, .ssd-box-item[href*="my-profile"]::after { content: '\f007'; }
.ssd-box-item[data-tab="my-pages"]:not(.disabled-item), .ssd-box-item[href*="my-pages"]:not(.disabled-item) { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }
.ssd-box-item[data-tab="my-pages"]::after, .ssd-box-item[href*="my-pages"]::after { content: '\f024'; }
.ssd-box-item[data-tab="wallet"]:not(.disabled-item), .ssd-box-item[href*="wallet"]:not(.disabled-item) { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); }
.ssd-box-item[data-tab="wallet"]::after, .ssd-box-item[href*="wallet"]::after { content: '\f555'; }
.ssd-box-item[data-tab="my-classes"]:not(.disabled-item), .ssd-box-item[href*="my-classes"]:not(.disabled-item) { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.ssd-box-item[data-tab="my-classes"]::after, .ssd-box-item[href*="my-classes"]::after { content: '\f5fc'; }
.ssd-box-item[data-tab="study-room"]:not(.disabled-item), .ssd-box-item[href*="study-room"]:not(.disabled-item) { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); }
.ssd-box-item[data-tab="study-room"]::after, .ssd-box-item[href*="study-room"]::after { content: '\f2f2'; }
.ssd-box-item[data-tab="100-days-camp"]:not(.disabled-item), .ssd-box-item[href*="100-days-camp"]:not(.disabled-item) { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); }
.ssd-box-item[data-tab="100-days-camp"]::after, .ssd-box-item[href*="100-days-camp"]::after { content: '\f6bb'; }

/* ========================================================
   PROGRAMS BANNER (100 DAYS CAMP)
   ======================================================== */
.ssd-program-banner {
    display: flex;
    align-items: center;
    justify-content: center; /* මධ්‍යගත කිරීම */
    position: relative; /* Arrow එක සඳහා */
    background: var(--ssd-box-bg);
    border: 1px solid var(--ssd-border);
    border-radius: 12px;
    padding: 12px 15px; /* Logo එකට ගැළපෙන පරිදි ඉඩ වැඩි කිරීම */
    margin-bottom: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.ssd-program-banner:hover {
    border-color: var(--ssd-accent);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.ssd-program-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Light / Dark Logo Logic - Mobile & Desktop සඳහා පැහැදිලිව විශාල කර ඇත */
.ssd-prog-logo-dark, 
.ssd-prog-logo-light {
    height: 48px; /* 35px සිට 48px දක්වා විශාල කළා */
    width: auto;
    max-width: 85%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.ssd-program-banner:hover .ssd-prog-logo-dark,
.ssd-program-banner:hover .ssd-prog-logo-light {
    transform: scale(1.05); /* Hover කිරීමේදී Logo එක සුළු වශයෙන් Zoom වේ */
}

.ssd-prog-logo-light { display: none; } /* Default hide light logo in dark mode */

body.light-mode .ssd-prog-logo-dark { display: none !important; }
body.light-mode .ssd-prog-logo-light { display: block !important; }

/* Small Arrow Icon (දකුණු පස ඇති කුඩා ඊතලය) */
.ssd-prog-arrow {
    position: absolute;
    right: 15px;
    font-size: 0.7rem;
    color: var(--ssd-text-muted);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.ssd-program-banner:hover .ssd-prog-arrow {
    color: var(--ssd-accent);
    opacity: 1;
    transform: translateX(3px);
}

/* Active State for Tab */
.ssd-program-banner.active {
    border-color: var(--ssd-accent);
    background: rgba(59, 130, 246, 0.05);
}

/* --- SIDEBAR CHAT BOX MODERN GREEN DESIGN --- */
.ssd-box-item[data-tab="chat"]:not(.disabled-item), .ssd-box-item[href*="chat"]:not(.disabled-item) { 
    background: #10b981 !important; 
    border: 1px solid #059669 !important;
    transition: all 0.3s ease;
}
.ssd-box-item[data-tab="chat"]:not(.disabled-item) i { 
    color: #ffffff !important; 
    text-shadow: none !important;
}
.ssd-box-item[data-tab="chat"]:not(.disabled-item) span:not(.ssd-sidebar-chat-badge-count) { 
    color: #ffffff !important; 
    text-shadow: none !important;
}
.ssd-box-item[data-tab="chat"]:not(.disabled-item):hover {
    background: #059669 !important;
    border-color: #047857 !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(16, 185, 129, 0.3);
}
.ssd-box-item[data-tab="chat"]::after, .ssd-box-item[href*="chat"]::after { content: '\f4ad'; opacity: 0.1; color: #ffffff; }

/* Light Mode Overrides (Using body.light-mode explicitly) */
body.light-mode .ssd-box-item[data-tab="chat"]:not(.disabled-item), 
body.light-mode .ssd-box-item[href*="chat"]:not(.disabled-item) {
    background: #10b981 !important;
    border-color: #059669 !important;
}
body.light-mode .ssd-box-item[data-tab="chat"]:not(.disabled-item) i { 
    color: #ffffff !important; 
}
body.light-mode .ssd-box-item[data-tab="chat"]:not(.disabled-item) span:not(.ssd-sidebar-chat-badge-count) { 
    color: #ffffff !important; 
}
body.light-mode .ssd-box-item[data-tab="chat"]:not(.disabled-item):hover {
    background: #059669 !important;
    box-shadow: 0 8px 15px rgba(16, 185, 129, 0.4);
}

.ssd-box-item[data-tab="help"]:not(.disabled-item), .ssd-box-item[href*="help"]:not(.disabled-item), .ssd-box-item[href*="about"]:not(.disabled-item), .ssd-box-item[href*="facts"]:not(.disabled-item) { background: linear-gradient(135deg, #64748b 0%, #475569 100%); }
.ssd-box-item[data-tab="help"]::after, .ssd-box-item[href*="help"]::after { content: '\f059'; }
.ssd-box-item[data-tab="settings"]:not(.disabled-item), .ssd-box-item[href*="settings"]:not(.disabled-item) { background: linear-gradient(135deg, #4b5563 0%, #374151 100%); }
.ssd-box-item[data-tab="settings"]::after, .ssd-box-item[href*="settings"]::after { content: '\f013'; }
.ssd-box-item[href*="login"]:not(.disabled-item) { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.ssd-box-item[href*="login"]::after { content: '\f2f6'; }
.ssd-box-item[href*="register"]:not(.disabled-item) { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
.ssd-box-item[href*="register"]::after { content: '\f234'; }
.ssd-box-item[href*="feed"]:not(.disabled-item) { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.ssd-box-item[href*="feed"]::after { content: '\f09e'; }

/* ========================================================
   GEMINI-STYLE GLOWING ANIMATED BORDER BAR
   ======================================================== */
.ssd-sidebar-footer { padding-top: 10px; border-top: 1px solid var(--ssd-border); margin-top: 10px; }

.ssd-premium-sidebar-bar {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 20px 15px; margin-bottom: 12px;
    border-radius: 16px; text-decoration: none;
    position: relative; overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    text-align: center;
}
.ssd-premium-sidebar-bar:hover { transform: translateY(-3px); }

.ssd-premium-sidebar-bar::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 250%; aspect-ratio: 1; transform-origin: center;
    animation: border_spin_trail 3s linear infinite; z-index: 1;
}
@keyframes border_spin_trail {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.ssd-premium-sidebar-bar::after {
    content: ''; position: absolute; inset: 2px;
    background: var(--ssd-sidebar-bg); border-radius: 14px;
    z-index: 2; transition: background 0.3s;
}
.ssd-premium-sidebar-bar:hover::after { background: var(--ssd-box-bg); }

.ssd-premium-text-box { position: relative; z-index: 3; display: flex; flex-direction: column; width: 100%; align-items: center; }

.ssd-prem-sub { color: var(--ssd-text-muted); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; transition: 0.3s; }

.ssd-premium-sidebar-bar.not-verified::before,
.ssd-premium-sidebar-bar.is-verified::before {
    background: conic-gradient(
        from 0deg, transparent 0deg, transparent 180deg,
        #3b82f6 220deg, #8b5cf6 260deg, #ec4899 300deg,
        #f59e0b 330deg, #10b981 360deg
    );
}

/* LIGHT MODE OVERRIDES FOR SIDEBAR LOGO */
body.light-mode .ssd-sidebar-logo-dark { display: none !important; }
body.light-mode .ssd-sidebar-logo-light { display: block !important; }
.ssd-sidebar-verified-tick { display: flex; align-items: center; justify-content: center; }

.ssd-logout-btn { display: block; width: 100%; padding: 10px; border: 1px solid var(--ssd-border); text-align: center; color: #ef4444; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.85rem; transition: 0.2s; box-sizing: border-box; }
.ssd-logout-btn:hover { background: rgba(239, 68, 68, 0.1); border-color: #ef4444; }
.ssd-version { text-align: center; font-size: 0.7rem; color: var(--ssd-text-muted); margin-top: 8px; }

/* ========================================================
   CHAT NOTIFICATION BADGES & DOTS
   ======================================================== */
/* Chat Badge (White Circle, Green Text) */
.ssd-sidebar-chat-badge-count {
    position: absolute;
    background-color: #ffffff !important; 
    color: #10b981 !important; 
    font-size: 0.65rem;
    font-weight: 800;
    border-radius: 50%; 
    border: 2px solid #10b981; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px; 
    top: -8px; 
    right: -10px;
}

/* Mobile Header Notification Dot (Red) */
.ssd-header-chat-dot {
    position: absolute;
    top: 12px;
    right: calc(50% - 14px);
    width: 10px;
    height: 10px;
    background-color: #ef4444; /* Alert red */
    border-radius: 50%;
    border: 2px solid var(--ssd-sidebar-bg);
    z-index: 10;
    animation: chatBadgePulseRed 2s infinite;
}

@keyframes chatBadgePulseRed {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    50% { transform: scale(1.3); box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
	
	/* Light / Dark Logo Logic - Mobile & Desktop සඳහා පැහැදිලිව විශාල කර ඇත */
.ssd-prog-logo-dark, 
.ssd-prog-logo-light {
    height: 62px; /* 48px සිට තවත් 30% කින් පමණ විශාල කළා */
    width: auto;
    max-width: 95%; /* කොටුවෙන් පිටතට නොයන ලෙස පළල සකසා ඇත */
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* ========================================================
   MOBILE FB-STYLE HEADER CSS
   ======================================================== */
.ssd-mobile-header {
    display: none; 
    position: fixed; top: 0; left: 0; width: 100%; height: 60px;
    background: var(--ssd-sidebar-bg); z-index: 1000;
    border-bottom: 1px solid var(--ssd-border);
    padding: 0;
    box-sizing: border-box;
}

@media (max-width: 991px) {
    .ssd-mobile-header { display: block; } 
    .ssd-sidebar { transform: translateX(-100%); width: 100% !important; height: 100dvh; z-index: 9999; overflow-y: auto; }
    .ssd-sidebar.open { transform: translateX(0); }
    .ssd-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 1500; }
    .ssd-overlay.active { display: block; }
}

.ssd-fb-header-nav {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-evenly; /* Evenly spaced */
    align-items: center;
}

.ssd-fb-nav-item {
    flex: 1; /* Equal width distribution */
    max-width: 20%; /* Exactly 5 items constraint */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: var(--ssd-text-muted);
    text-decoration: none;
    position: relative;
    background: transparent !important; 
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Light mode background fix */
body.light-mode .ssd-fb-nav-item:hover, .ssd-fb-nav-item:focus, .ssd-fb-nav-item:active {
    background: transparent !important;
    outline: none;
}

body.light-mode .ssd-fb-nav-item:hover {
    color: var(--ssd-accent);
}

/* --- MOBILE HEADER ACTIVE TAB FIX --- */
.ssd-fb-nav-item.active {
    background: transparent !important; 
    color: var(--ssd-accent);
}
.ssd-fb-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 3px;
    background-color: var(--ssd-accent); 
    border-radius: 3px 3px 0 0;
}

.ssd-fb-nav-item img.ssd-header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    object-fit: cover;
    transition: 0.2s;
}

.ssd-fb-nav-item.active img.ssd-header-avatar {
    border-color: var(--ssd-accent);
}


/* ========================================================
   PWA INSTALL SECTION STYLES
   ======================================================== */
.ssd-pwa-install-section { margin-bottom: 15px; }
.ssd-pwa-title { font-size: 0.65rem; color: var(--ssd-text-muted); font-weight: 800; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; }

/* Horizontal 3-column Grid for App Logos */
.ssd-pwa-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; align-items: center; }
.ssd-pwa-img-btn { 
    background: transparent !important; 
    border: none !important; 
    padding: 0 !important; 
    cursor: pointer; 
    transition: transform 0.2s ease; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    outline: none; 
    height: 100%; 
    box-shadow: none !important;
}
.ssd-pwa-img-btn:hover { transform: scale(1.05); }
.ssd-pwa-img-btn img { width: 100%; height: auto; max-height: 35px; object-fit: contain; } 

/* Modals */
.ssd-ios-pwa-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.ssd-ios-pwa-content { background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); padding: 20px; border-radius: 12px; width: 90%; max-width: 320px; text-align: center; position: relative; color: var(--ssd-text); box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
.ssd-ios-close { position: absolute; top: 10px; right: 15px; font-size: 1.5rem; cursor: pointer; color: var(--ssd-text-muted); }
.ssd-ios-pwa-content h4 { margin-top: 0; color: var(--ssd-text); }
.ssd-ios-instructions { text-align: left; font-size: 0.85rem; color: var(--ssd-text-muted); line-height: 1.5; margin-top: 15px; padding-left: 20px; }
.ssd-ios-instructions li { margin-bottom: 10px; }
	
/* ========================================================
   DESKTOP ONLY: Fix Premium Box Logo & Tick Spacing
   ======================================================== */
@media (min-width: 992px) {
    /* ලාංඡනය (Logo) සඳහා */
    .ssd-sidebar-logo-dark,
    .ssd-sidebar-logo-light {
        height: 30px !important; /* උස තවත් අඩු කළා */
        max-width: 85% !important; /* කොටුවෙන් පිටතට යාම වැළැක්වීමට පළල සීමා කළා */
        object-fit: contain;
    }
    
    /* Verified Tick එක සඳහා */
    .ssd-sidebar-verified-tick {
        transform: scale(0.9); /* ටික් එකත් තවත් කුඩා කළා */
        display: inline-flex;
        margin-left: -4px; /* ලාංඡනයට මඳක් ළං කළා */
    }
}

/* --- General Layout & Base --- */
        *, *::before, *::after { box-sizing: border-box; }

        body, html {
            overflow-x: hidden;
            width: 100%;
        }

        .ssd-login-page-wrapper {
            min-height: 100vh;
            background-color: #0F172A;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.15) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(249, 115, 22, 0.1) 0%, transparent 40%);
            font-family: 'Inter', sans-serif;
            color: #d1d5db;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            width: 100%;
        }

        .ssd-login-pro-layout {
            flex: 1;
            display: grid;
            grid-template-columns: 1fr; /* Mobile default (1 column) */
            position: relative;
            max-width: 100vw;
            overflow-x: hidden;
        }

        /* --- DESKTOP LAYOUT (2 Columns) --- */
        @media (min-width: 992px) { 
            .ssd-login-pro-layout { 
                grid-template-columns: 1.2fr 1fr; /* Promo wider */
            }
        }
        
        /* --- SCROLLING BENEFITS (MARQUEE EXACT TABS CSS) --- */
        .ssd-top-assets-wrapper {
            width: 100%;
            max-width: 100vw;
            overflow: hidden;
        }

        .ssd-scrolling-benefits-wrapper {
            margin-bottom: 20px; overflow: hidden; width: 100%; max-width: 100vw; position: relative; display: flex; flex-direction: column; gap: 15px; box-sizing: border-box;
            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        }
        .ssd-marquee { display: flex; overflow: hidden; user-select: none; }
        .ssd-marquee-track { display: flex; gap: 15px; width: max-content; animation: ssd-scroll-x 100s linear infinite; padding-right: 15px; }
        .ssd-marquee-track.reverse { animation: ssd-scroll-x-reverse 110s linear infinite; }
        
        @keyframes ssd-scroll-x { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        @keyframes ssd-scroll-x-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
        
        .ssd-m-card {
            background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 50px;
            padding: 8px 20px 8px 8px; display: flex; align-items: center; gap: 12px; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,0.2); backdrop-filter: blur(5px);
        }
        .ssd-m-card .m-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 1rem; flex-shrink: 0; }
        .ssd-m-card .m-text { display: flex; flex-direction: column; text-align: left; }
        .ssd-m-card .m-text span { color: #e2e8f0; font-weight: 700; font-size: 0.9rem; line-height: 1.2; }
        .ssd-m-card .m-text small { color: #94a3b8; font-size: 0.75rem; }

        /* Gradients for icons */
        .gradient-purple { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
        .gradient-red { background: linear-gradient(135deg, #ef4444, #b91c1c); }
        .gradient-cyan { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
        .gradient-green { background: linear-gradient(135deg, #10b981, #059669); }
        .gradient-orange { background: linear-gradient(135deg, #f97316, #ea580c); }
        .gradient-blue { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
        .gradient-gold { background: linear-gradient(135deg, #fbbf24, #d97706); }

        /* --- Promo Column (Left) --- */
        .login-pro-promo-column { 
            display: flex; 
            flex-direction: column;
            width: 100%;
            max-width: 100vw;
            padding: 2rem 0 1rem 0; /* Padding for mobile */
            position: relative; 
            z-index: 2; 
            overflow-x: hidden;
        }

        .promo-content {
            display: none; /* Hidden on Mobile */
        }

        @media (min-width: 992px) { 
            .login-pro-promo-column { 
                justify-content: center; 
                padding: 4rem 2rem 4rem 4rem; 
            } 
            .promo-content {
                display: block; /* Visible on Desktop */
                margin-top: 3rem;
            }
            .promo-content h1 { 
                font-size: 3.5rem; 
                color: #fff; 
                font-weight: 800;
                line-height: 1.1; 
                margin-bottom: 1.5rem;
                margin-top: 0 !important; 
            } 
            .promo-content p { 
                font-size: 1.25rem; 
                color: #94a3b8; 
                max-width: 550px; 
                line-height: 1.6;
            } 
            .ssd-top-assets-wrapper {
                margin-bottom: 0;
            }
            /* Gradient Text */
            .highlight-text { 
                background: -webkit-linear-gradient(45deg, #3b82f6, #8b5cf6);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        /* --- Form Column (Right) --- */
        .login-pro-form-column {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem 1rem;
            position: relative;
            z-index: 2;
        }

        /* --- Form Container (No Box) --- */
        .ssd-login-container, .ssd-lost-password-form, .ssd-reset-password-form {
            width: 100%;
            max-width: 480px;
            font-size: 14px;
            padding: 0;
            background: transparent;
            border: none;
            box-shadow: none;
        }

        /* --- Header --- */
        .ssd-form-header { text-align: center; margin-bottom: 2rem; }
        .ssd-form-header h2 {
            color: #fff;
            margin: 0;
            font-weight: 700;
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
        }
        .word-highlighter-loop { display: flex; justify-content: center; gap: 15px; margin: 8px 0; font-weight: 600; font-size: 1rem; }
        .study-teach-text { color: #60a5fa; }
        .grow-earn-text { color: #fb923c; }

        /* Modern White Google Button Styles */
        .ssd-modern-google-btn { 
            display: flex; justify-content: center; background: #ffffff; 
            border-radius: 50px; padding: 4px; margin: 15px auto 25px auto; 
            max-width: 320px; box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1); 
            transition: transform 0.3s ease, box-shadow 0.3s ease; 
        }
        .ssd-modern-google-btn:hover { 
            transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15); 
        }

        /* --- Inputs --- */
        .ssd-login-container form p, .ssd-lost-password-form form p, .ssd-reset-password-form form p {
            margin-bottom: 1.25rem;
        }
        .ssd-login-container form label, .ssd-lost-password-form label, .ssd-reset-password-form label {
            display: block; margin-bottom: 0.4rem; font-weight: 500; font-size: 0.9rem; color: #e2e8f0; margin-left: 2px;
        }

        .ssd-login-container input[type="text"], .ssd-login-container input[type="password"],
        .ssd-lost-password-form input[type="text"], .ssd-reset-password-form input[type="text"],
        .ssd-reset-password-form input[type="password"] {
            width: 100%; padding: 0.85rem 1rem; border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background-color: rgba(30, 41, 59, 0.7); color: #fff; font-size: 1rem;
            transition: all 0.3s ease; backdrop-filter: blur(5px); margin-bottom: 0;
        }

        .ssd-login-container input:focus, .ssd-lost-password-form input:focus, .ssd-reset-password-form input:focus {
            border-color: #3b82f6; background-color: rgba(30, 41, 59, 0.9);
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15); outline: none;
        }
        .ssd-login-container input::placeholder { color: #475569; }

        .login-submit input[type="submit"] {
            width: 100%; padding: 0.9rem; border: none; border-radius: 12px;
            font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.2s ease;
            background: linear-gradient(to right, #2563eb, #3b82f6); color: white;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); margin-top: 0.5rem;
        }
        .login-submit input[type="submit"]:hover {
            background: linear-gradient(to right, #1d4ed8, #2563eb);
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
        }

        .login-lost-password, .login-signup-link, .back-to-login {
            text-align: center; margin-top: 1.5rem; font-size: 1rem; color: #64748b;
        }
        .login-signup-link { padding-top: 0; border-top: none; margin-top: 2.5rem; }
        .login-lost-password a, .login-signup-link a, .back-to-login a {
            color: #3b82f6; font-weight: 600; text-decoration: none; transition: color 0.2s;
        }
        .login-lost-password a:hover, .login-signup-link a:hover, .back-to-login a:hover {
            color: #60a5fa; text-decoration: underline;
        }

        .ssd-login-error {
            color: #fca5a5; background-color: rgba(127, 29, 29, 0.3);
            border: 1px solid rgba(239, 68, 68, 0.5); padding: 0.75rem;
            border-radius: 8px; margin-bottom: 1.5rem; text-align: center; font-size: 0.9em;
        }
        .ssd-notice-info {
            color: #60a5fa; background-color: rgba(30, 58, 138, 0.3);
            border: 1px solid rgba(59, 130, 246, 0.3); padding: 0.75rem;
            border-radius: 8px; margin-bottom: 1.5rem; text-align: center; font-size: 0.9em;
        }
        .reg-otp-info {
            background-color: rgba(31, 41, 55, 0.6); color: #d1d5db;
            padding: 1rem; border-radius: 12px; margin-bottom: 1.5rem;
            font-size: 0.9rem; text-align: center; border: 1px solid rgba(255,255,255,0.1);
        }
        #otp_code { text-align: center; font-size: 1.5rem; letter-spacing: 5px; }

        .ssd-login-container #nav, .ssd-login-container #backtoblog { display: none; }
        .ssd-login-meta-footer { padding: 1.5rem 1rem 1rem 1rem; text-align: center; font-size: 0.8rem; color: #64748b; margin-top: 1rem; }
        .ssd-login-meta-footer a { color: #64748b; text-decoration: none; }
        .ssd-login-meta-footer a:hover { color: #94a3b8; }

        /* --- PWA ICONS LOGIN CSS --- */
        .ssd-pwa-login-section {
            margin-top: 1.5rem;
            width: 100%;
            max-width: 480px;
            text-align: center;
        }
        .ssd-pwa-title {
            font-size: 0.7rem;
            color: #94a3b8;
            font-weight: 800;
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* Horizontal 3-column Grid for App Logos */
        .ssd-pwa-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; align-items: center; }
        .ssd-pwa-img-btn { 
            background: transparent !important; 
            border: none !important; 
            padding: 0 !important; 
            cursor: pointer; 
            transition: transform 0.2s ease; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            outline: none; 
            height: 100%; 
            box-shadow: none !important;
        }
        .ssd-pwa-img-btn:hover { transform: scale(1.05); }
        .ssd-pwa-img-btn img { width: 100%; height: auto; max-height: 35px; object-fit: contain; } 

        /* Modal Styles */
        .ssd-ios-pwa-modal {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.8); z-index: 99999;
            display: none; align-items: center; justify-content: center;
        }
        .ssd-ios-pwa-content {
            background: #1e293b; border: 1px solid #334155; padding: 25px;
            border-radius: 16px; width: 90%; max-width: 320px; text-align: center;
            position: relative; color: #f1f5f9; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }
        .ssd-ios-close {
            position: absolute; top: 10px; right: 15px; font-size: 1.5rem; cursor: pointer; color: #94a3b8;
        }
        .ssd-ios-pwa-content h4 { margin-top: 0; color: #fff; font-size: 1.2rem; margin-bottom: 10px; }
        .ssd-ios-instructions { text-align: left; font-size: 0.9rem; color: #cbd5e1; line-height: 1.6; margin-top: 15px; padding-left: 20px; }
        .ssd-ios-instructions li { margin-bottom: 12px; }

        /* --- MOBILE RESPONSIVE --- */
        @media (max-width: 768px) {
            .login-pro-form-column { padding: 0 1.25rem 1.5rem 1.25rem; align-items: center; } /* Reduced top padding as loop is above */
            
            /* Reduced Fonts */
            .ssd-form-header h2 { font-size: 1.4rem; margin-bottom: 0.25rem; }
            .word-highlighter-loop { font-size: 0.9rem; gap: 10px; margin: 5px 0;}
            
            /* Compact Inputs */
            .ssd-login-container form p { margin-bottom: 1rem; }
            .ssd-login-container form label { font-size: 0.85rem; margin-bottom: 0.3rem; }
            
            .ssd-login-container input[type="text"], 
            .ssd-login-container input[type="password"] {
                padding: 0.75rem 0.85rem;
                font-size: 0.95rem;
            }

            .login-submit input[type="submit"] { padding: 0.8rem; font-size: 0.95rem; }
            .login-lost-password, .login-signup-link, .back-to-login { font-size: 0.85rem; margin-top: 1.2rem; }
            .login-signup-link { margin-top: 2rem; }

            /* Marquee Exact Mobile Tabs */
            .ssd-scrolling-benefits-wrapper { gap: 12px; margin-bottom: 25px; }
            .ssd-m-card { padding: 6px 16px 6px 6px; border-radius: 40px; gap: 10px; }
            .ssd-m-card .m-icon { width: 30px; height: 30px; font-size: 0.8rem; }
            .ssd-m-card .m-text span { font-size: 0.72rem; }
            .ssd-m-card .m-text small { font-size: 0.6rem; }
        }
		
		/* --- DESKTOP LAYOUT (2 Columns) --- */
        @media (min-width: 992px) { 
            .ssd-login-pro-layout { 
                grid-template-columns: 1.2fr 1fr; /* Promo wider */
                align-items: center; /* NEW: Dekama madata center karanawa */
            }
            .login-pro-promo-column { 
                justify-content: center; 
                padding: 0 2rem 0 5rem; /* Uda thibba padding ayin kala */
            } 
            .login-pro-form-column {
                padding: 0 5rem 0 2rem; /* Dakunu patte padding balance kala */
            }
            .promo-content {
                display: block; /* Visible on Desktop */
                margin-top: 2.5rem;
            }
            .promo-content h1 { 
                font-size: 3.5rem; 
                color: #fff; 
                font-weight: 800;
                line-height: 1.1; 
                margin-bottom: 1.5rem;
                margin-top: 0 !important; 
            } 
            .promo-content p { 
                font-size: 1.25rem; 
                color: #94a3b8; 
                max-width: 550px; 
                line-height: 1.6;
            } 
            .ssd-top-assets-wrapper {
                margin-bottom: 0;
            }
            /* Gradient Text */
            .highlight-text { 
                background: -webkit-linear-gradient(45deg, #3b82f6, #8b5cf6);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        /* --- Light Mode Logo Logic --- */
        body.light-mode .ssd-logo-dark {
            display: none !important;
        }
        body.light-mode .ssd-logo-light {
            display: block !important;
            filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1)); /* Light mode shadow */
        }
		
		/* --- Light Mode: Loop (Marquee) Styles --- */
        body.light-mode .ssd-m-card {
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        body.light-mode .ssd-m-card .m-text span {
            color: #1e293b; /* Dark text for titles */
        }

        body.light-mode .ssd-m-card .m-text small {
            color: #64748b; /* Gray text for descriptions */
        }

/* --- General Layout & Base --- */
        *, *::before, *::after { box-sizing: border-box; }

        body, html {
            overflow-x: hidden;
            width: 100%;
        }

        .ssd-reg-pro-layout {
            display: grid;
            grid-template-columns: 1fr; /* Mobile default (1 column) */
            min-height: 100vh;
            color: #d1d5db;
            position: relative;
            overflow-x: hidden;
            width: 100%;
            background-color: #0F172A;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.15) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(249, 115, 22, 0.1) 0%, transparent 40%);
            font-family: 'Inter', sans-serif;
        }

        /* --- DESKTOP LAYOUT (2 Columns) --- */
        @media (min-width: 992px) { 
            .ssd-reg-pro-layout { 
                grid-template-columns: 1.2fr 1fr; /* Promo wider */
                align-items: center; /* Center vertically */
            }
        }
        
        /* --- SCROLLING BENEFITS (MARQUEE EXACT TABS CSS) --- */
        .ssd-top-assets-wrapper {
            width: 100%;
            max-width: 100vw;
            overflow: hidden;
        }

        .ssd-scrolling-benefits-wrapper {
            margin-bottom: 20px; overflow: hidden; width: 100%; max-width: 100vw; position: relative; display: flex; flex-direction: column; gap: 15px; box-sizing: border-box;
            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        }
        .ssd-marquee { display: flex; overflow: hidden; user-select: none; }
        .ssd-marquee-track { display: flex; gap: 15px; width: max-content; animation: ssd-scroll-x 100s linear infinite; padding-right: 15px; }
        .ssd-marquee-track.reverse { animation: ssd-scroll-x-reverse 110s linear infinite; }
        
        @keyframes ssd-scroll-x { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        @keyframes ssd-scroll-x-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
        
        .ssd-m-card {
            background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 50px;
            padding: 8px 20px 8px 8px; display: flex; align-items: center; gap: 12px; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,0.2); backdrop-filter: blur(5px);
        }
        .ssd-m-card .m-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 1rem; flex-shrink: 0; }
        .ssd-m-card .m-text { display: flex; flex-direction: column; text-align: left; }
        .ssd-m-card .m-text span { color: #e2e8f0; font-weight: 700; font-size: 0.9rem; line-height: 1.2; }
        .ssd-m-card .m-text small { color: #94a3b8; font-size: 0.75rem; }

        /* Gradients for icons */
        .gradient-purple { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
        .gradient-red { background: linear-gradient(135deg, #ef4444, #b91c1c); }
        .gradient-cyan { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
        .gradient-green { background: linear-gradient(135deg, #10b981, #059669); }
        .gradient-orange { background: linear-gradient(135deg, #f97316, #ea580c); }
        .gradient-blue { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
        .gradient-gold { background: linear-gradient(135deg, #fbbf24, #d97706); }

        /* --- Promo Column (Left) --- */
        .reg-pro-promo-column { 
            display: flex; 
            flex-direction: column;
            width: 100%;
            max-width: 100vw;
            padding: 2rem 0 1rem 0; /* Padding for mobile */
            position: relative; 
            z-index: 2; 
            overflow-x: hidden;
        }

        .promo-content {
            display: none; /* Hidden on Mobile */
        }

        @media (min-width: 992px) { 
            .reg-pro-promo-column { 
                justify-content: center; 
                padding: 0 2rem 0 5rem; /* Balanced Padding */
            } 
            .promo-content {
                display: block; /* Visible on Desktop */
                margin-top: 2.5rem;
            }
            .promo-content h1 { 
                font-size: 3.5rem; 
                color: #fff; 
                font-weight: 800;
                line-height: 1.1; 
                margin-bottom: 1.5rem;
                margin-top: 0 !important; 
            } 
            .promo-content p { 
                font-size: 1.25rem; 
                color: #94a3b8; 
                max-width: 550px; 
                line-height: 1.6;
            } 
            .ssd-top-assets-wrapper {
                margin-bottom: 0;
            }
            /* Gradient Text */
            .highlight-text { 
                background: -webkit-linear-gradient(45deg, #3b82f6, #8b5cf6);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        /* --- Form Column (Right) --- */
        .reg-pro-form-column {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem 1rem;
            position: relative;
            z-index: 2;
        }

        @media (min-width: 992px) {
            .reg-pro-form-column {
                padding: 0 5rem 0 2rem;
            }
        }

        /* --- Form Container --- */
        .ssd-registration-container {
            width: 100%;
            max-width: 480px;
            font-size: 14px;
            padding: 0;
            background: transparent;
            border: none;
            box-shadow: none;
        }

        /* --- Header --- */
        .ssd-form-header { text-align: center; margin-bottom: 2rem; }
        .ssd-form-header h2 { color: #fff; margin: 0; font-weight: 700; font-size: 1.8rem; margin-bottom: 0.5rem; }
        .word-highlighter-loop { display: flex; justify-content: center; gap: 15px; margin: 8px 0; font-weight: 600; font-size: 1rem; }
        .study-teach-text { color: #60a5fa; } .grow-earn-text { color: #fb923c; }

        /* Modern White Google Button */
        .ssd-modern-google-btn { display: flex; justify-content: center; background: #ffffff; border-radius: 50px; padding: 4px; margin: 15px auto 25px auto; max-width: 320px; box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .ssd-modern-google-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15); }

        .ssd-form-group { margin-bottom: 1.25rem; }
        .ssd-form-group label { display: block; margin-bottom: 0.4rem; font-weight: 500; font-size: 0.9rem; color: #e2e8f0; margin-left: 2px; }
        .ssd-form-group input { width: 100%; padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background-color: rgba(30, 41, 59, 0.7); color: #fff; font-size: 1rem; transition: all 0.3s ease; backdrop-filter: blur(5px); margin-bottom: 0;}
        .ssd-form-group input:focus { border-color: #3b82f6; background-color: rgba(30, 41, 59, 0.9); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15); outline: none; }
        
        .ssd-form-status-error { color: #fca5a5; background-color: rgba(127, 29, 29, 0.3); border: 1px solid rgba(239, 68, 68, 0.5); padding: 0.75rem; border-radius: 8px; margin: 1.5rem 0; text-align: center; font-size: 0.85em; }
        
        .ssd-button-update, .ssd-button-secondary { width: 100%; padding: 0.9rem; border: none; border-radius: 12px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.2s ease; letter-spacing: 0.5px; }
        .ssd-button-update { background: linear-gradient(to right, #2563eb, #3b82f6); color: white; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); margin-top: 0.5rem; }
        .ssd-button-update:hover { background: linear-gradient(to right, #1d4ed8, #2563eb); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4); }
        .ssd-button-secondary { background-color: rgba(255,255,255,0.1); color: white; margin-top: 0.5rem; }
        .ssd-button-secondary:hover { background-color: rgba(255,255,255,0.15); }
        
        .reg-step-buttons { display: flex; gap: 1rem; margin-top: 1.5rem; }
        #reg-step-otp .reg-otp-info { background-color: rgba(31, 41, 55, 0.6); color: #d1d5db; padding: 0.85rem; border-radius: 12px; margin-bottom: 1.25rem; font-size: 0.9rem; text-align: center; border: 1px solid rgba(255,255,255,0.1); }
		
        .reg-login-link { text-align: center; margin-top: 2.5rem; font-size: 0.9rem; color: #64748b; }
        .reg-login-link a { color: #3b82f6; font-weight: 600; text-decoration: none; transition: color 0.2s; margin-left: 5px;}
        .reg-login-link a:hover { color: #60a5fa; text-decoration: underline;}

        /* --- PWA ICONS LOGIN CSS --- */
        .ssd-pwa-login-section {
            margin-top: 1.5rem;
            width: 100%;
            max-width: 480px;
            text-align: center;
        }
        .ssd-pwa-title {
            font-size: 0.7rem;
            color: #94a3b8;
            font-weight: 800;
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* Horizontal 3-column Grid for App Logos */
        .ssd-pwa-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; align-items: center; }
        .ssd-pwa-img-btn { 
            background: transparent !important; 
            border: none !important; 
            padding: 0 !important; 
            cursor: pointer; 
            transition: transform 0.2s ease; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            outline: none; 
            height: 100%; 
            box-shadow: none !important;
        }
        .ssd-pwa-img-btn:hover { transform: scale(1.05); }
        .ssd-pwa-img-btn img { width: 100%; height: auto; max-height: 35px; object-fit: contain; } 

        /* Modal Styles */
        .ssd-ios-pwa-modal {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.8); z-index: 99999;
            display: none; align-items: center; justify-content: center;
        }
        .ssd-ios-pwa-content {
            background: #1e293b; border: 1px solid #334155; padding: 25px;
            border-radius: 16px; width: 90%; max-width: 320px; text-align: center;
            position: relative; color: #f1f5f9; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }
        .ssd-ios-close {
            position: absolute; top: 10px; right: 15px; font-size: 1.5rem; cursor: pointer; color: #94a3b8;
        }
        .ssd-ios-pwa-content h4 { margin-top: 0; color: #fff; font-size: 1.2rem; margin-bottom: 10px; }
        .ssd-ios-instructions { text-align: left; font-size: 0.9rem; color: #cbd5e1; line-height: 1.6; margin-top: 15px; padding-left: 20px; }
        .ssd-ios-instructions li { margin-bottom: 12px; }

        .ssd-login-meta-footer { padding: 1.5rem 1rem 1rem 1rem; text-align: center; font-size: 0.8rem; color: #64748b; margin-top: 1rem; }
        .ssd-login-meta-footer a { color: #64748b; text-decoration: none; }
        .ssd-login-meta-footer a:hover { color: #94a3b8; }
        
        /* --- MOBILE RESPONSIVE --- */
        @media (max-width: 768px) { 
            .reg-pro-promo-column { padding: 1.5rem 0 0 0; }
            .reg-pro-form-column { padding: 0 1.25rem 1.5rem 1.25rem; align-items: center; } 
            
            .ssd-form-header h2 { font-size: 1.4rem; margin-bottom: 0.25rem;} 
            .word-highlighter-loop { font-size: 0.9rem; gap: 10px; margin: 5px 0;}
            
            .ssd-form-group { margin-bottom: 1rem; }
            .ssd-form-group label { font-size: 0.85rem; margin-bottom: 0.3rem; }
            .ssd-form-group input { padding: 0.75rem 0.85rem; font-size: 0.95rem; }
            
            .ssd-button-update, .ssd-button-secondary { padding: 0.8rem; font-size: 0.95rem; } 
            .reg-login-link { font-size: 0.85rem; margin-top: 2rem; }

            /* Marquee Exact Mobile Tabs */
            .ssd-scrolling-benefits-wrapper { gap: 12px; margin-bottom: 5px; } 
            .ssd-m-card { padding: 6px 16px 6px 6px; border-radius: 40px; gap: 10px; }
            .ssd-m-card .m-icon { width: 30px; height: 30px; font-size: 0.8rem; }
            .ssd-m-card .m-text span { font-size: 0.72rem; }
            .ssd-m-card .m-text small { font-size: 0.6rem; }
        }
		
		/* --- Light Mode Logo Logic --- */
        body.light-mode .ssd-logo-dark {
            display: none !important;
        }
        body.light-mode .ssd-logo-light {
            display: block !important;
            filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1)); /* Light mode shadow */
        }
		
		/* --- Light Mode: Loop (Marquee) Styles --- */
        body.light-mode .ssd-m-card {
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        body.light-mode .ssd-m-card .m-text span {
            color: #1e293b; /* Dark text for titles */
        }

        body.light-mode .ssd-m-card .m-text small {
            color: #64748b; /* Gray text for descriptions */
        }

    /* --- GLOBAL --- */
    .ssd-verified-container { max-width: 1100px; margin: 0 auto; padding-bottom: 120px !important; font-family: 'Inter', sans-serif; position: relative; }
    .ssd-clean-header.centered-layout { text-align: center; margin-bottom: 40px; padding-top: 10px; position: relative; }
    
    /* Center Smart Logo */
    .ssd-smart-logo-wrap { text-align: center; margin-bottom: 15px; }
    .ssd-smart-logo-wrap img { max-height: 45px; width: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3)); }

    /* Light Mode Logo Control */
    body.light-mode .ssd-logo-dark { display: none !important; }
    body.light-mode .ssd-logo-light { display: block !important; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1)); }

    .ssd-profile-body { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; margin-top: 0; }
    .ssd-avatar-box { position: relative; display: inline-block; }
    .ssd-avatar-box img { width: 140px; height: 140px; border-radius: 50%; border: 6px solid #1e293b; object-fit: cover; box-shadow: 0 8px 25px rgba(0,0,0,0.4); }
    .ssd-user-info-center { margin-top: 15px; }
    .ssd-user-name { font-size: 2rem; font-weight: 800; color: #fff; margin: 0 0 8px 0; display:flex; justify-content:center; align-items:center; }
    
    .ssd-status-badge { display: inline-block; padding: 6px 18px; border-radius: 30px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
    .active-gold { background: linear-gradient(135deg, #f59e0b, #d97706); color: #000; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); }

    /* --- SCROLLING BENEFITS --- */
    .ssd-scrolling-benefits-wrapper {
        margin-bottom: 35px;
        overflow: hidden;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 15px;
        mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }
    .ssd-marquee { display: flex; overflow: hidden; user-select: none; }
    .ssd-marquee-track {
        display: flex; gap: 15px; width: max-content; animation: ssd-scroll-x 40s linear infinite; padding-right: 15px;
    }
    .ssd-marquee-track.reverse { animation: ssd-scroll-x-reverse 45s linear infinite; }
    @keyframes ssd-scroll-x { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    @keyframes ssd-scroll-x-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
    
    .ssd-m-card {
        background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 50px;
        padding: 8px 20px 8px 8px; display: flex; align-items: center; gap: 12px; white-space: nowrap;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2); backdrop-filter: blur(5px);
    }
    .ssd-m-card .m-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 1rem; flex-shrink: 0; }
    .ssd-m-card .m-text { display: flex; flex-direction: column; text-align: left; }
    .ssd-m-card .m-text span { color: #e2e8f0; font-weight: 700; font-size: 0.9rem; line-height: 1.2; }
    .ssd-m-card .m-text small { color: #94a3b8; font-size: 0.75rem; }

    body.light-mode .ssd-m-card { background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); }
    body.light-mode .ssd-m-card .m-text span { color: #1e293b; }
    body.light-mode .ssd-m-card .m-text small { color: #64748b; }

    .gradient-purple { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
    .gradient-red { background: linear-gradient(135deg, #ef4444, #b91c1c); }
    .gradient-cyan { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
    .gradient-green { background: linear-gradient(135deg, #10b981, #059669); }
    .gradient-orange { background: linear-gradient(135deg, #f97316, #ea580c); }
    .gradient-blue { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
    .gradient-gold { background: linear-gradient(135deg, #fbbf24, #d97706); }
    .gradient-rose { background: linear-gradient(135deg, #e11d48, #be123c); }

    /* --- LAYOUTS --- */
    .ssd-verified-split-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }
    .ssd-active-dashboard { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }

    /* --- ACTIVE CARD (PREMIUM PASS) --- */
    .ssd-premium-pass { background: #1e293b; border-radius: 24px; overflow: hidden; position: relative; border: 1px solid rgba(245, 158, 11, 0.3); box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
    .ssd-premium-pass::before { content:''; position: absolute; top:0; left:0; width:100%; height: 4px; background: linear-gradient(90deg, #f59e0b, #d97706); }
    .pass-header { display: flex; align-items: center; gap: 15px; padding: 25px; background: linear-gradient(to right, rgba(245, 158, 11, 0.1), transparent); }
    .pass-icon { width: 50px; height: 50px; background: #f59e0b; color: #000; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
    .pass-title h3 { margin: 0; font-size: 1.1rem; color: #fff; font-weight: 700; }
    .pass-id { font-size: 0.8rem; color: #94a3b8; font-family: monospace; }
    .pass-badge { margin-left: auto; background: rgba(16, 185, 129, 0.2); color: #34d399; padding: 4px 10px; border-radius: 6px; font-weight: 700; font-size: 0.8rem; border: 1px solid rgba(16, 185, 129, 0.3); }
    .pass-body { padding: 25px; text-align: center; }
    .p-label { display: block; font-size: 0.85rem; color: #64748b; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }
    .p-value { font-size: 1.5rem; color: #fff; font-weight: 700; }
    .pass-divider { height: 1px; background: #334155; margin: 20px 0; }
    
    .ssd-digital-clock { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
    .clock-unit { background: #0f172a; padding: 10px; border-radius: 8px; border: 1px solid #334155; min-width: 60px; }
    .clock-unit span { display: block; font-size: 1.5rem; font-weight: 800; color: #f59e0b; font-family: 'Courier New', monospace; }
    .clock-unit small { font-size: 0.65rem; color: #64748b; text-transform: uppercase; }
    .clock-sep { font-size: 1.5rem; color: #475569; padding-top: 5px; }
    .pass-footer { background: #0f172a; padding: 15px; text-align: center; }
    .ssd-btn-refresh-sm { background: none; border: none; color: #64748b; cursor: pointer; font-size: 1.2rem; transition: 0.3s; }
    .ssd-btn-refresh-sm:hover { color: #f59e0b; transform: rotate(180deg); }
    
    .ssd-btn-buy-more { background: transparent; border: 1px solid #10b981; color: #10b981; padding: 8px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: 0.3s; margin-top: 10px; width: 100%; display: block; }
    .ssd-btn-buy-more:hover { background: rgba(16, 185, 129, 0.1); color: #34d399; }
    .ssd-topup-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 20px; }
    .ssd-topup-card { background: #0f172a; border: 2px solid #334155; border-radius: 12px; padding: 15px 10px; cursor: pointer; text-align: center; transition: 0.3s; position: relative; }
    .ssd-topup-card:hover { border-color: #f59e0b; transform: translateY(-3px); }
    .ssd-topup-card.selected { border-color: #f59e0b; background: rgba(245, 158, 11, 0.1); box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); }
    .ssd-topup-card h4 { margin: 0 0 5px 0; color: #fff; font-size: 0.95rem; }
    .ssd-topup-card .price { color: #f59e0b; font-weight: 700; font-size: 0.9rem; }
    .best-value { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #ef4444; color: #fff; font-size: 0.6rem; font-weight: 800; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }

    /* --- PROMO BANNER & TEXT --- */
    .ssd-promo-banner { background: linear-gradient(135deg, #ef4444, #b91c1c); border-radius: 12px; margin-bottom: 25px; padding: 15px; text-align: center; color: #fff; box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4); animation: pulsePromo 2s infinite; }
    .promo-header { font-size: 1.1rem; font-weight: 800; letter-spacing: 1px; margin-bottom: 5px; }
    .ssd-flash-sale-content p { font-size: 0.9rem; margin: 0 0 10px 0; color: #fecaca; }
    
    .promo-countdown-wrapper { margin-top: 10px; background: rgba(0,0,0,0.15); padding: 8px; border-radius: 8px; }
    .ssd-promo-timer { display: flex; justify-content: center; gap: 8px; font-weight: bold; font-family: monospace; }
    .t-box { background: rgba(0,0,0,0.3); padding: 4px 10px; border-radius: 6px; }
    .t-box span { font-size: 1.2rem; }
    .t-box small { font-size: 0.6rem; margin-left: 2px; }
    
    .old-price-strike { text-decoration: line-through; color: #ef4444; font-size: 1rem; font-weight: bold; margin-bottom: -5px; }
    @keyframes pulsePromo { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }

    .ssd-spots-info-text { text-align: center; margin-top: 15px; font-size: 0.85rem; color: #ef4444; background: rgba(239, 68, 68, 0.1); border: 1px dashed rgba(239, 68, 68, 0.3); padding: 8px; border-radius: 8px; }

    /* --- BENEFITS LIST --- */
    .ssd-section-header { margin-bottom: 20px; }
    .ssd-section-header h3 { font-size: 1.2rem; color: #fff; margin: 0 0 5px 0; font-weight: 700; }
    .ssd-section-header p { font-size: 0.9rem; color: #94a3b8; margin: 0; }
    .ssd-new-benefits-list { display: flex; flex-direction: column; gap: 12px; }
    .ssd-benefit-item { background: rgba(30, 41, 59, 0.5); border: 1px solid #334155; border-radius: 12px; padding: 15px; display: flex; align-items: center; gap: 15px; cursor: pointer !important; pointer-events: auto !important; transition: all 0.3s ease; position: relative; }
    .ssd-benefit-item:hover { background: rgba(30, 41, 59, 0.9); border-color: #6366f1; transform: translateX(5px); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
    .ben-icon { width: 45px; height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
    .ben-text h4 { margin: 0; color: #e2e8f0; font-size: 1rem; font-weight: 600; margin-bottom: 2px; }
    .ben-text p { margin: 0; color: #94a3b8; font-size: 0.8rem; }
    .ben-arrow { margin-left: auto; color: #475569; transition: 0.2s; }
    .ssd-benefit-item:hover .ben-arrow { color: #fff; transform: translateX(3px); }

    /* --- SUBSCRIPTION / PAYMENT GRID --- */
    .ssd-subscription-card { background: #1e293b; border: 1px solid #334155; border-radius: 16px; padding: 30px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
    .ssd-subscription-card::before { content:''; position: absolute; top:0; left:0; width: 100%; height: 4px; background: linear-gradient(90deg, #3b82f6, #f59e0b); }
    .ssd-plan-toggle-container { display: flex; justify-content: center; margin-bottom: 25px; }
    .ssd-toggle-wrapper { position: relative; width: 280px; height: 50px; background: #0f172a; border: 1px solid #334155; border-radius: 50px; overflow: hidden; cursor: pointer; box-shadow: inset 0 2px 5px rgba(0,0,0,0.3); }
    .ssd-toggle-checkbox { display: none; }
    .ssd-toggle-label { display: flex; width: 100%; height: 100%; position: relative; z-index: 2; cursor: pointer; }
    .toggle-option { flex: 1; display: flex; justify-content: center; align-items: center; font-size: 0.9rem; font-weight: 600; color: #94a3b8; transition: color 0.4s ease; z-index: 2; }
    .toggle-slider { position: absolute; top: 4px; left: 4px; width: 50%; height: calc(100% - 8px); background: linear-gradient(135deg, #3b82f6, #2563eb); border-radius: 40px; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); z-index: 1; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4); }
    .ssd-toggle-checkbox:checked + .ssd-toggle-label .toggle-slider { transform: translateX(96%); }
    .ssd-toggle-checkbox:not(:checked) + .ssd-toggle-label .option-monthly { color: #fff; }
    .ssd-toggle-checkbox:checked + .ssd-toggle-label .option-yearly { color: #fff; }
    .badge-discount { font-size: 0.65rem; background: #f59e0b; color: #000; padding: 2px 6px; border-radius: 10px; margin-left: 5px; font-weight: 700; }
    .ssd-price-display span { font-size: 2.5rem; font-weight: 800; color: #fff; }
    .ssd-price-display small { font-size: 0.9rem; color: #94a3b8; }
    .ssd-payment-grid { margin: 20px 0; display: flex; flex-direction: column; gap: 8px; }
    .ssd-pay-method { background: #0f172a; border: 2px solid #334155; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: 0.2s; position: relative; opacity: 0.7; }
    .ssd-pay-method.selected { border-color: #3b82f6; background: rgba(59, 130, 246, 0.1); opacity: 1; }
    .ssd-btn-subscribe { width: 100%; padding: 14px; background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border: none; border-radius: 12px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4); }
    .ssd-btn-subscribe.disabled-btn { background: #334155 !important; color: #64748b !important; cursor: not-allowed !important; box-shadow: none !important; border: 1px solid #475569; }

    /* --- MODALS --- */
    .ssd-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 9999; display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
    
    .anim-icon-glow { font-size: 3.5rem; color: #fbbf24; margin-bottom: 15px; filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.5)); animation: pulseIcon 2s infinite; }
    @keyframes pulseIcon { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } }
    .text-white-glow { color: #ffffff !important; font-size: 1.6rem; font-weight: 800; margin-bottom: 5px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); text-align:center; }
    .ssd-popup-sub { color: #94a3b8 !important; font-size: 0.95rem; margin-bottom: 30px; text-align: center; }
    .full-width { width: 100%; }
    .ssd-modal-footer { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

    /* PROFESSIONAL CATEGORY MODAL */
    .pro-glass-box { background: rgba(15, 23, 42, 0.95) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8) !important; padding: 40px !important; border-radius: 24px !important; position: relative; max-width: 550px !important; }
    .absolute-close { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.05); border: none; color: #94a3b8; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; }
    .absolute-close:hover { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
    
    .cat-text-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; }
    
    .pro-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin-bottom: 30px; }
    .pro-grid .ssd-cat-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 25px 10px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
    .pro-grid .ssd-cat-card:hover { border-color: rgba(59, 130, 246, 0.5); transform: translateY(-5px); background: rgba(255, 255, 255, 0.05); }
    .pro-grid .ssd-cat-card.selected { background: linear-gradient(145deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.05)); border-color: #3b82f6; box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2); transform: translateY(-5px); }
    .pro-grid .cat-icon { font-size: 2.2rem; color: #64748b; margin-bottom: 15px; transition: 0.3s; }
    .pro-grid .ssd-cat-card h4 { margin: 0 0 5px 0; font-size: 1.05rem; font-weight: 700; color: #cbd5e1; transition: 0.3s; }
    .pro-grid .ssd-cat-card small { color: #64748b; font-size: 0.75rem; line-height: 1.2; display: block; }
    .pro-grid .ssd-cat-card.selected .cat-icon { color: #60a5fa; transform: scale(1.1); filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.5)); }
    .pro-grid .ssd-cat-card.selected h4 { color: #ffffff; }
    .pro-grid .ssd-cat-card.selected small { color: #94a3b8; }
    .pro-grid .cat-check { position: absolute; top: 12px; right: 12px; font-size: 1.1rem; color: rgba(255,255,255,0.1); transition: 0.3s; }
    .pro-grid .ssd-cat-card.selected .cat-check { color: #3b82f6; }

    /* CHECKOUT POPUP */
    .modern-checkout-popup { background: #1e293b; width: 100%; max-width: 420px; border-radius: 24px; padding: 0; position: relative; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 25px 60px rgba(0,0,0,0.6); overflow: hidden; animation: popUp 0.3s; }
    .ssd-popup-header-row { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.05); }
    .ssd-close-btn-icon { background: none; border: none; color: #64748b; font-size: 1.2rem; cursor: pointer; transition: 0.3s; }
    .ssd-close-btn-icon:hover { color: #ef4444; transform: rotate(90deg); }
    .ssd-checkout-body { padding: 30px 25px; text-align: center; }
    .ssd-checkout-body h3 { font-size: 1.6rem; color: #fff; margin: 0 0 5px; font-weight: 700; letter-spacing: -0.5px; }
    .ssd-checkout-body .sub-text { color: #94a3b8; font-size: 0.9rem; margin-bottom: 25px; }
    .ssd-checkout-card { background: #0f172a; border: 1px solid #334155; border-radius: 16px; padding: 20px; margin-bottom: 20px; }
    .checkout-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 0.95rem; }
    .c-label { color: #64748b; }
    .c-value { color: #e2e8f0; font-weight: 600; }
    .c-value.plan-name { color: #3b82f6; }
    .ssd-divider-dashed { border-top: 1px dashed #334155; margin: 15px 0; }
    .checkout-row.total-row { margin-bottom: 0; align-items: center; }
    .total-row .c-value { font-size: 1.4rem; color: #f59e0b; font-weight: 800; text-shadow: 0 2px 10px rgba(245, 158, 11, 0.2); }
    .ssd-modal-actions-modern { display: grid; grid-template-columns: 1fr 1.5fr; gap: 15px; margin-top: 25px; }
    .ssd-btn-cancel-ghost { background: transparent; border: 1px solid #334155; color: #94a3b8; border-radius: 12px; font-weight: 600; cursor: pointer; transition: 0.3s; }
    .ssd-btn-cancel-ghost:hover { background: #334155; color: #fff; }
    .ssd-btn-confirm-glow { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border: none; border-radius: 12px; font-weight: 700; padding: 14px; cursor: pointer; box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4); transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .ssd-btn-confirm-glow:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(37, 99, 235, 0.6); }

    /* SUCCESS MODAL */
    .success-box-modern { background: #0f172a; padding: 40px 30px; border-radius: 24px; text-align: center; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 0 50px rgba(0,0,0,0.8); max-width: 400px; width: 90%; animation: popUp 0.4s; }
    #confetti-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
    .success-icon-wrapper { position: relative; width: 80px; height: 80px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; z-index: 2; }
    .success-circle-anim { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #10b981; animation: ripple 1.5s infinite; }
    .success-icon-wrapper i { font-size: 2.5rem; color: #10b981; background: #0f172a; position: relative; z-index: 2; }
    @keyframes ripple { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
    .text-gradient-gold { background: linear-gradient(135deg, #fbbf24, #d97706); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 2rem; font-weight: 800; margin: 0 0 10px; position: relative; z-index: 2; }
    .success-sub { color: #94a3b8; margin-bottom: 25px; font-size: 1rem; position: relative; z-index: 2; }
    .success-details-mini { background: rgba(16, 185, 129, 0.1); color: #34d399; padding: 8px 15px; border-radius: 20px; display: inline-block; font-size: 0.85rem; font-weight: 600; margin-bottom: 30px; border: 1px solid rgba(16, 185, 129, 0.2); position: relative; z-index: 2; }
    .ssd-btn-done-modern { background: #10b981; color: #fff; border: none; padding: 14px 30px; border-radius: 12px; font-weight: 700; cursor: pointer; font-size: 1rem; width: 100%; transition: 0.3s; position: relative; z-index: 2; box-shadow: 0 5px 20px rgba(16, 185, 129, 0.3); }
    .ssd-btn-done-modern:hover { background: #059669; transform: translateY(-2px); }
    @keyframes popUp { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

    /* FULLSCREEN MODAL STYLES */
    .ssd-fullscreen-modal {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(15, 23, 42, 1);
        z-index: 10000; display: none; align-items: flex-start; justify-content: center;
        padding: 0;
    }
    .ssd-fs-content {
        background: #1e293b; width: 100%; max-width: 100%; height: 100vh;
        border-radius: 0; border: none; 
        position: relative; overflow-y: auto; 
        animation: popUpModal 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .ssd-close-fs-modal {
        position: absolute; top: 20px; right: 20px;
        background: rgba(255,255,255,0.1); color: #fff;
        border: none; width: 40px; height: 40px; border-radius: 50%;
        font-size: 1.2rem; cursor: pointer; transition: 0.3s; z-index: 10;
    }
    .ssd-close-fs-modal:hover { background: #ef4444; transform: rotate(90deg); }
    .fs-header { padding: 40px 30px; text-align: center; color: white; border-radius: 24px 24px 0 0; }
    .fs-header i { font-size: 4rem; margin-bottom: 15px; }
    .fs-header h2 { margin: 0; font-size: 2rem; font-weight: 800; }
    .fs-body { padding: 40px 30px; color: #cbd5e1; }
    .fs-body h3 { color: #fff; font-size: 1.3rem; margin-bottom: 15px; }
    .fs-feature-list { list-style: none; padding: 0; margin-top: 20px; }
    .fs-feature-list li { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
    .fs-feature-list li i { color: #10b981; font-size: 1.2rem; }

    @keyframes popUpModal {
        from { opacity: 0; transform: scale(0.9) translateY(20px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
    }
    .ssd-fs-content::-webkit-scrollbar { width: 8px; }
    .ssd-fs-content::-webkit-scrollbar-track { background: transparent; }
    .ssd-fs-content::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }

    /* --- MOBILE OPTIMIZATIONS --- */
    @media (max-width: 768px) {
        .ssd-verified-split-layout { grid-template-columns: 1fr; gap: 24px; }
        .ssd-profile-body { margin-top: 0; }
        .ssd-avatar-box img { width: 112px; height: 112px; border-width: 5px; } 
        .ssd-status-badge { font-size: 0.68rem; padding: 5px 14px; margin-top: 10px !important; }
        
        .ssd-scrolling-benefits-wrapper { gap: 12px; margin-bottom: 28px; }
        .ssd-m-card { padding: 6px 16px 6px 6px; border-radius: 40px; gap: 10px; }
        .ssd-m-card .m-icon { width: 30px; height: 30px; font-size: 0.8rem; }
        .ssd-m-card .m-text span { font-size: 0.72rem; }
        .ssd-m-card .m-text small { font-size: 0.6rem; }

        .ssd-premium-pass { margin: 0; border-radius: 19px; }
        .pass-header { padding: 20px; gap: 12px; }
        .pass-icon { width: 40px; height: 40px; font-size: 1.2rem; }
        .pass-title h3 { font-size: 0.88rem; }
        .pass-badge { font-size: 0.64rem; padding: 3px 8px; }
        .pass-body { padding: 20px; }
        .p-label { font-size: 0.68rem; }
        .p-value { font-size: 1.2rem; }
        .ssd-digital-clock { gap: 8px; }
        .clock-unit { min-width: 48px; padding: 8px; }
        .clock-unit span { font-size: 1.2rem; }
        .clock-unit small { font-size: 0.52rem; }
        
        .ssd-promo-banner { padding: 12px; border-radius: 10px; }
        .promo-header { font-size: 0.96rem; }
        .ssd-flash-sale-content p { font-size: 0.8rem; margin-bottom: 8px; }
        
        .promo-countdown-wrapper { padding: 6px; margin-top: 8px; }
        .t-box { padding: 3px 8px; border-radius: 5px; }
        .t-box span { font-size: 1.05rem; }
        
        .ssd-spots-info-text { font-size: 0.8rem; padding: 6px; margin-top: 12px; }
        
        .ssd-section-header h3 { font-size: 1.05rem; }
        .ssd-section-header p { font-size: 0.8rem; }
        .ssd-subscription-card { padding: 24px 20px; border-radius: 13px; }
        .ssd-toggle-wrapper { width: 224px; height: 40px; }
        .toggle-option { font-size: 0.8rem; }
        .badge-discount { font-size: 0.58rem; padding: 2px 5px; }
        .ssd-price-display span { font-size: 2.2rem; }
        .ssd-price-display small { font-size: 0.8rem; }
        .old-price-strike { font-size: 0.88rem; }
        .ssd-pay-method { padding: 10px; gap: 10px; border-radius: 10px; }
        .method-icon { font-size: 0.88rem; }
        .method-info .m-title { font-size: 0.88rem; }
        .method-info .m-bal { font-size: 0.8rem; }
        .ssd-btn-subscribe { padding: 11px; font-size: 0.88rem; border-radius: 10px; }
        
        .ssd-benefit-item { padding: 12px; gap: 12px; border-radius: 10px; }
        .ben-icon { width: 36px; height: 36px; font-size: 1.05rem; border-radius: 8px; }
        .ben-text h4 { font-size: 0.88rem; }
        .ben-text p { font-size: 0.7rem; }
        
        .modern-checkout-popup, .success-box-modern { width: 90% !important; max-width: 320px !important; padding: 20px !important; border-radius: 16px !important; }
        .pro-glass-box { padding: 30px 20px !important; border-radius: 20px !important; }
        .absolute-close { top: 15px; right: 15px; width: 30px; height: 30px; font-size: 0.9rem; }
        
        .ssd-category-logo-wrap img { max-height: 38px !important; }

        .ssd-checkout-body h3, .text-white-glow, .text-gradient-gold { font-size: 1.25rem !important; }
        .ssd-checkout-body .sub-text, .ssd-popup-sub, .success-sub { font-size: 0.72rem !important; margin-bottom: 15px !important; }
        .checkout-row { font-size: 0.76rem !important; margin-bottom: 8px !important; }
        .total-row .c-value { font-size: 1.12rem !important; }
        .ssd-btn-confirm-glow, .ssd-btn-done-modern { padding: 11px !important; font-size: 0.8rem !important; border-radius: 10px !important; }
        
        .pro-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; }
        .pro-grid .ssd-cat-card { padding: 15px 12px; flex-direction: row; justify-content: flex-start; text-align: left; align-items: center; }
        .pro-grid .cat-icon { font-size: 1.8rem; margin-bottom: 0; margin-right: 15px; }
        
        .cat-text-wrap { align-items: flex-start; }
        .pro-grid .ssd-cat-card h4 { font-size: 1.05rem; margin-bottom: 2px; }
        .pro-grid .ssd-cat-card small { font-size: 0.83rem; }
        
        .pro-grid .cat-check { top: 50%; transform: translateY(-50%); right: 15px; }
        
        .ssd-topup-grid { gap: 8px; margin-top: 16px; }
        .ssd-topup-card { padding: 12px 8px; border-radius: 10px; }
        .ssd-topup-card h4 { font-size: 0.84rem; }
        .ssd-topup-card .price { font-size: 0.8rem; }
        .best-value { font-size: 0.48rem; padding: 2px 6px; top: -8px; }
    }
	
    @media (min-width: 992px) {
        .ssd-sidebar-logo-dark,
        .ssd-sidebar-logo-light { height: 30px !important; }
        .ssd-sidebar-verified-tick { transform: scale(0.8); display: inline-flex; }
    }

/* CSS STYLES */
    .camp-main-wrapper { padding: 20px 0 50px 0; font-family: 'Inter', sans-serif; }
    
    /* Date Slider */
    .camp-date-slider-wrapper { width: 100%; overflow: hidden; position: relative; margin-bottom: 20px; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); }
    .camp-date-slider { display: flex; align-items: center; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 10px 0; }
    .camp-date-slider::-webkit-scrollbar { display: none; }
    .camp-date-card { min-width: 95px; height: 105px; background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; scroll-snap-align: center; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, background 0.3s, border-color 0.3s; cursor: pointer; flex-shrink: 0; transform: scale(0.7); opacity: 0.3; }
    .camp-date-card.adj-1 { transform: scale(0.85); opacity: 0.6; }
    .camp-date-card.focused { transform: scale(1.05); opacity: 1; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border-color: #3b82f6; z-index: 10; }
    .camp-date-month { font-size: 0.7rem; font-weight: 800; color: var(--ssd-text-muted); letter-spacing: 0.5px; }
    .camp-date-num { font-size: 1.8rem; font-weight: 800; color: var(--ssd-text); margin: 2px 0 6px 0; line-height: 1;}
    .camp-date-lbl { font-size: 0.58rem; font-weight: 600; color: #3b82f6; background: rgba(59, 130, 246, 0.1); padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
    .camp-date-card.focused .camp-date-month, .camp-date-card.focused .camp-date-num { color: #ffffff; }
    .camp-date-card.focused .camp-date-lbl { background: rgba(255,255,255,0.2); color: #ffffff; }

    /* Drawer / Side-Panel CSS (For All Modals) */
    .camp-drawer-overlay, .custom-app-drawer {
        position: fixed; inset: 0; background: rgba(15, 23, 42, 0.7); z-index: 99999;
        opacity: 0; visibility: hidden; transition: opacity 0.3s ease;
        display: flex; justify-content: flex-end; align-items: flex-end; backdrop-filter: blur(4px);
    }
    .camp-drawer-overlay.active, .custom-app-drawer.active { opacity: 1; visibility: visible; }
    
    .camp-drawer-content {
        background: var(--ssd-bg, #0f172a); width: 100%; height: 85vh;
        border-radius: 24px 24px 0 0; padding: 0;
        transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        display: flex; flex-direction: column; box-shadow: none;
    }
    .camp-drawer-overlay.active .camp-drawer-content, .custom-app-drawer.active .camp-drawer-content { transform: translateY(0); }
    
    .camp-drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid var(--ssd-border, #1e293b); }
    .camp-drawer-header h3 { margin: 0; color: var(--ssd-text, #fff); font-size: 1.1rem; line-height: 1.4; display: flex; align-items: center; gap: 10px; font-weight: 700;}
    .camp-drawer-close, .btn-close-app-drawer { background: #1e293b; border: none; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #94a3b8; cursor: pointer; transition: 0.2s; }
    .camp-drawer-close:hover, .btn-close-app-drawer:hover { background: #ef4444; color: #fff; }
    .camp-drawer-body { padding: 25px; flex: 1; overflow-y: auto; color: var(--ssd-text-muted, #fff); font-size: 0.95rem; line-height: 1.6; }

    /* ============================================================
       80% BOTTOM SHEET STYLES FOR ENROLL MODAL 
       ============================================================ */
    #camp-payment-modal { 
        justify-content: center; 
        align-items: flex-end; 
        padding: 0; 
    }
    #camp-payment-modal .payment-drawer-content { 
        height: 80vh !important; 
        max-height: 80vh !important; 
        width: 100%; 
        max-width: 650px; 
        border-radius: 24px 24px 0 0 !important; 
        margin: 0 auto 0 auto !important; 
        transform: translateY(100%) !important; 
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
        background: #0f172a; 
        border: 1px solid rgba(255,255,255,0.05); 
        box-shadow: 0 -10px 50px rgba(0,0,0,0.6); 
    }
    #camp-payment-modal.active .payment-drawer-content { 
        transform: translateY(0) !important; 
    }

    /* Modern Payment Grid */
    .ssd-payment-grid-modern { display: flex; flex-direction: column; gap: 12px; }
    .ssd-pay-method-mod { background: rgba(30, 41, 59, 0.4); border: 1px solid #1e293b; border-radius: 16px; padding: 15px; display: flex; align-items: center; gap: 15px; cursor: pointer; transition: all 0.3s ease; position: relative; }
    .ssd-pay-method-mod:hover { border-color: #475569; background: rgba(30, 41, 59, 0.8); }
    .ssd-pay-method-mod.selected { border-color: #3b82f6; background: rgba(59, 130, 246, 0.1); box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15); }
    .ssd-pay-method-mod .method-icon { width: 45px; height: 45px; border-radius: 12px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #94a3b8; }
    .ssd-pay-method-mod.selected .method-icon { background: #3b82f6; color: #fff; }
    .ssd-pay-method-mod .method-info { display: flex; flex-direction: column; flex: 1; }
    .ssd-pay-method-mod .m-title { font-size: 0.9rem; font-weight: 700; color: #cbd5e1; margin-bottom: 2px; }
    .ssd-pay-method-mod .m-price { font-size: 1.2rem; font-weight: 800; color: #fff; line-height: 1.1; }
    .ssd-pay-method-mod small { font-size: 0.75rem; font-weight: 600; margin-top: 4px; }
    .ssd-pay-method-mod .method-check { font-size: 1.3rem; color: #334155; transition: 0.3s; }
    .ssd-pay-method-mod.selected .method-check { color: #3b82f6; }

    /* General Glow Button */
    .ssd-btn-confirm-glow { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border: none; border-radius: 14px; font-weight: 700; padding: 15px; cursor: pointer; box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3); transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.05rem; }
    .ssd-btn-confirm-glow:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(37, 99, 235, 0.5); }
    .ssd-btn-confirm-glow:disabled { background: #1e293b; box-shadow: none; color: #64748b; cursor: not-allowed; border: 1px solid #334155; }

    /* PROFESSIONAL DARK MODERN BOXES (FLAT) */
    .camp-stat-box { 
        background: #1e293b; 
        border: 1px solid #334155; 
        border-radius: 12px; 
        padding: 15px; 
        display: flex; 
        flex-direction: column;
        align-items: stretch; 
        gap: 12px; 
        box-shadow: none;
        position: relative;
        cursor: default;
    }
    .camp-stat-info { display: flex; flex-direction: column; }
    .camp-stat-title { font-size: 0.75rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; }
    .camp-stat-val { font-size: 1.2rem; font-weight: 800; color: #f8fafc; }
    
    .camp-stats-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 35px; }
    .camp-stat-box-small { 
        background: #1e293b; 
        border: 1px solid #334155; 
        border-radius: 12px; 
        padding: 15px 5px; 
        text-align: center; 
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        box-shadow: none;
    }
    .c-small-val { font-size: 1.1rem; font-weight: 800; color: #f8fafc; margin-bottom: 4px; }
    .c-small-lbl { font-size: 0.65rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; }

    /* Clickable Stat Boxes */
    .camp-clickable-box { cursor: pointer; transition: 0.2s; position: relative; }
    .camp-clickable-box:hover { border-color: #3b82f6; transform: none; background: rgba(30, 41, 59, 0.9); }
    .camp-clickable-box::after { content: '\f345'; font-family: 'dashicons'; position: absolute; right: 5px; top: 5px; font-size: 14px; color: #475569; opacity: 0.5; }

    /* The Main Today Task Dark Box */
    .camp-modern-dark-box {
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 12px;
        padding: 25px 20px;
        text-align: center;
        box-shadow: none;
    }
    .camp-modern-dark-box .t-val { font-size: 3.5rem; font-weight: 900; color: #f8fafc; line-height: 1; }
    .camp-modern-dark-box .t-lbl { font-size: 1.5rem; color: #94a3b8; }

    /* Subjects Row */
    .al-subjects-row { display: flex; gap: 8px; flex-wrap: nowrap; background: transparent; padding: 0; border: none; overflow-x: auto; scrollbar-width: none; }
    .al-subjects-row::-webkit-scrollbar { display: none; }
    .al-sub-tag { font-size:0.75rem; background:rgba(59, 130, 246, 0.05); color:#cbd5e1; padding:6px 10px; border-radius:8px; font-weight:600; display:flex; align-items:center; gap:6px; border: 1px solid rgba(59,130,246,0.2); white-space: nowrap; flex-shrink: 0; }
    .al-sub-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
    .al-sub-badge { background:#3b82f6; color:#fff; padding:2px 6px; border-radius:4px; font-weight:800; font-size:0.7rem; line-height:1; }

    /* Tabs */
    .ssd-badges-tab-nav { display: flex; background: #0f172a; padding: 6px; border-radius: 100px; max-width: 550px; margin: 0 auto 25px auto; border: 1px solid #334155; position: relative; }
    .ssd-b-tab { flex: 1; background: transparent; border: none; color: #94a3b8; padding: 12px 15px; font-size: 0.9rem; font-weight: 600; border-radius: 100px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; z-index: 2; }
    .ssd-b-tab:hover { color: #cbd5e1; }
    .ssd-b-tab.active { background: #1e293b; color: #3b82f6; box-shadow: none; border: 1px solid #334155; }
    .ssd-b-tab i { font-size: 1rem; }
    .ssd-badge-tab-content { display: none; opacity: 0; transform: translateY(15px); transition: all 0.4s ease; }
    .ssd-badge-tab-content.active { display: block; opacity: 1; transform: translateY(0); }
    .camp-content-inner { background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); border-radius: 16px; padding: 30px; text-align: center; color: var(--ssd-text-muted); min-height: 200px; }
    .camp-content-inner h3 { color: var(--ssd-text); margin-top: 0; }
    
    /* Pricing & Benefits */
    .camp-pricing-box { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border: 1px solid #334155; border-radius: 20px; padding: 40px; max-width: 400px; margin: 0 auto 40px auto; box-shadow: none; text-align: center; }
    .camp-pricing-box h3 { color: #cbd5e1; margin-top: 0; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; }
    .camp-price { font-size: 3rem; font-weight: 900; color: #fff; margin: 15px 0 25px 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .camp-price span { font-size: 1rem; color: #94a3b8; }
    .camp-btn-primary { background: var(--ssd-accent); color: #fff; border: none; padding: 14px 24px; border-radius: 12px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: 0.3s; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: none; width: 100%; display: inline-block; }
    .camp-btn-primary:hover { background: #1d4ed8; }
    .camp-btn-secondary { background: var(--ssd-box-bg); color: var(--ssd-text); border: 1px solid var(--ssd-border); padding: 12px 24px; border-radius: 12px; cursor: pointer; font-weight: 600; text-decoration: none; display: inline-block;}
    .camp-benefits-list-wrap { max-width: 600px; margin: 0 auto; text-align: left; }
    .camp-benefits-heading { text-align: center; color: var(--ssd-text); font-size: 1.4rem; font-weight: 800; margin-bottom: 25px; text-transform: uppercase; letter-spacing: -0.5px; }
    .camp-benefit-modern-item { background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); border-radius: 16px; padding: 15px 20px; display: flex; align-items: center; gap: 15px; margin-bottom: 12px; transition: 0.3s; box-shadow: none; cursor: pointer; }
    .camp-benefit-modern-item:hover { border-color: var(--ssd-accent); }
    .camp-benefit-modern-item i { font-size: 1.5rem; color: #10b981; background: rgba(16, 185, 129, 0.1); padding: 12px; border-radius: 12px; }
    .camp-ben-text { display: flex; flex-direction: column; gap: 4px; }
    .camp-ben-text strong { color: var(--ssd-text); font-size: 0.85rem; }
    
    .camp-desc-formatted strong { color: #3b82f6; font-weight: 700; }

    @media (min-width: 768px) {
        .camp-drawer-overlay:not(#camp-payment-modal), .custom-app-drawer:not(#camp-payment-modal) { align-items: stretch; }
        .camp-drawer-content:not(.payment-drawer-content) { width: 450px; height: 100vh; border-radius: 0; transform: translateX(100%); }
        .camp-drawer-overlay.active .camp-drawer-content:not(.payment-drawer-content), .custom-app-drawer.active .camp-drawer-content:not(.payment-drawer-content) { transform: translateX(0); }
    }

    /* Nested Tabs Design */
    .camp-subject-tabs { display: flex; overflow-x: auto; background: var(--ssd-box-bg, #0f172a); border-bottom: 1px solid var(--ssd-border, #1e293b); padding: 0 15px; scrollbar-width: none; }
    .camp-subject-tabs::-webkit-scrollbar { display: none; }
    .c-sub-tab { flex: 1; min-width: max-content; background: none; border: none; padding: 15px 20px; color: var(--ssd-text-muted, #64748b); font-weight: 700; font-size: 0.9rem; cursor: pointer; border-bottom: 3px solid transparent; transition: 0.2s; }
    .c-sub-tab.active { color: var(--ssd-accent, #3b82f6); border-bottom-color: var(--ssd-accent, #3b82f6); }

    .camp-subject-contents-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #0f172a; }
    .c-sub-content { display: none; flex: 1; flex-direction: column; overflow: hidden; }
    .c-sub-content.active { display: flex; animation: fadeIn 0.3s; }

    .camp-paper-type-tabs { display: flex; overflow-x: auto; padding: 15px; gap: 10px; background: rgba(0,0,0,0.2); scrollbar-width: none; }
    .camp-paper-type-tabs::-webkit-scrollbar { display: none; }
    .p-type-tab { background: var(--ssd-box-bg, #1e293b); color: var(--ssd-text-muted, #94a3b8); border: 1px solid var(--ssd-border, #334155); padding: 8px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: 0.2s; }
    .p-type-tab.active { background: var(--ssd-accent, #3b82f6); color: #fff; border-color: var(--ssd-accent, #3b82f6); }

    .p-type-content { display: none; padding: 20px; flex: 1; overflow-y: auto; }
    .p-type-content.active { display: block; animation: fadeIn 0.3s; }

    /* Extra UI Elements */
    .camp-history-list { display: flex; flex-direction: column; gap: 15px; }
    .history-item { display: flex; align-items: center; gap: 15px; background: var(--ssd-box-bg, #1e293b); padding: 12px 15px; border-radius: 12px; border: 1px solid var(--ssd-border, #334155); }
    .h-date { font-size: 0.8rem; color: #fff; width: 50px; line-height: 1.2; }
    .h-date span { color: #94a3b8; font-size: 0.7rem; }
    .h-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.05); border-radius: 10px; overflow: hidden; border: 1px solid #334155; }
    .h-fill { height: 100%; border-radius: 10px; }
    .h-val { font-size: 0.9rem; font-weight: 800; color: #fff; }

    .camp-grade-rules { display: flex; flex-direction: column; gap: 10px; }
    .grade-rule-item { display: flex; align-items: center; gap: 15px; background: var(--ssd-box-bg, #1e293b); padding: 12px 15px; border-radius: 12px; border: 1px solid var(--ssd-border, #334155); }
    .g-badge { color: #fff; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; border-radius: 10px; flex-shrink: 0;}
    .g-desc { font-size: 0.85rem; color: #94a3b8; line-height: 1.4; }
    
    @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
	
	/* ============================================================
       PROFESSIONAL TAG DROPDOWN STYLES (100% VERTICAL STACK FIX)
       ============================================================ */
    .ssd-pro-dropdown-wrapper { position: relative; width: 100%; text-align: left; }
    
    .ssd-pro-dropdown-header { 
        background: rgba(30, 41, 59, 0.5); 
        border: 1px solid #334155; 
        border-radius: 14px; 
        padding: 12px 15px; 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        cursor: pointer; 
        min-height: 55px; 
        height: auto !important; 
        transition: border-color 0.3s, background 0.3s; 
    }
    
    .ssd-pro-dropdown-header:hover, .ssd-pro-dropdown-header.active { 
        border-color: #3b82f6; 
        background: rgba(30, 41, 59, 0.8); 
    }
    
    .ssd-placeholder { color: #64748b; font-size: 0.95rem; font-weight: 500; }
    
    .camp-subject-selected-tag { 
        background: linear-gradient(135deg, #3b82f6, #2563eb); 
        color: #fff; 
        padding: 10px 14px; 
        border-radius: 10px; 
        font-size: 0.85rem; 
        font-weight: 600; 
        display: flex; 
        align-items: center; 
        justify-content: space-between; 
        gap: 10px; 
        width: 100%; 
        box-sizing: border-box;
        animation: tagIn 0.3s ease; 
        box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
        position: relative !important; 
    }
    
    .tag-text {
        white-space: normal; 
        word-break: break-word;
        line-height: 1.3;
        text-align: left;
    }

    @keyframes tagIn { from { transform: translateY(-5px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    
    .camp-subject-selected-tag i.remove-tag { 
        cursor: pointer; 
        background: rgba(0,0,0,0.15); 
        border-radius: 50%; 
        font-size: 0.75rem; 
        transition: 0.2s; 
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
    }
    .camp-subject-selected-tag i.remove-tag:hover { background: rgba(0,0,0,0.4); }
    
    .drop-icon { color: #94a3b8; transition: 0.3s; font-size: 0.9rem; flex-shrink: 0; margin-left: 5px; }
    .ssd-pro-dropdown-header.active .drop-icon { transform: rotate(180deg); color: #3b82f6; }
    
    .ssd-pro-dropdown-list { 
        position: absolute; 
        top: calc(100% + 8px); 
        left: 0; 
        width: 100%; 
        background: #1e293b; 
        border: 1px solid #334155; 
        border-radius: 14px; 
        max-height: 220px; 
        overflow-y: auto; 
        z-index: 100; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
        display: none; 
        padding: 8px;
    }
    
    .ssd-pro-dropdown-list::-webkit-scrollbar { width: 5px; }
    .ssd-pro-dropdown-list::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; }
    
    .ssd-drop-item { 
        padding: 12px 15px; 
        color: #cbd5e1; 
        font-size: 0.9rem; 
        font-weight: 500; 
        border-radius: 10px; 
        cursor: pointer; 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        transition: 0.2s; 
        margin-bottom: 4px; 
    }
    
    .ssd-drop-item:hover { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
    .ssd-drop-item.selected { 
        background: rgba(59, 130, 246, 0.15); 
        color: #fff; 
        font-weight: 700; 
        pointer-events: none; 
    }
    .ssd-drop-item.selected .check-icon { display: block !important; color: #3b82f6; }

    /* Light mode fixes for new modern grid */
    body.light-mode .ssd-pro-dropdown-header { background: #ffffff; border-color: #e2e8f0; }
    body.light-mode .ssd-pro-dropdown-list { background: #ffffff; border-color: #e2e8f0; }
    body.light-mode .ssd-drop-item { color: #475569; }
    body.light-mode .ssd-drop-item:hover { background: #f1f5f9; }
    body.light-mode .ssd-placeholder { color: #94a3b8; }

    /* --- New Top Bar Styles --- */
    .camp-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 0 5px; }
    .camp-date-badge-small { background: rgba(59, 130, 246, 0.1); color: #3b82f6; padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; border: 1px solid rgba(59, 130, 246, 0.3); display: flex; align-items: center; gap: 6px; }
    .camp-top-social { display: flex; gap: 8px; }
    .f-soc-icon-small { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; text-decoration: none; transition: transform 0.3s; }
    .f-soc-icon-small:hover { transform: scale(1.1); color:#fff; }
    .f-soc-icon-small.whatsapp { background: #25D366; }
    .f-soc-icon-small.telegram { background: #0088cc; }

    /* --- Today's Task Styles --- */
    .today-task-header-wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .today-task-title { margin: 0; font-size: 1.3rem; color: var(--ssd-text); }
    .today-task-date-tag { background: rgba(59,130,246,0.1); color: #3b82f6; padding: 5px 12px; border-radius: 8px; font-weight: 700; font-size: 0.85rem; }
    .deficit-warning-text { margin:0; font-size:0.85rem; color:#b45309; font-weight:600; line-height:1.5; }
    .initial-exam-drawer-desc { color:var(--ssd-text-muted); margin-bottom:20px; line-height: 1.5; font-size: 0.9rem; text-align: left; }

    /* Initial Exam Card - Modern & Responsive Fix */
    .camp-init-exam-card { background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); border-radius: 16px; padding: 15px 20px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
    .init-exam-info { flex: 1; min-width: 0; }
    .init-exam-title { margin: 0; color: var(--ssd-text); font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 10px; white-space: normal; line-height: 1.4; }
    .exam-icon { color: #3b82f6; background: rgba(59, 130, 246, 0.1); padding: 8px; border-radius: 8px; flex-shrink: 0; }
    .btn-init-exam.start-btn { padding: 10px 20px; border-radius: 10px; flex-shrink: 0; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); width: auto; }
    .btn-init-exam.done-btn { opacity: 0.6; cursor: not-allowed; border: none; background: rgba(16, 185, 129, 0.1); color: #10b981; padding: 10px 15px; border-radius: 10px; flex-shrink: 0; font-weight: 700; width: auto; }

    /* MOBILE RESPONSIVE UPDATES */
    @media (max-width: 767px) {
        .camp-date-card { min-width: 85px; height: 95px; } 
        .camp-stats-grid-4 { gap: 6px; }
        .camp-stat-box-small { padding: 10px 2px; }
        .c-small-val { font-size: 0.95rem; }
        .c-small-lbl { font-size: 0.55rem; }
        
        .ssd-badges-tab-nav { max-width: 100%; margin: 0 0 25px 0; padding: 4px; }
        .ssd-b-tab { font-size: 0.7rem; padding: 10px 5px; }
        .ssd-b-tab i { font-size: 0.85rem; }
        
        #camp-payment-modal .payment-drawer-content { height: 85vh !important; max-height: 85vh !important; }
        
        .al-sub-tag { padding: 4px 6px; font-size: 0.65rem; gap: 4px; }
        .al-sub-name { max-width: 70px; }
        .al-sub-badge { font-size: 0.65rem; padding: 2px 4px; }
        .camp-modern-dark-box { padding: 15px; }
        .camp-modern-dark-box .t-val { font-size: 2.5rem; }
        .camp-modern-dark-box .t-lbl { font-size: 1rem; }

        .camp-date-badge-small { font-size: 0.65rem; padding: 4px 10px; }
        .f-soc-icon-small { width: 28px; height: 28px; font-size: 0.85rem; }
        
        .today-task-header-wrap { flex-direction: row; align-items: center; gap: 10px; }
        .today-task-title { font-size: 0.95rem; }
        .today-task-date-tag { font-size: 0.7rem; padding: 3px 8px; }
        .deficit-warning-text { font-size: 0.75rem; }
        
        .initial-exam-drawer-desc { font-size: 0.8rem; margin-bottom: 15px; }

        .camp-init-exam-card { flex-direction: column; align-items: flex-start; padding: 15px; gap: 12px; }
        .init-exam-info { width: 100%; }
        .btn-init-exam.start-btn, .btn-init-exam.done-btn { width: 100%; display: flex; justify-content: center; align-items: center; }
    }
    
    /* LIGHT MODE STYLES */
    body.light-mode .ssd-badges-tab-nav { background: #f1f5f9; border-color: #e2e8f0; }
    body.light-mode .ssd-b-tab { color: #64748b; }
    body.light-mode .ssd-b-tab:hover { color: #1e293b; }
    body.light-mode .ssd-b-tab.active { background: #ffffff; color: #3b82f6; border-color: #e2e8f0; }
    body.light-mode .camp-drawer-close, body.light-mode .btn-close-app-drawer { background: #e2e8f0; color: #64748b; }
    body.light-mode .camp-drawer-close:hover, body.light-mode .btn-close-app-drawer:hover { background: #ef4444; color: #ffffff; }
    body.light-mode .camp-stat-box, body.light-mode .camp-stat-box-small, body.light-mode .camp-modern-dark-box { background: #ffffff; border: 1px solid #e2e8f0; }
    body.light-mode .camp-stat-val, body.light-mode .c-small-val, body.light-mode .camp-modern-dark-box .t-val { color: #0f172a; }
    body.light-mode .camp-stat-title, body.light-mode .c-small-lbl { color: #64748b; }
    body.light-mode .custom-app-drawer .camp-drawer-content { background: #f8fafc; }
    body.light-mode .camp-drawer-header h3 { color: #0f172a; }
    body.light-mode .camp-drawer-header { border-bottom: 1px solid #e2e8f0; background: #ffffff; }
    body.light-mode .camp-subject-tabs { background: #ffffff; border-color: #e2e8f0; }
    body.light-mode .camp-subject-contents-wrap { background: #f8fafc; }
    body.light-mode .p-type-tab { background: #ffffff; border-color: #cbd5e1; color: #475569; }
    body.light-mode .p-type-tab.active { background: #3b82f6; color: #ffffff; border-color: #3b82f6; }
    body.light-mode .history-item, body.light-mode .grade-rule-item { background: #ffffff; border-color: #e2e8f0; }
    body.light-mode .h-date { color: #0f172a; }
    body.light-mode .h-val { color: #0f172a; }
    body.light-mode .g-desc { color: #475569; }
    body.light-mode .camp-date-card { background: #ffffff; border-color: #e2e8f0; }
    body.light-mode .camp-date-num { color: #0f172a; }
    body.light-mode .camp-date-card.focused { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border-color: #3b82f6; }
    body.light-mode .camp-date-card.focused .camp-date-num { color: #ffffff; }
    body.light-mode .camp-benefit-modern-item { background: #ffffff; border-color: #e2e8f0; }
    body.light-mode .camp-benefit-modern-item:hover { border-color: #3b82f6; background: #f8fafc; }
    body.light-mode .camp-ben-text strong { color: #0f172a; }
    body.light-mode .camp-pricing-box { background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%); border: 1px solid #e2e8f0; }
    body.light-mode .camp-pricing-box h3 { color: #475569; }
    body.light-mode .camp-price { color: #0f172a; }
    
    body.light-mode .ssd-pro-dropdown-header { background: #ffffff; border-color: #e2e8f0; }
    body.light-mode .ssd-pro-dropdown-list { background: #ffffff; border-color: #e2e8f0; }
    body.light-mode .ssd-drop-item { color: #475569; }
    body.light-mode .ssd-drop-item:hover { background: #f1f5f9; }
    body.light-mode .ssd-placeholder { color: #94a3b8; }
    body.light-mode .ssd-pay-method-mod { background: #ffffff; border-color: #e2e8f0; }
    body.light-mode .ssd-pay-method-mod .m-title, body.light-mode .ssd-pay-method-mod .m-price { color: #0f172a; }
    body.light-mode .camp-init-exam-card { background: #ffffff !important; border-color: #e2e8f0 !important; }
    body.light-mode .camp-init-exam-card .init-exam-title { color: #0f172a !important; }