/* RideArrivo tier pages (Removals, Air, Boat, Chauffeur). One layout for every tier.
   Colours, glass and the pill come from arrivo-ui.css, the same file the website uses, so a tier looks
   like the rest of RideArrivo: navy and amber, light by default, dark on request. PArAsYtE */
:root{--tk-field:rgba(10,27,51,.05);--tk-hair:var(--ra-line);--tk-bad:#c0261e;--safe-bottom:env(safe-area-inset-bottom,0px);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
html[data-theme="dark"]{--tk-field:rgba(255,255,255,.07);--tk-bad:#ff8a80}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--ra-bg);color:var(--ra-ink);overflow-x:clip;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(640px circle at 10% 6%,rgba(20,64,122,.14),transparent 62%),radial-gradient(720px circle at 94% 14%,rgba(245,163,0,.12),transparent 62%)}
html[data-theme="dark"] body::before{background:radial-gradient(700px circle at 8% 4%,rgba(30,90,170,.32),transparent 62%),radial-gradient(720px circle at 96% 12%,rgba(245,163,0,.14),transparent 62%)}
.tk-wrap{max-width:600px;margin:0 auto;padding:0 16px calc(16px + var(--safe-bottom))}
.tk-main{display:grid;gap:18px}
[hidden]{display:none!important}

/* Hero */
.tk-hero{padding:10px 4px 0}
.tk-eyebrow{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ra-amber-ink)}
html[data-theme="dark"] .tk-eyebrow{color:var(--ra-amber-2)}
.tk-hero h1{margin:.35rem 0 .55rem;font-size:clamp(1.9rem,7.4vw,2.5rem);line-height:1.08;letter-spacing:-.03em;color:var(--title)}
.tk-lead{margin:0 0 16px;color:var(--ra-muted);line-height:1.55;font-size:1rem}
.tk-steps{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tk-steps li{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--ra-glass);border:1px solid var(--ra-line);box-shadow:var(--ra-shine);font-size:.82rem;font-weight:600;color:var(--ra-ink)}
.tk-steps b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,var(--ra-amber-2),var(--ra-amber));color:#1a1204;font-size:.72rem}

/* Glass card */
.tk-card{background:var(--ra-glass-strong);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border:1px solid var(--ra-line);box-shadow:var(--ra-shadow),var(--ra-shine);border-radius:30px;padding:4px 18px 18px;color:var(--ra-ink)}
.tk-card h1,.tk-card h2{letter-spacing:-.02em;color:var(--title)}
.tk-sec{display:grid;gap:12px;padding:18px 0;border-top:1px solid var(--tk-hair);min-width:0}
.tk-sec:first-child{border-top:0}
.tk-sechead{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ra-muted)}
.tk-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tk-field{display:grid;gap:6px;margin:0;border:0;padding:0;min-width:0;align-content:start}
.tk-label{font-size:.84rem;font-weight:700;color:var(--ra-ink)}.tk-label em{font-weight:500;font-style:normal;color:var(--ra-muted);margin-left:4px}
.tk-field input,.tk-field select,.tk-field textarea{width:100%;min-width:0;max-width:100%;font:inherit;font-size:1rem;color:var(--ra-ink);background:var(--tk-field);border:1.5px solid transparent;border-radius:16px;padding:0 14px;height:52px;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s,background .15s}
.tk-field textarea{height:auto;min-height:92px;padding:13px 14px;resize:vertical;line-height:1.45}
.tk-field select{padding-right:40px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2371829b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
.tk-field input::placeholder,.tk-field textarea::placeholder{color:var(--ra-muted);opacity:.75}
.tk-field input:focus,.tk-field select:focus,.tk-field textarea:focus{border-color:var(--ra-amber);box-shadow:var(--ra-focus)}
html[data-theme="dark"] .tk-field select option{background:#0a1a32;color:#eef3fb}
/* Native date and time inputs: iOS gives an empty one zero text height and an intrinsic width. Pin both so they stay inside the card, and let the hint stand in for the blank. */
.tk-field input[type=date],.tk-field input[type=time]{display:block;text-align:left;line-height:52px;position:relative}
.tk-field input[type=date]::-webkit-date-and-time-value,.tk-field input[type=time]::-webkit-date-and-time-value{text-align:left;min-height:1.2em;margin:0}
.tk-field input[type=date]::-webkit-calendar-picker-indicator,.tk-field input[type=time]::-webkit-calendar-picker-indicator{opacity:.6}
html[data-theme="dark"] .tk-field input[type=date]::-webkit-calendar-picker-indicator,html[data-theme="dark"] .tk-field input[type=time]::-webkit-calendar-picker-indicator{filter:invert(1)}
.tk-field input.is-empty[type=date]::before,.tk-field input.is-empty[type=time]::before{content:attr(data-ph);color:var(--ra-muted);opacity:.8;position:absolute;left:14px}
.tk-field input.is-empty[type=date]::-webkit-datetime-edit,.tk-field input.is-empty[type=time]::-webkit-datetime-edit{opacity:0}
.tk-field.tk-bad input,.tk-field.tk-bad select{border-color:var(--tk-bad)}
.tk-fielderr{color:var(--tk-bad);font-size:.8rem;font-weight:600}

/* Route: pickup and destination share one rail. */
.tk-routebox{position:relative;display:grid;gap:12px;padding-left:30px}
.tk-rail{position:absolute;left:9px;top:38px;bottom:38px;width:2px;background:repeating-linear-gradient(to bottom,var(--ra-line-strong) 0 4px,transparent 4px 8px)}
.tk-routebox .tk-field{position:relative}
.tk-routebox .tk-field::before{content:"";position:absolute;left:-26px;top:38px;width:12px;height:12px;border-radius:50%;background:var(--ra-navy);box-shadow:0 0 0 4px var(--ra-glass-strong)}
html[data-theme="dark"] .tk-routebox .tk-field::before{background:var(--ra-ink)}
.tk-routebox .tk-field+.tk-field::before{border-radius:3px;background:var(--ra-amber)}

/* Steppers */
.tk-stepper{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;height:52px;border-radius:16px;background:var(--tk-field)}
.tk-stepper input{height:52px;text-align:center;background:transparent;border-radius:0;font-weight:800;font-size:1.1rem;padding:0;font-variant-numeric:tabular-nums}
.tk-stepper input:focus{box-shadow:none;background:transparent;border-color:transparent}
.tk-stepper:focus-within{box-shadow:var(--ra-focus)}
.tk-step{display:grid;place-items:center;width:52px;height:52px;border:0;background:transparent;color:var(--ra-ink);border-radius:16px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tk-step:active{background:var(--ra-line)}.tk-step:disabled{opacity:.3;cursor:default}

/* Quick dates and add-on chips */
.tk-quick{display:flex;flex-wrap:wrap;gap:8px}
.tk-quickbtn{height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--ra-line-strong);background:transparent;color:var(--ra-ink);font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
.tk-quickbtn.on{background:var(--ra-navy);border-color:var(--ra-navy);color:#fff}
.tk-checks{display:flex;flex-wrap:wrap;gap:8px}.tk-checks legend{width:100%;margin:0 0 8px;padding:0;float:left}
.tk-chip{position:relative}.tk-chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.tk-chip span{display:flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--ra-line-strong);font-size:.88rem;font-weight:600;color:var(--ra-ink)}
.tk-chip input:checked+span{background:var(--ra-navy);border-color:var(--ra-navy);color:#fff}
.tk-chip input:focus-visible+span{box-shadow:var(--ra-focus)}
html[data-theme="dark"] .tk-quickbtn.on,html[data-theme="dark"] .tk-chip input:checked+span{background:var(--ra-amber);border-color:var(--ra-amber);color:#1a1204}

/* Submit */
.tk-submitbar{margin-top:6px;padding:16px 0 0;border-top:1px solid var(--tk-hair);display:grid;gap:10px}
.tk-submit,.tk-ghost{width:100%;min-height:56px;border-radius:999px;border:0;font:inherit;font-weight:800;font-size:1.02rem;cursor:pointer;transition:transform .18s var(--ra-ease),filter .18s}
.tk-submit{background:linear-gradient(180deg,var(--ra-amber-2),var(--ra-amber));color:#1a1204;border:1px solid rgba(255,255,255,.5);box-shadow:0 10px 26px rgba(245,163,0,.32),inset 0 1px 0 rgba(255,255,255,.6)}
.tk-submit:hover{filter:brightness(1.04);transform:translateY(-1px)}.tk-submit[disabled]{opacity:.6;cursor:wait;transform:none}
.tk-ghost{background:var(--ra-glass);color:var(--ra-ink);border:1px solid var(--ra-line-strong);margin-top:18px;min-height:50px}
.tk-fine{margin:0;text-align:center;color:var(--ra-muted);font-size:.8rem;line-height:1.4}
.tk-error{margin:0;padding:10px 14px;border-radius:14px;background:rgba(192,38,30,.1);border:1px solid rgba(192,38,30,.3);color:var(--tk-bad);font-size:.9rem}

/* Done */
.tk-done{text-align:center;padding:28px 18px 22px}.tk-done h2{margin:.3rem 0 .4rem;font-size:1.6rem}
.tk-tick{width:58px;height:58px;margin:0 auto 8px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--ra-amber-2),var(--ra-amber));color:#1a1204;font-size:1.7rem;font-weight:800}
.tk-ref{margin:16px auto 0;padding:12px 18px;border-radius:18px;background:var(--tk-field);display:inline-grid;gap:2px}
.tk-ref small{color:var(--ra-muted);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.68rem}
.tk-ref b{font-size:1.4rem;letter-spacing:.06em;font-variant-numeric:tabular-nums}

.tk-card,.tk-field,.tk-hero{scroll-margin-top:96px}
@media(min-width:560px){.tk-card{padding:6px 26px 26px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
html[data-theme="dark"] .tk-routebox .tk-field+.tk-field::before{background:var(--ra-amber)}

/* Arabic reads right to left: flip the route rail, the select arrow and the date hints. */
html[dir="rtl"] .tk-routebox{padding-left:0;padding-right:30px}
html[dir="rtl"] .tk-rail{left:auto;right:9px}
html[dir="rtl"] .tk-routebox .tk-field::before{left:auto;right:-26px}
html[dir="rtl"] .tk-field select{padding-right:14px;padding-left:40px;background-position:left 14px center}
html[dir="rtl"] .tk-field input[type=date],html[dir="rtl"] .tk-field input[type=time]{text-align:right}
html[dir="rtl"] .tk-field input.is-empty[type=date]::before,html[dir="rtl"] .tk-field input.is-empty[type=time]::before{left:auto;right:14px}
html[dir="rtl"] .tk-label em{margin-left:0;margin-right:4px}

/* Headings use Poppins, like the website. */
.tk-hero h1,.tk-card h1,.tk-card h2,.tk-done h2{font-family:Poppins,Inter,ui-sans-serif,system-ui,sans-serif}
.tk-field input.is-empty[type=date]::before,.tk-field input.is-empty[type=time]::before{max-width:calc(100% - 52px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Landing + dialog */
.tk-herocta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:6px 0 18px}
.tk-cta{min-height:54px;padding:0 28px;border:0;border-radius:999px;font:700 1rem/1 Poppins,Inter,system-ui,sans-serif;color:#1a1204;background:linear-gradient(135deg,var(--ra-amber-2),var(--ra-amber));box-shadow:0 12px 30px rgba(245,163,0,.38),var(--ra-shine);cursor:pointer;transition:transform .18s var(--ra-ease),box-shadow .18s}
.tk-cta:hover{transform:translateY(-1px)}.tk-cta:active{transform:scale(.97)}.tk-cta:focus-visible{outline:0;box-shadow:var(--ra-focus)}
.tk-nocharge{font-size:.86rem;color:var(--ra-muted);font-weight:600}
.tk-good small{display:block;margin-bottom:8px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ra-muted)}
.tk-good ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tk-good li{padding:7px 14px;border-radius:999px;background:var(--ra-glass);border:1px solid var(--ra-line);box-shadow:var(--ra-shine);font-size:.84rem;font-weight:600;color:var(--ra-ink)}
.tk-how{display:grid;gap:12px;padding-top:8px}
.tk-stepcards{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.tk-stepcards li{display:grid;grid-template-columns:34px 1fr;column-gap:14px;padding:16px;border-radius:22px;background:var(--ra-glass-strong);border:1px solid var(--ra-line);box-shadow:var(--ra-shadow-sm),var(--ra-shine)}
.tk-stepcards b{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,var(--ra-amber-2),var(--ra-amber));color:#1a1204;font-size:.9rem}
.tk-stepcards h3{margin:0;font:700 1rem Poppins,Inter,system-ui,sans-serif;color:var(--title)}
.tk-stepcards p{margin:2px 0 0;color:var(--ra-muted);font-size:.92rem;line-height:1.45}
.tk-ready{display:grid;justify-items:start;gap:14px;padding:22px;border-radius:26px;background:linear-gradient(135deg,var(--ra-navy),var(--ra-navy-2));color:#fff;box-shadow:var(--ra-shadow)}
.tk-ready h2{margin:0;font:700 1.35rem Poppins,Inter,system-ui,sans-serif;color:#fff}
@media(min-width:720px){.tk-wrap{max-width:760px}.tk-stepcards{grid-template-columns:repeat(3,1fr)}.tk-stepcards li{grid-template-columns:1fr;row-gap:6px}.tk-stepcards b{grid-row:auto}}
.tk-modal{position:fixed;inset:0;z-index:9500;display:grid;align-items:end;justify-items:center}
.tk-modal__scrim{position:absolute;inset:0;background:rgba(4,12,24,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tk-modal__panel{position:relative;width:100%;max-width:600px;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;border-radius:28px 28px 0 0;background:var(--ra-bg);border:1px solid var(--ra-line);box-shadow:var(--ra-shadow);padding:0 14px calc(14px + var(--safe-bottom));outline:0;animation:tkUp .26s var(--ra-ease)}
.tk-modal__head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 4px 10px;background:var(--ra-bg)}
.tk-modal__head h2{margin:0;font:700 1.15rem Poppins,Inter,system-ui,sans-serif;color:var(--title)}
.tk-modal__x{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--ra-line);border-radius:50%;background:var(--ra-glass);color:var(--ra-ink);cursor:pointer}
.tk-modal__x:focus-visible{outline:0;box-shadow:var(--ra-focus)}
.tk-modal .tk-card{box-shadow:none;border-radius:22px}
@media(min-width:720px){.tk-modal{align-items:center}.tk-modal__panel{border-radius:28px;max-height:88dvh;padding:0 18px 18px}}
html.tk-lock,html.tk-lock body{overflow:hidden}
@keyframes tkUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.tk-modal__panel{animation:none}.tk-cta{transition:none}}