/* =========================================================
   BrightPay Online — Bright brand theme
   Loaded AFTER Tailwind v4 browser CDN. Works by:
     1. Declaring Bright CSS variables for use in custom styles.
     2. Overriding the specific Tailwind utility classes used by
        the existing Razor pages — via `!important` because the
        browser CDN injects its output after this file runs.
   No Razor page markup changes required; colours flip globally.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ---- Brand token variables (for custom components) ---- */
:root {
  --bp-blue-50:  #e6f1f9;
  --bp-blue-100: #cce4f2;
  --bp-blue-200: #99c8e5;
  --bp-blue-300: #66add8;
  --bp-blue-400: #3391cb;
  --bp-blue-500: #0070bf;  /* primary */
  --bp-blue-600: #005a99;
  --bp-blue-700: #004373;  /* header bar */
  --bp-blue-800: #002d4c;

  --bp-orange-50:  #fdf4e6;
  --bp-orange-100: #fae6c0;
  --bp-orange-500: #e39400;  /* BrightPay accent */
  --bp-orange-600: #b67600;

  --bp-green-50:  #e8f2ec;
  --bp-green-100: #d2e6d9;
  --bp-green-500: #1d804e;
  --bp-green-600: #176640;
  --bp-green-700: #114d30;

  --bp-red-50:  #fbe6e6;
  --bp-red-100: #f6cccd;
  --bp-red-500: #db2c32;
  --bp-red-600: #af2328;
  --bp-red-700: #83191e;

  --bp-yellow-50:  #fefae6;
  --bp-yellow-100: #fdf2b3;
  --bp-yellow-500: #f2ca00;
  --bp-yellow-600: #c2a200;

  --bp-amber-50:  #fef3e3;
  --bp-amber-100: #fde1b8;
  --bp-amber-500: #e3841a;
  --bp-amber-600: #b66614;

  --bp-gray-50:  #f8f9fa;
  --bp-gray-100: #f8f9fa;
  --bp-gray-200: #e8ecee;
  --bp-gray-300: #dde2e5;
  --bp-gray-400: #ced5da;
  --bp-gray-500: #acb5bc;
  --bp-gray-600: #6b757c;
  --bp-gray-700: #495157;
  --bp-gray-800: #343b40;
  --bp-gray-900: #202528;

  --bp-radius: 0.375rem;
  --bp-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
}

/* ---- Base ---- */
html, body {
  font-family: var(--bp-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--bp-gray-900);
}

/* Headings: Bright uses 500 weight, not 700.
   Tailwind's text-* + font-* utilities still win where applied;
   this catches bare <h1>-<h6>. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--bp-font);
  letter-spacing: -0.01em;
}

/* Focus ring — Bright blue */
:focus-visible {
  outline: 2px solid var(--bp-blue-500);
  outline-offset: 2px;
  border-radius: var(--bp-radius);
}

h1:focus { outline: none; }

/* =========================================================
   Tailwind utility class overrides
   These targets are the exact classes used across the existing
   Razor pages. Each uses !important because the Tailwind CDN
   emits its own utilities AFTER this stylesheet loads.
   Grouped by scale for scannability.
   ========================================================= */

/* ---- Grays ---- */
.bg-gray-50   { background-color: var(--bp-gray-50)  !important; }
.bg-gray-100  { background-color: var(--bp-gray-100) !important; }
.bg-gray-200  { background-color: var(--bp-gray-200) !important; }
.border-gray-100 { border-color: var(--bp-gray-200) !important; }
.border-gray-200 { border-color: var(--bp-gray-300) !important; }
.border-gray-300 { border-color: var(--bp-gray-400) !important; }
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--bp-gray-200) !important; }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--bp-gray-300) !important; }
.text-gray-400 { color: var(--bp-gray-500) !important; }
.text-gray-500 { color: var(--bp-gray-600) !important; }
.text-gray-600 { color: var(--bp-gray-700) !important; }
.text-gray-700 { color: var(--bp-gray-700) !important; }
.text-gray-800 { color: var(--bp-gray-800) !important; }
.text-gray-900 { color: var(--bp-gray-900) !important; }
.hover\:bg-gray-100:hover { background-color: var(--bp-gray-100) !important; }

/* ---- Blues (primary) ---- */
.bg-blue-50   { background-color: var(--bp-blue-50)  !important; }
.bg-blue-100  { background-color: var(--bp-blue-100) !important; }
.bg-blue-600  { background-color: var(--bp-blue-500) !important; }
.bg-blue-700  { background-color: var(--bp-blue-700) !important; }
.hover\:bg-blue-700:hover { background-color: var(--bp-blue-600) !important; }
.hover\:bg-blue-800:hover { background-color: var(--bp-blue-800) !important; }
.border-blue-200 { border-color: var(--bp-blue-200) !important; }
.border-blue-500 { border-color: var(--bp-blue-500) !important; }
.text-blue-100 { color: #cfe4f2 !important; }          /* on dark header */
.text-blue-600 { color: var(--bp-blue-500) !important; }
.text-blue-700 { color: var(--bp-blue-600) !important; }
.text-blue-800 { color: var(--bp-blue-700) !important; }
.hover\:text-blue-700:hover { color: var(--bp-blue-600) !important; }
.hover\:text-blue-800:hover { color: var(--bp-blue-700) !important; }
.focus\:ring-blue-300:focus { box-shadow: 0 0 0 4px rgba(0,112,191,0.25) !important; }
.focus\:border-blue-500:focus { border-color: var(--bp-blue-500) !important; }
.focus\:ring-blue-500:focus  { box-shadow: 0 0 0 1px var(--bp-blue-500) !important; }

/* ---- Greens (success) ---- */
.bg-green-50  { background-color: var(--bp-green-50)  !important; }
.bg-green-100 { background-color: var(--bp-green-100) !important; }
.bg-green-600 { background-color: var(--bp-green-500) !important; }
.hover\:bg-green-700:hover { background-color: var(--bp-green-600) !important; }
.border-green-200 { border-color: var(--bp-green-100) !important; }
.text-green-600 { color: var(--bp-green-500) !important; }
.text-green-700 { color: var(--bp-green-600) !important; }
.text-green-800 { color: var(--bp-green-700) !important; }
.focus\:ring-green-300:focus { box-shadow: 0 0 0 4px rgba(29,128,78,0.25) !important; }

/* ---- Reds (danger) ---- */
.bg-red-50  { background-color: var(--bp-red-50)  !important; }
.bg-red-100 { background-color: var(--bp-red-100) !important; }
.border-red-200 { border-color: var(--bp-red-100) !important; }
.text-red-500 { color: var(--bp-red-500) !important; }
.text-red-600 { color: var(--bp-red-500) !important; }
.text-red-700 { color: var(--bp-red-600) !important; }
.text-red-800 { color: var(--bp-red-700) !important; }

/* ---- Yellows / Ambers (warning/pending) ---- */
.bg-yellow-100 { background-color: var(--bp-yellow-100) !important; }
.text-yellow-800 { color: #615100 !important; }
.bg-amber-50  { background-color: var(--bp-amber-50)  !important; }
.bg-amber-500 { background-color: var(--bp-amber-500) !important; }
.border-amber-200 { border-color: var(--bp-amber-100) !important; }
.text-amber-600 { color: var(--bp-amber-600) !important; }
.text-amber-800 { color: var(--bp-amber-600) !important; }

/* ---- Radii — Bright favours .375rem for inputs & .5rem for cards.
   Tailwind's defaults are already close; just tame the big ones. */
.rounded-lg { border-radius: 0.5rem !important; }
.rounded-md { border-radius: var(--bp-radius) !important; }

/* =========================================================
   Semantic helpers (available for any new razor markup)
   ========================================================= */

.bright-card {
  background: #ffffff;
  border: 1px solid var(--bp-gray-300);
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 50rem;
  background: var(--bp-blue-50);
  color: var(--bp-blue-600);
}
.pill--brightpay { background: var(--bp-orange-50); color: #895900; }
.pill--success  { background: var(--bp-green-50); color: var(--bp-green-700); }
.pill--danger   { background: var(--bp-red-50); color: var(--bp-red-700); }
.pill--warning  { background: var(--bp-yellow-100); color: #615100; }

/* ---- Brand header logo mark (CSS-only for now) ---- */
.bright-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.bright-logo-mark {
  display: inline-block;
  width: 22px;
  height: 28px;
  position: relative;
  flex: none;
}
.bright-logo-mark::before,
.bright-logo-mark::after {
  content: "";
  position: absolute;
  inset: 0;
}
.bright-logo-mark::before {
  background: var(--bp-orange-500);
  clip-path: polygon(0 12%, 40% 0, 40% 75%, 0 100%);
}
.bright-logo-mark::after {
  background: #f4b952;
  clip-path: polygon(40% 0, 100% 30%, 100% 100%, 40% 75%);
}

/* =========================================================
   Semantic form + button + link tokens
   Used by restyled Razor components (PlanSelector, ContactDetails,
   DiscountEntry, PaymentCapture). Keeps markup declarative and
   lets us re-skin globally without touching .razor files.
   ========================================================= */

/* ---- Form labels & sections ---- */
.form-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--bp-gray-900);
  letter-spacing: -0.01em;
}
.form-subsection {
  border-top: 1px solid var(--bp-gray-300);
  padding-top: 1.5rem;
  margin-top: 0.5rem;
}
.form-subsection-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-gray-600);
}
.form-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bp-gray-800);
}

/* ---- Inputs ---- */
.form-input {
  display: block;
  width: 100%;
  padding: 0.5625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--bp-gray-900);
  background: #fff;
  border: 1px solid var(--bp-gray-400);
  border-radius: var(--bp-radius);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-input::placeholder { color: var(--bp-gray-500); }
.form-input:hover:not(:disabled):not([readonly]) { border-color: var(--bp-gray-500); }
.form-input:focus,
.form-input:focus-visible {
  outline: none;
  border-color: var(--bp-blue-500);
  box-shadow: 0 0 0 3px rgba(0,112,191,0.18);
}
.form-input:disabled, .form-input--readonly {
  background: var(--bp-gray-100);
  color: var(--bp-gray-600);
  cursor: not-allowed;
}

/* ---- Form hints / notes ---- */
.form-hint {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--bp-gray-600);
}
.form-hint--success { color: var(--bp-green-600); }
.form-hint--error   { color: var(--bp-red-600); }
.form-hint--info    { color: var(--bp-amber-600); }

.form-note {
  padding: 0.75rem 0.875rem;
  font-size: 0.8125rem;
  border-radius: var(--bp-radius);
  border: 1px solid transparent;
}
.form-note--success { background: var(--bp-green-50); border-color: var(--bp-green-100); color: var(--bp-green-700); }
.form-note--error   { background: var(--bp-red-50);   border-color: var(--bp-red-100);   color: var(--bp-red-700); }
.form-note--info    { background: var(--bp-blue-50);  border-color: var(--bp-blue-100);  color: var(--bp-blue-700); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  border-radius: var(--bp-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-lg { padding: 0.75rem 1.25rem; font-size: 0.9375rem; }

.btn-primary          { background: var(--bp-blue-700); color: #fff; }
.btn-primary:hover    { background: var(--bp-blue-800); }
.btn-primary:focus-visible { box-shadow: 0 0 0 4px rgba(0,67,115,0.28); }

.btn-brightpay        { background: var(--bp-orange-500); color: #fff; }
.btn-brightpay:hover  { background: var(--bp-orange-600); }

.btn-ghost            { background: #fff; color: var(--bp-gray-800); border-color: var(--bp-gray-400); }
.btn-ghost:hover      { background: var(--bp-gray-100); }

/* ---- Links ---- */
.link {
  color: var(--bp-blue-600);
  font-weight: 500;
  cursor: pointer;
}
.link:hover { color: var(--bp-blue-700); }
.link--underline { text-decoration: underline; }
.link--underline:hover { text-decoration: none; }

/* ---- Accents ---- */
.text-brightpay { color: var(--bp-orange-500); }

/* ---- Stripe Elements host ---- */
.stripe-element {
  padding: 0.6875rem 0.75rem;
  border: 1px solid var(--bp-gray-400);
  border-radius: var(--bp-radius);
  background: #fff;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
}
.stripe-element.StripeElement--focus {
  border-color: var(--bp-blue-500);
  box-shadow: 0 0 0 3px rgba(0,112,191,0.18);
}
.stripe-element.StripeElement--invalid { border-color: var(--bp-red-500); }

/* ---- Blazor error boundary (re-themed to Bright red) ---- */
.blazor-error-boundary {
  background: var(--bp-red-500);
  padding: 1rem;
  color: #fff;
  border-radius: var(--bp-radius);
  font-weight: 500;
}
.blazor-error-boundary::after { content: "An error has occurred."; }