/* DLA Academy Frontend Styles */

/* CRITICAL: Hide sticky bars immediately to prevent flash */
.dla-mc-sticky-bar,
.dla-speaker-sticky-bar,
.dla-price-sticky {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}
.dla-mc-sticky-bar.visible,
.dla-speaker-sticky-bar.visible,
.dla-price-sticky.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
}

/* Variables */
:root {
    --dla-primary: #2e7d32;
    --dla-primary-dark: #1b5e20;
    --dla-secondary: #1565c0;
    --dla-text: #333;
    --dla-text-light: #666;
    --dla-border: #e0e0e0;
    --dla-bg: #f5f5f5;
    --dla-white: #fff;
    --dla-radius: 0px;
    --dla-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Grid */
.dla-courses-grid {
    display: grid;
    gap: 30px;
    margin: 30px 0;
}

.dla-columns-2 { grid-template-columns: repeat(2, 1fr); }
.dla-columns-3 { grid-template-columns: repeat(3, 1fr); }
.dla-columns-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 992px) {
    .dla-columns-3, .dla-columns-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .dla-courses-grid { grid-template-columns: 1fr; }
}

/* Course Card */
.dla-course-card {
    background: var(--dla-white);
    border-radius: var(--dla-radius);
    overflow: visible;
    box-shadow: var(--dla-shadow);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
}

.dla-course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.dla-course-thumb {
    display: block;
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.dla-course-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
    border-radius: var(--dla-radius) var(--dla-radius) 0 0;
}

.dla-course-card:hover .dla-course-thumb img {
    transform: scale(1.05);
}

.dla-course-thumb {
    border-radius: var(--dla-radius) var(--dla-radius) 0 0;
    overflow: hidden;
}

.dla-course-content {
    padding: 20px;
}

.dla-course-title {
    margin: 0 0 10px 0;
    font-size: 18px;
    line-height: 1.3;
}

.dla-course-title a {
    color: var(--dla-text);
    text-decoration: none;
}

.dla-course-title a:hover {
    color: var(--dla-primary);
}

.dla-course-speakers {
    margin-bottom: 10px;
}

.dla-speaker-name {
    font-size: 14px;
    color: var(--dla-text-light);
}

.dla-course-excerpt {
    color: var(--dla-text-light);
    font-size: 14px;
    margin-bottom: 15px;
}

.dla-course-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid var(--dla-border);
}

.dla-course-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dla-price-old {
    text-decoration: line-through;
    color: #999;
    font-size: 14px;
}

.dla-price-current {
    font-size: 20px;
    font-weight: 700;
    color: var(--dla-primary);
}

.dla-price-free {
    font-size: 18px;
    font-weight: 700;
    color: var(--dla-primary);
    background: #e8f5e9;
    padding: 4px 12px;
    border-radius: 0;
}

/* Buttons */
.dla-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.3s;
}

.dla-btn-primary {
    background: var(--dla-primary);
    color: white;
}

.dla-btn-primary:hover {
    background: var(--dla-primary-dark);
    color: white;
}

.dla-btn-outline {
    background: transparent;
    border: 2px solid var(--dla-primary);
    color: var(--dla-primary);
}

.dla-btn-outline:hover {
    background: var(--dla-primary);
    color: white;
}

.dla-btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* Single Course */
.dla-single-course {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 0;
}

@media (max-width: 576px) {
    .dla-single-course {
        padding: 12px 12px 0;
    }
}

.dla-course-banner {
    height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: var(--dla-radius);
    overflow: hidden;
    margin-bottom: 30px;
}

.dla-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    color: white;
}

.dla-banner-overlay h1 {
    margin: 0 0 15px 0;
    font-size: 36px;
}

.dla-banner-overlay .dla-speaker-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.2);
    padding: 8px 16px;
    border-radius: 0;
    margin-right: 10px;
}

.dla-banner-overlay .dla-speaker-badge img {
    width: 32px;
    height: 32px;
    border-radius: 0;
    object-fit: cover;
}

/* Simple Header (no banner) */
.dla-course-header-simple {
    padding: 30px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--dla-border);
}

.dla-course-header-simple h1 {
    margin: 0 0 15px 0;
    font-size: 32px;
    color: var(--dla-text);
}

.dla-course-speakers-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dla-speaker-badge-small {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--dla-bg);
    padding: 6px 12px;
    border-radius: 0;
    font-size: 14px;
    color: var(--dla-text);
}

.dla-speaker-badge-small img {
    width: 24px;
    height: 24px;
    border-radius: 0;
    object-fit: cover;
}

/* Course Layout */
.dla-course-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
    align-items: start; /* Sidebar aliniat sus */
}

/* Layout fără sidebar - conținut centrat */
.dla-course-layout.dla-no-sidebar {
    grid-template-columns: 1fr;
    max-width: 1000px;
    margin: 0 auto;
}

.dla-course-layout.dla-no-sidebar .dla-course-main {
    max-width: 100%;
}

.dla-course-layout.dla-no-sidebar .dla-video-container {
    max-width: 100%;
}

.dla-course-layout.dla-no-sidebar .dla-playlist-player {
    max-width: 100%;
}

/* Sidebar sticky */
.dla-course-sidebar {
    position: sticky;
    top: 100px; /* Account for header + admin bar */
    z-index: 10;
}

/* Admin bar offset */
.admin-bar .dla-course-sidebar {
    top: 132px;
}

/* Fix pentru cardurile din sidebar */
.dla-course-sidebar .dla-card,
.dla-course-sidebar .dla-card-minimal,
.dla-course-sidebar .dla-card-bold,
.dla-course-sidebar .dla-card-soft,
.dla-course-sidebar .dla-card-glass,
.dla-course-sidebar .dla-card-clean,
.dla-course-sidebar > div:first-child {
    max-width: 100%;
}

/* Force square corners on all sidebar elements */
.dla-course-sidebar,
.dla-course-sidebar *,
.dla-speakers-card,
.dla-speakers-card * {
    border-radius: 0 !important;
}

@media (max-width: 992px) {
    .dla-course-layout {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }
    
    .dla-course-sidebar {
        position: static;
        order: 10; /* Sidebar after content on mobile */
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
    
    .dla-course-main {
        order: 1;
    }
    
    .dla-course-description {
        padding: 0 4px;
    }
    
    .dla-course-description h2 {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .dla-course-layout {
        padding: 0;
        gap: 24px;
    }
    
    .dla-course-sidebar {
        max-width: 100%;
        padding: 0 8px;
    }
}

/* Video */
.dla-video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background: #000;
    border-radius: var(--dla-radius);
    overflow: hidden;
}

.dla-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dla-video-locked {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 80px 40px;
    text-align: center;
    border-radius: var(--dla-radius);
    color: white;
    position: relative;
    overflow: visible;
}

.dla-lock-icon {
    font-size: 60px;
    margin-bottom: 20px;
}

.dla-video-locked h3 {
    margin: 0 0 10px 0;
}

.dla-video-locked p {
    opacity: 0.8;
    margin-bottom: 30px;
}

.dla-lock-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* Playlist */
.dla-playlist-player {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dla-playlist-list {
    background: var(--dla-white);
    border-radius: var(--dla-radius);
    padding: 20px;
    box-shadow: var(--dla-shadow);
}

.dla-playlist-list h4 {
    margin: 0 0 15px 0;
}

.dla-playlist-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s;
}

.dla-playlist-item:hover {
    background: var(--dla-bg);
}

.dla-playlist-item.active {
    background: #e8f5e9;
}

.dla-item-number {
    width: 30px;
    height: 30px;
    background: var(--dla-border);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.dla-playlist-item.active .dla-item-number {
    background: var(--dla-primary);
    color: white;
}

.dla-item-title {
    flex: 1;
}

/* Description */
.dla-course-description {
    margin-top: 40px;
}

.dla-course-description h2 {
    margin: 0 0 20px 0;
}

.dla-lead {
    font-size: 18px;
    color: var(--dla-text-light);
    margin-bottom: 20px;
}

/* Quiz Section */
.dla-quiz-section {
    margin-top: 40px;
    padding: 30px;
    background: var(--dla-bg);
    border-radius: var(--dla-radius);
    text-align: center;
}

/* Speakers Card */
.dla-speakers-card {
    background: var(--dla-white);
    border-radius: 0 !important;
    padding: 25px;
    box-shadow: var(--dla-shadow);
    margin-top: 25px;
}

.dla-speakers-card h4 {
    margin: 0 0 20px 0;
}

.dla-speaker-info {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-top: 1px solid var(--dla-border);
}

.dla-speaker-info:first-of-type {
    border-top: none;
    padding-top: 0;
}

.dla-speaker-avatar {
    width: 60px;
    height: 60px;
    border-radius: 0;
    object-fit: cover;
}

.dla-speaker-info p {
    margin: 5px 0 0 0;
    font-size: 13px;
    color: var(--dla-text-light);
}

/* ============ Sticky Bottom Price Bar ============ */
.dla-price-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -2px 20px rgba(0,0,0,0.1);
    z-index: 999;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.dla-price-sticky.visible {
    transform: translateY(0);
    opacity: 1;
}
.dla-price-sticky-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.dla-price-sticky-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1;
}
.dla-price-sticky-title {
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dla-price-sticky-price {
    font-weight: 800;
    font-size: 18px;
    color: #1e293b;
    white-space: nowrap;
}
.dla-price-sticky-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.dla-price-sticky-btn {
    display: inline-block;
    padding: 12px 28px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff !important;
    border: none;
    border-radius: 0;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 3px 12px rgba(59,130,246,0.3);
}
.dla-price-sticky-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(59,130,246,0.4);
    color: #fff;
}
.dla-price-sticky-sub {
    font-size: 13px;
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}
.dla-price-sticky-sub:hover {
    text-decoration: underline;
}
@media (max-width: 600px) {
    .dla-price-sticky-inner {
        padding: 10px 16px;
    }
    .dla-price-sticky-title {
        display: none;
    }
    .dla-price-sticky-price {
        font-size: 16px;
    }
    .dla-price-sticky-btn {
        padding: 10px 22px;
        font-size: 13px;
    }
    /* Make room for floating language button on the right */
    .dla-price-sticky.visible {
        padding-right: 70px;
    }
    .dla-price-sticky-right {
        flex-direction: row-reverse;
    }
}

/* No courses */
.dla-no-courses {
    text-align: center;
    padding: 60px;
    color: var(--dla-text-light);
    grid-column: 1 / -1;
}

/* Preview Video - Clean Design */
.dla-preview-wrapper {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--dla-shadow);
}

.dla-preview-wrapper .dla-video-container {
    position: relative;
    border-radius: 0;
    overflow: hidden;
}

.dla-preview-cta-bar {
    background: #fff;
    border-top: 1px solid #e2e8f0;
    padding: 25px 30px;
    text-align: center;
    color: #1e293b;
}

.dla-preview-cta-bar p {
    margin: 0 0 20px 0;
    font-size: 15px;
    color: #475569;
}

.dla-preview-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.dla-btn-dark {
    background: #fff;
    color: #1a1a2e;
    border: 2px solid #1a365d;
    box-shadow: none !important;
}

.dla-btn-dark:hover {
    background: #f0f4f8;
    color: #1a1a2e;
    box-shadow: none !important;
}

.dla-preview-buttons .dla-btn-primary {
    background: #fff;
    color: #7fbb41;
    border: 1px solid #7fbb41;
    box-shadow: none !important;
}

.dla-preview-buttons .dla-btn-primary:hover {
    background: #7fbb41;
    color: #fff;
    box-shadow: none !important;
}

/* Ribbon Badge - Left side, sticking out */
.dla-ribbon {
    position: absolute;
    top: 15px;
    left: -8px;
    z-index: 20;
    background: #7fbb41;
    color: #fff;
    padding: 10px 15px 10px 20px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.25);
}

.dla-ribbon::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    border-style: solid;
    border-width: 8px 8px 0 0;
    border-color: #5a8c2a transparent transparent transparent;
}

/* Ribbon for course cards */
.dla-ribbon-small {
    top: 10px;
    left: -6px;
    padding: 8px 12px 8px 14px;
    font-size: 10px;
}

.dla-ribbon-small::before {
    bottom: -6px;
    border-width: 6px 6px 0 0;
}

/* ============================================
   AUTH MODAL
   ============================================ */

/* Auth Modal Only - scoped to avoid overriding courses modal */
#dla-auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dla-auth-modal .dla-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

#dla-auth-modal .dla-modal-container {
    position: relative;
    background: #fff;
    border-radius: 0;
    padding: 40px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

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

#dla-auth-modal .dla-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #999;
    line-height: 1;
}

#dla-auth-modal .dla-modal-close:hover {
    color: #333;
}

body.dla-modal-open {
    overflow: hidden;
}

/* ── Override Bootstrap Offcanvas body lock ──────────────────────────────
   Bootstrap sets position:fixed on body when offcanvas navbar is 'show'.
   On mobile this permanently locks all inputs. We force-revert it unless
   our own modal is open. The :not selector excludes our modal state.      */
body:not(.dla-modal-open) {
    position: static !important;
    top: auto !important;
    overflow: auto !important;
    padding-right: 0 !important;
}
/* Allow Bootstrap to work inside actual Bootstrap modals (not ours) */
body.modal-open:not(.dla-modal-open) {
    overflow: hidden !important;
    position: static !important;
}

/* On mobile: make modal scrollable internally if content is tall */
@media (max-width: 600px) {
    #dla-auth-modal {
        align-items: flex-start;
        padding: 20px 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #dla-auth-modal .dla-modal-container {
        margin: auto;
        max-height: none;
    }
    /* Ensure inputs are tappable on iOS */
    #dla-auth-modal input {
        font-size: 16px !important;
        touch-action: manipulation !important;
        -webkit-user-select: text !important;
        user-select: text !important;
        pointer-events: auto !important;
        cursor: text !important;
    }
}

/* Auth Form */
/* ── Auth Modal — force light theme regardless of site theme ── */
#dla-auth-modal .dla-modal-container,
#dla-auth-modal .dla-modal-container * {
    box-sizing: border-box;
}
#dla-auth-modal .dla-modal-container {
    color: #1e293b !important;
    background: #fff !important;
}
#dla-auth-modal .dla-auth-form h2 { color: #1e293b !important; }
#dla-auth-modal .dla-auth-subtitle { color: #64748b !important; }
#dla-auth-modal .dla-form-group label { color: #334155 !important; font-weight: 600; }
#dla-auth-modal .dla-form-group input,
#dla-auth-modal .dla-form-group select {
    color: #1e293b !important;
    background: #fff !important;
    border-color: #e2e8f0 !important;
}
#dla-auth-modal .dla-form-group input::placeholder { color: #94a3b8 !important; }
#dla-auth-modal .dla-form-hint { color: #94a3b8 !important; }
#dla-auth-modal .dla-auth-switch { color: #64748b !important; }
#dla-auth-modal .dla-auth-switch a { color: var(--dla-primary, #2e7d32) !important; }
#dla-auth-modal .dla-auth-forgot a { color: #94a3b8 !important; }
#dla-auth-modal .dla-modal-close { color: #94a3b8 !important; background: #f1f5f9 !important; border: none; width: 32px; height: 32px; border-radius: 0; display: flex; align-items: center; justify-content: center; }
#dla-auth-modal .dla-modal-close:hover { color: #1e293b !important; background: #e2e8f0 !important; }

.dla-auth-form { display: block; }
.dla-auth-form[style*="display:none"] { display: none !important; }
.dla-auth-form h2 {
    margin: 0 0 5px 0;
    font-size: 24px;
}

.dla-auth-subtitle {
    color: #666;
    margin: 0 0 25px 0;
}

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

.dla-form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #333;
}

.dla-form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 0;
    font-size: 15px;
    transition: border-color 0.2s;
}

.dla-form-group input:focus {
    outline: none;
    border-color: var(--dla-primary);
}

.dla-form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 0;
    font-size: 15px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s;
}

.dla-form-group select:focus {
    outline: none;
    border-color: var(--dla-primary);
}

/* Phone Input with Prefix */
.dla-phone-input {
    display: flex;
    align-items: stretch;
    border: 1px solid #ddd;
    border-radius: 0;
    overflow: hidden;
    transition: border-color 0.2s;
}

.dla-phone-input:focus-within {
    border-color: var(--dla-primary);
}

.dla-phone-prefix {
    background: #f5f5f5;
    padding: 12px 15px;
    font-weight: 500;
    color: #333;
    border-right: 1px solid #ddd;
    min-width: 60px;
    text-align: center;
    white-space: nowrap;
}

.dla-phone-input input {
    flex: 1;
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 15px;
}

.dla-phone-input input:focus {
    outline: none;
    box-shadow: none;
}

.dla-form-hint {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
    display: block;
}

.dla-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.dla-auth-switch {
    text-align: center;
    margin-top: 20px;
    color: #666;
}

.dla-auth-switch a {
    color: var(--dla-primary);
    font-weight: 500;
}

.dla-auth-message {
    padding: 12px 15px;
    border-radius: 0;
    margin-top: 15px;
    text-align: center;
}

.dla-auth-message.success {
    background: #e8f5e9;
    color: #2e7d32;
}

.dla-auth-message.error {
    background: #ffebee;
    color: #c62828;
}

/* ============================================
   LOADING SPINNER
   ============================================ */

#dla-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

.dla-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #eee;
    border-top-color: var(--dla-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

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

.dla-dashboard {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 20px;
}

.dla-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.dla-user-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.dla-user-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 0;
    object-fit: cover;
}

.dla-user-details h1 {
    margin: 0 0 5px 0;
    font-size: 24px;
}

.dla-user-details p {
    margin: 0;
    color: #666;
}

.dla-user-stats {
    display: flex;
    gap: 30px;
}

.dla-stat {
    text-align: center;
}

.dla-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--dla-primary);
}

.dla-stat-label {
    font-size: 13px;
    color: #666;
}

/* Subscription Card */
.dla-subscription-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px 30px;
    border-radius: 0;
    margin-bottom: 30px;
}

.dla-subscription-active {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border: 1px solid #a5d6a7;
}

.dla-subscription-promo {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
}

.dla-sub-icon {
    width: 50px;
    height: 50px;
    background: var(--dla-primary);
    color: #fff;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.dla-sub-info {
    flex: 1;
}

.dla-sub-info h3 {
    margin: 0 0 5px 0;
}

.dla-sub-info p {
    margin: 0;
    opacity: 0.9;
}

.dla-sub-renew {
    font-size: 13px;
    opacity: 0.8;
}

/* Dashboard Tabs */
.dla-dashboard-tabs {
    display: flex;
    gap: 5px;
    border-bottom: 2px solid #eee;
    margin-bottom: 30px;
}

.dla-tab-btn {
    padding: 12px 25px;
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.dla-tab-btn:hover {
    color: #333;
}

.dla-tab-btn.active {
    color: var(--dla-primary);
}

.dla-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--dla-primary);
}

.dla-tab-content {
    display: none;
}

.dla-tab-content.active {
    display: block;
}

/* My Courses Grid */
.dla-my-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.dla-my-course-card {
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.dla-my-course-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.dla-my-course-thumb {
    display: block;
    position: relative;
}

.dla-my-course-thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.dla-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0,0,0,0.3);
}

.dla-progress-fill {
    height: 100%;
    background: var(--dla-primary);
    transition: width 0.3s;
}

.dla-my-course-info {
    padding: 20px;
}

.dla-my-course-info h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
}

.dla-my-course-info h4 a {
    color: #333;
    text-decoration: none;
}

.dla-my-course-meta {
    margin-bottom: 15px;
}

.dla-completed {
    color: var(--dla-primary);
    font-weight: 500;
    font-size: 13px;
}

.dla-in-progress {
    color: #f57c00;
    font-weight: 500;
    font-size: 13px;
}

.dla-not-started {
    color: #999;
    font-size: 13px;
}

.dla-btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

/* Empty State */
.dla-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #f9f9f9;
    border-radius: 0;
}

.dla-empty-icon {
    font-size: 60px;
    margin-bottom: 15px;
}

.dla-empty-state h3 {
    margin: 0 0 10px 0;
}

.dla-empty-state p {
    color: #666;
    margin-bottom: 20px;
}

/* Certificates List */
.dla-certificates-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dla-certificate-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.dla-cert-icon {
    font-size: 40px;
}

.dla-cert-info {
    flex: 1;
}

.dla-cert-info h4 {
    margin: 0 0 5px 0;
}

.dla-cert-info p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.dla-cert-date {
    font-size: 12px;
    color: #999;
}

/* Account Section */
.dla-account-section {
    background: #fff;
    padding: 30px;
    border-radius: 0;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.dla-account-section h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
}

.dla-account-form .dla-form-group {
    max-width: 400px;
}

/* Login Prompt */
.dla-login-prompt {
    text-align: center;
    padding: 80px 20px;
    max-width: 400px;
    margin: 0 auto;
}

.dla-login-prompt h2 {
    margin: 0 0 10px 0;
}

.dla-login-prompt p {
    color: #666;
    margin-bottom: 25px;
}

.dla-login-prompt .dla-btn {
    margin: 0 5px;
}

/* Masterclass Grid */
.dla-masterclasses-grid {
    display: grid;
    gap: 30px;
    margin: 30px 0;
}

.dla-masterclass-card {
    background: var(--dla-white);
    border-radius: var(--dla-radius);
    overflow: hidden;
    box-shadow: var(--dla-shadow);
    transition: transform 0.3s, box-shadow 0.3s;
}

.dla-masterclass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.dla-mc-thumb {
    display: block;
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.dla-mc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dla-mc-country {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--dla-primary);
    color: white;
    padding: 4px 12px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 500;
}

.dla-mc-content {
    padding: 20px;
}

.dla-mc-content h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
}

.dla-mc-content h3 a {
    color: var(--dla-text);
    text-decoration: none;
}

.dla-mc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 13px;
    color: var(--dla-text-light);
}

.dla-mc-info {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--dla-primary);
}

/* ================================
   SINGLE MASTERCLASS PAGE
   ================================ */

.dla-masterclass-page {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Sticky Bar */
.dla-mc-sticky-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.3s ease;
}

/* Mobile — hide sticky bar completely until visible */
@media (max-width: 992px) {
    .dla-mc-sticky-bar:not(.visible) {
        display: none;
    }
    .dla-mc-sticky-bar.visible {
        top: 0; /* overridden by JS below */
        z-index: 100;
    }
}

.dla-mc-sticky-bar.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Admin bar offset handled by JS */

.dla-mc-sticky-bar.visible {
    transform: translateY(0);
}

.dla-mc-sticky-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.dla-mc-sticky-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.dla-mc-sticky-thumb {
    width: 40px;
    height: 40px;
    border-radius: 0;
    object-fit: cover;
    flex-shrink: 0;
}

.dla-mc-sticky-title {
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dla-mc-sticky-right {
    flex-shrink: 0;
}

.dla-mc-sticky-btn {
    background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
    color: white;
    padding: 12px 28px;
    border: none;
    border-radius: 0;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.3px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
    box-shadow: 0 3px 10px rgba(229,57,53,0.25);
    white-space: nowrap;
}

.dla-mc-sticky-btn:hover {
    background: linear-gradient(135deg, #c62828 0%, #b71c1c 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(229,57,53,0.35);
    color: white;
}

/* Hero Banner - Responsive, fără overlay */
.dla-mc-hero {
    width: 100%;
    line-height: 0;
}

.dla-mc-hero-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center;
    max-height: 70vh;
}

/* Fix for fixed/sticky header overlap on mobile */
@media (max-width: 992px) {
    .dla-masterclass-page {
        padding-top: 0 !important;
    }
}

/* Kill theme padding/margin around masterclass single page (gap between site nav and banner on mobile) */
body.single-dla_masterclass #content,
body.single-dla_masterclass .site-content,
body.single-dla_masterclass .entry-content,
body.single-dla_masterclass main,
body.single-dla_masterclass main.site-main,
body.single-dla_masterclass article,
body.single-dla_masterclass .container-fluid,
body.single-dla_masterclass .vc_row,
body.single-dla_masterclass .vc_col-sm-12,
body.single-dla_masterclass .wpb_wrapper {
    padding: 0 !important;
    margin: 0 !important;
}
body.single-dla_masterclass .dla-mc-hero {
    margin-top: -1px !important; /* eliminates sub-pixel gap between site nav and banner */
}

/* Title Section - Centered */
.dla-mc-title-section {
    background: white;
    padding: 40px 0 30px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.dla-mc-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 50px;
}

.dla-mc-main-title {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 25px;
    line-height: 1.3;
}

.dla-mc-cta-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.dla-mc-cta-btn {
    background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
    color: white;
    padding: 14px 35px;
    border: none;
    border-radius: 0;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(229,57,53,0.3);
}

.dla-mc-cta-btn:hover {
    background: linear-gradient(135deg, #c62828 0%, #b71c1c 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(229,57,53,0.4);
    color: white;
}

.dla-mc-notify-btn {
    width: 46px;
    height: 46px;
    border-radius: 0;
    background: #e8f5e9;
    border: 2px solid #2e7d32;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.3s;
}

.dla-mc-notify-btn:hover {
    background: #c8e6c9;
}

.dla-mc-seats-info {
    margin: 20px 0 0;
    font-size: 14px;
    color: #666;
}

/* Info Cards Section */
.dla-mc-info-section {
    background: #f8f9fa;
    padding: 30px 0;
}

.dla-mc-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.dla-mc-info-card {
    background: white;
    padding: 20px;
    border-radius: 0;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.dla-mc-info-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e293b;
}

.dla-mc-info-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dla-mc-info-label {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.dla-mc-info-sub {
    color: #2e7d32;
    font-size: 13px;
}

.dla-mc-info-value {
    font-size: 20px;
    font-weight: 700;
    color: #e53935;
}

/* Content Section */
.dla-mc-content-section {
    padding: 50px 0;
    background: white;
}

.dla-mc-content-section .dla-mc-container {
    max-width: 900px;
}

.dla-mc-block {
    margin-bottom: 50px;
}

.dla-mc-block-title {
    font-size: 22px;
    color: #7fbb41;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid #7fbb41;
    display: inline-block;
    font-weight: 700;
}

.dla-mc-block-content {
    line-height: 1.9;
    color: #444;
    font-size: 16px;
    text-align: justify;
}

.dla-mc-block-content p {
    margin: 0 0 18px;
}

/* Share Section */
.dla-mc-share {
    background: linear-gradient(135deg, #1e3c5a 0%, #2c5282 100%);
    padding: 30px;
    border-radius: 0;
    text-align: center;
    margin: 40px 0;
}

.dla-mc-share p {
    color: white;
    font-size: 18px;
    margin: 0 0 20px;
}

.dla-mc-share span {
    color: #90cdf4;
}

.dla-mc-share-btns {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.dla-share-fb,
.dla-share-li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
}

.dla-share-fb {
    background: #1877f2;
    color: white;
}

.dla-share-fb:hover {
    background: #0d65d9;
    color: white;
}

.dla-share-li {
    background: #0077b5;
    color: white;
}

.dla-share-li:hover {
    background: #005e94;
    color: white;
}

/* Speakers Section */
.dla-mc-speakers-section {
    text-align: center;
    margin-top: 50px;
}

.dla-mc-speakers-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
}

.dla-mc-speaker-card {
    text-align: center;
}

.dla-mc-speaker-card img {
    width: 140px;
    height: 140px;
    border-radius: 0;
    object-fit: cover;
    border: 5px solid #2e7d32;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.dla-mc-speaker-placeholder {
    width: 140px;
    height: 140px;
    border-radius: 0;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    border: 5px solid #2e7d32;
}

.dla-mc-speaker-card h4 {
    margin: 15px 0 0;
    font-size: 14px;
    color: #333;
}

/* Brochure Modal - scoped */
#dla-brochure-modal.dla-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#dla-brochure-modal .dla-modal-content {
    background: white;
    border-radius: 0;
    padding: 40px;
    max-width: 500px;
    width: 100%;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

#dla-brochure-modal .dla-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #999;
    line-height: 1;
}

#dla-brochure-modal .dla-modal-close:hover {
    color: #333;
}

#dla-brochure-modal .dla-modal-content h2 {
    margin: 0 0 10px 0;
}

#dla-brochure-modal .dla-modal-content > p {
    color: var(--dla-text-light);
    margin-bottom: 25px;
}

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

.dla-brochure-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.dla-brochure-form input,
.dla-brochure-form select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--dla-border);
    border-radius: 0;
    font-size: 15px;
}

.dla-brochure-form .dla-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Responsive */
@media (max-width: 992px) {
    .dla-mc-container {
        padding: 0 40px;
    }
    
    .dla-mc-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dla-info-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .dla-info-grid-4 > div {
        padding: 14px 10px !important;
    }
    
    .dla-mc-sticky-inner {
        padding: 14px 20px;
    }
    
    .dla-mc-sticky-title {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .dla-dashboard-header {
        flex-direction: column;
        text-align: center;
    }
    
    .dla-user-info {
        flex-direction: column;
    }
    
    .dla-subscription-card {
        flex-direction: column;
        text-align: center;
    }
    
    .dla-form-row {
        grid-template-columns: 1fr;
    }
    
    /* Sticky bar mobile */
    .dla-mc-sticky-inner {
        padding: 12px 15px;
        gap: 12px;
    }
    
    .dla-mc-sticky-thumb {
        width: 36px;
        height: 36px;
    }
    
    .dla-mc-sticky-title {
        font-size: 13px;
        max-width: 150px;
    }
    
    .dla-mc-sticky-btn {
        padding: 10px 20px;
        font-size: 13px;
    }
    
    /* Masterclass responsive */
    .dla-mc-container {
        padding: 0 20px;
    }
    
    .dla-mc-hero-img {
        max-height: 50vh;
    }
    
    .dla-mc-title-section {
        padding: 30px 0 25px;
    }
    
    .dla-mc-main-title {
        font-size: 22px;
        margin-bottom: 20px;
    }
    
    .dla-mc-cta-wrapper {
        flex-direction: column;
        width: 100%;
    }
    
    .dla-mc-cta-btn {
        width: 100%;
        justify-content: center;
        max-width: 300px;
    }
    
    .dla-mc-notify-btn {
        display: none;
    }
    
    .dla-mc-info-grid {
        grid-template-columns: 1fr;
    }
    
    .dla-mc-info-card {
        padding: 15px;
    }
    
    .dla-mc-content-section {
        padding: 30px 0;
    }
    
    .dla-mc-block-content {
        text-align: left;
        font-size: 15px;
    }
    
    .dla-mc-share {
        padding: 20px;
    }
    
    .dla-mc-share p {
        font-size: 16px;
    }
    
    .dla-mc-speaker-card img,
    .dla-mc-speaker-placeholder {
        width: 100px;
        height: 100px;
    }
    
    .dla-brochure-form .dla-form-row {
        grid-template-columns: 1fr;
    }
}

/* ================================
   SPEAKER PROFILE PAGE
   ================================ */

.dla-speaker-profile {
    max-width: 100%;
    margin: 0;
    background: #f8f9fa;
    min-height: 100vh;
}

/* Header */
.dla-sp-header {
    background: linear-gradient(135deg, #1e3c5a 0%, #2c5282 100%);
    padding: 60px 0;
}

.dla-sp-header-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.dla-sp-photo-wrapper {
    flex-shrink: 0;
}

.dla-sp-photo {
    width: 180px;
    height: 180px;
    border-radius: 0;
    object-fit: cover;
    border: 5px solid white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.dla-sp-photo-placeholder {
    width: 180px;
    height: 180px;
    border-radius: 0;
    background: rgba(255,255,255,0.1);
    border: 5px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.5);
}

.dla-sp-info {
    color: white;
}

.dla-sp-name {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 10px;
}

.dla-sp-title {
    font-size: 18px;
    opacity: 0.9;
    margin: 0 0 5px;
}

.dla-sp-specialization {
    font-size: 15px;
    opacity: 0.8;
    margin: 0 0 15px;
    color: #90cdf4;
}

.dla-sp-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    opacity: 0.8;
    margin: 0 0 20px;
}

.dla-sp-location svg {
    opacity: 0.7;
}

/* Social Links */
.dla-sp-social {
    display: flex;
    gap: 12px;
}

.dla-sp-social-link {
    width: 42px;
    height: 42px;
    border-radius: 0;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s;
}

.dla-sp-social-link:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-2px);
    color: white;
}

.dla-sp-linkedin:hover {
    background: #0077b5;
}

.dla-sp-facebook:hover {
    background: #1877f2;
}

.dla-sp-instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

/* Content */
.dla-sp-content {
    padding: 50px 0;
}

.dla-sp-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
}

.dla-sp-section {
    background: white;
    border-radius: 0;
    padding: 35px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.dla-sp-section-title {
    font-size: 20px;
    color: #2e7d32;
    margin: 0 0 25px;
    padding-bottom: 12px;
    border-bottom: 3px solid #2e7d32;
    display: inline-block;
}

.dla-sp-bio {
    line-height: 1.9;
    color: #444;
    font-size: 16px;
}

.dla-sp-bio p {
    margin: 0 0 15px;
}

/* Events Grid */
.dla-sp-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.dla-sp-event-card {
    display: flex;
    background: #f8f9fa;
    border-radius: 0;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s;
    border: 1px solid #eee;
}

.dla-sp-event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-color: #2e7d32;
}

.dla-sp-event-card img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    flex-shrink: 0;
}

.dla-sp-event-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.dla-sp-event-info h4 {
    margin: 0 0 8px;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
}

.dla-sp-event-price {
    font-size: 14px;
    font-weight: 600;
    color: #2e7d32;
}

.dla-sp-event-price.dla-sp-free {
    color: #e53935;
}

.dla-sp-event-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: #666;
}

/* Speaker card hover effect */
a.dla-mc-speaker-card {
    text-decoration: none;
    transition: all 0.3s;
}

a.dla-mc-speaker-card:hover {
    transform: translateY(-5px);
}

a.dla-mc-speaker-card:hover img {
    border-color: #e53935;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

a.dla-mc-speaker-card h4 {
    color: #333;
    transition: color 0.3s;
}

a.dla-mc-speaker-card:hover h4 {
    color: #2e7d32;
}

/* Responsive */
@media (max-width: 768px) {
    .dla-sp-header {
        padding: 40px 0;
    }
    
    .dla-sp-header-inner {
        flex-direction: column;
        text-align: center;
        padding: 0 20px;
        gap: 20px;
    }
    
    .dla-sp-photo-wrapper {
        order: 2;
    }
    
    .dla-sp-info {
        order: 1;
    }
    
    .dla-sp-photo,
    .dla-sp-photo-placeholder {
        width: 120px;
        height: 120px;
    }
    
    .dla-sp-name {
        font-size: 22px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .dla-sp-social {
        justify-content: center;
    }
    
    .dla-sp-location {
        justify-content: center;
    }
    
    .dla-sp-container {
        padding: 0 20px;
    }
    
    .dla-sp-section {
        padding: 25px;
    }
    
    .dla-sp-events-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   AUTH PAGES (Login / Register standalone)
   ============================================ */

.dla-auth-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.dla-auth-container {
    background: var(--dla-white);
    border-radius: 0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    padding: 40px;
    width: 100%;
    max-width: 450px;
}

.dla-auth-container h2 {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
}

.dla-auth-container .dla-auth-subtitle {
    margin: 0 0 30px;
    color: var(--dla-text-light);
    text-align: center;
}

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

.dla-auth-form-page label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--dla-text);
}

.dla-auth-form-page input[type="text"],
.dla-auth-form-page input[type="email"],
.dla-auth-form-page input[type="password"],
.dla-auth-form-page input[type="tel"],
.dla-auth-form-page select {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--dla-border);
    border-radius: 0;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.dla-auth-form-page input:focus,
.dla-auth-form-page select:focus {
    outline: none;
    border-color: var(--dla-primary);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
}

.dla-auth-form-page .dla-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.dla-auth-form-page .dla-phone-input {
    display: flex;
    align-items: center;
    border: 2px solid var(--dla-border);
    border-radius: 0;
    overflow: hidden;
}

.dla-auth-form-page .dla-phone-prefix {
    padding: 14px 12px;
    background: var(--dla-bg);
    font-weight: 600;
    color: var(--dla-text-light);
    min-width: 50px;
    text-align: center;
}

.dla-auth-form-page .dla-phone-input input {
    border: none;
    border-radius: 0;
}

.dla-auth-form-page .dla-form-hint {
    display: block;
    font-size: 12px;
    color: var(--dla-text-light);
    margin-top: 4px;
}

.dla-auth-form-page .dla-auth-message {
    padding: 12px 16px;
    border-radius: 0;
    margin-bottom: 15px;
    font-size: 14px;
}

.dla-auth-form-page .dla-auth-message.success {
    background: #e8f5e9;
    color: #2e7d32;
}

.dla-auth-form-page .dla-auth-message.error {
    background: #ffebee;
    color: #c62828;
}

@media (max-width: 480px) {
    .dla-auth-container {
        padding: 30px 25px;
    }
    
    .dla-auth-form-page .dla-form-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   USER MENU (Header Login/Logout)
   ============================================ */

.dla-user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dla-user-menu .dla-menu-btn {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 0;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.dla-user-menu .dla-btn-outline {
    border: 2px solid var(--dla-primary);
    color: var(--dla-primary);
    background: transparent;
}

.dla-user-menu .dla-btn-outline:hover {
    background: var(--dla-primary);
    color: white;
}

.dla-user-menu .dla-btn-primary {
    background: var(--dla-primary);
    color: white;
    border: 2px solid var(--dla-primary);
}

.dla-user-menu .dla-btn-primary:hover {
    background: var(--dla-primary-dark);
    border-color: var(--dla-primary-dark);
}

.dla-user-menu .dla-btn-text {
    color: var(--dla-text-light);
    background: transparent;
    border: none;
}

.dla-user-menu .dla-btn-text:hover {
    color: var(--dla-primary);
}

/* Dropdown style */
.dla-user-dropdown {
    position: relative;
}

.dla-user-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: transparent;
    border: 2px solid var(--dla-border);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s;
}

.dla-user-dropdown-toggle:hover {
    border-color: var(--dla-primary);
}

.dla-user-avatar img {
    width: 28px;
    height: 28px;
    border-radius: 0;
}

.dla-user-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--dla-text);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dla-user-arrow {
    font-size: 10px;
    color: var(--dla-text-light);
    transition: transform 0.2s;
}

.dla-user-dropdown:hover .dla-user-arrow {
    transform: rotate(180deg);
}

.dla-user-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #1a2235;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s;
    z-index: 1000;
    overflow: hidden;
}

.dla-user-dropdown:hover .dla-user-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dla-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.dla-dropdown-header img {
    width: 45px;
    height: 45px;
    border-radius: 0;
}

.dla-dropdown-header div {
    flex: 1;
    min-width: 0;
}

.dla-dropdown-header strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dla-dropdown-header span {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dla-dropdown-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 0;
}

.dla-user-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: background 0.15s;
    font-size: 14px;
}

.dla-user-dropdown-menu a:hover {
    background: rgba(255,255,255,0.07);
    color: #fff;
}

/* Active/current page item */
/* NUCLEAR: ALL links in dropdown — transparent background regardless of theme classes */
.dla-user-dropdown-menu a,
.dla-user-dropdown-menu a:link,
.dla-user-dropdown-menu a:visited,
.dla-user-dropdown-menu li > a,
.dla-user-dropdown-menu li > a:link,
.dla-user-dropdown-menu li > a:visited,
.dla-user-dropdown-menu [class] > a,
.dla-user-dropdown-menu [class] a {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: rgba(255,255,255,0.85) !important;
    box-shadow: none !important;
}

.dla-user-dropdown-menu a:hover,
.dla-user-dropdown-menu li > a:hover,
.dla-user-dropdown-menu [class] > a:hover {
    background: rgba(255,255,255,0.07) !important;
    background-color: rgba(255,255,255,0.07) !important;
    color: #fff !important;
}

.dla-user-dropdown-menu a.dla-dd-active {
    background: rgba(255,255,255,0.10) !important;
    background-color: rgba(255,255,255,0.10) !important;
    color: #fff !important;
}

.dla-dropdown-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.dla-dropdown-badge {
    margin-left: auto;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 0;
}

.dla-dropdown-logout {
    color: #fca5a5 !important;
}

.dla-dropdown-logout:hover {
    background: rgba(220,38,38,0.15) !important;
    color: #fca5a5 !important;
}

/* Links style */
.dla-user-menu-links {
    gap: 20px;
}

.dla-user-menu-links .dla-menu-btn {
    padding: 0;
    border: none;
    background: none;
    color: var(--dla-text);
}

.dla-user-menu-links .dla-menu-btn:hover {
    color: var(--dla-primary);
}

@media (max-width: 576px) {
    .dla-user-menu {
        gap: 8px;
    }
    
    .dla-user-menu .dla-menu-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .dla-user-name {
        display: none;
    }
}

/* ============================================
   DASHBOARD - CLICKABLE STAT CARDS
   ============================================ */

.dla-stat-clickable {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.dla-stat-clickable:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.dla-stat-clickable:active {
    transform: translateY(-1px) scale(1.01);
}

/* ============================================
   COURSE FILTERS
   ============================================ */

.dla-course-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dla-filter-btn {
    padding: 8px 16px;
    border: 2px solid var(--dla-border);
    background: white;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.dla-filter-btn:hover {
    border-color: var(--dla-primary);
    color: var(--dla-primary);
}

.dla-filter-btn.active {
    background: var(--dla-primary);
    border-color: var(--dla-primary);
    color: white;
}

/* ============================================
   POINTS MODAL
   ============================================ */

.dla-points-modal-container {
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}

.dla-points-modal-container h2 {
    margin: 0 0 20px;
    font-size: 24px;
}

.dla-points-total {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    padding: 30px;
    border-radius: 0;
    text-align: center;
    margin-bottom: 25px;
}

.dla-points-total-value {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}

.dla-points-total-label {
    font-size: 14px;
    opacity: 0.9;
    margin-top: 5px;
}

.dla-points-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dla-points-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 0;
}

.dla-points-item-icon {
    font-size: 20px;
}

.dla-points-item-info {
    flex: 1;
}

.dla-points-item-reason {
    font-weight: 500;
    color: var(--dla-text);
}

.dla-points-item-date {
    font-size: 12px;
    color: var(--dla-text-light);
    margin-top: 2px;
}

.dla-points-item-value {
    font-size: 18px;
    font-weight: 700;
}

.dla-points-item-value.positive {
    color: #16a34a;
}

.dla-points-item-value.negative {
    color: #dc2626;
}

.dla-points-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--dla-text-light);
}

/* ============================================
   AVATAR UPLOAD
   ============================================ */

.dla-dash-avatar-upload {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e2e8f0;
}

.dla-dash-avatar-preview {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
}

.dla-dash-avatar-preview img,
.dla-dash-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.dla-dash-avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 0;
}

.dla-dash-avatar-preview:hover .dla-dash-avatar-overlay {
    opacity: 1;
}

.dla-dash-avatar-overlay span {
    font-size: 24px;
}

.dla-dash-avatar-info p {
    font-size: 12px;
    color: var(--dla-text-light);
    margin: 8px 0 0;
}

.dla-dash-btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

/* Menu dropdown item integration */
.dla-menu-dropdown-item {
    position: relative;
}

.dla-menu-dropdown-item .dla-user-dropdown {
    position: relative;
}

.dla-menu-dropdown-item .dla-user-dropdown-toggle {
    background: transparent;
    border: none;
    padding: 8px 12px;
}

.dla-menu-dropdown-item .dla-user-dropdown-menu {
    right: 0;
    left: auto;
}

/* Mobile user panel - simplified inline approach */
@media (max-width: 991px) {
    /* Lumex theme specific - allow menu to expand */
    .mil-mobile-menu,
    .mil-mobile-menu-wrap,
    .mil-mobile-menu.mil-active,
    .menu-main-menu-container,
    nav.menu-main-menu-container,
    #menu-main-menu,
    .mil-menu-list {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }
    
    /* Make everything inline/static */
    .dla-menu-dropdown-item {
        position: relative !important;
        overflow: visible !important;
    }
    
    .dla-menu-dropdown-item .dla-user-dropdown {
        position: static !important;
        width: 100% !important;
    }
    
    .dla-menu-dropdown-item .dla-user-dropdown-toggle {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Dropdown menu - inline display */
    .dla-menu-dropdown-item .dla-user-dropdown-menu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        max-height: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: rgba(0,0,0,0.2) !important;
    }
    
    .dla-menu-dropdown-item .dla-user-dropdown.open .dla-user-dropdown-menu {
        display: block !important;
    }
    
    .dla-menu-dropdown-item .dla-user-dropdown-menu a {
        padding: 12px 20px !important;
        font-size: 14px !important;
        text-align: center !important;
    }
    
    .dla-menu-dropdown-item .dla-dropdown-header {
        padding: 16px !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
        background: rgba(0,0,0,0.1) !important;
    }
    
    .dla-menu-dropdown-item .dla-dropdown-header img {
        width: 60px !important;
        height: 60px !important;
    }
    
    .dla-menu-dropdown-item .dla-dropdown-header div {
        text-align: center !important;
    }
    
    .dla-menu-dropdown-item .dla-dropdown-divider {
        margin: 8px 16px !important;
        background: rgba(255,255,255,0.15) !important;
    }
}

/* Separate fullscreen modal - as backup */
#dla-mobile-user-panel {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

@media (max-width: 991px) {
    #dla-mobile-user-panel {
        display: block;
    }
}

#dla-mobile-user-panel.open {
    opacity: 1;
    visibility: visible;
}

#dla-mobile-user-panel .dla-mobile-panel-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 0;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dla-mobile-user-panel .dla-user-dropdown-menu {
    position: absolute !important;
    display: block !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.95) !important;
    right: auto !important;
    bottom: auto !important;
    width: 90% !important;
    max-width: 350px !important;
    max-height: 80vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #263139 !important;
    border-radius: 0;
    box-shadow: 0 25px 80px rgba(0,0,0,0.5) !important;
    overflow: hidden !important;
    overflow-y: auto !important;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#dla-mobile-user-panel.open .dla-user-dropdown-menu {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) !important;
}

#dla-mobile-user-panel .dla-dropdown-header {
    padding: 28px 24px !important;
    text-align: center !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: rgba(255,255,255,0.05) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

#dla-mobile-user-panel .dla-dropdown-header img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 0;
}

#dla-mobile-user-panel .dla-dropdown-header strong {
    font-size: 20px !important;
    color: #fff !important;
}

#dla-mobile-user-panel .dla-dropdown-header span {
    font-size: 14px !important;
    color: rgba(255,255,255,0.6) !important;
}

#dla-mobile-user-panel .dla-user-dropdown-menu a {
    padding: 16px 24px !important;
    font-size: 16px !important;
    color: #fff !important;
}

#dla-mobile-user-panel .dla-user-dropdown-menu a:hover {
    background: rgba(255,255,255,0.1) !important;
}

#dla-mobile-user-panel .dla-dropdown-divider {
    margin: 10px 20px !important;
    background: rgba(255,255,255,0.1) !important;
}

body.dla-panel-open {
    overflow: hidden !important;
}

/* Resume prompt */
.dla-resume-prompt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.9);
    padding: 25px 35px;
    border-radius: 0;
    text-align: center;
    z-index: 100;
    animation: fadeIn 0.3s ease;
}

.dla-resume-prompt span {
    display: block;
    color: #fff;
    font-size: 16px;
    margin-bottom: 15px;
}

.dla-resume-prompt button {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.dla-resume-prompt .dla-resume-yes {
    background: var(--dla-primary, #3b82f6);
    color: #fff;
}

.dla-resume-prompt .dla-resume-yes:hover {
    background: var(--dla-primary-dark, #2563eb);
}

.dla-resume-prompt .dla-resume-no {
    background: #374151;
    color: #fff;
}

.dla-resume-prompt .dla-resume-no:hover {
    background: #4b5563;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Continue watching section */
.dla-continue-watching {
    margin-bottom: 30px;
}

.dla-continue-watching h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dla-continue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.dla-continue-card {
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s;
    text-decoration: none;
    color: inherit;
}

.dla-continue-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.dla-continue-thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: #1a1a2e;
    overflow: hidden;
    border-radius: 0;
}

.dla-continue-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dla-continue-play {
    display: none;
}

.dla-continue-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.9);
    border-radius: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpolygon points='9,6 18,12 9,18'/%3E%3C/svg%3E");
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.dla-continue-card:hover .dla-continue-thumb::after {
    opacity: 1;
}

.dla-continue-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255,255,255,0.3);
}

.dla-continue-progress-bar {
    height: 100%;
    background: var(--dla-primary, #3b82f6);
    transition: width 0.3s;
}

.dla-continue-info {
    padding: 15px;
}

.dla-continue-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dla-continue-meta {
    font-size: 13px;
    color: var(--dla-text-light, #64748b);
}

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

/* Dashboard wrapper */
.dla-dashboard {
    --dla-primary: #1e5a8a;
    --dla-secondary: #2b7ab8;
    --dla-accent: #f97316;
    --dla-bg: #f8fafc;
    --dla-card-bg: #ffffff;
    --dla-text: #1e293b;
    --dla-text-muted: #64748b;
    --dla-border: #e2e8f0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Dental Layout - Default */
.dla-dash-hero {
    background: linear-gradient(135deg, var(--dla-primary), var(--dla-secondary));
    border-radius: 0;
    padding: 35px;
    color: #fff;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.dla-dash-hero-content {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.dla-dash-user {
    display: flex;
    align-items: center;
    gap: 18px;
}

.dla-dash-avatar {
    width: 85px;
    height: 85px;
    border-radius: 0;
    border: 4px solid rgba(255,255,255,0.25);
    object-fit: cover;
}

.dla-dash-greeting {
    font-size: 14px;
    opacity: 0.85;
}

.dla-dash-name {
    font-size: 26px;
    font-weight: 700;
    margin: 4px 0;
}

.dla-dash-email {
    font-size: 14px;
    opacity: 0.8;
}

.dla-dash-stats {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.dla-dash-stat {
    background: rgba(255,255,255,0.12);
    padding: 16px 22px;
    border-radius: 0;
    text-align: center;
    min-width: 90px;
}

.dla-dash-stat-value {
    font-size: 28px;
    font-weight: 700;
}

.dla-dash-stat-label {
    font-size: 12px;
    opacity: 0.8;
    text-transform: uppercase;
    margin-top: 3px;
}

.dla-dash-hero-illustration {
    display: flex;
    align-items: center;
}

.dla-dash-illustration-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.15);
    padding: 12px 20px;
    border-radius: 0;
    font-weight: 600;
}

.dla-dash-illustration-badge .icon {
    font-size: 24px;
}

/* Action Cards - Default dental layout only */
.dla-dash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 25px;
}
.dla-dash-actions > * {
    flex: 1 1 0;
    min-width: 140px;
}

@media (max-width: 900px) {
    .dla-dash-actions { gap: 12px; }
    .dla-dash-actions > * { flex: 1 1 calc(50% - 12px); min-width: 120px; }
}

@media (max-width: 500px) {
    .dla-dash-actions { flex-direction: column; gap: 10px; }
    .dla-dash-actions > * { flex: none; width: 100%; min-width: 0; }
}

.dla-dash-action {
    background: var(--dla-card-bg, #ffffff);
    border-radius: 0;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: var(--dla-text, #1e293b);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    border: 1px solid var(--dla-border, #e2e8f0);
}

.dla-dash-action:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.dla-dash-action-icon {
    font-size: 32px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(30,90,138,0.08), rgba(43,122,184,0.08));
    border-radius: 0;
    flex-shrink: 0;
}

.dla-dash-action-text h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--dla-text, #1e293b);
}

.dla-dash-action-text p {
    margin: 0;
    font-size: 13px;
    color: var(--dla-text-muted, #64748b);
}

/* Tabs */
.dla-dash-tabs {
    display: inline-flex;
    background: var(--dla-card-bg);
    padding: 5px;
    border-radius: 0;
    margin-bottom: 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.dla-dash-tab {
    padding: 12px 28px;
    border-radius: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--dla-text-muted);
    transition: all 0.2s;
}

.dla-dash-tab:hover {
    color: var(--dla-text);
}

.dla-dash-tab.active {
    background: var(--dla-primary);
    color: #fff;
}

/* Tab Content */
.dla-dash-tab-content {
    display: none;
}

.dla-dash-tab-content.active {
    display: block;
}

/* Subscription Card */
.dla-dash-sub {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 28px;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-radius: 0;
    margin-bottom: 25px;
    border: 1px solid #86efac;
}

.dla-dash-sub-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border-radius: 0;
    font-size: 24px;
    font-weight: 700;
}

.dla-dash-sub-info {
    flex: 1;
}

.dla-dash-sub-info h3 {
    margin: 0 0 4px;
    font-size: 17px;
    color: #166534;
}

.dla-dash-sub-info p {
    margin: 0;
    font-size: 14px;
    color: #22c55e;
}

/* Buttons */
.dla-dash-btn {
    padding: 12px 24px;
    border-radius: 0;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

.dla-dash-btn-primary {
    background: var(--dla-primary);
    color: #fff;
}

.dla-dash-btn-primary:hover {
    background: var(--dla-secondary);
    transform: translateY(-2px);
}

.dla-dash-btn-accent {
    background: var(--dla-accent);
    color: #fff;
}

.dla-dash-btn-success {
    background: #16a34a;
    color: #fff;
}

.dla-dash-btn-success:hover {
    background: #15803d;
}

.dla-dash-btn-outline {
    background: transparent;
    border: 2px solid currentColor;
    color: var(--dla-primary);
}

/* Course Grid */
.dla-dash-courses {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
@media(max-width:900px){.dla-dash-courses{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.dla-dash-courses{grid-template-columns:1fr;}}

.dla-dash-course.dla-course-hidden {
    display: none !important;
}

.dla-dash-course {
    background: var(--dla-card-bg);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    border: 1px solid var(--dla-border);
    transition: transform 0.25s, box-shadow 0.25s;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.dla-dash-course:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

.dla-dash-course-thumb {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #1e293b;
    display: block;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.dla-dash-course-thumb img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.dla-dash-course-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.9);
    border-radius: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpolygon points='9,6 18,12 9,18'/%3E%3C/svg%3E");
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.dla-dash-course:hover .dla-dash-course-thumb::after {
    opacity: 1;
}

.dla-dash-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 14px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
}

.dla-dash-badge-done {
    background: #22c55e;
    color: #fff;
}

.dla-dash-badge-progress {
    background: var(--dla-accent);
    color: #fff;
}

.dla-dash-badge-new {
    background: var(--dla-secondary);
    color: #fff;
}

.dla-dash-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: rgba(0,0,0,0.15);
}

.dla-dash-progress-fill {
    height: 100%;
    background: var(--dla-accent);
    transition: width 0.3s;
}

.dla-dash-course-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 48px 16px 14px;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0) 100%);
    z-index: 3;
}

.dla-dash-course-info h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.dla-dash-course-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dla-dash-course-meta {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
}

/* Certificates */
.dla-dash-certs {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dla-dash-cert {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px;
    background: var(--dla-card-bg);
    border-radius: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    border: 1px solid var(--dla-border);
}

.dla-dash-cert-icon {
    font-size: 36px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 0;
}

.dla-dash-cert-info {
    flex: 1;
}

.dla-dash-cert-info h4 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--dla-text);
}

.dla-dash-cert-info p {
    margin: 0;
    font-size: 13px;
    color: var(--dla-text-muted);
}

.dla-dash-cert-download {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dla-primary);
    color: #fff;
    border-radius: 0;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.2s;
}

.dla-dash-cert-download:hover {
    background: var(--dla-secondary);
    transform: scale(1.05);
}

/* Account Sections */
.dla-account-section {
    background: var(--dla-card-bg);
    border-radius: 0;
    padding: 28px;
    margin-bottom: 22px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    border: 1px solid var(--dla-border);
}

.dla-account-section h3 {
    margin: 0 0 22px;
    font-size: 18px;
    font-weight: 600;
    color: var(--dla-text);
}

.dla-form-row {
    margin-bottom: 18px;
}

.dla-form-row label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--dla-text);
    margin-bottom: 8px;
}

.dla-form-row input,
.dla-form-row select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--dla-border);
    border-radius: 0;
    font-size: 14px;
    color: var(--dla-text);
    background: var(--dla-bg);
    transition: all 0.2s;
}

.dla-form-row input:focus,
.dla-form-row select:focus {
    outline: none;
    border-color: var(--dla-primary);
    box-shadow: 0 0 0 3px rgba(30,90,138,0.1);
}

/* Filter Buttons */
.dla-filter-btn {
    padding: 8px 18px;
    border-radius: 0;
    border: 1px solid var(--dla-border);
    background: var(--dla-card-bg);
    color: var(--dla-text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.dla-filter-btn:hover {
    border-color: var(--dla-primary);
    color: var(--dla-primary);
}

.dla-filter-btn.active {
    background: var(--dla-primary);
    border-color: var(--dla-primary);
    color: #fff;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .dla-dash-hero {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }
    
    .dla-dash-hero-content {
        flex-direction: column;
    }
    
    .dla-dash-user {
        flex-direction: column;
        text-align: center;
    }
    
    .dla-dash-stats {
        justify-content: center;
    }
    
    .dla-dash-tabs {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 6px;
    }

    .dla-dash-tab {
        flex: unset;
        min-width: unset;
        padding: 10px 8px;
        text-align: center;
        font-size: 12px;
        border-radius: 0;
    }

    /* Account — full width on its own row */
    .dla-dash-tabs .dla-dash-tab:nth-child(4) {
        grid-column: unset;
    }
    .dla-dash-tabs .dla-dash-tab:nth-child(5) {
        grid-column: 1 / -1;
    }
}

/* ===== STANDARD LAYOUT STYLES - All defined inline in PHP for theme support ===== */

/* Dashboard Container Fix */
.dla-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}

/* Account Section Styles */
.dla-dash-account {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

@media (max-width: 768px) {
    .dla-dash-account {
        grid-template-columns: 1fr;
    }
}

.dla-dash-account-card {
    background: var(--dla-card-bg, #ffffff);
    border-radius: 0;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid var(--dla-border, #e2e8f0);
}

.dla-dash-account-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 25px;
    font-size: 20px;
    font-weight: 600;
    color: var(--dla-text, #1e293b);
}

.dla-dash-avatar-upload {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--dla-border, #e2e8f0);
}

.dla-dash-avatar-preview {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 0;
    overflow: hidden;
}

.dla-dash-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dla-dash-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    cursor: pointer;
    font-size: 24px;
}

.dla-dash-avatar-preview:hover .dla-dash-avatar-overlay {
    opacity: 1;
}

.dla-dash-avatar-info p {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--dla-text-muted, #64748b);
}

.dla-dash-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

@media (max-width: 500px) {
    .dla-dash-form-row {
        grid-template-columns: 1fr;
    }
}

.dla-dash-form-group {
    margin-bottom: 18px;
}

.dla-dash-form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dla-text, #1e293b);
}

.dla-dash-form-group input,
.dla-dash-form-group select {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--dla-border, #e2e8f0);
    border-radius: 0;
    font-size: 15px;
    background: #ffffff;
    color: #1e293b;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.dla-dash-form-group input:focus,
.dla-dash-form-group select:focus {
    outline: none;
    border-color: var(--dla-primary, #1e5a8a);
    box-shadow: 0 0 0 3px rgba(30, 90, 138, 0.1);
}

.dla-dash-form-group input:disabled {
    background: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}

.dla-dash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 0;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    text-decoration: none;
}

.dla-dash-btn-primary {
    background: var(--dla-primary, #1e5a8a);
    color: #ffffff;
}

.dla-dash-btn-primary:hover {
    background: var(--dla-secondary, #2b7ab8);
    transform: translateY(-2px);
}

.dla-dash-btn-outline {
    background: transparent;
    border: 2px solid var(--dla-border, #e2e8f0);
    color: var(--dla-text, #1e293b);
}

.dla-dash-btn-outline:hover {
    border-color: var(--dla-primary, #1e5a8a);
    color: var(--dla-primary, #1e5a8a);
}

.dla-dash-btn-sm {
    padding: 10px 18px;
    font-size: 13px;
}

/* ====================================
   QUIZ MODAL & STYLES
   ==================================== */

/* Generic modal base — applies to all .dla-modal elements */
.dla-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.dla-modal .dla-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: 0;
}
.dla-modal .dla-modal-content {
    position: relative;
    background: #fff;
    border-radius: 0;
    max-width: 700px;
    width: 100%;
    margin: auto;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    padding: 30px;
    z-index: 1;
    animation: modalSlideIn 0.3s ease;
}
.dla-modal .dla-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 0;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s;
    z-index: 2;
}
.dla-modal .dla-modal-close:hover {
    background: #f8fafc;
    color: #1e293b;
}

/* Quiz Modal - scoped */
#dla-quiz-modal.dla-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

#dla-quiz-modal .dla-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

#dla-quiz-modal .dla-modal-content {
    position: relative;
    background: #fff;
    border-radius: 0;
    max-width: 700px;
    width: 100%;
    max-height: none;
    margin: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
    padding: 30px;
}

@media (max-width: 768px) {
    #dla-quiz-modal.dla-modal {
        padding: 10px;
        align-items: flex-start;
    }
    
    #dla-quiz-modal .dla-modal-content {
        border-radius: 0;
        padding: 20px;
        margin-top: 10px;
        margin-bottom: 20px;
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#dla-quiz-modal .dla-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    background: #f1f5f9;
    border-radius: 0;
    font-size: 24px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

#dla-quiz-modal .dla-modal-close:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* Quiz Container */
#dla-quiz-container {
    padding: 40px;
}

.dla-quiz-loading {
    text-align: center;
    padding: 60px 20px;
}

.dla-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

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

.dla-quiz-header {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid #f1f5f9;
}

.dla-quiz-header h2 {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
}

.dla-quiz-header p {
    margin: 0;
    color: #64748b;
    font-size: 16px;
}

/* Quiz Questions */
.dla-quiz-question {
    margin-bottom: 28px;
    padding: 24px;
    background: #f8fafc;
    border-radius: 0;
    border: 1px solid #e2e8f0;
}

.dla-quiz-question h4 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dla-q-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Quiz Answers */
.dla-quiz-answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dla-quiz-answer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s;
}

.dla-quiz-answer:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.dla-quiz-answer input[type="radio"] {
    width: 22px;
    height: 22px;
    accent-color: #3b82f6;
    flex-shrink: 0;
}

.dla-quiz-answer input[type="radio"]:checked + .dla-answer-text {
    color: #2563eb;
    font-weight: 600;
}

.dla-answer-text {
    font-size: 16px;
    color: #334155;
    line-height: 1.5;
}

/* Quiz Actions */
.dla-quiz-actions {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid #f1f5f9;
    text-align: center;
}

.dla-btn-large {
    padding: 16px 48px !important;
    font-size: 18px !important;
    border-radius: 0;
}

/* Quiz Result */
.dla-quiz-result {
    text-align: center;
    padding: 40px 20px;
}

.dla-result-icon {
    font-size: 80px;
    margin-bottom: 24px;
    animation: bounce 0.5s ease;
}

@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.dla-quiz-result h2 {
    margin: 0 0 16px;
    font-size: 32px;
    font-weight: 700;
}

.dla-quiz-result.dla-passed h2 {
    color: #10b981;
}

.dla-quiz-result.dla-failed h2 {
    color: #ef4444;
}

.dla-score {
    font-size: 24px;
    margin-bottom: 16px;
}

.dla-score strong {
    font-size: 36px;
    color: #1e293b;
}

.dla-quiz-result p {
    color: #64748b;
    font-size: 16px;
    margin-bottom: 24px;
    line-height: 1.6;
}

.dla-quiz-error {
    text-align: center;
    padding: 60px 20px;
}

.dla-quiz-error h3 {
    margin: 0 0 12px;
    font-size: 24px;
    color: #ef4444;
}

.dla-quiz-error p {
    margin: 0;
    color: #64748b;
}

/* Quiz Section Styling */
.dla-quiz-section {
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 0;
    margin: 40px 0;
}

.dla-quiz-section h2 {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
}

.dla-quiz-section p {
    margin: 0 0 24px;
    color: #64748b;
    font-size: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    #dla-quiz-container {
        padding: 24px;
    }
    
    .dla-quiz-question {
        padding: 16px;
    }
    
    .dla-quiz-header h2 {
        font-size: 22px;
    }
    
    .dla-quiz-answer {
        padding: 12px 16px;
    }
    
    .dla-modal-content {
        margin: 10px;
        border-radius: 0;
    }
}

/* ====================================
   EMBED CARDS (Shortcodes)
   ==================================== */

/* Fix video in lista de cursuri */
.dla-ac-thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    height: auto !important;
}
.dla-ac-thumb iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}
/* Fix video in pagina cursului */
.dla-vimeo-player {
    position: relative;
    overflow: hidden;
}
.dla-vimeo-player iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

/* Responsive video container fix */
.dla-embed-card-video,
.dla-embed-card-video-lumex {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0f172a;
    display: block;
    align-self: flex-start;
}
.dla-embed-card-video iframe,
.dla-embed-card-video-lumex iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    vertical-align: top;
}
/* Prevent Vimeo JS from overriding container height */
.dla-embed-card-video #player,
.dla-embed-card-video-lumex #player,
.dla-embed-card-video .player,
.dla-embed-card-video-lumex .player {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}

/* Override Vimeo .vp-center flex centering */
.dla-embed-card-video > iframe,
.dla-embed-card-video-lumex > iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    margin: 0 !important;
    flex: none !important;
}
.dla-embed-card-video,
.dla-embed-card-video-lumex {
    position: relative !important;
    display: block !important;
    flex: none !important;
}

.dla-embed-card {
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    margin: 20px 0;
}

.dla-embed-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

/* Horizontal Card */
.dla-card-horizontal {
    display: flex;
}

.dla-card-horizontal .dla-embed-card-image {
    width: 40%;
    min-width: 200px;
    min-height: 180px;
    background-size: cover;
    background-position: center;
    background-color: #e2e8f0;
}

.dla-card-horizontal .dla-embed-card-content {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Vertical Card */
.dla-card-vertical {
    max-width: 350px;
}

.dla-card-vertical .dla-embed-card-image {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
    background-color: #e2e8f0;
}

.dla-card-vertical .dla-embed-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 160px;
}

/* Compact Card */
.dla-card-compact {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 16px;
}

.dla-card-compact .dla-embed-card-thumb {
    width: 80px;
    height: 80px;
    border-radius: 0;
    background-size: cover;
    background-position: center;
    background-color: #e2e8f0;
    flex-shrink: 0;
}

.dla-card-compact .dla-embed-card-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.dla-card-compact .dla-embed-card-content > div {
    flex: 1;
}

.dla-card-compact .dla-embed-card-title {
    font-size: 16px;
    margin-bottom: 4px;
}

.dla-card-compact .dla-embed-card-meta {
    margin-bottom: 0;
}

.dla-card-compact .dla-embed-card-footer {
    flex-shrink: 0;
}

/* Card Elements */
.dla-embed-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 6px;
    line-height: 1.3;
}

.dla-embed-card-subtitle {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 12px;
}

.dla-embed-card-description {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dla-embed-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
    color: #64748b;
    margin-bottom: 16px;
}

.dla-embed-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dla-embed-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.dla-embed-card-price {
    font-size: 22px;
    font-weight: 700;
    color: #166534;
}

.dla-embed-card-btn {
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(135deg, #166534, #14532d);
    color: #fff !important;
    border-radius: 0;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    transition: all 0.2s;
}

.dla-embed-card-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(22, 101, 52, 0.3);
}

/* Video Preview in Cards */
.dla-embed-card-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    background: #000;
}

.dla-card-horizontal .dla-embed-card-video {
    width: 40%;
    min-width: 200px;
    padding-bottom: 0;
    height: auto;
    min-height: 180px;
}

.dla-card-horizontal .dla-embed-card-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dla-card-vertical .dla-embed-card-video {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.dla-embed-card-video-thumb {
    position: relative;
    overflow: hidden;
}

.dla-embed-card-video-thumb iframe {
    border-radius: 0;
}

/* ====================================
   LUMEX STYLE - Vertical with sharp corners and cut corner
   ==================================== */

.dla-card-lumex {
    display: flex;
    flex-direction: column;
    max-width: 320px;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 0 100%);
    box-shadow: 0 6px 25px rgba(0,0,0,0.12);
    position: relative;
    overflow: visible;
}

.dla-card-lumex::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 25px;
    height: 25px;
    background: linear-gradient(135deg, transparent 50%, rgba(22,101,52,0.15) 50%);
    z-index: 1;
}

.dla-card-lumex .dla-embed-card-image,
.dla-embed-card-image-lumex {
    width: 100%;
    height: 180px;
    min-height: 180px;
    background-size: cover;
    background-position: center;
    background-color: #166534;
    background-image: linear-gradient(135deg, #166534 0%, #22c55e 50%, #16a34a 100%);
    position: relative;
    border-radius: 0 !important;
}

.dla-card-lumex .dla-embed-card-video,
.dla-embed-card-video-lumex {
    width: 100%;
    height: 180px;
    min-height: 180px;
    border-radius: 0 !important;
    background: #0f0f0f;
    position: relative;
    padding-bottom: 0;
}

.dla-card-lumex .dla-embed-card-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dla-card-lumex .dla-embed-card-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 160px;
}

.dla-card-lumex .dla-embed-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.dla-card-lumex .dla-embed-card-subtitle {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 12px;
}

.dla-card-lumex .dla-embed-card-meta {
    font-size: 12px;
    color: #475569;
    gap: 12px;
    margin-bottom: 16px;
}

.dla-card-lumex .dla-embed-card-meta span {
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 0;
}

.dla-card-lumex .dla-embed-card-footer {
    margin-top: auto;
}

.dla-embed-card-price-lumex {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #166534 !important;
    letter-spacing: -0.02em;
}

.dla-embed-card-btn-lumex {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 14px 24px !important;
    background: #166534 !important;
    color: #fff !important;
    border-radius: 0;
    font-weight: 600;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(22, 101, 52, 0.25);
}

.dla-embed-card-btn-lumex:hover {
    background: #14532d !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(22, 101, 52, 0.35);
}

.dla-lumex-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.2);
    border-radius: 0;
    font-size: 16px;
    font-style: normal;
    transition: all 0.3s ease;
}

.dla-embed-card-btn-lumex:hover .dla-lumex-arrow {
    background: rgba(255,255,255,0.3);
    transform: translate(3px, 3px);
}

/* Lumex Responsive */
@media (max-width: 768px) {
    .dla-card-lumex {
        max-width: 100%;
        clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
    }
    
    .dla-card-lumex .dla-embed-card-image,
    .dla-embed-card-image-lumex,
    .dla-card-lumex .dla-embed-card-video,
    .dla-embed-card-video-lumex {
        height: 160px;
        min-height: 160px;
    }
    
    .dla-card-lumex .dla-embed-card-content {
        padding: 16px;
        min-height: 140px;
    }
    
    .dla-card-lumex .dla-embed-card-title {
        font-size: 16px;
    }
    
    .dla-embed-card-btn-lumex {
        padding: 12px 20px !important;
        font-size: 13px !important;
    }
    
    .dla-lumex-arrow {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .dla-card-horizontal {
        flex-direction: column;
    }
    
    .dla-card-horizontal .dla-embed-card-image {
        width: 100%;
        min-height: 160px;
    }
    
    .dla-card-compact {
        flex-wrap: wrap;
    }
    
    .dla-card-compact .dla-embed-card-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ====================================
   QUIZ SINGLE QUESTION VIEW
   ==================================== */

.dla-quiz-single {
    padding: 20px;
}

.dla-quiz-progress {
    height: 6px;
    background: #e2e8f0;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 12px;
}

.dla-quiz-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    border-radius: 0;
    transition: width 0.3s ease;
}

.dla-quiz-counter {
    text-align: center;
    font-size: 14px;
    color: #64748b;
    margin-bottom: 30px;
}

.dla-quiz-question-single {
    text-align: center;
    margin-bottom: 30px;
}

.dla-quiz-question-single h3 {
    font-size: 22px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 30px;
    line-height: 1.4;
}

.dla-quiz-answers-single {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
}

.dla-quiz-answer-single {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.dla-quiz-answer-single:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.dla-quiz-answer-single.selected {
    background: #eff6ff;
    border-color: #3b82f6;
}

.dla-quiz-answer-single input {
    display: none;
}

.dla-answer-radio {
    width: 22px;
    height: 22px;
    border: 2px solid #cbd5e1;
    border-radius: 0;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s;
}

.dla-quiz-answer-single.selected .dla-answer-radio {
    border-color: #3b82f6;
    background: #3b82f6;
}

.dla-quiz-answer-single.selected .dla-answer-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 0;
}

.dla-quiz-answer-single .dla-answer-text {
    font-size: 16px;
    color: #334155;
    flex: 1;
}

.dla-quiz-answer-single.selected .dla-answer-text {
    color: #1e40af;
    font-weight: 500;
}

/* Quiz Navigation */
.dla-quiz-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.dla-quiz-nav .dla-btn {
    min-width: 140px;
}

.dla-quiz-nav .dla-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Score Detail */
.dla-score-detail {
    font-size: 14px;
    color: #64748b;
    margin: -10px 0 15px;
}

/* Modal Content Adjustment for Single Question */
.dla-modal-content:has(.dla-quiz-single) {
    max-width: 600px;
    max-height: none;
}

@media (max-width: 640px) {
    .dla-quiz-question-single h3 {
        font-size: 18px;
    }
    
    .dla-quiz-answer-single {
        padding: 14px 16px;
    }
    
    .dla-quiz-nav {
        flex-direction: column;
        gap: 12px;
    }
    
    .dla-quiz-nav .dla-btn {
        width: 100%;
    }
}

/* =========================================================================
   iOS Safari fixes — header sticky + sticky bar position
   ========================================================================= */

/* Fix iOS: header sticky din CSS fara JS */
@media (max-width: 992px) {
  .header-section.sticky-header-on {
    position: sticky !important;
    top: 0 !important;
    z-index: 1030;
  }
}

/* Fix iOS: page-wrapper overflow-y nu trebuie sa fie hidden */
.page-wrapper {
  overflow-x: hidden;
  overflow-y: visible !important;
}

/* Elimina spatiul alb de deasupra pozei */
@media (max-width: 992px) {
  .dla-masterclass-page {
    padding-top: 0px !important;
  }
}

/* Sticky bar imediat sub header */
@media (max-width: 992px) {
  .dla-mc-sticky-bar {
    top: 56px !important;
  }
}

/* Force square corners on video wrapper and iframe */
.dla-preview-wrapper,
.dla-preview-wrapper *,
.dla-video-container,
.dla-video-container *,
.dla-video-container iframe {
    border-radius: 0 !important;
}

/* ── Dashboard: restore rounded corners ─────────────────────────── */
.dla-dashboard .dla-card,
.dla-dashboard .dla-card-body,
.dla-dashboard .dla-stat-card,
.dla-dashboard .dla-progress-bar,
.dla-dashboard .dla-course-card,
.dla-dashboard .dla-course-thumb,
.dla-dashboard .dla-course-item,
.dla-dashboard .dla-tab-content,
.dla-dashboard .dla-quiz-card,
.dla-dashboard .dla-document-item,
.dla-dashboard .dla-certificate-card,
.dla-dashboard .dla-user-avatar img,
.dla-dashboard .dla-avatar-img,
.dla-dashboard-tabs .dla-tab-btn,
.dla-dashboard-tabs .dla-tab-btn.active,
.dla-dashboard .dla-btn,
.dla-dashboard .dla-brand-tab,
.dla-dashboard input,
.dla-dashboard select,
.dla-dashboard textarea,
.dla-dashboard .dla-form-group input,
.dla-dashboard .dla-form-group select,
.dla-dashboard .dla-notification,
.dla-dashboard .dla-alert {
    border-radius: 8px;
}

.dla-dashboard .dla-user-avatar img,
.dla-dashboard .dla-avatar-img,
.dla-dashboard .dla-course-thumb img {
    border-radius: 50%;
}

.dla-dashboard .dla-course-thumb {
    border-radius: 8px;
}

/* Force course title visibility */
.dla-course-header-simple {
    padding-top: 20px !important;
}
.dla-course-banner {
    margin-top: 10px !important;
}
.dla-single-course > .dla-course-header-simple:first-child,
.dla-single-course > .dla-course-banner:first-child {
    margin-top: 10px !important;
}

/* Fix: sticky header covers course title on mobile */
@media (max-width: 992px) {
    body.single-dla_online_course .dla-single-course,
    body.single-dif_video_course .dla-single-course {
        padding-top: 80px !important;
    }
}

/* Loading spinners must stay circular even under the site-wide flat-corner
   rules — a squared-off spinner tumbles instead of spinning. */
html body .vjs-loading-spinner,
html body .vjs-loading-spinner:before,
html body .vjs-loading-spinner:after,
html body .dla-vimeo-loading > div,
html body .dla-video-wrap .vjs-loading-spinner{border-radius:50% !important;}

/* =====================================================================
   Bheemji theme fixes (site-wide)
   The theme's blog.css leaves every post thumbnail permanently at
   `scale(1.05) rotate(0.5deg)` inside an overflow:hidden box. Two costs:
   2.5% of each edge is clipped (headlines on the cover lose their first
   letter) and the half-degree rotation forces the browser to resample the
   bitmap, which reads as blur/pixelation. Rest the image flat; keep a
   gentle zoom on hover only, no rotation.
   ===================================================================== */
html body .blog-entry div.entry-media-group > div.entry-thumb img,
html body .wdt-posts-list-wrapper .entry-thumb img{
  transform:none !important;
  transition:transform .6s cubic-bezier(.2,.7,.2,1) !important;
}
html body .blog-entry:hover div.entry-media-group > div.entry-thumb img,
html body .wdt-posts-list-wrapper .wdt-post-entry:hover .entry-thumb img{
  transform:scale(1.04) !important;
}

/* =====================================================================
   Bheemji theme: every <button> gets ::before/::after hover layers that
   are position:absolute. Our reset (all:unset) drops the button's own
   position:relative, so those layers stretch to the nearest positioned
   ancestor — i.e. the whole page: a faint grey veil over the dashboard
   and a click anywhere landing on "Change photo" (the picker opening).
   Kill the layers and keep our buttons as their own containing block.
   ===================================================================== */
html body .mag-wrap button,html body .dlac-wrap button,html body .dla-bell-drop button,
html body .dif-archive-wrap button,html body .dlaen button,html body .dla-captcha-field button{position:relative !important;overflow:hidden !important;}
html body .mag-wrap button::before,html body .mag-wrap button::after,
html body .dlac-wrap button::before,html body .dlac-wrap button::after,
html body .dla-bell-drop button::before,html body .dla-bell-drop button::after,
html body .dif-archive-wrap button::before,html body .dif-archive-wrap button::after,
html body .dlaen button::before,html body .dlaen button::after,
html body .dla-captcha-field button::before,html body .dla-captcha-field button::after{content:none !important;display:none !important;}
/* anchor CTAs: containing block for their own hover layers (styled in the button block below) */
html body a.dif-pkg-cta,html body .dla-price-sticky-btn,html body .dla-preview-cta-bar .dla-btn,html body .dif-archive-wrap .dla-ac-btn{position:relative !important;overflow:hidden !important;}

/* =====================================================================
   ONE button language for the whole platform — the course-page CTA
   (dark green face, folded corner, light panel sweeping in on hover) as
   primary, and its quieter gold outline as secondary. Every CTA the
   platform draws (dashboard, checkout, DIF pages, player prompt, forms,
   notifications) maps onto one of the two, so nothing looks imported.
   `html body[class]` outranks the component rules above and the
   dashboard's inline styles; the button reset keeps the theme's own
   hover layers from ever leaking (position:relative + overflow:hidden).
   ===================================================================== */
html body[class] .dla-cta,
html body[class] a.dif-pkg-cta,
html body[class] .dla-preview-cta-bar .dla-btn,
html body[class] #dla-price-sticky .dla-price-sticky-btn,
html body[class] .dif-archive-wrap .dla-ac-btn,
html body[class] .dlac-wrap .dlac-btn,
html body[class] .mag-wrap .mag-account-card .dla-save-profile,
html body[class] .mag-wrap .mag-webapps-grid > div > a,
html body[class] .mag-wrap .mag-hero-btn,
html body[class] .dla-bell-drop button.dla-bell-test,
html body[class] .wpcf7-form .wpcf7-form-control.wpcf7-submit,
html body[class] .dla-wt-resume .dla-wt-btn-continue,
html body[class] .dlaen .dlaen-btn:not(.ghost):not(.quiet){
    position:relative !important;overflow:hidden !important;isolation:isolate !important;z-index:0 !important;
    display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:9px !important;
    box-sizing:border-box !important;
    padding:15px 26px !important;
    border-radius:0 !important;
    border:1px solid #2f5d4d !important;
    background:#1d4034 !important;
    color:#f1ece1 !important;
    font:400 16px/1.3 'Marcellus','Cormorant Garamond',serif !important;
    letter-spacing:.02em !important;
    text-transform:none !important;
    text-decoration:none !important;
    text-align:center !important;
    text-shadow:none !important;
    box-shadow:none !important;
    cursor:pointer !important;
    transition:color .35s cubic-bezier(.2,.7,.2,1),border-color .45s cubic-bezier(.2,.7,.2,1) !important;
    transform:none !important;
}
/* the sweeping panel */
html body[class] .dla-cta::after,
html body[class] a.dif-pkg-cta::after,
html body[class] .dla-preview-cta-bar .dla-btn::after,
html body[class] #dla-price-sticky .dla-price-sticky-btn::after,
html body[class] .dif-archive-wrap .dla-ac-btn::after,
html body[class] .dlac-wrap .dlac-btn::after,
html body[class] .mag-wrap .mag-account-card .dla-save-profile::after,
html body[class] .mag-wrap .mag-webapps-grid > div > a::after,
html body[class] .mag-wrap .mag-hero-btn::after,
html body[class] .dla-bell-drop button.dla-bell-test::after,
html body[class] .wpcf7-form .wpcf7-form-control.wpcf7-submit::after,
html body[class] .dla-wt-resume .dla-wt-btn-continue::after,
html body[class] .dlaen .dlaen-btn:not(.ghost):not(.quiet)::after{
    content:"" !important;display:block !important;position:absolute !important;inset:0 !important;
    background:#7fa898 !important;
    clip-path:polygon(100% 100%,100% 100%,100% 100%,100% 100%);
    transition:clip-path .55s cubic-bezier(.2,.7,.2,1);
    z-index:-1 !important;
    border:0 !important;opacity:1 !important;transform:none !important;width:auto !important;height:auto !important;
}
html body[class] .dla-cta:hover::after,
html body[class] a.dif-pkg-cta:hover::after,
html body[class] .dla-preview-cta-bar .dla-btn:hover::after,
html body[class] #dla-price-sticky .dla-price-sticky-btn:hover::after,
html body[class] .dif-archive-wrap .dla-ac-btn:hover::after,
html body[class] .dlac-wrap .dlac-btn:hover::after,
html body[class] .mag-wrap .mag-account-card .dla-save-profile:hover::after,
html body[class] .mag-wrap .mag-webapps-grid > div > a:hover::after,
html body[class] .mag-wrap .mag-hero-btn:hover::after,
html body[class] .dla-bell-drop button.dla-bell-test:hover::after,
html body[class] .wpcf7-form .wpcf7-form-control.wpcf7-submit:hover::after,
html body[class] .dla-wt-resume .dla-wt-btn-continue:hover::after,
html body[class] .dlaen .dlaen-btn:not(.ghost):not(.quiet):hover::after{
    clip-path:polygon(-120% 100%,100% -120%,100% 100%,-120% 100%);
}
html body[class] .dla-cta:hover,
html body[class] a.dif-pkg-cta:hover,
html body[class] .dla-preview-cta-bar .dla-btn:hover,
html body[class] #dla-price-sticky .dla-price-sticky-btn:hover,
html body[class] .dif-archive-wrap .dla-ac-btn:hover,
html body[class] .dlac-wrap .dlac-btn:hover,
html body[class] .mag-wrap .mag-account-card .dla-save-profile:hover,
html body[class] .mag-wrap .mag-webapps-grid > div > a:hover,
html body[class] .mag-wrap .mag-hero-btn:hover,
html body[class] .dla-bell-drop button.dla-bell-test:hover,
html body[class] .wpcf7-form .wpcf7-form-control.wpcf7-submit:hover,
html body[class] .dla-wt-resume .dla-wt-btn-continue:hover,
html body[class] .dlaen .dlaen-btn:not(.ghost):not(.quiet):hover{
    color:#0d2019 !important;border-color:#7fa898 !important;background:#1d4034 !important;
}
/* the folded page corner */
html body[class] .dla-cta::before,
html body[class] a.dif-pkg-cta::before,
html body[class] .dla-preview-cta-bar .dla-btn::before,
html body[class] #dla-price-sticky .dla-price-sticky-btn::before,
html body[class] .dif-archive-wrap .dla-ac-btn::before,
html body[class] .dlac-wrap .dlac-btn::before,
html body[class] .mag-wrap .mag-account-card .dla-save-profile::before,
html body[class] .mag-wrap .mag-webapps-grid > div > a::before,
html body[class] .mag-wrap .mag-hero-btn::before,
html body[class] .dla-bell-drop button.dla-bell-test::before,
html body[class] .wpcf7-form .wpcf7-form-control.wpcf7-submit::before,
html body[class] .dla-wt-resume .dla-wt-btn-continue::before,
html body[class] .dlaen .dlaen-btn:not(.ghost):not(.quiet)::before{
    content:"" !important;display:block !important;position:absolute !important;right:0 !important;bottom:0 !important;left:auto !important;top:auto !important;
    width:0 !important;height:0 !important;
    border-style:solid !important;border-width:0 0 15px 15px !important;
    border-color:transparent transparent rgba(241,236,225,.22) transparent !important;
    background:none !important;z-index:1 !important;opacity:1 !important;transform:none !important;
    transition:border-color .45s cubic-bezier(.2,.7,.2,1);
}
html body[class] .dla-cta:hover::before,
html body[class] a.dif-pkg-cta:hover::before,
html body[class] .dla-preview-cta-bar .dla-btn:hover::before,
html body[class] #dla-price-sticky .dla-price-sticky-btn:hover::before,
html body[class] .dif-archive-wrap .dla-ac-btn:hover::before,
html body[class] .dlac-wrap .dlac-btn:hover::before,
html body[class] .mag-wrap .mag-account-card .dla-save-profile:hover::before,
html body[class] .mag-wrap .mag-webapps-grid > div > a:hover::before,
html body[class] .mag-wrap .mag-hero-btn:hover::before,
html body[class] .dla-bell-drop button.dla-bell-test:hover::before,
html body[class] .wpcf7-form .wpcf7-form-control.wpcf7-submit:hover::before,
html body[class] .dla-wt-resume .dla-wt-btn-continue:hover::before,
html body[class] .dlaen .dlaen-btn:not(.ghost):not(.quiet):hover::before{
    border-color:transparent transparent rgba(13,32,25,.3) transparent !important;
}
/* full-width where the layout needs it */
html body[class] a.dif-pkg-cta,
html body[class] .dlac-wrap .dlac-btn,
html body[class] .mag-wrap .mag-account-card .dla-save-profile,
html body[class] .mag-wrap .mag-webapps-grid > div > a,
html body[class] .wpcf7-form .wpcf7-form-control.wpcf7-submit{display:flex !important;width:100% !important;}
html body[class] .dla-bell-drop button.dla-bell-test{padding:10px 16px !important;font-size:13px !important;}
html body[class] #dla-price-sticky .dla-price-sticky-btn{padding:12px 20px !important;white-space:nowrap !important;}
html body[class] .dla-wt-resume .dla-wt-btn-continue{padding:13px 22px !important;}
/* text/icon above the sweeping layer */
html body[class] .dla-cta > *,
html body[class] .dla-wt-resume .dla-wt-btn-continue > *,
html body[class] .dlac-wrap .dlac-btn > *,
html body[class] .dlaen .dlaen-btn:not(.ghost):not(.quiet) > *{position:relative;z-index:2;}

/* ---- secondary: gold outline ---------------------------------------- */
html body[class] .dla-cta--ghost,
html body[class] .dla-wt-resume .dla-wt-btn-restart,
html body[class] .dlac-wrap .dlac-coupon-btn,
html body[class] .mag-wrap .mag-account-card .dla-manage-billing,
html body[class] .mag-wrap .mag-account-card a[href*="logout"],
html body[class] .mag-wrap .mag-account-card button[data-dla-avatar],
html body[class] .dlaen .dlaen-btn.ghost{
    position:relative !important;overflow:hidden !important;isolation:isolate !important;z-index:0 !important;
    display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:9px !important;
    box-sizing:border-box !important;padding:13px 22px !important;
    border-radius:0 !important;border:1px solid rgba(181,148,88,.55) !important;
    background:transparent !important;color:#8b6a2e !important;
    font:400 15px/1.3 'Marcellus','Cormorant Garamond',serif !important;letter-spacing:.02em !important;text-transform:none !important;
    text-decoration:none !important;text-align:center !important;box-shadow:none !important;cursor:pointer !important;transform:none !important;
    transition:color .35s cubic-bezier(.2,.7,.2,1),border-color .45s cubic-bezier(.2,.7,.2,1) !important;
}
html body[class] .dla-cta--ghost::after,
html body[class] .dla-wt-resume .dla-wt-btn-restart::after,
html body[class] .dlac-wrap .dlac-coupon-btn::after,
html body[class] .mag-wrap .mag-account-card .dla-manage-billing::after,
html body[class] .mag-wrap .mag-account-card a[href*="logout"]::after,
html body[class] .mag-wrap .mag-account-card button[data-dla-avatar]::after,
html body[class] .dlaen .dlaen-btn.ghost::after{
    content:"" !important;display:block !important;position:absolute !important;inset:0 !important;background:#b59458 !important;
    clip-path:polygon(100% 100%,100% 100%,100% 100%,100% 100%);transition:clip-path .55s cubic-bezier(.2,.7,.2,1);z-index:-1 !important;
    border:0 !important;opacity:1 !important;transform:none !important;width:auto !important;height:auto !important;
}
html body[class] .dla-cta--ghost:hover::after,
html body[class] .dla-wt-resume .dla-wt-btn-restart:hover::after,
html body[class] .dlac-wrap .dlac-coupon-btn:hover::after,
html body[class] .mag-wrap .mag-account-card .dla-manage-billing:hover::after,
html body[class] .mag-wrap .mag-account-card a[href*="logout"]:hover::after,
html body[class] .mag-wrap .mag-account-card button[data-dla-avatar]:hover::after,
html body[class] .dlaen .dlaen-btn.ghost:hover::after{clip-path:polygon(-120% 100%,100% -120%,100% 100%,-120% 100%);}
html body[class] .dla-cta--ghost:hover,
html body[class] .dla-wt-resume .dla-wt-btn-restart:hover,
html body[class] .dlac-wrap .dlac-coupon-btn:hover,
html body[class] .mag-wrap .mag-account-card .dla-manage-billing:hover,
html body[class] .mag-wrap .mag-account-card a[href*="logout"]:hover,
html body[class] .mag-wrap .mag-account-card button[data-dla-avatar]:hover,
html body[class] .dlaen .dlaen-btn.ghost:hover{color:#04100c !important;border-color:#b59458 !important;background:transparent !important;}
html body[class] .dla-cta--ghost::before,
html body[class] .dla-wt-resume .dla-wt-btn-restart::before,
html body[class] .dlac-wrap .dlac-coupon-btn::before,
html body[class] .mag-wrap .mag-account-card .dla-manage-billing::before,
html body[class] .mag-wrap .mag-account-card a[href*="logout"]::before,
html body[class] .mag-wrap .mag-account-card button[data-dla-avatar]::before,
html body[class] .dlaen .dlaen-btn.ghost::before{
    content:"" !important;display:block !important;position:absolute !important;right:0 !important;bottom:0 !important;left:auto !important;top:auto !important;width:0 !important;height:0 !important;
    border-style:solid !important;border-width:0 0 13px 13px !important;border-color:transparent transparent rgba(181,148,88,.35) transparent !important;
    background:none !important;z-index:1 !important;opacity:1 !important;transform:none !important;
}
/* on dark grounds the ghost text reads gold-light */
html body[class] .dla-wt-resume .dla-wt-btn-restart,
html body[class] .dlac-wrap .dlac-coupon-btn{color:#cdac6c !important;}
html body[class] .mag-wrap .mag-account-card .dla-manage-billing,
html body[class] .mag-wrap .mag-account-card a[href*="logout"]{display:flex !important;width:100% !important;margin-top:10px !important;}
html body[class] .mag-wrap .mag-account-card button[data-dla-avatar]{padding:9px 14px !important;font-size:10px !important;margin-top:10px !important;}
html body[class] .dlac-wrap .dlac-coupon-btn{padding:0 16px !important;height:42px !important;}
/* the resume prompt itself: site type, not the theme's Marcellus */
html body[class] .dla-wt-resume .dla-wt-resume-text{display:block;margin-bottom:18px;
font-family:'Marcellus','Cormorant Garamond',serif !important;font-weight:400 !important;font-size:26px !important;color:#f1ece1 !important;letter-spacing:.005em !important;}

/* ---- Package / purchase card (course sidebar) ------------------------ */
html body[class] .dla-pkg-card{background:#fff;border:1px solid rgba(18,33,27,.12);padding:28px 26px 24px;text-align:center;font-family:'DM Sans',sans-serif;}
html body[class] .dla-dark-skin .dla-pkg-card{background:transparent;border-color:rgba(255,255,255,.12);}
html body[class] .dla-pkg-kicker{font:600 10px/1 'DM Sans',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#8b6a2e;margin:0 0 14px;}
html body[class] .dla-pkg-price{font:400 48px/1 'Marcellus','Cormorant Garamond',serif !important;color:#0a1f33 !important;letter-spacing:.005em;}
html body[class] .dla-dark-skin .dla-pkg-price{color:#f1ece1 !important;}
html body[class] .dla-pkg-note{font:400 12px/1.5 'DM Sans',sans-serif;color:#5c6b63;margin:8px 0 20px;}
html body[class] .dla-pkg-card .dla-enroll-cta{display:flex !important;width:100% !important;}
html body[class] ul.dla-pkg-features{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid rgba(18,33,27,.1);text-align:left;}
html body[class] ul.dla-pkg-features li{display:flex;align-items:flex-start;gap:10px;padding:6px 0;font:400 13px/1.5 'DM Sans',sans-serif;color:#5c6b63;}
html body[class] ul.dla-pkg-features li svg{flex:0 0 14px;margin-top:4px;color:#b59458;}
/* HL paid card: kill the leftover inline colours on its two buttons */
html body[class] button.dla-buy-course.dla-cta,html body[class] button.dla-subscribe-btn{width:100% !important;margin:0 !important;}

/* ---- Product card ([dla_product] / DLA Product widget) ------------------- */
html body[class] .dla-product{display:grid;grid-template-columns:minmax(0,1fr);background:#fff;border:1px solid rgba(18,33,27,.12);overflow:hidden;font-family:'DM Sans',sans-serif;}
html body[class] .dla-product--row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);}
html body[class] .dla-product__media{position:relative;background:#0a1f33;}
html body[class] .dla-product--card .dla-product__media{aspect-ratio:16/9;}
html body[class] .dla-product--row .dla-product__media{min-height:280px;}
html body[class] .dla-product__media a{display:block;height:100%;}
html body[class] .dla-product__media img{width:100%;height:100%;object-fit:cover;display:block;}
html body[class] .dla-product__body{padding:28px 28px 26px;display:flex;flex-direction:column;}
html body[class] .dla-product__eyebrow{font:600 10px/1 'DM Sans',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#8b6a2e;margin:0 0 10px;}
html body[class] .dla-product h3.dla-product__title{font:400 30px/1.1 'Marcellus','Cormorant Garamond',serif !important;color:#0a1f33 !important;margin:0 0 12px !important;}
html body[class] .dla-product__text{font:400 14px/1.7 'DM Sans',sans-serif !important;color:#5c6b63 !important;margin:0 0 16px !important;}
html body[class] ul.dla-product__features{list-style:none;margin:0 0 20px;padding:16px 0 0;border-top:1px solid rgba(18,33,27,.1);}
html body[class] ul.dla-product__features li{display:flex;align-items:flex-start;gap:10px;padding:5px 0;font:400 13px/1.5 'DM Sans',sans-serif;color:#5c6b63;}
html body[class] ul.dla-product__features li svg{flex:0 0 14px;margin-top:4px;color:#b59458;}
html body[class] .dla-product__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:6px;}
html body[class] .dla-product__price{font:400 36px/1 'Marcellus','Cormorant Garamond',serif;color:#0a1f33;}
html body[class] .dla-product__cta{display:inline-flex !important;width:auto !important;}
html body[class] .dla-product-cta .dla-product-cta-price{opacity:.8;margin-left:6px;}
@media(max-width:768px){
  html body[class] .dla-product--row{grid-template-columns:1fr;}
  html body[class] .dla-product--row .dla-product__media{min-height:200px;}
  html body[class] .dla-product__body{padding:22px 20px;}
  html body[class] .dla-product h3.dla-product__title{font-size:26px !important;}
  html body[class] .dla-product__foot .dla-product__cta{width:100% !important;display:flex !important;}
}

/* ---- Product card styles (1.66.11) ------------------------------------ */
html body[class] .dla-product{position:relative;}
html body[class] .dla-product__badge{position:absolute;top:18px;right:18px;z-index:3;background:#b59458;color:#fff;font:600 10px/1 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;padding:8px 12px;}
html body[class] .dla-product__cta.dla-cta--ghost{display:inline-flex !important;width:auto !important;}
/* editorial */
html body[class] .dla-product--s-editorial{background:#fbf8f1;border:1px solid rgba(181,148,88,.45);padding:10px;}
html body[class] .dla-product--s-editorial::before{content:"";position:absolute;inset:10px;border:1px solid rgba(181,148,88,.3);pointer-events:none;z-index:2;}
html body[class] .dla-product--s-editorial .dla-product__body{text-align:center;align-items:center;padding:36px 34px 34px;}
html body[class] .dla-product--s-editorial .dla-product__eyebrow::before,html body[class] .dla-product--s-editorial .dla-product__eyebrow::after{content:"";display:inline-block;width:28px;height:1px;background:#b59458;vertical-align:middle;margin:0 12px;}
html body[class] .dla-product--s-editorial h3.dla-product__title{font-size:34px !important;}
html body[class] .dla-product--s-editorial ul.dla-product__features{text-align:left;width:100%;max-width:440px;border-top-color:rgba(181,148,88,.35);}
html body[class] .dla-product--s-editorial .dla-product__foot{flex-direction:column;justify-content:center;gap:18px;width:100%;}
html body[class] .dla-product--s-editorial .dla-product__price{font-size:44px;}
/* dark */
html body[class] .dla-product--s-dark{background:#0a1f33;border-color:rgba(181,148,88,.35);}
html body[class] .dla-product--s-dark h3.dla-product__title,html body[class] .dla-product--s-dark .dla-product__price{color:#f1ece1 !important;}
html body[class] .dla-product--s-dark .dla-product__eyebrow{color:#cdac6c;}
html body[class] .dla-product--s-dark .dla-product__text,html body[class] .dla-product--s-dark ul.dla-product__features li{color:rgba(241,236,225,.72) !important;}
html body[class] .dla-product--s-dark ul.dla-product__features{border-top-color:rgba(241,236,225,.14);}
html body[class] .dla-product--s-dark .dla-cta--ghost,html body[class] .dla-product--s-overlay .dla-cta--ghost{color:#e2c891 !important;border-color:rgba(205,172,108,.7) !important;}
html body[class] .dla-product--s-dark .dla-cta--ghost:hover,html body[class] .dla-product--s-overlay .dla-cta--ghost:hover{color:#0a1f33 !important;}
/* overlay */
html body[class] .dla-product--s-overlay{background:#0a1f33;border:0;min-height:460px;display:flex;flex-direction:column;justify-content:flex-end;}
html body[class] .dla-product--s-overlay .dla-product__media{position:absolute;inset:0;aspect-ratio:auto !important;}
html body[class] .dla-product--s-overlay .dla-product__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,31,51,.05) 0%,rgba(10,31,51,.55) 45%,rgba(10,31,51,.94) 100%);pointer-events:none;}
html body[class] .dla-product--s-overlay .dla-product__body{position:relative;z-index:2;padding:34px 32px 30px;}
html body[class] .dla-product--s-overlay h3.dla-product__title,html body[class] .dla-product--s-overlay .dla-product__price{color:#fff !important;}
html body[class] .dla-product--s-overlay .dla-product__eyebrow{color:#e2c891;}
html body[class] .dla-product--s-overlay .dla-product__text,html body[class] .dla-product--s-overlay ul.dla-product__features li{color:rgba(255,255,255,.8) !important;}
html body[class] .dla-product--s-overlay ul.dla-product__features{border-top-color:rgba(255,255,255,.18);}
/* minimal */
html body[class] .dla-product--s-minimal{background:transparent;border:0;border-top:2px solid #b59458;}
html body[class] .dla-product--s-minimal .dla-product__body{padding:26px 0 0;}
html body[class] .dla-product--s-minimal.dla-product--row .dla-product__body{padding:26px 0 0 30px;}
html body[class] .dla-product--s-minimal .dla-product__price{font-size:30px;}
/* featured */
html body[class] .dla-product--s-featured{border:1px solid #b59458;box-shadow:0 24px 60px -30px rgba(10,31,51,.35);}
html body[class] .dla-product--s-featured::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#8b6a2e,#e2c891,#8b6a2e);z-index:3;}
html body[class] .dla-product--s-featured .dla-product__price{font-size:44px;color:#8b6a2e;}
html body[class] .dla-product--s-featured .dla-product__foot{padding-top:16px;border-top:1px solid rgba(181,148,88,.3);}
@media (max-width:767px){
  html body[class] .dla-product--s-minimal.dla-product--row .dla-product__body{padding:22px 0 0;}
  html body[class] .dla-product--s-overlay{min-height:420px;}
  html body[class] .dla-product--s-overlay .dla-product__body{padding:26px 22px 24px;}
  html body[class] .dla-product--s-editorial h3.dla-product__title{font-size:28px !important;}
  html body[class] .dla-product__foot .dla-product__cta.dla-cta--ghost{width:100% !important;display:flex !important;}
}