/* ChaiBD shipping service page (shipping.html, public/js/chai-ship.js). Uses the theme's colours (--red, --card,
   --card-b, --ink, --ink-soft), so every website design and dark mode style it. */
.shp { padding-top: 10px; }
.shp svg, .shp-sheet svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.shp .crumb { margin-bottom: 14px; }

/* the banner */
.shp-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; align-items: center; padding: 38px 36px; border-radius: 30px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--red) 92%, #ff8a3d) 0%, color-mix(in srgb, var(--red) 70%, #1a0b2e) 55%, #170b26 100%); box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--red) 70%, #000); isolation: isolate; }
.shp-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(50px); opacity: .55; animation: shp-float 9s ease-in-out infinite; }
.shp-glow.g1 { width: 280px; height: 280px; right: -60px; top: -80px; background: #ffb547; } .shp-glow.g2 { width: 240px; height: 240px; left: 30%; bottom: -120px; background: #7c3aed; animation-delay: -4s; }
@keyframes shp-float { 50% { transform: translate(20px, -18px) scale(1.08); } }
.shp-kick { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); }
.shp-kick i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.25); animation: shp-pulse 1.8s infinite; }
@keyframes shp-pulse { 50% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } }
.shp-hl h1 { margin: 14px 0 10px; font-size: clamp(26px, 3.6vw, 42px); line-height: 1.18; } .shp-hl h1 em { font-style: normal; color: #ffd27a; }
.shp-hl p { margin: 0 0 16px; font-size: 15px; line-height: 1.65; opacity: .92; max-width: 560px; }
.shp-ticks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 20px; padding: 0; font-size: 13.5px; font-weight: 600; } .shp-ticks li { display: inline-flex; align-items: center; gap: 6px; } .shp-ticks svg { width: 17px; height: 17px; color: #ffd27a; }
.shp-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.shp-go, .shp-go2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border-radius: 14px; border: 0; font: inherit; font-weight: 800; font-size: 14.5px; text-decoration: none; cursor: pointer; transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s; }
.shp-go { color: var(--on-accent, #fff); background: linear-gradient(135deg, color-mix(in srgb, var(--red) 82%, #ff8a3d), var(--red)); box-shadow: 0 14px 26px -16px var(--red); }
.shp-hero .shp-go { color: var(--red); background: #fff; box-shadow: 0 14px 30px -16px rgba(0,0,0,.6); }
.shp-go2 { color: inherit; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); }
.shp-go:hover, .shp-go2:hover { transform: translateY(-2px); } .shp-go:active, .shp-go2:active { transform: scale(.97); }
.shp-go.wide { width: 100%; margin-top: 4px; }

/* the banner's scene: one SVG (globe, routes, plane, ship, pins) with the 3D parcel and the tracking cards over it */
.shp-hr { perspective: 900px; min-width: 0; }
.shp-stage { position: relative; width: 100%; max-width: 480px; margin-left: auto; aspect-ratio: 440 / 300; container-type: inline-size; transform-style: preserve-3d; }
.shp-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.shp-orb { animation: shp-breathe 6s ease-in-out infinite; transform-origin: 220px 150px; }
@keyframes shp-breathe { 50% { transform: scale(1.04); } }
.shp-mer ellipse { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 1; }
.shp-spk { fill: #ffe7b0; opacity: 0; }
.shp-arc { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 2; stroke-dasharray: 5 8; animation: shp-dash 2.4s linear infinite; }
.shp-sea { fill: none; stroke: rgba(125,211,252,.5); stroke-width: 2.6; stroke-dasharray: 2 9; stroke-linecap: round; animation: shp-dash 3.5s linear infinite; }
@keyframes shp-dash { to { stroke-dashoffset: -26; } }
.shp-trail { fill: none; stroke: url(#shpTr); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(255,210,122,.8)); }
.shp-pin circle { fill: #ffd27a; } .shp-pin .c { fill: #fff; } .shp-pin .d { fill: var(--red); }
.shp-jet { filter: drop-shadow(0 6px 5px rgba(0,0,0,.4)); } .shp-jet .b { fill: #fff; } .shp-jet .w { fill: #e8edf5; stroke: #cbd5e1; stroke-width: .5; } .shp-jet .e { fill: #94a3b8; } .shp-jet .s { stroke: var(--red); stroke-width: .9; fill: none; } .shp-jet .c { fill: #1e293b; }
.shp-boat { filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); } .shp-boat .h { fill: #1e3a5f; } .shp-boat .ln { stroke: #ef4444; stroke-width: 1.2; } .shp-boat .br { fill: #fff; } .shp-boat .wn { fill: #38bdf8; } .shp-boat .fn { fill: #ef4444; }
.shp-boat .k1 { fill: #f59e0b; } .shp-boat .k2 { fill: #2563eb; } .shp-boat .k3 { fill: #16a34a; } .shp-boat .k4 { fill: #e11d48; }
.shp-tag { position: absolute; top: 85%; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.shp-tag.cn { left: 10.9%; } .shp-tag.bd { left: 89.1%; top: 79%; }
/* the parcel: kraft card faces with tape, the mark sticker and a light that sweeps across */
/* five parcels spread over the scene: each floats (shp-bob) and turns (shp-spin) at its own pace */
.shp-bx { --bs: 7cqw; position: absolute; left: var(--l); top: var(--t); width: 0; height: 0; transform-style: preserve-3d; animation: shp-bob var(--bb, 4s) ease-in-out infinite var(--bd, 0s); }
.shp-bx .shp-cube { --s: var(--bs); position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s); transform-style: preserve-3d; animation: shp-spin var(--sp, 16s) linear infinite var(--sd, 0s) var(--dir, normal); }
.shp-bs { position: absolute; left: calc(var(--bs) * -.7); top: calc(var(--bs) * .75); width: calc(var(--bs) * 1.4); height: calc(var(--bs) * .26); border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.38), rgba(0,0,0,.18) 55%, transparent); }
.shp-bx.p1 { --l: 50%; --t: 44%; --bs: 13cqw; --sp: 18s; }
.shp-bx.p2 { --l: 23%; --t: 36%; --bs: 7cqw; --sp: 11s; --dir: reverse; --bd: -1.3s; --bb: 3.4s; --sd: -3s; }
.shp-bx.p3 { --l: 78%; --t: 30%; --bs: 8cqw; --sp: 13s; --bd: -2.2s; --bb: 4.6s; --sd: -6s; }
.shp-bx.p4 { --l: 34%; --t: 66%; --bs: 6cqw; --sp: 10s; --dir: reverse; --bd: -.6s; --bb: 3.8s; --sd: -2s; }
.shp-bx.p5 { --l: 68%; --t: 63%; --bs: 6.5cqw; --sp: 12s; --bd: -3s; --bb: 4.2s; --sd: -8s; }
.shp-cube i { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; font-style: normal; background: linear-gradient(140deg, #f7cf98, #dc9a55 70%, #c9843f); border: 1px solid rgba(124,45,18,.3); box-shadow: inset 0 0 20px rgba(124,45,18,.28); }
.shp-cube i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 43%; width: 14%; background: rgba(255,255,255,.45); }
.shp-cube i::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.5) 50%, transparent 58%); transform: translateX(-70%); animation: shp-shine 4s ease-in-out infinite; }
.shp-cube i em { position: relative; z-index: 1; padding: 2px 4px; border-radius: 3px; background: #fff; color: var(--red); font: 800 clamp(7px, 1.9cqw, 10px) Poppins, sans-serif; font-style: normal; box-shadow: 0 2px 4px rgba(124,45,18,.3); }
.shp-cube i s { position: absolute; z-index: 1; left: 22%; right: 22%; bottom: 14%; height: 12%; background: repeating-linear-gradient(90deg, #3b2210 0 2px, transparent 2px 4px, #3b2210 4px 5px, transparent 5px 8px); opacity: .7; }
.shp-cube .f1 { transform: translateZ(calc(var(--s) / 2)); } .shp-cube .f2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); } .shp-cube .f3 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.shp-cube .f4 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); } .shp-cube .f5 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background: linear-gradient(135deg, #fadcb2, #e5ab68); } .shp-cube .f6 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.shp-cube .f5::before { left: 0; right: 0; top: 43%; bottom: auto; width: auto; height: 14%; }
@keyframes shp-spin { from { transform: rotateX(-16deg) rotateY(0deg); } to { transform: rotateX(-16deg) rotateY(360deg); } }
@keyframes shp-bob { 50% { translate: 0 -10px; } }
@keyframes shp-shine { 0%, 55% { transform: translateX(-70%); } 85%, 100% { transform: translateX(70%); } }
.shp-shadow { position: absolute; left: calc(50% - 17cqw); top: 60%; width: 34cqw; height: 5cqw; border-radius: 50%; background: rgba(0,0,0,.4); filter: blur(6px); animation: shp-shad 4s ease-in-out infinite; }
@keyframes shp-shad { 50% { transform: scale(.8); opacity: .55; } }
.shp-kg { position: absolute; left: 28%; top: 50%; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; font: 800 11.5px Poppins, sans-serif; color: #7c2d12; background: #fff7e6; box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); animation: shp-kg 4s ease-in-out infinite; }
.shp-kg svg { width: 13px; height: 13px; color: #c2410c; }
@keyframes shp-kg { 50% { translate: 0 -6px; } }
/* live-tracking cards that take turns, like notifications */
.shp-tips { position: absolute; left: 0; top: -3%; width: min(54%, 236px); height: 52px; }
.shp-tip { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; color: #1f2937; background: rgba(255,255,255,.94); box-shadow: 0 16px 30px -14px rgba(0,0,0,.6); opacity: 0; transform: translateY(10px) scale(.96); animation: shp-tip 12s infinite; }
.shp-tip > i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #f97316, var(--red)); }
.shp-tip > i svg { width: 17px; height: 17px; } .shp-tip.t2 > i { background: linear-gradient(135deg, #38bdf8, #2563eb); } .shp-tip.t3 > i { background: linear-gradient(135deg, #4ade80, #16a34a); }
.shp-tip span { display: grid; min-width: 0; } .shp-tip b { font-size: 12.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shp-tip small { font-size: 11px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shp-tip.t2 { animation-delay: 4s; } .shp-tip.t3 { animation-delay: 8s; }
@keyframes shp-tip { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 4%, 29% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-8px) scale(.97); } }
.shp-hero.off *, .shp-hero.off { animation-play-state: paused !important; }

/* how it works */
.shp-steps { margin: 34px 0 6px; } .shp-steps h2, .shp-card h2 { margin: 0 0 14px; font-size: 21px; }
.shp-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; counter-reset: s; }
.shp-steps li { position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 18px 10px 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--card-b);
  opacity: 0; transform: translateY(24px) rotateX(18deg); transform-origin: 50% 100%; transition: opacity .6s calc(var(--i) * .08s), transform .7s cubic-bezier(.2,.9,.3,1.2) calc(var(--i) * .08s), box-shadow .3s; }
.shp-steps li.in { opacity: 1; transform: none; } .shp-steps li:hover { box-shadow: 0 18px 30px -22px var(--red); transform: translateY(-4px); }
.shp-steps li span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--card)); }
.shp-steps li span svg { width: 24px; height: 24px; }
.shp-steps li em { position: absolute; top: 10px; right: 12px; font: 800 13px Poppins, sans-serif; font-style: normal; color: color-mix(in srgb, var(--red) 45%, var(--ink-soft)); }
.shp-steps li b { font-size: 14px; } .shp-steps li small { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }

/* the layout below */
.shp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; margin-top: 22px; align-items: start; }
.shp-main { display: grid; gap: 18px; min-width: 0; } .shp-side { display: grid; gap: 14px; position: sticky; top: 90px; }
.shp-card { padding: 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--card-b); box-shadow: 0 18px 40px -34px rgba(0,0,0,.45); opacity: 0; transform: translateY(18px); transition: opacity .55s, transform .6s cubic-bezier(.2,.9,.3,1.1); }
.shp-card.in { opacity: 1; transform: none; }
.shp-card h3 { margin: 0 0 10px; font-size: 16px; }
.shp-ah { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; } .shp-ah > span { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--red) 80%, #ff8a3d), var(--red)); }
.shp-ah h2 { margin: 0; font-size: 19px; } .shp-ah p { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }
.shp-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }

/* the warehouse address */
.shp-mark { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 14px 16px; margin-bottom: 12px; border-radius: 16px; color: inherit; text-decoration: none;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--red) 6%, var(--card)) 0 12px, color-mix(in srgb, var(--red) 10%, var(--card)) 12px 24px); border: 2px dashed color-mix(in srgb, var(--red) 45%, var(--card-b)); }
.shp-mark small { grid-column: 1 / -1; font-size: 12px; color: var(--ink-soft); } .shp-mark b { font: 800 22px Poppins, sans-serif; letter-spacing: .04em; color: var(--red); word-break: break-all; }
.shp-mark.login b { font-size: 17px; } .shp-mark.login svg { color: var(--red); }
.shp-al { display: grid; gap: 2px; } .shp-ar { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--card-b); font-size: 14px; }
.shp-ar span { color: var(--ink-soft); font-size: 13px; } .shp-ar b { font-weight: 600; word-break: break-word; }
.shp-cp { display: inline-flex; align-items: center; gap: 6px; width: 34px; height: 34px; justify-content: center; border-radius: 10px; border: 1px solid var(--card-b); background: var(--card); color: var(--ink); cursor: pointer; transition: background .2s, color .2s; }
.shp-cp svg { width: 16px; height: 16px; } .shp-cp.ok, .shp-cpall.ok { color: #16a34a; border-color: #16a34a; }
.shp-cp.big { width: auto; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 800; color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--card-b)); }
.shp-cpall { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--card-b); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.shp-off, .shp-login { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .shp-off > svg, .shp-login > svg { width: 30px; height: 30px; color: var(--red); }
.shp-off b, .shp-login b { display: block; font-size: 15px; } .shp-off small, .shp-login small { display: block; font-size: 13px; color: var(--ink-soft); } .shp-login > div { flex: 1; min-width: 180px; }

/* rates and the calculator */
.shp-rh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; } .shp-rh h2 { display: flex; align-items: center; gap: 8px; margin: 0; } .shp-rh h2 svg { color: var(--red); }
.shp-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, var(--card)); }
.shp-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 11px; border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.shp-seg button.on { background: var(--card); color: var(--red); box-shadow: 0 6px 14px -8px rgba(0,0,0,.35); } .shp-seg svg { width: 17px; height: 17px; }
.shp-seg.sm { display: flex; } .shp-seg.sm button { flex: 1; justify-content: center; padding: 9px 10px; }
.shp-rmeta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .shp-rmeta span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 10px; font-size: 13px; color: var(--ink-soft); background: color-mix(in srgb, var(--ink) 4%, var(--card)); }
.shp-rmeta b { color: var(--ink); } .shp-rmeta svg { width: 16px; height: 16px; color: var(--red); }
.shp-rt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.shp-rr { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--card-b); font-size: 14px; }
.shp-rr span { color: var(--ink-soft); } .shp-rr b { white-space: nowrap; } .shp-rr small { font-weight: 500; color: var(--ink-soft); margin-left: 2px; }
.shp-calc { margin-top: 16px; padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--red) 5%, var(--card)); border: 1px solid color-mix(in srgb, var(--red) 18%, var(--card-b)); }
.shp-cg, .shp-fg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shp-cg label, .shp-fg label { display: grid; gap: 5px; font-size: 13px; font-weight: 700; color: var(--ink); } .shp-fg label small { font-weight: 500; color: var(--ink-soft); }
.shp-cg .wide, .shp-fg .wide { grid-column: 1 / -1; }
.shp input, .shp select { width: 100%; box-sizing: border-box; min-width: 0; padding: 11px 12px; border-radius: 12px; border: 1.5px solid var(--card-b); background: var(--card); color: var(--ink); font: inherit; font-size: 14.5px; outline: none; transition: border-color .2s, box-shadow .2s; }
.shp input:focus, .shp select:focus { border-color: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 12%, transparent); }
.shp-dim { display: flex; align-items: center; gap: 4px; } .shp-dim input { text-align: center; padding: 11px 6px; } .shp-dim i { font-style: normal; color: var(--ink-soft); }
.shp-cr { margin-top: 12px; } .shp-est { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--card-b); }
.shp-est span { font-weight: 700; } .shp-est small { display: block; font-weight: 500; font-size: 12px; color: var(--ink-soft); } .shp-est b { font: 800 22px Poppins, sans-serif; color: var(--red); white-space: nowrap; }

/* the request form */
.shp-rows { padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 3%, var(--card)); border: 1px solid var(--card-b); margin-bottom: 14px; }
.shp-rhd, .shp-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 74px minmax(0, 1.2fr) 34px; gap: 6px; align-items: center; }
.shp-rhd { margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--ink-soft); } .shp-row { margin-bottom: 6px; } .shp-row input { padding: 10px; font-size: 14px; } .shp-row input[type=number] { text-align: center; }
.shp-rx { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--ink-soft); cursor: pointer; } .shp-rx:hover { color: var(--red); } .shp-rx svg { width: 16px; height: 16px; }
.shp-radd { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; border: 1.5px dashed color-mix(in srgb, var(--red) 45%, var(--card-b)); background: transparent; color: var(--red); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; } .shp-radd svg { width: 16px; height: 16px; }
.shp-sub { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-size: 15px; } .shp-sub svg { color: var(--red); }
.shp-err { min-height: 18px; margin: 10px 0 0; color: var(--red); font-size: 13px; font-weight: 600; }
.shp-free { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: #16a34a; font-weight: 600; text-align: center; } .shp-free svg { width: 16px; height: 16px; }
.shp-done { text-align: center; } .shp-ok { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; background: #16a34a; animation: shp-pop .6s cubic-bezier(.34,1.56,.64,1); } .shp-ok svg { width: 32px; height: 32px; stroke-width: 2.6; }
@keyframes shp-pop { from { transform: scale(.3); opacity: 0; } }
.shp-done h2 { margin: 12px 0 6px; } .shp-done p { margin: 0 0 14px; color: var(--ink-soft); } .shp-done p b { color: var(--red); font-family: Poppins, sans-serif; }
.shp-dact { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .shp-done .shp-go2 { color: var(--ink); background: var(--card); border: 1.5px solid var(--card-b); }

/* my shipments */
.shp-mh { display: flex; align-items: center; gap: 8px; } .shp-mh svg { color: var(--red); } .shp-mh small { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.shp-o { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--card-b); color: inherit; text-decoration: none; }
.shp-oi { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: var(--red); background: color-mix(in srgb, var(--red) 9%, var(--card)); }
.shp-o b { display: block; font-size: 14.5px; } .shp-o small { display: block; font-size: 12.5px; color: var(--ink-soft); margin: 2px 0 6px; }
.shp-ob { display: block; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 8%, var(--card)); overflow: hidden; } .shp-ob i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #f59e0b, var(--red)); }
.shp-or { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; white-space: nowrap; } .shp-or svg { color: var(--red); width: 18px; height: 18px; }

/* the side */
.shp-help p { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); } .shp-hbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.shp-hb { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--card-b); background: var(--card); color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.shp-hb:hover { transform: translateY(-3px); } .shp-hb svg { width: 36px; height: 36px; padding: 8px; border-radius: 11px; color: #fff; box-sizing: border-box; } .shp-hb b { font-size: 12.5px; }
.shp-hb.chat svg { background: var(--red); } .shp-hb.wa svg { background: #16a34a; } .shp-hb.call svg { background: #2563eb; }
.shp-faq details { border-top: 1px solid var(--card-b); padding: 10px 0; } .shp-faq summary { cursor: pointer; font-weight: 700; font-size: 14px; list-style: none; display: flex; justify-content: space-between; gap: 8px; }
.shp-faq summary::-webkit-details-marker { display: none; } .shp-faq summary::after { content: "+"; color: var(--red); font-weight: 800; } .shp-faq details[open] summary::after { content: "−"; }
.shp-faq p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.shp-safe { display: flex; gap: 12px; align-items: center; } .shp-safe > svg { width: 34px; height: 34px; color: #16a34a; } .shp-safe b { display: block; } .shp-safe small { font-size: 12.5px; color: var(--ink-soft); }

/* tablets */
@media (max-width: 1024px) {
  .shp-grid { grid-template-columns: minmax(0, 1fr); } .shp-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .shp-safe { grid-column: 1 / -1; }
  .shp-steps ol { gap: 8px; } .shp-steps li { padding: 14px 6px 12px; } .shp-steps li span { width: 42px; height: 42px; border-radius: 13px; } .shp-steps li b { font-size: 13px; } .shp-steps li small { font-size: 11px; }
  .shp-hero { gap: 10px; padding: 30px 26px; } .shp-hl h1 { font-size: 30px; }
}
@media (max-width: 700px) { .shp-hero { grid-template-columns: minmax(0, 1fr); padding: 26px 22px 14px; } .shp-stage { max-width: 380px; margin: 0 auto; } }
/* phones */
@media (max-width: 600px) {
  .shp-hero { border-radius: 24px; padding: 22px 16px 12px; } .shp-hl p { font-size: 14px; } .shp-cta a { flex: 1; padding: 12px 10px; font-size: 13.5px; }
  .shp-ticks { display: none; } .shp-hl h1 { margin: 12px 0 8px; } .shp-hl p { font-size: 13.5px; line-height: 1.55; margin-bottom: 14px; }
  .shp-stage { max-width: 300px; margin: 16px auto 0; } .shp-tips { height: 44px; } .shp-tip { padding: 6px 10px; gap: 8px; border-radius: 12px; } .shp-tip > i { width: 28px; height: 28px; border-radius: 9px; } .shp-tip b { font-size: 11.5px; } .shp-tip small { font-size: 10px; }
  .shp-tag { font-size: 10.5px; padding: 3px 8px; } .shp-kg { font-size: 10.5px; padding: 3px 7px; }
  .shp-steps { margin-top: 22px; } .shp-steps h2 { font-size: 18px; margin-bottom: 10px; }
  .shp-steps ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .shp-steps li { padding: 10px 4px 9px; gap: 5px; border-radius: 16px; } .shp-steps li span { width: 34px; height: 34px; border-radius: 11px; } .shp-steps li span svg { width: 18px; height: 18px; }
  .shp-steps li b { font-size: 11.5px; line-height: 1.3; } .shp-steps li small { display: none; } .shp-steps li em { top: 6px; right: 8px; font-size: 11px; }
  .shp-card { padding: 16px; border-radius: 20px; } .shp-side { grid-template-columns: minmax(0, 1fr); }
  .shp-rt { grid-template-columns: minmax(0, 1fr); } .shp-ar { grid-template-columns: minmax(0, 1fr) auto; } .shp-ar span { grid-column: 1 / -1; }
  .shp-rhd { display: none; } .shp-row { grid-template-columns: minmax(0, 1fr) 64px 30px; } .shp-row input[data-r$=":track"] { grid-column: 1 / 3; grid-row: 2; } .shp-row .shp-rx, .shp-row > i { grid-row: 1; grid-column: 3; }
  .shp-row { padding-bottom: 8px; border-bottom: 1px dashed var(--card-b); }
  .shp-mark b { font-size: 19px; } .shp-est b { font-size: 19px; }
}
@media (max-width: 380px) { .shp-cg, .shp-fg { grid-template-columns: minmax(0, 1fr); } .shp-cg .wide, .shp-fg .wide { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .shp :not(.shp-hero, .shp-hero *) { animation: none !important; } .shp-steps li, .shp-card { opacity: 1; transform: none; transition: none; } }
.shp .shp-route { width: 100%; height: 100%; stroke-width: 0; } /* the route drawing fills the stage (the page icon size is for small icons) */
/* the form's fields line up: "(optional)" sits beside the label, district and address share one row */
.shp-fg label { align-content: start; } .shp-fg label small { display: inline; margin-left: 4px; }
.shp-fg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .shp-fg .addr { grid-column: 1 / -1; } }
.shp-sub { margin-top: 20px; }
.shp-fg label { display: block; } .shp-fg label > input, .shp-fg label > select, .shp-fg label > .shp-seg { display: flex; margin-top: 5px; } .shp-fg label > input, .shp-fg label > select { display: block; }
.shp-f .shp-sub { margin: 26px 0 12px !important; padding-top: 16px; border-top: 1px dashed var(--card-b); }
/* the shipping mark (set once), the request form's sea part and the goods type */
.shp-mk-set { display: grid; gap: 8px; }
.shp-mk-in { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.shp-mk-in > span { display: grid; place-items: center; padding: 0 12px; border-radius: 12px; font: 800 18px Poppins, sans-serif; color: var(--red); background: #fff; border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); }
.shp-mk-in input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); font: 800 18px Poppins, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--red); background: #fff; }
.shp-mk-in .shp-go { padding: 10px 16px; }
.shp-mk-e { color: #dc2626; font-weight: 700; } .shp-mk-e:empty { display: none; }
.shp-mk-n { grid-column: 1 / -1; opacity: .75; }
.shp-need { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 700; color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa; } .shp-need svg { width: 18px; height: 18px; flex: none; }
.shp-f em { font-style: normal; color: var(--red); }
.shp-rate { display: block; margin-top: 5px; font-size: 12px; opacity: .7; }
.shp-seabox { margin: 14px 0 4px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, #0ea5e9 7%, transparent); border: 1px solid color-mix(in srgb, #0ea5e9 28%, transparent); }
.shp-seabox h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; color: #0369a1; } .shp-seabox h3 svg { width: 18px; height: 18px; }
.shp-dim { display: flex !important; align-items: center; gap: 4px; } .shp-dim input { flex: 1; min-width: 0; text-align: center; } .shp-dim i { font-style: normal; opacity: .6; }
.shp-cbm { display: block; margin-top: 5px; font-size: 12px; color: #0369a1; font-weight: 700; }
.shp-pkb { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 5px; padding: 11px 12px; border-radius: 12px; border: 1.5px dashed #0ea5e9; background: #fff; color: #0369a1; font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.shp-pkb svg { width: 18px; height: 18px; flex: none; }
.shp-mark.shp-mk-set { grid-template-columns: minmax(0, 1fr); }
.shp-fg label > input, .shp-fg label > select { width: 100%; box-sizing: border-box; }
@media (max-width: 600px) { .shp-cta a { flex: 1 1 auto; white-space: nowrap; padding: 12px 12px; font-size: 13px; gap: 6px; } .shp-cta a svg { width: 16px; height: 16px; } .shp-free { display: flex; justify-content: center; gap: 6px; text-align: center; } }
@media (max-width: 380px) { .shp-fg { grid-template-columns: minmax(0, 1fr); } .shp-fg > label { grid-column: auto !important; } }
/* the warehouse card: label and storage; the parcel finder; extras; delivery choice; my shipments; the change sheet */
.shp-cpw { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; } .shp-cpall.lbl { color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.shp-store { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; background: color-mix(in srgb, #f59e0b 10%, transparent); color: var(--ink); } .shp-store svg { width: 17px; height: 17px; color: #d97706; flex: none; }
.shp-find { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--card-b); display: grid; gap: 8px; } .shp-find b { display: flex; align-items: center; gap: 8px; font-size: 14px; } .shp-find b svg { width: 18px; height: 18px; color: var(--red); }
.shp-find div { display: flex; gap: 8px; } .shp-find input { flex: 1; min-width: 0; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--card-b); background: var(--card); color: var(--ink); font: inherit; } .shp-find .shp-go { padding: 10px 16px; }
.shp-fr { margin: 0; font-size: 13px; font-weight: 700; } .shp-fr:empty { display: none; } .shp-fr.ok { color: #16a34a; } .shp-fr.wait { color: #b45309; } .shp-fr.no { color: #dc2626; }
.shp-xs { margin: 16px 0 4px; padding: 14px; border-radius: 16px; border: 1px solid var(--card-b); background: color-mix(in srgb, var(--red) 3%, transparent); }
.shp-xs h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; } .shp-xs h3 svg { width: 18px; height: 18px; color: var(--red); } .shp-xs h3 small { font-weight: 500; font-size: 12px; opacity: .7; }
.shp-x { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px dashed var(--card-b); font-size: 13.5px; cursor: pointer; } .shp-x:first-of-type { border-top: 0; }
.shp-x input { width: 18px; height: 18px; accent-color: var(--red); } .shp-x em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--red); white-space: nowrap; }
.shp-xv { display: block; margin-top: 8px; font-size: 13px; font-weight: 600; } .shp-xv input { display: block; width: 100%; box-sizing: border-box; margin-top: 5px; }
.shp-dlv { display: flex; margin-bottom: 10px; } .shp-dlv button { flex: 1; }
.shp-oact { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 0 6px 56px; font-size: 12.5px; color: var(--ink-soft); } .shp-oact span { display: inline-flex; align-items: center; gap: 6px; } .shp-oact svg { width: 15px; height: 15px; color: var(--red); }
.shp-oact button { padding: 6px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); background: transparent; color: var(--red); font: inherit; font-weight: 800; font-size: 12.5px; cursor: pointer; }
html.shp-lock, html.shp-lock body { overflow: hidden; }
.shp-sheet { position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; padding: 16px; background: rgba(15,23,42,.55); backdrop-filter: blur(4px); }
.shp-sbox { width: min(560px, 100%); max-height: min(86vh, 760px); overflow: auto; padding: 18px; border-radius: 22px; background: var(--card, #fff); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }
.shp-sh2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .shp-sh2 b { font-size: 17px; } .shp-sh2 button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 0; background: color-mix(in srgb, var(--ink) 8%, transparent); color: inherit; cursor: pointer; } .shp-sh2 svg { width: 18px; height: 18px; }
.shp-sit { display: grid; gap: 6px; } .shp-si { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--card-b); }
.shp-si span { min-width: 0; } .shp-si b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shp-si small { font-size: 12px; color: var(--ink-soft); word-break: break-all; }
.shp-si em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 12px; font-weight: 800; color: #16a34a; white-space: nowrap; } .shp-si em svg { width: 14px; height: 14px; }
.shp-si button { padding: 6px 12px; border-radius: 9px; border: 1px solid var(--card-b); background: transparent; color: #dc2626; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.shp-si.gone { opacity: .5; } .shp-si.gone b { text-decoration: line-through; } .shp-si.gone button { color: #16a34a; } .shp-si.ok { background: color-mix(in srgb, #16a34a 6%, transparent); }
.shp-sbox h4 { margin: 16px 0 8px; font-size: 14px; }
.shp-sa { display: grid; grid-template-columns: minmax(0, 1.4fr) 64px minmax(0, 1.2fr); gap: 6px; margin-bottom: 6px; } .shp-sa input { min-width: 0; padding: 10px; border-radius: 10px; border: 1px solid var(--card-b); background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px; }
.shp-sbtn { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; } .shp-sbtn .shp-go2.cx { color: #dc2626; background: transparent; border: 1px solid #fecaca; }
@media (max-width: 480px) { .shp-sa { grid-template-columns: minmax(0, 1fr) 60px; } .shp-sa input[data-sa$=":track"] { grid-column: 1 / -1; } .shp-sbtn > * { flex: 1; } .shp-oact { margin-left: 0; } .shp-sheet { align-items: end; padding: 0; } .shp-sbox { border-radius: 22px 22px 0 0; max-height: 90vh; } }
.shp-store { column-gap: 14px; row-gap: 2px; } .shp-store span { white-space: nowrap; }
/* "other" goods: the customer must write what it is */
.shp-ownl { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 700; } .shp-ownl em { font-style: normal; color: var(--red); }
.shp-own { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; } .shp-own.need { border-color: color-mix(in srgb, var(--red) 70%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 12%, transparent); }
.shp-bad { color: var(--red) !important; font-weight: 700; }
/* phones: a short banner (the scene sits small at the top right, beside the headline) and the six steps on one line */
@media (max-width: 600px) {
  .shp-hero { display: block; padding: 18px 16px 16px; }
  .shp-kick { font-size: 11px; padding: 5px 10px; max-width: 58%; }
  .shp-hl h1 { font-size: 21px; line-height: 1.25; margin: 10px 0 8px; max-width: 60%; }
  .shp-hl p { font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
  .shp-hr { position: absolute; top: 6px; right: -4px; width: 44%; pointer-events: none; }
  .shp-stage { max-width: none; margin: 0; }
  .shp-tips, .shp-kg, .shp-tag, .shp-spk { display: none; }
  .shp-steps ol { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .shp-steps li { padding: 8px 2px 7px; gap: 4px; border-radius: 12px; }
  .shp-steps li span { width: 28px; height: 28px; border-radius: 9px; } .shp-steps li span svg { width: 15px; height: 15px; }
  .shp-steps li b { font-size: 9.5px; line-height: 1.25; font-weight: 700; } .shp-steps li em { top: 3px; right: 5px; font-size: 9px; }
}
.shp-cg label { align-self: start; align-content: start; }
@media (max-width: 600px) { .shp-kick { max-width: none; white-space: nowrap; font-size: 10.5px; } .shp-hr { top: 40px; } }
/* "how it works" on phones: a timeline like the sourcing page — coloured icon tiles on a gradient line, a number badge,
   one short word under each (the full titles stay on bigger screens) */
.shp-steps .sh { display: none; }
@media (max-width: 600px) {
  .shp-steps ol { position: relative; gap: 2px; padding: 4px 0 2px; }
  .shp-steps ol::before { content: ""; position: absolute; left: 8%; right: 8%; top: 24px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--red), #ff8a3d, #7c3aed, #2563eb, #0ea5e9, #16a34a); opacity: .4; }
  .shp-steps li { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; gap: 6px !important; }
  .shp-steps li:hover { transform: none; }
  .shp-steps li span { position: relative; width: 42px !important; height: 42px !important; border-radius: 14px !important; color: #fff !important; background: linear-gradient(145deg, var(--a), var(--b)) !important; box-shadow: 0 10px 18px -10px var(--b); }
  .shp-steps li span svg { width: 20px !important; height: 20px !important; }
  .shp-steps li:nth-child(1) { --a: #ff6b5b; --b: var(--red); } .shp-steps li:nth-child(2) { --a: #ffa23d; --b: #ea580c; } .shp-steps li:nth-child(3) { --a: #a855f7; --b: #7c3aed; }
  .shp-steps li:nth-child(4) { --a: #60a5fa; --b: #2563eb; } .shp-steps li:nth-child(5) { --a: #38bdf8; --b: #0284c7; } .shp-steps li:nth-child(6) { --a: #4ade80; --b: #16a34a; }
  .shp-steps li em { top: -5px !important; right: auto !important; left: calc(50% + 13px); width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--card) !important; font-size: 9.5px !important; box-shadow: 0 0 0 2px var(--bg, #fff); }
  .shp-steps li b, .shp-steps li small { display: none !important; }
  .shp-steps .sh { display: block; font-style: normal; font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; color: var(--ink); overflow-wrap: anywhere; }
}
/* the supplier label: reads as a download, not a camera */
.shp-cpw { align-items: stretch; } .shp-cpw .shp-cpall { margin-top: 10px; }
.shp-lbl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 12px; border-radius: 12px; border: 0; cursor: pointer; text-align: left; font: inherit;
  color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--red) 82%, #ff8a3d), var(--red)); box-shadow: 0 12px 22px -14px var(--red); transition: transform .2s; }
.shp-lbl:hover { transform: translateY(-2px); } .shp-lbl:active { transform: scale(.98); }
.shp-lbl > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.2); }
.shp-lbl > i svg { width: 18px; height: 18px; } .shp-lbl > svg { width: 20px; height: 20px; }
.shp-lbl span { display: grid; min-width: 0; } .shp-lbl b { font-size: 13.5px; } .shp-lbl small { font-size: 11px; opacity: .88; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* smooth on phones: the light sweeps only the box's front face (six faces × five boxes were 30 sweeps a frame) */
.shp-cube i:not(.f1)::after { animation: none; display: none; }