/* Cookie consent banner + modal styling for The Tarot App.
 * Palette deliberately matches the Flutter app's theme:
 *   --accent  #6E4F8E  (soft lavender)
 *   --bg      #FCF8F5  (warm cream)
 *   --rule    #E5DDD0  (cream divider)
 *   --ink     #2A2233  (deep plum text)
 *   --muted   #6B6275  (secondary text)
 * Banner sits at the bottom; modal centers over a dim overlay.
 */

.tcb-banner,
.tcb-modal-overlay {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #2A2233;
}

/* ---------- Banner ---------- */

.tcb-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  background: #FFFFFF;
  border-top: 1px solid #E5DDD0;
  box-shadow: 0 -4px 16px rgba(42, 34, 51, 0.08);
  padding: 1rem 1.25rem;
  display: none;
}

.tcb-banner.tcb-show { display: block; }

.tcb-banner-inner { max-width: 64rem; margin: 0 auto; }

.tcb-banner-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.tcb-banner-text { margin: 0 0 1rem; }

.tcb-banner-text a {
  color: #6E4F8E;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Buttons ---------- */

.tcb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.tcb-btn {
  border: 0;
  border-radius: 6px;
  padding: 0.55rem 1rem;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  min-width: 6rem;
  transition: background-color 120ms ease;
}

.tcb-btn-primary { background: #6E4F8E; color: #FFFFFF; }
.tcb-btn-primary:hover { background: #5d4279; }
.tcb-btn-primary:focus-visible { outline: 2px solid #2A2233; outline-offset: 2px; }

.tcb-btn-secondary { background: #F2EBDD; color: #2A2233; }
.tcb-btn-secondary:hover { background: #E5DDD0; }
.tcb-btn-secondary:focus-visible { outline: 2px solid #6E4F8E; outline-offset: 2px; }

/* ---------- Modal ---------- */

.tcb-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  background: rgba(42, 34, 51, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.tcb-modal-overlay.tcb-show { display: flex; }

.tcb-modal {
  background: #FCF8F5;
  border-radius: 12px;
  max-width: 32rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(42, 34, 51, 0.2);
}

.tcb-modal-title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #6E4F8E;
}

.tcb-modal-intro {
  margin: 0 0 1.25rem;
  color: #6B6275;
}

.tcb-category {
  border: 1px solid #E5DDD0;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0 0 0.75rem;
  background: #FFFFFF;
}

.tcb-category legend {
  font-weight: 600;
  padding: 0 0.4rem;
}

.tcb-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.tcb-toggle input { accent-color: #6E4F8E; }
.tcb-toggle input[disabled] { cursor: default; }

.tcb-cat-desc {
  margin: 0.5rem 0 0;
  color: #6B6275;
  font-size: 13px;
}

/* ---------- Compact layout for narrow viewports ---------- */

@media (max-width: 540px) {
  .tcb-actions { justify-content: stretch; }
  .tcb-actions .tcb-btn { flex: 1 1 0; min-width: 0; }
  .tcb-banner { padding: 0.85rem 1rem; }
  .tcb-modal { padding: 1.25rem; }
}