/* PayPal Fee Calculator — tool-specific styles */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:1rem;box-shadow:var(--shadow)}
.section{padding:1rem}
.kicker{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;font-size:.78rem}
.p{color:var(--muted)}

/* Layout */
.fj-calc{display:flex;flex-direction:column;gap:1rem}
.fj-calc>*{min-width:0}
@media (min-width: 800px){
  .fj-calc{display:grid;grid-template-areas:"form results";grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);align-items:start;gap:1rem}
  #formPane{grid-area:form}
  #resultsPane{grid-area:results}
}

.group{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.group-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem}

input,select{width:100%;padding:.6rem .7rem;border:1px solid var(--border);border-radius:.6rem;background:var(--surface);color:var(--text)}
input:focus-visible,select:focus-visible{outline:none;box-shadow:var(--focus)}
label{font-weight:600;font-size:.92rem}
.small{font-size:.84rem;color:var(--muted)}
.hr{height:1px;background:var(--border);margin:1rem 0}

.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:.7rem;padding:.7rem 1rem;font-weight:700;border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:transform .06s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--accent));color:#06230f;border:none}
.badge{display:inline-block;padding:.15rem .5rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:.75rem;color:var(--muted)}

.result{display:grid;grid-template-columns:1fr;gap:.8rem}
.sum{display:flex;align-items:center;justify-content:space-between;border:1px dashed var(--border);border-radius:.7rem;padding:.6rem .8rem;background:var(--surface)}
.sum b{font-size:1.1rem}
.note{font-size:.9rem;color:var(--muted)}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.55rem .6rem;border-bottom:1px solid var(--border);text-align:left}
.table th{font-size:.86rem;color:var(--muted);font-weight:700}

/* Advanced */
.adv summary{list-style:none;cursor:pointer;padding:.6rem .8rem;border:1px solid var(--border);border-radius:.6rem;background:var(--surface);font-weight:700}
.adv[open] summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.adv>*:not(summary){padding:.8rem;border:1px solid var(--border);border-top:0;border-bottom-left-radius:.6rem;border-bottom-right-radius:.6rem}

/* Nested details for Invoice Builder */
.adv-sub summary{list-style:none;cursor:pointer;padding:.5rem .7rem;border:1px solid var(--border);border-radius:.6rem;background:var(--surface);font-weight:700}
.adv-sub[open] summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.adv-sub>*:not(summary){padding:.8rem;border:1px solid var(--border);border-top:0;border-bottom-left-radius:.6rem;border-bottom-right-radius:.6rem}

/* Feedback (optional — if you choose to reuse) */
.fj-fab{position:fixed !important; right:16px !important; bottom:18px !important; z-index:70 !important; border:1px solid var(--border) !important; background:linear-gradient(135deg,var(--brand),var(--accent)) !important; color:#06230f !important; font-weight:700 !important; padding:.7rem 1rem !important; border-radius:999px !important; box-shadow:var(--shadow) !important; cursor:pointer !important; transition:transform .06s ease, filter .15s ease !important}
.fj-fab:hover{transform:translateY(-1px); filter:brightness(1.02)}
.fj-fab:active{transform:translateY(0)}
.fj-modal{position:fixed;inset:0;display:none !important;pointer-events:none;visibility:hidden;align-items:center;justify-content:center;z-index:70}
.fj-modal[open]{display:flex !important;pointer-events:auto;visibility:visible}
.fj-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.fj-dialog{position:relative;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:1rem;width:min(600px,92vw);padding:1rem;box-shadow:var(--shadow)}
.fj-row{display:grid;gap:.5rem;margin:.5rem 0}
.fj-row-2{grid-template-columns:1fr 1fr}
.fj-dialog h3{margin:.2rem 0 .6rem}
.fj-dialog textarea{min-height:120px;resize:vertical}
.fj-close{position:absolute;right:.6rem;top:.6rem;border:1px solid var(--border);background:var(--surface);border-radius:.5rem;padding:.3rem .5rem}
.fj-note{font-size:.8rem;color:var(--muted)}
/* Dark mode refinements */
[data-theme="dark"] .panel{background:var(--panel);}