/* TRIP Core Brand System — shared visual tokens, controls and iconography */
:root{
 --trip-orange:#E87524;--trip-orange-hi:#F58A3C;--trip-navy:#101D35;--trip-ink:#080D15;
 --trip-surface:#FFFFFF;--trip-surface-soft:#F5F6F8;--trip-border:#E5E8EE;
 --trip-radius:18px;--trip-radius-lg:24px;--trip-elevation:0 14px 38px rgba(16,29,53,.09);
 --accent:var(--trip-orange);--navy:var(--trip-navy);
}
body{font-family:"Tajawal","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0}
body.dark{--trip-surface:#121B29;--trip-surface-soft:#0B1220;--trip-border:#263246;--trip-elevation:0 18px 48px rgba(0,0,0,.30)}
button,.primary,.secondary,.role,.tab,.service-choice{transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--trip-orange) 70%,white);outline-offset:2px}
button:disabled{opacity:.48;cursor:not-allowed;filter:saturate(.55)}
.panel{border-radius:var(--trip-radius-lg);box-shadow:var(--trip-elevation)}
.primary{background:linear-gradient(135deg,var(--trip-orange-hi),var(--trip-orange));border:1px solid #d9681e;color:#fff;box-shadow:0 7px 18px rgba(232,117,36,.20);font-weight:800}
.primary:hover:not(:disabled){filter:brightness(1.045);box-shadow:0 10px 24px rgba(232,117,36,.27);transform:translateY(-1px)}
.secondary{background:var(--panel);border:1px solid var(--trip-border);color:var(--text);font-weight:700}
.secondary:hover:not(:disabled){border-color:var(--trip-orange);color:var(--trip-orange)}
.role{border-radius:15px;font-weight:750}
.role.selected{background:color-mix(in srgb,var(--trip-orange) 10%,var(--panel));border:1.5px solid var(--trip-orange);color:var(--trip-orange)}
input,select,textarea{border-radius:13px}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:62px;padding:8px 5px;border-radius:15px;font-size:12px;font-weight:750}
.tab::before{font-family:system-ui,sans-serif;font-size:19px;line-height:1.15;font-weight:400}
.tab[data-tab="home"]::before{content:"⌂"}
.tab[data-tab="trips"]::before{content:"◈"}
.tab[data-tab="wallet"]::before{content:"▤"}
.tab[data-tab="store"]::before{content:"▣"}
.tab[data-tab="settings"]::before{content:"⚙"}
.tab.active{background:var(--trip-navy);color:#fff;border-color:var(--trip-navy);box-shadow:0 6px 18px rgba(16,29,53,.18)}
body.dark .tab.active{background:var(--trip-orange);border-color:var(--trip-orange);color:#fff}
.tabs{gap:7px}
.service-choice{border-radius:17px;border:1px solid var(--trip-border)}
.service-choice.selected{border-color:var(--trip-orange);box-shadow:inset 0 0 0 1px var(--trip-orange),0 7px 18px rgba(232,117,36,.10)}
.iconbtn,.theme-switch{border-radius:16px}
header .brand strong{letter-spacing:.13em}
@media(max-width:560px){
 body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
 body:has(#appPanel:not(.hidden)) .tabs{position:fixed;z-index:1000;left:0;right:0;bottom:0;margin:0;padding:8px 10px calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;background:color-mix(in srgb,var(--panel) 94%,transparent);border-top:1px solid var(--trip-border);backdrop-filter:blur(18px);box-shadow:0 -8px 28px rgba(8,13,21,.10)}
 body:has(#appPanel:not(.hidden)) .tab{min-width:0;min-height:56px;border:0;background:transparent;font-size:10px;white-space:nowrap}
 body:has(#appPanel:not(.hidden)) .tab.active{background:var(--trip-navy);color:#fff}
 body.dark:has(#appPanel:not(.hidden)) .tab.active{background:var(--trip-orange)}
 main{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
}
@media(min-width:561px){.tabs{padding:5px;background:var(--trip-surface-soft);border:1px solid var(--trip-border);border-radius:19px}.tab{flex:1}}