@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
  /* Cores primárias (azul) */
  --primary-soft: #EAF1FB;
  --primary-lightest: #D4E3F7;
  --primary-light: #548EE0;
  --primary-pure: #2972D8;
  --primary-medium: #1059BE;
  --primary-dark: #003FA5;

  /* Cores secundárias (amarelo/laranja) */
  --secondary-soft: #FFF5E6;
  --secondary-lightest: #FCDD9A;
  --secondary-light: #FABE33;
  --secondary-pure: #F9AE00;
  --secondary-medium: #F6A400;
  --secondary-dark: #B87C00;

  /* Cores verdes (accent) */
  --green-soft: #E6F7EF;
  --green-lightest: #D2F3E4;
  --green-pure: #15B43F;
  --green-dark: #0D892E;

  /* Cores vermelhas (danger) */
  --red-soft: #FFEDEC;
  --red-lightest: #FFBCB7;
  --red-pure: #FF4D5B;
  --red-dark: #B82A1D;

  /* Cores cinza */
  --gray-950: #0C1110;
  --gray-900: #192028;
  --gray-800: #182230;
  --gray-700: #3B4454;
  --gray-600: #4F5967;
  --gray-500: #7D828C;
  --gray-400: #A5AAB3;
  --gray-300: #D0D5DD;
  --gray-200: #EAECF0;
  --gray-100: #F7F7F9;

  /* Variáveis antigas (mantidas por compatibilidade) */
  --cor-1: var(--primary-pure);
  --cor-2: var(--primary-medium);
  --cinza-700: var(--gray-700);
  --cor-destaque: var(--secondary-pure);

  --bg-site: #fff;
  --valid-1: var(--green-pure);
  --invalid-1: var(--red-pure);
  --font-1: "Plus Jakarta Sans", sans-serif;
  --font-2: "Inter", sans-serif;


  /* Outros tons de cores */
  --red-50: #fff2f2;
  --red-100: #fccfcf;
  --red-200: #faa9a7;
  --red-300: #fa8682;
  --red-400: #f7635c;
  --red-500: #f44336;
  --red-600: #eb3626;
  --red-700: #d62915;
  --red-800: #b81c07;
  --red-900: #8f1300;
  --orange-50: #fff8f2;
  --orange-100: #ffdfc2;
  --orange-200: #fcc690;
  --orange-300: #fcb160;
  --orange-400: #fa9b2f;
  --orange-500: #fa8900;
  --orange-600: #f08800;
  --orange-700: #db8000;
  --orange-800: #bd7100;
  --orange-900: #945b00;
  --yellow-50: #fffaf2;
  --yellow-100: #ffe9c2;
  --yellow-200: #ffd991;
  --yellow-300: #ffca61;
  --yellow-400: #ffbe30;
  --yellow-500: #ffb300;
  --yellow-600: #f5af00;
  --yellow-700: #e0a500;
  --yellow-800: #c29100;
  --yellow-900: #997500;
  --green-50: #eeffed;
  --green-100: #c8f0c7;
  --green-200: #a5e0a4;
  --green-300: #82cf82;
  --green-400: #65bf67;
  --green-500: #4caf50;
  --green-600: #37ab3c;
  --green-700: #22a12a;
  --green-800: #0f9119;
  --green-900: #007d0c;
  --cyan-50: #f2ffff;
  --cyan-100: #bcf4f7;
  --cyan-200: #87e6ed;
  --cyan-300: #57dae6;
  --cyan-400: #2acadb;
  --cyan-500: #00bcd4;
  --cyan-600: #00b1cc;
  --cyan-700: #00a0bd;
  --cyan-800: #008aa6;
  --cyan-900: #006e87;
  --blue-50: #f0f9ff;
  --blue-100: #c5e7fc;
  --blue-200: #9bd4fa;
  --blue-300: #72c0f7;
  --blue-400: #49abf5;
  --blue-500: #2196f3;
  --blue-600: #1787e8;
  --blue-700: #0d73d4;
  --blue-800: #045cb5;
  --blue-900: #00448c;
  --violet-50: #f6f2ff;
  --violet-100: #d5c9f0;
  --violet-200: #b6a1e3;
  --violet-300: #987bd4;
  --violet-400: #805ac7;
  --violet-500: #673ab7;
  --violet-600: #5f2bb3;
  --violet-700: #531ba8;
  --violet-800: #470c99;
  --violet-900: #390085;

  /* AFILIADOS */

  /* Cores principais e de destaque */
  --yith-wcaf-dashboard--accent-color: var(--primary-pure);
  --proteo-main_color_shade: var(--primary-dark);
  --yith-wcaf-dashboard--color: var(--gray-700);
  --proteo-base_font_color: var(--gray-700);

  /* Bordas e arredondamentos */
  --yith-wcaf-dashboard--border-radius: 10px;
  --yith-wcaf-border--radius: 4px;
  --yith-wcaf-border--color: var(--gray-100);
  --yith-wcaf-dashboard--border-color: var(--gray-100);

  /* Fontes e pesos */
  --yith-wcaf-dashboard-font-weight--bold: 700;
  --yith-wcaf-dashboard-font-weight--semi-bold: 500;

  /* Cores de status */
  --yith-wcaf-status--pending--background-color: #cf8300;
  --yith-wcaf-status--pending--color: #ffffff;

  --yith-wcaf-status--completed--background-color: #afb000;
  --yith-wcaf-status--completed--color: #ffffff;

  --yith-wcaf-status--cancelled--background-color: #cd1927;
  --yith-wcaf-status--cancelled--color: #ffffff;

  --yith-wcaf-status--rejected--background-color: #748c9c;
  --yith-wcaf-status--rejected--color: #ffffff;

  --yith-wcaf-status--pending--background-color-payment: #999d84;
  --yith-wcaf-status--pending--color-payment: #ffffff;

  --yith-wcaf-status--refunded--background-color: #730000;
  --yith-wcaf-status--refunded--color: #ffffff;

  --yith-wcaf-status--trash--background-color: #c73878;
  --yith-wcaf-status--trash--color: #ffffff;

  /* Cores de fundo e auxiliares */
  --yith-wcaf-background-color: var(--bg-site);
  --yith-wcaf-text-color--light: var(--gray-400);
  --yith-wcaf-dashboard--error: var(--red-500);


}

html {
  font-family: var(--font-2);
  font-weight: 400;
  margin-top: 0;
  font-size: 100%;
  line-height: 1.5;
  color: var(--gray-600);
  background-color: var(--bg-site);
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background-color: var(--bg-site) !important;
  max-width: 100%;
  /* overflow-x: hidden; */
}

@media (max-width: 1080px) {
  html {
    font-size: 93.75%;
    /* 15px */
  }
}

@media (max-width: 720px) {
  html {
    font-size: 87.5%;
    /* 14px */
  }
}

* {
  accent-color: var(--primary-pure);
}

/* Container */
.container {
  width: 100%;
  max-width: 1216px;
  margin: 0 auto;

  @media (min-width: 1024px) and (max-width: 1250px) {
    max-width: 1024px;
  }
}

/* Row */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

/* Tipografia */
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-1);
  color: var(--gray-900);
  font-weight: bold;
  line-height: 1.2;
}

h1 {
  font-size: 4rem;
  /* 64px - heading-64 */
}

h2 {
  font-size: 3.5rem;
  /* 56px - heading-56 */
}

h3 {
  font-size: 3rem;
  /* 48px - heading-48 */
}

h4 {
  font-size: 2.5rem;
  /* 40px - heading-40 */
}

h5 {
  font-size: 2rem;
  /* 32px - heading-32 */
}

h6 {
  font-size: 1.5rem;
  /* 24px - heading-24 */
}

/* Classes auxiliares para headings */
.heading-64 {
  font-size: 4rem;
  /* 64px */
}

.heading-56 {
  font-size: 3.5rem;
  /* 56px */
}

.heading-48 {
  font-size: 3rem;
  /* 48px */
}

.heading-40 {
  font-size: 2.5rem;
  /* 40px */
}

.heading-32 {
  font-size: 2rem;
  /* 32px */
}

.heading-24 {
  font-size: 1.5rem;
  /* 24px */
}

.heading-18 {
  font-size: 1.125rem;
  /* 18px */
}

/* Body Text - Base */
.body-text {
  font-family: var(--font-2);
  line-height: 1.5;
}

/* Body Text - Tamanhos */
.body-16 {
  font-size: 1rem;
  /* 16px */
}

.body-14 {
  font-size: 0.875rem;
  /* 14px */
}

.body-12 {
  font-size: 0.75rem;
  /* 12px */
}

.body-11 {
  font-size: 0.6875rem;
  /* 11px */
}

.body-10 {
  font-size: 0.625rem;
  /* 10px */
}

/* Body Text - Pesos */
.bold {
  font-weight: bold;
  /* 700 */
}

.semibold {
  font-weight: 600;
}

.medium {
  font-weight: 500;
}

.regular {
  font-weight: 400;
}

/* Classes completas para body */
/* Body 16 */
.body-16-bold {
  font-family: var(--font-2);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: bold;
}

.body-16-semibold {
  font-family: var(--font-2);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
}

.body-16-medium {
  font-family: var(--font-2);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
}

.body-16-regular {
  font-family: var(--font-2);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
}

/* Body 14 */
.body-14-bold {
  font-family: var(--font-2);
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: bold;
}

.body-14-semibold {
  font-family: var(--font-2);
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 600;
}

.body-14-medium {
  font-family: var(--font-2);
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 500;
}

.body-14-regular {
  font-family: var(--font-2);
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 400;
}

/* Body 12 */
.body-12-bold {
  font-family: var(--font-2);
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: bold;
}

.body-12-semibold {
  font-family: var(--font-2);
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 600;
}

.body-12-medium {
  font-family: var(--font-2);
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 500;
}

.body-12-regular {
  font-family: var(--font-2);
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 400;
}

/* Body 11 */
.body-11-bold {
  font-family: var(--font-2);
  font-size: 0.6875rem;
  line-height: 1.5;
  font-weight: bold;
}

.body-11-semibold {
  font-family: var(--font-2);
  font-size: 0.6875rem;
  line-height: 1.5;
  font-weight: 600;
}

.body-11-medium {
  font-family: var(--font-2);
  font-size: 0.6875rem;
  line-height: 1.5;
  font-weight: 500;
}

.body-11-regular {
  font-family: var(--font-2);
  font-size: 0.6875rem;
  line-height: 1.5;
  font-weight: 400;
}

/* Body 10 */
.body-10-bold {
  font-family: var(--font-2);
  font-size: 0.625rem;
  line-height: 1.5;
  font-weight: bold;
}

.body-10-semibold {
  font-family: var(--font-2);
  font-size: 0.625rem;
  line-height: 1.5;
  font-weight: 600;
}

.body-10-medium {
  font-family: var(--font-2);
  font-size: 0.625rem;
  line-height: 1.5;
  font-weight: 500;
}

.body-10-regular {
  font-family: var(--font-2);
  font-size: 0.625rem;
  line-height: 1.5;
  font-weight: 400;
}

/* Cols */
.col-6 {
  width: 50%;
}

.col-4 {
  width: 33.33333333333333%;
}

.col-3 {
  width: 25%;
}

.col-2 {
  width: 16.666666666666664%;
}

.col-1 {
  width: 8.333333333333334%;
}

.col-12 {
  width: 100%;
}

@media (max-width: 768px) {

  .col-6,
  .col-4,
  .col-3,
  .col-2,
  .col-1 {
    width: 100%;
  }
}

/* Animate */
.animate {
  opacity: 1;

  &[class*="fade"] {
    opacity: 0;

    &.animated {
      opacity: 1;
    }
  }

  @media (max-width: 768px) {
    opacity: 1 !important;
  }
}

[x-cloak] {
  opacity: 0 !important;
}

/* Dialog Tema */
body dialog {
  background: #000000ba;
}

body dialog .alert {
  background: #fff;
  border-radius: 0;
  padding: 0;
}

body dialog .alert .close-x {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 10px;
  width: 25px;
  height: 25px;
  top: 10px;
  cursor: pointer;
  z-index: 999;
  border: 1px solid #fff;
  background: #fff;
  border-radius: 100%;
  margin: 0;
  transition: all .3s ease-in-out;
}

body dialog .alert .close-x:hover {
  background: var(--cor-1);
  border-color: var(--cor-1);
}

body dialog .alert .close-x svg path {
  fill: var(--cor-destaque);
  stroke: none;
  transition: all .3s ease-in-out;
}

body dialog .alert .close-x:hover svg path {
  fill: var(--cor-destaque) !important;
}

body dialog .alert .dialog_header {
  color: #fff;
  font-size: 20px;
  line-height: 25px;
  padding: 10px 15px;
  background: var(--cor-destaque);
}

body dialog .alert .dialog_body {
  color: var(--cor-destaque);
  padding: 15px 15px 20px;
}

body dialog .alert .dialog_body a {
  color: var(--cor-destaque);
  text-decoration: underline;
  transition: all .2s ease-in-out;
}

body dialog .alert .dialog_body a:hover {
  opacity: 0.7;
}

body dialog .alert .dialog_footer .form_btn,
body dialog .alert .dialog_footer .close {
  display: block;
  text-align: center;
  padding: 10px;
  background: var(--cor-destaque);
  color: #fff;
  transition: all .2s ease-in-out;
}

body dialog .alert .dialog_footer .form_btn:hover,
body dialog .alert .dialog_footer .close:hover {
  background-color: var(--cor-1);
  color: var(--cor-destaque);
  ;
}

main.page.afiliados .content {
    padding: 40px 20px;
}