/* Certified-PEP — Total Research Gate: checkout login gate (v1.4.1 redesign).
   Loads only on the gate / reset pages and the checkout overlay backstop. */

:root{
  --cptrg-ink:#0f2b31;
  --cptrg-muted:#5b7179;
  --cptrg-teal:#0e7c8c;
  --cptrg-teal-dark:#0a5f6c;
  --cptrg-teal-deep:#083f49;
  --cptrg-line:#e4ebee;
  --cptrg-card:#ffffff;
  --cptrg-soft:#f7fafb;
  --cptrg-tint:#f3f8f9;
  --cptrg-tint-line:#e0ecee;
  --cptrg-radius:18px;
  --cptrg-shadow:0 30px 70px -20px rgba(5,40,48,.55);
  --cptrg-font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.cptrg-body{
  margin:0;
  padding:0;
  background:var(--cptrg-teal-deep);
  color:var(--cptrg-ink);
  font-family:var(--cptrg-font);
}

.cptrg,
.cptrg *,
.cptrg *::before,
.cptrg *::after{ box-sizing:border-box; }

.cptrg{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  font-family:var(--cptrg-font);
  color:var(--cptrg-ink);
}
.cptrg button,
.cptrg input{ font-family:inherit; }

/* ---------- Background: soft blurred backdrop + radial gradient scrim ---------- */
.cptrg-hero{
  position:relative;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
  background:
    radial-gradient(70% 55% at 88% 8%, rgba(43,182,115,.16), transparent 65%),
    radial-gradient(70% 60% at 8% 92%, rgba(14,124,140,.18), transparent 65%),
    linear-gradient(160deg,#eef3f5 0%,#e9eef1 100%);
}
.cptrg-hero::before{
  content:"";
  position:absolute;
  inset:-24px;
  background-image:var(--cptrg-hero);
  background-size:cover;
  background-position:center;
  opacity:.35;
  filter:blur(9px);
  pointer-events:none;
}
.cptrg-hero__overlay{
  position:absolute;
  inset:0;
  background:radial-gradient(120% 90% at 50% 40%, rgba(8,63,73,.55), rgba(6,34,40,.82));
  pointer-events:none;
}

.cptrg-shell{
  position:relative;
  z-index:2;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  padding:20px;
}

/* ---------- Card ---------- */
.cptrg .cptrg-card{
  width:100%;
  max-width:430px;
  margin:auto;
  background:var(--cptrg-card);
  border:0;
  border-radius:var(--cptrg-radius);
  box-shadow:var(--cptrg-shadow);
  padding:30px 30px 26px;
  color:var(--cptrg-ink);
  animation:cptrg-rise .4s cubic-bezier(.2,.8,.2,1);
}
@keyframes cptrg-rise{
  from{ opacity:0; transform:translateY(14px) scale(.98); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .cptrg .cptrg-card{ animation:none; }
}

/* ---------- Header ---------- */
.cptrg .cptrg-gate-head{ text-align:center; margin:0 0 18px; }
.cptrg .cptrg-diamond{
  display:block;
  width:26px;
  height:26px;
  margin:4px auto 16px;
  transform:rotate(45deg);
  border-radius:7px;
  background:linear-gradient(135deg,#34d17f,#1c9c63);
  box-shadow:0 4px 10px rgba(43,182,115,.4);
}
.cptrg .cptrg-gate-title{
  margin:0;
  padding:0;
  font-size:18px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.2px;
  color:var(--cptrg-ink);
  text-transform:none;
}
.cptrg .cptrg-gate-sub{
  margin:5px 0 0;
  font-size:13px;
  line-height:1.4;
  color:var(--cptrg-muted);
}
.cptrg .cptrg-gate-order{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:10px;
  font-size:13px;
  font-weight:700;
  color:var(--cptrg-teal-dark);
}
.cptrg .cptrg-gate-order .cptrg-dot{ color:#c5d3d7; }

/* ---------- Alerts ---------- */
.cptrg .cptrg-alert{
  margin:0 0 14px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #f4cfcf;
  background:#fdf1f1;
  color:#8a1f1f;
  font-size:13px;
  font-weight:600;
  line-height:1.45;
}
.cptrg .cptrg-alert--ok{
  border-color:#c9ebd8;
  background:#eaf7f0;
  color:var(--cptrg-teal-dark);
}

/* ---------- Tabs (segmented control) ---------- */
.cptrg .cptrg-tabs{
  display:flex;
  gap:0;
  width:100%;
  margin:18px 0;
  padding:4px;
  background:#eef3f4;
  border:0;
  border-radius:12px;
}
.cptrg .cptrg-tab{
  appearance:none;
  -webkit-appearance:none;
  flex:1;
  min-height:0;
  margin:0;
  padding:10px;
  border:0 !important;
  border-radius:9px;
  background:transparent !important;
  box-shadow:none;
  color:var(--cptrg-muted) !important;
  font:inherit;
  font-size:14px;
  font-weight:600;
  text-align:center;
  cursor:pointer;
  transition:.18s;
}
.cptrg .cptrg-tab.is-active{
  background:#ffffff !important;
  color:var(--cptrg-ink) !important;
  box-shadow:0 2px 8px rgba(8,63,73,.12);
}

.cptrg .cptrg-panels{ margin:0; }
.cptrg .cptrg-reset-view{ display:block; margin:0; }
.cptrg .cptrg-panel{ display:none; }
.cptrg .cptrg-panel.is-active{ display:block; }

.cptrg .cptrg-forgot-title{
  margin:0;
  font-size:18px;
  font-weight:700;
  letter-spacing:-.2px;
  text-align:center;
  color:var(--cptrg-ink);
}
.cptrg .cptrg-forgot-sub{
  margin:5px 0 16px;
  font-size:13px;
  line-height:1.4;
  text-align:center;
  color:var(--cptrg-muted);
}

/* ---------- Google ---------- */
.cptrg .cptrg-google-login-form{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
}
.cptrg .cptrg-google-btn{
  appearance:none;
  -webkit-appearance:none;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px;
  width:100%;
  height:48px;
  min-height:48px;
  margin:0;
  padding:0 16px;
  border:1px solid var(--cptrg-line) !important;
  border-radius:12px !important;
  background:#ffffff !important;
  box-shadow:none !important;
  color:var(--cptrg-ink) !important;
  font:inherit;
  font-size:14.5px;
  font-weight:600;
  text-decoration:none !important;
  cursor:pointer;
  transition:.18s;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.cptrg .cptrg-google-btn:hover{
  background:var(--cptrg-soft) !important;
  border-color:#cdd9dd !important;
}
.cptrg .cptrg-google-btn:disabled{ cursor:wait; opacity:.72; }
.cptrg .cptrg-google-btn.is-busy{ opacity:.68; pointer-events:none; }
.cptrg .cptrg-google-btn__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:18px;
  height:18px;
  border:0;
  background:none;
  line-height:1;
}
.cptrg .cptrg-google-btn__mark svg{ display:block; width:18px; height:18px; }
.cptrg .cptrg-google-btn__label{ display:inline-block; line-height:1.2; }
.cptrg .cptrg-google-note{
  text-align:center;
  color:#8a9ca2;
  font-size:11.5px;
  line-height:1.45;
}
.cptrg .cptrg-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:16px 0;
  color:var(--cptrg-muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}
.cptrg .cptrg-divider::before,
.cptrg .cptrg-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--cptrg-line);
}

/* ---------- Form fields ---------- */
.cptrg .cptrg-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.cptrg .cptrg-field{ display:block; margin:0; }
.cptrg .cptrg-field span{
  display:block;
  margin:0 0 6px;
  font-size:12.5px;
  font-weight:600;
  color:var(--cptrg-muted);
}
.cptrg .cptrg-field input{
  display:block;
  width:100%;
  height:48px;
  margin:0;
  padding:0 14px;
  border:1px solid var(--cptrg-line);
  border-radius:12px;
  background:var(--cptrg-soft);
  box-shadow:none;
  color:var(--cptrg-ink);
  font:inherit;
  font-size:14.5px;
  outline:none;
  transition:.18s;
}
.cptrg .cptrg-field input:focus{
  border-color:var(--cptrg-teal);
  background:#ffffff;
  box-shadow:0 0 0 3px rgba(14,124,140,.14);
}
.cptrg .cptrg-field input::placeholder{ color:#9aabb0; }

.cptrg .cptrg-password{ position:relative; }
.cptrg .cptrg-password__input{ padding-right:78px !important; }
.cptrg .cptrg-password__toggle{
  appearance:none;
  -webkit-appearance:none;
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  height:32px;
  min-height:32px;
  margin:0;
  padding:0 12px;
  border:0;
  border-radius:8px;
  background:#eef3f4;
  color:var(--cptrg-teal-dark);
  font:inherit;
  font-size:12.5px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
}
.cptrg .cptrg-password__toggle:hover{ background:#e3ebed; }
.cptrg .cptrg-password__toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(14,124,140,.14);
}

/* ---------- Consent ---------- */
.cptrg .cptrg-terms{
  margin:2px 0 0;
  padding:12px 13px;
  background:var(--cptrg-tint);
  border:1px solid var(--cptrg-tint-line);
  border-radius:12px;
}
.cptrg .cptrg-terms__head{
  margin:0 0 4px;
  font-size:12.5px;
  font-weight:700;
  color:var(--cptrg-teal-dark);
}
.cptrg .cptrg-terms__body{
  font-size:12px;
  line-height:1.5;
  color:var(--cptrg-muted);
}
.cptrg .cptrg-terms__body p{ margin:0 0 6px; }
.cptrg .cptrg-terms__body p:last-child{ margin-bottom:0; }
.cptrg .cptrg-check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:10px 0 0;
  font-size:12px;
  font-weight:400;
  line-height:1.5;
  color:var(--cptrg-muted);
  cursor:pointer;
}
.cptrg .cptrg-check input{
  flex:0 0 auto;
  width:16px;
  height:16px;
  margin:2px 0 0;
  accent-color:var(--cptrg-teal);
}
.cptrg .cptrg-check span{
  flex:1 1 auto;
  min-width:0;
  overflow-wrap:anywhere;
}
.cptrg .cptrg-check--email{
  align-items:center;
  padding-top:10px;
  border-top:1px solid var(--cptrg-tint-line);
}
.cptrg .cptrg-check--email input{ margin-top:0; }
.cptrg .cptrg-terms-link{
  color:var(--cptrg-teal-dark);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.cptrg .cptrg-terms-link:hover{ color:var(--cptrg-teal); }

/* ---------- Primary button ---------- */
.cptrg .cptrg-btn,
.cptrg button.cptrg-btn{
  -webkit-appearance:none;
  appearance:none;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100%;
  max-width:100%;
  height:50px;
  min-height:50px !important;
  margin:4px 0 0;
  padding:0 18px !important;
  border:0 !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,var(--cptrg-teal),var(--cptrg-teal-dark)) !important;
  box-shadow:0 10px 22px -8px rgba(10,95,108,.7) !important;
  color:#ffffff !important;
  font:inherit;
  font-size:15px;
  font-weight:700 !important;
  text-decoration:none !important;
  cursor:pointer;
  transition:.18s;
  touch-action:manipulation;
}
.cptrg .cptrg-btn:hover{ filter:brightness(1.05); }
.cptrg .cptrg-btn:disabled,
.cptrg .cptrg-btn[disabled]{
  opacity:.5;
  cursor:not-allowed;
  filter:none;
  box-shadow:none !important;
}

.cptrg .cptrg-small{
  margin:2px 0 0;
  text-align:center;
  font-size:13px;
  color:var(--cptrg-muted);
  overflow-wrap:anywhere;
}
.cptrg .cptrg-small a{
  color:var(--cptrg-teal-dark);
  font-weight:600;
  text-decoration:none;
}
.cptrg .cptrg-small a:hover{ text-decoration:underline; }

.cptrg .cptrg-recaptcha-note{
  margin:2px 0 0;
  text-align:center;
  font-size:11px;
  line-height:1.5;
  color:#9aabb0;
}
.cptrg .cptrg-recaptcha-note a{
  color:#7d9298;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Regulatory notice (kept from the previous gate, now a quiet footnote). */
.cptrg .cptrg-regulatory{
  margin:18px 0 0;
  padding:12px 14px;
  background:var(--cptrg-tint);
  border:1px solid var(--cptrg-tint-line);
  border-radius:12px;
}
.cptrg .cptrg-regulatory p{
  margin:0;
  font-size:12px;
  line-height:1.55;
  font-weight:500;
  color:var(--cptrg-muted);
}

/* ---------- Full Terms & Conditions popup ---------- */
.cptrg .cptrg-terms-modal{
  position:fixed;
  inset:0;
  z-index:2147483400;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  font-family:var(--cptrg-font);
}
.cptrg .cptrg-terms-modal[hidden]{ display:none; }
.cptrg .cptrg-terms-modal__backdrop{
  position:absolute;
  inset:0;
  background:radial-gradient(120% 90% at 50% 40%, rgba(8,63,73,.6), rgba(6,34,40,.85));
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  cursor:pointer;
}
.cptrg .cptrg-terms-modal__panel{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:560px;
  max-height:min(82vh,720px);
  overflow:hidden;
  background:var(--cptrg-card);
  color:var(--cptrg-ink);
  border-radius:var(--cptrg-radius);
  box-shadow:var(--cptrg-shadow);
}
.cptrg .cptrg-terms-modal__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--cptrg-line);
}
.cptrg .cptrg-terms-modal__title{
  margin:0;
  font-size:16px;
  font-weight:700;
  line-height:1.3;
  color:var(--cptrg-ink);
}
.cptrg .cptrg-terms-modal__close{
  flex:none;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--cptrg-line);
  border-radius:10px;
  background:#eef3f4;
  color:var(--cptrg-ink);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.cptrg .cptrg-terms-modal__close:hover{ background:#e3ebed; }
.cptrg .cptrg-terms-modal__body{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px 18px;
  font-size:13px;
  line-height:1.6;
  color:var(--cptrg-muted);
}
.cptrg .cptrg-terms-modal__body h3{
  margin:14px 0 4px;
  font-size:13.5px;
  font-weight:700;
  line-height:1.4;
  color:var(--cptrg-ink);
}
.cptrg .cptrg-terms-modal__body h3:first-child{ margin-top:0; }
.cptrg .cptrg-terms-modal__body p{ margin:6px 0; }
.cptrg .cptrg-terms-modal__foot{
  padding:12px 16px;
  border-top:1px solid var(--cptrg-line);
}
.cptrg .cptrg-terms-modal__done{
  display:block;
  width:100%;
  height:48px;
  margin:0;
  padding:0 12px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg,var(--cptrg-teal),var(--cptrg-teal-dark));
  box-shadow:0 10px 22px -8px rgba(10,95,108,.7);
  color:#ffffff;
  font:inherit;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}
.cptrg .cptrg-terms-modal__done:hover{ filter:brightness(1.05); }
body.cptrg-terms-modal-open{ overflow:hidden !important; }

/* ---------- Checkout overlay backstop ----------
   Rendered inside the live checkout page: the radial gradient scrim sits on
   ::before together with the blur, so the page shows softly through it. The
   blur is deliberately NOT on the overlay itself, because backdrop-filter
   would turn it into the containing block for the fixed terms popup. */
html:has(.cptrg-ui-overlay),
body:has(.cptrg-ui-overlay){ overflow:hidden !important; }

.cptrg-ui-overlay,
.cptrg-ui-overlay *{ box-sizing:border-box; }

.cptrg-ui-overlay{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  display:block !important;
  width:100% !important;
  height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:auto !important;
  background:none !important;
  color:var(--cptrg-ink) !important;
  font-family:var(--cptrg-font) !important;
  -webkit-overflow-scrolling:touch;
}
@supports (height:100dvh){
  .cptrg-ui-overlay{ height:100dvh !important; }
}
.cptrg-ui-overlay::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background:radial-gradient(120% 90% at 50% 40%, rgba(8,63,73,.55), rgba(6,34,40,.82));
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  pointer-events:none;
}
.cptrg-ui-overlay .cptrg{ position:relative; z-index:1; }
.cptrg-ui-overlay .cptrg-hero{ background:none !important; overflow:visible; }
.cptrg-ui-overlay .cptrg-hero::before,
.cptrg-ui-overlay .cptrg-hero__overlay{ display:none !important; }

/* ---------- reCAPTCHA v3 badge ----------
   The badge is hidden in gate contexts; the disclosure line inside the gate
   forms satisfies Google's branding requirement. This stylesheet only loads in
   gate contexts, so the badge stays visible elsewhere. */
body.cptrg-body .grecaptcha-badge{ visibility:hidden; }
body:has(.cptrg-ui-overlay) .grecaptcha-badge{ visibility:hidden; }

/* ---------- Small screens ---------- */
@media (max-width:760px){
  .cptrg-shell{ padding:14px; }
  .cptrg .cptrg-card{ padding:26px 20px 22px; }
  /* 16px keeps iOS Safari from zooming the page when a field is focused. */
  .cptrg .cptrg-field input{ font-size:16px; }
}