/* =========================================================================
   gas.css — ბენზინგასამართი სადგური: საწვავის ჩასხმა + კანისტრი (CEF.GASSTATION = 18 / page-gas)
   ყველა სელექტორი დასკოპულია #page-gas-ზე, კლასები იწყება gs- პრეფიქსით.
   ========================================================================= */
#page-gas {
  --red: #ff4747; --amber: #ffb02e; --green: #3ddc84; --acc: #ffb02e;
  --light: #eaeaea; --muted: #eaeaea8c; --black: #0a0a0a; --line: #eaeaea1f;
  font-family: "Noto Sans Georgian", "Manrope", "Segoe UI", Arial, sans-serif;
  color: var(--light); background: var(--black); overflow: hidden; user-select: none;
}
#page-gas * { box-sizing: border-box; margin: 0; padding: 0; }
#page-gas .gs-bg { position: absolute; inset: 0; background:
  radial-gradient(60% 50% at 50% 0%, #ffb02e26, transparent 70%),
  radial-gradient(45% 45% at 15% 80%, #3ddc8414, transparent 70%),
  linear-gradient(180deg, #0f0e0b 0%, #060606 100%); }
#page-gas .gs-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, #000000b3 100%); }

#page-gas .gs-card { position: relative; z-index: 2; width: min(900px, 96vw); max-height: 94vh; display: flex; flex-direction: column;
  padding: 22px 26px 20px; background: #121214f2; border: 1px solid #ffffff14; border-radius: 16px; box-shadow: 0 24px 70px #000000a0; }
#page-gas .gs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
#page-gas .gs-title { font: 700 26px "Rajdhani", "Noto Sans Georgian", sans-serif; letter-spacing: .06em; }
#page-gas .gs-title span { color: var(--acc); }
#page-gas .gs-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
#page-gas .gs-close { background: none; border: 1px solid var(--line); color: var(--light); border-radius: 8px;
  padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13px; white-space: nowrap; }
#page-gas .gs-close:hover { border-color: var(--red); color: var(--red); }

/* ტაბები */
#page-gas .gs-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
#page-gas .gs-tab { flex: 1; padding: 11px 8px; border-radius: 10px; border: 1px solid var(--line); background: #eaeaea0a;
  color: var(--muted); font: 700 14px inherit; cursor: pointer; transition: .15s; text-align: center; }
#page-gas .gs-tab:hover { color: var(--light); }
#page-gas .gs-tab.on { color: var(--light); border-color: var(--acc); background: #ffb02e1f; }

#page-gas .gs-main { display: flex; gap: 16px; min-height: 0; overflow: hidden; }
#page-gas .gs-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding-right: 4px; }
#page-gas .gs-col::-webkit-scrollbar { width: 5px; }
#page-gas .gs-col::-webkit-scrollbar-thumb { background: #ffffff22; border-radius: 4px; }
#page-gas .gs-h { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 2px 0 -2px; }

/* საწვავის კატეგორიები */
#page-gas .gs-type { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--line); background: #eaeaea08; transition: .15s; }
#page-gas .gs-type:hover { background: #eaeaea12; }
#page-gas .gs-type.sel { border-color: var(--tc, var(--acc)); background: #ffffff0d; box-shadow: inset 0 0 0 1px var(--tc, var(--acc)); }
#page-gas .gs-dot { width: 38px; height: 38px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center;
  font: 800 13px "Rajdhani", sans-serif; color: #101010; background: var(--tc, var(--acc)); }
#page-gas .gs-tn { flex: 1; min-width: 0; }
#page-gas .gs-tn b { display: block; font-size: 14px; }
#page-gas .gs-tn small { font-size: 11.5px; color: var(--muted); }
#page-gas .gs-price { font: 700 17px "Rajdhani", sans-serif; text-align: right; white-space: nowrap; }
#page-gas .gs-price small { display: block; font: 400 10.5px "Noto Sans Georgian", sans-serif; color: var(--muted); }

/* მარჯვენა პანელი */
#page-gas .gs-box { padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: #eaeaea08; }

/* ავზი */
#page-gas .gs-tank { position: relative; height: 34px; border-radius: 9px; border: 2px solid #cfd3d8; background: #1a1b1e; overflow: hidden; }
#page-gas .gs-tank i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width .5s ease; }
#page-gas .gs-tank .cur { background: #8c8f96; }
#page-gas .gs-tank .add { background: var(--tc, var(--acc)); opacity: .85; }
#page-gas .gs-tank-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 14px "Rajdhani", sans-serif; text-shadow: 0 1px 6px #000; z-index: 2; }
#page-gas .gs-tank-lb { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
#page-gas .gs-tank-lb b { color: var(--light); }

/* ლიტრების არჩევა */
#page-gas .gs-lrow { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
#page-gas .gs-big { font: 800 34px "Rajdhani", sans-serif; color: var(--tc, var(--acc)); min-width: 92px; }
#page-gas .gs-big small { font-size: 14px; color: var(--muted); margin-left: 2px; }
#page-gas input[type=range].gs-range { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 4px; background: #eaeaea1f; outline: none; }
#page-gas input[type=range].gs-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--tc, var(--acc)); border: 3px solid #121214; box-shadow: 0 0 10px var(--tc, var(--acc)); cursor: pointer; }
#page-gas .gs-quick { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
#page-gas .gs-chip { flex: 1; min-width: 56px; padding: 8px 6px; border-radius: 8px; border: 1px solid var(--line); background: #eaeaea0a;
  color: var(--light); font: 600 12.5px inherit; cursor: pointer; transition: .15s; }
#page-gas .gs-chip:hover { border-color: var(--acc); background: #ffb02e1a; }

/* კანისტრის ზომები */
#page-gas .gs-can { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--line); background: #eaeaea08; transition: .15s; }
#page-gas .gs-can:hover { background: #eaeaea12; }
#page-gas .gs-can.sel { border-color: var(--acc); background: #ffb02e14; box-shadow: inset 0 0 0 1px var(--acc); }
#page-gas .gs-cico { width: 34px; height: 40px; flex: none; }
#page-gas .gs-cico svg { width: 100%; height: 100%; display: block; }
#page-gas .gs-can .gs-tn b { font-size: 14px; }

#page-gas .gs-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font-size: 13px; }
#page-gas .gs-switch small { display: block; color: var(--muted); font-size: 11px; }
#page-gas .gs-tg { width: 42px; height: 24px; border-radius: 14px; background: #eaeaea26; position: relative; flex: none; transition: .15s; }
#page-gas .gs-tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .15s; }
#page-gas .gs-tg.on { background: var(--acc); }
#page-gas .gs-tg.on::after { left: 21px; background: #101010; }

#page-gas .gs-step { display: flex; align-items: center; justify-content: space-between; }
#page-gas .gs-qty { display: flex; align-items: center; gap: 10px; }
#page-gas .gs-qty button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: #eaeaea0f;
  color: var(--light); font: 700 18px inherit; cursor: pointer; }
#page-gas .gs-qty button:hover { border-color: var(--acc); }
#page-gas .gs-qty b { min-width: 24px; text-align: center; font: 700 18px "Rajdhani", sans-serif; }

/* ქვედა პანელი */
#page-gas .gs-foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
#page-gas .gs-pay { display: flex; gap: 6px; }
#page-gas .gs-pay button { padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line); background: #eaeaea0a; color: var(--muted);
  font: 600 12.5px inherit; cursor: pointer; text-align: left; line-height: 1.3; }
#page-gas .gs-pay button b { display: block; font: 700 14px "Rajdhani", sans-serif; color: var(--light); }
#page-gas .gs-pay button.on { border-color: var(--green); background: #3ddc8414; color: var(--light); }
#page-gas .gs-pay button.low b { color: var(--red); }
#page-gas .gs-tot { margin-left: auto; text-align: right; }
#page-gas .gs-tot small { display: block; font-size: 11px; color: var(--muted); }
#page-gas .gs-tot b { font: 800 26px "Rajdhani", sans-serif; color: var(--acc); }
#page-gas .gs-buy { padding: 14px 26px; border-radius: 10px; border: 1px solid var(--acc); background: #ffb02e2b; color: var(--light);
  font: 700 15px inherit; cursor: pointer; transition: .15s; }
#page-gas .gs-buy:hover:not(:disabled) { background: #ffb02e55; }
#page-gas .gs-buy:disabled { opacity: .35; cursor: not-allowed; border-color: var(--line); background: #eaeaea0a; }

/* შეტყობინება */
#page-gas .gs-toast { position: absolute; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 6; opacity: 0; pointer-events: none;
  padding: 11px 20px; border-radius: 10px; background: #1c1c20; border: 1px solid var(--line); font-size: 13.5px; transition: .25s; }
#page-gas .gs-toast.on { opacity: 1; transform: translate(-50%, 0); }
#page-gas .gs-toast.ok { border-color: var(--green); color: var(--green); }
#page-gas .gs-toast.err { border-color: var(--red); color: var(--red); }

#page-gas .gs-empty { padding: 22px 10px; text-align: center; font-size: 13px; color: var(--muted); }

@media (max-width: 760px) { #page-gas .gs-main { flex-direction: column; overflow-y: auto; } }