/* ─── twl-design-system.css ──────────────────────────────────────────────── */
/* Reusable token aliases and shared UI primitives matching V3 design contract. */

@font-face {
  font-display: swap;
  font-family: 'DB HelvethaicaMon X';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/DBHelvethaicaMonX/DBHelvethaicaMonX-Reg.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'DB HelvethaicaMon X';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/DBHelvethaicaMonX/DBHelvethaicaMonX-Med.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'DB HelvethaicaMon X';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/DBHelvethaicaMonX/DBHelvethaicaMonX-Bd.woff2') format('woff2');
}

:root {
  --twl-font-heading: 'DB HelvethaicaMon X', Arial, sans-serif;
  --twl-font-body: 'Bai Jamjuree', Arial, sans-serif;
  --Title-Page-font-size-md: 28px;
  --Title-Page-font-size-xlg: 48px;

  /* Figma maps brand fills/borders to 500 and text/icons to 600. */
  --Background-Brand-default: var(--twl-ref-brand-500, #ff775f);
  --Border-Brand-default: var(--twl-ref-brand-500, #ff775f);
  --Text-Brand-default: var(--twl-ref-brand-600, #e85d45);
  --Icon-Brand-default: var(--twl-ref-brand-600, #e85d45);
}

/* Typography Utility Classes */
.twl-type-action-large {
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-lg, 20px);
  font-weight: 500;
  line-height: normal;
}

.twl-type-action-large-strong {
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-lg, 20px);
  font-weight: 700;
  line-height: normal;
}

.twl-type-action-medium-strong {
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-md, 16px);
  font-weight: 700;
  line-height: normal;
}

.twl-type-action-small-strong {
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-sm, 14px);
  font-weight: 700;
  line-height: normal;
}

.twl-type-title-page-small {
  font-family: var(--Title-Page-font-family, var(--twl-font-heading));
  font-size: var(--Title-Page-font-size-sm, 24px);
  font-weight: 700;
  line-height: normal;
}

.twl-type-title-page-large {
  font-family: var(--Title-Page-font-family, var(--twl-font-heading));
  font-size: var(--Title-Page-font-size-lg, 32px);
  font-weight: 700;
  line-height: normal;
}

.twl-type-title-page-medium {
  font-family: var(--Title-Page-font-family, var(--twl-font-heading));
  font-size: var(--Title-Page-font-size-md, 28px);
  font-weight: 700;
  line-height: normal;
}

.twl-type-title-page-extra-large {
  font-family: var(--Title-Page-font-family, var(--twl-font-heading));
  font-size: var(--Title-Page-font-size-xlg, 48px);
  font-weight: 700;
  line-height: normal;
}

.twl-type-heading-medium,
.twl-type-heading-small {
  font-family: var(--Heading-font-family, var(--twl-font-heading));
  font-weight: 500;
  line-height: normal;
}

.twl-type-heading-medium {
  font-size: var(--Heading-font-size-md, 24px);
}

.twl-type-heading-small {
  font-size: var(--Heading-font-size-sm, 20px);
}

.twl-type-body-base {
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  line-height: var(--Body-font-line-height-md, 21px);
  font-weight: 500;
}

.twl-type-body-base-strong {
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  line-height: var(--Body-font-line-height-md, 21px);
  font-weight: 700;
}

.twl-type-body-large {
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-lg, 16px);
  line-height: var(--Body-font-line-height-lg, 24px);
  font-weight: 500;
}

.twl-type-body-large-strong {
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-lg, 16px);
  line-height: var(--Body-font-line-height-lg, 24px);
  font-weight: 700;
}

.twl-type-body-small {
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-sm, 12px);
  line-height: var(--Body-font-line-height-sm, 18px);
  font-weight: 500;
}

.twl-type-body-extra-large,
.twl-type-body-extra-large-strong {
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-xlg, 20px);
  line-height: var(--Body-font-line-height-xlg, 30px);
}

.twl-type-body-extra-large {
  font-weight: 500;
}

.twl-type-body-extra-large-strong {
  font-weight: 700;
}

.twl-type-body-xsmall {
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-xs, 10px);
  line-height: var(--Body-font-line-height-xs, 15px);
  font-weight: 500;
}

/* Reusable Component Primitives */
.twl-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--Background-Brand-default, #ff775f);
  color: var(--Text-Static-white, #ffffff);
  border: 1px solid var(--Border-Brand-default, #ff775f);
  border-radius: var(--twl-radius-full, 999px);
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-lg, 20px);
  font-weight: 700;
  padding: 10px 24px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  text-decoration: none;
}

.twl-btn-primary:hover {
  background-color: var(--Background-Brand-hover, #e85d45);
  border-color: var(--Border-Brand-hover, #e85d45);
  color: var(--Text-Static-white, #ffffff);
}

.twl-btn-primary:active {
  background-color: var(--Background-Brand-active, #c04528);
}

.twl-btn-primary:disabled {
  background-color: var(--Background-Brand-disabled, #ffc4b6);
  border-color: var(--Border-Brand-disabled, #ffc4b6);
  color: var(--Text-Brand-on-brand-disabled, #ff8e76);
  cursor: not-allowed;
}

.twl-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--Base-bg-base, #ffffff);
  color: var(--Text-Brand-default, #e85d45);
  border: 1px solid var(--Border-Brand-default, #ff775f);
  border-radius: var(--twl-radius-full, 999px);
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-lg, 20px);
  font-weight: 700;
  padding: 10px 24px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  text-decoration: none;
}

.twl-btn-secondary:hover {
  background-color: var(--Background-Brand-subtle, #fff3f0);
  color: var(--Text-Brand-default, #e85d45);
}

.twl-btn-secondary:active {
  background-color: var(--Background-Brand-subtle-active, #ffe0d9);
}

#chapterPurchase {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.purchase-choice-input {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.purchase-choice-input[type=radio]+label:not(.package-purchase) {
  border: solid 1px var(--twl-sem-border-neutral-default, #ddd);
  border-radius: 8px;
  margin: 12px 10px 6px 0;
}

.purchase-choice-input[type=radio]+label.package-purchase {
  border-radius: 8px;
  background-color: var(--Background-Brand-subtle, var(--tunwalai-100));
}

.purchase-choice-input[type=radio]:not(:checked):not(:disabled):not(.disabled)+label:hover {
  background-color: var(--Background-Brand-subtle, var(--tunwalai-100));
}

.purchase-choice-input[type=radio]:checked+label {
  border: solid 1px var(--Border-Brand-default, var(--twl-theme-accent-border, var(--tunwalai-700)));
  background-color: var(--Background-Brand-subtle-active, var(--tunwalai-100));
}

.purchase-choice-input[type=radio]:focus-visible+label {
  outline: 2px solid var(--Border-Brand-default, var(--twl-theme-accent-border, var(--tunwalai-700)));
  outline-offset: 2px;
}

/* Avatar layout */
.twl-avatar {
  border-radius: var(--twl-radius-full, 999px);
  object-fit: cover;
}

/* Modals z-index alignment with site-header */
.site-header {
  z-index: 100 !important;
}