/* SK Delivery & Takeaway – frontend */
:root { --sk-dt-bg:#111; --sk-dt-fg:#fff; --sk-dt-accent:#e23744; --sk-dt-bar-h:0px; }

/* ---------- Visibility by method ---------- */
body.sk-dt-method-takeaway .sk-dt-hide-takeaway,
body.sk-dt-method-delivery .sk-dt-hide-delivery { display:none !important; }
.sk-dt-req, .sk-dt-opt { display:none; }
body.sk-dt-method-takeaway .sk-dt-req-takeaway,
body.sk-dt-method-delivery .sk-dt-req-delivery,
body.sk-dt-method-takeaway .sk-dt-opt-takeaway,
body.sk-dt-method-delivery .sk-dt-opt-delivery { display:inline; }

/* ---------- Top bar ---------- */
#sk-dt-bar { display:none; }
#sk-dt-bar.is-mounted { display:block; }
.sk-dt-bar {
	width:100%; box-sizing:border-box;
	background:var(--sk-dt-bg); color:var(--sk-dt-fg);
	font-size:14px; line-height:1.2; font-family:inherit;
	padding:8px 12px; position:relative; z-index:99990;
}
.sk-dt-bar--sticky { position:fixed; left:0; right:0; top:0; z-index:100000; padding-top:calc(8px + env(safe-area-inset-top, 0px)); box-shadow:0 2px 8px rgba(0,0,0,.18); }
.sk-dt-bar__inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:14px; }
.sk-dt-bar__text { opacity:.85; white-space:nowrap; }
body.sk-dt-busy .sk-dt-seg { opacity:.7; pointer-events:none; }

/* ---------- Segmented control ---------- */
.sk-dt-seg { display:inline-flex; padding:3px; gap:3px; border-radius:999px; background:rgba(255,255,255,.14); }
.sk-dt-seg .sk-dt-seg__btn {
	-webkit-appearance:none; appearance:none; border:0; margin:0; cursor:pointer;
	display:inline-flex; align-items:center; gap:6px;
	min-height:36px; padding:6px 16px; border-radius:999px;
	background:transparent; color:inherit; font:inherit; font-weight:600; font-size:14px; line-height:1;
	text-transform:none; letter-spacing:normal; box-shadow:none; white-space:nowrap;
	transition:background .2s, color .2s;
}
.sk-dt-seg .sk-dt-seg__btn:hover { background:rgba(255,255,255,.12); }
.sk-dt-seg .sk-dt-seg__btn.is-active { background:var(--sk-dt-accent); color:#fff; }
.sk-dt-seg .sk-dt-seg__btn:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.sk-dt-seg svg { flex:0 0 auto; }

/* Checkout variant (light background) */
.sk-dt-checkout-switch { margin:0 0 24px; padding:16px; border:1px solid rgba(0,0,0,.1); border-radius:10px; background:rgba(0,0,0,.02); clear:both; }
.sk-dt-checkout-switch__title { margin:0 0 10px !important; font-weight:600; }
.sk-dt-seg--checkout { background:rgba(0,0,0,.06); color:#222; width:100%; max-width:420px; }
.sk-dt-seg--checkout .sk-dt-seg__btn { flex:1 1 50%; justify-content:center; min-height:44px; font-size:15px; }
.sk-dt-seg--checkout .sk-dt-seg__btn:hover { background:rgba(0,0,0,.06); }
.sk-dt-seg--checkout .sk-dt-seg__btn.is-active { background:var(--sk-dt-accent); color:#fff; }

@media (max-width:640px) {
	.sk-dt-bar { padding:6px 8px; }
	.sk-dt-bar--sticky { padding-top:calc(6px + env(safe-area-inset-top, 0px)); }
	.sk-dt-bar__text { display:none; }
	.sk-dt-bar .sk-dt-seg { width:100%; max-width:360px; }
	.sk-dt-bar .sk-dt-seg__btn { flex:1 1 50%; justify-content:center; min-height:34px; padding:6px 10px; font-size:13px; }
}

/* ---------- Checkout location ---------- */
.sk-dt-transport, .sk-dt-loc { clear:both; }
.sk-dt-transport-other { display:none; }
.sk-dt-loc__help { display:block; font-size:.9em; opacity:.75; margin:2px 0 8px; }
.sk-dt-loc__buttons { display:flex; flex-wrap:wrap; gap:8px; }
.sk-dt-loc__btn { display:inline-flex !important; align-items:center; gap:6px; }
.sk-dt-loc__btn--alt { background:transparent !important; color:inherit !important; border:1px solid currentColor !important; }
.sk-dt-loc__status { display:block; margin-top:8px; font-size:.9em; }
.sk-dt-loc__status.is-ok { color:#1a7f37; }
.sk-dt-loc__status.is-error { color:#b42318; }
.sk-dt-loc__status.is-busy { color:#555; }
.sk-dt-loc__map { height:240px; border-radius:8px; margin:0 0 16px; overflow:hidden; z-index:0; }
.sk-dt-loc.has-location #sk-dt-loc-btn span::after { content:" again"; }

/* ---------- Map pins ---------- */
.sk-dt-pin { background:none; border:0; }
.sk-dt-pin span { display:flex; align-items:center; justify-content:center; width:30px; height:30px; font-size:22px; line-height:1; filter:drop-shadow(0 2px 2px rgba(0,0,0,.35)); }

/* ---------- Tracking ---------- */
.sk-dt-track-wrap { margin:0 0 32px; }
.sk-dt-track { border:1px solid rgba(0,0,0,.1); border-radius:12px; padding:20px; background:#fff; color:#222; }
.sk-dt-flash .sk-dt-track { animation:sk-dt-flash 1.4s ease; }
@keyframes sk-dt-flash { 0% { box-shadow:0 0 0 3px var(--sk-dt-accent); } 100% { box-shadow:0 0 0 0 transparent; } }
.sk-dt-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:rgba(0,0,0,.06); font-size:13px; font-weight:600; }
.sk-dt-track__title { margin:10px 0 4px !important; font-size:1.4em; line-height:1.25; }
.sk-dt-track__sub { margin:0 0 6px !important; opacity:.8; }
.sk-dt-track__live { margin:0 !important; font-size:12px; opacity:.65; display:flex; align-items:center; gap:6px; }
.sk-dt-dot-live { width:8px; height:8px; border-radius:50%; background:#1a7f37; animation:sk-dt-pulse 1.6s infinite; }
@keyframes sk-dt-pulse { 0% { box-shadow:0 0 0 0 rgba(26,127,55,.5); } 70% { box-shadow:0 0 0 8px rgba(26,127,55,0); } 100% { box-shadow:0 0 0 0 rgba(26,127,55,0); } }
.sk-dt-track.is-cancelled .sk-dt-track__title { color:#b42318; }

.sk-dt-steps { list-style:none; margin:20px 0 !important; padding:0 !important; }
.sk-dt-step { position:relative; display:flex; gap:12px; padding:0 0 18px; margin:0 !important; }
.sk-dt-step:last-child { padding-bottom:0; }
.sk-dt-step::before { content:""; position:absolute; left:8px; top:20px; bottom:0; width:2px; background:#ddd; }
.sk-dt-step:last-child::before { display:none; }
.sk-dt-step.is-done::before { background:var(--sk-dt-accent); }
.sk-dt-step__dot { flex:0 0 18px; width:18px; height:18px; border-radius:50%; border:2px solid #ccc; background:#fff; box-sizing:border-box; margin-top:1px; position:relative; z-index:1; }
.sk-dt-step.is-done .sk-dt-step__dot { background:var(--sk-dt-accent); border-color:var(--sk-dt-accent); }
.sk-dt-step.is-done .sk-dt-step__dot::after { content:""; position:absolute; left:4px; top:1px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.sk-dt-step.is-current .sk-dt-step__dot { border-color:var(--sk-dt-accent); box-shadow:0 0 0 4px rgba(226,55,68,.18); animation:sk-dt-ring 1.6s infinite; }
@keyframes sk-dt-ring { 50% { box-shadow:0 0 0 7px rgba(226,55,68,.08); } }
.sk-dt-step__body { display:flex; flex-direction:column; }
.sk-dt-step__title { font-weight:600; }
.sk-dt-step.is-todo .sk-dt-step__title { opacity:.45; font-weight:500; }
.sk-dt-step__time { font-size:12px; opacity:.6; }

.sk-dt-track__card { border-top:1px solid rgba(0,0,0,.08); padding-top:16px; margin-top:4px; }
.sk-dt-track__card h3 { font-size:1em; margin:0 0 6px !important; text-transform:uppercase; letter-spacing:.04em; opacity:.6; }
.sk-dt-track__card p { margin:0 0 8px !important; }
.sk-dt-muted { opacity:.65; font-size:.92em; }
.sk-dt-map--track { height:240px; border-radius:10px; overflow:hidden; margin:10px 0; z-index:0; }
.sk-dt-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.sk-dt-btn { background:var(--sk-dt-accent) !important; color:#fff !important; border-color:var(--sk-dt-accent) !important; }
.sk-dt-btn--ghost { background:transparent !important; color:var(--sk-dt-accent) !important; border:1px solid var(--sk-dt-accent) !important; }

@media (max-width:640px) {
	.sk-dt-track { padding:16px; }
	.sk-dt-map--track, .sk-dt-loc__map { height:200px; }
	.sk-dt-actions .button { flex:1 1 auto; text-align:center; }
}