/*@import '../shared/variables.css';*/
/*@import '../shared/buttons.css';*/
:root {
    /* Primary Colors (Green) */
    --primary-900: #028D2D;
    --primary-800: #029e32;
    --primary-700: #02af37;
    --primary-600: #03b038;
    --primary-500: #03b038;
    --primary-400: #35C060;
    --primary-300: #68D088;
    --primary-200: #9ADFAF;
    --primary-100: #E2F4E8;
    --primary-50: #e8f8ed;

    /* Color Aliases */
    --c-primary-0: #028D2D;
    --c-primary: #03b038;
    --c-primary-1: #35C060;
    --c-primary-2: #68D088;
    --c-primary-3: #9ADFAF;
    --c-primary-light: #E9F9EE;

    /* Secondary Colors (Dark Blue) */
    --secondary-900: #0B3147;
    --secondary-800: #1a3f55;
    --secondary-700: #3C5A6C;
    --secondary-600: #547080;
    --secondary-500: #6D8491;
    --secondary-400: #8a9eaa;
    --secondary-300: #a7b8c2;
    --secondary-200: #c4d1d9;
    --secondary-100: #e1eaee;
    --secondary-50: #f0f4f7;

    /* Color Aliases */
    --c-secondary: #0B3147;
    --c-secondary-1: #3C5A6C;
    --c-secondary-2: #6D8491;

    /* Info / Notification Colors (Light Blue) */
    --c-info-0: #0277BD;
    --c-info: #039BE5;
    --c-info-1: #4FC3F7;
    --c-info-2: #81D4FA;
    --c-info-3: #B3E5FC;
    --c-info-light: #E1F5FE;

    /* Neutral Colors */
    --gray-900: #1a1a1a;
    --gray-700: #4a4a4a;
    --gray-500: #9EADB6;
    --gray-300: #CED6DA;
    --gray-100: #F4F5F5;
    --white: #FFFFFF;
    --black: #000000;

    /* Color Aliases */
    --c-gray: #9EADB6;
    --c-gray-1: #CED6DA;
    --c-gray-2: #F4F5F5;
    --c-white: #FFFFFF;


    /* Font Size */
    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px */
    --text-2xl: 1.5rem; /* 24px */
    --text-3xl: 1.875rem; /* 30px */
    --text-4xl: 2.25rem; /* 36px */
    --text-5xl: 3rem; /* 48px */

    /* Font Weight */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 700;

    /* Line Height */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-loose: 1.75;
}
/* ================= Font Weights ================= */
.u-fw-100 { font-weight: 100 !important; }
.u-fw-200 { font-weight: 200 !important; }
.u-fw-300 { font-weight: 300 !important; }
.u-fw-400 { font-weight: 400 !important; }
.u-fw-500 { font-weight: 500 !important; }
.u-fw-600 { font-weight: 600 !important; }
.u-fw-700 { font-weight: 700 !important; }
.u-fw-800 { font-weight: 800 !important; }
.u-fw-900 { font-weight: 900 !important; }
.font-regular { font-weight: var(--font-regular); }
.font-medium { font-weight: var(--font-medium); }
.font-bold { font-weight: var(--font-bold); }
/* ================= Font Sizes ================= */
.u-fs-10 { font-size: 10px !important; }
.u-fs-11 { font-size: 11px !important; }
.u-fs-12 { font-size: 12px !important; }
.u-fs-13 { font-size: 13px !important; }
.u-fs-14 { font-size: 14px !important; }
.u-fs-16 { font-size: 16px !important; }
.u-fs-18 { font-size: 18px !important; }
.u-fs-20 { font-size: 20px !important; }
.u-fs-24 { font-size: 24px !important; }
.u-fs-28 { font-size: 28px !important; }
.u-fs-32 { font-size: 32px !important; }
.text-3xl { font-size: var(--text-3xl); }
.text-xl { font-size: var(--text-xl); }
.text-lg { font-size: var(--text-lg); }
.text-base { font-size: var(--text-base); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
/* ================= Position Top ================= */
.u-top-0 { top: 0 !important; }
.u-top-5 { top: 5px !important; }
.u-top-10 { top: 10px !important; }
.u-top-15 { top: 15px !important; }
.u-top-50p { top: 50% !important; }
.u-top-100p { top: 100% !important; }
.u-top-neg-5 { top: -5px !important; }
.u-top-neg-10 { top: -10px !important; }
/* ================= Position Bottom ================= */
.u-bottom-0 { bottom: 0 !important; }
.u-bottom-5 { bottom: 5px !important; }
.u-bottom-10 { bottom: 10px !important; }
.u-bottom-15 { bottom: 15px !important; }
.u-bottom-50p { bottom: 50% !important; }
.u-bottom-neg-5 { bottom: -5px !important; }
.u-bottom-neg-10 { bottom: -10px !important; }
/* ================= Position Right ================= */
.u-right-0 { right: 0 !important; }
.u-right-5 { right: 5px !important; }
.u-right-10 { right: 10px !important; }
.u-right-15 { right: 15px !important; }
.u-right-50p { right: 50% !important; }
.u-right-neg-5 { right: -5px !important; }
.u-right-neg-10 { right: -10px !important; }
/* ================= Position Left ================= */
.u-left-0 { left: 0 !important; }
.u-left-5 { left: 5px !important; }
.u-left-10 { left: 10px !important; }
.u-left-15 { left: 15px !important; }
.u-left-50p { left: 50% !important; }
.u-left-neg-5 { left: -5px !important; }
.u-left-neg-10 { left: -10px !important; }
/* ================= Text Colors ================= */
.text-gray-900 { color: var(--gray-900); }
.text-gray-700 { color: var(--gray-700); }
.text-gray-500 { color: var(--gray-500); }
.text-primary-700 { color: var(--primary-700); }
.u-text-primary-0 { color: var(--c-primary-0) !important; }
.u-text-primary { color: var(--c-primary) !important; }
.u-text-primary-1 { color: var(--c-primary-1) !important; }
.u-text-primary-2 { color: var(--c-primary-2) !important; }
.u-text-primary-3 { color: var(--c-primary-3) !important; }
.u-text-primary-light { color: var(--c-primary-light) !important; }
.u-text-secondary { color: var(--c-secondary) !important; }
.u-text-secondary-1 { color: var(--c-secondary-1) !important; }
.u-text-secondary-2 { color: var(--c-secondary-2) !important; }
.u-text-gray { color: var(--c-gray) !important; }
.u-text-gray-1 { color: var(--c-gray-1) !important; }
.u-text-white { color: var(--c-white) !important; }
/* ================= Background Colors ================= */
.u-bg-primary-0 { background-color: var(--c-primary-0) !important; }
.u-bg-primary { background-color: var(--c-primary) !important; }
.u-bg-primary-1 { background-color: var(--c-primary-1) !important; }
.u-bg-primary-2 { background-color: var(--c-primary-2) !important; }
.u-bg-primary-3 { background-color: var(--c-primary-3) !important; }
.u-bg-primary-light { background-color: var(--c-primary-light) !important; }
.u-bg-secondary { background-color: var(--c-secondary) !important; }
.u-bg-secondary-1 { background-color: var(--c-secondary-1) !important; }
.u-bg-secondary-2 { background-color: var(--c-secondary-2) !important; }
.u-bg-gray { background-color: var(--c-gray) !important; }
.u-bg-gray-1 { background-color: var(--c-gray-1) !important; }
.u-bg-gray-2 { background-color: var(--c-gray-2) !important; }
.u-bg-white { background-color: var(--c-white) !important; }
.u-bg-info-0 { background-color: var(--c-info-0) !important; }
.u-bg-info { background-color: var(--c-info) !important; }
.u-bg-info-1 { background-color: var(--c-info-1) !important; }
.u-bg-info-2 { background-color: var(--c-info-2) !important; }
.u-bg-info-3 { background-color: var(--c-info-3) !important; }
.u-bg-info-light { background-color: var(--c-info-light) !important; }
/* ================= Border Radius ================= */
.rounded-xs { border-radius: 4px; }
.rounded-sm { border-radius: 8px; }
.rounded-md { border-radius: 12px; }
.rounded-lg { border-radius: 16px; }
.rounded-xl { border-radius: 24px; }
/* ================= Focus States ================= */
.no-focus:focus,
.no-focus:active {
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
    background-color: #f8f9fa !important;
}
.u-py-2-5{
    padding-top: .75rem!important;
    padding-bottom: .75rem!important;
}
/* ================= Buttons ================= */
.btn-custom-success {
    background-color: var(--primary-700);
    border-color: var(--primary-700);
    border-radius: 10px;
    color: white;
}
.btn-custom-success:hover {
    background-color: #0ea63c;
    border-color: #0ea63c;
    color: white;
}
.btn-outline-custom {
    color: var(--primary-700);
    border-color: var(--primary-700);
    border-radius: 10px;
}
.btn-outline-custom:hover {
    background-color: var(--primary-100);
    color: var(--primary-700);
}
.btn-custom-outline-success {
    border: 1px solid #DEDEDE;
    color: var(--primary-700);
    border-radius: 10px;
}
.btn-custom-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    border-radius: 10px;
    color: white;
}
.btn-custom-secondary:hover {
    background-color: #5c636a;
    border-color: #565e64;
    color: white;
}
.btn-outline-custom-secondary {
    color: #6c757d;
    border-color: #6c757d;
    border-radius: 10px;
    background-color: transparent;
}
.btn-outline-custom-secondary:hover {
    background-color: #f8f9fa;
    color: #5c636a;
    border-color: #5c636a;
}
.btn-custom-light {
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    color: #212529;
    border-radius: 10px;
}
.btn-custom-light:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
    color: #212529;
}
.btn-outline-custom-light {
    color: #f8f9fa;
    border-color: #f8f9fa;
    background-color: transparent;
    border-radius: 10px;
}
.btn-outline-custom-light:hover {
    background-color: #f8f9fa;
    color: #212529;
}
/* ================= Alerts ================= */
.alert-success {
    background-color: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.alert-danger {
    background-color: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.alert-warning {
    background-color: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.alert-info {
    background-color: #dbeafe;
    border: 1px solid #93c5fd;
    color: #1e40af;
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}
/* ================= Badge ================= */
.top-badge {
    background-color: #e5ddff;
    color: #5b21b6;
    font-size: 10px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 8px;
    margin-bottom: -6px;
    align-items: center;
    gap: 4px;
    z-index: 20;
    text-align: center;
}
.new-badge {
    background-color: #D1DBFF;
    color: #032BB0;
    font-size: 10px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 8px;
    margin-bottom: -6px;
    align-items: center;
    gap: 4px;
    z-index: 20;
    text-align: center;

}
/* Loader Overlay */
.loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: inherit;
}
.loader-overlay-fullpage {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
/* Spinner در دکمه */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}
/* استایل‌های اختصاصی محدود شده به آیدی مودال */
#profileModal .custom-text-green {
    color: #0cb33f !important;
}
#profileModal .custom-bg-green {
    background-color: #0cb33f !important;
    color: white;
    transition: all 0.3s;
}
#profileModal .custom-bg-green:hover {
    background-color: #0a9133 !important;
}
#profileModal .bg-light-green {
    background-color: #e8f7ed !important;
}
#profileModal .icon-wrapper {
    width: 48px;
    height: 48px;
}
#instantConsultantModal .text-brand-green {
    color: #00b955 !important; /* رنگ سبز برند */
}
#instantConsultantModal .bg-brand-green {
    background-color: #00b955 !important;
    color: white;
    transition: all 0.3s;
}
#instantConsultantModal .bg-brand-green:hover {
    background-color: #009946 !important;
}
#instantConsultantModal .bg-light-green {
    background-color: #f0fdf4 !important; /* پس زمینه سبز خیلی روشن */
}
#instantConsultantModal .border-light-green {
    border-color: #dcfce7 !important;
}
#instantConsultantModal .text-burgundy {
    color: #881337 !important; /* رنگ زرشکی تایمر */
}
#instantConsultantModal .icon-huge {
    font-size: 3.5rem;
    line-height: 1;
}
/* برای هم‌اندازه شدن ستون‌های آمار */
#instantConsultantModal .stat-col {
    flex: 1;
}
.button-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    vertical-align: middle;
}
.button-spinner.hide {
    display: none;
}
.spinner-icon {
    animation: rotate 1s linear infinite;
}
.spinner-icon circle {
    stroke: currentColor;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
    100% { transform: rotate(360deg); }
}
@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}
h1, h2, h3, h4, h5, h6{
    padding: 0;
    margin: 0;
}
#adviser-page .header{
    padding: 10px;
    background-color: #F4F5F5;
}
#adviser-page .header .main_info {
    padding: 10px 15px;
}
#adviser-page .item-share{
    position: absolute;
    left: 15px;
    top: 8px;
    font-size: 20px;
}
#adviser-page .item-name{
    font-size: 16px;
    font-weight: 700;
}
#adviser-page .item-skill .label{
    font-size: 12px;
    font-weight: 400 !important;
    position: relative;
    bottom: 5px;
}
#adviser-page .item-rate .rate{
    font-size: 14px;
    font-weight: 600 !important;
}
#adviser-page .item-rate .count{
    font-size: 12px;
    font-weight: 300 !important;
}
#adviser-page .tag-skill-item{
    background-color: #E9EBEC;
    font-size: 10px;
    padding: 5px 10px;
    border-radius: 10px;
    margin-left: 5px;
    margin-bottom: 8px;
    transition: .3s;
    display: inline-block;
    float: right;
    padding-top: 0.5rem !important; /* پدینگ بالا/پایین تگ خود را اینجا بگذارید */
    padding-bottom: 0.5rem !important;
}
/* حالت پیش‌فرض (مخفی) */
#adviser-page .extra-skill {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    transition: all 0.4s ease-in-out;
    position: relative
    
}
/* حالت باز شده */
#adviser-page .extra-skill.show-skill {
    max-height: 40px; /* این عدد را حدوداً به اندازه ارتفاع تگ مهارت خود تنظیم کنید */
    opacity: 1;
    margin: 0.25rem !important; /* فاصله بین تگ‌ها در حالت باز */
    padding-top: 0.5rem !important; /* پدینگ بالا/پایین تگ خود را اینجا بگذارید */
    padding-bottom: 0.5rem !important;
    
}
.audio-player-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 5px 10px;

    /* تنظیمات راست‌چین کردن */
    display: flex;
    align-items: center;
    direction: rtl; /* این خط دکمه را به سمت راست می‌برد */

    width: 300px;
    height: 25px;
    max-width: 100%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.play-pause-btn {
    background: transparent;
    /*border: 2px solid #11b846;*/
    /*border-radius: 50%;*/
    width: 5px;
    height: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #11b846;
    font-size: 14px;
    flex-shrink: 0;
    transition: all 0.2s;
    margin-left: 10px;

}
.play-pause-btn:hover {
    background-color: #f0fdf4;
}
#waveform {
    flex-grow: 1;
    margin-left: 15px; /* فاصله موج صدا از دکمه در سمت راست */
    direction: ltr; /* مهم: پر شدن نوار صدا باید همیشه از چپ به راست باشد */
}
.speech-bubble {
    background-color: #1e3a52;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 10px;
    display: inline-block;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 50px;
    left: 180px;

}
.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: 50px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 0;
    border-color: #1e3a52 transparent transparent transparent;
}
#adviser-page .reserve-meeting_info_day{
    min-width: 70px !important;
    height: 85px !important;
}
.reserve-meeting_info_day .day-num {
     font-size: 1rem;
 }
#adviser-page .reserve-meeting_info_time{
    border-radius: 8px;
    border: 1px solid #dedede;
    padding: 12px 14px;
    font-size: 12px;
}
#topicSelectModal .bg-modal-gray { background-color: #f0f0f0 !important; }
#topicSelectModal .text-brand-green { color: #00b955 !important; }
#topicSelectModal .bg-light-green { background-color: #e8f7ed !important; }
#topicSelectModal .icon-lg { font-size: 2rem; line-height: 1; }
/* دکمه‌های موضوعات */
#topicSelectModal .topic-btn {
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    color: #4a4a4a;
    border-radius: 0.5rem;
    padding: 0.8rem 0.5rem;
    font-size: 0.9rem;
    width: 100%;
    transition: all 0.2s ease;
}
#topicSelectModal .topic-btn.active {
    background-color: #e8f7ed;
    border-color: #00b955;
    color: #00b955;
}
/* تنظیمات اسکرول لیست - فقط این بخش اسکرول می‌خورد */
#topicSelectModal .scrollable-topics {
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 5px;
}
#topicSelectModal .scrollable-topics::-webkit-scrollbar { width: 6px; }
#topicSelectModal .scrollable-topics::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
#topicSelectModal .scrollable-topics::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 10px; }
/* استایل دکمه تایید نهایی */
#topicSelectModal .btn-submit {
    background-color: #00b955;
    color: white;
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-weight: 500;
}
#topicSelectModal .btn-submit:hover { background-color: #00a04a; color: white; }
#topicSelectModal .btn-submit:disabled {
    background-color: #a5d8b9 !important; /* رنگ سبز کمرنگ */
    cursor: not-allowed;
    opacity: 0.7;
}
/* استایل تایمر ثابت */
#global-reservation-timer {
    position: fixed;
    top: 20px;
    left: 20px;
    background: #fff;
    border: 2px solid #007bff;
    border-radius: 8px;
    padding: 12px 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    display: none;
}
.timer-content {
    display: flex;
    align-items: center;
    gap: 8px;
}
.timer-label {
    font-size: 14px;
    color: #666;
}
.counter {
    font-size: 18px;
    font-weight: bold;
    color: #007bff;
    direction: ltr;
}
#adviser-page .tag-skill-item{
    background-color: #E9EBEC;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 12px;
    margin-left: 8px;
    margin-bottom: 8px;
    transition: .3s;
    display: inline-block;
    float: right;
    padding-top: 0.5rem !important; /* پدینگ بالا/پایین تگ خود را اینجا بگذارید */
    padding-bottom: 0.5rem !important;
}
#adviser-page .tag-skill-item:hover{
    background-color: #aab8b8;
    color: #333;
}
/* حالت پیش‌فرض (مخفی) */
#adviser-page .extra-skill {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    transition: all 0.4s ease-in-out;
    position: relative

}
/* حالت باز شده */
#adviser-page .extra-skill.show-skill {
    max-height: 40px; /* این عدد را حدوداً به اندازه ارتفاع تگ مهارت خود تنظیم کنید */
    opacity: 1;
    margin: 0.25rem !important; /* فاصله بین تگ‌ها در حالت باز */
    padding-top: 0.5rem !important; /* پدینگ بالا/پایین تگ خود را اینجا بگذارید */
    padding-bottom: 0.5rem !important;

}
#adviser-page .adviser-avatar{
    width: 104px;
    height: 104px;
}
#adviser-page .wiki-header_sub.single{
    min-height: 390px;
}
.top-badge {
    background-color: #e5ddff;
    color: #5b21b6;
    font-size: 10px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 12px;
    margin-bottom: -6px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 20;
}
.new-badge {
    background-color: #D1DBFF;
    color: #032BB0;
    font-size: 10px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 12px;
    margin-bottom: -6px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 20;
}