/* =========================================================
   CODERN
   PRIVACY POLICY / LEGAL PAGE
========================================================= */


/* =========================================================
   PAGE
========================================================= */

.legal-page {

  min-height: 100vh;

  padding: 120px 24px 80px;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(124, 58, 237, 0.16),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(6, 182, 212, 0.10),
      transparent 32%
    ),
    #0a0e27;

}


/* =========================================================
   CONTAINER
========================================================= */

.legal-container {

  width: 100%;
  max-width: 900px;

  margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.legal-header {

  margin-bottom: 40px;

}


.legal-eyebrow {

  display: inline-block;

  margin-bottom: 14px;

  color: #a78bfa;

  font-size: 13px;
  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;

}


.legal-title {

  margin: 0 0 12px;

  font-size: clamp(38px, 7vw, 64px);

  line-height: 1.05;

  font-weight: 800;

  background:
    linear-gradient(
      90deg,
      #a78bfa,
      #ffffff,
      #67e8f9
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

}


.legal-updated {

  margin: 0;

  color: rgba(255, 255, 255, 0.55);

  font-size: 14px;

}


/* =========================================================
   CONTENT CARD
========================================================= */

.legal-content {

  padding: 40px;

  border: 1px solid rgba(255, 255, 255, 0.10);

  border-radius: 24px;

  background:
    rgba(255, 255, 255, 0.035);

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.30);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

}


.legal-content > p:first-child {

  margin-top: 0;

}


.legal-content p {

  margin: 0 0 20px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 16px;

  line-height: 1.85;

}


/* =========================================================
   SECTIONS
========================================================= */

.legal-section {

  margin-top: 42px;

}


.legal-section h2 {

  margin: 0 0 14px;

  color: #ffffff;

  font-size: 25px;

  line-height: 1.3;

  font-weight: 700;

}


.legal-section p:last-child {

  margin-bottom: 0;

}


/* =========================================================
   LINKS
========================================================= */

.legal-content a {

  color: #a78bfa;

  font-weight: 600;

  text-decoration: none;

  transition:
    color 0.2s ease,
    text-shadow 0.2s ease;

}


.legal-content a:hover {

  color: #ffffff;

  text-shadow:
    0 0 18px rgba(124, 58, 237, 0.55);

}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.legal-actions {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  margin-top: 24px;

}


.legal-back-button,
.legal-secondary-button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  min-height: 48px;

  padding: 12px 18px;

  border-radius: 10px;

  font-size: 14px;

  font-weight: 700;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;

}


.legal-back-button {

  color: #ffffff;

  background: #7c3aed;

  box-shadow:
    0 10px 30px rgba(124, 58, 237, 0.25);

}


.legal-back-button:hover {

  color: #ffffff;

  transform: translateY(-2px);

  box-shadow:
    0 14px 35px rgba(124, 58, 237, 0.35);

}


.legal-secondary-button {

  color: rgba(255, 255, 255, 0.80);

  border: 1px solid rgba(255, 255, 255, 0.12);

  background:
    rgba(255, 255, 255, 0.035);

}


.legal-secondary-button:hover {

  color: #ffffff;

  border-color:
    rgba(255, 255, 255, 0.24);

  background:
    rgba(255, 255, 255, 0.07);

  transform: translateY(-2px);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

  .legal-page {

    padding:
      105px
      20px
      60px;

  }

  .legal-content {

    padding: 30px;

    border-radius: 20px;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .legal-page {

    padding:
      95px
      16px
      50px;

  }


  .legal-header {

    margin-bottom: 28px;

  }


  .legal-title {

    font-size: 40px;

  }


  .legal-content {

    padding: 22px;

    border-radius: 16px;

  }


  .legal-content p {

    font-size: 15px;

    line-height: 1.75;

  }


  .legal-section {

    margin-top: 34px;

  }


  .legal-section h2 {

    font-size: 21px;

  }


  .legal-actions {

    flex-direction: column;

    align-items: stretch;

  }


  .legal-back-button,
  .legal-secondary-button {

    width: 100%;

  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

  .legal-page {

    padding-left: 12px;
    padding-right: 12px;

  }


  .legal-content {

    padding: 18px;

  }


  .legal-title {

    font-size: 34px;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .legal-content a,
  .legal-back-button,
  .legal-secondary-button {

    transition: none;

  }

}

/* =========================================================
   LIGHT MODE
   ---------------------------------------------------------
   Dark mode remains completely unchanged.
   Light mode converts:
   - Dark legal page → white/light page
   - Dark glass card → light glass card
   - White text → dark readable text
   - Cyan/purple gradient → purple gradient
   - Dark buttons/surfaces → light-mode equivalents
========================================================= */

[data-theme="light"] .legal-page {
  color: #17142b;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(124, 58, 237, 0.10),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(168, 85, 247, 0.08),
      transparent 32%
    ),
    #ffffff;
}


/* =========================================================
   LIGHT MODE — EYEBROW
========================================================= */

[data-theme="light"] .legal-eyebrow {
  color:
    var(--brand-primary, #8b5cf6);
}


/* =========================================================
   LIGHT MODE — TITLE
========================================================= */

[data-theme="light"] .legal-title {
  background:
    linear-gradient(
      90deg,
      #7c3aed,
      #8b5cf6,
      #a855f7
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;
}


/* =========================================================
   LIGHT MODE — UPDATED DATE
========================================================= */

[data-theme="light"] .legal-updated {
  color: rgba(23, 20, 43, 0.55);
}


/* =========================================================
   LIGHT MODE — CONTENT CARD
========================================================= */

[data-theme="light"] .legal-content {
  border-color:
    rgba(23, 20, 43, 0.10);

  background:
    rgba(255, 255, 255, 0.82);

  box-shadow:
    0 30px 80px
    rgba(23, 20, 43, 0.10);
}


/* =========================================================
   LIGHT MODE — CONTENT TEXT
========================================================= */

[data-theme="light"] .legal-content p {
  color: rgba(23, 20, 43, 0.72);
}


/* =========================================================
   LIGHT MODE — SECTION HEADINGS
========================================================= */

[data-theme="light"] .legal-section h2 {
  color: #17142b;
}


/* =========================================================
   LIGHT MODE — LINKS
========================================================= */

[data-theme="light"] .legal-content a {
  color:
    var(--brand-primary, #8b5cf6);
}

[data-theme="light"] .legal-content a:hover {
  color:
    var(--brand-primary-dark, #7c3aed);

  text-shadow:
    0 0 18px
    rgba(124, 58, 237, 0.25);
}


/* =========================================================
   LIGHT MODE — PRIMARY BACK BUTTON
========================================================= */

[data-theme="light"] .legal-back-button {
  color: #ffffff;

  background:
    var(--brand-primary, #8b5cf6);

  box-shadow:
    0 10px 30px
    rgba(124, 58, 237, 0.20);
}

[data-theme="light"] .legal-back-button:hover {
  color: #ffffff;

  box-shadow:
    0 14px 35px
    rgba(124, 58, 237, 0.30);
}


/* =========================================================
   LIGHT MODE — SECONDARY BUTTON
========================================================= */

[data-theme="light"] .legal-secondary-button {
  color: rgba(23, 20, 43, 0.78);

  border-color:
    rgba(23, 20, 43, 0.12);

  background:
    rgba(23, 20, 43, 0.035);
}

[data-theme="light"] .legal-secondary-button:hover {
  color: #17142b;

  border-color:
    rgba(124, 58, 237, 0.22);

  background:
    rgba(124, 58, 237, 0.07);
}


/* =========================================================
   LIGHT MODE — FOCUS STATES
========================================================= */

[data-theme="light"]
.legal-back-button:focus-visible,
[data-theme="light"]
.legal-secondary-button:focus-visible,
[data-theme="light"]
.legal-content a:focus-visible {
  outline:
    2px solid
    var(--brand-primary-light, #a78bfa);

  outline-offset: 3px;
}