/* ============================================================
   Persona Design System — CustomerSite theme.
   Adapted from @persona-id/design-tokens (fruit palette + semantic
   tokens + type scale). Linked LAST in _Layout so it wins over the
   vendor Bootstrap / customer-site / customer-custom stylesheets.

   Font note: the licensed "ABC Monument Grotesk" family is not
   bundled in this repo, so --pds-font-base falls back to the PDS
   system-ui stack. Drop the woff2 files in and add an @font-face
   block here to pick up the real typeface.
   ============================================================ */

:root {
  /* ---- FOG (neutral grey) ---- */
  --pds-fog-25:   #F9F9FA;
  --pds-fog-50:   #F5F5F6;
  --pds-fog-100:  #F1F1F2;
  --pds-fog-200:  #E2E2E3;
  --pds-fog-300:  #DBDBDB;
  --pds-fog-400:  #CCCCCC;
  --pds-fog-500:  #BDBDBD;
  --pds-fog-600:  #A0A0A0;
  --pds-fog-700:  #848484;
  --pds-fog-800:  #707070;
  --pds-fog-900:  #565656;
  --pds-fog-1000: #434343;
  --pds-fog-1100: #313131;

  /* ---- UBE (brand purple) ---- */
  --pds-ube-50:   #F0F1FE;
  --pds-ube-100:  #E9EAFD;
  --pds-ube-200:  #D3D5FC;
  --pds-ube-300:  #BEC0F9;
  --pds-ube-500:  #7479F5;
  --pds-ube-600:  #4148F3;
  --pds-ube-700:  #0D16F2;
  --pds-ube-800:  #040CC8;
  --pds-ube-900:  #030996;
  --pds-ube-1000: #020664;

  /* ---- PAPAYA (warm yellow / warning) ---- */
  --pds-papaya-100:  #FDF4E5;
  --pds-papaya-600:  #F1AF4A;
  --pds-papaya-800:  #B97C2A;

  /* ---- PANDAN (green / success) ---- */
  --pds-pandan-100:  #E6F8F0;
  --pds-pandan-700:  #5DB98A;
  --pds-pandan-800:  #49946E;

  /* ---- BLUEBERRY (blue / link) ---- */
  --pds-blueberry-100:  #E5EEFD;
  --pds-blueberry-700:  #2961EC;
  --pds-blueberry-800:  #204EBD;

  /* ---- WATERMELON (red / danger) ---- */
  --pds-watermelon-100:  #FCF3F2;
  --pds-watermelon-700:  #D33C27;
  --pds-watermelon-800:  #A9301E;

  --pds-white: #FFFFFF;
  --pds-black: #000000;

  /* ---- Semantic tokens (light theme) ---- */
  --pds-fg-primary:   var(--pds-fog-1100);
  --pds-fg-secondary: var(--pds-fog-900);
  --pds-fg-tertiary:  var(--pds-fog-800);
  --pds-fg-muted:     var(--pds-fog-700);
  --pds-fg-disabled:  var(--pds-fog-500);
  --pds-fg-brand:     var(--pds-ube-600);
  --pds-fg-link:      var(--pds-ube-600);
  --pds-fg-success:   var(--pds-pandan-800);
  --pds-fg-warning:   var(--pds-papaya-800);
  --pds-fg-danger:    var(--pds-watermelon-800);
  --pds-fg-inverse:   #FFFFFF;

  --pds-bg-primary:   #FFFFFF;
  --pds-bg-canvas:    var(--pds-fog-50);
  --pds-bg-subtle:    var(--pds-fog-100);
  --pds-bg-muted:     var(--pds-fog-200);
  --pds-bg-brand:     var(--pds-ube-600);
  --pds-bg-brand-subtle:   var(--pds-ube-100);
  --pds-bg-success-subtle: var(--pds-pandan-100);
  --pds-bg-warning-subtle: var(--pds-papaya-100);
  --pds-bg-danger-subtle:  var(--pds-watermelon-100);
  --pds-bg-info-subtle:    var(--pds-blueberry-100);

  --pds-border-hairline:    var(--pds-fog-200);
  --pds-border-divider:     var(--pds-fog-100);
  --pds-border-input:       var(--pds-fog-300);
  --pds-border-input-hover: var(--pds-fog-600);
  --pds-border-focus:       var(--pds-ube-600);
  --pds-border-danger:      var(--pds-watermelon-700);

  --pds-btn-primary-bg:        var(--pds-fg-primary);
  --pds-btn-primary-bg-hover:  var(--pds-black);
  --pds-btn-primary-bg-active: var(--pds-black);
  --pds-btn-danger-bg:         var(--pds-watermelon-700);
  --pds-btn-danger-bg-hover:   var(--pds-watermelon-800);

  /* ---- Type ---- */
  --pds-font-base: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- Radius / shadow / spacing ---- */
  --pds-radius-sm: 4px;
  --pds-radius-md: 8px;
  --pds-radius-lg: 12px;
  --pds-radius-full: 999px;

  --pds-elev-high: 0px 2px 10px 0px rgba(0,0,0,0.04), 0px 5px 20px 0px rgba(0,0,0,0.06), 0px 10px 40px 0px rgba(0,0,0,0.08);

  --pds-sp-1: 4px;
  --pds-sp-2: 8px;
  --pds-sp-3: 12px;
  --pds-sp-4: 16px;
  --pds-sp-5: 20px;
  --pds-sp-6: 24px;
  --pds-sp-8: 32px;
  --pds-sp-10: 40px;

  --pds-dur-fast: 120ms;
  --pds-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ============================================================
   Base reset — override the legacy customer-custom.css body rules.
   ============================================================ */
body.pds-root {
  font-family: var(--pds-font-base) !important;
  color: var(--pds-fg-primary) !important;
  background: var(--pds-bg-canvas) !important;
  font-size: 14px !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased;
}

/* :where() keeps the body/root scoping at zero specificity so component classes
   (.pp-header-brand, .pp-tab, .pp-icon-btn, ...) reliably win over this default. */
:where(body.pds-root) a { color: var(--pds-fg-link); }
:where(body.pds-root) a:hover { color: var(--pds-ube-700); }

/* ============================================================
   Semantic text styles — mapped from the PDS Typography tokens.
   ============================================================ */
.pds-h1, .pds-h2, .pds-h3, .pds-h4,
.pds-p-lg, .pds-p-lg-bold, .pds-p-md, .pds-p-md-bold, .pds-p-sm,
.pds-p-md-link, .pds-mono {
  font-family: var(--pds-font-base);
  color: var(--pds-fg-primary);
  margin: 0;
}

.pds-h1 { font-size: 28px; line-height: 36px; font-weight: 500; }
.pds-h2 { font-size: 24px; line-height: 32px; font-weight: 500; }
.pds-h3 { font-size: 18px; line-height: 24px; font-weight: 500; }
.pds-h4 { font-size: 16px; line-height: 24px; font-weight: 500; }

.pds-p-lg       { font-size: 16px; line-height: 24px; font-weight: 400; }
.pds-p-lg-bold  { font-size: 16px; line-height: 24px; font-weight: 500; }
.pds-p-md       { font-size: 14px; line-height: 20px; font-weight: 400; }
.pds-p-md-bold  { font-size: 14px; line-height: 20px; font-weight: 500; }
.pds-p-sm       { font-size: 12px; line-height: 16px; font-weight: 400; }

.pds-p-md-link {
  font-size: 14px; line-height: 20px; font-weight: 400;
  color: var(--pds-fg-link); text-decoration: underline;
}

.pds-mono {
  font-family: var(--pds-font-mono);
  font-size: 13px; line-height: 20px;
  color: var(--pds-fg-primary);
}

.pp-muted { color: var(--pds-fg-secondary); }

/* ============================================================
   App shell — header / nav / main / footer chrome.
   ============================================================ */
.pp-app {
  font-family: var(--pds-font-base);
  color: var(--pds-fg-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.pp-header {
  height: 56px;
  flex: none;
  background: #fff;
  border-bottom: 1px solid var(--pds-border-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pds-sp-8);
}

.pp-header-brand {
  display: flex;
  align-items: center;
  gap: var(--pds-sp-3);
  text-decoration: none;
  color: var(--pds-fg-primary);
}
.pp-header-brand:hover { color: var(--pds-fg-primary); text-decoration: none; }
.pp-header-logo { width: 22px; height: 22px; display: block; }
.pp-header-title { font-size: 15px; font-weight: 500; }

.pp-header-right { display: flex; align-items: center; gap: var(--pds-sp-3); }
.pp-header-user { color: var(--pds-fg-secondary); }
.pp-header-divider { width: 1px; height: 20px; background: var(--pds-border-hairline); }

.pp-nav {
  flex: none;
  background: #fff;
  border-bottom: 1px solid var(--pds-border-hairline);
  padding: 0 var(--pds-sp-8);
  display: flex;
  gap: var(--pds-sp-6);
}

.pp-tab {
  font-family: var(--pds-font-base);
  font-size: 14px;
  font-weight: 500;
  color: var(--pds-fg-primary);
  padding: var(--pds-sp-2) var(--pds-sp-1);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.pp-tab:hover { color: var(--pds-fg-brand); text-decoration: none; }
.pp-tab-active { color: var(--pds-fg-brand); border-bottom-color: var(--pds-ube-600); }

.pp-main {
  flex: 1;
  padding: var(--pds-sp-10) var(--pds-sp-8);
  display: flex;
  justify-content: center;
}
.pp-main-inner { width: 100%; max-width: 860px; }

.pp-footer {
  flex: none;
  padding: var(--pds-sp-4) var(--pds-sp-8);
  text-align: center;
  border-top: 1px solid var(--pds-border-hairline);
  background: #fff;
}
.pp-footer-link { color: inherit; text-decoration: none; }
.pp-footer-link:hover { text-decoration: underline; color: inherit; }

/* ============================================================
   Buttons.
   ============================================================ */
.pp-btn {
  font-family: var(--pds-font-base);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--pds-radius-full);
  height: 40px;
  padding: 0 var(--pds-sp-5);
  border: none;
  cursor: pointer;
  transition: background var(--pds-dur-fast) var(--pds-ease), border-color var(--pds-dur-fast) var(--pds-ease);
  display: inline-flex;
  align-items: center;
  gap: var(--pds-sp-2);
  text-decoration: none;
  line-height: 1;
}
.pp-btn:focus-visible { outline: 2px solid var(--pds-border-focus); outline-offset: 2px; }

.pp-btn-primary { background: var(--pds-btn-primary-bg); color: #fff; }
.pp-btn-primary:hover { background: var(--pds-btn-primary-bg-hover); color: #fff; text-decoration: none; }
.pp-btn-primary:active { background: var(--pds-btn-primary-bg-active); }

.pp-btn-secondary { background: transparent; color: var(--pds-fg-primary); }
.pp-btn-secondary:hover { background: var(--pds-fog-100); color: var(--pds-fg-primary); text-decoration: none; }

.pp-btn-danger { background: var(--pds-btn-danger-bg); color: #fff; }
.pp-btn-danger:hover { background: var(--pds-btn-danger-bg-hover); color: #fff; text-decoration: none; }

.pp-icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--pds-sp-2);
  border-radius: var(--pds-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pds-fg-primary);
  transition: background var(--pds-dur-fast) var(--pds-ease), color var(--pds-dur-fast) var(--pds-ease);
}
.pp-icon-btn:hover { background: var(--pds-fog-100); color: var(--pds-fg-brand); }

.pp-icon-btn:focus-visible,
.pp-tab:focus-visible,
.pp-header-brand:focus-visible {
  outline: 2px solid var(--pds-border-focus);
  outline-offset: 2px;
}

/* ============================================================
   Cards / titles / layout helpers.
   ============================================================ */
.pp-card {
  background: #fff;
  border: 1px solid var(--pds-border-hairline);
  border-radius: var(--pds-radius-md);
  padding: var(--pds-sp-10);
}
.pp-card-flush { padding: 0; overflow: hidden; }

.pp-title { margin-bottom: var(--pds-sp-2); }
.pp-subtitle { color: var(--pds-fg-secondary); margin-bottom: var(--pds-sp-8); }
.pp-section-gap { margin-bottom: var(--pds-sp-6); }

.pp-steps {
  margin: 0;
  padding-left: var(--pds-sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--pds-sp-2);
}
.pp-steps li { color: var(--pds-fg-secondary); }

.pp-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--pds-sp-3);
  margin-top: var(--pds-sp-5);
}

/* ============================================================
   Key-value grid (subscription details).
   ============================================================ */
.pp-kv {
  display: grid;
  grid-template-columns: 220px 1fr;
  row-gap: var(--pds-sp-6);
  column-gap: var(--pds-sp-4);
  align-items: start;
}
.pp-kv dt, .pp-kv dd { margin: 0; }

/* Bootstrap .row-based key/value list (subscription detail + modals).
   :where() keeps specificity at zero so per-value classes (.pds-mono) win. */
:where(.pp-kv-rows) dt { font-size: 14px; font-weight: 500; color: var(--pds-fg-primary); }
:where(.pp-kv-rows) dd { font-size: 14px; font-weight: 400; color: var(--pds-fg-secondary); margin-bottom: 0; }

/* ============================================================
   Tables (subscriptions list, activity log).
   ============================================================ */
.pp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}
/* Self-contained bordered + rounded look without an extra wrapper element. */
.pp-table-card {
  border: 1px solid var(--pds-border-hairline);
  border-radius: var(--pds-radius-md);
  overflow: hidden;
}
.pp-table thead tr { background: var(--pds-fog-50); }
.pp-table th {
  text-align: left;
  padding: var(--pds-sp-3) var(--pds-sp-5);
  font-size: 12px;
  font-weight: 500;
  color: var(--pds-fg-muted);
  border-bottom: 1px solid var(--pds-border-hairline);
  white-space: nowrap;
}
.pp-table td {
  padding: var(--pds-sp-4) var(--pds-sp-5);
  border-bottom: 1px solid var(--pds-border-divider);
  vertical-align: middle;
}
.pp-table tbody tr:last-child td { border-bottom: none; }
.pp-table .pp-row:hover { background: var(--pds-fog-50); }
.pp-table-tight th { padding: var(--pds-sp-2) var(--pds-sp-3); }
.pp-table-tight td { padding: var(--pds-sp-3) var(--pds-sp-3); }

/* ============================================================
   Status pill.
   ============================================================ */
.pp-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--pds-sp-1) var(--pds-sp-3);
  border-radius: var(--pds-radius-full);
  font-size: 12px;
  font-weight: 500;
  background: var(--pds-bg-subtle);
  color: var(--pds-fg-secondary);
  white-space: nowrap;
}
.pp-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pp-status--success { background: var(--pds-bg-success-subtle); color: var(--pds-fg-success); }
.pp-status--warning { background: var(--pds-bg-warning-subtle); color: var(--pds-fg-warning); }
.pp-status--danger  { background: var(--pds-bg-danger-subtle);  color: var(--pds-fg-danger); }
.pp-status--neutral { background: var(--pds-bg-subtle);         color: var(--pds-fg-secondary); }

/* ============================================================
   Empty state / inline alerts.
   ============================================================ */
.pp-empty {
  background: #fff;
  border: 1px solid var(--pds-border-hairline);
  border-radius: var(--pds-radius-md);
  padding: var(--pds-sp-8);
  color: var(--pds-fg-secondary);
}

.pp-alert {
  border-radius: var(--pds-radius-md);
  padding: var(--pds-sp-4) var(--pds-sp-5);
  margin-bottom: var(--pds-sp-5);
  background: var(--pds-bg-danger-subtle);
  color: var(--pds-fg-danger);
  border: 1px solid var(--pds-border-danger);
}

/* ============================================================
   Bootstrap component overrides (modals / dropdown / spinner)
   used by the CustomerSite views. Scoped to this app only.
   ============================================================ */
.modal-content {
  border: none;
  border-radius: var(--pds-radius-lg);
  box-shadow: var(--pds-elev-high);
}
.modal-header {
  border-bottom: 1px solid var(--pds-border-divider);
  padding: var(--pds-sp-5) var(--pds-sp-6);
  background: #fff;
  border-top-left-radius: var(--pds-radius-lg);
  border-top-right-radius: var(--pds-radius-lg);
}
.modal-body { padding: var(--pds-sp-6); }

.dropdown-menu {
  border: 1px solid var(--pds-border-hairline);
  border-radius: var(--pds-radius-md);
  box-shadow: var(--pds-elev-high);
  padding: var(--pds-sp-1);
  font-family: var(--pds-font-base);
  font-size: 14px;
}
.dropdown-menu .dropdown-item {
  border-radius: var(--pds-radius-sm);
  padding: var(--pds-sp-2) var(--pds-sp-3);
  color: var(--pds-fg-primary);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: var(--pds-fog-100);
  color: var(--pds-fg-brand);
}

.spinner-border { color: var(--pds-ube-600); }

/* Bootstrap's cyan .alert-info default leaks through on the cookie consent
   banner (#cookieConsent) undisturbed otherwise. */
.alert.alert-info {
  background: var(--pds-bg-info-subtle);
  color: var(--pds-fg-primary);
  border-color: var(--pds-border-hairline);
  border-radius: var(--pds-radius-md);
}

.alert.alert-info .btn.accept-policy {
  font-size: 13px;
  font-weight: 500;
  color: var(--pds-fg-link);
  background: transparent;
  border: 1px solid var(--pds-border-input);
  border-radius: var(--pds-radius-sm);
  padding: 4px 12px;
  height: auto;
  float: none;
  margin-left: auto;
  display: block;
  width: fit-content;
}
.alert.alert-info .btn.accept-policy:hover {
  background: var(--pds-fog-50);
  border-color: var(--pds-border-input-hover);
  color: var(--pds-fg-link);
}

/* Bootstrap form inputs inside the reskinned modals (change plan / quantity). */
.modal-body .form-control {
  font-family: var(--pds-font-base);
  font-size: 14px;
  border: 1px solid var(--pds-border-input);
  border-radius: var(--pds-radius-sm);
  color: var(--pds-fg-primary);
}
.modal-body .form-control:hover { border-color: var(--pds-border-input-hover); }
.modal-body .form-control:focus {
  border-color: var(--pds-border-focus);
  box-shadow: 0 0 0 3px var(--pds-bg-brand-subtle);
  outline: none;
}