/* ===========================================================
   Brico y Taller, página de pago
   Mesma estrutura do checkout da Carmen Moda: formulário à esquerda,
   resumo num painel à direita e, no telemóvel, resumo dobrado numa
   barra. Letra, cores e logótipo são os da Brico y Taller.
   =========================================================== */

body.is-checkout{
  --ck-preto:#101214;--ck-borda:#d9d6d0;--ck-suave:#e8e6e2;--ck-painel:var(--cream);--ck-raio:8px;
  background:#fff;color:var(--ink);
}

/* ---------- cabeçalho ---------- */
.ck-header{border-bottom:1px solid var(--ck-suave);background:#fff}
.ck-header__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ck-header__in{
  justify-self:end;width:100%;max-width:640px;height:72px;padding:0 44px 0 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.ck-brand{display:block}
/* O y desce abaixo da linha de base: os 2px centram as letras. */
.ck-brand img{display:block;width:auto;height:28px;transform:translateY(2px)}
.ck-secure{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap}
.ck-secure svg{flex:none}

/* ---------- barra do resumo no telemóvel ---------- */
.ck-toggle{
  display:none;width:100%;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border:0;border-bottom:1px solid var(--ck-suave);
  background:var(--ck-painel);color:var(--ck-preto);font-size:14px;font-weight:500;text-align:left;
}
.ck-toggle__label{display:inline-flex;align-items:center;gap:8px;min-width:0}
.ck-toggle__chev{flex:none;transition:transform .2s ease}
.ck-toggle[aria-expanded="true"] .ck-toggle__chev{transform:rotate(180deg)}
.ck-toggle__total{flex:none;color:var(--ck-preto);font-size:17px;font-weight:700}

/* ---------- duas colunas ---------- */
.ck-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100vh - 73px)}
.ck-main{order:1;justify-self:end;width:100%;max-width:640px;padding:36px 44px 32px 20px}
.ck-aside{order:2;background:var(--ck-painel);border-left:1px solid var(--ck-suave)}
.ck-aside__in{position:sticky;top:0;max-width:500px;padding:36px 20px 36px 44px}

/* ---------- aviso de pagamento não concluído ---------- */
.ck-aviso{
  margin:0 0 22px;padding:11px 13px;border:1px solid #FECDCA;border-radius:var(--ck-raio);
  background:#FEF3F2;color:var(--erro);font-size:13.5px;line-height:1.45;
}

/* ---------- secções ---------- */
.ck-sec+.ck-sec{margin-top:34px}
.ck-sec__head{margin:0 0 14px}
.ck-sec h2{margin:0;font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--ck-preto)}
.ck-sub{margin:-6px 0 14px;font-size:13.5px;color:var(--muted)}

/* ---------- campos com rótulo flutuante ---------- */
.fl{position:relative;margin-bottom:12px}
.fl input,.fl select{
  display:block;width:100%;height:52px;padding:20px 13px 6px;border:1px solid var(--ck-borda);
  border-radius:var(--ck-raio);background:#fff;color:var(--ink);font:inherit;font-size:15px;line-height:1.2;
  outline:none;transition:border-color .15s ease,box-shadow .15s ease;-webkit-appearance:none;appearance:none;
}
.fl select{padding-right:38px;cursor:pointer}
.fl label{
  position:absolute;left:14px;top:16px;max-width:calc(100% - 28px);overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis;font-size:14px;color:var(--muted);pointer-events:none;
  transition:top .12s ease,font-size .12s ease;
}
.fl input:focus+label,.fl input:not(:placeholder-shown)+label,.fl--select label{top:7px;font-size:11.5px}
.fl input:focus,.fl select:focus{border-color:var(--ck-preto);box-shadow:0 0 0 1px var(--ck-preto)}
.fl--select::after{
  content:"";position:absolute;right:15px;top:21px;width:8px;height:8px;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg);pointer-events:none;
}
.fl--icon input{padding-right:46px}
.ck-help{
  position:absolute;right:4px;top:4px;width:44px;height:44px;padding:0;border:0;background:none;
  color:var(--muted);cursor:help;display:grid;place-items:center;-webkit-tap-highlight-color:transparent;
}
.ck-help svg{display:block}
.ck-tip{
  position:absolute;right:0;bottom:calc(100% + 8px);z-index:5;width:250px;padding:10px 12px;border-radius:8px;
  background:var(--ck-preto);color:#fff;font-size:12.5px;line-height:1.45;box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.fl.is-error input,.fl.is-error select{border-color:var(--erro);box-shadow:0 0 0 1px var(--erro)}
.ck-err{display:none;margin:6px 0 0;font-size:13px;line-height:1.35;color:var(--erro)}
.ck-err.is-on{display:block}
.ck-err--pago.is-on{
  margin-top:12px;padding:11px 13px;border:1px solid #FECDCA;border-radius:var(--ck-raio);
  background:#FEF3F2;font-size:13.5px;line-height:1.45;
}

.ck-row2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.ck-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 12px}

.ck-check{
  display:flex;align-items:center;gap:12px;min-height:44px;margin:0;padding:4px 0;
  font-size:14px;line-height:1.35;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
}
.ck-check input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--ck-preto);cursor:pointer}

/* ---------- método de envío ---------- */
.ck-ship{border:1px solid var(--ck-borda);border-radius:var(--ck-raio);overflow:hidden}
.ck-ship__opt{
  position:relative;display:flex;align-items:center;gap:14px;min-height:64px;padding:15px 16px;
  cursor:pointer;background:#fff;transition:background-color .15s ease;-webkit-tap-highlight-color:transparent;
}
.ck-ship__opt.is-on{background:var(--amarelo-soft);box-shadow:inset 0 0 0 1.5px var(--ck-preto);border-radius:var(--ck-raio)}
.ck-ship__opt input{position:absolute;opacity:0;pointer-events:none}
.ck-ship__radio{flex:none;width:18px;height:18px;border:1.5px solid #b5b5b5;border-radius:50%;background:#fff}
.ck-ship__opt.is-on .ck-ship__radio{border:5.5px solid var(--ck-preto)}
.ck-ship__opt input:focus-visible~.ck-ship__radio{outline:2px solid var(--ck-preto);outline-offset:2px}
.ck-ship__text{flex:1;min-width:0}
.ck-ship__days{font-size:13.5px;color:#3f3f42}
.ck-ship__price{flex:none;font-size:14px;font-weight:600}
.ck-ship__price.is-free{color:var(--green);letter-spacing:.02em}

/* ---------- pagamento ---------- */
#pagamento-stripe{min-height:120px}
.ck-carregando{display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:120px;font-size:.88rem;color:var(--muted)}
.ck-spinner{
  width:16px;height:16px;flex:0 0 16px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--ck-preto);animation:ck-girar .7s linear infinite;
}
@keyframes ck-girar{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ck-spinner{animation-duration:2.4s}}

.ck-pay{
  width:100%;height:56px;margin-top:20px;border:0;border-radius:var(--ck-raio);
  background:var(--btn);color:var(--btn-ink);font-size:16px;font-weight:600;letter-spacing:.01em;
  display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:background-color .15s ease,transform .1s ease;-webkit-tap-highlight-color:transparent;
}
.ck-pay:hover{background:var(--btn-hi)}
.ck-pay:active{transform:scale(.99)}
.ck-pay:disabled{opacity:.6;cursor:not-allowed;transform:none}
.ck-pay svg{flex:none;margin-top:-1px}
.ck-legal{margin:14px 0 0;font-size:12.5px;color:var(--muted);line-height:1.7}

.ck-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;margin-top:30px;padding-top:8px;
  border-top:1px solid var(--ck-suave);font-size:12.5px;
}
.ck-foot a{display:inline-block;padding:10px 0;color:var(--muted);text-decoration:none}
.ck-foot a:hover{color:var(--ck-preto);text-decoration:underline;text-underline-offset:2px}
.ck-copy{margin-left:auto;padding:10px 0;color:var(--muted)}

/* ---------- resumo do pedido ---------- */
.ck-items{display:flex;flex-direction:column;gap:16px}
.ck-item{display:flex;gap:14px;align-items:flex-start}
.ck-item__img{position:relative;flex:none;width:64px;height:64px}
.ck-item__img img{width:64px;height:64px;border-radius:8px;border:1px solid rgba(0,0,0,.08);object-fit:contain;background:#fff;display:block}
.ck-item__qty{
  position:absolute;top:-8px;right:-8px;min-width:21px;height:21px;padding:0 6px;border-radius:11px;
  background:var(--amarelo);color:var(--ink);font-size:12px;font-weight:700;line-height:21px;text-align:center;
}
.ck-item__body{flex:1;min-width:0}
.ck-item__top{display:flex;justify-content:space-between;gap:10px}
.ck-item__name{margin:0;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ck-preto)}
.ck-item__price{flex:none;font-size:14px;text-align:right}

.qty-stepper{display:inline-flex;align-items:center;margin-top:8px;border-radius:999px;border:1px solid var(--ck-borda);background:#fff}
.qty-stepper button{width:30px;height:28px;display:flex;align-items:center;justify-content:center;padding:0;background:none;border:0;color:var(--ck-preto)}
.qty-stepper button:first-child{border-radius:999px 0 0 999px}
.qty-stepper button:last-child{border-radius:0 999px 999px 0}
.qty-stepper button:hover{background:var(--cream-2)}
.qty-stepper button:disabled{opacity:.35;cursor:not-allowed;background:none}
.qty-stepper span{min-width:26px;text-align:center;font-size:13px;font-weight:600}

.ck-vazio{margin:0;font-size:14px;line-height:1.6}
.ck-vazio a{font-weight:700}

.ck-totals{margin-top:22px;font-size:14px}
.ck-trow{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px}
.ck-trow small{color:var(--muted);font-size:12.5px}
.ck-trow .is-free{color:var(--green);font-weight:600}
.ck-trow--disc span:last-child{color:var(--green);font-weight:600}
.ck-trow--total{align-items:baseline;margin:16px 0 2px;font-size:18px;font-weight:600;color:var(--ck-preto)}
.ck-trow--total small{margin-right:6px;font-size:12px;font-weight:500}
.ck-trow--total b{font-size:21px;font-weight:700}

.ck-trust{margin-top:24px;padding-top:18px;border-top:1px solid #dfddd8}
.ck-trust__line{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.ck-trust__line svg{flex:none}
.ck-cards{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ck-cards img{width:38px;height:24.7px;display:block}

/* ---------- telemóvel e tablet ---------- */
@media(max-width:999px){
  .ck-header__grid{display:block}
  .ck-header__in{max-width:600px;margin:0 auto;height:60px;padding:0 20px}
  .ck-toggle{display:flex}
  .ck-wrap{display:block;min-height:0}
  .ck-aside{border-left:0;border-bottom:1px solid var(--ck-suave)}
  .ck-aside:not(.is-open){display:none}
  .ck-aside__in{position:static;max-width:600px;margin:0 auto;padding:20px}
  .ck-main{max-width:600px;margin:0 auto;padding:24px 20px calc(28px + env(safe-area-inset-bottom))}
  .ck-sec+.ck-sec{margin-top:30px}
  .ck-sec h2{font-size:20px}
  .ck-pay{height:58px;font-size:17px}
  .qty-stepper button{width:38px;height:36px}
  .qty-stepper span{min-width:30px;font-size:14px}
}
/* O iPhone aproxima a página em campos com menos de 16px. */
@media(max-width:999px),(pointer:coarse){.fl input,.fl select{font-size:16px}}
@media(max-width:560px){
  .ck-row3{grid-template-columns:1fr 1fr}
  .ck-row3>.fl--select{grid-column:1/-1}
  .ck-copy{margin-left:0}
}
@media(max-width:360px){
  .ck-header__in,.ck-main,.ck-aside__in{padding-left:16px;padding-right:16px}
  .ck-toggle{padding:14px 16px;font-size:13px}
  .ck-brand img{height:25px}
  .ck-secure{font-size:12px}
}
/* Sem isto a barra do resumo quebra em duas linhas nos ecrãs mais estreitos. */
@media(max-width:340px){
  .ck-toggle{font-size:12.5px}
  .ck-toggle__label>svg:first-child{display:none}
  .ck-toggle__total{font-size:15px}
}
.ck-toggle__label span{white-space:nowrap}