/*
* Nova página Contemplados 
*/
:root {
  --npc-primary: #005a3d;
  --npc-secondary: #f8ffdc;
  --npc-tertiary: #11d25f;
}

.npc-cards-wrapper {
  padding-top: 32px;
}

.npc-cards-wrapper input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--npc-tertiary);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

.npc-cards-wrapper input[type="checkbox"]:checked {
  border: 1px solid var(--npc-tertiary);
}

.npc-cards-wrapper input[type="checkbox"]:checked::after {
  content: "✔";
  position: absolute;
  left: 2px;
  top: -2px;
  font-size: 14px;
  color: var(--npc-primary);
}

.npc-container {
  width: 100%;
  max-width: 1200px;
  padding: 0 30px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.npc-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 80px 0 10px 0;
  gap: 40px;
}

.npc-content h1 {
  color: var(--npc-primary);
  font-size: 42px;
  font-weight: 400;
  line-height: 42px;
}

.npc-content__tag {
  background-color: #e2fbcf;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--npc-primary);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
  display: inline-block;
}

.npc-content p {
  font-size: 12px;
  font-weight: 600;
  -webkit-text-stroke-color: #000;
  stroke: #000;
  color: var(--npc-primary);
  text-align: left;
}

.npc-cards-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  overflow-y: auto;
  position: relative;
  height: 100%;
}

.npc-aside {
  flex: 24% 0 0;
  min-width: 270px;
  border-radius: 24px;
  height: max-content;
  position: sticky;
  top: 0px;
}

.npc-filter,
.npc-signin {
  background-color: white;
  border-radius: 24px;
  padding: 24px;
}

.npc-cards {
  flex: 1;
}

.npc-filter-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--npc-primary);
  margin: 0px 0px 10px 0px;
  display: block;
}

.npc-filter-type {
  padding-bottom: 24px;
  border-bottom: 1px solid #005a3d3d;
}

.npc-range-wrapper,
.npc-total-installments,
.npc-filter-companies,
.npc-filter-order,
.npc-total-percent {
  padding: 24px 0;
  border-bottom: 1px solid #005a3d3d;
}

.npc-filter-button {
  margin-top: 24px;
}

.npc-signin {
  margin-top: 24px;
  padding-top: 24px;
  display: block;
}

.npc-signin-mobile {
  display: none;
}

.npc-signin h3 {
  color: var(--npc-primary);
  font-size: 20px;
  font-weight: 500;
  margin-block-end: 0px;
}

.npc-filter-type label {
  color: var(--npc-secondary);
  background-color: var(--npc-primary);
  padding: 10px 12px;
  border-radius: 16px;
  cursor: pointer;
}

.npc-filter-type input[type="radio"] {
  display: none;
}

.npc-filter-type label span {
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.npc-filter-type input:checked + label {
  opacity: 0.8;
}

.npc-range-wrapper fieldset,
.npc-total-installments fieldset {
  position: relative;
  margin-top: 8px;
  margin-bottom: 16px;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.npc-range {
  position: relative;
  height: 2px;
  background-color: #ddd;
}

.npc-range__track {
  position: absolute;
  height: 2px;
  background-color: var(--npc-tertiary);
  border-radius: 3px;
  left: var(--low);
  right: calc(100% - var(--high));
}

.npc-range-min,
.npc-range-max,
.npc-range__slider__input {
  position: absolute;
  width: 100%;
  top: -5px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.npc-range-min::-webkit-slider-thumb,
.npc-range-max::-webkit-slider-thumb,
.npc-range__slider__input::-webkit-slider-thumb {
  pointer-events: auto;
  background: var(--npc-primary);
  border: none;
  border-radius: 50%;
  height: 12px;
  width: 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.npc-inputs-min-max {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: center;
}

.npc-inputs-min-max input {
  width: 100%;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ced4da;
  font-size: 12px;
  height: 24px;
  color: var(--npc-primary);
  font-weight: bold;
  padding: 4px 8px;
}

.npc-filter-company {
  display: flex;
  align-items: center;
  margin: 12px 0;
}

.npc-filter-company span {
  font-size: 12px;
  font-weight: 600;
  -webkit-text-stroke-color: #000;
  stroke: #000;
  color: var(--npc-primary);
}

.npc-filter-company input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border-radius: 3px;
  border: 1px solid #ced4da;
  accent-color: var(--npc-tertiary);
  font-size: 12px;
  color: var(--npc-primary);
  font-weight: bold;
  display: inline;
}

.npc-filter-company input[type="checkbox"]:checked + span::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.npc-filter-order select {
  width: 100%;
  font-size: 12px;
  border-radius: 5px;
  border: 1px solid var(--npc-tertiary);
  font-size: 12px;
  height: 28px;
  color: var(--npc-primary);
  font-weight: bold;
  padding: 0 10px;
}

.npc-filter-button button {
  background-color: var(--npc-tertiary);
  border-style: solid;
  border-width: 1px;
  border-color: var(--npc-tertiary);
  color: var(--npc-primary);
  padding: 12px 16px;
  margin: 0px;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
}

.npc-filter-button button:hover,
.npc-filter-button button:focus {
  background-color: var(--npc-primary);
  color: white;
}

.npc-cta-fale-conosco {
  padding: 120px 0;
}

.npc-cards__fixed .npc-card {
  border: 1px solid var(--npc-tertiary);
}

.npc-card ul li {
  list-style: none;
}

.npc-card {
  font-size: 10px;
  font-weight: 500;
  color: var(--npc-primary);
  background-color: white;
  border-radius: 16px;
  border: 1px solid #fff;
  padding: 22px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-bottom: 20px;
}

.npc-card .npc-item-desk {
  display: block;
}

.npc-card .npc-item-mobile {
  display: none;
}

.npc-card__item {
  flex: 1;
}

.npc-card__item__first {
  width: 50px;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  gap: 14px;
  padding-inline-start: 0 !important;
}

.npc-card__item__first li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  font-size: 12px;
  font-weight: 600;
  gap: 2px;
}

.npc-card__item {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  justify-content: flex-start;
  font-size: 12px;
  font-weight: 600;
  gap: 14px;
  padding-inline-start: 0 !important;
}

.npc-card__item li {
  display: flex;
  justify-content: flex-start;
  align-items: start;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
}

.npc-card__item li p {
  margin-block-end: 0px;
}

.npc-card__item li span {
  display: block;
}

.npc-card__title__two {
  margin-top: 12px;
}

.npc-card__title {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
}

.icon-house {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' viewBox='0 0 576 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23005a3d' d='M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-car {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23005a3d' d='M499.99 176h-59.87l-16.64-41.6C406.38 91.63 365.57 64 319.5 64h-127c-46.06 0-86.88 27.63-103.99 70.4L71.87 176H12.01C4.2 176-1.53 183.34.37 190.91l6 24C7.7 220.25 12.5 224 18.01 224h20.07C24.65 235.73 16 252.78 16 272v48c0 16.12 6.16 30.67 16 41.93V416c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h256v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-54.07c9.84-11.25 16-25.8 16-41.93v-48c0-19.22-8.65-36.27-22.07-48H494c5.51 0 10.31-3.75 11.64-9.09l6-24c1.89-7.57-3.84-14.91-11.65-14.91zm-352.06-17.83c7.29-18.22 24.94-30.17 44.57-30.17h127c19.63 0 37.28 11.95 44.57 30.17L384 208H128l19.93-49.83zM96 319.8c-19.2 0-32-12.76-32-31.9S76.8 256 96 256s48 28.71 48 47.85-28.8 15.95-48 15.95zm320 0c-19.2 0-48 3.19-48-15.95S396.8 256 416 256s32 12.76 32 31.9-12.8 31.9-32 31.9z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.npc-card__item button {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  border: 1px solid #005a3d;
  width: 100%;
  border-radius: 18px;
  padding: 8px;
  display: block;
  opacity: 1;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}

.npc-card__item button:hover {
  opacity: 0.7;
}

.npc-button__reserve {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  border: 1px solid #005a3d;
  color: #005a3d;
  width: 100%;
  border-radius: 18px;
  padding: 8px;
  display: block;
  opacity: 1;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
  background-color: transparent !important;
}

.npc-button__reserve:hover {
  opacity: 0.7;
}

.npc-button__group {
  background-color: var(--npc-secondary) !important;
  margin-top: 12px;
}

.npc-button__group.active {
  background-color: var(--npc-primary) !important;
  color: var(--npc-secondary) !important;
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  width: 100%;
  border-radius: 4px;
  height: 16px;
  animation: shimmer 2.5s infinite ease-in-out;
  display: block;
}

.skeleton-button {
  height: 34px;
  margin-bottom: 12px;
  border-radius: 16px;
}

/* Animação de shimmer */
@keyframes shimmer {
  0% {
    background-position: -300px 0;
  }
  100% {
    background-position: 300px 0;
  }
}

.npc-modal {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
}

.npc-modal.warning,
.npc-modal.plus {
  display: flex;
}

.npc-modal__wrapper {
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  max-width: 600px;
  width: 100%;
  height: max-content;
  overflow-y: auto;
}

.npc-modal__title__plus,
.npc-modal__title__warning {
  display: none;
}

.plus .npc-modal__title__plus {
  display: block;
}

.warning .npc-modal__title__warning {
  display: block;
}

.npc-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  border-bottom: 1px solid #ddd;
}

.npc-modal__header h3 {
  font-family: "Roboto", Sans-serif;
  font-weight: 600;
  color: var(--npc-tertiary);
}

.npc-modal__header button {
  background-color: transparent;
  border: 0px;
  padding: 4px;
  cursor: pointer;
}

.npc-modal__header button:hover,
.npc-modal__header button:focus {
  background-color: transparent;
  border: 0px;
}

.npc-modal__header button svg {
  rotate: 0deg;
  transition: all 0.25s ease-in-out;
}

.npc-modal__header button:hover svg,
.npc-modal__header button:focus svg {
  rotate: 180deg;
}

.npc-modal__warning,
.npc-modal__plus {
  display: none;
}

.warning .npc-modal__warning {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 16px;
  padding: 24px 0;
}

.plus .npc-modal__plus {
  display: block;
}

#summary-parcelas p {
  margin-block-end: 0;
}

.npc-modal__buttons button {
  border: 0px;
  padding: 12px 24px;
  margin: 0 12px;
}

.npc-modal__buttons button:first-child {
  background-color: #ddd;
}

.npc-modal__footer {
  margin-top: 24px;
  border-top: 1px solid #ddd;
  padding-top: 24px;
  display: none;
}

.plus .npc-modal__footer {
  display: block;
}

.npc-modal__footer h3 {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

.npc-modal__footer a {
  background-color: #27d045;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border-radius: 3px;
  line-height: 1;
  padding: 6px 12px;
  margin-bottom: 12px;
}

.npc-cards__pagination {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.npc-cards__pagination button {
  padding: 0.55rem 1rem 0.4rem 1rem;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  border-radius: 6px;
  transition: 0.2s;
}

.npc-cards__pagination button.active {
  background: #27d045;
  color: #005a3d;
  border-color: #27d045;
}

.npc-cards__pagination button:hover:not(.active) {
  background: #27d045;
  color: #005a3d;
  border-color: #27d045;
}

.npc-msg {
  width: 100%;
  text-align: center;
  border-radius: 8px;
  font-weight: 600;
  margin-bottom: 1rem;
  padding: 12px 24px;
  margin-block-end: 0 !important;
}

.npc-msg.success {
  background-color: #e0fae4;
  color: #005a3d;
}

.npc-msg.error {
  background-color: #fae0e4;
  color: #b00020;
}

.npc-fixed-buttons {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  height: max-content;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
}

.npc-fixed-buttons__item {
  padding: 12px 12px 12px 32px;
}

.npc-fixed-buttons button {
  border-style: solid;
  border-width: 1px;
  padding: 12px 16px;
  margin: 0px;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-transform: uppercase;
}

button.button-btn-add {
  background-color: rgb(100, 100, 100);
  color: rgb(255, 255, 255);
  border-color: rgb(100, 100, 100);
}

button.button-btn-add.active {
  background-color: var(--npc-tertiary);
  border-color: var(--npc-tertiary);
  color: var(--npc-primary);
}
button.button-btn-add:hover,
button.button-btn-add:focus {
  opacity: 0.7;
  background-color: rgb(100, 100, 100);
}

button.button-btn-clear {
  background-color: #e7b22c;
  color: white;
  border: 1px solid #e7b22c;
  margin-left: 12px;
}

button.button-btn-clear:hover,
button.button-btn-clear:focus {
  background-color: #e7b22c;
  color: white;
  border: 1px solid #e7b22c;
  opacity: 0.7;
}

.npc-total-percent input {
  margin-top: 8px;
  margin-bottom: 16px;
  border: none;
}

.npc-result-percent span {
  width: 100%;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ced4da;
  font-size: 12px;
  padding: 4px 18px;
  color: var(--npc-primary);
  font-weight: bold;
}

.npc-range__percent {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  border-radius: 5px;
  background: #ddd; /* fallback */
  outline: none;
  transition: background 0.3s ease-in-out;
}

/* Chrome, Safari, Edge */
.npc-range__percent::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  background: var(--npc-primary);
  border-radius: 50%;
  cursor: pointer;
  margin-top: -2px;
  border: none;
}

/* Firefox */
.npc-range__percent::-moz-range-thumb {
  height: 12px;
  width: 12px;
  background: var(--npc-primary);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

/* remove outline blue on click */
.npc-range__percent::-moz-focus-outer {
  border: 0;
}

@media screen and (max-width: 767px) {
  .npc-aside {
    min-width: 100%;
  }
  .npc-content {
    grid-template-columns: 1fr;
    padding: 60px 0 10px 0;
    gap: 10px;
  }
  .npc-cta-fale-conosco {
    padding: 80px 0;
    position: relative;
    z-index: 99;
  }
  .npc-content h1 {
    font-size: 22px;
    line-height: 22px;
  }
  .npc-content__tag {
    margin: 0 auto;
    display: block;
    width: max-content;
  }
  .npc-content p {
    text-align: justify;
  }
  .npc-card {
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 6px;
    margin-bottom: 16px;
  }
  .npc-card__item__first {
    width: 100%;
    justify-content: flex-start;
    align-items: start;
    flex-direction: row;
    gap: 30px;
  }

  .npc-card__item__first li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    font-size: 12px;
    font-weight: 600;
    gap: 2px;
  }

  .npc-card .npc-item-desk {
    display: none;
  }

  .npc-card .npc-item-mobile {
    display: block;
  }

  .npc-card__item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    justify-content: flex-start;
    gap: 14px;
  }

  .npc-card__item li {
    width: calc(50% - 7px);
    display: flex;
    justify-content: flex-start;
    align-items: start;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    font-weight: 600;
  }

  .npc-card__item li:last-child {
    width: 100%;
  }

  .npc-cards__pagination {
    display: flex;
    gap: 0.45rem;
    margin-top: 1rem;
    flex-wrap: wrap;
  }

  .npc-cards__pagination button {
    padding: 4px 8px;
  }
  
  .npc-signin {
    display: none;
  }

  .npc-signin-mobile {
    display: block;
    background-color: white;
    border-radius: 24px;
    padding: 24px;
  }
}