/* Arora Opticals — Login / auth pages. Scoped entirely to .auth-page (and
   the small standalone .auth-simple-* pages password reset uses) so
   nothing here leaks into the authenticated app's own styling in app.css.
   Colors intentionally match the design brief exactly rather than reusing
   app.css's --ao-* teal variables, which are a slightly different shade —
   this page has its own small palette instead of overloading those. */
:root {
  --auth-primary: #A9814F;
  --auth-primary-dark: #8A6A3E;
  --auth-dark: #17212B;
  --auth-text: #263238;
  --auth-secondary: #66727A;
  --auth-border: #D9E2E5;
  --auth-bg: #F3FAFB;
  --auth-white: #FFFFFF;
}


html:has(.auth-page), body:has(.auth-page) {
  height: 100%;
  overflow: hidden;
}
.auth-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--auth-text);
  background: url('../IMAGE/login_page_photo.png') center bottom/cover no-repeat;
  overflow: hidden;
}
.auth-page-row {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.auth-footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1rem 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  background: transparent;
}
.auth-support-banner {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0.5rem;
}
.auth-footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.auth-footer-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.auth-footer-sep {
  color: var(--auth-border);
}
/* "Developed by CTC Solutions" credit row — deliberately the same small
   footer type size as the copyright row above it, never larger: this is
   vendor/developer credit, not the ERP's own branding (that stays in the
   left panel/company-select cards). */
.auth-footer-vendor {
  font-size: 0.74rem;
  opacity: 0.9;
}
.auth-footer-vendor-logo {
  height: 16px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
}
.auth-footer-link {
  color: var(--auth-primary);
  text-decoration: none;
}
.auth-footer-link:hover {
  text-decoration: underline;
}
@media (max-width: 575.98px) {
  .auth-footer-row { flex-direction: column; gap: 0.25rem; text-align: center; }
  .auth-footer-sep { display: none; }
}

/* ---------- Left: branding / features / glasses art ---------- */
.auth-left {
  flex: 1 1 50%;
  position: relative;
  overflow: hidden;
  display: none;
}

/* Soft teal decorative arc, top-right of the left panel — a light accent,
   not a solid teal fill (explicit "do not use a dark teal background"). */
.auth-left::before {
  content: '';
  position: absolute;
  top: -12%;
  right: -18%;
  width: 60%;
  height: 140%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(18, 162, 168, 0.10), rgba(18, 162, 168, 0) 70%);
  pointer-events: none;
}
.auth-dot-grid {
  position: absolute;
  top: 2rem;
  left: 2rem;
  width: 64px;
  height: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  opacity: 0.5;
}
.auth-dot-grid span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--auth-primary);
}

.auth-left-inner {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  animation: auth-fade-up 0.5s ease-out both;
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.auth-logo-mark {
  flex: 0 0 auto;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}
.auth-logo-text {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--auth-dark);
  letter-spacing: 0.01em;
}
.auth-logo-text-sub {
  display: block;
  color: var(--auth-primary);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
}

.auth-tagline {
  font-size: 1.05rem;
  color: var(--auth-text);
  margin: 0 0 2rem;
}
.auth-tagline strong {
  color: var(--auth-primary);
  font-weight: 700;
}

.auth-features {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.auth-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.auth-feature-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(18, 162, 168, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--auth-primary);
}
.auth-feature h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.15rem;
  color: var(--auth-dark);
}
.auth-feature p {
  font-size: 0.82rem;
  color: var(--auth-secondary);
  margin: 0;
  line-height: 1.4;
}

.auth-glasses-art {
  display: block;
  margin: 0.5rem 0 0 -0.5rem;
  opacity: 0.9;
  pointer-events: none;
}

/* Real per-company logos (Company.logo) on the shared login/company-select
   left panel — see active_companies_with_logo() and
   _auth_left_panel.html. A company with no logo uploaded yet is simply
   absent from this strip (never a placeholder), so it degrades gracefully
   as more companies get their artwork added. */
.auth-company-strip {
  margin-top: 0.5rem;
}
.auth-company-strip-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--auth-secondary);
  margin: 0 0 0.85rem;
}
.auth-company-strip-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}
.auth-company-strip-logos img {
  height: 48px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  opacity: 0.9;
}

/* ---------- Right: login card ---------- */
.auth-right {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2rem 6rem 2rem 2rem;
  min-height: 0;
  overflow-y: auto;
}

.auth-card {
  width: 90%;
  max-width: 500px;
  background: rgba(37, 56, 34, 0.38);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(243, 236, 211, 0.3);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  padding: 40px;
  animation: auth-fade-up 0.55s ease-out 0.08s both;
}

.auth-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(37, 56, 34, 0.55);
  border: 1px solid rgba(243, 236, 211, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.auth-card h1 {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  margin: 0 0 0.35rem;
}
.auth-subtitle {
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}
.auth-divider {
  width: 48px;
  height: 3px;
  background: var(--auth-primary);
  border-radius: 2px;
  margin: 0 auto 1.75rem;
}

.auth-error {
  background: #fdecea;
  border: 1px solid #f3c2bd;
  color: #a5311f;
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}

.auth-field {
  margin-bottom: 1.1rem;
}
.auth-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  margin-bottom: 0.4rem;
}
.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-input-icon {
  position: absolute;
  left: 18px;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.75);
  pointer-events: none;
}
.auth-input-wrap input {
  width: 100%;
  height: 58px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  padding: 0 3rem;
  font-size: 0.95rem;
  color: #fff;
  background: rgba(40, 28, 16, 0.35);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-input-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.auth-input-wrap input:-webkit-autofill,
.auth-input-wrap input:-webkit-autofill:hover,
.auth-input-wrap input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px rgba(40, 28, 16, 0.55) inset;
  transition: background-color 9999s ease-in-out 0s;
}
.auth-input-wrap input:focus,
.auth-input-wrap input:focus-visible {
  outline: none;
  border-color: var(--auth-primary);
  box-shadow: 0 0 0 3px rgba(169, 129, 79, 0.3);
}
.auth-toggle-password {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  padding: 8px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 6px;
}
.auth-toggle-password:hover {
  color: var(--auth-primary);
}
.auth-toggle-password:focus-visible {
  outline: 2px solid var(--auth-primary);
  outline-offset: 2px;
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
}
.auth-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  cursor: pointer;
}
.auth-checkbox input {
  width: 17px;
  height: 17px;
  accent-color: var(--auth-primary);
  cursor: pointer;
}
.auth-link {
  color: var(--auth-primary);
  text-decoration: none;
  font-weight: 600;
}
.auth-link:hover,
.auth-link:focus-visible {
  text-decoration: underline;
}

.auth-submit {
  width: 100%;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: #F3ECD3;
  color: #25382A;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.auth-submit:hover {
  background: #e8dfbd;
}
.auth-submit:focus-visible {
  outline: 2px solid var(--auth-dark);
  outline-offset: 2px;
}

/* ---------- Select-Company / select-branch step ---------- */
.auth-simple-wrap {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.auth-simple-card {
  width: 100%;
  max-width: 440px;
  background: var(--auth-white);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(23, 33, 43, 0.10);
  padding: 2.25rem;
  text-align: center;
  animation: auth-fade-up 0.4s ease-out both;
}
.auth-simple-card h1 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--auth-dark);
  margin: 0.5rem 0 0.25rem;
}
.auth-simple-card .auth-subtitle {
  margin-bottom: 1.5rem;
}
.auth-company-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.auth-company-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1.5px solid var(--auth-border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.auth-company-option:hover {
  border-color: var(--auth-primary);
  background: rgba(18, 162, 168, 0.05);
}
.auth-company-option input {
  accent-color: var(--auth-primary);
  width: 18px;
  height: 18px;
}
.auth-company-option span {
  font-weight: 600;
  color: var(--auth-dark);
  font-size: 0.92rem;
}

/* ---------- Select-Company (Super Admin, rich grid) ---------- */
.company-select-right {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  background: var(--auth-bg);
  padding: 1.5rem 2.5rem;
  overflow-y: auto;
}
.company-select-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  padding: 0.5rem 0 1.25rem;
}
.company-select-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.company-select-user-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--auth-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.company-select-user strong {
  display: block;
  font-size: 0.88rem;
  color: var(--auth-dark);
}
.company-select-user small {
  display: block;
  font-size: 0.75rem;
  color: var(--auth-secondary);
}
.company-select-logout {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  color: var(--auth-text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
}
.company-select-logout:hover {
  background: rgba(23, 33, 43, 0.06);
}

.company-select-card {
  flex: 1;
  background: var(--auth-white);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(23, 33, 43, 0.08), 0 2px 8px rgba(23, 33, 43, 0.05);
  padding: 2.5rem;
  text-align: center;
  animation: auth-fade-up 0.5s ease-out both;
}
.company-select-highlight {
  color: var(--auth-primary);
}
.company-select-subhead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.company-select-subhead h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--auth-dark);
  margin: 0;
}
.company-select-hint {
  color: var(--auth-secondary);
  font-size: 0.85rem;
  margin: 0 0 1.5rem;
}

.company-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.company-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid var(--auth-border);
  border-radius: 14px;
  padding: 1.5rem 1rem 1.25rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.company-card:hover {
  border-color: var(--auth-primary);
}
.company-card:has(input:checked) {
  border-color: var(--auth-primary);
  box-shadow: 0 0 0 3px rgba(18, 162, 168, 0.15);
}
.company-card input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--auth-border);
  border-radius: 50%;
  margin: 0.5rem 0 0;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
.company-card input[type="radio"]:checked {
  border-color: var(--auth-primary);
}
.company-card input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--auth-primary);
}
.company-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--auth-border);
  background: var(--auth-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  overflow: hidden;
}
.company-badge-ov {
  color: var(--auth-primary);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.4rem;
}
.company-badge-aso {
  color: #1a56db;
  letter-spacing: 0.02em;
}
.company-badge-asb {
  color: #17212B;
}
.company-badge-asb-a {
  color: #e67e22;
}
.company-badge-generic {
  color: var(--auth-primary);
  background: rgba(18, 162, 168, 0.10);
}
/* A company with a real uploaded logo (Company.logo) gets a wide
   rectangular slot instead of the plain circular initials badge above —
   the three real logos (Opttica Veneta/Optiker/Arora Sons Optics) are
   wordmarks, not square icons, so forcing them into a 64x64 circle would
   crop or squash them. object-fit:contain preserves each logo's own
   aspect ratio; a company with no logo yet (Arora Sons B2B) keeps the
   circular initials badge above unchanged. */
.company-badge-logo {
  width: 100%;
  height: 64px;
  border-radius: 8px;
  border: none;
  background: transparent;
}
.company-badge-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.company-card-name {
  font-weight: 700;
  color: var(--auth-dark);
  font-size: 0.98rem;
}
.company-card-tagline {
  color: var(--auth-secondary);
  font-size: 0.78rem;
  line-height: 1.35;
  min-height: 2.4em;
}
.company-card-branches {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--auth-secondary);
  font-size: 0.78rem;
}

.company-select-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--auth-primary);
  font-size: 0.8rem;
  margin: 1rem 0 0;
}

@media (max-width: 1199.98px) {
  .company-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .company-select-right { padding: 1.25rem; }
  .company-select-card { padding: 1.5rem; }
  .company-grid { grid-template-columns: 1fr; }
  .company-select-topbar { justify-content: space-between; }
}

@keyframes auth-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-left-inner, .auth-card, .auth-simple-card { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .auth-left { padding: 2rem; }
  .auth-features { gap: 0.85rem; }
}

@media (max-width: 767.98px) {
  .auth-page-row { flex-direction: column; }
  .auth-left, .auth-right { flex: none; width: 100%; }
  .auth-left { padding: 2rem 1.5rem 1.5rem; }
  .auth-logo-text { font-size: 1.5rem; }
  .auth-logo-text-sub { font-size: 1.1rem; }
  .auth-tagline { font-size: 0.95rem; margin-bottom: 1.25rem; }
  .auth-features { margin-bottom: 1.5rem; }
  .auth-glasses-art { display: none; }
  .auth-right { padding: 1.5rem; justify-content: center; }
  .auth-card { padding: 28px; }
  .auth-input-wrap input, .auth-submit { height: 52px; }
}

/* ---------- Super Admin branch-selection landing page ---------- */
.branch-select-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: url('../IMAGE/login_page_photo.png') center bottom/cover no-repeat;
}

.branch-select-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 2.5rem;
  background: rgba(23, 33, 43, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  flex-wrap: wrap;
}
.branch-select-brand {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.branch-select-brand-name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
}
.branch-select-brand-name span {
  color: var(--auth-primary);
  margin-left: 0.35rem;
}
.branch-select-tagline {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.branch-select-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.branch-select-user-info {
  text-align: right;
  line-height: 1.25;
}
.branch-select-user-info strong {
  display: block;
  font-size: 0.88rem;
  color: #fff;
}
.branch-select-user-info small {
  display: block;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.65);
}
.branch-select-user-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(169, 129, 79, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.branch-select-logout {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 0.9rem;
  border-radius: 7px;
}
.branch-select-logout:hover {
  background: rgba(255, 255, 255, 0.16);
}

.branch-select-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 2rem 2.5rem;
  text-align: center;
}
.branch-select-hero {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: rgba(15, 20, 16, 0.55);
  border-radius: 16px;
  padding: 1.5rem 2.5rem;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.branch-select-heading {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 4px 18px rgba(0, 0, 0, 0.5);
}
.branch-select-heading span {
  color: #F3ECD3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 4px 18px rgba(0, 0, 0, 0.55);
}
.branch-select-subheading {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.92);
  margin: 0.6rem 0 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.branch-select-underline {
  display: block;
  width: 56px;
  height: 3px;
  background: var(--auth-primary);
  border-radius: 2px;
  margin: 1.1rem 0 2.5rem;
}
.branch-select-error {
  max-width: 480px;
}

.branch-grid {
  width: 100%;
  max-width: 1600px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.branch-card-form {
  display: contents;
}
.branch-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: rgba(23, 33, 43, 0.75);
  border: 1.5px solid var(--branch-accent, rgba(255, 255, 255, 0.25));
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.branch-card:hover,
.branch-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35);
}
.branch-card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.branch-card.is-loading {
  opacity: 0.7;
  cursor: wait;
}
.branch-card:disabled {
  cursor: not-allowed;
}

.branch-card-teal { --branch-accent: #2DD4C8; }
.branch-card-violet { --branch-accent: #B68CF0; }
.branch-card-emerald { --branch-accent: #34D399; }
.branch-card-gold { --branch-accent: #F0A850; }

.branch-card-image {
  height: 150px;
  background-size: cover;
  background-position: center;
}
/* Image-only card — the photo itself already carries the branch name/
   location, so the text body below it is dropped entirely. Full image
   shown uncropped (contain, not cover) at a larger size. */
.branch-card-image-only {
  padding: 0;
  aspect-ratio: 4 / 3;
  background: rgba(23, 33, 43, 0.75);
}
.branch-card-image-only .branch-card-image {
  height: 100%;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.branch-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.25rem 1.3rem;
}
.branch-card-number {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--branch-accent, var(--auth-primary));
}
.branch-card-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}
.branch-card-location {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
}
.branch-card-enter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: #fff;
}
.branch-card-arrow {
  margin-left: auto;
  transition: transform 0.15s ease;
}
.branch-card:hover .branch-card-arrow {
  transform: translateX(3px);
}

@media (max-width: 1199.98px) {
  .branch-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .branch-grid { grid-template-columns: 1fr; }
  .branch-select-header { padding: 1rem 1.25rem; }
  .branch-select-heading { font-size: 1.8rem; }
  .branch-select-main { padding: 2.25rem 1.25rem 2rem; }
}


/* CTC Solutions support bar — full-width strip at the very bottom of the
   auth footer, kept compact so .auth-page never exceeds 100vh. */
.auth-support-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: 10px;
  background: #F3ECD3;
  color: #1A2B5C;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  text-shadow: none;
}
.auth-support-bar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.auth-support-bar-logo {
  height: 26px;
  width: 26px;
  border-radius: 50%;
  object-fit: contain;
  background: #1A2B5C;
}
.auth-support-bar-tagline {
  font-size: 0.78rem;
  font-weight: 600;
}
.auth-support-bar-contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.78rem;
}
.auth-support-bar-label {
  font-weight: 600;
  opacity: 0.8;
}
.auth-support-bar-link {
  color: #1A2B5C;
  font-weight: 600;
  text-decoration: none;
}
.auth-support-bar-link:hover {
  text-decoration: underline;
}
@media (max-width: 575.98px) {
  .auth-support-bar { flex-direction: column; align-items: flex-start; }
}