/* Roidboard country picker: three cards, used in registration and on misc.php?action=choose_country.
   Loaded only where the cards are printed. Round flags come from the same SVG the section tabs use. */

.rb-country-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}

.rb-country-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
 padding:18px 10px 15px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:3px;cursor:pointer;
 transition:border-color .15s,background .15s,box-shadow .15s}
.rb-country-card:hover{background:var(--surface-3);border-color:var(--line-3,#3a3a4a)}
.rb-country-card input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.rb-country-card-flag{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
 border-radius:50%;background:var(--surface-4,#22222c);box-shadow:0 0 0 1px var(--line-2)}
.rb-country-card-flag .rb-flag.is-round{width:24px;height:24px;display:block}
.rb-country-card-name{font-size:13.5px;font-weight:600;color:var(--fg-2);letter-spacing:.01em}
/* the picked card. :has(input:checked) follows the click straight away, with no script; .is-on is the server's mark
   for a page that comes back with a pick, and stays for browsers without :has */
.rb-country-card.is-on,.rb-country-card:has(input:checked){background:rgba(45,99,199,.12);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.rb-country-card.is-on .rb-country-card-name,.rb-country-card:has(input:checked) .rb-country-card-name{color:#fff}
.rb-country-card.is-on .rb-country-card-flag,.rb-country-card:has(input:checked) .rb-country-card-flag{box-shadow:0 0 0 1px var(--accent)}
/* a card that was marked by the server but is no longer the checked one (the member clicked another) */
.rb-country-pick:has(input:checked) .rb-country-card.is-on:not(:has(input:checked)){background:var(--surface-2);border-color:var(--line-2);box-shadow:none}
.rb-country-pick:has(input:checked) .rb-country-card.is-on:not(:has(input:checked)) .rb-country-card-name{color:var(--fg-2)}
.rb-country-pick:has(input:checked) .rb-country-card.is-on:not(:has(input:checked)) .rb-country-card-flag{box-shadow:0 0 0 1px var(--line-2)}
.rb-country-card:has(input:focus-visible){outline:2px solid var(--accent-2);outline-offset:2px}

/* register block */
.rb-reg-country{padding:0;border:0;background:transparent}
.rb-reg-country .rb-reg-country-sub{margin:-4px 0 12px;font-size:12.5px;color:var(--muted);line-height:1.5}
.rb-reg-req{display:inline-flex;align-items:center;height:18px;padding:0 6px;margin-left:6px;border-radius:2px;
 background:rgba(45,99,199,.16);color:#9dc0ff;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:2px}

/* the picker page */
.rb-country-form{display:flex;flex-direction:column;gap:16px;max-width:520px;margin:0 auto}
.rb-country-save{align-self:stretch;justify-content:center;height:44px}

@media (max-width:520px){
  .rb-country-card{padding:14px 8px 12px;gap:6px}
  .rb-country-card-flag{width:34px;height:34px}
  .rb-country-card-flag .rb-flag.is-round{width:20px;height:20px}
  .rb-country-card-name{font-size:12.5px}
}

/* Settings > Account: the Country section. The three cards sit on the same three columns as the fields of the other
   sections (same 24px gap), so their edges line up with Email and Password above. */
.rb-acc .rb-acc-fields > .rb-country-pick{grid-column:1 / -1;gap:16px 24px}
@media (max-width:760px){
  .rb-acc .rb-acc-fields > .rb-country-pick{gap:10px}
}