/* ═══════════════════════════════════════════════════════════════
   PF Pre-Checkout Form — Frontend CSS v7.0
   Design premium: tokens CSS, micro-animações, validação inline
   ═══════════════════════════════════════════════════════════════ */

:root {
  --pf-primary:          #4f46e5;
  --pf-primary-dark:     #4338ca;
  --pf-primary-rgb:      79,70,229;
  --pf-primary-light:    #ede9fe;
  --pf-primary-lighter:  #f5f3ff;
  --pf-secondary:        #7c3aed;
  --pf-success:          #059669;
  --pf-success-bg:       #ecfdf5;
  --pf-error:            #dc2626;
  --pf-error-bg:         #fef2f2;
  --pf-error-border:     #fca5a5;
  --pf-warning:          #d97706;
  --pf-border:           #e2e8f0;
  --pf-bg:               #ffffff;
  --pf-bg-alt:           #f8fafc;
  --pf-bg-input:         #f9fafb;
  --pf-text:             #0f172a;
  --pf-text-md:          #334155;
  --pf-muted:            #64748b;
  --pf-muted-light:      #94a3b8;
  --pf-r:                18px;
  --pf-r-sm:             10px;
  --pf-r-xs:             6px;
  --pf-shadow-lg:        0 20px 60px rgba(79,70,229,.12), 0 4px 16px rgba(0,0,0,.07);
  --pf-transition:       .22s cubic-bezier(.4,0,.2,1);
  --pf-transition-slow:  .38s cubic-bezier(.4,0,.2,1);
  --pf-font:             'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pf-input-h:          52px;
}

.pf-pcf-wrap *, .pf-pcf-wrap *::before, .pf-pcf-wrap *::after { box-sizing: border-box; }

.pf-pcf-err {
  color: var(--pf-error); font-weight: 600; padding: 1rem;
  background: var(--pf-error-bg); border: 1px solid var(--pf-error-border);
  border-radius: var(--pf-r-sm); display: block;
}

/* ── Container ──────────────────────────────────────────────── */
.pf-pcf-wrap {
  font-family: var(--pf-font);
  font-size: 16px;
  color: var(--pf-text);
  background: var(--pf-bg);
  border: 1px solid rgba(226,232,240,.8);
  border-radius: var(--pf-r);
  box-shadow: var(--pf-shadow-lg);
  max-width: 580px;
  margin: 2.5rem auto;
  padding: 0;
  overflow: hidden;
  position: relative;
  animation: pf-fadeUp .5s cubic-bezier(.34,1.56,.64,1) both;
  transition: box-shadow var(--pf-transition-slow);
}
.pf-pcf-wrap:hover { box-shadow: 0 24px 70px rgba(79,70,229,.15), 0 4px 20px rgba(0,0,0,.07); }

/* ── Barra de progresso ─────────────────────────────────────── */
.pf-pcf-progress {
  background: linear-gradient(135deg, var(--pf-primary) 0%, var(--pf-secondary) 100%);
  padding: 1.6rem 2rem 1.35rem;
  position: relative;
  overflow: hidden;
}
.pf-pcf-progress::before {
  content: ''; position: absolute; top: -50px; right: -30px;
  width: 160px; height: 160px; background: rgba(255,255,255,.06); border-radius: 50%;
}
.pf-pcf-progress::after {
  content: ''; position: absolute; bottom: -30px; left: -10px;
  width: 110px; height: 110px; background: rgba(255,255,255,.04); border-radius: 50%;
}
.pf-pcf-progress-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .65rem; position: relative; z-index: 1;
}
.pf-pcf-progress-title {
  font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.65);
  text-transform: uppercase; letter-spacing: .1em;
}
.pf-pcf-progress-pct {
  font-size: .85rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums;
}
.pf-pcf-bar {
  height: 6px; background: rgba(255,255,255,.2); border-radius: 999px;
  overflow: hidden; margin-bottom: .9rem; position: relative; z-index: 1;
}
.pf-pcf-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,.9), #fff);
  border-radius: 999px; width: 0%;
  transition: width .55s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 12px rgba(255,255,255,.6);
}
.pf-pcf-labels {
  display: flex; gap: 4px; position: relative; z-index: 1;
}
.pf-pcf-lbl {
  flex: 1; font-size: .6rem; font-weight: 500;
  color: rgba(255,255,255,.45); text-align: center; line-height: 1.3;
  transition: color var(--pf-transition), font-weight var(--pf-transition);
  padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-pcf-lbl.active { color: #fff; font-weight: 800; }
.pf-pcf-lbl.done   { color: rgba(255,255,255,.7); }
.pf-pcf-lbl.done::before { content: '✓ '; font-size: .55rem; }

/* ── Corpo ──────────────────────────────────────────────────── */
.pf-pcf-body { padding: 2rem; position: relative; }

/* ── Notices ────────────────────────────────────────────────── */
.pf-pcf-notices { display: none; margin-bottom: 1.25rem; animation: pf-fadeIn .25s ease; }
.pf-pcf-notice {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .9rem 1rem; border-radius: var(--pf-r-sm);
  font-size: .875rem; font-weight: 500; line-height: 1.5;
}
.pf-pcf-notice--err {
  background: var(--pf-error-bg); color: var(--pf-error);
  border: 1px solid var(--pf-error-border); border-left: 4px solid var(--pf-error);
}

/* ── Steps ──────────────────────────────────────────────────── */
.pf-pcf-step { will-change: transform, opacity; }
.pf-pcf-step[hidden] {
  display: block !important; visibility: hidden; pointer-events: none;
  position: absolute; top: 0; left: 0; right: 0;
}

.pf-pcf-step-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 700; color: var(--pf-primary);
  background: var(--pf-primary-lighter); border: 1px solid rgba(79,70,229,.15);
  padding: .28rem .9rem; border-radius: 999px; margin-bottom: .7rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.pf-pcf-step-badge::before {
  content: ''; width: 6px; height: 6px; background: var(--pf-primary);
  border-radius: 50%; display: inline-block;
}

.pf-pcf-step-title {
  font-size: 1.45rem; font-weight: 800; margin: 0 0 .35rem;
  color: var(--pf-text); letter-spacing: -.025em; line-height: 1.2;
}
.pf-pcf-step-desc {
  font-size: .88rem; color: var(--pf-muted); margin: 0 0 1.6rem; line-height: 1.6;
}

/* ── Layout dos campos ──────────────────────────────────────── */
.pf-pcf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pf-pcf-field {
  display: flex; flex-direction: column;
  margin-bottom: 1.2rem; position: relative;
}
.pf-pcf-field--sm  { max-width: 155px; }
.pf-pcf-field--cep { max-width: 210px; }

/* Labels */
.pf-pcf-field > label,
.pf-pcf-field > label:first-child {
  font-size: .8rem; font-weight: 600; color: var(--pf-text-md);
  margin-bottom: .45rem; letter-spacing: .015em;
  display: flex; align-items: center; gap: .25rem;
  transition: color var(--pf-transition);
}
.pf-pcf-field:focus-within > label { color: var(--pf-primary); }
.pf-pcf-field label span[aria-hidden] { color: var(--pf-error); font-weight: 700; }

/* Inputs, selects, textareas */
.pf-pcf-field input:not([type=checkbox]):not([type=radio]),
.pf-pcf-field select,
.pf-pcf-field textarea {
  height: var(--pf-input-h);
  padding: 0 1rem;
  border: 1.5px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  font-size: .93rem; font-family: var(--pf-font); font-weight: 500;
  color: var(--pf-text); background: var(--pf-bg-input);
  outline: none;
  transition: border-color var(--pf-transition), box-shadow var(--pf-transition),
              background var(--pf-transition), transform var(--pf-transition);
  width: 100%; -webkit-appearance: none; appearance: none;
}
.pf-pcf-field textarea {
  height: auto; padding: .85rem 1rem; resize: vertical;
  min-height: 90px; line-height: 1.6;
}
.pf-pcf-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem; cursor: pointer;
}

/* Foco */
.pf-pcf-field input:not([type=checkbox]):not([type=radio]):focus,
.pf-pcf-field select:focus,
.pf-pcf-field textarea:focus {
  border-color: var(--pf-primary); background: var(--pf-bg);
  box-shadow: 0 0 0 3.5px rgba(var(--pf-primary-rgb),.12);
  transform: translateY(-1px);
}

/* Erro */
.pf-pcf-field input.pf-err,
.pf-pcf-field select.pf-err,
.pf-pcf-field textarea.pf-err {
  border-color: var(--pf-error) !important;
  background: var(--pf-error-bg);
  box-shadow: 0 0 0 3px rgba(220,38,38,.1);
}
/* Sucesso */
.pf-pcf-field input.pf-ok,
.pf-pcf-field select.pf-ok {
  border-color: var(--pf-success); background: var(--pf-bg);
}
.pf-pcf-field input::placeholder,
.pf-pcf-field textarea::placeholder { color: var(--pf-muted-light); font-weight: 400; }

/* Mensagem de erro inline */
.pf-pcf-err-msg {
  font-size: .74rem; color: var(--pf-error); margin-top: .38rem;
  min-height: 1.1em; font-weight: 500;
  display: flex; align-items: center; gap: .25rem;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.pf-pcf-err-msg:not(:empty) { opacity: 1; transform: translateY(0); }
.pf-pcf-err-msg:not(:empty)::before { content: '⚠'; font-size: .65rem; }

/* ── Fieldsets radio / checkbox ─────────────────────────────── */
.pf-pcf-fieldset {
  border: 1.5px solid var(--pf-border); border-radius: var(--pf-r-sm);
  padding: 1rem 1.1rem; margin: 0 0 1.2rem;
  background: var(--pf-bg-input);
  transition: border-color var(--pf-transition), box-shadow var(--pf-transition);
}
.pf-pcf-fieldset legend {
  font-size: .8rem; font-weight: 600; color: var(--pf-text-md);
  padding: 0 8px; transition: color var(--pf-transition);
}
.pf-pcf-fieldset:focus-within {
  border-color: var(--pf-primary);
  box-shadow: 0 0 0 3.5px rgba(var(--pf-primary-rgb),.12);
}
.pf-pcf-fieldset:focus-within legend { color: var(--pf-primary); }

.pf-pcf-radio,
.pf-pcf-check {
  display: flex; align-items: center; gap: 10px;
  font-size: .9rem; font-weight: 500; cursor: pointer;
  padding: .55rem .65rem; margin: .2rem 0;
  color: var(--pf-text-md); border-radius: var(--pf-r-xs);
  transition: background var(--pf-transition), color var(--pf-transition);
}
.pf-pcf-radio:hover,
.pf-pcf-check:hover { background: rgba(var(--pf-primary-rgb),.05); color: var(--pf-primary); }
.pf-pcf-radio input,
.pf-pcf-check input {
  width: 18px; height: 18px; margin: 0;
  accent-color: var(--pf-primary); flex-shrink: 0; cursor: pointer;
}

/* ── CEP status ─────────────────────────────────────────────── */
.pf-cep-status {
  font-size: .75rem; font-weight: 500; margin-top: .35rem; min-height: 1.1em;
  display: flex; align-items: center; gap: .3rem; transition: all .2s ease;
}
.pf-cep-status.loading { color: var(--pf-muted); }
.pf-cep-status.ok      { color: var(--pf-success); }
.pf-cep-status.err     { color: var(--pf-error); }

/* ── Navegação (botões) ─────────────────────────────────────── */
.pf-pcf-nav {
  display: flex; justify-content: flex-end; align-items: center;
  gap: .75rem; margin-top: 1.75rem; padding-top: 1.4rem;
  border-top: 1px solid var(--pf-border);
}
.pf-pcf-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: 0 1.5rem; height: 46px; border-radius: var(--pf-r-sm);
  font-size: .9rem; font-weight: 600; font-family: var(--pf-font);
  cursor: pointer; border: none;
  transition: all var(--pf-transition);
  line-height: 1; letter-spacing: .01em; white-space: nowrap;
  position: relative; overflow: hidden;
}
.pf-pcf-btn:focus-visible { outline: 3px solid var(--pf-primary); outline-offset: 2px; }

.pf-pcf-btn--back {
  background: transparent; color: var(--pf-muted);
  border: 1.5px solid var(--pf-border); padding: 0 1rem;
}
.pf-pcf-btn--back:hover {
  background: var(--pf-bg-alt); color: var(--pf-text-md);
  border-color: #cbd5e1; transform: translateX(-2px);
}
.pf-pcf-btn--back svg { transition: transform var(--pf-transition); }
.pf-pcf-btn--back:hover svg { transform: translateX(-3px); }

.pf-pcf-btn--next {
  background: var(--pf-primary); color: #fff; margin-left: auto;
  box-shadow: 0 4px 14px rgba(var(--pf-primary-rgb),.3);
}
.pf-pcf-btn--next:hover {
  background: var(--pf-primary-dark);
  box-shadow: 0 6px 22px rgba(var(--pf-primary-rgb),.42); transform: translateY(-2px);
}
.pf-pcf-btn--next:active { transform: scale(.97) translateY(0); }
.pf-pcf-btn--next svg { transition: transform var(--pf-transition); }
.pf-pcf-btn--next:hover svg { transform: translateX(3px); }

.pf-pcf-btn--submit {
  background: linear-gradient(135deg, var(--pf-primary), var(--pf-secondary));
  color: #fff; height: 50px; padding: 0 2rem; font-size: .95rem;
  box-shadow: 0 4px 20px rgba(var(--pf-primary-rgb),.38);
}
.pf-pcf-btn--submit:hover {
  filter: brightness(1.09);
  box-shadow: 0 8px 30px rgba(var(--pf-primary-rgb),.5); transform: translateY(-2px);
}
.pf-pcf-btn--submit:active   { transform: scale(.97) translateY(0); }
.pf-pcf-btn--submit:disabled {
  opacity: .6; cursor: not-allowed; transform: none !important; filter: none !important;
}

/* ── Dots de progresso ──────────────────────────────────────── */
.pf-pcf-dots {
  display: flex; justify-content: center; gap: 7px;
  margin-top: 1.4rem; padding-bottom: .25rem;
}
.pf-pcf-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pf-border); transition: all var(--pf-transition-slow);
}
.pf-pcf-dot.active {
  background: var(--pf-primary); width: 24px; border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(var(--pf-primary-rgb),.15);
}
.pf-pcf-dot.done { background: var(--pf-success); }

/* ── Spinner ────────────────────────────────────────────────── */
.pf-spin { animation: pf-spin .8s linear infinite; }
@keyframes pf-spin { to { transform: rotate(360deg); } }
.pf-btn-loader { display: inline-flex; align-items: center; gap: .5rem; }

/* ── Admin order meta ───────────────────────────────────────── */
.pf-order-meta {
  margin-top: 8px; padding: 8px 12px; background: #f0f0f1;
  border-left: 4px solid var(--pf-primary); border-radius: 0 4px 4px 0; font-size: 13px;
}

/* ── Banner ─────────────────────────────────────────────────── */
.pf-pcf-banner { position: relative; overflow: hidden; border-radius: var(--pf-radius, 18px) var(--pf-radius, 18px) 0 0; }
.pf-pcf-banner--image { display: flex; align-items: flex-end; }
.pf-pcf-banner-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pf-pcf-progress--over-banner { position: relative; z-index: 2; width: 100%; background: transparent !important; padding-bottom: 14px; }
.pf-pcf-banner--gradient { display: flex; flex-direction: column; justify-content: flex-end; }
.pf-pcf-progress-inner { padding: 20px 24px 16px; }
.pf-pcf-progress--over-banner .pf-pcf-progress-inner { padding: 16px 24px 16px; }

/* ── Tela de sucesso ────────────────────────────────────────── */
.pf-success-screen {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 3rem 2rem;
  animation: pf-fadeUp .5s ease both;
}
.pf-success-icon {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, var(--pf-success), #34d399);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem; box-shadow: 0 8px 28px rgba(5,150,105,.3);
  animation: pf-popIn .5s cubic-bezier(.34,1.56,.64,1) .1s both;
}
.pf-success-icon svg { color: #fff; }
.pf-success-title { font-size: 1.5rem; font-weight: 800; color: var(--pf-text); margin: 0 0 .5rem; }
.pf-success-msg { font-size: .95rem; color: var(--pf-muted); margin: 0 0 1.5rem; line-height: 1.6; }
.pf-success-progress { width: 100%; max-width: 280px; height: 4px; background: var(--pf-border); border-radius: 999px; overflow: hidden; margin: 0 auto; }
.pf-success-progress-fill { height: 100%; background: linear-gradient(90deg, var(--pf-success), #34d399); border-radius: 999px; width: 0%; transition: width 3s linear; }

/* ── Animações ──────────────────────────────────────────────── */
@keyframes pf-fadeUp {
  from { opacity: 0; transform: translateY(22px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pf-fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes pf-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.pf-shake { animation: pf-shake .4s ease; }
@keyframes pf-popIn {
  from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .pf-pcf-body { padding: 1.5rem 1.2rem; }
  .pf-pcf-progress { padding: 1.3rem 1.2rem 1.1rem; }
  .pf-pcf-row { grid-template-columns: 1fr; gap: 0; }
  .pf-pcf-step-title { font-size: 1.2rem; }
  .pf-pcf-lbl { font-size: .53rem; }
  .pf-pcf-field--sm, .pf-pcf-field--cep { max-width: 100%; }
  .pf-pcf-btn--next { margin-left: 0; flex: 1; justify-content: center; }
  .pf-pcf-btn--submit { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-pcf-wrap, .pf-pcf-btn, .pf-pcf-dot, .pf-pcf-fill {
    animation: none !important; transition: none !important;
  }
}