/*
 * Allen passenger UI — final cascade layer
 *
 * Older customer pages include page-local CSS inside their content blocks. This
 * file is loaded after those blocks so public user journeys use one calm, light
 * visual system without changing admin/operations screens or backend behavior.
 */

:root {
    --allen-ui-ink: #220d5f;
    --allen-ui-muted: #7b7296;
    --allen-ui-line: #e8e2f2;
    --allen-ui-surface: #ffffff;
    --allen-ui-soft: #faf8ff;
    --allen-ui-purple: #6221dc;
    --allen-ui-purple-2: #913af2;
    --allen-ui-lime: #d8fa18;
    --allen-ui-success: #238b61;
}

body.liquid-body:not(.home-screen-page) {
    background: #f8f7ff !important;
    color: var(--allen-ui-ink);
    font-family: "Alexandria", sans-serif;
}

/* Keep labels, inputs, and calls to action in the same Arabic type system.
   Icon elements retain their own Font Awesome family. */
body.liquid-body:not(.home-screen-page) button,
body.liquid-body:not(.home-screen-page) input,
body.liquid-body:not(.home-screen-page) select,
body.liquid-body:not(.home-screen-page) textarea {
    font-family: "Alexandria", sans-serif !important;
}

body.liquid-body:not(.home-screen-page) .app-main {
    color: var(--allen-ui-ink);
}

body.liquid-body:not(.home-screen-page) .page-hero,
body.liquid-body:not(.home-screen-page) .detail-card,
body.liquid-body:not(.home-screen-page) .list-card,
body.liquid-body:not(.home-screen-page) .surface-card,
body.liquid-body:not(.home-screen-page) .notice-card {
    border-color: var(--allen-ui-line);
    background: var(--allen-ui-surface);
    box-shadow: 0 10px 25px rgba(43, 21, 106, 0.06);
}

body.liquid-body:not(.home-screen-page) .page-hero {
    padding: clamp(20px, 4vw, 30px);
    border-radius: 26px;
}

body.liquid-body:not(.home-screen-page) .page-hero h2,
body.liquid-body:not(.home-screen-page) .section-header h2,
body.liquid-body:not(.home-screen-page) .section-header h3 {
    color: var(--allen-ui-ink);
    letter-spacing: -0.45px;
}

body.liquid-body:not(.home-screen-page) .page-hero p,
body.liquid-body:not(.home-screen-page) .section-header p,
body.liquid-body:not(.home-screen-page) .muted-copy {
    color: var(--allen-ui-muted);
}

body.liquid-body:not(.home-screen-page) .button,
body.liquid-body:not(.home-screen-page) .button-accent,
body.liquid-body:not(.home-screen-page) .action-btn.primary {
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, var(--allen-ui-purple), var(--allen-ui-purple-2));
    box-shadow: 0 10px 20px rgba(98, 33, 220, 0.18);
}

body.liquid-body:not(.home-screen-page) .button-secondary,
body.liquid-body:not(.home-screen-page) .action-btn.secondary {
    border-color: #ded5ef;
    background: #fff;
    color: #5621b8;
}

/* --- رحلاتي: one compact status view, then the next available action. --- */
body.liquid-body.bookings-page {
    font-family: "Alexandria", sans-serif !important;
    background: #f8f7ff !important;
    color: var(--allen-ui-ink) !important;
}

.bookings-page .bookings-container {
    width: min(100%, 780px);
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 auto;
    padding: 0 12px 112px;
}

.bookings-page .bookings-container > .page-header { order: 1; }
.bookings-page .bookings-container > .filters-section { order: 2; }
.bookings-page #activeBookings { order: 3; }
.bookings-page #pendingFormBookings { order: 4; }
.bookings-page #completedFormBookings { order: 5; }

.bookings-page .page-header {
    padding: 20px !important;
    overflow: hidden;
    border: 1px solid var(--allen-ui-line) !important;
    border-radius: 24px !important;
    background: var(--allen-ui-surface) !important;
    box-shadow: 0 10px 24px rgba(41, 20, 99, 0.06) !important;
}

.bookings-page .page-header::before { display: none; }

.bookings-page .page-title {
    margin: 0 !important;
    color: var(--allen-ui-ink) !important;
    font-size: clamp(21px, 6vw, 27px) !important;
    font-weight: 900 !important;
}

.bookings-page .page-title i {
    color: var(--allen-ui-purple);
    font-size: 21px !important;
}

.bookings-page .header-stats {
    margin-top: 15px;
    gap: 8px;
}

.bookings-page .header-stats .stat-card {
    min-height: 64px;
    padding: 9px;
    border: 1px solid #e8e1f2;
    border-radius: 15px;
    background: var(--allen-ui-soft) !important;
    box-shadow: none !important;
}

.bookings-page .stat-number {
    color: var(--allen-ui-purple) !important;
    font-size: 21px !important;
}

.bookings-page .stat-label {
    color: var(--allen-ui-muted) !important;
    font-size: 10px !important;
}

.bookings-page .filters-section,
.bookings-page .bookings-section {
    margin-top: 0 !important;
    padding: 15px !important;
    border: 1px solid var(--allen-ui-line) !important;
    border-radius: 22px !important;
    background: var(--allen-ui-surface) !important;
    box-shadow: 0 8px 20px rgba(41, 20, 99, 0.045) !important;
}

.bookings-page .filters-section .container,
.bookings-page .bookings-section .container,
.bookings-page .page-header .container {
    width: 100%;
    max-width: none;
    padding: 0;
}

.bookings-page .search-box {
    height: 50px;
    border: 1px solid #ded6ed !important;
    border-radius: 15px !important;
    background: var(--allen-ui-soft) !important;
    color: var(--allen-ui-purple);
}

.bookings-page .search-box input {
    color: var(--allen-ui-ink) !important;
    background: transparent !important;
}

.bookings-page .filter-buttons { margin-top: 10px; }

.bookings-page .filter-btn {
    min-height: 36px;
    border: 1px solid #e1d9ee !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #62577e !important;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
}

.bookings-page .filter-btn.active {
    border-color: var(--allen-ui-purple) !important;
    background: var(--allen-ui-purple) !important;
    color: #fff !important;
}

.bookings-page .bookings-section > .container > p { display: none; }

.bookings-page .section-header {
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ede8f5;
}

.bookings-page .section-title,
.bookings-page .section-title i {
    color: var(--allen-ui-ink) !important;
    font-size: 16px !important;
    font-weight: 900;
}

.bookings-page .section-count {
    border-radius: 999px;
    background: #f0eaff !important;
    color: #6425d8 !important;
}

.bookings-page .bookings-grid { gap: 10px; }

.bookings-page .booking-card {
    overflow: hidden;
    border: 1px solid #e8e2f2 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.bookings-page .booking-card .card-header {
    padding: 14px !important;
    border-color: #eee9f5 !important;
    background: #fcfbff !important;
}

.bookings-page .booking-card .card-content { padding: 14px !important; }

.bookings-page .trip-title,
.bookings-page .booking-card h3,
.bookings-page .booking-card strong,
.bookings-page .detail-value {
    color: #2b1466 !important;
}

.bookings-page .trip-meta,
.bookings-page .detail-label,
.bookings-page .booking-card p {
    color: var(--allen-ui-muted) !important;
}

.bookings-page .detail-item,
.bookings-page .booking-code-section {
    border-color: #eee9f5 !important;
    background: #fbfaff !important;
}

.bookings-page .seat-number,
.bookings-page .status-badge.active {
    background: #eaffe0 !important;
    color: #4f7100 !important;
}

.bookings-page .status-badge { color: #5e4d18 !important; }

.bookings-page .card-actions {
    gap: 8px;
}

.bookings-page .action-btn {
    min-height: 44px;
    border-radius: 13px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
}

.bookings-page .action-btn.danger {
    border-color: #ffd6df !important;
    background: #fff7f9 !important;
    color: #c4385d !important;
}

.bookings-page .empty-state {
    padding: 26px 16px !important;
    border: 1px dashed #ddd3ed !important;
    border-radius: 18px !important;
    background: #fbfaff !important;
    color: var(--allen-ui-ink) !important;
}

.bookings-page .empty-icon {
    color: #6729df !important;
    background: #f0eaff !important;
}

.bookings-page .floating-menu { display: none !important; }

/* Generic passenger pages: readable surfaces and restrained hierarchy. */
.subscriptions-page .page-hero,
.subscription-checkout-page .subscription-checkout-hero,
.installments-page .page-hero,
.profile-page .page-hero,
.about-page .page-hero {
    color: var(--allen-ui-ink);
    background: var(--allen-ui-surface);
    border: 1px solid var(--allen-ui-line);
    box-shadow: 0 10px 25px rgba(43, 21, 106, 0.06);
}

.subscriptions-page .pricing-card,
.subscription-checkout-page .subscription-plan-summary,
.subscription-checkout-page .subscription-payment-card,
.installments-page .detail-card,
.profile-page .detail-card,
.about-page .detail-card {
    border-color: var(--allen-ui-line);
    background: #fff;
    box-shadow: 0 9px 22px rgba(43, 21, 106, 0.05);
}

.subscriptions-page .pricing-card .feature-list li:nth-child(n + 4) {
    display: none;
}

/* The legacy mobile theme inserted a bottom-nav-sized blank band before plans.
   The fixed nav already has its own safe area, so the plans should follow the
   summary immediately. */
.subscriptions-page .pricing-grid {
    margin-top: 0 !important;
}

.subscriptions-page .pricing-card .section-header p {
    margin: 3px 0 0;
}

.profile-page .page-hero .stack-actions .button {
    min-height: 48px;
    padding-inline: 20px;
    border-radius: 14px;
}

@media (max-width: 720px) {
    body.liquid-body:not(.home-screen-page) .page-hero { border-radius: 22px; }

    .bookings-page .bookings-container {
        gap: 10px;
        padding: 0 10px 100px;
    }

    .bookings-page .page-header,
    .bookings-page .filters-section,
    .bookings-page .bookings-section {
        padding: 14px !important;
        border-radius: 19px !important;
    }

    .bookings-page .header-stats .stat-card { min-height: 59px; }
    .bookings-page .bookings-section .section-header { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .bookings-page *,
    body.liquid-body:not(.home-screen-page) .app-main > * {
        animation: none !important;
        transition: none !important;
    }
}