.workspaceTop{display:none}
.workspace,.phone{width:100%;height:100dvh;min-height:0;margin:0;padding:0;display:block}
.phone{max-width:none;border:0;border-radius:0;box-shadow:none}
.app{width:100%;border-radius:0}
.app .langControl,html[dir=ltr] .app .langControl{top:max(10px,env(safe-area-inset-top));left:auto;right:auto;inset-inline-end:14px;max-width:calc(100% - 28px)}
.langControl select{max-width:140px;min-height:31px;padding:2px 8px;border:0;border-radius:20px;background:#222746;color:#fff;font:600 12px system-ui}
.langControl select:focus-visible{outline:2px solid #e38af2}
.screen:not(.dark){padding-top:50px}
.screen#provider_hub{padding-top:0}
.authwrap,.choiceWrap{max-width:460px;margin-inline:auto}
@media(min-width:760px){.catGrid,.companyGrid,.offers,.sectionRow,.pageBody,.pageIntro{max-width:1050px;margin-inline:auto}}
#web-intro{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;overflow:hidden;background:#090b1e;color:#fff}
#web-intro canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
#web-intro .intro-brand{position:relative;display:grid;justify-items:center;gap:12px;text-align:center;padding:24px;animation:intro-brand 6s both}
.intro-brand p{margin:0;color:#f5ddf4;font:800 clamp(16px,3vw,23px)/1.5 'Baloo Bhaijaan 2',system-ui,sans-serif}
#web-intro footer{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:0;right:0;display:grid;justify-content:center;animation:intro-footer 6s both}
#web-intro .b2me-asas-footer{display:flex;align-items:center;justify-content:center;gap:7px;direction:ltr;font-size:13px}
#web-intro .asasShield{height:32px;width:auto}
#web-intro .asasWordmark{height:26px;width:auto}
@keyframes intro-footer{0%,13%{opacity:0}24%,94%{opacity:1}100%{opacity:0}}
@keyframes intro-brand{0%,36%{opacity:0}52%,94%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#web-intro .intro-brand,#web-intro footer{animation:none}}

.phone:after{display:none}
.choiceWrap .b2me-choice-signin{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 .4em;margin:12px 0 0;color:#f1d9f7;font-size:12px;line-height:1.6}
.choiceWrap .b2me-choice-signin .textLink{padding:4px 0;font:inherit}
a.authFooter{text-decoration:none;cursor:pointer}
a.authFooter:hover span{text-decoration:underline}
a.authFooter:focus-visible{outline:2px solid #e38af2;outline-offset:4px}

/* Account profile: clear identity, labelled fields and accessible actions. */
.app:has(#account.active) > .langControl { display:none !important; }
#account.screen { padding-top:0; }
#account .screenTop { min-height:76px; padding:20px clamp(20px,4vw,32px); }
#account .screenTop h2 { font-size:clamp(20px,3vw,25px); margin:0; }
#account .accountBody { width:100%; max-width:700px; padding:24px 18px 130px; }
#account .accountCard { padding:clamp(20px,4vw,32px); border-radius:24px; box-shadow:0 12px 36px #25245006; }
.accountIdentity { display:flex; align-items:center; gap:20px; padding-bottom:26px; border-bottom:1px solid #ececf4; margin-bottom:26px; }
.accountAvatar { flex:none; width:96px; height:96px; object-fit:cover; border-radius:50%; border:4px solid #fff; box-shadow:0 3px 18px #60457d18; background:#f3eff9; }
.accountIdentityText { min-width:0; }
.accountIdentityText h2 { margin:0 0 7px; font-size:clamp(21px,4vw,28px); line-height:1.3; overflow-wrap:anywhere; }
.accountIdentityText p { margin:0; font-size:14px; color:#626b80; overflow-wrap:anywhere; }
.accountSectionTitle { margin:0 0 20px; font-size:17px; color:#262d45; }
.profileFields { display:grid; gap:16px; }
.profileNameFields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.profileFields .field { min-width:0; margin:0; }
#account .field label { font-size:14px; font-weight:650; color:#454e66; }
#account .field input { min-width:0; max-width:100%; min-height:49px; font-size:16px; background:#fcfcff; }
#account input[type=date] { display:block; appearance:none; -webkit-appearance:none; text-align:start; }
#account input[type=date]::-webkit-date-and-time-value { text-align:start; }
.accountDetailsForm > .cta { margin-top:22px; min-height:48px; font-size:15px; }
.accountDetailsForm .cta:disabled { cursor:wait; opacity:.65; }
.accountStatus { margin:10px 0 0; font-size:13px; color:#663c76; overflow-wrap:anywhere; }
.accountStatus:empty { display:none; }
.accountActions { display:grid; gap:10px; border-top:1px solid #ececf4; margin-top:26px; padding-top:24px; }
.accountAction { display:flex; align-items:center; gap:12px; min-height:50px; width:100%; padding:13px 16px; border:1px solid #e6e4ef; border-radius:12px; background:#f8f7fc; text-align:start; text-decoration:none; font-size:14px; font-weight:650; color:#34324f; }
.accountAction:hover { background:#f0edf8; border-color:#ccc4df; }
.accountAction .svgico { width:21px; height:21px; flex:none; }
.accountAction.accountSignOut { color:#99384c; background:#fff; border-color:#eee4e7; }
@media(max-width:480px) { .accountIdentity { flex-direction:column; text-align:center; gap:13px; } .accountAvatar { width:88px; height:88px; }  #account .accountBody { padding-top:18px; } }

.accountTopActions { display:flex; justify-content:flex-end; direction:ltr; margin-bottom:6px; }
.accountInquiry { border:1px solid #d9cde9; border-radius:20px; background:#f4eefb; color:#653381; padding:9px 15px; font-size:13px; font-weight:700; min-height:40px; }
.accountIdentity { flex-direction:column; text-align:center; gap:10px; margin-bottom:22px; padding-bottom:22px; }
.accountIdentityCompany .accountAvatar { border-radius:20px; object-fit:contain; background:white; padding:5px; }
.accountPhotoButton { display:inline-flex; align-items:center; min-height:40px; padding:6px 14px; border-radius:20px; color:#653381; background:#f7f2fb; font-size:13px; cursor:pointer; }
.accountPhotoInput { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); }
.accountPhotoInput:focus-visible + .accountPhotoHint { outline:2px solid #9438ee; outline-offset:4px; }
.accountPhotoHint { font-size:11px; color:#72798c; }
.accountIdentityText p { font-size:15px; color:#454e66; }
.accountPhoneField { margin-bottom:20px; }
.profileLocationFields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:18px; }
#account .field select { width:100%; min-width:0; min-height:49px; max-width:100%; background:#fcfcff; font-size:15px; }
@media(max-width:380px) { .profileNameFields,.profileLocationFields { gap:10px; } #account .accountCard { padding:18px 14px; } }

/* Language changes text while preserving the spatial layout. */
.app,.screen,.authwrap,.choiceWrap { direction:ltr; }
.app .b2meLogo { margin-inline:auto; }
.authwrap,.choiceWrap { align-items:center; }
html[lang=ar] .field label,html[lang=ar] .field input:not([type=email]):not([type=url]):not([type=tel]):not([type=date]),html[lang=ar] .field textarea,html[lang=ar] .slogan,html[lang=ar] .termsContent { direction:rtl; text-align:right; }
.app:has(#auth.active) #web-country,.app:has(#auth.active) #web-offer-services,.app:has(#choice.active) #web-country,.app:has(#choice.active) #web-offer-services { display:none; }
.srOnly { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); }
.providerTypeSwitch { display:grid; grid-template-columns:1fr 1fr; padding:5px; background:#f1edf8; border-radius:14px; margin-bottom:20px; }
.providerTypeSwitch button { min-height:46px; border:0; border-radius:10px; color:#655b79; background:transparent; font-weight:700; }
.providerTypeSwitch button[aria-pressed=true] { color:#772973; background:#fff; box-shadow:0 3px 10px #34244f12; }
.providerRegistrationMedia { text-align:center; margin-bottom:25px; }
.providerRegistrationMedia p { margin:9px 0; color:#4b4860; }
.providerRegistrationMedia small { color:#757486; font-size:12px; }
.providerRegistrationCover { height:180px; position:relative; border-radius:16px; background:linear-gradient(120deg,#e7e4f3,#d8dff2); overflow:hidden; }
.providerRegistrationCover img { width:100%; height:100%; object-fit:cover; }
.providerRegistrationAvatar { position:relative; width:112px; height:112px; margin:-45px auto 0; }
.providerRegistrationAvatar > img { display:block; width:100%; height:100%; border-radius:50%; border:4px solid #fff; background:#fff; object-fit:cover; box-shadow:0 4px 16px #2b1c4820; }
.registrationCamera { position:absolute; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:2px solid #fff; background:#5d426e; color:white; cursor:pointer; box-shadow:0 2px 7px #15102e25; }
.registrationCamera svg { width:21px; height:21px; }
.coverCamera { right:17px; bottom:17px; }
.avatarCamera { right:0; bottom:0; }
.providerTermsConsent { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:24px 0 18px; color:#3d3854; font-size:14px; }
.providerTermsConsent input { appearance:auto; width:21px; height:21px; flex:none; accent-color:#a02e92; }
.providerTermsLink { color:#7f307b; padding:5px 0; border:0; background:none; text-decoration:underline; font:inherit; }
#pvSubmit:disabled { opacity:.45; cursor:not-allowed; filter:grayscale(.3); }
.providerTermsDialog { width:min(620px,calc(100vw - 28px)); max-height:85dvh; overflow:auto; border:1px solid #e5ddec; border-radius:20px; color:#27213e; padding:24px; }
.providerTermsDialog::backdrop { background:#100c2777; }
.providerTermsDialog h2 { margin-top:0; font-size:21px; }
.termsContent { line-height:1.8; font-size:14px; }
.termsContent h3 { font-size:16px; margin:20px 0 5px; }
.termsContent p { margin:0; }
.providerTypeBadge { justify-self:start; display:inline-flex; padding:4px 9px; border:1px solid #e4e2ed; border-radius:20px; font-size:12px; color:#54506b; }

.directory-profile .companyLogo.freelancerLogo { border-radius:50%; padding:0; }
.directory-profile .companyLogo.freelancerLogo img { object-fit:cover; }

html[lang=ar] #account .profileNameFields { direction:rtl; }

.providerBusiness + .providerBusiness{border-top:1px solid #e4ddea;margin-top:26px;padding-top:18px}
.providerBusiness{scroll-margin-top:85px}
.providerAddBusiness{margin:24px 0 10px}
.providerAddBusiness .accountAction{width:auto}
.accountTopActions{flex-wrap:wrap;gap:8px}
.accountTopActions .accountAction{width:auto}

/* Keep the controls inset from the cover and the edge of the screen. */
.app { --brand-frame:linear-gradient(120deg,#48aaff,#8460ec 51%,#f35aa9); --cover-inset:clamp(10px,2.6vw,32px); }
.app .langControl,html[dir=ltr] .app .langControl {
 top:max(12px,env(safe-area-inset-top)); inset-inline-end:calc(var(--cover-inset) + 4px);
 max-width:calc(100% - 2 * var(--cover-inset) - 8px);
 padding:5px 6px;border:1px solid transparent;
 background:linear-gradient(#171b35,#171b35) padding-box,var(--brand-frame) border-box;
}
.app:has(#listings.active) .langControl {
 top:calc(max(10px,env(safe-area-inset-top)) + 13px);
 inset-inline-end:calc(var(--cover-inset) + 14px);
 max-width:calc(100% - 2 * var(--cover-inset) - 28px);
}
#listings.screen {padding-top:max(10px,env(safe-area-inset-top));}
#listings .screenTop {
 min-height:clamp(205px,21vw,285px);
 margin:0 var(--cover-inset) 16px;
 padding:84px clamp(14px,3.5vw,44px) 22px;
 border:1px solid #e2dbf0;border-radius:22px;align-items:flex-end;
}
#listings .screenTop h2 {font-size:clamp(19px,3vw,32px);line-height:1.25;color:#17213c;}
#listings .screenTop small {
 display:inline-block;margin-top:8px;padding:5px 10px;border-radius:8px;
 background:#ffffffd9;color:#3a2c67;font-size:clamp(13px,1.5vw,17px);font-weight:800;
}
.serviceAreaFields{min-width:0;border:1px solid #e6deee;border-radius:14px;padding:14px;margin:0 0 18px;}
.serviceAreaFields legend{padding:0 6px;font-weight:800;}
.serviceAreaFields p{margin:0 0 12px;color:#5a5570;font-size:13px;}
.serviceAreaSelects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.serviceAreaSelects .field:only-child,.serviceAreaSelects:has([hidden]) .field:first-child{grid-column:1/-1;}
.serviceAreaFields [hidden]{display:none!important;}
.serviceAreaFields small a{color:#634691;}
html[lang=ar] .serviceAreaFields{direction:rtl;}
@media(max-width:460px){.serviceAreaSelects{grid-template-columns:1fr;gap:0;}}

/* Screens choose the overall size. The frame and lettering scale together. */
#web-intro .b2meLogo{--logo-size:min(61vw,270px,38dvh)}
#choice .b2meLogo{--logo-size:min(50vw,235px)}
#auth .b2meLogo{--logo-size:min(52vw,260px)}
#home .b2meLogo{--logo-size:clamp(101px,13vw,147px)}