/* ========================================================================== 
   Interest and fees page
   ========================================================================== */

.page-interest-and-fees .interest-and-fees-page {
  width: 100%;
  background: #ffffff;
}

.page-interest-and-fees .interest-fees {
  width: 100%;
  padding: clamp(54px, 6vh, 68px) 0 clamp(80px, 9vh, 104px);
  background: #ffffff;
}

.page-interest-and-fees .interest-fees__inner {
  display: flex;
  width: min(
    calc(100% - (var(--container-gutter) * 2)),
    var(--container-width)
  );
  flex-direction: column;
  margin-inline: auto;
}

.page-interest-and-fees .interest-fees__title {
  margin: 0;

  color: #0098dc;
  font-family: var(--font-brand);
  /* Keep the heading restrained on wide screens while preserving legibility. */
  font-size: clamp(36px, calc(30px + 0.5vw), 40px);
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
}

.page-interest-and-fees .interest-fees__list {
  width: 100%;
  margin-top: clamp(62px, 7vh, 76px);
  border-top: 1px solid #dedede;
}

.page-interest-and-fees .interest-fees__item {
  display: grid;
  min-height: 114px;
  box-sizing: border-box;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 1.4vw, 21px);
  padding: 22px 26px 22px 20px;

  border-bottom: 1px solid #dedede;
  background: #ffffff;
}

/* ไอคอนประเภทเอกสาร
   ========================================================================== */

.page-interest-and-fees .interest-fees__file-icon {
  position: relative;

  width: 46px;
  height: 56px;

  color: #ee3934;
}

.page-interest-and-fees
.interest-fees__file-icon--jpeg {
  color: #9954e8;
}

.page-interest-and-fees .interest-fees__file-shape {
  display: block;
  width: 42px;
  height: 50px;

  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.page-interest-and-fees .interest-fees__file-type {
  position: absolute;
  bottom: 1px;
  left: 2px;

  display: block;
  min-width: 39px;
  box-sizing: border-box;
  padding: 1px 2px;

  background: #ffffff;
  color: currentColor;

  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

/* ชื่อเอกสารและวันที่เริ่มใช้
   ========================================================================== */

.page-interest-and-fees .interest-fees__content {
  min-width: 0;
}

.page-interest-and-fees .interest-fees__item-title {
  margin: 0;

  color: #4d4d4d;
  font-family: var(--font-brand);
  font-size: clamp(17.5px, calc(15px + 0.25vw), 20px);
  font-weight: 400;
  line-height: 1.3;
}

.page-interest-and-fees .interest-fees__effective-date {
  margin: 11px 0 0;

  color: #898989;
  font-family: var(--font-text);
  font-size: clamp(13px, calc(11.5px + 0.12vw), 14px);
  font-weight: 400;
  line-height: 1.35;
}

/* ปุ่มดูเอกสารและดาวน์โหลด
   ========================================================================== */

.page-interest-and-fees .interest-fees__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-interest-and-fees .interest-fees__button {
  display: inline-flex;
  min-height: 44px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 13px;

  border-radius: 5px;

  font-family: var(--font-brand-medium);
  font-size: clamp(12.5px, calc(11.5px + 0.1vw), 13.5px);
  font-weight: 400;
  line-height: 1;
  text-decoration: none;

  transition:
    border-color 200ms ease,
    background-color 200ms ease,
    color 200ms ease;
}

.page-interest-and-fees .interest-fees__button--view {
  min-width: 98px;

  border: 1px solid #c8c8c8;
  background: #ffffff;
  color: #c8c8c8;
}

.page-interest-and-fees .interest-fees__button--view:hover {
  border-color: #0098dc;
  color: #0098dc;
}

.page-interest-and-fees .interest-fees__button--download {
  min-width: 116px;

  border: 0;
  background: #0098dc;
  color: #ffffff;
}

.page-interest-and-fees .interest-fees__button--download:hover {
  background: #007fc0;
}

.page-interest-and-fees .interest-fees__button:focus-visible {
  outline: 3px solid #ffd900;
  outline-offset: 3px;
}

.page-interest-and-fees .interest-fees__button-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;

  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

/* Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .page-interest-and-fees .interest-fees__item {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 24px 18px;
  }

  .page-interest-and-fees .interest-fees__actions {
    grid-column: 2;
    margin-top: 4px;
  }
}

@media (max-width: 600px) {
  .page-interest-and-fees .interest-fees {
    padding: 48px 0 68px;
  }

  .page-interest-and-fees .interest-fees__title {
    font-size: clamp(32px, 8.5vw, 36px);
  }

  .page-interest-and-fees .interest-fees__list {
    margin-top: 46px;
  }

  .page-interest-and-fees .interest-fees__item {
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 12px;
    padding: 22px 4px;
  }

  .page-interest-and-fees .interest-fees__file-icon {
    width: 42px;
    transform: scale(0.92);
    transform-origin: left center;
  }

  .page-interest-and-fees .interest-fees__item-title {
    font-size: 17.5px;
  }

  .page-interest-and-fees .interest-fees__effective-date {
    font-size: 13px;
  }

  .page-interest-and-fees .interest-fees__actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
  }

  .page-interest-and-fees .interest-fees__button {
    width: 100%;
    min-width: 0;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-interest-and-fees .interest-fees__button {
    transition: none;
  }
}