/* ==========================================================================
   UmrahCore — /mobile-apps page styles (loaded only on that page via
   page_styles()). Same tokens as main.css; logical properties for RTL.
   Shared bits (.ua-play, .ua-icon, .ua-promo) live in main.css.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------ */
.ua-crumbs { margin-bottom: 1.4rem; font-size: .86rem; }
.ua-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; padding: 0; list-style: none; color: rgba(248, 243, 230, .72); }
.ua-crumbs li + li::before { content: "›"; margin-inline-end: .35rem; color: var(--gold-soft); }
[dir="rtl"] .ua-crumbs li + li::before { content: "‹"; }
.ua-crumbs a { color: var(--gold-soft); text-decoration: underline; text-decoration-color: rgba(240, 226, 191, .35); text-underline-offset: 3px; }
.ua-crumbs a:hover { color: var(--paper); }
.ua-crumbs [aria-current] { color: var(--paper); }
.ua-hero__chips { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 1.5rem; padding: 0; list-style: none; font-size: .9rem; color: rgba(248, 243, 230, .86); }
.ua-hero__chips li { display: inline-flex; align-items: center; gap: .4rem; }
.ua-hero__chips .icon { color: var(--gold-soft); }

/* --- Overview cards -------------------------------------------------------- */
.ua-overview { padding: 0; list-style: none; }
.ua-card { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.ua-card:hover { transform: none; }
.ua-card__name { margin: .5rem 0 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--ink); }
.ua-card__for { margin: 0 0 .6rem; color: var(--ink-3); font-size: .95rem; }
.ua-card__actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.ua-card__more { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .92rem; }
[dir="rtl"] .ua-card__more .icon { transform: scaleX(-1); }

/* --- App sections ---------------------------------------------------------- */
.ua-app { scroll-margin-top: 90px; }
.ua-app__split { align-items: start; }
.ua-app__brand { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.ua-app__brand .eyebrow { margin: 0; }
.ua-app__for { margin: .15rem 0 0; font-size: .92rem; color: var(--ink-3); }
.ua-app .lede { margin-bottom: 1.4rem; }
.ua-app__label { margin: 0 0 .8rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); font-family: inherit; font-weight: 600; }
.ua-app__access {
    display: flex; gap: .6rem; align-items: flex-start;
    margin: 1.4rem 0 0; padding: .9rem 1rem;
    background: var(--surface-2); border-radius: var(--radius-sm);
    font-size: .92rem; color: var(--ink-2);
}
.ua-app__access .icon { flex: none; margin-top: .15rem; color: var(--primary); }
.ua-app__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.ua-app__actions .btn { display: inline-flex; align-items: center; gap: .5rem; }

/* Screenshot rail: horizontal scroll-snap, works without JS */
.ua-shots {
    display: flex; gap: 1rem; margin: 0; padding: .4rem .2rem 1rem; list-style: none;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: thin;
}
.ua-shots li { flex: 0 0 auto; scroll-snap-align: start; }
.ua-shot {
    display: block; width: clamp(180px, 22vw, 240px); height: auto; aspect-ratio: 9 / 16;
    border-radius: var(--radius); border: var(--border); box-shadow: var(--shadow-md);
    background: var(--surface-2);
}
.ua-shots:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 4px; border-radius: var(--radius-sm); }
@media (max-width: 600px) { .ua-shot { width: 62vw; } }

/* --- Comparison table ------------------------------------------------------ */
.ua-table-wrap { overflow-x: auto; border: var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.ua-table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .95rem; }
.ua-table th, .ua-table td { padding: .85rem 1rem; text-align: start; vertical-align: top; border-bottom: var(--border); }
.ua-table thead th { font-family: var(--font-display); font-size: 1.02rem; color: var(--primary); background: var(--surface-2); }
.ua-table tbody th { font-weight: 600; color: var(--ink); width: 22%; }
.ua-table td { color: var(--ink-2); }
.ua-table tbody tr:last-child > * { border-bottom: 0; }
.ua-honest { display: grid; gap: .7rem; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.ua-honest li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-2); font-size: .95rem; }
.ua-honest .icon { flex: none; margin-top: .15rem; color: var(--gold); }