/* =========================================================
   CODESPHERE AFFILIATES
   Bright fintech / financial-network design
========================================================= */

.affiliates-main {
  padding: 22px 16px 110px;
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(47, 116, 230, 0.08),
      transparent 300px
    );
}


.affiliates-page {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.affiliates-header {
  margin-bottom: 22px;
}


.affiliates-heading {
  display: flex;
  align-items: center;
  gap: 13px;
}


.affiliates-heading-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      #1478f2 0%,
      #0864df 100%
    );

  color: #fff;

  box-shadow:
    0 10px 24px rgba(22, 87, 196, 0.22);
}


.affiliates-heading-icon .icon svg {
  width: 21px;
  height: 21px;
}


.affiliates-heading-copy {
  min-width: 0;
}


.affiliates-eyebrow {
  margin-bottom: 2px;

  font-size: 9.5px;
  font-weight: 800;

  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: #2676e8;
}


.affiliates-title {
  margin: 0;

  font-family: var(--cs-font-display, "Sora", sans-serif);

  font-size: 21px;
  line-height: 1.2;
  font-weight: 800;

  letter-spacing: -0.025em;

  color: #071d49;
}


.affiliates-subtitle {
  max-width: 600px;

  margin: 5px 0 0;

  font-size: 12.5px;
  line-height: 1.5;

  color: #7183a3;
}


/* =========================================================
   TABS
========================================================= */

.affiliates-tabs-wrap {
  margin-bottom: 20px;
}


.affiliates-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  padding: 4px;

  border: 1px solid #dce8fb;
  border-radius: 14px;

  background: #f4f8ff;

  box-shadow:
    0 4px 16px rgba(22, 87, 196, 0.06);
}


.affiliates-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  min-height: 38px;
  padding: 0 15px;

  border: none;
  border-radius: 10px;

  background: transparent;

  color: #7284a4;

  font-family: var(--cs-font-body, "Inter", sans-serif);

  font-size: 12.5px;
  font-weight: 700;

  cursor: pointer;

  transition:
    color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}


.affiliates-tab:hover {
  color: #1769dc;
  background: #eaf2ff;
}


.affiliates-tab.is-active {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      #1978ef 0%,
      #075dd7 100%
    );

  box-shadow:
    0 6px 14px rgba(16, 91, 207, 0.24);
}


.affiliates-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.affiliates-tab-icon svg {
  width: 15px;
  height: 15px;
}


/* =========================================================
   LIST
========================================================= */

.affiliates-list-area {
  min-height: 100px;
}


.affiliates-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* =========================================================
   AFFILIATE CARD
========================================================= */

.affiliate-card {
  position: relative;

  overflow: hidden;

  padding: 17px;

  border: 1px solid #dce7f8;
  border-radius: 18px;

  background: #fff;

  box-shadow:
    0 3px 8px rgba(20, 64, 130, 0.035),
    0 12px 30px rgba(20, 64, 130, 0.055);

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}


.affiliate-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 3px;

  background:
    linear-gradient(
      180deg,
      #1682f7,
      #075ed8
    );

  opacity: 0;

  transition: opacity 0.18s ease;
}


.affiliate-card:hover {
  transform: translateY(-2px);

  border-color: #c8dcf8;

  box-shadow:
    0 5px 12px rgba(20, 64, 130, 0.05),
    0 18px 36px rgba(20, 64, 130, 0.09);
}


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


/* =========================================================
   CARD TOP
========================================================= */

.affiliate-card-top {
  display: flex;
  align-items: flex-start;

  gap: 12px;

  padding-bottom: 14px;

  border-bottom: 1px solid #edf2f9;
}


.affiliate-card-avatar {
  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;

  color: #126be2;

  background:
    linear-gradient(
      145deg,
      #eaf4ff,
      #dbeaff
    );

  border: 1px solid #d5e6fc;
}


.affiliate-card-avatar svg {
  width: 19px;
  height: 19px;
}


.affiliate-card-main {
  flex: 1;
  min-width: 0;
}


.affiliate-card-name-row {
  display: flex;
  align-items: center;

  gap: 8px;

  flex-wrap: wrap;
}


.affiliate-card-name {
  margin: 0;

  font-family:
    var(--cs-font-display, "Sora", sans-serif);

  font-size: 15px;
  line-height: 1.25;

  font-weight: 750;

  letter-spacing: -0.015em;

  color: #0a214f;
}


.affiliate-card-meta {
  display: flex;
  align-items: center;

  gap: 7px;

  margin: 5px 0 0;

  font-size: 11.5px;

  color: #8a9ab5;
}


.affiliate-meta-country {
  font-weight: 600;
  color: #617492;
}


.affiliate-meta-separator {
  color: #b9c5d7;
}


/* =========================================================
   STATUS
========================================================= */

.affiliate-status-badge {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  padding: 4px 8px;

  border-radius: 999px;

  font-size: 9.5px;
  line-height: 1;

  font-weight: 800;

  white-space: nowrap;
}


.affiliate-status-dot {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: currentColor;
}


.affiliate-status-badge.is-active {
  color: #078653;
  background: #e8f9f1;
}


.affiliate-status-badge.is-inactive {
  color: #73839d;
  background: #f0f4f9;
}


.affiliate-status-badge.is-suspended {
  color: #d43d45;
  background: #fff0f1;
}


/* =========================================================
   REFERRER
========================================================= */

.affiliate-card-referrer {
  display: flex;
  align-items: center;

  gap: 5px;

  margin: 7px 0 0;

  font-size: 10.5px;
  font-weight: 650;

  color: #2373df;
}


.affiliate-referrer-icon {
  display: inline-flex;
}


.affiliate-referrer-icon svg {
  width: 12px;
  height: 12px;
}


/* =========================================================
   CONTACT
========================================================= */

.affiliate-card-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 13px 0 10px;
}


.affiliate-contact-info {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 9px;
}


.affiliate-contact-icon {
  width: 32px;
  height: 32px;

  flex: 0 0 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: #f0f6ff;

  color: #1973e8;
}


.affiliate-contact-icon svg {
  width: 15px;
  height: 15px;
}


.affiliate-contact-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.affiliate-contact-label {
  font-size: 9.5px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.06em;

  color: #9aa9be;
}


.affiliate-contact-value {
  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 12.5px;
  font-weight: 650;

  color: #263b60;
}


/* =========================================================
   WHATSAPP BUTTON
========================================================= */

.affiliate-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  min-height: 34px;

  padding: 0 12px;

  flex: 0 0 auto;

  border-radius: 10px;

  border: 1px solid #c8efdf;

  background: #edfbf5;

  color: #098657;

  text-decoration: none;

  font-size: 11.5px;
  font-weight: 750;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}


.affiliate-whatsapp-btn:hover {
  background: #dff8ed;

  border-color: #aee5ce;

  color: #06764b;

  transform: translateY(-1px);

  box-shadow:
    0 5px 12px rgba(9, 134, 87, 0.12);
}


.affiliate-whatsapp-btn:active {
  transform: translateY(0);
}


.affiliate-whatsapp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.affiliate-whatsapp-disabled {
  display: inline-flex;
  align-items: center;

  min-height: 34px;

  padding: 0 11px;

  border-radius: 10px;

  background: #f4f6f9;

  color: #a0acbd;

  font-size: 10.5px;
  font-weight: 700;
}


/* =========================================================
   EMAIL
========================================================= */

.affiliate-email-row {
  display: flex;
  align-items: center;

  gap: 7px;

  margin-bottom: 13px;

  padding-top: 1px;

  font-size: 11.5px;

  color: #71839f;
}


.affiliate-email-icon {
  display: inline-flex;

  color: #8ba0bd;
}


.affiliate-email-icon svg {
  width: 13px;
  height: 13px;
}


/* =========================================================
   SERVICES
========================================================= */

.affiliate-products {
  padding-top: 12px;

  border-top: 1px solid #edf2f9;
}


.affiliate-products-heading {
  margin-bottom: 8px;

  font-size: 9px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.1em;

  color: #a0aec1;
}


.affiliate-premium-row {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;
}


.affiliate-premium-pill {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  min-height: 27px;

  padding: 0 8px;

  border-radius: 8px;

  border: 1px solid #e3eaf4;

  background: #f7f9fc;

  color: #9aa8ba;

  font-size: 9.5px;
  font-weight: 700;

  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}


.affiliate-premium-pill-icon {
  display: inline-flex;
  align-items: center;
}


.affiliate-premium-pill-icon svg {
  width: 11px;
  height: 11px;
}


.affiliate-premium-pill.is-upgraded {
  color: #1269dc;

  background:
    linear-gradient(
      135deg,
      #edf5ff,
      #e5f0ff
    );

  border-color: #cfe1fb;
}


.affiliate-premium-pill.is-upgraded
.affiliate-premium-pill-icon {
  color: #1475e8;
}


/* =========================================================
   PAGINATION
========================================================= */

.affiliates-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  margin-top: 18px;
  padding-top: 16px;

  border-top: 1px solid #e1e9f5;
}


.affiliates-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  min-width: 78px;
  min-height: 36px;

  padding: 0 13px;

  border: 1px solid #d7e3f4;
  border-radius: 10px;

  background: #fff;

  color: #375173;

  font-size: 11.5px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}


.affiliates-page-btn:hover:not(:disabled) {
  background: #edf5ff;

  border-color: #bcd5f7;

  color: #1269dc;
}


.affiliates-page-btn:disabled {
  opacity: 0.42;

  cursor: not-allowed;
}


.affiliates-page-btn svg {
  width: 13px;
  height: 13px;
}


.affiliates-page-indicator {
  display: flex;
  align-items: baseline;

  gap: 3px;

  color: #8191a9;

  font-size: 11.5px;
}


.affiliates-page-indicator strong {
  color: #1269dc;

  font-size: 12px;
}


.affiliates-page-total {
  margin-left: 5px;

  color: #a0adbf;
}


.affiliates-pagination-total {
  margin: 18px 0 0;

  padding-top: 15px;

  border-top: 1px solid #e5ebf4;

  text-align: center;

  font-size: 11.5px;

  color: #8d9bb0;
}


.pagination-total-number {
  font-weight: 800;
  color: #146dde;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.affiliates-empty {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  min-height: 300px;

  padding: 45px 20px;

  text-align: center;
}


.affiliates-empty-icon {
  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 15px;

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      #eaf4ff,
      #dceaff
    );

  color: #176fe4;
}


.affiliates-empty-icon svg {
  width: 23px;
  height: 23px;
}


.affiliates-empty-title {
  margin: 0;

  font-family:
    var(--cs-font-display, "Sora", sans-serif);

  font-size: 15px;
  font-weight: 750;

  color: #122a55;
}


.affiliates-empty-text {
  max-width: 370px;

  margin: 7px 0 0;

  font-size: 12px;
  line-height: 1.6;

  color: #7e8fa9;
}


/* =========================================================
   LOADING SKELETON
========================================================= */

.affiliate-card-skeleton {
  height: 190px;

  border: none;

  background:
    linear-gradient(
      90deg,
      #f1f5fa 25%,
      #e5edf7 37%,
      #f1f5fa 63%
    );

  background-size: 400% 100%;

  animation:
    affiliate-shimmer 1.4s ease infinite;
}


@keyframes affiliate-shimmer {

  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }

}


/* =========================================================
   FOCUS
========================================================= */

.affiliates-tab:focus-visible,
.affiliates-page-btn:focus-visible,
.affiliate-whatsapp-btn:focus-visible {
  outline: 3px solid rgba(25, 120, 239, 0.22);
  outline-offset: 2px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .affiliates-main {
    padding: 17px 13px 105px;
  }


  .affiliates-heading-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }


  .affiliates-title {
    font-size: 19px;
  }


  .affiliates-subtitle {
    font-size: 11.5px;
  }


  .affiliates-tabs {
    width: 100%;
  }


  .affiliates-tab {
    flex: 1;

    padding-left: 10px;
    padding-right: 10px;

    font-size: 11.5px;
  }


  .affiliate-card {
    padding: 15px;
    border-radius: 16px;
  }


  .affiliate-card-contact {
    align-items: flex-start;
  }


  .affiliate-whatsapp-btn {
    padding-left: 10px;
    padding-right: 10px;
  }


  .affiliate-premium-row {
    gap: 5px;
  }


  .affiliate-premium-pill {
    font-size: 9px;
    padding-left: 7px;
    padding-right: 7px;
  }

}


@media (max-width: 420px) {

  .affiliate-card-top {
    gap: 10px;
  }


  .affiliate-card-avatar {
    width: 40px;
    height: 40px;

    flex-basis: 40px;
  }


  .affiliate-card-name {
    font-size: 14px;
  }


  .affiliate-card-contact {
    flex-direction: column;
    gap: 10px;
  }


  .affiliate-whatsapp-btn {
    width: 100%;
  }


  .affiliate-email-row {
    overflow: hidden;
  }


  .affiliate-email-row > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  .affiliates-pagination {
    gap: 8px;
  }


  .affiliates-page-btn {
    min-width: 70px;
  }


  .affiliates-page-total {
    display: none;
  }

}