/**
 * Main Layout Stylesheet
 * Extracted from main.php inline styles
 * @version 2.0.0 - Clean & Refactored
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FONT FAMILY - IRANSans Variable Font (Enhanced for Firefox)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@font-face {
    font-family: 'iransansxv';
    src: url('/theme/fonts/IRANSansXV.woff2') format('woff2'),
         url('/theme/fonts/IRANSansXV.woff') format('woff');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    /* Unicode range for Persian, Arabic and Latin characters */
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE80-FEFC, U+0000-00FF;
}

body {
    font-family: 'iransansxv', sans-serif;
}

/* Legacy support for older browsers */
@supports (font-variation-settings: normal) {
    body {
        font-family: 'iransansxv', sans-serif;
    }
}

h1, h2, h3, h4, h5, h6, input, textarea, button, select {
    font-family: 'iransansxv', sans-serif !important;
}

.ss02 {
    -moz-font-feature-settings: "ss02";
    -webkit-font-feature-settings: "ss02";
    font-feature-settings: "ss02";
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TEAM MEMBERS SECTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#list-team-members {
    margin-top: 15px;
    overflow-y: auto;
    height: 260px;
    overflow-x: hidden;
    font-size: 14px;
}

#list-team-members .row {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: solid 1px #ccc;
}

#list-team-members img,
#edit-team-members img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.pro_membership_section {
    text-align: left;
}

.pro_membership_section button {
    margin-left: 5px;
    margin-right: 5px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NOTIFICATIONS - Style Guide Compliant
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#signup_notifier {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1030;
    max-width: 600px;
    width: 90%;
    background: linear-gradient(135deg, #00A699 0%, #008489 100%);
    color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 166, 153, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px 24px;
    font-family: 'iransansxv', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    animation: slideDown 0.4s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(0%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0%) translateY(0);
    }
}

#signup_notifier::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    flex-shrink: 0;
}

#signup_notifier .close-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#signup_notifier .close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

#signup_notifier .close-btn:active {
    transform: scale(0.95);
}

#complete_profile_notifier {
    width: 100%;
    min-height: 30px;
    text-align: right;
    border: solid 1px;
    background: #f1dda3;
    padding: 3px;
    font-size: 12px;
    margin-bottom: 5px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEARCH SUGGESTIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#suggestion_list2 {
    position: absolute;
    background: #fff;
    width: 100%;
    padding: 9px;
    max-width: 640px;
    margin: 0 auto;
    overflow-y: auto;
    max-height: 500px;
}

#suggestion_list2 > ul li {
    clear: both;
    width: 100%;
    text-align: right;
    list-style: none;
    border-bottom: solid 1px #ccc;
    padding: 6px;
}

#suggestion_list2 > ul li span {
    background: none;
    color: #fff;
    border-radius: 50%;
    padding: 3px;
}

#suggestion_list2 .item {
    cursor: pointer;
    margin-bottom: 10px;
    font-size: 14px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BACKGROUND IMAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.body-background-image {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 99vw;
    height: 99vh;
    max-width: 99vw;
    max-height: 99vh;
    opacity: 0.1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MISC
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.complaint-block {
    display: none;
}

.result_title {
    display: none !important;
}

#exampleModal {
    z-index: 99999999;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE - MOBILE (max-width: 991px)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 991px) {
    /* Navigation */
    .rob {
        display: inline-flex !important;
        flex-direction: column;
        flex-wrap: wrap;
        display: -ms-flex;
        width: 100%;
        float: left;
    }

    .rob ul {
        width: 100%;
    }

    ul.navbar-nav.mr-auto.mt-2.mt-lg-0.top-first-nav.nav-style.order-2 {
        order: 3;
        width: 100%;
        opacity: 0 !important;
        visibility: hidden;
    }

    .vk-class ul.navbar-nav.mr-auto.mt-2.mt-lg-0.top-first-nav.nav-style.order-2 {
        visibility: visible;
    }

    ul.top-nav-text.order-3 {
        opacity: 0 !important;
        order: 2;
        width: 100%;
    }

    .top-nav-text.new-parts {
        margin-top: -16px;
        width: 100%;
        order: 1;
        opacity: 0 !important;
    }

    .ns-div {
        margin-top: 60px;
    }

    .res-div-part {
        flex-direction: column-reverse;
        display: inline-flex;
    }

    /* Logo */
    .div-logo-head {
        position: initial;
        left: 50%;
        top: -3px;
        transform: translateX(0%);
        display: block;
    }

    .home .mob_logo {
        display: block;
    }

    .second-logo,
    .black-logo {
        display: none;
    }

    /* Header */
    .top-header {
        height: auto !important;
        padding-bottom: 10px;
        padding-top: 10px;
        background: #fff;
    }

    .top-banner {
        position: relative;
        top: 1px;
    }

    /* Navigation Text */
    .top-nav-text li {
        text-align: right;
        display: block;
        border-bottom: 1px solid #d8d8d8;
        margin-left: -20px;
        margin-right: -19px;
        padding-left: 15px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    ul.top-nav-text {
        position: relative;
        top: 48px;
        line-height: 48px;
        left: -19px;
    }

    .top-nav-text li a {
        margin-right: 15px;
    }

    /* Footer */
    .bottom-part {
        border-top: 1px solid #d8d8d8;
        border-bottom: 1px solid #d8d8d8;
    }

    .bottom-divs {
        border: none;
    }

    .bottom-ul {
        display: none;
    }

    .drop-part {
        padding: 30px 0px;
        text-align: center;
    }

    /* Navbar */
    .navbar {
        padding: 0px;
    }

    .top-first-nav {
        margin-left: 0px;
        top: 25px !important;
    }

    .top-nav-text.new-parts {
        top: 61px;
    }

    .nav-item {
        border-bottom: 1px solid #d8d8d8;
    }

    li.nav-item {
        padding: 25px 0px;
    }

    .navbar-light .navbar-nav .nav-link {
        padding-left: 15px;
        float: right !important;
    }

    .navbar-toggler {
        margin: 13px 20px;
        position: initial;
        right: 0;
        top: 0;
    }

    .navbar-light .navbar-toggler {
        border: transparent;
        background: #0064f0;
        padding-bottom: 10px;
    }

    .navbar-collapse {
        opacity: 0;
        visibility: hidden;
    }

    .vk-class .navbar-collapse {
        opacity: 1;
        visibility: visible;
    }

    #header-second {
        overflow: hidden;
    }

    /* Search */
    .search-bars {
        position: relative;
        left: 0px;
    }

    /* Nav Styles */
    .nav-style li a {
        text-align: right;
    }

    /* Responsive Display */
    .res-mobile {
        display: block;
    }

    .desktop-mode,
    ul.navbar-nav li.desktop-mode {
        display: none !important;
    }

    .responsive-hide {
        display: none;
    }

    .res-mobile a {
        color: #006aff !important;
        font-weight: 700 !important;
    }

    /* Sign Mode */
    .sign-mode li a {
        text-align: left;
        color: #006aff !important;
    }

    .sign-mode li {
        border-top: 0px solid #d8d8d8;
        padding: 20px 0px !important;
    }

    ul.navbar-nav.mr-auto.mt-2.mt-lg-0.top-first-nav.nav-style.sign-mode {
        position: relative;
        top: 42px;
        opacity: 0 !important;
        visibility: hidden;
    }

    .vk-class ul.navbar-nav.mr-auto.mt-2.mt-lg-0.top-first-nav.nav-style.sign-mode {
        visibility: visible;
    }

    .sign-li-part .nav-item {
        border: none;
        margin-bottom: -12px;
    }

    /* Arrows */
    .top-nav-arrow {
        position: relative;
        width: 100%;
        float: left;
    }

    .top-nav-arrow img {
        position: absolute;
        top: 6px;
        left: 30px;
        bottom: 0px;
        transform: translateX(-50%);
    }

    .top-nav-arrow-second {
        position: relative;
        width: 100%;
        float: left;
    }

    .top-nav-arrow-second img {
        position: absolute;
        top: 11px;
        left: 54px;
        bottom: 0px;
        transform: translateX(-50%);
        z-index: 99999999999999999;
    }

    /* Borders */
    .border-responsive {
        border-left: 0px solid #d8d8d8;
        margin-left: 60px;
    }

    .border-responsive-second {
        border-left: 1px solid #d8d8d8;
        margin-left: 101px;
        position: absolute;
        left: -17px;
        top: 8px;
        width: 100%;
        height: 39px;
    }

    /* Misc */
    .hello {
        position: relative;
        width: 100%;
        float: left;
    }

    .sell-div {
        flex-direction: column;
    }

    .reverse-class {
        flex-direction: column-reverse;
    }

    .dis {
        display: none;
    }

    .margin-class {
        margin-left: 0px;
    }

    .edit-profile-secondary-header .nav-tabs li:first-child {
        margin-right: 0;
    }

    .wrapper_field .pl-0 {
        padding: 0 !important;
    }

    .wrapper_field .add_more_div label {
        display: none;
    }

    .wrapper_field .add_new {
        margin-bottom: 15px;
    }


}

a:hover {
    text-decoration: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER STYLES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
footer {
    background-color: #fff;
    font-family: 'iransansxv', sans-serif;
}

/* Bottom Part - Links Section */
.bottom-part {
    padding: 20px 0;
    background-color: var(--bg-primary);
    border-top: 1px solid #e9ecef;
}

.bottom-divs {
    text-align: center;
}

.bottom-ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    gap: 8px 24px;
}

.bottom-ul li {
    padding: 5px 0;
}

.bottom-ul li a,
.bottom-ul li .footer-link {
    color: var(--text-secondary, #222);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
}

.bottom-ul li a:hover,
.bottom-ul li .footer-link:hover {
    color: var(--primary-color, rgb(37, 60, 137));
}

/* Bottom Mobile */
.bottom-mobile {
    list-style: none;
    display: none;
    padding: 0;
    margin: 0;
}

/* Social Part */
.social-part {
    padding: 20px 0;
    background-color: #fff;
}

.social-div {
    text-align: center;
}

.socials {
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    gap: 16px 32px;
}

.social-ul li {
    display: flex;
    align-items: center;
}

.icons-part {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icons-part span {
    font-size: 14px;
    color: var(--text-secondary, #222);
}

.insta-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.insta-icon svg {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

.insta-icon a:hover svg {
    transform: scale(1.1);
}

.copyright {
    font-size: 13px;
    color: var(--text-muted, #717171);
    margin: 0;
}

/* Footer Part - Trust Badges */
.footer-part {
    padding: 16px 0;
    border-top: 1px solid #e9ecef;
}

.foot-div {
    text-align: center;
}

.foot-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.div-foot {
    display: inline-block;
}

.div-foot img {
    max-height: 100px;
    width: auto;
    border-radius: 5px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SMALL MOBILE (412px and below)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media only screen and (max-width: 991px) {
    /* Notifications Mobile */
    #signup_notifier {
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
        left: 10px;
        right: 10px;
        transform: none;
        top: 70px;
        padding: 12px 16px 12px 40px;
        font-size: 13px;
        line-height: 1.5;
        gap: 8px;
    }

    #signup_notifier::before {
        width: 22px;
        height: 22px;
        font-size: 14px;
    }

    #signup_notifier .close-btn {
        width: 26px;
        height: 26px;
        font-size: 16px;
        top: 5px;
        left: 5px;
    }

    /* Footer Mobile */
    .bottom-ul {
        display: none;
    }

    .bottom-mobile {
        display: block;
        padding: 0;
    }

    .bottom-mobile li {
        display: inline-block;
        vertical-align: top;
        width: 50%;
        float: right;
        margin: 0;
        text-align: right;
        padding-left: 5px;
        margin-bottom: 8px;
    }

    .bottom-mobile li a,
    .bottom-mobile li .footer-link {
        color: var(--text-secondary, #222);
        font-size: 13px;
        text-decoration: none;
        cursor: pointer;
    }

    .bottom-mobile:after,
    .bottom-mobile:before {
        display: table;
        content: '';
    }

    .bottom-mobile:after {
        clear: both;
    }

    .social-ul {
        flex-direction: column;
        gap: 12px;
    }

    .social-ul li {
        width: 100%;
        justify-content: center;
    }

    .socials {
        margin-left: 0;
    }

    .bottom-divs {
        margin: 0;
    }

    .bottom-part {
        margin-bottom: 12px;
    }
}

/* Desktop Footer */
@media (min-width: 992px) {
    .bottom-part {
        border: none;
    }

    .bottom-mobile {
        display: none;
    }
}


/**
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * AUTHENTICATION MODALS - S-TIER DESIGN SYSTEM COMPLIANT
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 *
 * 🎨 تمام استایل‌های مربوط به modal های احراز هویت
 * 📋 بر اساس: style-guide.md + design-principles.md
 * 🏆 Inspired by: Stripe, Airbnb, Linear
 *
 * @version 3.0.0 - Complete Rewrite
 * @date 2025-10-30
 * @compliant WCAG AA, S-Tier Design Principles
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. CSS VARIABLES - Moved to css-variables.css
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. MODAL BACKDROP (Overlay)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-overlay);
    z-index: var(--z-backdrop);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.modal-backdrop.show {
    opacity: 1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. MODAL BASE STRUCTURE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.auth-modal {
    font-family: var(--font-primary);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    -webkit-overflow-scrolling: touch;
}

.auth-modal .modal-dialog {
    position: relative;
    width: auto;
    max-width: 480px;
    margin: 30px auto;
    pointer-events: none;
    z-index: var(--z-modal);
    transform: scale(0.95) translateY(-20px);
    opacity: 0;
    transition: transform var(--transition-slow), opacity var(--transition-slow);
}

.auth-modal.show .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.auth-modal .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background: var(--bg-component);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    border: none;
    padding: var(--spacing-2xl);
    direction: rtl;
    outline: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. MODAL HEADER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.auth-modal .modal-header {
    border-bottom: none;
    padding: 0 0 var(--spacing-xl) 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
}

.auth-modal .modal-title {
    font-size: var(--font-2xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
    line-height: var(--line-height-tight);
    flex: 1;
}

.auth-modal .close {
    background: transparent;
    border: none;
    font-size: 1.75rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    margin: 0 0 0 var(--spacing-md);
    line-height: 1;
    opacity: 1;
    transition: color var(--transition-base);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.auth-modal .close:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.auth-modal .close:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.auth-modal .close:focus:not(:focus-visible) {
    outline: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. MODAL BODY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.auth-modal .modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. FORM ELEMENTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Form Group */
.auth-form-group {
    margin-bottom: var(--spacing-lg);
}

.form-control{
    height: auto;
}

/* Label */
.auth-label {
    display: block;
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    text-align: right;
    line-height: var(--line-height-normal);
}

/* Input Fields */
.auth-input {
    font-family: var(--font-primary);
    font-size: var(--font-base);
    color: var(--text-primary);
    background: var(--bg-component);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    width: 100%;
    transition: all var(--transition-base);
    direction: rtl;
    text-align: right;
    line-height: var(--line-height-normal);
}

.auth-input:hover:not(:disabled) {
    border-color: var(--border-default);
}

.auth-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 60, 137, 0.1);
}

.auth-input:focus:not(:focus-visible) {
    box-shadow: 0 0 0 3px rgba(37, 60, 137, 0.1);
}

.auth-input.error,
.auth-input:invalid:not(:placeholder-shown) {
    border-color: var(--error);
    border-width: 2px;
}

.auth-input::placeholder {
    color: var(--text-muted);
}

.auth-input:disabled {
    background: var(--bg-disabled);
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* OTP Input - مخصوص کد 4 رقمی */
.auth-input-otp {
    text-align: center;
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
    letter-spacing: 0.5em;
    padding-left: 0.5em;
    direction: ltr;
}

/* Loading State for Inputs */
.auth-input.loading {
    background: linear-gradient(
        90deg,
        var(--bg-component) 25%,
        var(--bg-hover) 50%,
        var(--bg-component) 75%
    );
    background-size: 200% 100%;
    animation: input-loading 1.5s ease-in-out infinite;
}

@keyframes input-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Helper Text */
.auth-text-small {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
    text-align: right;
    line-height: var(--line-height-normal);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. BUTTONS - All States (default, hover, active, focus, disabled)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Base Button */
.auth-btn {
    font-family: var(--font-primary);
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    border: none;
    width: 100%;
    text-align: center;
    line-height: var(--line-height-normal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
}

/* Primary Button */
.auth-btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, rgb(45, 75, 170) 100%);
    color: var(--text-white);
    box-shadow: var(--shadow-xs);
}

.auth-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-color) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 60, 137, 0.3);
}

.auth-btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
}

.auth-btn-primary:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(37, 60, 137, 0.2);
}

.auth-btn-primary:focus:not(:focus-visible) {
    outline: none;
}

.auth-btn-primary:disabled {
    background: var(--bg-disabled);
    color: var(--text-disabled);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Secondary Button */
.auth-btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    text-decoration: none;
    width: auto;
    min-height: auto;
    transition: all var(--transition-base);
}

.auth-btn-secondary:hover:not(:disabled) {
    color: var(--primary-hover);
    text-decoration: underline;
}

.auth-btn-secondary:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.auth-btn-secondary:focus:not(:focus-visible) {
    outline: none;
}

.auth-btn-secondary:disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* Text Button */
.auth-btn-text {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: var(--spacing-sm) 0;
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    text-align: center;
    width: 100%;
    min-height: auto;
    transition: color var(--transition-base);
}

.auth-btn-text:hover:not(:disabled) {
    color: var(--text-primary);
}

.auth-btn-text:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.auth-btn-text:focus:not(:focus-visible) {
    outline: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. CHECKBOX & RADIO BUTTONS (Accessible Touch Targets)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.auth-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-lg) 0;
}

.auth-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
    position: relative;
    transition: all var(--transition-base);
    flex-shrink: 0;
    /* Accessible touch target */
    padding: 12px;
}

.auth-checkbox input[type="checkbox"]:hover:not(:disabled) {
    border-color: var(--primary-color);
}

.auth-checkbox input[type="checkbox"]:checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.auth-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

.auth-checkbox input[type="checkbox"]:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.auth-checkbox input[type="checkbox"]:focus:not(:focus-visible) {
    outline: none;
}

.auth-checkbox input[type="checkbox"]:disabled {
    background: var(--bg-disabled);
    border-color: var(--border-light);
    cursor: not-allowed;
}

.auth-checkbox label {
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    cursor: pointer;
    margin: 0;
    line-height: var(--line-height-normal);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. INFO BOXES & ALERTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Info Box */
.auth-info-box {
    background: var(--primary-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    text-align: right;
    border-right: 4px solid var(--primary-color);
}

.auth-info-box p {
    margin: 0;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Terms Box */
.auth-terms {
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

.auth-terms a {
    color: var(--primary-color);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: color var(--transition-base);
}

.auth-terms a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.auth-terms a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.auth-terms a:focus:not(:focus-visible) {
    outline: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. UTILITY CLASSES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Divider */
.auth-divider {
    border: 0;
    border-top: 1px solid var(--border-light);
    margin: var(--spacing-xl) 0;
}

/* Text Utilities */
.auth-text-muted {
    color: var(--text-muted);
    font-size: var(--font-sm);
    text-align: right;
    line-height: var(--line-height-normal);
}

.auth-text-highlight {
    color: var(--primary-color);
    font-weight: var(--font-bold);
}

/* Timer */
.auth-timer {
    color: var(--text-muted);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
}

/* Logo */
.auth-logo {
    text-align: center;
    margin-top: var(--spacing-xl);
}

.auth-logo a {
    display: block;
    transition: opacity var(--transition-base);
    justify-items: center;
}

.auth-logo a:hover {
    opacity: 0.8;
}

.auth-logo a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.auth-logo a:focus:not(:focus-visible) {
    outline: none;
}

.auth-logo img {
    max-width: 150px;
    height: auto;
    display: block;
}

/* Flex Helpers */
.auth-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-md);
}

/* Icon with Text */
.auth-icon-text {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--primary-color);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-base);
}

.auth-icon-text i {
    font-size: var(--font-xl);
}

/* Edit Phone Section */
.auth-edit-phone {
    text-align: right;
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.auth-edit-phone-inline-btn {
    display: inline-block;
}

/* Timer Container */
.auth-timer-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. AJAX LOADER (Loading State)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.auth-ajax-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-loader);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.auth-ajax-loader:not([hidden]) {
    opacity: 1;
    visibility: visible;
}

.auth-ajax-loader-content {
    background: rgba(0, 0, 0, 0.85);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-xl);
    min-width: 200px;
}

.auth-ajax-loader-text {
    color: var(--text-white);
    margin-top: var(--spacing-md);
    font-family: var(--font-primary);
    font-size: var(--font-base);
    font-weight: var(--font-medium);
}

/* Spinner Animation */
.spinner-border {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

.spinner-border.text-light {
    color: var(--text-white);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. RESPONSIVE DESIGN (Mobile-First Approach)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Tablet (768px and below) */
@media (max-width: 768px) {
    .auth-modal .modal-dialog {
        margin: 15px auto;
    }

    .auth-flex-between {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Mobile (576px and below) */
@media (max-width: 576px) {
    .auth-modal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .auth-modal .modal-content {
        padding: var(--spacing-lg);
    }

    .auth-modal .modal-title {
        font-size: var(--font-xl);
    }

    .auth-input-otp {
        font-size: var(--font-xl);
    }

    .auth-edit-phone {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Small Mobile (412px and below) */
@media (max-width: 412px) {
    .auth-modal .modal-content {
        padding: var(--spacing-md);
    }

    .auth-modal .modal-title {
        font-size: var(--font-lg);
    }

    .auth-input {
        font-size: 0.9375rem;
        padding: 10px 14px;
    }

    .auth-btn {
        font-size: 0.9375rem;
        padding: 10px 20px;
    }

    .auth-input-otp {
        font-size: var(--font-lg);
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. ACCESSIBILITY (WCAG AA+ Compliance)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */



/* Focus Visible (Keyboard Navigation) */
*:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Reduce Motion (Accessibility) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .auth-modal .modal-content {
        border: 2px solid currentColor;
    }

    .auth-input {
        border-width: 2px;
    }

    .auth-btn-primary {
        border: 2px solid transparent;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14. PRINT STYLES (Hide modals when printing)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media print {
    .auth-modal,
    .modal-backdrop,
    .auth-ajax-loader {
        display: none !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   15. CONTAINER VISIBILITY (Fix for hidden containers)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* OTP Container - visible by default */
#otp_login_container {
    display: block;
}

/* Password Container - hidden by default */
#password_login_container {
    display: none;
}

/* Show/Hide States (controlled by JS) */
#otp_login_container[hidden],
#password_login_container[hidden] {
    display: none !important;
}

/* Hidden checkbox (controlled by button click) */
.auth-checkbox-hidden {
    display: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LOGIN SELECTION MODAL (Mobile)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.auth-selection-modal .modal-body {
    padding: var(--spacing-xl);
}

.auth-selection-subtitle {
    font-family: var(--font-primary);
    font-size: var(--font-base);
    font-weight: var(--font-normal);
    color: var(--text-muted);
    text-align: center;
    margin: 0 0 var(--spacing-xl) 0;
}

.auth-selection-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Selection Button */
.auth-selection-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    background: var(--bg-component);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    width: 100%;
    text-align: right;
}

.auth-selection-btn:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.auth-selection-btn:active {
    transform: translateY(0);
}

/* Icon */
.auth-selection-btn-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.auth-selection-btn-doctor .auth-selection-btn-icon {
    background: linear-gradient(135deg, var(--primary-color) 0%, rgb(45, 75, 170) 100%);
    color: var(--text-white);
}

.auth-selection-btn-patient .auth-selection-btn-icon {
    background: var(--bg-primary);
    color: var(--primary-color);
}

.auth-selection-btn:hover .auth-selection-btn-icon {
    transform: scale(1.1);
}

.auth-selection-btn-icon i {
    font-size: 24px;
}

/* Content */
.auth-selection-btn-content {
    flex: 1;
}

.auth-selection-btn-title {
    font-family: var(--font-primary);
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    line-height: var(--line-height-tight);
}

.auth-selection-btn-desc {
    font-family: var(--font-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-normal);
    color: var(--text-muted);
    margin: 0;
    line-height: var(--line-height-normal);
}

/* Arrow */
.auth-selection-btn-arrow {
    color: var(--text-muted);
    transition: all var(--transition-base);
}

.auth-selection-btn:hover .auth-selection-btn-arrow {
    color: var(--primary-color);
    transform: translateX(-4px);
}

.auth-selection-btn-arrow i {
    font-size: var(--font-lg);
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .auth-selection-btn {
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }

    .auth-selection-btn-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    .auth-selection-btn-icon i {
        font-size: 20px;
    }

    .auth-selection-btn-title {
        font-size: var(--font-base);
    }

    .auth-selection-btn-desc {
        font-size: var(--font-xs);
    }
}


/**
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * HEADER - PROFESSIONAL S-TIER DESIGN
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 *
 * 🎨 هدر حرفه‌ای برای پلتفرم دکتر VIP
 * 📋 بر اساس: style-guide.md + design-principles.md
 * 🌟 ویژگی‌ها: Sticky با fade effect, Responsive, Modern animations
 *
 * @version 2.1.0
 * @date 2025-11-02
 * @compliant 100% with Design System Guidelines
 * @fix Mobile sidebar display issue - only show when active
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. CSS VARIABLES - Moved to css-variables.css
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. MAIN HEADER CONTAINER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.new-header {
    direction: rtl !important;
    font-family: var(--header-font-primary) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: var(--header-z-index-header) !important;
    background: var(--header-bg-primary) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: var(--header-shadow-sm) !important;
    transition: all var(--header-transition-slow) !important;
    will-change: transform, opacity;
}

.new-header.scrolled {
    background: var(--header-bg-scroll);
    box-shadow: var(--header-shadow-md);
}

.new-header.hidden {
    transform: translateY(-100%);
    opacity: 0;
}

.new-header.visible {
    transform: translateY(0);
    opacity: 1;
}

.new-header .header-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--header-spacing-xl);
    height: var(--header-height-desktop);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. LOGO
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.new-header .header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.new-header .header-logo a {
    display: block;
    line-height: 0;
}

.new-header .header-logo img {
    height: 55px;
    width: auto;
    display: block;
    transition: all var(--header-transition-base);
}

.new-header.scrolled .header-logo img {
    height: 50px;
}



.new-header .header-logo a:focus {
    outline: 2px solid var(--header-primary-color);
    outline-offset: 4px;
    border-radius: var(--header-radius-sm);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. DESKTOP NAVIGATION - LEFT SIDE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.new-header .header-left {
    display: flex;
    align-items: center;
    gap: var(--header-spacing-lg);
}

.new-header .nav-links {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--header-spacing-lg) !important;
}

.new-header .nav-link {
    position: relative;
    color: var(--header-text-primary);
    text-decoration: none;
    font-size: var(--header-font-sm);
    font-weight: var(--header-font-medium);
    line-height: var(--header-line-height-normal);
    padding: var(--header-spacing-sm) var(--header-spacing-md);
    border-radius: var(--header-radius-md);
    transition: all var(--header-transition-base);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: var(--header-spacing-sm);
}

.new-header .nav-link:hover {
    color: var(--header-primary-color);
    background: var(--header-bg-hover);
    transform: translateY(-1px);
}

.new-header .nav-link:active {
    transform: translateY(0);
}

/* Online Indicator for مشاوره آنلاین */
.new-header .nav-link.has-online-indicator::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--secondary-color);
    border-radius: var(--header-radius-full);
    display: inline-block;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

/* Dropdown for مشاوره آنلاین */
.new-header .nav-dropdown {
    position: relative;
}

.new-header .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--header-spacing-sm));
    right: 0;
    background: var(--header-bg-component);
    border-radius: var(--header-radius-lg);
    box-shadow: var(--header-shadow-lg);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--header-transition-base);
    padding: var(--header-spacing-sm);
    z-index: var(--header-z-index-dropdown);
}

.new-header .nav-dropdown:hover .nav-dropdown-menu,
.new-header .nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.new-header .nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--header-spacing-sm);
    padding: var(--header-spacing-md);
    color: var(--header-text-primary);
    text-decoration: none;
    border-radius: var(--header-radius-md);
    font-size: var(--header-font-sm);
    font-weight: var(--header-font-normal);
    line-height: var(--header-line-height-normal);
    transition: all var(--header-transition-fast);
}

.new-header .nav-dropdown-item:hover {
    background: var(--header-bg-hover);
    color: var(--header-primary-color);
}

.new-header .nav-dropdown-item i {
    width: 20px;
    text-align: center;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. DESKTOP NAVIGATION - RIGHT SIDE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.new-header .header-right {
    display: flex;
    align-items: center;
    gap: var(--header-spacing-lg);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. NOTIFICATION ICON & DROPDOWN
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.new-header .notification-wrapper {
    position: relative;
}

.new-header .notification-icon {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--header-radius-full);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--header-transition-base);
    color: var(--header-text-primary);
    font-size: 20px;
}

.new-header .notification-icon:hover {
    background: var(--header-bg-hover);
    color: var(--header-primary-color);
}

.new-header .notification-icon:focus {
    outline: 2px solid var(--header-primary-color);
    outline-offset: 2px;
}

.new-header .notification-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--header-error);
    color: var(--header-text-white);
    font-size: var(--header-font-xs);
    font-weight: var(--header-font-bold);
    line-height: 1;
    min-width: 18px;
    height: 18px;
    border-radius: var(--header-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    animation: badge-appear 0.3s ease;
}

@keyframes badge-appear {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.new-header .notification-dropdown {
    position: absolute;
    top: calc(100% + var(--header-spacing-md));
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: 380px;
    max-height: 500px;
    background: var(--header-bg-component);
    border-radius: var(--header-radius-lg);
    box-shadow: var(--header-shadow-xl);
    opacity: 0;
    visibility: hidden;
    transition: all var(--header-transition-base);
    overflow: hidden;
    z-index: var(--header-z-index-dropdown);
}

.new-header .notification-wrapper.active .notification-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.new-header .notification-header {
    padding: var(--header-spacing-lg);
    border-bottom: 1px solid var(--header-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.new-header .notification-title {
    font-size: var(--header-font-base);
    font-weight: var(--header-font-semibold);
    line-height: var(--header-line-height-tight);
    color: var(--header-text-primary);
    margin: 0;
}

.new-header .notification-mark-read {
    font-size: var(--header-font-sm);
    color: var(--header-primary-color);
    text-decoration: none;
    font-weight: var(--header-font-medium);
    cursor: pointer;
    transition: all var(--header-transition-fast);
    padding: var(--header-spacing-xs) var(--header-spacing-sm);
    border-radius: var(--header-radius-sm);
}

.new-header .notification-mark-read:hover {
    color: var(--header-primary-hover);
    background: var(--header-bg-hover);
}

.new-header .notification-list {
    max-height: 360px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.new-header .notification-item {
    padding: var(--header-spacing-lg);
    border-bottom: 1px solid var(--header-gray-100);
    display: flex;
    gap: var(--header-spacing-md);
    cursor: pointer;
    transition: all var(--header-transition-fast);
    position: relative;
}

.new-header .notification-item:last-child {
    border-bottom: none;
}

.new-header .notification-item:hover {
    background: var(--header-gray-50);
}

.new-header .notification-item.unread {
    background: var(--header-primary-light);
}

.new-header .notification-item.unread::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--header-primary-color);
    border-radius: var(--header-radius-full);
    position: absolute;
    right: var(--header-spacing-lg);
    top: 50%;
    transform: translateY(-50%);
}

.new-header .notification-avatar {
    width: 42px;
    height: 42px;
    border-radius: var(--header-radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.new-header .notification-content {
    flex: 1;
    min-width: 0;
}

.new-header .notification-text {
    font-size: var(--header-font-sm);
    color: var(--header-text-primary);
    line-height: var(--header-line-height-normal);
    margin: 0 0 var(--header-spacing-xs) 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.new-header .notification-time {
    font-size: var(--header-font-xs);
    color: var(--header-text-muted);
    line-height: var(--header-line-height-tight);
}

.new-header .notification-footer {
    padding: var(--header-spacing-md);
    border-top: 1px solid var(--header-border-light);
    text-align: center;
}

.new-header .notification-view-all {
    color: var(--header-primary-color);
    text-decoration: none;
    font-size: var(--header-font-sm);
    font-weight: var(--header-font-medium);
    transition: all var(--header-transition-fast);
    padding: var(--header-spacing-sm);
    display: inline-block;
    border-radius: var(--header-radius-sm);
}

.new-header .notification-view-all:hover {
    color: var(--header-primary-hover);
    background: var(--header-bg-hover);
}

/* Custom Scrollbar for Notifications */
.new-header .notification-list::-webkit-scrollbar {
    width: 6px;
}

.new-header .notification-list::-webkit-scrollbar-track {
    background: transparent;
}

.new-header .notification-list::-webkit-scrollbar-thumb {
    background: var(--header-gray-300);
    border-radius: var(--header-radius-sm);
}

.new-header .notification-list::-webkit-scrollbar-thumb:hover {
    background: var(--header-gray-400);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. USER MENU DROPDOWN
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.new-header .user-menu {
    position: relative;
}

.new-header .user-menu-trigger {
    display: flex;
    align-items: center;
    gap: var(--header-spacing-sm);
    padding: var(--header-spacing-sm) var(--header-spacing-md);
    border-radius: var(--header-radius-md);
    cursor: pointer;
    transition: all var(--header-transition-base);
    background: transparent;
    border: none;
    color: var(--header-text-primary);
    font-family: var(--header-font-primary);
    font-size: var(--header-font-sm);
    font-weight: var(--header-font-medium);
    line-height: var(--header-line-height-normal);
}

.new-header .user-menu-trigger:hover {
    background: var(--header-bg-hover);
    color: var(--header-primary-color);
}

.new-header .user-menu-arrow {
    font-size: 12px;
    transition: transform var(--header-transition-base);
}

.new-header .user-menu.active .user-menu-arrow {
    transform: rotate(180deg);
}

.new-header .user-menu-dropdown {
    position: absolute;
    top: calc(100% + var(--header-spacing-sm));
    left: 0;
    min-width: 240px;
    background: var(--header-bg-component);
    border-radius: var(--header-radius-lg);
    box-shadow: var(--header-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--header-transition-base);
    padding: var(--header-spacing-sm);
    z-index: var(--header-z-index-dropdown);
}

.new-header .user-menu.active .user-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.new-header .user-menu-item {
    display: flex;
    align-items: center;
    gap: var(--header-spacing-md);
    padding: var(--header-spacing-md);
    color: var(--header-text-primary);
    text-decoration: none;
    border-radius: var(--header-radius-md);
    font-size: var(--header-font-sm);
    font-weight: var(--header-font-normal);
    line-height: var(--header-line-height-normal);
    transition: all var(--header-transition-fast);
}

.new-header .user-menu-item:hover {
    background: var(--header-bg-hover);
    color: var(--header-primary-color);
}

.new-header .user-menu-item:active {
    transform: scale(0.98);
}

.new-header .user-menu-item i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: var(--header-text-muted);
}

.new-header .user-menu-item:hover i {
    color: var(--header-primary-color);
}

.new-header .user-menu-divider {
    height: 1px;
    background: var(--header-border-light);
    margin: var(--header-spacing-sm) 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. CTA BUTTON (ورود پزشکان)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.new-header .btn-doctor-login {
    background: linear-gradient(135deg, var(--header-primary-color) 0%, rgb(45, 75, 170) 100%);
    color: var(--header-text-white);
    padding: 10px 20px;
    border-radius: var(--header-radius-md);
    font-size: var(--header-font-sm);
    font-weight: var(--header-font-semibold);
    font-family: var(--header-font-primary);
    line-height: var(--header-line-height-tight);
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--header-transition-base);
    box-shadow: 0 2px 8px rgba(37, 60, 137, 0.2);
    display: inline-flex;
    align-items: center;
    gap: var(--header-spacing-sm);
}

.new-header .btn-doctor-login:hover {
    background: linear-gradient(135deg, var(--header-primary-hover) 0%, var(--header-primary-color) 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(37, 60, 137, 0.3);
    color: var(--header-text-white);
}

.new-header .btn-doctor-login:active {
    transform: translateY(0) scale(1);
}

.new-header .btn-doctor-login:focus {
    outline: 2px solid var(--header-primary-color);
    outline-offset: 2px;
}

/* Patient Login Button (similar to doctor but secondary style) */
.new-header .btn-patient-login {
    background: var(--header-bg-component);
    color: var(--header-primary-color);
    padding: 10px 20px;
    border-radius: var(--header-radius-md);
    font-size: var(--header-font-sm);
    font-weight: var(--header-font-semibold);
    font-family: var(--header-font-primary);
    line-height: var(--header-line-height-tight);
    text-decoration: none;
    border: 2px solid var(--header-primary-color);
    cursor: pointer;
    transition: all var(--header-transition-base);
    display: inline-flex;
    align-items: center;
    gap: var(--header-spacing-sm);
    margin-left: var(--header-spacing-sm);
}

.new-header .btn-patient-login:hover {
    background: var(--header-primary-color);
    color: var(--header-text-white);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(37, 60, 137, 0.3);
}

.new-header .btn-patient-login:active {
    transform: translateY(0) scale(1);
}

.new-header .btn-patient-login:focus {
    outline: 2px solid var(--header-primary-color);
    outline-offset: 2px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. MOBILE MENU TOGGLES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.new-header .mobile-menu-toggle,
.new-header .mobile-user-toggle {
    width: 40px;
    height: 40px;
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--header-radius-md);
    cursor: pointer;
    transition: all var(--header-transition-base);
    color: var(--header-text-primary);
    font-size: 22px;
}

.new-header .mobile-menu-toggle:hover,
.new-header .mobile-user-toggle:hover {
    background: var(--header-bg-hover);
    color: var(--header-primary-color);
}

.new-header .mobile-menu-toggle:active,
.new-header .mobile-user-toggle:active {
    transform: scale(0.95);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. MOBILE SIDEBARS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
                rgba(37, 60, 137, 0.4) 0%,
                rgba(0, 0, 0, 0.6) 100%);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: var(--header-z-index-overlay);
    display: none;
    -webkit-tap-highlight-color: transparent;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
    display: block;
}

.mobile-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--header-sidebar-width);
    background: #FFFFFF;
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.15),
                2px 0 12px rgba(0, 0, 0, 0.1);
    z-index: var(--header-z-index-sidebar);
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: none;
    direction: rtl;
    font-family: var(--header-font-primary);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.mobile-sidebar-menu {
    right: 0;
    transform: translateX(100%);
}

.mobile-sidebar-menu.active {
    transform: translateX(0);
    display: block;
}

.mobile-sidebar-user {
    left: 0;
    transform: translateX(-100%);
}

.mobile-sidebar-user.active {
    transform: translateX(0);
    display: block;
}

.sidebar-header {
    padding: var(--header-spacing-xl);
    border-bottom: 2px solid rgba(37, 60, 137, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: #FFFFFF;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.sidebar-title {
    font-size: var(--header-font-lg);
    font-weight: var(--header-font-bold);
    line-height: var(--header-line-height-tight);
    color: var(--header-text-primary);
    margin: 0;
}

.sidebar-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 60, 137, 0.05);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: rgb(37, 60, 137);
    font-size: 22px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-close:hover {
    background: rgba(37, 60, 137, 0.1);
    color: rgb(30, 48, 110);
    transform: rotate(90deg);
}

.sidebar-close:active {
    transform: rotate(90deg) scale(0.95);
}

.sidebar-content {
    padding: var(--header-spacing-lg);
}

.sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-nav-item {
    margin-bottom: var(--header-spacing-sm);
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: var(--header-spacing-md);
    padding: 14px var(--header-spacing-lg);
    color: var(--header-text-primary);
    text-decoration: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: var(--header-line-height-normal);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.sidebar-nav-link::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: rgb(37, 60, 137);
    transform: scaleY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 4px 4px 0;
}

.sidebar-nav-link:hover {
    background: linear-gradient(90deg, rgba(37, 60, 137, 0.08) 0%, rgba(37, 60, 137, 0.04) 100%);
    color: rgb(37, 60, 137);
    transform: translateX(-4px);
}

.sidebar-nav-link:hover::before {
    transform: scaleY(1);
}

.sidebar-nav-link:active {
    transform: translateX(-4px) scale(0.98);
}

.sidebar-nav-link i {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    color: var(--header-text-muted);
    background: rgba(113, 113, 113, 0.08);
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-nav-link:hover i {
    color: rgb(37, 60, 137);
    background: rgba(37, 60, 137, 0.12);
    transform: scale(1.1);
}

/* Sidebar Dropdown */
.sidebar-dropdown {
    position: relative;
}

.sidebar-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px var(--header-spacing-lg);
    background: transparent;
    border: none;
    color: var(--header-text-primary);
    text-decoration: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    font-family: var(--header-font-primary);
    line-height: var(--header-line-height-normal);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: right;
    position: relative;
}

.sidebar-dropdown-toggle::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: rgb(37, 60, 137);
    transform: scaleY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 4px 4px 0;
}

.sidebar-dropdown-toggle:hover {
    background: linear-gradient(90deg, rgba(37, 60, 137, 0.08) 0%, rgba(37, 60, 137, 0.04) 100%);
    color: rgb(37, 60, 137);
    transform: translateX(-4px);
}

.sidebar-dropdown-toggle:hover::before {
    transform: scaleY(1);
}

.sidebar-dropdown.active .sidebar-dropdown-toggle {
    background: rgba(37, 60, 137, 0.08);
    color: rgb(37, 60, 137);
}

.sidebar-dropdown-arrow {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    background: rgba(37, 60, 137, 0.08) !important;
    border-radius: 6px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar-dropdown-toggle:hover .sidebar-dropdown-arrow {
    background: rgba(37, 60, 137, 0.15) !important;
}

.sidebar-dropdown.active .sidebar-dropdown-arrow {
    transform: rotate(180deg) !important;
    background: rgb(37, 60, 137) !important;
    color: white !important;
}

.sidebar-dropdown-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--header-transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
    padding-right: var(--header-spacing-xl);
}

.sidebar-dropdown.active .sidebar-dropdown-menu {
    max-height: 300px;
}

.sidebar-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--header-spacing-sm);
    padding: 10px var(--header-spacing-lg);
    color: var(--header-text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    line-height: var(--header-line-height-normal);
    border-radius: 10px;
    margin-bottom: var(--header-spacing-xs);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding-right: 24px;
}

.sidebar-dropdown-item::before {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: var(--header-text-muted);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-dropdown-item:hover {
    background: linear-gradient(90deg, rgba(0, 166, 153, 0.08) 0%, rgba(0, 166, 153, 0.04) 100%);
    color: #00A699;
    padding-right: 20px;
}

.sidebar-dropdown-item:hover::before {
    width: 6px;
    height: 6px;
    background: #00A699;
}

.sidebar-dropdown-item i {
    width: 20px;
    text-align: center;
    font-size: 14px;
}

/* Custom Scrollbar for Sidebars - حرفه‌ای و زیبا */
.mobile-sidebar::-webkit-scrollbar {
    width: 8px;
}

.mobile-sidebar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    margin: 8px 0;
}

.mobile-sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(37, 60, 137, 0.3) 0%, rgba(37, 60, 137, 0.2) 100%);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: all 0.3s ease;
}

.mobile-sidebar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(37, 60, 137, 0.5) 0%, rgba(37, 60, 137, 0.4) 100%);
    background-clip: padding-box;
}

.mobile-sidebar::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, rgba(37, 60, 137, 0.7) 0%, rgba(37, 60, 137, 0.6) 100%);
    background-clip: padding-box;
}

/* Show sidebars only on mobile when active */
@media (max-width: 991px) {
    .mobile-sidebar.active {
        display: block;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR NAV DIVIDER - جداکننده بخش‌های منوی موبایل
   ═══════════════════════════════════════════════════════════════ */
.sidebar-nav-divider {
    padding: var(--header-spacing-md) var(--header-spacing-lg);
    margin-top: var(--header-spacing-md);
    border-top: 1px solid var(--header-border-light);
}

.sidebar-nav-divider-text {
    font-size: var(--header-font-xs);
    font-weight: var(--header-font-semibold);
    color: var(--header-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dropdown toggle content with icon and text */
.sidebar-dropdown-toggle-content {
    display: flex;
    align-items: center;
    gap: var(--header-spacing-md);
}

.sidebar-dropdown-toggle-content i {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    color: var(--header-text-muted);
    background: rgba(113, 113, 113, 0.08);
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-dropdown-toggle:hover .sidebar-dropdown-toggle-content i {
    color: rgb(37, 60, 137);
    background: rgba(37, 60, 137, 0.12);
    transform: scale(1.1);
}

.sidebar-dropdown.active .sidebar-dropdown-toggle-content i {
    color: rgb(37, 60, 137);
    background: rgba(37, 60, 137, 0.12);
}

/* Extended max-height for groups with many items */
.sidebar-dropdown.active .sidebar-dropdown-menu {
    max-height: 500px;
}

/* Link to view all specialties */
.sidebar-nav-link-all-specialties {
    color: var(--header-primary-color) !important;
    font-weight: var(--header-font-semibold);
}

.sidebar-nav-link-all-specialties i {
    color: var(--header-primary-color) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. RESPONSIVE - TABLET (≤1024px)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
    .new-header .header-container {
        padding: 0 var(--header-spacing-lg);
    }

    .new-header .header-left,
    .new-header .header-right {
        gap: var(--header-spacing-md);
    }

    .new-header .nav-link {
        font-size: var(--header-font-sm);
        padding: var(--header-spacing-xs) var(--header-spacing-sm);
    }

    .new-header .btn-doctor-login {
        padding: 8px 16px;
        font-size: var(--header-font-sm);
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. RESPONSIVE - MOBILE (≤991px)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 991px) {
    .new-header .header-container {
        height: var(--header-height-mobile);
        padding: 0 var(--header-spacing-md);
    }

    .new-header .header-logo img {
        height: 40px;
    }

    .new-header.scrolled .header-logo img {
        height: 35px;
    }

    /* Hide desktop navigation */
    .new-header .nav-links,
    .new-header .header-left .nav-link,
    .new-header .header-right .nav-link,
    .new-header .header-right .user-menu,
    .new-header .btn-doctor-login {
        display: none !important;
    }

    /* Show mobile toggles */
    .new-header .mobile-menu-toggle,
    .new-header .mobile-user-toggle {
        display: flex;
    }

    .new-header .header-left {
        gap: var(--header-spacing-sm);
    }

    .new-header .header-right {
        gap: var(--header-spacing-sm);
    }

    /* Notification on mobile - ثابت کردن موقعیت */
    .new-header .notification-dropdown {
        width: calc(100vw - 32px); /* Full width minus padding */
        max-width: 360px;
        right: 16px !important; /* Force right alignment */
        left: auto !important; /* Override desktop left: 50% */
        transform: translateX(85%) translateY(-10px) !important; /* Override desktop translateX(-50%) */
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. RESPONSIVE - SMALL MOBILE (≤412px)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 412px) {
    .new-header .header-container {
        padding: 0 var(--header-spacing-sm);
    }

    .new-header .header-logo img {
        height: 40px;
    }

    .new-header.scrolled .header-logo img {
        height: 35px;
    }

    .mobile-sidebar {
        width: 85vw;
        max-width: 300px;
    }

    .new-header .notification-icon,
    .new-header .mobile-menu-toggle,
    .new-header .mobile-user-toggle {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14. ACCESSIBILITY (WCAG AA Compliant)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Touch Targets - Minimum 44x44px for mobile */
@media (hover: none) and (pointer: coarse) {
    .new-header .nav-link,
    .new-header .notification-icon,
    .new-header .user-menu-trigger,
    .new-header .mobile-menu-toggle,
    .new-header .mobile-user-toggle,
    .new-header .btn-doctor-login,
    .sidebar-nav-link,
    .sidebar-dropdown-toggle {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Remove outline on button focus */
button:focus {
    outline: none !important;
}

/* Focus States - Clear visual feedback */
.new-header a:focus,
.new-header button:focus {
    outline: 2px solid var(--header-primary-color);
    outline-offset: 2px;
}

.new-header a:focus:not(:focus-visible),
.new-header button:focus:not(:focus-visible) {
    outline: none;
}

/* Focus visible for keyboard navigation */
.new-header a:focus-visible,
.new-header button:focus-visible {
    outline: 2px solid var(--header-primary-color);
    outline-offset: 2px;
    border-radius: var(--header-radius-sm);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .new-header {
        border-bottom: 2px solid var(--header-text-primary);
    }

    .new-header .nav-link:hover,
    .new-header .notification-icon:hover,
    .new-header .user-menu-trigger:hover {
        outline: 2px solid currentColor;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   15. UTILITY CLASSES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.new-header .hide-mobile {
    display: block;
}

.new-header .show-mobile {
    display: none;
}

@media (max-width: 991px) {
    .new-header .hide-mobile {
        display: none !important;
    }

    .new-header .show-mobile {
        display: block;
    }
}

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   16. BODY & GLOBAL ADJUSTMENTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Add padding to body for fixed header */
body {
    padding-top: var(--header-height-desktop);
    text-align: right;
}

@media (max-width: 991px) {
    body {
        padding-top: var(--header-height-mobile);
    }
}

/* Prevent body scroll when sidebar is open */
body.sidebar-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   17. LOADER STYLES (Compatibility with existing system)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.new_loader {
    width: 100% !important;
    height: 100% !important;
    position: fixed;
    z-index: 2147483647 !important;
    background: rgba(253, 253, 253, 0.68);
    backdrop-filter: blur(4px);
    touch-action: none;
    pointer-events: none;
    top: 0;
    left: 0;
}

.spinner {
    border: none !important;
    border-top: none !important;
    border-radius: 0% !important;
    width: 45px !important;
    margin-top: 45vh;
    right: 47% !important;
    height: 45px !important;
    position: fixed !important;
    animation: spin 0.5s linear infinite !important;
    text-align: center !important;
    background-image: url(/theme/images/loader-large.png);
    background-repeat: no-repeat;
    background-size: contain;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 991px) {
    .spinner {
        right: 43vw !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   18. PERFORMANCE OPTIMIZATIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* GPU Acceleration for smooth animations */
.new-header,
.mobile-sidebar,
.sidebar-overlay,
.notification-dropdown,
.user-menu-dropdown,
.nav-dropdown-menu {
    will-change: transform, opacity;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Remove will-change after transition complete */
.new-header:not(.hidden):not(.visible),
.mobile-sidebar:not(.active),
.sidebar-overlay:not(.active) {
    will-change: auto;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   19. BOOKMARK & SHARE STYLES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Bookmark Icon Styles */
.btn-save-doctor .bookmark-icon {
    color: #717171;
    transition: color 0.2s ease, transform 0.2s ease;
}

.btn-save-doctor:hover .bookmark-icon {
    transform: scale(1.1);
}

/* .btn-save-doctor.is-saved .bookmark-icon {
    color: #FFD700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
} */

/* Share Button Hover Effect */
.btn-share-profile:hover i {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   20. UTILITY CLASSES (Replacing Inline Styles)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Hidden element */
.hidden {
    display: none !important;
}

/* Doctor icon in reservation countdown */
.doctor-icon-large {
    font-size: 24px;
    color: var(--header-primary-color);
}

/* Notification badge hidden by default */
.notification-badge-hidden {
    display: none !important;
}

/* Loading text center */
.loading-text-center {
    text-align: center;
    padding: 40px;
    color: var(--header-text-muted);
}

/* Warning menu item (incomplete profile) */
.user-menu-item-warning {
    background: #fff3cd;
    color: #856404;
}

.sidebar-nav-link-warning {
    background: #fff3cd;
    color: #856404;
}

/* Doctor signup CTA button in sidebar */
.sidebar-nav-item-doctor-cta {
    margin-top: 20px;
}

.sidebar-nav-link-doctor-cta {
    background: linear-gradient(135deg, rgb(37, 60, 137) 0%, rgb(30, 48, 110) 100%);
    color: white;
}

/* Logout divider */
.sidebar-nav-item-logout-divider {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #DDDDDD;
}

/* Logout link */
.sidebar-nav-link-logout {
    color: #DC2626;
}


/**
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * RESERVATION CONFLICT MODAL - MATCHING HEADER DESIGN
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 *
 * @version 1.0.0
 * @date 2025-11-01
 * @compliant 100% with design system
 */

/* Overlay */
.reservation-conflict-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
}

.reservation-conflict-overlay.active {
    display: flex; /* Show when active */
    opacity: 1;
    pointer-events: all;
    animation: fadeIn 200ms ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Container */
.reservation-conflict-modal {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    max-width: 480px;
    width: 100%;
    font-family: 'iransansxv', sans-serif;
    animation: slideUp 300ms cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(20px);
    opacity: 0;
}

.reservation-conflict-overlay.active .reservation-conflict-modal {
    transform: translateY(0);
    opacity: 1;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Header */
.modal-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background: #FEF3C7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modal-icon i {
    font-size: 24px;
    color: #F59E0B;
}

.modal-header-text {
    flex: 1;
}

.modal-title {
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    color: #000000;
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.modal-subtitle {
    font-size: 0.875rem; /* 14px */
    font-weight: 400;
    color: #717171;
    margin: 0;
    line-height: 1.5;
}

/* Body */
.modal-body {
    padding: 24px;
}

.reservation-info {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.reservation-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.reservation-info-row:last-child {
    margin-bottom: 0;
}

.reservation-info-icon {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid #FFB400;
}

.reservation-info-icon i {
    font-size: 16px;
    color: rgb(37, 60, 137);
}

.reservation-info-text {
    flex: 1;
}

.reservation-info-label {
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    color: #717171;
    margin: 0 0 2px 0;
}

.reservation-info-value {
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    color: #000000;
    margin: 0;
}

.reservation-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FEF3C7;
    color: #92400E;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8125rem; /* 13px */
    font-weight: 600;
}

.reservation-timer i {
    font-size: 12px;
}

/* Footer */
.modal-footer {
    padding: 16px 24px 24px;
    display: flex;
    gap: 12px;
}

.modal-btn {
    flex: 1;
    font-family: 'iransansxv', sans-serif;
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 200ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1.5;
    white-space: nowrap;
}

.modal-btn-primary {
    background: linear-gradient(135deg, rgb(37, 60, 137) 0%, rgb(45, 75, 170) 100%);
    color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(37, 60, 137, 0.2);
}

.modal-btn-primary:hover {
    background: linear-gradient(135deg, rgb(30, 48, 110) 0%, rgb(37, 60, 137) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 60, 137, 0.15);
}

.modal-btn-primary:active {
    transform: translateY(0);
}

.modal-btn-secondary {
    background: transparent;
    color: #DC2626;
    border: 1px solid #DDDDDD;
}

.modal-btn-secondary:hover {
    background: #FEF2F2;
    border-color: #DC2626;
}

.modal-btn-secondary:active {
    transform: scale(0.98);
}

.modal-btn i {
    font-size: 14px;
}

.modal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 767px) {
    .reservation-conflict-overlay {
        padding: 16px;
    }

    .reservation-conflict-modal {
        max-width: 100%;
    }

    .modal-header {
        padding: 20px 20px 12px;
    }

    .modal-icon {
        width: 40px;
        height: 40px;
    }

    .modal-icon i {
        font-size: 20px;
    }

    .modal-title {
        font-size: 1rem; /* 16px */
    }

    .modal-subtitle {
        font-size: 0.8125rem; /* 13px */
    }

    .modal-body {
        padding: 20px;
    }

    .reservation-info {
        padding: 12px;
    }

    .reservation-info-row {
        gap: 10px;
        margin-bottom: 10px;
    }

    .reservation-info-icon {
        width: 32px;
        height: 32px;
    }

    .reservation-info-icon i {
        font-size: 14px;
    }

    .modal-footer {
        padding: 12px 20px 20px;
        flex-direction: column;
    }

    .modal-btn {
        width: 100%;
    }
}

@media (max-width: 479px) {
    .modal-title {
        font-size: 0.9375rem; /* 15px */
    }

    .modal-subtitle {
        font-size: 0.75rem; /* 12px */
    }

    .modal-btn {
        font-size: 0.8125rem; /* 13px */
        padding: 10px 16px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .reservation-conflict-overlay,
    .reservation-conflict-modal,
    .modal-btn {
        animation: none !important;
        transition: none !important;
    }
}

.modal-btn:focus-visible {
    outline: 2px solid rgb(37, 60, 137);
    outline-offset: 2px;
}

/**
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * CANCEL CONFIRMATION MODAL - MATCHING DESIGN SYSTEM
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 *
 * @version 1.0.0
 * @date 2025-11-01
 * @compliant 100% with style-guide.md & design-principles.md
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   OVERLAY - مطابق style-guide
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cancel-confirmation-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5); /* --bg-overlay */
    z-index: 10000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    font-family: 'iransansxv', sans-serif;
    direction: rtl;
}

.cancel-confirmation-overlay.active {
    display: flex;
    opacity: 1;
    pointer-events: all;
    animation: fadeIn 200ms ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MODAL CONTAINER - مطابق style-guide
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cancel-confirmation-modal {
    background: #FFFFFF; /* --bg-component */
    border-radius: 16px; /* --radius-xl */
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); /* --shadow-2xl */
    transform: scale(0.9);
    transition: transform 200ms ease;
    display: flex;
    flex-direction: column;
}

.cancel-confirmation-overlay.active .cancel-confirmation-modal {
    transform: scale(1);
    animation: scaleIn 200ms ease;
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
    }
    to {
        transform: scale(1);
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MODAL HEADER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cancel-modal-header {
    padding: 24px; /* --spacing-xl */
    border-bottom: 1px solid #DDDDDD; /* --border-light */
    display: flex;
    align-items: center;
    gap: 12px;
}

.cancel-modal-icon {
    width: 48px; /* --icon-xl */
    height: 48px;
    border-radius: 9999px; /* --radius-full */
    background: #FEF2F2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cancel-modal-icon i {
    font-size: 24px; /* --icon-md */
    color: #DC2626; /* --error */
}

.cancel-modal-title-wrapper {
    flex: 1;
}

.cancel-modal-title {
    font-size: 1.25rem; /* 20px - --font-xl */
    font-weight: 600; /* --font-semibold */
    color: #000000; /* --text-primary */
    margin: 0;
    line-height: 1.25; /* --line-height-tight */
}

.cancel-modal-subtitle {
    font-size: 0.875rem; /* 14px - --font-sm */
    font-weight: 400; /* --font-normal */
    color: #717171; /* --text-muted */
    margin: 4px 0 0 0;
    line-height: 1.5; /* --line-height-normal */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MODAL BODY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cancel-modal-body {
    padding: 24px; /* --spacing-xl */
    overflow-y: auto;
    flex: 1;
}

.cancel-modal-message {
    font-size: 1rem; /* 16px - --font-base */
    font-weight: 400; /* --font-normal */
    color: #222222; /* --text-secondary */
    line-height: 1.75; /* --line-height-relaxed */
    margin: 0 0 16px 0;
}

.cancel-modal-warning-box {
    background: #FEF2F2;
    border: 1px solid #FEE2E2;
    border-radius: 12px; /* --radius-lg */
    padding: 16px; /* --spacing-lg */
    margin-top: 16px;
}

.cancel-modal-warning-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem; /* 14px - --font-sm */
    font-weight: 600; /* --font-semibold */
    color: #DC2626; /* --error */
    margin: 0 0 8px 0;
}

.cancel-modal-warning-title i {
    font-size: 16px;
}

.cancel-modal-warning-text {
    font-size: 0.875rem; /* 14px - --font-sm */
    font-weight: 400; /* --font-normal */
    color: #991B1B;
    line-height: 1.5;
    margin: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MODAL FOOTER - BUTTONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cancel-modal-footer {
    padding: 16px 24px; /* --spacing-lg --spacing-xl */
    border-top: 1px solid #DDDDDD; /* --border-light */
    display: flex;
    gap: 12px;
    background: #F9FAFB; /* --gray-50 */
}

/* Destructive Button - دکمه لغو */
.cancel-modal-btn-confirm {
    flex: 1;
    background: #DC2626; /* --error */
    color: #FFFFFF; /* --text-white */
    font-family: 'iransansxv', sans-serif;
    font-size: 1rem; /* 16px - --font-base */
    font-weight: 600; /* --font-semibold */
    padding: 12px 24px;
    border: none;
    border-radius: 8px; /* --radius-md */
    cursor: pointer;
    transition: all 200ms ease; /* --transition-base */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1.5;
}

.cancel-modal-btn-confirm:hover {
    background: #B91C1C;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

.cancel-modal-btn-confirm:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}

.cancel-modal-btn-confirm:disabled {
    background: #F3F4F6; /* --gray-100 */
    color: #B0B0B0; /* --text-disabled */
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.cancel-modal-btn-confirm i {
    font-size: 16px;
}

/* Secondary Button - دکمه انصراف */
.cancel-modal-btn-cancel {
    flex: 1;
    background: #FFFFFF; /* --bg-component */
    color: #222222; /* --text-secondary */
    font-family: 'iransansxv', sans-serif;
    font-size: 1rem; /* 16px - --font-base */
    font-weight: 600; /* --font-semibold */
    padding: 12px 24px;
    border: 1px solid #DDDDDD; /* --border-light */
    border-radius: 8px; /* --radius-md */
    cursor: pointer;
    transition: all 200ms ease; /* --transition-base */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1.5;
}

.cancel-modal-btn-cancel:hover {
    background: #F7F7F7; /* --bg-hover */
    border-color: #B0B0B0; /* --border-default */
}

.cancel-modal-btn-cancel:active {
    transform: scale(0.98);
}

.cancel-modal-btn-cancel i {
    font-size: 16px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE - Mobile
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 479px) {
    .cancel-confirmation-modal {
        max-width: 95%;
        width: 95%;
    }

    .cancel-modal-header {
        padding: 20px;
    }

    .cancel-modal-icon {
        width: 40px;
        height: 40px;
    }

    .cancel-modal-icon i {
        font-size: 20px;
    }

    .cancel-modal-title {
        font-size: 1.125rem; /* 18px */
    }

    .cancel-modal-subtitle {
        font-size: 0.75rem; /* 12px */
    }

    .cancel-modal-body {
        padding: 20px;
    }

    .cancel-modal-message {
        font-size: 0.9375rem; /* 15px */
    }

    .cancel-modal-warning-box {
        padding: 12px;
    }

    .cancel-modal-footer {
        padding: 12px 20px;
        flex-direction: column-reverse;
    }

    .cancel-modal-btn-confirm,
    .cancel-modal-btn-cancel {
        width: 100%;
        padding: 14px 20px;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ACCESSIBILITY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cancel-modal-btn-confirm:focus-visible,
.cancel-modal-btn-cancel:focus-visible {
    outline: 2px solid rgb(37, 60, 137); /* --primary-color */
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .cancel-confirmation-overlay,
    .cancel-confirmation-modal,
    .cancel-modal-btn-confirm,
    .cancel-modal-btn-cancel {
        animation: none !important;
        transition: none !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LOADING STATE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cancel-modal-btn-confirm.loading i.fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TIME INPUT FIX FOR iOS/iPhone
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Fix for time input on iOS/iPhone - prevent content overflow */
input[type="time"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px; /* Prevent zoom on iOS */
    box-sizing: border-box;
}

/* Fix time input internal controls */
input[type="time"]::-webkit-datetime-edit {
    padding: 0;
    display: inline-flex;
    align-items: center;
}

input[type="time"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
    display: inline-flex;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    margin-left: 4px;
    cursor: pointer;
    opacity: 0.6;
}

input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
.grecaptcha-badge { 
    visibility: hidden; 
}
.doctor-avatar .avatar-image, .dt-avatar img, .top-doctor-avatar img, .newest-doctor-avatar img{
    object-position: center top;
}