/* tyasiapp.app/ebay-fee-calculator (WEBSITE-TYASI-MKT-008). Loaded after site.css on that page only. */
.fees-date { margin-top: -6px; color: var(--faint); font-size: 14px; }
.calc { display: grid; gap: 20px; margin-top: 28px; }
.calc fieldset { display: grid; gap: 16px; margin: 0; padding: 20px 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); min-width: 0; }
.calc legend { padding: 0 6px; color: var(--violet-bright); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.calc label { display: grid; align-content: start; gap: 8px; color: var(--foreground); font-size: 14px; font-weight: 620; }
.calc input[type="text"], .calc select {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px;
  background: rgba(255, 255, 255, .06); color: var(--foreground); font: 400 16px/1.4 var(--font-sans);
}
.calc select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.calc select option { background: var(--background); color: var(--foreground); }
.calc input:focus-visible, .calc select:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.calc .check { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; line-height: 1.45; }
.calc .check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--violet); }
.hint { color: var(--faint); font-size: 13px; font-weight: 400; line-height: 1.5; }
@media (min-width: 680px) {
  .calc fieldset { grid-template-columns: 1fr 1fr; }
  .calc fieldset > label:has(select), .calc .check { grid-column: 1 / -1; }
}

.calc-results { margin-top: 28px; padding: 6px 22px 18px; border: 1px solid rgba(var(--violet-rgb), .35); border-radius: 14px; background: rgba(var(--violet-rgb), .06); }
.calc-results h2 { margin: 18px 0 8px; }
.calc-results dl { margin: 0; }
.calc-results .row { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 10px 0; border-top: 1px solid var(--border); }
.calc-results .row:first-child { border-top: 0; }
.calc-results dt { color: var(--muted); font-size: 15px; }
.calc-results dd { margin: 0; color: var(--foreground); font: 650 16px/1.5 var(--font-mono); text-align: right; }
.calc-results dd.how { grid-column: 1 / -1; color: var(--faint); font: 400 13px/1.5 var(--font-sans); text-align: left; }
.calc-results .row--fees dt, .calc-results .row--profit dt { color: var(--foreground); font-weight: 650; }
.calc-results .row--profit dd:not(.how) { color: var(--mint); font-size: 20px; }
.calc-results .row--profit dd.loss { color: #fca5a5; }
.calc-results > .hint { margin: 12px 0 0; }

.calc-cta { margin-top: 32px; }
.calc-cta h2 { margin: 0 0 8px; }
.calc-cta p { margin: 0; }
.calc-cta .cta { margin-top: 18px; }

.fee-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 14px; }
.fee-table caption { margin-bottom: 8px; color: var(--faint); font-size: 13px; text-align: left; }
.fee-table th, .fee-table td { padding: 10px 8px 10px 0; border-top: 1px solid var(--border); color: var(--muted); line-height: 1.5; text-align: left; vertical-align: top; }
.fee-table th { color: var(--foreground); font-size: 13px; }
.fee-table td:first-child { width: 45%; color: var(--foreground); }

.examples { padding-left: 22px; }
.examples li { margin-top: 12px; }
.examples strong { color: var(--foreground); }
.example-note { display: block; color: var(--faint); font-size: 14px; }
/* The fee cheat sheet offer (WEBSITE-TYASI-SF-004): a waitlist form that asks for the sheet. */
.cheat-sheet { margin-top: 32px; }
.cheat-sheet h2 { margin: 0 0 8px; }
.cheat-sheet > p { margin: 0; }
.cheat-sheet .waitlist { margin-top: 18px; }
/* The calculator's two modes and the markdown floor (WEBSITE-TYASI-SF-015). */
.calc-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.calc-modes a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid rgba(var(--violet-rgb), .45); border-radius: 999px;
  background: rgba(var(--violet-rgb), .08); color: var(--foreground); font: 650 15px/1 var(--font-sans); text-decoration: none;
}
.calc-modes a[aria-current="page"] { border-color: transparent; background: var(--violet-bright); color: #14082a; }
.calc-mode[hidden] { display: none; }
#mode-floor > h2:first-child { margin-top: 28px; }
.floor-big { margin: 4px 0 0; color: var(--mint); font: 700 40px/1.1 var(--font-mono); }
.floor-how { margin: 8px 0 4px; color: var(--muted); font-size: 15px; }
.floor-share { margin-top: 24px; }
.floor-share[hidden] { display: none; }
.floor-share h2 { margin: 0; font-size: 18px; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.share-buttons[hidden] { display: none; }
.share-buttons button {
  min-height: 44px; padding: 0 18px; border: 1px solid rgba(var(--violet-rgb), .45); border-radius: 999px; cursor: pointer;
  background: rgba(var(--violet-rgb), .1); color: var(--foreground); font: 650 14px/1 var(--font-sans);
}
.share-buttons button:first-child { border-color: transparent; background: var(--violet-bright); color: #14082a; }
.share-buttons button:hover { background: rgba(var(--violet-rgb), .2); }
.share-buttons button:first-child:hover { background: #ddd6fe; }
.share-status:empty { display: none; }