/* Modal de agendamento de entrega (modelo Giuliana Flores).
   CSS autossuficiente — não depende das utilities purgadas do Tailwind.
   Usa var(--brand) (cor da loja) com fallback verde para o OK e acentos. */

.ag-modal{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
}
.ag-modal[hidden]{ display:none; }
.ag-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.55); }

.ag-frame{
  position:relative; width:100%; max-width:940px; max-height:92vh;
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border-radius:14px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.45);
  font-family:Inter, ui-sans-serif, system-ui, sans-serif;
}

/* Cabeçalho escuro */
.ag-header{
  display:flex; align-items:center; justify-content:center; position:relative;
  background:#2c2c2c; color:#fff; padding:.85rem 1rem;
}
.ag-titulo{
  margin:0; font-size:.95rem; font-weight:600; letter-spacing:.06em; text-align:center;
}
.ag-fechar{
  position:absolute; right:.7rem; top:50%; transform:translateY(-50%);
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55);
  border-radius:7px; padding:.3rem .6rem; font-size:.8rem; cursor:pointer;
}
.ag-fechar:hover{ background:rgba(255,255,255,.12); }

/* Corpo rolável (modal) / container do fragmento (inline, docs/checkout-fluido/03) */
#ag-conteudo, #ag-conteudo-inline{ overflow:auto; }
.ag-loading{ padding:3rem; text-align:center; color:#94a3b8; }

/* Inline (checkout): sem o cabeçalho escuro do modal, a moldura fica mais leve —
   borda + cantos arredondados no lugar da sombra flutuante do .ag-frame. */
#ag-conteudo-inline{ border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; }
#ag-conteudo-inline .ag-grid{ border-radius:12px; overflow:hidden; }

/* Grade principal: 2 colunas (data|período) + rodapé full-width */
.ag-grid{ display:grid; grid-template-columns:1fr 1fr; }

/* Sub-cabeçalho */
.ag-sub{
  background:#f6f7f8; border-bottom:1px solid #e5e7eb; padding:1rem 1.25rem;
  text-align:center;
}
.ag-sub-data{ border-right:1px solid #e5e7eb; }
.ag-sub-rotulo{ font-size:.95rem; font-weight:700; color:#334155; }
.ag-ico{ color:#dc2626; }
.ag-sub-valor{ margin-top:.25rem; font-size:1.05rem; font-weight:700; color:#1f2937; }
.ag-sub-aux{ font-size:.85rem; color:#94a3b8; text-transform:capitalize; }

/* Calendário (coluna esquerda) */
.ag-cal{ padding:1.1rem 1.25rem; border-right:1px solid #eef0f2; }
.ag-cal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.ag-cal-titulo{ font-weight:600; color:#334155; }
.ag-mes-btn{
  background:#fff; border:1px solid #e5e7eb; border-radius:8px;
  width:32px; height:32px; font-size:1.1rem; line-height:1; color:#475569; cursor:pointer;
}
.ag-mes-btn:disabled{ opacity:.35; cursor:default; }
.ag-cal-semana,.ag-cal-dias{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.ag-cal-semana{ margin-bottom:.4rem; }
.ag-cal-semana span{ text-align:center; font-size:.78rem; color:#64748b; }

.ag-dia{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  border:none; border-radius:8px; font-size:.9rem; font-weight:600;
  background:transparent; color:#334155; cursor:pointer;
}
.ag-dia-vazio{ background:transparent; cursor:default; }
.ag-dia-disp,.ag-dia-disponivel{ background:#86efac; color:#14532d; }
.ag-dia-disp:hover,.ag-dia-disponivel:hover{ background:#6ee7a0; }
.ag-dia-alt,.ag-dia-alternativo{ background:#fbbf24; color:#7c2d12; }
.ag-dia-alt:hover,.ag-dia-alternativo:hover{ background:#f5b016; }
.ag-dia-indisponivel,.ag-dia-passado{ color:#cbd5e1; cursor:default; }
.ag-dia-sel{ background:#3b82f6 !important; color:#fff !important; }
.ag-dia-hoje{ font-size:.62rem; letter-spacing:.03em; outline:2px solid #cbd5e1; outline-offset:-2px; }

/* Períodos (coluna direita) */
.ag-periodos{ padding:1.4rem 1.25rem; }
.ag-hint{ color:#94a3b8; font-size:.9rem; }
.ag-periodos-tit{ margin:0 0 .9rem; font-size:1rem; font-weight:700; color:#1f2937; text-align:center; }
.ag-periodos-lista{ display:flex; flex-direction:column; gap:.2rem; }
.ag-periodo{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6rem;
  padding:.5rem .25rem; cursor:pointer; border-radius:8px;
}
.ag-periodo:hover{ background:#f8fafc; }
.ag-periodo input{ accent-color:#16a34a; width:1.05rem; height:1.05rem; }
.ag-periodo-nome{ font-weight:700; color:#1f2937; }
.ag-periodo-nome em{ font-weight:400; font-style:normal; color:#64748b; }
.ag-periodo-preco{ font-weight:600; color:#1f2937; white-space:nowrap; }
.ag-periodo-off{ cursor:default; }
.ag-periodo-off .ag-periodo-nome,.ag-periodo-off .ag-periodo-preco{ color:#cbd5e1; }
.ag-periodo-off:hover{ background:transparent; }

/* Card vermelho de produtos similares */
.ag-similares{
  background:#dc2626; color:#fff; border-radius:12px; padding:1.25rem;
  display:flex; flex-direction:column; gap:.5rem; align-items:flex-start;
}
.ag-similares-tit{ font-size:1.25rem; font-weight:800; line-height:1.15; }
.ag-similares-txt{ margin:0; font-size:.9rem; opacity:.95; }
.ag-similares-btn{
  margin-top:.4rem; background:#fff; color:#dc2626; text-decoration:none;
  font-weight:700; font-size:.9rem; padding:.55rem .9rem; border-radius:8px; align-self:flex-start;
}
.ag-similares-btn:hover{ background:#fff5f5; }

/* Miniaturas de produtos com entrega disponível (dentro do card vermelho) */
.ag-disp-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; width:100%; margin:.4rem 0; }
.ag-disp-card{
  display:flex; align-items:center; gap:.5rem; text-decoration:none;
  background:rgba(255,255,255,.14); border-radius:9px; padding:.4rem .5rem;
}
.ag-disp-card:hover{ background:rgba(255,255,255,.24); }
.ag-disp-foto{
  flex:0 0 auto; width:38px; height:38px; border-radius:7px; overflow:hidden;
  background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center;
}
.ag-disp-foto img{ width:100%; height:100%; object-fit:cover; }
.ag-disp-emoji{ font-size:1.1rem; }
.ag-disp-nome{
  color:#fff; font-size:.8rem; font-weight:600; line-height:1.15;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
@media (min-width:480px){ .ag-disp-grid{ grid-template-columns:repeat(2,1fr); } }

/* Rodapé: legenda + OK */
.ag-rodape{
  grid-column:1 / -1; border-top:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding:.9rem 1.25rem;
}
.ag-legenda{ display:flex; align-items:center; flex-wrap:wrap; gap:.9rem; font-size:.78rem; color:#475569; }
.ag-legenda strong{ color:#1f2937; }
.ag-legenda span{ display:inline-flex; align-items:center; gap:.35rem; }
.ag-sw{ width:14px; height:14px; border-radius:3px; display:inline-block; }
.ag-sw-sel{ background:#3b82f6; }
.ag-sw-disp{ background:#86efac; }
.ag-sw-alt{ background:#fbbf24; }
.ag-sw-indisp{ background:#fff; border:1px solid #cbd5e1; }
.ag-ok{
  background:var(--brand,#16a34a); color:#fff; border:none; border-radius:10px;
  padding:.75rem 2.4rem; font-size:1rem; font-weight:600; letter-spacing:.03em; cursor:pointer;
  box-shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px color-mix(in srgb, var(--brand,#16a34a) 22%, transparent);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, filter .2s ease;
}
.ag-ok:hover{ transform:translateY(-1px); box-shadow:0 7px 20px -6px color-mix(in srgb, var(--brand,#16a34a) 45%, transparent); filter:brightness(1.04); }
.ag-ok:active{ transform:translateY(0); filter:brightness(.95); }
.ag-ok:focus-visible{ outline:2px solid color-mix(in srgb, var(--brand,#16a34a) 55%, white); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .ag-ok{ transition:none } .ag-ok:hover{ transform:none } }

/* Resumo da escolha (na página do produto / checkout) */
.ag-resumo{
  margin-top:.6rem; font-size:.85rem; font-weight:600; color:#14532d;
  background:#f0fdf4; border:1px solid #bbf7d0; border-radius:9px; padding:.55rem .75rem;
}

/* Responsivo: empilha as colunas */
@media (max-width:640px){
  .ag-grid{ grid-template-columns:1fr; }
  .ag-sub-data{ border-right:none; }
  .ag-cal{ border-right:none; border-bottom:1px solid #eef0f2; }
  .ag-titulo{ font-size:.8rem; }
}