/* Website additions on top of the handover CSS bundles (loaded after the page bundle on every website page).
   Keep the handover files in public/assets/css untouched so a new handover can be copied straight in. */

/* toasts (React <ToastProvider>) */
.toast{position:fixed;z-index:160;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;visibility:hidden;display:flex;align-items:center;gap:10px;padding:14px 20px;border-radius:var(--r,12px);background:var(--ink,#0F1B2D);color:#fff;font-weight:500;box-shadow:0 18px 40px -16px rgba(11,42,91,.45);transition:all .35s var(--ease,ease);pointer-events:none}.toast i{color:#F2C063;font-size:19px}.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}@media(min-width:900px){.toast{left:auto;right:24px;bottom:auto;top:96px;transform:translateY(-10px)}.toast.show{transform:none}}

/* visa card: whole card opens the visa page (stretched link); "Apply now" sits above it and starts the application */
.vcard .vc-lnk{position:absolute;inset:0;z-index:1;border-radius:inherit}.vcard .vc-lnk:focus-visible{outline:3px solid #1463FF;outline-offset:2px}.vcard .vc-go{position:relative;z-index:2}

/* icon glyphs the page bundles may not include */
.ph.ph-translate:before,.ph-fill.ph-translate:before,.ph-bold.ph-translate:before{content:"\e4a2"}
.ph.ph-chat-circle-dots:before,.ph-fill.ph-chat-circle-dots:before,.ph-bold.ph-chat-circle-dots:before{content:"\e16c"}
.ph.ph-paper-plane-tilt:before,.ph-fill.ph-paper-plane-tilt:before,.ph-bold.ph-paper-plane-tilt:before{content:"\e398"}
.ph.ph-device-mobile:before,.ph-fill.ph-device-mobile:before,.ph-bold.ph-device-mobile:before{content:"\e1e0"}
.ph.ph-warning-circle:before,.ph-fill.ph-warning-circle:before,.ph-bold.ph-warning-circle:before{content:"\e4e2"}
.ph.ph-identification-badge:before,.ph-fill.ph-identification-badge:before,.ph-bold.ph-identification-badge:before{content:"\e6f6"}
.ph-duotone.ph-identification-badge:before{content:"\e6f6";opacity:0.2}.ph-duotone.ph-identification-badge:after{content:"\e6f7";margin-left:-1em}
.ph.ph-files:before,.ph-fill.ph-files:before,.ph-bold.ph-files:before{content:"\e710"}
.ph-duotone.ph-files:before{content:"\e710";opacity:0.2}.ph-duotone.ph-files:after{content:"\e711";margin-left:-1em}

/* visa detail: passport with its own price (opt-in line under the price in "What you pay") */
.vd-nat{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;line-height:1.4;color:var(--z-mute);cursor:pointer}
.vd-nat input{width:16px;height:16px;margin:0;flex:none;accent-color:var(--z-blue)}
.vd-nat img{flex:none;border-radius:50%}
.vd-nat b{color:var(--z-ink)}

.ph.ph-arrows-left-right:before,.ph-fill.ph-arrows-left-right:before,.ph-bold.ph-arrows-left-right:before{content:"\e0a0"}
.ph.ph-minus:before,.ph-fill.ph-minus:before,.ph-bold.ph-minus:before{content:"\e32a"}
.ph.ph-sign-out:before,.ph-fill.ph-sign-out:before,.ph-bold.ph-sign-out:before{content:"\e42a"}

/* "Continue your application" on Track and My visas (components/my-visas/drafts.tsx; the phone app's .hm-draft card) */
.dr-card{margin:0 0 20px;padding:18px 20px 14px;border-radius:16px;background:#fff;box-shadow:0 0 0 1.5px var(--em),0 22px 44px -30px rgba(20,99,255,.55)}
.dr-top{display:flex;align-items:center;gap:14px}
.dr-t{flex:1;min-width:0}
.dr-t small{display:block;font:600 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--em)}
.dr-t>b{display:block;margin-top:2px;font:700 17px/1.25 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.dr-m{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:8px;font-size:14px;color:var(--ink-2)}
.dr-m b{color:var(--ink);font-weight:600}
.dr-st{flex:none;display:flex;gap:3px}
.dr-st i{width:18px;height:4px;border-radius:2px;background:var(--line)}
.dr-st i.on{background:var(--ok)}.dr-st i.nw{background:var(--em)}
.dr-top .btn{flex:none}
.dr-fine{display:flex;align-items:center;gap:6px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line-2);font-size:13px;color:var(--ink-3)}
.dr-more{list-style:none;margin:10px 0 0;padding:0}
.dr-more li+li{border-top:1px solid var(--line-2)}
.dr-more a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;font-size:14px;color:var(--ink-2);text-decoration:none}
.dr-more a b{color:var(--ink);font-weight:600}
.dr-more .go{flex:none;display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--em-ink)}
.dr-more a:hover .go{text-decoration:underline}
.tk-sec-dr .dr-card{max-width:860px;margin:0 auto}
@media(max-width:640px){.dr-top{flex-wrap:wrap}.dr-top .btn{width:100%;justify-content:center}}

/* Apply tap tiles: no red borders in an error, the message under them says what is missing (owner, 29 Oct 2026) */
.fld.bad .ax-tiles .ax-tl2:not(:has(input:checked)){border-color:var(--line,#E1E6EE)}

/* FAQ questions open and close smoothly: the answer's height animates where the browser can (Chrome, Edge), and it
   fades in everywhere else (Safari, Firefox). Every .fqi is a <details> (home, inner pages, help centre). */
details.fqi[open] .ans{animation:fq-in .32s var(--ease,cubic-bezier(.2,.7,.2,1)) both}
@keyframes fq-in{from{opacity:0;transform:translateY(-6px)}}
@supports (interpolate-size:allow-keywords){
  details.fqi{interpolate-size:allow-keywords}
  details.fqi::details-content{height:0;overflow:clip;transition:height .32s var(--ease,cubic-bezier(.2,.7,.2,1)),content-visibility .32s allow-discrete}
  details.fqi[open]::details-content{height:auto}
}
@media(prefers-reduced-motion:reduce){
  details.fqi[open] .ans{animation:none}
  details.fqi::details-content{transition:none}
}

/* Home hero passport: the application form's country picker (type to filter, flags) in place of the browser's
   <select>; the input looks like the field's old select and the list opens under the whole field */
.fm .f{position:relative}
.fm .f .combo{position:static;flex:1;min-width:0}
.fm .f .combo .inp{width:100%;height:auto;min-height:0;padding:2px 22px 0 0;border:0;border-radius:0;background:transparent;box-shadow:none;font:600 16px var(--sans);color:var(--ink);outline:0;text-overflow:ellipsis}
.fm .f .combo .inp::placeholder{color:var(--mute);font-weight:500;opacity:1}
.fm .f .combo-list{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 6px);min-width:0;max-height:280px;overflow:auto;scrollbar-width:none;padding:6px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 24px 48px -20px rgba(11,42,91,.35);display:none;text-align:left}
.fm .f .combo.open .combo-list{display:block}
/* the caret opens and closes the list, and points up while it is open */
.fm .f .combo .cv-tg{pointer-events:auto;cursor:pointer;padding:6px;margin:-6px;transition:transform .2s ease}
.fm .f .combo.open .cv-tg{transform:rotate(180deg)}
/* the entry checker's "Your passport": the same country picker, list under the whole field */
.nat-q .combo{position:static;flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:100%}
.nat-q .combo .inp{flex:1;min-width:0;height:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font:600 17px var(--sans);color:var(--ink);outline:0;text-overflow:ellipsis}
.nat-q .combo .inp::placeholder{color:var(--mute);font-weight:500;opacity:1}
.nat-q .combo .cv-tg{flex:none;padding:6px;margin:-6px -2px -6px -6px;font-size:16px;color:var(--mute);cursor:pointer;transition:transform .2s ease}
.nat-q .combo.open .cv-tg{transform:rotate(180deg)}
.nat-q .combo-list{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 8px);max-height:320px;overflow:auto;scrollbar-width:none;padding:6px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 24px 48px -20px rgba(11,42,91,.35);display:none;text-align:left}
.nat-q .combo.open .combo-list{display:block}
.nat-q .combo-list::-webkit-scrollbar{display:none}
.nat-q .combo-list button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:8px;background:none;font:500 15px var(--sans);color:var(--ink);text-align:left;cursor:pointer}
.nat-q .combo-list button:hover,.nat-q .combo-list button.act{background:#F2F6FC}
.nat-q .combo-list button img{flex:none;width:22px;height:22px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(15,27,45,.08)}
.nat-q .combo-list button small{margin-left:auto;font-size:12.5px;color:var(--mute);text-transform:none;letter-spacing:0}
.nat-q .combo-list .empty{padding:14px;font-size:14.5px;color:var(--mute)}
@media(max-width:640px){.nat-q .combo .inp{font-size:15px}.nat-q .combo .cv-tg{font-size:14px}}
/* the checker card let the list out (it clipped it to a few rows); the answer panel keeps the card's rounded corners */
:where(.pg-home,.hx) .nx{overflow:visible}
:where(.pg-home,.hx) .nx-r{border-radius:0 22px 22px 0}
@media(max-width:1000px){:where(.pg-home,.hx) .nx-r{border-radius:0 0 22px 22px}}
/* Stay: the passport picker's list instead of the browser's own; the chosen stay has a tick, its kind on the right */
.fm .f .combo .sel{display:block;width:100%;padding:2px 22px 0 0;border:0;background:transparent;font:600 16px var(--sans);color:var(--ink);text-align:left;cursor:pointer;outline:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm .f .combo.sl .combo-list{right:auto;min-width:100%;width:max-content}
.fm .f .combo.sl .combo-list button{gap:10px;padding:9px 12px;white-space:nowrap}
.fm .f .combo.sl .combo-list button small{padding-left:24px}
.fm .f .combo.sl .combo-list button .stk{flex:none;width:16px;height:16px;fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fm .f .combo.sl .combo-list button .stk.off{visibility:hidden}
.fm .f .combo.sl .combo-list button[aria-selected=true]{font-weight:600;color:var(--blue)}
/* the list lines up with the field (same edges) and scrolls without a visible scrollbar */
.fm .f .combo-list::-webkit-scrollbar{display:none}
.fm .f .combo-list button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:8px;background:none;font:500 15px var(--sans);color:var(--ink);text-align:left;cursor:pointer}
.fm .f .combo-list button:hover,.fm .f .combo-list button.act{background:#F2F6FC}
.fm .f .combo-list button img{flex:none;width:22px;height:22px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(15,27,45,.08)}
.fm .f .combo-list button small{margin-left:auto;font-size:12.5px;color:var(--mute);text-transform:none;letter-spacing:0}
.fm .f .combo-list .empty{padding:14px;font-size:14.5px;color:var(--mute)}

/* Phone numbers on the website (PhoneInput): a flag + dialling-code button beside the number, as in the phone app and
   the sign-in popup. The button takes the page's own .inp look, so it matches each form. */
.pi{position:relative;display:flex;gap:8px}
.pi>input.inp{flex:1;min-width:0;letter-spacing:.02em}
.pi>.pi-cc.inp{flex:none;width:auto;min-width:0;display:inline-flex;align-items:center;gap:8px;padding-left:12px;padding-right:12px;font-weight:600;cursor:pointer;text-align:left}
.pi-cc img,.pi-list img{flex:none;width:22px;height:22px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(11,27,43,.08);background:#EEF2F7}
.pi-cc i{font-size:13px;color:#6B7689}
.pi-cc[aria-expanded=true]{border-color:var(--blue,#1463FF);box-shadow:0 0 0 3px rgba(20,99,255,.12)}
.pi-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:60;width:min(100%,380px);padding:8px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #E3E8F0,0 24px 48px -20px rgba(11,27,54,.4)}
.pi-pop[hidden]{display:none}
.pi-q{width:100%;height:42px;padding:0 12px;border:0;border-radius:10px;background:#F4F6FA;font:400 15px var(--sans,Inter,system-ui,sans-serif);color:#0F1B2D}
.pi-q:focus{outline:0;box-shadow:inset 0 0 0 2px #1463FF}
.pi-list{list-style:none;margin:6px 0 0;padding:0;max-height:240px;overflow-y:auto;overscroll-behavior:contain}
.pi-list li{display:flex;align-items:center;gap:10px;min-height:42px;padding:8px 10px;border-radius:10px;font-size:15px;color:#0F1B2D;cursor:pointer}
.pi-list li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pi-list li small{font-weight:600;font-size:14px;color:#6B7689}
.pi-list li.act,.pi-list li:hover{background:#EEF4FF}
.pi-list .pi-none{cursor:default;color:#6B7689}

/* Apply → Documents: cards keep the handover's size (about 240px: three documents to a row), so a fourth document
   (the national ID some passports need, which the handover doesn't have) starts a new row instead of squeezing four
   into one; a narrow form keeps one per row (apply.css, same container) */
@container (min-width:641px){.ax-ups{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}

/* No scrollbars inside the page: dropdown lists (phone code, countries, sign-in), chip strips, dialogs and panels still
   scroll by wheel, trackpad, touch and keyboard, without the grey bar beside them. The window's own scrollbar stays. */
body *{scrollbar-width:none}
body *::-webkit-scrollbar{display:none;width:0;height:0}

/* Client-side navigation (next/link): Next.js scrolls a new page to the top unless its first elements already sit
   below html's scroll-padding-top and inside the window. The handover's 110px padding (avd.css, for the sticky header)
   and the skip link parked above the window (top:-60px) made it scroll somewhere down the page instead. Same header
   room for anchors as scroll-margin on the targets; the skip link stays at the top, clipped until focused. */
html{scroll-padding-top:0}
[id]{scroll-margin-top:110px}
.skip:not(:focus){top:0;clip-path:inset(50%)}

/* "What you'll need": a passport's extra document (bank statement, police clearance…) as an icon in the drawings' tile */
:where(.pg-home,.hx) .ditem2 .tq.vis > i{font-size:34px;color:#1463FF}

/* Blog post "Ready to apply?" box sits inside .bp-body, whose article-link colour and underline (.bp-body a) were
   turning "Start application" blue on blue: buttons keep their own look */
.bp-body .bp-cta a.btn{text-decoration:none}
.bp-body .bp-cta a.btn-p,.bp-body .bp-cta a.btn-p:hover{color:#fff}