/* Game page, split test game_order_bar (version B): the order bar fixed to the bottom of the screen, drawn as a strip of
   the Most Popular price card: its tag, plan, coupon chip, price and button. Their type, colours and shapes are that
   card's own (order_widget.tpl: .badge-popular, .pricing-card h3, .coupon-chip, .price, .pricing-card-gold .btn-order).
   Its surface is the page's own colour under the card's gold wash, solid, so page text never shows through. Hidden, it
   is out of the Tab order (visibility). On a phone the tag follows the plan and the chip is left out (no room); from
   768 the tag leads; from 992 the chip shows. */
.ssgob { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; visibility: hidden; transform: translateY(110%); transition: transform .18s ease, visibility 0s linear .18s; border-top: 1px solid rgba(255,215,0,.42); background: linear-gradient(180deg, rgba(255,215,0,.09) 0%, rgba(255,215,0,.03) 100%), #1a1a1b; box-shadow: 0 -10px 28px rgba(0,0,0,.5); color: #fff; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 1.3; text-align: left; }
.ssgob.on { visibility: visible; transform: translateY(0); transition: transform .18s ease; }
.ssgob-in { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; align-items: center; column-gap: 12px; row-gap: 1px; max-width: 1260px; min-height: 64px; margin: 0 auto; padding: 8px max(15px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(15px, env(safe-area-inset-left)); }
.ssgob-what { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ssgob-plan { overflow: hidden; margin: 0; color: #fff; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ssgob-tag { flex: 0 0 auto; color: #ffd700; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.ssgob-chip { display: none; }
.ssgob-price { grid-column: 1; grid-row: 2; display: flex; align-items: baseline; gap: 5px; min-width: 0; color: #fff; font-size: 17px; white-space: nowrap; }
.ssgob-price s { color: #888; font-size: 13px; font-weight: 400; text-decoration: line-through; }
.ssgob-price b { color: #00ff88; font-weight: 700; }
.ssgob-price .ssgob-per { color: #ccc; font-size: 13px; font-weight: 400; }
.ssgob-btn, .ssgob-btn:visited { grid-column: 2; grid-row: 1 / span 2; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 10px 20px; border: 0; border-radius: 6px; background: linear-gradient(135deg, #ffd700, #ffaa00); box-shadow: 0 0 16px rgba(255,215,0,.45); color: #000; font-size: 15px; font-weight: 700; line-height: 23px; text-decoration: none; white-space: nowrap; transition: transform .3s ease, box-shadow .3s ease; }
.ssgob-btn:hover, .ssgob-btn:focus { color: #000; text-decoration: none; transform: translateY(-2px); box-shadow: 0 0 22px rgba(255,215,0,.75); }
/* keyboard focus: a white ring with a dark gap, drawn as a shadow (the theme switches every outline off) */
.ssgob-btn:focus-visible { box-shadow: 0 0 0 2px #1a1a1b, 0 0 0 4px #fff, 0 0 22px rgba(255,215,0,.75); }
.ssgob-tag[hidden], .ssgob-chip[hidden] { display: none; }
/* the page keeps the bar's height clear at its foot. !important: the theme sets body { padding: 0 !important } (layout.css) */
body.ssgob-on { padding-bottom: var(--ssgob-h, calc(66px + env(safe-area-inset-bottom))) !important; }
/* the two corner buttons (back to top; the staff-only classic/new switch) move up by the bar's height while it shows,
   so each keeps its own gap from the edge at every width (the theme's own transition on them covers the move) */
body.ssgob-on #toTop { translate: 0 calc(-1 * var(--ssgob-h, 66px)); }
body.ssgob-on .ssv2tgl { translate: 0 calc(-1 * var(--ssgob-h, 66px)); }
/* while the list of plans is open the back-to-top button, which would peek out beside it, is put away */
body.ssgob-on.ssgob-list #toTop { visibility: hidden; }
/* a price too long for its room (set by the script): the struck price gives way, the price itself is never cut */
.ssgob-tight .ssgob-in .ssgob-price s { display: none; }
@media (max-width: 359px) {
	.ssgob-btn { padding: 10px 16px; }
}
@media (min-width: 768px) {
	.ssgob-in { display: flex; gap: 22px; }
	.ssgob-what { flex: 0 1 auto; align-items: center; gap: 14px; }
	.ssgob-plan { font-size: 18px; }
	.ssgob-tag { order: -1; font-size: 11px; }
	.ssgob-price { flex: 0 0 auto; margin-left: auto; font-size: 18px; }
	.ssgob-price s, .ssgob-price .ssgob-per { font-size: 14px; }
	.ssgob-btn { flex: 0 0 auto; padding: 10px 30px; }
}
@media (min-width: 992px) {
	.ssgob-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border: 1px dashed #eaa824; border-radius: 5px; background: rgba(0,0,0,.45); font-size: 12px; line-height: 17px; white-space: nowrap; }
	.ssgob-chip .ssgob-pct { color: #ffd57e; font-size: 13px; font-weight: 800; }
	.ssgob-chip .ssgob-sep { color: #8b7a55; }
	.ssgob-chip .ssgob-code { color: #fff; font-weight: 700; letter-spacing: .5px; }
	.ssgob-chip[hidden] { display: none; }
}
/* ---- A choice of plan (the bar then has class ssgob-ch). Off unless the script tag asks for it. Everything above is
   unchanged by it; the parts below are added. The picked card's own edge colour (read from the page into --ssgob-acc)
   takes the place of the gold card's on the hairline, the wash and the button's glow; each choice carries its own
   card's edge colour (--ssgob-o). Both are handed over as three numbers ("255, 215, 0") and used through rgba(), so
   no newer colour function is needed and an older phone draws the same bar. The list for narrow screens is the price cards' own location menu, opened upward
   (order_widget.tpl: .location-dropdown .dropdown-menu: #2a2a2a, 1px #444, 8px corners, rows parted by #3a3a3a). ---- */
.ssgob-pick, .ssgob-opts, .ssgob-sheet, .ssgob-shade { display: none; }
.ssgob-ch { border-top-color: rgba(var(--ssgob-acc, 255, 215, 0), .42); background: linear-gradient(180deg, rgba(var(--ssgob-acc, 255, 215, 0), .09) 0%, rgba(var(--ssgob-acc, 255, 215, 0), .03) 100%), #1a1a1b; }
.ssgob-ch .ssgob-btn { box-shadow: 0 0 16px rgba(var(--ssgob-acc, 255, 215, 0), .45); }
.ssgob-ch .ssgob-btn:hover, .ssgob-ch .ssgob-btn:focus { box-shadow: 0 0 22px rgba(var(--ssgob-acc, 255, 215, 0), .75); }
.ssgob-ch .ssgob-btn:focus-visible { box-shadow: 0 0 0 2px #1a1a1b, 0 0 0 4px #fff, 0 0 22px rgba(var(--ssgob-acc, 255, 215, 0), .75); }
/* wide screens: one small button per price card, the card's tag over its plan, edged in the card's colour */
.ssgob-ch .ssgob-opts { display: flex; flex: 0 0 auto; align-items: stretch; gap: 8px; }
.ssgob-opt { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 84px; min-height: 44px; margin: 0; padding: 4px 13px; border: 0; border-radius: 8px; background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--ssgob-o, 85, 85, 85), .45); color: #fff; font: inherit; line-height: 1.3; text-align: center; cursor: pointer; transition: box-shadow .2s ease, background-color .2s ease; }
.ssgob-owords { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.ssgob-otag { font-size: 10px; font-weight: 700; letter-spacing: 1px; line-height: 13px; text-transform: uppercase; white-space: nowrap; }
.ssgob-otag:empty { display: none; }
.ssgob-oname { color: #e6e6e6; font-size: 15px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.ssgob-opt:hover, .ssgob-opt:focus-visible { background: rgba(var(--ssgob-o, 85, 85, 85), .07); box-shadow: inset 0 0 0 1px rgb(var(--ssgob-o, 85, 85, 85)); }
.ssgob-opt.on { background: linear-gradient(180deg, rgba(var(--ssgob-o, 85, 85, 85), .15) 0%, rgba(var(--ssgob-o, 85, 85, 85), .04) 100%); box-shadow: inset 0 0 0 2px rgb(var(--ssgob-o, 85, 85, 85)), 0 0 12px rgba(var(--ssgob-o, 85, 85, 85), .35); }
.ssgob-opt.on .ssgob-oname { color: #fff; }
.ssgob-opt:focus-visible, .ssgob-opt.on:focus-visible { box-shadow: inset 0 0 0 2px rgb(var(--ssgob-o, 85, 85, 85)), 0 0 0 2px #1a1a1b, 0 0 0 4px #fff; }
.ssgob-ch:not(.ssgob-compact) .ssgob-what { flex: 0 0 auto; }
.ssgob-nochip .ssgob-chip { display: none; }
/* phones, tablets, and any width the small buttons do not fit: the picked plan is one button (its tag, plan and
   price, with a caret) that opens the list above the bar */
.ssgob-compact .ssgob-opts, .ssgob-compact .ssgob-chip, .ssgob-compact .ssgob-in > .ssgob-price { display: none; }
.ssgob-compact .ssgob-what { grid-row: 1 / span 2; align-items: stretch; }
.ssgob-compact .ssgob-pick { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 1px; width: 100%; min-height: 48px; margin: 0; padding: 2px 12px; border: 0; border-radius: 8px; background: rgba(var(--ssgob-acc, 255, 215, 0), .06); box-shadow: inset 0 0 0 1px rgba(var(--ssgob-acc, 255, 215, 0), .55); color: #fff; font: inherit; line-height: 1.3; text-align: left; cursor: pointer; }
.ssgob-pk { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ssgob-caret { grid-column: 2; grid-row: 1 / span 2; box-sizing: border-box; width: 10px; height: 10px; margin: 5px 3px 0 0; border: solid #ccc; border-width: 2px 2px 0 0; transform: rotate(-45deg); transition: transform .18s ease, margin .18s ease; }
.ssgob-open .ssgob-caret { margin-top: -5px; transform: rotate(135deg); }
.ssgob-compact .ssgob-pick:hover { box-shadow: inset 0 0 0 1px rgb(var(--ssgob-acc, 255, 215, 0)); }
.ssgob-compact .ssgob-pick:focus-visible { box-shadow: inset 0 0 0 1px rgb(var(--ssgob-acc, 255, 215, 0)), 0 0 0 2px #1a1a1b, 0 0 0 4px #fff; }
/* (the bar's own top edge is 1px, and "100%" is measured inside it: hence the extra pixel in both) */
.ssgob-open .ssgob-shade { display: block; position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); height: 100vh; background: rgba(0,0,0,.45); }
.ssgob-open .ssgob-sheet { box-sizing: border-box; display: block; position: absolute; left: max(15px, env(safe-area-inset-left)); bottom: calc(100% + 9px); width: min(420px, calc(100% - 30px)); max-height: 60vh; overflow-x: hidden; overflow-y: auto; border: 1px solid #444; border-radius: 8px; background: #2a2a2a; box-shadow: 0 -10px 28px rgba(0,0,0,.5); }
.ssgob-row { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 54px; margin: 0; padding: 8px 12px 8px 15px; border: 0; border-bottom: 1px solid #3a3a3a; border-radius: 0; background: transparent; box-shadow: inset 3px 0 0 rgba(var(--ssgob-o, 85, 85, 85), .55); color: #fff; font: inherit; line-height: 1.3; text-align: left; cursor: pointer; }
.ssgob-row:last-child { border-bottom: 0; }
.ssgob-row .ssgob-owords { align-items: flex-start; }
.ssgob-row .ssgob-oside { flex: 0 0 auto; margin-left: auto; font-size: 16px; }
.ssgob-row.ssgob-go .ssgob-oside { color: #ccc; font-size: 13px; font-weight: 600; }
.ssgob-row:hover, .ssgob-row:focus { background: #3a3a3a; }
.ssgob-row.on:hover, .ssgob-row.on:focus { background: linear-gradient(rgba(var(--ssgob-o, 85, 85, 85), .16), rgba(var(--ssgob-o, 85, 85, 85), .16)), #333; }
.ssgob-row.on { background: linear-gradient(rgba(var(--ssgob-o, 85, 85, 85), .11), rgba(var(--ssgob-o, 85, 85, 85), .11)), #2a2a2a; box-shadow: inset 3px 0 0 rgb(var(--ssgob-o, 85, 85, 85)); }
.ssgob-row.on .ssgob-oname { color: #fff; }
.ssgob-row:focus-visible { box-shadow: inset 3px 0 0 rgb(var(--ssgob-o, 85, 85, 85)), inset 0 0 0 2px #fff; }
@media (min-width: 768px) {
	/* a tablet (and a narrow laptop that falls back to the one button): the button keeps to the right edge */
	/* the one button is a single line there (tag, plan, caret), and the price keeps its place beside Order Now */
	.ssgob-compact .ssgob-what { flex: 0 1 auto; }
	.ssgob-compact .ssgob-pick { width: auto; min-height: 44px; padding: 0 12px 0 14px; column-gap: 14px; }
	.ssgob-compact .ssgob-pk { align-items: center; gap: 14px; }
	.ssgob-compact .ssgob-pkprice { display: none; }
	.ssgob-compact .ssgob-in > .ssgob-price { display: flex; }
	.ssgob-compact .ssgob-caret { grid-row: 1; margin-top: 4px; }
	.ssgob-open .ssgob-caret { margin-top: -4px; }
}
@media (prefers-reduced-motion: reduce) {
	.ssgob, .ssgob.on, .ssgob-btn, .ssgob-opt, .ssgob-caret { transition: none; }
	.ssgob-btn:hover, .ssgob-btn:focus { transform: none; }
}
@media print { .ssgob { display: none; } }