/* ==========================================================
   ADRS – Legal Pages CSS
   Soothing sea-glass color palette
   ========================================================== */
:root{
  /* Soothing sea-glass palette: calm teal primary with warm coral accent */
  --p:#1F6B6C;                /* primary (darker teal for better contrast) */
  --p-translucent:rgba(31,107,108,0.32);
  --pl:#144F50;               /* even darker primary tone */
  --s:#E6F4F2;                /* soft sea-foam */
  --bg:#FBFBF9;               /* very light warm background */
  --text:#0F1720;             /* deep slate for text */
  --ctext:#F3F6F5;            /* light complementary text for accents */
  --accent:#B7422E;           /* deeper coral for good contrast on white text */
  --input-bg:#FFFFFF;
}

@media (prefers-color-scheme:dark){
    :root{
    --p:#83C5BE;              /* lighter teal for dark mode */
    --s:#223231;              /* dark muted surface */
    --bg:#0B1220;             /* deep background */
    --text:#E6F4F2;           /* pale text for contrast */
    --ctext:#92CFC9;          /* subtle complementary for colored surfaces */
    --accent:#FF7A66;         /* muted coral accent tuned for dark mode */
    --input-bg:#E6F4F2;
  }
}

.coin {
  height:100px;
  perspective: 1000px;
  margin-bottom: 10px;
}

.coin-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: flip 6s ease-in-out infinite;
}

.coin-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Front side */
.coin-front {
  transform: rotateY(0deg);
}

/* Back side */
.coin-back {
  transform: rotateY(180deg);
}

/* Animation */
@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }
  40% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  90% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}


/* ==========================================================
   ADRS – Legal Pages
   Lightweight, system-font, theme-aligned
   ========================================================== */

.legal-disclaimer,
.terms-conditions,
.privacy-policy{
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  color: var(--text);
  background: var(--bg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

/* ----------------------------------------------------------
   Headings
   ---------------------------------------------------------- */

.legal-disclaimer h1,
.terms-conditions h1,
.privacy-policy h1{
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--p);
}

.terms-conditions h2,
.privacy-policy h2{
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: var(--pl);
}

.privacy-policy h3{
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
  color: var(--pl);
}

/* ----------------------------------------------------------
   Text & Lists
   ---------------------------------------------------------- */

.legal-disclaimer p,
.terms-conditions p,
.privacy-policy p{
  margin: 0.6rem 0;
  font-size: 0.95rem;
}

.legal-disclaimer ul,
.terms-conditions ul{
  margin: 0.75rem 0 0.75rem 1.25rem;
  padding: 0;
}

.legal-disclaimer li,
.terms-conditions li{
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}

/* ----------------------------------------------------------
   Subtle Section Separation
   ---------------------------------------------------------- */

.terms-conditions h2,
.privacy-policy h2{
  padding-top: 0.75rem;
  border-top: 1px solid var(--p-translucent);
}

/* ----------------------------------------------------------
   Links
   ---------------------------------------------------------- */

.legal-disclaimer a,
.terms-conditions a,
.privacy-policy a{
  color: var(--p);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.legal-disclaimer a:hover,
.terms-conditions a:hover,
.privacy-policy a:hover{
  color: var(--accent);
}

/* ----------------------------------------------------------
   Checkbox (Creation Page)
   ---------------------------------------------------------- */

.terms-consent{
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: 0.9rem;
}

.terms-consent input[type="checkbox"]{
  accent-color: var(--p);
  margin-top: 0.2rem;
}

/* ----------------------------------------------------------
   Soft Callout (Optional – reuse if needed)
   ---------------------------------------------------------- */

.legal-note{
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--s);
  border-left: 3px solid var(--p);
  font-size: 0.9rem;
}