html,body{max-width:100%;overflow-x:hidden}*,*::before,*::after{box-sizing:border-box}img,svg,video,canvas{max-width:100%}body{width:100%;}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#07090c;color:#f5f6f8}button,input,textarea{font:inherit}button,a{cursor:pointer}button{border:0}.hidden{display:none!important}
:root{--gold:#ffc400;--gold2:#ffdf58;--ink:#090b0e;--panel:#11151b;--panel2:#171c23;--line:#2b313b;--muted:#9aa3af;--white:#fff}
.marketingHeader{height:82px;position:sticky;top:0;z-index:50;background:rgba(7,9,12,.86);backdrop-filter:blur(18px);border-bottom:1px solid #ffffff12;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1240px)/2));gap:24px}.platformBrand{display:flex;align-items:center;gap:12px;user-select:none}.platformBrand img{width:54px;height:54px;object-fit:contain}.platformBrand strong{font-size:18px;letter-spacing:.02em}.platformBrand small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.desktopNav{display:flex;gap:28px}.desktopNav a{color:#cdd3dc;text-decoration:none;font-size:14px;font-weight:700}.headerActions{display:flex;gap:9px}.linkBtn,.outlineBtn,.goldBtn{border-radius:13px;padding:11px 16px;font-weight:900}.linkBtn{background:transparent;color:#e5e7eb}.outlineBtn{background:transparent;color:#f8fafc;border:1px solid #ffffff26;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.goldBtn{background:linear-gradient(180deg,#ffd538,#ffb900);color:#0a0b0c;box-shadow:0 10px 30px #ffbe0025}.goldBtn.big,.outlineBtn.big{padding:15px 20px}.full{width:100%}
.marketingMain{max-width:1240px;margin:auto;padding:0 24px}.salesHero{min-height:690px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;padding:72px 0 42px}.heroCopy{position:relative;z-index:2}.heroBadge,.eyebrow,.sectionIntro>span,.modalMode>span{color:var(--gold);font-weight:950;letter-spacing:.16em;font-size:11px}.salesHero h1{font-size:clamp(48px,6vw,82px);line-height:.95;letter-spacing:-.055em;margin:18px 0 24px;max-width:760px}.salesHero h1 em{font-style:normal;color:var(--gold)}.salesHero p{font-size:18px;line-height:1.65;color:#b8c0ca;max-width:690px}.heroCtas{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 18px}.trustRow{display:flex;gap:18px;flex-wrap:wrap;color:#9199a4;font-size:12px;font-weight:700}.heroVisual{height:570px;position:relative;display:grid;place-items:center}.glow{position:absolute;width:420px;height:420px;border-radius:50%;background:#fabe0028;filter:blur(45px)}.phoneMock{position:absolute;width:245px;height:490px;border:7px solid #20242b;border-radius:42px;background:#f5f6f7;color:#111;box-shadow:0 35px 80px #0009;padding:20px;overflow:hidden}.phoneFront{transform:translate(48px,-4px) rotate(5deg);z-index:3}.phoneBack{transform:translate(-105px,30px) rotate(-8deg);background:#101318;color:#fff;z-index:2}.phoneFront:before,.phoneBack:before{content:"";display:block;width:84px;height:21px;border-radius:14px;background:#15181d;position:absolute;top:10px;left:50%;transform:translateX(-50%)}.miniLogo{width:54px;height:54px;border-radius:17px;background:#111;color:var(--gold);display:grid;place-items:center;font-weight:1000;margin:38px auto 6px}.phoneFront>small{display:block;text-align:center;font-weight:950;font-size:10px}.phoneFront h3{margin:35px 0 14px;font-size:25px}.fakeInput{background:#fff;border:1px solid #dfe3e8;border-radius:13px;padding:13px;margin:9px 0;font-size:12px;color:#616a75}.phoneFront>button{width:100%;background:#111;color:#fff;padding:13px;border-radius:13px;font-weight:900;margin-top:8px}.phoneFront footer{font-size:8px;text-align:center;margin-top:58px;color:#89919b}.miniTop{margin-top:34px;display:flex;justify-content:space-between;font-weight:900}.miniTop i{color:#4ade80}.miniMap{height:260px;background:radial-gradient(circle at 50% 45%,#404854,#181c22 48%,#101318);border-radius:22px;margin:18px 0;position:relative;display:grid;place-items:center;font-size:40px}.miniMap span{position:absolute;right:48px;bottom:62px}.miniMap b{position:absolute;bottom:18px;font-size:15px;background:#fff;color:#111;border-radius:20px;padding:7px 12px}.miniCard{background:#fff;color:#111;border-radius:18px;padding:14px}.miniCard small{display:block;color:#69717b;margin-top:5px}.floatingLogo{position:absolute;right:10px;bottom:40px;width:112px;z-index:4;filter:drop-shadow(0 18px 20px #0009)}
.metricStrip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #ffffff13;border-radius:24px;overflow:hidden;background:#ffffff06}.metricStrip div{padding:22px 24px;display:flex;align-items:center;gap:14px;border-right:1px solid #ffffff12}.metricStrip div:last-child{border:0}.metricStrip b{font-size:12px;color:var(--gold)}.metricStrip span{font-weight:850;color:#d8dde5}.sectionBlock,.journeySection,.installSection,.pricingSection{padding:110px 0}.sectionIntro{text-align:center;max-width:790px;margin:0 auto 48px}.sectionIntro.left{text-align:left;margin-left:0}.sectionIntro h2{font-size:clamp(34px,4vw,55px);line-height:1.05;letter-spacing:-.04em;margin:14px 0}.sectionIntro p{color:#98a1ad;font-size:17px;line-height:1.6}.stepsGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stepsGrid article,.featureGrid article,.journeyCard{background:linear-gradient(145deg,#12161c,#0d1014);border:1px solid #ffffff10;border-radius:24px;padding:26px;box-shadow:inset 0 1px #ffffff08}.stepNo{width:42px;height:42px;border:1px solid #ffd32d55;color:var(--gold);border-radius:13px;display:grid;place-items:center;font-weight:1000}.stepsGrid h3,.featureGrid h3,.journeyCard h3{font-size:20px;margin:20px 0 9px}.stepsGrid p,.featureGrid p,.journeyCard li{color:#99a2ae;line-height:1.55;font-size:14px}.journeyColumns{display:grid;grid-template-columns:1fr 120px 1fr;gap:24px;align-items:stretch}.journeyCard{padding:34px}.journeyIcon{font-size:34px}.journeyCard ul{list-style:none;padding:0;margin:20px 0}.journeyCard li{padding:11px 0;border-bottom:1px solid #ffffff0e}.journeyCard li:before{content:"✓";color:var(--gold);font-weight:950;margin-right:9px}.journeyFlow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px}.journeyFlow span{width:72px;height:72px;border-radius:50%;border:1px solid #ffc40055;background:#ffc4000d;display:grid;place-items:center;color:var(--gold);font-weight:1000}.journeyFlow i{font-style:normal;color:#505967}.darkFeatures{position:relative}.featureGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.featureGrid article>b{font-size:29px}.installSection{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.installSection h2{font-size:45px;letter-spacing:-.04em;line-height:1.05;margin:15px 0}.installSection p{color:#9da6b2;line-height:1.6}.devicePills{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.devicePills span{padding:10px 14px;border-radius:999px;border:1px solid #ffffff17;background:#ffffff07;font-weight:800;font-size:13px}.installDemo{min-height:330px;display:grid;place-items:center;border-radius:32px;background:radial-gradient(circle,#f7bd0027,#11151b 55%,#0a0c0f);border:1px solid #ffffff0d}.installBubbleMock{width:min(420px,90%);background:#fff;color:#111;border-radius:22px;padding:16px;display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;box-shadow:0 30px 70px #0009;position:relative}.installBubbleMock>button{position:absolute;right:5px;top:1px;background:transparent;font-size:20px}.installBubbleMock img{width:54px}.installBubbleMock small{display:block;color:#6b7280;margin-top:3px}.installBubbleMock>strong{background:#111;color:var(--gold);border-radius:10px;padding:10px;font-size:11px}.pricingSection{display:grid;place-items:center}.priceCard{width:min(520px,100%);background:linear-gradient(165deg,#171b21,#0c0f13);border:1px solid #ffcb293d;border-radius:30px;padding:36px;box-shadow:0 35px 90px #0008;position:relative;text-align:center}.popular{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:#111;padding:7px 15px;border-radius:999px;font-size:10px;font-weight:1000;letter-spacing:.13em}.priceCard>img{width:92px}.priceCard h3{font-size:25px;margin:8px}.price{display:flex;justify-content:center;align-items:flex-end;margin:12px 0}.price sup{font-size:24px;font-weight:900;align-self:center}.price b{font-size:64px;letter-spacing:-.06em}.price span{color:#9da5af;padding-bottom:11px}.trialText{color:#d9dde4}.priceCard ul{text-align:left;list-style:none;padding:0;margin:24px 0}.priceCard li{padding:10px 0;border-bottom:1px solid #ffffff0d;color:#c7cdd5}.priceCard li:before{content:"✓";color:var(--gold);font-weight:950;margin-right:10px}.priceCard .outlineBtn{margin-top:9px}.priceCard>small{display:block;color:#7f8995;line-height:1.45;margin-top:15px}.finalCta{margin:30px 0 100px;background:linear-gradient(120deg,#191e25,#0c0f13);border:1px solid #ffffff11;border-radius:32px;padding:32px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}.finalCta img{width:100px}.finalCta span{color:var(--gold);font-weight:950;font-size:11px;letter-spacing:.13em}.finalCta h2{font-size:30px;margin:6px 0}.finalCta p{color:#99a3ae;margin:0}.marketingFooter{border-top:1px solid #ffffff10;padding:35px max(24px,calc((100vw - 1240px)/2));display:grid;grid-template-columns:1fr auto;gap:7px;color:#8e98a4}.marketingFooter div{display:flex;align-items:center;gap:10px;color:#fff}.marketingFooter img{width:42px}.marketingFooter small{grid-column:1/-1;font-size:11px}
.modalBackdrop{position:fixed;inset:0;z-index:100;background:#000b;backdrop-filter:blur(12px);display:grid;place-items:center;padding:20px}.authModal{width:min(450px,100%);background:#11151b;border:1px solid #ffffff16;border-radius:28px;padding:30px;position:relative;box-shadow:0 40px 100px #000}.authModal>img{width:80px;display:block;margin:0 auto 12px}.modalClose{position:absolute;right:12px;top:10px;background:transparent;color:#fff;font-size:28px}.modalMode h2{text-align:center;font-size:30px;margin:8px 0 22px}.modalMode>span{display:block;text-align:center}.modalMode label{display:block;color:#aeb6c0;font-size:12px;font-weight:800;margin:11px 0}.modalMode input{width:100%;margin-top:6px;background:#090c10;border:1px solid #2b323c;color:#fff;border-radius:13px;padding:13px}.modalMode>small{display:block;text-align:center;color:#798390;margin-top:12px}.modalPrice{text-align:center;font-weight:1000;font-size:44px;margin:18px}.modalPrice small{font-size:14px;color:#9ca3af}
/* TENANT APP */
#tenantApp{min-height:100vh;background:#f3f4f6;color:#111827;padding-bottom:54px}.appHeader{position:sticky;top:0;z-index:40;background:#111827;color:#fff;padding:12px max(16px,env(safe-area-inset-left));display:flex;justify-content:space-between;align-items:center;gap:12px}.brandBlock{display:flex;align-items:center;gap:10px;user-select:none}.brandLogo{width:42px;height:42px;border-radius:14px;background:#fbbf24;color:#111827;display:grid;place-items:center;font-weight:950}.appHeader strong{font-size:19px}.appHeader small{display:block;color:#9ca3af}.driverPortal{background:transparent;color:#d1d5db;border:1px solid #374151;border-radius:13px;font-size:12px;padding:9px 11px}.appMain,.adminMain{max-width:980px;margin:auto;padding:18px}.view{display:none}.view.active{display:block}.hero{background:linear-gradient(135deg,#111827,#374151);color:#fff;padding:30px;border-radius:26px;box-shadow:0 18px 50px #0002}.hero h1{font-size:42px;margin:12px 0 5px}.hero p{color:#d1d5db}.pill{display:inline-block;background:#fbbf24;color:#111827;padding:7px 10px;border-radius:99px;font-weight:950;font-size:10px}.primary,.ghost,.textAccess{border-radius:14px;padding:12px 16px;font-weight:900}.primary{background:#111827;color:#fff}.ghost{background:#fff;border:1px solid #d8dde4;color:#111827}.textAccess{background:transparent;color:#6b7280;padding-left:0}.grid3,.dash{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}.grid3 article,.dash article,.crmStats article{background:#fff;border:1px solid #e5e7eb;border-radius:17px;padding:15px}.grid3 small,.dash small,.crmStats small{display:block;color:#6b7280;margin-top:3px}.tabs{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:17px;padding:5px;margin:12px 0;position:sticky;top:78px;z-index:15;box-shadow:0 7px 25px #0001}.tabs button{background:transparent;border-radius:12px;padding:11px;font-weight:850}.tabs button.on{background:#111827;color:#fff}.tab{display:none}.tab.on{display:block}.card{background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:20px;margin:12px 0}.card h2{margin-top:0}.card label{display:block;font-size:12px;font-weight:800;margin:10px 0}.card input,.card textarea{width:100%;margin-top:6px;padding:12px;border:1px solid #d5dbe2;border-radius:12px;background:#fff;color:#111}.card textarea{min-height:70px;resize:vertical}.socials{color:#6b7280;margin-top:16px}.mapmock{height:230px;border-radius:20px;background:linear-gradient(145deg,#dfe4e9,#eef1f4);display:flex;justify-content:space-around;align-items:center;color:#5f6873}.mapmock strong{font-size:35px}.status{background:#111827;color:#fff;padding:12px;border-radius:13px;margin-top:12px}.driverInfo{margin-top:12px}.driverPublic{display:flex;align-items:center;gap:12px}.driverPublic span{display:block;color:#6b7280;font-size:12px;margin-top:3px}.homeDriver{padding:13px;background:#f7f8fa;border-radius:16px;margin:13px 0}.reward{display:grid;gap:8px}.reward progress{width:100%}.sectionhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.twocol,.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quotePanel{border:1px solid #fde68a;background:#fffbeb;border-radius:18px;padding:16px;margin-bottom:14px;display:grid;gap:6px}.quoteEyebrow{font-size:10px;letter-spacing:.14em;font-weight:950;color:#92400e}.quotePanel>b{font-size:24px}.quotePanel small,.muted{color:#6b7280}.quoteActions,.buttonRow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.driverQuoteBox{background:#f9fafb;border-radius:14px;padding:12px;margin:12px 0}.driverIdentity{display:grid;grid-template-columns:100px 1fr;gap:16px;align-items:center;margin-bottom:12px}.driverIdentity small{display:block;color:#6b7280;margin:4px 0 8px}.avatarLarge,.avatarSmall{border-radius:50%;background:#111827;color:#fff;display:grid;place-items:center;font-weight:950;overflow:hidden}.avatarLarge{width:92px;height:92px;font-size:26px}.avatarSmall{width:54px;height:54px}.avatarLarge img,.avatarSmall img{width:100%;height:100%;object-fit:cover}.crmStats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}.adminCrm{grid-template-columns:repeat(4,1fr)}.crmTable{overflow:auto;border:1px solid #e5e7eb;border-radius:14px}.crmRow{display:grid;grid-template-columns:1.2fr 1.2fr .6fr .8fr;min-width:620px}.crmRow span{padding:11px;border-bottom:1px solid #eee}.crmRow.head{font-weight:900;background:#f9fafb}.qr{font-size:80px}.powered{position:fixed;bottom:0;left:0;right:0;background:#111827;color:#9ca3af;text-align:center;padding:11px;font-size:11px;z-index:20}.powered strong{color:#fbbf24}.install{position:fixed;left:16px;right:16px;bottom:65px;max-width:570px;margin:auto;background:#111827;color:#fff;padding:14px;border-radius:20px;z-index:60;display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:10px;box-shadow:0 18px 60px #0005}.install>img{width:46px}.install span{display:block;font-size:12px;color:#d1d5db}.install>button:first-child{position:absolute;right:4px;top:2px;background:transparent;color:#fff;font-size:20px}.install>button:last-child{background:#fbbf24;color:#111827;border-radius:11px;padding:9px;font-weight:950}.checkline{display:flex!important;align-items:center;gap:10px;background:#f9fafb;padding:12px;border-radius:12px}.checkline input{width:auto;margin:0}.adminShell{min-height:100vh;background:#f3f4f6;color:#111827}.adminTop{background:#0c0f13;padding:12px max(18px,calc((100vw - 980px)/2));display:flex;justify-content:space-between;align-items:center}.adminNotice{background:#fff3cd;border:1px solid #ffe69c;color:#6d4d00;border-radius:14px;padding:12px;margin-bottom:13px}.tenantrow{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #eee}.tenantrow button{border-radius:11px;padding:9px 11px;font-weight:850}.price{display:flex;align-items:flex-end}.price b{font-size:46px}.price span{padding-bottom:7px}.formgrid label{margin:0}
#toast{position:fixed;top:88px;left:50%;transform:translate(-50%,-20px);background:#111827;color:#fff;padding:11px 16px;border-radius:13px;opacity:0;pointer-events:none;z-index:200;transition:.2s}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.desktopNav{display:none}.salesHero{grid-template-columns:1fr;min-height:auto;padding-top:54px}.heroCopy{text-align:center}.heroCopy p{margin-left:auto;margin-right:auto}.heroCtas,.trustRow{justify-content:center}.heroVisual{height:520px}.stepsGrid{grid-template-columns:1fr 1fr}.journeyColumns{grid-template-columns:1fr}.journeyFlow{flex-direction:row}.journeyFlow i{transform:rotate(-90deg)}.installSection{grid-template-columns:1fr}.finalCta{grid-template-columns:auto 1fr}.finalCta button{grid-column:1/-1}.featureGrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.marketingHeader{height:70px;padding:0 12px}.platformBrand img{width:43px;height:43px}.platformBrand small{display:none}.platformBrand strong{font-size:15px}.headerActions{gap:3px}.headerActions .linkBtn{display:none}.goldBtn{padding:10px 11px}.marketingMain{padding:0 14px}.salesHero{padding:44px 0 18px}.salesHero h1{font-size:48px}.salesHero p{font-size:15px}.heroVisual{height:430px}.phoneMock{width:200px;height:400px;border-radius:35px;padding:15px}.phoneFront{transform:translate(43px,-2px) rotate(4deg)}.phoneBack{transform:translate(-77px,25px) rotate(-7deg)}.phoneFront h3{font-size:20px;margin-top:25px}.phoneFront footer{margin-top:31px}.floatingLogo{width:80px;right:-2px}.metricStrip{grid-template-columns:1fr 1fr}.metricStrip div:nth-child(2){border-right:0}.metricStrip div{padding:17px 13px}.sectionBlock,.journeySection,.installSection,.pricingSection{padding:76px 0}.stepsGrid,.featureGrid{grid-template-columns:1fr}.sectionIntro h2,.installSection h2{font-size:35px}.journeyCard{padding:24px}.installBubbleMock{grid-template-columns:45px 1fr}.installBubbleMock>strong{grid-column:1/-1;text-align:center}.priceCard{padding:30px 20px}.price b{font-size:56px}.finalCta{grid-template-columns:1fr;text-align:center}.finalCta img{margin:auto}.marketingFooter{grid-template-columns:1fr;padding:26px 18px}.marketingFooter>span{margin-top:4px}.salesHero .outlineBtn{background:#ffffff07}.appMain,.adminMain{padding:12px}.hero h1{font-size:32px}.grid3,.dash{grid-template-columns:1fr 1fr}.twocol,.formgrid{grid-template-columns:1fr}.tabs{top:70px}.tabs button{padding:10px 4px}.driverIdentity{grid-template-columns:72px 1fr}.avatarLarge{width:68px;height:68px}.crmStats,.adminCrm{grid-template-columns:1fr 1fr}.tenantrow{grid-template-columns:1fr}.install{grid-template-columns:40px 1fr}.install>button:last-child{grid-column:1/-1}.authModal{padding:26px 20px}}
/* V5 PRICING + NO HORIZONTAL SCROLL */
#marketingSite,#tenantApp,.adminShell,.marketingMain,.appMain,.adminMain,.salesHero,.heroVisual,.sectionBlock,.journeySection,.installSection,.pricingSection{max-width:100%;overflow-x:clip}
.pricingSection{display:block}.pricingGrid{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch;margin-top:34px}.pricingGrid .priceCard{width:100%;min-width:0;padding:28px 20px;display:flex;flex-direction:column;align-items:center}.pricingGrid .priceCard>img{width:66px}.pricingGrid .priceCard h3{margin:9px 0}.planTag{font-size:10px;font-weight:1000;letter-spacing:.14em;color:var(--gold);margin:4px 0 2px}.regularPrice{font-size:12px;color:#89939e;margin-top:14px}.regularPrice del{color:#8d98a4;text-decoration-color:#7a8590;text-decoration-thickness:2px;font-weight:900;margin-left:5px}.price.compact{margin:5px 0}.price.compact b{font-size:45px}.planSaving{font-size:12px;color:#63d88d;font-weight:850;margin:0 0 18px}.planSaving.neutral{color:#a8b0ba}.pricingGrid .priceCard button{margin-top:auto}.featuredPlan,.bestValue{border-color:#f7c62d66;transform:translateY(-6px)}.bestValue{box-shadow:0 28px 80px #e8b90f20}.planIncludes{margin:24px auto 0;max-width:1100px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.planIncludes strong,.planIncludes span{border:1px solid #ffffff12;background:#12161c;border-radius:999px;padding:8px 11px;font-size:11px;color:#b8c1cc}.planIncludes strong{color:var(--gold)}.trialFoot{max-width:800px;margin:18px auto 0;text-align:center;color:#8f99a5;font-size:12px;line-height:1.55}.selectedPlan{text-align:center;color:var(--gold);font-weight:900;margin-top:10px}.phoneMock,.floatingLogo,.install,.authModal,.priceCard,.journeyCard,.featureGrid article{max-width:100%}.crmTable{max-width:100%}
@media(max-width:1000px){.pricingGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.featuredPlan,.bestValue{transform:none}}
@media(max-width:620px){.pricingGrid{grid-template-columns:1fr;gap:13px}.pricingGrid .priceCard{padding:26px 18px}.price.compact b{font-size:50px}.regularPrice{font-size:13px}.planIncludes{justify-content:flex-start}.heroVisual{overflow:hidden}.phoneFront{transform:translate(32px,-2px) rotate(4deg)}.phoneBack{transform:translate(-62px,25px) rotate(-7deg)}.crmTable{overflow-x:auto;overscroll-behavior-x:contain}.marketingHeader,.appHeader,.adminTop{max-width:100vw}}
.marketingFooter a{color:#c9a62d;text-decoration:none}.marketingFooter a:hover{text-decoration:underline}
/* V8 — navegación móvil + precios */
html{scroll-behavior:smooth}
#como-funciona,#funciones,#plan{scroll-margin-top:132px}
.mobileQuickNav{
display:none;
position:sticky;
top:82px;
z-index:49;
width:100%;
background:rgba(9,12,16,.96);
backdrop-filter:blur(18px);
border-bottom:1px solid #ffffff14;
padding:7px 10px;
gap:7px;
}
.mobileQuickNav a{
min-width:0;
flex:1 1 0;
text-align:center;
color:#e8edf3;
text-decoration:none;
font-size:12px;
font-weight:900;
padding:9px 5px;
border-radius:10px;
border:1px solid #ffffff12;
background:#ffffff06;
white-space:nowrap;
}
.mobileQuickNav a:last-child{
color:#111;
background:linear-gradient(180deg,#ffd538,#ffb900);
border-color:#f7c62d;
}
/* Tachado promocional rojo, mucho más visible */
.regularPrice del{
color:#aeb6c0 !important;
text-decoration-color:#ff3b3b !important;
text-decoration-thickness:3px !important;
text-decoration-line:line-through !important;
}
@media(max-width:900px){
.mobileQuickNav{display:flex;top:82px}
#como-funciona,#funciones,#plan{scroll-margin-top:145px}
}
@media(max-width:620px){
.mobileQuickNav{top:70px;padding:6px 8px;gap:5px}
.mobileQuickNav a{font-size:11px;padding:8px 3px}
#como-funciona,#funciones,#plan{scroll-margin-top:126px}
}
/* V9 · Firebase real, sin alterar el diseño base */
button:disabled{opacity:.58;cursor:not-allowed;filter:saturate(.55)}
.tenantUnavailable{max-width:980px;margin:12px auto;background:#fff3cd;border:1px solid #ffe69c;color:#674d00;border-radius:15px;padding:12px 15px;font-weight:800}
.accountSession{display:flex;align-items:center;justify-content:space-between;gap:14px}
.accountSession h2,.accountSession p{margin:0}
@media(max-width:620px){.accountSession{align-items:flex-start;flex-direction:column}.accountSession button{width:100%}}
.adminCompaniesList .tenantrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #ffffff12}
.adminCompaniesList .tenantrow>div{display:flex;flex-direction:column;min-width:0}
.adminCompaniesList .tenantrow small{color:var(--muted)}
@media(max-width:620px){.adminCompaniesList .tenantrow{align-items:flex-start;flex-direction:column}.adminCompaniesList .tenantrow button{width:100%}}
/* V11 — accesos claros + vista pasajero premium */
.navLoginBtn,.mobileLoginBtn{border:1px solid #f7c62d55;background:#f7c62d12;color:#f7c62d;font-weight:900;border-radius:11px;padding:9px 13px;cursor:pointer}
.mobileQuickNav .mobileLoginBtn{flex:0 0 auto;white-space:nowrap}
.passengerBrandLockup{display:flex;align-items:center;gap:14px;margin:10px 0 4px}
.passengerBrandLogo,.businessLogoPreview{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(145deg,#ffe16b,#c88b00);color:#111;font-weight:1000;font-size:24px;box-shadow:0 18px 45px #0000002e, inset 0 1px 0 #fff9;background-size:cover;background-position:center}
.passengerBrandLogo.hasImage,.businessLogoPreview.hasImage{color:transparent}
.passengerBrandText small{font-weight:800;color:var(--muted)}
.passengerSocials{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0 20px}
.socialChip{padding:10px 13px;border-radius:999px;background:#ffffff0a;border:1px solid #ffffff12;text-decoration:none;color:inherit;font-weight:850;transition:.2s}
.socialChip:hover{transform:translateY(-2px);border-color:#f7c62d66}
.fieldCounter{float:right;font-size:11px;color:var(--muted);font-weight:700}
.brandUpload{display:flex;justify-content:space-between;gap:18px;align-items:center;margin:16px 0}
.brandUpload p{margin-bottom:0;color:var(--muted);font-size:13px}
.brandUploadActions{display:flex;align-items:center;gap:12px}
.uploadBtn{cursor:pointer;border:1px solid #f7c62d55;color:#f7c62d;padding:10px 13px;border-radius:11px;font-weight:900}
.passengerAccountCard .buttonRow{align-items:center}
.linkBtn{border:0;background:transparent;color:#f7c62d;text-decoration:underline;cursor:pointer;padding:8px}
@media(max-width:720px){
.brandUpload{align-items:flex-start;flex-direction:column}
.brandUploadActions{width:100%;justify-content:space-between}
.passengerBrandLogo{width:62px;height:62px;border-radius:18px}
.passengerSocials{gap:7px}
.socialChip{font-size:12px;padding:9px 11px}
}
/* V12 · UI premium conductor/pasajero + anti-overflow */
html,body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,video,canvas,svg{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%}
.appShell,.appMain,.tab,.card,.marketingMain,.driverShell,.driverMain{min-width:0;max-width:100%}
.sectionTitleRow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:4px 0 16px}
.sectionTitleRow h2,.sectionTitleRow small{margin:0}
.sectionTitleRow small{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-size:10px;font-weight:900}
.miniBadge{font-size:10px;font-weight:1000;letter-spacing:.08em;border:1px solid #f7c62d55;color:#f7c62d;background:#f7c62d10;padding:7px 9px;border-radius:999px;white-space:nowrap}
.driverOpsPro{display:grid;gap:16px}
.driverStatusCard{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border-radius:20px;background:linear-gradient(145deg,#111820,#0b0f14);border:1px solid #ffffff10;box-shadow:0 24px 60px #00000024}
.driverStatusCard>div{display:flex;flex-direction:column;gap:4px}
.driverStatusCard small{color:var(--muted);font-weight:800}
.driverStatusCard strong{font-size:22px}
.statusToggle{border:1px solid #f7c62d55;background:#f7c62d10;color:#f7c62d;border-radius:12px;padding:10px 14px;font-weight:900}
.rideQueueGrid{display:grid;grid-template-columns:1.15fr 1.15fr .8fr;gap:15px}
.ridePanel{border-radius:22px;padding:18px;background:linear-gradient(155deg,#121923,#0b1017);border:1px solid #ffffff10;box-shadow:0 22px 50px #00000022;min-width:0}
.ridePanelHead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:14px}
.ridePanelHead small{color:var(--muted);text-transform:uppercase;font-size:10px;letter-spacing:.11em;font-weight:900}
.ridePanelHead h3{margin:4px 0 0;font-size:18px}
.statusBadge{font-size:9px;letter-spacing:.1em;font-weight:1000;border-radius:999px;padding:7px 8px;white-space:nowrap}
.statusBadge.neutral{background:#ffffff09;color:#9da8b5;border:1px solid #ffffff10}
.statusBadge.live{background:#29d36b14;color:#54e58b;border:1px solid #29d36b35}
.emptyRideState{min-height:92px;display:flex;align-items:center;color:#9aa6b4;line-height:1.5;border-radius:14px;padding:14px;background:#ffffff05;border:1px dashed #ffffff12}
.rideDecisionRow{margin-top:14px}
.dangerGhost{border:1px solid #ff595933;background:#ff595908;color:#ff7979;border-radius:12px;padding:11px 14px;font-weight:900}
.driverActionFlow{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}
.actionStep{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;text-align:left;gap:2px 8px;padding:11px;border-radius:14px;border:1px solid #ffffff10;background:#ffffff06;color:inherit}
.actionStep>span{grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#f7c62d;color:#111;font-weight:1000}
.actionStep b{font-size:12px}
.actionStep small{font-size:10px;color:var(--muted)}
.actionStep:disabled{opacity:.4}
.qrWorkbench{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:center}
.qrCanvasWrap{aspect-ratio:1;border-radius:24px;padding:15px;background:#fff;box-shadow:0 24px 60px #0004;display:grid;place-items:center;overflow:hidden}
.qrPlaceholder{width:100%;height:100%;border-radius:14px;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#111 0 8px,#fff 8px 16px);color:#f7c62d;font-weight:1000;font-size:38px}
.qrImage{width:100%;height:100%;object-fit:contain}
.qrMeta{min-width:0}
.qrMeta code{display:block;overflow-wrap:anywhere;padding:12px 14px;border-radius:12px;background:#0004;border:1px solid #ffffff10;margin-bottom:14px}
.passengerMapTall{min-height:430px!important;height:50vh!important;max-height:620px}
.passengerBrandLockup{margin-bottom:10px}
#passenger .hero{border-radius:26px;padding:24px;background:radial-gradient(circle at 15% 10%,#f7c62d18,transparent 30%),linear-gradient(145deg,#121a23,#0b1016);border:1px solid #ffffff10;box-shadow:0 28px 70px #0000002b}
#passenger .hero h1{font-size:clamp(30px,7vw,54px);line-height:1.02;margin-top:8px}
#passenger .hero p{max-width:680px;color:#c1cad4}
.benefitsStrip{display:grid!important;grid-template-columns:repeat(3,1fr);gap:10px!important}
.benefitsStrip>*{min-width:0!important}
@media(max-width:980px){
.rideQueueGrid{grid-template-columns:1fr}
.nextRidePanel{grid-column:auto}
}
@media(max-width:720px){
.driverStatusCard{align-items:flex-start;flex-direction:column}
.driverStatusCard button{width:100%}
.driverActionFlow{grid-template-columns:1fr}
.qrWorkbench{grid-template-columns:1fr}
.qrCanvasWrap{width:min(100%,300px);margin:auto}
.benefitsStrip{grid-template-columns:1fr!important}
.passengerMapTall{height:58vh!important;min-height:380px!important}
.sectionTitleRow{align-items:flex-start;flex-direction:column}
}
@media(max-width:420px){
#passenger .hero{padding:18px}
.ridePanel{padding:14px}
.qrCanvasWrap{width:100%}
}
/* V13 */
.marketingHeader{position:sticky!important;top:0!important;z-index:100!important}
.mobileQuickNav{position:sticky!important;z-index:99!important}
.driverTopbar{position:sticky;top:76px;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:14px;background:rgba(248,249,251,.95);backdrop-filter:blur(18px);border:1px solid #e6e9ee;border-radius:20px;padding:11px 14px;margin-bottom:14px;box-shadow:0 12px 35px #10182812}
.driverTopIdentity{display:flex;align-items:center;gap:11px;min-width:0}.driverTopIdentity small{display:block;color:#7c8795;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.12em}.driverTopIdentity h1{margin:2px 0 0;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.driverTopLogo{width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,#111827,#313a47);color:#f7c62d;display:grid;place-items:center;font-weight:1000;background-size:cover;background-position:center;flex:none}
.driverTopActions{display:flex;gap:8px}.availabilityChip{border:1px solid;border-radius:999px;padding:9px 12px;font-weight:950;font-size:12px}.availabilityChip.available{color:#117c40;background:#e9faef;border-color:#b9ecc9}.availabilityChip.offline{color:#a13636;background:#fff0f0;border-color:#ffcaca}.iconTextBtn{background:#fff;border:1px solid #e5e8ed;border-radius:12px;padding:9px 11px;font-weight:850;color:#475467}
.panelScreen{display:none}.panelScreen.activePanel{display:block;animation:panelIn .2s ease}@keyframes panelIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.driverHeroCard{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:24px;border-radius:25px;background:radial-gradient(circle at 85% 0,#f5c52628,transparent 30%),linear-gradient(145deg,#101722,#0b1017);color:#fff;box-shadow:0 26px 65px #10182822;margin-bottom:14px}.microEyebrow{color:#f7c62d;font-size:10px;font-weight:1000;letter-spacing:.15em}.driverHeroCard h2{font-size:clamp(25px,4vw,36px);margin:7px 0 5px}.driverHeroCard p{color:#aab4c0;margin:0;max-width:650px;line-height:1.5}.driverPlanPill{min-width:100px;text-align:center;background:#ffffff0b;border:1px solid #ffffff12;border-radius:17px;padding:12px}.driverPlanPill small{display:block;color:#9aa6b3;font-size:10px}.driverPlanPill b{display:block;color:#f7c62d;margin-top:4px}
.operationsGrid{display:grid;grid-template-columns:1.1fr 1.25fr .75fr;gap:13px}.operationCard{background:#fff;border:1px solid #e5e8ed;border-radius:22px;padding:17px;box-shadow:0 15px 38px #1018280b;min-width:0}.operationHead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:12px}.operationHead small{font-size:9px;font-weight:1000;letter-spacing:.13em;color:#8a95a3}.operationHead h3{font-size:18px;margin:4px 0 0}.operationEmpty{min-height:78px;background:#f8fafc;border:1px dashed #dce2e9;border-radius:14px;padding:14px;color:#768291;line-height:1.5;display:flex;align-items:center}.operationEmpty.minimal:empty{min-height:0;padding:0;border:0;background:transparent}
.rideSteps{display:grid;gap:7px;margin-top:10px}.rideStep{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:9px;border:1px solid #e7eaf0;background:#fff;border-radius:14px;padding:10px;text-align:left;color:#182230}.rideStep>span{width:34px;height:34px;border-radius:11px;background:#f7c62d18;color:#b37e00;display:grid;place-items:center;font-weight:1000;font-size:11px}.rideStep div{display:flex;flex-direction:column}.rideStep b{font-size:12px}.rideStep small{color:#8a95a3;font-size:10px}.rideChatBox{margin-top:12px;padding-top:12px;border-top:1px solid #edf0f3}.chatTitle{display:flex;justify-content:space-between}.chatTitle small{color:#8b96a4}.quickMessages{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0}.quickMsg{border:1px solid #dfe4ea;background:#f8fafc;border-radius:999px;padding:7px 9px;font-size:10px;font-weight:850}.customMessage{display:grid;grid-template-columns:1fr auto;gap:7px}.customMessage input{min-width:0;border:1px solid #dfe4ea;border-radius:11px;padding:9px}.customMessage button{border:0;border-radius:11px;background:#111827;color:#fff;padding:9px 12px;font-weight:900}
.rideCommunication{border-top:1px solid #edf0f3;margin-top:12px;padding-top:12px}.quoteLine{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.rideCommunication label{font-size:11px;font-weight:850;color:#596579}.rideCommunication input{width:100%;padding:10px;border:1px solid #dbe1e7;border-radius:11px;margin-top:5px}
.driverMenuGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px}.driverMenuCard{display:grid;grid-template-columns:43px 1fr auto;align-items:center;gap:10px;text-align:left;background:#fff;border:1px solid #e5e8ed;border-radius:18px;padding:14px;box-shadow:0 12px 30px #10182808;min-width:0}.driverMenuCard .menuIcon{width:40px;height:40px;border-radius:13px;background:#111827;color:#f7c62d;display:grid;place-items:center}.driverMenuCard div{min-width:0}.driverMenuCard b{display:block;font-size:12px}.driverMenuCard small{display:block;color:#8994a2;font-size:9px;margin-top:3px;line-height:1.35}.driverMenuCard i{font-style:normal;font-size:24px;color:#a4adb8}
.subPanelHead{display:flex;align-items:center;gap:12px;margin:8px 0 15px}.subPanelHead button{width:43px;height:43px;border-radius:14px;background:#fff;border:1px solid #e3e7ec;font-size:20px}.subPanelHead small{display:block;color:#8b95a3;font-size:9px;font-weight:1000;letter-spacing:.13em}.subPanelHead h2{margin:3px 0 0;font-size:25px}
.settingsSection{background:#fff;border:1px solid #e5e8ed;border-radius:22px;padding:19px;margin-bottom:12px;box-shadow:0 13px 32px #10182808}.settingsIntro{margin-bottom:15px}.settingsIntro h3{margin:0;font-size:17px}.settingsIntro p{margin:5px 0 0;color:#7d8998;font-size:12px}.identityUploadGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.imageUploadCard{display:flex;align-items:center;gap:14px;padding:15px;border:1px solid #e6eaf0;border-radius:17px;background:#f9fafb}.imageUploadCard>div:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.imageUploadCard small{color:#8994a2;font-size:10px}.modernForm{gap:12px}.wideField{grid-column:1/-1}.saveNotice{margin-top:12px;padding:9px 11px;border-radius:11px;background:#fff8dc;color:#725900;font-size:10px;font-weight:750}.stickySaveBar{position:sticky;bottom:54px;display:flex;justify-content:flex-end;padding:10px;background:rgba(246,248,251,.9);backdrop-filter:blur(12px);border-radius:16px}.stickySaveBar button{min-width:180px}
.crmOverview{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}.crmOverview article{background:#fff;border:1px solid #e5e8ed;border-radius:18px;padding:16px}.crmOverview small{display:block;color:#8994a2;font-size:10px}.crmOverview b{font-size:27px}.emptyDataState{padding:28px;border:1px dashed #dfe4ea;border-radius:15px;text-align:center;color:#8994a2;background:#fafbfc}
.qrPremiumCard{display:grid;grid-template-columns:minmax(220px,310px) 1fr;gap:28px;align-items:center;background:#fff;border:1px solid #e5e8ed;border-radius:25px;padding:24px}.qrDetails h3{font-size:27px;margin:10px 0}.qrDetails code{display:block;overflow-wrap:anywhere;background:#f7f8fa;border-radius:12px;padding:12px}.qrDetails p{color:#7b8796;line-height:1.55}.accountPremiumCard{display:grid;gap:12px;background:#fff;border:1px solid #e5e8ed;border-radius:22px;padding:20px}.accountPremiumCard>div{padding:13px;background:#f8fafc;border-radius:13px}.accountPremiumCard small{display:block;color:#8994a2;margin-bottom:4px}
.returnToDriver{position:fixed;left:14px;top:92px;z-index:55;background:#111827;color:#fff;border-radius:999px;padding:10px 14px;font-weight:900;box-shadow:0 12px 30px #0003}.businessLogoPreview,.avatarLarge{background-size:cover;background-position:center}
@media(max-width:1050px){.operationsGrid{grid-template-columns:1fr 1fr}.queueCard{grid-column:1/-1}.driverMenuGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.driverTopbar{top:70px;border-radius:0;margin:0 -12px 12px;padding-left:12px;padding-right:12px}.driverTopActions .iconTextBtn{display:none}.driverHeroCard{align-items:flex-start;flex-direction:column;padding:19px}.operationsGrid{grid-template-columns:1fr}.queueCard{grid-column:auto}.driverMenuGrid{grid-template-columns:1fr}.identityUploadGrid{grid-template-columns:1fr}.qrPremiumCard{grid-template-columns:1fr;padding:17px}.qrCanvasWrap{width:min(100%,300px);margin:auto}.crmOverview{grid-template-columns:repeat(3,1fr)}.stickySaveBar button{width:100%}.returnToDriver{top:78px}}
@media(max-width:430px){.driverTopLogo{width:41px;height:41px}.driverTopIdentity h1{font-size:16px}.availabilityChip{font-size:10px;padding:8px 9px}.crmOverview{grid-template-columns:1fr}.quoteLine{grid-template-columns:1fr}}
/* V15 · deep-link assets + branded QR */
.qrCanvasWrap{position:relative}
.qrCenterLogoWrap{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:20%;aspect-ratio:1;border-radius:22%;
background:#fff;padding:6px;display:grid;place-items:center;
box-shadow:0 4px 18px #0002;
}
.qrCenterLogoWrap img{width:100%;height:100%;object-fit:contain;border-radius:18%}
body{width:100%;max-width:100vw}
.marketingSite,.tenantApp,.appMain,.marketingMain{max-width:100vw;overflow-x:clip}
/* ================= V16 PREMIUM ================= */
.driverViewV16{background:
radial-gradient(circle at 12% 0%,rgba(247,198,45,.13),transparent 24%),
radial-gradient(circle at 100% 22%,rgba(38,117,255,.08),transparent 26%),
linear-gradient(180deg,#eef2f7,#f6f8fb);
border-radius:28px;padding:12px;overflow:hidden}
.driverTopbarV16{position:sticky;top:76px;z-index:35;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin-bottom:12px;border-radius:20px;background:rgba(13,20,31,.88);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 45px rgba(13,20,31,.18);color:#fff}
.driverIdentityV16{display:flex;align-items:center;gap:10px;min-width:0}.driverIdentityV16 small{font-size:9px;letter-spacing:.14em;color:#9da9b7;font-weight:950}.driverIdentityV16 h1{margin:2px 0 0;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.driverStatusGroup{display:flex;align-items:center;gap:7px}.availabilityChip,.planChip{border-radius:999px;padding:8px 10px;font-size:10px;font-weight:950;border:1px solid}.availabilityChip.available{background:#1fc7651c;color:#6aefa1;border-color:#4ee78b4d}.availabilityChip.offline{background:#ff565619;color:#ff8d8d;border-color:#ff72723b}.planChip.trial{background:#f7c62d19;color:#ffd95c;border-color:#f7c62d45}.planChip.activePlan{background:#45c87618;color:#69e698;border-color:#45c87640}.planChip.expired{background:#ff45451c;color:#ff8383;border-color:#ff5e5e45;animation:softPulse 2s infinite}@keyframes softPulse{50%{box-shadow:0 0 0 6px #ff56560c}}
.iconTextBtn{background:#ffffff0c!important;border-color:#ffffff18!important;color:#dce4ee!important}
.criticalRideGrid{display:grid;grid-template-columns:1.05fr 1.25fr .78fr;gap:11px}
.glassRideCard,.glassMenuBubble,.settingsGlass,.qrPremiumCardV16{
background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.58));
backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
border:1px solid rgba(255,255,255,.8);
box-shadow:0 18px 48px rgba(26,39,58,.11),inset 0 1px 0 rgba(255,255,255,.75)
}
.glassRideCard{border-radius:22px;padding:16px;min-width:0}.glassCardHead{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;margin-bottom:11px}.glassCardHead small{font-size:9px;letter-spacing:.12em;color:#8692a2;font-weight:1000}.glassCardHead h3{font-size:18px;margin:4px 0 0;color:#101828}.cleanEmptyState{min-height:72px;display:flex;align-items:center;padding:12px;border:1px dashed #d8dfe8;border-radius:13px;background:rgba(248,250,252,.72);color:#778394;line-height:1.45;font-size:12px}
.activeRideSummary{background:#111a26;color:#fff;border-radius:14px;padding:12px;margin-bottom:8px}.rideAddress{display:grid;gap:6px}.rideAddress span{font-size:12px}.rideAddress small{color:#8996a6}
.rideActionRail{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:9px 0}.rideActionV16{display:flex;align-items:center;gap:7px;text-align:left;border:1px solid #e0e5ec;border-radius:13px;background:#fff;padding:9px;color:#172033}.rideActionV16>span{width:27px;height:27px;border-radius:9px;background:#f7c62d1c;color:#a97700;display:grid;place-items:center;font-weight:1000;font-size:9px;flex:none}.rideActionV16 div{display:flex;flex-direction:column}.rideActionV16 b{font-size:10px}.rideActionV16 small{font-size:8px;color:#8994a2}.rideActionV16:disabled{opacity:.42}
.communicationV16{border-top:1px solid #e7ebf0;padding-top:10px}.commTitle{display:flex;justify-content:space-between;gap:8px;align-items:center}.commTitle b{font-size:11px}.commTitle small{font-size:9px;color:#8b96a4}.quickMessages{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}.quickMsg{border:1px solid #dfe4ea;border-radius:999px;padding:6px 8px;background:rgba(255,255,255,.8);font-size:9px;font-weight:850}.customMessage{display:grid;grid-template-columns:1fr auto;gap:6px}.customMessage input{min-width:0;border:1px solid #dde3ea;border-radius:11px;padding:9px}.customMessage button{border:0;border-radius:11px;background:#111827;color:#fff;padding:9px 11px;font-weight:900}
.quoteComposer{border-top:1px solid #e7ebf0;margin-top:9px;padding-top:9px}.quoteRow{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:end}.quoteComposer label span{display:block;font-size:8px;letter-spacing:.12em;color:#8b96a4;font-weight:1000}.quoteComposer input{width:100%;border:1px solid #dce2e9;border-radius:10px;padding:9px;margin-top:4px}
.driverMenuGridV16{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:13px}.glassMenuBubble{min-height:105px;border-radius:21px;padding:15px;display:flex;align-items:center;gap:12px;text-align:left;transition:.18s;position:relative;overflow:hidden}.glassMenuBubble:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;background:#f7c62d18;right:-30px;top:-35px;filter:blur(4px)}.glassMenuBubble:hover{transform:translateY(-3px);box-shadow:0 23px 55px rgba(26,39,58,.16)}.glassMenuBubble>span{width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,#0d1624,#1c2738);color:#f7c62d;display:grid;place-items:center;font-size:18px;box-shadow:0 10px 25px #10182820;flex:none}.glassMenuBubble div{min-width:0;z-index:1}.glassMenuBubble b{display:block;color:#111827;font-size:14px}.glassMenuBubble small{display:block;color:#7d8998;font-size:10px;margin-top:4px}
.settingsGlass{border-radius:23px;padding:19px;margin-bottom:12px}.settingsIntro h3{margin:0;color:#111827}.settingsIntro p{color:#7c8998}.imageUploadCardV16{display:flex;align-items:center;gap:14px;border-radius:18px;padding:14px;background:rgba(248,250,252,.72);border:1px solid #e1e7ee}.storageOk{margin-top:12px;padding:10px 12px;border-radius:12px;background:#eaf9ef;color:#237a45;font-size:10px;font-weight:850}
.modernFormV16 label{font-size:11px;color:#253246}.modernFormV16 label>span{display:flex;justify-content:space-between;gap:10px;color:#bd8b00;font-size:9px;font-weight:1000;letter-spacing:.1em;margin:0 0 5px 4px}.modernFormV16 label>span i{font-style:normal;color:#8d98a6;letter-spacing:0}.modernFormV16 input{border:1px solid #dce3eb!important;background:linear-gradient(180deg,#fff,#f9fbfd)!important;border-radius:14px!important;padding:13px 14px!important;box-shadow:inset 0 1px 0 #fff,0 5px 15px #10182808;color:#131c2a}.modernFormV16 input:focus{outline:none;border-color:#e8b514!important;box-shadow:0 0 0 4px #f7c62d16!important}
.crmAccordion{display:grid;gap:8px}.crmCustomer{background:rgba(255,255,255,.78);border:1px solid #e4e9ef;border-radius:16px;overflow:hidden}.crmCustomer summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px}.crmCustomer summary::-webkit-details-marker{display:none}.crmCustomer summary div{display:flex;flex-direction:column}.crmCustomer summary small{color:#8c97a5;margin-top:3px}.crmCustomer summary span{font-size:10px;font-weight:900;color:#b38300}.crmCustomerBody{padding:0 14px 14px;border-top:1px solid #edf0f3;color:#556273}.crmCustomerBody p{margin:9px 0}
.qrPremiumCardV16{display:grid;grid-template-columns:minmax(220px,310px) 1fr;gap:26px;align-items:center;border-radius:26px;padding:24px}.qrCenterLogoWrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22%;aspect-ratio:1;border-radius:24%;background:#fff;padding:6px;display:grid;place-items:center;box-shadow:0 5px 18px #0002}.qrCenterLogoWrap img{width:100%;height:100%;object-fit:cover;border-radius:20%}
.driverMessagePanel{margin:10px 0;padding:13px 14px;border-radius:15px;background:linear-gradient(145deg,#111a26,#1b2737);color:#fff;border:1px solid #ffffff14;box-shadow:0 12px 30px #10182820}.driverMessagePanel span{display:block;font-size:8px;letter-spacing:.13em;color:#f7c62d;font-weight:1000}.driverMessagePanel b{display:block;margin-top:5px;font-size:15px}.driverMessagePanel small{display:block;color:#9eabb9;margin-top:4px}
.renewPlanGrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:12px 0}.renewPlanGrid button{border:1px solid #2b3543;border-radius:13px;background:#131a24;color:#fff;padding:11px;text-align:left}.renewPlanGrid b{display:block;color:#f7c62d;margin-top:3px}
/* Login modal: no clipping on iPhone */
.authModal{width:min(92vw,540px)!important;max-width:540px!important;overflow:hidden!important;padding:clamp(22px,5vw,42px)!important}
.authModal h2{font-size:clamp(32px,8vw,52px)!important;line-height:1.02!important;overflow-wrap:anywhere!important;max-width:100%!important}
.authModal input{width:100%!important;min-width:0!important}
/* Mobile */
@media(max-width:980px){.criticalRideGrid{grid-template-columns:1fr 1fr}.queueCard{grid-column:1/-1}}
@media(max-width:700px){
.driverViewV16{padding:8px;border-radius:20px}
.driverTopbarV16{top:69px;border-radius:17px;padding:9px 10px}.driverStatusGroup{gap:4px}.iconTextBtn{display:none}.availabilityChip,.planChip{font-size:9px;padding:7px 8px}
.criticalRideGrid{grid-template-columns:1fr}.queueCard{grid-column:auto}
.driverMenuGridV16{grid-template-columns:repeat(2,1fr)}.glassMenuBubble{min-height:112px;flex-direction:column;align-items:flex-start;padding:13px}.glassMenuBubble>span{width:42px;height:42px}
.rideActionRail{grid-template-columns:1fr}.rideActionV16{padding:9px}
.qrPremiumCardV16{grid-template-columns:1fr;padding:17px}.qrCanvasWrap{width:min(100%,300px);margin:auto}
.identityUploadGrid{grid-template-columns:1fr}
.commTitle{align-items:flex-start;flex-direction:column}
}
@media(max-width:360px){.driverMenuGridV16{grid-template-columns:1fr}}
/* ===================== V17 DRIVER REDESIGN ===================== */
/* Startup gate prevents passenger flash before Firebase resolves */
body.appBooting > *:not(.appBootGate){visibility:hidden!important}
.appBootGate{
position:fixed;inset:0;z-index:99999;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
background:#0b1018;color:#fff;text-align:center;
}
.appBootGate.hidden{display:none!important}
.bootLogo{width:92px;height:92px;border-radius:28px;background:#111a27;display:grid;place-items:center;box-shadow:0 24px 60px #0008;border:1px solid #ffffff18}
.bootLogo img{width:76px;height:76px;object-fit:contain}
.appBootGate b{font-size:22px}
.appBootGate span{font-size:13px;color:#9ba7b6}
/* Prevent iOS focus zoom and horizontal deformation */
input,textarea,select{font-size:16px!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden!important}
.modalCard,.authModal{max-width:calc(100vw - 24px)!important}
.authModal input{font-size:16px!important}
/* Driver dark shell */
.driverViewV17{
background:
radial-gradient(circle at 10% 0%,rgba(247,198,45,.12),transparent 28%),
radial-gradient(circle at 100% 35%,rgba(78,105,150,.14),transparent 30%),
linear-gradient(180deg,#252b34 0%,#181e27 100%);
border-radius:28px;
padding:14px;
color:#fff;
min-height:calc(100vh - 150px);
box-shadow:inset 0 1px 0 #ffffff0f;
}
.driverHeaderV17{
position:sticky;top:76px;z-index:40;
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:14px 16px;margin-bottom:14px;
background:rgba(12,17,25,.92);
backdrop-filter:blur(22px) saturate(150%);
-webkit-backdrop-filter:blur(22px) saturate(150%);
border:1px solid rgba(255,255,255,.12);
border-radius:22px;
box-shadow:0 18px 42px #0005;
}
.driverBrandV17{display:flex;align-items:center;gap:12px;min-width:0}
.driverTopLogoV17{
width:52px;height:52px;flex:none;border-radius:16px;
display:grid;place-items:center;
background:linear-gradient(145deg,#222b39,#0e141e);
color:#f7c62d;font-size:18px;font-weight:1000;
border:1px solid #ffffff12;
background-size:cover;background-position:center;
}
.driverBrandText{min-width:0}
.driverBrandText span{
display:block;color:#9aa6b6;font-size:10px;font-weight:1000;letter-spacing:.15em
}
.driverBrandText h1{
margin:3px 0 0;font-size:22px;line-height:1.05;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.driverHeaderActions{display:flex;align-items:center;gap:8px;flex:none}
.driverStateBtn,.driverPlanBtn,.driverExitBtn{
min-height:42px;border-radius:999px;padding:0 13px;font-weight:950;font-size:12px;border:1px solid;white-space:nowrap
}
.driverStateBtn.online{background:#1cd96a16;border-color:#3ee58145;color:#70efa3}
.driverStateBtn.offline{background:#ff525219;border-color:#ff666645;color:#ff9393}
.driverPlanBtn.trial{background:#f7c62d14;border-color:#f7c62d40;color:#ffd967}
.driverPlanBtn.activePlan{background:#25c96a16;border-color:#36d57a40;color:#73eca4}
.driverPlanBtn.expired{background:#ff4a4a1a;border-color:#ff606045;color:#ff9494}
.driverExitBtn{background:#ffffff08;border-color:#ffffff14;color:#d5dde8}
/* Main ride cards */
.driverDashboardGrid{
display:grid;grid-template-columns:1.05fr 1.25fr .8fr;gap:12px
}
.driverMainCard{
min-width:0;border-radius:24px;padding:18px;
background:linear-gradient(145deg,#303743,#20262f);
border:1px solid #ffffff12;
box-shadow:0 18px 42px #00000035,inset 0 1px 0 #ffffff10;
}
.driverCardTop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:14px}
.driverCardTop span{display:block;color:#f7c62d;font-size:10px;font-weight:1000;letter-spacing:.14em}
.driverCardTop h2{font-size:22px;line-height:1.08;margin:5px 0 0;color:#fff}
.driverStatusPill{
font-style:normal;font-size:9px;letter-spacing:.1em;font-weight:1000;
padding:8px 10px;border-radius:999px;white-space:nowrap
}
.driverStatusPill.idle{background:#ffffff08;border:1px solid #ffffff10;color:#9aa7b6}
.driverStatusPill.live{background:#2bd27414;border:1px solid #44dc8740;color:#7beaaa}
.driverEmptyBlock{
min-height:96px;border-radius:16px;padding:16px;
display:flex;align-items:center;
background:#151b23;border:1px dashed #ffffff19;color:#98a5b4;
font-size:14px;line-height:1.5
}
.driverEmptyBlock.compact{min-height:80px}
.driverQuoteBox{
margin-top:12px;padding:14px;border-radius:16px;background:#151b23;border:1px solid #ffffff0e;
display:grid;grid-template-columns:1fr 1fr auto;gap:9px;align-items:end
}
.darkField span{display:block;color:#f7c62d;font-size:9px;font-weight:1000;letter-spacing:.12em;margin:0 0 5px 2px}
.darkField input{
width:100%;min-width:0;border:1px solid #3e4754;background:#0f141b;color:#fff;
border-radius:12px;padding:12px 13px;box-shadow:inset 0 1px 0 #ffffff05
}
.rideAcceptRow{display:flex;gap:9px;margin-top:12px}
.goldAction{
border:0;border-radius:13px;padding:12px 16px;
background:linear-gradient(180deg,#ffd643,#f3b800);
color:#17120a;font-weight:1000;font-size:14px;
box-shadow:0 10px 22px #f7c62d20
}
.redAction{
border:1px solid #ff666638;border-radius:13px;padding:12px 16px;
background:#ff4d4d0e;color:#ff9090;font-weight:950;font-size:14px
}
.darkOutlineBtn{
border:1px solid #ffffff1b;border-radius:13px;padding:12px 16px;
background:#ffffff06;color:#e5ebf3;font-weight:950
}
button:disabled{opacity:.34!important;filter:none!important}
.activeRideSummary{background:#11161d!important;border:1px solid #ffffff0d;color:#fff!important}
.driverRideSteps{display:grid;gap:8px;margin:12px 0}
.driverRideStep{
display:grid;grid-template-columns:44px 1fr;align-items:center;gap:10px;
width:100%;padding:12px;border-radius:15px;text-align:left;
background:#151b23;border:1px solid #ffffff0f;color:#fff
}
.driverRideStep i{
width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
background:#f7c62d14;color:#f7c62d;font-style:normal;font-size:10px;font-weight:1000
}
.driverRideStep div{display:flex;flex-direction:column}
.driverRideStep b{font-size:14px}
.driverRideStep small{margin-top:2px;font-size:11px;color:#8996a6}
.driverCommPanel{
margin-top:13px;padding-top:13px;border-top:1px solid #ffffff0d
}
.driverCommHead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.driverCommHead span{display:block;color:#f7c62d;font-size:9px;font-weight:1000;letter-spacing:.12em}
.driverCommHead b{display:block;margin-top:3px;font-size:14px}
.driverCommHead small{color:#8996a6;font-size:10px}
.driverQuickMsgs{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
.driverQuickMsgs button{
border:1px solid #ffffff12;background:#ffffff07;color:#d9e0e8;
border-radius:999px;padding:8px 10px;font-size:11px;font-weight:900
}
.driverCustomMsg{display:grid;grid-template-columns:1fr auto;gap:8px}
.driverCustomMsg input{
min-width:0;border:1px solid #3e4754;background:#10161d;color:#fff;border-radius:13px;padding:12px 13px
}
.driverCustomMsg button{
border:0;border-radius:13px;background:#f7c62d;color:#15110a;font-weight:1000;padding:0 15px
}
/* Shortcut bubbles */
.driverShortcutGrid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px
}
.driverShortcut{
min-width:0;min-height:118px;
display:flex;align-items:center;gap:14px;text-align:left;
border-radius:22px;padding:16px;
background:
radial-gradient(circle at 100% 0%,rgba(247,198,45,.11),transparent 40%),
linear-gradient(145deg,#2f3641,#222832);
border:1px solid #ffffff10;color:#fff;
box-shadow:0 16px 36px #0003,inset 0 1px 0 #ffffff0e;
transition:.2s
}
.driverShortcut:hover{transform:translateY(-2px);border-color:#f7c62d45}
.shortcutIcon{
width:54px;height:54px;flex:none;border-radius:17px;
background:#111720;color:#f7c62d;display:grid;place-items:center;font-size:20px;
border:1px solid #ffffff0d;box-shadow:0 12px 24px #0003
}
.driverShortcut div{min-width:0}
.driverShortcut b{display:block;font-size:16px;color:#fff}
.driverShortcut small{display:block;margin-top:5px;color:#93a0b0;font-size:11px;line-height:1.35}
/* Subpages */
.driverSubHead{display:flex;align-items:center;gap:12px;margin:4px 0 14px}
.driverSubHead button{
width:46px;height:46px;border-radius:14px;background:#171d25;color:#fff;border:1px solid #ffffff12;font-size:20px
}
.driverSubHead span{display:block;color:#f7c62d;font-size:9px;font-weight:1000;letter-spacing:.14em}
.driverSubHead h2{font-size:28px;margin:3px 0 0;color:#fff}
.driverSettingsCard,.qrCardV17,.accountCardV17{
border-radius:24px;padding:20px;margin-bottom:13px;
background:linear-gradient(145deg,#303743,#222832);
border:1px solid #ffffff10;color:#fff;
box-shadow:0 18px 42px #0003,inset 0 1px 0 #ffffff0e
}
.settingsIntroV17 span{display:block;color:#f7c62d;font-size:9px;font-weight:1000;letter-spacing:.14em}
.settingsIntroV17 h3{margin:5px 0 16px;font-size:22px;color:#fff}
.identityGridV17{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.identityItemV17{
display:flex;align-items:center;gap:14px;padding:16px;border-radius:18px;
background:#171d25;border:1px solid #ffffff0d
}
.brandImageV17{
width:92px;height:92px;flex:none;display:grid;place-items:center;
background:linear-gradient(145deg,#f7c62d,#d69f00);color:#15110a;font-weight:1000;font-size:24px;
background-size:cover;background-position:center;border:1px solid #ffffff16
}
.logoShape{border-radius:24px}
.photoShape{border-radius:50%;aspect-ratio:1;object-fit:cover}
.identityItemV17>div:last-child{min-width:0}
.identityItemV17 b{display:block;font-size:17px}
.identityItemV17 small{display:block;color:#8f9cac;font-size:11px;margin:4px 0 10px}
.outlineGoldBtn{
display:inline-flex;align-items:center;justify-content:center;
border:1px solid #f7c62d65;color:#f7c62d;border-radius:12px;padding:9px 12px;font-weight:950;font-size:12px
}
.firebaseSyncNotice{
margin-top:12px;padding:11px 13px;border-radius:13px;
background:#1acb6a12;border:1px solid #36d77c2a;color:#6ce99e;font-size:11px;font-weight:850
}
.driverFormGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.driverFormGrid label{min-width:0}
.driverFormGrid label>span{
display:flex;justify-content:space-between;gap:10px;
color:#f7c62d;font-size:10px;font-weight:1000;letter-spacing:.1em;margin:0 0 6px 3px
}
.driverFormGrid label>span i{font-style:normal;color:#8390a0;letter-spacing:0}
.driverFormGrid input{
width:100%;min-width:0;background:#151b23;color:#fff;
border:1px solid #3a4451;border-radius:14px;padding:13px 14px;
box-shadow:inset 0 1px 0 #ffffff05
}
.driverFormGrid input:focus{outline:none;border-color:#f7c62d;box-shadow:0 0 0 4px #f7c62d18}
.driverFormGrid .fullWidth{grid-column:1/-1}
.driverSaveDock{
position:sticky;bottom:58px;display:flex;justify-content:flex-end;
padding:10px;border-radius:16px;background:#181e27dd;backdrop-filter:blur(18px);z-index:10
}
.driverSaveDock .goldAction{min-width:220px}
.crmStatsV17{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:13px}
.crmStatsV17 article{
border-radius:20px;padding:18px;background:linear-gradient(145deg,#303743,#222832);
border:1px solid #ffffff10;box-shadow:0 14px 32px #0003
}
.crmStatsV17 span{display:block;color:#f7c62d;font-size:9px;font-weight:1000;letter-spacing:.12em}
.crmStatsV17 b{display:block;font-size:34px;margin-top:5px;color:#fff}
.crmAccordionV17{display:grid;gap:9px}
.crmCustomer{background:#20262f!important;border-color:#ffffff10!important;color:#fff!important}
.crmCustomer summary small{color:#8f9cac!important}
.crmCustomerBody{border-color:#ffffff0e!important;color:#c8d0db!important}
.qrCardV17{display:grid;grid-template-columns:minmax(230px,310px) 1fr;gap:26px;align-items:center}
.qrCopyV17 span{display:block;color:#f7c62d;font-size:9px;font-weight:1000;letter-spacing:.13em}
.qrCopyV17 h3{font-size:30px;margin:8px 0;color:#fff}
.qrCopyV17 code{
display:block;padding:13px;border-radius:13px;background:#151b23;border:1px solid #ffffff0d;color:#dfe6ee;overflow-wrap:anywhere
}
.qrCopyV17 p{color:#97a4b3;line-height:1.55}
.accountCardV17{display:grid;gap:10px}
.accountCardV17>div{padding:15px;border-radius:15px;background:#151b23;border:1px solid #ffffff0d}
.accountCardV17 span{display:block;color:#f7c62d;font-size:9px;font-weight:1000;letter-spacing:.12em}
.accountCardV17 b{display:block;margin-top:5px;font-size:16px;color:#fff}
/* Modal on iPhone */
.authModal,.modalCard{overflow:hidden!important}
.authModal h2,.modalCard h2{
max-width:100%!important;white-space:normal!important;overflow-wrap:break-word!important;
font-size:clamp(30px,9vw,48px)!important;line-height:1.02!important
}
.authModal label,.modalCard label{font-size:15px!important}
.authModal input,.modalCard input{font-size:16px!important;line-height:1.25!important}
/* Mobile driver layout */
@media(max-width:1000px){
.driverDashboardGrid{grid-template-columns:1fr 1fr}
.queueV17{grid-column:1/-1}
}
@media(max-width:720px){
.driverViewV17{padding:10px;border-radius:20px}
.driverHeaderV17{top:69px;padding:10px 11px;border-radius:17px;gap:8px}
.driverTopLogoV17{width:44px;height:44px;border-radius:14px}
.driverBrandText span{font-size:8px}
.driverBrandText h1{font-size:17px}
.driverHeaderActions{gap:5px}
.driverStateBtn,.driverPlanBtn{min-height:38px;padding:0 9px;font-size:9px}
.driverExitBtn{display:none}
.driverDashboardGrid{grid-template-columns:1fr}
.queueV17{grid-column:auto}
.driverMainCard{padding:15px;border-radius:21px}
.driverCardTop h2{font-size:20px}
.driverEmptyBlock{min-height:80px;font-size:13px}
.driverQuoteBox{grid-template-columns:1fr}
.rideAcceptRow{display:grid;grid-template-columns:1fr 1fr}
.driverRideSteps{gap:7px}
.driverRideStep{padding:11px}
.driverCustomMsg{grid-template-columns:minmax(0,1fr) auto}
.driverShortcutGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.driverShortcut{
min-height:138px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
padding:14px
}
.shortcutIcon{width:48px;height:48px;border-radius:15px}
.driverShortcut b{font-size:14px}
.driverShortcut small{font-size:10px}
.driverSubHead h2{font-size:25px}
.driverSettingsCard{padding:16px}
.identityGridV17{grid-template-columns:1fr}
.identityItemV17{padding:14px}
.brandImageV17{width:84px;height:84px}
.driverFormGrid{grid-template-columns:1fr}
.driverFormGrid .fullWidth{grid-column:auto}
.driverSaveDock .goldAction{width:100%;min-width:0}
.crmStatsV17{grid-template-columns:repeat(3,1fr)}
.crmStatsV17 article{padding:14px 10px}
.crmStatsV17 b{font-size:28px}
.qrCardV17{grid-template-columns:1fr;padding:16px}
.qrCanvasWrap{width:min(100%,310px);margin:auto}
}
@media(max-width:390px){
.driverShortcutGrid{grid-template-columns:1fr 1fr}
.driverStateBtn,.driverPlanBtn{font-size:8px;padding:0 7px}
.crmStatsV17{grid-template-columns:1fr}
}
/* Footer should not cover form content */
#tenantApp{padding-bottom:88px}
/* V18 */
html,body{overscroll-behavior-x:none;touch-action:pan-y}button,a,[role="button"],input,textarea,select{touch-action:manipulation}*{-webkit-tap-highlight-color:transparent}input,textarea,select{font-size:16px!important}.authModal input,.modalCard input{font-size:16px!important}
#tenantApp.driverMode .appHeader{display:none!important}#tenantApp.driverMode .driverHeaderV17{top:8px!important;position:sticky!important;z-index:70}#tenantApp.passengerMode .driverHeaderV17{display:none!important}.driverHeaderV17{min-height:84px}.driverTopLogoV17{width:58px!important;height:58px!important}.driverBrandText h1{font-size:24px!important}.driverBrandText span{font-size:11px!important}.driverStateBtn,.driverPlanBtn{min-height:44px!important;font-size:12px!important}
.passengerInnerHeader{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:-12px -12px 14px;padding:11px 13px;background:rgba(13,20,31,.96);color:#fff;backdrop-filter:blur(18px);border-bottom:1px solid #ffffff10}.passengerMiniBrand{display:flex;align-items:center;gap:10px;min-width:0}.passengerHeaderLogo{width:44px;height:44px;border-radius:14px;background:#f7c62d;color:#111;display:grid;place-items:center;font-weight:1000;background-size:cover;background-position:center}.passengerMiniBrand b{display:block;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.passengerMiniBrand small{display:block;color:#9ba7b5;font-size:10px}.passengerInstallIcon{width:42px;height:42px;border-radius:50%;border:1px solid #f7c62d55;background:#f7c62d10;color:#f7c62d;font-size:24px;font-weight:1000}.passengerSubHead{display:flex;align-items:center;gap:11px;margin-bottom:14px}.passengerBack{width:44px;height:44px;border-radius:14px;border:0;background:#111827;color:#fff;font-size:20px}.passengerSubHead small{display:block;color:#b98a00;font-size:9px;font-weight:1000;letter-spacing:.12em}.passengerSubHead h2{margin:2px 0 0;font-size:24px}#request.tab.on,#map.tab.on,#profile.tab.on{min-height:calc(100vh - 150px)}#brandTag:empty{display:none!important}
.driverRideScreen{min-height:calc(100vh - 115px)}.rideSubHead{position:sticky;top:98px;z-index:30;background:#181e27;padding:8px 0 10px;display:grid!important;grid-template-columns:46px 1fr auto}.driverRideMapCard{border-radius:24px;padding:16px;background:linear-gradient(145deg,#303743,#222832);border:1px solid #ffffff10;box-shadow:0 18px 42px #0003}.routeSummaryTop{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.routeSummaryTop>div{background:#151b23;border:1px solid #ffffff0d;border-radius:14px;padding:12px}.routeSummaryTop small{display:block;color:#f7c62d;font-size:9px;font-weight:1000;letter-spacing:.1em}.routeSummaryTop b{display:block;color:#fff;margin-top:5px;font-size:13px}.driverRouteMap{min-height:52vh;border-radius:20px;background:linear-gradient(145deg,#0f1720,#19222d);border:1px solid #ffffff10;display:grid;place-items:center}.mapPlaceholderText{max-width:280px;text-align:center;color:#8491a0;font-size:12px;line-height:1.5}.routePassengerCard{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:12px;margin-top:12px;padding:13px;border-radius:16px;background:#151b23;border:1px solid #ffffff0d}.ridePassengerAvatar{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#f7c62d;color:#111;font-size:20px;font-weight:1000}.routePassengerInfo b{display:block;color:#fff}.routePassengerInfo small{display:block;color:#8f9cac;margin-top:3px}.routeCallBtn{border:1px solid #2dd16f40;background:#2dd16f12;color:#72eba4;border-radius:12px;padding:10px 12px;font-weight:950}.rideScreenActions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.rideScreenMessages{margin-top:12px;padding:14px;border-radius:17px;background:#151b23;border:1px solid #ffffff0d}.rideNextRequest{margin-top:12px;padding:13px;border-radius:16px;background:#211c0f;border:1px solid #f7c62d2f}.rideNextRequest span{display:block;color:#f7c62d;font-size:9px;font-weight:1000}.rideNextRequest b{display:block;color:#fff;margin:5px 0 9px}.rideNextRequest button{border:0;border-radius:11px;background:#f7c62d;color:#111;padding:9px 11px;font-weight:950}.openRideScreenBtn{width:100%;margin-top:10px;border:1px solid #f7c62d45;background:#f7c62d0f;color:#f7c62d;border-radius:12px;padding:10px;font-weight:950}
.adminShellV18{min-height:100vh;background:linear-gradient(180deg,#121821,#1b222d);color:#fff;padding:14px}.adminHeaderV18{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border-radius:20px;background:#0d131cdd;backdrop-filter:blur(20px);border:1px solid #ffffff10}.adminBrand{display:flex;align-items:center;gap:11px}.adminBrand img{width:52px;height:52px;border-radius:15px}.adminBrand span{display:block;color:#f7c62d;font-size:9px;font-weight:1000}.adminBrand h1{margin:2px 0 0;font-size:20px}.adminExit{border:1px solid #ffffff15;background:#ffffff08;color:#fff;border-radius:12px;padding:10px 12px;font-weight:900}.adminMainV18{max-width:1100px;margin:14px auto 0}.adminMetricGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.adminMetricCard{text-align:left;border-radius:22px;padding:18px;background:linear-gradient(145deg,#2c3440,#202731);border:1px solid #ffffff0f;color:#fff}.adminMetricCard span{display:block;color:#f7c62d;font-size:9px;font-weight:1000}.adminMetricCard b{display:block;font-size:38px}.adminMetricCard small{color:#8f9cac}.liveMetric b{color:#67e99a}.adminPanelV18{display:none;margin-top:13px;border-radius:22px;padding:17px;background:#232a34;border:1px solid #ffffff0f}.adminPanelV18.activeAdminPanel{display:block}.adminPanelHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.adminPanelHead span{display:block;color:#f7c62d;font-size:9px;font-weight:1000}.adminPanelHead h2{margin:3px 0 0;font-size:24px}.adminCompanyList{display:grid;gap:8px}.adminCompanyRow{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:11px;width:100%;text-align:left;border-radius:16px;padding:11px;background:#171d25;border:1px solid #ffffff0d;color:#fff}.adminCompanyAvatar{width:48px;height:48px;border-radius:14px;background:#f7c62d;color:#111;display:grid;place-items:center;font-weight:1000}.adminCompanyMain b{display:block}.adminCompanyMain small{display:block;color:#8f9cac;font-size:10px}.adminCompanyStatus{font-size:9px;color:#f7c62d;font-weight:1000}.adminBackBtn{width:42px;height:42px;border-radius:13px;background:#151b23;border:1px solid #ffffff0d;color:#fff}.adminCompanyDetailGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.adminCompanyDetailGrid article{padding:13px;border-radius:15px;background:#171d25;border:1px solid #ffffff0d}.adminCompanyDetailGrid span{display:block;color:#f7c62d;font-size:8px;font-weight:1000}.adminCompanyDetailGrid b{display:block;margin-top:5px;font-size:13px}.adminCompanyActions{display:flex;gap:9px;margin-top:12px}
.logoShape{border-radius:22px!important}.photoShape{border-radius:50%!important;aspect-ratio:1!important;overflow:hidden!important}
@media(max-width:720px){.driverHeaderV17{top:8px!important}.driverBrandText h1{font-size:18px!important}.driverBrandText span{font-size:9px!important}.driverTopLogoV17{width:48px!important;height:48px!important}.driverStateBtn,.driverPlanBtn{font-size:9px!important;min-height:38px!important;padding:0 8px!important}.driverShortcutGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.routeSummaryTop{grid-template-columns:1fr}.driverRouteMap{min-height:48vh}.rideScreenActions{grid-template-columns:1fr}.adminCompanyDetailGrid{grid-template-columns:1fr}}
/* V18 — experiencia pasajero enfocada por pantalla */
#tenantApp.passengerMode{background:#f3f5f7}
#tenantApp.passengerMode .appMain{padding-top:16px}
#passenger .hero{margin-top:0;background:radial-gradient(circle at 82% 10%,#24303b 0,#101820 36%,#0a1017 100%);border:1px solid #ffffff12;box-shadow:0 22px 55px #10182824}
.passengerStats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.passengerHome{margin:0!important;padding:0!important;background:transparent!important;border:0!important}
.homeDriver{background:#fff;border:1px solid #e5e9ef;box-shadow:0 10px 30px #1018280b;padding:15px 16px;border-radius:20px;margin:12px 0}
.homeDriver small,.driverMapProfile small{font-size:9px!important;letter-spacing:.12em;color:#b98a00!important;font-weight:1000}
.driverMapProfile{padding:15px;background:#f8fafc;border:1px solid #e5e9ef;border-radius:18px;align-items:center}
.driverMapProfile .avatarSmall{width:62px;height:62px;flex:0 0 62px}
.driverMapProfile b{font-size:17px}.driverMapProfile span{font-size:12px!important;line-height:1.35}
#passenger.subview-open>.hero,#passenger.subview-open>.passengerStats{display:none!important}
#passenger.subview-open .tabs{margin-top:0;top:0}
#passenger.subview-open .tab.on{margin-top:10px;min-height:calc(100vh - 120px)}
#passenger.subview-open .appMain{padding-top:0}
@media(max-width:620px){#tenantApp.passengerMode .appMain{padding:12px}.passengerStats article{padding:14px 12px}.tabs{top:0}.passengerMapTall{height:auto!important;min-height:calc(100vh - 130px)!important;max-height:none!important}.mapmock{height:280px}.driverMapProfile .avatarSmall{width:58px;height:58px;flex-basis:58px}}
/* ================= V19 ================= */
/* Inicio / Pedir / Mapa / Perfil are the only passenger navigation. */
.passengerSubHead,
.passengerBack{
display:none!important;
}
#passenger.subview-open #home{
display:none!important;
}
#passenger.subview-open{
padding-top:0!important;
}
/* Subview begins immediately under the main nav. */
#request.tab.on,
#map.tab.on,
#profile.tab.on{
margin-top:0!important;
border-radius:24px!important;
}
#passenger.subview-open .tabs{
position:sticky;
top:0;
z-index:60;
margin-top:0!important;
}
/* Compact request view to reduce unnecessary vertical movement. */
@media(max-width:720px){
#request.tab.on{
padding:15px!important;
}
#request.tab.on label{
margin-bottom:7px!important;
font-size:14px!important;
}
#request.tab.on input,
#request.tab.on textarea{
min-height:50px!important;
padding:9px 11px!important;
font-size:16px!important;
}
#request.tab.on textarea{
height:60px!important;
min-height:60px!important;
resize:none!important;
}
#request.tab.on #locBtn{
min-height:46px!important;
margin:0 0 7px!important;
}
#request.tab.on .checkline{
min-height:50px!important;
padding:9px 11px!important;
}
#request.tab.on #requestRide{
min-height:48px!important;
margin-top:7px!important;
}
.mapViewTitle h2{
margin:0 0 10px!important;
font-size:25px!important;
}
}
/* Messages from the driver are prominent again. */
.driverMessagePanel.messageActive{
display:block!important;
margin:12px 0!important;
border:1px solid #f7c62d55!important;
box-shadow:0 12px 28px rgba(17,24,39,.16)!important;
}
.driverMessagePanel.messageActive:before{
content:"MENSAJE DEL CONDUCTOR";
display:block;
color:#f7c62d;
font-size:9px;
font-weight:1000;
letter-spacing:.12em;
margin-bottom:5px;
}
html,body,#tenantApp,#passenger{
max-width:100vw!important;
overflow-x:hidden!important;
}
/* ================= V20 MAPS / GPS ================= */
.liveMapShell,
.driverRouteMap{
position:relative;
overflow:hidden;
border-radius:22px;
background:#e8edf3;
border:1px solid rgba(17,24,39,.08);
}
.googleMapCanvas{
width:100%;
height:clamp(370px,56vh,650px);
min-height:370px;
}
.driverGoogleMap{
min-height:52vh;
height:clamp(420px,58vh,690px);
}
.mapEtaCard{
position:absolute;
left:14px;
right:14px;
bottom:14px;
z-index:5;
display:grid;
grid-template-columns:1fr auto;
grid-template-rows:auto auto;
gap:2px 12px;
padding:13px 15px;
border-radius:17px;
background:rgba(13,20,31,.92);
color:#fff;
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 16px 38px rgba(0,0,0,.28);
}
.mapEtaCard span{
grid-column:1;
color:#f7c62d;
font-size:9px;
font-weight:1000;
letter-spacing:.12em;
}
.mapEtaCard b{
grid-column:2;
grid-row:1/3;
align-self:center;
font-size:24px;
color:#fff;
}
.mapEtaCard small{
grid-column:1;
color:#9eaab8;
font-size:11px;
}
.placesAutocompleteHost{
margin-top:7px;
}
.placesAutocomplete{
width:100%;
color-scheme:light;
}
gmp-place-autocomplete{
width:100%;
--gmpx-color-surface:#ffffff;
--gmpx-color-on-surface:#111827;
--gmpx-font-family:inherit;
}
/* Keep Google attribution and controls unobstructed. */
.gm-style .gm-style-cc,
.gm-style a{
z-index:7;
}
@media(max-width:720px){
.googleMapCanvas{
height:calc(100dvh - 210px);
min-height:410px;
max-height:650px;
}
.driverGoogleMap{
height:calc(100dvh - 260px);
min-height:420px;
}
.mapEtaCard{
left:10px;
right:10px;
bottom:10px;
padding:11px 12px;
}
.mapEtaCard b{font-size:21px}
}
/* =========================================================
V25 — CLEAN RESPONSIVE LAYOUT
Only tenantApp is app-like. Marketing site remains normal.
========================================================= */
/* Global site: normal document flow */
html, body {
width: 100%;
max-width: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
#marketingSite {
position: relative;
width: 100%;
min-height: 100vh;
overflow: visible;
}
/* Tenant shell */
#tenantApp {
width: 100%;
max-width: none;
overflow-x: hidden;
}
#tenantApp .appMain {
width: 100%;
max-width: none;
margin: 0 auto;
box-sizing: border-box;
}
/* Role isolation */
#tenantApp.passengerMode #driver,
#tenantApp.passengerMode #driver.active {
display: none !important;
}
#tenantApp.driverMode #passenger,
#tenantApp.driverMode #passenger.active {
display: none !important;
}
/* Availability */
#passenger .hero .pill.isAvailable,
#driverAvailability.available,
#driverAvailability.online {
background: #16a34a !important;
color: #fff !important;
border-color: #16a34a !important;
}
#passenger .hero .pill.isUnavailable,
#driverAvailability.offline {
background: #dc2626 !important;
color: #fff !important;
border-color: #dc2626 !important;
}
/* Compact driver block */
.mapTopSummary {
display: grid;
gap: 10px;
}
.compactDriverProfile {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid rgba(17,24,39,.08);
border-radius: 16px;
background: #f8fafc;
min-width: 0;
}
.compactDriverProfile .avatarSmall {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 50%;
background-size: cover;
background-position: center;
}
.compactDriverProfile > div:last-child {
min-width: 0;
display: flex;
flex-direction: column;
}
.compactDriverProfile small {
color: #b58b00;
font-size: 9px;
font-weight: 950;
letter-spacing: .11em;
}
.compactDriverProfile b {
font-size: 15px;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.compactDriverProfile span {
font-size: 10px;
color: #667085;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Message block */
.driverMessagePanel {
padding: 8px 10px !important;
border-radius: 13px !important;
margin: 0 !important;
}
.driverMessagePanel > span {
display: block;
font-size: 8px !important;
line-height: 1 !important;
margin-bottom: 4px !important;
}
.driverMessageLine {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.driverMessageLine b {
font-size: 12px !important;
line-height: 1.15 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.driverMessageLine small {
font-size: 8px !important;
white-space: nowrap;
}
/* Install bubble */
.installBubble {
display: grid;
grid-template-columns: auto minmax(0,1fr) auto;
align-items: center;
gap: 10px;
min-height: 66px;
padding: 10px 12px;
border-radius: 18px;
background: rgba(10,18,31,.96);
color: #fff;
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 18px 44px rgba(0,0,0,.30);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.installBubble.hidden { display:none !important; }
.installBubbleLogo {
width:44px;height:44px;min-width:44px;border-radius:12px;
display:grid;place-items:center;background:#f7c62d;color:#111827;
font-weight:1000;background-size:cover;background-position:center;
}
.installBubbleCopy {
min-width:0;display:flex;flex-direction:column;gap:2px;
}
.installBubbleCopy b { font-size:14px;line-height:1.1; }
.installBubbleCopy small { color:#cbd5e1;font-size:11px;line-height:1.25; }
.installAction {
border:0;border-radius:12px;padding:10px 12px;
background:#f7c62d;color:#111827;font-weight:1000;white-space:nowrap;
}
.installClose {
position:absolute;top:-8px;right:-5px;width:26px;height:26px;
border-radius:50%;border:1px solid rgba(255,255,255,.18);
background:#111827;color:#fff;font-size:18px;line-height:1;
display:grid;place-items:center;z-index:2;
}
/* =========================================================
MOBILE — passenger/driver only, marketing unaffected
========================================================= */
@media (max-width: 760px) {
#tenantApp.passengerMode,
#tenantApp.driverMode {
position: fixed;
inset: 0;
width: 100vw;
height: 100dvh;
overflow: hidden;
background: #f4f6f8;
}
#tenantApp.passengerMode .appMain,
#tenantApp.driverMode .appMain {
position: absolute;
inset: 0 0 calc(50px + env(safe-area-inset-bottom)) 0;
width: 100%;
height: auto;
padding: 8px;
margin: 0;
overflow: hidden;
box-sizing: border-box;
}
/* Passenger */
#tenantApp.passengerMode #passenger {
display: flex !important;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 0;
overflow: hidden;
}
#passenger.subview-open .hero,
#passenger.subview-open .passengerStats {
display: none !important;
}
#passenger .tabs {
position: relative !important;
top: auto !important;
flex: 0 0 52px;
width: 100%;
margin: 0 0 7px !important;
padding: 4px !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 2px;
border-radius: 16px;
box-sizing: border-box;
z-index: 20;
}
#passenger .tabs button {
min-width: 0;
min-height: 43px;
padding: 5px 2px;
font-size: clamp(14px,4vw,17px);
white-space: nowrap;
overflow: hidden;
}
#passenger .tab {
flex: 1 1 auto;
min-height: 0;
width: 100%;
margin: 0 !important;
padding: 10px !important;
border-radius: 18px;
overflow: hidden;
box-sizing: border-box;
}
#passenger .tab:not(.on) {
display: none !important;
}
/* Home can breathe, but still fits */
#passenger #home.on {
display: block !important;
overflow: hidden;
}
/* Request */
#passenger #request.on {
display: grid !important;
grid-template-columns: 1fr 1fr;
grid-auto-rows: min-content;
gap: 6px 8px;
align-content: start;
overflow: hidden;
}
#passenger #request label {
margin: 0 !important;
font-size: 11px;
font-weight: 900;
}
#passenger #request label:nth-of-type(1),
#passenger #request label:nth-of-type(2) {
grid-column: span 1;
}
#passenger #request label:nth-of-type(3),
#passenger #request #locBtn,
#passenger #request label:nth-of-type(4),
#passenger #request label:nth-of-type(5),
#passenger #request .checkline,
#passenger #request #requestRide {
grid-column: 1 / -1;
}
#passenger #request input,
#passenger #request textarea {
width: 100%;
margin-top: 4px;
min-height: 38px;
padding: 8px 9px;
font-size: clamp(14px,4vw,17px);
border-radius: 12px;
box-sizing: border-box;
}
#passenger #request textarea {
min-height: 48px;
max-height: 52px;
resize: none;
}
#passenger #request #locBtn {
width: max-content;
max-width: 100%;
min-height: 38px;
padding: 8px 12px;
margin: 0;
font-size: 13px;
}
#passenger #request .checkline {
display: flex;
align-items: center;
gap: 7px;
padding: 6px 8px;
margin: 0 !important;
min-height: 38px;
font-size: 10px;
line-height: 1.15;
}
#passenger #request .checkline input {
width: 21px;
min-width: 21px;
height: 21px;
min-height: 21px;
margin: 0;
}
#passenger #request #requestRide {
display: block !important;
width: 100%;
min-height: 42px;
padding: 9px 12px;
margin: 0;
font-size: 15px;
}
/* Map */
#passenger #map.on {
display: grid !important;
grid-template-rows: auto minmax(0,1fr) auto auto;
gap: 6px;
overflow: hidden;
align-content: stretch;
}
#passenger #map .mapViewTitle {
display: none !important;
}
#passenger #map .mapTopSummary {
grid-row: 1;
display: grid;
grid-template-columns: 1fr;
gap: 6px;
width: 100%;
min-height: 0;
}
#passenger #map .mapTopSummary:has(.quotePanel:not(.hidden)) {
grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
}
#passenger #map .quotePanel {
margin: 0 !important;
padding: 8px 9px !important;
min-width: 0;
overflow: hidden;
}
.compactDriverProfile {
width: 100%;
min-width: 0;
min-height: 62px;
padding: 8px 9px;
box-sizing: border-box;
}
.compactDriverProfile .avatarSmall {
width: 45px;
height: 45px;
min-width: 45px;
}
#passenger #map .liveMapShell {
grid-row: 2;
width: min(100%, 460px);
height: 100%;
min-height: 0;
max-height: none;
justify-self: center;
margin: 0 auto;
border-radius: 15px;
overflow: hidden;
}
#passengerGoogleMap {
width: 100%;
height: 100%;
min-height: 0 !important;
max-height: none !important;
}
#passenger #map #rideStatus {
grid-row: 3;
margin: 0 !important;
padding: 7px 9px !important;
min-height: 32px;
font-size: 11px;
border-radius: 11px;
}
#passenger #map #driverMessagePanel {
grid-row: 4;
}
/* Profile */
#passenger #profile.on {
display: block !important;
overflow: hidden;
}
/* Driver */
#tenantApp.driverMode #driver {
display: flex !important;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 0;
overflow: hidden;
}
#tenantApp.driverMode .driverHeaderV17 {
flex: 0 0 auto;
}
#tenantApp.driverMode .panelScreen.activePanel {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/* Footer only inside tenant app */
#tenantApp .powered {
position: fixed !important;
left: 0;
right: 0;
bottom: 0;
height: calc(50px + env(safe-area-inset-bottom));
min-height: 50px;
margin: 0;
z-index: 90;
display: flex !important;
align-items: center;
justify-content: center;
}
#installBubble {
position: fixed !important;
z-index: 9999 !important;
left: 10px !important;
right: 10px !important;
bottom: calc(58px + env(safe-area-inset-bottom)) !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
}
}
/* =========================================================
DESKTOP / LAPTOP
========================================================= */
@media (min-width: 761px) {
#tenantApp .appMain {
width: 100%;
max-width: 1800px;
padding: 18px 24px 80px;
}
#tenantApp.driverMode #driver,
#tenantApp.passengerMode #passenger {
width: 100%;
max-width: none;
}
.driverDashboardGrid {
width: 100%;
}
@media (min-width: 1100px) {
.driverDashboardGrid {
grid-template-columns: minmax(0,1fr) minmax(0,1.25fr) minmax(280px,.8fr) !important;
gap: 18px !important;
}
.driverActionGrid {
grid-template-columns: repeat(5,minmax(0,1fr)) !important;
gap: 14px !important;
}
#passenger #map.on {
display: grid !important;
grid-template-columns: minmax(340px,.75fr) minmax(620px,1.5fr);
grid-template-rows: auto auto 1fr;
gap: 16px;
align-items: start;
}
#passenger #map .mapTopSummary {
grid-column: 1;
grid-row: 1;
grid-template-columns: 1fr;
}
#passenger #map .liveMapShell {
grid-column: 2;
grid-row: 1 / span 3;
height: min(72vh,760px);
min-height: 560px;
}
#passenger #map #rideStatus {
grid-column: 1;
grid-row: 2;
}
#passenger #map #driverMessagePanel {
grid-column: 1;
grid-row: 3;
}
}
}
/* =========================================================
V26 — DRIVER FLOW + FULL BLEED MOBILE
========================================================= */
@media (max-width: 760px) {
/* Full bleed only inside tenant app */
#tenantApp.passengerMode,
#tenantApp.driverMode {
background:#111827 !important;
}
#tenantApp.passengerMode .appMain,
#tenantApp.driverMode .appMain {
padding:0 !important;
inset:0 0 calc(48px + env(safe-area-inset-bottom)) 0 !important;
background:transparent !important;
}
#tenantApp.passengerMode #passenger,
#tenantApp.driverMode #driver {
border-radius:0 !important;
margin:0 !important;
width:100% !important;
max-width:none !important;
}
/* Remove white gutters around driver app */
#tenantApp.driverMode #driver,
#tenantApp.driverMode .driverViewV17,
#tenantApp.driverMode .panelScreen {
background:#202733 !important;
}
/* Header only exists on the hub/home screen */
#tenantApp.driverMode.driverSubmode .driverHeaderV17 {
display:none !important;
}
#tenantApp.driverMode:not(.driverSubmode) .driverHeaderV17 {
display:flex !important;
margin:0 !important;
border-radius:0 0 20px 20px !important;
padding:14px 14px 12px !important;
}
#tenantApp.driverMode.driverSubmode .panelScreen.activePanel {
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
max-width:none !important;
margin:0 !important;
padding:0 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
border-radius:0 !important;
background:#202733 !important;
}
#tenantApp.driverMode .driverSubHead {
position:sticky !important;
top:0 !important;
z-index:30 !important;
margin:0 !important;
padding:12px 14px !important;
min-height:66px !important;
border-radius:0 !important;
background:rgba(13,20,31,.97) !important;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
#tenantApp.driverMode .driverSubHead h2 {
font-size:clamp(22px,7vw,31px) !important;
line-height:1.05 !important;
}
#tenantApp.driverMode .driverSubHead > button:first-child {
width:46px !important;
height:46px !important;
min-width:46px !important;
}
/* Driver hub remains scrollable and practical */
#driverHub.activePanel {
overflow-y:auto !important;
overflow-x:hidden !important;
padding:10px !important;
min-height:0 !important;
}
#driverHub .driverDashboardGrid {
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
}
#driverHub .driverMainCard {
margin:0 !important;
border-radius:18px !important;
padding:13px !important;
}
#driverHub .driverRideSteps,
#driverHub .driverCommPanel {
display:none !important;
}
#driverHub .driverShortcutGrid {
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
margin:10px 0 14px !important;
}
#driverHub .driverShortcut {
min-height:88px !important;
padding:10px !important;
border-radius:16px !important;
}
#driverHub .driverShortcut small {
font-size:9px !important;
}
/* Incoming request full screen */
.driverIncomingPanel .incomingScreenCard {
padding:12px !important;
display:grid !important;
gap:10px !important;
}
.incomingScreenRoute {
display:grid !important;
gap:8px !important;
}
.incomingScreenRoute > div {
padding:12px !important;
border-radius:14px !important;
background:#0f1720 !important;
border:1px solid rgba(255,255,255,.07) !important;
}
.incomingScreenRoute span {
display:block !important;
color:#f7c62d !important;
font-size:9px !important;
font-weight:1000 !important;
letter-spacing:.12em !important;
margin-bottom:4px !important;
}
.incomingScreenRoute b {
display:block !important;
color:#fff !important;
font-size:clamp(16px,5vw,21px) !important;
line-height:1.2 !important;
overflow-wrap:anywhere !important;
}
.driverIncomingPanel .driverQuoteBox {
display:grid !important;
grid-template-columns:1fr !important;
gap:8px !important;
padding:12px !important;
border-radius:16px !important;
background:#151d28 !important;
}
.driverIncomingPanel .driverQuoteBox.hidden {
display:none !important;
}
.driverIncomingPanel .darkField input {
min-height:48px !important;
font-size:17px !important;
}
.quoteWaitingHint {
padding:10px 11px !important;
border-radius:12px !important;
background:rgba(247,198,45,.10) !important;
border:1px solid rgba(247,198,45,.28) !important;
color:#f7c62d !important;
font-size:12px !important;
font-weight:800 !important;
}
.incomingActions {
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:8px !important;
}
.incomingActions button {
width:100% !important;
min-height:48px !important;
}
/* Active ride is a true full-screen task screen */
#driverRideScreen.activePanel .driverRideMapCard {
padding:10px !important;
display:grid !important;
gap:8px !important;
}
#driverRideScreen .routeSummaryTop {
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:7px !important;
}
#driverRideScreen .routeSummaryTop > div {
min-width:0 !important;
padding:9px 10px !important;
border-radius:12px !important;
}
#driverRideScreen .routeSummaryTop b {
font-size:12px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
#driverRideScreen .driverRouteMap {
width:min(100%,480px) !important;
aspect-ratio:1/1 !important;
height:auto !important;
min-height:0 !important;
margin:0 auto !important;
border-radius:16px !important;
overflow:hidden !important;
}
#driverRideScreen #driverGoogleMap {
width:100% !important;
height:100% !important;
min-height:0 !important;
}
#driverRideScreen .routePassengerCard {
margin:0 !important;
padding:8px 10px !important;
min-height:58px !important;
}
#driverRideScreen .rideScreenActions {
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
margin:0 !important;
}
#driverRideScreen .rideScreenActions button {
min-width:0 !important;
min-height:43px !important;
padding:7px 4px !important;
font-size:11px !important;
}
#driverRideScreen .rideScreenMessages {
padding:9px !important;
border-radius:14px !important;
margin:0 !important;
}
#driverRideScreen .driverQuickMsgs {
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:5px !important;
}
#driverRideScreen .driverQuickMsgs button {
min-width:0 !important;
padding:7px 4px !important;
font-size:9px !important;
}
#driverRideScreen .driverCustomMsg {
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
gap:6px !important;
}
/* Business/CRM/QR/account own the entire viewport */
#driverBusinessPanel.activePanel,
#driverCrmPanel.activePanel,
#driverQrPanel.activePanel,
#driverAccountPanel.activePanel {
padding-bottom:18px !important;
}
#driverBusinessPanel .driverSettingsCard,
#driverCrmPanel .crmStatsV17,
#driverCrmPanel .crmAccordionV17,
#driverQrPanel .qrCardV17,
#driverAccountPanel .accountCardV17 {
margin:10px !important;
width:auto !important;
max-width:none !important;
}
.driverSaveDock {
position:static !important;
inset:auto !important;
}
.saveBusinessCard {
position:static !important;
padding:10px !important;
margin:10px !important;
}
.saveBusinessBtn {
position:static !important;
width:100% !important;
min-height:50px !important;
margin:0 !important;
}
/* QR fits; no oversized image forcing a bad viewport */
#driverQrPanel .qrCanvasWrap {
width:min(100%,420px) !important;
margin:0 auto !important;
}
#driverQrPanel .qrCardV17 {
padding:12px !important;
}
#driverQrPanel .qrCopyV17 code {
white-space:normal !important;
overflow-wrap:anywhere !important;
}
/* Passenger map: clear stack, no cut-off messages */
#tenantApp.passengerMode #passenger #map.on {
display:grid !important;
grid-template-rows:auto auto auto auto !important;
gap:7px !important;
align-content:start !important;
overflow-y:auto !important;
overflow-x:hidden !important;
padding:8px !important;
}
#tenantApp.passengerMode #passenger #map .mapTopSummary {
display:grid !important;
grid-template-columns:1fr !important;
gap:7px !important;
}
#tenantApp.passengerMode #passenger #map .mapTopSummary:has(.quotePanel:not(.hidden)) {
grid-template-columns:1fr 1fr !important;
}
#tenantApp.passengerMode #passenger #map .compactDriverProfile {
min-height:88px !important;
padding:10px !important;
}
#tenantApp.passengerMode #passenger #map .compactDriverProfile .avatarSmall {
width:56px !important;
height:56px !important;
min-width:56px !important;
}
#tenantApp.passengerMode #passenger #map .liveMapShell {
width:min(100%,430px) !important;
aspect-ratio:1/1 !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
justify-self:center !important;
}
#tenantApp.passengerMode #passenger #map #passengerGoogleMap {
width:100% !important;
height:100% !important;
}
#tenantApp.passengerMode #passenger #map #rideStatus {
min-height:40px !important;
display:flex !important;
align-items:center !important;
padding:8px 10px !important;
}
#tenantApp.passengerMode #passenger #map #driverMessagePanel {
display:block;
min-height:54px !important;
padding:9px 10px !important;
}
#tenantApp.passengerMode #passenger #map #driverMessagePanel.hidden {
display:none !important;
}
/* App footer flush to edges */
#tenantApp .powered {
left:0 !important;
right:0 !important;
width:100% !important;
border-radius:0 !important;
margin:0 !important;
}
}
/* Desktop/laptop: subpanels are full workspaces too */
@media (min-width: 761px) {
#tenantApp.driverMode.driverSubmode .driverHeaderV17 {
display:none !important;
}
#tenantApp.driverMode.driverSubmode .panelScreen.activePanel {
width:100% !important;
max-width:1500px !important;
margin:0 auto !important;
}
#driverRideScreen .driverRouteMap {
width:min(100%,760px) !important;
aspect-ratio:1/1 !important;
height:auto !important;
margin:0 auto !important;
}
#driverIncomingPanel .incomingScreenCard {
max-width:980px !important;
margin:20px auto !important;
}
}
/* =========================================================
V27 — PASSENGER HOME / MAP + DRIVER ACTIVE RIDE POLISH
========================================================= */
@media (max-width:760px){
/* Passenger must be light. Only the hero itself stays dark. */
#tenantApp.passengerMode {
background:#eef1f5 !important;
}
#tenantApp.passengerMode #passenger {
background:#eef1f5 !important;
}
#tenantApp.passengerMode #passenger #home.on {
display:block !important;
width:100% !important;
height:100% !important;
min-height:0 !important;
padding:10px !important;
background:#eef1f5 !important;
overflow:hidden !important;
}
#tenantApp.passengerMode #passenger .passengerSocials {
display:flex !important;
flex-wrap:wrap !important;
gap:7px !important;
margin:8px 2px 0 !important;
}
#tenantApp.passengerMode #passenger .socialChip {
background:#fff !important;
color:#111827 !important;
border:1px solid #d8dee7 !important;
}
/* Passenger MAP: readable stack, not two cramped columns. */
#tenantApp.passengerMode #passenger #map.on {
grid-template-rows:auto minmax(0,1fr) auto auto !important;
align-content:stretch !important;
overflow:hidden !important;
background:#f7f8fa !important;
}
#tenantApp.passengerMode #passenger #map .mapTopSummary,
#tenantApp.passengerMode #passenger #map .mapTopSummary:has(.quotePanel:not(.hidden)) {
display:grid !important;
grid-template-columns:1fr !important;
grid-template-rows:auto auto !important;
gap:6px !important;
}
/* Driver first, quote second. */
#tenantApp.passengerMode #passenger #map .compactDriverProfile {
grid-row:1 !important;
min-height:66px !important;
padding:8px 10px !important;
display:grid !important;
grid-template-columns:48px minmax(0,1fr) !important;
gap:9px !important;
align-items:center !important;
background:#fff !important;
}
#tenantApp.passengerMode #passenger #map .compactDriverProfile .avatarSmall {
width:48px !important;
height:48px !important;
min-width:48px !important;
}
#tenantApp.passengerMode #passenger #map .compactDriverProfile > div:last-child {
min-width:0 !important;
}
#tenantApp.passengerMode #passenger #map .compactDriverProfile small {
font-size:8px !important;
margin-bottom:2px !important;
}
#tenantApp.passengerMode #passenger #map .compactDriverProfile b {
display:block !important;
font-size:16px !important;
line-height:1.05 !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
max-height:2.1em !important;
}
#tenantApp.passengerMode #passenger #map .compactDriverProfile span {
display:block !important;
margin-top:3px !important;
font-size:10px !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
}
#tenantApp.passengerMode #passenger #map .quotePanel {
grid-row:2 !important;
min-height:52px !important;
padding:7px 10px !important;
display:grid !important;
grid-template-columns:auto minmax(0,1fr) auto !important;
grid-template-rows:auto auto !important;
gap:1px 8px !important;
align-items:center !important;
border-radius:14px !important;
}
#tenantApp.passengerMode #passenger #map .quotePanel.hidden {
display:none !important;
}
#tenantApp.passengerMode #passenger #map .quoteEyebrow {
grid-column:1 !important;
grid-row:1 / span 2 !important;
align-self:center !important;
font-size:8px !important;
writing-mode:horizontal-tb !important;
}
#tenantApp.passengerMode #passenger #map .quotePanel > b {
grid-column:2 !important;
grid-row:1 !important;
font-size:20px !important;
line-height:1 !important;
margin:0 !important;
}
#tenantApp.passengerMode #passenger #map .quotePanel > small {
grid-column:2 !important;
grid-row:2 !important;
font-size:9px !important;
line-height:1.05 !important;
margin:0 !important;
}
#tenantApp.passengerMode #passenger #map .quoteActions {
grid-column:3 !important;
grid-row:1 / span 2 !important;
display:flex !important;
gap:4px !important;
margin:0 !important;
}
#tenantApp.passengerMode #passenger #map .quoteActions.hidden {
display:none !important;
}
#tenantApp.passengerMode #passenger #map .quoteActions button {
min-height:34px !important;
padding:6px 8px !important;
font-size:9px !important;
}
/* Map remains the main element. */
#tenantApp.passengerMode #passenger #map .liveMapShell {
width:min(100%,430px) !important;
height:100% !important;
aspect-ratio:auto !important;
min-height:250px !important;
max-height:none !important;
border-radius:15px !important;
}
/* ETA is a small floating chip, not a full-width panel. */
#tenantApp.passengerMode #passenger #map .mapEtaCard {
left:auto !important;
right:8px !important;
bottom:8px !important;
width:auto !important;
min-width:116px !important;
max-width:155px !important;
padding:7px 9px !important;
border-radius:13px !important;
display:grid !important;
grid-template-columns:1fr auto !important;
gap:1px 8px !important;
}
#tenantApp.passengerMode #passenger #map .mapEtaCard.hidden {
display:none !important;
}
#tenantApp.passengerMode #passenger #map .mapEtaCard span {
font-size:7px !important;
letter-spacing:.08em !important;
}
#tenantApp.passengerMode #passenger #map .mapEtaCard b {
font-size:17px !important;
}
#tenantApp.passengerMode #passenger #map .mapEtaCard small {
font-size:8px !important;
}
/* Status becomes a small chip. */
#tenantApp.passengerMode #passenger #map #rideStatus {
width:max-content !important;
max-width:70% !important;
min-height:30px !important;
padding:6px 10px !important;
border-radius:999px !important;
font-size:10px !important;
line-height:1 !important;
margin:0 !important;
justify-self:start !important;
background:#111827 !important;
color:#fff !important;
}
/* Message: one compact line. No duplicate heading. */
#tenantApp.passengerMode #passenger #map #driverMessagePanel {
min-height:38px !important;
padding:6px 9px !important;
border-radius:12px !important;
display:grid !important;
grid-template-columns:auto minmax(0,1fr) auto !important;
gap:7px !important;
align-items:center !important;
}
#tenantApp.passengerMode #passenger #map #driverMessagePanel.hidden {
display:none !important;
}
#tenantApp.passengerMode #passenger #map #driverMessagePanel:before {
content:none !important;
display:none !important;
}
#tenantApp.passengerMode #passenger #map #driverMessagePanel > span {
font-size:7px !important;
margin:0 !important;
white-space:nowrap !important;
}
#tenantApp.passengerMode #passenger #map .driverMessageLine {
display:contents !important;
}
#tenantApp.passengerMode #passenger #map .driverMessageLine b {
font-size:11px !important;
margin:0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
#tenantApp.passengerMode #passenger #map .driverMessageLine small {
font-size:8px !important;
margin:0 !important;
}
#tenantApp.passengerMode #passenger #map #driverMessagePanel.completedMessage {
opacity:.72 !important;
}
/* DRIVER ACTIVE RIDE */
#driverRideScreen .rideSubHead {
display:grid !important;
grid-template-columns:46px minmax(0,1fr) auto !important;
gap:10px !important;
align-items:center !important;
}
#driverRideScreen .rideSubHead > div {
min-width:0 !important;
}
#driverRideScreen .rideSubHead h2 {
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
font-size:clamp(24px,7vw,34px) !important;
}
.rideStageChip {
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-width:84px !important;
max-width:112px !important;
min-height:38px !important;
padding:7px 8px !important;
border-radius:999px !important;
border:1px solid rgba(255,255,255,.12) !important;
font-size:8px !important;
font-weight:1000 !important;
letter-spacing:.05em !important;
white-space:nowrap !important;
}
.rideStageChip.stagePickup {
color:#38d98a !important;
background:rgba(22,163,74,.12) !important;
border-color:rgba(56,217,138,.34) !important;
}
.rideStageChip.stageArrived {
color:#f7c62d !important;
background:rgba(247,198,45,.10) !important;
border-color:rgba(247,198,45,.32) !important;
}
.rideStageChip.stageOnboard {
color:#7dd3fc !important;
background:rgba(14,165,233,.12) !important;
border-color:rgba(125,211,252,.28) !important;
}
#driverRideScreen .rideScreenActions button {
transition:none !important;
opacity:.38 !important;
filter:saturate(.4) !important;
}
#driverRideScreen .rideScreenActions button.currentStep {
opacity:1 !important;
filter:none !important;
transform:none !important;
box-shadow:0 0 0 2px rgba(247,198,45,.18) !important;
}
#driverRideScreen .rideScreenActions button.doneStep {
opacity:.72 !important;
filter:none !important;
background:#173526 !important;
color:#71e5a6 !important;
border-color:#285b40 !important;
}
/* Smaller ETA on driver map too. */
#driverRideScreen .driverEtaCard {
left:auto !important;
right:8px !important;
bottom:8px !important;
width:auto !important;
min-width:120px !important;
max-width:160px !important;
padding:7px 9px !important;
border-radius:13px !important;
}
/* Messages are secondary, but available. */
#driverRideScreen .rideScreenMessages {
background:#101822 !important;
border:1px solid #273241 !important;
}
}
/* Remove the legacy duplicate passenger message heading everywhere. */
.driverMessagePanel.messageActive:before {
content:none !important;
display:none !important;
}
/* =========================================================
V28 — QUOTE STATE / LIVE SYNC / 4-STEP DRIVER FLOW
========================================================= */
.quoteWaitingHint{
background:rgba(34,197,94,.12)!important;
border-color:rgba(34,197,94,.38)!important;
color:#55df8b!important;
font-weight:900!important;
}
@media(max-width:760px){
/* Passenger quote actions: safer separation and stronger labels */
#tenantApp.passengerMode #passenger #map .quoteActions{
gap:8px!important;
}
#tenantApp.passengerMode #passenger #map .quoteActions button{
min-height:38px!important;
padding:7px 11px!important;
font-size:11px!important;
font-weight:950!important;
border-radius:10px!important;
}
/* ETA slightly larger, still compact */
#tenantApp.passengerMode #passenger #map .mapEtaCard{
min-width:138px!important;
max-width:178px!important;
padding:8px 10px!important;
}
#tenantApp.passengerMode #passenger #map .mapEtaCard span{
font-size:9px!important;
font-weight:1000!important;
letter-spacing:.09em!important;
}
#tenantApp.passengerMode #passenger #map .mapEtaCard b{
font-size:19px!important;
}
#tenantApp.passengerMode #passenger #map .mapEtaCard small{
font-size:10px!important;
font-weight:700!important;
}
/* Driver ETA same readability */
#driverRideScreen .driverEtaCard{
min-width:140px!important;
max-width:180px!important;
}
#driverRideScreen .driverEtaCard span{
font-size:9px!important;
}
#driverRideScreen .driverEtaCard small{
font-size:10px!important;
}
/* Driver active ride gets its own visual identity */
#tenantApp.driverMode.driverRideMode,
#tenantApp.driverMode.driverRideMode #driverRideScreen.activePanel{
background:#16202d!important;
}
#driverRideScreen .driverRideMapCard{
background:#202b39!important;
}
#driverRideScreen .rideScreenMessages{
background:#0d1621!important;
}
.rideStageChip.stageReady{
color:#fff!important;
background:rgba(99,102,241,.18)!important;
border-color:rgba(129,140,248,.45)!important;
}
/* Four actions fit without confusion */
#driverRideScreen .rideScreenActions{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:5px!important;
}
#driverRideScreen .rideScreenActions button{
min-height:46px!important;
padding:6px 3px!important;
font-size:9px!important;
line-height:1.08!important;
white-space:normal!important;
}
}
/* Avoid stale ETA when app deliberately hides it. */
.mapEtaCard.hidden{
display:none!important;
}
/* =========================================================
V43 — TOP RIDE STATUS + VISIBLE ETA
========================================================= */
@media (max-width:760px){
#tenantApp.passengerMode #passenger #map.on{
display:block!important;
min-height:0!important;
overflow:hidden!important;
padding:0!important;
}
#tenantApp.passengerMode #passenger #map .mapStableLayout{
height:100%!important;
min-height:0!important;
display:grid!important;
grid-template-rows:auto auto auto minmax(0,1fr)!important;
gap:7px!important;
overflow:hidden!important;
}
#tenantApp.passengerMode #passenger #map .compactDriverProfile{
grid-row:1!important;
min-height:62px!important;
margin:0!important;
}
/* QUOTE: left = price, right = actions OR ride state */
#tenantApp.passengerMode #passenger #map .quotePanel{
grid-row:2!important;
width:100%!important;
min-height:64px!important;
display:grid!important;
grid-template-columns:minmax(0,56%) minmax(0,44%)!important;
align-items:stretch!important;
gap:0!important;
padding:0!important;
margin:0!important;
border:1.5px solid #f1cf61!important;
border-radius:15px!important;
background:#fffaf0!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
#tenantApp.passengerMode #passenger #map .quotePanel.hidden{
display:none!important;
}
#tenantApp.passengerMode #passenger #map .quoteCore{
grid-column:1!important;
min-width:0!important;
padding:8px 12px!important;
display:grid!important;
grid-template-columns:1fr!important;
grid-template-rows:auto auto auto!important;
align-content:center!important;
gap:3px!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
#tenantApp.passengerMode #passenger #map .quoteEyebrow{
margin:0!important;
color:#9f4d0b!important;
font-size:8px!important;
line-height:1!important;
font-weight:1000!important;
letter-spacing:.12em!important;
white-space:nowrap!important;
}
#tenantApp.passengerMode #passenger #map #quoteAmount{
margin:0!important;
color:#111827!important;
font-size:18px!important;
line-height:1.04!important;
font-weight:1000!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
#tenantApp.passengerMode #passenger #map #quoteMessage{
margin:0!important;
color:#5f6b7c!important;
font-size:8px!important;
line-height:1.08!important;
font-weight:720!important;
white-space:normal!important;
display:-webkit-box!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
overflow:hidden!important;
}
#tenantApp.passengerMode #passenger #map .quoteActions{
grid-column:2!important;
min-width:0!important;
padding:8px 9px!important;
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:7px!important;
align-items:center!important;
box-sizing:border-box!important;
}
#tenantApp.passengerMode #passenger #map .quoteActions.hidden{
display:none!important;
}
#tenantApp.passengerMode #passenger #map .quoteActions button{
width:100%!important;
min-width:0!important;
min-height:34px!important;
padding:6px 7px!important;
border-radius:9px!important;
font-size:8.5px!important;
line-height:1!important;
font-weight:950!important;
white-space:nowrap!important;
}
/* TOP STATIC RIDE STAGE */
#tenantApp.passengerMode #passenger #map .quoteRideStage{
grid-column:2!important;
min-width:0!important;
padding:9px 12px!important;
display:grid!important;
grid-template-columns:1fr!important;
grid-template-rows:auto auto!important;
align-content:center!important;
gap:5px!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
#tenantApp.passengerMode #passenger #map .quoteRideStage.hidden{
display:none!important;
}
#tenantApp.passengerMode #passenger #map .quoteRideStage>span{
color:#9f4d0b!important;
font-size:8px!important;
line-height:1!important;
font-weight:1000!important;
letter-spacing:.11em!important;
white-space:nowrap!important;
}
#tenantApp.passengerMode #passenger #map .quoteRideStage>b{
color:#172033!important;
font-size:11px!important;
line-height:1.12!important;
font-weight:900!important;
white-space:normal!important;
display:-webkit-box!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
overflow:hidden!important;
}
/* MESSAGE CARD: keep it separate, but slightly more readable. */
#tenantApp.passengerMode #passenger #map .driverMessageCard{
grid-row:3!important;
width:100%!important;
min-height:46px!important;
max-height:58px!important;
padding:8px 12px!important;
display:grid!important;
grid-template-columns:auto minmax(0,1fr)!important;
align-items:center!important;
gap:10px!important;
border:1px solid rgba(241,207,97,.72)!important;
border-radius:12px!important;
background:#172033!important;
color:#fff!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
#tenantApp.passengerMode #passenger #map .driverMessageCard.hidden{
display:none!important;
}
#tenantApp.passengerMode #passenger #map .driverMessageCard>span{
color:#f7c948!important;
font-size:7.5px!important;
line-height:1!important;
font-weight:1000!important;
letter-spacing:.10em!important;
white-space:nowrap!important;
}
#tenantApp.passengerMode #passenger #map .driverMessageBody{
min-width:0!important;
display:flex!important;
align-items:center!important;
gap:8px!important;
}
#tenantApp.passengerMode #passenger #map .driverMessageBody>b{
flex:1 1 auto!important;
min-width:0!important;
color:#fff!important;
font-size:10.5px!important;
line-height:1.12!important;
font-weight:850!important;
white-space:normal!important;
display:-webkit-box!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
overflow:hidden!important;
overflow-wrap:anywhere!important;
}
#tenantApp.passengerMode #passenger #map .driverMessageBody>small{
flex:0 0 auto!important;
color:#aeb7c5!important;
font-size:7px!important;
white-space:nowrap!important;
}
/* MAP */
#tenantApp.passengerMode #passenger #map .liveMapShell{
grid-row:4!important;
position:relative!important;
width:100%!important;
height:100%!important;
min-height:250px!important;
border-radius:15px!important;
overflow:hidden!important;
align-self:stretch!important;
}
/* Bottom-left trip stage, lifted well above fixed footer */
#tenantApp.passengerMode #passenger #map #rideStatus{
position:absolute!important;
left:12px!important;
bottom:78px!important;
z-index:60!important;
display:flex!important;
align-items:center!important;
width:max-content!important;
max-width:48%!important;
min-height:38px!important;
padding:8px 12px!important;
margin:0!important;
border-radius:13px!important;
background:#111827!important;
color:#fff!important;
font-size:10px!important;
line-height:1.1!important;
font-weight:850!important;
box-shadow:0 4px 14px rgba(15,23,42,.22)!important;
pointer-events:none!important;
box-sizing:border-box!important;
}
#tenantApp.passengerMode #passenger #map #rideStatus.hidden{
display:none!important;
}
/* Bottom-right ETA, same lifted baseline */
#tenantApp.passengerMode #passenger #map .mapEtaCard{
position:absolute!important;
right:12px!important;
bottom:78px!important;
z-index:60!important;
width:auto!important;
min-width:126px!important;
max-width:154px!important;
min-height:50px!important;
padding:8px 10px!important;
margin:0!important;
border-radius:13px!important;
display:grid!important;
grid-template-columns:1fr auto!important;
grid-template-rows:auto auto!important;
gap:2px 9px!important;
align-items:center!important;
box-sizing:border-box!important;
}
#tenantApp.passengerMode #passenger #map .mapEtaCard.hidden{
display:none!important;
}
#tenantApp.passengerMode #passenger #map .mapEtaCard span{
grid-column:1!important;
grid-row:1!important;
font-size:8px!important;
line-height:1.05!important;
}
#tenantApp.passengerMode #passenger #map .mapEtaCard b{
grid-column:2!important;
grid-row:1 / span 2!important;
font-size:20px!important;
line-height:1!important;
}
#tenantApp.passengerMode #passenger #map .mapEtaCard small{
grid-column:1!important;
grid-row:2!important;
font-size:8px!important;
line-height:1!important;
}
}
@media (max-width:390px){
#tenantApp.passengerMode #passenger #map .quotePanel{
min-height:60px!important;
}
#tenantApp.passengerMode #passenger #map #quoteAmount{
font-size:16px!important;
}
#tenantApp.passengerMode #passenger #map .quoteRideStage>b{
font-size:9.5px!important;
}
#tenantApp.passengerMode #passenger #map .driverMessageCard{
min-height:44px!important;
padding:7px 9px!important;
}
#tenantApp.passengerMode #passenger #map .driverMessageCard>span{
font-size:6.5px!important;
}
#tenantApp.passengerMode #passenger #map .driverMessageBody>b{
font-size:9px!important;
}
#tenantApp.passengerMode #passenger #map .driverMessageBody>small{
display:none!important;
}
#tenantApp.passengerMode #passenger #map #rideStatus{
left:9px!important;
bottom:72px!important;
max-width:47%!important;
min-height:34px!important;
padding:7px 10px!important;
font-size:9px!important;
}
#tenantApp.passengerMode #passenger #map .mapEtaCard{
right:9px!important;
bottom:72px!important;
min-width:116px!important;
max-width:144px!important;
}
}
/* =========================================================
V45 — MOBILE DRIVER APP SHELL
Scoped only to driver mode. Passenger UI untouched.
========================================================= */
@media (max-width:760px){
/* -------- Driver shell -------- */
#tenantApp.driverMode{
width:100%!important;
max-width:100vw!important;
min-height:100dvh!important;
overflow:hidden!important;
}
#tenantApp.driverMode #driver{
width:100%!important;
max-width:100%!important;
min-height:100dvh!important;
padding:0!important;
overflow:hidden!important;
}
#tenantApp.driverMode .driverViewV17{
width:100%!important;
max-width:100%!important;
height:calc(100dvh - 58px - env(safe-area-inset-bottom))!important;
min-height:0!important;
padding:8px!important;
border-radius:0!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
/* Home header only. It disappears on all sub-screens. */
#tenantApp.driverMode:not(.driverSubmode) .driverHeaderV17{
position:relative!important;
top:auto!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:center!important;
gap:7px!important;
min-height:72px!important;
width:100%!important;
margin:0 0 8px!important;
padding:9px 10px!important;
border-radius:18px!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
#tenantApp.driverMode.driverSubmode .driverHeaderV17{
display:none!important;
}
#tenantApp.driverMode .driverBrandV17{
min-width:0!important;
gap:8px!important;
}
#tenantApp.driverMode .driverTopLogoV17{
width:44px!important;
height:44px!important;
min-width:44px!important;
border-radius:13px!important;
}
#tenantApp.driverMode .driverBrandText{
min-width:0!important;
}
#tenantApp.driverMode .driverBrandText span{
font-size:8px!important;
}
#tenantApp.driverMode .driverBrandText h1{
width:100%!important;
max-width:100%!important;
font-size:16px!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
#tenantApp.driverMode .driverHeaderActions{
display:grid!important;
grid-template-columns:auto auto!important;
gap:5px!important;
align-items:center!important;
}
#tenantApp.driverMode .driverStateBtn,
#tenantApp.driverMode .driverPlanBtn{
min-width:0!important;
min-height:34px!important;
padding:0 7px!important;
font-size:8px!important;
white-space:nowrap!important;
}
#tenantApp.driverMode .driverExitBtn{
display:none!important;
}
/* -------- HOME = only operational cards + Tools -------- */
#tenantApp.driverMode #driverHub.activePanel{
display:flex!important;
flex-direction:column!important;
height:calc(100% - 80px)!important;
min-height:0!important;
padding:0 2px 16px!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior-y:contain!important;
-webkit-overflow-scrolling:touch!important;
box-sizing:border-box!important;
}
#tenantApp.driverMode #driverHub .driverDashboardGrid{
display:grid!important;
grid-template-columns:1fr!important;
gap:9px!important;
width:100%!important;
}
#tenantApp.driverMode #driverHub .driverMainCard{
width:100%!important;
min-width:0!important;
margin:0!important;
padding:12px!important;
border-radius:18px!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
/* Don't duplicate journey controls/messages on Home. They belong to ride screen. */
#tenantApp.driverMode #driverHub .driverRideSteps,
#tenantApp.driverMode #driverHub .driverCommPanel{
display:none!important;
}
#tenantApp.driverMode #driverHub .driverCardTop{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
gap:7px!important;
align-items:start!important;
}
#tenantApp.driverMode #driverHub .driverCardTop>div{
min-width:0!important;
}
#tenantApp.driverMode #driverHub .driverCardTop h2{
font-size:20px!important;
line-height:1.06!important;
overflow-wrap:anywhere!important;
}
#tenantApp.driverMode #driverHub .driverStatusPill{
justify-self:end!important;
width:auto!important;
min-width:0!important;
max-width:128px!important;
padding:6px 8px!important;
font-size:7px!important;
line-height:1.15!important;
text-align:center!important;
white-space:normal!important;
overflow-wrap:anywhere!important;
}
#tenantApp.driverMode #driverHub .driverEmptyBlock,
#tenantApp.driverMode #driverHub .activeRideSummary{
min-width:0!important;
max-width:100%!important;
padding:11px!important;
font-size:12px!important;
line-height:1.45!important;
overflow-wrap:anywhere!important;
box-sizing:border-box!important;
}
#tenantApp.driverMode #driverHub .openRideScreenBtn{
min-height:42px!important;
padding:8px!important;
font-size:14px!important;
}
/* -------- One compact Tools control -------- */
#tenantApp.driverMode .driverToolsDock{
position:relative!important;
width:100%!important;
margin:9px 0 4px!important;
}
#tenantApp.driverMode .driverToolsButton{
width:100%!important;
min-height:54px!important;
display:grid!important;
grid-template-columns:36px minmax(0,1fr) 24px!important;
gap:9px!important;
align-items:center!important;
padding:8px 10px!important;
border:1px solid rgba(247,198,45,.25)!important;
border-radius:16px!important;
background:#151b23!important;
color:#fff!important;
text-align:left!important;
box-sizing:border-box!important;
}
#tenantApp.driverMode .driverToolsButton .driverToolsIcon{
width:36px!important;
height:36px!important;
display:grid!important;
place-items:center!important;
border-radius:11px!important;
background:#242c38!important;
color:#f7c62d!important;
}
#tenantApp.driverMode .driverToolsButton div{
min-width:0!important;
}
#tenantApp.driverMode .driverToolsButton b{
display:block!important;
font-size:14px!important;
}
#tenantApp.driverMode .driverToolsButton small{
display:block!important;
margin-top:2px!important;
color:#8f9cac!important;
font-size:9px!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
#tenantApp.driverMode .driverToolsButton i{
font-style:normal!important;
font-size:17px!important;
text-align:center!important;
transition:transform .18s ease!important;
}
#tenantApp.driverMode .driverToolsButton.open i{
transform:rotate(180deg)!important;
}
#tenantApp.driverMode .driverToolsDrawer{
display:grid!important;
grid-template-columns:1fr!important;
gap:5px!important;
margin-top:6px!important;
padding:7px!important;
border:1px solid rgba(255,255,255,.08)!important;
border-radius:15px!important;
background:#101720!important;
box-shadow:0 18px 35px rgba(0,0,0,.26)!important;
}
#tenantApp.driverMode .driverToolsDrawer.hidden{
display:none!important;
}
#tenantApp.driverMode .driverToolItem{
min-height:46px!important;
display:grid!important;
grid-template-columns:32px minmax(0,1fr)!important;
gap:8px!important;
align-items:center!important;
padding:7px 9px!important;
border:0!important;
border-radius:11px!important;
background:#1a222e!important;
color:#fff!important;
text-align:left!important;
}
#tenantApp.driverMode .driverToolItem>span{
width:32px!important;
height:32px!important;
display:grid!important;
place-items:center!important;
border-radius:9px!important;
background:#252e3b!important;
color:#f7c62d!important;
}
#tenantApp.driverMode .driverToolItem div{
min-width:0!important;
}
#tenantApp.driverMode .driverToolItem b{
display:block!important;
font-size:12px!important;
}
#tenantApp.driverMode .driverToolItem small{
display:block!important;
margin-top:1px!important;
color:#8f9cac!important;
font-size:8px!important;
}
/* -------- Every sub-area is its own full mobile screen -------- */
#tenantApp.driverMode.driverSubmode .panelScreen.activePanel{
position:absolute!important;
inset:0!important;
z-index:20!important;
display:block!important;
width:100%!important;
height:100%!important;
min-height:0!important;
padding:0 8px calc(28px + env(safe-area-inset-bottom))!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior-y:contain!important;
-webkit-overflow-scrolling:touch!important;
box-sizing:border-box!important;
background:#202733!important;
}
#tenantApp.driverMode.driverSubmode .driverSubHead{
position:sticky!important;
top:0!important;
z-index:80!important;
width:calc(100% + 16px)!important;
min-height:72px!important;
margin:0 -8px 10px!important;
padding:9px 10px!important;
display:grid!important;
grid-template-columns:44px minmax(0,1fr) auto!important;
gap:9px!important;
align-items:center!important;
background:#101722f7!important;
backdrop-filter:blur(18px)!important;
box-sizing:border-box!important;
}
#tenantApp.driverMode.driverSubmode .driverSubHead>button:first-child{
width:44px!important;
height:44px!important;
min-width:44px!important;
padding:0!important;
border-radius:13px!important;
}
#tenantApp.driverMode.driverSubmode .driverSubHead>div{
min-width:0!important;
}
#tenantApp.driverMode.driverSubmode .driverSubHead span{
font-size:8px!important;
}
#tenantApp.driverMode.driverSubmode .driverSubHead h2{
max-width:100%!important;
margin:2px 0 0!important;
font-size:clamp(23px,7vw,30px)!important;
line-height:1!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
/* -------- Business / CRM / QR / Account safe spacing -------- */
#driverBusinessPanel .driverSettingsCard,
#driverCrmPanel .crmStatsV17,
#driverCrmPanel .crmAccordionV17,
#driverQrPanel .qrCardV17,
#driverAccountPanel .accountCardV17{
width:100%!important;
max-width:100%!important;
margin:0 0 9px!important;
padding:11px!important;
border-radius:17px!important;
box-sizing:border-box!important;
}
#driverBusinessPanel .driverFormGrid{
grid-template-columns:1fr!important;
gap:8px!important;
}
#driverBusinessPanel .driverFormGrid label,
#driverBusinessPanel .driverFormGrid .fullWidth{
grid-column:auto!important;
min-width:0!important;
}
#driverBusinessPanel input{
width:100%!important;
max-width:100%!important;
min-height:47px!important;
box-sizing:border-box!important;
}
#driverBusinessPanel .saveBusinessCard{
position:static!important;
margin:0 0 14px!important;
padding:0!important;
background:transparent!important;
border:0!important;
}
#driverBusinessPanel .saveBusinessBtn{
position:static!important;
width:100%!important;
min-height:50px!important;
margin:0!important;
}
#driverQrPanel .qrCanvasWrap{
width:min(100%,330px)!important;
margin:0 auto 12px!important;
}
#driverQrPanel .qrCanvasWrap canvas,
#driverQrPanel .qrCanvasWrap img{
width:100%!important;
height:auto!important;
max-width:100%!important;
}
#driverQrPanel .qrActionsV17,
#driverQrPanel .qrActionRow{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:7px!important;
padding-bottom:12px!important;
}
#driverQrPanel button{
min-width:0!important;
min-height:46px!important;
white-space:normal!important;
}
/* -------- Incoming request: one clean task screen -------- */
#driverIncomingPanel .incomingScreenCard{
width:100%!important;
max-width:100%!important;
padding:10px!important;
display:grid!important;
gap:8px!important;
box-sizing:border-box!important;
}
#driverIncomingPanel .incomingScreenRoute{
display:grid!important;
gap:7px!important;
}
#driverIncomingPanel .incomingScreenRoute>div{
min-width:0!important;
padding:10px!important;
border-radius:13px!important;
}
#driverIncomingPanel .incomingScreenRoute b{
display:block!important;
font-size:15px!important;
line-height:1.22!important;
overflow-wrap:anywhere!important;
}
#driverIncomingPanel .driverQuoteBox{
display:grid!important;
grid-template-columns:1fr!important;
gap:7px!important;
padding:10px!important;
}
#driverIncomingPanel .incomingActions{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:7px!important;
}
#driverIncomingPanel .incomingActions button{
min-width:0!important;
min-height:46px!important;
}
/* -------- Active ride: dedicated screen; nothing hidden under footer -------- */
#tenantApp.driverMode.driverRideMode #driverRideScreen.activePanel{
padding-bottom:calc(34px + env(safe-area-inset-bottom))!important;
}
#driverRideScreen .rideSubHead{
grid-template-columns:44px minmax(0,1fr) 102px!important;
}
#driverRideScreen #rideScreenState{
width:102px!important;
max-width:102px!important;
min-height:42px!important;
padding:6px!important;
font-size:8px!important;
line-height:1.12!important;
white-space:normal!important;
text-align:center!important;
}
#driverRideScreen .driverRideMapCard{
width:100%!important;
max-width:100%!important;
margin:0!important;
padding:9px!important;
display:grid!important;
gap:8px!important;
border-radius:17px!important;
box-sizing:border-box!important;
overflow:visible!important;
}
/* Pickup/destination MUST remain visible above map. */
#driverRideScreen .routeSummaryTop{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:6px!important;
margin:0!important;
}
#driverRideScreen .routeSummaryTop>div{
min-width:0!important;
padding:8px 9px!important;
border-radius:11px!important;
}
#driverRideScreen .routeSummaryTop small{
font-size:7px!important;
}
#driverRideScreen .routeSummaryTop b{
display:block!important;
max-width:100%!important;
margin-top:3px!important;
font-size:10px!important;
line-height:1.15!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
/* Map is deliberately shorter on small phones. */
#driverRideScreen .driverRouteMap{
position:relative!important;
width:100%!important;
height:clamp(230px,34dvh,340px)!important;
min-height:230px!important;
max-height:340px!important;
margin:0!important;
border-radius:14px!important;
overflow:hidden!important;
}
#driverRideScreen #driverGoogleMap{
width:100%!important;
height:100%!important;
}
#driverRideScreen .driverEtaCard{
right:7px!important;
bottom:7px!important;
min-width:116px!important;
max-width:142px!important;
padding:6px 8px!important;
}
#driverRideScreen .routePassengerCard{
display:grid!important;
grid-template-columns:46px minmax(0,1fr) auto!important;
gap:8px!important;
align-items:center!important;
min-height:58px!important;
margin:0!important;
padding:8px!important;
}
#driverRideScreen .ridePassengerAvatar{
width:46px!important;
height:46px!important;
}
#driverRideScreen .routePassengerInfo{
min-width:0!important;
}
#driverRideScreen .routePassengerInfo b,
#driverRideScreen .routePassengerInfo small{
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
#driverRideScreen .routeCallBtn{
padding:8px 9px!important;
font-size:11px!important;
}
#driverRideScreen .rideScreenActions{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:6px!important;
margin:0!important;
}
#driverRideScreen .rideScreenActions button{
min-width:0!important;
min-height:42px!important;
padding:7px 5px!important;
font-size:9.5px!important;
line-height:1.12!important;
white-space:normal!important;
}
#driverRideScreen .rideScreenMessages{
width:100%!important;
margin:0 0 12px!important;
padding:9px!important;
border-radius:13px!important;
box-sizing:border-box!important;
}
#driverRideScreen .driverCommHead b{
font-size:13px!important;
}
#driverRideScreen .driverQuickMsgs{
display:grid!important;
grid-template-columns:1fr 1fr 1fr!important;
gap:5px!important;
}
#driverRideScreen .driverQuickMsgs button{
min-width:0!important;
min-height:34px!important;
padding:6px 3px!important;
font-size:8px!important;
line-height:1.1!important;
white-space:normal!important;
}
#driverRideScreen .driverCustomMsg{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
gap:5px!important;
}
#driverRideScreen .driverCustomMsg input{
min-width:0!important;
min-height:42px!important;
}
#driverRideScreen .driverCustomMsg button{
min-height:42px!important;
padding:7px 10px!important;
}
}
/* Extra-small iPhones / narrow Android phones */
@media (max-width:390px){
#tenantApp.driverMode .driverViewV17{
padding:6px!important;
}
#tenantApp.driverMode:not(.driverSubmode) .driverHeaderV17{
min-height:68px!important;
padding:8px!important;
}
#tenantApp.driverMode .driverTopLogoV17{
width:40px!important;
height:40px!important;
min-width:40px!important;
}
#tenantApp.driverMode .driverBrandText h1{
font-size:14px!important;
}
#tenantApp.driverMode .driverStateBtn,
#tenantApp.driverMode .driverPlanBtn{
min-height:32px!important;
padding:0 6px!important;
font-size:7px!important;
}
#tenantApp.driverMode #driverHub.activePanel{
height:calc(100% - 76px)!important;
}
#tenantApp.driverMode.driverSubmode .driverSubHead{
min-height:68px!important;
grid-template-columns:40px minmax(0,1fr) auto!important;
}
#tenantApp.driverMode.driverSubmode .driverSubHead>button:first-child{
width:40px!important;
height:40px!important;
min-width:40px!important;
}
#driverRideScreen .rideSubHead{
grid-template-columns:40px minmax(0,1fr) 92px!important;
}
#driverRideScreen #rideScreenState{
width:92px!important;
max-width:92px!important;
font-size:7px!important;
}
#driverRideScreen .driverRouteMap{
height:clamp(210px,31dvh,300px)!important;
min-height:210px!important;
}
#driverRideScreen .driverQuickMsgs{
grid-template-columns:1fr!important;
}
#driverQrPanel .qrActionsV17,
#driverQrPanel .qrActionRow{
grid-template-columns:1fr!important;
}
}
/* Short phones: prioritize controls/messages over map size. */
@media (max-width:760px) and (max-height:760px){
#driverRideScreen .driverRouteMap{
height:220px!important;
min-height:220px!important;
max-height:220px!important;
}
#driverRideScreen .routePassengerCard{
min-height:54px!important;
}
#tenantApp.driverMode.driverSubmode .panelScreen.activePanel{
padding-bottom:calc(24px + env(safe-area-inset-bottom))!important;
}
}
/* =========================================================
V46 — DRIVER HOME: ONLY SHOW ACTIVE OPERATIONS
========================================================= */
/* Hide empty operational cards everywhere; JS reveals them when real data exists. */
#tenantApp.driverMode #driverHub .driverHomeCardHidden{
display:none!important;
}
@media (max-width:760px){
#tenantApp.driverMode #driverHub .driverDashboardGrid{
grid-auto-rows:auto!important;
align-content:start!important;
}
/* With no active operation, Tools sits naturally under the header. */
#tenantApp.driverMode #driverHub .driverToolsDock{
margin-top:8px!important;
}
}
/* =========================================================
V47 — DRIVER HOME + COMPACT GEAR NAVIGATION
========================================================= */
@media (max-width:760px){
#tenantApp.driverMode .driverHeaderV17{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:center!important;
gap:10px!important;
}
#tenantApp.driverMode .driverHeaderActionsV47{
display:grid!important;
grid-template-columns:48px auto!important;
align-items:center!important;
gap:8px!important;
flex:0 0 auto!important;
}
#tenantApp.driverMode .driverStatusStackV47{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
gap:5px!important;
}
#tenantApp.driverMode .driverGearBtn{
width:48px!important;height:48px!important;
min-width:48px!important;padding:0!important;
border-radius:15px!important;
display:grid!important;place-items:center!important;
font-size:23px!important;
line-height:1!important;
background:#141c27!important;
border:1px solid rgba(255,255,255,.12)!important;
color:#fff!important;
}
#tenantApp.driverMode .driverStatusStackV47 .driverStateBtn,
#tenantApp.driverMode .driverStatusStackV47 .driverPlanBtn{
width:100%!important;
min-width:112px!important;
height:34px!important;
padding:0 10px!important;
font-size:12px!important;
white-space:nowrap!important;
}
#tenantApp.driverMode .driverHeaderActionsV47 .driverExitBtn{
display:none!important;
}
#tenantApp.driverMode #driverHub .driverHomeWelcome{
margin:12px 4px 0!important;
padding:20px!important;
border:1px solid rgba(255,196,35,.38)!important;
border-radius:22px!important;
background:#151d28!important;
}
#tenantApp.driverMode #driverHub .driverHomeWelcome span{
display:block!important;
color:#ffc629!important;
font-size:12px!important;
font-weight:900!important;
letter-spacing:.18em!important;
margin-bottom:7px!important;
}
#tenantApp.driverMode #driverHub .driverHomeWelcome h2{
margin:0 0 5px!important;
font-size:22px!important;
line-height:1.12!important;
}
#tenantApp.driverMode #driverHub .driverHomeWelcome p{
margin:0!important;
font-size:14px!important;
line-height:1.4!important;
color:#98a4b5!important;
}
#tenantApp.driverMode #driverToolsPanel{
padding:12px 16px calc(105px + env(safe-area-inset-bottom))!important;
}
#tenantApp.driverMode .driverToolsScreenGrid{
display:grid!important;
gap:10px!important;
margin-top:12px!important;
}
#tenantApp.driverMode .driverToolsScreenGrid .driverToolItem{
width:100%!important;
min-height:72px!important;
}
}
/* =========================================================
V50 — ADAPTIVE iPHONE DRIVER RIDE SCREEN
Uses available viewport height instead of over-compressing.
Passenger UI untouched.
========================================================= */
@supports (-webkit-touch-callout: none) {
@media (max-width:430px) and (max-height:932px) {
#tenantApp.driverMode.driverRideMode #driverRideScreen.activePanel{
height:100%!important;
min-height:0!important;
padding:0 8px calc(58px + env(safe-area-inset-bottom))!important;
overflow:hidden!important;
display:grid!important;
grid-template-rows:auto minmax(0,1fr)!important;
}
#driverRideScreen .rideSubHead{
position:relative!important;
top:auto!important;
height:auto!important;
min-height:68px!important;
margin:0 -8px 8px!important;
padding:8px 10px!important;
grid-template-columns:40px minmax(0,1fr) 92px!important;
}
#driverRideScreen .rideSubHead>button:first-child{
width:40px!important;
height:40px!important;
min-width:40px!important;
border-radius:12px!important;
}
#driverRideScreen .rideSubHead h2{
font-size:26px!important;
}
#driverRideScreen #rideScreenState{
width:92px!important;
max-width:92px!important;
min-height:38px!important;
padding:6px!important;
font-size:7.5px!important;
}
/* The full usable screen is distributed dynamically. */
#driverRideScreen .driverRideMapCard{
height:100%!important;
min-height:0!important;
padding:9px!important;
gap:7px!important;
display:grid!important;
/* summary | map grows | passenger | actions | messages */
grid-template-rows:
auto
minmax(245px,1fr)
auto
auto
minmax(150px,auto)!important;
overflow:hidden!important;
border-radius:16px!important;
}
#driverRideScreen .routeSummaryTop{
gap:6px!important;
}
#driverRideScreen .routeSummaryTop>div{
padding:7px 8px!important;
border-radius:11px!important;
}
#driverRideScreen .routeSummaryTop small{
font-size:7px!important;
}
#driverRideScreen .routeSummaryTop b{
margin-top:3px!important;
font-size:10px!important;
}
/* Map now consumes the spare height instead of leaving dead space below. */
#driverRideScreen .driverRouteMap{
width:100%!important;
height:100%!important;
min-height:245px!important;
max-height:none!important;
margin:0!important;
border-radius:13px!important;
}
#driverRideScreen .driverEtaCard{
right:7px!important;
bottom:7px!important;
min-width:114px!important;
max-width:136px!important;
min-height:44px!important;
padding:6px 8px!important;
}
#driverRideScreen .driverEtaCard span,
#driverRideScreen .driverEtaCard small{
font-size:7px!important;
}
#driverRideScreen .driverEtaCard b{
font-size:19px!important;
}
#driverRideScreen .routePassengerCard{
min-height:56px!important;
height:auto!important;
padding:7px 8px!important;
grid-template-columns:42px minmax(0,1fr) auto!important;
gap:7px!important;
}
#driverRideScreen .ridePassengerAvatar{
width:42px!important;
height:42px!important;
font-size:18px!important;
}
#driverRideScreen .routePassengerInfo b{
font-size:13px!important;
}
#driverRideScreen .routePassengerInfo small{
font-size:10px!important;
}
#driverRideScreen .routeCallBtn{
min-height:36px!important;
padding:7px 9px!important;
font-size:10.5px!important;
}
#driverRideScreen .rideScreenActions{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:5px!important;
margin:0!important;
}
#driverRideScreen .rideScreenActions button{
min-height:39px!important;
height:39px!important;
padding:5px!important;
font-size:8.5px!important;
line-height:1.08!important;
}
/* Messages use remaining area naturally and stay completely visible. */
#driverRideScreen .rideScreenMessages{
min-height:150px!important;
height:auto!important;
margin:0!important;
padding:8px!important;
border-radius:13px!important;
overflow:hidden!important;
display:grid!important;
grid-template-rows:auto auto 42px!important;
gap:6px!important;
align-content:start!important;
}
#driverRideScreen .driverCommHead{
min-height:30px!important;
}
#driverRideScreen .driverCommHead span{
font-size:7px!important;
}
#driverRideScreen .driverCommHead b{
font-size:12px!important;
}
#driverRideScreen .driverCommHead small{
font-size:7.5px!important;
}
#driverRideScreen .driverQuickMsgs{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:5px!important;
}
#driverRideScreen .driverQuickMsgs button{
min-width:0!important;
min-height:34px!important;
height:34px!important;
padding:5px 3px!important;
font-size:7.5px!important;
line-height:1.08!important;
white-space:normal!important;
}
#driverRideScreen .driverCustomMsg{
height:42px!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) 78px!important;
gap:6px!important;
}
#driverRideScreen .driverCustomMsg input{
min-width:0!important;
width:100%!important;
height:42px!important;
min-height:42px!important;
padding:7px 10px!important;
font-size:11.5px!important;
}
#driverRideScreen .driverCustomMsg button{
width:78px!important;
min-width:78px!important;
height:42px!important;
min-height:42px!important;
padding:6px!important;
font-size:10.5px!important;
}
}
/* Only very short iPhones get a slightly tighter map minimum. */
@media (max-width:430px) and (max-height:820px){
#driverRideScreen .driverRideMapCard{
grid-template-rows:
auto
minmax(215px,1fr)
auto
auto
minmax(142px,auto)!important;
}
#driverRideScreen .driverRouteMap{
min-height:215px!important;
}
#driverRideScreen .rideScreenMessages{
min-height:142px!important;
padding:7px!important;
}
#driverRideScreen .rideScreenActions button{
min-height:37px!important;
height:37px!important;
}
}
}
/* =========================================================
V51 — KEEP CUSTOM DRIVER MESSAGE ROW VISIBLE ON COMPACT iPHONE
Only adjusts the active driver ride screen.
========================================================= */
@supports (-webkit-touch-callout: none) {
@media (max-width:430px) and (max-height:932px) {
/* Reserve enough height for header + quick replies + custom message row. */
#driverRideScreen .driverRideMapCard{
grid-template-rows:
auto
minmax(225px,1fr)
auto
auto
184px!important;
}
#driverRideScreen .driverRouteMap{
min-height:225px!important;
}
#driverRideScreen .rideScreenMessages{
height:184px!important;
min-height:184px!important;
max-height:184px!important;
padding:8px!important;
display:grid!important;
grid-template-rows:34px 36px 44px!important;
gap:7px!important;
align-content:start!important;
overflow:visible!important;
box-sizing:border-box!important;
}
#driverRideScreen .driverCommHead{
min-height:34px!important;
height:34px!important;
margin:0!important;
}
#driverRideScreen .driverQuickMsgs{
height:36px!important;
min-height:36px!important;
margin:0!important;
}
#driverRideScreen .driverQuickMsgs button{
height:36px!important;
min-height:36px!important;
}
/* This is the row that was being clipped. */
#driverRideScreen .driverCustomMsg{
display:grid!important;
grid-template-columns:minmax(0,1fr) 82px!important;
gap:6px!important;
width:100%!important;
height:44px!important;
min-height:44px!important;
margin:0!important;
visibility:visible!important;
opacity:1!important;
overflow:visible!important;
}
#driverRideScreen .driverCustomMsg input{
display:block!important;
width:100%!important;
min-width:0!important;
height:44px!important;
min-height:44px!important;
padding:8px 10px!important;
font-size:12px!important;
visibility:visible!important;
opacity:1!important;
box-sizing:border-box!important;
}
#driverRideScreen .driverCustomMsg button{
display:block!important;
width:82px!important;
min-width:82px!important;
height:44px!important;
min-height:44px!important;
padding:6px!important;
font-size:11px!important;
visibility:visible!important;
opacity:1!important;
}
}
@media (max-width:430px) and (max-height:820px){
#driverRideScreen .driverRideMapCard{
grid-template-rows:
auto
minmax(195px,1fr)
auto
auto
176px!important;
}
#driverRideScreen .driverRouteMap{
min-height:195px!important;
}
#driverRideScreen .rideScreenMessages{
height:176px!important;
min-height:176px!important;
max-height:176px!important;
padding:7px!important;
grid-template-rows:32px 34px 42px!important;
gap:6px!important;
}
#driverRideScreen .driverCommHead{
height:32px!important;
min-height:32px!important;
}
#driverRideScreen .driverQuickMsgs,
#driverRideScreen .driverQuickMsgs button{
height:34px!important;
min-height:34px!important;
}
#driverRideScreen .driverCustomMsg,
#driverRideScreen .driverCustomMsg input,
#driverRideScreen .driverCustomMsg button{
height:42px!important;
min-height:42px!important;
}
}
}
/* =========================================================
V52 — USE THE LOWER iPHONE SPACE FOR MESSAGING
Only the compact iPhone driver ride screen is adjusted.
========================================================= */
@supports (-webkit-touch-callout: none) {
@media (max-width:430px) and (max-height:932px) {
/* Give the entire ride card more of the free lower viewport. */
#tenantApp.driverMode.driverRideMode #driverRideScreen.activePanel{
padding-bottom:calc(26px + env(safe-area-inset-bottom))!important;
}
#driverRideScreen .driverRideMapCard{
grid-template-rows:
auto
minmax(215px,1fr)
auto
auto
202px!important;
}
#driverRideScreen .driverRouteMap{
min-height:215px!important;
}
/* Messaging becomes taller and visibly clears its own lower edge. */
#driverRideScreen .rideScreenMessages{
height:202px!important;
min-height:202px!important;
max-height:202px!important;
padding:10px 9px 15px!important;
grid-template-rows:36px 38px 48px!important;
gap:8px!important;
align-content:start!important;
overflow:visible!important;
box-sizing:border-box!important;
}
#driverRideScreen .driverCommHead{
height:36px!important;
min-height:36px!important;
}
#driverRideScreen .driverQuickMsgs,
#driverRideScreen .driverQuickMsgs button{
height:38px!important;
min-height:38px!important;
}
#driverRideScreen .driverCustomMsg{
height:48px!important;
min-height:48px!important;
margin-bottom:2px!important;
grid-template-columns:minmax(0,1fr) 86px!important;
}
#driverRideScreen .driverCustomMsg input{
height:48px!important;
min-height:48px!important;
padding:9px 11px!important;
font-size:12.5px!important;
}
#driverRideScreen .driverCustomMsg button{
width:86px!important;
min-width:86px!important;
height:48px!important;
min-height:48px!important;
font-size:11.5px!important;
}
}
@media (max-width:430px) and (max-height:820px){
#tenantApp.driverMode.driverRideMode #driverRideScreen.activePanel{
padding-bottom:calc(22px + env(safe-area-inset-bottom))!important;
}
#driverRideScreen .driverRideMapCard{
grid-template-rows:
auto
minmax(185px,1fr)
auto
auto
192px!important;
}
#driverRideScreen .driverRouteMap{
min-height:185px!important;
}
#driverRideScreen .rideScreenMessages{
height:192px!important;
min-height:192px!important;
max-height:192px!important;
padding:9px 8px 13px!important;
grid-template-rows:34px 36px 46px!important;
gap:7px!important;
}
#driverRideScreen .driverCustomMsg,
#driverRideScreen .driverCustomMsg input,
#driverRideScreen .driverCustomMsg button{
height:46px!important;
min-height:46px!important;
}
}
}
/* =========================================================
V53 — MORE MAP, LOWER MESSAGE BLOCK, CLEAR ACTIVE ACTIONS
Compact iPhone driver ride screen only.
========================================================= */
@supports (-webkit-touch-callout: none) {
@media (max-width:430px) and (max-height:932px) {
/* Use more of the lower viewport instead of leaving dead space. */
#tenantApp.driverMode.driverRideMode #driverRideScreen.activePanel{
padding-bottom:calc(8px + env(safe-area-inset-bottom))!important;
}
/* Grow the map while keeping the full message composer visible. */
#driverRideScreen .driverRideMapCard{
grid-template-rows:
auto
minmax(260px,1fr)
auto
auto
202px!important;
}
#driverRideScreen .driverRouteMap{
min-height:260px!important;
}
/* Keep messaging at the bottom, fully visible. */
#driverRideScreen .rideScreenMessages{
margin-top:0!important;
margin-bottom:0!important;
align-self:end!important;
}
/* Any enabled ride action must read clearly. */
#driverRideScreen .rideScreenActions button:not(:disabled){
color:#fff!important;
opacity:1!important;
font-weight:900!important;
}
/* Iniciar recogida: preserve green background, force strong white text. */
#driverRideScreen .rideScreenActions button:not(:disabled).primary,
#driverRideScreen .rideScreenActions button:not(:disabled):first-child{
color:#fff!important;
opacity:1!important;
}
}
/* Shorter compact iPhones: still enlarge the map, but proportionally. */
@media (max-width:430px) and (max-height:820px){
#tenantApp.driverMode.driverRideMode #driverRideScreen.activePanel{
padding-bottom:calc(6px + env(safe-area-inset-bottom))!important;
}
#driverRideScreen .driverRideMapCard{
grid-template-rows:
auto
minmax(220px,1fr)
auto
auto
192px!important;
}
#driverRideScreen .driverRouteMap{
min-height:220px!important;
}
}
}
/* =========================================================
V54 — PUSH COMPACT iPHONE RIDE UI LOWER + BIGGER MAP
Only the driver's compact iPhone active-ride screen.
========================================================= */
@supports (-webkit-touch-callout: none) {
@media (max-width:430px) and (max-height:932px) {
/*
There was still a large unused strip above the fixed footer.
Consume that space instead of compressing the working UI.
*/
#tenantApp.driverMode.driverRideMode #driverRideScreen.activePanel{
height:calc(100% + 78px)!important;
max-height:calc(100% + 78px)!important;
padding-bottom:calc(2px + env(safe-area-inset-bottom))!important;
overflow:hidden!important;
}
#driverRideScreen .driverRideMapCard{
height:calc(100% + 66px)!important;
min-height:0!important;
grid-template-rows:
auto
minmax(315px,1fr)
auto
auto
210px!important;
gap:8px!important;
padding:10px!important;
}
/* Make the navigation view materially larger. */
#driverRideScreen .driverRouteMap{
min-height:315px!important;
height:100%!important;
}
/* Slightly larger route labels. */
#driverRideScreen .routeSummaryTop>div{
padding:8px 9px!important;
}
#driverRideScreen .routeSummaryTop small{
font-size:7.5px!important;
}
#driverRideScreen .routeSummaryTop b{
font-size:10.5px!important;
}
/* Passenger card gets a little more breathing room. */
#driverRideScreen .routePassengerCard{
min-height:60px!important;
padding:8px 9px!important;
grid-template-columns:44px minmax(0,1fr) auto!important;
}
#driverRideScreen .ridePassengerAvatar{
width:44px!important;
height:44px!important;
font-size:19px!important;
}
#driverRideScreen .routePassengerInfo b{
font-size:13.5px!important;
}
#driverRideScreen .routePassengerInfo small{
font-size:10.5px!important;
}
#driverRideScreen .routeCallBtn{
min-height:38px!important;
font-size:11px!important;
}
/* Slightly larger, clearer action controls. */
#driverRideScreen .rideScreenActions{
gap:6px!important;
}
#driverRideScreen .rideScreenActions button{
min-height:42px!important;
height:42px!important;
font-size:9.5px!important;
line-height:1.1!important;
}
#driverRideScreen .rideScreenActions button:not(:disabled){
color:#fff!important;
opacity:1!important;
font-weight:900!important;
}
/* Keep the full composer visible while moving it lower. */
#driverRideScreen .rideScreenMessages{
height:210px!important;
min-height:210px!important;
max-height:210px!important;
padding:10px 10px 14px!important;
grid-template-rows:38px 40px 50px!important;
gap:8px!important;
align-self:end!important;
}
#driverRideScreen .driverCommHead{
height:38px!important;
min-height:38px!important;
}
#driverRideScreen .driverCommHead b{
font-size:13px!important;
}
#driverRideScreen .driverQuickMsgs,
#driverRideScreen .driverQuickMsgs button{
height:40px!important;
min-height:40px!important;
}
#driverRideScreen .driverQuickMsgs button{
font-size:8px!important;
}
#driverRideScreen .driverCustomMsg,
#driverRideScreen .driverCustomMsg input,
#driverRideScreen .driverCustomMsg button{
height:50px!important;
min-height:50px!important;
}
#driverRideScreen .driverCustomMsg{
grid-template-columns:minmax(0,1fr) 90px!important;
}
#driverRideScreen .driverCustomMsg input{
font-size:13px!important;
padding:9px 12px!important;
}
#driverRideScreen .driverCustomMsg button{
width:90px!important;
min-width:90px!important;
font-size:12px!important;
}
}
/* Shorter compact iPhones still use the extra lower strip, proportionally. */
@media (max-width:430px) and (max-height:820px){
#tenantApp.driverMode.driverRideMode #driverRideScreen.activePanel{
height:calc(100% + 58px)!important;
max-height:calc(100% + 58px)!important;
}
#driverRideScreen .driverRideMapCard{
height:calc(100% + 48px)!important;
grid-template-rows:
auto
minmax(255px,1fr)
auto
auto
198px!important;
}
#driverRideScreen .driverRouteMap{
min-height:255px!important;
}
#driverRideScreen .rideScreenMessages{
height:198px!important;
min-height:198px!important;
max-height:198px!important;
grid-template-rows:36px 38px 48px!important;
padding-bottom:12px!important;
}
#driverRideScreen .driverCustomMsg,
#driverRideScreen .driverCustomMsg input,
#driverRideScreen .driverCustomMsg button{
height:48px!important;
min-height:48px!important;
}
}
}
/* =========================================================
V55 — SLIGHTLY RAISE LOWER UI + THINNER ACTION BUTTONS
Compact iPhone driver ride screen only.
========================================================= */
@supports (-webkit-touch-callout: none) {
@media (max-width:430px) and (max-height:932px) {
/* Bring the lower content back up slightly. */
#tenantApp.driverMode.driverRideMode #driverRideScreen.activePanel{
height:calc(100% + 52px)!important;
max-height:calc(100% + 52px)!important;
padding-bottom:calc(8px + env(safe-area-inset-bottom))!important;
}
#driverRideScreen .driverRideMapCard{
height:calc(100% + 42px)!important;
grid-template-rows:
auto
minmax(295px,1fr)
auto
auto
196px!important;
}
#driverRideScreen .driverRouteMap{
min-height:295px!important;
}
/* Make the four ride-state buttons slimmer vertically. */
#driverRideScreen .rideScreenActions{
gap:5px!important;
}
#driverRideScreen .rideScreenActions button{
min-height:36px!important;
height:36px!important;
padding:4px 6px!important;
font-size:9.5px!important;
line-height:1.05!important;
font-weight:900!important;
}
#driverRideScreen .rideScreenActions button:not(:disabled){
color:#fff!important;
opacity:1!important;
font-weight:900!important;
}
/* Keep messaging fully visible, but not pushed so low. */
#driverRideScreen .rideScreenMessages{
height:196px!important;
min-height:196px!important;
max-height:196px!important;
padding:9px 10px 12px!important;
grid-template-rows:36px 38px 48px!important;
gap:7px!important;
}
#driverRideScreen .driverCommHead{
height:36px!important;
min-height:36px!important;
}
#driverRideScreen .driverQuickMsgs,
#driverRideScreen .driverQuickMsgs button{
height:38px!important;
min-height:38px!important;
}
#driverRideScreen .driverCustomMsg,
#driverRideScreen .driverCustomMsg input,
#driverRideScreen .driverCustomMsg button{
height:48px!important;
min-height:48px!important;
}
}
@media (max-width:430px) and (max-height:820px){
#tenantApp.driverMode.driverRideMode #driverRideScreen.activePanel{
height:calc(100% + 42px)!important;
max-height:calc(100% + 42px)!important;
}
#driverRideScreen .driverRideMapCard{
height:calc(100% + 34px)!important;
grid-template-rows:
auto
minmax(240px,1fr)
auto
auto
188px!important;
}
#driverRideScreen .driverRouteMap{
min-height:240px!important;
}
#driverRideScreen .rideScreenMessages{
height:188px!important;
min-height:188px!important;
max-height:188px!important;
grid-template-rows:34px 36px 46px!important;
}
#driverRideScreen .rideScreenActions button{
min-height:34px!important;
height:34px!important;
}
}
}
/* =========================================================
V57 — STABLE SECOND-RIDE BUBBLE
Based on V55. No second map/listener architecture.
========================================================= */
.rideSubHead{
grid-template-columns:46px minmax(0,1fr) auto auto!important;
gap:8px!important;
align-items:center!important;
}
.rideNextBubble{
min-height:42px;
padding:8px 12px;
border:1px solid rgba(255,200,40,.55);
border-radius:999px;
background:rgba(255,196,35,.09);
color:#ffd044;
font-size:8px;
line-height:1.05;
letter-spacing:.08em;
font-weight:1000;
white-space:nowrap;
}
.rideQueuePreview{
position:absolute;
z-index:15;
top:82px;
left:50%;
transform:translateX(-50%);
width:min(360px,calc(100% - 32px));
padding:12px;
border:1px solid rgba(255,198,41,.42);
border-radius:16px;
background:#101824;
box-shadow:0 16px 38px rgba(0,0,0,.35);
}
.rideQueuePreview>div{
display:grid;
grid-template-columns:92px minmax(0,1fr);
gap:8px;
padding:5px 0;
}
.rideQueuePreview span{
color:#ffc82d;
font-size:7px;
letter-spacing:.12em;
font-weight:900;
}
.rideQueuePreview b{
color:#fff;
font-size:11px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.rideQueuePreview small{
display:block;
margin-top:7px;
color:#9ea9b8;
font-size:9px;
line-height:1.35;
}
@supports (-webkit-touch-callout:none){
@media (max-width:430px){
.rideSubHead{
grid-template-columns:44px minmax(0,1fr) auto auto!important;
gap:6px!important;
}
.rideNextBubble{
min-height:38px;
max-width:105px;
padding:7px 9px;
font-size:7.5px;
overflow:hidden;
text-overflow:ellipsis;
}
.rideQueuePreview{
top:74px;
width:calc(100% - 24px);
}
}
}