* {
    margin: 0;
    padding: 0;
    font-size: 16px;
    touch-action: pan-y pan-x;
}

:root {
    --color-primary: #16A34A;
    --color-primary-light: #54c17c6d;

    --color-accent: #3B82F6;
    --color-accent-light: #60a5fa4c;

    --color-bg: #F9FAFB;
    --color-bg-alt: #FFFFFF;

    --color-text: #111827;
    --color-text-secondary: #6B7280;

    --color-success: #22C55E;
    --color-error: #EF4444;
    --color-warning: #F59E0B;
    --color-white: #f5f5f5;
    --color-white-3: #adb5bd;
    /* profile content views */

    /* رنگ‌های ویدیو پلیر */
    --video-bg: #000;
    --video-progress-bg: #ffffff50;
    --video-progress-fill: #ffffff80;

    /* نوتی قرمز */
    --color-alert: #FF3B30;

    /* رنگ bottom navbar */
    --navbar-bg: #FFFFFF;

    /* border */
    --color-border: #E5E7EB;
    --border: 1px solid var(--color-border);
    --border-3-primary-light: 3px solid var(--color-primary-light);
    --border-radius: 14px;
    --story-border-active: #d8f3dc;
    --story-border-inactive: #f8f9fa;
}

:root[data-theme="dark"] {
    --color-primary: #4ADE80;
    --color-primary-light: #54c17c6d;

    --color-accent: #60A5FA;
    --color-accent-light: #93c4fd4c;

    /* --color-bg: #0D0F11; */
    --color-bg: #1A1C1F;
    --color-bg-alt: #1A1C1F;

    --color-text: #F3F4F6;
    --color-text-secondary: #9CA3AF;

    --color-success: #4ADE80;
    --color-error: #F87171;
    --color-warning: #FBBF24;

    --video-bg: #000;
    --video-progress-bg: #ffffff30;
    --video-progress-fill: #ffffff60;

    --color-alert: #FF5F52;

    --navbar-bg: #1A1C1F;

    /* border */
    --color-border: #2D2F32;
    --border: 1px solid var(--color-border);
    --border-3-primary-light: 3px solid var(--color-primary-light);
    --border-radius: 14px;
    --story-border-active: #14532D;
    --story-border-inactive: #2D2F32;
}

body {
    max-width: 100%;
    overflow: hidden;
    overflow-y: auto;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: 16px;
}

/* header */
header {
    background-color: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 50;
}

.header-fix-heigh {
    height: 68px;
}

.red-circle{
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background-color: var(--color-alert);
    border-radius: 50%;
}

p {
    margin-bottom: 0;
}

i,
span,
p {
    color: var(--color-text);
}
.svg-inline--fa{
    height: 16px;
    width: 16px;
    color: var(--color-text);
}
.svg-20{
    height: 20px;
    width: 20px;
}
.svg-18{
    height: 18px;
    width: 18px;
}
.svg-14{
    height: 14px;
    width: 14px;
}
.svg-12{
    height: 12px;
    width: 12px;
}

.text-secondary {
    color: var(--color-text-secondary) !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

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

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

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

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

.btn-outline-accent {
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
}

.btn-accent {
    color: var(--color-text);
    background-color: var(--color-accent);
    border: 2px solid var(--color-accent);
}


img,
video {
    width: 100%;
}

i {
    font-size: 20px;
}

/* font size */
.fs-8 {
    font-size: 8px;
}

.fs-10 {
    font-size: 10px;
}

.fs-12 {
    font-size: 12px;
}

.fs-14 {
    font-size: 14px;
}

.fs-16 {
    font-size: 16px;
}

.fs-18 {
    font-size: 18px;
}

.fs-20 {
    font-size: 20px;
}

.fs-22 {
    font-size: 22px;
}

.fs-24 {
    font-size: 24px;
}

.profile-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
}

/* نوار پایین */
.buttom-navbar {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: var(--navbar-bg);
    border-top: 1px solid var(--color-border);
    padding: 10px;
    z-index: 50;
}

.buttom-navbar .nav-items {
    display: flex;
    justify-content: space-around;
}

.buttom-navbar-fix-heigh {
    height: 54px;
}

.buttom-navbar .nav-items a i {
    font-size: 20px;
}