/* ═══════════════════════════════════════════════════════════════════════
   Formulário de pedido por destino.
   Mesma linguagem do site; no telemóvel ocupa o ecrã todo, porque um
   formulário com oito campos dentro de uma caixinha não se preenche.
   ═══════════════════════════════════════════════════════════════════════ */

.pd{
  border:0; padding:0; background:var(--card); color:var(--ink);
  width:min(620px, calc(100vw - 2rem)); max-height:min(90dvh, 940px);
  border-radius:var(--r-l); box-shadow:0 40px 90px -26px rgba(4,34,42,.6);
}
.pd::backdrop{background:rgba(4,34,42,.62); backdrop-filter:blur(3px)}
.pd__f{display:flex; flex-direction:column; max-height:inherit}

.pd__cab{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex:none;
  padding:1.4rem 1.5rem 1.15rem; border-bottom:1px solid var(--line-2);
}
.pd__dest{
  margin:0 0 .3rem; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--olive-deep);
}
.pd__cab h2{font-family:var(--f-disp); font-weight:400; font-size:1.6rem; line-height:1.15; margin:0}
.pd__sub{margin:.4rem 0 0; font-size:.9rem; color:var(--ink-2); max-width:46ch}
.pd__x{background:none; border:0; cursor:pointer; padding:.35rem; color:var(--ink-3); flex:none}
.pd__x svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
.pd__x:hover{color:var(--ink)}

.pd__corpo{padding:1.35rem 1.5rem; overflow-y:auto; display:flex; flex-direction:column; gap:1.1rem}

.pd__g{display:grid; grid-template-columns:1fr 1fr; gap:.85rem}
.pd__c{display:flex; flex-direction:column; gap:.3rem}
.pd__c--full{grid-column:1/-1}
.pd__c > span{font-size:.8rem; font-weight:500; color:var(--ink-2)}
.pd__c input, .pd__c textarea{
  font-family:var(--f-body); font-size:.95rem; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:9px; padding:.62rem .72rem; width:100%;
}
.pd__c textarea{resize:vertical; line-height:1.55}
.pd__c input:focus, .pd__c textarea:focus{
  outline:none; border-color:var(--olive); box-shadow:0 0 0 3px rgba(152,188,59,.2);
}
.pd__nota{margin:-.5rem 0 0; font-size:.78rem; color:var(--ink-3)}

.pd__bl{border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem; margin:0; display:flex; flex-direction:column; gap:.75rem}
.pd__bl legend{font-size:.8rem; font-weight:600; color:var(--ink); padding:0 .4rem}
.pd__bl legend i{font-style:normal; font-weight:400; color:var(--ink-3); font-size:.74rem}

.pd__chk{display:inline-flex; align-items:center; gap:.55rem; font-size:.88rem; cursor:pointer; color:var(--ink-2)}
.pd__chk input{width:17px; height:17px; accent-color:var(--olive)}

.pd__pills{display:flex; flex-wrap:wrap; gap:.4rem}
.pd__pill input{position:absolute; opacity:0; width:0; height:0}
.pd__pill span{
  display:inline-block; cursor:pointer; font-size:.84rem; padding:.42rem .8rem;
  border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink-2);
  transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.pd__pill span:hover{border-color:var(--olive)}
.pd__pill input:checked + span{background:var(--abyss); border-color:var(--abyss); color:#fff}
.pd__pill input:focus-visible + span{outline:2px solid var(--surf); outline-offset:2px}

.pd__escolhas{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.5rem}
.pd__escolha{
  position:relative; cursor:pointer; display:flex; flex-direction:column; gap:.15rem;
  padding:.7rem .8rem; border:1px solid var(--line); border-radius:10px; background:#fff;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.pd__escolha input{position:absolute; opacity:0; width:0; height:0}
.pd__escolha b{font-size:.9rem; font-weight:600}
.pd__escolha i{font-style:normal; font-size:.76rem; color:var(--ink-3); line-height:1.4}
.pd__escolha:hover{border-color:var(--olive)}
.pd__escolha:has(input:checked){border-color:var(--olive); box-shadow:0 0 0 2px rgba(152,188,59,.25)}
.pd__escolha:has(input:focus-visible){outline:2px solid var(--surf); outline-offset:2px}

.pd__erro{
  margin:0; background:#FBEAE6; color:#A8321F; font-size:.86rem;
  padding:.6rem .8rem; border-radius:9px;
}

.pd__pe{
  display:flex; gap:.6rem; justify-content:flex-end; flex:none;
  padding:1rem 1.5rem; border-top:1px solid var(--line-2); background:var(--paper-2);
}

.pd__fim{padding:3rem 2rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.75rem}
.pd__visto{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--olive); margin-bottom:.4rem;
}
.pd__visto svg{width:28px; height:28px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.pd__fim h2{font-family:var(--f-disp); font-weight:400; font-size:1.7rem; margin:0}
.pd__fim p{margin:0; color:var(--ink-2); max-width:42ch; font-size:.95rem}
.pd__fim .btn{margin-top:.75rem}

@media (max-width:760px){
  .pd{width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0}
  .pd__g{grid-template-columns:1fr}
  .pd__cab{padding-top:max(1.4rem, env(safe-area-inset-top))}
  .pd__pe{padding-bottom:max(1rem, env(safe-area-inset-bottom))}
  .pd__c input, .pd__c textarea{font-size:16px}  /* trava o zoom do iOS */
}

/* ─── acrescentos das perguntas-chave ─── */

/* A dica do destino vago. Pede, nao impede: nunca bloqueia o envio. */
.pd__dica{
  margin:0; background:#FBF3E2; color:#7A5410; border-left:3px solid #D9A93F;
  font-size:.85rem; line-height:1.55; padding:.65rem .8rem; border-radius:0 8px 8px 0;
}

/* A pista das idades fica colada ao campo, porque e sobre aquele campo. */
.pd__pista{
  display:block; font-style:normal; font-size:.76rem; color:var(--ink-3); margin-top:.3rem;
}

/* Com datas flexiveis os campos de data perdem forca, mas ficam: ha quem
   tenha uma ideia aproximada e queira escreve-la na mesma. */
.pd__g--esbatido{ opacity:.45; transition:opacity .25s var(--ease) }
.pd__g--esbatido:focus-within{ opacity:1 }

.pd__c--curto{ max-width:220px }
.pd__c input:disabled{ background:var(--paper-2); color:var(--ink-3); cursor:not-allowed }

/* ═══════════════════════════════════════════════════════════════════════
   O formulário como página própria, em /pedido

   É o link que se partilha numa campanha, por isso quem chega não vem do
   site: vem do Instagram, de um anúncio ou de uma mensagem. A página tem
   de se explicar sozinha em três segundos, e daí o bloco de sinais à
   esquerda antes de pedir seja o que for.
   ═══════════════════════════════════════════════════════════════════════ */

.pag-pedido{ background:var(--paper); margin:0 }

.pp__topo{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem clamp(1rem,4vw,2.5rem); background:var(--abyss);
}
.pp__marca img{ height:44px; width:auto }
.pp__marca-fb{ display:inline-flex; align-items:center; gap:.5rem; color:#fff; font-weight:600 }
.pp__marca-fb svg{ width:26px; height:26px; fill:var(--olive-lift) }
.pp__zap{
  color:var(--surf); text-decoration:none; font-size:.88rem; font-weight:500;
  border-bottom:1px solid rgba(56,176,194,.4); padding-bottom:2px;
}
.pp__zap:hover{ color:#fff; border-color:#fff }

.pp{ padding:clamp(2rem,5vw,4rem) clamp(1rem,4vw,2.5rem) }
.pp__in{
  max-width:1140px; margin:0 auto; display:grid; gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); align-items:start;
}

.pp__texto{ position:sticky; top:2rem }
.pp__texto h1{
  font-family:var(--f-disp); font-weight:400; margin:.9rem 0 0;
  font-size:clamp(2rem,4.2vw,3rem); line-height:1.06; letter-spacing:-.02em;
  font-variation-settings:"opsz" 110,"SOFT" 20,"WONK" 1; text-wrap:balance;
}
.pp__texto h1 em{ font-style:italic; color:var(--olive-deep) }
.pp__lede{ margin:1.1rem 0 0; color:var(--ink-2); font-size:1.02rem; line-height:1.68; max-width:46ch }

.pp__sinais{
  list-style:none; margin:2rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.1rem;
}
.pp__sinais li{ display:flex; flex-direction:column; gap:.2rem }
.pp__sinais b{
  font-family:var(--f-disp); font-weight:500; font-size:1.3rem; color:var(--olive-deep);
  letter-spacing:-.01em;
}
.pp__sinais span{ font-size:.86rem; line-height:1.5; color:var(--ink-2) }

/* O formulário perde o aspecto de janela e ganha o de cartão. */
.pd--pagina{
  position:static; display:block; width:100%; max-height:none;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:0 20px 50px -28px rgba(4,34,42,.3); overflow:hidden;
}
.pd--pagina .pd__f{ max-height:none }
.pd--pagina .pd__corpo{ overflow:visible }
.pd--pagina .pd__pe{ position:static; justify-content:stretch }
.pd--pagina .pd__pe .btn{ flex:1; justify-content:center }

.pp__pe{
  padding:2rem clamp(1rem,4vw,2.5rem) 3rem; text-align:center;
  color:var(--ink-3); font-size:.86rem; line-height:1.7;
}
.pp__pe a{ color:var(--teal) }
.pp__pe-legal{ margin:.4rem 0 0; font-size:.78rem }

@media (max-width:900px){
  .pp__in{ grid-template-columns:1fr }
  .pp__texto{ position:static }
  .pp__sinais{ grid-template-columns:repeat(2,1fr); gap:.9rem }
}
@media (max-width:420px){
  .pp__sinais{ grid-template-columns:1fr }
}