:root {
  --primary: #1687e8;
  --primary-dark: #086bc7;
  --primary-soft: #e9f5ff;
  --bg: #f4f9ff;
  --surface: #ffffff;
  --surface-blue: #eaf6ff;
  --text: #14263a;
  --muted: #718399;
  --line: #dceafa;
  --success: #24b56d;
  --danger: #ef4f61;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --shadow: 0 16px 45px rgba(32, 100, 160, .11);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100%; color: var(--text); background: var(--bg); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button { margin: 0; appearance: none; -webkit-appearance: none; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .55; }
.app-shell { width: min(720px, 100%); min-height: 100vh; margin: 0 auto; background: radial-gradient(circle at 88% 0, #e1f3ff 0, transparent 29%), var(--bg); }
.service-screen[hidden] { display: none; }
.service-screen { width: min(720px, 100%); min-height: 100svh; margin: 0 auto; padding: 24px 18px calc(28px + var(--safe-bottom)); display: grid; place-items: center; background: radial-gradient(circle at 84% 5%, #dff2ff 0, transparent 31%), var(--bg); }
.service-panel { width: min(520px, 100%); padding: 34px 28px 30px; border: 1px solid #d6e8f6; border-radius: 30px; background: rgba(255,255,255,.96); box-shadow: 0 22px 58px rgba(32,100,160,.13); text-align: center; }
.service-brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 30px; color: var(--primary-dark); }
.service-brand span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #42b9ff, #0877dc); font-size: 17px; font-weight: 950; box-shadow: 0 7px 16px rgba(22,135,232,.24); }
.service-brand strong { font-size: 17px; font-weight: 950; letter-spacing: -.035em; }
.service-icon { width: 80px; height: 80px; margin: 0 auto 21px; display: grid; place-items: center; border-radius: 25px; color: var(--primary); background: var(--surface-blue); font-size: 38px; box-shadow: inset 0 0 0 1px #d7ecfb; }
.service-kicker { color: var(--primary); font-size: 10px; font-weight: 950; letter-spacing: .13em; }
.service-panel h1 { margin: 9px auto 12px; max-width: 410px; font-size: clamp(27px, 7vw, 40px); line-height: 1.06; letter-spacing: -.045em; }
.service-panel > p { max-width: 430px; margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.65; }
.service-status { width: fit-content; margin: 22px auto 0; padding: 9px 13px; display: flex; align-items: center; gap: 8px; border-radius: 999px; color: #237650; background: #edf9f3; font-size: 11px; font-weight: 900; }
.service-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(36,181,109,.13); }
.service-panel > small { display: block; margin-top: 17px; color: #8a99a9; font-size: 10px; line-height: 1.5; }
.service-screen[data-mode="blocked"] .service-icon { color: var(--danger); background: #fff0f2; box-shadow: inset 0 0 0 1px #ffd8de; }
.service-screen[data-mode="blocked"] .service-kicker { color: var(--danger); }
.service-screen[data-mode="blocked"] .service-status { color: #b82e40; background: #fff0f2; }
.service-screen[data-mode="blocked"] .service-status i { background: var(--danger); box-shadow: 0 0 0 4px rgba(239,79,97,.12); }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; gap: 10px; min-height: 67px; padding: 10px 16px; background: rgba(244,249,255,.91); border-bottom: 1px solid rgba(220,234,250,.72); backdrop-filter: blur(18px); }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #42b9ff, #0877dc); font-size: 21px; font-weight: 950; box-shadow: 0 8px 20px rgba(22,135,232,.25); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.08; }
.brand-copy span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.brand-copy strong { margin-top: 3px; font-size: 15px; }
.avatar { margin-left: auto; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: var(--primary-dark); background: var(--surface-blue) center/cover no-repeat; box-shadow: 0 5px 16px rgba(32,100,160,.14); font-weight: 900; line-height: 1; }
.avatar.with-photo { color: transparent; }
.delivery-speed-banner { margin: 12px 14px 0; padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #cae8da; border-radius: 15px; color: #416554; background: linear-gradient(135deg, #f8fffb, #edf9f3); box-shadow: 0 7px 19px rgba(37,130,87,.06); }
.delivery-speed-banner > div { min-width: 0; display: flex; align-items: center; gap: 8px; }
.delivery-speed-banner i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(36,181,109,.12); }
.delivery-speed-banner span { overflow: hidden; font-size: 10px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.delivery-speed-banner strong { flex: 0 0 auto; color: #148151; font-size: 11px; font-weight: 950; }
.page { display: none; padding: 13px 14px calc(92px + var(--safe-bottom)); animation: pageIn .2s ease; }
.page.active { display: block; }
@keyframes pageIn { from { opacity: .45; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (max-width: 390px) {
  .service-screen { padding-left: 13px; padding-right: 13px; }
  .service-panel { padding: 29px 20px 26px; border-radius: 25px; }
  .delivery-speed-banner { margin-left: 12px; margin-right: 12px; }
  .delivery-speed-banner span { font-size: 9px; }
}
.hero-card { position: relative; min-height: 205px; overflow: hidden; padding: 25px 21px; border-radius: 28px; color: #fff; background: linear-gradient(135deg, #168fe9, #0869c7); box-shadow: 0 18px 38px rgba(22,135,232,.24); }
.hero-card::before { content: ""; position: absolute; inset: -60% auto auto 49%; width: 250px; height: 250px; border: 42px solid rgba(255,255,255,.08); border-radius: 50%; }
.hero-card > div:first-child { position: relative; z-index: 2; }
.eyebrow, .section-kicker { font-size: 10px; letter-spacing: .13em; font-weight: 900; }
.hero-card h1 { margin: 10px 0 8px; font-size: clamp(28px, 8vw, 39px); line-height: .98; letter-spacing: -.04em; }
.hero-card p { margin: 0; max-width: 270px; color: rgba(255,255,255,.84); font-size: 13px; line-height: 1.45; }
.hero-plant { position: absolute; right: 12px; bottom: 8px; width: 128px; height: 180px; }
.stem { position: absolute; left: 61px; top: 45px; width: 8px; height: 91px; border-radius: 8px; background: #d8f7ff; transform: rotate(-2deg); }
.leaf { position: absolute; width: 62px; height: 35px; background: #fff; border-radius: 70% 10% 70% 10%; opacity: .92; }
.leaf-one { left: 15px; top: 52px; transform: rotate(25deg); }
.leaf-two { right: 3px; top: 27px; transform: scaleX(-1) rotate(24deg); }
.pot { position: absolute; left: 30px; bottom: 6px; width: 80px; height: 59px; border-radius: 12px 12px 28px 28px; background: rgba(255,255,255,.96); box-shadow: inset 0 -11px 0 #d8f1ff; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 25px 2px 13px; gap: 12px; }
.section-kicker { color: var(--primary); }
.section-heading h2, .maintenance-card h2, .checkout-modal h2 { margin: 4px 0 0; font-size: 22px; letter-spacing: -.025em; }
.product-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.category-row { display: flex; gap: 8px; overflow-x: auto; padding: 1px 1px 12px; scrollbar-width: none; }
.category-row::-webkit-scrollbar { display: none; }
.category-chip { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 9px 14px; white-space: nowrap; font-size: 12px; font-weight: 800; }
.category-chip.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.products-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.product-card { min-width: 0; height: 100%; display: flex; flex-direction: column; border: 1px solid rgba(220,234,250,.95); background: var(--surface); border-radius: 22px; padding: 10px; box-shadow: 0 9px 25px rgba(32,100,160,.075); cursor: pointer; transition: box-shadow .16s ease, border-color .16s ease; }
.product-card:active { border-color: #bddff8; box-shadow: 0 5px 16px rgba(32,100,160,.09); }
.product-card.sold-out { opacity: .58; cursor: default; }
.product-image-wrap { position: relative; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; background: var(--surface-blue); }
.product-image-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.stock-tag { position: absolute; top: 8px; left: 8px; padding: 5px 7px; border-radius: 999px; background: rgba(255,255,255,.93); color: var(--primary-dark); font-size: 9px; font-weight: 900; box-shadow: 0 4px 10px rgba(0,0,0,.07); }
.product-card h3 { margin: 10px 2px 4px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card .category { color: var(--muted); font-size: 10px; margin: 0 2px; }
.product-bottom { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: auto; padding-top: 10px; }
.product-price { font-size: 14px; font-weight: 900; }
.add-button { position: relative; flex: 0 0 33px; width: 33px; height: 33px; padding: 0; border: 0; border-radius: 11px; background: var(--primary); color: transparent; font-size: 0; line-height: 0; box-shadow: 0 6px 14px rgba(22,135,232,.22); }
.add-button::before, .add-button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; border-radius: 999px; background: #fff; transform: translate(-50%, -50%); }
.add-button::after { transform: translate(-50%, -50%) rotate(90deg); }
.add-button:active { transform: scale(.94); }
.bottom-nav { position: fixed; z-index: 30; left: 50%; bottom: 0; transform: translateX(-50%); width: min(720px, 100%); display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 8px calc(8px + var(--safe-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); backdrop-filter: blur(20px); }
.nav-item { position: relative; border: 0; background: transparent; color: #92a0b0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font-size: 10px; font-weight: 800; }
.nav-icon { height: 23px; font-size: 20px; line-height: 22px; }
.nav-item.active { color: var(--primary); }
.cart-badge { display: none; position: absolute; top: 1px; right: calc(50% - 24px); min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid #fff; border-radius: 999px; background: #ff5263; color: #fff; font-size: 9px; line-height: 13px; }
.cart-badge.visible { display: block; }
.modal-backdrop { position: fixed; z-index: 80; inset: 0; display: flex; align-items: end; justify-content: center; background: rgba(9,31,54,.48); backdrop-filter: blur(4px); }
.modal-backdrop[hidden] { display: none; }
.product-modal, .checkout-modal { position: relative; width: min(720px, 100%); max-height: 94vh; max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 18px 18px calc(24px + var(--safe-bottom)); border-radius: 30px 30px 0 0; background: #fff; animation: modalIn .25s ease; }
@keyframes modalIn { from { transform: translateY(100%); } to { transform: none; } }
.close-button { position: absolute; z-index: 2; top: 27px; right: 27px; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); color: transparent; font-size: 0; line-height: 0; box-shadow: 0 5px 18px rgba(0,0,0,.12); }
.close-button::before, .close-button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.5px; border-radius: 999px; background: var(--text); transform: translate(-50%, -50%) rotate(45deg); }
.close-button::after { transform: translate(-50%, -50%) rotate(-45deg); }
.product-modal > img { width: 100%; aspect-ratio: 4/3; display: block; border-radius: 22px; object-fit: contain; object-position: center; background: var(--surface-blue); }
.modal-category { display: inline-block; margin-top: 16px; color: var(--primary); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.product-modal h3 { margin: 5px 0 6px; font-size: 26px; letter-spacing: -.03em; }
.product-modal > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.modal-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
.modal-meta > div { padding: 13px; border-radius: 16px; background: var(--bg); }
.modal-meta small { display: block; color: var(--muted); font-size: 10px; margin-bottom: 3px; }
.modal-meta strong { font-size: 15px; }
.quantity-label { display: flex; justify-content: space-between; align-items: center; margin: 3px 2px 8px; font-size: 12px; font-weight: 800; }
.quantity-label small { color: var(--muted); font-weight: 600; }
.quantity-control { display: grid; grid-template-columns: 54px 1fr 54px; align-items: center; gap: 8px; padding: 7px; border-radius: 18px; background: var(--bg); }
.quantity-control button { position: relative; height: 44px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 13px; background: #fff; color: transparent; font-size: 0; line-height: 0; box-shadow: 0 4px 12px rgba(22,87,145,.08); }
.quantity-control strong { text-align: center; font-size: 18px; }
.primary-button { width: 100%; margin-top: 13px; min-height: 52px; border: 0; border-radius: 17px; background: linear-gradient(135deg, #35adff, #0877dc); color: #fff; font-weight: 900; box-shadow: 0 10px 22px rgba(22,135,232,.24); }
.maintenance-card { margin-top: 52px; padding: 32px 24px; text-align: center; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.maintenance-icon { width: 78px; height: 78px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 24px; background: var(--surface-blue); color: var(--primary); font-size: 32px; font-weight: 900; }
.maintenance-card p { color: var(--muted); line-height: 1.55; font-size: 13px; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 9px 13px; border-radius: 999px; background: #eef9f3; color: #168b54; font-size: 11px; font-weight: 900; }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(36,181,109,.12); }
.cart-heading, .orders-heading { margin-top: 6px; }
.text-button, .icon-text-button { border: 0; background: transparent; color: #ed4f62; font-size: 12px; font-weight: 800; }
.icon-text-button { color: var(--primary); }
.empty-cart { padding: 55px 22px; text-align: center; border: 1px dashed #cbdff2; border-radius: 24px; background: rgba(255,255,255,.65); }
.empty-cart.full-grid { grid-column: 1/-1; }
.empty-cart-icon { font-size: 42px; color: var(--primary); }
.empty-cart h3 { margin: 13px 0 5px; }
.empty-cart p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.secondary-button { border: 0; padding: 12px 17px; border-radius: 14px; background: var(--surface-blue); color: var(--primary-dark); font-weight: 900; }
.cart-list { display: flex; flex-direction: column; gap: 10px; }
.cart-item { display: grid; grid-template-columns: 78px minmax(0,1fr); gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.cart-item img { width: 78px; height: 78px; border-radius: 15px; object-fit: cover; background: var(--surface-blue); }
.cart-item-main { min-width: 0; }
.cart-item-main h3 { margin: 1px 0 5px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-main > strong { color: var(--primary-dark); font-size: 13px; }
.cart-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.mini-quantity { display: flex; align-items: center; gap: 8px; }
.mini-quantity button { position: relative; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 9px; background: var(--surface-blue); color: transparent; font-size: 0; line-height: 0; }
.quantity-control button::before, .mini-quantity button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; border-radius: 999px; background: var(--primary); transform: translate(-50%, -50%); }
#plusQuantity::after, .mini-quantity button[data-action="plus"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; border-radius: 999px; background: var(--primary); transform: translate(-50%, -50%) rotate(90deg); }
.mini-quantity button::before, .mini-quantity button[data-action="plus"]::after { width: 9px; height: 1.5px; }
.mini-quantity span { min-width: 20px; text-align: center; font-size: 12px; font-weight: 900; }
.remove-item { border: 0; background: transparent; color: #e65363; font-size: 11px; font-weight: 800; }
.cart-summary { margin-top: 14px; padding: 18px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.summary-row { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; }
.summary-row.total { margin-top: 9px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text); font-size: 17px; font-weight: 900; }
.maximum-order-note { margin-top: 11px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #d8e9f6; border-radius: 13px; color: #60758a; background: #f7fbff; font-size: 10px; font-weight: 800; }
.maximum-order-note strong { color: var(--primary-dark); font-size: 11px; }
.checkout-hint { display: flex; align-items: center; gap: 7px; margin-top: 14px; color: #358162; font-size: 11px; font-weight: 750; }
.checkout-hint span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: var(--success); }
.checkout-modal { padding-top: 12px; }
.modal-handle { width: 45px; height: 5px; margin: 0 auto 16px; border-radius: 99px; background: #d8e5f2; }
.checkout-close { top: 20px; }
.stepper { display: flex; align-items: flex-start; justify-content: center; margin: 4px 38px 25px; }
.stepper > i { flex: 1; height: 2px; margin-top: 15px; background: #d9e8f5; }
.step { min-width: 48px; display: flex; flex-direction: column; align-items: center; gap: 5px; color: #9caaba; font-size: 9px; font-weight: 800; }
.step b { width: 31px; height: 31px; display: grid; place-items: center; border: 2px solid #d9e8f5; border-radius: 50%; background: #fff; }
.step.active, .step.done { color: var(--primary); }
.step.active b { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 6px var(--primary-soft); }
.step.done b { color: var(--primary); border-color: #95d2ff; background: var(--surface-blue); }
.checkout-subtitle { margin: 7px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.search-box { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; padding: 6px; border: 1.5px solid #cfe5f8; border-radius: 18px; background: var(--bg); transition: border .2s, box-shadow .2s; }
.search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(22,135,232,.1); }
.search-icon { display: grid; place-items: center; color: var(--primary); font-size: 25px; transform: rotate(-20deg); }
.search-box input { min-width: 0; height: 43px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 14px; }
.search-box button { height: 42px; padding: 0 15px; border: 0; border-radius: 13px; color: #fff; background: var(--primary); font-size: 12px; font-weight: 900; }
.reservation-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 13px; padding: 12px; border: 1px solid #cfe7fa; border-radius: 16px; background: rgba(233,245,255,.72); }
.reservation-note > span { font-size: 19px; }
.reservation-note p { margin: 0; color: #52718e; font-size: 11px; line-height: 1.45; }
.search-status { min-height: 37px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 2px 9px; color: var(--muted); text-align: center; font-size: 11px; }
.spinner, .button-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #c9e5fa; border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; }
.button-spinner { width: 15px; height: 15px; margin-right: 7px; border-color: rgba(255,255,255,.4); border-top-color: #fff; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.roblox-results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; max-height: 42vh; overflow-y: auto; padding: 2px 1px 8px; }
.roblox-user-card { min-width: 0; padding: 8px 6px 9px; border: 2px solid transparent; border-radius: 18px; background: var(--bg); color: var(--text); text-align: center; transition: .15s ease; }
.roblox-user-card.selected { border-color: var(--primary); background: var(--surface-blue); box-shadow: 0 0 0 3px rgba(22,135,232,.1); }
.roblox-avatar-wrap { position: relative; width: 64px; height: 64px; margin: 0 auto 7px; display: grid; place-items: center; overflow: visible; border-radius: 50%; background: #dbefff; color: var(--primary); font-size: 22px; font-weight: 900; }
.roblox-avatar-wrap img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.roblox-avatar-wrap i { display: none; position: absolute; right: -2px; bottom: -2px; width: 21px; height: 21px; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: var(--primary); font-size: 10px; font-style: normal; }
.roblox-user-card.selected .roblox-avatar-wrap i { display: grid; }
.roblox-user-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.roblox-user-card small { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 9px; }
.selected-profile-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 11px 13px; border: 1px solid #bfe1fb; border-radius: 16px; background: var(--surface-blue); }
.selected-check { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-weight: 900; }
.selected-profile-bar div { min-width: 0; display: flex; flex-direction: column; }
.selected-profile-bar small { color: var(--muted); font-size: 9px; }
.selected-profile-bar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.selected-profile-bar em { color: var(--primary); font-style: normal; font-weight: 700; }
.payment-next-button { position: sticky; bottom: 0; z-index: 3; }
.orders-loading { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 180px; color: var(--muted); font-size: 12px; }
.orders-list { display: flex; flex-direction: column; gap: 16px; }
.order-card { overflow: hidden; border: 1px solid var(--line); border-radius: 25px; background: #fff; box-shadow: var(--shadow); }
.order-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 16px 16px 12px; }
.order-topline > div { display: flex; flex-direction: column; }
.order-number { color: var(--primary); font-size: 10px; font-weight: 950; letter-spacing: .08em; }
.order-topline small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.order-status { padding: 7px 9px; border-radius: 999px; font-size: 9px; font-weight: 900; white-space: nowrap; }
.order-status.waiting { color: #976400; background: #fff5d9; }
.order-status.expired { color: #a84752; background: #ffedf0; }
.order-profile { display: flex; align-items: center; gap: 11px; margin: 0 16px 12px; padding: 11px; border-radius: 17px; background: var(--bg); }
.order-avatar { flex: 0 0 53px; width: 53px; height: 53px; display: grid; place-items: center; overflow: hidden; border: 3px solid #fff; border-radius: 50%; color: var(--primary); background: #dcefff; box-shadow: 0 5px 14px rgba(32,100,160,.12); font-weight: 900; }
.order-avatar img { width: 100%; height: 100%; object-fit: cover; }
.order-profile > div:last-child { min-width: 0; display: flex; flex-direction: column; }
.order-profile small { color: var(--muted); font-size: 9px; }
.order-profile strong { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.order-profile span { color: var(--primary); font-size: 10px; }
.order-items { margin: 0 16px 14px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 16px; }
.order-line { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; color: var(--muted); font-size: 10px; }
.order-line strong { color: var(--text); white-space: nowrap; }
.payment-panel { padding: 17px 16px 15px; background: linear-gradient(180deg,#edf7ff,#fafdff); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.payment-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.payment-header > div:first-child { display: flex; flex-direction: column; }
.exact-amount { margin-top: 4px; color: var(--primary-dark); font-size: clamp(27px,8vw,36px); letter-spacing: -.035em; }
.timer-wrap { position: relative; flex: 0 0 82px; width: 82px; height: 82px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 7px 20px rgba(22,135,232,.13); }
.timer-svg { position: absolute; inset: -11px; width: 104px; height: 104px; transform: rotate(-90deg); }
.timer-track, .timer-progress { fill: none; stroke-width: 8; }
.timer-track { stroke: #fff; }
.timer-progress { stroke: var(--primary); stroke-linecap: round; transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 2px 3px rgba(22,135,232,.24)); }
.timer-text { position: relative; color: var(--primary-dark); font-size: 16px; font-weight: 950; font-variant-numeric: tabular-nums; }
.timer-text.ended { color: var(--danger); }
.copy-wide-button { width: 100%; margin-top: 13px; padding: 12px; border: 1px solid #b8ddf8; border-radius: 14px; color: var(--primary-dark); background: #fff; font-size: 11px; font-weight: 900; }
.requisites-card { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; margin-top: 12px; padding: 14px; border: 1px solid #cfe4f6; border-radius: 17px; background: rgba(255,255,255,.78); }
.requisites-card > div { display: flex; flex-direction: column; }
.requisites-card small { color: var(--muted); font-size: 9px; }
.requisites-card strong { margin-top: 2px; font-size: 14px; }
.round-copy { grid-row: 1/3; grid-column: 2; align-self: center; width: 39px; height: 39px; border: 0; border-radius: 12px; color: var(--primary); background: var(--surface-blue); font-weight: 900; }
.payment-warning { margin-top: 12px; padding: 13px; border: 1px solid rgba(239,79,97,.58); border-radius: 16px; color: #a92d3b; background: rgba(239,79,97,.09); }
.payment-warning b { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .04em; }
.payment-warning span { display: block; font-size: 10px; line-height: 1.48; font-weight: 650; }
.reservation-active { display: flex; align-items: center; gap: 7px; margin-top: 11px; color: #397258; font-size: 10px; font-weight: 800; }
.reservation-active i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(36,181,109,.12); }
.expired-message { display: flex; flex-direction: column; margin: 0 16px 14px; padding: 14px; border: 1px solid #f5c9cf; border-radius: 16px; color: #a33946; background: #fff3f5; }
.expired-message b { font-size: 12px; }
.expired-message span { margin-top: 4px; font-size: 10px; line-height: 1.45; }
.support-card { padding: 15px 16px 16px; }
.support-card > div:first-child { display: flex; flex-direction: column; }
.support-card small { color: var(--muted); font-size: 9px; }
.support-card strong { margin-top: 2px; color: var(--primary-dark); font-size: 14px; }
.support-card p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.support-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.support-actions button { min-height: 40px; border: 1px solid #c9e2f5; border-radius: 13px; color: var(--primary-dark); background: var(--surface-blue); font-size: 10px; font-weight: 900; }
.support-actions .support-open { color: #fff; border-color: var(--primary); background: var(--primary); }
.toast { position: fixed; z-index: 120; left: 50%; bottom: calc(91px + var(--safe-bottom)); transform: translate(-50%,20px); max-width: calc(100% - 34px); padding: 11px 15px; border-radius: 13px; background: #10243a; color: #fff; font-size: 12px; text-align: center; opacity: 0; pointer-events: none; transition: .2s ease; box-shadow: 0 10px 28px rgba(0,0,0,.2); }
.toast.visible { opacity: 1; transform: translate(-50%,0); }
@media (min-width: 600px) {
  .products-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .roblox-results { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .page { padding-left: 22px; padding-right: 22px; }
}

/* v2: orders, profile, settings and code-drawn icons */
.topbar { gap: 8px; }
.brand-mark { flex: 0 0 40px; width: 40px; height: 40px; }
.brand-copy { min-width: 0; flex: 1 1 auto; }
.brand-copy span, .brand-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.top-tool { height: 34px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid #d4e7f7; border-radius: 11px; color: var(--primary-dark); background: rgba(255,255,255,.86); font-size: 9px; font-weight: 900; box-shadow: 0 4px 12px rgba(32,100,160,.06); }
.top-tool svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.currency-tool b { font-size: 15px; line-height: 1; }
.avatar { margin-left: 0; flex: 0 0 38px; }
.nav-icon { display: grid; place-items: center; }
.nav-icon svg, .icon-text-button svg, .search-icon svg, .cart-code-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-text-button { display: inline-flex; align-items: center; gap: 6px; }
.icon-text-button svg { width: 15px; height: 15px; }
.search-icon { transform: none; }
.search-icon svg { width: 21px; height: 21px; }
.code-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.copy-wide-button, .support-actions button, .history-footer button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.round-copy { display: grid; place-items: center; }
.round-copy .code-icon { width: 19px; height: 19px; vertical-align: 0; }

.bundle-card { border-color: #bee1fb; background: linear-gradient(180deg,#fff,#f8fcff); }
.bundle-label { position: absolute; right: 8px; bottom: 8px; padding: 5px 7px; border-radius: 999px; color: #fff; background: linear-gradient(135deg,#1687e8,#7d56e8); font-size: 8px; font-weight: 950; letter-spacing: .08em; }
.product-contents { display: flex; flex-wrap: wrap; gap: 4px; min-height: 35px; margin: 7px 2px 0; }
.product-contents span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 6px; border-radius: 7px; color: #3b6e97; background: #edf7ff; font-size: 8px; font-weight: 800; }
.bundle-contents { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; padding: 13px; border: 1px solid #cde5f8; border-radius: 16px; background: #f1f9ff; }
.bundle-contents b { flex-basis: 100%; color: var(--primary-dark); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.bundle-contents span { padding: 6px 8px; border-radius: 9px; color: #356989; background: #fff; font-size: 10px; font-weight: 800; }
.cart-bundle-note { display: block; margin: 2px 0 4px; color: var(--muted); font-size: 9px; line-height: 1.3; }

.minimum-order { margin: 12px 0; padding: 11px 12px; border: 1px solid #f0d39c; border-radius: 14px; background: #fff9ed; }
.minimum-order.reached { border-color: #bfe5d0; background: #f0fbf5; }
.minimum-order > div:first-child { display: flex; justify-content: space-between; gap: 10px; color: #8a631a; font-size: 9px; font-weight: 800; }
.minimum-order.reached > div:first-child { color: #26724c; }
.minimum-progress { height: 6px; overflow: hidden; margin-top: 8px; border-radius: 999px; background: rgba(138,99,26,.12); }
.minimum-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ffc75a,#f0a51a); transition: width .2s ease; }
.minimum-order.reached .minimum-progress i { background: linear-gradient(90deg,#4bd08a,#1fa866); }
.primary-button:disabled { box-shadow: none; }

.orders-subheading { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 9px; color: var(--primary); font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.orders-subheading b { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; color: #fff; background: var(--primary); font-size: 10px; }
.active-orders-block { display: flex; flex-direction: column; gap: 14px; }
.no-active-order { display: flex; gap: 11px; align-items: center; margin-bottom: 15px; padding: 14px; border: 1px solid #cce8db; border-radius: 18px; background: #f1fbf6; }
.no-active-order i { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(36,181,109,.12); }
.no-active-order div { display: flex; flex-direction: column; }
.no-active-order b { font-size: 11px; }
.no-active-order span { margin-top: 2px; color: #57816b; font-size: 9px; }
.order-status-actions { align-items: flex-end !important; gap: 6px; }
.cancel-order-button { padding: 6px 8px; border: 1px solid rgba(239,79,97,.35); border-radius: 10px; color: #bd3545; background: rgba(239,79,97,.07); font-size: 8px; font-weight: 900; white-space: nowrap; }
.order-status.review { color: #8055ad; background: #f3eaff; }
.order-status.paid { color: #13784b; background: #e8f9f0; }
.order-status.delivering { color: #176cae; background: #e8f5ff; }
.order-status.completed { color: #13784b; background: #e8f9f0; }
.order-status.cancelled { color: #845864; background: #f5edf0; }
.order-status.failed { color: #a84752; background: #ffedf0; }
.order-status.refunded { color: #75559d; background: #f3edfb; }
.order-status.unknown { color: #637181; background: #eef1f4; }
.processing-panel { display: flex; align-items: center; gap: 12px; margin: 0 16px 4px; padding: 15px; border: 1px solid #cbe5f8; border-radius: 17px; background: #eef8ff; }
.processing-panel div { display: flex; flex-direction: column; }
.processing-panel b { color: var(--primary-dark); font-size: 12px; }
.processing-panel small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }

.history-stack { position: relative; margin-top: 17px; padding: 0; border: 1px solid var(--line); border-radius: 23px; background: #fff; box-shadow: 0 10px 28px rgba(32,100,160,.08); }
.history-stack::before, .history-stack::after { content: ""; position: absolute; z-index: -1; left: 13px; right: 13px; height: 12px; border: 1px solid var(--line); border-radius: 0 0 18px 18px; background: #fff; }
.history-stack::before { bottom: -7px; opacity: .72; }
.history-stack::after { left: 24px; right: 24px; bottom: -13px; opacity: .45; }
.history-stack summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px; cursor: pointer; }
.history-stack summary::-webkit-details-marker { display: none; }
.history-stack summary > div { display: flex; align-items: center; gap: 10px; }
.history-stack summary > div > div { display: flex; flex-direction: column; }
.history-stack summary b { font-size: 12px; }
.history-stack summary small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.history-stack-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--primary); background: var(--surface-blue); font-size: 20px; font-weight: 900; }
.history-count { min-width: 27px; height: 27px; display: grid; place-items: center; border-radius: 999px; color: var(--primary-dark); background: var(--surface-blue); font-size: 10px; font-weight: 900; }
.history-list { display: flex; flex-direction: column; gap: 10px; padding: 0 11px 12px; border-top: 1px solid var(--line); }
.history-order-card { padding: 12px; border: 1px solid var(--line); border-radius: 17px; background: #fbfdff; }
.history-order-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.history-order-head > div { display: flex; flex-direction: column; }
.history-order-head > div > span { color: var(--primary); font-size: 9px; font-weight: 950; }
.history-order-head small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.history-profile { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.history-avatar { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: var(--primary); background: var(--surface-blue); font-size: 12px; font-weight: 900; }
.history-avatar img { width: 100%; height: 100%; object-fit: cover; }
.history-profile > div:last-child { min-width: 0; display: flex; flex-direction: column; }
.history-profile b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.history-profile span { color: var(--primary); font-size: 8px; }
.history-items { margin: 9px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 9px; }
.history-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 9px; border-top: 1px dashed #d8e7f4; }
.history-footer strong { font-size: 12px; }
.history-footer button { min-height: 34px; padding: 0 11px; border: 1px solid #bfe0f8; border-radius: 11px; color: var(--primary-dark); background: var(--surface-blue); font-size: 9px; font-weight: 900; }

.sheet-modal { position: relative; width: min(720px, 100%); max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 25px 18px calc(24px + var(--safe-bottom)); border-radius: 30px 30px 0 0; background: #fff; animation: modalIn .25s ease; }
.compact-sheet { min-height: 300px; }
.sheet-modal .close-button { top: 18px; right: 18px; }
.sheet-modal h2 { margin: 5px 0 18px; font-size: 24px; }
.selection-list { display: flex; flex-direction: column; gap: 9px; }
.selection-option { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 12px; border: 2px solid var(--line); border-radius: 17px; color: var(--text); background: #fff; text-align: left; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.selection-option.selected { border-color: var(--primary); background: var(--surface-blue); }
.selection-option:active { transform: scale(.99); }
.option-symbol { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--primary); font-size: 13px; font-weight: 950; }
.selection-option div { display: flex; flex-direction: column; }
.selection-option b { font-size: 12px; }
.selection-option small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.selection-option i { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-size: 10px; font-style: normal; opacity: 0; transform: scale(.75); transition: opacity .16s ease, transform .16s ease; }
.selection-option.selected i { opacity: 1; transform: scale(1); }
.settings-note { margin: 14px 2px 0; color: var(--muted); font-size: 10px; text-align: center; }

.profile-modal { min-height: min(700px, 92vh); }
.profile-hero { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; padding-right: 42px; }
.profile-large-avatar { flex: 0 0 66px; width: 66px; height: 66px; display: grid; place-items: center; border: 4px solid #fff; border-radius: 22px; color: var(--primary); background: var(--surface-blue) center/cover no-repeat; box-shadow: 0 9px 23px rgba(32,100,160,.14); font-size: 23px; font-weight: 950; }
.profile-large-avatar.with-photo { color: transparent; }
.profile-hero h2 { margin: 3px 0 2px; font-size: 22px; }
.profile-hero p { margin: 0; color: var(--muted); font-size: 10px; }
.profile-id-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid #cfe5f6; border-radius: 15px; background: #f2f9ff; }
.profile-id-card span { color: var(--muted); font-size: 9px; }
.profile-id-card strong { color: var(--primary-dark); font-size: 11px; letter-spacing: .07em; }
.profile-field { display: block; margin-top: 13px; }
.profile-field > span { display: block; margin: 0 2px 7px; color: var(--muted); font-size: 9px; font-weight: 800; }
.profile-field > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.profile-field input { min-width: 0; height: 45px; padding: 0 12px; border: 1px solid #cfe0ee; border-radius: 13px; outline: 0; color: var(--text); background: #fff; }
.profile-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22,135,232,.1); }
.profile-field button { padding: 0 13px; border: 0; border-radius: 13px; color: #fff; background: var(--primary); font-size: 10px; font-weight: 900; }
.profile-field small { display: block; margin: 5px 2px 0; color: var(--muted); font-size: 8px; }
.profile-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 15px; }
.profile-stats > div { min-height: 72px; display: flex; flex-direction: column; justify-content: center; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fbfdff; }
.profile-stats span { color: var(--muted); font-size: 8px; }
.profile-stats strong { margin-top: 5px; color: var(--primary-dark); font-size: 16px; }
.profile-details { margin-top: 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; }
.profile-details > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 13px; background: #fff; }
.profile-details > div + div { border-top: 1px solid var(--line); }
.profile-details span { color: var(--muted); font-size: 9px; }
.profile-details strong { max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; text-align: right; }
.profile-loading, .profile-error { grid-column: 1/-1; min-height: 100px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 10px; }
.profile-error { color: var(--danger); }

.notice-modal { width: min(420px, calc(100% - 28px)); margin: auto; padding: 22px; border-radius: 25px; background: #fff; text-align: center; box-shadow: 0 24px 70px rgba(4,29,52,.28); animation: noticeIn .2s ease; }
@keyframes noticeIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.notice-icon { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto 13px; border-radius: 18px; color: var(--primary); background: var(--surface-blue); font-size: 23px; font-weight: 950; }
.notice-modal h3 { margin: 0; font-size: 19px; }
.notice-modal p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.notice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
.notice-actions .primary-button, .notice-actions .secondary-button { min-height: 45px; margin: 0; border-radius: 14px; font-size: 10px; }
.danger-action { background: linear-gradient(135deg,#ff6a78,#d93649) !important; box-shadow: 0 10px 22px rgba(217,54,73,.2) !important; }

@media (max-width: 390px) {
  .topbar { padding-left: 10px; padding-right: 10px; }
  .brand-copy span { display: none; }
  .brand-copy strong { font-size: 12px; }
  .top-tool { padding: 0 6px; }
  .top-tool span { font-size: 8px; }
  .avatar { flex-basis: 35px; width: 35px; height: 35px; }
  .order-topline { flex-direction: column; }
  .order-status-actions { width: 100%; flex-direction: row !important; align-items: center !important; justify-content: space-between; }
}

/* v3: automatic payment confirmation and worker delivery */
.order-status.timeout { color: #9b4e13; background: #fff0df; }
.delivery-panel { margin: 0 16px 4px; padding: 16px; border: 1px solid #bce8cf; border-radius: 19px; background: linear-gradient(180deg,#effcf5,#fbfffd); }
.delivery-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.delivery-panel-head > div:first-child { min-width: 0; display: flex; flex-direction: column; }
.delivery-panel-head strong { color: #166a43; font-size: 15px; }
.delivery-panel-head small { max-width: 290px; margin-top: 5px; color: #5b7668; font-size: 9px; line-height: 1.45; }
.success-kicker { color: #1b9a61 !important; }
.delivery-timer-wrap {
  position: relative;
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  overflow: visible;
  border-radius: 50%;
  background: #dff7ea;
  box-shadow: inset 0 0 0 1px rgba(38,165,103,.08);
}

/* Убираем inherited inset:-11px у обычного синего таймера.
   Из-за него зелёный круг доставки смещался вверх и влево. */
.delivery-timer-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.delivery-track { stroke: rgba(255,255,255,.95); }
.delivery-progress { stroke: #25b96f; filter: drop-shadow(0 2px 4px rgba(37,185,111,.25)); }
.delivery-timer-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #147449;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}
.delivery-promise { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 12px; border-radius: 14px; background: #fff; box-shadow: 0 5px 14px rgba(27,115,75,.06); }
.delivery-promise > span { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #27b86e; font-size: 13px; font-weight: 950; }
.delivery-promise > div { display: flex; flex-direction: column; }
.delivery-promise b { color: #166a43; font-size: 10px; }
.delivery-promise small { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.post-payment-warning { margin-top: 12px; }
.completed-order { border-color: #b4e7ca; box-shadow: 0 13px 30px rgba(33,157,95,.11); }
.completed-panel { display: flex; align-items: center; gap: 14px; margin: 0 16px 4px; padding: 17px; border: 1px solid #ace2c4; border-radius: 19px; background: linear-gradient(145deg,#eafaf2,#fbfffd); }
.completed-check { flex: 0 0 70px; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#3bd587,#1ba964); box-shadow: 0 10px 24px rgba(27,169,100,.22); }
.completed-check svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.completed-copy { min-width: 0; display: flex; flex-direction: column; }
.completed-copy > span { color: #198453; font-size: 8px; font-weight: 950; letter-spacing: .12em; }
.completed-copy strong { margin-top: 4px; color: #125d3b; font-size: 15px; }
.completed-copy p { margin: 6px 0 0; color: #587166; font-size: 9px; line-height: 1.45; }
.timeout-panel { display: flex; align-items: flex-start; gap: 11px; margin: 0 16px 4px; padding: 14px; border: 1px solid #f1c89e; border-radius: 17px; background: #fff7ee; }
.timeout-symbol { flex: 0 0 35px; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: #e68b31; font-size: 17px; font-weight: 950; }
.timeout-panel > div:last-child { display: flex; flex-direction: column; }
.timeout-panel b { color: #8d4b12; font-size: 11px; }
.timeout-panel small { margin-top: 4px; color: #8a6a4e; font-size: 8px; line-height: 1.45; }

@media (max-width: 390px) {
  .delivery-panel-head { align-items: flex-start; }
  .delivery-timer-wrap { flex-basis: 78px; width: 78px; height: 78px; }
  .delivery-timer-svg { width: 100%; height: 100%; }
  .completed-panel { align-items: flex-start; }
  .completed-check { flex-basis: 58px; width: 58px; height: 58px; }
  .completed-check svg { width: 34px; height: 34px; }
}

/* v4: proxy search, bonuses, wallet, topups and admin-ready UI */
.active-order-dot { display: none; position: absolute; top: 4px; right: calc(50% - 24px); width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #ef4f61; box-shadow: 0 0 0 3px rgba(239,79,97,.12); }
.active-order-dot.visible { display: block; }
.top-product-label { position: absolute; right: 8px; top: 8px; z-index: 2; padding: 5px 8px; border-radius: 999px; color: #fff; background: linear-gradient(135deg,#ff8b25,#ef4f3f); box-shadow: 0 6px 14px rgba(225,91,35,.24); font-size: 8px; font-weight: 950; letter-spacing: .06em; }
.product-image-wrap .top-product-label + .bundle-label { bottom: 8px; top: auto; }

.checkout-payment-methods { margin-top: 13px; padding: 13px; border: 1px solid var(--line); border-radius: 18px; background: #f9fcff; }
.checkout-payment-methods > .section-kicker { display: block; margin: 0 2px 9px; }
.payment-method-option { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 8px; padding: 11px; border: 1.5px solid #d6e7f5; border-radius: 15px; color: var(--text); background: #fff; text-align: left; }
.payment-method-option.selected { border-color: var(--primary); background: var(--surface-blue); box-shadow: 0 0 0 3px rgba(22,135,232,.07); }
.payment-method-option.disabled { opacity: .52; }
.payment-method-option > div { min-width: 0; display: flex; flex-direction: column; }
.payment-method-option b { font-size: 11px; }
.payment-method-option small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.payment-method-option i { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: transparent; background: #eaf1f7; font-size: 9px; font-style: normal; }
.payment-method-option.selected i { color: #fff; background: var(--primary); }
.payment-method-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg,#ef4f61,#c92d43); font-weight: 950; }
.payment-method-icon.bonus { background: linear-gradient(145deg,#38b8ff,#0877dc); }
.payment-method-icon.stars { color: #fff8cf; background: linear-gradient(145deg,#ffd75a,#f3a712); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); font-size: 19px; }

.wallet-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.wallet-card { min-height: 135px; display: flex; flex-direction: column; padding: 17px; border-radius: 22px; color: #fff; box-shadow: var(--shadow); }
.wallet-card.cash { background: linear-gradient(145deg,#2197ec,#0867c4); }
.wallet-card.bonus { background: linear-gradient(145deg,#4ccda1,#159a67); }
.wallet-card small { color: rgba(255,255,255,.78); font-size: 9px; font-weight: 800; }
.wallet-card strong { margin-top: 8px; font-size: clamp(20px,6vw,29px); letter-spacing: -.035em; }
.wallet-card button { align-self: flex-start; margin-top: auto; padding: 8px 11px; border: 1px solid rgba(255,255,255,.35); border-radius: 11px; color: #fff; background: rgba(255,255,255,.15); font-size: 9px; font-weight: 900; }
.wallet-card > span { margin-top: auto; color: rgba(255,255,255,.82); font-size: 9px; font-weight: 850; }
.active-promo-banner { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; margin-top: 12px; padding: 13px 15px; border: 1px solid #bfdff8; border-radius: 17px; color: #175f97; background: #eaf6ff; }
.active-promo-copy { min-width: 0; display: flex; flex-direction: column; }
.active-promo-banner b { font-size: 11px; }
.active-promo-banner span { margin-top: 3px; font-size: 9px; line-height: 1.4; }
.cancel-promo-button { min-height: 38px; padding: 0 12px; border: 1px solid rgba(239,79,97,.3); border-radius: 12px; color: #b73546; background: rgba(255,255,255,.82); font-size: 9px; font-weight: 900; white-space: nowrap; }
.bonus-card { margin-top: 12px; padding: 17px; border: 1px solid var(--line); border-radius: 21px; background: #fff; box-shadow: 0 9px 25px rgba(32,100,160,.065); }
.bonus-card h3 { margin: 5px 0 5px; font-size: 17px; }
.bonus-card p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.promo-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 13px; }
.promo-form input, .referral-edit input { min-width: 0; height: 43px; padding: 0 12px; border: 1px solid #cfe2f1; border-radius: 13px; outline: 0; color: var(--text); background: var(--bg); text-transform: uppercase; }
.promo-form input:focus, .referral-edit input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22,135,232,.09); }
.promo-form button, .referral-edit button { border: 0; border-radius: 13px; padding: 0 13px; color: #fff; background: var(--primary); font-size: 9px; font-weight: 900; }
.referral-code-row { display: grid; grid-template-columns: 1fr 43px; gap: 8px; margin-top: 13px; }
.referral-code-row strong { min-width: 0; display: flex; align-items: center; padding: 0 13px; border: 1px dashed #9bcdef; border-radius: 13px; color: var(--primary-dark); background: #f0f9ff; letter-spacing: .08em; }
.referral-code-row button { display: grid; place-items: center; border: 0; border-radius: 13px; color: var(--primary); background: var(--surface-blue); }
.referral-edit { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }
.referral-linked { display: block; margin-top: 10px; color: #198454; font-size: 9px; font-weight: 850; }
.referral-card > small { display: block; margin-top: 9px; color: var(--muted); font-size: 8px; }
.loyalty-list { display: grid; gap: 7px; margin: 13px 0; }
.loyalty-list > div { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 13px; background: #f3f9ff; }
.loyalty-list b { color: #58728a; font-size: 9px; }
.loyalty-list strong { color: var(--primary); font-size: 14px; }

.profile-wallet { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; padding: 11px; border: 1px solid #cde5f7; border-radius: 17px; background: #f2f9ff; }
.profile-wallet > div { display: flex; flex-direction: column; padding: 5px 4px; }
.profile-wallet small { color: var(--muted); font-size: 8px; }
.profile-wallet strong { margin-top: 4px; color: var(--primary-dark); font-size: 15px; }
.profile-wallet button { grid-column: 1/-1; min-height: 42px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg,#35adff,#0877dc); font-size: 10px; font-weight: 900; }
.profile-topup-history { margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; }
.profile-section-title { display: flex; align-items: center; justify-content: space-between; padding: 12px 13px; background: #f5faff; }
.profile-section-title b { font-size: 11px; }
.profile-section-title span { color: var(--primary); font-size: 8px; font-weight: 900; }
.topup-history-row { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 11px 13px; background: #fff; }
.topup-history-row + .topup-history-row { border-top: 1px solid var(--line); }
.topup-history-row > div { min-width: 0; display: flex; flex-direction: column; }
.topup-history-row b { font-size: 11px; }
.topup-history-row small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.topup-status { padding: 5px 7px; border-radius: 999px; color: #667585; background: #edf1f5; font-size: 7px; font-weight: 900; white-space: nowrap; }
.topup-status.completed { color: #14744a; background: #e8f9f0; }
.topup-status.awaiting_payment { color: #936100; background: #fff4d5; }
.topup-status.cancelled, .topup-status.expired { color: #a14752; background: #ffedf0; }
.empty-topup-history { padding: 18px; color: var(--muted); text-align: center; font-size: 9px; background: #fff; }

.topup-modal h2 { margin: 4px 0 15px; }
.topup-create-card, .topup-payment-card { padding: 15px; border: 1px solid var(--line); border-radius: 19px; background: #fbfdff; }
.topup-create-card > p { margin: 0 0 14px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.topup-create-card label > span { display: block; margin: 0 2px 7px; color: var(--muted); font-size: 9px; font-weight: 800; }
.topup-create-card label > div { display: grid; grid-template-columns: 1fr 43px; overflow: hidden; border: 1.5px solid #cce1f1; border-radius: 15px; background: #fff; }
.topup-create-card input { min-width: 0; height: 51px; padding: 0 14px; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 20px; font-weight: 900; }
.topup-create-card label b { display: grid; place-items: center; color: var(--primary); background: var(--surface-blue); }
.quick-topups { display: flex; gap: 6px; overflow-x: auto; margin-top: 10px; padding-bottom: 3px; scrollbar-width: none; }
.quick-topups button { flex: 0 0 auto; padding: 8px 10px; border: 1px solid #c7e2f6; border-radius: 10px; color: var(--primary-dark); background: var(--surface-blue); font-size: 8px; font-weight: 900; }
.topup-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topup-title-row > div:first-child { display: flex; flex-direction: column; }
.topup-title-row small { color: var(--primary); font-size: 9px; font-weight: 900; }
.topup-title-row strong { margin-top: 4px; color: var(--primary-dark); font-size: 28px; }
.mini-timer { position: relative; flex: 0 0 78px; width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 7px 20px rgba(22,135,232,.12); }
.mini-timer svg { position: absolute; inset: -13px; width: 104px; height: 104px; transform: rotate(-90deg); }
.mini-timer span { position: relative; color: var(--primary-dark); font-size: 13px; font-weight: 950; font-variant-numeric: tabular-nums; }
.cancel-topup-button { width: 100%; min-height: 43px; margin-top: 12px; border: 1px solid rgba(239,79,97,.35); border-radius: 13px; color: #bc3445; background: rgba(239,79,97,.07); font-size: 9px; font-weight: 900; }

@media (max-width: 390px) {
  .wallet-grid { grid-template-columns: 1fr; }
  .wallet-card { min-height: 118px; }
  .promo-form, .referral-edit { grid-template-columns: 1fr; }
  .promo-form button, .referral-edit button { min-height: 41px; }
  .active-promo-banner { grid-template-columns: 1fr; }
  .cancel-promo-button { width: 100%; min-height: 41px; }
}


/* Footer and legal navigation */
.site-footer {
  position: relative;
  margin-top: 8px;
  padding: 30px 22px calc(106px + var(--safe-bottom));
  border-top: 1px solid #dbe5ee;
  background: linear-gradient(180deg, #f5f7fa 0%, #edf1f5 100%);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.45fr 1fr;
  gap: 26px;
  max-width: 650px;
  margin: 0 auto;
}
.footer-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.footer-brand-column { gap: 9px; }
.footer-logo {
  margin-bottom: 4px;
  color: var(--primary);
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -.045em;
  text-decoration: none;
}
.footer-heading {
  min-height: 25px;
  display: flex;
  align-items: center;
  color: #617286;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.footer-link {
  padding: 0;
  border: 0;
  color: #32465b;
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 760;
  line-height: 1.45;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color .16s ease, transform .16s ease;
}
.footer-link:hover,
.footer-link:focus-visible {
  color: var(--primary);
  transform: translateX(2px);
  outline: none;
}
.footer-disclaimer {
  max-width: 650px;
  margin: 26px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(132, 151, 171, .28);
  color: #8090a1;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 560px) {
  .site-footer { padding: 26px 18px calc(104px + var(--safe-bottom)); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .footer-brand-column { grid-row: span 2; }
}

@media (max-width: 390px) {
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .footer-brand-column { grid-row: auto; }
  .footer-heading { min-height: auto; }
  .footer-logo { font-size: 21px; }
}


/* LAVA / international payment */
.payment-method-icon.lava { width: 48px; font-size: 10px; letter-spacing: -.03em; background: linear-gradient(135deg,#ff6a00,#ff9b3f); color:#fff; }
.lava-payment-panel { border-color: rgba(255,111,0,.22); background: linear-gradient(180deg,#fffaf5,#fff); }
.lava-payment-panel .exact-amount { color:#e85d04; }
.lava-pay-button { margin-top:16px; background: linear-gradient(135deg,#ff6a00,#ff8f2f); box-shadow:0 12px 26px rgba(255,106,0,.22); }
.lava-pay-button:disabled { opacity:.55; cursor:not-allowed; }
.stars-payment-panel { border-color: rgba(243,167,18,.28); background: linear-gradient(180deg,#fffcf1,#fff); }
.stars-payment-panel .exact-amount { color:#e49a00; }
.stars-pay-button { margin-top:16px; color:#172842; background: linear-gradient(135deg,#ffd75a,#f5ae1b); box-shadow:0 12px 26px rgba(243,167,18,.22); }
.stars-pay-button:disabled { opacity:.55; cursor:not-allowed; }
[hidden] { display:none !important; }


/* checkout6: profile first, payment method on a separate second screen */
.checkout-step[hidden] { display: none !important; }
.checkout-payment-step { animation: checkoutStepIn .18s ease-out; }
.checkout-payment-step .checkout-payment-methods { margin-top: 10px; }
.checkout-payment-back {
  width: 100%;
  margin-top: 11px;
  padding: 11px 12px;
  border: 1px solid #cfe2f1;
  border-radius: 14px;
  color: #557089;
  background: #f7fbfe;
  font-size: 10px;
  font-weight: 850;
}
.checkout-payment-back:active { transform: scale(.985); }
@keyframes checkoutStepIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}