/**
 * استایل‌های عمومی باشگاه مشتریان رویاس
 */
:root {
    --primary-header: #017874;
    --sidebar-bg: #D3F1F1;
    --tabs-bg: #51818F;
    --active-tab: #9AD8ED;
    --primary-text: #E6F4F4;
    --secondary-text: #40403E;
    --tbody-bg: #83AAB1;
    --table-bg: #B4D4D1;
    --primary-bg: #B4D4D1;
    --dashboard-bg: #E8F4F4;
    --blue-bg: #9AD9EB;
    --blue-txt: #004A63;
    --green-bg: #C2E1B7;
    --table-text: #E6F4F4;
    --green-txt: #2A5D18;
    --green-progress: #58A639;
    --orange-bg: #F5C89E;
    --orange-txt: #9D5618;
    --red-bg: #631320;
    --pink-tag: #FE4968;
    --dark-pink-tag: #D52E4A;
    --blue-tag: #51818F;
    --dark-blue-tag: #274D58;
    --green-tag: #32A502;
    --red-tag: #E50029;
    --map-bg: #717777;
    --map-info-bg: #9AD8ED;

    --border-radius: 25px;
    --card-radius: 45px;
    --table-radius: 10px
}


/* کانتینر اصلی داشبورد */
.royas-dashboard-container {
    display: flex;
    direction: rtl; /* راست‌چین کردن چیدمان */
    font-family: 'yekan-bakh', sans-serif; /* (بعداً فونت اصلی رو اضافه می‌کنیم) */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 20px;
}

/* سایدبار (منو) */
.royas-sidebar {
    flex: 0 0 200px; /* عرض ثابت 200 پیکسل */
    background-color: #f4f7f6; /* یک خاکستری روشن */
    padding: 15px;
    border-left: 1px solid #e0e0e0;
}

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

.royas-sidebar ul li {
    margin-bottom: 8px;
}

.royas-sidebar ul li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
}

/* استایل دکمه "فعال" */
.royas-sidebar ul li.is-active a {
    background-color: #0073aa; /* رنگ آبی پیش‌فرض وردپرس (بعداً رنگ برند رو میذاریم) */
    color: #fff;
    border-color: #0073aa;
}

.royas-sidebar ul li a:hover {
    background-color: #eaf6ff;
}

/* محتوای اصلی */
.royas-main-content {
    flex: 1; /* بقیه عرض صفحه را می‌گیرد */
    padding: 20px;
    background-color: #fff;
}

.royas-main-content h3 {
    margin-top: 0;
    color: #1d2327;
}

/* --- استایل‌های داشبورد اصلی --- */
.royas-dashboard-cards {
    display: flex;
    gap: 15px; /* فاصله بین کارت‌ها */
    margin-bottom: 20px;
}

.royas-card {
    flex: 1; /* هر سه کارت عرض یکسان می‌گیرند */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: #333;
    transition: transform 0.2s, box-shadow 0.2s;
}

.royas-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.royas-card .card-title {
    font-size: 14px;
    margin-bottom: 10px;
    opacity: 0.8;
}

.royas-card .card-value {
    font-size: 28px;
    font-weight: bold;
}

/* رنگ‌بندی کارت‌ها بر اساس PDF */
.royas-card.card-coin {
    background-color: #e0f4ff; /* آبی روشن */
}

.royas-card.card-level {
    background-color: #e6f9e6; /* سبز روشن */
}

.royas-card.card-mission {
    background-color: #fff0e6; /* نارنجی روشن */
}

/* --- استایل‌های بخش‌های بعدی --- */
.royas-timeline {
    margin-bottom: 20px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px dashed #ddd;
    text-align: center;
}

.royas-activity {
    background: #f9f9f9;
    padding: 15px;
    border: 1px dashed #ddd;
    border-radius: 8px;
    text-align: center;
}

/* --- استایل‌های جدول فعالیت‌ها --- */
.royas-activity-table {
    width: 100%;
    border-collapse: collapse; /* حذف فاصله بین سلول‌ها */
    margin-top: 15px;
}

.royas-activity-table th,
.royas-activity-table td {
    padding: 12px 10px;
    text-align: right;
    border-bottom: 1px solid #eee;
}

.royas-activity-table th {
    background-color: #f8f8f8;
    font-weight: bold;
    color: #555;
}

.royas-activity-table tr:last-child td {
    border-bottom: none; /* حذف خط زیر ردیف آخر */
}

.royas-activity-table td.points {
    font-weight: bold;
}

/* کلاس برای امتیاز مثبت */
.royas-activity-table td.points-positive {
    color: #28a745; /* سبز */
}

/* کلاس برای امتیاز منفی */
.royas-activity-table td.points-negative {
    color: #dc3545; /* قرمز */
}

.royas-activity-placeholder {
    padding: 20px;
    text-align: center;
    background: #f9f9f9;
    border: 1px dashed #ddd;
    border-radius: 8px;
    color: #777;
}

/* --- استایل‌های تب کیف پول --- */

/* کانتینر برای چیدمان دو ستونه در آینده */
.royas-wallet-container {
    /* (فعلاً چیدمان ساده) */
}

.royas-wallet-balance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.royas-wallet-balance .balance-info .balance-label {
    font-size: 16px;
    color: #555;
}

.royas-wallet-balance .balance-info .balance-value {
    font-size: 32px;
    font-weight: bold;
    color: #0073aa; /* (رنگ آبی) */
}

.royas-wallet-balance .balance-action .royas-button {
    background-color: #28a745; /* (سبز) */
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

/* فرم شارژ کیف پول */
.royas-charge-form {
    background: var(--table-bg);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.royas-charge-form h4 {
    margin-top: 0;
    font-size: 22px;
    margin-bottom: 18px;
    font-weight: bold;
    color: var(--secondary-text);
}

.royas-charge-form .form-group {
    margin-bottom: 15px;
}

.royas-charge-form .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.royas-charge-form .form-group input {
    width: 100%;
    border-radius: var(--border-radius);
    border: 1px solid var(--secondary-text);
    padding: 10px 5px;
    text-align: right;
}

.royas-charge-form .form-group input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;

}

.royas-charge-form .form-group .description {
    margin-top: 3px;
    font-size: 13px;
    color: var(--secondary-text);
}

/* بخش جدول تراکنش‌های ریالی */
.royas-rial-transactions {
    /* (فعلاً از همان استایل placeholder قبلی استفاده می‌کنیم) */
}

/* --- استایل‌های تب سوابق سفر --- */

.royas-page-header {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 20px;
}

.royas-page-header .quote {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.royas-page-header .quote-en {
    font-size: 14px;
    color: #777;
    margin-top: 5px;
}

.royas-map-placeholder {
    background: #f0f0f0 url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/World_map_-_low_resolution.svg/1024px-World_map_-_low_resolution.svg.png') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 250px; /* ارتفاع موقت نقشه */
    border-radius: 8px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #fff;
}

/* (ما از استایل جدول قبلی یعنی royas-activity-table استفاده مجدد می‌کنیم) */
.royas-travel-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.royas-travel-table th,
.royas-travel-table td {
    padding: 12px 10px;
    text-align: right;
    border-bottom: 1px solid #eee;
}

.royas-travel-table th {
    background-color: #f8f8f8;
    font-weight: bold;
    color: #555;
}

.royas-travel-table tr:last-child td {
    border-bottom: none;
}

/* --- استایل‌های تب ماموریت‌ها --- */

/* (ما از هدر .royas-page-header که قبلاً ساختیم، استفاده مجدد می‌کنیم) */

.royas-missions-layout {
    display: flex;
    flex-direction: column;
    gap: 20px; /* فاصله بین بخش‌ها */
}

.royas-missions-top-cards {
    display: flex;
    gap: 15px; /* فاصله بین کارت‌ها */
}

/* استایل کارت‌های پیشنهادی (ممکن، غیرممکن، وضعیت) */
.royas-mission-card {
    flex: 1; /* عرض یکسان */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    background-color: #f9f9f9;
    text-decoration: none;
    color: #333;
    transition: transform 0.2s, box-shadow 0.2s;
}

.royas-mission-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* رنگ‌بندی کارت‌ها بر اساس PDF */
.royas-mission-card.card-possible {
    background-color: #e0f4ff; /* آبی روشن */
}

.royas-mission-card.card-impossible {
    background-color: #ffeeee; /* قرمز روشن */
}

.royas-mission-card.card-status {
    background-color: #fff0e6; /* نارنجی روشن */
}

.royas-mission-card .card-title {
    font-size: 16px;
    font-weight: bold;
    margin:7px 0px;
}

.royas-mission-card .card-content {
    font-size: 14px;
    /*height: 50px; !* ارتفاع موقت *!*/
    color: #555;
}

/* بخش نمایش جزئیات یک ماموریت (نمایشی) */
.royas-mission-detail {
    display: flex;
    gap: 20px;
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px;
}

.royas-mission-detail .mission-image {
    flex: 0 0 200px; /* عرض ثابت عکس */
    background: #ccc;
    border-radius: 8px;
}

.royas-mission-detail .mission-content {
    flex: 1;
}

.royas-mission-detail .mission-content h4 {
    margin-top: 0;
    margin-bottom: 10px;
}

.royas-mission-detail .mission-content .mission-scenario {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
}

.royas-mission-detail .mission-content .mission-meta {
    font-size: 13px;
    color: #777;
    margin-bottom: 15px;
}

/* (از دکمه .royas-button که قبلاً ساختیم، استفاده مجدد می‌کنیم) */
.royas-button.button-danger {
    background-color: #dc3545; /* قرمز */
}

/* --- استایل‌های نوار سوابق سفر --- */

.royas-timeline {
    /* (استایل‌های قبلی placeholder را حذف یا بازنویسی می‌کنیم) */
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.royas-timeline-empty {
    font-size: 16px;
    font-weight: bold;
    color: #555;
}

.royas-timeline-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.royas-timeline-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: #777;
}

.royas-timeline-start .start-icon {
    font-size: 24px;
    margin-bottom: 5px;
}

.royas-timeline-progress {
    flex: 1;
    position: relative;
    height: 6px; /* ضخامت خط */
    background: #ddd;
    border-radius: 3px;
}

/* نوار پیشرفت داخلی (که متحرک خواهد بود) */
.royas-timeline-progress-inner {
    position: absolute;
    height: 100%;
    width: 100%; /* (فعلاً 100% پر) */
    background: #0073aa; /* (رنگ آبی) */
    border-radius: 3px;
}

.royas-timeline-point {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 2px solid #0073aa;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px; /* (برای پرچم) */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

/* موقعیت نقاط روی خط */
.royas-timeline-point[data-position="1"] { left: 25%; }
.royas-timeline-point[data-position="2"] { left: 50%; }
.royas-timeline-point[data-position="3"] { left: 75%; }

.royas-timeline-end {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.royas-timeline-summary {
    margin-top: 15px;
    font-size: 14px;
    color: #555;
}

/* --- استایل‌های بخش کد معرف --- */

.royas-referral-box {
    background: #f0f7ff; /* (آبی خیلی روشن) */
    border: 1px dashed #0073aa;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
}

.royas-referral-box h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #1d2327;
}

.royas-referral-box .referral-code-label {
    font-size: 14px;
    color: #555;
}

.royas-referral-box .referral-code-value {
    font-size: 28px;
    font-weight: bold;
    color: #0056b3;
    margin: 10px 0;

    /* (برای اینکه انتخاب کردنش راحت باشه) */
    -webkit-user-select: all;
    -moz-user-select: all;
    user-select: all; 
}

.royas-referral-box .referral-description {
    font-size: 13px;
    color: #777;
}

/* --- (جدید) استایل‌های مودال (پاپ‌آپ) ماموریت --- */

.royas-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: none; /* پیش‌فرض مخفی */
    align-items: center;
    justify-content: center;
}

.royas-modal-overlay.is-visible {
    display: flex; /* با JS این کلاس را اضافه می‌کنیم */
}

.royas-modal-content {
    background: #fff;
    border-radius: 8px;
    padding: 20px 30px;
    width: 90%;
    max-width: 500px;
    position: relative;
    direction: rtl;
}

.royas-modal-close {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #eee;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 20px;
    cursor: pointer;
    line-height: 28px;
}

#royas-mission-submission-form .form-group {
    margin-bottom: 15px;
}
#royas-mission-submission-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: right;
}
#royas-mission-submission-form .wide-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
#royas-mission-submission-form .description {
    font-size: 12px;
    color: #777;
    margin-top: 5px;
}
/* --- (جدید) استایل‌های پیام موفقیت و دکمه غیرفعال --- */

.royas-notice {
    padding: 15px 20px;
    border-radius: 5px;
    margin: 15px 0;
    border: 1px solid;
    text-align: right;
}

.royas-notice-success {
    background: #f0fff4;
    border-color: #5cb85c;
    color: #3e8e41;
}

.royas-button.is-disabled {
    background-color: #ccc;
    border-color: #ccc;
    color: #777;
    cursor: not-allowed;
}

.royas-button.is-pending {
    background-color: #f0ad4e; /* نارنجی */
    border-color: #f0ad4e;
    color: #fff;
    cursor: not-allowed;
}

.royas-button.is-approved {
    background-color: #5cb85c; /* سبز */
    border-color: #5cb85c;
    color: #fff;
    cursor: not-allowed;
}

/* --- (جدید) استایل‌های پیام رد شدن ماموریت --- */

.royas-mission-feedback {
    background: #fff8f8;
    border: 1px solid #dc3545;
    border-radius: 4px;
    padding: 10px 15px;
    margin-top: 10px;
    text-align: right;
}
.royas-mission-feedback strong {
    color: #dc3545;
    display: block;
    margin-bottom: 5px;
}
.royas-mission-feedback p {
    margin: 0;
    color: #555;
    font-size: 14px;
}

/* --- (جدید) استایل‌های فرم انتقال امتیاز --- */

.royas-notice-error {
    background: #fdf0f0;
    border-color: #dc3545;
    color: #b02a37;
}

.royas-transfer-form {
    background: #fdf8f0; /* زرد روشن */
    border: 1px solid #f0ad4e;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.royas-transfer-form h4 {
    margin-top: 0;
    color: #a06705;
}

.royas-transfer-form .form-group {
    margin-bottom: 15px;
}

.royas-transfer-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.royas-transfer-form .small-input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 150px; /* عرض کمتر برای فیلدهای عددی */
}

.royas-transfer-form .description {
    font-size: 12px;
    color: #777;
}
/* --- (جدید) استایل‌های داشبورد سوابق سفر --- */
.royas-travel-stats-dashboard {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.royas-stat-card {
    flex: 1;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.royas-stat-card .stat-value {
    font-size: 28px;
    font-weight: bold;
    color: #0073aa;
    margin-bottom: 5px;
}

.royas-stat-card .stat-label {
    font-size: 14px;
    color: #555;
}

/* --- (جدید) استایل‌های کارتی سوابق سفر --- */
.royas-travel-history-list h4 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #333;
}

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

.royas-travel-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    transition: all 0.2s ease-in-out;
}

.royas-travel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.07);
}

.royas-travel-card-image {
    width: 100%;
    height: 160px; /* ارتفاع ثابت برای تصویر */
    background-color: #f0f0f0;
}

.royas-travel-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* تصویر را برش می‌دهد تا کاملاً فیت شود */
}

.royas-travel-card-content {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.royas-travel-card-title {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 10px 0;
    color: #1d2327;
}

.royas-travel-card-meta {
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
}

.royas-travel-card-meta strong {
    color: #333;
    margin-left: 5px;
}

.royas-travel-card-link {
    margin-top: auto; /* دکمه را به پایین کارت می‌چسباند */
    padding: 8px 12px;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    transition: background-color 0.2s;
}

.royas-travel-card-link:hover {
    background-color: #0056b3;
}

/* --- (جدید) استایل‌های فرم پروفایل --- */
.royas-profile-form {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
}

.royas-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.royas-profile-form .form-group {
    flex: 1; /* هر فیلد نصف عرض را بگیرد */
    display: flex;
    flex-direction: column;
}

.royas-profile-form .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.royas-profile-form .form-group input[type="text"],
.royas-profile-form .form-group input[type="email"],
.royas-profile-form .form-group input[type="date"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box; /* برای جلوگیری از سرریز شدن padding */
}

.royas-profile-form .form-group input:disabled {
    background: #eee;
    cursor: not-allowed;
}

.royas-profile-form .form-group .description {
    font-size: 12px;
    color: #777;
    margin-top: 5px;
}

/* برای فیلدهای تکی در یک ردیف */
.royas-profile-form .form-group:only-child {
    margin-bottom: 15px;
}

/* مدیریت ریسپانسیو ساده */
@media (max-width: 768px) {
    .royas-form-row {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 0;
    }
    .royas-profile-form .form-group {
         margin-bottom: 15px; /* در موبایل، هر فیلد جداگانه فاصله داشته باشد */
    }
}

/* --- (جدید) استایل‌های نهایی نوار سوابق (بدون نقاط در انتظار) --- */

.royas-timeline-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-top: 10px;
    min-height: 100px;
    padding-top: 0px;
}

.royas-timeline-start {
    padding-top: 5px;
    white-space: nowrap;
}

.royas-timeline-start .start-icon {
    font-size: 28px;
}

.royas-timeline-end {
    padding-top: 5px;
    font-size: 13px;
    color: #555;
    font-weight: bold;
    white-space: nowrap;
}

.royas-timeline-progress {
    height: 8px;
    margin-top: 10px;
}

.royas-timeline-progress-inner {
    height: 100%;
    background: #0073aa;
    border-radius: 4px;
    transition: width 0.5s ease-in-out;
}

/* نگه‌دارنده نقطه (برای موقعیت‌یابی) */
.royas-timeline-point-wrapper {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    width: 120px;
    text-align: center;
}

/* خود نقطه (دایره) */
.royas-timeline-point {
    width: 30px;
    height: 30px;
    background: #fff;
    border: 3px solid #ccc;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    user-select: none;
}

/* (جدید) جزئیات نقطه (تاریخ، نام) - بر اساس CSS شما */
.royas-point-details {
    margin-top: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-right: 27px; /* (از CSS شما) */
}


.royas-point-date {
    font-size: 11px;
    color: #777;
    margin: 2px 0;
    line-height: 1;
    white-space: nowrap;
}
.royas-point-date strong {
    color: #555;
    margin-right: 2px;
}

.royas-point-label {
    font-size: 12px;
    color: #333;
    font-weight: bold;
    line-height: 1.3;
}

/* حالت انجام شده (رنگی) */
.royas-timeline-point.is-done {
    border-color: #0073aa;
    background-color: #f0f7ff;
    color: #000;
    overflow: hidden;
}

/* (حذف شد) استایل‌های .is-pending حذف شدند */

.royas-timeline-summary {
    margin-top: 20px;
    font-size: 15px;
}

/* --- (جدید) استایل‌های نقشه داینامیک SVG --- */

.royas-map-container {
    height: 555px; /* ارتفاع درخواستی شما */
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa; /* رنگ پس‌زمینه برای فضاهای خالی */
    margin-bottom: 20px;
}

.royas-map-container svg {
    width: 100%;
    height: 100%;
    object-fit: contain; /* نقشه را به صورت کامل جا می‌دهد */
}

/* ۱. استایل پیش‌فرض همه‌ی کشورها (خاکستری) */
.royas-map-container svg path {
    fill: #cccccc; /* رنگ خاکستری پیش‌فرض */
    stroke: #ffffff; /* کادر سفید دور کشورها */
    stroke-width: 0.5;
    transition: fill 0.3s ease;
}

/* ۲. استایل کشورهای بازدید شده (آبی) */
.royas-map-container svg path.is-visited {
    fill: #0073aa; /* رنگ آبی برند */
}

/* ۳. (اختیاری) افکت هاور */
.royas-map-container svg path:hover {
    fill: #0056b3; /* آبی تیره‌تر */
    cursor: pointer;
}

/* --- (جدید) استایل‌های نقشه داینامیک SVG --- */

.royas-map-container {
    height: 555px; /* ارتفاع درخواستی */
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
    margin-bottom: 20px;
    position: relative; /* (جدید) برای موقعیت‌یابی tooltip */
}

.royas-map-container svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ۱. استایل پیش‌فرض همه‌ی کشورها (خاکستری) */
.royas-map-container svg path {
    fill: #cccccc;
    stroke: #ffffff;
    stroke-width: 0.5;
    transition: fill 0.2s ease;
}

/* ۲. استایل کشورهای بازدید شده (آبی) */
.royas-map-container svg path.is-visited {
    fill: #0073aa;
}

/* ۳. (جدید) افکت هاور (درخواست شما) */
.royas-map-container svg path:hover {
    fill: #0056b3; /* آبی تیره‌تر */
    cursor: pointer;
}

/* ۴. (جدید) استایل Tooltip نام کشور */
#royas-map-tooltip {
    display: none; /* پیش‌فرض مخفی */
    position: absolute; /* (تغییر به absolute تا نسبت به صفحه حرکت کند) */
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    z-index: 100;
    /* جلوگیری از کلیک روی خود tooltip */
    pointer-events: none; 
    white-space: nowrap;
}

#royas-map-tooltip.is-visible {
    display: block;
}

/* --- (جدید) استایل‌های نقشه داینامیک SVG (نسخه پین) --- */

.royas-map-container {
    height: 555px;
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
    margin-bottom: 20px;
    position: relative; /* (مهم) برای موقعیت‌یابی پین‌ها */
}

.royas-map-container svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* کانتینر پین‌ها (روی SVG می‌افتد) */
.royas-map-pins-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* اجازه می‌دهد کلیک به نقشه زیرین برسد */
}

/* ۱. استایل پیش‌فرض کشورها (خاکستری) */
.royas-map-container svg path {
    fill: #cccccc;
    stroke: #ffffff;
    stroke-width: 0.5;
    transition: fill 0.2s ease;
}

/* ۲. استایل کشورهای بازدید شده (آبی) */
.royas-map-container svg path.is-visited {
    fill: #0073aa;
}

/* ۳. افکت هاور (فقط برای بازدید نشده‌ها) */
.royas-map-container svg path:not(.is-visited):hover {
    fill: #0056b3;
    cursor: pointer;
}

/* ۴. استایل Tooltip هاور */
#royas-map-tooltip {
    display: none;
    position: fixed; /* (مهم) */
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    z-index: 100;
    pointer-events: none; 
    white-space: nowrap;
}

#royas-map-tooltip.is-visible {
    display: block;
}

/* ۵. (جدید) استایل پین داینامیک */
.royas-map-pin {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* (مهم) مرکز پین را روی نقطه دقیق می‌گذارد */
    transform: translate(-50%, -100%); 
    z-index: 10;
}

/* برچسب بالای پین */
.pin-label {
    background: #fff;
    color: #1d2327;
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    white-space: nowrap;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}
.pin-flag {
    font-size: 14px;
}
.pin-name {
    color: #0073aa;
}
.pin-year {
    color: #777;
    font-weight: normal;
}

/* خودِ پین (نقطه زیر برچسب) */
.pin-dot {
    width: 10px;
    height: 10px;
    background: #fff;
    border: 3px solid #0056b3; /* آبی تیره */
    border-radius: 50%;
    margin-top: -5px; /* کمی برود زیر برچسب */
    z-index: -1;
}