@import 'swiper-bundle.min.css';
@import 'aos.css';
@import 'fontawesome/css/all.css';
@import '../Vazirmatn-font-face.css';
@import 'persian-datepicker.min.css';
@import 'bootstrap-icons/bootstrap-icons.min.css';
@import 'select2.min.css';
@import 'bootstrap.rtl.min.css';
@import 'ckeditor5.css';
@import 'boxes.css';



/* ایمپورت متغیرهای رنگ سازمانی */
/*@import 'variables.css';*/

:root {
    /* ===========================================================
       Brand Color Palette
    =========================================================== */
    --brand-50:  #f4f2ff;
    --brand-100: #ebe8ff;
    --brand-200: #d8d3ff;
    --brand-300: #beb4ff;
    --brand-400: #9e90ff;
    --brand-500: #6d5cf6; /* Primary Brand */
    --brand-600: #5948e8;
    --brand-700: #4938cf;
    --brand-800: #3d2fad;
    --brand-900: #31268a;

    /* ===========================================================
       Semantic Colors
    =========================================================== */

    --brand-primary: var(--brand-500);
    --brand-primary-hover: var(--brand-600);
    --brand-primary-active: var(--brand-700);

    --brand-secondary: var(--brand-200);
    --brand-secondary-hover: var(--brand-300);

    /* RGB */
    --brand-primary-rgb: 109, 92, 246;
    --brand-secondary-rgb: 216, 211, 255;

    /* Text */
    --text-dark: #212529;
    --text-muted: #6c757d;
    --text-light: #ffffff;

    /* Background */
    --bg-light: #f8f9fa;
    --bg-brand: var(--brand-50);

    /* Border */
    --border-color: #e9ecef;
    --border-brand: var(--brand-200);

    /* Bootstrap Variables */
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: var(--brand-primary-rgb);

    --bs-secondary: var(--brand-secondary);
    --bs-secondary-rgb: var(--brand-secondary-rgb);

    --bs-body-color: var(--text-dark);

    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: var(--brand-primary-hover);
}

body {
    font-family: "Vazirmatn", sans-serif;
    color: var(--text-dark);
    background: #fff;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ===========================================================
   Text
=========================================================== */

p {
    color: var(--text-dark)!important;
    direction:rtl !important;
}

h1 {
    color: var(--brand-600)!important;

}
h2,h3{
    color: var(--brand-500) !important;
    margin:50px 0px 10px 0px;
    direction:rtl !important;


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

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

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

/* ===========================================================
   Backgrounds
=========================================================== */

.bg-primary,
.bg-brand-primary {
    background: var(--brand-primary) !important;
}

.bg-secondary,
.bg-brand-secondary {
    background: var(--brand-secondary) !important;
}

.bg-brand-light {
    background: var(--brand-50) !important;
}

.bg-light {
    background: var(--bg-light) !important;
}

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

.btn-primary,
.btn-brand-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-brand-primary:hover {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

.btn-primary:active,
.btn-brand-primary:active {
    background: var(--brand-primary-active);
    border-color: var(--brand-primary-active);
}

.btn-secondary,
.btn-brand-secondary {
    background: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: var(--brand-900);
}

.btn-secondary:hover,
.btn-brand-secondary:hover {
    background: var(--brand-secondary-hover);
    border-color: var(--brand-secondary-hover);
}

.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-outline-primary:hover {
    background: var(--brand-primary) !important;
    color: #fff;
}

/* ===========================================================
   Borders
=========================================================== */

.border-brand {
    border-color: var(--border-brand) !important;
}

.border-top-brand {
    border-top: 4px solid var(--brand-primary) !important;
}

/* ===========================================================
   Links
=========================================================== */

a {
    color: var(--brand-primary);
    text-decoration: none;
}

a:hover {
    color: var(--brand-primary-hover);
}

/* ==========================================
   Chat
========================================== */

.chat-container::-webkit-scrollbar {
    width: 6px;
}

.chat-container::-webkit-scrollbar-track {
    background: var(--brand-100);
    border-radius: 999px;
}

.chat-container::-webkit-scrollbar-thumb {
    background: var(--brand-300);
    border-radius: 999px;
}

.chat-container::-webkit-scrollbar-thumb:hover {
    background: var(--brand-500);
}

.chat-bubble {
    max-width: 78%;
    padding: 16px 18px;
    border-radius: 18px;
    line-height: 1.8;
    transition: .25s;
}

/* پیام کاربر */

.chat-customer{
    background: linear-gradient(
        135deg,
        var(--brand-500),
        var(--brand-700)
    );

    color:#fff;

    border-top-right-radius:0;

    box-shadow:
        0 12px 30px rgba(var(--brand-primary-rgb),.22);
}

.chat-customer .border-bottom{
    border-color:rgba(255,255,255,.15)!important;
}

/* پیام پشتیبانی */

.chat-support{

    background:var(--white);

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

    color:var(--text-dark);

    border-top-left-radius:0;

    box-shadow:
        0 6px 18px rgba(0,0,0,.04);
}

.chat-support .border-bottom{
    border-color:var(--brand-100)!important;
}

.chat-icon{
    color:var(--brand-500);
}