/* ============================================================
   Calculadora de Margem de Lucro Real — Unika Magazine
   Espelho visual do calc-markup.css. Mesmos tokens e layout.
   Acrescenta estados de cor para lucro (verde) e prejuizo (vermelho).
   ============================================================ */

.unika-margem{--uc-bg:#FFFFFF;--uc-surface:#F8F8F7;--uc-ink:#0A0A0A;--uc-ink-700:#1F1F1E;--uc-ink-600:#3D3D3A;--uc-ink-400:#7A7A75;--uc-ink-300:#A3A39E;--uc-ink-200:#C9C9C5;--uc-ink-100:#E4E4E1;--uc-accent:#FF4A17;--uc-accent-hover:#D93400;--uc-accent-press:#A82700;--uc-sans:"Archivo",Helvetica,Arial,sans-serif;--uc-serif:"Newsreader",Georgia,serif;--uc-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-content:start;align-items:start;font-family:var(--uc-sans);color:var(--uc-ink);max-width:1240px;margin:0 auto}
@media(max-width:900px){.unika-margem{grid-template-columns:minmax(0,1fr);gap:24px}}
.unika-margem *,.unika-margem *::before,.unika-margem *::after{box-sizing:border-box}

/* ---------- Eyebrow ---------- */
.unika-margem__eyebrow{font-family:var(--uc-sans);font-size:12px;font-weight:600;line-height:1.2;letter-spacing:.09em;text-transform:uppercase;color:var(--uc-ink-400);margin:0}

/* ---------- Form column ---------- */
.unika-margem__form{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-content:start;margin:0;padding:0;border:0}
.unika-margem__group{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start;margin:0;padding:0 0 24px;border:0;border-bottom:1px solid var(--uc-ink-100);min-inline-size:0}
.unika-margem__group:last-child{border-bottom:0;padding-bottom:0}
.unika-margem__legend{display:block;width:100%;font-family:var(--uc-sans);font-size:12px;font-weight:600;line-height:1.2;letter-spacing:.09em;text-transform:uppercase;color:var(--uc-ink-400);margin:0 0 4px;padding:0}
.unika-margem__field{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-content:start}
.unika-margem__label{font-family:var(--uc-sans);font-size:15px;font-weight:500;line-height:1.35;color:var(--uc-ink)}
.unika-margem__hint{font-family:var(--uc-serif);font-size:14px;line-height:1.5;color:var(--uc-ink-400);margin:0}

/* Inputs */
.unika-margem__inputwrap{position:relative;display:flex;align-items:center;background:var(--uc-bg);border:1px solid var(--uc-ink-200);border-radius:4px;padding:0}
.unika-margem__inputwrap:focus-within{border-color:var(--uc-accent);box-shadow:0 0 0 2px rgba(255,74,23,.22)}
.unika-margem__prefix,.unika-margem__suffix{font-family:var(--uc-mono);font-size:14px;line-height:1;color:var(--uc-ink-400);padding:0 12px;flex:0 0 auto;-webkit-user-select:none;user-select:none;align-self:stretch;display:flex;align-items:center}
.unika-margem__prefix{border-right:1px solid var(--uc-ink-100)}
.unika-margem__suffix{border-left:1px solid var(--uc-ink-100)}
.unika-margem input[type=number]{width:100%;min-width:0;font-family:var(--uc-mono);font-size:17px;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.2;color:var(--uc-ink);background:transparent;border:0;border-radius:4px;padding:12px;margin:0;outline:0;-moz-appearance:textfield;appearance:textfield}
.unika-margem input[type=number]::-webkit-outer-spin-button,.unika-margem input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Segments (radio visual) */
.unika-margem__segments{display:flex;gap:0;border:1px solid var(--uc-ink-200);border-radius:4px;overflow:hidden}
.unika-margem__seg-input{position:absolute;opacity:0;width:0;height:0}
.unika-margem__seg-label{flex:1;display:flex;align-items:center;justify-content:center;padding:11px 8px;font-family:var(--uc-sans);font-size:14px;font-weight:500;color:var(--uc-ink-400);cursor:pointer;border-right:1px solid var(--uc-ink-100);transition:background .12s ease-out,color .12s ease-out;text-align:center;line-height:1.25;min-height:44px}
.unika-margem__seg-label:last-child{border-right:0}
.unika-margem__seg-input:checked+.unika-margem__seg-label{background:var(--uc-ink);color:#fff}

/* ---------- Result column (painel escuro, sticky) ---------- */
.unika-margem__resultcol{position:sticky;top:96px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start;min-inline-size:0}
@media(max-width:900px){.unika-margem__resultcol{position:static}}

.unika-margem__panel{background:var(--uc-ink) !important;color:#FFFFFF !important;border-radius:8px;padding:32px}
.unika-margem__panel .unika-margem__eyebrow{color:var(--uc-ink-300)}

.unika-margem__price{font-family:var(--uc-sans);font-weight:700;font-size:64px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--uc-accent);margin:12px 0 0;word-break:break-word}
@media(max-width:600px){.unika-margem__price{font-size:48px}}
.unika-margem__price-note{font-family:var(--uc-serif);font-size:15px;line-height:1.55;color:var(--uc-ink-200);margin:12px 0 0}

.unika-margem__panel hr,.unika-margem__divider{border:0;border-top:1px solid #2A2A28;margin:24px 0}

.unika-margem__dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0;margin:0;font-size:14px}
.unika-margem__dt{font-family:var(--uc-sans);font-weight:400;color:var(--uc-ink-300);padding:8px 0;border-top:1px solid #2A2A28;min-width:0}
.unika-margem__dd{font-family:var(--uc-mono);font-variant-numeric:tabular-nums;color:#FFFFFF !important;text-align:right;margin:0;padding:8px 0 8px 16px;border-top:1px solid #2A2A28;white-space:nowrap}
.unika-margem__dt:first-of-type,.unika-margem__dd:first-of-type{border-top:0}
.unika-margem__dd--strong{color:#FF9A75;font-weight:600}

/* Actions */
.unika-margem__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.unika-margem__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--uc-sans);font-size:15px;font-weight:600;line-height:1.2;border:1px solid transparent;border-radius:4px;padding:13px 20px;cursor:pointer;background:var(--uc-accent);color:#FFFFFF;transition:background-color .12s linear,border-color .12s linear,color .12s linear}
.unika-margem__btn:hover{background:var(--uc-accent-hover);color:#FFFFFF}
.unika-margem__btn:active{background:var(--uc-accent-press);transform:translateY(1px)}
.unika-margem__btn--ghost{background:var(--uc-bg);color:var(--uc-ink);border-color:var(--uc-ink-200);width:100%}
.unika-margem__btn--ghost:hover{background:var(--uc-ink);color:#FFFFFF;border-color:var(--uc-ink)}

.unika-margem__disclaimer{font-family:var(--uc-serif);font-size:14px;line-height:1.6;color:var(--uc-ink-400);margin:16px 0 0}
.unika-margem__disclaimer a{color:var(--uc-ink-400);text-decoration:underline;text-underline-offset:2px}
.unika-margem__disclaimer a:hover{color:#fff}

/* ---------- Metodologia (fora do grid 2col) ---------- */
.unika-margem__method{background:var(--uc-surface);border:1px solid var(--uc-ink-100);border-radius:4px;padding:24px 28px;margin-top:48px;max-width:1240px}
.unika-margem__method-title{font-family:var(--uc-sans);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--uc-ink-400);margin:0 0 12px}
.unika-margem__formula{font-family:var(--uc-mono);font-size:14px;line-height:1.7;color:var(--uc-ink);background:#fff;border:1px solid var(--uc-ink-100);border-radius:4px;padding:12px 16px;margin:0 0 12px;overflow-x:auto;white-space:pre}
.unika-margem__method-body{font-family:var(--uc-serif);font-size:15px;line-height:1.65;color:var(--uc-ink-600);margin:0;max-width:80ch}
.unika-margem__method-body a{color:var(--uc-ink)}

/* ---------- FAQ (fora do grid 2col) ---------- */
.unika-margem__faq{margin-top:48px;max-width:1240px}
.unika-margem__faq-title{font-family:var(--uc-sans);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--uc-ink-400);margin:0 0 16px}
.unika-margem__faq details{border-bottom:1px solid var(--uc-ink-100)}
.unika-margem__faq details:first-of-type{border-top:1px solid var(--uc-ink-100)}
.unika-margem__faq summary{font-family:var(--uc-sans);font-size:16px;font-weight:500;line-height:1.4;color:var(--uc-ink);padding:16px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px}
.unika-margem__faq summary::-webkit-details-marker{display:none}
.unika-margem__faq summary::after{content:"+";font-family:var(--uc-mono);font-size:18px;color:var(--uc-ink-300);flex-shrink:0;transition:transform 180ms ease-out}
.unika-margem__faq details[open] summary::after{transform:rotate(45deg)}
.unika-margem__faq-answer{font-family:var(--uc-serif);font-size:15px;line-height:1.65;color:var(--uc-ink-600);padding:0 0 20px;max-width:80ch}

@media(prefers-reduced-motion:reduce){.unika-margem *{transition:none!important}}

/* Hero lead do calculador */
.elementor .unika-tool-lead.u-lead{max-width:74ch}

/* ---------- Estados de resultado (lucro x prejuizo) ---------- */
.unika-margem{--uc-ok:#3FB27F;--uc-ok-soft:#8FE0B8;--uc-err:#FF6B5A;--uc-err-soft:#FFB3A8}
.unika-margem__price.is-profit{color:var(--uc-ok)}
.unika-margem__price.is-loss{color:var(--uc-err)}
.unika-margem__price.is-zero{color:var(--uc-ink-200)}
.unika-margem__dd--profit{color:var(--uc-ok-soft) !important;font-weight:600}
.unika-margem__dd--loss{color:var(--uc-err-soft) !important;font-weight:600}

/* Barra de composicao do preco: custo | imposto | cartao | outras | lucro */
.unika-margem__stack{display:flex;height:14px;width:100%;border-radius:99px;overflow:hidden;margin:20px 0 10px;background:#2A2A28}
.unika-margem__stack span{display:block;height:100%}
.unika-margem__seg-custo{background:#6E6E69}
.unika-margem__seg-imposto{background:#B98A00}
.unika-margem__seg-cartao{background:#7A5AF0}
.unika-margem__seg-outras{background:#C25A00}
.unika-margem__seg-lucro{background:var(--uc-ok)}
.unika-margem__seg-lucro.is-loss{background:var(--uc-err)}
.unika-margem__legenda{display:flex;flex-wrap:wrap;gap:12px 16px;margin:0 0 4px;padding:0;list-style:none}
.unika-margem__legenda li{display:flex;align-items:center;gap:6px;font-family:var(--uc-sans);font-size:12px;color:var(--uc-ink-300)}
.unika-margem__dot{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.unika-margem__dot--custo{background:#6E6E69}
.unika-margem__dot--imposto{background:#B98A00}
.unika-margem__dot--cartao{background:#7A5AF0}
.unika-margem__dot--outras{background:#C25A00}
.unika-margem__dot--lucro{background:var(--uc-ok)}