.taxpayer-page {
  display    : block;
  padding-top: var(--gdt-panel-pad-y, 16px);
}

.taxpayer-header {
  margin    : 0 0 clamp(14px, 1.8vw, 22px);
  text-align: center;
  margin-top: 10px;
}

.taxpayer-heading {
  margin     : 0;
  font-size  : clamp(1.35rem, 3.2vw, 2.05rem);
  line-height: 1.2;
}

.taxpayer-grid {
  display              : block;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap                  : var(--tp-gap, clamp(14px, 1.4vw, 22px));
  width                : 100%;
  margin               : 0;
  padding              : 0;
  list-style           : none;
}

.taxpayer-card {
  --tp-bg          : var(--default-white);
  --tp-border      : #d9e2ec;
  --tp-border-hover: #c2d0dc;
  --tp-shadow      : 0 2px 4px rgba(0, 0, 0, 0.05),
    0 8px 18px -10px rgba(0, 0, 0, 0.18);
  --tp-shadow-hover: 0 4px 10px -4px rgba(0, 0, 0, 0.12),
    0 18px 34px -14px rgba(0, 0, 0, 0.25);
  display        : flex;
  align-items    : stretch;
  gap            : 14px;
  text-decoration: none;
  background     : var(--tp-bg);
  border         : 1px solid #d9d9d9;
  border-radius  : var(--gdt-card-radius, 14px);
  padding        : 14px 16px 16px;
  padding-right  : 44px;
  position       : relative;
  box-shadow     : var(--tp-shadow);
  min-height     : 130px;
  overflow       : hidden;
  margin-bottom  : 20px;
}

.taxpayer-card:hover::after {
  opacity     : 1;
  border-color: var(--default-blue);
}

.tp-badge {
  flex           : 0 0 66px;
  width          : 66px;
  min-width      : 66px;
  height         : auto;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 30px;
  font-weight    : 700;
  color          : var(--default-white);
  border-radius  : 12px;
  background     : linear-gradient(135deg, #4e61eb, var(--default-blue));
  box-shadow     : 0 3px 8px -3px rgba(0, 0, 0, 0.35);
  letter-spacing : 1px;
  line-height    : 1;
  position       : relative;
}

.taxpayer-card .tp-body {
  flex          : 1 1 auto;
  display       : flex;
  flex-direction: column;
  gap           : 6px;
  min-width     : 0;
}

.tp-title {
  margin        : 0;
  font-size     : clamp(0.95rem, 1.05rem, 1.05rem);
  line-height   : 1.8;
  color         : #12213a;
  letter-spacing: 0.4px;
}

.tp-desc {
  font-size         : 0.77rem;
  line-height       : 1.45;
  margin            : 0;
  color             : #5b6b7c;
  display           : -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp        : 3;
  overflow          : hidden;
}

.type-general .tp-badge {
  background: linear-gradient(140deg, #d79d14, #f6c74b);
}

.type-small .tp-badge {
  background: linear-gradient(140deg, #2c7a3f, #32b273);
}

.type-medium .tp-badge {
  background: linear-gradient(140deg, #2463d9, #4e7ff6);
}

.type-large .tp-badge {
  background: linear-gradient(140deg, #7129a6, #b455e3);
}

.taxpayer-card:before {
  content   : "";
  position  : absolute;
  top       : 0;
  left      : 0;
  right     : 0;
  height    : 4px;
  background: currentColor;
  opacity   : 0;
}

.taxpayer-card:hover:before {
  opacity: 1;
}

.type-general:before {
  background: linear-gradient(90deg, #d79d14, #f6c74b);
  opacity   : 0.6;
}

.type-small:before {
  background: linear-gradient(90deg, #2c7a3f, #32b273);
  opacity   : 0.6;
}

.type-medium:before {
  background: linear-gradient(90deg, #2463d9, #4e7ff6);
  opacity   : 0.6;
}

.type-large:before {
  background: linear-gradient(90deg, #7129a6, #b455e3);
  opacity   : 0.6;
}

@media (max-width: 520px) {
  .taxpayer-card {
    padding   : 12px 14px 14px;
    gap       : 12px;
    min-height: 118px;
  }
}

@media (max-width: 520px) {
  .tp-badge {
    flex     : 0 0 58px;
    width    : 58px;
    min-width: 58px;
    font-size: 26px;
  }
}

@media (max-width: 520px) {
  .tp-desc {
    -line-clamp: 4;
  }
}

@media (max-width: 380px) {
  .taxpayer-card {
    flex-direction: column;
    align-items   : flex-start;
    padding       : 14px 15px 16px;
  }
}

@media (max-width: 380px) {
  .tp-badge {
    width        : 52px;
    min-width    : 52px;
    flex         : 0 0 auto;
    font-size    : 24px;
    margin-bottom: 4px;
  }
}

@media (max-width: 380px) {
  .taxpayer-card:before {
    border-top-left-radius : 14px;
    border-top-right-radius: 14px;
  }
}

.taxpayer-page .taxpayer-card {
  align-items : flex-start;
  background  : var(--tp-bg);
  border-color: var(--tp-border);
  box-shadow  : var(--tp-shadow);
}

.taxpayer-page .tp-badge {
  width          : 54px;
  min-width      : 54px;
  height         : 54px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 26px;
  font-weight    : 700;
  line-height    : 1;
  border-radius  : 12px;
  margin-top     : 2px;
  box-shadow     : 0 2px 6px -3px rgba(0, 0, 0, 0.28);
  position       : relative;
  isolation      : isolate;
}

.taxpayer-page .tp-badge:after {
  content      : "";
  position     : absolute;
  inset        : 0;
  border-radius: inherit;
  background   : linear-gradient(180deg,
      rgba(255, 255, 255, 0.25),
      rgba(255, 255, 255, 0));
  mix-blend-mode: overlay;
  pointer-events: none;
}

@media (max-width: 520px) {
  .taxpayer-page .tp-badge {
    width     : 48px;
    min-width : 48px;
    height    : 48px;
    font-size : 22px;
    margin-top: 0;
  }
}

.taxpayer-page .taxpayer-card.badge-compact .tp-badge {
  width        : 46px;
  min-width    : 46px;
  height       : 46px;
  font-size    : 21px;
  border-radius: 11px;
  box-shadow   : 0 2px 5px -2px rgba(0, 0, 0, 0.25);
}

.taxpayer-page .taxpayer-card:hover {
  background  : #f6f9fc;
  border-color: var(--tp-border-hover);
  box-shadow  : var(--tp-shadow-hover);
}

@media (max-width: 767.98px) {
  .taxpayer-grid {
    grid-template-columns: 1fr;
  }
}

.content-payer {
  --tpd-left   : #3f51b5;
  --tpd-right  : #f4fafb;
  --tpd-divider: #fff;
  --tpd-gap    : 8px;
}

.content-payer .c-content {
  display        : flex;
  align-items    : stretch;
  width          : 100%;
  border-radius  : 22px;
  text-decoration: none;
  color          : #fff !important;
  position       : relative;
  padding        : 0;
  border         : 0 !important;
  background     : linear-gradient(to right,
      var(--tpd-left) 0 calc(40% - var(--tpd-gap) / 2),
      var(--tpd-divider) calc(40% - var(--tpd-gap) / 2) calc(40% + var(--tpd-gap) / 2),
      var(--tpd-right) calc(40% + var(--tpd-gap) / 2) 100%);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06),
    inset 0 0 0 1px rgba(56, 68, 202, 0.18);
  background-clip: padding-box;
}

.content-payer .c-content:focus-visible {
  outline   : none;
  box-shadow: 0 0 0 3px rgba(56, 68, 202, 0.3), 0 2px 6px rgba(16, 24, 40, 0.06);
}

.content-payer .tax-tab-1,
.content-payer .tax-tab-2 {
  flex           : 0 0 auto;
  display        : flex;
  align-items    : center;
  justify-content: center;
  min-height     : 64px;
  padding        : 14px 20px;
  background     : transparent !important;
  border         : 0 !important;
  border-radius  : 0 !important;
}

.content-payer .tax-tab-1 {
  flex-basis: 40% !important;
}

.content-payer .tax-tab-2 {
  flex-basis: 60% !important;
}

.content-payer .tax-tab-1>div,
.content-payer .tax-tab-2>div {
  font-size  : 14px;
  line-height: 1.7;
  text-align : center;
  color      : var(--default-white);
  white-space: nowrap;
}

.content-payer .c-content:hover {
  filter: none !important;
  box-shadow: 0 6px 18px -10px rgba(16, 24, 40, 0.25),
    inset 0 0 0 1px rgba(56, 68, 202, 0.22);
}

@media (max-width: 575.98px) {
  .content-payer .c-content {
    flex-direction: column;
    border-radius : 8px;
    background    : linear-gradient(to bottom, #0f4e87 0 calc(50% - var(--tpd-gap) / 2), var(--tpd-divider) calc(50% - var(--tpd-gap) / 2) calc(50% + var(--tpd-gap) / 2), var(--tpd-right) calc(50% + var(--tpd-gap) / 2) 100%);
  }
}

@media (max-width: 575.98px) {

  .content-payer .tax-tab-1,
  .content-payer .tax-tab-2 {
    flex-basis: auto !important;
    min-height: 45px;
    padding   : 12px 16px;
    color     : var(--default-blue);
    width     : 100%;
  }
}

@media (max-width: 575.98px) {
  .content-payer .c-content::after {
    right: 12px;
  }
}

.tax-payer-detail-parent {
  position     : relative;
  display      : flex;
  margin-bottom: 20px !important;
}

.tax-tab-1 {
  flex: 0 0 40%;
}

.tax-tab-2 {
  flex: 0 0 60%;
}

.tax-payer-detail-parent .c-content {
  width  : 100%;
  display: flex;
}