@font-face {
  font-family: "Roboto";
  src: url("../styles/fonts/Roboto/static/Roboto-Regular.ttf")
    format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../styles/fonts/Roboto/static/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-black: #0c0f0a;
  --color-dark-black: #1a1a1a;
  --color-light-grey: #f5f4f6;
  --color-second-light-grey: #efefef;
  --color-tertiary-light-grey: #c7c7c7;
  --color-dark-grey: #737b7d;
  --color-red: #db4444;
  --color-success: #29af56;
  --color-1bigo-blue: #2273b5;
  --color-blue: #1071ff;
  --color-hover-blue: #0655c7;
  --color-white: #fffeff;
  --color-yellow: #da9500;
  --color-pink: #e90eb3;
  --color-vintiun: #b47c22;
  --border-radius: 40px;
  --border-radius-36: 36px;
  --border-radius-42: 42px;
  --border-radius-48: 48px;
  --border-radius-sm: 16px;
  --border-radius-lg: 1000px;
  --box-shadow: 0 4px 12px #737b7d40;
  --box-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --transition-duration: 0.2s;
}

.color-black {
  color: var(--color-black);
}

.color-dark-black {
  color: var(--color-dark-black);
}

.color-light-grey {
  color: var(--color-light-grey);
}

.color-second-light-grey {
  color: var(--color-second-light-grey);
}

.color-tertiary-light-grey {
  color: var(--color-tertiary-light-grey);
}

.color-dark-grey {
  color: var(--color-dark-grey);
}

.color-red {
  color: var(--color-red);
}

.color-success {
  color: var(--color-success);
}

.color-blue {
  color: var(--color-blue);
}

.color-hover-blue {
  color: var(--color-hover-blue);
}

.color-white {
  color: var(--color-white);
}

.color-yellow {
  color: var(--color-yellow);
}

.color-pink {
  color: var(--color-pink);
}

.color-vintiun {
  color: var(--color-vintiun);
}

.color-1bigo-blue {
  color: var(--color-1bigo-blue);
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 400;
}

.h1 {
  font-family: "Roboto", sans-serif;
  font-size: 48px;
  line-height: 1.4;
  font-weight: 400;
}

.h2 {
  font-family: "Roboto", sans-serif;
  font-size: 40px;
  line-height: 1.4;
  font-weight: 400;
}

.h3 {
  font-family: "Roboto", sans-serif;
  font-size: 33px;
  line-height: 1.4;
  font-weight: 400;
}

.h4 {
  font-family: "Roboto", sans-serif;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 400;
}

.h5 {
  font-family: "Roboto", sans-serif;
  font-size: 23px;
  line-height: 1.4;
  font-weight: 400;
}

.title-1 {
  font-family: "Roboto", sans-serif;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 400;
}

.title-2 {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
}

.caption {
  font-family: "Roboto", sans-serif;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
}

.bold {
  font-weight: 700;
}

.uppercase {
  text-transform: uppercase;
}

.lh-24 {
  line-height: 24px;
}

.fw-500 {
  font-weight: 500;
}

.fw-700 {
  font-weight: 700;
}

.white-space {
  white-space: pre-line;
}

.rotate-180 {
  rotate: 180deg;
}

.btn-black {
  background-color: var(--color-dark-black);
  color: var(--color-white);
  border-radius: 8px;
}

.btn-black-hover {
  background-color: var(--color-white);
  color: var(--color-dark-grey);
  border-radius: var(--border-radius-lg);
}

.btn-black-hover:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.btn-red-hover {
  background-color: var(--color-second-light-grey);
  color: var(--color-tertiary-light-grey);
  border-radius: var(--border-radius-lg);
}

.btn-red-hover:hover {
  background-color: var(--color-red);
  color: var(--color-white);
}

.btn-blue {
  background-color: var(--color-blue);
  color: var(--color-white);
  border-radius: var(--border-radius-lg);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.btn-blue:hover {
  background-color: var(--color-hover-blue);
  color: var(--color-white);
}

.btn-voltar {
  background-color: transparent;
  color: var(--color-black);
  border-radius: var(--border-radius-42);
}

.btn-voltar:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.btn-blue-hover {
  background-color: var(--color-second-light-grey);
  color: var(--color-tertiary-light-grey);
  border-radius: var(--border-radius-lg);
}

.btn-blue-hover:hover {
  background-color: var(--color-blue);
  color: var(--color-white);
}

.btn-white-blue {
  background-color: white;
  padding: 10px 41px;
  border: 1px solid var(--color-tertiary-light-grey);
  border-radius: 42px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--color-black);
  transition: all 300ms ease-out;
  display: flex;
  gap: 15px;
  align-items: center;
}

.btn-white-blue:hover {
  background-color: var(--color-blue);
  color: white;
}

.btn-black-outline {
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  color: var(--color-black);
  border-radius: var(--border-radius-lg);
}

.btn-black-outline:active {
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
}

.bordaCard{
    border: 1px solid var(--color-1bigo-blue);
}


.color-block {
    outline: 1px solid var(--color-tertiary-light-grey);
    border-radius: 8px;
    width: 44px;
    height: 24px;
    margin: 4px;
}

    

.line {
  background-color: #dddddd;
  height: 1px;
}

.line-vertical {
  background-color: #dddddd;
  width: 1px;
  height: 22px;
}

.totals-divisor {
  margin: 100px 0;
}

.line-vertical-32 {
  background-color: #dddddd;
  width: 1px;
  height: 32px;
}

.icon {
  width: 24px;
  height: 24px;
}

.icon-lg {
  width: 32px;
  height: 32px;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.gap-8 {
  gap: 8px;
}

.gap-10 {
  gap: 10px;
}

.gap-12 {
  gap: 12px;
}

.gap-16 {
  gap: 16px;
}

.gap-20 {
  gap: 20px;
}

.gap-24 {
  gap: 24px;
}

.gap-32 {
  gap: 24px;
}

.gap-76 {
  gap: 76px;
}

.mt-0 {
  margin-top: 0px;
}

.mt-32 {
  margin-top: 32px;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-4 {
  margin-bottom: 4px !important;
}

.mb-6 {
  margin-bottom: 6px;
}

.mb-8 {
  margin-bottom: 8px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-32 {
  margin-bottom: 32px;
}

.mb-38 {
  margin-bottom: 38px;
}

/* ==========================================================
    COLOR DROPDOWN
========================================================== */

.color-select-wrapper {
      position: relative;
    }
    
    .color-selected {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #fff;
      border: 2px solid #EFEFEF;
      border-radius: 42px;
      padding: 12px;
      cursor: pointer;
    }

    .color-preview {
        width: 32px;
        height: 18px;
        border-radius: 5px;
        transition: background-color 0.2s ease;
    }

    .color-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      background: #fff;
      border: 2px solid #ddd;
      border-radius: 12px;
      padding: 8px;
      gap: 6px;
      flex-wrap: wrap;
      width: 130px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.12);
      z-index: 999;
    }
    
    .colorDropdown.active {
        display: flex; /* ou block, conforme o teu layout */
    }
    
    
    .color-dropdown.open {
      display: flex;
    }
    
    .color-option {
      width: 30px;
      height: 30px;
      border-radius: 6px;
      cursor: pointer;
      transition: transform 0.15s ease, outline 0.15s ease;
    }

    .color-option:hover {
      transform: scale(1.15);
    }
    
    .color-option.active {
      outline: 2px solid #333;
      outline-offset: 2px;
    }
    
    .product-card {
        overflow: visible !important;
    }


/* ==========================================================
    MENU GERAL
========================================================== */

.sidebar {
  padding: 98px 34px;
  width: 274px;
  height: 90vh;
  box-shadow: 4px 0px 12px 0px #0000001a;
  position: fixed;
  bottom: 0;
  left: 0;
  overflow-y: auto;
}

.sidebar-perfil img{
 height: 72px;
}

/* Menu principal */
.main-menu,
.perfil-sidebar-menu-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  flex: 1;
}

.main-menu a,
.perfil-sidebar-menu-info a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* texto à esquerda, ícone à direita */
  padding: 12px 24px;
  border-radius: 50px;
  text-decoration: none;
  color: var(--color-tertiary-light-grey);
  font-size: 15px;
  font-weight: 500;
  transition:
    background 0.2s,
    color 0.2s;
}

.main-menu a:hover,
.perfil-sidebar-menu-info a:hover {
  background: var(--color-light-grey);
  color: var(--color-tertiary-light-grey);
}

/* Item ativo com fundo azul */
.main-menu a.active,
.perfil-sidebar-menu-info a.active {
  background: var(--color-blue);
  color: #fff;
}

nav .perfil-photo-container {
  /* width: 100%; */
  display: flex;
  justify-content: end;
}

.perfil-sidebar-menu-info .perfil-photo img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.content {
  margin-left: 274px;
  padding: 120px 80px 24px 24px;
}

/*===========================================================
  SIDEBAR-MENU (SIDEBAR-SEARCH IS ON PRODUCTS.CSS)
============================================================*/

.sidebar-btn {
  color: var(--color-1bigo-blue);
}

/* ═══════════════════════════════════════
   OVERLAY
═══════════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 91;
  pointer-events: none;
  transition: background 0.35s ease;
}

.overlay.active {
  background: rgba(0, 0, 0, 0.45);
  pointer-events: all;
}

/* ═══════════════════════════════════════
   SIDEBAR MENU (bottom sheet)
═══════════════════════════════════════ */
.sidebar-menu {
  margin-top: 24px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 16px);
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  padding: 12px 0;
  box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.18);
  touch-action: none;
  user-select: none;
}

.sidebar-menu.active {
  transform: translateY(0);
}

/* ═══════════════════════════════════════
   HANDLE DE ARRASTO
═══════════════════════════════════════ */
.sidebar-menu__handle {
  display: flex;
  justify-content: center;
  padding: 16px 0 18px;
  cursor: grab;
}

.sidebar-menu__handle:active {
  cursor: grabbing;
}

.sidebar-menu__handle::after {
  content: "";
  width: 30%;
  height: 6px;
  background: var(--color-black);
  border-radius: var(--border-radius-lg);
}

/* ═══════════════════════════════════════
   CONTEÚDO INTERIOR
═══════════════════════════════════════ */
.sidebar-menu__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0 24px;
  overflow-y: auto;
  max-height: 100%;
}

/* =========================================
    SIDEBAR LIST
========================================== */
.sidebar-menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--color-dark-grey);
  list-style-type: none;
  padding: 0 34px;
}

.sidebar-menu-list .list-btn {
  text-decoration: none;
  padding: 14px 12px;
  color: var(--color-dark-grey);
}

/* =============================================
    SIDEBAR ACTIONS
=============================================== */

.sidebar-menu-actions {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;
  padding: 0 34px 5dvh 34px;
}

.sidebar-menu-actions .btn {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 15px;
}

/* ==========================================================
  TOP BAR
========================================================== */

.top-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 0;
  height: 48px;
  background-color: var(--color-1bigo-blue);
  color: var(--color-white);
  border-bottom-left-radius: var(--border-radius-sm);
  border-bottom-right-radius: var(--border-radius-sm);
  padding: 0 24px;
}

/* ==========================================================
    FILTROS DATA
========================================================== */
.data-filter .icon-sm {
  color: var(--color-dark-grey);
}

.data-filter:hover .icon-sm {
  color: var(--color-black);
}

/* Esconde o ícone hover por defeito */
.data-filter img.icon-hover {
  display: none;
}

/* Quando o container .data-filter é hover */
.data-filter:hover img.icon-default {
  display: none;
  /* esconde o ícone normal */
}

.data-filter:hover img.icon-hover {
  display: inline-block;
  /* mostra o ícone preto */
}

/* Opcional: transição suave */
.data-filter img {
  transition: opacity 0.2s ease-in-out;
}

.data-filter:hover img.icon-default {
  opacity: 0;
}

.data-filter:hover img.icon-hover {
  opacity: 1;
}

.data-filter:hover input::placeholder {
  color: var(--color-black);
  opacity: 1;
}

.data-filter:hover input {
  border: 1px solid var(--color-tertiary-light-grey);
}

.data-filter:hover .line-vertical {
  border: 1px solid var(--color-tertiary-light-grey);
}

/* Chrome, Safari, Edge, Opera */
.data-filter input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Firefox */
.data-filter input[type="date"] {
  -moz-appearance: textfield;
}

/* IE / Edge antigo */
.data-filter input[type="date"]::-ms-clear {
  display: none;
}

/* ==========================================================
    Gerais produtos
========================================================== */
.product-favorites {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-42);
}

.product-favorites {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-42);
}

.product-favorites:hover {
  background: var(--color-second-light-grey);
}

.product-favorites:hover .nofav {
  color: var(--color-red);
}

.product-favorites .nofav {
  color: var(--color-dark-grey);
}

.product-favorites .fav {
  color: var(--color-red);
}

.amount-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 178px;
  padding: 8px;
  height: 48px;
  border: 1px solid var(--color-light-grey);
  border-radius: var(--border-radius-48);
}

.amount-product .btn-remove,
.amount-product .btn-add {
  background-color: transparent;
  color: var(--color-dark-grey);
  border: none;
  width: 48px;
  height: 32px;
}

.qtd-input::-webkit-outer-spin-button,
.qtd-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qtd-input {
  -moz-appearance: textfield;
  text-align: center;
  border: none;
  outline: none;
  width: 48px;
  padding: 0;
}

/* ==========================================================
    TABELAS DE INFORMAÇÃO
========================================================== */

.table-wrapper {
  border: 1px solid var(--color-second-light-grey);
  border-radius: 16px;
  overflow: hidden;
}

.custom-striped,
.custom-striped-references {
  --bs-table-striped-bg: var(--color-light-grey);
  margin-bottom: 0;
}

.custom-striped thead,
.custom-striped-references thead {
  background-color: white;

  border-bottom: 1px solid var(--color-second-light-grey);
}

.custom-striped thead th,
.custom-striped-references thead th {
  padding: 18px 24px;
}

.custom-striped tbody th,
.custom-striped tbody td,
.custom-striped-references th,
.custom-striped-references td {
  padding: 8px 24px;
  color: var(--color-black);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.custom-striped > :not(caption) > * > *,
.custom-striped-references > :not(caption) > * > * {
  border-bottom-width: 0;
}

.custom-striped th,
.custom-striped-references th {
  color: var(--color-dark-grey);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

/* esquerda */
.custom-striped tbody tr:hover th:first-child {
  border-left: 4px solid var(--color-blue);
}

.custom-striped .div-see-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);

  height: 28px;
  padding: 8px 16px;

  border-radius: 32px;
  background: var(--color-blue);
  visibility: hidden;
}

.custom-striped .div-see-more a {
  color: white;
}

.custom-striped tbody tr:hover .div-see-more {
  visibility: visible;
}

/* ==========================================================
    PAGINAÇÃO
========================================================== */

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination li a,
.pagination li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border-color: transparent;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-dark-grey);
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.pagination li a:hover {
  background: var(--color-second-light-grey);
  color: var(--color-black);
}

.pagination li.active a {
  background: var(--color-black);
  color: #fff;
  pointer-events: none;
}

.pagination li.arrow:first-child a svg {
  transform: scale(-1, 1);
}

.pagination li.arrow a {
  font-size: 18px;
  color: var(--color-dark-grey);
}

.pagination li.arrow a:hover {
  background: var(--color-second-light-grey);
  color: var(--color-black);
}

.pagination li.arrow.active a {
  background: var(--color-black);
  color: var(--color-white);
}

.pagination li.arrow.disabled a {
  color: var(--color-light-grey);
  cursor: not-allowed;
  pointer-events: none;
}

.page-numbers.current {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  background: var(--color-black);
  color: #fff;
  pointer-events: none;
}

/* ==========================================================
    SEARCH BAR
========================================================== */
/* DESKTOP */
.content-search {
  border: 1px solid var(--color-second-light-grey);
  border-radius: 36px;
}

.content-search input {
  border-radius: var(--border-radius-lg);
}

.content-search:hover,
.content-search:hover .search-bar .line-vertical {
  border: 1px solid var(--color-tertiary-light-grey);
}

.content-search:hover .search-bar input::-webkit-input-placeholder {
  color: var(--color-black);
}

.content-search:hover .search-bar input::-moz-placeholder {
  color: var(--color-black);
}

.content-search:hover .search-bar input:-ms-input-placeholder {
  color: var(--color-black);
}

.content-search:hover .search-bar input::-ms-input-placeholder {
  color: var(--color-black);
}

.content-search button {
  background: none;
  border: none;
}

.content-search:hover button,
.content-search:hover button .input-group-text {
  color: var(--color-black);
}

.search-bar .form-control {
  border: none;
  padding: 10px 18px;
}

.search-bar .input-group-text {
  background-color: var(--color-white);
  border: none;
  /* padding: 0; */
}

.form-control:focus {
  box-shadow: none;
}

.search-bar span {
  color: var(--color-dark-grey);
}

/* MOBILE */
/* ---------------------------------------- */

.content-search:hover .search-bar-mobile .line-vertical {
  border: 1px solid var(--color-tertiary-light-grey);
}

.content-search:hover .search-bar-mobile input::-webkit-input-placeholder {
  color: var(--color-black);
}

.content-search:hover .search-bar-mobile input::-moz-placeholder {
  color: var(--color-black);
}

.content-search:hover .search-bar-mobile input:-ms-input-placeholder {
  color: var(--color-black);
}

.content-search:hover .search-bar-mobile input::-ms-input-placeholder {
  color: var(--color-black);
}

.search-bar-mobile .form-control {
  border: none;
  padding: 10px 18px;
}

.search-bar-mobile .input-group-text {
  background-color: var(--color-white);
  border: none;
  /* padding: 0; */
}


.search-bar-mobile span {
  color: var(--color-dark-grey);
}





.btn-outline {
  border: 1px solid #c7c7c7;
  background: transparent;
  border-radius: var(--border-radius-42);
  width: 100%;
  max-width: 192px;
  height: 42px;
  gap: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.btn-outline:hover {
  border: 1px solid var(--color-black);
  background: var(--color-black);
  color: var(--color-white);
}

/* ==========================================================
    COSTUM SELECT
========================================================== */

.costum-select {
  -webkit-appearance: none;
  /* Safari / Chrome */
  -moz-appearance: none;
  /* Firefox */
  appearance: none;
  /* CSS padrão */
  background: none;
  /* remove fundo padrão */
  padding: 8px 12px 8px 20px;
  font-size: 14px;
}

.costum-select {
  position: absolute;
  inset: 0;
  /* opacity: 0; */
  cursor: pointer;
}

/* ==========================================================
    CARDS PAGAMENTO
========================================================== */

.payment {
  background-color: white;
  border: 1px solid var(--color-second-light-grey);
  border-radius: 16px;
  padding: 24px 32px;
  align-items: center;
}

/* ==========================================================
    LINHA TEMPORAL ESTADO DA ENCOMENDA
========================================================== */

/* ── DESKTOP ── */
.tracker-steps {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 24px;
  border: 1px solid var(--color-second-light-grey);
  border-radius: 16px;
}

.step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.step .step-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-dark-grey);

  margin-bottom: 12px;
}

.step.active .step-title {
  color: var(--color-black);
}

.step-content .step-details,
.step-content .step-date {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-dark-grey);
}

/* dot-wrap segura o dot e a linha lado a lado no desktop */
.step-dot-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
}

.step-dot {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.step.done .step-dot {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  background-image: url("../imgs/icons/estado-encomenda-done.svg");
}

.step .step-dot {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  background-image: url("../imgs/icons/estado-encomenda-none.svg");
}

.step.active .step-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../imgs/icons/estado-encomenda-active.svg");
}

/* Linha — ocupa o espaço restante no desktop */
.step-line {
  flex: 1;
  /* DESKTOP: estica horizontalmente */
  height: 2px;
  background: #f5f5f5;
  /* cinza por defeito */
}

.step.done .step-line {
  background: #2563eb;
  /* azul nos concluídos */
}

.estado-encomenda {
  margin-bottom: 232px;
}

/* Linha do step done que vem imediatamente antes do active */
.step.done:has(+ .step.active) .step-line {
  background: linear-gradient(90deg, #1071ff 0%, #f5f5f5 100%);
}

.Iniciais-small {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-blue);
  color: var(--color-light-grey);
  display: flex;
  align-items: center;
  justify-content: center;
}

.Iniciais {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--color-blue);
  color: var(--color-light-grey);
  display: flex;
  align-items: center;
  justify-content: center;
}

/*==========================
  BANNER CARD
============================*/

.banner-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: 80px;
  overflow: hidden;
  box-shadow: var(--box-shadow-lg);
  border-radius: var(--border-radius-sm);
}

.banner-card-container {
  width: 100%;
  height: 700px;
  /* padding: 0 88px; */
}

.banner-card .banner-info {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 48px;
  gap: 32px;
}

.banner-card .banner-info .bi-title {
  color: var(--color-1bigo-blue);
  margin: 0;
}

.banner-card .banner-info .bi-desc {
  color: var(--color-dark-grey);
}

.banner-card .banner-img {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.banner-card .banner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: all 0.6s ease;
}

.banner-card:hover .banner-img img {
  transform: scale(1.06);
}

.banner-card .bi-fields {
  display: flex;
  width: 100%;
  gap: 17px;
}

.banner-card .bi-fields .field-btn-container {
  align-items: end;
  width: auto;
  height: 100%;
  display: flex;
}

.banner-card .bi-fields .btn {
  border-radius: var(--border-radius-lg);
  padding: 9px 33px;
}

.banner-card .bi-fields .btn-black:hover {
  background-color: var(--color-1bigo-blue);
  color: white;
}

.banner-card .field-group input:focus {
  outline: none;
  box-shadow: none;
}

.banner-card .field-group {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.banner-card .field-group .field-label {
  font-size: 13px;
  color: var(--color-dark-grey);
  line-height: 1.4;
  margin-bottom: 8px;
}

.banner-card .field-group input,
.field-group select {
  border: none;
  width: 100%;
}

.banner-card .field-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-second-light-grey);
  border-radius: 36px;
  padding: 10px 18px;
  height: 42px;
  position: relative;
}

.banner-card .field-display .line-vertical {
  margin: 0 12px;
}

.banner-card .field-display svg {
  color: var(--color-dark-grey);
}

.banner-card .field-display:hover svg {
  color: var(--color-black);
}

.banner-card .field-display:hover,
.field-display:hover .line-vertical {
  border: 1px solid var(--color-tertiary-light-grey);
}

.banner-card .field-display:hover input::-webkit-input-placeholder {
  color: var(--color-black);
}

.banner-card .field-display:hover input::-moz-placeholder {
  color: var(--color-black);
}

.banner-card .field-display:hover input:-ms-input-placeholder {
  color: var(--color-black);
}

.banner-card .field-display:hover input::-ms-input-placeholder {
  color: var(--color-black);
}

.field-display.invalid:has(input) {
  border-color: var(--color-red);
}
.field-display.invalid:has(input) svg {
  color: var(--color-red);
}

footer {
  width: 100%;
  padding: 68px 0 28px;
}

footer .f-content {
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-36);
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--color-second-light-grey);
  box-shadow: var(--box-shadow-lg);
  gap: 24px;
}

footer .f-terms {
  gap: 20px;
}

footer a:not(.muted-link) {
  text-decoration: none;
  color: var(--color-black);
}

footer svg {
  color: var(--color-1bigo-blue);
}

footer .muted-link {
  text-decoration: underline;
  color: var(--color-dark-grey);
}


.button_wts {
    position: fixed;
    z-index: 5;
    bottom: 32px;
    right: 16px;
}

/* =========================
  ARTIGOS RELACIONADOS
=========================== */
.artigos-relacionados {
  position: relative;
  overflow-y: visible;
  width: 100%;
  /* padding: 12px 88px; */
}

.artigos-relacionados .swiper-title {
  padding-bottom: 50px;
}

.artigos-relacionados .swiper-slide {
  padding: 6px 8px 12px 8px;
}

.artigos-relacionados .swiper-button-next,
.artigos-relacionados .swiper-button-prev {
  top: 0;
  height: 100%;
  margin: 0;
  --swiper-navigation-size: 24px;
  --swiper-navigation-color: var(--color-dark-grey);
}

.artigos-relacionados .swiper-button-next {
  right: -64px;
}

.artigos-relacionados .swiper-button-prev {
  left: -64px;
}

/* SECÇÕES DAS PÁGINAS GERAIS ANTES DE FAZER LOGIN */
.content-section {
  margin-top: 48px;
}

/* =========================
  MODAL ALERT
=========================== */
#alert-container {
  position: fixed;
  top: 100px;
  right: 100px;
  z-index: 1050;
}

#alert-container .alert {
  background-color: var(--color-blue); /* cor que quiseres */
  color: #ffffff; /* muda cor do texto */
  border: none; /* opcional, remove borda */
}

/* CUSTOM PADDING FOR FIX*/
.custom-p {
  padding: 0 212px;
}

.line {
  background-color: var(--color-second-light-grey);
}

/* ── MOBILE ── */
@media (max-width: 992px) {
  .h1-mob {
    font-family: "Roboto", sans-serif;
    font-size: 48px;
    line-height: 1.4;
    font-weight: 400;
  }

  .h2-mob {
    font-family: "Roboto", sans-serif;
    font-size: 40px;
    line-height: 1.4;
    font-weight: 400;
  }

  .h3-mob {
    font-family: "Roboto", sans-serif;
    font-size: 33px;
    line-height: 1.4;
    font-weight: 400;
  }

  .h4-mob {
    font-family: "Roboto", sans-serif;
    font-size: 28px;
    line-height: 1.4;
    font-weight: 400;
  }

  .h5-mob {
    font-family: "Roboto", sans-serif;
    font-size: 23px;
    line-height: 1.4;
    font-weight: 400;
  }

  .title-1-mob {
    font-family: "Roboto", sans-serif;
    font-size: 19px;
    line-height: 1.4;
    font-weight: 400;
  }

  .title-2-mob {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
  }

  .caption-mob {
    font-family: "Roboto", sans-serif;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 400;
  }

  .content {
    margin-left: 0;
    padding: 20px;
  }

  .bold-mob {
    font-weight: 700;
  }

  .container,
  .container-fluid,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    --bs-gutter-x: 40px;
  }

  .totals-divisor {
    margin: 68px 0;
  }

  .content-section {
  margin-top: 0px;
}


  /*====================================
    ARTIGOS RELACIONADOS
  =====================================*/


  .artigos-relacionados .swiper-button-prev {
    left: -8px;
  }

  .artigos-relacionados .swiper-button-next {
    right: -8px;
  }

  .artigos-relacionados .swiper-slide {
    padding: 0 32px;
  }
  
  /* ==========================================================
  TABELAS DE INFORMAÇÃO
  ========================================================== */

  .custom-striped thead th,
  .custom-striped tbody th,
  .custom-striped tbody td {
    padding: 18px 12px;
  }

  .custom-striped-references thead th,
  .custom-striped-references th,
  .custom-striped-references td {
    padding: 18px 2px;
  }

  .content-table {
    margin-bottom: 48px;
  }

  /* ==========================================================
      CARDS PAGAMENTO
  ========================================================== */

  .payment {
    flex-direction: column;
    gap: 32px;
    text-align: center;
  }

  .tracker-steps {
    flex-direction: column;
  }

  .step {
    flex: none;
    flex-direction: row;
    /* 3 colunas: título | linha | conteúdo */
    align-items: stretch;
    /* importante: faz o dot-wrap ocupar toda a altura */
    width: 100%;
    gap: 0;
  }

  /* Coluna 1 — título à esquerda */
  .step-title {
    width: 120px;
    flex-shrink: 0;
    text-align: right;
    padding-right: 12px;
    /* padding-top: 4px; */
    margin-bottom: 0;
  }

  /* Coluna 2 — dot em cima + linha desce */
  .step-dot-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    flex-shrink: 0;
    margin-bottom: 0;
    /* ocupa toda a altura do step */
    justify-content: flex-start;
  }

  /* dot */
  .step-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* linha vertical */
  .step-line {
    width: 2px;
    /* espessura da linha vertical */
    background: #f5f5f5;
    flex: 1;
    /* agora funciona porque o pai tem altura */
    margin: 4px 0;
    /* separação entre dot e linha */
  }

  .step.done .step-line {
    background: #2563eb;
  }

  .step.done:has(+ .step.active) .step-line {
    background: linear-gradient(180deg, #1071ff 0%, #f5f5f5 100%);
  }

  /* Coluna 3 — conteúdo à direita */
  .step-content {
    flex: 1;
    padding-left: 12px;
    padding-bottom: 24px;
    padding-top: 4px;
  }

  .step-details {
    padding-left: 12px;
  }

  .step:last-child .step-content {
    padding-bottom: 0;
  }

  /*==========================
    BANNER CARD
============================*/

  .banner-card {
    flex-direction: column-reverse;
    gap: 0;
  }

  .banner-card .banner-img {
    height: 180px;
  }

  .banner-card-container {
    height: auto;
    /* padding: 0 24px; */
  }

  .banner-card .banner-info {
    justify-content: start;
    padding: 24px;
    gap: 16px;
  }

  .banner-card .banner-info .bi-fields {
    flex-direction: column;
  }

  .banner-card .banner-info .bi-fields .btn {
    width: 100%;
  }

  .banner-card .bi-fields {
    gap: 8px;
  }

  /*===========================
    FOOTER
  =============================*/
  footer {
    padding: 24px;
  }

  footer .f-links > * {
    margin: 0;
  }

  footer .f-links,
  footer .f-terms {
    text-align: end;
    gap: 12px;
  }

  footer .f-bottom {
    gap: 32px;
  }

  footer .f-bottom-cc {
    text-align: center;
    align-items: center;
  }

  /* TOP BAR */
  .top-bar {
    padding: 32px 24px;
  }

  /* PERFIL PHOTO*/
  /* nav .perfil-photo-container {
    justify-content: start;
  } */

  /* CUSTOM PADDING FOR FOOTER FIX*/
  .custom-p {
    padding: 20px;
  }

  footer .f-content {
    padding: 32px;
}
}
#toast-container{
   display:none !important; 
}