:root{
      --primary:#ff6b35;--primary-dark:#e55a2b;--secondary:#ffd23f;--success:#00d084;--success-dark:#00b572;
      --danger:#ff4757;--warning:#ffa502;--dark:#2c3e50;--light:#ffffff;--gray-100:#f8f9fa;--gray-200:#e9ecef;--gray-300:#dee2e6;
      --gray-400:#ced4da;--gray-500:#adb5bd;--gray-600:#6c757d;--gray-700:#495057;--gray-800:#343a40;
      --shadow-sm:0 2px 4px rgba(0,0,0,.06);--shadow:0 4px 12px rgba(0,0,0,.1);--shadow-lg:0 10px 25px rgba(0,0,0,.15);
      --border-radius:16px;--transition:all .3s cubic-bezier(.4,0,.2,1);
  --cat-bg:#1c1714;
  --cat-pill-bg:#a21e22;
  --cat-pill-text:#ffffff;
  --cat-pill-ring:#a21e22;
  --cat-pill-active-bg:transparent;
  --cat-pill-active-text:#a21e22;
  --cat-bar-h:64px;

    }
    *{margin:0;padding:0;box-sizing:border-box}
    body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:linear-gradient(135deg,var(--gray-100) 0%,#fff 100%);color:var(--dark);line-height:1.6;overflow-x:hidden}
.header {
  position: relative;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  z-index: 1;  /* Garante que fica abaixo do modal */
background:
  radial-gradient(circle at top center, #d78f00 0%, transparent 70%),
  radial-gradient(circle at bottom center, #c81101 0%, transparent 50%),
  radial-gradient(circle at center, #d78f00 0%, transparent 80%),
  #c81101;
}

    .header::before{content:'';position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="g"><stop offset="0%" stop-color="rgba(255,255,255,0.1)"/><stop offset="100%" stop-color="rgba(255,255,255,0)"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23g)"/><circle cx="700" cy="400" r="150" fill="url(%23g)"/><circle cx="400" cy="700" r="120" fill="url(%23g)"/></svg>') no-repeat center/cover;opacity:.3}
    .header-content{z-index:2;animation:fadeInUp 1s ease-out}
    .header .schedule{ font-size:.85rem; line-height:1.25; opacity:.9; }
        .logo { width: 90px; height: 90px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .3); backdrop-filter: blur(10px); margin-bottom: 2px; object-fit: cover; box-shadow: var(--shadow-lg); transition: var(--transition) }
    .logo:hover{transform:scale(1.05);border-color:rgba(255,255,255,.5)}
        .header h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 4px; text-shadow: 0 2px 10px rgba(0, 0, 0, .3) } 
           .status-badge{ background:rgba(255,255,255,.2); backdrop-filter:blur(10px); padding:6px 14px;     /* antes 8px 20px */ border-radius:25px; font-size:.75rem;     /* antes .9rem */ font-weight:500; margin-top:8px;       /* antes 15px */ border:1px solid rgba(255,255,255,.1); transition:var(--transition); }
    .status-open{background:#fff;color:var(--success);border:2px solid var(--success);font-weight:700;box-shadow:0 4px 12px rgba(0,208,132,.15)}
    .status-closed{background:#fff;color:var(--danger);border:2px solid var(--danger);font-weight:700;box-shadow:0 4px 12px rgba(255,71,87,.15)}
    .main{padding:40px 20px;max-width:900px;margin:0 auto;position:relative;z-index:1}
.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 50px 0 4px;
  color: var(--dark);
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.section-first-header-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 5px 0 4px;
  color: var(--dark);
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
        .section-sub {
  color: var(--gray-600);
  font-size: .75rem;
  margin-bottom: 5px;
  text-align: center;
}
.section-divider {
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 2px;
  margin: 8px 0 24px; /* espaço acima e abaixo */
}
   .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
    .product-card{background:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow);padding:16px;display:flex;gap:16px;align-items:center;transition:var(--transition);border:1px solid var(--gray-200);position:relative;overflow:hidden}
    .product-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--primary),var(--secondary));transform:scaleY(0);transition:var(--transition)}
    .product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
    .product-card:hover::before{transform:scaleY(1)}
    .product-image{width:90px;height:90px;border-radius:12px;object-fit:cover;box-shadow:var(--shadow-sm);transition:var(--transition)}
    .product-card:hover .product-image{transform:scale(1.05)}
    .product-info{flex:1;display:flex;flex-direction:column;gap:6px}
    .product-name{font-size:1rem;font-weight:700;color:var(--dark)}
    .product-price{font-size:1.1rem;font-weight:800;color:var(--primary)}
    .product-description{font-size:.88rem;color:var(--gray-700);line-height:1.35}
    .quantity-selector{display:flex;flex-direction:column;align-items:center;gap:4px}
    .quantity-btn.minus-btn{display:none;background:var(--gray-200);border:none;color:var(--dark);cursor:pointer;transition:var(--transition)}
    .quantity-btn.minus-btn:hover{background:var(--primary);color:#fff;transform:scale(1.08)}
    .quantity-btn,.quantity-display{width:44px;height:44px;font-size:1rem;font-weight:700;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);user-select:none}
    .quantity-btn{background:var(--gray-200);border:none;color:var(--dark);cursor:pointer;transition:var(--transition)}
    .quantity-btn:hover{background:var(--primary);color:#fff;transform:scale(1.08)}
    .quantity-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
    .quantity-display{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;cursor:pointer}
    .section-ribbon{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:linear-gradient(90deg,var(--primary),#ff7f2a);color:#fff;border-radius:10px;box-shadow:var(--shadow);text-transform:uppercase;letter-spacing:.5px;font-weight:800;margin-top:28px}
    .section-ribbon .ribbon-title{font-size:1rem}
    .section-ribbon .ribbon-price{font-size:.95rem;opacity:.95}
    .section-ribbon.section-ribbon--doces{background:linear-gradient(90deg,#ff8c3a,#ff6b35)}
    .product-card.no-image{gap:14px}
    .product-card.no-image .product-info{margin-left:0}
/* Somente o label do Crédito vira “duas linhas” */
#paymentSection .label-credit{
  display: flex;
  flex-direction: column;
  align-items: center;   /* centraliza horizontalmente */
  text-align: center;    /* centraliza o texto */
  gap: 2px;              /* espaço entre as linhas */
}

/* Linha de baixo, pequena mas legível */
#paymentSection .label-credit .subnote{
  font-size: .75rem;     /* ~12px */
  line-height: 1.1;
  color: var(--gray-700);
}
    /* Modal (responsivo, com scroll interno) */
    .modal{
      display:none;position:fixed;inset:0;width:100vw;height:100vh;
      background:rgba(0,0,0,.6);backdrop-filter:blur(5px);z-index:1000;
      align-items:center;justify-content:center;animation:fadeIn .3s ease-out;
      padding:20px;
    }

 /* Tela inteira cobrindo o site */
  #splash-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  /* Bolinha girando */
  .loader {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #ff6b35; /* cor principal */
    border-radius: 50%;
    width: 50px; height: 50px;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .splash-screen p {
  margin-top: 15px;
  font-size: 14px;
  color: #fff; /* Agora em branco */
}

    .modal-content{
      background:#fff;padding:24px;border-radius:20px;
      width:92vw;max-width:520px;max-height:85vh;
      overflow:auto;-webkit-overflow-scrolling:touch;
      box-shadow:var(--shadow-lg);animation:slideUp .3s ease-out;
    }
    .modal-title{font-size:1.3rem;font-weight:800;text-align:center;margin-bottom:8px;color:var(--dark)}
    .modal-desc{font-size:.95rem;color:var(--gray-600);text-align:center;margin-bottom:14px}
    .modal textarea{width:100%;height:120px;padding:14px;border:2px solid var(--gray-300);border-radius:12px;font-size:1rem;font-family:inherit;resize:vertical;transition:var(--transition)}
    .modal textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,107,53,.1)}
    .modal-actions{display:flex;gap:12px;margin-top:14px}
    .modal-btn{flex:1;padding:12px 20px;border:none;border-radius:10px;font-size:1rem;font-weight:700;cursor:pointer;transition:var(--transition)}
    .modal-btn.primary{background:var(--primary);color:#fff}.modal-btn.secondary{background:var(--gray-200);color:var(--dark)}
    @media (max-width:420px){.modal-content{width:96vw;padding:20px}}

    /* ===== FORMAS DE PAGAMENTO ===== */
    #paymentSection .payment-title{font-size:1.1rem;font-weight:700;margin-bottom:12px;color:var(--dark)}
    #paymentSection .payment-options{display:flex;gap:12px;flex-wrap:wrap}
    #paymentSection .payment-option{flex:1;min-width:120px}
    #paymentSection .payment-option input{display:none}
    #paymentSection .payment-option label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:45px;border:2px solid var(--gray-300);border-radius:8px;background:#fff;cursor:pointer;transition:var(--transition);font-weight:600;text-align:center}
    #paymentSection .payment-option label:hover{border-color:var(--primary);transform:translateY(-2px)}
    #paymentSection .payment-option input:checked + label{border-color:var(--primary);background:rgba(255,107,53,.1);color:var(--primary)}
    #paymentSection #trocoContainer{margin-top:10px}
    #paymentSection .troco-label{display:block;font-size:.95rem;margin-bottom:6px;color:var(--gray-700)}
    #paymentSection .troco-input{width:100%;padding:12px;border:2px solid var(--gray-300);border-radius:10px;font-size:1rem;transition:var(--transition)}

.cart-indicator {
  position: fixed;
  /* sobe o botão (ajuste o 180px se quiser ainda mais alto) */
  bottom: calc(env(safe-area-inset-bottom) + 180px);
  right: 20px;

  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  z-index: 300;              /* fica acima de banners/ads */
  padding: 0 16px;
  height: 56px;

  /* sombra mais marcada */
  box-shadow:
    0 12px 30px rgba(0,0,0,.25),
    0 2px 6px rgba(0,0,0,.15);
}

.cart-label {
    white-space: nowrap; /* Evita quebra de linha */
}

#cartCount {
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
}    .cart-indicator:hover {
  transform: scale(1.1);
  /* aumenta a sombra no hover */
  box-shadow:
    0 16px 40px rgba(0,0,0,.28),
    0 4px 10px rgba(0,0,0,.18);
}
    .cart-indicator.hidden{display:none}

    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
    @keyframes slideUp{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}

    @media (max-width:768px){
      .header h1{ font-size:1.4rem; }
      .main{padding:20px 16px}
      .header .schedule{ font-size:.8rem; }
      .grid{grid-template-columns:1fr}
      .product-card{flex-direction:row}
      .product-image{width:80px;height:80px}
      .status-badge{ font-size:.72rem; padding:6px 12px; }
    }

/* Todos os botões de pagamento com o MESMO tamanho do Crédito */
#paymentSection .payment-option label{
  display: flex;
  flex-direction: column;   /* permite 1 ou 2 linhas */
  align-items: center;
  justify-content: center;  /* centraliza na vertical */
  gap: 2px;
  min-height: 78px;         /* <-- ajuste fino: 74–84px conforme seu layout */
}

/* Mantém a linha de observação do Crédito pequena e legível */
#paymentSection .label-credit .subnote{
  font-size: .75rem;
  line-height: 1.1;
  color: var(--gray-700);
}

    /* Splash */
    .splash-screen{position:fixed;inset:0;background:linear-gradient(135deg,#ff6b35 0%,#e55a2b 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:9999;padding:20px 20px 100px;transition:transform 1s ease-in-out}
    .splash-logo{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 20px 60px rgba(0,0,0,.3);margin-bottom:24px;transform:scale(0);animation:scale-in .5s forwards .2s}
    .splash-text{color:#fff;font-size:20px;font-weight:800;text-align:center;line-height:1.3;opacity:0;animation:fade-in .3s forwards .5s}
    @keyframes scale-in{to{transform:scale(1)}}
    @keyframes fade-in{to{opacity:1}}

    /* ===== Observações + Finalizar ===== */
    .order-summary .observations-btn{width:100%;padding:16px;border:2px dashed var(--gray-300);border-radius:var(--border-radius);background:var(--gray-100);color:var(--gray-600);font-size:1rem;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:8px}
    .order-summary .observations-btn:hover{border-color:var(--primary);background:rgba(255,107,53,.05);color:var(--primary)}
    .order-summary .observations-btn.has-content{border-style:solid;background:rgba(255,107,53,.1);color:var(--primary);border-color:var(--primary)}
    .order-summary .checkout-btn{width:100%;padding:16px 24px;background:linear-gradient(135deg,var(--success),var(--success-dark));color:#fff;border:none;border-radius:var(--border-radius);font-size:1.05rem;font-weight:800;cursor:pointer;margin-top:18px;transition:var(--transition);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;gap:10px}
    .order-summary .checkout-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
    .order-summary .checkout-btn:disabled{background:var(--gray-400);cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}
    .order-summary{background:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow);padding:24px;margin-top:32px;border:1px solid var(--gray-200)}

    /* Extras do burger: info + stepper embutido (grid responsiva) */
    #burgerModal .extras-list{
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
      gap:12px;
      margin:12px 0 16px;
    }
    #burgerModal .extra{
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      border:2px solid var(--gray-300);border-radius:14px;padding:12px;background:#fff;transition:var(--transition);min-width:0;
    }
    #burgerModal .extra:hover{border-color:var(--primary);transform:translateY(-2px)}
    #burgerModal .extra-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
    #burgerModal .extra-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    #burgerModal .extra-price{margin-left:auto;color:var(--primary);font-weight:800;flex-shrink:0}
    #burgerModal .extra-qty{display:flex;align-items:center;gap:6px;flex-shrink:0}
    #burgerModal .extra-qty .quantity-btn,
    #burgerModal .extra-qty .quantity-display{width:36px;height:36px;border-radius:10px;font-size:.95rem}

    .loading-bar {
  width: 120px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.2); /* Fundo da barra */
  overflow: hidden;
  position: relative;
  border-radius: 2px;
  margin-top: 10px;
}

.loading-bar::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 40%;
  background-color: #fff; /* Cor da animação */
  animation: loadingMove 1s linear infinite;
  border-radius: 2px;
}

@keyframes loadingMove {
  0% { left: -40%; }
  100% { left: 100%; }
}

:root { --cat-nav-h: 64px; }

.cat-nav{
  position: sticky; top: 0; z-index: 60;
  display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 8px; 
  margin-bottom: 6px;
  justify-content: center; /* centraliza os botões */
  background: var(--gray-200);                     /* opcional: sem separador */
  border-bottom: 1px solid var(--gray-200);  /* separador sutil */
   

}
.cat-nav.shadow-visible {
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

.cat-nav::-webkit-scrollbar{ height: 0; }

.cat-pill{
  flex: 0 0 auto;
  padding: 10px 18px;
  border-radius: 999px;
  background: transparent;                         /* sem preenchimento */
  color: var(--cat-pill-active-text, #fff);               /* texto inativo */
  border: 2px solid var(--cat-pill-ring, #a21e22); /* só a borda */
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}
.cat-pill:hover{ transform: translateY(-1px); }
.cat-pill:active { transform: scale(.98); }

.cat-pill.active{
  background: var(--cat-pill-bg, #a21e22); /* preenchido quando ativo */
  color: #fff;                              /* texto branco no ativo */
  border-color: var(--cat-pill-bg, #a21e22);
  box-shadow: 0 0 0 3px #a21e2226;          /* “stroke” suave opcional */
}

/* acessibilidade no teclado */
.cat-pill:focus-visible{
  outline: 2px solid #a21e22; outline-offset: 2px;
}

/* âncora perfeita sem esconder sob a barra */
.section-title { scroll-margin-top: calc(var(--cat-nav-h, 64px) + 12px); }


/* ===== Carrossel Promo ===== */
.promo-carousel {
  margin: 12px 0 24px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.promo-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 10px 16px;
}

.promo-track::-webkit-scrollbar { display: none; }

.promo-card {
  flex: 0 0 320px;            /* largura fixa do card */
  height: 193px;              /* altura fixa */
  background: linear-gradient(135deg, var(--dark), #111);
  border-radius: 18px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  scroll-snap-align: start;
}

.promo-card img {
  width: 130px;
  height: 130px;
  border-radius: 14px;
  object-fit: cover;
  margin-left: 10px;
  box-shadow: 0 6px 14px rgba(0,0,0,.3);
}

.promo-text {
  max-width: 60%;
}

.promo-text h2 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
}

.promo-text p {
  font-size: 12px;
  opacity: .85;
  margin-bottom: 12px;
}

.promo-btn {
  display: inline-block;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: transform .2s ease;
}
.promo-btn:hover { transform: scale(1.05); }

/* Dots */
.promo-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
}
.promo-dots button {
  width: 14px;
  height: 14px;
  margin: 0 4px;
  background-color: var(--gray-400);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.promo-dots button.active {
  background-color: var(--primary);
  transform: scale(1.3);
}
.promo-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.8);
  border: none;
  font-size: 2rem;
  padding: 0.2em 0.4em;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.3s ease;
  opacity: 0;
}
.promo-carousel:hover .promo-arrow {
  opacity: 0.8;
}
.promo-arrow.left {
  left: 4px;
}
.promo-arrow.right {
  right: 4px;
}


.floating-cart-btn {
  position: fixed;
  bottom: 100px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ff6b35, #e55a2b);  /* Cores do cliente */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);  /* Sombra na cor do cliente */
  cursor: pointer;
  z-index: 998;
  transition: all 0.3s ease;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}

.floating-cart-btn.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: all;
}

.floating-cart-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(255, 107, 53, 0.4);  /* Sombra mais forte no hover */
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(255, 107, 53, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0);
  }
}

.cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ff4757;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  border: 2px solid white;
}

payment-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  z-index: 10000;  /* Aumenta de 9999 para 10000 */
  overflow-y: auto;
}

.payment-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: none;  /* Oculto por padrão */
  z-index: 10000;
  overflow-y: auto;
}

.payment-modal.show {
  display: flex !important;  /* Adicione !important para garantir */
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  padding-top: 2vh; /* Posiciona próximo ao topo */
}

.payment-modal-content {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 380px;  /* Ainda menor */
  margin: 0 auto;  /* Remove margem superior */
  animation: slideUp 0.3s ease;
  height: 75vh;  /* 75% da altura da viewport */
  overflow: hidden;  /* Remove overflow aqui pois será controlado internamente */
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.payment-modal-header {
  position: sticky;
  top: 0;
  background: white;
  padding: 14px;  /* Reduz de 20px */
  border-bottom: 1px solid #e9ecef;
  z-index: 10;
}

.payment-modal-footer {
  position: sticky;
  bottom: 0;
  background: white;
  padding: 16px;
  border-top: 1px solid #e9ecef;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.payment-modal-title {
  font-size: 1.1rem;  /* Reduz de 1.25rem */
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close-payment-modal {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f8f9fa;
  border: none;
  cursor: pointer;
}

.close-payment-modal:hover {
  background: #e9ecef;
}

.payment-modal-body {
  padding: 14px;
}

.order-items-list {
  max-height: 150px;  /* Reduz de 200px */
  overflow-y: auto;
  margin-bottom: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 8px;
  font-size: 0.85rem;  /* Fonte menor */
}

.order-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;  /* Reduz de 8px */
  border-bottom: 1px solid #e9ecef;
  font-size: 0.85rem;  /* Fonte menor */
}

.order-item:last-child {
  border-bottom: none;
}

/* Total do pedido */
.total-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 12px;
  margin: 16px 0;
}

.total-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: #495057;
}

.total-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ff6b35;
}

/* Botão de observações */
.observations-section {
  margin-bottom: 16px;
}

.observations-btn {
  width: 100%;
  padding: 14px;
  border: 2px dashed #ced4da;
  border-radius: 12px;
  background: #f8f9fa;
  color: #6c757d;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.observations-btn:hover {
  border-color: #ff6b35;
  background: rgba(255, 107, 53, 0.05);
  color: #ff6b35;
}

.observations-btn.has-content {
  border-style: solid;
  background: rgba(255, 107, 53, 0.1);
  color: #ff6b35;
  border-color: #ff6b35;
}

/* Botão finalizar pedido */
.checkout-btn {
  width: 100%;
  padding: 18px 24px;
  background: linear-gradient(135deg, #00d084, #00b572);
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 208, 132, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.checkout-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 208, 132, 0.4);
}

.checkout-btn:disabled {
  background: #adb5bd;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Ajuste específico para dentro do modal */
.payment-modal-body .observations-btn {
  margin-top: 10px;
}

.payment-modal-body .checkout-btn {
  margin-top: 20px;
}
.payment-modal-body .payment-title {
  font-size: 0.95rem;  /* Fonte menor */
  margin-bottom: 8px;
}
.payment-modal-body .payment-option label {
  padding: 10px 12px;  /* Reduz padding */
  font-size: 0.9rem;  /* Fonte menor */
  min-height: 60px;  /* Reduz altura mínima */
}

.payment-modal-body .total-section {
  padding: 12px;
  margin: 12px 0;
}

.payment-modal-body .total-label {
  font-size: 0.95rem;
}

.payment-modal-body .total-value {
  font-size: 1.25rem;  /* Reduz de 1.5rem */
}

.payment-modal-body .checkout-btn {
  padding: 14px 20px;  /* Reduz padding */
  font-size: 0.95rem;  /* Fonte menor */
  margin-top: 14px;
}

.payment-modal-body .observations-btn {
  padding: 10px;  /* Reduz padding */
  font-size: 0.9rem;  /* Fonte menor */
}

/* Ajusta inputs e labels */
.payment-modal-body .troco-label {
  font-size: 0.85rem;
}

.payment-modal-body .troco-input {
  padding: 10px;  /* Reduz padding */
  font-size: 0.9rem;
}

/* Mobile - garante que não fica cortado */
@media (max-width: 480px) {
  .payment-modal-content {
    max-height: calc(100vh - 120px);  /* Mais espaço para ads no mobile */
    margin: 40px auto 80px;  /* Ajusta margens */
  }
}