/* ============================= */
/* Rounded corners for products and groups */
/* ============================= */

/* Card principal do produto */
a.block.bg-card,
a.block.bg-card/75,
div.bg-card,
div.bg-card/75 {
  border-radius: 1rem !important;
}

/* Cards dentro de upsells / grids */
div.w-full .bg-card,
div.w-full .bg-card/75 {
  border-radius: 1rem !important;
}

/* Imagens dentro dos cards */
a.block.bg-card img,
a.block.bg-card/75 img,
div.bg-card img,
div.bg-card/75 img {
  border-radius: 1rem !important;
  overflow: hidden;
}

/* Group products específicos (tipo group) */
a[href^="javascript:void(0)"] {
  border-radius: 1rem !important;
}

/* Garantir que outlines e efeitos seguem o border-radius */
.payment-square,
.payment-card,
.hover-gradient.payment-square {
  border-radius: 1rem !important;
}

/* Bordas arredondadas da navbar */
[data-component-id="navbar"] > div {
  border-radius: 0.75rem; /* ~rounded-xl */
  overflow: visible; /* evita cortar dropdowns */
}

/* Botões da navbar (carrinho, menu toggle, etc.) */
[data-component-id="navbar"] .size-10,
[data-component-id="navbar"] button,
[data-component-id="navbar"] a {
  border-radius: 0.5rem; /* ~rounded-lg */
}

/* Botões especiais (ex: login, links em forma de botão) */
[data-component-id="navbar"] a.bg-accent-500,
[data-component-id="navbar"] a.bg-accent-700,
[data-component-id="navbar"] button.bg-card {
  border-radius: 0.5rem;
}

/* Imagem do logo arredondada */
[data-component-id="navbar"] img {
  border-radius: 0.5rem;
}

/* Select da moeda arredondado */
[data-component-id="navbar"] select {
  border-radius: 0.5rem;
  overflow: visible; /* garante que opções não ficam cortadas */
}

/* ================= Footer ================= */

/* Bordas arredondadas do footer */
footer {
  border-radius: 0.75rem; /* arredondado igual ao navbar */
  overflow: visible; /* garante que nada interno seja cortado */
}

/* ================= Announcement ================= */

.announcement .p-2 {
  background-color: #000 !important; /* fundo preto */
  color: #fff !important;           /* letras brancas */
  border-color: #222 !important;    /* borda escura para combinar */
}

/* Cantos arredondados e hover suave para feature cards */
.component > .py-6 > .flex > div > div {
  border-radius: 1rem; /* cantos arredondados */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.component > .py-6 > .flex > div > div:hover {
  transform: translateY(-4px); /* leve elevação */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* sombra mais intensa */
}

.full-width-line {
  width: 100%;           /* linha ocupa toda a largura da tela */
  height: 2px;           /* altura da linha */
  background-color: #3aefff; /* cor da linha */
  margin: 2rem 0;        /* espaçamento acima e abaixo da linha */
}

/* Hero com cantos arredondados */
.component#{{ componentId }} .container > div {
  border-radius: 1.5rem; /* ou 24px, mesmo valor do rounded-2xl */
  overflow: hidden; /* garante que nada “vaze” dos cantos */
}

/* Wrapper arredondado da search bar */
.component .w-full.flex.items-center {
  overflow: hidden;
  border-radius: 1rem; /* cantos arredondados */
  background: rgba(72,61,139,0.8); 
  border: 1px solid rgba(255,255,255,0.1);
}

/* Ícone da lupa */
.component .w-full.flex.items-center svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: #3aefff !important; /* cor da lupa bem visível */
  stroke-width: 2.2;          /* deixa a linha mais grossa */
  margin-left: 4px;
}

/* Input */
.component input[x-model="searchTerm"] {
  border: none;
  outline: none;
  background: transparent;
  color: #ffffff;
  padding-left: 0.5rem;
  width: 100%;
}

/* Placeholder */
.component input[x-model="searchTerm"]::placeholder {
  color: rgba(255,255,255,0.6);
}

/* Modal principal (caixa onde aparece login) */
.inline-block.w-full.max-w-lg {
  border-radius: 1rem; /* ~rounded-2xl */
}

/* Botões do modal */
.inline-block.w-full.max-w-lg button {
  border-radius: 0.75rem; /* ~rounded-xl */
}

/* Sidebar principal */
.bg-card\/75.border.border-white\/5.overflow-hidden {
  border-radius: 1rem; /* arredondar a sidebar */
}

/* Links e botões dentro da sidebar (opcional, se quiseres arredondar hover background) */
.bg-card\/75 ul li a,
.bg-card\/75 ul li button {
  border-radius: 0.5rem; /* ~rounded-lg */
  padding: 0.5rem 0.75rem; /* dar mais “botão” ao hover */
  display: block;
}

/* Cartões */
.bg-card\/75.border.border-white\/5 {
  border-radius: 1rem; /* rounded-xl */
}

/* Botões de depósito */
button.text-t-primary.bg-white\/5 {
  border-radius: 0.5rem; /* rounded-lg */
}