/* ============================================================
   DeliverySaaS — PREMIUM V17
   Camada final de polimento visual + animações + microinterações.
   Não altera HTML/lógica — só reforça o design já existente.
   ============================================================ */

:root{
  --v17-orange:#ff5a1f;--v17-orange2:#ffb703;--v17-ink:#0f172a;
  --v17-ease:cubic-bezier(.16,.8,.24,1);
  --v17-shadow-sm:0 8px 24px rgba(15,23,42,.07);
  --v17-shadow-md:0 18px 46px rgba(15,23,42,.11);
  --v17-shadow-lg:0 32px 90px rgba(15,23,42,.18);
  --v17-glass:rgba(255,255,255,.92);
}

*{-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased}

/* fade suave de entrada da página inteira */
body{animation:v17BodyIn .5s var(--v17-ease) both}
@keyframes v17BodyIn{from{opacity:0}to{opacity:1}}

/* ------------------------------------------------------------
   SCROLL REVEAL — habilitado só quando o JS confirma suporte
   (evita FOUC / quebra sem JavaScript)
   ------------------------------------------------------------ */
html.v17-anim .landing-features article,
html.v17-anim .landing-steps > div,
html.v17-anim .landing-price__card,
html.v17-anim .landing-client__grid,
html.v17-anim .landing-categorias__chip,
html.v17-anim .card-resumo,
html.v17-anim .analytics-card,
html.v17-anim .top-produtos-card,
html.v17-anim .pedidos-secao-card,
html.v17-anim .card-kpi-dash,
html.v17-anim .produto-card-premium,
html.v17-anim .pedido-card,
html.v17-anim .perfil-card,
html.v17-anim .perfil-side,
html.v17-anim .secao-categoria-premium{
  opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--v17-ease),transform .6s var(--v17-ease);
}
html.v17-anim .in-view{opacity:1!important;transform:none!important}

/* stagger — até 8 itens dentro do mesmo container */
html.v17-anim .landing-features article:nth-child(1),html.v17-anim .landing-steps>div:nth-child(1),html.v17-anim .card-resumo:nth-child(1),html.v17-anim .produto-card-premium:nth-child(1){transition-delay:.03s}
html.v17-anim .landing-features article:nth-child(2),html.v17-anim .landing-steps>div:nth-child(2),html.v17-anim .card-resumo:nth-child(2),html.v17-anim .produto-card-premium:nth-child(2){transition-delay:.09s}
html.v17-anim .landing-features article:nth-child(3),html.v17-anim .landing-steps>div:nth-child(3),html.v17-anim .card-resumo:nth-child(3),html.v17-anim .produto-card-premium:nth-child(3){transition-delay:.15s}
html.v17-anim .landing-features article:nth-child(4),html.v17-anim .card-resumo:nth-child(4),html.v17-anim .produto-card-premium:nth-child(4){transition-delay:.21s}
html.v17-anim .produto-card-premium:nth-child(5){transition-delay:.27s}
html.v17-anim .produto-card-premium:nth-child(6){transition-delay:.33s}

@media(prefers-reduced-motion:reduce){
  html.v17-anim *{transition:none!important;animation:none!important;opacity:1!important;transform:none!important}
}

/* ------------------------------------------------------------
   LANDING — blobs flutuantes + reforço de hierarquia
   ------------------------------------------------------------ */
.landing-hero{position:relative}
.landing-hero__glow{filter:blur(70px);animation:v17Float 9s ease-in-out infinite}
.landing-hero__glow--two{animation-duration:12s;animation-delay:1.2s}
@keyframes v17Float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18px,-22px) scale(1.08)}}

.landing-brand__icon{animation:v17Pulse 3.4s ease-in-out infinite}
@keyframes v17Pulse{0%,100%{box-shadow:0 10px 24px rgba(255,90,31,.24)}50%{box-shadow:0 14px 32px rgba(255,90,31,.42)}}

.landing-nav__links a:not(.landing-nav__cta){position:relative}
.landing-nav__links a:not(.landing-nav__cta)::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:linear-gradient(90deg,var(--v17-orange),var(--v17-orange2));transition:right .28s var(--v17-ease);border-radius:2px}
.landing-nav__links a:not(.landing-nav__cta):hover::after{right:0}

.landing-primary,.landing-nav__cta,.btn-destaque{position:relative;overflow:hidden;transition:transform .25s var(--v17-ease),box-shadow .25s var(--v17-ease)!important}
.landing-primary:hover,.landing-nav__cta:hover,.btn-destaque:hover{transform:translateY(-3px) scale(1.015)!important;box-shadow:0 22px 48px rgba(255,90,31,.36)!important}
.landing-secondary{transition:transform .22s var(--v17-ease),opacity .22s ease}
.landing-secondary:hover{transform:translateX(4px);opacity:.85}

.landing-preview{transition:transform .4s var(--v17-ease)!important}
.landing-preview:hover{transform:rotate(0deg) translateY(-6px) scale(1.01)!important}
.fake-food--1,.fake-food--2{animation:v17Float 6s ease-in-out infinite}
.fake-food--2{animation-delay:.8s}

.landing-categorias__chip{transition:transform .22s var(--v17-ease),box-shadow .22s var(--v17-ease)}
.landing-categorias__chip:hover{transform:translateY(-4px)}

.feature-icon{transition:transform .3s var(--v17-ease)}
.landing-features article:hover .feature-icon{transform:scale(1.12) rotate(-4deg)}

.landing-steps>div b{transition:transform .3s var(--v17-ease),box-shadow .3s var(--v17-ease)}
.landing-steps>div:hover b{transform:scale(1.1);box-shadow:0 12px 28px rgba(255,90,31,.28)}

.landing-price__card{position:relative;overflow:hidden!important}
.landing-price__card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 120%,rgba(255,183,3,.16),transparent 55%);pointer-events:none}
.landing-price__value strong{background:linear-gradient(135deg,#fff,#ffd9ad);-webkit-background-clip:text;background-clip:text;color:transparent}

.landing-client__actions .btn{transition:transform .22s var(--v17-ease),box-shadow .22s var(--v17-ease)!important}
.landing-client__actions .btn:hover{transform:translateY(-3px)!important}

.landing-footer{position:relative}

/* ------------------------------------------------------------
   AUTH (login / cadastro) — glass card + blobs animados
   ------------------------------------------------------------ */
.auth-page{position:relative;overflow:hidden}
.auth-page::after{
  content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 38% at 12% 18%,rgba(255,183,3,.30),transparent 60%),
    radial-gradient(32% 32% at 88% 82%,rgba(255,90,31,.28),transparent 60%),
    radial-gradient(24% 24% at 85% 12%,rgba(255,255,255,.10),transparent 60%);
  animation:v17AuthDrift 14s ease-in-out infinite;
}
@keyframes v17AuthDrift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-2%,2%) rotate(2deg)}}
.auth-page .form-box{position:relative;z-index:1;animation:v17CardIn .55s var(--v17-ease) both}
@keyframes v17CardIn{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}

.auth-brandmark{display:inline-flex;animation:v17Float 5s ease-in-out infinite}

.auth-page .campo{position:relative}
.auth-page .campo input,.auth-page .campo select,.auth-page .campo textarea{
  transition:border-color .2s ease,box-shadow .2s ease,transform .15s ease!important;
}
.auth-page .campo input:focus,.auth-page .campo select:focus,.auth-page .campo textarea:focus{
  border-color:var(--v17-orange)!important;
  box-shadow:0 0 0 4px rgba(255,90,31,.14)!important;
  outline:none;
}
.auth-page .btn-primary{position:relative;overflow:hidden;transition:transform .22s var(--v17-ease),box-shadow .22s var(--v17-ease)!important}
.auth-page .btn-primary:hover{transform:translateY(-2px)!important;box-shadow:0 16px 34px rgba(255,90,31,.32)!important}
.auth-page .btn-primary:active{transform:translateY(0) scale(.98)!important}

/* botão "voltar" — padronizado, com ícone animado, em TODAS as telas de auth */
.auth-back{
  display:inline-flex!important;align-items:center;gap:7px;
  font-weight:700!important;color:#475569!important;text-decoration:none!important;
  transition:transform .2s var(--v17-ease),color .2s ease!important;
}
.auth-back:hover{color:var(--v17-orange)!important;transform:translateX(-4px)}

.msg-erro{animation:v17Shake .4s var(--v17-ease)}
@keyframes v17Shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ------------------------------------------------------------
   LOJA PÚBLICA (vitrine) — organização e microinterações
   ------------------------------------------------------------ */
.loja-publica .store-header{transition:box-shadow .25s ease}
.loja-publica .store-brand__logo{transition:transform .3s var(--v17-ease)}
.loja-publica .store-brand:hover .store-brand__logo{transform:rotate(-6deg) scale(1.06)}
.loja-publica .store-nav__cart{transition:transform .22s var(--v17-ease),box-shadow .22s var(--v17-ease)!important}
.loja-publica .store-nav__cart:hover{transform:translateY(-2px)!important}
.loja-publica .store-status i{animation:v17Blink 1.8s ease-in-out infinite}
.loja-publica .store-status.is-open i{background:#22c55e!important}
@keyframes v17Blink{0%,100%{opacity:1}50%{opacity:.45}}

.categorias-tabs-premium a{transition:transform .2s var(--v17-ease),background .2s ease,box-shadow .2s ease!important}
.categorias-tabs-premium a:hover{transform:translateY(-2px)}
.categorias-tabs-premium a.ativo{box-shadow:0 10px 24px rgba(255,90,31,.24)!important}

.produto-card-premium{position:relative;overflow:hidden;transition:transform .3s var(--v17-ease),box-shadow .3s var(--v17-ease)!important}
.produto-card-premium:hover{transform:translateY(-7px)!important;box-shadow:var(--v17-shadow-lg)!important}
.produto-card-premium__image img{transition:transform .5s var(--v17-ease)!important}
.produto-card-premium:hover .produto-card-premium__image img{transform:scale(1.06)!important}
.produto-card-premium__badge{animation:v17Pulse 3s ease-in-out infinite}
.produto-card-premium__action{transition:gap .2s ease,color .2s ease}
.produto-card-premium:hover .produto-card-premium__action{gap:10px}

.secao-categoria-premium__header h2{position:relative;display:inline-block}
.secao-categoria-premium__header h2::after{content:"";position:absolute;left:0;bottom:-6px;width:36px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--v17-orange),var(--v17-orange2))}

.cart-float{transition:transform .25s var(--v17-ease),box-shadow .25s var(--v17-ease)!important;animation:v17CartIn .4s var(--v17-ease) both}
.cart-float:hover{transform:translateY(-4px) scale(1.03)!important}
@keyframes v17CartIn{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------
   PAINEL LOJISTA / ADMIN — sidebar, cards, tabela
   ------------------------------------------------------------ */
.painel-sidebar a{position:relative;transition:background .2s ease,opacity .2s ease,transform .18s ease!important}
.painel-sidebar a:hover{transform:translateX(3px)}
.painel-sidebar a.ativo{position:relative}

.card-resumo,.card-kpi-dash,.analytics-card,.top-produtos-card,.pedidos-secao-card{
  transition:transform .28s var(--v17-ease),box-shadow .28s var(--v17-ease)!important;
}
.card-resumo:hover,.card-kpi-dash:hover{transform:translateY(-5px)!important;box-shadow:var(--v17-shadow-lg)!important}
.card-resumo .num,.card-kpi-dash .num{transition:color .2s ease}

table.tabela tbody tr{transition:background .15s ease}
table.tabela tbody tr:hover{background:#fbf6f0!important}

.btn{transition:transform .2s var(--v17-ease),box-shadow .2s var(--v17-ease),filter .2s ease!important}
.btn:hover{filter:brightness(1.03)}
.btn:active{transform:translateY(1px) scale(.98)!important}
.btn-primary:hover,.btn-destaque:hover{transform:translateY(-2px)!important}

/* ------------------------------------------------------------
   PAINEL CLIENTE — pedidos / perfil
   ------------------------------------------------------------ */
.pedido-card,.perfil-card,.perfil-side{transition:transform .28s var(--v17-ease),box-shadow .28s var(--v17-ease)!important}
.pedido-card:hover{transform:translateY(-5px)!important;box-shadow:var(--v17-shadow-lg)!important}
.pedidos-topbar,.perfil-topbar{transition:box-shadow .2s ease}
.pedido-loja__link,.pedido-recomprar,.perfil-loja-link{transition:transform .2s var(--v17-ease),box-shadow .2s var(--v17-ease)!important}
.pedido-loja__link:hover,.pedido-recomprar:hover,.perfil-loja-link:hover{transform:translateY(-2px)!important}

/* ------------------------------------------------------------
   RIPPLE — clique nos botões (aplicado via JS: .v17-ripple span)
   ------------------------------------------------------------ */
.v17-ripple-wrap{position:relative;overflow:hidden}
.v17-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:v17RippleAnim .55s ease-out forwards;pointer-events:none}
@keyframes v17RippleAnim{to{transform:scale(2.6);opacity:0}}

/* ------------------------------------------------------------
   MOBILE — refinamentos finais
   ------------------------------------------------------------ */
@media(max-width:768px){
  html.v17-anim .produto-card-premium,html.v17-anim .card-resumo{transition-delay:0s!important}
  .landing-hero__glow,.auth-page::after{animation-duration:16s}
  .produto-card-premium:hover{transform:translateY(-3px)!important}
  .card-resumo:hover,.card-kpi-dash:hover{transform:translateY(-2px)!important}
}
@media(max-width:480px){
  .auth-page .form-box{animation-duration:.4s}
}