/* ============================================================
   Parcel Monkey - auth theme (CSS)
   2026 brand. Tokens mirror npm-core-ui src/themes/parcelmonkey.ts.

   Flat by design: the 2026 system has no elevation shadows. Borders
   and the tinted canvas do the separating.

   Needs the CSP changes in authentication PR #54 (font-src for
   Inter/Sora, images.ctfassets.net/v78wipeni189/ on img-src).
   Without them the type falls back to the system stack and the
   logo shows alt text - nothing else is affected.
   ============================================================ */

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(https://apps.backoffice.parcel2go.com/statics/fonts/inter-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(https://apps.backoffice.parcel2go.com/statics/fonts/inter-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(https://apps.backoffice.parcel2go.com/statics/fonts/inter-latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(https://apps.backoffice.parcel2go.com/statics/fonts/sora-latin-700-normal.woff2) format('woff2');
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; width: 100%; min-height: 100%;
  font-family: 'Inter', system-ui, Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.42;
  color: #1a1a1a;
  background: #f9f7fc;                  /* grey.A100 - the 2026 canvas */
  overflow-x: hidden;
}
body::before { display: none; }

/* The auth server ships no base stylesheet (only FontAwesome), so form
   controls need their inherited font set explicitly. */
input, select, textarea, button { font-family: inherit; color: #1a1a1a; }

a { color: #7B2D8B; text-decoration: none; }
a:hover, a:focus { color: #7B2D8B; text-decoration: underline; }

/* ---- Purple brand bar (injected by the script) ---- */
.pm-authbar {
  width: 100%;
  position: relative; z-index: 0;
  background: #260039;
  border-bottom: 1px solid #3a1055;
  padding: 20px 16px 44px;              /* extra bottom room: the card overlaps here */
  text-align: center;
  color: #fff; font-weight: 700; line-height: 26px; /* alt-text fallback styling */
}
/* Sized off height only - the PM wordmark is ~6:1 and a width cap squashes it. */
.pm-authbar img, .pm-authbar svg { display: block; margin: 0 auto; height: 26px; width: auto; }

/* ---- Layout / floating card ---- */
.container.body-content { display: flex; flex-direction: column; align-items: center; width: 100%; }
.page-wrapper, .page-consent, .error-page {
  width: 100%; max-width: 420px;
  position: relative; z-index: 1;
  margin: -30px auto 48px;              /* lift the card up over the bar */
  background-color: #fff;
  padding: 32px;
  border-radius: 20px;
  border: 1px solid #e7e0f0;
  box-shadow: 0 1px 3px 0 rgba(38, 0, 57, .04);
  animation: pm-rise .42s ease both;
}
@keyframes pm-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.page-wrapper { display: flex; flex-direction: column; }
.page-wrapper form { display: flex; flex-direction: column; }

/* ---- Sign In / Register tabs ---- */
#signin-header { display: flex; margin: 0 0 26px 0; border-bottom: 1px solid #e7e0f0; }
#signin-header a { display: inline; }
.signin-tab { flex: 1 1 0; text-align: center; }
.signin-tab span, .signin-tab a {
  display: block; padding: 12px 8px;
  font-size: 16px; font-weight: 600; color: #6b5f7a;
  text-decoration: none; cursor: pointer;
  transition: color .15s, box-shadow .15s;
}
/* Amber indicator per the 2026 tab spec, but the label stays dark purple:
   #F5A623 text on white is ~2:1, which fails contrast at this size.
   The `.active a` case is the register page, where the active tab wraps its
   label in an anchor (<span class="title active"><a class="title">). Without
   it the anchor's own muted colour wins over the active span it sits in, and
   the current tab reads as the inactive one. */
.signin-tab .title.active, .signin-tab span.title.active, .signin-tab .title.active a {
  color: #260039; box-shadow: inset 0 -3px 0 0 #F5A623;
}
/* The underline belongs to the tab, not the label inside it - otherwise the
   register page draws it twice, once on the span and once on the anchor. */
.signin-tab .title.active a { box-shadow: none; }
.signin-tab a:hover, .signin-tab a:focus { color: #260039; text-decoration: none; }

/* ---- Section headings ---- */
h2.header {
  display: block; text-align: center; margin: 0 0 18px 0;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 20px; line-height: 28px; font-weight: 700; color: #260039;
}
section#external h2.header { font-size: 16px; }

/* ---- Inputs: filled + floating label, 46px per the 2026 journey ---- */
.form-group { position: relative; width: 100%; margin-bottom: 16px; }
.form-control {
  display: block; width: 100%; height: 46px;
  padding: 20px 12px 6px 12px;
  border: 1px solid #cdbfdd; border-radius: 8px;
  background-color: #fff; color: #1a1a1a;
  font-size: 14px; line-height: 1.4;
  transition: border-color .15s, background-color .15s;
}
.form-control:hover { border-color: #7B2D8B; background-color: #f0ebf7; }
.form-control:focus {
  outline: none;
  border-color: #7B2D8B;
  background-color: #fff;
}
select.form-control { padding: 0 12px; }

.form-group label.login-label {
  position: absolute; left: 13px; top: 14px; margin: 0;
  pointer-events: none; color: #6b5f7a; font-size: 14px;
  transition: all .15s ease;
}
/* Shrunk state: 10.5px bold purple, matching MUI's scale(0.75) of the 14px label. */
.form-group .form-control:focus ~ label.login-label,
.form-group .form-control:not(.empty) ~ label.login-label,
.form-group .form-control:-webkit-autofill ~ label.login-label {
  top: 6px; left: 13px; font-size: 10.5px; font-weight: 700; color: #7B2D8B;
}
.form-group label.dropdown-label {
  display: block; margin: 0 0 6px 0; color: #1a1a1a; font-weight: 600; font-size: 13px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block; width: 100%;
  border-radius: 14px; padding: 12px 22px;
  font-family: 'Inter', system-ui, Helvetica, Arial, sans-serif;
  font-size: 18px; font-weight: 700; line-height: 1.25;
  text-align: center; text-transform: none; cursor: pointer;
  box-shadow: none;
  /* 2026 brand-guide motion: colour fade + a subtle press. No hover lift. */
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease, color .15s ease;
}
.btn + .btn { margin-top: 10px; }
.btn:active { transform: scale(0.97); }

/* Amber is the 2026 primary CTA; dark purple text sits on it. */
.btn-primary {
  border: 0; color: #260039;
  background-color: #F5A623;
}
.btn-primary:hover { background-color: #E09315; color: #260039; }
.btn-primary:active { background-color: #C07A0A; }
.btn-primary:focus-visible { outline: solid 3px #ffd801; outline-offset: 3px; }
.btn-primary:disabled { background: #D2D2D2; color: #696969; transform: none; cursor: default; }

/* Outlined purple secondary, per the theme's secondaryButtonStyles. */
.btn-secondary, #button-cancel {
  border: 1px solid #7B2D8B; background: #fff;
  color: #260039; font-weight: 700;
}
.btn-secondary:hover, #button-cancel:hover { border-color: #260039; background: #f0ebf7; color: #260039; }
.btn-secondary:focus-visible, #button-cancel:focus-visible { outline: solid 3px #ffd801; outline-offset: 3px; }

#cancel-form { margin-top: 8px; }
/* Separate the CTA from the last field. Needed explicitly because the script
   strips .form-group from the checkbox rows (to kill their label styling), which
   also takes their bottom margin with it - so "Stay signed in" and the opt-ins
   would otherwise sit hard against the button. */
.action-buttons { margin-top: 12px; margin-bottom: 0; }
#login-remember, .register-optin:last-of-type { margin-bottom: 12px; }

/* ---- External / social sign-in ---- */
#external { margin-bottom: 8px; }
.external-body { display: flex; flex-direction: column; align-items: stretch; }
.external-button { margin-bottom: 8px; }
.external-button a.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; border: 1px solid #cdbfdd; border-radius: 14px;
  background-color: #fff; color: #1a1a1a; font-weight: 500;
  padding: 11px 16px; font-size: 15px; text-decoration: none;
}
.external-button a.btn:hover { background-color: #f0ebf7; border-color: #7B2D8B; text-decoration: none; }
.external-button .icon, .external-button .fab { color: #260039; font-size: 20px; }
.external-button .ex-title { color: #1a1a1a; font-size: 15px; }
#section-divide { height: 1px; background-color: #e7e0f0; margin: 18px auto; }

/* ---- Checkboxes (remember + opt-ins; given .checkbox by the script) ---- */
.checkbox { position: relative; display: inline-block; }
.checkbox > input { position: absolute; left: -8px; top: -8px; width: 36px; height: 36px; margin: 0; opacity: 0; pointer-events: none; }
.checkbox > span { display: inline-block; cursor: pointer; line-height: 1.6; color: #1a1a1a; font-weight: 400; }
.checkbox > span::before {
  content: ''; display: inline-block; box-sizing: border-box;
  margin: 3px 10px 0 0; width: 18px; height: 18px;
  border: 2px solid #cdbfdd; border-radius: 4px; background: #fff; vertical-align: top;
  transition: border-color .15s, background-color .15s;
}
/* Centred on the 18px box: it sits at 3px..21px vertically (the ::before margin),
   so the box centre is 9,12. translate(-50%,-50%) centres the tick's own bounding
   box on that point before it rotates, rather than relying on hand-tuned offsets.
   Sat 2px above centre: a checkmark's ink is weighted to the bottom of its box, so
   geometric centring reads low. */
.checkbox > span::after {
  content: ''; position: absolute; left: 9px; top: 10px; width: 9px; height: 5px;
  border: 2px solid transparent; border-top: none; border-right: none;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.checkbox > input:checked + span::before { border-color: #260039; background: #260039; }
.checkbox > input:checked + span::after { border-color: #fff; }
.checkbox > input:focus-visible + span::before { outline: 2px solid #ffd801; outline-offset: 1px; }

#opt-ins { margin-bottom: 12px; }
#opt-in-message { display: block; margin-bottom: 8px; color: #1a1a1a; }
#opt-in-sub-message { display: block; margin-top: 6px; font-size: 12px; color: #6b5f7a; }
.register-optin { margin-bottom: 8px; }

/* ---- Footer links ---- */
.footer { margin-top: 18px; text-align: center; }
.footer .option { display: block; margin-bottom: 10px; }
.footer .option a { color: #7B2D8B; font-size: 15px; font-weight: 600; text-decoration: none; }
.footer .option a:hover { text-decoration: underline; }

/* ---- Validation ---- */
.validation-error, .field-validation-error { display: block; margin-top: 5px; color: #f94144; font-size: 13px; }
.validation-summary.validation-summary-errors {
  border: 1px solid #f94144; border-radius: 14px; background-color: #ffd9df;
  margin: 18px 0; padding: 10px 14px; color: #1a1a1a; font-weight: 500;
}
.validation-summary.validation-summary-errors ul { margin: 0; padding: 0; list-style: none; }

/* ---- Consent page ---- */
.page-consent .page-header h1 {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 20px; line-height: 28px; color: #260039; font-weight: 700; text-align: center;
}
.page-consent .page-header .request { display: block; font-size: 15px; color: #6b5f7a; font-weight: 400; }
.application-scopes, .identity-scopes { list-style: none; padding: 0; margin: 16px 0; }
.consent-item { padding: 10px 0; border-bottom: 1px solid #e7e0f0; }
.consent-item .name { display: flex; align-items: center; justify-content: space-between; margin: 0; color: #1a1a1a; font-weight: 500; }
.consent-description { display: block; margin-top: 4px; color: #6b5f7a; font-size: 13px; }
.consent-scopecheck.switch {
  -webkit-appearance: none; appearance: none;
  position: relative; width: 40px; height: 22px; border-radius: 22px;
  background: #cdbfdd; border: none; cursor: pointer; outline: none;
  flex: 0 0 auto; margin: 0; transition: background-color .15s;
}
.consent-scopecheck.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.consent-scopecheck.switch:checked { background: #260039; }
.consent-scopecheck.switch:checked::after { transform: translateX(18px); }
.consent-scopecheck.switch:focus-visible { outline: 2px solid #ffd801; outline-offset: 2px; }
.consent-scopecheck.switch:disabled { opacity: .5; cursor: default; }
.consent-remember { margin: 12px 0; }
.consent-remember label { display: flex; align-items: center; gap: 10px; }
.client-footer { margin-top: 16px; text-align: center; }
.client-footer a { color: #7B2D8B; }
#consent-buttons { display: flex; flex-direction: column; }

/* ---- Error page ---- */
.error-page .page-header h1 {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 20px; line-height: 28px; font-weight: 700; color: #260039; text-align: center;
}
.error-page .alert-danger { border: 1px solid #f94144; background-color: #ffd9df; border-radius: 14px; padding: 12px; color: #1a1a1a; }
.error-page .request-id { margin-top: 8px; color: #6b5f7a; font-size: 12px; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .page-wrapper, .page-consent, .error-page { transform: none; }
  .btn:active { transform: none; }
}

/* ---- Responsive ---- */
@media only screen and (max-width: 600px) {
  .pm-authbar { padding: 16px 16px 24px; }
  .pm-authbar img, .pm-authbar svg { height: 22px; }
  .page-wrapper, .page-consent, .error-page {
    max-width: 100%; border-radius: 0; border: none; box-shadow: none;
    padding: 24px 16px; margin: 0;
  }
  .container.body-content { align-items: stretch; }
}