/* =========================================================
   GLOBAL STYLE
   ESGIRS Website
   Main stylesheet for all public pages
   ========================================================= */

/* Global */
body {
    font-family: 'Dubai', sans-serif;
    background: #f5f6f8;
    margin: 0;
    padding: 0;
}

/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {
    background-color: #ffffff;
}

.navbar-brand img {
    height: 50px;
}

.nav-link {
    color: #000 !important;
    font-weight: 500;
}

.nav-link:hover {
    color: #007bff !important;
}

/* =========================================================
   HOME HERO SECTION
   Used in index.php
   ========================================================= */

.hero {
    position: relative;
    height: 85vh;
    background: url('../images/banner.png') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 0 15px;
}

.hero h1 {
    font-size: 3rem;
    font-weight: 700;
}

.hero p {
    font-size: 1.2rem;
    margin-top: 20px;
    line-height: 1.6;
}

/* =========================================================
   PAGE BANNER
   Used in register.php and inner pages
   ========================================================= */

.page-banner {
    position: relative;
    height: 250px;
    background: url('../images/banner.png') no-repeat center center/cover;
    display: flex;
    align-items: center;
    color: #ffffff;
    margin-bottom: 50px;
}

.page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.page-banner .container {
    position: relative;
    z-index: 2;
}

.page-banner h1 {
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}

/* =========================================================
   REGISTER PAGE
   ========================================================= */

.register-card {
    max-width: 760px;
    margin: 50px auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.register-logo {
    text-align: center;
    margin-bottom: 15px;
}

.register-logo img {
    height: 65px;
}

h2 {
    text-align: center;
    margin-bottom: 30px;
    font-weight: 600;
}

.form-label {
    font-weight: 500;
}

.required {
    color: red;
}

.btn-primary {
    background-color: #0d6efd;
    border: none;
    padding: 10px;
    font-weight: 500;
}

.btn-primary:hover {
    background-color: #0b5ed7;
}

/* Intl telephone input full width */
.iti {
    width: 100%;
}

/* Flatpickr */
.flatpickr-current-month .numInputWrapper {
    width: 90px;
}

.flatpickr-monthDropdown-months {
    font-weight: 500;
}

/* =========================================================
   VALIDATION STYLE
   ========================================================= */

.is-invalid {
    border-color: #dc3545 !important;
}

.invalid-feedback {
    display: block;
    font-size: 14px;
}

/* =========================================================
   TOP RIGHT CUSTOM TOAST
   Used for validation alerts
   ========================================================= */

.custom-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 280px;
    max-width: 380px;
    background: #dc3545;
    color: #ffffff;
    padding: 14px 18px;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
    z-index: 9999;
    font-size: 15px;
    font-weight: 500;
    display: none;
    animation: slideInRight 0.3s ease;
}

.custom-toast.success {
    background: #198754;
}

.custom-toast.warning {
    background: #ffc107;
    color: #000000;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =========================================================
   FOOTER
   ========================================================= */

footer {
    background: #f8f9fa;
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
    margin-top: 40px;
}

footer p {
    margin: 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {
    .navbar-brand img {
        height: 45px;
    }

    .hero h1 {
        font-size: 2.4rem;
    }

    .hero p {
        font-size: 1.05rem;
    }

    .page-banner {
        height: 220px;
    }
}

@media (max-width: 767px) {
    .hero {
        height: 70vh;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .page-banner {
        height: 180px;
        margin-bottom: 30px;
    }

    .page-banner h1 {
        font-size: 24px;
    }

    .register-card {
        margin: 30px auto;
        padding: 25px;
    }

    .custom-toast {
        top: 15px;
        right: 15px;
        left: 15px;
        max-width: none;
        min-width: auto;
    }
}

/* =========================================================
   PASSWORD SHOW / HIDE FIELD
   ========================================================= */

.password-field-wrap {
    position: relative;
}

.password-field-wrap .form-control {
    padding-right: 46px;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    line-height: 1;
}

.password-toggle-btn:hover {
    color: #07166f;
}

.password-toggle-btn:focus {
    outline: none;
    box-shadow: none;
}

/* =========================================================
   LOGIN PAGE
   ========================================================= */

.login-card {
    max-width: 520px;
    margin: 50px auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.login-card .form-control {
    height: 42px;
}

.login-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.login-actions .btn {
    flex: 1;
    padding: 10px;
    font-weight: 500;
}

.btn-register-light {
    background: #eeeeee;
    color: #555555;
    border: none;
}

.btn-register-light:hover {
    background: #dddddd;
    color: #333333;
}

@media (max-width: 767px) {
    .login-card {
        margin: 30px auto;
        padding: 25px;
    }

    .login-actions {
        flex-direction: column;
    }
}

/* =========================================================
   END USER DASHBOARD
   ========================================================= */

.dashboard-wrapper {
    padding: 45px 0;
}

.dashboard-welcome-card,
.dashboard-section-card,
.dashboard-stat-card,
.dashboard-contribution-card,
.dashboard-webinar-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(13, 110, 253, 0.08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

.dashboard-welcome-card {
    padding: 35px;
    margin-bottom: 30px;
}

.dashboard-welcome-title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #16385c;
    text-align: left;
}

.dashboard-welcome-subtitle {
    font-size: 18px;
    color: #6c757d;
    margin-bottom: 0;
}

.dashboard-avatar {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd 0%, #16385c 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 700;
    margin-right: 22px;
    flex-shrink: 0;
}

.dashboard-stat-card {
    padding: 8px 8px;
    height: 100%;
    text-align: center;
    transition: all 0.25s ease;
}

.dashboard-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09);
}

.dashboard-stat-icon {
    font-size: 22px;
    margin-bottom: 12px;
}

.dashboard-stat-number {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #16385c;
}

.dashboard-stat-label {
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 0;
}

.stat-blue {
    color: #0d6efd;
}

.stat-purple {
    color: #8e44ad;
}

.stat-orange {
    color: #ff6b35;
}

.stat-green {
    color: #198754;
}

.dashboard-section-card {
    margin-top: 30px;
    overflow: hidden;
}

.dashboard-section-header {
    background: #16385c;
    color: #ffffff;
    padding: 16px 22px;
}

.dashboard-section-header h5 {
    color: #ffffff;
    margin: 0;
    font-weight: 600;
}

.dashboard-section-body {
    padding: 24px;
}

.dashboard-contribution-card {
    padding: 20px;
    height: 100%;
    border-left: 5px solid #ff6b35;
    transition: all 0.25s ease;
}

.dashboard-contribution-card:hover {
    transform: translateY(-3px);
}

.dashboard-contribution-title {
    color: #16385c;
    font-weight: 700;
    margin-bottom: 12px;
}

.dashboard-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    margin-right: 6px;
    margin-bottom: 6px;
}

.badge-webinar {
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

.badge-workshop {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.badge-tutorial {
    background: rgba(13, 202, 240, 0.12);
    color: #0aa2c0;
}

.badge-training {
    background: rgba(255, 193, 7, 0.18);
    color: #9a7100;
}

.badge-role {
    background: rgba(22, 56, 92, 0.1);
    color: #16385c;
}

.dashboard-webinar-card {
    padding: 18px;
    height: 100%;
    border-left: 5px solid #0d6efd;
}

.dashboard-webinar-title {
    color: #16385c;
    font-weight: 700;
    margin-bottom: 10px;
}

.dashboard-empty-state {
    text-align: center;
    padding: 45px 20px;
    color: #6c757d;
}

.dashboard-empty-state i {
    font-size: 44px;
    opacity: 0.35;
    margin-bottom: 12px;
}

.dashboard-modal-table td {
    padding: 8px 4px;
}

.upload-area {
    border: 2px dashed #ced4da;
    border-radius: 10px;
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.upload-area:hover {
    border-color: #0d6efd;
    background: #f8fbff;
}

.file-preview {
    display: none;
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    background: #f8f9fa;
}

@media (max-width: 767px) {
    .dashboard-wrapper {
        padding: 30px 0;
    }

    .dashboard-welcome-card {
        padding: 24px;
    }

    .dashboard-welcome-card .d-flex {
        align-items: flex-start !important;
    }

    .dashboard-avatar {
        width: 64px;
        height: 64px;
        font-size: 26px;
        margin-right: 15px;
    }

    .dashboard-welcome-title {
        font-size: 26px;
    }

    .dashboard-welcome-subtitle {
        font-size: 15px;
    }

    .dashboard-stat-number {
        font-size: 30px;
    }
}
/* =========================================================
   DASHBOARD WEBINAR / CONTRIBUTION IMAGE CARDS
   ========================================================= */

.dashboard-card-banner {
    width: 100%;
    height: 155px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 18px;
    background: #eef2f6;
}

.dashboard-card-title-spaced {
    margin-bottom: 14px;
    line-height: 1.45;
}

.dashboard-card-description {
    font-size: 0.86rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 0;
    max-width: 100%;
}

.dashboard-card-meta {
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid #edf0f3;
}

.dashboard-contribution-card,
.dashboard-webinar-card {
    overflow: hidden;
}

@media (max-width: 767px) {
    .dashboard-card-banner {
        height: 135px;
        margin-bottom: 14px;
    }

    .dashboard-card-description {
        font-size: 14px;
    }
}

/* =========================================================
   PUBLIC WEBINAR DETAILS PAGE - WIDER READABLE VERSION
   Add this at the bottom of assets/css/style.css
   ========================================================= */

.event-page-wrap {
    max-width: 960px;
    margin: 55px auto 80px;
    padding: 0 18px;
}

.event-layout {
    display: grid;
    grid-template-columns: minmax(0, 650px) 260px;
    gap: 28px;
    align-items: start;
    justify-content: center;
}

.event-main-card {
    width: 100%;
    background: transparent;
}

.event-hero-card {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #dbe2ec;
}

.event-hero-img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
}

.event-title-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 27, 112, 0.92);
    color: #ffffff;
    padding: 22px 24px 24px;
}

.event-title-overlay h1 {
    font-size: 30px;
    line-height: 1.24;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.1px;
}

.event-description {
    margin-top: 22px;
    color: #1f2937;
    font-size: 17px;
    line-height: 1.75;
    text-align: justify;
}

.event-action-btn {
    width: 100%;
    background: #07166f;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 13px 18px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 18px;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.event-action-btn:hover {
    background: #101f8f;
    color: #ffffff;
}

.event-action-btn:disabled {
    background: #7b8499;
    cursor: not-allowed;
}

/* Right details box */
.event-side-card {
    width: 260px;
    background: #f0f0f0;
    padding: 22px 18px 24px;
    min-height: 330px;
}

.event-passed {
    font-size: 14px;
    color: #5f6675;
    margin-bottom: 24px;
}

.event-side-heading {
    display: block;
    background: #07166f;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    padding: 7px 10px;
    margin-bottom: 12px;
    text-transform: uppercase;
    line-height: 1.15;
    letter-spacing: 0.4px;
}

.event-side-text {
    color: #1f2937;
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 14px;
}

.event-calendar-btn {
    display: block;
    background: #07166f;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    padding: 10px 10px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.event-calendar-btn:hover {
    color: #ffffff;
    background: #101f8f;
}

/* Meta tags below description */
.event-meta-line {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.event-meta-pill {
    background: #edf0ff;
    color: #07166f;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: 20px;
}

/* Speaker Section */
.speaker-section {
    width: 100%;
    max-width: 650px;
    margin-top: 45px;
    text-align: center;
}

.speaker-card-clean {
    margin-bottom: 42px;
}

.speaker-photo,
.speaker-placeholder {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    margin: 0 auto 16px;
    object-fit: cover;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18);
}

.speaker-placeholder {
    background: #07166f;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 700;
}

.speaker-name {
    font-size: 21px;
    font-weight: 600;
    color: #263047;
    margin-bottom: 4px;
}

.speaker-position {
    font-size: 15px;
    color: #6b7280;
    margin-bottom: 15px;
}

.speaker-bio {
    max-width: 560px;
    margin: 0 auto;
    color: #445066;
    font-size: 15px;
    line-height: 1.75;
    text-align: justify;
}

.speaker-role-badge {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.event-role-keynote {
    background: #fff3cd;
    color: #9a6500;
}

.event-role-moderator {
    background: #dff8eb;
    color: #08764a;
}

.event-role-speaker {
    background: #e6ecff;
    color: #07166f;
}

.event-toast {
    position: fixed;
    top: 95px;
    right: 22px;
    z-index: 9999;
    min-width: 280px;
    max-width: 390px;
    display: none;
}

/* Responsive */
@media (max-width: 991px) {
    .event-page-wrap {
        max-width: 760px;
    }

    .event-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .event-side-card {
        width: 100%;
    }

    .event-hero-img {
        height: 340px;
    }
}

@media (max-width: 576px) {
    .event-page-wrap {
        margin: 28px auto 50px;
        padding: 0 16px;
    }

    .event-hero-img {
        height: 250px;
    }

    .event-title-overlay {
        padding: 16px 17px 18px;
    }

    .event-title-overlay h1 {
        font-size: 22px;
        line-height: 1.25;
    }

    .event-description {
        font-size: 15px;
        line-height: 1.65;
    }

    .event-side-heading {
        font-size: 15px;
    }

    .event-side-text {
        font-size: 14px;
    }

    .speaker-name {
        font-size: 18px;
    }

    .speaker-bio {
        font-size: 14px;
    }
}

.dashboard-read-more-link {
    display: inline;
    color: #0f365f;
    font-weight: 800;
    text-decoration: none;
    margin-left: 4px;
    white-space: nowrap;
}
.dashboard-read-more-link:hover {
    color: #0f365f;
    text-decoration: underline;
}

.dashboard-avatar {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #003b78);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(13, 110, 253, 0.25);
    border: 4px solid #ffffff;
}

.dashboard-avatar-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

.dashboard-avatar-letter {
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}
/* ================================
   Member Dashboard Contribution Cards
================================ */

.dashboard-section-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    margin-top: 28px;
    overflow: hidden;
}

.dashboard-section-header {
    background: #143c63;
    color: #ffffff;
    padding: 14px 20px;
}

.dashboard-section-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
}

.dashboard-section-body {
    padding: 24px;
}

.dashboard-card-grid {
    align-items: stretch;
}

.dashboard-contribution-card {
    background: #ffffff;
    border: 1px solid #e5edf6;
    border-left: 5px solid #ff5a2c;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    transition: all 0.25s ease;
}

.dashboard-contribution-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
}

.dashboard-card-image-link {
    display: block;
    text-decoration: none;
}

.dashboard-card-banner {
    width: 100%;
    height: 165px;
    display: block;
    object-fit: cover;
    border-radius: 0;
}

.dashboard-contribution-content {
    padding: 18px 18px 12px;
    flex: 1;
}

.dashboard-contribution-title {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.45;
    color: #0f365f;
}

.dashboard-contribution-title a {
    color: inherit;
    text-decoration: none;
}

.dashboard-contribution-title a:hover {
    color: #0d6efd;
}

.dashboard-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.dashboard-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.badge-webinar {
    background: #e8f1ff;
    color: #0d6efd;
}

.badge-workshop {
    background: #fff4e6;
    color: #e8590c;
}

.badge-training {
    background: #e8f8ef;
    color: #0f8a4b;
}

.badge-tutorial {
    background: #f2e8ff;
    color: #7b2cbf;
}

.badge-role {
    background: #edf2f7;
    color: #334155;
}

.dashboard-card-topic {
    font-size: 0.86rem;
    color: #334155;
    margin-bottom: 12px;
    line-height: 1.6;
}

.dashboard-card-description {
    font-size: 0.86rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 0;
}

.dashboard-read-more-link {
    color: #0f365f;
    font-weight: 800;
    text-decoration: none;
    margin-left: 4px;
    white-space: nowrap;
}

.dashboard-read-more-link:hover {
    color: #0d6efd;
    text-decoration: underline;
}

.dashboard-card-meta {
    border-top: 1px solid #edf2f7;
    padding: 14px 18px 16px;
    background: #fbfdff;
}

.dashboard-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 0.84rem;
    margin-bottom: 8px;
}

.dashboard-meta-item i {
    width: 16px;
    color: #475569;
}

.dashboard-meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* Mobile */
@media (max-width: 767px) {
    .dashboard-section-body {
        padding: 16px;
    }

    .dashboard-card-banner {
        height: 180px;
    }

    .dashboard-contribution-content {
        padding: 16px;
    }

    .dashboard-contribution-title {
        font-size: 0.98rem;
    }
}

.dashboard-card-description {
    font-size: 0.86rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 0;
    max-width: 100%;
}

.dashboard-read-more-link {
    display: inline;
    color: #64748b;
    font-weight: 800;
    text-decoration: none;
    margin-left: 4px;
    white-space: nowrap;
}

.dashboard-read-more-link:hover {
    color: #64748b;
    text-decoration: underline;
}
/* =========================================================
   DIGITAL COURSE COMPACT CARD FIX
   Image + title + progress + compact action only
   ========================================================= */

.digital-course-grid {
    justify-content: flex-start;
}

/* Main compact card */
.digital-course-card {
    border-left: 5px solid #0d6efd !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Remove excessive card height behavior */
.digital-course-card:hover {
    transform: translateY(-3px);
}

/* Thumbnail area */
.digital-course-image-wrap {
    position: relative;
    display: block;
    height: 190px;
    background: #eef2f6;
    overflow: hidden;
}

.digital-course-image {
    width: 100%;
    height: 190px !important;
    object-fit: cover;
    display: block;
}

/* Play icon */
.digital-course-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.digital-course-play span {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #e83d55;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
}

/* Compact content under image */
.digital-course-content {
    position: relative;
    padding: 18px 16px 16px !important;
    flex: none !important;
    min-height: 92px;
}

/* Title should stay compact */
.digital-course-title {
    color: #0f365f;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    margin: 0 120px 10px 0 !important;

    display: -webkit-box;
    /* -webkit-line-clamp: 2; */
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;
}

.digital-course-title a {
    color: inherit;
    text-decoration: none;
}

.digital-course-title a:hover {
    color: #0d6efd;
}

/* Completion tick position — green box area */
/* Completed tick badge */
.digital-course-compact-status {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #198754;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(25, 135, 84, 0.28);
}

.digital-course-compact-status i {
    color: #ffffff;
    font-size: 13px;
    line-height: 1;
}

/* Not completed badge */
.digital-course-compact-status.not-completed {
    background: #e9eef5;
    color: #94a3b8;
    box-shadow: none;
}

.digital-course-compact-status.not-completed i {
    color: #94a3b8;
}

/* Start / Continue / Review button — blue box area */
.digital-course-compact-action {
    position: absolute;
    right: 16px;
    bottom: 12px;
}

.digital-course-compact-action .btn {
    min-width: 88px;
    height: 30px;
    padding: 5px 10px !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Progress bar under title — blue line area */
.digital-course-compact-progress {
    width: calc(100% - 120px);
    height: 5px;
    background: #e6edf7;
    border-radius: 999px;
    overflow: hidden;
}

.digital-course-compact-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #0d6efd;
}

/* Hide old large sections if still present */
.digital-course-meta,
.digital-course-badges,
.digital-course-description,
.digital-course-progress-wrap,
.digital-course-meta-row,
.digital-course-actions {
    display: none !important;
}

/* Make card tighter on mobile */
@media (max-width: 767px) {
    .digital-course-image-wrap,
    .digital-course-image {
        height: 180px !important;
    }

    .digital-course-title {
        margin-right: 105px !important;
        font-size: 0.95rem !important;
    }

    .digital-course-compact-action .btn {
        min-width: 78px;
        font-size: 11px !important;
    }

    .digital-course-compact-progress {
        width: calc(100% - 105px);
    }
}

/* =========================================================
   ESGIRS MEMBER DASHBOARD + DIGITAL LEARNING STAT CARDS
   Compact white cards with colored left accent bar
   ========================================================= */

/* Shared stat row spacing */
.dashboard-wrapper section.row.g-4,
.digital-learning-page .row.g-3.mb-4 {
    align-items: stretch;
}

/* Member dashboard stat card */
.dashboard-wrapper .dashboard-stat-card {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
    padding: 16px 20px 14px !important;
    min-height: 92px !important;
    height: 100% !important;
    text-align: left !important;
    overflow: hidden !important;
    transition: all 0.22s ease !important;
}

/* Digital learning stat card */
.digital-learning-page .digital-learning-stat-card {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
    padding: 16px 20px 14px !important;
    min-height: 92px !important;
    height: 100% !important;
    text-align: left !important;
    overflow: hidden !important;
    transition: all 0.22s ease !important;
    border-left: none !important;
}

/* Hover */
.dashboard-wrapper .dashboard-stat-card:hover,
.digital-learning-page .digital-learning-stat-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.09) !important;
}

/* Left accent bar - shared */
.dashboard-wrapper .dashboard-stat-card::before,
.digital-learning-page .digital-learning-stat-card::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 5px !important;
    border-radius: 14px 0 0 14px !important;
    background: #0d6efd !important;
}

/* Hide old stat icons if empty/commented */
.dashboard-wrapper .dashboard-stat-icon {
    display: none !important;
}

/* Number styling - dashboard */
.dashboard-wrapper .dashboard-stat-number {
    color: #12385f !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    margin: 0 0 16px !important;
    text-align: left !important;
}

/* Number styling - digital learning */
.digital-learning-page .digital-learning-stat-number {
    color: #12385f !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    margin: 0 0 16px !important;
    text-align: left !important;
}

/* Label styling - dashboard */
.dashboard-wrapper .dashboard-stat-label {
    color: #53627a !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: 0.35px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Label styling - digital learning */
.digital-learning-page .digital-learning-stat-label {
    color: #53627a !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: 0.35px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Dashboard stat accent colors */
.dashboard-wrapper section.row.g-4 > div:nth-child(1) .dashboard-stat-card::before {
    background: #0d6efd !important;
}

.dashboard-wrapper section.row.g-4 > div:nth-child(2) .dashboard-stat-card::before {
    background: #198754 !important;
}

.dashboard-wrapper section.row.g-4 > div:nth-child(3) .dashboard-stat-card::before {
    background: #fd7e14 !important;
}

.dashboard-wrapper section.row.g-4 > div:nth-child(4) .dashboard-stat-card::before {
    background: #6f42c1 !important;
}

/* Digital learning stat accent colors */
.digital-learning-page .digital-stat-blue::before {
    background: #0d6efd !important;
}

.digital-learning-page .digital-stat-green::before {
    background: #198754 !important;
}

.digital-learning-page .digital-stat-orange::before {
    background: #fd7e14 !important;
}

.digital-learning-page .digital-stat-purple::before {
    background: #6f42c1 !important;
}

/* Better spacing on digital learning stats row */
.digital-learning-page .row.g-3.mb-4 {
    margin-bottom: 22px !important;
}

/* Mobile */
@media (max-width: 767px) {
    .dashboard-wrapper .dashboard-stat-card,
    .digital-learning-page .digital-learning-stat-card {
        min-height: 86px !important;
        padding: 15px 18px 13px !important;
        border-radius: 13px !important;
    }

    .dashboard-wrapper .dashboard-stat-card::before,
    .digital-learning-page .digital-learning-stat-card::before {
        width: 5px !important;
        border-radius: 13px 0 0 13px !important;
    }

    .dashboard-wrapper .dashboard-stat-number,
    .digital-learning-page .digital-learning-stat-number {
        font-size: 25px !important;
        margin-bottom: 13px !important;
    }

    .dashboard-wrapper .dashboard-stat-label,
    .digital-learning-page .digital-learning-stat-label {
        font-size: 10px !important;
    }
}

/* =========================================================
   MEMBER PROFILE MODAL - WIDE CLEAN LAYOUT
   ========================================================= */

.dashboard-profile-modal {
    border: none;
    border-radius: 16px;
    overflow: hidden;
}

.dashboard-profile-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

.dashboard-profile-side {
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    border: 1px solid #e3edf8;
    border-radius: 14px;
    padding: 24px 18px;
    text-align: center;
}

.dashboard-profile-avatar {
    width: 108px !important;
    height: 108px !important;
    min-width: 108px !important;
    margin-right: auto !important;
    border: 5px solid #ffffff;
    box-shadow: 0 12px 28px rgba(13, 110, 253, 0.22);
}

.dashboard-profile-name {
    color: #16385c;
    font-size: 1.25rem;
    font-weight: 900;
    margin: 10px 0 5px;
}

.dashboard-profile-position {
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.dashboard-profile-org {
    color: #475569;
    font-size: 0.88rem;
    margin-bottom: 14px;
}

.dashboard-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
}

.dashboard-profile-details {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dashboard-profile-section {
    border: 1px solid #e8eef6;
    border-radius: 14px;
    background: #ffffff;
    padding: 18px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.dashboard-profile-section h6 {
    color: #16385c;
    font-size: 0.98rem;
    font-weight: 900;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf2f7;
}

.dashboard-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-profile-item {
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 10px;
    padding: 12px 13px;
    min-height: 72px;
}

.dashboard-profile-item span {
    display: block;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.25px;
    margin-bottom: 6px;
}

.dashboard-profile-item strong {
    color: #16385c;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.35;
    word-break: break-word;
}

.dashboard-profile-summary {
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 10px;
    padding: 14px;
    color: #475569;
    line-height: 1.7;
    min-height: 70px;
}

/* Photo preview in edit profile modal */
.profile-photo-preview-box {
    display: none;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #e5edf6;
    border-radius: 12px;
    background: #f8fafc;
    align-items: center;
    gap: 12px;
}

.profile-photo-preview-box.show {
    display: flex;
}

.profile-photo-preview-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ffffff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
}

.profile-photo-preview-name {
    color: #475569;
    font-size: 0.88rem;
    font-weight: 800;
    word-break: break-word;
}

@media (max-width: 991px) {
    .dashboard-profile-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .dashboard-profile-section {
        padding: 15px;
    }
}
/* =========================================================
   MEMBER CERTIFICATES MODAL FILTER + CARDS
   ========================================================= */

.certificate-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.certificate-filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border-radius: 999px;
    background: #edf2f7;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 900;
    text-decoration: none;
    transition: all 0.2s ease;
}

.certificate-filter-pill:hover {
    background: #e8f1ff;
    color: #0d6efd;
}

.certificate-filter-pill.active {
    background: #0d6efd;
    color: #ffffff;
}

.certificate-group-title {
    color: #16385c;
    font-size: 1rem;
    font-weight: 900;
    margin: 6px 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf2f7;
}

.dashboard-certificate-card {
    height: 100%;
    background: #ffffff;
    border: 1px solid #e5edf6;
    border-left: 5px solid #0d6efd;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    transition: all 0.25s ease;
}

.dashboard-certificate-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.11);
}

.dashboard-certificate-banner {
    width: 100%;
    height: 165px;
    display: block;
    object-fit: cover;
    background: #eef2f6;
}

.dashboard-certificate-content {
    padding: 18px;
}

.dashboard-certificate-type {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 12px;
    background: #e8f1ff;
    color: #0d6efd;
}

.dashboard-certificate-type.e-learning {
    background: #e8f8ef;
    color: #198754;
}

.dashboard-certificate-type.webinar {
    background: #e8f1ff;
    color: #0d6efd;
}

.dashboard-certificate-type.workshop {
    background: #fff4e6;
    color: #e8590c;
}

.dashboard-certificate-type.tutorial {
    background: #f2e8ff;
    color: #7b2cbf;
}

.dashboard-certificate-type.training {
    background: #e7f9fb;
    color: #0aa2c0;
}

@media (max-width: 767px) {
    .dashboard-certificate-banner {
        height: 180px;
    }

    .dashboard-certificate-content {
        padding: 16px;
    }
}
/* =========================================================
   MEMBER DASHBOARD HORIZONTAL CARDS
   Webinar attendance + contributions
   Matches admin horizontal event list style
   ========================================================= */

.dashboard-horizontal-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Main horizontal card */
.dashboard-horizontal-card {
    background: #ffffff;
    border: 1px solid #e4e8ee;
    border-radius: 10px;
    padding: 14px;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 150px;
    gap: 18px;
    align-items: stretch;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05);
    transition: all 0.22s ease;
}

.dashboard-horizontal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.10);
}

/* Different accent feel for contribution cards */
.dashboard-contribution-horizontal-card {
    border-left: 5px solid #ff5a2c;
}

.dashboard-attendance-horizontal-card {
    border-left: 5px solid #0d6efd;
}

/* Image */
.dashboard-horizontal-image-wrap {
    display: block;
    width: 100%;
    height: 170px;
    border-radius: 9px;
    overflow: hidden;
    text-decoration: none;
    background: #eef2f6;
}

.dashboard-horizontal-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.dashboard-horizontal-image-wrap:hover .dashboard-horizontal-image {
    transform: scale(1.035);
    filter: brightness(0.96);
}

.dashboard-horizontal-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.10), rgba(22, 56, 92, 0.16));
    color: #16385c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
}

.dashboard-contribution-placeholder {
    background: linear-gradient(135deg, rgba(255, 90, 44, 0.12), rgba(22, 56, 92, 0.12));
    color: #ff5a2c;
}

/* Content */
.dashboard-horizontal-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 2px 0;
}

.dashboard-horizontal-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

/* Badge row adjustment */
.dashboard-horizontal-card .dashboard-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dashboard-horizontal-card .dashboard-badge {
    font-size: 11.5px;
    padding: 5px 9px;
}

/* Extra status badges */
.dashboard-status-success {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.dashboard-status-warning {
    background: rgba(255, 193, 7, 0.18);
    color: #9a7100;
}

.dashboard-status-danger {
    background: rgba(220, 53, 69, 0.10);
    color: #dc3545;
}

.dashboard-status-info {
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

.dashboard-certificate-issued-badge {
    background: rgba(111, 66, 193, 0.12);
    color: #6f42c1;
}

/* Title */
.dashboard-horizontal-title {
    margin: 0 0 7px;
    color: #07166f;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 800;
    text-align: left;
}

.dashboard-horizontal-title a {
    color: #07166f;
    text-decoration: none;
}

.dashboard-horizontal-title a:hover {
    color: #0d6efd;
    text-decoration: underline;
}

/* Topic */
.dashboard-horizontal-topic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 7px;
}

.dashboard-horizontal-topic i {
    color: #07166f;
}

/* Description */
.dashboard-horizontal-description {
    color: #1f2937;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 10px;
    text-align: justify;
    text-justify: inter-word;
}

.dashboard-horizontal-read-more {
    color: #07166f;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    margin-left: 5px;
    white-space: nowrap;
}

.dashboard-horizontal-read-more:hover {
    color: #0d6efd;
    text-decoration: underline;
}

/* Meta row */
.dashboard-horizontal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin-top: auto;
    color: #5f6675;
    font-size: 13px;
    font-weight: 700;
}

.dashboard-horizontal-meta span,
.dashboard-horizontal-meta a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dashboard-horizontal-meta i {
    color: #07166f;
}

.dashboard-horizontal-recording-link {
    color: #dc3545;
    text-decoration: none;
    font-weight: 800;
}

.dashboard-horizontal-recording-link i {
    color: #ff0000;
}

.dashboard-horizontal-recording-link:hover {
    color: #b02a37;
    text-decoration: underline;
}

/* Date box */
.dashboard-horizontal-date-box {
    background: #07166f;
    color: #ffffff;
    border-radius: 9px;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    text-decoration: none;
    min-height: 170px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.dashboard-horizontal-date-box:hover {
    background: #101f8f;
    color: #ffffff;
    transform: translateY(-1px);
}

.dashboard-contribution-date-box {
    background: #16385c;
}

.dashboard-contribution-date-box:hover {
    background: #0f2d4d;
}

.dashboard-horizontal-day {
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
    color: #ffffff;
}

.dashboard-horizontal-month {
    font-size: 16px;
    line-height: 1.15;
    font-weight: 800;
    color: #ffffff;
}

.dashboard-horizontal-year {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
}

.dashboard-horizontal-time {
    margin-top: 16px;
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Responsive */
@media (max-width: 991px) {
    .dashboard-horizontal-card {
        grid-template-columns: 210px minmax(0, 1fr) 130px;
        gap: 14px;
    }

    .dashboard-horizontal-image-wrap,
    .dashboard-horizontal-date-box {
        height: 165px;
        min-height: 165px;
    }

    .dashboard-horizontal-title {
        font-size: 16px;
    }

    .dashboard-horizontal-description {
        font-size: 13.5px;
    }

    .dashboard-horizontal-day {
        font-size: 30px;
    }

    .dashboard-horizontal-month {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .dashboard-horizontal-card {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .dashboard-horizontal-image-wrap {
        height: 190px;
    }

    .dashboard-horizontal-date-box {
        min-height: auto;
        height: auto;
        padding: 14px 12px;
        display: grid;
        grid-template-columns: auto auto auto 1fr;
        justify-content: start;
        gap: 8px;
        text-align: left;
    }

    .dashboard-horizontal-day {
        font-size: 28px;
    }

    .dashboard-horizontal-month,
    .dashboard-horizontal-year {
        font-size: 14px;
        margin-top: 0;
        align-self: center;
    }

    .dashboard-horizontal-time {
        margin-top: 0;
        justify-self: end;
        align-self: center;
        font-size: 11px;
    }

    .dashboard-horizontal-top {
        align-items: flex-start;
    }

    .dashboard-horizontal-meta {
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .dashboard-horizontal-date-box {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .dashboard-horizontal-time {
        justify-self: center;
    }
}
/* =========================================================
   E-LEARNING CERTIFICATE TYPES
   Digital courses + past webinar recordings
   ========================================================= */

.dashboard-certificate-type.webinar-recording {
    background: rgba(220, 53, 69, 0.10);
    color: #dc3545;
}

.dashboard-certificate-type.webinar-recording i {
    color: #dc3545;
}

/* Existing event-type colors can be reused */
.dashboard-certificate-type.workshop {
    background: #fff4e6;
    color: #e8590c;
}

.dashboard-certificate-type.training {
    background: #e8f8ef;
    color: #0f8a4b;
}

.dashboard-certificate-type.tutorial {
    background: #f2e8ff;
    color: #7b2cbf;
}

.dashboard-certificate-type.webinar {
    background: #e8f1ff;
    color: #0d6efd;
}

/* =========================================================
   MODERN MEMBER DASHBOARD REDESIGN
   Horizontal event cards + year tabs
   ========================================================= */

.dashboard-wrapper {
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.08), transparent 34%),
        linear-gradient(180deg, #f7f9fc 0%, #f4f6fa 100%);
}

/* Welcome card refresh */
.dashboard-welcome-card {
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,251,255,0.98)) !important;
    overflow: hidden;
    position: relative;
}

.dashboard-welcome-card::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(13, 110, 253, 0.07);
}

.dashboard-welcome-title {
    color: #0f2f57 !important;
    font-weight: 900 !important;
}

.dashboard-welcome-subtitle {
    color: #64748b !important;
    font-weight: 700;
}

/* Modern stat cards */
.dashboard-modern-stats {
    margin-bottom: 34px;
}

.dashboard-modern-stat-card {
    position: relative;
    height: 100%;
    min-height: 112px;
    background: #ffffff;
    border: 1px solid #e7edf5;
    border-radius: 18px;
    padding: 18px 16px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
    display: flex;
    align-items: center;
    gap: 13px;
    overflow: hidden;
    transition: all 0.22s ease;
}

.dashboard-modern-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.11);
}

.dashboard-modern-stat-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: #0d6efd;
}

.dashboard-modern-stat-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef5ff;
    color: #0d6efd;
    font-size: 18px;
}

.dashboard-modern-stat-number {
    color: #0f2f57;
    font-size: 28px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 9px;
}

.dashboard-modern-stat-label {
    color: #64748b;
    font-size: 10.5px;
    line-height: 1.25;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    margin: 0;
}

.stat-accent-blue::before,
.stat-accent-blue .dashboard-modern-stat-icon {
    color: #0d6efd;
}

.stat-accent-blue::before {
    background: #0d6efd;
}

.stat-accent-green::before {
    background: #198754;
}

.stat-accent-green .dashboard-modern-stat-icon {
    background: #e8f8ef;
    color: #198754;
}

.stat-accent-orange::before {
    background: #fd7e14;
}

.stat-accent-orange .dashboard-modern-stat-icon {
    background: #fff4e6;
    color: #fd7e14;
}

.stat-accent-purple::before {
    background: #6f42c1;
}

.stat-accent-purple .dashboard-modern-stat-icon {
    background: #f3edff;
    color: #6f42c1;
}

.stat-accent-cyan::before {
    background: #0aa2c0;
}

.stat-accent-cyan .dashboard-modern-stat-icon {
    background: #e7f9fb;
    color: #0aa2c0;
}

.stat-accent-navy::before {
    background: #16385c;
}

.stat-accent-navy .dashboard-modern-stat-icon {
    background: #edf4fb;
    color: #16385c;
}

/* Main dashboard modern section */
.dashboard-modern-section {
    margin-top: 34px;
    background: #ffffff;
    border: 1px solid #e7edf5;
    border-radius: 20px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.dashboard-modern-section-header {
    background: #16385c;
    color: #ffffff;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.dashboard-modern-section-header h5 {
    color: #ffffff;
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 950;
    display: flex;
    align-items: center;
}

.dashboard-modern-section-header p {
    color: rgba(255,255,255,0.76);
    margin: 0;
    font-size: 0.84rem;
    font-weight: 600;
}

.dashboard-section-count {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 11px;
    background: #ffffff;
    color: #16385c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.dashboard-modern-section-body {
    padding: 22px;
}

/* Year tabs */
.dashboard-year-tabs {
    justify-content: center;
    gap: 0;
    border-bottom: 1px solid #dbe4ef;
    margin: -2px 0 22px;
}

.dashboard-year-tabs .nav-item {
    margin-bottom: -1px;
}

.dashboard-year-tabs .nav-link {
    border: 1px solid #dbe4ef !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #16385c !important;
    min-width: 74px;
    padding: 12px 18px;
    font-size: 0.82rem;
    font-weight: 950;
}

.dashboard-year-tabs .nav-link.active {
    background: #f8fbff !important;
    color: #07166f !important;
    position: relative;
}

.dashboard-year-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #f8fbff;
}

.dashboard-year-tab-content {
    margin-top: 0;
}

/* Event card list */
.dashboard-event-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dashboard-event-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e7edf5;
    border-radius: 16px;
    padding: 14px;
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr) 132px;
    gap: 18px;
    align-items: stretch;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.055);
    transition: all 0.22s ease;
}

.dashboard-event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.105);
}

.dashboard-attendance-event-card {
    border-left: 5px solid #0d6efd;
}

.dashboard-contribution-event-card {
    border-left: 5px solid #ff5a2c;
}

.dashboard-event-card::after {
    content: "\f142";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 154px;
    top: 14px;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #f8fafc;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.dashboard-event-image-wrap {
    display: block;
    width: 100%;
    height: 158px;
    border-radius: 12px;
    overflow: hidden;
    background: #eef2f6;
    text-decoration: none;
}

.dashboard-event-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.dashboard-event-image-wrap:hover .dashboard-event-image {
    transform: scale(1.035);
    filter: brightness(0.96);
}

.dashboard-event-content {
    min-width: 0;
    padding: 2px 0;
    display: flex;
    flex-direction: column;
}

.dashboard-event-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding-right: 34px;
    margin-bottom: 9px;
}

.dashboard-event-badges .dashboard-badge {
    margin: 0;
    font-size: 11px;
    padding: 6px 10px;
}

.badge-certificate-ready {
    background: rgba(111, 66, 193, 0.12);
    color: #6f42c1;
}

.badge-featured {
    background: rgba(255, 193, 7, 0.22);
    color: #936500;
}

.dashboard-event-title {
    margin: 0 0 8px;
    font-size: 1rem;
    line-height: 1.38;
    font-weight: 950;
    color: #07166f;
    text-align: left;
}

.dashboard-event-title a {
    color: inherit;
    text-decoration: none;
}

.dashboard-event-title a:hover {
    color: #0d6efd;
    text-decoration: underline;
}

.dashboard-event-topic {
    color: #334155;
    font-size: 0.83rem;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 7px;
}

.dashboard-event-topic i {
    color: #fd7e14;
    margin-right: 5px;
}

.dashboard-event-description {
    color: #263244;
    font-size: 0.86rem;
    line-height: 1.62;
    margin: 0 0 10px;
    text-align: justify;
}

.dashboard-event-read-more {
    color: #07166f;
    font-weight: 950;
    text-decoration: none;
    margin-left: 4px;
    white-space: nowrap;
}

.dashboard-event-read-more:hover {
    color: #0d6efd;
    text-decoration: underline;
}

.dashboard-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 800;
    margin-top: auto;
}

.dashboard-event-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dashboard-event-meta i {
    color: #16385c;
}

.dashboard-event-progress {
    width: 100%;
    height: 6px;
    background: #e8eef6;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 10px;
}

.dashboard-event-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #198754, #20c997);
    border-radius: inherit;
}

.dashboard-event-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.dashboard-event-actions .btn {
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 900;
    padding: 6px 10px;
}

/* Date box */
.dashboard-event-date-box {
    background: #07166f;
    color: #ffffff;
    border-radius: 12px;
    padding: 14px 10px;
    min-height: 158px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    text-decoration: none;
    transition: all 0.22s ease;
}

.dashboard-event-date-box:hover {
    background: #101f8f;
    color: #ffffff;
    transform: translateY(-1px);
}

.contribution-date-box {
    background: #16385c;
}

.contribution-date-box:hover {
    background: #0f2d4d;
}

.dashboard-event-day {
    color: #ffffff;
    font-size: 33px;
    line-height: 1;
    font-weight: 950;
}

.dashboard-event-month {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.15;
    font-weight: 950;
}

.dashboard-event-year {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.15;
    font-weight: 850;
}

.dashboard-event-time {
    color: #ffffff;
    margin-top: 14px;
    font-size: 10.5px;
    line-height: 1.25;
    font-weight: 950;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Mobile responsiveness */
@media (max-width: 991px) {
    .dashboard-event-card {
        grid-template-columns: 220px minmax(0, 1fr) 120px;
        gap: 14px;
    }

    .dashboard-event-card::after {
        right: 140px;
    }

    .dashboard-event-image-wrap,
    .dashboard-event-date-box {
        height: 155px;
        min-height: 155px;
    }

    .dashboard-event-title {
        font-size: 0.95rem;
    }

    .dashboard-event-description {
        font-size: 0.82rem;
    }
}

@media (max-width: 767px) {
    .dashboard-modern-section-header {
        align-items: flex-start;
    }

    .dashboard-modern-section-body {
        padding: 16px;
    }

    .dashboard-year-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 1px;
    }

    .dashboard-year-tabs .nav-link {
        min-width: 70px;
        padding: 10px 15px;
    }

    .dashboard-event-card {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .dashboard-event-card::after {
        right: 18px;
        top: 18px;
    }

    .dashboard-event-image-wrap {
        height: 190px;
    }

    .dashboard-event-date-box {
        min-height: auto;
        height: auto;
        padding: 13px 14px;
        display: grid;
        grid-template-columns: auto auto auto 1fr;
        align-items: center;
        justify-content: start;
        text-align: left;
        gap: 8px;
    }

    .dashboard-event-day {
        font-size: 28px;
    }

    .dashboard-event-month,
    .dashboard-event-year {
        font-size: 14px;
    }

    .dashboard-event-time {
        margin-top: 0;
        justify-self: end;
        font-size: 10.5px;
    }

    .dashboard-event-badges {
        padding-right: 34px;
    }

    .dashboard-event-description {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .dashboard-modern-stat-card {
        min-height: 96px;
    }

    .dashboard-event-date-box {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .dashboard-event-time {
        justify-self: center;
    }
}
/* =========================================================
   MEMBER DASHBOARD FINAL MODERN LAYOUT
   Upcoming events + compact courses + horizontal cards
   ========================================================= */

.dashboard-wrapper {
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.08), transparent 34%),
        linear-gradient(180deg, #f7f9fc 0%, #f4f6fa 100%);
}

/* Welcome */
.dashboard-welcome-card {
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,251,255,0.98)) !important;
    overflow: hidden;
    position: relative;
}

.dashboard-welcome-card::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(13, 110, 253, 0.07);
}

.dashboard-welcome-title {
    color: #0f2f57 !important;
    font-weight: 900 !important;
}

.dashboard-welcome-subtitle {
    color: #64748b !important;
    font-weight: 700;
}

/* Stats */
.dashboard-modern-stats {
    margin-bottom: 34px;
}

.dashboard-modern-stat-card {
    position: relative;
    height: 100%;
    min-height: 112px;
    background: #ffffff;
    border: 1px solid #e7edf5;
    border-radius: 18px;
    padding: 18px 16px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
    display: flex;
    align-items: center;
    gap: 13px;
    overflow: hidden;
    transition: all 0.22s ease;
}

.dashboard-modern-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.11);
}

.dashboard-modern-stat-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: #0d6efd;
}

.dashboard-modern-stat-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef5ff;
    color: #0d6efd;
    font-size: 18px;
}

.dashboard-modern-stat-number {
    color: #0f2f57;
    font-size: 28px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 9px;
}

.dashboard-modern-stat-label {
    color: #64748b;
    font-size: 10.5px;
    line-height: 1.25;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    margin: 0;
}

.stat-accent-blue::before {
    background: #0d6efd;
}

.stat-accent-green::before {
    background: #198754;
}

.stat-accent-green .dashboard-modern-stat-icon {
    background: #e8f8ef;
    color: #198754;
}

.stat-accent-orange::before {
    background: #fd7e14;
}

.stat-accent-orange .dashboard-modern-stat-icon {
    background: #fff4e6;
    color: #fd7e14;
}

.stat-accent-purple::before {
    background: #6f42c1;
}

.stat-accent-purple .dashboard-modern-stat-icon {
    background: #f3edff;
    color: #6f42c1;
}

.stat-accent-cyan::before {
    background: #0aa2c0;
}

.stat-accent-cyan .dashboard-modern-stat-icon {
    background: #e7f9fb;
    color: #0aa2c0;
}

.stat-accent-navy::before {
    background: #16385c;
}

.stat-accent-navy .dashboard-modern-stat-icon {
    background: #edf4fb;
    color: #16385c;
}

/* Sections */
.dashboard-modern-section {
    margin-top: 34px;
    background: #ffffff;
    border: 1px solid #e7edf5;
    border-radius: 20px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.dashboard-modern-section-header {
    background: #16385c;
    color: #ffffff;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.dashboard-modern-section-header h5 {
    color: #ffffff;
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 950;
    display: flex;
    align-items: center;
}

.dashboard-modern-section-header p {
    color: rgba(255,255,255,0.76);
    margin: 0;
    font-size: 0.84rem;
    font-weight: 600;
}

.dashboard-section-count {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 11px;
    background: #ffffff;
    color: #16385c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.dashboard-modern-section-body {
    padding: 22px;
}

/* Year tabs */
.dashboard-year-tabs {
    justify-content: center;
    border-bottom: 1px solid #dbe4ef;
    margin: -2px 0 22px;
}

.dashboard-year-tabs .nav-item {
    margin-bottom: -1px;
}

.dashboard-year-tabs .nav-link {
    border: 1px solid #dbe4ef !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #16385c !important;
    min-width: 74px;
    padding: 12px 18px;
    font-size: 0.82rem;
    font-weight: 950;
}

.dashboard-year-tabs .nav-link.active {
    background: #f8fbff !important;
    color: #07166f !important;
}

/* Horizontal event cards */
.dashboard-event-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dashboard-event-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e7edf5;
    border-radius: 16px;
    padding: 14px;
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr) 132px;
    gap: 18px;
    align-items: stretch;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.055);
    transition: all 0.22s ease;
}

.dashboard-event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.105);
}

.dashboard-upcoming-event-card {
    border-left: 5px solid #07166f;
}

.dashboard-attendance-event-card {
    border-left: 5px solid #0d6efd;
}

.dashboard-contribution-event-card {
    border-left: 5px solid #ff5a2c;
}

.dashboard-event-card::after {
    content: "\f142";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 154px;
    top: 14px;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #f8fafc;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.dashboard-event-image-wrap {
    display: block;
    width: 100%;
    height: 158px;
    border-radius: 12px;
    overflow: hidden;
    background: #eef2f6;
    text-decoration: none;
}

.dashboard-event-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.dashboard-event-image-wrap:hover .dashboard-event-image {
    transform: scale(1.035);
    filter: brightness(0.96);
}

.dashboard-event-content {
    min-width: 0;
    padding: 2px 0;
    display: flex;
    flex-direction: column;
}

.dashboard-event-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding-right: 34px;
    margin-bottom: 9px;
}

.dashboard-event-badges .dashboard-badge {
    margin: 0;
    font-size: 11px;
    padding: 6px 10px;
}

.dashboard-status-info {
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

.badge-certificate-ready {
    background: rgba(111, 66, 193, 0.12);
    color: #6f42c1;
}

.badge-featured {
    background: rgba(255, 193, 7, 0.22);
    color: #936500;
}

.dashboard-event-title {
    margin: 0 0 8px;
    font-size: 1rem;
    line-height: 1.38;
    font-weight: 950;
    color: #07166f;
    text-align: left;
}

.dashboard-event-title a {
    color: inherit;
    text-decoration: none;
}

.dashboard-event-title a:hover {
    color: #0d6efd;
    text-decoration: underline;
}

.dashboard-event-topic {
    color: #334155;
    font-size: 0.83rem;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 7px;
}

.dashboard-event-topic i {
    color: #fd7e14;
    margin-right: 5px;
}

.dashboard-event-description {
    color: #263244;
    font-size: 0.86rem;
    line-height: 1.62;
    margin: 0 0 10px;
    text-align: justify;
}

.dashboard-event-read-more {
    color: #07166f;
    font-weight: 950;
    text-decoration: none;
    margin-left: 4px;
    white-space: nowrap;
}

.dashboard-event-read-more:hover {
    color: #0d6efd;
    text-decoration: underline;
}

.dashboard-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 800;
    margin-top: auto;
}

.dashboard-event-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dashboard-event-meta i {
    color: #16385c;
}

.dashboard-event-progress {
    width: 100%;
    height: 6px;
    background: #e8eef6;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 10px;
}

.dashboard-event-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #198754, #20c997);
    border-radius: inherit;
}

.dashboard-event-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.dashboard-event-actions .btn {
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 900;
    padding: 6px 10px;
}

/* Date box */
.dashboard-event-date-box {
    background: #07166f;
    color: #ffffff;
    border-radius: 12px;
    padding: 14px 10px;
    min-height: 158px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    text-decoration: none;
    transition: all 0.22s ease;
}

.dashboard-event-date-box:hover {
    background: #101f8f;
    color: #ffffff;
    transform: translateY(-1px);
}

.contribution-date-box {
    background: #16385c;
}

.contribution-date-box:hover {
    background: #0f2d4d;
}

.dashboard-event-day {
    color: #ffffff;
    font-size: 33px;
    line-height: 1;
    font-weight: 950;
}

.dashboard-event-month {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.15;
    font-weight: 950;
}

.dashboard-event-year {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.15;
    font-weight: 850;
}

.dashboard-event-time {
    color: #ffffff;
    margin-top: 14px;
    font-size: 10.5px;
    line-height: 1.25;
    font-weight: 950;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Compact course cards */
.dashboard-course-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-course-mini-card {
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-left: 5px solid #0d6efd;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    transition: all 0.22s ease;
}

.dashboard-course-mini-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.13);
}

.dashboard-course-mini-image-wrap {
    position: relative;
    display: block;
    height: 145px;
    overflow: hidden;
    background: #eef2f6;
}

.dashboard-course-mini-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dashboard-course-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: #f23d5b;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 12px 24px rgba(242, 61, 91, 0.32);
}

.dashboard-course-mini-content {
    position: relative;
    padding: 14px 14px 12px;
    min-height: 76px;
}

.dashboard-course-mini-title {
    color: #0f365f;
    font-size: 0.86rem;
    line-height: 1.35;
    font-weight: 950;
    margin: 0 44px 10px 0;
    text-align: left;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-course-mini-title a {
    color: inherit;
    text-decoration: none;
}

.dashboard-course-mini-title a:hover {
    color: #0d6efd;
}

.dashboard-course-mini-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dashboard-course-mini-progress-wrap {
    flex: 1;
    min-width: 0;
}

.dashboard-course-mini-progress {
    height: 5px;
    background: #e5edf8;
    border-radius: 999px;
    overflow: hidden;
}

.dashboard-course-mini-progress span {
    display: block;
    height: 100%;
    background: #0d6efd;
    border-radius: inherit;
}

.dashboard-course-mini-progress-wrap small {
    display: inline-flex;
    margin-top: 5px;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 800;
}

.dashboard-course-mini-status {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background: #edf2f7;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.dashboard-course-mini-status.completed {
    background: #198754;
    color: #ffffff;
}

.dashboard-course-mini-action {
    position: absolute;
    right: 14px;
    bottom: 10px;
}

.dashboard-course-mini-action .btn {
    min-width: 72px;
    height: 28px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 950;
    padding: 4px 8px;
}

/* Responsive */
@media (max-width: 991px) {
    .dashboard-event-card {
        grid-template-columns: 220px minmax(0, 1fr) 120px;
        gap: 14px;
    }

    .dashboard-event-card::after {
        right: 140px;
    }

    .dashboard-event-image-wrap,
    .dashboard-event-date-box {
        height: 155px;
        min-height: 155px;
    }

    .dashboard-course-mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .dashboard-modern-section-header {
        align-items: flex-start;
    }

    .dashboard-modern-section-body {
        padding: 16px;
    }

    .dashboard-year-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 1px;
    }

    .dashboard-year-tabs .nav-link {
        min-width: 70px;
        padding: 10px 15px;
    }

    .dashboard-event-card {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .dashboard-event-card::after {
        right: 18px;
        top: 18px;
    }

    .dashboard-event-image-wrap {
        height: 190px;
    }

    .dashboard-event-date-box {
        min-height: auto;
        height: auto;
        padding: 13px 14px;
        display: grid;
        grid-template-columns: auto auto auto 1fr;
        align-items: center;
        justify-content: start;
        text-align: left;
        gap: 8px;
    }

    .dashboard-event-day {
        font-size: 28px;
    }

    .dashboard-event-month,
    .dashboard-event-year {
        font-size: 14px;
    }

    .dashboard-event-time {
        margin-top: 0;
        justify-self: end;
        font-size: 10.5px;
    }

    .dashboard-event-description {
        text-align: left;
    }

    .dashboard-course-mini-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-course-mini-image-wrap {
        height: 165px;
    }
}

@media (max-width: 480px) {
    .dashboard-modern-stat-card {
        min-height: 96px;
    }

    .dashboard-event-date-box {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .dashboard-event-time {
        justify-self: center;
    }
}

/* =========================================================
   FIX: Dashboard compact course card progress/button collision
   ========================================================= */

.dashboard-course-mini-content {
    position: relative !important;
    padding: 14px 14px 14px !important;
    min-height: 88px !important;
}

/* Give title enough right space for the status circle only */
.dashboard-course-mini-title {
    margin: 0 36px 12px 0 !important;
}

/* Bottom row should not stretch underneath the button */
.dashboard-course-mini-bottom {
    width: calc(100% - 92px) !important;
    min-height: 30px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

/* Progress area stays left and never reaches the button */
.dashboard-course-mini-progress-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
}

/* Progress bar full width inside its reserved left area */
.dashboard-course-mini-progress {
    width: 100% !important;
    height: 5px !important;
    margin-top: 2px !important;
}

/* Duration text below progress */
.dashboard-course-mini-progress-wrap small {
    display: inline-flex !important;
    align-items: center !important;
    margin-top: 6px !important;
    color: #64748b !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
}

/* Keep status circle above/right and away from action button */
.dashboard-course-mini-status {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
}

/* Button gets its own fixed bottom-right area */
.dashboard-course-mini-action {
    position: absolute !important;
    right: 14px !important;
    bottom: 12px !important;
    z-index: 3 !important;
}

/* Button size locked */
.dashboard-course-mini-action .btn {
    min-width: 76px !important;
    height: 30px !important;
    border-radius: 4px !important;
    font-size: 0.72rem !important;
    font-weight: 950 !important;
    padding: 4px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

/* Mobile: allow a little more breathing space */
@media (max-width: 767px) {
    .dashboard-course-mini-content {
        min-height: 94px !important;
    }

    .dashboard-course-mini-bottom {
        width: calc(100% - 96px) !important;
    }
}
/* =========================================================
   REMOVE: Three-dot icon from dashboard horizontal cards
   ========================================================= */

.dashboard-event-card::after {
    content: none !important;
    display: none !important;
}

.dashboard-event-badges {
    padding-right: 0 !important;
}

/* =========================================================
   FIX: Course card thumbnail gap from left border
   ========================================================= */

/* Keep the blue left accent on the card */
.dashboard-course-mini-card {
    border-left: 5px solid #0d6efd !important;
    padding: 14px 14px 12px 14px !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

/* Thumbnail wrapper should sit inside the padded card, not touch the border */
.dashboard-course-mini-image-wrap {
    height: 145px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: block !important;
    background: #eef2f6 !important;
}

/* Thumbnail fills only the inner wrapper */
.dashboard-course-mini-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Content also stays aligned with the thumbnail */
.dashboard-course-mini-content {
    padding: 12px 0 0 0 !important;
}

/* Keep action button aligned after removing inner horizontal padding */
.dashboard-course-mini-action {
    right: 0 !important;
    bottom: 0 !important;
}

/* Keep status circle aligned inside content */
.dashboard-course-mini-status {
    right: 0 !important;
}
/* =========================================================
   FIX: Digital course filter responsive navy dropdown header
   ========================================================= */

/* Make the filter section behave like the dashboard sections */
.digital-dashboard-section {
    width: 100% !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #e7edf5 !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08) !important;
}

/* Force the clickable filter header to full width */
.digital-filter-toggle {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 70px !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    background: #16385c !important;
    color: #ffffff !important;

    padding: 16px 20px !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;

    text-align: left !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    appearance: none !important;
}

/* Remove browser/default button styling */
.digital-filter-toggle:focus,
.digital-filter-toggle:active,
.digital-filter-toggle:hover {
    background: #12304f !important;
    color: #ffffff !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Left text area */
.digital-filter-toggle-content {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Filter title */
.digital-filter-toggle-content h5 {
    color: #ffffff !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;

    font-size: 1rem !important;
    line-height: 1.25 !important;
    font-weight: 950 !important;

    display: flex !important;
    align-items: center !important;
    gap: 6px !important;

    text-align: left !important;
}

/* Filter subtitle */
.digital-filter-toggle-content p {
    color: rgba(255, 255, 255, 0.78) !important;
    margin: 0 !important;
    padding: 0 !important;

    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    font-weight: 650 !important;

    text-align: left !important;
}

/* Right arrow icon box */
.digital-filter-toggle-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;

    border-radius: 10px !important;
    background: #ffffff !important;
    color: #16385c !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 0.85rem !important;
    font-weight: 950 !important;

    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14) !important;
}

/* Arrow animation */
.digital-filter-toggle-icon i {
    transition: transform 0.22s ease !important;
}

/* Closed state */
.digital-filter-toggle.collapsed .digital-filter-toggle-icon i {
    transform: rotate(0deg) !important;
}

/* Open state */
.digital-filter-toggle:not(.collapsed) .digital-filter-toggle-icon i {
    transform: rotate(180deg) !important;
}

/* Dropdown body */
#digitalCourseFilterCollapse {
    width: 100% !important;
}

.digital-filter-collapse-body {
    width: 100% !important;
    padding: 20px !important;
    background: #ffffff !important;
    border-top: 1px solid #e7edf5 !important;
}

/* Inner filter card */
.digital-learning-filter-card {
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e7edf5 !important;
    border-radius: 14px !important;
    padding: 18px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.055) !important;
}

/* Form labels and fields */
.digital-learning-filter-card .form-label {
    color: #16385c !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    margin-bottom: 7px !important;
}

.digital-learning-filter-card .form-control,
.digital-learning-filter-card .form-select {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 9px !important;
    border: 1px solid #dbe4ef !important;
    font-size: 14px !important;
    font-weight: 650 !important;
}

.digital-learning-filter-card .form-control:focus,
.digital-learning-filter-card .form-select:focus {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.18rem rgba(13, 110, 253, 0.12) !important;
}

/* Filter button */
.digital-learning-filter-card .btn {
    min-height: 42px !important;
    border-radius: 9px !important;
    font-weight: 900 !important;
}
.digital-course-card {
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        opacity 0.18s ease;
}

.digital-course-card.d-none {
    display: none !important;
}
/* =========================================================
   BOARDROOM / PRESENTATION READABILITY FIX
   Member dashboard stats + upcoming event time
   Add this at the VERY BOTTOM of style.css
   ========================================================= */

/* Make dashboard container slightly wider for large screens */
@media (min-width: 1200px) {
    .dashboard-wrapper .container {
        max-width: 1180px !important;
    }
}

/* -------------------------------
   Stats cards - larger and readable
-------------------------------- */

.dashboard-modern-stats {
    margin-bottom: 38px !important;
}

.dashboard-modern-stat-card {
    min-height: 128px !important;
    padding: 22px 18px !important;
    gap: 16px !important;
    border-radius: 18px !important;
}

/* Bigger stat icon */
.dashboard-modern-stat-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 16px !important;
    font-size: 21px !important;
}

/* Bigger number */
.dashboard-modern-stat-number {
    font-size: 34px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    margin-bottom: 10px !important;
    color: #0f2f57 !important;
}

/* Bigger stat title */
.dashboard-modern-stat-label {
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: 0.35px !important;
    text-transform: capitalize !important;
    color: #243b5a !important;
    margin: 0 !important;

    display: block !important;
    max-width: 120px !important;
    white-space: normal !important;
}

/* Keep stat content readable and not squeezed */
.dashboard-modern-stat-card > div:last-child {
    min-width: 0 !important;
    flex: 1 !important;
}

/* -------------------------------
   Upcoming events section
-------------------------------- */

.dashboard-modern-section-header h5 {
    font-size: 1.18rem !important;
    line-height: 1.25 !important;
}

.dashboard-modern-section-header p {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
}

/* Bigger section count badge */
.dashboard-section-count {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
}

/* Make event card right date box wider */
.dashboard-event-card {
    grid-template-columns: 255px minmax(0, 1fr) 160px !important;
    gap: 20px !important;
}

/* Event title larger */
.dashboard-event-title {
    font-size: 1.12rem !important;
    line-height: 1.42 !important;
    font-weight: 950 !important;
}

/* Event description slightly larger */
.dashboard-event-description {
    font-size: 0.95rem !important;
    line-height: 1.68 !important;
}

/* Meta time under description */
.dashboard-event-meta {
    font-size: 0.94rem !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
}

.dashboard-event-meta i {
    font-size: 0.95rem !important;
}

/* Button slightly bigger */
.dashboard-event-actions .btn {
    font-size: 0.86rem !important;
    padding: 8px 13px !important;
    border-radius: 8px !important;
}

/* -------------------------------
   Right-side event date/time box
-------------------------------- */

.dashboard-event-date-box {
    min-height: 172px !important;
    padding: 16px 12px !important;
    border-radius: 13px !important;
}

.dashboard-event-day {
    font-size: 40px !important;
    line-height: 1 !important;
}

.dashboard-event-month {
    font-size: 18px !important;
    line-height: 1.1 !important;
}

.dashboard-event-year {
    font-size: 16px !important;
    line-height: 1.1 !important;
}

/* Main requested fix: bigger event time in blue date box */
.dashboard-event-time {
    margin-top: 16px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 950 !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

.dashboard-event-time i {
    font-size: 13px !important;
}

/* -------------------------------
   Badges also slightly bigger
-------------------------------- */

.dashboard-event-badges .dashboard-badge {
    font-size: 12px !important;
    padding: 7px 11px !important;
}

/* -------------------------------
   Medium screens
-------------------------------- */

@media (max-width: 1199px) {
    .dashboard-modern-stat-label {
        font-size: 13px !important;
    }

    .dashboard-modern-stat-number {
        font-size: 31px !important;
    }

    .dashboard-event-card {
        grid-template-columns: 230px minmax(0, 1fr) 150px !important;
    }

    .dashboard-event-time {
        font-size: 12px !important;
    }
}

/* -------------------------------
   Tablet/mobile safety
-------------------------------- */

@media (max-width: 991px) {
    .dashboard-event-card {
        grid-template-columns: 220px minmax(0, 1fr) 145px !important;
    }

    .dashboard-event-title {
        font-size: 1rem !important;
    }

    .dashboard-event-description {
        font-size: 0.88rem !important;
    }

    .dashboard-event-time {
        white-space: normal !important;
        text-align: center !important;
    }
}

@media (max-width: 767px) {
    .dashboard-modern-stat-card {
        min-height: 112px !important;
        padding: 18px 16px !important;
    }

    .dashboard-modern-stat-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        font-size: 19px !important;
    }

    .dashboard-modern-stat-number {
        font-size: 30px !important;
    }

    .dashboard-modern-stat-label {
        font-size: 13px !important;
        max-width: none !important;
    }

    .dashboard-event-card {
        grid-template-columns: 1fr !important;
    }

    .dashboard-event-date-box {
        min-height: auto !important;
    }

    .dashboard-event-time {
        font-size: 12.5px !important;
        justify-self: end !important;
    }
}
/* =========================================================
   ESGRS FOOTER DESIGN
   Dark navy footer + contact + map + copyright strip
   ========================================================= */

.site-footer {
    position: relative;
    margin-top: 0;
    font-family: 'Dubai', sans-serif;
}

/* Main dark section */
.site-footer-main {
    background: #071a63;
    color: #ffffff;
    padding: 38px 0 36px;
}

.site-footer-about {
    max-width: 330px;
}

.site-footer-logo-wrap {
    margin-bottom: 22px;
    text-align: center;
}

.site-footer-logo {
    max-width: 190px;
    width: 100%;
    height: auto;
    display: inline-block;
}

.site-footer-description {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.7;
    font-weight: 400;
    text-align: left;
    margin: 0 0 22px;
}

/* Social icons */
.site-footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.site-footer-social a {
    color: #ffffff;
    font-size: 19px;
    line-height: 1;
    text-decoration: none;
    transition: all 0.2s ease;
}

.site-footer-social a:hover {
    color: #8ec5ff;
    transform: translateY(-2px);
}

/* Contact */
.site-footer-contact {
    padding-top: 2px;
}

.site-footer-contact h5 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 18px;
}

.site-footer-contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.site-footer-contact-icon {
    width: 22px;
    min-width: 22px;
    color: #ffffff;
    font-size: 20px;
    display: inline-flex;
    justify-content: center;
}

.site-footer-contact-item a {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
    line-height: 1.25;
}

.site-footer-contact-item a:hover {
    color: #8ec5ff;
}

/* Map */
.site-footer-map {
    width: 100%;
    max-width: 310px;
    margin-left: auto;
    background: #ffffff;
    overflow: hidden;
}

.site-footer-map iframe {
    width: 100%;
    height: 295px;
    border: 0;
    display: block;
}

/* Bottom white strip */
.site-footer-bottom {
    background: #ffffff;
    color: #16385c;
    padding: 14px 0;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.site-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    text-align: center;
}

.site-footer-copy {
    color: #16385c;
    font-size: 14px;
    font-weight: 500;
}

.site-footer-copy a {
    color: #0d6efd;
    text-decoration: none;
}

.site-footer-copy a:hover {
    text-decoration: underline;
}

/* Payment badges if image assets are unavailable */
.site-footer-payments {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.payment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 20px;
    padding: 0 5px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 8px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
}

.payment-mastercard {
    background: linear-gradient(90deg, #eb001b 0%, #f79e1b 100%);
}

.payment-uaepay {
    background: linear-gradient(90deg, #007a3d 0%, #000000 45%, #ce1126 100%);
}

.payment-visa {
    background: #1a1f71;
}

/* Back to top button */
.site-back-to-top {
    position: fixed;
    right: 20px;
    bottom: 16px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 0;
    background: #0d6efd;
    color: #ffffff;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    cursor: pointer;
    transition: all 0.2s ease;
}

.site-back-to-top:hover {
    background: #071a63;
    transform: translateY(-2px);
}

/* Remove old generic footer styling conflict */
footer.site-footer {
    padding: 0;
    margin-top: 40px;
    text-align: initial;
    font-size: initial;
}

/* Responsive */
@media (max-width: 991px) {
    .site-footer-main {
        padding: 34px 0;
    }

    .site-footer-about {
        max-width: 100%;
    }

    .site-footer-logo-wrap,
    .site-footer-social {
        justify-content: flex-start;
        text-align: left;
    }

    .site-footer-map {
        max-width: 100%;
        margin-left: 0;
    }

    .site-footer-map iframe {
        height: 260px;
    }
}

@media (max-width: 767px) {
    .site-footer-main {
        padding: 30px 0;
    }

    .site-footer-logo {
        max-width: 165px;
    }

    .site-footer-description {
        font-size: 14px;
        line-height: 1.65;
    }

    .site-footer-contact h5 {
        font-size: 20px;
    }

    .site-footer-contact-item a {
        font-size: 16px;
    }

    .site-footer-bottom-inner {
        flex-direction: column;
        gap: 6px;
    }

    .site-footer-copy {
        font-size: 13px;
    }

    .site-back-to-top {
        right: 14px;
        bottom: 14px;
    }
}
/* =========================================================
   DASHBOARD STATS ICON TOP-RIGHT POSITION
   ========================================================= */

.dashboard-modern-stat-card {
    position: relative !important;
    display: block !important;
    min-height: 128px !important;
    padding: 22px 18px 18px 18px !important;
}

/* Icon fixed in top-right corner */
.dashboard-modern-stat-icon {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;

    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;

    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 20px !important;
    z-index: 2 !important;
}

/* Keep text on left and prevent collision with icon */
.dashboard-modern-stat-card > div:last-child {
    padding-right: 58px !important;
}

/* Number alignment */
.dashboard-modern-stat-number {
    text-align: left !important;
    margin-bottom: 12px !important;
}

/* Label alignment */
.dashboard-modern-stat-label {
    text-align: left !important;
    display: block !important;
    white-space: normal !important;
}

/* Mobile adjustment */
@media (max-width: 767px) {
    .dashboard-modern-stat-card {
        min-height: 118px !important;
        padding: 20px 16px 16px 16px !important;
    }

    .dashboard-modern-stat-icon {
        top: 16px !important;
        right: 16px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        font-size: 18px !important;
    }

    .dashboard-modern-stat-card > div:last-child {
        padding-right: 52px !important;
    }
}

/* =========================================================
   Dashboard Upcoming Event Card Fixes
   ========================================================= */

.dashboard-upcoming-event-card {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 138px;
    gap: 18px;
    align-items: stretch;
    min-height: 230px;
}

/* Banner image same height feel as content/card */
.dashboard-upcoming-event-card .dashboard-event-image-wrap {
    width: 100%;
    height: 100%;
    min-height: 185px;
    border-radius: 14px;
    overflow: hidden;
    display: block;
}

.dashboard-upcoming-event-card .dashboard-event-image {
    width: 100%;
    height: 100%;
    min-height: 185px;
    object-fit: cover;
    display: block;
}

/* Content spacing */
.dashboard-upcoming-event-card .dashboard-event-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    padding: 4px 0;
}

.dashboard-upcoming-event-card .dashboard-event-title {
    margin-top: 8px;
    margin-bottom: 10px;
}

.dashboard-upcoming-event-card .dashboard-event-description {
    margin-bottom: 12px;
}

/* Button should sit neatly after description */
.dashboard-upcoming-event-card .dashboard-event-actions {
    margin-top: 4px;
}

/* Right blue date box */
.dashboard-upcoming-event-card .dashboard-event-date-box {
    width: 138px;
    min-height: 100%;
    border-radius: 12px;
    background: #111b7a;
    color: #ffffff;
    text-decoration: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 22px 12px;
}

/* Date text */
.dashboard-upcoming-event-card .dashboard-event-day {
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 7px;
}

.dashboard-upcoming-event-card .dashboard-event-month {
    font-size: 15px;
    line-height: 1;
    font-weight: 900;
    margin-bottom: 5px;
}

.dashboard-upcoming-event-card .dashboard-event-year {
    font-size: 14px;
    line-height: 1;
    font-weight: 900;
    margin-bottom: 22px;
}

/* More gap between date/year and time */
.dashboard-upcoming-event-card .dashboard-event-time {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    font-size: 11px;
    line-height: 1.25;
    font-weight: 850;
    text-align: center;
    white-space: nowrap;
}

.dashboard-upcoming-event-card .dashboard-event-time i {
    font-size: 11px;
}
@media (max-width: 991px) {
    .dashboard-upcoming-event-card {
        grid-template-columns: 210px minmax(0, 1fr) 120px;
        gap: 14px;
    }

    .dashboard-upcoming-event-card .dashboard-event-date-box {
        width: 120px;
    }

    .dashboard-upcoming-event-card .dashboard-event-day {
        font-size: 30px;
    }

    .dashboard-upcoming-event-card .dashboard-event-time {
        font-size: 10px;
        white-space: normal;
    }
}

@media (max-width: 767px) {
    .dashboard-upcoming-event-card {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .dashboard-upcoming-event-card .dashboard-event-image-wrap {
        height: 190px;
        min-height: 190px;
    }

    .dashboard-upcoming-event-card .dashboard-event-date-box {
        width: 100%;
        min-height: auto;
        flex-direction: row;
        justify-content: center;
        gap: 12px;
        padding: 14px;
    }

    .dashboard-upcoming-event-card .dashboard-event-day,
    .dashboard-upcoming-event-card .dashboard-event-month,
    .dashboard-upcoming-event-card .dashboard-event-year {
        margin-bottom: 0;
    }

    .dashboard-upcoming-event-card .dashboard-event-time {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
        padding-left: 12px;
        border-left: 1px solid rgba(255, 255, 255, 0.22);
    }
}
/* =========================================================
   Dashboard Event Cards - Shared Layout Fix
   Applies to:
   - Upcoming Events
   - Event Attended List
   - My Contributions
   ========================================================= */

.dashboard-event-card {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 138px;
    gap: 18px;
    align-items: stretch;
    min-height: 230px;
}

/* Left banner image should match card/content height */
.dashboard-event-card .dashboard-event-image-wrap {
    width: 100%;
    height: 100%;
    min-height: 185px;
    border-radius: 14px;
    overflow: hidden;
    display: block;
    background: #eef2f7;
}

.dashboard-event-card .dashboard-event-image {
    width: 100%;
    height: 100%;
    min-height: 185px;
    object-fit: cover;
    display: block;
}

/* Middle content area */
.dashboard-event-card .dashboard-event-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    padding: 4px 0;
}

.dashboard-event-card .dashboard-event-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 8px;
}

.dashboard-event-card .dashboard-event-title {
    margin-top: 0;
    margin-bottom: 10px;
}

.dashboard-event-card .dashboard-event-description {
    margin-bottom: 12px;
}

/* Meta rows on attendance/contribution should be clean */
.dashboard-event-card .dashboard-event-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 2px;
    margin-bottom: 12px;
}

.dashboard-event-card .dashboard-event-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Progress bar for attendance cards */
.dashboard-event-card .dashboard-event-progress {
    margin-top: 2px;
    margin-bottom: 12px;
}

/* Action buttons */
.dashboard-event-card .dashboard-event-actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Right blue date box */
.dashboard-event-card .dashboard-event-date-box {
    width: 138px;
    min-height: 100%;
    border-radius: 12px;
    background: #111b7a;
    color: #ffffff;
    text-decoration: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 22px 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-event-card .dashboard-event-date-box:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(17, 27, 122, 0.24);
}

/* Date text */
.dashboard-event-card .dashboard-event-day {
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 7px;
}

.dashboard-event-card .dashboard-event-month {
    font-size: 15px;
    line-height: 1;
    font-weight: 900;
    margin-bottom: 5px;
}

.dashboard-event-card .dashboard-event-year {
    font-size: 14px;
    line-height: 1;
    font-weight: 900;
    margin-bottom: 22px;
}

/* More gap between date/year and timing */
.dashboard-event-card .dashboard-event-time {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    font-size: 11px;
    line-height: 1.25;
    font-weight: 850;
    text-align: center;
    white-space: nowrap;
}

.dashboard-event-card .dashboard-event-time i {
    font-size: 11px;
}
/* =========================================================
   Dashboard Event Cards - Responsive
   ========================================================= */

@media (max-width: 1199px) {
    .dashboard-event-card {
        grid-template-columns: 220px minmax(0, 1fr) 128px;
        gap: 16px;
    }

    .dashboard-event-card .dashboard-event-date-box {
        width: 128px;
    }
}

@media (max-width: 991px) {
    .dashboard-event-card {
        grid-template-columns: 210px minmax(0, 1fr) 120px;
        gap: 14px;
    }

    .dashboard-event-card .dashboard-event-date-box {
        width: 120px;
    }

    .dashboard-event-card .dashboard-event-day {
        font-size: 30px;
    }

    .dashboard-event-card .dashboard-event-time {
        font-size: 10px;
        white-space: normal;
    }
}

@media (max-width: 767px) {
    .dashboard-event-card {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .dashboard-event-card .dashboard-event-image-wrap {
        height: 190px;
        min-height: 190px;
    }

    .dashboard-event-card .dashboard-event-image {
        height: 190px;
        min-height: 190px;
    }

    .dashboard-event-card .dashboard-event-content {
        padding: 2px 0;
    }

    .dashboard-event-card .dashboard-event-date-box {
        width: 100%;
        min-height: auto;
        flex-direction: row;
        justify-content: center;
        gap: 12px;
        padding: 14px;
    }

    .dashboard-event-card .dashboard-event-day,
    .dashboard-event-card .dashboard-event-month,
    .dashboard-event-card .dashboard-event-year {
        margin-bottom: 0;
    }

    .dashboard-event-card .dashboard-event-time {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
        padding-left: 12px;
        border-left: 1px solid rgba(255, 255, 255, 0.22);
    }

    .dashboard-event-card .dashboard-event-actions {
        margin-top: 10px;
    }
}

@media (max-width: 420px) {
    .dashboard-event-card .dashboard-event-date-box {
        flex-wrap: wrap;
    }

    .dashboard-event-card .dashboard-event-time {
        width: 100%;
        border-left: 0;
        padding-left: 0;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.22);
    }
}
/* =========================================================
   Settings Modal / Change Password
   ========================================================= */

.dashboard-settings-modal .modal-header {
    background: #16385c;
    color: #ffffff;
}

.settings-section-card {
    background: #ffffff;
    border: 1px solid #e7edf5;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.settings-section-title {
    color: #16385c;
    font-size: 1rem;
    font-weight: 950;
    margin-bottom: 6px;
}

.settings-section-text {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 650;
    margin-bottom: 18px;
}

.password-input-wrap {
    position: relative;
}

.password-input-wrap .form-control {
    padding-right: 44px;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #64748b;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.password-toggle-btn:hover {
    color: #0d6efd;
}

.required {
    color: #dc3545;
    font-weight: 900;
}
/* =========================================================
   PUBLIC WEBINAR DETAILS PAGE
   Used in public_webinar_details.php
   ========================================================= */

.public-webinar-detail-page {
    max-width: 960px;
    margin: 55px auto 80px;
    padding: 0 18px;
}

.public-webinar-detail-page .event-layout {
    display: grid;
    grid-template-columns: minmax(0, 650px) 260px;
    gap: 28px;
    align-items: start;
    justify-content: center;
}

.public-webinar-detail-page .event-main-card {
    width: 100%;
    background: transparent;
}

.public-event-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #07166f;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    margin-bottom: 14px;
}

.public-event-back-link:hover {
    color: #0d6efd;
}

.public-webinar-detail-page .event-hero-card {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #dbe2ec;
}

.public-webinar-detail-page .event-hero-img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
}

.public-webinar-detail-page .event-title-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 27, 112, 0.92);
    color: #ffffff;
    padding: 22px 24px 24px;
}

.public-webinar-detail-page .event-title-overlay h1 {
    font-size: 30px;
    line-height: 1.24;
    font-weight: 800;
    margin: 0;
    letter-spacing: 0.1px;
    color: #ffffff;
}

.public-webinar-detail-page .event-description {
    margin-top: 22px;
    color: #1f2937;
    font-size: 17px;
    line-height: 1.75;
    text-align: justify;
    text-justify: inter-word;
}

.public-webinar-detail-page .event-meta-line {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.public-webinar-detail-page .event-meta-pill {
    background: #edf0ff;
    color: #07166f;
    font-size: 13px;
    font-weight: 800;
    padding: 6px 11px;
    border-radius: 20px;
}

/* Main action button */
.public-webinar-detail-page .event-action-btn {
    width: 100%;
    background: #07166f;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 13px 18px;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 18px;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.public-webinar-detail-page .event-action-btn:hover {
    background: #101f8f;
    color: #ffffff;
}

/* Button variants */
.public-event-recording-btn {
    background: #dc3545 !important;
    color: #ffffff !important;
}

.public-event-recording-btn:hover {
    background: #bb2d3b !important;
    color: #ffffff !important;
}

.public-event-join-btn {
    background: #198754 !important;
    color: #ffffff !important;
}

.public-event-join-btn:hover {
    background: #157347 !important;
    color: #ffffff !important;
}

.public-event-disabled-btn {
    background: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    border: 1px solid #dee2e6 !important;
}

/* Sidebar */
.public-webinar-detail-page .event-side-card {
    width: 260px;
    background: #f0f0f0;
    padding: 22px 18px 24px;
    min-height: 330px;
}

.public-webinar-detail-page .event-passed {
    font-size: 14px;
    color: #5f6675;
    margin-bottom: 24px;
    font-weight: 700;
}

.public-status-live {
    color: #198754 !important;
}

.public-status-completed {
    color: #0d6efd !important;
}

.public-status-cancelled {
    color: #dc3545 !important;
}

.public-webinar-detail-page .event-side-heading {
    display: block;
    background: #07166f;
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    padding: 7px 10px;
    margin-bottom: 12px;
    text-transform: uppercase;
    line-height: 1.15;
    letter-spacing: 0.4px;
}

.public-webinar-detail-page .event-side-text {
    color: #1f2937;
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 14px;
}

.public-webinar-detail-page .event-calendar-btn {
    display: block;
    background: #07166f;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    padding: 10px 10px;
    font-size: 13px;
    font-weight: 800;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.public-webinar-detail-page .event-calendar-btn:hover {
    color: #ffffff;
    background: #101f8f;
}

/* Speakers */
.public-webinar-detail-page .speaker-section {
    width: 100%;
    max-width: 650px;
    margin-top: 45px;
    text-align: center;
}

.public-webinar-detail-page .speaker-card-clean {
    margin-bottom: 42px;
}

.public-webinar-detail-page .speaker-photo,
.public-webinar-detail-page .speaker-placeholder {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    margin: 0 auto 16px;
    object-fit: cover;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18);
}

.public-webinar-detail-page .speaker-placeholder {
    background: #07166f;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 800;
}

.public-webinar-detail-page .speaker-name {
    font-size: 21px;
    font-weight: 800;
    color: #263047;
    margin-bottom: 4px;
}

.public-webinar-detail-page .speaker-position {
    font-size: 15px;
    color: #6b7280;
    margin-bottom: 15px;
}

.public-webinar-detail-page .speaker-bio {
    max-width: 560px;
    margin: 0 auto 10px;
    color: #445066;
    font-size: 15px;
    line-height: 1.75;
    text-align: justify;
    text-justify: inter-word;
}

.public-webinar-detail-page .speaker-role-badge {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.public-webinar-detail-page .event-role-keynote {
    background: #fff3cd;
    color: #9a6500;
}

.public-webinar-detail-page .event-role-moderator {
    background: #dff8eb;
    color: #08764a;
}

.public-webinar-detail-page .event-role-speaker {
    background: #e6ecff;
    color: #07166f;
}

/* Share buttons */
.public-event-share-title {
    color: #07166f;
    font-size: 14px;
    font-weight: 900;
    margin-top: 18px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.public-event-share-row {
    display: flex;
    gap: 8px;
}

.public-event-share-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
}

.public-event-share-btn:hover {
    transform: translateY(-2px);
    color: #ffffff;
}

.public-event-share-btn.share-facebook {
    background: #1877f2;
}

.public-event-share-btn.share-twitter {
    background: #1da1f2;
}

.public-event-share-btn.share-linkedin {
    background: #0077b5;
}

.public-event-share-btn.share-whatsapp {
    background: #25d366;
}

/* Registration Modal */
.public-event-register-modal {
    border-radius: 16px;
    overflow: hidden;
    border: 0;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}

.public-event-register-modal .modal-header {
    background: #16385c;
    color: #ffffff;
    border-bottom: 0;
    padding: 18px 22px;
}

.public-event-register-modal .modal-title {
    color: #ffffff;
    font-weight: 800;
}

.public-event-register-modal .btn-close {
    filter: invert(1);
    opacity: 0.9;
}

.public-event-register-modal .modal-body {
    padding: 28px 24px;
    text-align: center;
}

.public-event-register-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.public-event-register-title {
    color: #16385c;
    font-weight: 900;
    margin-bottom: 10px;
}

.public-event-register-text {
    color: #6c757d;
    font-size: 15px;
    font-weight: 600;
}

.public-event-register-name {
    background: #f8fbff;
    border: 1px solid #edf0f3;
    border-radius: 12px;
    padding: 14px 16px;
    color: #16385c;
    font-size: 16px;
    font-weight: 900;
}

/* Toast */
.event-toast {
    position: fixed;
    top: 95px;
    right: 22px;
    z-index: 9999;
    min-width: 280px;
    max-width: 390px;
    display: none;
}

/* Responsive */
@media (max-width: 991px) {
    .public-webinar-detail-page {
        max-width: 760px;
    }

    .public-webinar-detail-page .event-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .public-webinar-detail-page .event-side-card {
        width: 100%;
    }

    .public-webinar-detail-page .event-hero-img {
        height: 340px;
    }
}

@media (max-width: 576px) {
    .public-webinar-detail-page {
        margin: 28px auto 50px;
        padding: 0 16px;
    }

    .public-webinar-detail-page .event-hero-img {
        height: 250px;
    }

    .public-webinar-detail-page .event-title-overlay {
        padding: 16px 17px 18px;
    }

    .public-webinar-detail-page .event-title-overlay h1 {
        font-size: 22px;
        line-height: 1.25;
    }

    .public-webinar-detail-page .event-description {
        font-size: 15px;
        line-height: 1.65;
    }

    .public-webinar-detail-page .event-side-heading {
        font-size: 15px;
    }

    .public-webinar-detail-page .event-side-text {
        font-size: 14px;
    }

    .public-webinar-detail-page .speaker-name {
        font-size: 18px;
    }

    .public-webinar-detail-page .speaker-bio {
        font-size: 14px;
    }

    .public-event-share-row {
        flex-wrap: wrap;
    }
}

/* =========================================================
   PUBLIC WEBINARS LIST PAGE
   Used in public_webinar.php
   ========================================================= */

.public-webinar-page {
    background: #ffffff;
    padding: 0 0 70px;
}

.public-webinar-list-card {
    max-width: 960px;
    margin: 0 auto;
    background: #eeeeee;
    border: 1px solid #dde2e8;
    padding: 30px 18px 34px;
}

/* Year tabs */
.public-webinar-year-tabs-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: -70px 0 30px;
    border-bottom: 1px solid #d3d8df;
}

.public-webinar-year-tabs {
    display: inline-flex;
    align-items: flex-end;
    gap: 0;
}

.public-webinar-year-tab {
    min-width: 66px;
    height: 40px;
    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #1f2937;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;

    font-size: 13px;
    font-weight: 700;
    text-decoration: none;

    position: relative;
    top: 1px;
}

.public-webinar-year-tab:hover {
    color: #07166f;
    background: #f8fbff;
}

.public-webinar-year-tab.active {
    background: #ffffff;
    color: #07166f;
    border-color: #d3d8df;
    border-bottom-color: #ffffff;
    font-weight: 900;
    z-index: 2;
}

/* List */
.public-webinar-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Card */
.public-webinar-card {
    background: #ffffff;
    border: 1px solid #e4e8ee;
    border-radius: 8px;
    padding: 10px;

    display: grid;
    grid-template-columns: 215px minmax(0, 1fr) 150px;
    gap: 16px;
    align-items: stretch;

    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05);
    transition: all 0.22s ease;
}

.public-webinar-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
}

/* Image */
.public-webinar-image-wrap {
    display: block;
    width: 100%;
    height: 170px;
    border-radius: 7px;
    overflow: hidden;
    background: #eef2f6;
    text-decoration: none;
}

.public-webinar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.public-webinar-image-wrap:hover .public-webinar-image {
    transform: scale(1.035);
    filter: brightness(0.96);
}

.public-webinar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.1), rgba(22, 56, 92, 0.16));
    color: #16385c;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 44px;
}

/* Content */
.public-webinar-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 6px 0;
}

.public-webinar-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 9px;
}

.public-webinar-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    border-radius: 999px;
    padding: 5px 9px;

    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
}

.public-webinar-status-scheduled {
    background: #e8f7fb;
    color: #0aa2c0;
}

.public-webinar-status-live {
    background: #e8f8ef;
    color: #198754;
}

.public-webinar-status-completed {
    background: #e8f1ff;
    color: #0d6efd;
}

.public-webinar-type-badge {
    background: #edf2f7;
    color: #334155;
}

.public-webinar-recording-badge {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.public-webinar-recording-badge i {
    color: #ff0000;
}

/* Title */
.public-webinar-title {
    margin: 0 0 8px;
    color: #07166f;
    font-size: 15.5px;
    line-height: 1.35;
    font-weight: 900;
    text-align: left;
}

.public-webinar-title a {
    color: #07166f;
    text-decoration: none;
}

.public-webinar-title a:hover {
    color: #0d6efd;
    text-decoration: underline;
}

/* Description */
.public-webinar-description {
    color: #1f2937;
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0 0 10px;
    text-align: justify;
    text-justify: inter-word;
}

.public-webinar-read-more {
    color: #07166f;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    margin-left: 5px;
    white-space: nowrap;
}

.public-webinar-read-more:hover {
    color: #0d6efd;
    text-decoration: underline;
}

/* Meta */
.public-webinar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;

    margin-top: auto;

    color: #5f6675;
    font-size: 12.5px;
    font-weight: 800;
}

.public-webinar-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.public-webinar-meta i {
    color: #07166f;
}

/* Date box */
.public-webinar-date-box {
    background: #07166f;
    color: #ffffff;

    border-radius: 7px;
    padding: 16px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    text-align: center;
    text-decoration: none;
    min-height: 170px;

    transition: background 0.2s ease, transform 0.2s ease;
}

.public-webinar-date-box:hover {
    background: #101f8f;
    color: #ffffff;
    transform: translateY(-1px);
}

.public-webinar-day {
    color: #ffffff;
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
}

.public-webinar-month {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.15;
    font-weight: 800;
}

.public-webinar-year {
    color: #ffffff;
    margin-top: 4px;
    font-size: 15px;
    font-weight: 800;
}

.public-webinar-time {
    color: #ffffff;
    margin-top: 16px;

    font-size: 11px;
    font-weight: 800;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Empty */
.public-webinar-empty-state {
    text-align: center;
    padding: 55px 20px;
    color: #6c757d;
}

.public-webinar-empty-state i {
    font-size: 52px;
    opacity: 0.35;
    margin-bottom: 15px;
}

.public-webinar-empty-state h3 {
    color: #16385c;
    font-weight: 900;
    margin-bottom: 8px;
}

.public-webinar-empty-state p {
    margin-bottom: 0;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 991px) {
    .public-webinar-list-card {
        max-width: 760px;
    }

    .public-webinar-card {
        grid-template-columns: 190px minmax(0, 1fr) 128px;
        gap: 14px;
    }

    .public-webinar-image-wrap,
    .public-webinar-date-box {
        height: 165px;
        min-height: 165px;
    }

    .public-webinar-title {
        font-size: 15px;
    }

    .public-webinar-description {
        font-size: 13px;
    }

    .public-webinar-day {
        font-size: 30px;
    }

    .public-webinar-month {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .public-webinar-page {
        padding-bottom: 45px;
    }

    .public-webinar-list-card {
        padding: 24px 14px 28px;
    }

    .public-webinar-year-tabs-wrap {
        justify-content: flex-start;
        overflow-x: auto;
        margin: -50px 0 24px;
    }

    .public-webinar-year-tabs {
        min-width: max-content;
    }

    .public-webinar-year-tab {
        min-width: 62px;
        height: 38px;
        padding: 0 14px;
        font-size: 12px;
    }

    .public-webinar-card {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .public-webinar-image-wrap {
        height: 190px;
    }

    .public-webinar-date-box {
        min-height: auto;
        height: auto;
        padding: 14px 12px;

        display: grid;
        grid-template-columns: auto auto auto 1fr;
        justify-content: start;
        gap: 8px;

        text-align: left;
    }

    .public-webinar-day {
        font-size: 28px;
    }

    .public-webinar-month,
    .public-webinar-year {
        font-size: 14px;
        margin-top: 0;
        align-self: center;
    }

    .public-webinar-time {
        margin-top: 0;
        justify-self: end;
        align-self: center;
        font-size: 11px;
    }

    .public-webinar-description {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .public-webinar-date-box {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .public-webinar-time {
        justify-self: center;
    }
}

/* =========================================================
   LOGIN PAGE
   ========================================================= */
/* 
.login-section {
    background: #ffffff;
    padding: 20px 0 60px;
}

.login-box {
    max-width: 420px;
    margin: 0 auto;
}

.login-box .form-label {
    font-weight: 500;
    font-size: 14px;
}

.login-box .form-control {
    height: 38px;
    border-radius: 0;
    border: 1px solid #dddddd;
    font-size: 14px;
}

.login-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.login-actions .btn {
    width: 50%;
    border-radius: 4px;
    padding: 9px 12px;
    font-size: 14px;
}

.btn-login {
    background: #3fa7dc;
    color: #ffffff;
    border: none;
}

.btn-login:hover {
    background: #2697d0;
    color: #ffffff;
}

.btn-register-light {
    background: #f1f1f1;
    color: #555555;
    border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.btn-register-light:hover {
    background: #e5e5e5;
    color: #333333;
}

.login-page-banner h1 {
    text-transform: none;
    font-size: 28px;
} */
/* =========================================================
   Dashboard Color Override
   Change section headers and date boxes to #07166F
   ========================================================= */

/* Section header background */
.dashboard-modern-section-header {
    background: #07166F !important;
}

/* Section count text color */
.dashboard-section-count {
    color: #07166F !important;
}

/* Upcoming / live / attended / contribution date boxes */
.dashboard-event-card .dashboard-event-date-box,
.dashboard-event-date-box,
.dashboard-upcoming-event-card .dashboard-event-date-box,
.dashboard-live-event-card .dashboard-event-date-box {
    background: #07166F !important;
}

/* Date box hover */
.dashboard-event-card .dashboard-event-date-box:hover,
.dashboard-event-date-box:hover,
.dashboard-upcoming-event-card .dashboard-event-date-box:hover,
.dashboard-live-event-card .dashboard-event-date-box:hover {
    background: #101f8f !important;
}

/* Left border for upcoming cards */
.dashboard-upcoming-event-card {
    border-left-color: #07166F !important;
}

/* Buttons inside event cards */
.dashboard-event-actions .btn-primary {
    background-color: #07166F !important;
    border-color: #07166F !important;
    color: #ffffff !important;
}

.dashboard-event-actions .btn-primary:hover {
    background-color: #101f8f !important;
    border-color: #101f8f !important;
    color: #ffffff !important;
}

.site-footer-payments {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
}

.payment-logo {
    height: 28px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

@media (max-width: 767px) {
    .site-footer-bottom-inner {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }

    .site-footer-payments {
        justify-content: center !important;
    }

    .payment-logo {
        height: 24px !important;
    }
}