:root {
  /* Default primary: #0B6E45 = hsl(155, 82%, 24%) — overridden by inline <style> block when user has a custom color */
  --pngx-primary: 155, 82%;
  --pngx-primary-lightness: 24%;
}

body {
  --bs-body-bg: #f5f5f5;
  --bs-link-color-rgb: 11, 110, 69;
  --bs-link-hover-color-rgb: 7, 74, 46;
  font-family: 'Roboto', sans-serif;
}

:lang(ar),
[dir='rtl'] {
  font-family: 'Cairo', sans-serif;
}

.logo {
  height: auto;
  max-width: 100%;
}

.byline {
  font-size: 0.6rem;
  letter-spacing: 0.1rem;
}

.text-primary {
  color: hsl(var(--pngx-primary), var(--pngx-primary-lightness)) !important;
}

.form-control {
  --bs-body-bg: #fff;
}

.btn.btn-primary {
  --bs-btn-bg: hsl(var(--pngx-primary), var(--pngx-primary-lightness));
  --bs-btn-border-color: hsl(var(--pngx-primary), var(--pngx-primary-lightness));
  --bs-btn-hover-bg: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 5%));
  --bs-btn-hover-border-color: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 8%));
  --bs-btn-active-bg: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%));
  --bs-btn-active-border-color: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 13%));
}

.btn-link {
  --bs-btn-color: hsl(var(--pngx-primary), var(--pngx-primary-lightness));
  --bs-btn-hover-color: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 5%));
  --bs-btn-active-color: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%));
}

.form-accounts {
  max-width: 330px;
  min-width: 300px;
}

.form-stacked-top input {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-stacked-middle input {
  margin-bottom: -1px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-stacked-bottom input {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.form-accounts .form-floating input:focus {
  position: relative;
  z-index: 100;
}

.form-accounts .form-floating input:focus~label {
  z-index: 101;
}

/* Split layout */
.branding-panel {
  background-color: hsl(var(--pngx-primary), var(--pngx-primary-lightness));
  background-image: linear-gradient(145deg,
      hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 8%)) 0%,
      hsl(var(--pngx-primary), var(--pngx-primary-lightness)) 45%,
      hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 8%)) 100%);
  color: #fff;
  min-height: 100%;
  position: relative;
  overflow: hidden;
}

/* Corner bubble — top-left */
.branding-panel::before {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  top: -180px;
  left: -160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

/* Corner bubble — bottom-right */
.branding-panel::after {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  bottom: -150px;
  right: -140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.branding-panel>* {
  position: relative;
  z-index: 1;
}

/* Third bubble — mid left, for depth */
.branding-bubble-mid {
  position: absolute;
  width: 260px;
  height: 260px;
  top: 42%;
  left: -90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.055);
  pointer-events: none;
  z-index: 0;
}

.branding-content {
  max-width: 500px;
}

.branding-panel svg path {
  fill: rgba(255, 255, 255, 0.93);
}

.branding-title {
  color: #fff;
}

/* Two-tier headline */
.branding-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  margin-bottom: 0;
}

.branding-headline-pre {
  font-size: 3rem;
  font-weight: 200;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1;
}

.branding-headline-main {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}

.branding-sub {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  margin-bottom: 0;
}

/* Feature list — left accent bar */
.branding-features {
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.branding-features li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-left: 0.85rem;
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.2s;
}

.branding-features li strong {
  font-size: 0.87rem;
  font-weight: 600;
  color: #fff;
}

.branding-features li span {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.45;
}

/* Stats — hero numbers */
.branding-stats {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.1rem;
  align-items: center;
  gap: 0;
}

.branding-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0 1.5rem;
}

.branding-stat-lg {
  padding: 0 1.75rem 0 0;
}

.branding-stat-sep {
  width: 1px;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}

.branding-stat-value {
  font-size: 2.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
}

.branding-stat-lg .branding-stat-value {
  font-size: 3.4rem;
}

.branding-stat-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.form-panel {
  background-color: var(--bs-body-bg);
}

@media (prefers-color-scheme: dark) {

  /* From theme_dark.scss */
  body {
    --bs-body-bg: #161618;
    --bs-body-color: #abb2bf;
    --bs-body-color-rgb: 171, 178, 191;
    --bs-border-color: #47494f;
  }

  .form-control,
  .form-floating {
    --bs-body-bg: #1c1c1f;
  }

  svg.logo .text {
    fill: #abb2bf !important;
  }

  .byline {
    color: #abb2bf;
  }
}