/* SOUB: warm white, orange actions and navy typography. */
:root{--ink:#101e35;--green:#d94c05;--lime:#ffb55d;--muted:#687283;--line:#e8e4de;--brand-orange:#f76913;--soft-orange:#fff0e2;--soft-navy:#eef1f6}
body{background:#faf9f6;color:var(--ink);font-family:"Segoe UI",Tahoma,Arial,sans-serif;line-height:1.7}
button,input,select,textarea{font-family:inherit}
button{transition:background-color .18s,border-color .18s,box-shadow .18s;min-height:44px}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #e86a22;outline-offset:4px}
button:disabled{opacity:.62;cursor:not-allowed}
header{padding:18px max(24px,calc((100vw - 1280px)/2));gap:18px;background:#fffefa;border-bottom:1px solid var(--line);flex-wrap:wrap;box-shadow:0 3px 18px #17243a04}
.droopyBrand{color:var(--ink);min-width:140px}
.droopyWordmark{position:relative;min-width:140px;padding-bottom:10px}
.droopyWordmark b{font-size:40px;letter-spacing:-2px;line-height:1.12;color:#0d1b31}
.droopyWordmark small{font-size:13px;letter-spacing:.2px;font-weight:800;color:#0d1b31;text-align:end;margin-inline-end:6px}
.droopyWordmark .roadMark{position:absolute;width:83px;height:22px;bottom:0;inset-inline-end:60px;overflow:visible}
nav{gap:6px;flex-wrap:wrap}nav button{background:transparent;color:var(--ink);border-radius:10px;padding:9px 14px}
header nav:not(:has(button:not([hidden]))){display:none}
nav button.active,.primary{background:#d94c05;color:white;box-shadow:0 4px 12px #d94c051b}
nav button:hover:not(.active),.outline:hover{background:var(--soft-orange);border-color:#f3c7a9}
.primary:hover:not(:disabled){background:#bd4000}.primary.lime{background:#ffb55d;color:#182338}
.outline{background:#fff;border-color:#e3ddd5;color:var(--ink)}
#switchRole{width:auto;height:auto;min-height:44px;border-radius:10px;padding:8px 13px;display:flex;flex-direction:row;gap:8px;border-color:#e8e0d6;background:#fffaf5;box-shadow:none;color:var(--ink)}
#switchRole .roleSwitchIcon{width:22px;height:22px;order:2}#switchRole .homeSwitchLabel{font-size:14px}
.switchArrowTop,.switchArrowBottom{stroke:#d94c05}
.siteLanguageControl{color:var(--ink)}.siteLanguageControl select{border-color:var(--line);color:var(--ink);background:#fffefa}
.pill{background:#f2f0ea;color:#73705f;font-size:11px;padding:4px 10px}
.notificationBell{border-color:#eadfd3;color:#d9540c;background:#fff8f1}.notificationBell svg{stroke:currentColor}
.notificationPanel{border-color:var(--line);box-shadow:0 16px 45px #18223824}.notificationPanel article,.notificationItem{border-color:var(--line)}
main{max-width:1320px;padding:28px 28px 48px}.notice{background:#f2f0eb;border:1px solid #e9e4dc;color:#716c63;border-radius:12px;font-size:12px;padding:12px 16px;margin-bottom:26px}.notice button{font-size:12px;padding:5px 10px;min-height:32px}
h1,h2,h3{color:var(--ink);line-height:1.4}h1{font-size:32px;font-weight:800}.intro{margin-bottom:26px}.intro p{font-size:15px;margin-top:7px}
.board,.panel,.homeWelcome,.accountCard,.carrierSignup,.driverBooking{border-color:var(--line);border-radius:18px;box-shadow:0 6px 22px #17243a04;background:#fff}
.toolbar{background:#fffdfa;border-color:var(--line);border-radius:18px 18px 0 0;gap:16px}
input,select,textarea,.toolbar select{border-color:#dcdedc!important;border-radius:10px;color:var(--ink);background:#fff;min-height:44px}
input:focus,select:focus,textarea:focus{outline:2px solid #f3a16d;outline-offset:1px;border-color:#d96723!important}
label{color:#26344b}textarea{line-height:1.7}
.card,.requestCard,.offer,.offerCard,.driverCard,.fleetCards article,.vehicleCard,.accountProfile{border-color:var(--line);border-radius:14px}
.route,.route b,.card h3,.card h2{color:var(--ink)}.chip{background:#f5f1eb;color:#5b6471}.badge{background:#e9f5ec;color:#287345}.statusCancelled{background:#f0f0ef;color:#6a6d72}
.quantitySummary,.quantityInfo,.equipmentFacts,.carrierCityFilters,.searchbox{background:#faf7f2;border-color:var(--line);color:#26344b}
.contact,.agreementDetails,.negotiationPanel{background:#fff8f0;border-color:#efddca;color:var(--ink)}
.negotiationPanel{padding:20px;border-radius:14px}.negotiationPanel summary{color:#bf490a}.negotiationSummary dt{color:#777368}.negotiationSummary dd{color:#15233b}
.pendingReceipt{background:#fff0da;color:#89501e}.agreementStatus.agreed{background:#fff0da;color:#89501e}
.distanceInfo,.deliveryProgress{color:#986032}.deliveryPanel,.deliverySection,.requestRouteSection,.voiceComposer{background:#faf8f4;border-color:var(--line)}
.requestPointActions .outline,.mapSearchButton{background:#fff7ef;color:#af4006;border-color:#f1d5bf}.requestPointLinks a,.routeTextButton{color:#b84a12}
.driverHireButton{background:#f5f2ec;border-color:#e4daca;color:#3b4859}.driverHireButton small{color:#687283}
.category,.roleChoice,.accountActions button{border-color:var(--line)}.category:hover{background:#fff3e8;border-color:#edbd9e}
.fleetCards{gap:14px}.fleetCards article{background:#fff;padding:15px;border:1px solid var(--line)}.fleetCards img{border-radius:10px;background:#faf9f6;object-fit:contain}
aside .panel{padding:24px}.commissionCard,.commissionPanel{background:linear-gradient(145deg,#16243d,#263b55);color:white}.commissionCard h2,.commissionPanel h2{color:white}.commissionCard p,.commissionPanel p{color:#d8dfeb}
dialog{border:1px solid #e9e3da!important;border-radius:22px!important;box-shadow:0 28px 90px #1b273840;color:var(--ink);background:#fffefa}dialog::backdrop{background:#15233875;backdrop-filter:blur(3px)}
.dialogPinnedHeader{background:#fffefa!important;border-bottom:1px solid var(--line)!important;padding-bottom:16px}.dialogPinnedFooter{background:#fffefa!important;border-top:1px solid var(--line)!important}.dialogBottomClose{min-width:150px;background:#f4f0e9;border-color:#e4ded5}
.dialogPinnedHeader .close{background:#f6f1e9;color:#4a4f57;border:1px solid #ebe3d9;border-radius:50%;width:42px;min-height:42px}
.dialogScrollBody{scrollbar-color:#c7bdb1 #f8f5f0;scrollbar-width:thin}.dialogScrollBody h3{color:var(--ink)}
.mineMessage{background:#fff0df;border-color:#f3d6bc}.otherMessage{background:#edf0f4;border-color:#dce2e8}.messageList article,.bookingMessageList article{border-radius:14px}
.voiceRecordButton,.voiceMic{color:#c14a08;border-color:#ecc8ae}.cancelButton{color:#b52d36;background:#fff6f5;border-color:#f2cdd0}
.mapVehicleCard,.carrierMapCard{border-color:var(--line)}.mapVehicleCard.selected,.carrierMapCard.selected{border-color:#e66b28;box-shadow:0 0 0 2px #f9dec9}
footer{color:#858079;border-top:1px solid var(--line);padding:22px;text-align:center;background:#fffdfa;font-size:12px}
.dark{background:linear-gradient(135deg,#182b45,#263e5c);color:white}.dark h2,.dark h3{color:white}.dark p{color:#d8e0eb}.dark .outline{background:#fff;color:#17243a}
.miniStat>div,.locationBox,.vehicleMapSetup{background:#f5f1eb;border-color:#e9dfd2}.step .num{background:#ffebd9;color:#a53f08}.cargoGallery button{background:#fff0e2;color:#ac430b}.category.selected{background:#fff0e2;border-color:#ed9a65}
.driverMessageButton{background:#d94c05!important;border-color:#d94c05!important}.messageList .mineMessage{background:#fff0df}.notificationItem.unread{background:#fff1e5;border-color:#f0d6be}.notificationBell:hover,.notificationBell[aria-expanded="true"]{background:#fff0e0}
.welcomeContent{background:radial-gradient(ellipse at top,#fff0dc,transparent 65%),#fffefa}.mapVehiclePin{background:#d94c05}.offer .primary{background:#d94c05}.driverHireButton:hover{background:#f4e9dc}#switchRole:hover{background:#fff0df}
#detailsDialog .dialoghead .close,dialog>.dialogPinnedHeader .close:hover{background:#f4eee6;border-color:#e5ddd2;color:#4a4f57}
/* The supplied design is reused as an image sprite. All text and actions are live HTML. */
body:has(.designLanding){background:#faf9f6}body:has(.designLanding) main{max-width:1320px;display:flex;flex-direction:column;padding-top:18px}body:has(.designLanding) main>.intro{display:none}body:has(.designLanding) .notice{order:2;margin-top:25px;margin-bottom:0}body:has(.designLanding) header{direction:ltr}body:has(.designLanding) header>*{direction:rtl}body:has(.designLanding) .brand{margin-right:auto}
.roleLanding.designLanding{display:grid;grid-template-columns:1.08fr 1fr;direction:ltr;gap:18px 34px;text-align:start;padding:0 0 18px;margin:0;background:#fffefa;border:1px solid #eee9e1;border-radius:22px;overflow:hidden;box-shadow:0 12px 42px #18233808;max-width:none}
.landingScene{grid-column:1;grid-row:1;aspect-ratio:590/730;background-image:url('/design/droopy-reference.png');background-size:260.339% auto;background-position:3.3827% 57.8231%;background-repeat:no-repeat;align-self:stretch;min-height:540px;mask-image:linear-gradient(to bottom,#000 92%,transparent)}
.landingChoices{direction:rtl;grid-column:2;grid-row:1;padding:38px 30px 15px 0;align-self:center;min-width:0}.landingTitle h2{font-size:clamp(32px,3.65vw,54px);font-weight:850;letter-spacing:-1.5px;margin:0 0 10px;color:#0c1a30;line-height:1.4}.landingTitle p{color:#25344c;font-size:clamp(16px,1.6vw,22px);margin-bottom:26px}
.designLanding .roleChoiceGrid{display:grid;grid-template-columns:1fr;gap:14px;margin:0}
.designLanding .roleChoice{display:flex;flex-direction:row;justify-content:space-between;align-items:center;text-align:start;border:0;border-radius:18px;min-height:148px;padding:20px 24px;gap:12px;width:100%;overflow:hidden;box-shadow:none;position:relative}
.designLanding .roleChoice:hover{box-shadow:0 8px 22px #15233812;transform:translateY(-2px)}.designLanding .roleChoice:active{transform:none}
.designLanding .requestChoice{background:linear-gradient(110deg,#ff791b,#f36510);color:white}.designLanding .carrierChoice{background:#ffecd6;color:#102039}.designLanding .operatorChoice{background:#e9edf4;color:#102039}
.designLanding .serviceCopy{display:block;min-width:0;position:relative;z-index:1}.designLanding .serviceCopy b{display:block;font-size:36px;line-height:1.35;color:inherit}.designLanding .serviceCopy small{display:block;font-size:17px;line-height:1.65;margin-top:8px;color:inherit;font-weight:400}.designLanding .operatorChoice b{font-size:25px;white-space:normal}
.designLanding .serviceArt{display:block;flex-shrink:0;margin:0;background-image:url('/design/droopy-reference.png');background-repeat:no-repeat;mix-blend-mode:multiply;border:0;border-radius:0;padding:0}
.designLanding .parcelArt{width:102px;height:104px;background-size:1263.74px 842.49px;background-position:-542.95px -318.63px;mix-blend-mode:normal;border-radius:20px}
.designLanding .carrierArt{width:180px;height:105px;background-size:891.87px 594.58px;background-position:-377.42px -316.45px}
.designLanding .operatorArt{width:86px;height:120px;background-size:1375.52px 917.01px;background-position:-604.48px -663.61px}
.landingCaption{grid-column:1/-1;direction:rtl;text-align:center;color:#394155;font-size:14px;margin:0 20px 4px}.landingCaption:before,.landingCaption:after{content:'';display:inline-block;vertical-align:middle;width:46px;height:2px;background:#ff6b13;margin:0 16px}
html[dir=ltr] .landingChoices{direction:ltr;padding:38px 30px 15px 0}html[dir=ltr] .designLanding .serviceCopy b{font-size:29px}html[dir=ltr] .designLanding .operatorChoice b{font-size:23px}
@media(min-width:1100px){.designLanding .carrierChoice .serviceCopy{max-width:190px}.designLanding .carrierChoice .serviceCopy small{max-width:160px}.designLanding .carrierArt{width:205px;height:117px;background-size:1015.74px 677.16px;background-position:-429.84px -360.4px}}
@media(max-width:1000px){header{gap:10px;padding:16px 22px}.droopyWordmark b{font-size:34px}.roleLanding.designLanding{gap:15px}.landingChoices{padding-right:20px}.landingTitle h2{font-size:35px}.designLanding .roleChoice{padding:18px;min-height:130px}.designLanding .serviceCopy b{font-size:29px}.designLanding .serviceCopy small{font-size:15px}.designLanding .operatorChoice b{font-size:21px}.designLanding .carrierArt{width:135px;height:78px;background-size:668.9px 445.94px;background-position:-283.06px -237.34px}.designLanding .parcelArt{transform:scale(.85);margin:-8px}.landingScene{min-height:510px}.layout{grid-template-columns:minmax(0,1fr) 245px;gap:18px}}
@media(max-width:700px){header{padding:13px 16px;gap:8px}.brand{flex:1;min-width:130px}.droopyWordmark{min-width:130px}.droopyWordmark b{font-size:34px}header>nav{order:7;width:100%;justify-content:center;border-top:1px solid var(--line);padding-top:8px}header>nav:empty{display:none}nav button{font-size:13px;padding:8px 11px}header>.pill{display:none}.siteLanguageControl svg{display:none}.siteLanguageControl select{font-size:12px;padding:7px 5px;min-height:38px;max-width:90px}#switchRole{padding:6px 9px;font-size:12px;min-height:38px}#switchRole .roleSwitchIcon{display:none}#switchRole .homeSwitchLabel{font-size:12px}.notificationBell{width:38px;height:38px;min-height:38px}.notificationPanel{position:fixed;top:88px;inset-inline:12px;width:auto;max-width:none;max-height:65vh}main{padding:18px 14px 30px}.layout{grid-template-columns:minmax(0,1fr)}.intro{align-items:start;flex-direction:column;gap:16px}h1{font-size:26px}.requestActions{display:flex;flex-wrap:wrap;gap:8px;width:100%}.requestActions button{font-size:13px;padding:10px 12px}.toolbar{flex-wrap:wrap;padding:16px}.toolbar select{max-width:100%}.notice{font-size:11px;padding:10px 12px}.fleetCards{grid-template-columns:repeat(2,minmax(0,1fr))}.fleetCards article{min-width:0}.carrierSignup{padding:18px;gap:14px;flex-wrap:wrap}.carrierSignup h2{font-size:21px}.carrierSignup p{font-size:13px}.dialogPinnedLayout{max-width:calc(100vw - 20px);width:calc(100vw - 20px);max-height:92dvh;padding:16px!important}.dialogPinnedHeader h2{font-size:19px}.dialogScrollBody{padding-inline:1px}.negotiationPanel{padding:14px}.fields{gap:12px}.dialogPinnedFooter{padding-top:10px}.roleLanding.designLanding{display:flex;flex-direction:column;gap:0;border-radius:18px;padding-bottom:20px}.landingScene{width:100%;aspect-ratio:337/260;min-height:0;max-height:340px;background-size:455.786% auto;background-position:97.1643% 22.2513%;mask-image:linear-gradient(to bottom,#000 95%,transparent)}.landingChoices,html[dir=ltr] .landingChoices{padding:12px 16px 0;width:100%}.landingTitle{text-align:center}.landingTitle h2{font-size:34px;letter-spacing:-1px;margin-bottom:5px}.landingTitle p{font-size:14px;margin-bottom:20px}.designLanding .roleChoice{min-height:114px;padding:17px 18px;border-radius:15px}.designLanding .serviceCopy b{font-size:30px}.designLanding .serviceCopy small{font-size:14px;margin-top:5px}.designLanding .operatorChoice b{font-size:22px}.designLanding .roleChoiceGrid{gap:12px}.designLanding .parcelArt{transform:scale(.75);margin:-13px}.designLanding .operatorArt{transform:scale(.72);margin:-17px -10px}.designLanding .carrierArt{width:145px;height:85px;background-size:718.45px 478.97px;background-position:-304.03px -254.84px}.landingCaption{display:none}body:has(.designLanding) main{padding:8px 12px 24px}body:has(.designLanding) .notice{margin-top:18px}html[dir=ltr] .designLanding .serviceCopy b{font-size:26px}html[dir=ltr] .designLanding .operatorChoice b{font-size:21px}}
@media(max-width:380px){.landingTitle h2{font-size:29px}.designLanding .roleChoice{padding:14px}.designLanding .serviceCopy b{font-size:26px}.designLanding .operatorChoice b{font-size:19px}.designLanding .carrierArt{width:120px;height:70px;background-size:594.58px 396.39px;background-position:-251.61px -210.97px}.designLanding .serviceCopy small{font-size:13px}}
@media(prefers-reduced-motion:reduce){button,.roleChoice{transition:none!important}.roleChoice:hover{transform:none!important}}
