/*
 * PrimePay-owned theme layer for the BVite template.
 *
 * This file is intentionally separate from the minified vendor stylesheet so
 * brand, accessibility, and compatibility changes remain reviewable.
 */

body[data-bvite="theme-PrimePayRed"] {
  --primary-color: #d71920;
  --primary-rgb: 215, 25, 32;
  --primary-dark: #a80f15;
  --primary-darker: #7f0b10;
  --primary-light: #fde8e9;
  --primary-subtle: #fff5f5;
  --accent-color: #ef4444;
  --accent-rgb: 239, 68, 68;
  --focus-ring: rgba(215, 25, 32, 0.28);

  --theme-color1: #d71920;
  --theme-color2: #a80f15;
  --theme-color3: #c2415a;
  --theme-color4: #0a69a8;
  --theme-color5: #b86b00;
  --theme-color6: #147d64;
  --primary-gradient: linear-gradient(145deg, var(--primary-color), var(--primary-dark));

  --bs-primary: #d71920;
  --bs-primary-rgb: 215, 25, 32;
  --bs-primary-text-emphasis: #7f0b10;
  --bs-primary-bg-subtle: #fde8e9;
  --bs-primary-border-subtle: #f4a3a7;
  --bs-link-color: #d71920;
  --bs-link-color-rgb: 215, 25, 32;
  --bs-link-hover-color: #a80f15;
  --bs-link-hover-color-rgb: 168, 15, 21;
  --bs-focus-ring-color: var(--focus-ring);

  --bs-danger: #7a1625;
  --bs-danger-rgb: 122, 22, 37;
  --bs-danger-text-emphasis: #5d101c;
  --bs-danger-bg-subtle: #f9e7ea;
  --bs-danger-border-subtle: #e4a6b0;

  --bs-info: #0a69a8;
  --bs-info-rgb: 10, 105, 168;
  --bs-warning: #b86b00;
  --bs-warning-rgb: 184, 107, 0;
}

[data-bs-theme="dark"] body[data-bvite="theme-PrimePayRed"] {
  --primary-light: #4b1418;
  --primary-subtle: #2b1114;
  --focus-ring: rgba(248, 113, 113, 0.38);

  --bs-primary-text-emphasis: #fca5a5;
  --bs-primary-bg-subtle: #3a1014;
  --bs-primary-border-subtle: #7f0b10;
  --bs-link-color: #fca5a5;
  --bs-link-color-rgb: 252, 165, 165;
  --bs-link-hover-color: #fecaca;
  --bs-link-hover-color-rgb: 254, 202, 202;
  --bs-focus-ring-color: var(--focus-ring);

  --bs-danger-text-emphasis: #fda4af;
  --bs-danger-bg-subtle: #321019;
  --bs-danger-border-subtle: #7a1625;
}

body[data-bvite="theme-PrimePayRed"] .btn.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-dark);
  --bs-btn-hover-border-color: var(--primary-dark);
  --bs-btn-focus-shadow-rgb: var(--primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-darker);
  --bs-btn-active-border-color: var(--primary-darker);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--primary-color);
  --bs-btn-disabled-border-color: var(--primary-color);
}

body[data-bvite="theme-PrimePayRed"] .btn.btn-outline-primary {
  --bs-btn-color: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-color);
  --bs-btn-hover-border-color: var(--primary-color);
  --bs-btn-focus-shadow-rgb: var(--primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-dark);
  --bs-btn-active-border-color: var(--primary-dark);
}

body[data-bvite="theme-PrimePayRed"] .btn.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #7a1625;
  --bs-btn-border-color: #7a1625;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5d101c;
  --bs-btn-hover-border-color: #5d101c;
  --bs-btn-focus-shadow-rgb: 122, 22, 37;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #490b15;
  --bs-btn-active-border-color: #490b15;
}

body[data-bvite="theme-PrimePayRed"] .btn-pill {
  border-radius: var(--bs-border-radius-pill);
}

body[data-bvite="theme-PrimePayRed"] .btn-air-primary {
  box-shadow: 0 0.25rem 0.75rem rgba(var(--primary-rgb), 0.2);
}

body[data-bvite="theme-PrimePayRed"] .btn-air-secondary {
  box-shadow: 0 0.25rem 0.75rem rgba(var(--bs-secondary-rgb), 0.14);
}

html {
  scrollbar-width: thin;
}

body[data-bvite="theme-PrimePayRed"] {
  scrollbar-color: rgba(var(--primary-rgb), 0.62) var(--bs-tertiary-bg);
}

body[data-bvite="theme-PrimePayRed"]::-webkit-scrollbar {
  width: 0.65rem;
}

body[data-bvite="theme-PrimePayRed"]::-webkit-scrollbar-track {
  background: var(--bs-tertiary-bg);
}

body[data-bvite="theme-PrimePayRed"]::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-rgb), 0.62);
  border: 2px solid var(--bs-tertiary-bg);
  border-radius: 1rem;
}

body[data-bvite="theme-PrimePayRed"]::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

/*
 * Public pages have no sidebar or page-header region. The vendor grid reserves
 * both regions, so an explicit public shell is required to prevent an empty
 * desktop column and an internal app-style scrolling pane.
 */
body[data-bvite="theme-PrimePayRed"].primepay-public-shell > main {
  grid-template-areas:
    "brand head"
    "wrapper wrapper"
    "footer footer";
  grid-template-columns: minmax(12rem, 14.375rem) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  min-height: 100vh;
}

body[data-bvite="theme-PrimePayRed"].primepay-public-shell > main .page-body {
  height: auto;
  min-width: 0;
  overflow: visible;
}

body[data-bvite="theme-PrimePayRed"].primepay-public-shell .primepay-header-actions .btn {
  white-space: nowrap;
}

body[data-bvite="theme-PrimePayRed"] .primepay-public-nav a,
body[data-bvite="theme-PrimePayRed"] .primepay-public-footer a {
  color: var(--bs-body-color);
  text-decoration: none;
}

body[data-bvite="theme-PrimePayRed"] .primepay-public-nav a {
  font-size: 0.875rem;
  font-weight: 600;
}

body[data-bvite="theme-PrimePayRed"] .primepay-public-nav a:hover,
body[data-bvite="theme-PrimePayRed"] .primepay-public-footer a:hover {
  color: var(--primary-color);
}

body[data-bvite="theme-PrimePayRed"] .primepay-public-footer a:not(.text-decoration-none) {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

body[data-bvite="theme-PrimePayRed"] .primepay-page-intro > p {
  max-width: 48rem;
}

body[data-bvite="theme-PrimePayRed"] .primepay-page-intro h1 {
  text-wrap: balance;
}

@media (max-width: 575.98px) {
  body[data-bvite="theme-PrimePayRed"].primepay-public-shell > main {
    grid-template-areas:
      "brand"
      "head"
      "wrapper"
      "footer";
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-bvite="theme-PrimePayRed"].primepay-public-shell > main > header {
    padding-right: 1.5rem !important;
  }

  body[data-bvite="theme-PrimePayRed"].primepay-public-shell .primepay-header-actions {
    flex-wrap: wrap;
    margin-left: 0 !important;
  }
}

/* Keep auth screens within the viewport when their content fits. */
body.auth main {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
  body.auth main {
    grid-template-columns: minmax(0, 1fr) minmax(460px, 540px);
  }
}

@media (min-width: 1400px) {
  body.auth main {
    grid-template-columns: minmax(0, 1fr) minmax(500px, 600px);
  }
}

@media (min-width: 992px) {
  body.auth main {
    grid-template-areas:
      "auth-header auth-header"
      "auth-aside auth-body"
      "auth-footer auth-footer";
    grid-template-rows: 80px minmax(0, 1fr) auto;
    min-height: 100vh;
    min-height: 100svh;
  }
}

body.auth main .auth-aside {
  color: #fff;
  background-color: #171619;
  background-image: linear-gradient(90deg, rgba(15, 14, 16, 0.92) 0%, rgba(15, 14, 16, 0.72) 55%, rgba(15, 14, 16, 0.1) 100%), url('../images/resources/primepay-merchant-hero.webp');
  background-position: center, center right;
  background-size: cover;
}

body.auth main .auth-aside > .container {
  max-width: 36rem;
}

body.auth main .auth-aside h2,
body.auth main .auth-aside p {
  max-width: 27rem;
}

body.auth main .auth-body > .primepay-auth-card {
  max-width: 440px;
  margin-inline: auto;
}

body.auth main .primepay-auth-card .form-control {
  border-color: var(--bs-secondary-color);
}

body.auth main .primepay-auth-card .input-group .form-control {
  border-right: 0;
}

body.auth main .primepay-auth-card .input-group .btn {
  border-color: var(--bs-secondary-color);
}

body.auth main .auth-body {
  height: auto;
  min-height: 0;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 992px) {
  body.auth main .auth-body {
    min-height: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

@media (min-width: 1400px) {
  body.auth main .auth-body > .primepay-auth-card {
    max-width: 400px;
  }
}

@media (max-width: 575.98px) {
  body.auth main .auth-header {
    min-height: 4.5rem;
  }

  body.auth main .auth-body {
    padding: 0.5rem 1rem 0.75rem;
  }

  body.auth main .auth-body > .primepay-auth-card {
    padding: 1rem !important;
  }

  body.auth main .primepay-auth-card .row {
    --bs-gutter-y: 0.5rem;
  }

  body.auth main .primepay-auth-card .form-label {
    margin-bottom: 0.25rem;
  }

  body.auth main .primepay-auth-card .form-control,
  body.auth main .primepay-auth-card .input-group > .btn {
    min-height: 2.5rem;
  }

  body.auth main footer {
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
  }
}

body[data-bvite="theme-PrimePayRed"] :focus-visible {
  outline: 0.2rem solid var(--focus-ring);
  outline-offset: 0.15rem;
}

@media (prefers-reduced-motion: reduce) {
  body[data-bvite="theme-PrimePayRed"] *,
  body[data-bvite="theme-PrimePayRed"] *::before,
  body[data-bvite="theme-PrimePayRed"] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}