/* ================================================================
   Bathilbazar Auth — Frontend Styles v1.4
   Theme: Bathilbazar Blue (#0062BD / #032A51) + Yellow (#FFD200 / #FDB813)
   ================================================================ */

/* ── Google Font Import ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── CSS Variables ─────────────────────────────────────────────── */
:root {
  --bba-blue: #0062BD;
  --bba-blue-dark: #032A51;
  --bba-blue-mid: #0077DC;
  --bba-blue-light: #e8f2fc;
  --bba-yellow: #FFD200;
  --bba-yellow-dark: #FDB813;
  --bba-yellow-pale: #fffde7;
  --bba-yellow-glow: rgba(255, 210, 0, .25);
  --bba-white: #ffffff;
  --bba-grey-bg: #f5f7fb;
  --bba-grey-border: #dde3f0;
  --bba-text: #032A51;
  --bba-text-soft: #6b7a99;
  --bba-success: #16a34a;
  --bba-success-bg: #f0fdf4;
  --bba-error: #dc2626;
  --bba-error-bg: #fef2f2;
  --bba-radius: 14px;
  --bba-shadow: 0 12px 48px rgba(3, 42, 81, .22);
  --bba-shadow-sm: 0 3px 14px rgba(3, 42, 81, .12);
  --bba-transition: 0.22s cubic-bezier(.4, 0, .2, 1);
  --bba-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Screen Banner (full-width instant message) ─────────────────── */
#bba-screen-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999999;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  font-family: var(--bba-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
  animation: bba-banner-slide-in .4s cubic-bezier(.34, 1.56, .64, 1) both;
}

#bba-screen-banner.active {
  display: flex;
}

#bba-screen-banner.bba-banner-success {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
}

#bba-screen-banner.bba-banner-error {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #fff;
}

#bba-screen-banner.bba-banner-info {
  background: linear-gradient(135deg, var(--bba-blue-dark), var(--bba-blue));
  color: #fff;
}

#bba-screen-banner.bba-banner-warning {
  background: linear-gradient(135deg, var(--bba-yellow), var(--bba-yellow-dark));
  color: var(--bba-blue-dark);
}

.bba-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bba-banner-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.bba-banner-close {
  font-size: 20px;
  cursor: pointer;
  opacity: .75;
  transition: opacity .2s;
  flex-shrink: 0;
  line-height: 1;
  background: none;
  border: none;
  color: inherit;
  padding: 2px 4px;
}

.bba-banner-close:hover {
  opacity: 1;
}

@keyframes bba-banner-slide-in {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes bba-banner-slide-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

/* ── Toast Notification System ─────────────────────────────────── */
#bba-toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  font-family: var(--bba-font);
}

.bba-toast {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 300px;
  max-width: 400px;
  padding: 16px 18px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .1);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  pointer-events: all;
  animation: bba-toast-in .38s cubic-bezier(.34, 1.56, .64, 1) both;
  position: relative;
  overflow: hidden;
  border: none;
}

.bba-toast.bba-toast-out {
  animation: bba-toast-out .3s ease forwards;
}

/* Colored backgrounds — vivid theme */
.bba-toast-success {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #fff;
}

.bba-toast-error {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #fff;
}

.bba-toast-info {
  background: linear-gradient(135deg, var(--bba-blue-dark) 0%, var(--bba-blue) 100%);
  color: #fff;
}

.bba-toast-warning {
  background: linear-gradient(135deg, var(--bba-yellow) 0%, var(--bba-yellow-dark) 100%);
  color: var(--bba-blue-dark);
}

.bba-toast-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .2));
}

.bba-toast-body {
  flex: 1;
}

.bba-toast-title {
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 3px;
  letter-spacing: .01em;
}

.bba-toast-close {
  cursor: pointer;
  opacity: .7;
  font-size: 18px;
  line-height: 1;
  padding: 2px 4px;
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
}

.bba-toast-close:hover {
  opacity: 1;
}

.bba-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0;
  animation: bba-toast-progress 4s linear forwards;
}

.bba-toast-success .bba-toast-progress {
  background: rgba(255, 255, 255, .5);
}

.bba-toast-error .bba-toast-progress {
  background: rgba(255, 255, 255, .5);
}

.bba-toast-info .bba-toast-progress {
  background: rgba(255, 255, 255, .5);
}

.bba-toast-warning .bba-toast-progress {
  background: rgba(3, 42, 81, .3);
}

@keyframes bba-toast-in {
  from {
    opacity: 0;
    transform: translateX(80px) scale(.9);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes bba-toast-out {
  to {
    opacity: 0;
    transform: translateX(100px);
    max-height: 0;
    padding: 0;
    margin: 0;
  }
}

@keyframes bba-toast-progress {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

/* ── Modal Backdrop ────────────────────────────────────────────── */
.bba-modal {
  display: none;
  position: fixed;
  z-index: 99998;
  inset: 0;
  background: rgba(3, 42, 81, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: var(--bba-font);
}

.bba-modal.active {
  display: flex;
  animation: bba-backdrop-in .28s ease both;
}

@keyframes bba-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bba-modal-pop {
  from { opacity: 0; transform: scale(.96) translateY(28px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Two-column modal (login + register) ── */
.bba-modal-content {
  background: #fff;
  border-radius: 24px;
  max-height: 92vh;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(11,31,92,.04), 0 20px 56px rgba(11,31,92,.18), 0 0 0 1px rgba(11,31,92,.07);
  animation: bba-modal-pop .35s cubic-bezier(.22,1,.36,1) both;
  position: relative;
  display: flex;
  width: 100%;
  max-width: 780px;
  align-items: stretch;
}

/* Single-column modal (password reset) */
.bba-modal-content.bba-modal-simple {
  max-width: 440px;
  flex-direction: column;
  padding: 40px 36px 36px;
}

/* ── Left navy panel (reuses login-form.php classes) ── */
.bba-lf-left {
  width: 38%;
  flex-shrink: 0;
  background: #0b1f5c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 30px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.bba-lf-ld { position: absolute; pointer-events: none; }
.bba-lf-ld1 { top:-60px;right:-60px;width:190px;height:190px;border:32px solid rgba(255,194,14,.10);border-radius:50%; }
.bba-lf-ld2 { bottom:-50px;left:-50px;width:170px;height:170px;border:28px solid rgba(255,255,255,.05);border-radius:50%; }
.bba-lf-ld3 { top:-30px;left:-30px;width:110px;height:110px;background:rgba(255,194,14,.07);border-radius:50%; }
.bba-lf-ld4 { bottom:-55px;right:-40px;width:160px;height:160px;background:rgba(255,255,255,.04);border-radius:50%; }
.bba-lf-ld5 { inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1px);background-size:22px 22px; }
.bba-lf-ld6 { top:0;left:0;right:0;height:4px;background:#ffc20e;opacity:.6; }
.bba-lf-ld7 { inset:0;background:repeating-linear-gradient(-45deg,transparent,transparent 24px,rgba(255,255,255,.015) 24px,rgba(255,255,255,.015) 25px); }
.bba-lf-ld8 { top:50%;right:-18px;transform:translateY(-50%);width:60px;height:60px;background:#ffc20e;opacity:.12;border-radius:50%; }
.bba-lf-left-inner { position:relative;z-index:1;display:flex;flex-direction:column;align-items:center; }
.bba-lf-logo { width:140px;display:block;margin:0 auto 20px; }
.bba-lf-logo-fb { display:none;font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:20px; }
.bba-lf-logo-fb em { font-style:normal;color:#ffc20e; }
.bba-lf-left-inner h2 { font-size:15px;font-weight:600;color:rgba(255,255,255,.9);line-height:1.45; }
.bba-lf-left-inner h2 span { color:#ffc20e;font-weight:700; }
.bba-lf-line { width:36px;height:3px;background:#ffc20e;border-radius:2px;margin:14px auto 16px;opacity:.75; }
.bba-lf-sub { font-size:12px;font-weight:300;color:rgba(255,255,255,.45);line-height:1.7;max-width:200px; }

/* ── Right white form panel ── */
.bba-lf-right {
  flex: 1;
  padding: 48px 38px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow-y: auto;
  max-height: 92vh;
  background: #fff;
}
.bba-lf-right::before {
  content: '';
  position: absolute;
  top: 0; left: 38px; right: 38px;
  height: 3px;
  background: linear-gradient(90deg, #ffc20e 0%, #e0a800 55%, transparent);
  border-radius: 0 0 4px 4px;
  opacity: .6;
}

/* ── Close button (right panel) ── */
.bba-lf-close-btn {
  position: absolute;
  top: 14px; right: 14px;
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 1.5px solid #dde4f0;
  background: none;
  color: #7a88aa;
  font-size: 17px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  z-index: 5;
}
.bba-lf-close-btn:hover { background: #eef2f9; color: #0b1f5c; border-color: #0b1f5c; }

/* Simple modal close (no right panel) */
.bba-modal-simple .bba-lf-close-btn {
  top: 14px; right: 14px;
}

/* ── Head ── */
.bba-lf-head { margin-bottom: 22px; }
.bba-lf-head h1 { font-size: 26px; font-weight: 800; color: #0f1c42; letter-spacing: -.025em; line-height: 1.18; margin-bottom: 4px; font-family: var(--bba-font); }
.bba-lf-hl { position: relative; display: inline-block; }
.bba-lf-hl::after { content: ''; position: absolute; bottom: 2px; left: 0; right: 0; height: 7px; background: #ffc20e; border-radius: 3px; z-index: -1; opacity: .38; }
.bba-lf-head p { font-size: 13px; color: #7a88aa; font-weight: 300; }

/* ── Fields ── */
.bba-lf-field { margin-bottom: 13px; }
.bba-lf-field label { display: block; font-size: 11px; font-weight: 600; color: #0f1c42; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.bba-lf-iw { position: relative; }
.bba-lf-iw input {
  width: 100%; padding: 11px 42px 11px 14px;
  background: #f7f9fe; border: 1.5px solid #dde4f0;
  border-radius: 10px;
  font-family: var(--bba-font); font-size: 13.5px; font-weight: 400;
  color: #0f1c42; outline: none; caret-color: #e0a800;
  transition: border-color .22s, background .22s, box-shadow .22s;
  box-sizing: border-box;
}
.bba-lf-iw input::placeholder { color: #bcc6da; font-weight: 300; }
.bba-lf-iw input:focus { border-color: #ffc20e; background: #fffbec; box-shadow: 0 0 0 3px rgba(255,194,14,.10); }
.bba-lf-i-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #ccd5e8; pointer-events: none; transition: color .22s; display: flex; }
.bba-lf-field:focus-within .bba-lf-i-icon { color: #e0a800; }
.bba-lf-eye { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #7a88aa; padding: 2px; display: flex; transition: color .2s; }
.bba-lf-eye:hover { color: #0b1f5c; }

/* Two-col row for first+last name */
.bba-lf-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Options row ── */
.bba-lf-opt { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 18px; }
.bba-lf-remember { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #7a88aa; cursor: pointer; user-select: none; font-weight: 400; }
.bba-lf-remember input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; border: 1.5px solid #dde4f0; border-radius: 4px; background: #f7f9fe; cursor: pointer; position: relative; flex-shrink: 0; transition: all .18s; }
.bba-lf-remember input[type="checkbox"]:checked { background: #0b1f5c; border-color: #0b1f5c; }
.bba-lf-remember input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 1px; left: 4px; width: 4px; height: 7px; border: 2px solid #ffc20e; border-top: none; border-left: none; transform: rotate(45deg); }
.bba-lf-forgot { font-size: 12.5px; color: #0b1f5c; font-weight: 600; text-decoration: none; transition: color .2s; }
.bba-lf-forgot:hover { color: #e0a800; }

/* ── Submit button ── */
.bba-lf-btn {
  width: 100%; padding: 13px 18px;
  background: #0b1f5c; color: #fff;
  font-family: var(--bba-font); font-size: 14px; font-weight: 700;
  letter-spacing: .04em; border: none; border-radius: 11px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  position: relative; overflow: hidden;
  transition: transform .22s, box-shadow .25s;
}
.bba-lf-btn::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #ffc20e; border-radius: 0 0 11px 11px; }
.bba-lf-btn::before { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); transform: skewX(-15deg); transition: left .5s ease; }
.bba-lf-btn:hover::before { left: 160%; }
.bba-lf-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11,31,92,.28); }
.bba-lf-btn:active { transform: translateY(0); box-shadow: none; }
.bba-lf-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.bba-lf-btn.loading { color: transparent; pointer-events: none; }
.bba-lf-btn.loading::after { display: none; }
.bba-lf-btn.loading .bba-lf-spinner { display: block; }
.bba-lf-spinner { display: none; position: absolute; width: 20px; height: 20px; border: 2.5px solid rgba(255,255,255,.25); border-top-color: #ffc20e; border-radius: 50%; animation: bbaLfSpin .6s linear infinite; }
@keyframes bbaLfSpin { to { transform: rotate(360deg); } }
.bba-lf-arrow { display: inline-flex; transition: transform .22s; }
.bba-lf-btn:hover .bba-lf-arrow { transform: translateX(5px); }

/* ── Footer link ── */
.bba-lf-footer { text-align: center; margin-top: 18px; font-size: 13px; color: #7a88aa; font-weight: 300; }
.bba-lf-footer a { color: #0b1f5c; font-weight: 700; text-decoration: none; border-bottom: 2px solid #ffc20e; padding-bottom: 1px; transition: color .2s; }
.bba-lf-footer a:hover { color: #e0a800; }

/* ── Alert inside popup ── */
.bba-lf-alert { display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px; border-radius: 9px; font-size: 13px; margin-bottom: 14px; line-height: 1.45; font-weight: 500; }
.bba-lf-alert--error   { background: #fef2f2; color: #991b1b; border: 1.5px solid #fecaca; }
.bba-lf-alert--success { background: #f0fdf4; color: #166534; border: 1.5px solid #bbf7d0; }
@keyframes bbaLfShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
.bba-lf-shake { animation: bbaLfShake .45s both; }

/* ── Modal Body (legacy, kept for inline shortcode forms) ── */
.bba-modal-body {
  padding: 26px 30px 30px;
  flex: 1;
}

/* ── Form Groups ───────────────────────────────────────────────── */
.bba-form-group {
  margin-bottom: 16px;
}

.bba-form-group label {
  display: block;
  margin-bottom: 7px;
  font-weight: 700;
  color: var(--bba-text);
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: var(--bba-font);
}

.bba-form-group label i {
  margin-right: 5px;
  color: var(--bba-blue);
  font-size: 11px;
}

.bba-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── Input Fields ──────────────────────────────────────────────── */
.bba-form-control {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--bba-grey-border);
  border-radius: 9px;
  font-size: 14px;
  color: var(--bba-text);
  background: var(--bba-white);
  transition: border-color var(--bba-transition), box-shadow var(--bba-transition), background var(--bba-transition);
  box-sizing: border-box;
  outline: none;
  font-family: var(--bba-font);
}

.bba-form-control:focus {
  border-color: var(--bba-yellow);
  box-shadow: 0 0 0 4px var(--bba-yellow-glow);
  background: var(--bba-yellow-pale);
}

.bba-form-control::placeholder {
  color: #b0bad0;
}

/* Input with eye icon */
.bba-input-wrap {
  position: relative;
}

.bba-input-wrap .bba-form-control {
  padding-right: 44px;
}

.bba-eye-toggle {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--bba-text-soft);
  font-size: 15px;
  transition: color var(--bba-transition);
}

.bba-eye-toggle:hover {
  color: var(--bba-blue);
}

/* ── Checkbox ──────────────────────────────────────────────────── */
.bba-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}

.bba-checkbox input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--bba-blue);
  cursor: pointer;
  flex-shrink: 0;
}

.bba-checkbox label {
  margin: 0;
  font-weight: 500;
  cursor: pointer;
  font-size: 13px;
  color: var(--bba-text-soft);
  text-transform: none;
  letter-spacing: 0;
}

.bba-checkbox a {
  color: var(--bba-blue);
  text-decoration: none;
}

.bba-checkbox a:hover {
  text-decoration: underline;
}

/* ── Primary Button ────────────────────────────────────────────── */
.bba-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--bba-yellow) 0%, var(--bba-yellow-dark) 100%);
  color: var(--bba-blue-dark);
  border: none;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--bba-transition), box-shadow var(--bba-transition), filter var(--bba-transition);
  box-shadow: 0 5px 20px rgba(255, 210, 0, .45);
  font-family: var(--bba-font);
  position: relative;
  overflow: hidden;
  letter-spacing: .02em;
}

.bba-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(255, 210, 0, .55);
  filter: brightness(1.04);
}

.bba-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 210, 0, .4);
}

.bba-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* Ripple */
.bba-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, .45) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .4s;
}

.bba-btn:active::before {
  opacity: 1;
  transition: 0s;
}

/* Loading spinner */
.bba-btn.loading {
  color: transparent;
  pointer-events: none;
}

.bba-btn.loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(3, 42, 81, .25);
  border-top-color: var(--bba-blue-dark);
  border-radius: 50%;
  animation: bba-spin .65s linear infinite;
}

@keyframes bba-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Alert / Inline Message ────────────────────────────────────── */
.bba-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 9px;
  font-size: 13.5px;
  margin-bottom: 16px;
  line-height: 1.5;
  animation: bba-alert-in .3s ease both;
  font-family: var(--bba-font);
  font-weight: 500;
}

@keyframes bba-alert-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bba-alert i {
  margin-top: 2px;
  font-size: 15px;
  flex-shrink: 0;
}

.bba-alert-success {
  background: var(--bba-success-bg);
  color: #166534;
  border: 1.5px solid #bbf7d0;
}

.bba-alert-success i {
  color: var(--bba-success);
}

.bba-alert-error {
  background: var(--bba-error-bg);
  color: #991b1b;
  border: 1.5px solid #fecaca;
}

.bba-alert-error i {
  color: var(--bba-error);
}

.bba-alert-info {
  background: var(--bba-blue-light);
  color: var(--bba-blue-dark);
  border: 1.5px solid #bfdbfe;
}

.bba-alert-info i {
  color: var(--bba-blue);
}

.bba-alert a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ── Divider ───────────────────────────────────────────────────── */
.bba-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--bba-text-soft);
  font-size: 12px;
  font-family: var(--bba-font);
}

.bba-divider::before,
.bba-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bba-grey-border);
}

/* ── Footer links ──────────────────────────────────────────────── */
.bba-text-center {
  text-align: center;
}

.bba-text-muted {
  color: var(--bba-text-soft);
  font-size: 13px;
  font-family: var(--bba-font);
}

.bba-link {
  color: var(--bba-blue);
  text-decoration: none;
  font-weight: 700;
  transition: color var(--bba-transition);
}

.bba-link:hover {
  color: var(--bba-blue-dark);
  text-decoration: underline;
}

/* ── Password Strength ─────────────────────────────────────────── */
.bba-password-strength {
  height: 5px;
  background: var(--bba-grey-border);
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}

.bba-password-strength-bar {
  height: 100%;
  width: 0;
  transition: width .35s ease, background .35s ease;
  border-radius: 3px;
}

.bba-password-strength-weak .bba-password-strength-bar {
  width: 33%;
  background: var(--bba-error);
}

.bba-password-strength-medium .bba-password-strength-bar {
  width: 66%;
  background: #f59e0b;
}

.bba-password-strength-strong .bba-password-strength-bar {
  width: 100%;
  background: var(--bba-success);
}

.bba-password-strength-text {
  font-size: 11px;
  margin-top: 5px;
  font-weight: 700;
  font-family: var(--bba-font);
}

/* ── Resend Verification Link ──────────────────────────────────── */
.bba-resend-verification {
  font-weight: 700;
  cursor: pointer;
  color: inherit;
  opacity: .85;
  display: block;
  margin-top: 5px;
  font-size: 12px;
  text-decoration: underline;
}

.bba-resend-verification:hover {
  opacity: 1;
}

/* ── Row (remember + forgot) ───────────────────────────────────── */
.bba-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  gap: 8px;
}

.bba-remember {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--bba-text-soft);
  cursor: pointer;
  font-family: var(--bba-font);
}

.bba-remember input {
  accent-color: var(--bba-blue);
  width: auto;
}

.bba-forgot {
  font-size: 13px;
  color: var(--bba-blue);
  text-decoration: none;
  font-weight: 700;
  transition: color var(--bba-transition);
  font-family: var(--bba-font);
}

.bba-forgot:hover {
  color: var(--bba-blue-dark);
  text-decoration: underline;
}

/* ── Shortcode Buttons ─────────────────────────────────────────── */
.bba-sc-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--bba-yellow) 0%, var(--bba-yellow-dark) 100%);
  color: var(--bba-blue-dark);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--bba-transition), box-shadow var(--bba-transition), filter var(--bba-transition);
  box-shadow: 0 4px 14px rgba(255, 210, 0, .4);
  font-family: var(--bba-font);
  letter-spacing: .01em;
}

.bba-sc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255, 210, 0, .5);
  color: var(--bba-blue-dark);
  filter: brightness(1.04);
}

.bba-sc-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: transparent;
  color: var(--bba-blue);
  border: 2px solid var(--bba-blue);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--bba-transition);
  font-family: var(--bba-font);
}

.bba-sc-btn-outline:hover {
  background: var(--bba-blue);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 98, 189, .3);
}

/* ── Full-page wrappers ────────────────────────────────────────── */
.bba-page-bg {
  min-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  background: var(--bba-grey-bg);
  font-family: var(--bba-font);
}

.bba-page-inner {
  width: 100%;
  max-width: 520px;
}

.bba-page-logo {
  text-align: center;
  margin-bottom: 24px;
}

.bba-page-logo img {
  max-height: 64px;
  width: auto;
}

.bba-page-logo-txt {
  text-align: center;
  margin-bottom: 24px;
  font-size: 26px;
  font-weight: 800;
  font-family: var(--bba-font);
  color: var(--bba-blue-dark);
}

.bba-page-logo-txt a {
  color: var(--bba-blue);
  text-decoration: none;
}

/* ── Nav menu items ────────────────────────────────────────────── */
a[href="#bba-login-popup"],
a[href="#bba-register-popup"],
a[href="#bba-lost-password"] {
  cursor: pointer;
}

.bba-nav-item a i,
.bba-nav-item>a>i {
  margin-right: 5px;
  font-size: .9em;
  vertical-align: -1px;
  pointer-events: none;
}

/* ── Shake animation for invalid fields ─────────────────────────── */
@keyframes bba-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-6px);
  }

  40%,
  80% {
    transform: translateX(6px);
  }
}

.bba-shake {
  animation: bba-shake .45s cubic-bezier(.36, .07, .19, .97) both;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Hide navy left panel on mobile — show only the form */
  .bba-lf-left {
    display: none;
  }

  .bba-modal-content {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    align-self: flex-end;
  }

  .bba-modal-content.bba-modal-simple {
    border-radius: 20px 20px 0 0;
    padding: 36px 22px 28px;
  }

  .bba-modal {
    align-items: flex-end;
    padding: 0;
  }

  .bba-lf-right {
    padding: 48px 22px 28px;
  }

  .bba-lf-right::before {
    left: 22px;
    right: 22px;
  }

  .bba-lf-head h1 {
    font-size: 22px;
  }

  .bba-lf-two-col {
    grid-template-columns: 1fr;
  }

  .bba-modal-body {
    padding: 20px 22px 30px;
  }

  #bba-toast-container {
    top: auto;
    bottom: 16px;
    right: 12px;
    left: 12px;
  }

  .bba-toast {
    min-width: unset;
    max-width: 100%;
  }

  #bba-screen-banner {
    padding: 12px 16px;
    font-size: 13px;
  }
}

/* Custom CSS injected by admin */