/*==========================================================
                    CNC WORLD DESIGN SYSTEM
==========================================================*/

:root {
    /* Brand */

    --primary: #f7b500;
    --primary-dark: #d49b00;
    /* Background */

    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-2: #f8f9fb;
    /* Text */

    --text: #1f2937;
    --text-light: #6b7280;
    --text-white: #ffffff;
    /* Navbar */

    --navbar: #1b1b1b;
    --navbar-hover: rgba(247,181,0,.12);
    /* Header */

    --top-header: #111111;
    /* Footer */

    --footer: #171717;
    /* Cards */

    --card: #ffffff;
    --card-hover: #ffffff;
    /* Input */

    --input: #ffffff;
    --input-border: #d7dbe0;
    --input-focus: #f7b500;
    /* Borders */

    --border: #e5e7eb;
    /* Icons */

    --icon-bg: #262626;
    /* Status */

    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;
    /* Overlay */

    --overlay: rgba(0,0,0,.45);
    /* Radius */

    --radius: 18px;
    /* Shadow */

    --shadow: 0 15px 40px rgba(0,0,0,.12);
}

body.dark {
    --bg: #0f1115;
    --surface: #171b22;
    --surface-2: #20252d;
    --text: #eef2f7;
    --text-light: #b8c0ca;
    --text-white: #ffffff;
    --navbar: #111318;
    --navbar-hover: rgba(247,181,0,.16);
    --top-header: #090a0d;
    --footer: #0d0f13;
    --card: #171b22;
    --card-hover: #20252d;
    --input: #1b2028;
    --input-border: #333a45;
    --input-focus: #f7b500;
    --border: #323842;
    --icon-bg: #252b34;
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;
    --overlay: rgba(0,0,0,.6);
    --shadow: 0 18px 45px rgba(0,0,0,.55);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Vazirmatn",sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    direction: rtl;
    zoom:0.85;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    transition: background .35s ease, color .35s ease;
}

a {
    text-decoration: none;
    color: inherit;
    transition: .3s;
}

img {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*==========================
        Top Header
==========================*/

.top-header {
    background: var(--top-header);
    color: var(--text-white);
    height: 42px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .top-header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

.top-info {
    display: flex;
    gap: 24px;
}

    .top-info span {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .top-info i {
        color: var(--primary);
    }

.top-social {
    display: flex;
    gap: 14px;
}

    .top-social a {
        color: var(--text-white);
    }

        .top-social a:hover {
            color: var(--primary);
        }

.logo-white {
    color: var(--text-white);
    font-size: 34px;
    font-weight: 800;
}

.logo-yellow {
    color: var(--primary);
    font-size: 34px;
    font-weight: 800;
}

/*==========================
            Navbar
==========================*/

.custom-navbar {
    background: var(--navbar);
    min-height: 80px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
    transition: background .35s, box-shadow .35s;
}

.logo-white {
    color: var(--text-white);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 1px;
}

.logo-yellow {
    color: var(--primary);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 1px;
}


/*==========================
            Menu
==========================*/

.navbar-nav {
    gap: 8px;
}

    .navbar-nav .nav-link {
        color: var(--text-white) !important;
        padding: 12px 18px;
        border-radius: 12px;
        font-weight: 500;
        transition: .3s;
    }

        .navbar-nav .nav-link:hover {
            background: var(--navbar-hover);
            color: var(--primary) !important;
        }

    .navbar-nav .active {
        background: rgba(247,181,0,.18);
        color: var(--primary) !important;
    }


/*==========================
        Navbar Actions
==========================*/

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-btn {
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: var(--icon-bg);
    color: var(--text-white);
    cursor: pointer;
    transition: .3s;
}

    .icon-btn:hover {
        background: var(--primary);
        color: #111;
        transform: translateY(-2px);
    }

.login-btn {
    text-decoration: none;
    background: var(--primary);
    color: #111;
    padding: 11px 22px;
    border-radius: 12px;
    font-weight: 700;
    transition: .3s;
}

    .login-btn:hover {
        background: var(--primary-dark);
        color: #111;
        transform: translateY(-2px);
    }


/*==========================
        Theme Button
==========================*/

.theme-btn {
    overflow: hidden;
}

    .theme-btn i {
        transition: .4s;
    }

    .theme-btn:hover i {
        transform: rotate(180deg);
    }

/*==========================
            Mobile
==========================*/

@media(max-width:992px) {

    .top-header {
        display: none;
    }

    .custom-navbar {
        min-height: 72px;
    }

    .navbar-collapse {
        margin-top: 18px;
        padding: 20px;
        background: var(--navbar);
        border-radius: 18px;
        box-shadow: var(--shadow);
    }

    .navbar-nav {
        gap: 0;
    }

        .navbar-nav .nav-link {
            padding: 15px;
            border-radius: 10px;
            border-bottom: 1px solid rgba(255,255,255,.06);
        }

    .navbar-actions {
        display: none;
    }
}

/*==========================================================
                Global Components
==========================================================*/

/*==========================
            Footer
==========================*/

.footer {
    background: var(--footer);
    color: var(--text-white);
    padding: 70px 0 30px;
}

    .footer h5 {
        color: var(--primary);
        margin-bottom: 22px;
        font-size: 22px;
        font-weight: 700;
    }

    .footer p {
        color: #cfcfcf;
        line-height: 2;
    }

    .footer ul {
        padding: 0;
        margin: 0;
    }

    .footer li {
        margin-bottom: 12px;
    }

    .footer a {
        color: #d8d8d8;
        transition: .3s;
    }

        .footer a:hover {
            color: var(--primary);
            padding-right: 8px;
        }


/*==========================
        Common Cards
==========================*/

.card,
.course-card,
.article-card,
.teacher-card,
.comment-card,
.filter-card,
.sidebar-box,
.info-box,
.episode-card {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: background .35s, color .35s, border-color .35s, box-shadow .35s, transform .35s;
}

    .card:hover,
    .course-card:hover,
    .article-card:hover,
    .teacher-card:hover,
    .comment-card:hover,
    .filter-card:hover,
    .sidebar-box:hover,
    .info-box:hover {
        transform: translateY(-5px);
    }


/*==========================
            Forms
==========================*/

input,
textarea,
select {
    background: var(--input);
    color: var(--text);
    border: 1px solid var(--input-border);
    transition: .3s;
}

    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(247,181,0,.18);
    }


/*==========================
            Buttons
==========================*/

.btn-primary-custom {
    background: var(--primary);
    color: #111;
    border: none;
    border-radius: 12px;
    padding: 12px 26px;
    font-weight: 700;
    transition: .3s;
}

    .btn-primary-custom:hover {
        background: var(--primary-dark);
        transform: translateY(-2px);
    }


/*==========================
        Scrollbar
==========================*/

::-webkit-scrollbar {
    width: 11px;
}

::-webkit-scrollbar-track {
    background: var(--surface);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 20px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--primary-dark);
    }


/*==========================
        Selection
==========================*/

::selection {
    background: var(--primary);
    color: #111;
}


/*==========================
        Smooth Animation
==========================*/

* {
    transition: background-color .35s, color .35s, border-color .35s;
}


/*==========================
        Dark Fixes
==========================*/

body.dark .footer p {
    color: #bfc6d0;
}

body.dark .footer a {
    color: #d8dee7;
}

    body.dark .footer a:hover {
        color: var(--primary);
    }

body.dark .top-header {
    border-bottom: 1px solid rgba(255,255,255,.05);
}

body.dark .navbar-collapse {
    border: 1px solid var(--border);
}

body.dark .icon-btn {
    border: 1px solid rgba(255,255,255,.05);
}

.course-title {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* حداکثر ۲ خط */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* اختیاری */
    line-height: 1.5;
}

.navbar-actions li {
    list-style: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-toggler{
    border-color: white !important;
}