/* Tuva eier-app, Phase C of SPEC-tidy-app: folds (native <details>) on the Payments screen and the customer card. Uses only the colours of app.css. No inline styles (CSP). */
.paytidy,.custmore{margin-top:12px}
.paytidy > summary,.custmore > summary{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:48px;padding:6px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);cursor:pointer;list-style:none;font-weight:700}
.paytidy > summary::-webkit-details-marker,.custmore > summary::-webkit-details-marker{display:none}
.paytidy > summary::after,.custmore > summary::after{content:"";margin-left:auto;flex:none;width:12px;height:7px;background:var(--muted);clip-path:polygon(0 0,100% 0,50% 100%);transition:transform .15s}
.paytidy[open] > summary::after,.custmore[open] > summary::after{transform:rotate(180deg)}
.paytidy > summary h2,.paytidy > summary h3{margin:0;font-size:18px;flex:0 1 auto}
.paytidy > summary h3{font-size:16px}
.paytidy[open] > summary,.custmore[open] > summary{margin-bottom:10px}
.paytidy > summary:focus-visible,.custmore > summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.paytidy > summary::after,.custmore > summary::after{transition:none}}
.payfree{margin:6px 0 0}
#pay-rules .paytidy{margin-top:8px}
#pay-rules .paytidy > summary{background:transparent;border-style:dashed}
#pay-rules .paytidy > summary::before{content:none}
#pay-rules .swrow{margin-top:0}
#pay-more-fold .swrow{margin-top:4px}
/* one line per rule: the service and its price on the left, the choice on the right; the amount box and «= N kr» only appear for a deposit */
.paydeps{gap:0;margin-top:6px}
.paydep{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;padding:10px 0}
.paydepname{display:flex;flex-direction:column;align-items:flex-start;gap:0;grid-column:1;grid-row:1}
.paydepname .hint{white-space:normal}
.paydepin{display:contents}
.paydep .paydepin .select,.paydep .paydepin .select:only-of-type{grid-column:2;grid-row:1;width:auto;max-width:13rem}
.paydepin .input{grid-column:1;grid-row:2;margin-top:4px}
.paydepunit{grid-column:2;grid-row:2;justify-self:start}
.paydepunit:empty{display:none}
.paydepeq{grid-column:1 / -1;grid-row:3}
.paydep .err{grid-row:4}
.paydep .err:empty{display:none}
/* a phone: the choice gets the whole row under the service, so «Deposit - fixed amount» is never cut */
@media (max-width:520px){
  .paydepname{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 8px}        /* the name and its price share a line */
  .paydep{padding:8px 0}
  .paydep .paydepin .select,.paydep .paydepin .select:only-of-type{grid-column:1 / -1;grid-row:2;width:100%;max-width:none}
  .paydepin .input{grid-column:1;grid-row:3}
  .paydepunit{grid-row:3}
  .paydepeq{grid-row:4}
  .paydep .err{grid-row:5}
}
/* the customer card: the fold holds everything after the note */
.custmore{padding-bottom:4px}
/* Marketing hub (C1): one fold per tool. Closed = icon, name, one status line. Open = the tool's switches and «Change». */
.tdmk{margin-top:10px}
.tdmk[open]{margin-bottom:16px}
.tdmk > summary{flex-wrap:nowrap;gap:12px;padding:8px 14px}
.tdmk > summary .rowmain{flex:1;min-width:0}
.tdmk > summary .rowmeta{font-weight:400}
.tdmk .mkd{margin:0 0 6px}
.tdmk .mkline{margin:4px 0}
.tdmk .btnrow{margin-top:10px}