/* Bejelentkezés and Fiók kiegészítése (templates/bejelentkezes.html, fiok_kiegeszitese.html; static/js/signin.js):
 * one card in the middle, the same on a phone and a desktop. Every class starts with `si-` / `sc-`, clear of the
 * theme's and Bootstrap's. */
.si { --teal: #45b29d; --ink: #333; --muted: #777; --line: #dcdcdc; --red: #c62828; --purple: #915291;
      font-family: Poppins, Helvetica, Arial, sans-serif; color: var(--ink); font-size: 15px; line-height: 1.5;
      letter-spacing: 0; padding: 24px 0 72px; }
.si *, .si *::before, .si *::after { box-sizing: border-box; }
.si [hidden] { display: none !important; }
.si a { color: var(--teal); }
.si-card { max-width: 420px; margin: 0 auto; background: #fff; border: 1px solid #eee; border-radius: 12px;
           padding: 28px 28px 22px; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.si-pre { color: var(--purple); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.si h1.si-title { font: 400 30px/1.25 Georgia, serif; margin: 4px 0 10px; letter-spacing: 0; color: var(--ink);
                  text-transform: none; }
.si-lead { color: #555; margin: 0 0 18px; font-size: 14px; }
.si-alert { background: #fdecea; border-left: 3px solid var(--red); color: #8e1c1c; padding: 10px 12px;
            font-size: 14px; margin: 0 0 16px; border-radius: 4px; }

.si-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px;
             border: 1px solid #747775; border-radius: 24px; background: #fff; color: #1f1f1f !important;
             font: 500 15px Roboto, Poppins, Arial, sans-serif; text-decoration: none; padding: 10px 16px; }
.si-google:hover, .si-google:focus { background: #f5f8ff; text-decoration: none; }

.si-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; margin: 20px 0 14px; }
.si-or::before, .si-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

.si-form { display: flex; flex-direction: column; gap: 6px; }
.si-form label { font-size: 13px; font-weight: 600; margin: 8px 0 0; color: var(--ink); }
.si-form input[type=email], .si-form input[type=text], .si-form input[type=tel] {
  font: 16px Poppins, sans-serif; padding: 11px 12px; border: 1px solid #c8c8c8; border-radius: 8px; background: #fff;
  color: var(--ink); width: 100%; height: auto; margin: 0; box-shadow: none; -webkit-appearance: none; appearance: none; }
.si-form input:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); }
.si-form input[aria-invalid=true] { border-color: var(--red); }
.si-form input.si-code { font-size: 24px; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.si-btn { margin-top: 12px; min-height: 48px; border: 0; border-radius: 8px; background: var(--teal); color: #fff;
          font: 600 15px Poppins, sans-serif; cursor: pointer; padding: 10px 16px; letter-spacing: 0; }
.si-btn:hover { filter: brightness(.95); }
.si-btn[disabled] { opacity: .6; cursor: default; filter: none; }
.si-msg { font-size: 13px; min-height: 0; }
.si-msg.err { color: var(--red); }
.si-msg.ok { color: #2e7d32; }
.si-sent { font-size: 14px; margin: 0 0 4px; color: #555; }
.si-hint { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.si-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.si-link { background: none; border: 0; padding: 8px 0; color: var(--teal); font: 500 14px Poppins, sans-serif;
           cursor: pointer; letter-spacing: 0; min-height: 44px; }
.si-link[disabled] { color: #aaa; cursor: default; }
.si-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: 14px !important;
            margin-top: 14px !important; cursor: pointer; }
.si-check input[type=checkbox] { display: inline-block !important; position: static; opacity: 1; visibility: visible;
                                  -webkit-appearance: checkbox; appearance: auto; width: 20px; height: 20px;
                                  margin: 2px 0 0; flex: none; accent-color: var(--teal); }
.si-small { font-size: 12px; color: var(--muted); margin: 18px 0 0; text-align: center; }

@media (max-width: 520px) {
  .si { padding: 12px 0 48px; }
  .si-card { border: 0; box-shadow: none; padding: 8px 0 0; }
}
/* Facebook and Apple: the brands' own colours, the same size as the Google button. */
.si-provider { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px;
               margin-top: 10px; border-radius: 6px; font: 500 15px Poppins, sans-serif; color: #fff; text-decoration: none; }
.si-provider[hidden] { display: none; }
.si-provider:hover, .si-provider:focus { color: #fff; text-decoration: none; filter: brightness(1.08); }
.si-facebook { background: #1877f2; }
.si-apple { background: #000; }
.si-teszt { background: #607d8b; }
#si-no-access { display: block; margin-top: 10px; }