/* ==================================================
   مواصلة — دليل الأتوبيسات
   ملف CSS موحد للقائمة والتفاصيل
   التعديلات: مسار التنقل وعناوين الأقسام مثل المقالات
   ================================================== */

/* الحفاظ على تنسيقات الحاسبات المشتركة */
@import url('/trip/style.css?v=25');

/* ==================================================
   1. الإعدادات العامة
   ================================================== */

.bus-page {
    width: min(calc(100% - 28px), 760px);
    max-width: 760px;
    margin: 0 auto;
    padding: 16px 0 42px;
    color: #20252b;
    background: transparent;
    direction: rtl;
    text-align: right;
    font-family: inherit;
    box-sizing: border-box;
}

.bus-page *,
.bus-page *::before,
.bus-page *::after {
    box-sizing: border-box;
}

/* ==================================================
   2. مسار التنقل — مطابق لأسلوب المقالات
   ================================================== */

.bus-page .trip-breadcrumbs {
    width: 100%;
    max-width: 100%;
    margin: 22px 0 18px;
    padding: 0;
    direction: rtl;
    text-align: right;
}

.bus-page .trip-breadcrumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.7;
}

.bus-page .trip-breadcrumbs li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #666;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
}

.bus-page .trip-breadcrumbs li.trip-breadcrumb-separator {
    flex: 0 0 auto;
    margin: 0 9px;
    color: #999;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    user-select: none;
}

.bus-page .trip-breadcrumbs a {
    display: inline;
    color: #d96f0b;
    font-size: inherit;
    font-weight: 700;
    line-height: inherit;
    text-decoration: none;
}

.bus-page .trip-breadcrumbs a:hover {
    color: #b95d08;
    text-decoration: underline;
}

.bus-page .trip-breadcrumbs li[aria-current="page"] {
    min-width: 0;
    color: #666;
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ==================================================
   3. عنوان صفحة الدليل
   ================================================== */

.bus-page .bus-page-heading {
    margin: 0 0 18px;
    padding: 0 0 16px;
    border-bottom: 1px solid #eee5dc;
}

.bus-page .bus-page-heading h1,
.bus-page .bus-detail-heading h1 {
    margin: 0 0 8px;
    color: #173b6d;
    font-size: clamp(23px, 5vw, 30px);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.bus-page .bus-page-heading p {
    margin: 0;
    color: #5f6872;
    font-size: 15px;
    line-height: 1.95;
}

.bus-page .bus-results-count {
    margin: 0 0 8px;
    color: #747b82;
    font-size: 13px;
    line-height: 1.8;
}

/* فاصل ذهبي أسفل عنوان صفحة الدليل إن وُجد */
.bus-page .bus-page-heading::after {
    content: "";
    display: block;
    width: 65px;
    height: 3px;
    margin-top: 12px;
    background: #d49b00;
    border-radius: 3px;
}

/* ==================================================
   4. قائمة خطوط الأتوبيسات
   ================================================== */

.bus-page .bus-lines-list {
    border-top: 1px solid #eee5dc;
}

.bus-page .bus-line-row {
    margin: 0;
    border-bottom: 1px solid #eee5dc;
}

.bus-page .bus-line-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 70px;
    padding: 13px 4px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.bus-page .bus-line-link:hover {
    background: #fff8f0;
}

.bus-page .bus-line-link:focus-visible,
.bus-page .bus-pagination a:focus-visible,
.bus-page .bus-back-link a:focus-visible,
.bus-page .bus-empty-state a:focus-visible {
    outline: 2px solid #d96f0b;
    outline-offset: 3px;
}

/* رقم الخط */

.bus-page .bus-line-number {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 46px;
    padding: 0 8px;
    border: 1px solid #eddfcd;
    border-radius: 12px;
    background: linear-gradient(145deg, #fffaf3, #fff0dc);
    box-shadow: 0 2px 5px rgb(36 70 111 / 5%);
    color: #173b6d;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    direction: ltr;
    unicode-bidi: isolate;
}

/* محتوى الخط */

.bus-page .bus-line-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.bus-page .bus-line-title {
    color: #173b6d;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.7;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.bus-page .bus-line-endpoints {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    color: #303943;
    font-size: 14px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.bus-page .bus-line-direction {
    color: #c27a2c;
    font-weight: 800;
}

.bus-page .bus-line-arrow {
    flex: 0 0 auto;
    color: #d96f0b;
    font-size: 25px;
    line-height: 1;
}

@media (hover: hover) {
    .bus-page .bus-line-link:hover .bus-line-number {
        border-color: #d9a05b;
        background: #fff1dc;
    }

    .bus-page .bus-line-link:hover .bus-line-title {
        color: #b87525;
    }
}

/* ==================================================
   5. الشارات الملونة
   ================================================== */

.bus-page .bus-line-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    color: #747b82;
    font-size: 12px;
    line-height: 1.8;
}

.bus-page .bus-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.bus-page .bus-meta-type {
    border-color: #dce7f4;
    background: #edf3fa;
    color: #24466f;
}

.bus-page .bus-meta-company {
    border-color: #f3dfc2;
    background: #fff3e2;
    color: #87501b;
}

.bus-page .bus-meta-status,
.bus-page .bus-meta-status.is-unknown {
    border-color: #e3e5e8;
    background: #f1f2f4;
    color: #555d67;
}

.bus-page .bus-meta-status.is-active {
    border-color: #cce8d5;
    background: #eaf6ee;
    color: #246b45;
}

.bus-page .bus-meta-status.is-stopped {
    border-color: #f0d1cf;
    background: #fff0ef;
    color: #8b3434;
}

.bus-page .bus-status-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ==================================================
   6. ترقيم الصفحات
   ================================================== */

.bus-page .bus-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 22px;
    color: #68717b;
    font-size: 14px;
}

.bus-page .bus-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid #e8d7c7;
    border-radius: 8px;
    background: #fff;
    color: #173b6d;
    font-weight: 700;
    text-decoration: none;
}

.bus-page .bus-pagination a:hover {
    background: #fff5e9;
}

.bus-page .bus-pagination .is-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #173b6d;
    border-radius: 8px;
    background: #173b6d;
    color: #fff;
    font-weight: 800;
}

.bus-page .bus-pagination .bus-pagination-ellipsis {
    padding: 0 2px;
    color: #777f87;
}

.bus-page .bus-pagination .bus-pagination-prev,
.bus-page .bus-pagination .bus-pagination-next {
    padding-inline: 12px;
}

.bus-page .bus-additional-html {
    overflow-wrap: anywhere;
}

.bus-page .bus-additional-html > :first-child {
    margin-top: 0;
}

.bus-page .bus-additional-html > :last-child {
    margin-bottom: 0;
}

.bus-page .bus-additional-html a {
    color: #c56a12;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bus-page .bus-additional-html img {
    max-width: 100%;
    height: auto;
}

.bus-page .bus-additional-html table {
    width: 100%;
    border-collapse: collapse;
}

.bus-page .bus-additional-html th,
.bus-page .bus-additional-html td {
    padding: 8px;
    border: 1px solid #e6e1db;
}

/* ==================================================
   7. صفحة تفاصيل خط الأتوبيس
   ================================================== */

.bus-page .bus-detail {
    width: 100%;
    margin: 0 auto;
}

.bus-page .bus-detail-heading {
    margin: 0;
    padding: 0 0 22px;
    border-bottom: 1px solid #eee5dc;
}

.bus-page .bus-detail-heading h1 {
    margin: 0 0 18px;
    color: #24466f;
    font-size: 32px;
    line-height: 1.5;
    font-weight: 800;
}

/* إبقاء هذا التنسيق احتياطيًا إن وُجدت eyebrow في صفحة أخرى */
.bus-page .bus-eyebrow {
    display: inline-block;
    margin: 0 0 7px;
    color: #b65d0b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
}

/* شارات التفاصيل */

.bus-page .bus-detail-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}

.bus-page .bus-detail-tags span {
    display: inline-block;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid #f0e2d5;
    border-radius: 7px;
    background: #fff9f3;
    color: #46515c;
    font-size: 12px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.bus-page .bus-detail-tags .bus-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    border-width: 1px;
    font-size: 13px;
    line-height: 1.6;
}

.bus-page .bus-detail-tags strong {
    color: #173b6d;
    font-weight: 700;
}

/* ==================================================
   عناوين الأقسام — مثل عناوين المقالات
   ================================================== */

.bus-page .bus-detail-section {
    margin: 0;
    padding: 24px 0;
    border-bottom: 1px solid #eee5dc;
}

.bus-page .bus-detail-section h2 {
    position: relative;
    margin: 0 0 16px;
    padding: 0 0 9px;
    color: #1f3b68;
    font-size: clamp(20px, 2.5vw, 24px);
    font-weight: 700;
    line-height: 1.55;
    border-bottom: 1px solid #e2e2e2;
}

.bus-page .bus-detail-section h2::after {
    content: "";
    display: block;
    width: 65px;
    height: 3px;
    margin-top: 8px;
    background: #d49b00;
    border-radius: 3px;
}

/* ==================================================
   8. نقطة البداية والنهاية
   ================================================== */

.bus-page .bus-endpoints {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.bus-page .bus-endpoints > div {
    min-width: 0;
    padding: 11px 13px;
    border-right: 3px solid #f28c28;
    border-radius: 0 7px 7px 0;
    background: #fff8f0;
}

.bus-page .bus-endpoints .bus-endpoint-card {
    min-width: 0;
    padding: 17px;
    border: 1px solid #f1e5d5;
    border-right: 4px solid #d9943e;
    border-radius: 10px;
    background: #fff8ef;
}

.bus-page .bus-endpoints .bus-end-point {
    border-right-color: #24466f;
}

.bus-page .bus-endpoints dt {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 9px;
    color: #77736e;
    font-size: 14px;
    line-height: 1.7;
}

.bus-page .bus-point-marker {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #d9943e;
}

.bus-page .bus-end-point .bus-point-marker {
    background: #24466f;
}

.bus-page .bus-endpoints dd {
    margin: 0;
    color: #252c35;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* ==================================================
   9. الوصف ونص خط السير
   ================================================== */

.bus-page .bus-readable-text {
    margin: 0;
    color: #41454b;
    font-size: 17px;
    line-height: 2;
    overflow-wrap: anywhere;
    white-space: normal;
}

/* ==================================================
   10. سعر التذكرة
   ================================================== */

.bus-page .bus-fare-section {
    padding-right: 14px;
    border-right: 4px solid #d9943e;
    background: linear-gradient(90deg, transparent, #fff8ee);
}

.bus-page .bus-fare-section p {
    margin: 0;
    color: #173b6d;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.8;
}

.bus-page .bus-fare-section .bus-fare-value {
    margin: 0;
}

.bus-page .bus-fare-value strong {
    color: #24466f;
    font-size: 27px;
    line-height: 1.7;
}

.bus-page .bus-fare-value span {
    color: #87501b;
    font-size: 18px;
}

/* ==================================================
   11. آخر تحديث والعودة للدليل
   ================================================== */

.bus-page .bus-last-verified {
    margin: 22px 0;
    color: #777f87;
    font-size: 13px;
    line-height: 1.8;
}

.bus-page .bus-back-link {
    margin: 24px 0 10px;
}

.bus-page .bus-back-link a,
.bus-page .bus-empty-state a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    text-decoration: none;
}

/* زر العودة إلى دليل الأتوبيسات */

.bus-page .bus-back-link a {
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 18px;
    border: 1px solid #173b6d;
    border-radius: 9px;
    background: #173b6d;
    color: #fff;
    font-size: 15px;
    line-height: 1.6;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.bus-page .bus-back-link a:hover {
    border-color: #24466f;
    background: #24466f;
    color: #fff;
    text-decoration: none;
}

.bus-page .bus-back-link a:active {
    transform: translateY(1px);
}

.bus-page .bus-empty-state a {
    color: #ad6b20;
}

.bus-page .bus-empty-state a:hover {
    text-decoration: underline;
}

/* ==================================================
   12. رسائل عدم وجود نتائج والأخطاء
   ================================================== */

.bus-page .bus-empty-state,
.bus-page .bus-notice {
    margin: 18px 0;
    padding: 18px 16px;
    border: 1px solid #f0e2d5;
    border-radius: 10px;
    background: #fff9f3;
    color: #303943;
    font-size: 15px;
    line-height: 1.9;
}

.bus-page .bus-empty-state h1,
.bus-page .bus-empty-state h2 {
    margin: 0 0 8px;
    color: #173b6d;
    font-size: 20px;
    line-height: 1.6;
}

.bus-page .bus-empty-state p {
    margin: 6px 0 0;
}

/* ==================================================
   13. تحسينات الموبايل
   ================================================== */

@media (max-width: 600px) {
    .bus-page {
        width: calc(100% - 28px);
        padding-top: 12px;
        padding-bottom: 30px;
    }

    .bus-page .trip-breadcrumbs {
        margin: 18px 0 16px;
    }

    .bus-page .trip-breadcrumbs li {
        font-size: 14px;
        max-width: 100%;
        line-height: 1.7;
    }

    .bus-page .trip-breadcrumbs li.trip-breadcrumb-separator {
        margin: 0 7px;
        font-size: 16px;
    }

    .bus-page .trip-breadcrumbs li[aria-current="page"] {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        color: #666;
        line-height: 1.65;
    }

    .bus-page .bus-page-heading {
        margin-bottom: 14px;
        padding-bottom: 13px;
    }

    .bus-page .bus-page-heading p {
        font-size: 14px;
        line-height: 1.9;
    }

    .bus-page .bus-page-heading::after {
        width: 58px;
        height: 3px;
        margin-top: 12px;
    }

    .bus-page .bus-line-link {
        gap: 9px;
        min-height: 76px;
        padding: 11px 1px;
    }

    .bus-page .bus-line-number {
        min-width: 44px;
        min-height: 42px;
        padding-inline: 6px;
        font-size: 15px;
    }

    .bus-page .bus-line-title {
        font-size: 15px;
    }

    .bus-page .bus-line-endpoints {
        font-size: 13px;
    }

    .bus-page .bus-line-meta {
        gap: 6px;
        margin-top: 9px;
        font-size: 11px;
    }

    .bus-page .bus-meta-badge {
        padding: 4px 7px;
        font-size: 11px;
    }

    .bus-page .bus-detail-heading {
        padding-bottom: 18px;
    }

    .bus-page .bus-detail-heading h1 {
        font-size: 25px;
        line-height: 1.55;
    }

    .bus-page .bus-detail-tags {
        gap: 7px;
    }

    .bus-page .bus-detail-tags .bus-meta-badge {
        max-width: 100%;
        padding: 6px 8px;
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    .bus-page .bus-detail-section {
        padding: 20px 0;
    }

    .bus-page .bus-detail-section h2 {
        margin-bottom: 15px;
        padding-bottom: 8px;
        font-size: 22px;
    }

    .bus-page .bus-detail-section h2::after {
        width: 55px;
        height: 3px;
        margin-top: 7px;
    }

    .bus-page .bus-endpoints {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .bus-page .bus-endpoints .bus-endpoint-card {
        padding: 14px;
    }

    .bus-page .bus-endpoints dd {
        font-size: 19px;
    }

    .bus-page .bus-readable-text {
        font-size: 16px;
        line-height: 1.9;
    }

    .bus-page .bus-fare-value strong {
        font-size: 25px;
    }

    .bus-page .bus-back-link a {
        min-height: 44px;
        padding: 10px 15px;
        font-size: 14px;
    }
}

/* ==================================================
   14. توحيد الخطوط والتركيز
   ================================================== */

.bus-page,
.bus-page .trip-breadcrumbs,
.bus-page .bus-page-heading,
.bus-page .bus-detail,
.bus-page .bus-detail-heading,
.bus-page .bus-detail-section,
.bus-page .bus-detail-tags,
.bus-page .bus-back-link {
    font-family: inherit;
}

.bus-page .bus-back-link a:focus-visible {
    outline: 2px solid #d9943e;
    outline-offset: 3px;
}

/* ==================================================
   تحديث التصميم: هوية مواصلة (كحلي + برتقالي + خلفيات هادئة)
   ================================================== */
.bus-page {
    width: min(calc(100% - 32px), 900px);
    max-width: 900px;
    color: #263746;
}
.bus-page .bus-page-heading {
    padding: 8px 0 24px;
    margin-bottom: 22px;
    border-bottom: 0;
}
.bus-page .bus-page-heading h1 {
    color: #203f68;
    font-size: clamp(28px, 5vw, 36px);
    line-height: 1.4;
}
.bus-page .bus-page-heading p {
    max-width: 760px;
    font-size: 16px;
    line-height: 1.9;
}
.bus-page .bus-page-heading::after {
    width: 76px;
    height: 4px;
    margin-top: 18px;
    background: #e79a35;
}
.bus-page .bus-lines-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    border: 0;
}
.bus-page .bus-line-row {
    min-width: 0;
    border: 1px solid #e8e9e9;
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bus-page .bus-line-row:hover {
    border-color: #e6c28d;
    box-shadow: 0 5px 18px rgb(32 63 104 / 7%);
}
.bus-page .bus-line-link {
    min-height: 136px;
    height: 100%;
    align-items: flex-start;
    gap: 10px;
    padding: 17px 15px;
    border-radius: 0;
    background: linear-gradient(135deg, #fff 0%, #fffdf9 100%);
}
.bus-page .bus-line-main { gap: 7px; }
.bus-page .bus-line-title {
    color: #24466f;
    font-size: 17px;
    line-height: 1.65;
}
.bus-page .bus-line-endpoints {
    margin-top: 0;
    color: #606b75;
    font-size: 14px;
}
.bus-page .bus-line-arrow {
    margin-top: 1px;
    color: #d98b2b;
}
.bus-page .bus-line-meta { margin-top: 5px; }
.bus-page .bus-meta-badge {
    border-color: #eee4d4;
    border-radius: 8px;
    background: #fff7eb;
    color: #795629;
}
.bus-page .bus-meta-type {
    border-color: #dce7f2;
    background: #edf4fb;
    color: #294a6e;
}
.bus-page .bus-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0 10px;
}
.bus-page .bus-pagination a,
.bus-page .bus-pagination span {
    min-width: 42px;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fff;
    color: #24466f;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
}
.bus-page .bus-pagination .is-current {
    border-color: #24466f;
    background: #24466f;
    color: #fff;
}
.bus-page .bus-detail {
    padding-bottom: 12px;
}
.bus-page .bus-detail-heading {
    padding: 12px 0 24px;
    border-bottom: 1px solid #e9e9e7;
}
.bus-page .bus-detail-heading h1 {
    color: #203f68;
    font-size: clamp(27px, 5vw, 38px);
    line-height: 1.45;
}
.bus-page .bus-detail-section {
    margin-top: 18px;
    padding: 22px;
    border: 1px solid #e8e9e9;
    border-radius: 14px;
    background: #fff;
}
.bus-page .bus-detail-section h2 {
    color: #24466f;
    border-bottom-color: #e9e9e7;
}
.bus-page .bus-detail-section h2::after {
    background: #e79a35;
}
.bus-page .bus-route-endpoints {
    background: #fffaf3;
}
.bus-page .bus-readable-text {
    color: #424c56;
    font-size: 16px;
    line-height: 2;
    overflow-wrap: anywhere;
}
.bus-page .bus-readable-text h3,
.bus-page .bus-readable-text h4 {
    color: #24466f;
    line-height: 1.6;
}
.bus-page .bus-readable-text a {
    color: #b96812;
}
.bus-page .bus-fare-section {
    border-right: 4px solid #e79a35;
    background: #fffaf3;
}
@media (max-width: 650px) {
    .bus-page { width: calc(100% - 24px); padding-top: 10px; }
    .bus-page .bus-lines-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .bus-page .bus-line-link { min-height: 0; padding: 15px 13px; }
    .bus-page .bus-line-title { font-size: 16px; }
    .bus-page .bus-detail-section { padding: 17px 14px; margin-top: 13px; }
    .bus-page .bus-detail-heading h1 { font-size: 27px; }
}