/*
  Terms and Conditions page, ported from the 24H Cargo website
  (src/views/TermsAndConditions.vue). Every rule is prefixed with .terms-page so
  nothing leaks to other pages. The legal document ships its own <style> block;
  these rules sit one level more specific and give it the same design treatment
  as on the Cargo site. The page title is shown by the theme's page-title banner,
  and the text uses the theme's own content layout (the same 1170px container and
  100px vertical spacing as the Home/About/Services content) instead of the
  centred 820px reading column used on the Cargo site.
*/
.terms-page {
  --primary-color: #FF6B35;
  --secondary-color: #2D3142;
  --accent-color: #4ECDC4;
  --light-gray: #F7F7F7;
  --dark-gray: #333333;
  --medium-gray: #777777;
  --white: #FFFFFF;
  --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
  --navbar-height: 90px;
}

.terms-page {
  padding: 0;
  background: var(--white);
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  color: var(--dark-gray);
}

.terms-page,
.terms-page * {
  box-sizing: border-box;
}

.terms-page-title {
  position: relative;
  max-width: 820px;
  margin: 0 auto 2rem;
  padding-bottom: 18px;
  font-size: 2.25rem;
  color: var(--secondary-color);
}

.terms-page-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: var(--primary-color);
}

/* ---------- Reading text ---------- */
.terms-page .hl-terms {
  max-width: none;
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--dark-gray);
}

.terms-page .hl-terms p {
  margin: 0 0 1rem;
}

.terms-page .hl-terms strong {
  font-weight: 600;
  color: var(--secondary-color);
}

.terms-page .hl-terms a {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.terms-page .hl-terms a:hover {
  color: var(--secondary-color);
}

/* ---------- Headings ---------- */
.terms-page .hl-terms h2 {
  margin: 3rem 0 1rem;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--light-gray);
  font-size: 1.45rem;
  line-height: 1.3;
  color: var(--secondary-color);
}

.terms-page .hl-terms h3 {
  margin: 2rem 0 0.75rem;
  font-size: 1.1rem;
  color: var(--secondary-color);
}

/* Keep in-page jumps (#c1–#c25, #s1, #s2) clear of the sticky site header. */
.terms-page .hl-terms [id] {
  scroll-margin-top: calc(var(--navbar-height) + 16px);
}

/* ---------- Lists ---------- */
.terms-page .hl-terms ul {
  margin: 0 0 1.25rem 1.25rem;
  padding: 0;
  list-style: disc outside;
}

.terms-page .hl-terms ol {
  padding: 0;
  list-style: decimal outside;
}

.terms-page .hl-terms li {
  margin: 0 0 0.5rem;
  padding-left: 4px;
}

.terms-page .hl-terms li::marker {
  color: var(--primary-color);
  font-weight: 600;
}

/* ---------- "Important notice" card ---------- */
.terms-page .hl-terms .hl-notice {
  margin: 0 0 2.5rem;
  padding: 28px 30px 12px;
  border: 1px solid rgba(255, 107, 53, 0.35);
  border-radius: 10px;
  background: rgba(255, 107, 53, 0.06);
  box-shadow: var(--box-shadow);
}

.terms-page .hl-terms .hl-notice h2 {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  font-size: 1.3rem;
  color: var(--secondary-color);
}

.terms-page .hl-terms .hl-notice li {
  margin-bottom: 0.75rem;
}

/* ---------- Contents ---------- */
.terms-page .hl-terms .hl-toc {
  columns: 2;
  column-gap: 32px;
  margin: 0 0 1rem 1.5rem;
  padding: 22px 24px 14px 36px;
  border-radius: 10px;
  background: var(--light-gray);
  font-size: 0.95rem;
}

.terms-page .hl-terms .hl-toc li {
  margin-bottom: 0.4rem;
  break-inside: avoid;
}

.terms-page .hl-terms .hl-toc a {
  color: var(--dark-gray);
  text-decoration: none;
}

.terms-page .hl-terms .hl-toc a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

/* ---------- Definitions table ---------- */
.terms-page .hl-terms .hl-table {
  margin: 0 0 1.5rem;
  overflow-x: auto;
  border-radius: 10px;
  box-shadow: var(--box-shadow);
}

.terms-page .hl-terms table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.terms-page .hl-terms th,
.terms-page .hl-terms td {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--light-gray);
  text-align: left;
  vertical-align: top;
}

.terms-page .hl-terms th {
  background: var(--secondary-color);
  font-weight: 600;
  color: var(--white);
}

.terms-page .hl-terms tbody tr:nth-child(even) td {
  background: var(--light-gray);
}

.terms-page .hl-terms td:first-child {
  font-weight: 600;
  color: var(--secondary-color);
  white-space: nowrap;
}

/* ---------- Document control ---------- */
.terms-page .hl-terms .hl-foot {
  margin-top: 3rem;
  padding: 22px 26px 8px;
  border: 0;
  border-radius: 10px;
  background: var(--light-gray);
  font-size: 0.92rem;
  color: var(--medium-gray);
}

.terms-page .hl-terms .hl-foot h3 {
  margin-top: 0;
}

@media (max-width: 640px) {
  .terms-page-title {
    font-size: 1.75rem;
  }

  .terms-page .hl-terms h2 {
    margin-top: 2.25rem;
    font-size: 1.25rem;
  }

  .terms-page .hl-terms .hl-notice {
    padding: 20px 18px 6px;
  }

  .terms-page .hl-terms .hl-toc {
    columns: 1;
  }

  .terms-page .hl-terms th,
  .terms-page .hl-terms td {
    padding: 10px 12px;
  }

  .terms-page .hl-terms td:first-child {
    white-space: normal;
  }
}