:root {
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --dark: #0f172a;
    --card: #1e293b;
    --border: #334155;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
}

body {
    background-color: var(--dark);
    color: var(--text-main);
    font-family: 'Cairo', sans-serif;
    margin: 0;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
}

*, *::before, *::after {
    box-sizing: border-box;
}

img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Typography */
h1, h2, h3, h4 { margin: 0; }
a { text-decoration: none; color: inherit; }

/* NAV */
.ldg-nav {
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.ldg-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

.ldg-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.ldg-logo-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    background: linear-gradient(to top right, #2563eb, #9333ea);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.25rem;
}

.ldg-logo-text { font-weight: bold; font-size: 1.5rem; letter-spacing: -0.5px; color: white; }
.ldg-logo-text span { color: var(--primary); }

.ldg-menu { display: none; }
@media(min-width: 768px) {
    .ldg-menu { display: flex; gap: 10px; margin-right: 40px; margin-left: auto; }
}

.ldg-nav-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s;
    color: var(--text-main);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
}
.ldg-nav-btn:hover { color: var(--primary); background-color: #1e293b; }

.ldg-user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s;
    border: 1px solid transparent;
    text-decoration: none;
}
.ldg-user-profile:hover {
    background-color: #1e293b;
    border-color: var(--border);
}

.ldg-user-info { display: none; text-align: right; line-height:1.2; }
@media(min-width: 768px) { .ldg-user-info { display: block; } }
.ldg-user-name { font-size: 0.875rem; font-weight: bold; color: white; margin-bottom:3px; }
.ldg-user-role { font-size: 0.75rem; color: var(--text-muted); }
.ldg-user-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--primary); object-fit: cover; }

/* Buttons */
.ldg-btn-primary {
    background: var(--primary);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ldg-btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

/* Home Section */
.ldg-home-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    padding: 4rem 0;
}
@media(min-width: 768px) {
    .ldg-home-section { flex-direction: row; }
}

.ldg-home-content { flex: 1; }
.ldg-home-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 50px;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.5);
    color: #60a5fa;
    font-size: 0.875rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.ldg-home-title {
    font-size: 3rem;
    font-weight: 800;
    color: white;
    line-height: 1.2;
    margin-bottom: 1rem;
}
@media(min-width: 768px) { .ldg-home-title { font-size: 3.75rem; } }
.ldg-home-title span {
    background: linear-gradient(to right, #60a5fa, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ldg-home-desc {
    font-size: 1.125rem;
    color: var(--text-muted);
    max-width: 36rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.ldg-home-visual { flex: 1; width: 100%; position: relative; }
.ldg-home-blur {
    position: absolute; inset: 0;
    background: linear-gradient(to right, #3b82f6, #9333ea);
    border-radius: 1rem;
    filter: blur(40px);
    opacity: 0.2;
}

.ldg-code-card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.5rem;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.ldg-mac-buttons {
    display: flex; gap: 8px; margin-bottom: 1rem;
    border-bottom: 1px solid var(--border); padding-bottom: 1rem;
}
.ldg-mac-btn { width: 12px; height: 12px; border-radius: 50%; }
.ldg-mac-red { background: #ef4444; }
.ldg-mac-yellow { background: #eab308; }
.ldg-mac-green { background: #22c55e; }

.ldg-code-text {
    font-size: 0.875rem; font-family: monospace;
    color: #34d399; text-align: left; direction: ltr; margin: 0;
    overflow: hidden;
}

/* Course Archive / Grid */
.ldg-courses-header {
    margin-bottom: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.ldg-courses-title { font-size: 2rem; font-weight: bold; color: white; margin-bottom: 0.5rem; }
.ldg-courses-desc { color: var(--text-muted); margin: 0; }
.ldg-courses-filter { display: none; gap: 10px; }
@media(min-width: 768px) { .ldg-courses-filter { display: flex; } }
.ldg-filter-btn {
    padding: 8px 16px; border-radius: 8px; font-size: 0.875rem; font-weight: bold;
    background: #1e293b; color: #cbd5e1; border: none; cursor: pointer; transition: 0.2s;
}
.ldg-filter-btn.active { background: var(--primary); color: white; }
.ldg-filter-btn:hover:not(.active) { background: #334155; }

.ldg-grid {
    display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 4rem;
}
@media(min-width: 768px) { .ldg-grid { grid-template-columns: repeat(2, 1fr); } }
@media(min-width: 1024px) { .ldg-grid { grid-template-columns: repeat(3, 1fr); } }

.ldg-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}
.ldg-card:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
}
.ldg-card-header {
    height: 12rem;
    background: #1e293b;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ldg-card-header img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s;
}
.ldg-card:hover .ldg-card-header img { transform: scale(1.05); }

.ldg-card-icon { font-size: 4rem; transition: transform 0.5s; }
.ldg-card:hover .ldg-card-icon { transform: scale(1.1); }

.ldg-card-tag {
    position: absolute; top: 1rem; right: 1rem;
    background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(4px);
    border: 1px solid var(--border);
    border-radius: 50px; font-size: 0.75rem; font-weight: bold; padding: 4px 12px;
}
.ldg-tag-blue { color: #60a5fa; }
.ldg-tag-purple { color: #a855f7; }

.ldg-card-body { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.ldg-card-meta {
    display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 12px;
}
.ldg-card-title { font-size: 1.25rem; font-weight: bold; color: white; margin-bottom: 8px; }
.ldg-card-desc { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ldg-card-action {
    width: 100%; margin-top: auto; background: #1e293b; border: 1px solid var(--border); color: white;
    padding: 12px; border-radius: 0.75rem; font-weight: bold; text-align: center; cursor: pointer; transition: 0.2s;
}
.ldg-card:hover .ldg-card-action { background: var(--primary); border-color: var(--primary); }

/* Course View (Single Course & Profile Layouts) */
.ldg-split { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 4rem; }
@media(min-width: 1024px) { .ldg-split { grid-template-columns: 2fr 1fr; } }
@media(min-width: 1200px) { .ldg-split { grid-template-columns: 3fr 1fr; } }

.ldg-lesson-row {
    padding: 12px 16px; display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.5); cursor: pointer; transition: 0.2s;
}
.ldg-lesson-row:hover:not(.ldg-lesson-active) { background: rgba(30, 41, 59, 0.5); }
.ldg-lesson-active { background: rgba(59, 130, 246, 0.1); border-right: 4px solid var(--primary); color: white !important; }

/* Profile Specific */
.ldg-profile-card { text-align: center; padding: 2rem; }
.ldg-avatar-wrap { position: relative; display: inline-block; margin-bottom: 1rem; }
.ldg-avatar-large { width: 112px; height: 112px; border-radius: 50%; border: 4px solid var(--primary); object-fit: cover; }
.ldg-avatar-edit {
    position: absolute; bottom: 0; left: 0; background: #334155; color: white;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 2px solid var(--card); cursor: pointer; transition: 0.2s;
}
.ldg-avatar-edit:hover { background: var(--primary); }

/* WooCommerce Dark Mode Overrides (Checkout, Auth, Account) */
.woocommerce, .woocommerce-page {
    color: var(--text-main);
}
.woocommerce form, .woocommerce-page form,
.woocommerce table, .woocommerce-page table {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px;
    padding: 20px;
    color: var(--text-main);
}
.woocommerce legend, .woocommerce-page legend,
.woocommerce h1, .woocommerce-page h1,
.woocommerce h2, .woocommerce-page h2,
.woocommerce h3, .woocommerce-page h3 {
    color: white !important;
}
.woocommerce input[type="text"], .woocommerce input[type="password"],
.woocommerce input[type="email"], .woocommerce textarea {
    background: var(--dark) !important;
    border: 1px solid var(--border) !important;
    color: white !important;
    padding: 12px;
    border-radius: 8px;
    width: 100%;
}
.woocommerce-button, .woocommerce-Button {
    background: var(--primary) !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    border: none !important;
    font-weight: bold !important;
    transition: 0.2s !important;
}
.woocommerce-info, .woocommerce-message, .woocommerce-error {
    background: var(--card) !important;
    border-top-color: var(--primary) !important;
    color: white !important;
}