/* ===================== ANIMAÇÕES ===================== */
@keyframes modalEnter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* ===================== FONTES ===================== */
@font-face{
  font-family:"Inter";
  src:url("/fonts/inter-v20-latin-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ===================== BASE ===================== */
:root {
  --bg: #0B0E14; 
  --surface: #121620; 
  --surface-2: #1A1F2E; 
  --elev: #1E2536;
  --stroke: rgba(255, 255, 255, 0.08); 
  --muted: #8fa3b0; 
  --text: #e2e8f0;
  --brand: #00E676; 
  --brand-600: #00C853; 
  --brand-700: #00B248;
  --brand-teal: #00E5FF;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: "Poppins", "Inter", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
}
a{color:inherit;text-decoration:none}
.hidden{display:none !important}
.no-scroll{overflow:hidden}
.container{width:min(1200px,92vw);margin:0 auto}

/* ===================== BOTÕES GERAIS ===================== */
.btn-primary{
  background:var(--brand); color:#042a21; border:0; border-radius:12px;
  padding:12px 18px; font-weight:700; transition:.2s; box-shadow:0 6px 16px rgba(24,240,139,.2); cursor:pointer;
}
.btn-primary:hover{transform:translateY(-1px);background:var(--brand-600)}
.btn-primary:active{transform:translateY(0);background:var(--brand-700)}

.btn-ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:10px 14px;
  font-weight:600;
  cursor:pointer
}
.btn-ghost.sm{padding:6px 10px;border-radius:10px;font-size:12px}

.btn-dark{
  background:#122c2e;
  border:1px solid var(--stroke);
  color:var(--text);
  border-radius:12px;
  padding:12px 16px;
  font-weight:600
}

/* ===================== HEADER / TOP BAR ===================== */
.promo-bar{
  position:sticky;top:0;z-index:60;
  display:flex;gap:10px;align-items:center;justify-content:center;
  padding:8px 12px;
  background:#0b2b2c;
  border-bottom:1px solid var(--stroke);
  font-size:14px
}
/* header principal logo abaixo da promo-bar */
.header {
  position: sticky;
  top: 0; /* AGORA GRUDADO NO TOPO */
  z-index: 1000;
  background: radial-gradient(circle at top left, #0f1f1c 0%, #0a1211 60%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--stroke);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.header-inner{display:flex;align-items:center;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800}
.brand-text span{color:var(--brand)}
.brand-mark{
  width:24px;height:24px;border-radius:6px;background:var(--brand);
  display:inline-block;box-shadow:0 0 0 6px rgba(24,240,139,.15)
}
.main-nav{display:flex;gap:18px;margin-left:10px;flex:1}
.main-nav a{opacity:.9;font-weight:600;white-space:nowrap;font-size:15px}
.main-nav a:hover{opacity:1}
.header-actions{display:flex;align-items:center;gap:10px}

.icon-btn{
  background:var(--surface);
  border:1px solid var(--stroke);
  color:var(--text);
  width:40px;height:40px;
  border-radius:12px;
  display:grid;place-items:center;
  cursor:pointer;
  position:relative
}
.avatar-img{width:100%;height:100%;border-radius:10px;object-fit:cover}
#openLogin{
  padding:0;width:40px;height:40px;border-radius:50%;overflow:hidden
}
#openLogin .avatar-img{border-radius:50%}

/* ===================== BUSCA ===================== */
.search {
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface);
  border:1px solid var(--stroke);
  padding:6px;
  border-radius:14px;
  min-width:360px;   /* ← este valor trava o tamanho mínimo */
}

.search input{
  flex:1;background:transparent;border:0;outline:none;color:var(--text)
}
.search-btn{
  background:var(--brand);border:0;color:#07352b;
  width:44px;height:32px;border-radius:10px;
  display:grid;place-items:center
}

/* ===================== HERO / SLIDER ===================== */
.hero{padding:22px 0 8px}
.slider{
  position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--stroke);background:#0c1f20;height:420px
}
.slide{
  position:absolute;inset:0;background:var(--surface) center/cover no-repeat;
  opacity:0;transform:scale(1.02);transition:opacity .4s,transform .6s
}
.slide.is-active{opacity:1;transform:scale(1)}
.slide.bg1{background-image:url('https://images.unsplash.com/photo-1521334726092-b509a19597c6?q=80&w=1600&auto=format&fit=crop')}
.slide.bg2{background-image:url('https://images.unsplash.com/photo-1526403227029-1cbdf1b7c5cc?q=80&w=1600&auto=format&fit=crop')}
.slide.bg3{background-image:url('https://images.unsplash.com/photo-1605901309584-818e25960a8b?q=80&w=1600&auto=format&fit=crop')}
.hero-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(9,27,28,.62);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  border-radius:18px;
  padding:26px 28px;
  width:min(640px,92%);
  text-align:center
}
.hero-card h1{margin:0 0 6px;font-size:36px}
.hero-card p{margin:0 0 14px;color:var(--muted)}
.hero-cta{display:flex;gap:10px;justify-content:center}
.nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(15,38,39,.7);
  color:var(--text);
  font-size:24px;
  display:grid;place-items:center;
  cursor:pointer
}
.nav.prev{left:10px}.nav.next{right:10px}
.dots{
  position:absolute;left:0;right:0;bottom:10px;
  display:flex;gap:8px;justify-content:center
}
.dot{
  width:10px;height:10px;border-radius:50%;
  border:1px solid var(--stroke);
  background:#103235;
  opacity:.7;cursor:pointer
}
.dot.on{background:var(--brand);opacity:1}

/* ===================== SEÇÃO MARCAS/PROVIDERS ===================== */
.section{padding:28px 0}
.section h2{font-size:28px;margin:0 0 6px}
.muted{color:var(--muted)}

.providers-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  margin-top:20px;
  align-items:start;
}
@media (max-width:1024px){
  .providers-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:720px){
  .providers-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:440px){
  .providers-grid {grid-template-columns:repeat(1,minmax(0,1fr));}
}



/* título */
.provider-card__title {
  margin: 0;
  margin-top: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
}

.provider-card {
  padding: 18px;             /* leve aumento */
}

/* Logo dentro do card */
.provider-card .logo-wrap {
  width: 92px;
  height: 92px;
}


.category-icon {
  font-size: 1.1rem;
  line-height: 1;
  opacity: .9;
}


/* Nome do provider no card */
.provider-card .provider-name {
  font-size: .98rem;         /* um tico maior */
  font-weight: 600;
  margin-top: 10px;
}

/* botão de favorito */
.provider-card__fav {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.35);
  color: #ccc;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  transition: all 0.2s ease;
}
.provider-card__fav:hover {
  color: #22d39c;
  border-color: #22d39c;
}
.provider-card__fav.is-fav {
  color: #22d39c;
  border-color: #22d39c;
}


/* estrela de favorito na grade */
.fav-btn{
  position:absolute;right:10px;top:10px;z-index:2;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.42);
  color:#cfe6e1;
  padding:6px 8px;
  border-radius:11px;
  line-height:1;
  font-size:14px;
  font-weight:600;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.fav-btn:hover{
  transform:scale(1.06);
  background:rgba(0,0,0,.6);
}
.fav-btn.on{
  background:#22d39c;
  color:#0a1717;
  border-color:#22d39c;
}

.provider-logo{
  width:100%;
  
  border-radius:14px;
  display:grid;place-items:center;
  background:var(--logo-bg,rgba(10,16,17,.72));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 0 20px rgba(0,0,0,.6);
  overflow:hidden;
  position:relative;
  transition:background-color .2s ease, border-color .2s ease;
}
.provider-logo.is-wide  img{max-width:90%; max-height:75%;}
.provider-logo.is-tall  img{max-width:70%; max-height:90%;}
.provider-logo.is-square img{max-width:78%; max-height:78%;}

.provider-logo img{
  max-width:80%;
  max-height:80%;
  width:auto;
  height:auto;
  object-fit:contain;
  image-rendering:-webkit-optimize-contrast;
  filter:var(--logo-filter,drop-shadow(0 2px 6px rgba(0,0,0,.6)));
  transition:transform .18s ease, filter .18s ease;
}
.provider-card:hover .provider-logo img{
  transform:scale(1.05);
  filter:brightness(1.05) var(--logo-filter,drop-shadow(0 2px 6px rgba(0,0,0,.6)));
}

.provider-meta{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-top:12px;
}
.provider-name{
  color:#e9f7f4;
  font-weight:700;
  font-size:15px;
  line-height:1.3;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.provider-card.skeleton{
  min-height:150px;
  border-radius:18px;
  background:#0f1718;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:none;
  overflow:hidden;
  position:relative;
}
.provider-card.skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.06) 50%,
    transparent 100%
  );
  transform:translateX(-100%);
  animation:provider-skel-move 1.15s infinite;
}
@keyframes provider-skel-move {to{transform:translateX(100%);}}






/* ===================== BADGE CARRINHO ===================== */
#openCart{position:relative}
#cartBadge{
  position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9999px;
  display:grid;place-items:center;line-height:1;padding:0 6px;
  background:#20e07c;color:#0a1c1d;
  font-weight:800;font-size:12px;border:2px solid #0a1c1d;
}

/* ===================== DRAWERS (Account + Cart) ===================== */
.account,.cart{
  position:fixed;top:0;right:0;height:100dvh;
  width:560px;max-width:92vw;
  background:#0e2526;border-left:1px solid var(--stroke);
  box-shadow:-8px 0 24px rgba(0,0,0,.35);
  transform:translateX(100%);visibility:hidden;
  transition:transform .28s ease,visibility .28s ease;
  z-index:60;display:flex;flex-direction:column;
}
.account.open,.cart.open{transform:translateX(0);visibility:visible;}
@media (max-width:720px){.account,.cart{width:100vw;}}
.scrim{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;
}
.scrim.show{opacity:1;pointer-events:auto;}

.account-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--stroke);
}
.account-head .identity{display:flex;align-items:center;gap:12px;}
#accNameTitle{font-weight:700;}
#accEmailTitle{font-size:.875rem;opacity:.75;}

.account .tabs-wrap{
  display:flex;gap:16px;
  min-height:calc(100% - 66px);
}
.vtabs{
  flex:0 0 180px;border-right:1px solid var(--stroke);
  background:#0e2324;padding:10px;
  display:flex;flex-direction:column;gap:6px;
}
.vtab{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:10px;cursor:pointer;
  background:transparent;color:var(--text);
  border:1px solid transparent;text-align:left;
}
.vtab:hover{background:#0f2a2c;border-color:var(--stroke);}
.vtab.active{
  background:#113133;border-color:#1a3f41;font-weight:700;
}
.vpanels{flex:1;padding:14px;overflow:auto;}
.vpanel{display:none;}
.vpanel.show{display:block;}

.avatar-wrap{
  width:72px;height:72px;border-radius:50%;overflow:hidden;
  background:#0c191a;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.06);cursor:pointer;
}
.avatar-img-lg{width:72px;height:72px;border-radius:50%;object-fit:cover}
.profile-initials{
  width:72px;height:72px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;
  background:#18f08b;color:#0c1f20;
}
.account .form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
@media (max-width:1024px){
  .account .form-grid{grid-template-columns:1fr;}
}
.account .form-actions{
  display:flex;flex-wrap:wrap;gap:18px;margin-top:8px;
}
.account .form-actions .btn{min-width:140px;}
#accPhoto,label[for="accPhoto"]{display:none !important;}
.account-head .avatar-wrap::after{
  content:"Clique na foto para alterar";
  display:block;font-size:.85rem;opacity:.7;margin-top:6px;
}
.list{padding:8px;}
.list.empty,.list.muted{opacity:.75;}
.card-row{
  display:grid;grid-template-columns:1fr auto;gap:8px;
  border:1px solid var(--stroke);background:rgba(0,0,0,0.25);border-radius:14px;
  padding:12px 14px;margin-bottom:10px;
}
.card-row .title{font-weight:700;}
.badge{
  padding:4px 8px;border-radius:999px;font-size:.78rem;background:#123;
}
.badge.ok{background:#133d2d;color:#9ff0c9;}
.badge.wait{background:#3a2d12;color:#ffd699;}
.kv{display:flex;gap:10px;flex-wrap:wrap;font-size:.9rem;opacity:.9;}
.kv span{opacity:.8;}

.cart .cart-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--stroke);
}
.cart .coupon{
  display:flex;gap:8px;padding:14px 18px;border-bottom:1px solid var(--stroke);
}
.cart .coupon input{
  flex:1;height:42px;border-radius:10px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,0.3);color:#fff;padding:0 12px;
  transition:border-color 0.2s ease,box-shadow 0.2s ease;
}
.cart .coupon input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 2px rgba(0, 230, 118, 0.2);}
.cart .cart-items{
  flex:1;overflow:auto;padding:10px 8px 0 8px;
}
.cart .cart-items.empty{
  color:#8bb;padding:28px 18px;
}
.cart-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid rgba(255, 255, 255, 0.08);
}
.cart-item .title{
  flex:1;font-weight:600;line-height:1.25;word-break:break-word;
  font-family: "Poppins", sans-serif;
}
.cart-item .title .ci-line{display:block;}
.cart-item .title .ci-provider{opacity:.95;}
.cart-item .title .ci-product{opacity:1;}
.cart-item .title .ci-dest{margin-top:2px;font-weight:500;opacity:.9;font-size:.92em;}
.cart-item .price{
  margin-left:auto;min-width:110px;text-align:right;opacity:1;
  color: var(--brand);
  font-weight: 700;
}
.cart-item .qty{
  display:flex;align-items:center;gap:8px;margin-left:16px;
}
.cart-item .btn-ghost.sm{padding:6px 8px;}
.cart-item [data-remove] {
  color: var(--muted);
  transition: all 0.3s ease;
}
.cart-item [data-remove]:hover {
  color: #ff4d4d;
  border-color: #ff4d4d;
  background: rgba(255, 77, 77, 0.12);
}
.cart .cart-footer{
  border-top:1px solid var(--stroke);padding:14px 18px;
}
.cart .totals .trow{
  display:flex;justify-content:space-between;margin:6px 0;
}
.cart .totals .grand {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
}
.cart .totals .grand strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--brand);
  text-shadow: 0 0 12px rgba(0, 230, 118, 0.4);
}
#checkoutBtn{
  margin-top:10px;height:46px;border-radius:12px;
}


/* ===================== PROMO BAR / BOTÃO COPIAR CUPOM ===================== */
#promoBar{
  display:flex;align-items:center;justify-content:center;
  gap:8px;background:#002b29;color:#fff;
  padding:6px 12px;
  font-size:.95rem;font-weight:500;
}
#promoBar strong{color:#00ff9c;}
#copyCoupon{
  background:#00ff9c;border:none;border-radius:6px;
  color:#000;font-weight:600;
  padding:4px 12px;
  cursor:pointer;
  transition:background .2s,transform .1s;
}
#copyCoupon:hover{background:#33ffb0;}
#copyCoupon:active{transform:scale(.97);}


/* ========================================================= */
/* MODAL DE PRODUTOS DO PROVIDER (CONSOLIDADO E PREMIUM)     */
/* ========================================================= */


/* Aumentamos a distância (de 40px para 80px) e diminuímos a escala inicial (0.90) para o pulo ser maior */
@keyframes modalEnter {
  0% {
    opacity: 0;
    transform: translateY(80px) scale(0.90);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* 1. O Dialog Raiz (Invisível, serve só de container) */
#providerModal.provider-modal {
  position: fixed;
  inset: 0;
  padding-top: 4vh;
  border: none !important;
  background: transparent !important; /* Mata o fundo padrão do navegador */
  z-index: 9999;
}

/* Controle de Exibição do Dialog Nativo */
#providerModal.provider-modal:not([open]) { 
  display: none !important; 
}
#providerModal.provider-modal[open] { 
  display: flex !important; 
  align-items: flex-start;
  justify-content: center;
}

/* 2. O Fundo Desfocado da Tela (Backdrop) */
#providerModal.provider-modal::backdrop {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* 3. O Painel Interno (A Janela Flutuante Premium) */
.provider-modal-panel {
  background: rgba(18, 22, 32, 0.85) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.8);
  color: #fff;
  width: min(100%, 1080px);
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


/* header do modal */
.provider-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px 16px;
  padding:16px;
  border-bottom:1px solid rgba(0,255,170,0.12);
  flex-wrap:nowrap;
  position:relative;
}
.provider-modal-left{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}
.provider-logo-bubble{
  background:rgba(0,0,0,0.5);
  border:1px solid rgba(34,211,156,0.6);
  border-radius:8px;
  min-width:44px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 16px rgba(34,211,156,0.4);
}
.provider-logo-bubble img{
  max-width:32px;
  max-height:32px;
  object-fit:contain;
}
.provider-header-texts{
  display:flex;
  flex-direction:column;
  font-size:.8rem;
  color:#fff;
  line-height:1.3;
}
.provider-header-title{
  font-weight:600;
  color:#fff;
  font-size:.8rem;
}
.provider-header-sub{
  color:#ccc;
  font-size:.8rem;
}
.provider-modal-right{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-left:auto;
  flex-wrap:nowrap;
}
.fav-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
  padding:6px 14px;
  min-height:32px;
  border-radius:999px;
  font-weight:600;
  font-size:.8rem;
  line-height:1;
  background:rgba(34,211,156,.12);
  color:#7df1cc;
  border:1px solid rgba(34,211,156,.4);
  cursor:pointer;
}
.fav-chip.on{
  background:#22d39c;
  color:#0a1717;
  border-color:#22d39c;
}
.close-x{
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  border-radius:.5rem;
  width:32px;
  height:32px;
  font-size:.9rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.close-x:hover{
  background:rgba(255,255,255,.08);
  box-shadow:0 0 12px rgba(255,255,255,.4);
}

/* área rolável com os produtos */
.provider-products-scroll-area{
  flex:1 1 auto;
  overflow-y:auto;
  padding:20px;
  background:radial-gradient(circle at 100% 0%,rgba(0,255,135,0.06) 0%,rgba(0,0,0,0) 60%);
  scrollbar-color:rgba(0,255,135,.4) transparent;
  scrollbar-width:thin;
}
.provider-products-scroll-area::-webkit-scrollbar{width:8px;}
.provider-products-scroll-area::-webkit-scrollbar-track{background:transparent;}
.provider-products-scroll-area::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(0,255,135,.5),rgba(0,255,135,.2));
  border-radius:4px;
}
.provider-products-scroll-area::-webkit-scrollbar-thumb:hover{
  background:rgba(0,255,135,.7);
}

/* grid de cards dentro do modal */
#providerProductsGrid.provider-products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:1rem 1rem;
}

/* card de produto dentro do modal provider */
.provider-products-grid .card.product{
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding:1rem;
  color:#fff;
  display:flex; flex-direction:column; min-width:0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.provider-products-grid .card.product:hover{
  transform: translateY(-4px);
  border-color: rgba(0, 230, 118, 0.3);
  box-shadow: 0 16px 40px rgba(0, 230, 118, 0.15);
}
.provider-products-grid .thumb{
  background:rgba(0,0,0,.4);
  border-radius:.5rem;
  border:1px solid rgba(255,255,255,.08);
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.75rem;
  overflow:hidden;
}
.provider-products-grid .thumb img{
  max-width:100%;
  max-height:100px;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.8));
}
.provider-products-grid .card-body{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  min-width:0;
  text-align:left;
}
.provider-products-grid .card-title{
  color:#fff;
  font-weight:600;
  font-size:.95rem;
  line-height:1.3;
  word-break:break-word;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.provider-products-grid .muted.small{
  font-size:.8rem;
  color:rgba(255,255,255,.6);
  line-height:1.3;
}
.provider-products-grid .price-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.5rem;
  font-size:.9rem;
}
.provider-products-grid .price-row .price-old{
  text-decoration:line-through;
  color:rgba(255,255,255,.45);
  font-size:.8rem;
}
.provider-products-grid .price-row .price{
  color:#22d39c;
  font-weight:600;
  font-size:1rem;
  line-height:1.2;
}
.provider-products-grid .row.gap{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.provider-products-grid .empty-state{
  grid-column:1 / -1;
  text-align:center;
  color:rgba(255,255,255,.7);
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.1);
  border-radius:.75rem;
  padding:2rem 1rem;
  font-size:.9rem;
  line-height:1.4;
}
.provider-products-grid .card.skeleton{
  background:rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:.75rem;
  padding:1rem;
  position:relative;
  overflow:hidden;
  min-height:180px;
}
.provider-products-grid .card.skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.06) 50%,transparent 100%);
  transform:translateX(-100%);
  animation:provider-skel-move 1.15s infinite;
}
.provider-products-grid .card.skeleton .thumb{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:.5rem;
  height:120px;
  margin-bottom:.75rem;
}
.provider-products-grid .card.skeleton .skeleton-line{
  height:.8rem;
  width:70%;
  background:rgba(255,255,255,.08);
  border-radius:.4rem;
}

/* ===================== MODAL DETALHES DO PRODUTO ===================== */

#productDetailsModal{
  background: transparent !important;
  border: none !important;
  padding: 0;
}
#productDetailsModal::backdrop{
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.pdm{
  background: rgba(18, 22, 32, 0.85) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.8);
  animation: modalEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  max-width: 600px;
  width: 90%;
  margin: 5vh auto;
  padding: 2rem;
  color: var(--text);
  word-break: break-word;
}
.pdm__topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:1rem;
}
.pdm__title{
  color: var(--brand-teal);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  line-height:1.3;
}
.pdm__close-btn{
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 8px;
  width:32px;
  height:32px;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor:pointer;
  transition: all 0.2s ease;
}
.pdm__close-btn:hover{
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
}
.pdm__logo{
  display:flex;
  justify-content:center;
  margin-bottom:1rem;
}
.pdm__logo img{
  max-width:140px;
  border-radius:12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.3);
  padding:.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.pdm__section{
  background:rgba(255,255,255,0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius:12px;
  padding:1rem 1.25rem;
  margin-bottom:1rem;
  color:var(--text);
  max-height:30vh;
  overflow-y:auto;
  overflow-x:hidden;
}
.pdm__section h3{
  color: var(--brand-teal);
  font-size:.95rem;
  font-weight:600;
  margin-bottom:.5rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.pdm__section p{
  font-size:.9rem;
  line-height:1.5;
  color: var(--text);
  white-space:pre-line; /* respeita \n vindo do Firestore */
}

/* garante que nada transborde horizontal no modal de detalhes */
#productDetailsModal *{
  max-width:100%;
  word-break:break-word;
  white-space:normal;
}
#termsText,
#howtoText{
  white-space:pre-line;
}



/* === Ajuste Drawer Perfil === */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  padding: 10px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field.full {
  grid-column: 1 / -1;
}

.field .label {
  font-size: 0.85rem;
  color: #9fb7b8;
  font-weight: 500;
}

.field input,
.field select {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  color: #fff;
  padding: 8px 10px;
  font-size: 0.9rem;
  transition:border-color 0.2s ease,box-shadow 0.2s ease;
}
.field input:focus,.field select:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 2px rgba(0, 230, 118, 0.2);}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

.profile-actions button {
  min-width: 140px;
}

/* === Correção do modal de produtos: camada e fechamento === */

/* fundo do <dialog> (backdrop real, nativo do elemento) */
.provider-modal::backdrop {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
}

/* evita que o container interno capture cliques fora da área do painel */
.provider-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4vh;
  border: none;
  background: transparent; /* o backdrop já cuida do escurecimento */
  z-index: 9999;
}

.provider-modal-panel {
  position: relative;
  background: radial-gradient(ellipse at top, rgba(34,211,156,0.1), rgba(0,0,0,0.95));
  border: 1px solid rgba(34,211,156,0.25);
  border-radius: 12px;
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
  color: #fff;
  width: min(900px, 90%);
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 10000;
}

/* header fixo dentro do painel */
.provider-modal-header {
  position: sticky;
  top: 0;
  z-index: 10001;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(5px);
}

/* botão de fechar X */
.close-x {
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(0,0,0,.5);
  border-radius: 6px;
  min-width: 36px;
  min-height: 36px;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all .2s;
}
.close-x:hover {
  background: rgba(255,255,255,.1);
  box-shadow: 0 0 10px rgba(255,255,255,.4);
}

/* botão favorito não quebrar linha */
.fav-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  min-height: 36px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.9rem;
  border: 1px solid rgba(34,211,156,0.5);
  color: #22d39c;
  background: rgba(0,0,0,0.3);
  white-space: nowrap;
  gap: 8px;
}
.fav-chip.on {
  background: #22d39c;
  color: #0b1919;
}



/* header ocupa toda a largura */
.provider-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px !important;
}

/* área de listagem usa toda a largura e altura */
.provider-products-scroll-area{
  width:100% !important;
  max-height: min(72vh, calc(100vh - 220px)) !important;
  padding: 8px 14px 18px !important;
  overflow:auto !important;
}

/* grid 3 colunas (desktop), 2 (tablet), 1 (mobile) */
.provider-products-grid{
  display:grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  width:100% !important;
}
@media (max-width: 1100px){
  .provider-products-grid{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 680px){
  .provider-products-grid{ grid-template-columns: 1fr !important; }
}

/* botão favorito não quebrar e tamanho consistente */
.fav-chip{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  min-height:36px;
  padding:0 14px;
}

/* botão X clicável e visível */
.close-x{
  min-width:36px; min-height:36px;
  display:inline-flex; align-items:center; justify-content:center;
}



.account-actions-row {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 1rem;
}

#changePasswordBtn {
  flex: 0 0 auto;
  min-width: 140px;
}

#saveProfileBtn {
  flex: 0 0 auto;
  min-width: 180px;
  margin-left: auto; /* empurra pro canto direito */
}

#logoutBtn {
  width: 100%;
  margin-top: 1rem;
  background: rgba(255, 80, 80, 0.1);
  border: 1px solid rgba(255, 80, 80, 0.2);
  color: #ff9999;
  border-radius: 8px;
  padding: .75rem 1rem;
  text-align: center;
  transition: all 0.2s ease;
}
#logoutBtn:hover {
  background: rgba(255, 80, 80, 0.15);
  border-color: rgba(255, 80, 80, 0.3);
  color: #ffb3b3;
}


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

.site-footer {
  background: radial-gradient(circle at 20% 0%, rgba(0,255,128,0.07) 0%, rgba(0,0,0,0) 70%);
  border-top: 1px solid rgba(0,255,128,0.15);
  padding: 32px 16px 24px;
  color: #e9fef1;
  font-size: 14px;
  line-height: 1.4;
}

.footer-top {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 32px;
}

.footer-logo {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  color: #00ff95;
  margin-bottom: 8px;
}
.footer-logo .brand-dot {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #00ff95;
  box-shadow: 0 0 10px #00ff95;
  margin-right: 8px;
}
.footer-logo .brand-name {
  color: #00ff95;
  text-shadow: 0 0 8px rgba(0,255,149,0.4);
}

.footer-desc {
  color: #93a59a;
  font-size: 13px;
  line-height: 1.5;
  max-width: 320px;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 24px 32px;
}

.footer-col h4 {
  color: #e9fef1;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
  letter-spacing: 0.3px;
}

.footer-link {
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 8px;
  color: #9fb5aa;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: color .15s, text-shadow .15s;
}

.footer-link::before {
  content: "•";
  color: #00ff95;
  font-size: 16px;
  margin-right: 6px;
  line-height: 1;
  opacity: 0.8;
}

.footer-link:hover {
  color: #00ff95;
  text-shadow: 0 0 8px rgba(0,255,149,0.5);
}


.footer-bottom {
  max-width: 1280px;
  margin: 32px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  color: #5d6a64;
  font-size: 12px;
  line-height: 1.4;
}

/* mobile tweak */
@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    text-align: left;
  }
}


/* ===== Legal modal (Termos / Privacidade etc) ===== */

.legal-modal::backdrop {
  background: rgba(0,0,0,.7);
}

.legal-modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 90vw;
}

.legal-modal-inner {
  background: #0f1916;
  border: 1px solid rgba(0,255,128,0.25);
  box-shadow: 0 30px 120px rgba(0,0,0,.9), 0 0 30px rgba(0,255,128,.2) inset;
  border-radius: 8px;
  max-width: 800px;
  max-height: 80vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  color: #e9fef1;
  overflow: hidden;
}

.legal-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: radial-gradient(circle at 20% 0%, rgba(0,255,128,.07) 0%, rgba(0,0,0,0) 70%);
}
.legal-modal-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #00ff95;
  text-shadow: 0 0 8px rgba(0,255,149,.5);
}
.close-btn {
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
}
.close-btn:hover {
  background: rgba(255,255,255,.07);
}

.legal-modal-body {
  padding: 20px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.5;
  color: #cfe8dc;
}
.legal-modal-body h3 {
  color: #00ff95;
  font-size: 14px;
  margin: 16px 0 8px;
}
.legal-modal-body p {
  margin: 0 0 12px;
}
.legal-modal-body a {
  color: #00ff95;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==== SCROLLBAR GLOBAL (dark theme SKINCARDS) ==== */

/* Para Chrome, Edge e Safari */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00ff7a 0%, #00cc66 100%);
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(0, 255, 120, 0.4);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #00ff9d 0%, #00e67a 100%);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #00ff7a rgba(0, 0, 0, 0.4);
}

/* ==== Scrollbar personalizada para modais ==== */
.legal-modal-body::-webkit-scrollbar {
  width: 8px;
}

.legal-modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 120, 0.5);
  border-radius: 4px;
}

.legal-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 120, 0.8);
}

.legal-modal-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.5);
}

/* === Overlay escurecido por trás do painel legal === */
#legalModalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); /* um pouco mais escuro que antes */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;            /* você já deve trocar pra flex quando abrir */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* === Cartão principal do conteúdo legal === */
#legalModalContent {
  background: radial-gradient(circle at 20% 20%, rgba(0, 30, 15, 0.6) 0%, rgba(0, 0, 0, 0.8) 70%);
  border: 1px solid rgba(0, 255, 120, 0.18);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.9),
    0 0 25px rgba(0, 255, 120, 0.15);
  border-radius: 10px;
  width: min(900px, 90vw);
  max-height: 80vh;
  padding: 24px 24px 16px;
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* botão X */
#legalCloseBtn {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: all .15s;
}

#legalCloseBtn:hover {
  background: rgba(0,255,120,0.15);
  border-color: rgba(0,255,120,0.5);
  box-shadow: 0 0 10px rgba(0,255,120,0.6);
}

/* área rolável do texto */
.legal-modal-body {
  margin-top: 40px;          /* deixa o X respirar */
  padding-right: 8px;        /* espaço pro scrollbar */
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(80vh - 56px);
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
}

/* Efeito hover sutil: apenas itálico e leve opacidade */
.legal-section:hover {
  background: rgba(255, 255, 255, 0.03);
  transform: scale(1.002);
}

.legal-section:hover p,
.legal-section:hover li {
  font-style: italic;
  opacity: 0.95;
  transition: all 0.2s ease;
}


/* HERO AREA / CARROSSEL DINÂMICO */

#heroArea {
  position: relative;
  min-height: 260px;
  border: 1px solid rgba(0,255,170,.08);
  border-radius: 6px;
  background: rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  margin-bottom: 32px;
  overflow: hidden;
}

.hero-banner-outer {
  width: 100%;
  min-height: 260px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

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

  /* fallback caso não tenha imagem */
  background-color: rgba(0,0,0,.4);
  padding: 24px;
}

.glass-card {
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0,255,170,.2);
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0,0,0,.8);
  max-width: 480px;
  width: 100%;
  padding: 24px;
  color: #fff;
  text-align: center;
}

.hero-tag-row {
  margin-bottom: 12px;
}

.hero-tag-btn {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  padding: 6px 10px;
  border-radius: 4px;
  background: rgba(0,255,170,.15);
  border: 1px solid rgba(0,255,170,.4);
  color: #00ffaa;
  text-decoration: none;
}

.hero-title {
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.2;
}

.hero-sub {
  font-size: 14px;
  color: rgba(255,255,255,.9);
  margin: 0 0 20px;
  line-height: 1.4;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.hero-cta-btn {
  display: inline-block;
  background: #00ff88;
  color: #000;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  border-radius: 6px;
  padding: 10px 16px;
  text-decoration: none;
  border: 0;
  box-shadow: 0 8px 24px rgba(0,255,136,.4);
  transition: all .15s;
}
.hero-cta-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 10px 28px rgba(0,255,136,.55);
}

.hero-nav-arrows {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.hero-nav-btn {
  background: rgba(0,0,0,.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 4px;
  font-size: 14px;
  width: 32px;
  height: 32px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
}
.hero-nav-btn:hover {
  background: rgba(0,255,170,.15);
  border-color: rgba(0,255,170,.5);
  color: #00ff88;
}

/* estado de erro / vazio */
.hero-empty,
.hero-error {
  color: #ccc;
  font-size: 14px;
  text-align: center;
  padding: 24px;
}


/* separa o carrossel da navbar fixa */
.hero-wrapper {
  margin-top: 1rem; /* ~16px, ajusta se quiser mais respiro */
}

.main-header {
  position: sticky;
  top: 0;
  z-index: 1000; /* garante que fica sempre em cima do hero */
  background: radial-gradient(circle at top left, #0f1f1c 0%, #0a1211 60%) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}


.main-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: radial-gradient(circle at top left, #0f1f1c 0%, #0a1211 60%) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

/* Espaço entre a barra e o carrossel */
.hero-wrapper {
  margin-top: 1rem;
}


/* ===== CORREÇÃO TESTEIRA (HEADER SOBRE O HERO) ===== */

/* barra superior da promoção (permanece fixa no topo) */
.promo-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* header principal: começa logo abaixo da promo-bar */
.header {
  position: sticky;
  top: 40px; /* altura aproximada da promo-bar */
  z-index: 999;
  background: rgba(9, 27, 28, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--stroke);
}

.hero-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(15,18,17,0.95) 0%, rgba(15,18,17,0) 100%);
  z-index: 2;
  pointer-events: none;
}





/* ===== FIX: header colado no topo e sem “sombra” no hero ===== */
.promo-bar { display: none; }             /* se quiser manter a barra, remova esta linha */

.header,
.main-header {
  position: sticky;
  top: 0 !important;                      /* gruda no topo de verdade */
  z-index: 1000;
}

.hero-wrapper { 
  margin-top: 0 !important;               /* não deixa espaço entre header e carrossel */
}

.hero-wrapper::before { 
  display: none !important;               /* remove o gradiente que “come” o topo do hero */
}


/* ==== FIX FINAL: Header colado no topo + painéis alinhados ==== */

/* Header principal sempre no topo */
.header,
.main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 1000 !important;
  background: radial-gradient(circle at top left, #0f1f1c 0%, #0a1211 60%) !important;
  border-bottom: 1px solid var(--stroke);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

/* Remove o espaço extra do hero */
.hero-wrapper {
  margin-top: 88px !important; /* altura do header */
}
.hero-wrapper::before {
  display: none !important;
}

.hero-area {
  max-width: 1280px;
  margin: 24px auto 32px;
  padding: 0 16px;
}
.hero-wrapper {
  min-height: 300px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}

/* Painéis de perfil e carrinho descem abaixo do header fixo */
.account,
.cart {
  top: 88px !important; /* mesmo valor da margem do hero-wrapper */
  height: calc(100dvh - 88px) !important;
  z-index: 999;
}

/* Fundo escuro (scrim) inicia abaixo do header também */
.scrim {
  top: 88px !important;
}



.section.category-block {
  margin-top: 32px;
}

.category-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.15rem;        /* era menor — levemente maior */
  font-weight: 700;
  letter-spacing: .2px;
  margin: 28px 0 10px;       /* mais “respiro” acima e abaixo */
}

.category-title .cat-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.category-title .cat-label {
  line-height: 1.2;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* antes era min(150px, 45%) */
  gap: 16px;
  justify-content: center;
}


@media (min-width:480px){
  .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
  }
}



.fav-btn {
  background:none;
  border:0;
  color:#666;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  padding:4px 6px;
  min-width:28px;
  min-height:28px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.08);
  background-color:rgba(0,0,0,.4);
}

.fav-btn.on {
  color:#22d39c;
  border-color:rgba(0,255,128,.4);
  background-color:rgba(0,255,128,.07);
}

/* === Base do card (faltava) === */
.provider-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
  height: 220px;      /* controle visual */
  min-height: 220px;
  overflow: hidden;
}
.provider-card:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 230, 118, 0.15), 0 0 20px rgba(0, 229, 255, 0.1);
  border-color: rgba(0, 230, 118, 0.3);
}

/* Faixa do logo: tamanho fixo, nada de esticar */
.provider-logo{
  width: 100%;
  height: 120px;           /* faixa consistente para o logo */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  overflow: hidden;
}

/* O logo sempre “contain” dentro da faixa */
.provider-logo img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Em QUALQUER grade, garanta a mesma proporção */
.providers-grid .provider-card,
.category-grid  .provider-card{
  height: 220px;
  min-height: 220px;
}
.providers-grid .provider-card .provider-logo,
.category-grid  .provider-card .provider-logo{
  height: 120px;
}


.providers-grid,
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  justify-content: center;
}


.top-menu {
  display: flex;
  gap: 14px;
  align-items: center;
  white-space: nowrap;
}
.top-menu a {
  color: var(--text-weak, #cfd8dc);
  font-weight: 600;
  text-decoration: none;
  font-size: .92rem;
  opacity: .9;
}
.top-menu a:hover { opacity: 1; }


#providers {
  display: none;
}



/* ===== Submenu de Providers ===== */
.top-menu { display:flex; gap:16px; align-items:center; flex-wrap:wrap }
.top-menu .menu-item { position:relative; list-style:none }
.top-menu .menu-link {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px; font-weight:600;
  color:#d7fbe8; text-decoration:none;
}
.top-menu .menu-link:hover { background:rgba(255,255,255,0.06) }

.top-menu .submenu {
  position:absolute; top:100%; left:0; z-index:20;
  min-width:240px; padding:8px; margin-top:8px;
  background:rgba(17,25,23,0.98); border:1px solid rgba(255,255,255,0.06);
  border-radius:12px; box-shadow:0 10px 32px rgba(0,0,0,0.4);
  display:none; grid-template-columns:1fr; gap:6px;
}
.top-menu .submenu.open { display:grid }
.top-menu .submenu a {
  display:flex; align-items:center; gap:10px;
  padding:8px; border-radius:8px; color:#d7fbe8; text-decoration:none;
}
.top-menu .submenu a:hover { background:rgba(255,255,255,0.06) }
.top-menu .submenu img {
  width:22px; height:22px; object-fit:contain; border-radius:4px;
  background:#0e1715;
}

/* mobile: o submenu ocupa toda a largura do item */
@media (max-width: 900px) {
  .top-menu { overflow-x:auto }
  .top-menu .submenu { position:static; margin-top:6px }
}



/* Barra principal de categorias (menu topo) */
#topMenu { white-space: nowrap; overflow-x: auto; }
#topMenu .top-menu { display: inline-flex; gap: 12px; }
#topMenu .menu-link { font-size: 14px; line-height: 1; padding: 10px 12px; }
.submenu { max-width: 100vw; overflow-x: auto; }


#topMenu .topmenu-item {
  font-size: 0.95rem;     /* menor que estava */
  font-weight: 600;
  color: var(--textPrimary, #e8f5ee);
  opacity: 0.9;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  transition: 150ms ease;
}
#topMenu .topmenu-item:hover {
  background: rgba(255,255,255,0.06);
  opacity: 1;
}

/* Submenu (marcas/providers) */
#topSubmenu {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0 14px;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
  margin-bottom: 14px;
}

#topSubmenu .submenu-item {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--textSecondary, #cfe9dd);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  transition: 150ms ease;
}
#topSubmenu .submenu-item:hover {
  background: rgba(255,255,255,0.08);
  color: var(--textPrimary, #e8f5ee);
}

#topSubmenu .submenu-empty {
  font-size: 0.9rem;
  opacity: .7;
}



/* Header pode quebrar em linhas para o menu ocupar uma faixa inteira */
.header-inner { 
  display:flex; 
  align-items:center; 
  gap:16px; 
  flex-wrap: wrap;        /* permite jogar o menu pra linha de baixo */
}

/* O contêiner do menu ocupa 100% da largura numa nova linha */
#topMenu {
  order: 2;               /* empurra para a segunda linha do header */
  flex: 1 1 100%;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  white-space: nowrap;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 8px;
}

/* Itens do menu com fonte menor */
#topMenu .topmenu-item,
.top-menu .menu-link {
  font-size: .90rem;      /* ↓ menor que antes */
  font-weight: 600;
}

/* Evita quebra dos itens; deixa rolar horizontal se precisar */
.top-menu { 
  display:flex; 
  gap:14px; 
  align-items:center; 
  white-space:nowrap; 
  overflow-x:auto;
}


/* ===== HEADER – manter tudo em uma linha ===== */

/* a linha do header não deve quebrar */
header .header-inner,
header .header-row,
#siteHeader,
#siteHeader .row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;           /* <- impede a segunda linha */
}

/* logo sempre fixo à esquerda */
#brand, .brand, .logo {
  flex: 0 0 auto;
}

/* menu central ocupa o meio e NÃO quebra */
#topMenu {
  flex: 1 1 auto;              /* ocupa o espaço central */
  overflow: hidden;            /* esconde sobra (sem barra) */
}
#topMenu .top-menu {
  display: flex;
  align-items: center;
  justify-content: center;     /* centraliza os itens */
  gap: 14px;
  flex-wrap: nowrap;           /* <- impede quebra do menu */
  white-space: nowrap;
}

/* fonte um pouco menor p/ caber em uma linha */
#topMenu .menu-link {
  font-size: 14px;
  line-height: 1;
  padding: 8px 10px;
}

/* busca + ícones à direita, sem grudar no logo */
.header-right,
.top-actions,
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;              /* não cresce, fica à direita */
}

/* campo de busca com largura razoável */
.searchbar, .search-box, #searchBar {
  flex: 0 1 420px;             /* encolhe se precisar */
  min-width: 260px;
}

/* fallback: se a tela for muito estreita, permite rolar o menu na horizontal */
@media (max-width: 1200px) {
  #topMenu { overflow-x: auto; }
  #topMenu .top-menu { justify-content: flex-start; }
}


/* === HEADER AJUSTADO: MENU ENTRE LOGO E AVATAR === */

/* Linha do topo — tudo em uma linha */
header .header-inner,
#siteHeader,
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 0 16px;
  height: 72px;
}

/* LOGO fixo à esquerda */
#brand, .brand, .logo {
  flex: 0 0 auto;
}

/* MENU centralizado entre logo e avatar */
#topMenu {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#topMenu .top-menu {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Links do menu */
#topMenu .menu-link {
  font-size: 13px;           /* Fonte ligeiramente menor */
  font-weight: 600;
  text-transform: none;
  color: #f5f5f5;
  transition: color .2s ease, transform .2s ease;
  padding: 6px 8px;
}

#topMenu .menu-link:hover {
  color: #00ff90;
  transform: translateY(-1px);
}

/* Área da direita: busca + avatar + carrinho */
.header-right,
.top-actions,
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

/* Busca com tamanho fixo e discreto */
.searchbar, .search-box, #searchBar {
  flex: 0 1 300px;
  min-width: 240px;
  max-width: 360px;
}

/* Quando a tela for menor, o menu fica rolável horizontalmente */
@media (max-width: 1100px) {
  #topMenu {
    overflow-x: auto;
    justify-content: flex-start;
  }
  #topMenu .top-menu {
    justify-content: flex-start;
  }
}



/* === Força a ordem dos blocos no header (logo | menu | ações) === */
header .header-inner,
#siteHeader,
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

/* LOGO à esquerda */
#brand, .brand, .logo { order: 0; flex: 0 0 auto; }

/* MENU no centro */
#topMenu { 
  order: 1;
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#topMenu .top-menu {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-wrap: nowrap;
}

/* AÇÕES à direita (busca + avatar + carrinho) */
.header-right, .header-actions, .top-actions, #headerRight {
  order: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

/* Tamanho do menu um pouco menor pra caber numa linha */
#topMenu .menu-link {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 8px;
}

/* Busca com largura fixa (não empurra o menu) */
.searchbar, .search-box, #searchBar {
  flex: 0 1 300px;
  min-width: 240px;
  max-width: 360px;
}

/* Se faltar espaço, o menu rola horizontalmente */
@media (max-width: 1100px) {
  #topMenu { overflow-x: auto; justify-content: flex-start; }
  #topMenu .top-menu { justify-content: flex-start; }
}


/* === AJUSTE FINO: Reduzir campo de busca === */
.searchbar, 
.search-box, 
#searchBar {
  flex:150px !important;  /* antes 300px → reduzido */
  min-width: 150px !important;
  max-width: 150px !important;
}




/* Espaço maior entre o nome da categoria e os cards */
.section-title, .category-title, .categoria-titulo, .categoriaCabecalho {
  margin-bottom: 18px !important;
}

/* Chips (fixo/variável) */
.chip { padding:6px 10px; border-radius:10px; background:#0b2821; color:#cfe; border:1px solid #1a6; cursor:pointer; }
.chip.on { background:#0d3; color:#012; border-color:#0d3; font-weight:600; }





/* ajustes visuais do valor variável */
.variable-box {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.variable-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.variable-box input[type="range"] {
  flex: 1;
  accent-color: #22d39c;
  cursor: pointer;
}

.variable-box input[type="number"] {
  width: 80px;
  text-align: center;
  border: 1px solid #22d39c;
  background: #0a1c1b;
  color: #22d39c;
  border-radius: 6px;
  padding: 4px 6px;
}

.variable-box .var-hint {
  font-size: 0.8rem;
  color: #22d39c;
}


.variable-box {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.variable-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.variable-box input[type="range"] {
  flex: 1;
  accent-color: #22d39c;
  cursor: pointer;
}

.variable-box input[type="number"] {
  width: 80px;
  text-align: center;
  border: 1px solid #22d39c;
  background: #0a1c1b;
  color: #22d39c;
  border-radius: 6px;
  padding: 4px 6px;
}

.variable-box .var-hint {
  font-size: 0.8rem;
  color: #22d39c;
}


/* área onde o PinVariable injeta os elementos */
[data-price-area] .variable-box{
  display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 12px;
}
.variable-box .var-btn{
  padding:6px 10px; border:1px solid #22d39c; border-radius:8px;
  background:#0f1514; color:#cfe; cursor:pointer;
}
.variable-box .var-btn.on{ background:#22d39c; color:#000; }
.variable-box .var-slider{ display:flex; align-items:center; gap:8px; }
.variable-box input[type="range"]{ width:180px; }


[data-price-area] .variable-box{
  display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 12px;
}
.variable-box .var-btn{
  padding:6px 10px; border:1px solid #22d39c; border-radius:8px;
  background:#0f1514; color:#cfe; cursor:pointer;
}
.variable-box .var-btn.on{ background:#22d39c; color:#000; }
.variable-box .var-slider{ display:flex; align-items:center; gap:8px; }
.variable-box input[type="range"]{ width:180px; }


/* === FIX VISUAL PIN-VARIABLE === */
[data-price-area] .variable-box {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 10px 0 12px !important;
}
.variable-box .var-btn {
  padding: 6px 10px;
  border: 1px solid #22d39c;
  border-radius: 8px;
  background: #0f1514;
  color: #cfe;
  cursor: pointer;
}
.variable-box .var-btn.on {
  background: #22d39c;
  color: #000;
}
.variable-box input[type="range"] {
  width: 180px;
}




/* === Telco/TV Wizard UI (melhorado) === */
.wiz-modal::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
}

.wiz-modal {
  border: none;
  padding: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.wiz-panel {
  background: radial-gradient(circle at 20% 10%, rgba(0,255,128,.08), rgba(0,0,0,.9));
  border: 1px solid rgba(0,255,128,.25);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.8);
  color: #e9fff0;
  width: min(640px, 94vw);
  max-width: 640px;
  padding: 24px 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: popIn .25s ease;
}
@keyframes popIn {
  from { transform: scale(.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.wiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(0,255,128,.15);
  padding-bottom: 10px;
}
.wiz-header .logo {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  object-fit: contain;
}
.wiz-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #00ff9a;
  flex: 1;
}
.wiz-header button {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.wiz-header button:hover {
  background: rgba(255,255,255,.08);
}

.wiz-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 4px;
}
.wiz-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: end;
}
.wiz-row.double {
  grid-template-columns: 90px 1fr 1fr;
}
.wiz-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wiz-field label {
  font-size: 0.85rem;
  color: #a9d5b5;
  font-weight: 600;
}
.wiz-field input {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: all .2s ease;
}
.wiz-field input:focus {
  border-color: #00ff99;
  box-shadow: 0 0 0 3px rgba(0,255,136,.15);
}
.wiz-field input.error {
  border-color: #ff3b3b;
  background: rgba(255,0,0,.08);
}
.wiz-error {
  color: #ff5555;
  font-size: 0.8rem;
  display: none;
}
.wiz-error.show {
  display: block;
}

.wiz-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.wiz-btn {
  background: #00ff88;
  color: #012a1f;
  font-weight: 700;
  border: 0;
  border-radius: 10px;
  padding: 12px 18px;
  cursor: pointer;
  transition: .2s;
}
.wiz-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.wiz-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* máscara / input alinhado */
input.ddd { max-width: 70px; text-align: center; }
input.tel { max-width: 150px; }
input.cpf  { max-width: 220px; }

/* modo TV */
.wiz-row.tv {
  grid-template-columns: 1fr;
}
.wiz-row.tv input {
  width: 100%;
}

/* responsivo */
@media (max-width: 580px){
  .wiz-panel{ padding:20px; }
  .wiz-row.double { grid-template-columns: 1fr 1fr; }
}



/* Polimento modal telco */
.skin-form__row{display:flex;gap:12px;margin-bottom:10px}
.skin-form__col{flex:1;min-width:140px}
.skin-input{width:100%;background:#091617;border:1px solid rgba(0,255,128,.14);color:#cfe7e7;border-radius:10px;padding:10px 12px;outline:none}
.skin-input:focus{border-color:#26d07c;box-shadow:0 0 0 2px rgba(38,208,124,.15)}
.skin-cta{margin-top:12px;text-align:center}
.skin-btn{background:#26d07c;border:0;color:#052015;padding:10px 18px;border-radius:10px;font-weight:700;cursor:pointer}
.skin-btn:disabled{opacity:.45;cursor:not-allowed}
.skin-help{display:block;margin-top:6px}




.section-telco .providers-grid,
.section-tv .providers-grid {
  justify-content: flex-start;
}

@media (min-width: 1200px) {
  .section-telco .providers-grid,
  .section-tv .providers-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}


.provider-card img.is-fallback {
  opacity: 0.4;
  object-fit: contain;
  filter: grayscale(1);
}



/* ===========================
   MODAL LOGIN – SKINCARDS
   =========================== */

/* Backdrop */
#loginModal::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Dialog base */
#loginModal {
  background: transparent !important;
  border: none;
  padding: 0;
}

/* Animação de entrada */
@keyframes loginModalFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#loginModal .modal-content {
  width: 420px;
  max-width: 90vw;
  background: rgba(18, 22, 32, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px 28px 24px;
  color: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
  animation: loginModalFadeUp 0.18s ease-out;
}

/* Cabeçalho */
#loginModal .modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

#loginModal .modal-head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
}

#loginClose {
  background: #112727;
  border-radius: 8px;
  padding: 6px;
}

/* texto secundário */
#loginModal .muted {
  color: #8fa9aa;
  font-size: 14px;
  margin-bottom: 18px;
}

/* Botões sociais (layout) */
.login-social {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.login-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.login-btn__icon svg {
  width: 18px;
  height: 18px;
}

/* Google */
.login-btn--google {
  background: #00ff84;
  color: #000;
  border: none;
  box-shadow: 0 0 10px rgba(0, 255, 132, 0.5);
}

.login-btn--google:hover {
  background: #00e676;
  box-shadow: 0 0 14px rgba(0, 255, 132, 0.8);
}

/* Apple */
.login-btn--apple {
  border: 1px solid #2d4d4d;
  background: #112727;
  color: #e7f0f1;
}

.login-btn--apple:hover {
  border-color: #3c6767;
  background: #132c2c;
}

/* Divider "ou" */
#loginModal .divider {
  margin: 6px 0 18px;
  text-align: center;
  position: relative;
  font-size: 12px;
  color: #6f8f90;
}

#loginModal .divider::before,
#loginModal .divider::after {
  content: "";
  height: 1px;
  width: 40%;
  background: rgba(255, 255, 255, .08);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#loginModal .divider::before {
  left: 0;
}

#loginModal .divider::after {
  right: 0;
}

/* Form */
#emailLoginForm .field {
  margin-bottom: 12px;
}

#emailLoginForm .label {
  font-size: 13px;
  color: #a1bcbc;
}

#emailLoginForm input {
  background: #0a1415;
  border: 1px solid #1b3232;
  padding: 11px 13px;
  width: 100%;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
}

#emailLoginForm input::placeholder {
  color: #556869;
}

#emailLoginForm input:focus {
  border-color: #00ff84;
  outline: none;
  box-shadow: 0 0 0 1px rgba(0, 255, 132, 0.35);
}

/* Botão Entrar com e-mail */
#emailSubmitBtn {
  width: 100%;
  margin-top: 4px;
  background: linear-gradient(135deg, var(--brand), var(--brand-teal)) !important;
  color: #041014 !important;
  border-radius: 12px;
  padding: 11px 14px;
  font-weight: 800;
  font-size: 15px;
  border: none;
  box-shadow: 0 8px 24px rgba(0, 255, 136, 0.25);
}

#emailSubmitBtn:hover:not(:disabled) {
  filter: brightness(1.1);
}

#emailSubmitBtn:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

/* Linha de ações (esqueci / criar conta) */
#loginModal .row {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

#loginModal .row button {
  font-size: 13px;
  padding: 6px 0;
  border-radius: 6px;
}

#forgotPasswordBtn {
  color: #8ebcbd;
}

#forgotPasswordBtn:hover {
  color: #b9dada;
}

#emailToggleMode {
  color: #00ff84;
}

#emailToggleMode:hover {
  color: #00e676;
}

/* -------------------
   Responsivo / mobile
   ------------------- */
@media (max-width: 640px) {
  #loginModal .modal-content {
    width: 94vw;
    padding: 22px 18px 18px;
    border-radius: 16px;
  }

  #loginModal .modal-head h3 {
    font-size: 18px;
  }

  .login-social {
    flex-direction: column;
  }

  .login-btn {
    width: 100%;
  }
}




/* ===============================
   Checkout status (rodapé carrinho)
   =============================== */

.checkout-status {
  margin-top: 8px;
  min-height: 20px;
  font-size: 12px;
  color: #9fb7b8;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.checkout-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.checkout-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #00e18b;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.checkout-status__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: checkout-pulse 900ms infinite ease-in-out;
}

/* variantes */

.checkout-status.is-info .checkout-status__dot {
  background: #00e18b;
}

.checkout-status.is-success .checkout-status__dot {
  background: #4ade80;
}

.checkout-status.is-error .checkout-status__dot {
  background: #f97373;
}

.checkout-status.is-error .checkout-status__text {
  color: #fca5a5;
}

.checkout-status__text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* animação do "pulse" */
@keyframes checkout-pulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
}


/* Cards de pedidos na conta */
.order-card{
  align-items:center;
}

.order-card .order-main{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.order-card .order-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:.82rem;
  opacity:.75;
}

.order-card .order-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  min-width:110px;
}

.order-card .order-side .price{
  font-weight:700;
  font-size:.95rem;
}

/* status cancelado */
.badge.err{
  background:#3d1212;
  color:#ffc3c3;
}

@media (max-width:720px){
  .order-card{
    grid-template-columns:1fr;
  }
  .order-card .order-side{
    align-items:flex-start;
  }
}


.card-row.order-card{
  display:flex;
  flex-direction:column;
  gap:8px;
}


.order-items{
  margin:8px 0;
  padding:8px 0;
  border-top:1px solid rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.03);
}

.order-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-bottom:8px;
}

.order-item-logo{
  width:32px;
  height:32px;
  border-radius:6px;
  object-fit:contain;
  background:#0d2122;
  padding:4px;
}

.order-item-info{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.oi-title{
  font-weight:600;
}

.oi-provider{
  opacity:.7;
  font-size:.78rem;
}

.oi-price{
  font-size:.85rem;
  opacity:.85;
}

/* ===================== */
/*  PEDIDOS (DRAWER CONTA) */
/* ===================== */

.order-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  margin-bottom: 14px;
}

/* Linha 1: data à esquerda, status à direita */
.order-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-date { opacity: .8; }
.order-date strong { font-size: .9rem; font-weight: 600; }

/* ✅ Evita “pula-pula”/quebra quando muda countdown */
.order-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.order-status-row .badge {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: .75rem;
  white-space: nowrap; /* não quebra linha */
  flex: 0 0 auto;
}

/* Linha 2: Forma de pagamento */
.order-pay-row {
  display: flex;
  gap: 6px;
  font-size: .82rem;
  opacity: .9;
}

.order-pay-row .label { opacity: .75; }

/* Linha 3: quantidade x total */
.order-qty-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  margin-top: -4px;
}

.order-items-summary { opacity: .85; }

.order-total {
  font-weight: 600;
  opacity: .95;
}

/* Linha 4: ações */
.order-actions { text-align: center; }

.btn-link.order-toggle,
.order-actions .order-toggle {
  border: none;
  background: none;
  padding: 0;
  font-size: .82rem;
  color: #62f5c8;
  cursor: pointer;
}

.btn-link.order-toggle:hover,
.order-actions .order-toggle:hover { text-decoration: underline; }


/* Detalhes colapsáveis */
.order-details{
  overflow: visible;        /* antes: hidden */
  max-height: 0;
  opacity: 0;
  transition: max-height .25s ease, opacity .25s ease;
  margin-top: 4px;
}

.order-card.is-open .order-details{
  opacity: 1;
  max-height: 2000px;       /* antes: 320px */
  padding-top: 8px;
}


/* Header dos detalhes (logo + textos) */
.order-details-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.order-details-logo-wrap {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.order-item-logo-skeleton {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: #0f2425;
  opacity: .7;
}

.order-details-logo-wrap img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  opacity: 0;
  transition: opacity .2s ease;
}

.order-details-logo-wrap img.is-loaded { opacity: 1; }

.order-details-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.order-details-provider {
  font-size: .85rem;
  font-weight: 600;
  opacity: .9;
}

.order-details-title {
  font-size: .8rem;
  opacity: .75;
}

/* Linhas internas dos detalhes */
.order-details-extra {
  margin-top: 8px;
  font-size: .82rem;
  padding-left: 2px;
}

.order-detail-row-qv {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 6px;
  align-items: center;
}

.order-detail-label { opacity: .75; }
.order-detail-label-right { justify-self: end; }
.order-detail-value { font-weight: 600; }

/* Bloco de destino (TELCO / TV / PIN) */
.order-destino { padding-top: 4px; font-size: .8rem; }
.order-destino .od-line { display: flex; gap: 4px; flex-wrap: wrap; }
.order-destino .od-line .label { opacity: .75; }

/* Pedido #id */
.order-id {
  margin-top: 8px;
  font-size: .75rem;
  opacity: .6;
}

/* badge de erro/cancelado */
.badge.err { background: #3d1212; color: #ffc3c3; }

/* Responsivo */
@media (max-width: 880px){
  .order-head { align-items: flex-start; }
}


/* ========================= */
/*     PÁGINA PAGAMENTO PIX  */
/* ========================= */

.pix-body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #122e2f 0, #05090b 55%, #020405 100%);
  color: #f4fdf9;
}

.pix-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.pix-card {
  width: 100%;
  max-width: 520px;
  border-radius: 20px;
  background: rgba(3, 15, 16, 0.95);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  padding: 22px 22px 18px;
  border: 1px solid rgba(98, 245, 200, 0.12);
}

.pix-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.pix-logo-dot {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, #9fffe3, #38d18f 60%, #0f694b 100%);
  box-shadow: 0 0 16px rgba(98, 245, 200, 0.6);
}

.pix-header-text h1 {
  font-size: 1.1rem;
  margin: 0;
}

.pix-header-text p {
  margin: 2px 0 0;
  font-size: .8rem;
  opacity: .7;
}

.pix-summary {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.pix-main-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pix-label {
  font-size: .78rem;
  opacity: .7;
}

.pix-count {
  font-size: .9rem;
  font-weight: 600;
}

.pix-amount-block {
  text-align: right;
}

.pix-amount {
  font-size: 1rem;
  font-weight: 700;
  color: #62f5c8;
}

.pix-hint {
  margin-top: 6px;
  font-size: .78rem;
  opacity: .7;
}

.pix-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.pix-item {
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
}

.pix-item-main {
  border-color: rgba(98, 245, 200, 0.25);
  background: radial-gradient(circle at top left, rgba(98, 245, 200, 0.16), rgba(9, 34, 32, 0.95));
}

.pix-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: .82rem;
}

.pix-item-name {
  font-weight: 600;
}

.pix-item-id {
  opacity: .55;
  font-size: .75rem;
}

.pix-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
  margin-bottom: 6px;
}

.pix-item-tag {
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(98, 245, 200, 0.08);
  border: 1px solid rgba(98, 245, 200, 0.35);
}

.pix-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.btn-primary {
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(90deg, #1dd18b, #62f5c8);
  color: #041010;
  font-size: .8rem;
  font-weight: 600;
}

.btn-secondary {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: #f5fffb;
  font-size: .78rem;
  cursor: pointer;
}

.btn-link {
  padding: 0 4px;
  border: none;
  background: none;
  color: #62f5c8;
  font-size: .78rem;
  cursor: pointer;
}

.btn-link:hover,
.btn-primary:hover,
.btn-secondary:hover {
  filter: brightness(1.08);
}

.pix-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.pix-empty {
  font-size: .82rem;
  opacity: .75;
}


.pin-item .pin-code {
  font-family: monospace;
  font-size: 13px;
  word-break: break-all;
}


.pin-card {
    background: rgba(255,255,255,0.05);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    width: 320px;
    margin-bottom: 20px;
}

.pin-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    color: #d6d6d6;
}

.pin-product {
    font-size: 18px;
    font-weight: 600;
}

.pin-code-box {
    background: rgba(0,0,0,0.3);
    padding: 14px;
    border-radius: 8px;
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 15px;
    color: #00ff99;
}

.copy-pin-btn {
    background: #00ff99;
    color: #000;
    padding: 10px 16px;
    border-radius: 8px;
    width: 100%;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 15px;
}

.copy-pin-btn:hover {
    background: #00e68a;
}

.copy-success {
    margin-top: 10px;
    display: none;
    color: #00ff99;
    font-size: 14px;
}


.pin-card {
    background: rgba(255,255,255,0.05);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 20px;
}

.pin-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.pin-product {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.pin-provider {
    font-size: 13px;
}

.pin-date {
    font-size: 12px;
    color: #aaa;
}

.pin-code-box {
    background: rgba(0,0,0,0.3);
    padding: 14px;
    border-radius: 8px;
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 15px;
    color: #00ff99;
}

.copy-pin-btn {
    background: #00ff99;
    color: #000;
    padding: 10px 16px;
    border-radius: 8px;
    width: 100%;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 15px;
}

.copy-pin-btn:hover {
    background: #00e68a;
}

.copy-success {
    margin-top: 10px;
    color: #00ff99;
    font-size: 14px;
}


/* Container da seção do QRCode */
.pix-qrcode-section {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;     /* centraliza horizontalmente */
  text-align: center;      /* centraliza textos */
  gap: 8px;
}

/* Caixa que envolve o QR */
.pix-qrcode-box {
  margin-top: 8px;
  padding: 16px;
  border-radius: 20px;
  background: radial-gradient(circle at top, #102e2f, #050f10);
  display: flex;
  align-items: center;
  justify-content: center; /* centraliza o canvas do QR */
}

/* Garante que o QR não estoura no mobile */
.pix-qrcode-box canvas {
  max-width: 220px;
  max-height: 220px;
  width: 100%;
  height: auto;
}

/* Deixa os textos dessa seção mais suaves */
.pix-qrcode-title {
  font-weight: 600;
}

.pix-qrcode-sub {
  font-size: 0.9rem;
  opacity: 0.85;
  max-width: 420px;
}

.pix-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pix-item-actions .btn-primary {
  min-width: 140px;
}

.pix-item-actions .btn-link {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 255, 153, 0.25);
  background: rgba(0, 255, 153, 0.06);
  font-size: 0.85rem;
}

.pix-item-main {
  margin-top: 16px;
}

.pix-item {
  border-radius: 18px;
  background: rgba(3, 20, 22, 0.9);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pix-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.pix-item-name {
  font-weight: 600;
}

.pix-item-id {
  font-size: 0.8rem;
  opacity: 0.7;
}

.pix-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

.pix-item-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 255, 153, 0.12);
  font-size: 0.75rem;
}


.pix-item-step {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 2px;
}


.pix-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 20px 10px;
}

.pix-card-item {
  flex: 0 0 85%;            /* ocupa 85% da tela */
  max-width: 480px;
  scroll-snap-align: start;
  border-radius: 20px;
  background: var(--card-bg, rgba(3,20,22,.8));
  padding: 20px;
  margin-bottom: 20px;
}

/* mostra próximo card parcialmente */
.pix-carousel::-webkit-scrollbar {
  display: none;
}


/* ===== Ajustes finos tela de PIX ===== */

/* Centralizar "Resumo do pagamento" + "Pagamento X de Y" */
.pix-step-header {
  text-align: center;
  margin: 1.5rem 0 1rem;
}

/* Centralizar os textos das instruções */
.pix-instructions,
.pix-instructions-title,
.pix-instructions-text {
  text-align: center;
}

/* Centralizar o QRCode no card */
.pix-qrcode-wrapper {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0;
}

/* Linha GOOGLE 100 • Valor de R$ X,XX */
.pix-current-info {
  text-align: center;
  margin-bottom: 1.25rem;
}

/* Centralizar os botões "Pagar com PIX" e "Copiar código PIX" */
.pix-current-actions {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Centralizar navegação Anterior / X de Y / Próximo */
.pix-step-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.pix-step-counter {
  font-size: 0.875rem;
  opacity: 0.8;
}

/* ===== Ajustes finos tela de PIX (sem scroll) ===== */

/* Card geral um pouco mais compacto */
.pix-card {
  padding-top: 1.6rem;
  padding-bottom: 1.4rem;
}

/* Bloco "Resumo do pagamento / Pagamento X de Y" centralizado e mais compacto */
.pix-step-header {
  text-align: center;
  margin-top: 0.9rem;
  margin-bottom: 0.6rem;
}

/* Título "Pague lendo o QR Code abaixo" */
.pix-step-title {
  margin-bottom: 0.6rem;
}

/* Texto de instrução logo abaixo do título */
.pix-instructions {
  text-align: center;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
}

/* QR Code mais colado nas instruções */
.pix-qrcode-wrapper {
  display: flex;
  justify-content: center;
  margin: 0.8rem 0;
}

/* Linha GOOGLE 100 • Valor de R$ 100,00 */
.pix-current-info {
  text-align: center;
  margin-top: 0.4rem;
  margin-bottom: 0.7rem;
}

/* Botões "Pagar com PIX" e "Copiar código PIX" centralizados */
.pix-current-actions {
  margin-top: 0.4rem;
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Navegação Anterior / X de Y / Próximo centralizada e compacta */
.pix-step-nav {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.pix-step-counter {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Botão "Voltar para a loja" um pouquinho mais perto do conteúdo */
.pix-footer {
  margin-top: 1.1rem;
}


/* ========== MODAL PIX ========== */

.pix-modal.hidden {
  display: none;
}

.pix-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pix-modal-backdrop {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.55);
}

.pix-modal-box {
  position: relative;
  background: #0f1f1d;
  padding: 2rem;
  width: 90%;
  max-width: 420px;
  border-radius: 18px;
  border: 1px solid rgba(0,255,180,0.15);
  box-shadow: 0 0 25px rgba(0,255,180,0.08);
  animation: modalFadeIn .25s ease;
  text-align: center;
}

.pix-modal-box h2 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: #e8ffff;
}

.modal-text {
  font-size: 0.95rem;
  color: #c8d7d7;
  line-height: 1.5rem;
}

.modal-buttons {
  margin-top: 1.8rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.modal-btn {
  min-width: 150px;
}

/* Animação */
@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}



.order-pay-row,
.order-qty-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.order-pay-row .label {
  font-size: 0.85rem;
  color: #9fb3b7;
}

.order-method {
  font-size: 0.9rem;
  font-weight: 500;
}

/* linha dos botões "Ver detalhes" e "Pagar" */
.order-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  gap: 12px;
}

.order-actions .order-toggle {
  padding-left: 0;
}

/* novos badges */
.badge.pending {
  background: #5a440c;
  color: #ffd38a;
}

.badge.expired {
  background: #4a1717;
  color: #ffb6b6;
}

.pix-card {
  padding-top: 20px;
  padding-bottom: 20px;
}

.pix-instructions {
  margin-top: 12px;
  margin-bottom: 12px;
}

.pix-qrcode-wrapper {
  margin: 8px 0 10px;
}


.order-pay-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  text-align: left;
}


.order-qty-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-top: 6px;
}

.order-qty {
  text-align: left;
}

.order-value {
  text-align: right;
  font-weight: 600;
}


.order-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-top: 12px;
  gap: 12px;
}

.order-details {
  justify-self: start;
}

.order-pay {
  justify-self: end;
}


.order-items-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.order-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.item-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.item-right {
  display: flex;
  align-items: center;
  gap: 8px;
}


.order-id {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}


.order-provider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.provider-mini-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
}


.pin-code-box {
  margin-top: 12px;
}

.pin-label {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}

.pin-value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .12em;
  word-break: keep-all;
  white-space: nowrap;
}

/* ===================== */
/*  CUPONS (DRAWER CONTA) */
/* ===================== */

.tab-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 6px;
  margin-left:8px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  background:rgba(98,245,200,.15);
  color:#62f5c8;
  border:1px solid rgba(98,245,200,.25);
  line-height:1;
}
.tab-badge.hidden{ display:none; }

.coupons-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.coupons-title{
  font-weight:700;
  opacity:.95;
}
.coupons-sub{
  font-size:.85rem;
  opacity:.75;
  margin-top:2px;
}

.coupon-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 18px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  margin-bottom:14px;
}

.coupon-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.coupon-code{
  font-weight:800;
  letter-spacing:.8px;
  font-size:.95rem;
}

.coupon-discount{
  font-size:.8rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(98,245,200,.12);
  border:1px solid rgba(98,245,200,.2);
  color:#62f5c8;
  white-space:nowrap;
}

.coupon-desc{
  font-size:.9rem;
  opacity:.9;
}

.coupon-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  font-size:.82rem;
  opacity:.8;
}

.coupon-meta .label{ opacity:.7; margin-right:4px; }

.coupon-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

.coupon-actions .btn-ghost{
  padding:8px 12px;
  border-radius:10px;
}

@media (max-width: 880px){
  .coupon-top{ flex-direction:column; align-items:flex-start; }
  .coupon-actions{ justify-content:flex-start; }
}



.providers-list{
  margin-top:10px;
  max-height:320px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background: rgba(255,255,255,.02);
}

.provider-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.provider-row:last-child{ border-bottom:none; }

.provider-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.provider-code{
  font-weight:700;
  font-size:.85rem;
}

.provider-name{
  font-size:.82rem;
  opacity:.75;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:420px;
}

.provider-check{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

/* Data/hora do pedido: mais legível e alinhada à esquerda */
.order-date{
  width:100%;
  text-align:left;
  opacity:.85;
}
.order-date strong{
  font-size:14px;
  font-weight:900;
}

/* Trava o layout do bloco do PIN pra não "encolher" quando mascara */
.pin-inline{
  width:100%;
}
.pin-value{
  flex:1;
  min-width:0;
}
.pin-inline .orders-btn{
  width:auto;           /* botão não força layout estranho */
  min-width:140px;      /* mantém consistência */
  white-space:nowrap;
}


.flow-fav-pill .fav-del{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.10);
}


.flow-field{
  display:flex;
  flex-direction:column;     /* ✅ label em cima */
  gap:6px;
  min-width:0;
}

.flow-field label{
  font-size:12.5px;
  color:#9fb7b8;
  padding-left:10px;
}

.flow-field input{
  width:100%;
  min-width:0;
}


.flow-row{
  align-items:flex-start; /* ✅ evita “puxar” campo pra baixo */
}

.flow-field--ddd{ flex:0 0 90px; }
.flow-field--telefone{ flex:1 1 260px; }


/* ===== FORM (FIX LAYOUT) ===== */

/* container principal do formulário */
.flow-form{
  display:flex;
  flex-direction:column; /* 👈 ESSENCIAL */
  gap:12px;
  margin-bottom:16px;
}


/* cada "row" vira grid */
.flow-row{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap:12px;
  width:100%;
  align-items:end;
}

.flow-row--fav{
  grid-template-columns: 1fr 1fr;
  align-items:center;
}

.flow-row--submit{
  display:flex;
  justify-content:flex-end;
}

/* campos: label em cima do input, SEM gambiarra */
.flow-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.flow-field label{
  font-size:12px;
  line-height:1.1;
  color:#9fb7b8;
  padding-left:10px;
  white-space:nowrap;
}

.flow-field input{
  width:100%;
  min-width:0;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(0,255,128,.20);
  background:#02090a;
  padding:0 14px;
  color:#e5f7f6;
}

/* tamanhos */
.flow-field--ddd{ max-width:90px; }
.flow-field--telefone{ width:100%; }

/* checkbox / favorito (não empurra o layout) */
.flow-checkbox{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#9fb7b8;
  margin:0;
}

.flow-checkbox input{
  width:16px;
  height:16px;
}

/* apelido: só aparece quando marcar */
.flow-alias{
  display:none;
}
.flow-alias.show{
  display:block;
}

/* botão */
.flow-submit{
  height:40px;
  padding:0 18px;
  border-radius:999px;
  border:0;
  background:#22d39c;
  color:#041513;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
}

/* responsivo */
@media (max-width:640px){
  .flow-row{ grid-template-columns: 1fr; }
  .flow-row--fav{ grid-template-columns: 1fr; }
  .flow-row--submit{ justify-content:stretch; }
  .flow-submit{ width:100%; }
}


/* ===== Favoritos TELCO: chip 2 linhas + ellipsis + lixeira fixa ===== */
.telco-fav-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(36, 255, 178, 0.25);
  background: rgba(0,0,0,.20);
  max-width:100%;
}

.telco-fav-text{
  display:flex;
  flex-direction:column;
  min-width:0;              /* 🔥 necessário pro ellipsis funcionar */
  flex:1;
}

.telco-fav-label{
  font-weight:600;
  font-size:13px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;   /* "..." */
}

.telco-fav-num{
  font-size:12px;
  opacity:.85;
  line-height:1.1;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.telco-fav-remove{
  flex:0 0 auto;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.telco-fav-remove:hover{
  background: rgba(255,255,255,0.10);
}


.orders-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.orders-actions.two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width:520px){
  .orders-actions.two{ grid-template-columns: 1fr; }
}

.orders-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  border-radius:14px;
  padding:11px 12px;
  font-weight:900;
  font-size:13px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
  width:100%;
  transition:transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}

.orders-btn:active{ transform:translateY(1px); box-shadow:0 6px 18px rgba(0,0,0,.18); }
.orders-btn:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.20);
}

.orders-btn.primary{
  border-color:rgba(0,255,170,.35);
  background:linear-gradient(180deg, rgba(0,255,170,.18), rgba(0,255,170,.10));
  color:rgba(0,255,170,.98);
}
.orders-btn.primary:hover{
  border-color:rgba(0,255,170,.50);
  background:linear-gradient(180deg, rgba(0,255,170,.22), rgba(0,255,170,.12));
}

.orders-btn.ghost{
  background:rgba(0,0,0,.18);
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.90);
}
.orders-btn.ghost:hover{
  background:rgba(0,0,0,.26);
  border-color:rgba(255,255,255,.18);
}

.orders-btn .ico{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));
}
.orders-btn .txt{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =====================================================
   REMOVER SCROLL INTERNO DO MINI MODAL DE ENVELOPE
   ===================================================== */

.gift-envelope-panel,
.gift-envelope-box,
.gift-envelope-container {
  max-height: none !important;
  overflow: visible !important;
}

/* garante que inputs não “quebrem” layout */
.gift-envelope-panel textarea,
.gift-envelope-panel input {
  max-height: none;
}




/* ===== Premium photo envelope layer ===== */
.env-photo{
  position:absolute;
  inset:0;
  border-radius:18px;
  background: url("./assets/envelope.png") center/cover no-repeat;
  filter: saturate(0.9) contrast(1.08) brightness(0.92);
  opacity: .92;
  z-index: 0;
  pointer-events:none;
}

/* ===============================
   ENVELOPE PREMIUM (REALISTA)
   ===============================
   Estrutura esperada (presente.html):
   #envelopeStage.envelope-stage
     .env-photo (base)
     .env-layer.env-back
     .env-layer.env-front
     .env-layer.env-flap
     .env-letter
   Observação: usamos uma única imagem (assets/envelope.png) como textura.
   A sensação de "abrir" vem do flap (clip-path) + carta subindo + brilho.
*/

#envelopeStage{
  position: relative;
  width: min(520px, 92vw);
  aspect-ratio: 16 / 10;
  margin: 18px auto 10px;
  border-radius: 22px;
  transform-style: preserve-3d;
  perspective: 1200px;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  isolation: isolate;
}

#envelopeStage::after{
  content:"";
  position:absolute; inset:-10px;
  border-radius: 28px;
  background: radial-gradient(60% 60% at 50% 30%, rgba(0,255,194,.22), transparent 60%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events:none;
}

#envelopeStage.is-opening::after,
#envelopeStage.is-open::after{
  opacity: 1;
}

.env-layer{
  position:absolute;
  inset:0;
  border-radius:18px;
  background: url("./assets/envelope.png") center/cover no-repeat;
  z-index: 1;
}

/* Back/base – leve vinheta para dar profundidade */
.env-back{
  filter: saturate(.92) contrast(1.05) brightness(.90);
}

/* Frente – recorte do triângulo inferior */
.env-front{
  clip-path: polygon(0 52%, 50% 86%, 100% 52%, 100% 100%, 0 100%);
  filter: saturate(.9) contrast(1.06) brightness(.86);
  z-index: 4;
}

/* Aba superior – recorte do triângulo de cima e animação 3D */
.env-flap{
  clip-path: polygon(0 0, 100% 0, 50% 56%);
  transform-origin: 50% 0%;
  transform: rotateX(0deg);
  transition: transform .75s cubic-bezier(.2,.9,.2,1);
  backface-visibility: hidden;
  z-index: 5;
  filter: saturate(.92) contrast(1.08) brightness(.95);
}

/* Carta */
.env-letter{
  position:absolute;
  left: 50%;
  top: 54%;
  width: 78%;
  height: 62%;
  transform: translate(-50%, -20%) translateZ(2px);
  border-radius: 16px;
  background:
    radial-gradient(100% 70% at 50% 18%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(20,28,28,.92), rgba(12,18,18,.95));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 28px 60px rgba(0,0,0,.55);
  z-index: 3;
  opacity: 0;
  transition: transform .75s cubic-bezier(.2,.9,.2,1), opacity .35s ease;
  overflow:hidden;
}

.env-letter::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(80% 60% at 50% 0%, rgba(0,255,194,.22), transparent 60%);
  opacity: .75;
  pointer-events:none;
}

.env-letter .letter-logo{
  position:absolute;
  top: 16px;
  left: 16px;
  display:flex;
  align-items:center;
  gap: 10px;
}

.env-letter .letter-logo img{
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(0,0,0,.22);
  padding: 6px;
}

.env-letter .letter-logo .brand{
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 14px;
  color: var(--theme-text, #d5dbe2);
}

.env-letter .letter-msg{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  font-size: 13px;
  opacity: .88;
  color: var(--theme-text, #d5dbe2);
}

/* Estados */
#envelopeStage.is-opening .env-flap{
  transform: rotateX(150deg);
}

#envelopeStage.is-opening .env-letter,
#envelopeStage.is-open .env-letter{
  opacity: 1;
  transform: translate(-50%, -72%) translateZ(2px);
}

#envelopeStage.is-open .env-flap{
  transform: rotateX(150deg);
}

/* Dica abaixo do envelope */
.env-hint{
  text-align:center;
  font-size: 12.5px;
  opacity: .88;
  margin-top: 8px;
}

@media (max-width: 520px){
  #envelopeStage{ width: min(460px, 92vw); }
  .env-letter{ width: 86%; }
}

/* keep vector layers subtle on top of photo */
.env-back,.env-front{ opacity:.18; }

/* Logo inside the seal */
.env-logo{
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}

/* Typography (more premium / readable) */
h1{
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: .2px;
}
.subtitle{
  font-size: clamp(14px, 1.35vw, 18px);
  opacity: .92;
}
.label{
  font-size: 12px;
  letter-spacing: .14em;
}

.env-logo-fallback{font-weight:900;letter-spacing:.06em;color:rgba(0,255,204,.95);text-shadow:0 6px 18px rgba(0,0,0,.45);}

/* ======== JS state compatibility (uses #envelope.opening/.opened) ======== */
#envelope.opening .env-flap,
#envelope.opened .env-flap{
  /* Fold the flap away; hide backface so it does not float over the header */
  transform: rotateX(165deg) translateZ(1px);
  backface-visibility: hidden;
  opacity: 0;
  transition: transform var(--openMs, 1400ms) cubic-bezier(.2,.9,.18,1), opacity 220ms ease 260ms;
}

#envelope.opening .env-letter,
#envelope.opened .env-letter{
  opacity: 1;
  transform: translate(-50%, -58%) scale(1);
  z-index: 6;
}

#envelope.opening .env-front{ opacity: 0.10; }
#envelope.opened .env-front{ opacity: 0.06; }
#envelope.opening .env-back{ opacity: 0.12; }
#envelope.opened .env-back{ opacity: 0.08; }

#envelope.opening .env-photo{ transform: translate(-50%, -50%) scale(1.02); }
#envelope.opened .env-photo{ transform: translate(-50%, -50%) scale(1.00); opacity: .55; }

#envelope.opening .env-seal{ transform: translate(-50%, -50%) scale(1.02); }
#envelope.opened .env-seal{ transform: translate(-50%, -50%) scale(0.85); opacity: .65; }


/* ==============================
   Premium envelope – final fixes
   (keeps letter outside the shell
   and ensures flap doesn't float)
   ============================== */

#envelope{
  position: relative;
  transform-style: preserve-3d;
}

/* Ensure the realistic flap uses the correct hinge + hides its backface */
#envelope .env-flap{
  transform-origin: 50% 92% !important;
  backface-visibility: hidden !important;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* Flap fully folds away and fades out (avoids the stray triangle over the title) */
#envelope.opening .env-flap,
#envelope.opened .env-flap{
  transform: rotateX(165deg) translateZ(1px) !important;
  opacity: 0 !important;
}

/* Letter should always be above the envelope once opening */
#envelope .env-letter{ z-index: 6; }
#envelope.opening .env-letter,
#envelope.opened .env-letter{
  transform: translateY(-58%) scale(1) !important;
  opacity: 1 !important;
}

/* Copy button inside the letter (was unstyled) */
.env-letter-copyBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: var(--themeText, #d5dbe2);
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.env-letter-copyBtn:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }
.env-letter-copyBtn:active{ transform: translateY(0px) scale(.98); }

/* ==============================
   Premium envelope – final fixes
   ============================== */

#envelope{
  position: relative;
  transform-style: preserve-3d;
}

#envelope .env-flap{
  transform-origin: 50% 92% !important;
  backface-visibility: hidden !important;
  will-change: transform, opacity;
}

/* Opened flap should fold away and disappear (prevents hovering triangle) */
#envelope.opening .env-flap,
#envelope.opened .env-flap{
  transform: rotateX(165deg) translateZ(1px) !important;
  opacity: 0 !important;
  transition: transform var(--openMs, 1400ms) cubic-bezier(.2,.9,.18,1),
              opacity 240ms ease 260ms;
}

/* Letter should be above the envelope layers */
#envelope .env-letter{ z-index: 8; }
#envelope.opening .env-letter,
#envelope.opened .env-letter{
  transform: translateY(-56%) scale(1) !important;
  opacity: 1 !important;
}

/* Make the copy button look premium */
.env-letter-copyBtn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.55);
  color: var(--themeText, #d5dbe2);
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.env-letter-copyBtn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); }
.env-letter-copyBtn:active{ transform: translateY(0px); }

/* Improve hierarchy inside the letter */
.env-letter-pinLabel{ font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.env-letter-pinValue{ font-size: clamp(22px, 3.4vw, 34px); letter-spacing: .08em; font-weight: 900; }
.env-letter-serial{ margin-top: 10px; opacity: .88; font-size: 13px; }

/* ==============================
   Premium envelope – final fixes
   ============================== */

#envelope{
  position: relative;
  transform-style: preserve-3d;
}

#envelope .env-flap{
  transform-origin: 50% 92% !important;
  backface-visibility: hidden !important;
  will-change: transform, opacity;
}

/* Opened flap should fold away and disappear (prevents hovering triangle) */
#envelope.opening .env-flap,
#envelope.opened .env-flap{
  transform: rotateX(165deg) translateZ(1px) !important;
  opacity: 0 !important;
}

/* Letter must sit above the envelope once opened */
#envelope.opening .env-letter,
#envelope.opened .env-letter{
  z-index: 20 !important;
  transform: translateY(-58%) scale(1) !important;
  opacity: 1 !important;
}

.env-letter-copyBtn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: var(--themeText, #d5dbe2);
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

.env-letter-copyBtn:hover{ filter: brightness(1.08); }
.env-letter-copyBtn:active{ transform: translateY(1px); }

/* Make the PIN inside the letter feel premium */
.env-letter-pin{
  font-size: clamp(22px, 3.2vw, 32px);
  letter-spacing: .08em;
  line-height: 1.2;
  font-weight: 800;
}


/* ==============================
   Premium envelope – final fixes
   ============================== */

#envelope{
  position: relative;
  transform-style: preserve-3d;
}

#envelope .env-flap{
  transform-origin: 50% 92% !important;
  backface-visibility: hidden !important;
  will-change: transform, opacity;
}

/* Opened flap should fold away and disappear (prevents hovering triangle) */
#envelope.opening .env-flap,
#envelope.opened .env-flap{
  transform: rotateX(165deg) translateZ(1px) !important;
  opacity: 0 !important;
}

/* Letter on top while opening/opened */
#envelope .env-letter{ z-index: 6; }
#envelope.opening .env-letter,
#envelope.opened .env-letter{
  z-index: 7;
}

/* Style the copy button inside the letter */
.env-letter-copyBtn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.env-letter-copyBtn:hover{ background: rgba(255,255,255,.12); }
.env-letter-copyBtn:active{ transform: scale(.98); }

/* Make PIN inside the letter feel premium */
.env-letter-pin{
  font-size: clamp(22px, 3.0vw, 34px);
  letter-spacing: .08em;
}
.env-letter-serial{
  font-size: 13px;
  opacity: .85;
}


/* ===== Ajustes de campos (visibilidade) ===== */

/* Dá mais espaço pro valor e deixa o botão sempre “encaixado” */
.fieldRow{
  grid-template-columns: 72px minmax(0, 1fr) auto;
}

/* PIN e códigos: podem quebrar linha sem empurrar o botão */
#pinValue,
#serialValue,
#orderIdValue{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
}

/* Se quiser ainda mais “seguro” para códigos com hífen */
#pinValue,
#serialValue{
  word-break: break-all;
}

/* Botão de copiar não encolhe demais */
.copyBtn{
  min-width: 78px;
  padding: 7px 12px;
}

/* Em telas menores, empilha as colunas do verso (fica MUITO melhor) */
@media (max-width: 740px){
  .giftBackGrid{
    grid-template-columns: 1fr;
    height: auto;
  }
}

.fieldRow:first-child .fieldValue{
  font-size: 20px;
  letter-spacing: .06em;
  font-weight: 900;
}


/* Provider logo background (premium) */
.logoWrap{
  background: radial-gradient(circle at 30% 30%,
    color-mix(in srgb, var(--provider-bg, #1f3f36) 28%, transparent),
    rgba(255,255,255,0.06)
  );
  border: 1px solid color-mix(in srgb, var(--provider-bg, #1f3f36) 45%, rgba(255,255,255,0.10));
  box-shadow: 0 10px 26px rgba(0,0,0,0.20);
}


/* =========================
   CART DRAWER – COMPACT UX
   ========================= */

/* drawer continua ocupando a altura útil */
.account,
.cart {
  top: 88px !important;
  height: calc(100dvh - 88px) !important;
}

/* cabeçalho menor */
.cart .cart-head {
  padding: 10px 14px !important;
}

.cart .cart-head h2,
.cart .cart-head .title,
.cart .cart-head .cart-title {
  font-size: 16px !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

/* cupom mais compacto */
.cart .coupon {
  padding: 10px 14px !important;
  gap: 6px !important;
}

.cart .coupon input {
  height: 36px !important;
  font-size: 13px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
}

.cart .coupon button,
.cart .coupon .btn-primary,
#applyCoupon {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
}

/* lista de itens ocupa o espaço central de verdade */
.cart .cart-items,
#cartItems {
  flex: 1 1 auto !important;
  min-height: 120px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 6px 10px 0 !important;
}

/* item mais enxuto */
.cart-item {
  padding: 9px 0 !important;
  gap: 10px !important;
}

.cart-item .title {
  font-size: 13px !important;
  line-height: 1.18 !important;
}

.cart-item .price {
  min-width: 86px !important;
  font-size: 13px !important;
}

.cart-item .qty {
  gap: 6px !important;
  margin-left: 10px !important;
}

.cart-item .btn-ghost.sm {
  padding: 5px 7px !important;
  font-size: 12px !important;
}

/* footer mais compacto */
.cart .cart-footer {
  padding: 10px 14px 12px !important;
}

.cart .totals .trow {
  margin: 4px 0 !important;
  font-size: 13px !important;
}

.cart .totals .grand strong {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--brand) !important;
  text-shadow: 0 0 12px rgba(0, 230, 118, 0.4) !important;
}

/* bloco gift mais compacto */
#giftRow,
.gift-row {
  margin-top: 10px !important;
  padding-top: 10px !important;
}

#giftRow label,
.gift-row label {
  font-size: 12px !important;
}

#giftRow .muted,
.gift-row .muted,
#giftRow small,
.gift-row small {
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.gift-config,
.cart-gift,
.giftWrap {
  padding: 8px 10px !important;
  border-radius: 12px !important;
}

.gift-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
}
.gift-fields {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gift-summary-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--surface);
}
.gift-summary-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}
.gift-summary-label {
  font-size: 12px;
  opacity: .72;
  color: var(--muted);
}
.gift-summary-value {
  font-weight: 600;
  color: var(--text);
}
.gift-password-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gift-password-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.gift-password-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  margin: 0;
  white-space: nowrap;
}
.gift-password-label-text {
  font-weight: 600;
}
.gift-password-input-wrap {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
  flex: 1;
}
.gift-password-hint {
  opacity: .75;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
}
.input-dark {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,0.3);
  color: #fff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-dark:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.2); }
.wallet-amount-wrap {
  display: none;
  align-items: center;
  gap: 8px;
}
.wallet-amount-label {
  opacity: .85;
}
.wallet-amount-input {
  width: 110px;
  padding: 6px 10px;
  border-radius: 10px;
  text-align: right;
  border: 1px solid var(--stroke);
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.wallet-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.wallet-label-text {
  font-weight: 600;
}
.gift-enable-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.gift-config .summary,
.cart-gift .summary,
.giftWrap .summary {
  padding: 8px 10px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.gift-config input,
.cart-gift input,
.giftWrap input {
  height: 36px !important;
  font-size: 13px !important;
}

.gift-config button,
.cart-gift button,
.giftWrap button {
  min-height: 34px !important;
  font-size: 12px !important;
  padding: 0 10px !important;
}

/* botão finalizar SEM sticky para não atropelar */
#checkoutBtn,
#finishBtn,
.cart-footer .finish-btn,
.cartFooter .finish-btn {
  position: static !important;
  margin-top: 10px !important;
  height: 40px !important;
  min-height: 40px !important;
  font-size: 14px !important;
  border-radius: 12px !important;
  width: 100% !important;
}


#checkoutBtn{
  font-weight:600;
  letter-spacing:.2px;
}


.gift-row{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:10px;
  padding-top:12px;
}

.trow{
  font-size:13px;
}
.trow strong{
  font-size:15px;
}


/* checkout mais respirado */
.cart .cart-footer{
  padding: 10px 14px 18px !important;
}

#checkoutBtn{
  margin-top: 14px !important;
  margin-bottom: 6px !important;
  min-height: 46px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--brand), var(--brand-teal)) !important;
  background-size: 200% 200% !important;
  color: #041014 !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  transition: all 0.4s ease !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(0, 255, 136, 0.25) !important;
}
#checkoutBtn:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(0, 230, 118, 0.5) !important;
  background-position: 100% 50% !important;
}

.cart .cart-footer{
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}




.gift-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(10px);
}

.gift-editor-container {
  width: min(1100px, 94vw);
  max-height: 90vh;
  overflow: auto;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(8,24,28,.96), rgba(6,18,24,.98));
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  padding: 24px;
}

.gift-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.gift-editor-title {
  font-size: 32px;
  font-weight: 800;
  color: #f3f7f7;
  margin: 0;
}

.gift-editor-close {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  border-radius: 12px;
  height: 40px;
  padding: 0 14px;
  cursor: pointer;
}

.gift-editor-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 24px;
}

.gift-editor-panel {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  padding: 18px;
}

.gift-editor-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #dff7f3;
  margin-bottom: 8px;
}

.gift-editor-select,
.gift-editor-input,
.gift-editor-textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: #f3ffff;
  border-radius: 14px;
  outline: none;
  box-sizing: border-box;
}

.gift-editor-select,
.gift-editor-input {
  height: 42px;
  padding: 0 12px;
}

.gift-editor-textarea {
  min-height: 140px;
  resize: vertical;
  padding: 14px;
  font-size: 16px;
  line-height: 1.55;
}

.gift-editor-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.gift-editor-toolbtn {
  min-width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}

.gift-editor-counter {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.72);
}

.gift-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.gift-editor-cancel,
.gift-editor-save {
  height: 42px;
  border-radius: 14px;
  padding: 0 16px;
  cursor: pointer;
  font-weight: 700;
}

.gift-editor-cancel {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
}

.gift-editor-save {
  border: none;
  background: linear-gradient(135deg, #38f2bf, #2dd4ff);
  color: #041014;
}

.gift-preview-wrap {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background: rgba(255,255,255,.03);
  padding: 18px;
}

.gift-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.gift-preview-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.82);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.gift-preview-badge {
  font-size: 12px;
  color: rgba(255,255,255,.65);
}

.gift-preview-canvas {
  border-radius: 18px;
  min-height: 420px;
  overflow: hidden;
  background: rgba(0,0,0,.18);
}

@media (max-width: 900px) {
  .gift-editor-grid {
    grid-template-columns: 1fr;
  }

  .gift-editor-container {
    width: min(96vw, 96vw);
    padding: 16px;
  }

  .gift-editor-title {
    font-size: 24px;
  }
}


.gift-preview-closed {
  transition: opacity .28s ease, transform .32s ease;
}

.gift-preview-open {
  transition: opacity .28s ease, transform .32s ease;
}

.gift-preview-card {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.gift-preview-letter-head {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(216,247,255,.72);
}

.gift-preview-message-sheet {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background-color: var(--letterFallbackColor, #f7f4ec);
  background-image: linear-gradient(0deg, rgba(255,255,255,.90), rgba(255,255,255,.90));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 28px 30px 34px;
  min-height: 300px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.42);
  text-align: left;
}

.gift-preview-message-sheet[data-has-paper="1"] {
  background-image:
    linear-gradient(0deg, rgba(255,255,255,.90), rgba(255,255,255,.90)),
    var(--paperUrl, none);
}

.gift-preview-message-sheet::after {
  content: "";
  position: absolute;
  right: -46px;
  top: -46px;
  width: 190px;
  height: 190px;
  background: linear-gradient(135deg, rgba(0,0,0,.08), rgba(0,0,0,0));
  transform: rotate(45deg);
  pointer-events: none;
}

.gift-preview-message-sheet #giftPreviewMessage,
#giftPreviewMessage {
  position: relative;
  z-index: 1;
  width: 100%;
  font-size: var(--letterFontSize, 22px);
  line-height: 1.55;
  font-weight: 500;
  color: var(--letterTextColor, #1f2933);
  font-family: var(--letterFontFamily, ui-serif, "Segoe Script", "Brush Script MT", "Apple Chancery", cursive);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ===================== CARRINHO PREMIUM DARK ===================== */
.cart {
  background: rgba(18, 22, 32, 0.95) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.cart .cart-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.cart .totals .trow {
  color: #ffffff !important;
}

.cart .totals .trow strong,
.cart .totals .grand strong {
  color: var(--brand) !important;
  text-shadow: 0 0 12px rgba(0, 230, 118, 0.4) !important;
}

.cart #checkoutBtn,
.cart .finish-btn {
  background: linear-gradient(135deg, var(--brand), var(--brand-teal)) !important;
  color: #041014 !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  border: none !important;
  padding: 16px !important;
  height: auto !important;
}



/* O painel interno SÓ anima quando o dialog pai estiver [open] */
dialog[open] .provider-modal-panel,
dialog[open] > div {
  /* Mudamos de 0.6s para 0.9s (quase um segundo inteiro) */
  animation: modalEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Opcional, mas premium: faz o fundo escuro da tela surgir suavemente */
dialog[open]::backdrop {
  /* Mudamos de 0.4s para 0.6s para acompanhar o modal mais lento */
  animation: backdropFade 0.6s ease forwards !important;
}

/* ========================================================= */
/* TOOLTIP CUSTOMIZADO PARA ITENS RESTRITOS (+18)            */
/* ========================================================= */
.restricted-wrapper {
  position: relative;
  display: inline-flex;
  flex: 1; /* Permite que o botão continue ocupando o espaço simétrico no flex container */
}

.restricted-wrapper .add-to-cart {
  width: 100%;
}

.custom-tooltip {
  position: absolute;
  bottom: 125%; /* Flutua acima do botão */
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(18, 22, 32, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 255, 230, 0.3); /* brand-teal leve */
  color: #fff;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  white-space: normal;
  width: 250px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 100;
  pointer-events: none; /* Evita que o tooltip roube os cliques do mouse */
}

.restricted-wrapper:hover .custom-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}