/* PIA login page (resources/views/auth/login.blade.php) — design A "Split showcase", Oct 2026 */
html, body { background: #fff; }
.pl, .pl * { box-sizing: border-box; }
.pl {
  --pl-navy: #14294F; --pl-navy-ink: #0B1A36; --pl-cyan: #21CED9;
  --pl-muted: #5B6B80; --pl-line: #D5DCE6; --pl-hair: #E3E8EE; --pl-soft: #F4F6F9;
  display: flex; min-height: 100vh;
  font-family: 'Montserrat', sans-serif; font-weight: 400; color: var(--pl-navy);
  -webkit-font-smoothing: antialiased;
}
.pl svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---- brand panel ---- */
.pl-brand {
  position: relative; overflow: hidden; width: 53%; max-width: 820px; flex-shrink: 0;
  background: var(--pl-navy); color: #fff;
  padding: 56px 72px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
}
.pl-ring {
  position: absolute; right: -180px; bottom: -220px; width: 620px; height: 620px;
  border-radius: 50%; border: 90px solid var(--pl-cyan); opacity: .09; pointer-events: none;
}
.pl-logo { width: 150px; height: auto; align-self: flex-start; position: relative; }
.pl-pitch { position: relative; display: flex; flex-direction: column; gap: 26px; }
.pl-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pl-cyan); }
.pl-headline { margin: 0; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; color: #fff; max-width: 560px; }
.pl-lede { margin: 0; font-size: 18px; line-height: 1.6; color: #C9D3E3; max-width: 520px; }

.pl-deal {
  width: 100%; max-width: 460px; margin-top: 6px; background: #fff; color: var(--pl-navy);
  border-radius: 16px; padding: 22px; box-shadow: 0 24px 60px rgba(4,12,28,.35);
  display: flex; flex-direction: column; gap: 16px;
}
.pl-deal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pl-deal-title { font-size: 16px; font-weight: 700; }
.pl-deal-sub { font-size: 13px; color: var(--pl-muted); margin-top: 4px; }
.pl-pill { font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: #E3F8FA; color: #0B6A72; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.pl-deal-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pl-stat { background: var(--pl-soft); border-radius: 10px; padding: 12px; }
.pl-stat-k { font-size: 11px; color: var(--pl-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.pl-stat-v { font-size: 18px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-stat-v small { font-size: 12px; font-weight: 600; color: var(--pl-muted); }

.pl-points { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 14px; color: #C9D3E3; }
.pl-points li { display: flex; align-items: center; gap: 8px; }
.pl-points svg { width: 16px; height: 16px; stroke: var(--pl-cyan); stroke-width: 2.4; }

/* ---- form ---- */
.pl-main { flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 48px 32px; }
.pl-form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 22px; }
.pl-heading h2 { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -.01em; color: var(--pl-navy); }
.pl-heading p { margin: 8px 0 0; font-size: 15px; color: var(--pl-muted); }
.pl-field { display: flex; flex-direction: column; gap: 8px; }
.pl-field label, .pl-label-row label { margin: 0; font-size: 13px; font-weight: 600; color: var(--pl-navy); }
.pl-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.pl a { color: var(--pl-navy); font-weight: 600; text-decoration: none; }
.pl a:hover { color: var(--pl-navy-ink); text-decoration: underline; }
.pl-label-row a { font-size: 13px; }

.pl-input {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 6px 0 16px;
  border: 1.5px solid var(--pl-line); border-radius: 12px; background: #fff; color: #8A97A8;
  transition: border-color .15s, box-shadow .15s;
}
.pl-input > svg { width: 18px; height: 18px; }
.pl-input:focus-within { border-color: var(--pl-navy); box-shadow: 0 0 0 4px rgba(33,206,217,.25); color: var(--pl-navy); }
.pl-input.is-invalid { border-color: #c0392b; }
.pl-input input {
  flex-grow: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; box-shadow: none;
  font: inherit; font-size: 16px; color: var(--pl-navy); padding: 0;
}
.pl-input input::placeholder { color: #8A97A8; }
.pl-eye { border: 0; background: none; color: var(--pl-muted); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 8px; padding: 0; }
.pl-eye svg { width: 18px; height: 18px; }
.pl-eye[aria-pressed="true"] { color: var(--pl-navy); }
.pl-eye:focus-visible { outline: 2px solid var(--pl-cyan); }

.pl-check { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: #3D4B5E; cursor: pointer; }
.pl-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--pl-navy); }

.pl-submit {
  height: 54px; border: 0; border-radius: 12px; background: var(--pl-navy); color: #fff;
  font: inherit; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; transition: background .15s;
}
.pl-submit svg { width: 18px; height: 18px; stroke-width: 2; }
.pl-submit:hover { background: var(--pl-navy-ink); }
.pl-submit:focus-visible { outline: 3px solid var(--pl-cyan); outline-offset: 2px; }

.pl-divider { display: flex; align-items: center; gap: 14px; color: #8A97A8; font-size: 13px; }
.pl-divider::before, .pl-divider::after { content: ""; flex-grow: 1; height: 1px; background: var(--pl-hair); }
.pl a.pl-secondary {
  height: 52px; border: 1.5px solid var(--pl-line); border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--pl-navy);
}
.pl a.pl-secondary:hover { border-color: var(--pl-navy); text-decoration: none; }
.pl-apps { margin: 4px 0 0; font-size: 13px; color: var(--pl-muted); text-align: center; }

/* flash + validation partials sit inside the form */
.pl-form .alert { margin: 0; border-radius: 10px; font-size: 14px; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .pl-brand { padding: 48px; }
}
@media (max-width: 900px) {
  .pl { flex-direction: column; }
  .pl-brand { width: 100%; max-width: none; padding: 32px 24px 36px; gap: 24px; border-radius: 0 0 28px 28px; }
  .pl-logo { width: 96px; }
  .pl-pitch { gap: 16px; }
  .pl-eyebrow, .pl-lede { display: none; }
  .pl-headline { font-size: 30px; line-height: 1.12; }
  .pl-points { flex-direction: column; gap: 8px; font-size: 13px; }
  .pl-points li:last-child { display: none; }
  .pl-main { padding: 28px 24px 40px; align-items: flex-start; }
  .pl-heading h2 { font-size: 24px; }
}
@media (max-width: 600px) {
  .pl-deal { display: none; }
}

/* Legacy all.css styles these by ID (#login-email/#login-password grey fill, #submit-login cyan pill) — beat them by ID. */
.pl #login-email, .pl #login-password { background: transparent; background-color: transparent; border: 0; border-radius: 0; padding: 0; height: 100%; color: var(--pl-navy); }
.pl #submit-login { border-radius: 12px; padding: 0 20px; background: var(--pl-navy); background-color: var(--pl-navy); color: #fff; width: auto; }
.pl #submit-login:hover, .pl #submit-login:focus { background-color: var(--pl-navy-ink); color: #fff; }
.pl input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: var(--pl-navy); }

/* ---- shared auth pages: register + password reset (added 1 Oct 2026) ---- */
@media (min-width: 901px) {
  /* long forms scroll while the brand panel stays put */
  .pl-brand { position: sticky; top: 0; height: 100vh; }
  .pl-main { min-height: 100vh; }
}
@media (min-width: 901px) and (max-height: 780px) { .pl-deal { display: none; } }
.pl-logo-link { position: relative; align-self: flex-start; display: block; }
.pl a.pl-logo-link:hover { text-decoration: none; }
.pl-form--wide { max-width: 480px; gap: 18px; }
.pl-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pl-heading p a { font-size: inherit; }
.pl-error { font-size: 13px; color: #c0392b; font-weight: 500; }
.pl-terms { align-items: flex-start; font-size: 13px; line-height: 1.55; }
.pl-terms input { margin-top: 2px; flex-shrink: 0; }
.pl-terms.is-invalid { color: #c0392b; }
.pl-captcha { min-height: 78px; }
.pl-notice { padding: 12px 14px; border-radius: 10px; background: #E3F8FA; color: #0B5A61; font-size: 14px; font-weight: 500; }
.pl a.pl-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--pl-muted); align-self: flex-start; }
.pl a.pl-back svg { width: 16px; height: 16px; }
.pl a.pl-back:hover { color: var(--pl-navy); }
.pl-submit:disabled { opacity: .45; cursor: not-allowed; }
.pl #submit-login:disabled:hover { background-color: var(--pl-navy); }
/* legacy all.css ID rules (#email/#password grey fill, #reset-password-button cyan pill, #reg-header colour) */
.pl #email, .pl #email-confirmation, .pl #password, .pl #password-confirm, .pl #firstname, .pl #lastname, .pl #phone { background: transparent; background-color: transparent; border: 0; border-radius: 0; padding: 0; height: 100%; color: var(--pl-navy); }
.pl #reset-password-button { border-radius: 12px; padding: 0 20px; background-color: var(--pl-navy); color: #fff; }
.pl #reset-password-button:hover { background-color: var(--pl-navy-ink); }
.pl #reg-header { color: var(--pl-navy); }
@media (max-width: 520px) { .pl-grid2 { grid-template-columns: minmax(0, 1fr); } .pl-captcha { transform: scale(.94); transform-origin: left top; } }

/* ---- Privacy / T&C pop-ups (PrivacyPolicyComponent / TermsAndConditionsComponent .vue) ----
   The components hard-code style="width:80em" on .modal and min-width:100% !important on .modal-dialog,
   so the overlay hugs the left edge and runs ~1170px wide on phones. Make the overlay full-width and use
   its padding to size the (forced 100%) dialog: max 880px, centred, 12px gutter on phones. */
#PPModal, #TCModal {
  width: 100% !important; left: 0 !important; right: 0 !important; margin: 0 !important;
  box-sizing: border-box; padding: 0 max(12px, calc((100% - 880px) / 2)) !important;
  font-family: 'Montserrat', sans-serif;
}
#PPModal .modal-dialog, #TCModal .modal-dialog { max-width: none; margin: 32px 0; }
#PPModal .modal-content, #TCModal .modal-content { border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(4,12,28,.35); }
#PPModal .modal-header, #TCModal .modal-header {
  background-color: #14294F !important; color: #fff; border: 0; padding: 18px 24px; align-items: center;
  position: sticky; top: 0; z-index: 2;
}
#PPModal .modal-title, #TCModal .modal-title { color: #fff; font-size: 18px; font-weight: 700; margin: 0; }
#PPModal .close, #TCModal .close {
  color: #fff; opacity: .85; text-shadow: none; font-size: 30px; font-weight: 400; line-height: 1;
  width: 44px; height: 44px; margin: -10px -12px -10px auto; padding: 0;
}
#PPModal .close:hover, #TCModal .close:hover { opacity: 1; color: #fff; }
#PPModal .modal-body, #TCModal .modal-body {
  padding: 24px 28px; color: #3D4B5E; font-size: 15px; line-height: 1.65; overflow-wrap: anywhere;
}
#PPModal .modal-body h1, #PPModal .modal-body h2, #PPModal .modal-body h3, #PPModal .modal-body h4,
#TCModal .modal-body h1, #TCModal .modal-body h2, #TCModal .modal-body h3, #TCModal .modal-body h4 {
  color: #14294F; font-weight: 700; font-size: 20px; line-height: 1.3; margin: 24px 0 8px;
}
#PPModal .modal-body p:empty, #TCModal .modal-body p:empty { display: none; }
#PPModal .modal-body .justify, #TCModal .modal-body .justify, #PPModal .modal-body .text-justify, #TCModal .modal-body .text-justify, #PPModal .modal-body p, #TCModal .modal-body p { text-align: left !important; }
#PPModal .modal-body a, #TCModal .modal-body a { color: #14294F; font-weight: 600; text-decoration: underline; }
#PPModal .modal-footer, #TCModal .modal-footer { background-color: #fff !important; border-top: 1px solid #E3E8EE; padding: 14px 24px; }
#PPModal #close-button, #TCModal #close-button {
  height: 44px; padding: 0 22px; border: 0; border-radius: 10px; background: #14294F; color: #fff;
  font-weight: 700; font-size: 15px; font-family: inherit;
}
#PPModal #close-button:hover, #TCModal #close-button:hover { background: #0B1A36; }
@media (max-width: 600px) {
  #PPModal .modal-dialog, #TCModal .modal-dialog { margin: 12px 0; }
  #PPModal .modal-body, #TCModal .modal-body { padding: 18px; font-size: 14px; }
  #PPModal .modal-body h3, #TCModal .modal-body h3 { font-size: 18px; }
}
/* shared legal pop-ups (legal/modals.blade.php) use a class on the Close button */
#PPModal .legal-close, #TCModal .legal-close {
  height: 44px; padding: 0 22px; border: 0; border-radius: 10px; background: #14294F; color: #fff;
  font-weight: 700; font-size: 15px; font-family: inherit;
}
#PPModal .legal-close:hover, #TCModal .legal-close:hover { background: #0B1A36; color: #fff; }
#PPModal .modal-body section, #TCModal .modal-body section { margin-bottom: 4px; }