/**
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * UNIFIED DOCTOR SEARCH PAGE - STYLE GUIDE COMPLIANT
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 
 * Original inline CSS extracted and converted to use CSS variables
 * Based on: style-guide.md + design-principles.md
 * 
 * @version 2.1.0
 * @date 2025-11-01
 * @changelog Fixed countdown bar overlap with sticky filters
 */

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

/* ═══════════════════════════════════════════════════════════════
   Unified Search Styles
   ═══════════════════════════════════════════════════════════════ */

/* Base Styles */
.unified-search-page {
    background: var(--bg-primary, #eff1f3);
    min-height: 100vh;
    font-size: 14px;
    color: #394959;
    direction: rtl;
    text-align: start;
    /* فاصله از بالا برای header - mobile: 64px */
}

/* Header Section */
.search-header {
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Z-index کمتر از header dropdown ها (10002) ولی بالاتر از محتوای عادی */
    /* این مقدار اطمینان می‌دهد که notification-dropdown بالای این sticky section نمایش داده می‌شود */
    z-index: 100;
    /* Smooth transition برای تغییر top position */
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* وقتی هدر اصلی hidden است، filter section به top می‌رود */
.search-header.header-hidden {
    top: 0 !important;
}

/* اگر countdown bar وجود دارد، حتی در حالت hidden باید زیر countdown باشد */
body.has-countdown-bar .search-header.header-hidden {
    /* ارتفاع countdown bar در mobile = 56px */
    top: 56px !important;
}

@media (min-width: 992px) {
    body.has-countdown-bar .search-header.header-hidden {
        /* ارتفاع countdown bar در desktop = 64px */
        top: 64px !important;
    }
}

/* وقتی هدر اصلی visible است، filter section زیر آن قرار می‌گیرد */
.search-header.header-visible {
    /* ارتفاع header در mobile = 64px */
    top: 64px;
}

/* اگر countdown bar وجود دارد، فاصله بیشتر */
body.has-countdown-bar .search-header.header-visible {
    /* ارتفاع header (64px) + countdown bar (56px) در mobile */
    top: 120px;
}

/* Desktop: ارتفاع header = 72px */
@media (min-width: 992px) {
    .search-header.header-visible {
        top: 72px;
    }

    /* Desktop با countdown bar */
    body.has-countdown-bar .search-header.header-visible {
        /* ارتفاع header (72px) + countdown bar (64px) */
        top: 136px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Filter & Sort Action Buttons - Text Style (بدون حالت دکمه)
   ═══════════════════════════════════════════════════════════════ */

.filter-sort-actions {
    background: transparent;
    padding: 0;
}

/* Container برای دکمه‌ها با خط جداکننده */
.filter-sort-actions > div {
    position: relative;
}

.btn-action-primary,
.btn-action-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px; /* padding کمتر برای text style */
    border-radius: 0; /* حذف border-radius */
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    border: none; /* حذف border */
    background: transparent; /* حذف background */
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    flex: 1;
    min-width: 90px;
    font-family: var(--font-primary);
    box-shadow: none; /* حذف shadow */
}

/* حالت hover - فقط تغییر رنگ */
.btn-action-primary:hover,
.btn-action-secondary:hover {
    color: var(--text-secondary);
    background: transparent; /* حفظ transparent */
}

/* حالت active - فقط تغییر رنگ */
.btn-action-primary:active,
.btn-action-secondary:active {
    color: var(--text-muted);
    transform: none; /* حذف translateY */
}

/* خط جداکننده عمودی بین دکمه‌ها */
.btn-action-secondary::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 20px; /* ارتفاع ناقص (کمتر از ارتفاع کامل دکمه) */
    width: 1px;
    background: var(--border-light);
}

.action-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

.filter-badge {
    background: var(--primary-color, rgb(37, 60, 137));
    color: white;
    border-radius: 10px;
    padding: 1px 5px; /* کاهش از 2px 7px */
    font-size: 10px; /* کاهش از 11px */
    font-weight: 600;
    min-width: 16px; /* کاهش از 18px */
    text-align: center;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   Filter Sidebar
   ═══════════════════════════════════════════════════════════════ */

.filter-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.filter-sidebar.active {
    pointer-events: all;
    opacity: 1;
}

.filter-sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.filter-sidebar.active .filter-sidebar-overlay {
    opacity: 1;
}

.filter-sidebar-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 90%;
    height: 100%;
    background: white;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-sidebar.active .filter-sidebar-content {
    transform: translateX(0);
}

/* Sidebar Header */
.filter-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #eaecf0;
    background: white;
}

.filter-sidebar-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.filter-sidebar-icon {
    width: 24px;
    height: 24px;
    stroke: var(--primary-color, rgb(37, 60, 137));
    fill: none;
}

.filter-sidebar-close {
    background: var(--gray-100);
    border: none;
    border-radius: var(--radius-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-base);
}

.filter-sidebar-close:hover {
    background: var(--gray-200);
}

.filter-sidebar-close svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-muted);
    fill: none;
}

/* Sidebar Body */
.filter-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.filter-group {
    margin-bottom: 24px;
}

.filter-label {
    display: block;
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.filter-select-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-component);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-base);
}

.filter-select-btn:hover {
    border-color: var(--primary-color);
    background: var(--bg-hover);
}

.filter-select-text {
    flex: 1;
    text-align: right;
}

.filter-select-arrow,
.filter-select-close {
    width: 20px;
    height: 20px;
    stroke: var(--text-muted);
    fill: none;
    margin-right: var(--spacing-sm);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sidebar Footer */
.filter-sidebar-footer {
    padding: 16px 24px;
    border-top: 1px solid #eaecf0;
    background: white;
    display: flex;
    gap: 12px;
}

.btn-filter-clear {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--bg-component);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-base);
}

.btn-filter-clear:hover {
    background: var(--bg-hover);
    border-color: var(--border-default);
}

.btn-filter-apply {
    flex: 2;
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--primary-color);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: var(--text-white);
    cursor: pointer;
    transition: var(--transition-base);
}

.btn-filter-apply:hover {
    background: var(--primary-hover);
    box-shadow: var(--shadow-md);
    transform: scale(1.02);
}

/* Clear All Filters Button (Red) */
.btn-clear-all-filters {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-xl);
    background: #FEE;
    border: 1px solid #FCC;
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: var(--error);
    cursor: pointer;
    transition: var(--transition-base);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

/* Desktop version in header */
.desktop-filters-sticky .btn-clear-all-filters {
    flex: unset;
    padding: var(--spacing-sm) var(--spacing-lg);
}

.btn-clear-all-filters:hover {
    background: #FCC;
    border-color: var(--error);
    color: #B91C1C;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}

.btn-clear-all-filters:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(220, 38, 38, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   Sort Modal
   ═══════════════════════════════════════════════════════════════ */

.sort-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sort-modal.active {
    pointer-events: all;
    opacity: 1;
}

.sort-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sort-modal.active .sort-modal-overlay {
    opacity: 1;
}

.sort-modal-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 70vh;
    background: white;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sort-modal.active .sort-modal-content {
    transform: translateY(0);
}

/* Sort Modal Header */
.sort-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #eaecf0;
}

.sort-modal-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.sort-modal-icon {
    width: 24px;
    height: 24px;
    stroke: var(--primary-color, rgb(37, 60, 137));
    fill: none;
}

.sort-modal-close {
    background: var(--gray-100);
    border: none;
    border-radius: var(--radius-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-base);
}

.sort-modal-close:hover {
    background: var(--gray-200);
}

.sort-modal-close svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-muted);
    fill: none;
}

/* Sort Modal Body */
.sort-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 24px 24px;
}

.sort-option {
    margin-bottom: 8px;
}

.sort-option-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border: 2px solid #eaecf0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sort-option-label:hover {
    background: var(--bg-hover);
    border-color: var(--border-default);
}

.sort-option-input {
    display: none;
}

.sort-option-input:checked + .sort-option-text + .sort-option-check,
.sort-option-label:has(.sort-option-input:checked) {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.sort-option-input:checked ~ .sort-option-check {
    opacity: 1;
}

.sort-option-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sort-option-title {
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.sort-option-desc {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.sort-option-check {
    width: 24px;
    height: 24px;
    stroke: var(--primary-color, rgb(37, 60, 137));
    fill: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sort-option-input:checked ~ .sort-option-check {
    opacity: 1;
}

/* Sort Modal Footer */
.sort-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #eaecf0;
}

.btn-sort-apply {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--primary-color);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    color: var(--text-white);
    cursor: pointer;
    transition: var(--transition-base);
}

.btn-sort-apply:hover {
    background: var(--primary-hover);
    box-shadow: var(--shadow-md);
    transform: scale(1.02);
}

/* Active Filters Display - بهینه شده */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; /* کاهش از 8px */
    justify-content: flex-start;
    margin-top: 8px; /* کاهش از 12px */
    padding-top: 8px; /* کاهش از 12px */
    border-top: 1px solid #f0f0f0;
}

/* پیش‌فرض hidden - جلوگیری از CLS */
/* JavaScript باید d-none را حذف کند وقتی فیلتر اضافه می‌شود */

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px; /* کاهش از 8px */
    padding: 4px 10px; /* کاهش از 8px 16px */
    background: var(--gray-100);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    font-size: 12px; /* کاهش از 14px */
    color: var(--text-secondary);
    font-weight: var(--font-medium);
    transition: var(--transition-fast);
}

.filter-tag:hover {
    background: var(--gray-200);
    border-color: var(--border-default);
}

.filter-tag-remove {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    margin-right: -4px;
}

.filter-tag-remove:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #333;
}

.filter-tag-remove svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
}

/* ═══════════════════════════════════════════════════════════════
   Responsive - Mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .filter-sidebar-content {
        width: 100%;
        max-width: 100%;
    }

    .btn-action-primary,
    .btn-action-secondary {
        padding: 6px 10px; /* کاهش بیشتر برای mobile - text style */
        font-size: 13px;
    }

    .action-icon {
        width: 15px;
        height: 15px;
    }

    /* خط جداکننده کوچک‌تر در mobile */
    .btn-action-secondary::before {
        height: 16px;
    }

    .sort-modal-content {
        max-height: 80vh;
    }
}

/* Desktop - Sort Modal becomes dropdown */
@media (min-width: 769px) {
    .sort-modal-content {
        position: fixed;
        top: auto;
        bottom: auto;
        left: 50%;
        transform: translate(-50%, -20px);
        opacity: 0;
        width: 400px;
        max-width: 100%;
        border-radius: 16px;
        max-height: 500px;
    }

    .sort-modal.active .sort-modal-content {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Desktop 3-Column Layout
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
    .desktop-grid-container {
        display: grid;
        grid-template-columns: 1fr 2.5fr;
        gap: 24px;
        max-width: 90%;
        margin: 0 auto;
        padding: 24px 0px;
        background: var(--bg-primary, #eff1f3);
        min-height: 100vh;
    }

    /* Right Column: Filters (Always Visible) */
    .desktop-filters-column {
        position: relative;
    }

    .desktop-filters-sticky {
        position: sticky;
        top: 24px;
        background: white;
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        /* Z-index کمتر از header dropdown ها (10002) */
        z-index: 100;
        /* Smooth transition برای تغییر top position */
        transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* وقتی هدر اصلی hidden است */
    .desktop-filters-sticky.header-hidden {
        top: 24px;
    }

    /* وقتی هدر اصلی visible است */
    .desktop-filters-sticky.header-visible {
        top: 24px;
    }

    /* اگر countdown bar وجود دارد - هدر hidden */
    body.has-countdown-bar .desktop-filters-sticky.header-hidden {
        /* countdown bar (64px) + فاصله (24px) */
        top: 88px;
    }

    /* اگر countdown bar وجود دارد - هدر visible */
    body.has-countdown-bar .desktop-filters-sticky.header-visible {
        /* ارتفاع header (72px) + countdown bar (64px) + فاصله (24px) */
        top: 160px;
    }

    .desktop-filters-sticky .filter-sidebar-header {
        padding: 20px 24px;
        border-bottom: 1px solid #eaecf0;
        background: white;
    }

    .desktop-filters-sticky .filter-sidebar-body {
        padding: 24px;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
    }

    /* با countdown bar - ارتفاع کمتر */
    body.has-countdown-bar .desktop-filters-sticky .filter-sidebar-body {
        max-height: calc(100vh - 214px); /* 150px + 64px countdown */
    }

    /* Middle Column: Results (Single Column) */
    .desktop-results-column {
        background: transparent;
    }

    /* Desktop Sort Bar (Horizontal) */
    .desktop-sort-bar {
        background: white;
        padding: 16px 20px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .desktop-sort-title {
        font-size: 14px;
        font-weight: 600;
        color: #344054;
        white-space: nowrap;
    }

    .desktop-sort-options {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        flex: 1;
    }

    .desktop-sort-btn {
        padding: 8px 16px;
        background: #f2f4f7;
        border: 2px solid #eaecf0;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        color: #344054;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .desktop-sort-btn:hover {
        background: #e6e9ec;
        border-color: #d0d5dd;
    }

    .desktop-sort-btn.active {
        background: #ecf2ff;
        border-color: var(--primary-color, rgb(37, 60, 137));
        color: var(--primary-color, rgb(37, 60, 137));
        font-weight: 600;
    }

    /* Doctor Cards - Single Column */
    .desktop-doctors-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .desktop-doctors-list .dt-doctor-card {
        width: 100%;
        max-width: 100%;
    }

    /* Left Column: Empty Space */
    .desktop-empty-column {
        /* Just empty space for visual balance */
    }

    /* Hide mobile sidebar on desktop */
    .filter-sidebar {
        display: none !important;
    }
}

/* Service Type Tabs - Always Horizontal (Mobile & Desktop) */
.service-type-tabs {
    display: flex;
    flex-direction: row; /* Horizontal for all screens */
    gap: 8px;
    flex-wrap: wrap; /* Allow wrapping */
}

.service-type-btn {
    display: flex;
    align-items: center;
    justify-content: center; /* Center content */
    gap: 8px;
    padding: 12px 14px;
    background: white;
    border: 2px solid #eaecf0;
    border-radius: 12px;
    color: #344054;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1; /* Equal width */
    min-width: fit-content; /* Prevent too narrow */
    text-align: center;
}

/* Slightly larger on bigger screens */
@media (min-width: 768px) {
    .service-type-btn {
        font-size: 14px;
        padding: 14px 16px;
    }
}

.service-type-btn:hover {
    border-color: #d0d5dd;
    background: #f8f9fa;
}

.service-type-btn.active {
    background: #ecf2ff;
    border-color: var(--primary-color, rgb(37, 60, 137));
    color: var(--primary-color, rgb(37, 60, 137));
}

.service-type-btn i {
    font-size: 16px;
}

/* Filter Buttons */
.btn-filter {
    background: white;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    padding: 10px 16px;
    text-align: right;
    color: #344054;
    transition: all 0.2s ease;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-filter:hover {
    border-color: var(--primary-color, rgb(37, 60, 137));
    color: var(--primary-color, rgb(37, 60, 137));
    background: #f8f9fa;
}

.btn-filter:active {
    border-color: var(--primary-color, rgb(37, 60, 137));
    background: #ecf2ff;
}

.btn-filter i {
    margin-left: 8px;
    font-size: 12px;
}

/* Advanced Filters */
.advanced-filters {
    padding-top: 12px;
    border-top: 1px solid #eaecf0;
}

.form-check-label {
    font-size: 13px;
    color: #667085;
    cursor: pointer;
}

.form-select-sm {
    font-size: 13px;
    border-color: #eaecf0;
    border-radius: 6px;
    color: #344054;
}

/* Results Section */
.search-results-section {
    padding: 20px 0;
}

.results-title {
    font-size: 20px;
    font-weight: 600;
    color: #394959;
    margin-bottom: 20px;
}

.dt-search-results-section {
    padding: 24px 0;
    background: var(--bg-primary, #eff1f3);
}

.dt-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
}

.dt-results-header {
    margin-bottom: 24px;
}

.dt-results-title {
    font-size: 20px;
    font-weight: 600;
    color: #101828;
    margin: 0;
}

.dt-doctors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

@media (max-width: 768px) {
    .dt-doctors-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dt-results-title {
        font-size: 18px;
    }

    .dt-container {
        padding: 0 12px;
    }

    .dt-search-results-section {
        padding: 16px 0;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .dt-doctors-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) and (max-width: 1400px) {
    .dt-doctors-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1401px) {
    .dt-doctors-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Modal Styles - Higher z-index than filter sidebar */
.modal.fade {
    z-index: 10050 !important;
}

.modal-backdrop {
    z-index: 10049 !important;
}

.modal-content {
    border-radius: 12px;
    border: 1px solid #eaecf0;
}

.modal-header {
    border-bottom: 1px solid #eaecf0;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #394959;
    margin: 0;
}

/* Bootstrap close button - Make it visible */
.btn-close {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23667085'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: none;
    border-radius: 6px;
    opacity: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close:hover {
    background-color: #f2f4f7;
    opacity: 1;
}

.btn-close:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(65, 134, 255, 0.2);
}

.modal-body {
    padding: 20px;
}

.modal-body .form-control {
    border-radius: 8px;
    border: 1px solid #eaecf0;
    padding: 10px 12px;
    font-size: 14px;
}

/* Fix Modal Height: Keep fixed height during search */
.modal-body .list-group {
    min-height: 300px;
    max-height: 400px;
    overflow-y: auto;
}

.modal-body .list-group-item {
    cursor: pointer;
    transition: background 0.2s ease;
    border: none;
    border-bottom: 1px solid #eaecf0;
    padding: 12px 16px;
    font-size: 14px;
    color: #344054;
}

.modal-body .list-group-item:hover {
    background: #f8f9fa;
    color: var(--primary-color, rgb(37, 60, 137));
}

.modal-body .list-group-item:last-child {
    border-bottom: none;
}

/* Responsive Design - Tablet */
@media (max-width: 991px) {
    .results-title {
        font-size: 18px;
    }
    .filter-sidebar {
        height: 100%;
    }
}

/* Responsive Design - Mobile (Standard) */
@media (max-width: 575px) {
    .unified-search-page {
        font-size: 13px;
    }

    .search-header {
        padding: 12px 0 !important;
    }

    .btn-filter {
        font-size: 12px;
        padding: 8px 12px;
    }

    .btn-filter i {
        font-size: 11px;
        margin-left: 6px;
    }

    .results-title {
        font-size: 16px;
    }

    .advanced-filters {
        font-size: 12px;
    }

    .form-check-label {
        font-size: 12px;
    }

    .btn-action-primary,
    .btn-action-secondary {
        padding: 6px 10px;
        font-size: 13px;
        min-width: 80px;
    }

    .action-icon {
        width: 14px;
        height: 14px;
    }

    .filter-badge {
        font-size: 9px;
        padding: 1px 4px;
        min-width: 14px;
    }
}

/* Small Mobile (under 375px) */
@media (max-width: 374px) {
    .unified-search-page {
        font-size: 12px;
    }

    .search-header {
        padding: 10px 0 !important;
    }

    .btn-filter {
        font-size: 11px;
        padding: 6px 10px;
    }

    .btn-filter i {
        font-size: 10px;
        margin-left: 4px;
    }

    .results-title {
        font-size: 15px;
    }

    .btn-action-primary,
    .btn-action-secondary {
        padding: 5px 8px;
        font-size: 12px;
        min-width: 70px;
        gap: 4px;
    }

    .action-icon {
        width: 13px;
        height: 13px;
    }

    .filter-badge {
        font-size: 8px;
        padding: 0px 3px;
        min-width: 12px;
    }

    .filter-sidebar-content {
        width: 100%;
        max-width: 100%;
    }
}

/* Extra Small Mobile (under 340px) */
@media (max-width: 339px) {
    .unified-search-page {
        font-size: 11px;
    }

    .search-header {
        padding: 8px 0 !important;
    }

    .btn-filter {
        font-size: 10px;
        padding: 5px 8px;
    }

    .btn-filter i {
        font-size: 9px;
        margin-left: 3px;
    }

    .results-title {
        font-size: 14px;
    }

    .btn-action-primary,
    .btn-action-secondary {
        padding: 4px 6px;
        font-size: 11px;
        min-width: 60px;
        gap: 3px;
    }

    .action-icon {
        width: 12px;
        height: 12px;
    }

    .filter-badge {
        font-size: 7px;
        padding: 0px 2px;
        min-width: 10px;
    }

    /* Doctor Cards - تنظیمات برای صفحات خیلی کوچک */
    .dt-doctor-card {
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
        margin-left: 0;
        margin-right: 0;
    }

    .dt-avatar {
        width: 48px;
        min-width: 48px;
        max-width: 48px;
        height: 48px;
        min-height: 48px;
        max-height: 48px;
    }

    .dt-doctor-info {
        margin-right: var(--spacing-sm);
        flex: 1;
        min-width: 0;
    }

    .dt-doctor-name {
        font-size: var(--font-xs);
    }

    .dt-doctor-specialty {
        font-size: 11px;
        max-width: 100%;
    }

    .dt-card-top {
        padding-bottom: 6px;
    }

    .dt-card-body {
        padding-top: 6px;
    }

    .dt-badges-row {
        margin-bottom: 6px;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .dt-badge {
        font-size: 10px;
        padding: 2px 6px;
    }

    /* Container padding کمتر */
    .container,
    .container-fluid {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }

    /* Results container */
    .results-container,
    .doctors-list {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Ultra Small Mobile (under 320px) - برای 315px */
@media (max-width: 319px) {
    .unified-search-page {
        font-size: 10px;
    }

    .dt-doctor-card {
        padding: var(--spacing-xs);
        margin-bottom: var(--spacing-sm);
        margin-left: 0;
        margin-right: 0;
        border-radius: var(--radius-sm);
    }

    .dt-avatar {
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        height: 40px;
        min-height: 40px;
        max-height: 40px;
    }

    .dt-doctor-info {
        margin-right: var(--spacing-xs);
        flex: 1;
        min-width: 0;
    }

    .dt-doctor-name {
        font-size: 11px;
    }

    .dt-doctor-specialty {
        font-size: 10px;
        max-width: 100%;
    }

    .dt-card-top {
        padding-bottom: 4px;
    }

    .dt-card-body {
        padding-top: 4px;
    }

    .dt-badges-row {
        margin-bottom: 4px;
        gap: 3px;
    }

    .dt-badge {
        font-size: 9px;
        padding: 1px 4px;
    }

    .btn-action-primary,
    .btn-action-secondary {
        padding: 3px 5px;
        font-size: 10px;
        min-width: 50px;
        gap: 2px;
    }

    .action-icon {
        width: 10px;
        height: 10px;
    }

    .filter-badge {
        font-size: 6px;
        padding: 0px 2px;
        min-width: 8px;
    }

    /* Container padding خیلی کم */
    .container,
    .container-fluid {
        padding-left: 4px;
        padding-right: 4px;
    }

    /* Results container */
    .results-container,
    .doctors-list {
        padding-left: 0;
        padding-right: 0;
    }

    .search-header {
        padding: 6px 0 !important;
    }

    .results-title {
        font-size: 13px;
    }

    /* Force all children to not overflow */
    .dt-doctor-card * {
        box-sizing: border-box;
        max-width: 100%;
    }
}

/* Skeleton Loader Styles */
.skeleton-card {
    border-radius: 8px;
    overflow: hidden;
}

.skeleton-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

.skeleton-text {
    height: 16px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 10px;
}

.skeleton-title {
    height: 20px;
    width: 70%;
}

.skeleton-subtitle {
    height: 16px;
    width: 50%;
}

.skeleton-line {
    height: 14px;
    width: 90%;
}

.skeleton-line-short {
    height: 14px;
    width: 60%;
}

.skeleton-price {
    height: 18px;
    width: 80px;
}

.skeleton-btn {
    height: 32px;
    width: 80px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

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



/* ═══════════════════════════════════════════════════════════════
   1. CSS Reset & Base Styles
   ═══════════════════════════════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}

/* html font-size moved to css-variables.css for consistency */

body {
    line-height: 1.75;
    margin: 0;
}

a,
a:hover,
a:focus,
a:active{
    color: #394959;
    text-decoration: none;
    background-color: transparent;
}

button,
button:hover,
button:active,
button:focus {
    outline: none;
    box-shadow: none;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: bold;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   2. Container System
   ═══════════════════════════════════════════════════════════════ */

.dt-container {
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}

@media (min-width: 576px) {
    .dt-container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .dt-container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .dt-container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .dt-container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .dt-container {
        max-width: 1360px;
    }
}

/* Special container for search page */
.dt-search-container {
    width: 100%;
    padding: 0 16px;
    margin: 0 auto;
}

@media (min-width: 576px) {
    .dt-search-container {
        padding: 0;
    }
}

@media (min-width: 1400px) {
    .dt-search-container {
        max-width: 1128px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   3. Main Page Layout
   ═══════════════════════════════════════════════════════════════ */

.dt-search-page {
    background-color: #eff1f3;
    min-height: 100vh;
    position: relative;
}

.dt-main-flex {
    display: flex;
    flex-direction: column;
    padding-bottom: 30px;
}

@media (min-width: 992px) {
    .dt-main-flex {
        flex-direction: row;
    }
}

/* Left column - Main content */
.dt-main-content {
    flex: 2;
    overflow-x: hidden;
}

/* Right column - Sidebar/Filters */
.dt-sidebar {
    flex: 1;
    height: 100%;
    position: sticky;
    top: 56px;
    /* Z-index کمتر از header dropdown ها (10002) */
    z-index: 100;
    color: #1d2939;
}

@media (min-width: 992px) {
    .dt-sidebar {
        margin-left: 9px;
        background-color: white;
        border: 1px solid #eaecf0;
        border-radius: 12px;
        top: 90px;
        margin-top: 43px;
        max-width: 360px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   4. Doctor Card Component
   ═══════════════════════════════════════════════════════════════ */

.dt-doctor-card {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-component);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    position: relative;
    margin-bottom: var(--spacing-lg);
    transition: var(--transition-slow);
    font-family: var(--font-primary);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.dt-doctor-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

@media (min-width: 992px) {
    .dt-doctor-card {
        padding: var(--spacing-xl) var(--spacing-lg);
        box-shadow: var(--shadow-md);
    }
}

/* Card Top Section */
.dt-card-top {
    display: flex;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: var(--spacing-sm);
}

@media (min-width: 992px) {
    .dt-card-top {
        padding-bottom: var(--spacing-md);
    }
}

/* Doctor Avatar */
.dt-avatar-wrapper {
    position: relative;
}

.dt-avatar {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    position: relative;
    width: 64px;
    min-width: 64px;
    max-width: 64px;
    height: 64px;
    min-height: 64px;
    max-height: 64px;
}

@media (min-width: 768px) {
    .dt-avatar {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
        height: 100px;
        min-height: 100px;
        max-height: 100px;
    }
}

.dt-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

/* Online Indicator (Green dot) - مثل هدر */
.dt-online-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background: var(--secondary-color, #10b981);
    border: 2px solid white;
    border-radius: 50%;
    z-index: 2;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@media (min-width: 768px) {
    .dt-online-indicator {
        width: 14px;
        height: 14px;
        border-width: 3px;
    }
}

/* Pulse animation - مطابق با هدر */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.15);
    }
}

/* Doctor Info Section */
.dt-doctor-info {
    display: flex;
    flex-direction: column;
    margin-right: var(--spacing-md);
    overflow: hidden;
}

@media (min-width: 768px) {
    .dt-doctor-info {
        flex-grow: 1;
        max-width: 75%;
    }
}

@media (min-width: 992px) {
    .dt-doctor-info {
        margin-right: var(--spacing-lg);
        padding-bottom: var(--spacing-md);
    }
}

/* Doctor Name Link */
.dt-doctor-name-link {
    margin-bottom: var(--spacing-xs);
    text-decoration: none;
    cursor: pointer;
}

.dt-doctor-name-link:hover,
.dt-doctor-name-link:active,
.dt-doctor-name-link:focus {
    text-decoration: none;
}

@media (min-width: 992px) {
    .dt-doctor-name-link {
        margin-bottom: var(--spacing-sm);
    }
}

/* Doctor Name */
.dt-doctor-name {
    color: var(--text-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-bold);
    line-height: var(--line-height-normal);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media (min-width: 992px) {
    .dt-doctor-name {
        font-size: var(--font-base);
    }
}

/* Doctor Specialty */
.dt-doctor-specialty {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    line-height: var(--line-height-normal);
    max-width: 100%;
    margin-bottom: var(--spacing-xs);
}

@media (min-width: 992px) {
    .dt-doctor-specialty {
        font-size: var(--font-base);
        max-width: 100%;
        margin-bottom: var(--spacing-md);
    }
}

/* Card Body Section */
.dt-card-body {
    padding-top: var(--spacing-sm);
}

@media (min-width: 992px) {
    .dt-card-body {
        padding-top: var(--spacing-md);
    }
}

/* Badges Section */
.dt-badges-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

@media (min-width: 992px) {
    .dt-badges-row {
        margin-bottom: var(--spacing-md);
    }
}

.dt-badge {
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
    line-height: var(--line-height-normal);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

@media (min-width: 992px) {
    .dt-badge {
        font-size: var(--font-sm);
    }
}

/* Different badge colors */
.dt-badge-success {
    background: rgba(0, 166, 153, 0.1);
    color: var(--success);
}

.dt-badge-warning {
    background: rgba(255, 180, 0, 0.1);
    color: var(--warning);
}

.dt-badge-info {
    background: rgba(0, 132, 137, 0.1);
    color: var(--secondary-color);
}

.dt-badge-primary {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

/* Location Info */
.dt-location {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: var(--font-xs);
    font-weight: var(--font-normal);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-sm);
}

@media (min-width: 992px) {
    .dt-location {
        font-size: var(--font-sm);
        margin-bottom: var(--spacing-md);
    }
}

/* Stats Row */
.dt-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

@media (min-width: 992px) {
    .dt-stats-row {
        margin-bottom: var(--spacing-md);
    }
}

/* Services Row */
.dt-services-row {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.dt-service-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    overflow: hidden;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-light);
    background: var(--bg-component);
}

.dt-service-text {
    color: var(--text-secondary);
    font-size: var(--font-xs);
    font-weight: var(--font-medium);
    line-height: var(--line-height-normal);
    white-space: nowrap;
}

@media (min-width: 992px) {
    .dt-service-item {
        padding: var(--spacing-sm) var(--spacing-lg);
    }

    .dt-service-text {
        font-size: var(--font-sm);
    }
}

/* ═══════════════════════════════════════════════════════════════
   CARD FOOTER - NEW 3-BUTTON LAYOUT
   ═══════════════════════════════════════════════════════════════ */

.dt-card-footer {
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-md);
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

@media (min-width: 992px) {
    .dt-card-footer {
        padding-top: var(--spacing-lg);
        margin-top: var(--spacing-lg);
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
    }
}

/* View Profile Desktop Link (next to doctor name) */
.dt-view-profile-desktop {
    display: none;
}

@media (min-width: 992px) {
    .dt-view-profile-desktop {
        display: block;
        margin-right: auto;
    }

    .dt-link-view-profile {
        font-family: var(--font-primary);
        font-size: var(--font-sm);
        font-weight: var(--font-medium);
        color: var(--primary-color);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        transition: var(--transition-base);
    }

    .dt-link-view-profile:hover {
        color: var(--text-primary);
        text-decoration: none;
    }

    .dt-link-view-profile i {
        font-size: var(--font-xs);
    }
}

/* Mobile Profile Button (Full Width) */
.dt-mobile-profile-btn {
    display: block;
    width: 100%;
    order: -1; /* اطمینان از اینکه اول نمایش داده شود */
}

.dt-mobile-profile-btn .dt-btn {
    width: 100%;
}

/* Mobile only - force mobile styles */
@media (max-width: 991px) {
    .dt-mobile-profile-btn {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .dt-mobile-profile-btn {
        display: none !important;
    }
}

/* Action Buttons Container */
.dt-action-buttons {
    display: flex;
    gap: var(--spacing-md);
    width: 100%;
    flex-shrink: 0;
}

/* Mobile only - force mobile styles */
@media (max-width: 991px) {
    .dt-action-buttons {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        justify-content: stretch !important;
        gap: var(--spacing-md) !important;
    }
}

/* When both buttons exist - 50/50 split in mobile */
.dt-action-buttons .dt-btn:only-child {
    width: 100%;
}

.dt-action-buttons .dt-btn:not(:only-child) {
    flex: 1;
    min-width: 0;
}

/* Mobile - ensure correct styling */
@media (max-width: 991px) {
    .dt-action-buttons .dt-btn {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: auto !important;
        font-size: var(--font-sm) !important;
        padding: var(--spacing-sm) var(--spacing-md) !important;
    }

    .dt-action-buttons .dt-btn:only-child {
        width: 100% !important;
    }
}

@media (min-width: 992px) {
    .dt-action-buttons {
        width: auto;
        justify-content: flex-end;
        gap: var(--spacing-md);
        direction: rtl;
        flex-shrink: 0;
    }

    .dt-action-buttons .dt-btn {
        width: auto !important;
        flex: 0 0 auto !important;
        min-width: 180px;
    }

    /* ترتیب دکمه‌ها: نوبت مطب سمت چپ‌تر، مشاوره آنلاین سمت راست‌تر */
    .dt-action-buttons .dt-btn-clinic {
        order: 2; /* چپ */
    }

    .dt-action-buttons .dt-btn-online {
        order: 1; /* راست */
    }
}

.dt-price-text {
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    white-space: nowrap;
}

@media (min-width: 992px) {
    .dt-price-text {
        font-size: var(--font-lg);
    }
}

/* Button Styling - بهبود یافته */
.dt-btn {
    transition: var(--transition-base);
    text-decoration: none;
    user-select: none;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: var(--line-height-normal);
    font-weight: var(--font-semibold);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: var(--font-primary);
    min-width: 100px;
}

@media (min-width: 992px) {
    .dt-btn {
        font-size: var(--font-base);
        padding: var(--spacing-md) var(--spacing-xl);
        min-width: 120px;
    }
}

.dt-btn:not(:disabled):not([disabled]):active {
    transform: translateY(1px);
}

.dt-btn i {
    margin-left: var(--spacing-xs);
    font-size: var(--font-sm);
}

/* Primary Button - طبق Style Guide */
.dt-btn-primary {
    background: linear-gradient(135deg, rgb(37, 60, 137) 0%, rgb(45, 75, 170) 100%);
    color: var(--text-white);
    border: none;
    box-shadow: var(--shadow-sm);
}

.dt-btn-primary:hover {
    background: linear-gradient(135deg, rgb(30, 48, 110) 0%, rgb(37, 60, 137) 100%);
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
    color: var(--text-white);
}

.dt-btn-primary:visited {
    color: var(--text-white);
}

.dt-btn-primary:active {
    transform: translateY(1px);
    box-shadow: var(--shadow-xs);
}

/* Secondary Button - طبق Style Guide */
.dt-btn-secondary {
    background: var(--bg-component);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    box-shadow: none;
}

.dt-btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--text-primary);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}

.dt-btn-secondary:visited {
    color: var(--text-primary);
}

.dt-btn-secondary:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* Outline Button - طبق Style Guide */
.dt-btn-outline {
    background-color: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.dt-btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--text-white);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.dt-btn-outline:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════
   Icon Colors - بر اساس Style Guide
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   Stats Icons - Professional Colors
   ═══════════════════════════════════════════════════════════════
   رنگ‌های اختصاصی و حرفه‌ای برای آیکون‌های آمار در کارت دکتر

   نکته مهم: برای SVG با <use> باید از color استفاده شود
   زیرا fill مستقیم روی <use> کار نمی‌کند
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Star Icon - Golden Yellow (برای امتیاز و رتبه) */
.dt-icon-star {
    color: #F59E0B !important; /* Amber-500 - رنگ طلایی برای ستاره */
}

/* Thumbs Up Icon - Green (برای پیشنهاد کاربران) */
.dt-icon-like {
    color: var(--secondary-color) !important; /* Emerald-500 - سبز برای پیشنهاد مثبت */
}

/* Check Circle Icon - Professional Teal (برای نوبت موفق) */
.dt-icon-check-success {
    color: var(--success) !important; /* Teal-600 - فیروزه‌ای حرفه‌ای برای موفقیت */
}

/* Legacy check icon - kept for backward compatibility */
.dt-icon-check {
    color: #0D9488 !important; /* Same as check-success */
}

/* Clock Filled Icon - Indigo/Purple (برای کمترین معطلی - نشان‌دهنده سرعت) */
.dt-icon-clock-fast {
    color: #6366F1 !important; /* Indigo-500 - بنفش آبی برای نشان دادن سرعت و کارایی */
}

/* Updated Date Icon - Slate Gray */
.dt-icon-updated {
    color: #64748B !important; /* Slate-500 - خاکستری آبی ملایم برای اطلاعات */
}

/* Badge Primary - Background color for minimum delay badge */
.dt-badge-primary .dt-icon-clock-fast {
    color: currentColor !important; /* از رنگ badge استفاده می‌کند */
}

/* ═══════════════════════════════════════════════════════════════
   Service Icons - Professional Colors
   ═══════════════════════════════════════════════════════════════ */

/* Location Icon - Gray */
.dt-icon-location {
    color: #6B7280 !important; /* Gray-500 - خاکستری برای آدرس */
}

/* Hospital/Clinic Icon - Primary Color */
.dt-icon-clinic {
    color: rgb(37, 60, 137) !important; /* Primary - رنگ اصلی برند برای ویزیت مطب */
}

/* Phone Icon - Blue + Flipped for RTL */
.dt-icon-phone {
    color: #3B82F6 !important; /* Blue-500 - آبی برای مشاوره تلفنی */
    transform: scaleX(-1); /* قرینه کردن برای نمایش درست در فارسی */
}

/* Comment/Text Icon - Teal */
.dt-icon-text {
    color: #14B8A6 !important; /* Teal-500 - فیروزه‌ای برای مشاوره متنی */
}

/* ═══════════════════════════════════════════════════════════════
   Badge Icons - Use badge color (currentColor)
   ═══════════════════════════════════════════════════════════════
   آیکون‌های داخل badge‌ها از رنگ badge استفاده می‌کنند
   و نیازی به رنگ اختصاصی ندارند */

/* Badge icons inherit color from parent badge */
.dt-badge .dt-icon {
    color: currentColor !important;
}

/* Ensure badge icons show properly */
.dt-badge-info .dt-icon,
.dt-badge-success .dt-icon,
.dt-badge-primary .dt-icon {
    color: currentColor !important;
}

/* ═══════════════════════════════════════════════════════════════
   Appointment & Additional Classes
   ═══════════════════════════════════════════════════════════════ */

.dt-appointment-label {
    color: var(--text-muted);
    font-size: var(--font-sm);
}

@media (min-width: 992px) {
    .dt-appointment-label {
        font-size: var(--font-base);
    }
}

.dt-appointment-time {
    color: var(--success);
    font-weight: var(--font-semibold);
    font-size: var(--font-sm);
}

@media (min-width: 992px) {
    .dt-appointment-time {
        font-size: var(--font-base);
    }
}

.dt-no-appointment {
    color: var(--text-disabled);
}

.dt-more-clinics-link {
    color: var(--primary-color);
}

/* Stats Secondary Text */
.dt-stat-secondary {
    color: var(--text-muted);
    font-weight: var(--font-normal);
}

/* ═══════════════════════════════════════════════════════════════
   5. Sidebar / Filter Panel
   ═══════════════════════════════════════════════════════════════ */

.dt-filter-header {
    display: none;
}

@media (min-width: 992px) {
    .dt-filter-header {
        border-bottom: 1px solid var(--border-light);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: var(--font-lg);
        font-weight: var(--font-bold);
        line-height: var(--line-height-normal);
        padding: var(--spacing-xl) var(--spacing-2xl);
        width: 360px;
    }
}

/* Service Type Tabs in Sidebar */
.dt-service-tabs {
    display: flex;
    user-select: none;
    width: 100%;
    padding: 0 var(--spacing-2xl);
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-xs);
    margin: 0 0 var(--spacing-sm);
}

@media (min-width: 992px) {
    .dt-service-tabs {
        margin: 0 0 var(--spacing-xs);
        justify-content: space-around;
    }
}

.dt-service-tab {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    background: var(--bg-component);
    font-size: var(--font-xs);
    font-weight: var(--font-medium);
    line-height: var(--line-height-relaxed);
    border-bottom: 2px solid transparent;
    padding: var(--spacing-md) var(--spacing-lg);
    transition: var(--transition-base);
}

.dt-service-tab.active {
    color: var(--text-primary);
    background: var(--primary-light);
    border-bottom-color: var(--primary-color);
}

@media (min-width: 992px) {
    .dt-service-tab {
        min-width: 90px;
        padding: var(--spacing-sm);
        font-weight: var(--font-normal);
    }
}

.dt-tab-subtitle {
    font-size: 11px;
    margin-top: var(--spacing-xs);
    text-align: center;
}

@media (min-width: 992px) {
    .dt-tab-subtitle {
        font-size: var(--font-xs);
    }
}

/* Filter Groups */
.dt-filter-content {
    display: none;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.dt-filter-content::-webkit-scrollbar {
    display: none;
}

@media (min-width: 992px) {
    .dt-filter-content {
        display: block;
        width: 360px;
    }
}

.dt-filters-scroll {
    display: flex;
    padding: 0 var(--spacing-lg);
    overflow-y: auto;
    position: relative;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    margin-bottom: 64px;
}

@media (min-width: 992px) {
    .dt-filters-scroll {
        -ms-overflow-style: none;
        scrollbar-width: none;
        margin-bottom: 0;
        justify-content: space-around;
        align-items: flex-start;
        padding: 0 var(--spacing-2xl) var(--spacing-2xl);
        max-height: calc(100vh - 170px);
    }

    .dt-filters-scroll::-webkit-scrollbar {
        display: none;
    }
}

.dt-filter-group {
    width: 100%;
    padding-top: 16px;
    padding-bottom: 16px;
}

.dt-filter-group:not(:last-child) {
    border-bottom: 1px solid #eaecf0;
}

.dt-filter-label {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 4px;
    color: #1d2939;
    display: inline-block;
}

/* Toggle Switch */
.dt-toggle-wrapper {
    position: relative;
    display: flex;
}

.dt-toggle-wrapper:hover label::after {
    box-shadow: inset 2px -2px 3px 2px #eee;
}

.dt-toggle-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 22px;
    border-radius: 15px;
    background: #d0d5dd;
    cursor: pointer;
}

.dt-toggle-label::after {
    content: "";
    display: block;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    margin: 3px;
    background: #ffffff;
    box-shadow: 0 0 4px 0 rgb(34 34 34 / 25%);
    transition: 0.2s;
}

.dt-toggle-input {
    opacity: 0;
    z-index: 1;
    border-radius: 15px;
    width: 40px;
    height: 22px;
    cursor: pointer;
}

.dt-toggle-input:checked + .dt-toggle-label {
    background: var(--primary-color);
}

.dt-toggle-input:checked + .dt-toggle-label::after {
    content: "";
    display: block;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    margin-right: 21px;
    transition: 0.2s;
}

.dt-toggle-text {
    font-size: 12px;
    font-weight: 500;
    line-height: 22px;
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 32px;
}

.dt-toggle-text > span {
    margin-right: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   Professional Gender Filter - Radio Button Style
   Based on design-principles.md & style-guide.md
   ═══════════════════════════════════════════════════════════════ */

/* Radio Label Container */
.dt-radio-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
    background: var(--bg-component, #FFFFFF);
    border: 2px solid var(--border-light, #DDDDDD);
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-primary, 'iransansxv');
    font-size: var(--font-base, 1rem);
    font-weight: var(--font-medium, 500);
    color: var(--text-secondary, #222222);
    cursor: pointer;
    transition: all var(--transition-base, 200ms ease);
    user-select: none;
    min-height: 52px;
    margin-bottom: 0;
    width: 100%;
}

/* Hover State */
.dt-radio-label:hover {
    background: var(--bg-hover, #F7F7F7);
    border-color: var(--primary-color, rgb(37, 60, 137));
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06));
}

/* Checked State */
.dt-radio-input:checked + .dt-radio-label,
.dt-radio-label:has(.dt-radio-input:checked) {
    background: var(--primary-light, rgb(229, 233, 244));
    border-color: var(--primary-color, rgb(37, 60, 137));
    color: var(--primary-color, rgb(37, 60, 137));
    font-weight: var(--font-semibold, 600);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05));
}

/* Active State */
.dt-radio-label:active {
    transform: translateY(0);
}

/* Label Text */
.dt-radio-label > span {
    flex: 1;
    text-align: right;
}

/* Radio Buttons - Hidden Native Input */
.dt-radio-input {
    --background: #ffffff;
    --text: #414856;
    --radio: var(--border-default, #B0B0B0);
    --radio-checked: var(--primary-color, rgb(37, 60, 137));
    --radio-size: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    height: var(--radio-size);
    width: var(--radio-size);
    outline: none;
    margin: 0;
    margin-right: var(--spacing-sm, 8px);
    margin-left: var(--spacing-sm, 8px);
    cursor: pointer;
    border: 2px solid var(--radio);
    background: var(--bg-component, #FFFFFF);
    border-radius: 50%;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: all 0.2s ease;
}

.dt-radio-input::before,
.dt-radio-input::after {
    content: "";
    display: flex;
    justify-self: center;
    border-radius: 50%;
}

.dt-radio-input::before {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--background);
    z-index: 1;
    opacity: var(--opacity, 1);
}

.dt-radio-input::after {
    position: relative;
    width: calc(100% / 2);
    height: calc(100% / 2);
    background: var(--radio-checked);
    top: var(--y, 100%);
    transition: top 0.3s cubic-bezier(0.48, 1.97, 0.5, 0.63);
    z-index: 2;
}

.dt-radio-input:checked {
    --radio: var(--radio-checked);
    background: var(--primary-color, rgb(37, 60, 137));
    border-color: var(--primary-color, rgb(37, 60, 137));
}

.dt-radio-input:checked::after {
    --y: 0%;
    background: var(--bg-component, #FFFFFF);
}

.dt-radio-input:checked::before {
    --opacity: 0;
}

.dt-radio-input:not(:checked)::before {
    --opacity: 1;
    transition: opacity 0s linear 0.3s;
}

/* Focus State for Accessibility */
.dt-radio-input:focus-visible {
    outline: 2px solid var(--primary-color, rgb(37, 60, 137));
    outline-offset: 2px;
}

/* Animation for Radio Check */
@keyframes radioCheck {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.dt-radio-input:checked::after {
    animation: radioCheck 0.3s ease;
}

/* Disabled State */
.dt-radio-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dt-radio-input:disabled + .dt-radio-label,
.dt-radio-label:has(.dt-radio-input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-disabled, rgb(249, 250, 251));
}

.dt-radio-input:disabled + .dt-radio-label:hover,
.dt-radio-label:has(.dt-radio-input:disabled):hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border-light, #DDDDDD);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .dt-radio-label,
    .dt-radio-input,
    .dt-radio-input::after {
        transition: none;
        animation: none;
    }

    .dt-radio-label:hover {
        transform: none;
    }
}

/* Mobile Optimization */
@media (max-width: 767px) {
    .dt-radio-label {
        padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
        min-height: 48px;
        font-size: var(--font-sm, 0.875rem);
    }

    .dt-radio-input {
        --radio-size: 18px;
    }

    /* Compact spacing between radio options on mobile */
    .dt-filter-group {
        padding-top: var(--spacing-sm, 8px);
        padding-bottom: var(--spacing-sm, 8px);
    }
}

/* Desktop Enhancement */
@media (min-width: 768px) {
    .dt-radio-label {
        padding: var(--spacing-lg, 16px) var(--spacing-xl, 24px);
        min-height: 56px;
    }

    /* More spacing on desktop */
    .dt-filter-group {
        padding-top: var(--spacing-md, 12px);
        padding-bottom: var(--spacing-md, 12px);
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .dt-radio-label {
        border-width: 3px;
    }

    .dt-radio-input {
        border-width: 3px;
    }

    .dt-radio-input:checked + .dt-radio-label,
    .dt-radio-label:has(.dt-radio-input:checked) {
        border-width: 3px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Professional Modal Buttons - Based on style-guide.md
   ═══════════════════════════════════════════════════════════════ */

/* Modal Footer Container */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-md, 12px);
    padding: var(--spacing-lg, 16px) var(--spacing-xl, 24px);
    border-top: 1px solid var(--border-light, #DDDDDD);
    background: var(--bg-component, #FFFFFF);
    border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
}

/* Primary Button (اعمال) */
.modal-footer .btn-primary,
.btn.btn-primary {
    background: linear-gradient(135deg, rgb(37, 60, 137) 0%, rgb(45, 75, 170) 100%);
    color: var(--text-white, #FFFFFF);
    font-family: var(--font-primary, 'iransansxv');
    font-size: var(--font-base, 1rem);
    font-weight: var(--font-semibold, 600);
    padding: var(--spacing-md, 12px) var(--spacing-xl, 24px);
    border: none;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: all var(--transition-base, 200ms ease);
    min-width: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

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

.modal-footer .btn-primary:active,
.btn.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.modal-footer .btn-primary:focus,
.btn.btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 60, 137, 0.2);
}

.modal-footer .btn-primary:disabled,
.btn.btn-primary:disabled {
    background: var(--bg-disabled, rgb(249, 250, 251));
    color: var(--text-disabled, #B0B0B0);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Secondary Button (لغو) */
.modal-footer .btn-secondary,
.btn.btn-secondary {
    background: var(--bg-component, #FFFFFF);
    color: var(--text-primary, #000000);
    font-family: var(--font-primary, 'iransansxv');
    font-size: var(--font-base, 1rem);
    font-weight: var(--font-semibold, 600);
    padding: var(--spacing-md, 12px) var(--spacing-xl, 24px);
    border: 2px solid var(--border-default, #B0B0B0);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: all var(--transition-base, 200ms ease);
    min-width: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal-footer .btn-secondary:hover,
.btn.btn-secondary:hover {
    background: var(--bg-hover, #F7F7F7);
    border-color: var(--text-primary, #000000);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal-footer .btn-secondary:active,
.btn.btn-secondary:active {
    transform: translateY(0);
    box-shadow: none;
}

.modal-footer .btn-secondary:focus,
.btn.btn-secondary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.modal-footer .btn-secondary:disabled,
.btn.btn-secondary:disabled {
    background: var(--bg-disabled, rgb(249, 250, 251));
    color: var(--text-disabled, #B0B0B0);
    border-color: var(--border-light, #DDDDDD);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Small Button Variant */
.btn-sm.btn-primary,
.btn-sm.btn-secondary {
    padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
    font-size: var(--font-sm, 0.875rem);
    min-width: 80px;
}

/* Icon in Button */
.btn i,
.btn svg {
    margin-left: var(--spacing-sm, 8px);
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .modal-footer {
        flex-direction: column-reverse;
        gap: var(--spacing-sm, 8px);
        padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
    }

    .modal-footer .btn-primary,
    .modal-footer .btn-secondary {
        width: 100%;
        min-width: unset;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Professional Map Modal - Enhanced Design
   ═══════════════════════════════════════════════════════════════ */

/* Map Modal Specific Styles */
#mapModal .modal-dialog {
    max-width: 90%;
    margin: var(--spacing-lg, 16px) auto;
}

#mapModal .modal-content {
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-light, #DDDDDD);
}

#mapModal .modal-header {
    padding: var(--spacing-lg, 16px) var(--spacing-xl, 24px);
    border-bottom: 1px solid var(--border-light, #DDDDDD);
    background: var(--bg-component, #FFFFFF);
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
}

#mapModal .modal-title {
    font-family: var(--font-primary, 'iransansxv');
    font-size: var(--font-lg, 1.125rem);
    font-weight: var(--font-semibold, 600);
    color: var(--text-primary, #000000);
    margin: 0;
}

#mapModal .modal-body {
    padding: var(--spacing-xl, 24px);
    background: var(--bg-component, #FFFFFF);
}

/* Map Container */
#mapContainer {
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05));
    border: 1px solid var(--border-light, #DDDDDD);
}

/* Current Location Button in Map Modal */
#getCurrentLocationBtn {
    background: var(--bg-component, #FFFFFF);
    color: var(--primary-color, rgb(37, 60, 137));
    border: 2px solid var(--primary-color, rgb(37, 60, 137));
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
    font-family: var(--font-primary, 'iransansxv');
    font-size: var(--font-sm, 0.875rem);
    font-weight: var(--font-medium, 500);
    cursor: pointer;
    transition: all var(--transition-base, 200ms ease);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
}

#getCurrentLocationBtn:hover {
    background: var(--primary-light, rgb(229, 233, 244));
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(37, 60, 137, 0.15);
}

#getCurrentLocationBtn:active {
    transform: translateY(0);
}

#getCurrentLocationBtn i {
    font-size: var(--font-base, 1rem);
    margin: 0;
}

/* Radius Slider Container */
#mapModal .modal-body .mt-2 {
    margin-top: var(--spacing-lg, 16px) !important;
    padding: var(--spacing-lg, 16px);
    background: var(--bg-primary, rgb(239, 241, 243));
    border-radius: var(--radius-md, 8px);
}

#mapModal .modal-body label {
    font-family: var(--font-primary, 'iransansxv');
    font-size: var(--font-sm, 0.875rem);
    font-weight: var(--font-medium, 500);
    color: var(--text-primary, #000000);
    display: block;
    margin-bottom: var(--spacing-sm, 8px);
}

/* Range Slider Styling with Dynamic Gradient */
.form-range {
    --range-progress: 10%; /* Default value, will be updated by JavaScript */
    width: 100%;
    height: 6px;
    background: linear-gradient(to left,
        rgb(37, 60, 137) 0%,
        rgb(37, 60, 137) var(--range-progress),
        #DDDDDD var(--range-progress),
        #DDDDDD 100%);
    border-radius: var(--radius-full, 9999px);
    outline: none;
    -webkit-appearance: none;
    margin: var(--spacing-md, 12px) 0;
}

/* Webkit (Chrome, Safari, Edge) - Slider Track */
.form-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: transparent; /* Transparent to show parent gradient */
    border-radius: var(--radius-full, 9999px);
}

/* Webkit - Slider Thumb */
.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-color, rgb(37, 60, 137));
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all var(--transition-base, 200ms ease);
    margin-top: -7px; /* (20px thumb - 6px track) / 2 */
    position: relative;
}

.form-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(37, 60, 137, 0.3);
}

/* Firefox - Slider Track (Background) */
.form-range::-moz-range-track {
    width: 100%;
    height: 6px;
    background: transparent; /* Make transparent so parent background shows through */
    border-radius: var(--radius-full, 9999px);
    border: none;
}

/* Firefox - Filled part of track (Native support) */
.form-range::-moz-range-progress {
    height: 6px;
    background: var(--primary-color, rgb(37, 60, 137));
    border-radius: var(--radius-full, 9999px);
}

/* Firefox - Slider Thumb */
.form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary-color, rgb(37, 60, 137));
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all var(--transition-base, 200ms ease);
}

.form-range::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(37, 60, 137, 0.3);
}

/* IE/Edge - Track and Fill */
.form-range::-ms-track {
    width: 100%;
    height: 6px;
    background: transparent;
    border-color: transparent;
    color: transparent;
    border-radius: var(--radius-full, 9999px);
}

.form-range::-ms-fill-lower {
    background: var(--primary-color, rgb(37, 60, 137));
    border-radius: var(--radius-full, 9999px);
}

.form-range::-ms-fill-upper {
    background: var(--border-light, #DDDDDD);
    border-radius: var(--radius-full, 9999px);
}

.form-range::-ms-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary-color, rgb(37, 60, 137));
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-top: 0;
}

.form-range::-ms-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(37, 60, 137, 0.3);
}

/* Radius Value Display */
#radiusValue {
    font-family: var(--font-primary, 'iransansxv');
    font-size: var(--font-lg, 1.125rem);
    font-weight: var(--font-semibold, 600);
    color: var(--primary-color, rgb(37, 60, 137));
}

/* Desktop Map Modal */
@media (min-width: 768px) {
    #mapModal .modal-dialog {
        max-width: 800px;
    }

    #mapContainer {
        height: 500px !important;
    }
}

/* Mobile Map Modal */
@media (max-width: 767px) {
    #mapModal .modal-dialog {
        max-width: 95%;
        margin: var(--spacing-sm, 8px) auto;
    }

    #mapModal .modal-header,
    #mapModal .modal-body {
        padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
    }

    #mapModal .modal-title {
        font-size: var(--font-base, 1rem);
    }

    #mapContainer {
        height: 300px !important;
    }

    #getCurrentLocationBtn {
        width: 100%;
        justify-content: center;
    }

    #mapModal .modal-body .mt-2 {
        padding: var(--spacing-md, 12px);
    }
}

/* ═══════════════════════════════════════════════════════════════
   6. Icons
   ═══════════════════════════════════════════════════════════════ */

.dt-icon {
    fill: currentColor;
    stroke: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dt-icon-xs {
    width: 12px;
    height: 12px;
    font-size: 12px;
}

.dt-icon-sm {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.dt-icon-md {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.dt-icon-lg {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.dt-icon-xl {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

/* Icon with specific colors - Updated to use 'color' for SVG <use> elements */
.dt-icon-star {
    color: #F59E0B !important; /* Amber-500 - Consistent golden color for ratings */
}

.dt-icon-success {
    color: #10B981 !important; /* Emerald-500 - Professional green for success */
}

.dt-icon-like {
    color: var(--secondary-color) !important; /* Same as success - for thumbs up */
}

.dt-icon-check-success {
    color: var(--success); /* Teal-600 - Professional teal for successful appointments */
}

.dt-icon-check {
    color: #0D9488 !important; /* Same as check-success */
}

.dt-icon-clock-fast {
    color: #6366F1 !important; /* Indigo-500 - Purple-blue for speed and efficiency */
}

.dt-icon-updated {
    color: #64748B !important; /* Slate-500 - Gray-blue for updated date */
}

.dt-badge-primary .dt-icon-clock-fast {
    color: currentColor !important;
}

.dt-icon-info {
    fill: #45CAF6;
    stroke: none;
}

.dt-icon-warning {
    fill: #F97066;
    stroke: none;
}

.dt-icon-primary {
    fill: var(--primary-color);
    stroke: none;
}

/* ═══════════════════════════════════════════════════════════════
   7. Breadcrumbs
   ═══════════════════════════════════════════════════════════════ */

.dt-breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    margin: 0;
    padding: 10px 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 12px;
    line-height: 22px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.dt-breadcrumb::-webkit-scrollbar {
    display: none;
}

.dt-breadcrumb-item {
    display: flex;
    align-items: center;
}

.dt-breadcrumb-item:first-child {
    padding-right: 10px;
}

.dt-breadcrumb-item:last-child {
    padding-left: 10px;
}

.dt-breadcrumb-item:last-child .dt-breadcrumb-link {
    font-weight: 500;
    color: #344054;
}

.dt-breadcrumb-item:last-child svg {
    display: none;
}

.dt-breadcrumb-link {
    display: flex;
    align-items: center;
    color: #98a2b3;
}

.dt-breadcrumb-link:hover {
    color: #344054;
}

/* ═══════════════════════════════════════════════════════════════
   8. Active Filters / Tags
   ═══════════════════════════════════════════════════════════════ */

.dt-active-filters {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 0 0;
}

@media (min-width: 992px) {
    .dt-active-filters {
        padding: 16px 0 8px;
        border-bottom: 1px solid #eaecf0;
    }
}

.dt-filter-tags {
    display: flex;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.dt-filter-tags::-webkit-scrollbar {
    display: none;
}

@media (min-width: 992px) {
    .dt-filter-tags {
        flex-wrap: wrap;
    }
}

.dt-filter-tag {
    color: #344054;
    background: #f2f4f7;
    border-radius: 100px;
    padding: 4px 12px 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 22px;
    cursor: pointer;
    margin-left: 8px;
    white-space: nowrap;
}

@media (min-width: 992px) {
    .dt-filter-tag {
        white-space: unset;
        text-align: right;
        margin-bottom: 8px;
    }
}

.dt-filter-tag-clear {
    color: #f04438;
    background-color: #fef3f2;
    border-radius: 20px;
    padding: 4px 12px 4px 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 22px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   9. Loading Animations
   ═══════════════════════════════════════════════════════════════ */

@keyframes dt-pulse {
    0%, 80% {
        transform: scale(1);
        opacity: 1;
    }
    45% {
        transform: scale(0.1);
        opacity: 0.7;
    }
}

.dt-loading-dots {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--primary-color);
    height: 1em;
    width: 4em;
    font-size: 5px;
}

.dt-loading-dot {
    background-color: currentColor;
    border-radius: 50%;
    width: 1em;
    height: 1em;
}

.dt-loading-dot:nth-child(1) {
    animation: dt-pulse 0.75s 0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}

.dt-loading-dot:nth-child(2) {
    animation: dt-pulse 0.75s 0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}

.dt-loading-dot:nth-child(3) {
    animation: dt-pulse 0.75s 0.36s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}

/* ═══════════════════════════════════════════════════════════════
   10. Modals
   ═══════════════════════════════════════════════════════════════ */

body.dt-modal-open > #__next {
    filter: blur(6px);
    overflow-x: hidden;
}

.dt-modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2000;
    display: flex;
}

.dt-modal-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    width: auto;
    height: auto;
    margin: auto;
    overflow-y: initial !important;
    background: white;
    border-radius: 12px;
    padding: 24px;
}

.dt-modal-content:focus {
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════
   11. Form Controls
   ═══════════════════════════════════════════════════════════════ */

.dt-input-wrapper {
    width: 100%;
    height: 44px;
    border-color: #98A2B3;
    border-width: 1px;
    border-radius: 8px;
    border-style: solid;
    position: relative;
    background-color: transparent;
    display: flex;
}

.dt-input-wrapper:hover {
    border-color: var(--primary-color);
}

.dt-input-wrapper:focus-within {
    border-color: var(--primary-color);
}

.dt-input {
    display: flex;
    align-items: center;
    outline: none;
    border: 0;
    background-color: transparent;
    height: 100%;
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    color: #394959;
    padding: 0 8px 0 12px;
    font-size: 14px;
}

.dt-input::placeholder {
    color: #8d949f;
}

/* ═══════════════════════════════════════════════════════════════
   12. Utility Classes
   ═══════════════════════════════════════════════════════════════ */

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

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

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

.dt-text-dark {
    color: var(--text-primary);
}

.dt-bg-light {
    background-color: #f8f9fa;
}

.dt-bg-white {
    background-color: #ffffff;
}

.dt-shadow {
    box-shadow: var(--shadow-sm);
}

.dt-shadow-md {
    box-shadow: var(--shadow-md);
}

.dt-shadow-lg {
    box-shadow: var(--shadow-lg);
}

.dt-rounded {
    border-radius: var(--radius-md);
}

.dt-rounded-lg {
    border-radius: var(--radius-lg);
}

.dt-rounded-full {
    border-radius: var(--radius-full);
}

/* ═══════════════════════════════════════════════════════════════
   13. Pagination
   ═══════════════════════════════════════════════════════════════ */

.dt-pagination {
    list-style: none;
    padding: 0;
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.dt-pagination-item {
    display: inline-block;
}

.dt-pagination-link {
    width: 35px;
    height: 35px;
    font-size: 13px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    margin: 0 3px;
    padding: 8px 4px;
    cursor: pointer;
    color: #394959;
    background: transparent;
    transition: all 0.2s ease;
}

.dt-pagination-link.active {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

.dt-pagination-link:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

@media only screen and (max-width: 390px) {
    .dt-pagination-link {
        width: 30px;
        height: 30px;
        font-size: 11px;
        margin: 0 1px;
        padding: 7px 5px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   END OF FILE
   ═══════════════════════════════════════════════════════════════ */


/* Additional card-specific styles */
.dt-no-results {
    padding: 60px 20px;
    text-align: center;
}

.dt-no-results-icon {
    margin-bottom: 16px;
}

.dt-no-results-title {
    font-size: 18px;
    font-weight: 600;
    color: #394959;
    margin-bottom: 8px;
}

.dt-no-results-text {
    font-size: 14px;
    color: #667085;
}

/* Ensure proper spacing between cards */
.dt-doctor-card + .dt-doctor-card {
    margin-top: 0;
}

/* ========== NEW: Stats Inline ========== */
.dt-stats-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
    align-items: center;
}

.dt-stat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-sm);
}

.dt-stat-text {
    color: var(--text-secondary);
    font-weight: var(--font-medium);
    font-size: var(--font-sm);
}

.dt-stat-secondary {
    color: var(--text-muted);
    font-weight: var(--font-normal);
}

/* ========== Icon Sizes ========== */
.dt-icon-xs {
    width: var(--icon-xs);
    height: var(--icon-xs);
    font-size: var(--icon-xs);
    flex-shrink: 0;
}

.dt-icon-sm {
    width: var(--icon-sm);
    height: var(--icon-sm);
    font-size: var(--icon-sm);
    flex-shrink: 0;
}

.dt-icon-md {
    width: var(--icon-md);
    height: var(--icon-md);
    font-size: var(--icon-md);
    flex-shrink: 0;
}

/* ========== UPDATED: Appointment Info ========== */
.dt-appointment-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dt-appointment-info > div {
    line-height: 1.5;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEO HERO SECTION - بخش توضیحات SEO
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.dt-seo-hero {
    background: var(--bg-component);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
}

.dt-seo-hero-title {
    font-family: var(--font-primary);
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: var(--line-height-normal);
    margin: 0 0 var(--spacing-md) 0;
}

.dt-seo-updated {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    font-family: var(--font-primary);
    font-size: var(--font-sm); /* 14px */
    color: var(--text-muted);
}

.dt-seo-updated svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.dt-seo-hero-content {
    position: relative;
}

.dt-seo-hero-text {
    font-family: var(--font-primary);
    font-size: var(--font-base);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    overflow: hidden;
    position: relative;
    max-height: 4.5em; /* 3 lines approximately */
    transition: max-height 0.3s ease;
}

.dt-seo-hero-text.expanded {
    max-height: none; /* Large enough for full content */
}

.dt-seo-hero-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3em;
    background: linear-gradient(to bottom, transparent, var(--bg-component));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.dt-seo-hero-text.expanded::after {
    opacity: 0;
}

.dt-seo-hero-text p {
    margin: 0 0 var(--spacing-lg) 0;
}

.dt-seo-hero-text h2 {
    font-family: var(--font-primary);
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
}

.dt-seo-hero-text ul {
    list-style: disc;
    padding-right: var(--spacing-xl);
    margin: 0;
}

.dt-seo-hero-text li {
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
}

.dt-seo-hero-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: transparent;
    border: none;
    color: var(--primary-color);
    font-family: var(--font-primary);
    font-size: var(--font-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    padding: var(--spacing-md) 0;
    margin-top: var(--spacing-md);
    transition: color 0.2s ease;
}

.dt-seo-hero-toggle:hover {
    color: var(--primary-hover);
}

.dt-seo-hero-toggle .toggle-icon {
    transition: transform 0.3s ease;
    stroke: currentColor;
    fill: none;
}

.dt-seo-hero-toggle[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

.dt-seo-hero-toggle .toggle-text-less {
    display: none;
}

.dt-seo-hero-toggle[aria-expanded="true"] .toggle-text-more {
    display: none;
}

.dt-seo-hero-toggle[aria-expanded="true"] .toggle-text-less {
    display: inline;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RELATED SERVICES SECTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dt-related-services {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-light);
}

.dt-related-services h2 {
    font-family: var(--font-primary);
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
}

.dt-related-services > p {
    font-family: var(--font-primary);
    font-size: var(--font-base);
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-lg) 0;
    line-height: var(--line-height-relaxed);
}

.dt-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.dt-service-tag {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--gray-50);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: all 0.2s ease;
}

.dt-service-tag:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.dt-service-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: none;
    fill: none;
}

@media (max-width: 767px) {
    .dt-services-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--spacing-sm);
    }

    .dt-service-tag {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-xs);
    }

    .dt-service-icon {
        width: 16px;
        height: 16px;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CROSS LINKS SECTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dt-cross-links {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-light);
}

.dt-cross-links-group {
    margin-bottom: var(--spacing-lg);
}

.dt-cross-links-group:last-child {
    margin-bottom: 0;
}

.dt-cross-links-title {
    font-family: var(--font-primary);
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
}

.dt-cross-links-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.dt-cross-link {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--gray-100);
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    border-radius: var(--radius-full);
    transition: all 0.2s ease;
}

.dt-cross-link:hover {
    background: var(--gray-200);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.dt-cross-link-primary {
    background: var(--primary-light);
    color: var(--primary-color);
}

.dt-cross-link-primary:hover {
    background: var(--primary-color);
    color: var(--text-white);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .dt-seo-hero {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }

    .dt-seo-hero-title {
        font-size: var(--font-xl);
    }

    .dt-seo-hero-text {
        font-size: var(--font-sm);
    }

    .dt-cross-links {
        margin-top: var(--spacing-xl);
        padding-top: var(--spacing-lg);
    }

    .dt-cross-link {
        font-size: 0.8125rem; /* 13px */
        padding: 6px 12px;
    }
}

/* ========================================================================
   SOCIAL SHARE BUTTONS STYLES
   ======================================================================== */

/* Mobile Share Button (Native Share API) */
.dt-mobile-share-wrapper {
    display: none; /* Hidden on desktop */
    margin-bottom: var(--spacing-lg);
}

.dt-mobile-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-component);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-xs);
}

.dt-mobile-share-btn:active {
    background: var(--primary-light);
    transform: scale(0.98);
}

.dt-mobile-share-btn svg {
    flex-shrink: 0;
}

@media (max-width: 992px) {
    .dt-mobile-share-wrapper {
        display: block;
    }
}

/* Desktop Social Share (Floating) */
.dt-social-share {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
}

.dt-social-share-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--primary-color);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-base);
    font-family: var(--font-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
}

.dt-social-share-toggle:hover {
    background: var(--primary-hover);
    transform: scale(1.05);
    box-shadow: var(--shadow-xl);
}

.dt-social-share-toggle svg {
    flex-shrink: 0;
}

.dt-social-share-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + var(--spacing-md));
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-base);
}

.dt-social-share-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dt-social-share-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-component);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    cursor: pointer;
}

.dt-social-share-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-default);
    transform: translateX(-5px);
    box-shadow: var(--shadow-lg);
}

.dt-social-share-item svg {
    flex-shrink: 0;
}

/* Network specific colors */
.dt-share-telegram:hover {
    background: #0088cc;
    color: #FFFFFF;
    border-color: #0088cc;
}

.dt-share-whatsapp:hover {
    background: #25D366;
    color: #FFFFFF;
    border-color: #25D366;
}

.dt-share-twitter:hover {
    background: #000000;
    color: #FFFFFF;
    border-color: #000000;
}

.dt-share-linkedin:hover {
    background: #0A66C2;
    color: #FFFFFF;
    border-color: #0A66C2;
}

.dt-share-copy:hover {
    background: var(--primary-color);
    color: #FFFFFF;
    border-color: var(--primary-color);
}

/* Toast notification for copy success */
.dt-share-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-primary);
    color: #FFFFFF;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--font-sm);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.dt-share-toast.show {
    opacity: 1;
    visibility: visible;
}

/* ========================================================================
   BREADCRUMB NAVIGATION STYLES
   ======================================================================== */

.dt-breadcrumb {
    margin-bottom: var(--spacing-lg);
}

.dt-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.dt-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.dt-breadcrumb-link {
    font-family: var(--font-primary);
    font-size: var(--font-sm); /* 14px */
    font-weight: var(--font-normal);
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-base);
}

.dt-breadcrumb-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.dt-breadcrumb-current {
    font-family: var(--font-primary);
    font-size: var(--font-sm); /* 14px */
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

.dt-breadcrumb-separator {
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0.5;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .dt-breadcrumb {
        margin-bottom: var(--spacing-md);
    }

    .dt-breadcrumb-link,
    .dt-breadcrumb-current {
        font-size: var(--font-xs); /* 12px */
    }

    .dt-breadcrumb-separator {
        width: 12px;
        height: 12px;
    }
}

/* ========================================================================
   FAQ SECTION STYLES
   ======================================================================== */

.dt-faq-section {
    background: var(--bg-component);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
}

.dt-faq-title {
    font-family: var(--font-primary);
    font-size: var(--font-2xl); /* 24px */
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xl) 0;
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
}

.dt-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.dt-faq-item {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition-base);
}

.dt-faq-item:hover {
    border-color: var(--border-default);
    box-shadow: var(--shadow-xs);
}

.dt-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--bg-component);
    border: none;
    cursor: pointer;
    text-align: right;
    transition: background var(--transition-base);
}

.dt-faq-question:hover {
    background: var(--bg-hover);
}

.dt-faq-question[aria-expanded="true"] {
    background: var(--primary-light);
}

.dt-faq-question-text {
    font-family: var(--font-primary);
    font-size: var(--font-base); /* 16px */
    font-weight: var(--font-medium);
    color: var(--text-primary);
    line-height: var(--line-height-normal);
    flex: 1;
}

.dt-faq-icon {
    flex-shrink: 0;
    stroke: var(--text-muted);
    fill: none;
    transition: transform var(--transition-base);
    width: 20px;
    height: 20px;
}

.dt-faq-question[aria-expanded="true"] .dt-faq-icon {
    transform: rotate(180deg);
    stroke: var(--primary-color);
}

.dt-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
}

.dt-faq-answer.active {
    max-height: 500px; /* Enough for longest answer */
}

.dt-faq-answer p {
    font-family: var(--font-primary);
    font-size: var(--font-base); /* 16px */
    font-weight: var(--font-normal);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    margin: 0;
    padding: var(--spacing-lg);
    padding-top: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .dt-faq-section {
        padding: var(--spacing-lg);
    }

    .dt-faq-title {
        font-size: var(--font-xl); /* 20px */
        margin-bottom: var(--spacing-lg);
    }

    .dt-faq-question {
        padding: var(--spacing-md);
    }

    .dt-faq-question-text {
        font-size: var(--font-sm); /* 14px */
    }

    .dt-faq-answer p {
        font-size: var(--font-sm); /* 14px */
        padding: var(--spacing-md);
        padding-top: 0;
    }

    .dt-faq-icon {
        width: 16px;
        height: 16px;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LOADING SPINNER - Based on Style Guide
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.dt-loading-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border: 3px solid rgba(37, 60, 137, 0.1);
    border-top-color: var(--primary-color);
    border-radius: var(--radius-full);
    animation: dt-spinner-rotate 0.8s linear infinite;
}

@keyframes dt-spinner-rotate {
    0% { 
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(360deg); 
    }
}

/* Spinner text styling */
#loadingIndicator p,
#loadingIndicatorDesktop p {
    font-size: var(--font-sm);
    color: var(--text-muted);
    font-weight: var(--font-medium);
    margin-top: var(--spacing-md);
}
.seo-pagination {
    width: 100%;
    clear: both;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 2rem;
}
.pagination {
    display: inline-flex !important;
    place-items: center;
    justify-content: center;
}
.pagination li {
    margin: 2%;
}
.pagination span {
    margin: 0 0 0 5px;
    display: inline-block;
    vertical-align: middle;
    color: #2a2a33;
}
.pagination li.active {
    background-color: var(--primary-color);
    color: var(--bg-component);
    border-radius: 50%;
}
.pagination a {
    color: var(--text-primary);
    border-radius: 50%;
    display: inline-block;
    height: 36px;
    min-width: 36px;
    line-height: 36px;
    padding: 0 2px;
    text-decoration: none;
    -o-transition: 0.4s ease all;
    -webkit-transition: 0.4s ease all;
    -moz-transition: 0.4s ease all;
    transition: 0.4s ease all;
}
.pagination li.active a {
    color: var(--text-white);
}