/* ============================================================
   KEY4GAMES — footer
   ============================================================ */
.site-footer{margin-top:90px;border-top:1px solid var(--line);background:#090b12;position:relative;z-index:1}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr;gap:32px;padding:46px 0 36px}
.f-brand .logo{margin-bottom:2px}
.f-brand p{color:var(--muted);font-size:13px;margin-top:14px;max-width:280px}
.f-col h4{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text);margin-bottom:16px}
.f-col a{display:block;color:var(--muted);font-size:13.5px;padding:5px 0;transition:.2s}
.f-col a:hover{color:var(--text)}
.f-col .f-menu{list-style:none;margin:0;padding:0}
.f-col .f-menu li{margin:0}
.socials{display:flex;gap:9px;margin-bottom:18px}
.soc{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);transition:.2s}
.soc:hover{color:#fff;border-color:var(--violet);background:rgba(139,92,246,.12)}
.soc svg{width:16px;height:16px;fill:currentColor;display:block;margin:0}
.region-row{display:flex;flex-wrap:wrap;gap:8px}
.region-row .chip-btn{padding:7px 12px;font-size:12px}
/* Payment row.
   This was a six-brand logo wall (VISA / Mastercard / PayPal / Apple Pay / Google Pay /
   Crypto) for methods that do not exist at checkout. It now renders WooCommerce's real
   enabled gateways, which today is two. A bare pair of chips floating in a wide row would
   read as breakage, so the row is a labelled statement instead of a logo strip: heading
   on the left, the methods next to it, and the honest caveat trailing at the far end.
   Two chips look intentional; six will too, when there are six. */
.f-pay{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:20px 0;border-top:1px solid var(--line)}
.f-pay-label{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.f-pay-list{display:flex;flex-wrap:wrap;gap:8px}
.f-pay-note{margin-left:auto;font-size:11.5px;color:var(--dim)}
.pay{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:7px 12px;background:color-mix(in srgb, var(--text) 3%, transparent)}
.f-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:18px 0 30px;color:var(--muted);font-size:12px}
/* The pay row carries the divider above the bottom bar. With no gateways enabled it is
   not rendered at all, so the bottom bar has to pick the rule up instead of leaving the
   footer columns and the copyright line running together. */
.f-grid + .f-bottom{border-top:1px solid var(--line);padding-top:20px}
.f-bottom .tiny{font-size:11px;color:var(--dim);max-width:560px}

@media (max-width:1020px){
  .f-grid{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media (max-width:720px){
  /* Let the caveat drop to its own line rather than squeeze the chips. */
  .f-pay-note{margin-left:0;flex-basis:100%}
}
@media (max-width:520px){
  .f-grid{grid-template-columns:1fr}
}