/* ==================================
   CMN GLOBAL STYLES
================================== */

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

:root {

    --primary: #1d4ed8;
    --primary-dark: #153eaa;

    --secondary: #f59e0b;

    --background: #f5f7fb;
    --card: #ffffff;

    --text: #172033;
    --muted: #6b7280;

    --border: #e5e7eb;

    --sidebar: #0b1736;

    --success: #16a34a;

    --radius: 18px;

    --shadow:
    0 10px 30px rgba(0,0,0,0.06);

}

body {

    font-family: "Inter", sans-serif;

    background: var(--background);

    color: var(--text);

    min-height: 100vh;

}


/* ==================================
   SIDEBAR
================================== */

.sidebar {

    width: 270px;

    height: 100vh;

    position: fixed;

    left: 0;

    top: 0;

    background: var(--sidebar);

    color: white;

    display: flex;

    flex-direction: column;

    z-index: 1000;

}


.logo-area {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 25px;

    border-bottom:
    1px solid rgba(255,255,255,0.1);

}


.logo {

    width: 45px;

    height: 45px;

    background: var(--secondary);

    color: white;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

}


.logo-area h2 {

    font-size: 25px;

}


.logo-area span {

    font-size: 10px;

    color: #b9c3d8;

}


.navigation {

    padding: 20px 15px;

    flex: 1;

    overflow-y: auto;

}


.nav-item {

    width: 100%;

    border: none;

    background: transparent;

    color: #bdc7db;

    padding: 13px 15px;

    margin-bottom: 5px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    gap: 14px;

    cursor: pointer;

    font-size: 14px;

    text-align: left;

    transition: 0.2s;

}


.nav-item i {

    width: 20px;

}


.nav-item:hover,
.nav-item.active {

    background: var(--primary);

    color: white;

}


.sidebar-bottom {

    padding: 20px;

}


.language-box {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px;

    background: rgba(255,255,255,0.08);

    border-radius: 10px;

}


.language-box select {

    background: transparent;

    color: white;

    border: none;

    outline: none;

    width: 100%;

}


.language-box option {

    color: black;

}


.logout-btn {

    width: 100%;

    margin-top: 12px;

    padding: 12px;

    border: none;

    background: transparent;

    color: #bdc7db;

    cursor: pointer;

}


/* ==================================
   MAIN
================================== */

.main {

    margin-left: 270px;

    min-height: 100vh;

}


.topbar {

    height: 75px;

    background: white;

    border-bottom: 1px solid var(--border);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 35px;

    position: sticky;

    top: 0;

    z-index: 500;

}


.search-box {

    display: flex;

    align-items: center;

    gap: 10px;

    background: var(--background);

    padding: 10px 15px;

    border-radius: 10px;

    width: 350px;

}


.search-box i {

    color: var(--muted);

}


.search-box input {

    border: none;

    outline: none;

    background: transparent;

    width: 100%;

}


.top-actions {

    display: flex;

    align-items: center;

    gap: 15px;

}


.icon-btn,
.dark-mode-btn {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: none;

    background: var(--background);

    cursor: pointer;

    position: relative;

}


.notification-dot {

    width: 7px;

    height: 7px;

    background: red;

    border-radius: 50%;

    position: absolute;

    top: 8px;

    right: 8px;

}


.profile-mini {

    border: none;

    background: transparent;

    display: flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

    text-align: left;

}


.avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: var(--primary);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

}


.profile-mini small {

    display: block;

    color: var(--muted);

}


.mobile-menu {

    display: none;

}


/* ==================================
   CONTENT
================================== */

.content {

    padding: 35px;

}


.page {

    display: none;

}


.active-page {

    display: block;

}


.welcome-banner {

    background:
    linear-gradient(
        135deg,
        #0b1736,
        #1d4ed8
    );

    color: white;

    border-radius: 25px;

    padding: 50px;

    min-height: 300px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    overflow: hidden;

}


.welcome-text {

    max-width: 650px;

}


.eyebrow {

    color: #fbbf24;

    font-weight: 600;

    font-size: 13px;

}


.welcome-banner h1 {

    font-family:
    "Playfair Display",
    serif;

    font-size: 42px;

    margin: 15px 0;

}


.welcome-banner p {

    color: #dbeafe;

    line-height: 1.7;

    max-width: 600px;

}


.cross-decoration {

    font-size: 200px;

    color: rgba(255,255,255,0.08);

}


.primary-btn {

    background: var(--primary);

    color: white;

    border: none;

    padding: 12px 20px;

    border-radius: 10px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.2s;

}


.welcome-banner .primary-btn {

    margin-top: 25px;

}


.primary-btn:hover {

    background: var(--primary-dark);

    transform: translateY(-2px);

}


.primary-btn.small {

    padding: 8px 15px;

    font-size: 12px;

}


.secondary-btn {

    background: white;

    color: var(--text);

    border: 1px solid var(--border);

    padding: 12px 20px;

    border-radius: 10px;

    cursor: pointer;

}


/* ==================================
   SECTION
================================== */

.section-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 35px 0 20px;

}


.section-header h2 {

    font-size: 22px;

}


.section-header p {

    color: var(--muted);

    font-size: 14px;

    margin-top: 5px;

}


.text-btn {

    border: none;

    background: transparent;

    color: var(--primary);

    font-weight: 600;

    cursor: pointer;

}


/* ==================================
   LIVE
================================== */

.live-card {

    background: var(--card);

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow);

}


.live-video {

    height: 320px;

    background:
    linear-gradient(
        135deg,
        #111827,
        #1e3a8a
    );

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}


.live-badge {

    position: absolute;

    top: 20px;

    left: 20px;

    background: #dc2626;

    color: white;

    padding: 6px 12px;

    border-radius: 5px;

    font-size: 11px;

    font-weight: 700;

}


.live-badge span {

    display: inline-block;

    width: 7px;

    height: 7px;

    background: white;

    border-radius: 50%;

    margin-right: 5px;

}


.play-icon {

    font-size: 55px;

    color: white;

    cursor: pointer;

}


.video-info {

    position: absolute;

    bottom: 25px;

    left: 30px;

    color: white;

}


.video-info p {

    color: #dbeafe;

    margin-top: 5px;

}


/* ==================================
   QUICK GRID
================================== */

.quick-grid {

    display: grid;

    grid-template-columns:
    repeat(4,1fr);

    gap: 20px;

}


.quick-card {

    background: var(--card);

    padding: 25px;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    cursor: pointer;

    transition: 0.2s;

}


.quick-card:hover {

    transform: translateY(-5px);

}


.quick-icon {

    width: 50px;

    height: 50px;

    background: #eff6ff;

    color: var(--primary);

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    margin-bottom: 20px;

}


.quick-card p {

    color: var(--muted);

    font-size: 13px;

    margin-top: 5px;

}


/* ==================================
   MEDIA
================================== */

.content-grid {

    display: grid;

    grid-template-columns:
    repeat(3,1fr);

    gap: 20px;

}


.media-card {

    background: var(--card);

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow);

}


.media-image {

    height: 180px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 40px;

}


.sermon {

    background:
    linear-gradient(135deg,#172554,#2563eb);

}


.music-image {

    background:
    linear-gradient(135deg,#581c87,#9333ea);

}


.hope {

    background:
    linear-gradient(135deg,#92400e,#f59e0b);

}


.media-content {

    padding: 20px;

}


.category {

    color: var(--primary);

    font-size: 10px;

    font-weight: 700;

}


.media-content h3 {

    margin: 8px 0;

}


.media-content p {

    color: var(--muted);

    font-size: 13px;

}


/* ==================================
   PAGE TITLES
================================== */

.page-title {

    margin-bottom: 30px;

}


.page-title h1 {

    font-size: 32px;

    margin-bottom: 8px;

}


.page-title p {

    color: var(--muted);

}


/* ==================================
   SERVICE CARDS
================================== */

.service-grid {

    display: grid;

    grid-template-columns:
    repeat(3,1fr);

    gap: 20px;

}


.service-card {

    background: var(--card);

    padding: 30px;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}


.service-card i {

    color: var(--primary);

    font-size: 30px;

    margin-bottom: 20px;

}


.service-card p {

    color: var(--muted);

    margin-top: 8px;

}


/* ==================================
   JOBS
================================== */

.job-grid {

    display: grid;

    grid-template-columns:
    repeat(3,1fr);

    gap: 20px;

}


.job-card {

    background: var(--card);

    padding: 25px;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}


.job-tag {

    color: var(--primary);

    font-size: 11px;

    font-weight: 700;

}


.job-card h3 {

    margin: 12px 0;

}


.job-card p {

    color: var(--muted);

    line-height: 1.6;

}


.job-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 25px;

    font-size: 12px;

    color: var(--muted);

}


/* ==================================
   CARDS
================================== */

.card {

    background: var(--card);

    padding: 30px;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}


.prayer-layout {

    display: grid;

    grid-template-columns:
    2fr 1fr;

    gap: 25px;

}


.prayer-form form {

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: 20px;

}


input,
textarea,
select {

    padding: 13px;

    border: 1px solid var(--border);

    border-radius: 9px;

    outline: none;

    font-family: inherit;

}


textarea {

    min-height: 150px;

    resize: vertical;

}


.checkbox {

    display: flex;

    gap: 8px;

    font-size: 13px;

    color: var(--muted);

}


.prayer-info {

    text-align: center;

}


.prayer-icon {

    width: 70px;

    height: 70px;

    margin: auto;

    border-radius: 50%;

    background: #eff6ff;

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

}


.prayer-info p {

    color: var(--muted);

    line-height: 1.6;

    margin: 15px 0;

}


.prayer-stat strong {

    display: block;

    font-size: 30px;

    color: var(--primary);

}


.prayer-stat span {

    color: var(--muted);

}


/* ==================================
   MUSIC
================================== */

.music-grid {

    display: grid;

    grid-template-columns:
    repeat(3,1fr);

    gap: 20px;

}


.music-card {

    background: var(--card);

    padding: 20px;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    position: relative;

}


.album {

    height: 200px;

    background:
    linear-gradient(
        135deg,
        #1e3a8a,
        #7c3aed
    );

    border-radius: 12px;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 50px;

}


.music-card h3 {

    margin-top: 15px;

}


.music-card p {

    color: var(--muted);

    margin-top: 5px;

}


.play-btn {

    position: absolute;

    right: 25px;

    bottom: 25px;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    border: none;

    background: var(--primary);

    color: white;

    cursor: pointer;

}


/* ==================================
   BIBLE
================================== */

.bible-verse {

    background:
    linear-gradient(
        135deg,
        #0b1736,
        #1d4ed8
    );

    color: white;

    padding: 50px;

    border-radius: var(--radius);

    text-align: center;

    margin-bottom: 30px;

}


.bible-verse i {

    font-size: 30px;

    color: #fbbf24;

}


.bible-verse h2 {

    max-width: 700px;

    margin: 20px auto;

    font-family:
    "Playfair Display",
    serif;

}


.bible-verse p {

    color: #bfdbfe;

}


.course-grid {

    display: grid;

    grid-template-columns:
    repeat(3,1fr);

    gap: 20px;

}


.course-card {

    background: var(--card);

    padding: 25px;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}


.course-card span {

    color: var(--primary);

    font-size: 11px;

    font-weight: 700;

}


.course-card h3 {

    margin: 12px 0;

}


.course-card p {

    color: var(--muted);

    margin-bottom: 20px;

}


/* ==================================
   CHARITY
================================== */

.impact-banner {

    background:
    linear-gradient(
        135deg,
        #064e3b,
        #16a34a
    );

    color: white;

    padding: 50px;

    border-radius: var(--radius);

}


.impact-banner p {

    margin: 12px 0 25px;

    color: #dcfce7;

}


.charity-grid {

    display: grid;

    grid-template-columns:
    repeat(3,1fr);

    gap: 20px;

    margin-top: 30px;

}


.charity-card {

    background: var(--card);

    padding: 30px;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}


.charity-card i {

    font-size: 30px;

    color: var(--success);

    margin-bottom: 15px;

}


.charity-card p {

    color: var(--muted);

    margin-top: 8px;

}


/* ==================================
   BANK ACCOUNTS (DONATION)
================================== */

.bank-accounts {

    background: var(--card);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    overflow: hidden;

}


.bank-account-header {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 25px;

    background: #eff6ff;

    border-bottom: 1px solid var(--border);

}


.bank-account-header i {

    font-size: 26px;

    color: var(--primary);

}


.bank-account-header strong {

    display: block;

    font-size: 16px;

}


.bank-account-header p {

    color: var(--muted);

    font-size: 13px;

    margin-top: 4px;

}


.bank-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    flex-wrap: wrap;

    padding: 20px 25px;

    border-bottom: 1px solid var(--border);

}


.bank-row:last-child {

    border-bottom: none;

}


.bank-info {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.bank-name {

    font-weight: 600;

    font-size: 14px;

}


.bank-number {

    color: var(--muted);

    font-size: 14px;

    letter-spacing: 0.5px;

}


.copy-btn {

    width: 38px;

    height: 38px;

    border-radius: 10px;

    border: 1px solid var(--border);

    background: var(--background);

    color: var(--primary);

    cursor: pointer;

    flex-shrink: 0;

    transition: 0.2s;

}


.copy-btn:hover {

    background: var(--primary);

    color: white;

}


/* ==================================
   WALLET
================================== */

.wallet-summary {

    background: var(--card);

    padding: 30px;

    border-radius: var(--radius);

    display: flex;

    justify-content: space-between;

    align-items: center;

    box-shadow: var(--shadow);

}


.wallet-summary i {

    font-size: 40px;

    color: var(--primary);

}


.sub-title {

    margin: 35px 0 20px;

}


.vip-grid {

    display: grid;

    grid-template-columns:
    repeat(3,1fr);

    gap: 20px;

}


.vip-card {

    background: var(--card);

    padding: 30px;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}


.vip-card span {

    color: var(--primary);

    font-weight: 700;

}


.vip-card h2 {

    margin: 12px 0;

}


.vip-card p {

    color: var(--muted);

    margin-bottom: 20px;

}


.featured-vip {

    border: 2px solid var(--primary);

}


.financial-note {

    margin-top: 30px;

    background: #eff6ff;

    padding: 25px;

    border-radius: var(--radius);

    display: flex;

    gap: 20px;

}


.financial-note i {

    color: var(--primary);

    font-size: 25px;

}


/* ==================================
   MESSAGES
================================== */

.messages-card {

    background: var(--card);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}


.message {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 20px;

    border-bottom: 1px solid var(--border);

}


.message div:nth-child(2) {

    flex: 1;

}


.message p {

    color: var(--muted);

    margin-top: 5px;

}


/* ==================================
   PROFILE
================================== */

.profile-card {

    background: var(--card);

    padding: 50px;

    text-align: center;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}


.profile-avatar {

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: var(--primary);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 40px;

    margin: auto;

}


.profile-card p {

    color: var(--muted);

    margin: 8px 0 20px;

}


/* ==================================
   SETTINGS
================================== */

.settings-list {

    background: var(--card);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}


.setting-row {

    padding: 22px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 1px solid var(--border);

}


.setting-row > div {

    display: flex;

    align-items: center;

    gap: 15px;

}


.setting-row i {

    color: var(--primary);

}


.setting-row p {

    color: var(--muted);

    margin-top: 5px;

    font-size: 13px;

}


.toggle {

    width: 45px;

    height: 25px;

    border: none;

    border-radius: 20px;

    background: #d1d5db;

    cursor: pointer;

}


.toggle span {

    display: block;

    width: 19px;

    height: 19px;

    background: white;

    border-radius: 50%;

    margin-left: 3px;

}


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

.modal {

    display: none;

    position: fixed;

    inset: 0;

    background:
    rgba(0,0,0,0.6);

    z-index: 2000;

    align-items: center;

    justify-content: center;

}


.modal.active {

    display: flex;

}


.modal-content {

    background: white;

    padding: 40px;

    width: 90%;

    max-width: 420px;

    border-radius: 20px;

    position: relative;

    text-align: center;

}


.close-modal {

    position: absolute;

    right: 20px;

    top: 15px;

    border: none;

    background: transparent;

    font-size: 25px;

    cursor: pointer;

}


.modal-logo {

    width: 60px;

    height: 60px;

    background: var(--primary);

    color: white;

    margin: auto;

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;

}


.modal-content h2 {

    margin-top: 20px;

}


.modal-content p {

    color: var(--muted);

    margin: 10px 0 20px;

}


.modal-content form {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.register-text a {

    color: var(--primary);

}


/* ==================================
   TOAST
================================== */

.toast {

    position: fixed;

    right: 30px;

    bottom: 30px;

    background: #16a34a;

    color: white;

    padding: 15px 20px;

    border-radius: 10px;

    display: none;

    gap: 10px;

    align-items: center;

    z-index: 3000;

}


.toast.show {

    display: flex;

}


/* ==================================
   DARK MODE
================================== */

body.dark {

    --background: #0f172a;

    --card: #1e293b;

    --text: #f8fafc;

    --muted: #94a3b8;

    --border: #334155;

}


body.dark .topbar {

    background: #1e293b;

}


body.dark .search-box {

    background: #0f172a;

}


body.dark input,
body.dark textarea,
body.dark select {

    background: #0f172a;

    color: white;

}


body.dark .modal-content {

    background: #1e293b;

}


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

@media(max-width:1100px) {

    .quick-grid,
    .content-grid,
    .service-grid,
    .job-grid,
    .music-grid,
    .course-grid,
    .charity-grid,
    .vip-grid {

        grid-template-columns:
        repeat(2,1fr);

    }

}


@media(max-width:800px) {

    .sidebar {

        transform: translateX(-100%);

        transition: 0.3s;

    }


    .sidebar.open {

        transform: translateX(0);

    }


    .main {

        margin-left: 0;

    }


    .mobile-menu {

        display: block;

        border: none;

        background: transparent;

        font-size: 22px;

        cursor: pointer;

    }


    .topbar {

        padding: 0 15px;

    }


    .search-box {

        width: 200px;

    }


    .profile-mini div:last-child {

        display: none;

    }


    .content {

        padding: 20px;

    }


    .welcome-banner {

        padding: 30px;

    }


    .welcome-banner h1 {

        font-size: 30px;

    }


    .cross-decoration {

        display: none;

    }


    .prayer-layout {

        grid-template-columns: 1fr;

    }

}


@media(max-width:600px) {

    .quick-grid,
    .content-grid,
    .service-grid,
    .job-grid,
    .music-grid,
    .course-grid,
    .charity-grid,
    .vip-grid {

        grid-template-columns: 1fr;

    }


    .search-box {

        width: 150px;

    }


    .top-actions {

        gap: 5px;

    }


    .welcome-banner {

        min-height: auto;

    }


    .welcome-banner h1 {

        font-size: 26px;

    }


    .topbar {

        gap: 10px;

    }

}