/* Bigger background shapes */
.onboarding-login-shape::before {
  content: "";
  position: absolute;
  left: -250px; /* was -125px */
  bottom: -200px; /* was -100px */
  width: 854px; /* was 427px */
  height: 834px; /* was 417px */
  border-radius: 100%;
  background-color: #fb977d;
}

.onboarding-login-shape::after {
  content: "";
  position: absolute;
  top: -120px; /* was -60px */
  right: 0;
  width: 608px; /* was 304px */
  height: 630px; /* was 315px */
  background-image: url(../images/shaps/shap-login.png);
  background-repeat: no-repeat;
}

.onboarding-login-shape-box::before {
  content: "";
  position: absolute;
  left: -160px; /* was -80px */
  bottom: -160px; /* was -80px */
  width: 400px; /* was 200px */
  height: 400px; /* was 200px */
  border-radius: 100%;
  background-color: #fb977d;
}

.onboarding-login-shape-box::after {
  content: "";
  position: absolute;
  top: -140px; /* was -70px */
  right: -140px; /* was -70px */
  width: 400px; /* was 200px */
  height: 430px; /* was 215px */
  background-image: url(../images/shaps/shap-login.png);
  background-repeat: no-repeat;
  background-size: contain;
}

/* Wider card */
.onboarding-card {
  max-width: 900px; /* was 450px */
  width: 100%;
}

/* Keep your viewport height utility classes */
.mh-n100 { max-height: calc(100vh - 100px); }
.h-n150   { height: calc(100vh - 150px); }
.h-n280   { height: calc(100vh - 280px); }
.h-n80    { height: calc(100vh - 80px); }
.h-n20    { height: calc(100vh - 20px); }

/* Pricing cards */
.plan-card { transition: transform .15s ease, box-shadow .15s ease; }
.plan-card:hover { transform: translateY(-2px); box-shadow: 0 0.75rem 2rem rgba(16,24,40,.08); }
.plan-card .ti { line-height: 1; }

/* Auth toggle icon centering tweak */
/* Ensure the icon inside the small circular hover bg is visually centered */
.nav-item.nav-icon-hover-bg.rounded-circle .nav-link iconify-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  /* Nudge down slightly for optical centering */
  transform: translateY(0.5px);
}

/* Keep the container perfectly centered as well */
.nav-item.nav-icon-hover-bg.rounded-circle .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
}

/* Loader Tokens */
:root[data-bs-theme="light"] {
  --preloader-bg: #ffffff;
  --preloader-fg: #111827;
}
:root[data-bs-theme="dark"] {
  --preloader-bg: #15263a; /* or your app's dark surface */
  --preloader-fg: #e5e7eb;
}

/* Override vendor's hardcoded white */
.preloader,
.loader-bg { background: var(--preloader-bg) !important; }

/* If your loader uses a Bootstrap spinner or similar, tint it */
.preloader .spinner-border,
.loader-bg .spinner-border {
  color: var(--preloader-fg) !important;
  border-color: var(--preloader-fg) !important;
  border-right-color: transparent !important;
}

/* If your loader image is dark-on-light, invert for dark mode */
[data-theme="dark"] .preloader img,
[data-theme="dark"] .loader-bg img {
  filter: invert(1) hue-rotate(180deg) brightness(1.1);
}

/* =========================================
   Skip to Content Link (Accessibility)
   ========================================= */

.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bs-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 0.5rem 0.5rem;
  z-index: 9999;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* =========================================
   Reduced Motion Preferences (Accessibility)
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  .skip-link,
  .scroll-bottom-btn,
  .message-bubble,
  .typing-dots span,
  .btn,
  .card,
  .nav-link,
  .sidebar-link {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================
   Enhanced Focus Styles (Accessibility)
   ========================================= */

/* Consistent focus ring for all interactive elements */
:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Remove default focus outline when not using keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* Enhanced focus for buttons */
.btn:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.25);
}

/* Enhanced focus for form controls */
.form-control:focus-visible,
.form-select:focus-visible {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

/* Focus for links */
a:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Focus for sidebar items */
.sidebar-link:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
  background: rgba(var(--bs-primary-rgb), 0.1);
}

/* Focus for nav items */
.nav-link:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Focus for dropdown items */
.dropdown-item:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
  background: rgba(var(--bs-primary-rgb), 0.1);
}

/* Focus for table rows */
tr:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}

/* =========================================
   Button Loading States
   ========================================= */

.btn-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

.btn-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1em;
  height: 1em;
  margin-left: -0.5em;
  margin-top: -0.5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spinner 0.6s linear infinite;
}

.btn-loading > * {
  visibility: hidden;
}

@keyframes btn-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* Button loading variant with visible text */
.btn-loading-inline {
  position: relative;
  pointer-events: none;
}

.btn-loading-inline::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spinner 0.6s linear infinite;
  vertical-align: middle;
}

/* =========================================
   Form Validation Enhancements
   ========================================= */

.form-control.is-invalid:focus {
  border-color: var(--bs-danger);
  box-shadow: 0 0 0 3px rgba(var(--bs-danger-rgb), 0.15);
}

.form-control.is-valid:focus {
  border-color: var(--bs-success);
  box-shadow: 0 0 0 3px rgba(var(--bs-success-rgb), 0.15);
}

.invalid-feedback {
  font-size: 0.8rem;
  margin-top: 0.35rem;
}

.valid-feedback {
  font-size: 0.8rem;
  margin-top: 0.35rem;
}

/* =========================================
   Keyboard Hints Styling
   ========================================= */

.keyboard-hints {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.75rem;
}

.keyboard-hints kbd {
  font-size: 0.65rem;
  padding: 0.15rem 0.35rem;
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 4px;
  font-family: inherit;
  font-weight: 500;
  color: var(--bs-body-color);
  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}

/* Dark mode override for keyboard hints */
[data-bs-theme="dark"] .keyboard-hints kbd {
  background: var(--bs-dark);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

.keyboard-hints .hint-separator {
  color: var(--bs-secondary);
  margin: 0 0.15rem;
}

.keyboard-hints .hint-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--bs-secondary);
}