/* General */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: url('background.jpg') no-repeat center center / cover;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */
.site-header {
  display: flex;
  align-items: center;
  background: #004225;
  color: white;
  padding: 10px 20px;
}

.site-logo {
  width: 40px;
  margin-right: 10px;
}

.site-name {
  font-size: 1.5rem;
  font-weight: bold;
}

/* Main Content */
.main-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.terms-container {
  background-color: rgba(255, 255, 255, 0.95);
  padding: 32px;
  border-radius: 10px;
  max-width: 700px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  /* Keep the container readable on small screens by limiting height
     and making the interior scrollable. Use flex so a footer (button)
     can be kept visible if present. */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 160px);
  overflow: hidden;
}

.terms-container h2 {
  font-size: 2rem;
  color: #2e7d32;
  margin-bottom: 20px;
}

.terms-container p {
  font-size: 1rem;
  margin-bottom: 15px;
}

.terms-container {
  color: #222;
  line-height: 1.6;
}

/* Scrolling inner area. If your HTML wraps the long text in an element
   with class `terms-body`, it will get the scroll behaviour and keep
   headings / buttons visible. If not, the container itself will scroll. */
.terms-container .terms-body {
  overflow: auto;
  padding-right: 8px; /* nice spacing for scrollbar */
  margin-bottom: 16px;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

.terms-container ul {
  list-style: disc;
  margin-left: 20px;
  margin-bottom: 30px;
}

.terms-container ul li {
  margin-bottom: 8px;
}

/* If the accept button is placed directly under the content, give it
   some separation and place it visually at the bottom when container
   is tall enough. This selector is safe even if markup doesn't use
   .terms-footer; it targets direct children links/buttons for layout. */
.terms-container .terms-footer,
.terms-container > a.accept-btn,
.terms-container > .accept-btn {
  margin-top: 12px;
  align-self: flex-end;
}

/* Thin, subtle scrollbar styling */
.terms-container .terms-body::-webkit-scrollbar {
  width: 10px;
}
.terms-container .terms-body::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.04);
  border-radius: 8px;
}
.terms-container .terms-body::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 8px;
}

/* Firefox */
.terms-container .terms-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.12) rgba(0,0,0,0.04);
}

.terms-container ul {
  list-style: disc;
  margin-left: 20px;
  margin-bottom: 30px;
}

.accept-btn {
  display: inline-block;
  background: #388e3c;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background 0.2s;
}

.accept-btn:hover {
  background: #2e7d32;
}

/* Footer */
.site-footer {
  background: #004225;
  color: white;
  text-align: center;
  padding: 15px;
  font-size: 0.9rem;
}