.cities_banner {
 position: relative;
 background-color: var(--primary-dark);
 height: 160px;
 display: flex;
 align-items: center;
 margin-bottom: 2rem;
 overflow: hidden;
 }

 .cities_overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(45deg, rgba(0, 112, 60, 0.95), rgba(0, 90, 48, 0.9));
 z-index: 1;
 }

 .cities_pattern {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 background-repeat: repeat;
 z-index: 2;
 }

 .cities_banner-content {
 position: relative;
 z-index: 3;
 text-align: center;
 color: var(--white);
 }

 .cities_icon {
 width: 60px;
 height: 60px;
 background-color: var(--secondary-gold);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto 0.75rem;
 font-size: 1.75rem;
 color: var(--white);
 box-shadow: 0 0 15px rgba(194, 155, 64, 0.5);
 }

 .cities_title {
 font-size: 1.75rem;
 font-weight: 700;
 margin-bottom: 0.75rem;
 position: relative;
 display: inline-block;
 }

 .cities_title::after {
 content: '';
 position: absolute;
 bottom: -8px;
 left: 50%;
 transform: translateX(-50%);
 width: 60px;
 height: 2px;
 background-color: var(--secondary-gold);
 }

 .cities_breadcrumb {
 display: flex;
 justify-content: center;
 margin-top: 1rem;
 }

 .breadcrumb {
 background-color: transparent;
 margin-bottom: 0;
 padding: 0.25rem 0.75rem;
 border-radius: 20px;
 display: inline-flex;
 background-color: rgba(255, 255, 255, 0.15);
 }

 .breadcrumb-item {
 font-size: 0.85rem;
 }

 .breadcrumb-item a {
 color: var(--white);
 text-decoration: none;
 transition: var(--transition);
 }

 .breadcrumb-item a:hover {
 color: var(--secondary-gold);
 }

 .breadcrumb-item.active {
 color: var(--secondary-gold);
 }

 .breadcrumb-item+.breadcrumb-item::before {
 color: rgba(255, 255, 255, 0.7);
 content: "/";
 }

 /* محتوای اصلی */
 .cities_main {
 margin-bottom: 3rem;
 }
 
 /* کارت اصلی */
 .cities_card {
 background-color: #fff;
 border-radius: 15px;
 box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
 overflow: hidden;
 margin-bottom: 2rem;
 }
 
 .cities_card-header {
 background-color: var(--primary-dark);
 color: #fff;
 padding: 1.25rem 1.5rem;
 display: flex;
 align-items: center;
 justify-content: space-between;
 }
 
 .cities_card-title {
 font-size: 1.25rem;
 font-weight: 600;
 margin: 0;
 display: flex;
 align-items: center;
 }
 
 .cities_card-title i {
 color: var(--secondary-gold);
 margin-left: 0.75rem;
 font-size: 1.5rem;
 }
 
 .cities_card-body {
 padding: 1.5rem;
 }
 
 /* فیلتر و جستجو */
 .cities_filters {
 display: flex;
 flex-wrap: wrap;
 gap: 1rem;
 margin-bottom: 1.5rem;
 }
 
 .cities_search {
 flex: 1;
 min-width: 250px;
 }
 
 .cities_search-input {
 width: 100%;
 border: 1px solid #e0e0e0;
 border-radius: 8px;
 padding: 0.75rem 1rem;
 padding-right: 2.75rem;
 font-size: 0.95rem;
 position: relative;
 background-color: #f9f9f9;
 transition: var(--transition);
 }
 
 .cities_search-wrapper {
 position: relative;
 }
 
 .cities_search-icon {
 position: absolute;
 right: 1rem;
 top: 50%;
 transform: translateY(-50%);
 color: #666;
 }
 
 .cities_search-input:focus {
 outline: none;
 border-color: var(--primary-light);
 box-shadow: 0 0 0 3px rgba(22, 84, 50, 0.1);
 background-color: #fff;
 }
 
 .cities_filter-select {
 min-width: 200px;
 border: 1px solid #e0e0e0;
 border-radius: 8px;
 padding: 0.75rem 1rem;
 font-size: 0.95rem;
 background-color: #f9f9f9;
 transition: var(--transition);
 appearance: none;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: left 1rem center;
 padding-left: 2.5rem;
 }
 
 .cities_filter-select:focus {
 outline: none;
 border-color: var(--primary-light);
 box-shadow: 0 0 0 3px rgba(22, 84, 50, 0.1);
 background-color: #fff;
 }
 
 /* جدول */
 .cities_table-wrapper {
 overflow-x: auto;
 border-radius: 8px;
 box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
 }
 
 .cities_table {
 width: 100%;
 border-collapse: separate;
 border-spacing: 0;
 }
 
 .cities_table th {
 background-color: #f0f7f3;
 color: var(--primary-dark);
 font-weight: 600;
 padding: 1rem;
 text-align: right;
 border-bottom: 2px solid #e0e0e0;
 white-space: nowrap;
 }
 
 .cities_table td {
 padding: 1rem;
 border-bottom: 1px solid #f0f0f0;
 vertical-align: middle;
 }
 
 .cities_table tbody tr {
 transition: var(--transition);
 }
 
 .cities_table tbody tr:hover {
 background-color: #f9f9f9;
 }
 
 .cities_table tbody tr:last-child td {
 border-bottom: none;
 }
 
 .cities_table-id {
 width: 60px;
 text-align: center;
 color: #666;
 font-weight: 500;
 }
 
 .cities_table-province {
 color: var(--primary-dark);
 font-weight: 500;
 }
 
 .cities_table-city {
 color: var(--primary-dark);
 font-weight: 600;
 }
 
 .cities_table-code {
 color: #666;
 font-family: 'Courier New', monospace;
 font-weight: 600;
 }
 
 .cities_table-phone,
 .cities_table-fax {
 direction: ltr;
 text-align: right;
 font-family: 'Courier New', monospace;
 }
 
 .cities_table-actions {
 white-space: nowrap;
 text-align: center;
 }
 
 .cities_table-btn {
 width: 36px;
 height: 36px;
 border-radius: 50%;
 border: none;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 margin: 0 0.25rem;
 transition: var(--transition);
 background-color: #f0f0f0;
 color: #555;
 }
 
 .cities_table-btn-view {
 background-color: #e3f2fd;
 color: #0d47a1;
 }
 
 .cities_table-btn-view:hover {
 background-color: #0d47a1;
 color: #fff;
 }
 
 .cities_table-btn-map {
 background-color: #e8f5e9;
 color: #1b5e20;
 }
 
 .cities_table-btn-map:hover {
 background-color: #1b5e20;
 color: #fff;
 }
 
 .cities_table-btn-call {
 background-color: #fff3e0;
 color: #e65100;
 }
 
 .cities_table-btn-call:hover {
 background-color: #e65100;
 color: #fff;
 }
 
 .cities_table-address {
 max-width: 300px;
 white-space: normal;
 }
 
 /* پیغام نتیجه‌ای یافت نشد */
 .cities_no-result {
 padding: 2rem;
 text-align: center;
 background-color: #f9f9f9;
 border-radius: 8px;
 margin: 1.5rem 0;
 }
 
 .cities_no-result-icon {
 font-size: 3rem;
 color: #ccc;
 margin-bottom: 1rem;
 }
 
 .cities_no-result-text {
 font-size: 1.1rem;
 color: #666;
 margin-bottom: 1rem;
 }
 
 .cities_no-result-btn {
 background-color: var(--primary-dark);
 color: #fff;
 border: none;
 border-radius: 8px;
 padding: 0.75rem 1.5rem;
 font-size: 0.95rem;
 transition: var(--transition);
 }
 
 .cities_no-result-btn:hover {
 background-color: var(--primary-light);
 transform: translateY(-2px);
 }
 
 /* صفحه‌بندی */
 .cities_pagination {
 display: flex;
 justify-content: center;
 margin-top: 2rem;
 }
 
 .cities_pagination .page-item .page-link {
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 0.25rem;
 border-radius: 8px;
 border: 1px solid #e0e0e0;
 color: #555;
 transition: var(--transition);
 }
 
 .cities_pagination .page-item.active .page-link {
 background-color: var(--primary-dark);
 border-color: var(--primary-dark);
 color: #fff;
 }
 
 .cities_pagination .page-item .page-link:hover {
 background-color: #f0f7f3;
 color: var(--primary-dark);
 }
 
 .cities_pagination .page-item.active .page-link:hover {
 background-color: var(--primary-dark);
 color: #fff;
 }
 
 /* مدال نمایش اطلاعات بیشتر */
 .cities_modal-header {
 background-color: var(--primary-dark);
 color: #fff;
 }
 
 .cities_modal-title {
 display: flex;
 align-items: center;
 }
 
 .cities_modal-title i {
 margin-left: 0.75rem;
 color: var(--secondary-gold);
 }
 
 .cities_modal-info {
 margin-bottom: 1.5rem;
 }
 
 .cities_modal-info-title {
 font-size: 1.1rem;
 font-weight: 600;
 color: var(--primary-dark);
 margin-bottom: 0.75rem;
 padding-bottom: 0.5rem;
 border-bottom: 1px solid #f0f0f0;
 }
 
 .cities_modal-info-list {
 list-style: none;
 padding: 0;
 margin: 0;
 }
 
 .cities_modal-info-item {
 display: flex;
 margin-bottom: 0.75rem;
 }
 
 .cities_modal-info-label {
 min-width: 120px;
 color: #666;
 }
 
 .cities_modal-info-value {
 font-weight: 500;
 color: #333;
 }
 
 .cities_modal-map {
 height: 300px;
 border-radius: 8px;
 overflow: hidden;
 margin-bottom: 1rem;
 }
 
 .cities_modal-actions {
 display: flex;
 gap: 1rem;
 margin-top: 1rem;
 }
 
 .cities_modal-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0.75rem 1.25rem;
 border-radius: 8px;
 border: none;
 transition: var(--transition);
 font-size: 0.95rem;
 flex: 1;
 }
 
 .cities_modal-btn i {
 margin-left: 0.5rem;
 }
 
 .cities_modal-btn-primary {
 background-color: var(--primary-dark);
 color: #fff;
 }
 
 .cities_modal-btn-primary:hover {
 background-color: var(--primary-light);
 }
 
 .cities_modal-btn-secondary {
 background-color: #f0f0f0;
 color: #555;
 }
 
 .cities_modal-btn-secondary:hover {
 background-color: #e0e0e0;
 }
 
 /* رسپانسیو */
 @media (max-width: 767.98px) {
 .cities_banner {
 height: 140px;
 }
 
 .cities_icon {
 width: 50px;
 height: 50px;
 font-size: 1.5rem;
 }
 
 .cities_title {
 font-size: 1.5rem;
 }
 
 .cities_filters {
 flex-direction: column;
 }
 
 .cities_search,
 .cities_filter-select {
 width: 100%;
 }
 
 .cities_table th,
 .cities_table td {
 padding: 0.75rem 0.5rem;
 }
 }

 @media (max-width: 575.98px) {
 .cities_banner {
 height: 120px;
 }
 
 .cities_icon {
 width: 40px;
 height: 40px;
 font-size: 1.25rem;
 }
 
 .cities_title {
 font-size: 1.25rem;
 }
 
 .breadcrumb-item {
 font-size: 0.75rem;
 }
 
 .cities_card-header {
 padding: 1rem;
 }
 
 .cities_card-title {
 font-size: 1.1rem;
 }
 
 .cities_card-body {
 padding: 1rem;
 }
 
 .cities_modal-info-item {
 flex-direction: column;
 margin-bottom: 1rem;
 }
 
 .cities_modal-info-label {
 margin-bottom: 0.25rem;
 }
 }