/*
Template Name: Dactorapp - Doctor Appointment Booking Mobile Template
Author: Askbootstrap
Author URI: https://themeforest.net/user/askbootstrap
Version: 0.1
*/

/*
- Body
- Scroll Bar
- Custom
- Index
- Landing Page
- Country
- Welcome
- Footer Nav
- Home
- Favorte Doctor
- Select Area
- Doctor Profile
- Book Appointment
- Request Appointment
- notification
- Video
- Doctor Profile Two
- Visit Info / Chekout
- Message
- Call
- Call Doctor
- History
- Profile
- My Appointment
- Play Recording
*/


@font-face {
    font-family: 'BNAZANB';
    src: url('fonts/BKOODB.eot'); /* IE9 Compat Modes */
    src: url('fonts/BKOODB.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/BKOODB.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/BKOODB.woff') format('woff'), /* Most Browsers */
         url('fonts/BKOODB.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/BKOODB.svg#BNAZANB') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --dark: #1b1e42;
    --primary: #d10082;
    --light-primary: #01BDF3;
    --lighter-primary: #598fff;
    --lighter-primary-opacity: #e9f2ff;
    --secondary: #595f73;
    --light: #f5f5f5;
    --success: #3dae14;
    --light-success: #93cf88;
    --warning: #fdbe00;
    --light-warning: #fbf2d9;
    --orange: #FF8811;
    --light-orange: #f8efea;
}
/* Body */
body {
    font-family: 'BNAZANB', sans-serif;
    color: var(--dark);
    font-size: 13px;
}
/* Scroll Bar */
::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
::-webkit-scrollbar-corner {
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid transparent;
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    background-color: rgba(0, 0, 0, .15);
    -webkit-box-shadow: inset -1px -1px 0 rgba(0, 0, 0, .05), inset 1px 1px 0 rgba(0, 0, 0, .05);
    box-shadow: inset -1px -1px 0 rgba(0, 0, 0, .05), inset 1px 1px 0 rgba(0, 0, 0, .05);
}
::-webkit-scrollbar {
    width: 4px;
    background-color: #ffffff;
}
::-webkit-scrollbar-thumb {
    height: 50px;
    background: hsla(0, 0%, 53.3%, 0.4);
}
.landing-slider.slick-initialized, .top-doctors.slick-initialized, .available-doctor.slick-initialized, .recent-doctors.slick-initialized {
    visibility: visible;
    opacity: 1;  
}
.landing-slider, .top-doctors, .available-doctor, .recent-doctors {
  
}
/* Custom */
.osahan-card-body {
    padding: 12px !important;
}
.osahan-card-footer {
    padding-left: 12px;
    padding-right: 12px;
}
.osahan-user-profile img {
    height: 50px;
}
.nav-wrapper.nav-wrapper-0 .nav-content h2 {
    display: none;
}
li.nav-parent.level-open h2 {
    display: block !important;
}
.border-bottom {
    border-color: #eee !important;
}
.text-dark {
    color: var(--dark) !important;
}
.text-primary {
    color: var(--primary) !important;
}
.text-warning {
    color: var(--warning) !important;
}
.bg-wars{
    
    background-color: #f7d0ed;
}
.text-success {
    color: var(--success) !important;
}
.text-orange {
    color: var(--orange);
}
.text-info {
    color: var(--light-primary);
}
.bg-light {
    background-color: var(--light) !important;
}
.bg-primary {
    background-color: var(--primary) !important;
}
.light-bg-primary {
    background-color: var(--light-primary);
}
.lighter-bg-primary {
    background-color: var(--lighter-primary);
}
.linafor {
    color: var(--lighter-primary);
}


.lighter-bg-primary-opacity {
    background-color: var(--lighter-primary-opacity);
}
.light-bg-warning {
    background-color: var(--light-warning);
}
.light-bg-success {
    background-color: var(--light-success);
}
.light-bg-orange {
    background-color: var(--light-orange);
}
.btn-primary, .btn-outline-primary:hover, .btn-outline-primary:focus {
    background: #0147ff !important;
    border-color:#0147ff !important;
}
.btn-outline-primary{
    background-color: #ffffff !important;
    border-color:#0147ff !important;
    color: #0147ff !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus{
    color: #ffffff !important;
}

.btn-secondary, .btn-outline-secondary:hover, .btn-outline-secondary:focus {
    background: #FF8811 !important;
    border-color: #FF8811 !important;
}


/* ۱۰ */ .btn-pink10, .btn-outline-pink10:hover, .btn-outline-pink10:focus { background: #FF5733 !important; border-color: #FF5733 !important; }  /* نارنجی روشن */
/* ۱۱ */ .btn-pink11, .btn-outline-pink11:hover, .btn-outline-pink11:focus { background: #FFC300 !important; border-color: #FFC300 !important; }  /* زرد طلایی */
/* ۱۲ */ .btn-pink12, .btn-outline-pink12:hover, .btn-outline-pink12:focus { background: #DAF7A6 !important; border-color: #DAF7A6 !important; }  /* سبز روشن */
/* ۱۳ */ .btn-pink13, .btn-outline-pink13:hover, .btn-outline-pink13:focus { background: #33FF57 !important; border-color: #33FF57 !important; }  /* سبز پررنگ */
/* ۱۴ */ .btn-pink14, .btn-outline-pink14:hover, .btn-outline-pink14:focus { background: #33FFF3 !important; border-color: #33FFF3 !important; }  /* فیروزه‌ای */
/* ۱۵ */ .btn-pink15, .btn-outline-pink15:hover, .btn-outline-pink15:focus { background: #3380FF !important; border-color: #3380FF !important; }  /* آبی روشن */
/* ۱۶ */ .btn-pink16, .btn-outline-pink16:hover, .btn-outline-pink16:focus { background: #8C33FF !important; border-color: #8C33FF !important; }  /* بنفش */
/* ۱۷ */ .btn-pink17, .btn-outline-pink17:hover, .btn-outline-pink17:focus { background: #FF33F6 !important; border-color: #FF33F6 !important; }  /* صورتی روشن */
/* ۱۸ */ .btn-pink18, .btn-outline-pink18:hover, .btn-outline-pink18:focus { background: #FF3380 !important; border-color: #FF3380 !important; }  /* صورتی تیره */
/* ۱۹ */ .btn-pink19, .btn-outline-pink19:hover, .btn-outline-pink19:focus { background: #FF6F33 !important; border-color: #FF6F33 !important; }  /* نارنجی */
/* ۲۰ */ .btn-pink20, .btn-outline-pink20:hover, .btn-outline-pink20:focus { background: #FFD133 !important; border-color: #FFD133 !important; }  /* زرد روشن */
/* ۲۱ */ .btn-pink21, .btn-outline-pink21:hover, .btn-outline-pink21:focus { background: #A6FF33 !important; border-color: #A6FF33 !important; }  /* سبز لیمویی */
/* ۲۲ */ .btn-pink22, .btn-outline-pink22:hover, .btn-outline-pink22:focus { background: #33FFBD !important; border-color: #33FFBD !important; }  /* سبز آبی */
/* ۲۳ */ .btn-pink23, .btn-outline-pink23:hover, .btn-outline-pink23:focus { background: #3380FF !important; border-color: #3380FF !important; }  /* آبی پررنگ */
/* ۲۴ */ .btn-pink24, .btn-outline-pink24:hover, .btn-outline-pink24:focus { background: #7F33FF !important; border-color: #7F33FF !important; }  /* بنفش تیره */
/* ۲۵ */ .btn-pink25, .btn-outline-pink25:hover, .btn-outline-pink25:focus { background: #FF33D4 !important; border-color: #FF33D4 !important; }  /* صورتی مایل به ارغوانی */
/* ۲۶ */ .btn-pink26, .btn-outline-pink26:hover, .btn-outline-pink26:focus { background: #FF6A33 !important; border-color: #FF6A33 !important; }  /* نارنجی مایل به قرمز */
/* ۲۷ */ .btn-pink27, .btn-outline-pink27:hover, .btn-outline-pink27:focus { background: #FFBD33 !important; border-color: #FFBD33 !important; }  /* زرد طلایی روشن */
/* ۲۸ */ .btn-pink28, .btn-outline-pink28:hover, .btn-outline-pink28:focus { background: #33FFD1 !important; border-color: #33FFD1 !important; }  /* فیروزه‌ای روشن */
/* ۲۹ */ .btn-pink29, .btn-outline-pink29:hover, .btn-outline-pink29:focus { background: #3399FF !important; border-color: #3399FF !important; }  /* آبی روشن‌تر */
/* ۳۰ */ .btn-pink30, .btn-outline-pink30:hover, .btn-outline-pink30:focus { background: #9933FF !important; border-color: #9933FF !important; }  /* بنفش پررنگ */
/* ۳۱ */ .btn-pink31, .btn-outline-pink31:hover, .btn-outline-pink31:focus { background: #FF3380 !important; border-color: #FF3380 !important; }  /* صورتی تند */
/* ۳۲ */ .btn-pink32, .btn-outline-pink32:hover, .btn-outline-pink32:focus { background: #FF5733 !important; border-color: #FF5733 !important; }  /* نارنجی */
/* ۳۳ */ .btn-pink33, .btn-outline-pink33:hover, .btn-outline-pink33:focus { background: #FFC300 !important; border-color: #FFC300 !important; }  /* زرد طلایی */
/* ۳۴ */ .btn-pink34, .btn-outline-pink34:hover, .btn-outline-pink34:focus { background: #DAF7A6 !important; border-color: #DAF7A6 !important; }  /* سبز روشن */
/* ۳۵ */ .btn-pink35, .btn-outline-pink35:hover, .btn-outline-pink35:focus { background: #33FF57 !important; border-color: #33FF57 !important; }  /* سبز پررنگ */
/* ۳۶ */ .btn-pink36, .btn-outline-pink36:hover, .btn-outline-pink36:focus { background: #33FFF3 !important; border-color: #33FFF3 !important; }  /* فیروزه‌ای */
/* ۳۷ */ .btn-pink37, .btn-outline-pink37:hover, .btn-outline-pink37:focus { background: #3380FF !important; border-color: #3380FF !important; }  /* آبی روشن */
/* ۳۸ */ .btn-pink38, .btn-outline-pink38:hover, .btn-outline-pink38:focus { background: #8C33FF !important; border-color: #8C33FF !important; }  /* بنفش */
/* ۳۹ */ .btn-pink39, .btn-outline-pink39:hover, .btn-outline-pink39:focus { background: #FF33F6 !important; border-color: #FF33F6 !important; }  /* صورتی روشن */
/* ۴۰ */ .btn-pink40, .btn-outline-pink40:hover, .btn-outline-pink40:focus { background: #FF3380 !important; border-color: #FF3380 !important; }  /* صورتی تیره */
/* ۴۱ */ .btn-pink41, .btn-outline-pink41:hover, .btn-outline-pink41:focus { background: #FF6F33 !important; border-color: #FF6F33 !important; }  /* نارنجی */
/* ۴۲ */ .btn-pink42, .btn-outline-pink42:hover, .btn-outline-pink42:focus { background: #FFD133 !important; border-color: #FFD133 !important; }  /* زرد روشن */
/* ۴۳ */ .btn-pink43, .btn-outline-pink43:hover, .btn-outline-pink43:focus { background: #A6FF33 !important; border-color: #A6FF33 !important; }  /* سبز لیمویی */
/* ۴۴ */ .btn-pink44, .btn-outline-pink44:hover, .btn-outline-pink44:focus { background: #33FFBD !important; border-color: #33FFBD !important; }  /* سبز آبی */
/* ۴۵ */ .btn-pink45, .btn-outline-pink45:hover, .btn-outline-pink45:focus { background: #3380FF !important; border-color: #3380FF !important; }  /* آبی پررنگ */
/* ۴۶ */ .btn-pink46, .btn-outline-pink46:hover, .btn-outline-pink46:focus { background: #7F33FF !important; border-color: #7F33FF !important; }  /* بنفش تیره */
/* ۴۷ */ .btn-pink47, .btn-outline-pink47:hover, .btn-outline-pink47:focus { background: #FF33D4 !important; border-color: #FF33D4 !important; }  /* صورتی مایل به ارغوانی */
/* ۴۸ */ .btn-pink48, .btn-outline-pink48:hover, .btn-outline-pink48:focus { background: #FF6A33 !important; border-color: #FF6A33 !important; }  /* نارنجی مایل به قرمز */
/* ۴۹ */ .btn-pink49, .btn-outline-pink49:hover, .btn-outline-pink49:focus { background: #FFBD33 !important; border-color: #FFBD33 !important; }  /* زرد طلایی روشن */
/* ۵۰ */ .btn-pink50, .btn-outline-pink50:hover, .btn-outline-pink50:focus { background: #33FFD1 !important; border-color: #33FFD1 !important; }  /* فیروزه‌ای روشن */
/* ۵۱ */ .btn-pink51, .btn-outline-pink51:hover, .btn-outline-pink51:focus { background: #3399FF !important; border-color: #3399FF !important; }  /* آبی روشن‌تر */
/* ۵۲ */ .btn-pink52, .btn-outline-pink52:hover, .btn-outline-pink52:focus { background: #9933FF !important; border-color: #9933FF !important; }  /* بنفش پررنگ */
/* ۵۳ */ .btn-pink53, .btn-outline-pink53:hover, .btn-outline-pink53:focus { background: #FF3380 !important; border-color: #FF3380 !important; }  /* صورتی تند */
/* ۵۴ */ .btn-pink54, .btn-outline-pink54:hover, .btn-outline-pink54:focus { background: #FF5733 !important; border-color: #FF5733 !important; }  /* نارنجی */
/* ۵۵ */ .btn-pink55, .btn-outline-pink55:hover, .btn-outline-pink55:focus { background: #FFC300 !important; border-color: #FFC300 !important; }  /* زرد طلایی */
/* ۵۶ */ .btn-pink56, .btn-outline-pink56:hover, .btn-outline-pink56:focus { background: #DAF7A6 !important; border-color: #DAF7A6 !important; }  /* سبز روشن */
/* ۵۷ */ .btn-pink57, .btn-outline-pink57:hover, .btn-outline-pink57:focus { background: #33FF57 !important; border-color: #33FF57 !important; }  /* سبز پررنگ */
/* ۵۸ */ .btn-pink58, .btn-outline-pink58:hover, .btn-outline-pink58:focus { background: #33FFF3 !important; border-color: #33FFF3 !important; }  /* فیروزه‌ای */
/* ۵۹ */ .btn-pink59, .btn-outline-pink59:hover, .btn-outline-pink59:focus { background: #3380FF !important; border-color: #3380FF !important; }  /* آبی روشن */
/* ۶۰ */ .btn-pink60, .btn-outline-pink60:hover, .btn-outline-pink60:focus { background: #8C33FF !important; border-color: #8C33FF !important; }  /* بنفش */
/* ۶۱ */ .btn-pink61, .btn-outline-pink61:hover, .btn-outline-pink61:focus { background: #FF8A33 !important; border-color: #FF8A33 !important; }  /* نارنجی زنده */
/* ۶۲ */ .btn-pink62, .btn-outline-pink62:hover, .btn-outline-pink62:focus { background: #FFAE33 !important; border-color: #FFAE33 !important; }  /* زرد نارنجی */
/* ۶۳ */ .btn-pink63, .btn-outline-pink63:hover, .btn-outline-pink63:focus { background: #FFD633 !important; border-color: #FFD633 !important; }  /* زرد شاد */
/* ۶۴ */ .btn-pink64, .btn-outline-pink64:hover, .btn-outline-pink64:focus { background: #D4FF33 !important; border-color: #D4FF33 !important; }  /* سبز فسفری */
/* ۶۵ */ .btn-pink65, .btn-outline-pink65:hover, .btn-outline-pink65:focus { background: #7FFF33 !important; border-color: #7FFF33 !important; }  /* سبز لیمویی */
/* ۶۶ */ .btn-pink66, .btn-outline-pink66:hover, .btn-outline-pink66:focus { background: #33FF70 !important; border-color: #33FF70 !important; }  /* سبز نعنایی */
/* ۶۷ */ .btn-pink67, .btn-outline-pink67:hover, .btn-outline-pink67:focus { background: #33FFBF !important; border-color: #33FFBF !important; }  /* سبز آبی ملایم */
/* ۶۸ */ .btn-pink68, .btn-outline-pink68:hover, .btn-outline-pink68:focus { background: #33FFF0 !important; border-color: #33FFF0 !important; }  /* فیروزه‌ای روشن */
/* ۶۹ */ .btn-pink69, .btn-outline-pink69:hover, .btn-outline-pink69:focus { background: #33D4FF !important; border-color: #33D4FF !important; }  /* آبی آسمانی */
/* ۷۰ */ .btn-pink70, .btn-outline-pink70:hover, .btn-outline-pink70:focus { background: #338CFF !important; border-color: #338CFF !important; }  /* آبی کلاسیک */
/* ۷۱ */ .btn-pink71, .btn-outline-pink71:hover, .btn-outline-pink71:focus { background: #335BFF !important; border-color: #335BFF !important; }  /* آبی سلطنتی */
/* ۷۲ */ .btn-pink72, .btn-outline-pink72:hover, .btn-outline-pink72:focus { background: #5E33FF !important; border-color: #5E33FF !important; }  /* بنفش ملایم */
/* ۷۳ */ .btn-pink73, .btn-outline-pink73:hover, .btn-outline-pink73:focus { background: #9933FF !important; border-color: #9933FF !important; }  /* بنفش زنده */
/* ۷۴ */ .btn-pink74, .btn-outline-pink74:hover, .btn-outline-pink74:focus { background: #C833FF !important; border-color: #C833FF !important; }  /* ارغوانی */
/* ۷۵ */ .btn-pink75, .btn-outline-pink75:hover, .btn-outline-pink75:focus { background: #FF33F0 !important; border-color: #FF33F0 !important; }  /* صورتی تند */
/* ۷۶ */ .btn-pink76, .btn-outline-pink76:hover, .btn-outline-pink76:focus { background: #FF33A8 !important; border-color: #FF33A8 !important; }  /* صورتی پررنگ */
/* ۷۷ */ .btn-pink77, .btn-outline-pink77:hover, .btn-outline-pink77:focus { background: #FF337D !important; border-color: #FF337D !important; }  /* صورتی مایل به قرمز */
/* ۷۸ */ .btn-pink78, .btn-outline-pink78:hover, .btn-outline-pink78:focus { background: #FF3357 !important; border-color: #FF3357 !important; }  /* قرمز روشن */
/* ۷۹ */ .btn-pink79, .btn-outline-pink79:hover, .btn-outline-pink79:focus { background: #FF5733 !important; border-color: #FF5733 !important; }  /* نارنجی مایل به قرمز */
/* ۸۰ */ .btn-pink80, .btn-outline-pink80:hover, .btn-outline-pink80:focus { background: #FF7A33 !important; border-color: #FF7A33 !important; }  /* نارنجی کاراملی */
/* ۸۱ */ .btn-pink81, .btn-outline-pink81:hover, .btn-outline-pink81:focus { background: #FF9A33 !important; border-color: #FF9A33 !important; }  /* نارنجی شاد */
/* ۸۲ */ .btn-pink82, .btn-outline-pink82:hover, .btn-outline-pink82:focus { background: #FFC133 !important; border-color: #FFC133 !important; }  /* زرد طلایی روشن */
/* ۸۳ */ .btn-pink83, .btn-outline-pink83:hover, .btn-outline-pink83:focus { background: #FFF233 !important; border-color: #FFF233 !important; }  /* زرد لیمویی */
/* ۸۴ */ .btn-pink84, .btn-outline-pink84:hover, .btn-outline-pink84:focus { background: #D4FF33 !important; border-color: #D4FF33 !important; }  /* سبز فسفری روشن */
/* ۸۵ */ .btn-pink85, .btn-outline-pink85:hover, .btn-outline-pink85:focus { background: #88FF33 !important; border-color: #88FF33 !important; }  /* سبز زنده */
/* ۸۶ */ .btn-pink86, .btn-outline-pink86:hover, .btn-outline-pink86:focus { background: #33FF4D !important; border-color: #33FF4D !important; }  /* سبز نعناعی */
/* ۸۷ */ .btn-pink87, .btn-outline-pink87:hover, .btn-outline-pink87:focus { background: #33FF8A !important; border-color: #33FF8A !important; }  /* سبز روشن‌تر */
/* ۸۸ */ .btn-pink88, .btn-outline-pink88:hover, .btn-outline-pink88:focus { background: #33FFC1 !important; border-color: #33FFC1 !important; }  /* سبز آبی ملایم */
/* ۸۹ */ .btn-pink89, .btn-outline-pink89:hover, .btn-outline-pink89:focus { background: #33FFF0 !important; border-color: #33FFF0 !important; }  /* فیروزه‌ای روشن */
/* ۹۰ */ .btn-pink90, .btn-outline-pink90:hover, .btn-outline-pink90:focus { background: #33D4FF !important; border-color: #33D4FF !important; }  /* آبی آسمانی روشن */
/* ۹۱ */ .btn-pink91, .btn-outline-pink91:hover, .btn-outline-pink91:focus { background: #339AFF !important; border-color: #339AFF !important; }  /* آبی شاد */
/* ۹۲ */ .btn-pink92, .btn-outline-pink92:hover, .btn-outline-pink92:focus { background: #3380FF !important; border-color: #3380FF !important; }  /* آبی کلاسیک */
/* ۹۳ */ .btn-pink93, .btn-outline-pink93:hover, .btn-outline-pink93:focus { background: #335BFF !important; border-color: #335BFF !important; }  /* آبی سلطنتی */
/* ۹۴ */ .btn-pink94, .btn-outline-pink94:hover, .btn-outline-pink94:focus { background: #6B33FF !important; border-color: #6B33FF !important; }  /* بنفش روشن */
/* ۹۵ */ .btn-pink95, .btn-outline-pink95:hover, .btn-outline-pink95:focus { background: #9933FF !important; border-color: #9933FF !important; }  /* بنفش زنده */
/* ۹۶ */ .btn-pink96, .btn-outline-pink96:hover, .btn-outline-pink96:focus { background: #C233FF !important; border-color: #C233FF !important; }  /* ارغوانی پررنگ */
/* ۹۷ */ .btn-pink97, .btn-outline-pink97:hover, .btn-outline-pink97:focus { background: #FF33E0 !important; border-color: #FF33E0 !important; }  /* صورتی تند */
/* ۹۸ */ .btn-pink98, .btn-outline-pink98:hover, .btn-outline-pink98:focus { background: #FF33B3 !important; border-color: #FF33B3 !important; }  /* صورتی شاد */
/* ۹۹ */ .btn-pink99, .btn-outline-pink99:hover, .btn-outline-pink99:focus { background: #FF3380 !important; border-color: #FF3380 !important; }  /* صورتی مایل به قرمز */
/* ۱۰۰ */ .btn-pink100, .btn-outline-pink100:hover, .btn-outline-pink100:focus { background: #FF3366 !important; border-color: #FF3366 !important; }  /* قرمز صورتی */
/* ۱۰۱ */ .btn-pink101, .btn-outline-pink101:hover, .btn-outline-pink101:focus { background: #FF6633 !important; border-color: #FF6633 !important; }  /* نارنجی شاد */
/* ۱۰۲ */ .btn-pink102, .btn-outline-pink102:hover, .btn-outline-pink102:focus { background: #FF8533 !important; border-color: #FF8533 !important; }  /* نارنجی متوسط */
/* ۱۰۳ */ .btn-pink103, .btn-outline-pink103:hover, .btn-outline-pink103:focus { background: #FFB533 !important; border-color: #FFB533 !important; }  /* زرد طلایی */
/* ۱۰۴ */ .btn-pink104, .btn-outline-pink104:hover, .btn-outline-pink104:focus { background: #FFE733 !important; border-color: #FFE733 !important; }  /* زرد روشن */
/* ۱۰۵ */ .btn-pink105, .btn-outline-pink105:hover, .btn-outline-pink105:focus { background: #D4FF33 !important; border-color: #D4FF33 !important; }  /* سبز فسفری روشن */
/* ۱۰۶ */ .btn-pink106, .btn-outline-pink106:hover, .btn-outline-pink106:focus { background: #88FF33 !important; border-color: #88FF33 !important; }  /* سبز زنده */
/* ۱۰۷ */ .btn-pink107, .btn-outline-pink107:hover, .btn-outline-pink107:focus { background: #33FF4D !important; border-color: #33FF4D !important; }  /* سبز نعناعی */
/* ۱۰۸ */ .btn-pink108, .btn-outline-pink108:hover, .btn-outline-pink108:focus { background: #33FF88 !important; border-color: #33FF88 !important; }  /* سبز روشن‌تر */
/* ۱۰۹ */ .btn-pink109, .btn-outline-pink109:hover, .btn-outline-pink109:focus { background: #33FFC1 !important; border-color: #33FFC1 !important; }  /* سبز آبی ملایم */
/* ۱۱۰ */ .btn-pink110, .btn-outline-pink110:hover, .btn-outline-pink110:focus { background: #33FFF0 !important; border-color: #33FFF0 !important; }  /* فیروزه‌ای روشن */
/* ۱۱۱ */ .btn-pink111, .btn-outline-pink111:hover, .btn-outline-pink111:focus { background: #33D4FF !important; border-color: #33D4FF !important; }  /* آبی آسمانی روشن */
/* ۱۱۲ */ .btn-pink112, .btn-outline-pink112:hover, .btn-outline-pink112:focus { background: #339AFF !important; border-color: #339AFF !important; }  /* آبی شاد */
/* ۱۱۳ */ .btn-pink113, .btn-outline-pink113:hover, .btn-outline-pink113:focus { background: #3380FF !important; border-color: #3380FF !important; }  /* آبی کلاسیک */
/* ۱۱۴ */ .btn-pink114, .btn-outline-pink114:hover, .btn-outline-pink114:focus { background: #335BFF !important; border-color: #335BFF !important; }  /* آبی سلطنتی */
/* ۱۱۵ */ .btn-pink115, .btn-outline-pink115:hover, .btn-outline-pink115:focus { background: #6B33FF !important; border-color: #6B33FF !important; }  /* بنفش روشن */
/* ۱۱۶ */ .btn-pink116, .btn-outline-pink116:hover, .btn-outline-pink116:focus { background: #9933FF !important; border-color: #9933FF !important; }  /* بنفش زنده */
/* ۱۱۷ */ .btn-pink117, .btn-outline-pink117:hover, .btn-outline-pink117:focus { background: #C233FF !important; border-color: #C233FF !important; }  /* ارغوانی پررنگ */
/* ۱۱۸ */ .btn-pink118, .btn-outline-pink118:hover, .btn-outline-pink118:focus { background: #FF33E0 !important; border-color: #FF33E0 !important; }  /* صورتی تند */
/* ۱۱۹ */ .btn-pink119, .btn-outline-pink119:hover, .btn-outline-pink119:focus { background: #FF33B3 !important; border-color: #FF33B3 !important; }  /* صورتی شاد */
/* ۱۲۰ */ .btn-pink120, .btn-outline-pink120:hover, .btn-outline-pink120:focus { background: #FF3380 !important; border-color: #FF3380 !important; }  /* صورتی مایل به قرمز */
/* ۱۲۱ */ .btn-pink121, .btn-outline-pink121:hover, .btn-outline-pink121:focus { background: #FF6633 !important; border-color: #FF6633 !important; }  /* نارنجی روشن */
/* ۱۲۲ */ .btn-pink122, .btn-outline-pink122:hover, .btn-outline-pink122:focus { background: #FF8C33 !important; border-color: #FF8C33 !important; }  /* نارنجی متوسط */
/* ۱۲۳ */ .btn-pink123, .btn-outline-pink123:hover, .btn-outline-pink123:focus { background: #FFB533 !important; border-color: #FFB533 !important; }  /* زرد طلایی */
/* ۱۲۴ */ .btn-pink124, .btn-outline-pink124:hover, .btn-outline-pink124:focus { background: #FFD933 !important; border-color: #FFD933 !important; }  /* زرد شاد */
/* ۱۲۵ */ .btn-pink125, .btn-outline-pink125:hover, .btn-outline-pink125:focus { background: #CCFF33 !important; border-color: #CCFF33 !important; }  /* سبز لیمویی روشن */
/* ۱۲۶ */ .btn-pink126, .btn-outline-pink126:hover, .btn-outline-pink126:focus { background: #99FF33 !important; border-color: #99FF33 !important; }  /* سبز روشن */
/* ۱۲۷ */ .btn-pink127, .btn-outline-pink127:hover, .btn-outline-pink127:focus { background: #66FF33 !important; border-color: #66FF33 !important; }  /* سبز زنده */
/* ۱۲۸ */ .btn-pink128, .btn-outline-pink128:hover, .btn-outline-pink128:focus { background: #33FF57 !important; border-color: #33FF57 !important; }  /* سبز پررنگ */
/* ۱۲۹ */ .btn-pink129, .btn-outline-pink129:hover, .btn-outline-pink129:focus { background: #33FF88 !important; border-color: #33FF88 !important; }  /* سبز ملایم */
/* ۱۳۰ */ .btn-pink130, .btn-outline-pink130:hover, .btn-outline-pink130:focus { background: #33FFB5 !important; border-color: #33FFB5 !important; }  /* سبز فیروزه‌ای */





.btn-outline-secondary{
    background-color: #ffffff !important;
    border-color:var(--orange) !important;
    color: var(--orange) !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus{
    color: #ffffff !important;
}

.btn-info, .btn-outline-info:hover, .btn-outline-info:focus {
    background: var(--light-primary) !important;
    border-color: var(--light-primary) !important;
    color:#ffffff !important;
}
.btn-outline-info{
    background-color: #ffffff !important;
    border-color:var(--light-primary) !important;
    color: var(--light-primary) !important;
}
.btn-outline-info:hover, .btn-outline-info:focus{
    color: #ffffff !important;
}
.bg-info{
    background: var(--light-primary) !important;
}

.btn-white {
    background-color: #ffffff !important;
}
.text-muted {
    color: var(--secondary) !important;
}
.text-bg-success {
    background-color: var(--success) !important;
    font-weight: 400;
}
.fw-light {
    font-weight: 200;
}
a {
    text-decoration: none;
}
.form-control {
    box-shadow: none !important;
}
.form-select {
    box-shadow: none !important;
}
.rounded-4, .form-control {
    border-radius: 7px !important;
}
.btn {
    font-size: 13px;
    padding: 13px 15px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}
.btn-lg {
    font-size: 16px;
    padding: 15px 20px !important;
    letter-spacing: 0.2px;
}
.btn-sm {
    padding: 7px 12px !important;
}
.rounded-top-4 {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}
.rounded-bottom-4 {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}
.chat-rounded-left {
    border-radius: 19px;
    padding: 10px 15px !important;
    font-size: 13px;
}
.chat-rounded-right {
    border-radius: 19px;
    padding: 10px 15px !important;
    font-size: 13px;
}
.small-sm {
    font-size: 12px;
}
.fs-14{
    font-size: 14px;
}
.border-primary-dotted {
    border: 1px dashed var(--primary);
}
.border-dotted-bottom {
    border-bottom: 1px dashed var(--secondary);
}
.border-dotted-top {
    border-top: 1px dashed var(--secondary);
}
.border-dashed-muted {
    border: 1px dashed var(--secondary);
}
.border-dashed-primary {
    border: 1px dashed var(--primary);
}
.badge-success {
    background-color: var(--light-success);
    color: var(--success);
}
.fix-osahan-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 3px;
}
.shadow {
    box-shadow: rgb(0 0 0 / 7%) 0px 6px 24px 0px, rgb(0 0 0 / 4%) 0px 0px 0px 1px !important;
}
/* Index */
.logo {
    width: 100px;
}
.top-doctor-item, .recent-doctor-item, .available-doctor-item {
    margin: 4px 5px;
     padding: 10px 0;
}
/* Landing Page */
.landing ul.slick-dots {
    bottom: auto;
    margin: auto;
    text-align: center;
}
.landing ul.slick-dots li {
    margin: 0px;
    padding: 0px;
    width: auto !important;
    height: auto !important;
}
.landing ul.slick-dots li button {
    margin: 3px;
    padding: 0px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50px;
    border: 1px solid #ffffff;
    box-shadow: 0px 0px 1px #6e6e6e;
}
.landing ul.slick-dots li button:before {
    display: none;
}
.landing ul.slick-dots li.slick-active button {
    background: var(--primary);
    border-color: var(--primary);
}
.landing-slider-item img {
    height: 230px;
    object-fit: contain;
    margin: auto;
}
/* Country */
.flag-img {
    width: 35px;
}
/* Welcome */
.blue-logo {
    width: 110px;
}
/* Footer Nav */
.body-fix-osahan-footer {
    padding-bottom: 82px;
}
.footer-bottom-nav {
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #989898;
    padding: 5px 0 9px 0;
    position: relative;
}
.footer-bottom-nav span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}
.footer-bottom-nav i {
    font-size: 20px;
}
.footer-bottom-nav.active {
    color: #d10082;
}
.footer-bottom-nav.active:after {
    content: "";
    width: 40px;
    height: 10px;
    background: #d10082;
    border-radius: 50px;
    position: absolute;
    bottom: -7px;
}
.bottom-nav-main {
    background: #fff;
}
/* Home */
.icon {
    min-width: 35px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-lg {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}
.doctor-book-back {
    position: relative;
    overflow: hidden;
}
.doctor-book-back-title {
    font-family: 'BNAZANB', sans-serif;
    padding-right: 77px;
    letter-spacing: 0.8px;
    line-height: 28px !important;
}
.doctor-book-img {
    position: absolute;
    bottom: 0;
    width: 140px;
    right: 0;
}
.btn-book {
    font-weight: 500 !important;
    padding: 6px 11px !important;
    font-size: 11px;
    z-index: 99 !important;
    border-radius: 50px !important;
    letter-spacing: 0.4px;
}
.btn-book i {
    margin-left: 6px;
}
/* Favorte Doctor */
.favorite-img {
    width: 50px;
}
.cf-btn a.btn {
    border-radius: 0px !important;
}
/* Doctor Profile */
.appointment-doctor-img{
    width: 190px;
}
/* Book Appointment */
.appointment-banner {
    background: url(img/background-blob.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}



/* رفع چیدمان عمودی دکمه‌های نوبت */
.custom-check .time-slot-btn {
    width: auto !important;
    flex: 0 0 auto !important;
}

/* در صورت نیاز، اطمینان از حالت افقی والد (اختیاری است چون بوت‌استرپ خودش این کار را می‌کند) */
#time-list .row {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
}


/* Request Appointment */
.custom-check-day .btn {
    border: none;
    border-radius: 0;
    border-top-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    background: #ffffff;
    color: var(--dark);
}
.custom-check .btn {
    background: #ffffff;
    font-size: 13px;
    color: var(--secondary);
    padding: 7px 9px !important;
    width: 100%;
    line-height: 20px;
    border-color: #d9d9d9;
}
.custom-check .btn span.fs-5 {
    font-size: 19px !important;
    font-weight: 600;
}
.custom-check .btn-check:checked+.btn, .custom-check .btn.active, .custom-check .btn.show, .custom-check .btn:first-child:active, :not(.btn-check)+.btn:active {
    background: #16bef0 !important;
    border-color: #16bef0 !important;
    color: #fff !important;
}
.fee-icon {
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
/* Notification */
.notification-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}
/* Video */
.video-tabs button {
    border: none;
    background-color: #ffffff;
    color: var(--dark) !important;
    font-size: 15px;
    border-bottom: 3px solid #fff;
    border-top: 3px solid #fff;
    padding: 12px 10px;
}
.video-tabs button.active {
    color: #14BEF0 !important;
    border-bottom: 3px solid;
    font-weight: 500;
    background: #eefbff;
    border-top: 3px solid #eefbff;
}
/* Doctor Profile Two */
.doctor-profile-tabs button {
    border: none;
    background-color: #ffffff;
    color: var(--dark) !important;
    font-size: 15px;
    border-bottom: 3px solid #fff;
    border-top: 3px solid #fff;
    padding: 12px 10px;
}
.doctor-profile-tabs button.active {
    color: #14BEF0 !important;
    border-bottom: 3px solid;
    font-weight: 500;
    background: #eefbff;
    border-top: 3px solid #eefbff;
}
.review-profile {
    width: 35px;
}
.offcanvas {
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
}
.offcanvas-footer {
    padding: 1rem 1rem;
}
/* Visit Info / Chekout */
.upload-file {
    position: relative;
    overflow: hidden;
    z-index: -1;
}
.upload-file-icon {
    position: absolute;
    top: -34px;
    right: -32px;
    height: 100px;
    width: 100px;
    border-bottom-left-radius: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
/* Message */
.plus-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}
.message-profile {
    width: 40px;
}
/* Call */
.call-img {
    width: 150px;
}
.call-display {
    height: calc(100vh - 87px);
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}
.call-icons a {
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ffffff;
}
/* Call Doctor */
.call-doctor {
    height: calc(100vh - 87px);
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    background: url(../img/favorite/favorite-4.jpg);
    background-position: center;
    background-size: cover;
}
.patient-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* History */
.voice-img {
    width: 70px;
    height: 70px;
    object-fit: cover;
}
/* Profile */
.edit-profile-back {
    position: relative;
}
.edit-profile-icon {
    position: absolute;
    top: -30px;
    right: -25px;
    height: 100px;
    width: 100px;
    border-bottom-left-radius: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
/* My Appointment */
.btn-rounded {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Play Recording */
.play-recording-background {
    background: url(../img/favorite/favorite-4.jpg);
    background-position: center;
    background-size: cover;
    height: calc(100vh - 87px);
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}


/* Chrome, Safari, Edge */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


jdp-overlay {
    height: 0;
    width: 0;
}

@media only screen and (max-width: 481px) {
    jdp-overlay {
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        background-color: rgba(0, 0, 0, .3);
        display: none;
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
    }
}

/* -------------------------------------------------- */
/* Container */
/* -------------------------------------------------- */

jdp-container {
    -moz-animation: jdpOpenAnimation .3s cubic-bezier(.23, 1, .32, 1);
    -webkit-animation: jdpOpenAnimation .3s cubic-bezier(.23, 1, .32, 1);
    animation: jdpOpenAnimation .3s cubic-bezier(.23, 1, .32, 1);
    
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.24);
    direction: rtl;
    display: none;
    
    max-width: 307.875px;
    min-width: 307.875px;
    
    overflow: hidden;
    padding: .5rem 0;
    position: absolute;
    
    -ms-touch-action: manipulation;
    touch-action: manipulation;

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@media only screen and (max-width: 481px) {
    jdp-container {
        -moz-animation: jdpOpenAnimationMobile .3s cubic-bezier(.23, 1, .32, 1);
        -webkit-animation: jdpOpenAnimationMobile .3s cubic-bezier(.23, 1, .32, 1);
        animation: jdpOpenAnimationMobile .3s cubic-bezier(.23, 1, .32, 1);

        border-radius: 4px 4px 0 0;
        bottom: 0 !important;
        left: 50% !important;
        max-width: 100%;
        min-width: 280px;
        top: unset !important;
        transform: translateX(-50%) !important;
        width: 100%;
    }
}

jdp-container,
jdp-container *,
jdp-container :after,
jdp-container :before {
    box-sizing: border-box;
}

/* -------------------------------------------------- */
/* Buttons */
/* -------------------------------------------------- */

jdp-container .jdp-icon-minus,
jdp-container .jdp-icon-plus {
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    flex: none;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}

jdp-container .jdp-icon-minus svg,
jdp-container .jdp-icon-plus svg {
    height: 1.5rem;
    padding: .25rem;
    vertical-align: middle;
    width: 1.5rem;
}

jdp-container .jdp-icon-minus.not-in-range,
jdp-container .jdp-icon-plus.not-in-range {
    cursor: not-allowed;
}
jdp-container .jdp-icon-minus.not-in-range svg,
jdp-container .jdp-icon-plus.not-in-range svg {
    opacity: .3;
}

/* -------------------------------------------------- */
/* Year & Month */
/* -------------------------------------------------- */

jdp-container .jdp-months,
jdp-container .jdp-years {
    fill: rgba(0, 0, 0, .9);
    color: rgba(0, 0, 0, .9);
    display: inline-flex;
    font-size: 120%;
    margin: 0 2.5%;
}

jdp-container .jdp-months { width: 50%; }
jdp-container .jdp-years { width: 40%; }

/* Inputs */

jdp-container .jdp-month,
jdp-container .jdp-month input,
jdp-container .jdp-month select,
jdp-container .jdp-time,
jdp-container .jdp-time input,
jdp-container .jdp-time select,
jdp-container .jdp-year,
jdp-container .jdp-year input,
jdp-container .jdp-year select {
    background: #fff;
    border: none;
    color: inherit;
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    font-weight: 300;
    line-height: inherit;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
}

jdp-container .jdp-month:hover,
jdp-container .jdp-time:hover,
jdp-container .jdp-year:hover {
    filter: brightness(.9);
}

/* -------------------------------------------------- */
/* Calendar Days */
/* -------------------------------------------------- */

jdp-container .jdp-days {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: .5rem 0 0;
    width: 100%;
}

jdp-container .jdp-day,
jdp-container .jdp-day-name {
    background: none;
    border: 1px solid transparent;
    color: rgba(0,0,0,.9);
    display: inline-block;
    flex-basis: 14.2857%;
    font-weight: 400;
    height: 31px;
    line-height: 31px;
    margin: 2px 0;
    text-align: center;
    width: 14.2857%;
}

jdp-container .jdp-day-name {
    background-color: rgba(0, 0, 0, .1);
    font-weight: 900;
}

jdp-container .jdp-day.today,
jdp-container .jdp-day-name.today {
    border-color: rgba(0, 0, 0, .3);
}

jdp-container .jdp-day.selected,
jdp-container .jdp-day-name.selected {
    background-color: #569ff7 !important;
    color: #fff !important;
}

/* -------------------------------------------------- */
/* Footer Buttons */
/* -------------------------------------------------- */

jdp-container .jdp-footer {
    display: flex;
    justify-content: space-between;
    padding: .5rem .5rem 0;
    width: 100%;
}

@media only screen and (max-width: 481px) {
    jdp-container .jdp-footer {
        margin: .5rem 0;
    }
}

jdp-container .jdp-btn-close,
jdp-container .jdp-btn-empty,
jdp-container .jdp-btn-today {
    background: #569ff7;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 90%;
    padding: .3em .6em;
    text-align: center;
}

@media only screen and (max-width: 481px) {
    jdp-container .jdp-btn-close,
    jdp-container .jdp-btn-empty,
    jdp-container .jdp-btn-today {
        font-size: 100%;
        padding: .5em .8em;
    }
}

/* -------------------------------------------------- */
/* Time Picker */
/* -------------------------------------------------- */

jdp-container .jdp-time-container {
    display: flex;
    padding: 0;
}

jdp-container .jdp-time-container .jdp-time {
    flex: auto;
    margin: 0 .5rem;
    position: relative;
}

jdp-container .jdp-time-container .jdp-time select {
    background: rgba(0,0,0,.03);
    border-radius: 5px;
    padding: .5rem 1rem .5rem 7px;
}

jdp-container .jdp-time-container .jdp-time:after {
    content: ":";
    font-size: 1.5rem;
    position: absolute;
    right: -.7rem;
    top: 50%;
    transform: translateY(-50%);
}

/* -------------------------------------------------- */
/* Animations */
/* -------------------------------------------------- */

@keyframes jdpOpenAnimation {
    0% { opacity: 0; transform: scale(.8); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes jdpOpenAnimationMobile {
    0% { margin-bottom: -20%; opacity: 0; }
    100% { margin-bottom: 0; opacity: 1; }
}














/* کانتینر اصلی */
.skeleton-loader {
    display: flex;
    flex-wrap: nowrap; /* اجبار به نمایش افقی در همه دستگاه‌ها */
    gap: 15px;
    width: 100%;
    overflow-x: auto; /* اسکرول افقی */
    overflow-y: hidden;
    padding: 10px 0;
    -webkit-overflow-scrolling: touch; /* اسکرول نرم در iOS */
    
    /* مخفی کردن نوار اسکرول */
    scrollbar-width: none; /* Firefox */
}
.skeleton-loader::-webkit-scrollbar {
    display: none;
}

/* استایل پایه کارت (برای همه دستگاه‌ها) */
.skeleton-item {
    background: #e0e0e0;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    flex-shrink: 0; /* جلوگیری از کوچک شدن کارت‌ها */
}

/* انیمیشن درخشش (شامل همه دستگاه‌ها) */
.skeleton-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(138, 43, 226, 0.5) 40%, 
    rgba(138, 43, 226, 0.7) 50%, 
    rgba(138, 43, 226, 0.5) 60%, 
    transparent 100%
);


    transform: skewX(-20deg) translateX(-150%);
    animation: shimmer 2s infinite linear;
    pointer-events: none;
}

@keyframes shimmer {
    0% { transform: skewX(-20deg) translateX(-150%); }
    100% { transform: skewX(-20deg) translateX(200%); }
}

/* =========================================
   تنظیمات دستی برای هر دستگاه (Media Queries)
   ========================================= */

/* 1. دسکتاپ (صفحه‌های بزرگ) */
@media (min-width: 1024px) {
    .skeleton-item {
        width: 450px;  /* عرض دستی دسکتاپ */
        height: 160px;  /* ارتفاع دستی دسکتاپ (30% عرض) */
    }
}

/* 2. تبلت (صفحه‌های متوسط) */
@media (min-width: 768px) and (max-width: 1023px) {
    .skeleton-item {
        width: 550px;  /* عرض دستی تبلت */
        height: 275px;  /* ارتفاع دستی تبلت (30% عرض) */
    }
}

/* 3. موبایل (صفحه‌های کوچک) */
@media (max-width: 767px) {
    .skeleton-item {
        width: 300px;  /* عرض دستی موبایل */
        height: 154px;  /* ارتفاع دستی موبایل (30% عرض) */
    }
}
































/* کانتینر اصلی */
.skeleton-loader-spec {
    display: flex;
    flex-wrap: nowrap; /* اجبار به نمایش افقی در همه دستگاه‌ها */
    gap: 15px;
    width: 100%;
    overflow-x: auto; /* اسکرول افقی */
    overflow-y: hidden;
    padding: 10px 0;
    -webkit-overflow-scrolling: touch; /* اسکرول نرم در iOS */
    
    /* مخفی کردن نوار اسکرول */
    scrollbar-width: none; /* Firefox */
}
.skeleton-loader-spec::-webkit-scrollbar {
    display: none;
}

/* استایل پایه کارت (برای همه دستگاه‌ها) */
.skeleton-itemspec {
    background: #e0e0e0;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    flex-shrink: 0; /* جلوگیری از کوچک شدن کارت‌ها */
}

/* انیمیشن درخشش (شامل همه دستگاه‌ها) */
.skeleton-itemspec::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgb(255, 182, 193) 40%, 
    rgb(255, 182, 193) 50%, 
    rgb(255, 182, 193) 60%, 
    transparent 100%
);

    transform: skewX(-20deg) translateX(-150%);
    animation: shimmer 2s infinite linear;
    pointer-events: none;
}

@keyframes shimmer {
    0% { transform: skewX(-20deg) translateX(-150%); }
    100% { transform: skewX(-20deg) translateX(200%); }
}

/* =========================================
   تنظیمات دستی برای هر دستگاه (Media Queries)
   ========================================= */

/* 1. دسکتاپ (صفحه‌های بزرگ) */
@media (min-width: 1024px) {
    .skeleton-itemspec {
        width: 100px;  /* عرض دستی دسکتاپ */
        height: 100px;  /* ارتفاع دستی دسکتاپ (30% عرض) */
    }
}

/* 2. تبلت (صفحه‌های متوسط) */
@media (min-width: 768px) and (max-width: 1023px) {
    .skeleton-itemspec {
        width: 100px;  /* عرض دستی تبلت */
        height: 100px;  /* ارتفاع دستی تبلت (30% عرض) */
    }
}

/* 3. موبایل (صفحه‌های کوچک) */
@media (max-width: 767px) {
    .skeleton-itemspec {
        width: 100px;  /* عرض دستی موبایل */
        height: 100px;  /* ارتفاع دستی موبایل (30% عرض) */
    }
}






















/* کانتینر اصلی */
.skeleton-loader-doclist {
    display: flex;
    flex-wrap: nowrap; /* اجبار به نمایش افقی در همه دستگاه‌ها */
    gap: 15px;
    width: 100%;
    overflow-x: auto; /* اسکرول افقی */
    overflow-y: hidden;
    padding: 10px 0;
    -webkit-overflow-scrolling: touch; /* اسکرول نرم در iOS */
    
    /* مخفی کردن نوار اسکرول */
    scrollbar-width: none; /* Firefox */
}
.skeleton-loader-doclist::-webkit-scrollbar {
    display: none;
}

/* استایل پایه کارت (برای همه دستگاه‌ها) */
.skeleton-doclist {
    background: #e0e0e0;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    flex-shrink: 0; /* جلوگیری از کوچک شدن کارت‌ها */
}

/* انیمیشن درخشش (شامل همه دستگاه‌ها) */
.skeleton-doclist::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(255, 111, 226, 0.2) 40%, 
    rgba(255, 111, 226, 0.4) 50%, 
    rgba(255, 111, 226, 0.2) 60%, 
    
    transparent 100%
);


    transform: skewX(-20deg) translateX(-150%);
    animation: shimmer 2s infinite linear;
    pointer-events: none;
}

@keyframes shimmer {
    0% { transform: skewX(-20deg) translateX(-150%); }
    100% { transform: skewX(-20deg) translateX(200%); }
}

/* =========================================
   تنظیمات دستی برای هر دستگاه (Media Queries)
   ========================================= */

/* 1. دسکتاپ (صفحه‌های بزرگ) */
@media (min-width: 1024px) {
    .skeleton-doclist {
        width: 200px;  /* عرض دستی دسکتاپ */
        height: 300px;  /* ارتفاع دستی دسکتاپ (30% عرض) */
    }
}

/* 2. تبلت (صفحه‌های متوسط) */
@media (min-width: 768px) and (max-width: 1023px) {
    .skeleton-doclist {
        width: 100px;  /* عرض دستی تبلت */
        height: 100px;  /* ارتفاع دستی تبلت (30% عرض) */
    }
}

/* 3. موبایل (صفحه‌های کوچک) */
@media (max-width: 767px) {
    .skeleton-doclist {
        width: 100px;  /* عرض دستی موبایل */
        height: 100px;  /* ارتفاع دستی موبایل (30% عرض) */
    }
}



















/* کانتینر اصلی - قرارگیری در پایین صفحه */
.skeleton-loader-menuup {
    position: fixed;
    bottom: 2%;      /* ۱۰٪ فاصله از پایین */
    left: 10%;        /* ۱۰٪ فاصله از چپ */
    width: 80%;       /* عرض ۸۰٪ (زیرا ۱۰٪ چپ + ۱۰٪ راست = ۲۰٪) */
    top: 90%;         /* ۸۰٪ فاصله از بالا (اختیاری) */
    
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    z-index: 9999;    /* برای نمایش روی سایر المان‌ها */
}
.skeleton-loader-menuup::-webkit-scrollbar {
    display: none;
}

/* استایل پایه کارت (بدون تغییر) */
.skeleton-menuup {
    background: #e0e0e0;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    flex-shrink: 0;
}

/* انیمیشن درخشش */
.skeleton-menuup::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(255, 111, 226, 0.2) 40%, 
        rgba(255, 111, 226, 0.4) 50%, 
        rgba(255, 111, 226, 0.2) 60%, 
        transparent 100%
    );
    transform: skewX(-20deg) translateX(-150%);
    animation: shimmer 2s infinite linear;
    pointer-events: none;
}

@keyframes shimmer {
    0% { transform: skewX(-20deg) translateX(-150%); }
    100% { transform: skewX(-20deg) translateX(200%); }
}

/* =========================================
   تنظیمات اندازه کارت‌ها در دستگاه‌های مختلف
   ========================================= */

/* دسکتاپ */
@media (min-width: 1024px) {
    .skeleton-menuup {
        width: 100%;
        height: 100px;
    }
}

/* تبلت */
@media (min-width: 768px) and (max-width: 1023px) {
    .skeleton-menuup {
        width: 100%;
        height: 10px;
    }
}

/* موبایل */
@media (max-width: 767px) {
    .skeleton-menuup {
        width: 100%;
        height: 40px;
    }
}
















/* ==================== جلوگیری از اسکرول افقی کل صفحه در موبایل ==================== */
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
    position: relative;
}

/* تمام کانتینرهای اصلی که ممکن است سرریز کنند */
.vh-100.my-auto.overflow-auto.body-fix-osahan-footer,
.available-doctor,
.top-doctors,
.icon-slider,
.icon-sliders,
.row,
[class*="col-"],
.container,
.container-fluid,
.p-3,
#doctors-container,
#special,
#doclist,
#ostans,
#doctexti,
#menuup {
    overflow-x: hidden !important;
}

/* اصلاح فاصله‌های اضافی در راست‌چین */
[dir="rtl"] .ps-2,
.ps-2[dir="rtl"] {
    padding-left: 0 !important;
    padding-right: 0.5rem !important;
}
[dir="rtl"] .ms-1,
.ms-1[dir="rtl"] {
    margin-left: 0 !important;
    margin-right: 0.25rem !important;
}

/* محدود کردن تصاویر با عرض ثابت در موبایل */
@media (max-width: 768px) {
    .doctor-book-img img {
        width: 100% !important;
        max-width: 140px !important;
        height: auto !important;
    }
    .doctor-book-back-title {
        padding-right: 0 !important;
    }
    /* اطمینان از اسکرول افقی فقط داخل اسکلتون‌ها */
    .skeleton-loader,
    .skeleton-loader-spec,
    .skeleton-loader-doclist {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}














  /* تنظیمات پایه برای آیکون‌های inline SVG */
      .icon-inline {
         display: inline-block;
         width: 1.7em;
         height: 1.7em;
         vertical-align: middle;
         fill: currentColor;
         stroke: none;
           color: #d10082;  /* رنگ صورتی برای آیکون‌ها */
      }
      .icon-large {
         width: 2em;
         height: 2em;
      }
      .icon-medium {
         width: 1.5em;
         height: 1.5em;
      }
      
        /* حفظ استایل دایره آیکون‌ها */
      .icon {
         width: 36px;
         height: 36px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
      }






















 /* مخفی کردن محتوای اصلی در ابتدا */
        .typing-text {
            visibility: hidden;
            white-space: pre-wrap;
            word-break: break-word;
        }
        /* ناحیه نمایش متن تایپ شونده */
        .typing-container {
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
        }
        /* برای نمایش کرسر (اختیاری) */
        .cursor {
            display: inline-block;
            width: 2px;
            background-color: currentColor;
            margin-right: 2px;
            animation: blink 1s step-end infinite;
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }















.time-slot-btn.btn-success {
        background-color: rgba(81,194,100,.7) !important;
        color: white !important;
        border: none !important;
    }
    .time-slot-btn.btn-danger {
        background-color: rgba(255,84,84,.7) !important;
        color: white !important;
        border: none !important;
    }
    .time-slot-btn.btn-warning {
        background-color: rgba(255,114,59,.7) !important;
        color: black !important;
        border: none !important;
    }
    .time-slot-btn.btn-secondary {
        background-color: rgba(255,114,59,.7) !important;
        color: white !important;
    }
    /* همچنین برای دکمه‌های غیرفعال (disabled) شفافیت مناسب حفظ شود */
    .time-slot-btn:disabled {
        opacity: 0.65 !important;
        cursor: not-allowed !important;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    .online-status-svg {
    width: 25px; /* اندازه SVG را تنظیم کنید */
    height: 25px;
    vertical-align: middle;
    margin-left: 5px;
}

.online-status-text-svg {
    vertical-align: middle;
}
    
    
    
    
    
    
    
    
    
    
    
    /* کانتینر اصلی - متن‌های خارج از دید را مخفی می‌کند */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    direction: ltr; /* حرکت افقی بدون تأثیر بر راست‌چینی */
}

/* محتوای متحرک شامل دو کپی از متن */
.marquee-content {
    display: inline-block;
    animation: scrollLeftToRight 50s linear infinite;
}

/* هر span داخل marquee-content */
.marquee-content span {
    display: inline-block;
    padding-left: 2rem; /* فاصله بین دو کپی متن */
}

/* انیمیشن حرکت از چپ به راست */
@keyframes scrollLeftToRight {
    0% {
        transform: translateX(-50%); /* شروع: نیمی از محتوا در سمت چپ مخفی */
    }
    100% {
        transform: translateX(0); /* پایان: محتوا کاملاً در دید */
    }
}

/* توقف حرکت در هنگام هاور (اختیاری) */
.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}


@media (max-width: 768px) {
    .marquee-content {
        animation-duration: 50s; /* تندتر در موبایل */
    }
    .marquee-content span {
        padding-left: 1rem; /* فاصله کمتر بین دو متن */
    }
}