/* xtaxx Theme - Brand accents from test-ui, solid white cards, beige page background */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
  /* Brand accents (xtaxx-ui) */
  --gold: #FF8A00;
  --gold-dark: #E28714;
  --gold-light: #FFB84D;
  --gold-pale: #FFF5E6;
  --cream: #F2F5EF;
  --ink: #1C1C1E;
  --ink-muted: #6B625C;
  --ink-faint: #B8B4AC;
  --border: #75461D;
  --danger: #FF2A23;
  --success: #62C20F;

  /* MD3 tokens mapped to brand */
  --primary: var(--gold);
  --primary-container: var(--gold-light);
  --primary-fixed: var(--gold-pale);
  --primary-fixed-dim: var(--gold);
  --on-primary: #3D2E00;
  --on-primary-container: #5A4300;
  --on-primary-fixed: #2A1E00;
  --on-primary-fixed-variant: #5A4300;
  --inverse-primary: var(--gold);

  --secondary: var(--danger);
  --secondary-container: #FFE0E4;
  --secondary-fixed: #FFE0E4;
  --secondary-fixed-dim: #E8A0A8;
  --on-secondary: #ffffff;
  --on-secondary-container: #5A0010;
  --on-secondary-fixed: #3A0008;
  --on-secondary-fixed-variant: #7A1020;

  --tertiary: #656565;
  --tertiary-container: #E8E8E8;
  --tertiary-fixed: #F5F5F5;
  --tertiary-fixed-dim: #C0C0C0;
  --on-tertiary: #ffffff;
  --on-tertiary-container: #2A2A2A;
  --on-tertiary-fixed: #1A1A1A;
  --on-tertiary-fixed-variant: #454545;

  --background: beige;
  --surface: beige;
  --surface-dim: #E8E2D6;
  --surface-bright: #ffffff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #F6EFE6;
  --surface-container: #F2F5EF;
  --surface-container-high: #EBEBEA;
  --surface-container-highest: #E5E5E4;
  --surface-variant: #DFDFDE;

  --on-background: var(--ink);
  --on-surface: var(--ink);
  --on-surface-variant: var(--ink-muted);
  --outline: #9A9A9A;
  --outline-variant: rgba(117, 70, 29, 0.1);

  --inverse-surface: #2A2A2A;
  --inverse-on-surface: #F2F2F1;
  --surface-tint: var(--gold);

  --error: var(--danger);
  --error-container: #FFE0E4;
  --on-error: #ffffff;
  --on-error-container: #5A0010;

  --xtaxx-gold: var(--gold);
  --xtaxx-red: var(--danger);
  --xtaxx-grey: #656565;
  --xtaxx-green: var(--success);

  /* Layout surfaces — solid white cards like profile edit */
  --pf-page-bg: beige;
  --pf-surface-card: #ffffff;
  --pf-surface-control: #F6EFE6;
  --pf-surface-hover: var(--gold-pale);
  --pf-border-color: rgba(117, 70, 29, 0.1);
  --pf-glass-blur: 0px;
  --pf-shadow-elev-1: 0 8px 24px rgba(0, 0, 0, 0.06);
}

body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--pf-page-bg);
  color: var(--ink);
  transition: background 0.3s ease;
}

.pf-headline {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.pf-label {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.pf-card,
.glass-card {
  background-color: var(--pf-surface-card);
  border: 1px solid var(--pf-border-color);
  border-radius: 24px;
  box-shadow: var(--pf-shadow-elev-1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pf-card:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.pf-header {
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.pf-nav {
  background: #E8E2D6;
}

.pf-nav-link,
.pf-nav-user,
.pf-nav-user a,
.pf-user-trigger,
.pf-profile-trigger,
.pf-nav-icon-link,
.pf-mobile-menu-btn {
  color: #6B6760;
}

.pf-nav-link:hover,
.pf-nav-user a:hover,
.pf-user-trigger:hover,
.pf-profile-trigger:hover,
.pf-nav-icon-link:hover,
.pf-mobile-menu-btn:hover {
  color: #1a1c1a;
}

.pf-nav-link:hover,
.pf-user-trigger:hover,
.pf-profile-trigger:hover,
.pf-nav-icon-link:hover,
.pf-mobile-menu-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pf-header {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

.pf-bottom-nav {
  background-color: #f3efe6;
  border-top: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    10px -6px 22px rgba(134, 122, 102, 0.18);
}

.pf-btn {
  transition: all 0.2s ease;
  border-radius: 14px;
  font-weight: 600;
}

.pf-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 138, 0, 0.25);
}

.pf-btn:active {
  transform: scale(0.98);
}

.pf-btn-primary {
  background-color: var(--primary-container);
  color: var(--on-primary-container);
  border: none;
}

.pf-btn-secondary {
  background-color: var(--pf-surface-card);
  color: var(--on-surface);
  border: 1px solid var(--pf-border-color);
}

.pf-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  background-color: var(--pf-surface-control);
  border: 1px solid var(--pf-border-color);
  border-radius: 14px;
  color: var(--on-surface);
  font-weight: 500;
}

.pf-input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(98, 194, 15, 0.4);
  box-shadow: none;
  outline: none;
}

.pf-flash-error {
  background-color: var(--error-container);
  color: var(--on-error-container);
  border: 1px solid var(--error);
}

.pf-flash-success {
  background-color: #e8f5d8;
  color: #2d5010;
  border: 1px solid var(--success);
}

.lowercase-all {
  text-transform: lowercase;
}

.numerical-grey {
  color: #525252;
}

.bank-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: white;
  padding: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}