/* terms-page.css — brings purchase-terms.html onto the 2026 glass system
   (same tokens as theme-2026.css / welcome-editor / commands). Loaded last so
   it wins over luxury.css + the page's own inline block without !important
   except where those rules use it. */

:root {
  --fd: 'Space Grotesk', 'Cairo', system-ui, sans-serif;
  --glass-fill: rgba(255, 255, 255, .055);
  --glass-line: rgba(255, 255, 255, .14);
  --glass-blur: 20px;
}

/* Outer card: glass panel instead of a flat dark box. */
.terms-page .lux-simple-card {
  background: var(--glass-fill) !important;
  border: 1px solid var(--glass-line) !important;
  border-radius: 30px;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 40px 110px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
  padding: clamp(24px, 3vw, 38px);
}

/* Headline: geometric display, no serif, tighter tracking. */
.terms-page .lux-simple-card h1 {
  font-family: var(--fd);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.06;
}

.terms-page .lux-simple-head {
  gap: 20px;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--glass-line);
}

/* Inner boxes: same glass language, one step lighter than the shell. */
.terms-page .lux-simple-box {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid var(--glass-line) !important;
  border-radius: 22px;
  padding: 20px 22px;
  transition: background .25s var(--ease-lux, cubic-bezier(.22, 1, .36, 1)), border-color .25s, transform .25s var(--ease-lux, cubic-bezier(.22, 1, .36, 1));
}
.terms-page .lux-simple-box:hover {
  background: rgba(255, 255, 255, .065) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  transform: translateY(-2px);
}

.terms-page .lux-simple-box h2 {
  font-family: var(--fd);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .14em;
  color: #d7dbe4;
}
html[dir="rtl"] .terms-page .lux-simple-box h2 {
  font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 0;
}

.terms-page .lux-simple-grid { gap: 16px; }

/* Buttons: match the pill/metal treatment used across the site. */
.terms-page .lux-btn {
  border-radius: 14px;
  min-height: 46px;
  padding: 0 26px;
  border: 1px solid var(--glass-line) !important;
  background: rgba(255, 255, 255, .05) !important;
  transition: transform .25s var(--ease-lux, cubic-bezier(.22, 1, .36, 1)), background .25s, border-color .25s, filter .25s;
}
.terms-page .lux-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .09) !important; }
.terms-page .lux-btn.primary {
  background: linear-gradient(180deg, #ffffff 0%, #dfe3ea 42%, #a7adba 72%, #eef1f6 100%) !important;
  color: #14161c !important;
  border-color: rgba(255, 255, 255, .5) !important;
}
.terms-page .lux-btn.primary:hover { filter: brightness(1.05); }

/* Language pill: same glass as the rest. */
.terms-page .term-lang {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid var(--glass-line) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

@media (max-width: 720px) {
  .terms-page .lux-simple-grid { grid-template-columns: 1fr; }
}