/* ============================================================
   GPI Pharmacy — main.css
   Tokens · Base · Componentes · Cabeçalho/Rodapé · Responsivo
   ============================================================ */

/* ---------- TOKENS (claro = padrão da loja) ---------- */
:root{
  --petrol:#0F3D3A; --teal:#147F72; --teal-600:#116B60; --green:#3DA57F;
  --ground:#FFFFFF; --surface:#F4F8F6; --surface-2:#E9F1ED;
  --ink:#15211E; --muted:#5B6B67; --line:#E0E9E6; --line-2:#CFDDD8;
  --success:#2F9E6C; --success-bg:#E7F5EE;
  --warning:#B07C0C; --warning-bg:#FAF1DA;
  --danger:#A93B33; --danger-bg:#F9EAE8;
  --info:#3C6E8C; --info-bg:#E9F1F6;
  --r-sm:6px; --r:10px; --r-lg:16px; --pill:999px;
  --sh-1:0 1px 2px rgba(16,40,38,.05),0 1px 1px rgba(16,40,38,.04);
  --sh-2:0 10px 30px -12px rgba(15,61,58,.30);
  --font-display:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --grad:linear-gradient(100deg,var(--petrol) 0%,var(--teal) 55%,var(--green) 100%);
  --wa:#25925a; --wa-600:#1f7d4d;
}

/* Dark opt-in (pronto para toggle futuro; NÃO ativado automaticamente
   para não deixar o chrome do Kadence meio-escuro). */
:root[data-theme="dark"]{
  --petrol:#8FD8C6; --teal:#43B6A2; --teal-600:#5CC3B0; --green:#5FCB9E;
  --ground:#0A1615; --surface:#0F211E; --surface-2:#16302B;
  --ink:#E9F2EF; --muted:#9BB1AC; --line:#20403A; --line-2:#2C524A;
  --success:#48B27E; --success-bg:#12332A; --warning:#D3A23F; --warning-bg:#33290F;
  --danger:#D07B72; --danger-bg:#341C1A; --info:#7FB0CC; --info-bg:#12262E;
  --sh-2:0 12px 34px -14px rgba(0,0,0,.6);
  --grad:linear-gradient(100deg,#0E3A37 0%,#157F72 55%,#3DA57F 100%);
}
:root[data-theme="dark"] body{background:var(--ground);color:var(--ink)}

/* ---------- BASE ---------- */
body{font-family:var(--font-body);color:var(--ink);line-height:1.6}
h1,h2,h3,h4,h5,h6,.entry-title,.wp-block-heading{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.15}
.entry-title,h1{font-weight:800}
h2,h3{font-weight:700}
a{color:var(--teal)}
a:hover{color:var(--teal-600)}
::selection{background:var(--green);color:#fff}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ---------- TOP ANNOUNCEMENT BAR ---------- */
.gpi-topbar{background:var(--petrol);color:#eafaf5;font-size:12.5px;text-align:center;
  padding:8px 14px;letter-spacing:.01em;font-family:var(--font-body)}
.gpi-topbar a{color:#bfeee0;text-decoration:underline}

/* ---------- BUTTONS (utilitário p/ patterns Gutenberg) ---------- */
.gpi-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:15px;padding:12px 22px;
  border-radius:var(--r);border:1.5px solid transparent;cursor:pointer;transition:.15s;
  line-height:1;text-decoration:none}
.gpi-btn-primary{background:var(--teal);color:#fff}
.gpi-btn-primary:hover{background:var(--teal-600);color:#fff}
.gpi-btn-outline{background:transparent;color:var(--teal);border-color:var(--teal)}
.gpi-btn-outline:hover{background:var(--surface-2)}
.gpi-btn-secondary{background:var(--surface-2);color:var(--ink);border-color:var(--line-2)}
.gpi-btn-wa{background:var(--wa);color:#fff}
.gpi-btn-wa:hover{background:var(--wa-600);color:#fff}

/* ---------- BADGES ---------- */
.gpi-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:5px 10px;border-radius:var(--pill);line-height:1;border:1px solid transparent;
  font-family:var(--font-body)}
.gpi-badge--rx{background:var(--petrol);color:#fff}
.gpi-badge--norx{background:var(--success-bg);color:var(--success)}
.gpi-badge--manual{background:var(--warning-bg);color:var(--warning)}
.gpi-badge--br{background:var(--surface-2);color:var(--ink);border-color:var(--line-2)}
.gpi-badge--us{background:var(--info-bg);color:var(--info)}
.gpi-badge--cert{background:var(--surface-2);color:var(--teal);border-color:var(--line-2)}
.gpi-badge--out{background:var(--danger-bg);color:var(--danger)}
.gpi-badge--new{background:var(--green);color:#fff}
.gpi-badge--top{background:var(--petrol);color:#fff}

/* ---------- ALERTS ---------- */
.gpi-alert{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r);font-size:14px;
  border:1px solid transparent;line-height:1.5}
.gpi-alert .ico{flex:none;font-weight:700}
.gpi-alert--info{background:var(--info-bg);border-color:color-mix(in srgb,var(--info) 30%,transparent)}
.gpi-alert--success{background:var(--success-bg);border-color:color-mix(in srgb,var(--success) 30%,transparent)}
.gpi-alert--warn{background:var(--warning-bg);border-color:color-mix(in srgb,var(--warning) 35%,transparent)}
.gpi-alert--error{background:var(--danger-bg);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}

/* ---------- CARDS / STEPS / TIMELINE (patterns) ---------- */
.gpi-card{background:var(--ground);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:22px}
.gpi-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.gpi-step{background:var(--ground);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.gpi-step .num{width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:13px;display:grid;place-items:center;margin-bottom:10px}

.gpi-tl{display:flex;flex-direction:column}
.gpi-tl .t{display:flex;gap:14px;padding-bottom:20px;position:relative}
.gpi-tl .t:before{content:"";position:absolute;left:12px;top:26px;bottom:-2px;width:2px;background:var(--line)}
.gpi-tl .t:last-child:before{display:none}
.gpi-tl .mk{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:13px;z-index:1;background:var(--surface-2);color:var(--muted);border:2px solid var(--line)}
.gpi-tl .t.done .mk{background:var(--success);color:#fff;border-color:var(--success)}
.gpi-tl .t.active .mk{background:var(--teal);color:#fff;border-color:var(--teal);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 22%,transparent)}
.gpi-tl .t.warn .mk{background:var(--warning);color:#fff;border-color:var(--warning)}

/* ---------- WHATSAPP FLOATING BUTTON ---------- */
.gpi-wa-float{position:fixed;right:18px;bottom:18px;z-index:9990;display:inline-flex;
  align-items:center;gap:9px;background:var(--wa);color:#fff;border-radius:var(--pill);
  padding:12px 18px;font-family:var(--font-display);font-weight:600;font-size:14.5px;
  box-shadow:0 8px 24px -6px rgba(37,146,90,.5);text-decoration:none;transition:.15s}
.gpi-wa-float:hover{background:var(--wa-600);color:#fff;transform:translateY(-1px)}
.gpi-wa-float svg{width:20px;height:20px}
.gpi-wa-float .lbl{display:inline}
@media (max-width:600px){.gpi-wa-float{padding:12px}.gpi-wa-float .lbl{display:none}}

/* ---------- CUSTOM FOOTER ---------- */
body.gpi-custom-footer #colophon,
body.gpi-custom-footer footer.site-footer{display:none !important}
.gpi-footer{background:var(--petrol);color:#cfe9e2;padding:40px 0 22px}
.gpi-footer .in{max-width:1160px;margin:0 auto;padding:0 20px}
.gpi-footer .cols{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:26px}
.gpi-footer img.gpi-flogo{height:34px;width:auto;margin-bottom:12px}
.gpi-footer h5{color:#fff;font-family:var(--font-display);font-size:13px;margin:0 0 10px;letter-spacing:.02em}
.gpi-footer a,.gpi-footer p{color:#bfe0d8;font-size:13px;display:block;margin:0 0 7px;text-decoration:none}
.gpi-footer a:hover{color:#fff;text-decoration:underline}
.gpi-footer .fine{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:16px;
  font-size:11.5px;color:#9dc7bd;line-height:1.6}
@media (max-width:820px){.gpi-footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.gpi-footer .cols{grid-template-columns:1fr}}

/* ---------- HERO / SEÇÕES (patterns Gutenberg) ---------- */
.gpi-hero{background:var(--grad);color:#fff;border-radius:var(--r-lg);padding:clamp(28px,5vw,52px)}
.gpi-hero h1,.gpi-hero h2{color:#fff}
.gpi-hero p{color:rgba(255,255,255,.9)}
.gpi-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--teal);font-weight:600}
.gpi-hero .gpi-eyebrow{color:rgba(255,255,255,.85)}

/* ---------- ACESSIBILIDADE / MOVIMENTO ---------- */
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition:none !important}}