/* LoveZero / SiraLove - Terms of Service & Privacy Modal (< 150 lines) */
.terms-modal-overlay {
  position: fixed; inset: 0; z-index: 2200;
  background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 12px;
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
}
.terms-modal-overlay.active { opacity: 1; visibility: visible; }

.terms-modal-dialog {
  position: relative; width: 100%; max-width: 620px; max-height: 88vh;
  display: flex; flex-direction: column; background: #ffffff;
  border: 1px solid rgba(244, 63, 94, 0.25); border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
  transform: scale(0.95) translateY(10px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.terms-modal-overlay.active .terms-modal-dialog { transform: scale(1) translateY(0); }

/* Header Layout: 2-Row Structured Header (No Overlap) */
.terms-modal-header {
  padding: 16px 20px; border-bottom: 1px solid #f1f5f9; background: #ffffff;
  display: flex; flex-direction: column; gap: 8px;
}
.terms-header-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.terms-brand-area {
  display: flex; align-items: center; gap: 10px;
}
.terms-brand-area .terms-icon { font-size: 24px; line-height: 1; }
.terms-modal-heading {
  font-size: 16px; font-weight: 800; color: #0f172a; margin: 0; line-height: 1.25;
}

/* Close button - in-flow flex item to prevent overlap */
.terms-modal-header .modal-close-btn {
  position: static !important;
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  border: none; background: #f1f5f9; color: #64748b; font-size: 20px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.terms-modal-header .modal-close-btn:hover { background: #fee2e2; color: #e11d48; }

.terms-header-sub {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.terms-subtitle {
  font-size: 12px; color: #64748b; font-weight: 500;
}

/* Highlighted Full Page Pill Button */
.terms-fullpage-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: #ffe4e6; color: #e11d48; border: 1px solid #f43f5e;
  padding: 4px 12px; border-radius: 999px; font-size: 11.5px;
  font-weight: 700; text-decoration: none; line-height: 1.3;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.15);
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.terms-fullpage-pill:hover {
  background: #e11d48; color: #ffffff; border-color: #e11d48;
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3);
}
.terms-fullpage-pill .pill-arr { font-size: 12px; font-weight: 800; }

/* 4-Column Responsive Grid Tabs (Never Cut Off!) */
.terms-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 8px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.terms-tab {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 7px 4px; border: none; background: transparent; border-radius: 8px;
  font-size: 12px; font-weight: 700; color: #64748b; cursor: pointer;
  white-space: nowrap; transition: all 0.2s;
}
.terms-tab .tab-ico { font-size: 13px; line-height: 1; }
.terms-tab .tab-txt-desktop { display: inline; }
.terms-tab .tab-txt-mobile { display: none; }
.terms-tab:hover { color: #0f172a; background: #e2e8f0; }
.terms-tab.active {
  background: #ffffff; color: #e11d48; box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Modal Body */
.terms-body {
  flex: 1; overflow-y: auto; padding: 20px 24px; font-size: 13px; color: #334155; line-height: 1.65;
}
.terms-pane { display: none; }
.terms-pane.active { display: block; animation: termsFade 0.2s ease; }
@keyframes termsFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.terms-pane h4 {
  font-size: 13.5px; font-weight: 700; color: #0f172a; margin: 14px 0 4px;
}
.terms-pane h4:first-child { margin-top: 0; }
.terms-pane p { margin: 0 0 10px; color: #475569; }
.terms-pane code {
  background: #ffe4e6; color: #be123c; padding: 2px 6px; border-radius: 4px; font-size: 11.5px; font-family: monospace;
}

/* Modal Footer */
.terms-modal-footer {
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  padding: 14px 22px; border-top: 1px solid #f1f5f9; background: #ffffff;
}
.btn-terms-close {
  padding: 9px 16px; background: #f1f5f9; color: #475569; border: none;
  border-radius: 9px; font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.2s;
}
.btn-terms-close:hover { background: #e2e8f0; }
.btn-terms-accept {
  padding: 9px 20px; background: linear-gradient(135deg, #e11d48, #f43f5e); color: #ffffff;
  border: none; border-radius: 9px; font-weight: 700; font-size: 13px; cursor: pointer;
  box-shadow: 0 3px 10px rgba(225,29,72,0.25); transition: transform 0.2s, box-shadow 0.2s;
}
.btn-terms-accept:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(225,29,72,0.35); }

/* Mobile Optimizations */
@media (max-width: 520px) {
  .terms-modal-dialog {
    max-height: 92vh; border-radius: 16px; width: 100%;
  }
  .terms-modal-header {
    padding: 12px 14px; gap: 6px;
  }
  .terms-modal-heading { font-size: 14.5px; }
  .terms-header-sub { gap: 6px; }
  .terms-subtitle { font-size: 11px; }
  .terms-fullpage-pill {
    padding: 3px 9px; font-size: 10.5px;
  }
  .terms-tabs {
    padding: 6px 8px; gap: 4px;
  }
  .terms-tab {
    padding: 6px 2px; font-size: 11px;
  }
  .terms-tab .tab-ico { font-size: 11.5px; }
  .terms-tab .tab-txt-desktop { display: none; }
  .terms-tab .tab-txt-mobile { display: inline; }
  .terms-body {
    padding: 14px 16px; font-size: 12.5px;
  }
  .terms-pane h4 { font-size: 13px; }
  .terms-modal-footer {
    display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; padding: 10px 14px;
  }
  .btn-terms-close, .btn-terms-accept {
    width: 100%; text-align: center; padding: 10px; font-size: 12.5px;
  }
}