/* base.css - Global styles, CSS variables, fonts, body styles */

/* ---------- Fonts (use the correct files) ----------
   Put your font files in e.g. /fonts and update the URLs.
   If you already load fonts elsewhere, you can remove these @font-face rules. */

@font-face {
  font-family: "MBF Canno";
  src: url("./fonts/MBF-Canno.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ---------- Variant colors ---------- */
:root {
  --vors-color: #ffffff;
  /* BUTTON_SIZES */
  --btn-width: 330px;
  --btn-height: 51px;

  --bg-color: #02092A;

  /*--bg-color: #FFF;*/
  /* Tokens */
  --btn-radius: 30px;
  --btn-padding-x: 16px;

  /* Gradient */
  --brand-gradient: linear-gradient(180deg,
      #0042F1 10%,
      #2E70F2 23%,
      #5B9EF3 35%,
      #FF7AFF 59%,
      #F3D2B1 84%);
}

.body--primary {
  --bg-color: #02092A;
}

.body--secondary {
  --bg-color: #FFFFFF;
}

body {
  max-width: 600px;
  margin: 0 auto;
  background-color: var(--bg-color);
}

/* =======================================================================
   AUTH: SIGN IN (matches reference screenshot)
   - Uses existing markup in signin.html
   - Scoped to .auth-page to avoid impacting other pages
   ======================================================================= */

.auth-page {
  min-height: 100vh;
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  /* keeps it feeling like a "phone" centered on desktop */
  max-width: 430px;
  margin: 0 auto;

  font-family: "Satoshi", sans-serif;
}

/* Background photo */
.auth-bg {
  position: absolute;
  inset: 0;
  z-index: 0;

  /* Replace this file name with your actual asset if different */
  background-image: var(--auth-bg-image, url("./signin-bg.png"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: scale(1.03);
}

/* Darken + vignette like screenshot */
.auth-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    radial-gradient(120% 70% at 50% 0%,
      rgba(2, 9, 42, 0.05) 0%,
      rgba(2, 9, 42, 0.35) 55%,
      rgba(2, 9, 42, 0.65) 100%),
    linear-gradient(to bottom,
      rgba(2, 9, 42, 0.10) 0%,
      rgba(2, 9, 42, 0.40) 55%,
      rgba(2, 9, 42, 0.78) 100%);
}

/* Top-left logo */
.auth-header {
  position: absolute;
  top: 22px;
  left: 18px;
  z-index: 3;
}

.auth-page .brand {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  color: #ffffff;
  user-select: none;
}

.auth-page .brand__icon {
  width: 34px;
  height: 34px;
  display: block;
}

.auth-page .brand__type {
  display: flex;
  flex-direction: column;
  line-height: 1;
  margin-top: 1px;
}

.auth-page .brand__name {
  font-family: "MBF Canno", sans-serif;
  font-size: 26px;
  letter-spacing: 0.5px;
}

.auth-page .brand__sub {
  font-size: 11px;
  letter-spacing: 1.1px;
  opacity: 0.95;
  margin-top: 4px;
}

/* Bottom white card */
.auth-card {
  z-index: 3;
  margin-top: auto;

  width: 100%;
  background: #ffffff;

  border-top-left-radius: 34px;
  border-top-right-radius: 34px;

  padding: 34px 24px 28px;

  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
}

/* Title */
.auth-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #0b1220;
  letter-spacing: 0.2px;
}

/* Form layout */
.auth-form {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field {
  display: block;
}

.field__label {
  display: block;
  font-size: 12px;
  color: rgba(11, 18, 32, 0.55);
  font-weight: 600;
  margin-bottom: 8px;
}

.field__input {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 4px;
  background: #f1f1f1;

  padding: 0 12px;
  box-sizing: border-box;

  font-size: 14px;
  color: #0b1220;
  font-family: "Satoshi", sans-serif;

  outline: none;
}

.field__input:focus {
  box-shadow: 0 0 0 3px rgba(42, 172, 255, 0.18);
}

/* Checkbox row */
.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 13px;
  color: rgba(11, 18, 32, 0.62);
  font-weight: 600;
  margin-top: 4px;
}

.checkbox__input {
  width: 16px;
  height: 16px;
  accent-color: #2aacff;
}

/* Button spacing */
.auth-form .btn {
  margin-top: 10px;
}

/* Improve desktop look slightly */
@media (min-width: 520px) {
  .auth-header {
    top: 26px;
    left: 22px;
  }

  .auth-card {
    padding-left: 28px;
    padding-right: 28px;
  }
}

.variant-light {
  --vors-color: #ffffff;
}

.variant-dark {
  --vors-color: #061224;
}


/* ---------- BUTTON_VARIANTS ---------- */

/* active */
.btn--active {
  background: #2AACFF;
  border: 1px solid #3EB4FF;
  color: #FFFFFF;
}

/* inactive */
.btn--inactive {
  background: #DDDADA;
  border: none;
  color: #FFFFFF;
}

/* white */
.btn--white {
  background: #FFFFFF;
  border: none;
  color: #000000;
}

/* gradient (special layered background trick) */
.btn--gradient {
  background:
    linear-gradient(to right, black, black) padding-box,
    var(--brand-gradient) border-box;
  border: 1px solid transparent;
  color: #FFFFFF;
}


/* ---------- PREFCARD BUTTON VARIANTS ---------- */

.btn--pref-primary {
  background: #2563eb;
  color: #ffffff;
}

.btn--pref-primary:hover {
  background: #1d4ed8;
}

.btn--pref-secondary {
  background: #3b82f6;
  color: #ffffff;
}

.btn--pref-secondary:hover {
  background: #2563eb;
}

.btn--pref-tertiary {
  background: #60a5fa;
  color: #ffffff;
}

.btn--pref-tertiary:hover {
  background: #3b82f6;
}

/* Button with icon, but text stays centered */
.btn--with-icon {
  position: relative;
}

/* Icon is absolutely positioned — does NOT affect layout */
.btn__icon {
  position: absolute;
  left: 20px;
  width: 24px;
  height: 24px;
  display: block;
}

/* Label is centered by the button's flexbox */
.btn__label {
  margin: 0 auto;
  /* forces true center */
  pointer-events: none;
}


/* =======================================================================
   AUTH CREATE ACCOUNT PAGE (SCOPED)
   - Uses existing fonts: "Satoshi" + "MBF Canno"
   - Fully scoped under `.auth-create` to avoid impacting other pages
   ======================================================================= */

.auth-create {
  /* Page-level tokens (scoped) */
  --ac-text: #0b1220;
  --ac-muted: rgba(11, 18, 32, 0.55);
  --ac-placeholder: rgba(11, 18, 32, 0.30);

  --ac-link: #2aacff;

  --ac-photo-bg: #f1f2f5;
  --ac-photo-icon: rgba(11, 18, 32, 0.45);

  --ac-field-bg: #ffffff;
  --ac-field-border: rgba(46, 70, 112, 0.10);
  --ac-field-shadow: 0 6px 18px rgba(20, 45, 90, 0.06);

  --ac-pill-bg: #f4f1f1;

  --ac-primary: #2aacff;

  --ac-radius-input: 8px;
  --ac-radius-soft: 10px;

  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 18px 14px 28px;

  color: var(--ac-text);
  font-family: "Satoshi", sans-serif;
}

/* Inner "phone" width */
.auth-create__card {
  width: 100%;
  max-width: 390px;
}

/* Header */
.auth-create__header {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 6px 14px;
}

.auth-create__back {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(46, 70, 112, 0.18);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.auth-create__back-icon {
  width: 18px;
  height: 18px;
  color: var(--ac-primary);
}

.auth-create__headings {
  padding-top: 2px;
}

.auth-create__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.auth-create__subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ac-muted);
}

.auth-create__link {
  color: var(--ac-link);
  text-decoration: none;
  font-weight: 600;
}

.auth-create__link:hover {
  text-decoration: underline;
}

/* Add photo box */
.auth-create__photo {
  width: 100%;
  height: 152px;
  border: 0;
  border-radius: var(--ac-radius-soft);
  background: var(--ac-photo-bg);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.auth-create__photo-icon {
  width: 64px;
  height: 64px;
  color: var(--ac-photo-icon);
}

/* Form */
.auth-create__form {
  padding: 18px 6px 0;
}

.auth-create__field {
  display: block;
  margin-top: 14px;
}

.auth-create__label {
  display: block;
  font-size: 12px;
  color: var(--ac-muted);
  margin-bottom: 8px;
}

.auth-create__input {
  width: 100%;
  height: 46px;
  border-radius: var(--ac-radius-input);
  border: 1px solid var(--ac-field-border);
  background: var(--ac-field-bg);
  padding: 0 14px;
  font-size: 14px;
  outline: none;
  box-shadow: var(--ac-field-shadow);
  font-family: "Satoshi", sans-serif;
}

.auth-create__input::placeholder {
  color: var(--ac-placeholder);
}

.auth-create__input:focus {
  border-color: rgba(42, 172, 255, 0.40);
  box-shadow: 0 0 0 3px rgba(42, 172, 255, 0.18);
}

/* Bottom navigation pill */
.auth-create__nav {
  padding: 22px 6px 0;
  display: flex;
  justify-content: center;
}

.auth-create__nav-pill {
  width: 100%;
  height: 58px;
  border-radius: 999px;
  background: var(--ac-pill-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* Small circular buttons */
.auth-create__mini-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.auth-create__mini-icon {
  width: 18px;
  height: 18px;
}

.auth-create__mini-btn--outline {
  background: #fff;
  border: 1px solid rgba(46, 70, 112, 0.18);
  color: var(--ac-primary);
}

.auth-create__mini-btn--primary {
  background: var(--ac-primary);
  border: 1px solid rgba(42, 172, 255, 0.35);
  color: #fff;
}

/* Desktop polish */
@media (min-width: 520px) {
  .auth-create {
    padding-top: 28px;
  }
}

/* Slightly tighter top padding like the screenshot */
.auth-agreement .auth-create__form {
  padding-top: 10px;
}

/* Agreement container */
.auth-agreement__box {
  border: 1px solid rgba(11, 18, 32, 0.30);
  border-radius: 2px;
  background: #ffffff;
  padding: 10px;
}

/* Scroll area inside agreement */
.auth-agreement__scroll {
  max-height: 360px;
  overflow: auto;
  padding-right: 6px;
}

/* Text */
.auth-agreement__heading {
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 700;
  color: rgba(11, 18, 32, 0.78);
}

.auth-agreement__p {
  margin: 0 0 10px 0;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(11, 18, 32, 0.70);
}

.auth-agreement__p--section {
  font-weight: 700;
  margin-top: 12px;
}

/* Checkbox row */
.auth-agreement__check {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(11, 18, 32, 0.75);
}

.auth-agreement__check-input {
  width: 14px;
  height: 14px;
  accent-color: #2aacff;
}

/* CTA spacing */
.auth-agreement__cta {
  margin-top: 14px;
  padding: 0 6px;
}

/* Make the Sign Up button look like the screenshot "pill" size */
.auth-agreement__cta .btn {
  height: 58px;
  /* override your base 51px for this page only */
  max-width: none;
  border-radius: 999px;
}

/* Optional: soften inactive appearance slightly while preserving your classes */
.auth-agreement__cta .btn.btn--inactive {
  background: #ded9d9;
}


/* =======================================================================
   TEXT INPUT / TEXTAREA — READONLY DISPLAY VARIANT
   Trigger: .form-field.is-readonly
   ======================================================================= */

.form-field.is-readonly {
  border: 1px solid var(--stroke);
  border-radius: var(--input-radius);
  background: var(--bg);
  padding: 12px var(--pad-left);
}

/* Label treatment (same pattern everywhere) */
.form-field.is-readonly .form-label {
  margin: 0 0 6px 0;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--muted);
}

/* Input becomes display text */
.form-field.is-readonly .form-input,
.form-field.is-readonly .form-textarea {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  height: auto;

  font-size: var(--fs-value);
  font-weight: 500;
  line-height: var(--lh-value);
  color: var(--text);

  resize: none;
  pointer-events: none;
}

/* Remove placeholder visibility in readonly */
.form-field.is-readonly .form-input::placeholder,
.form-field.is-readonly .form-textarea::placeholder {
  color: transparent;
}

/* Kill focus styles just in case */
.form-field.is-readonly .form-input:focus,
.form-field.is-readonly .form-textarea:focus {
  outline: none;
  box-shadow: none;
}

/* Cursor should feel like static text */
.form-field.is-readonly {
  cursor: default;
}



.confirm-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-card {
  width: 100%;
  max-width: 390px;
  padding: 24px 16px;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;   /* centers all children horizontally */
  gap: 28px;             /* consistent vertical spacing */
}