/* CardTools · AuthBrand: login / register / password pages in the TapMyCard site style (fonts and panel served by the add-on). */
@font-face { font-family: "Commissioner"; font-weight: 300 800; font-display: swap; src: url("font-greek") format("woff2"); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Commissioner"; font-weight: 300 800; font-display: swap; src: url("font-latin-ext") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Commissioner"; font-weight: 300 800; font-display: swap; src: url("font-latin") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root { --tb-ink: #16181d; --tb-slate: #5a6170; --tb-line: #e2e6eb; --tb-red: #e30613; --tb-red-dark: #b8050f; --tb-mist: #f4f6f8; }
body, body *:not(i):not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not(.bi) { font-family: "Commissioner", system-ui, sans-serif !important; }
body { background: #fff !important; color: var(--tb-ink); -webkit-font-smoothing: antialiased; }

/* left panel: TapMyCard instead of the vendor's sample cards */
:is(.login-img, .register-img, div:has(> img[alt="Register Image"])) { position: relative; height: 100%; min-height: 100vh; background: #16181d url("auth-panel") center / cover no-repeat; }
img[alt="Register Image"] { visibility: hidden; }
.top-vector, .bottom-vector { display: none !important; }

/* brand + headings */
.login-app-name { gap: 12px; }
.login-app-name .text-gray-900, .register-section .fs-2, :is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) h1, :is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) .fs-2.fw-bold { color: var(--tb-ink) !important; letter-spacing: -.01em; }
:is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) .fs-2.fw-bold { font-weight: 750 !important; }

/* fields */
:is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) .form-label { font-weight: 600; color: var(--tb-ink); }
:is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) .form-control, :is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) .form-select { border: 1.5px solid var(--tb-line) !important; border-radius: 12px !important; min-height: 48px; background: #fff !important; box-shadow: none !important; }
:is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) .form-control:focus, :is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) .form-select:focus { border-color: var(--tb-ink) !important; }
:is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) .form-check-input { border-radius: 6px; border: 1.5px solid #9aa1ad; }
:is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) .form-check-input:checked { background-color: var(--tb-red) !important; border-color: var(--tb-red) !important; }
:is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) .required::after, :is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) .text-danger { color: var(--tb-red) !important; }

/* buttons */
:is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) :is(.login-btn, .reset-link, .register-btn), :is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) .btn-primary, :is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) button[type="submit"] { background: var(--tb-red) !important; border: 2px solid var(--tb-red) !important; color: #fff !important; border-radius: 999px !important; min-height: 48px; font-weight: 650 !important; }
:is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) .login-btn:hover, :is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) .btn-primary:hover, :is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) button[type="submit"]:hover { background: var(--tb-red-dark) !important; border-color: var(--tb-red-dark) !important; }
:is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) .google-btn, :is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) .facebook-btn { border-radius: 999px !important; min-height: 48px; font-weight: 600 !important; }
:is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) .google-btn { background: #fff !important; border: 1.5px solid var(--tb-line) !important; color: var(--tb-ink) !important; }
:is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) .facebook-btn { background: #1877f2 !important; border: 0 !important; color: #fff !important; }

/* links */
:is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) a.link-info, :is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) a.text-decoration-none:not(.btn), .copyright a { color: var(--tb-red-dark) !important; font-weight: 600; }
:is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) a.link-info:hover, :is(.login-section, .register-section, .forget-password-section, .login-form, .register-form) a.text-decoration-none:not(.btn):hover { text-decoration: underline !important; }
.copyright { color: var(--tb-slate) !important; }

/* language button: quiet, like the site */
.authImage > .dropdown > .btn-info { background: #fff !important; color: var(--tb-ink) !important; border: 1.5px solid var(--tb-line) !important; border-radius: 999px !important; box-shadow: none !important; font-weight: 600; }
.authImage > .dropdown > .btn-info:hover { border-color: var(--tb-ink) !important; }
.dropdown-item.active, .dropdown-item:active { background: var(--tb-mist) !important; color: var(--tb-ink) !important; }

:focus-visible { outline: 3px solid var(--tb-red) !important; outline-offset: 2px; }

/* links inside the forms (sign-up terms, "log in here") */
form a:not(.btn), .register-section a.text-primary, .register-section a.link-primary { color: var(--tb-red-dark) !important; font-weight: 600; }
:is(.login-section, .register-section, .forget-password-section) :is(.btn-secondary, .btn-light, a.btn:not(.google-btn):not(.facebook-btn):not(.login-btn)) { background: #fff !important; color: var(--tb-ink) !important; border: 1.5px solid var(--tb-line) !important; border-radius: 999px !important; min-height: 48px; font-weight: 600 !important; display: inline-flex; align-items: center; }