@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Plus+Jakarta+Sans:wght@400..700&display=swap");

:root {
  --font-fredoka: "Fredoka", "Plus Jakarta Sans", sans-serif;
  --font-plus-jakarta-sans: "Plus Jakarta Sans", sans-serif;

  --pink-brand: #ff3e75;
  --pink-01: #ff2b68;
  --pink-02: #ffaac3;
  --pink-03: #ffdfea;
  --pink-04: #ffecf3;
  --pink-05: #fff9fb;
  --pink-06: #fffafa;

  --black: #1e1e1e;
  --gray-01: #4f4f4f;
  --gray-02: #8b8b8b;
  --gray-03: #b3b3b3;
  --gray-04: #e4e4e4;
  --gray-05: #f0f0f0;
  --gray-06: #fbfbfb;
  --white: #ffffff;

  --red-01: #e93636;
  --red-02: #ffcdcd;
  --red-03: #ffebeb;

  --green-01: #25833b;
  --green-02: #b4e4c4;
  --green-03: #e4f9e7;

  --yellow-01: #de9c0f;
  --yellow-02: #ffe49f;
  --yellow-03: #fffae2;

  /* Typography Font Sizes */
  --font-size-h1: 56px;
  --font-size-h2: 48px;
  --font-size-h3: 40px;
  --font-size-h4: 36px;
  --font-size-h5: 32px;
  --font-size-h6: 28px;
  --font-size-xl: 24px;
  --font-size-lg: 20px;
  --font-size-md: 18px;
  --font-size-normal: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-tiny: 10px;

  /* Typography Line Heights (Heading: 1.2x, Body: 1.5x) */
  --line-height-h1: 67.2px;
  --line-height-h2: 57.6px;
  --line-height-h3: 48px;
  --line-height-h4: 43.2px;
  --line-height-h5: 38.4px;
  --line-height-h6: 33.6px;
  --line-height-xl: 36px;
  --line-height-lg: 30px;
  --line-height-md: 27px;
  --line-height-normal: 24px;
  --line-height-sm: 21px;
  --line-height-xs: 18px;
  --line-height-tiny: 15px;

  /* Typography Font Weights */
  --font-weight-medium: 500;
  --font-weight-regular: 400;
}

/* Force light theme — override bootstrap-dark-mode.js */
[data-bs-theme="dark"] {
  --bs-body-bg: #fbfbfb;
  --bs-body-color: #1e1e1e;
  --bs-emphasis-color: #1e1e1e;
  color-scheme: light;
}

.head-text {
  line-height: 1.2;
}

.body-text {
  line-height: 1.5;
}

h1,
.h1 {
  font-size: var(--font-size-h1) !important;
  line-height: var(--line-height-h1) !important;
}

h2,
.h2 {
  font-size: var(--font-size-h2) !important;
  line-height: var(--line-height-h2) !important;
}

h3,
.h3 {
  font-size: var(--font-size-h3) !important;
  line-height: var(--line-height-h3) !important;
}

h4,
.h4 {
  font-size: var(--font-size-h4) !important;
  line-height: var(--line-height-h4) !important;
}

h5,
.h5 {
  font-size: var(--font-size-h5) !important;
  line-height: var(--line-height-h5) !important;
}

h6,
.h6 {
  font-size: var(--font-size-h6) !important;
  line-height: var(--line-height-h6) !important;
}

p,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

.xl-text {
  font-size: var(--font-size-xl) !important;
  line-height: var(--line-height-xl) !important;
}

.l-text {
  font-size: var(--font-size-lg) !important;
  line-height: var(--line-height-lg) !important;
}

.m-text {
  font-size: var(--font-size-md) !important;
  line-height: var(--line-height-md) !important;
}

.n-text {
  font-size: var(--font-size-normal) !important;
  line-height: var(--line-height-normal) !important;
}

.s-text {
  font-size: var(--font-size-sm) !important;
  line-height: var(--line-height-sm) !important;
}

.xs-text {
  font-size: var(--font-size-xs) !important;
  line-height: var(--line-height-xs) !important;
}

.tiny-text {
  font-size: var(--font-size-tiny) !important;
  line-height: var(--line-height-tiny) !important;
}

/* Descriptive / Meaningful Responsive Typography Utility Classes */
.text-heading-1 {
  font-size: var(--font-size-h1) !important;
  line-height: var(--line-height-h1) !important;
}

.text-heading-2 {
  font-size: var(--font-size-h2) !important;
  line-height: var(--line-height-h2) !important;
}

.text-heading-3 {
  font-size: var(--font-size-h3) !important;
  line-height: var(--line-height-h3) !important;
}

.text-heading-4 {
  font-size: var(--font-size-h4) !important;
  line-height: var(--line-height-h4) !important;
}

.text-heading-5 {
  font-size: var(--font-size-h5) !important;
  line-height: var(--line-height-h5) !important;
}

.text-heading-6 {
  font-size: var(--font-size-h6) !important;
  line-height: var(--line-height-h6) !important;
}

.text-extra-large {
  font-size: var(--font-size-xl) !important;
  line-height: var(--line-height-xl) !important;
}

.text-large {
  font-size: var(--font-size-lg) !important;
  line-height: var(--line-height-lg) !important;
}

.text-medium {
  font-size: var(--font-size-md) !important;
  line-height: var(--line-height-md) !important;
}

.text-normal {
  font-size: var(--font-size-normal) !important;
  line-height: var(--line-height-normal) !important;
}

.text-small {
  font-size: var(--font-size-sm) !important;
  line-height: var(--line-height-sm) !important;
}

.text-extra-small {
  font-size: var(--font-size-xs) !important;
  line-height: var(--line-height-xs) !important;
}

.text-tiny {
  font-size: var(--font-size-tiny) !important;
  line-height: var(--line-height-tiny) !important;
}

body,
button,
input,
select,
textarea,
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
div,
a {
  font-family: var(--font-fredoka) !important;
}

html,
body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

body > div {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--gray-06);
}

body {
  font-optical-sizing: auto;
  font-style: normal;
}

/* Typography Color Utility Classes */
.text-black {
  color: var(--black) !important;
}

.text-gray-01 {
  color: var(--gray-01) !important;
}

.text-gray-02 {
  color: var(--gray-02) !important;
}

.text-gray-03 {
  color: var(--gray-03) !important;
}

.text-gray-04 {
  color: var(--gray-04) !important;
}

.text-gray-05 {
  color: var(--gray-05) !important;
}

.text-gray-06 {
  color: var(--gray-06) !important;
}

.text-white {
  color: var(--white) !important;
}

.text-pink-brand {
  color: var(--pink-brand) !important;
}

.text-pink-01 {
  color: var(--pink-01) !important;
}

.text-pink-02 {
  color: var(--pink-02) !important;
}

.text-pink-03 {
  color: var(--pink-03) !important;
}

.text-pink-04 {
  color: var(--pink-04) !important;
}

.text-pink-05 {
  color: var(--pink-05) !important;
}

.text-pink-06 {
  color: var(--pink-06) !important;
}

.text-red-01 {
  color: var(--red-01) !important;
}

.text-red-02 {
  color: var(--red-02) !important;
}

.text-red-03 {
  color: var(--red-03) !important;
}

.text-green-01 {
  color: var(--green-01) !important;
}

.text-green-02 {
  color: var(--green-02) !important;
}

.text-green-03 {
  color: var(--green-03) !important;
}

.text-yellow-01 {
  color: var(--yellow-01) !important;
}

.text-yellow-02 {
  color: var(--yellow-02) !important;
}

.text-yellow-03 {
  color: var(--yellow-03) !important;
}

/* Font Weight Utility Classes */
.fw-medium {
  font-weight: var(--font-weight-medium) !important;
}

.fw-regular {
  font-weight: var(--font-weight-regular) !important;
}

.fw-bold {
  font-weight: bold !important;
}

.fw-normal {
  font-weight: normal !important;
}

/* Spacing Helpers */
.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ms-0 {
  margin-left: 0 !important;
}

.me-0 {
  margin-right: 0 !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.ps-0 {
  padding-left: 0 !important;
}

.pe-0 {
  padding-right: 0 !important;
}

/* Cursor & Alignment Helpers */
.pointer {
  cursor: pointer !important;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.page-container {
  width: 100%;
  max-width: 100vw;
  flex: 1;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
}

.page-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 100px 120px;
  gap: 40px;
  width: 100%;
  min-height: 100%;
  /* background: var(--pink-06); */
}

.container-page {
  width: 100%;
}

@media (max-width: 1024px) {
  .page-content {
    padding: 24px 60px 100px;
  }
}

@media (max-width: 576px) {
  .page-content {
    padding: 24px 20px 60px;
    gap: 32px;
  }
}

/* Sizing & Layout Utility Classes */
.gap-4px {
  gap: 4px !important;
}

.gap-6px {
  gap: 6px !important;
}

.gap-8px {
  gap: 8px !important;
}

.gap-10px {
  gap: 10px !important;
}

/* Color Helpers */
.color-inherit {
  color: inherit !important;
}

.gap-12px {
  gap: 12px !important;
}

.gap-16px {
  gap: 16px !important;
}

.gap-20px {
  gap: 20px !important;
}

.gap-24px {
  gap: 24px !important;
}

.gap-28px {
  gap: 28px !important;
}

.gap-32px {
  gap: 32px !important;
}

.gap-40px {
  gap: 40px !important;
}

.gap-48px {
  gap: 48px !important;
}

.gap-60px {
  gap: 60px !important;
}

.gap-80px {
  gap: 80px !important;
}

.p-8px {
  padding: 8px !important;
}

.p-12px {
  padding: 12px !important;
}

.p-16px {
  padding: 16px !important;
}

.p-20px {
  padding: 20px !important;
}

.p-24px {
  padding: 24px !important;
}

.p-32px {
  padding: 32px !important;
}

.p-40px {
  padding: 40px !important;
}

.pt-40px {
  padding-top: 40px !important;
}

.pt-60px {
  padding-top: 60px !important;
}

.pt-80px {
  padding-top: 80px !important;
}

.pb-20px {
  padding-bottom: 20px !important;
}

.pb-60px {
  padding-bottom: 60px !important;
}

.px-16px {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.px-32px {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.px-70px {
  padding-left: 70px !important;
  padding-right: 70px !important;
}

.px-120px {
  padding-left: 120px !important;
  padding-right: 120px !important;
}

.py-40px {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.py-50px {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

.py-60px {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.py-80px {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.py-100px {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

.pt-50px {
  padding-top: 50px !important;
}

.pb-65px {
  padding-bottom: 65px !important;
}

.max-w-480px {
  max-width: 480px !important;
}

.max-w-520px {
  max-width: 520px !important;
}

.max-w-640px {
  max-width: 640px !important;
}

.max-w-653px {
  max-width: 653px !important;
}

.size-22px {
  width: 22px !important;
  height: 22px !important;
}

.size-28px {
  width: 28px !important;
  height: 28px !important;
}

.size-logo-desktop {
  width: 173px !important;
  height: 48px !important;
}

.size-logo-tablet {
  width: 144px !important;
  height: 40px !important;
}

.size-logo-mobile {
  width: 115px !important;
  height: 32px !important;
}

.size-pattern-desktop {
  width: 412px !important;
  height: 310px !important;
}

.size-pattern-tablet {
  width: 248px !important;
  height: 186px !important;
}

.size-pattern-mobile {
  width: 240px !important;
  height: 180px !important;
}

.h-510px {
  height: 510px !important;
}

.h-360px {
  height: 360px !important;
}

.h-560px {
  height: 560px !important;
}

table.table,
table.custom-table {
  border-collapse: collapse !important;
}

table.table th,
table.custom-table th {
  border-bottom: 2px solid var(--gray-05) !important;
  padding: 12px 16px !important;
}

table.table td,
table.custom-table td {
  border-bottom: 1px solid var(--gray-05) !important;
  padding: 12px 16px !important;
}