/* Modulo vendite del gestionale: stili propri, sopra a tonus.css e app-base.css.
   Price list, selling and renewing, payments, expiries, the member's subscription block. Every class starts with vd-;
   the shared pieces (card, btn, pill, kpi, table.data, aiuto-pop popups, bp-scelta choice chips) come from the base. */

/* ------------------------------------------------------------------------------------------------ shared bits */
.gx .vd-none { list-style: none; color: var(--ink-3); padding: 14px 0; margin: 0 }
.gx .vd-more { display: inline-flex; align-items: center; min-height: 40px; font-size: 14px; font-weight: 600; white-space: nowrap }
.gx .vd-link { background: none; border: 0; padding: 0; min-height: 44px; color: var(--brand-primary); font: 600 14px/1 var(--font); cursor: pointer }
.gx .vd-link:hover { text-decoration: underline; text-underline-offset: 3px }
.gx .vd-amount { font-variant-numeric: tabular-nums }
.gx .vd-ko { color: var(--ko) }
.gx .vd-note { margin: 12px 0 0; font-size: 14px }
.gx .vd-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; margin-left: 6px; border-radius: 999px;
  background: var(--bg); color: var(--ink-3); font-size: 13px; font-weight: 600; vertical-align: 2px }
.gx h1 .pill { vertical-align: 4px; margin-left: 6px }

/* an amount field with the euro sign inside */
.gx .vd-eur { position: relative }
.gx .vd-eur::before { content: '€'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none }
.gx .vd-eur input { width: 100%; padding-left: 28px; font-variant-numeric: tabular-nums }

/* choices as chips (bp-scelta from tonus.css): the radio is hidden, the chip shows the choice */
.gx .vd-methods { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px }
.gx .vd-methods legend { padding: 0; margin: 0 0 6px; font-weight: 600; font-size: 14px; color: var(--ink-2) }
.gx .vd-methods .bp-scelta { position: relative; margin: 0; min-height: 44px; padding: 0 16px; border-color: #d5d8e0; background: var(--surface);
  color: var(--ink); font-weight: 600; font-size: 15px; user-select: none }
.gx .vd-methods .bp-scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none }
.gx .vd-methods .bp-scelta:has(input:checked) { border-color: var(--brand-primary); background: var(--brand-primary-soft); color: var(--brand-primary);
  box-shadow: inset 0 0 0 1px var(--brand-primary) }
.gx .vd-methods .bp-scelta:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--brand-primary) 55%, white); outline-offset: 2px }

/* confirm and payment popups (aiuto-pop from tonus.css) */
.gx .vd-pop form { margin: 0 }
.gx .vd-pop h3 { margin-bottom: 2px }
.gx .vd-pop .muted { margin: 0 0 4px }
.gx .vd-pop .btn.block { margin-top: 14px }
.gx .vd-pop .btn.block + .btn.block { margin-top: 8px }
.gx .vd-pop-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px }
.gx .vd-pop-actions .btn { flex: 1 1 140px }
.gx .aiuto-pop input[type=text], .gx .aiuto-pop input[type=date], .gx .aiuto-pop select { width: 100% }

/* forms of this module */
.gx .vd-form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px }
.gx .vd-planform, .gx .vd-fix, .gx .vd-danger { max-width: 760px }
.gx .vd-planform > .form-grid > :first-child { margin-top: 0 }
.gx .vd-planform > .form-grid > :first-child > label:first-child { margin-top: 0 }
.gx .vd-fix h2 { display: flex; align-items: center; margin-bottom: 0 }
.gx .vd-fix .form-grid > div, .gx .vd-planform .form-grid > div { margin-top: 0 }
.gx .vd-inline { display: flex; gap: 8px }
.gx .vd-inline input { flex: 1 1 0; min-width: 0 }
.gx .vd-inline select { flex: 0 0 auto; width: auto }
.gx .vd-danger { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; border-color: #f0c4bf }
.gx .vd-danger h2 { margin: 0 0 4px }
.gx .vd-danger p { margin: 0 }
.gx .vd-empty { text-align: center; padding: 32px 20px }
.gx .vd-empty p { margin: 0 0 10px }
.gx .vd-models { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 14px }

/* ------------------------------------------------------------------------------------------------ price list */
/* the plan form: carnet fields only for a carnet, the course list only for «solo alcuni» */
.gx .vd-planform:has(input[name=tipo][value=periodo]:checked) .vd-only-carnet { display: none }
.gx .vd-planform:has(input[name=tipo][value=ingressi]:checked) .vd-only-tempo { display: none }
.gx .vd-courses .vd-course-list { display: none; flex-basis: 100%; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 12px; margin-top: 4px }
.gx .vd-courses:has(input[name=corsi][value=scelti]:checked) .vd-course-list { display: grid }
.gx .vd-courses .field-err { flex-basis: 100% }
.gx .vd-course-list label.check, .gx .vd-planform label.check { margin: 10px 0 0; min-height: 32px; align-items: center; font-weight: 500; color: var(--ink) }
.gx .vd-planform label.check .aiuto { margin-left: 2px }

/* ------------------------------------------------------------------------------------------------ selling */
.gx .vd-plans { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) }
.gx .vd-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-content: center; min-height: 92px; padding: 18px 20px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink) !important; text-decoration: none !important;
  box-shadow: var(--shadow); transition: border-color .15s, transform .1s, box-shadow .15s }
.gx .vd-plan:hover { border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary) }
.gx .vd-plan:active { transform: translateY(1px) }
.gx .vd-plan-name { font-weight: 700; font-size: 17px; overflow-wrap: anywhere }
.gx .vd-plan-price { grid-row: span 2; align-self: center; font: 700 24px/1 var(--font); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap }
.gx .vd-plan-what { color: var(--ink-3); font-size: 14px }

.gx .vd-sale { max-width: 640px }
.gx .vd-sale-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--brand-primary-soft) }
.gx .vd-sale-plan b { display: block; font-size: 18px; overflow-wrap: anywhere }
.gx .vd-sale-plan small { color: var(--ink-2); font-size: 14px }
.gx .vd-hint { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-weight: 600; font-size: 14px }
.gx .vd-hint a { color: inherit; text-decoration: underline; text-underline-offset: 3px }
.gx .vd-sale-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; align-items: end }
.gx .vd-lab { display: block; font-weight: 600; font-size: 14px; color: var(--ink-2); margin: 14px 0 6px }
.gx .vd-sale-end { min-height: 44px; display: flex; flex-direction: column; justify-content: flex-end }
.gx .vd-sale-end b { font-size: 18px; line-height: 44px; font-variant-numeric: tabular-nums }
.gx .vd-sale-end .vd-lab { margin-bottom: 6px }
.gx .vd-sale-end b { line-height: 1; min-height: 44px; display: flex; align-items: center }
.gx .vd-entries { margin: 12px 0 0 }
.gx .vd-sale label.check { font-weight: 500; color: var(--ink); margin: 10px 0 0 }
.gx .vd-total { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600 }
.gx .vd-total b { font: 700 28px/1 var(--font); letter-spacing: -.01em; font-variant-numeric: tabular-nums }
.gx .vd-rest { margin: 8px 0 0; color: var(--ko); font-weight: 600 }
.gx .vd-sale:has(input[name=metodo][value=da_pagare]:checked) [data-vd-ora] { display: none }
.gx .vd-go { margin-top: 20px; min-height: 54px; font-size: 16px }

/* ------------------------------------------------------------------------------------------------ the member's block */
.gx .vd-box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: .75rem }
.gx .vd-box-head h2 { margin: 0 }
.gx .vd-cur-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap }
.gx .vd-cur-name { font-size: 18px; overflow-wrap: anywhere }
.gx .vd-cur-when { margin: 4px 0 0; color: var(--ink-2); font-variant-numeric: tabular-nums }
.gx .vd-next { margin: 4px 0 0; color: var(--ok); font-weight: 600; font-size: 14px }
.gx .vd-due { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--ko-soft); color: var(--ko); font-weight: 600 }
.gx .vd-due b { font-size: 18px; font-variant-numeric: tabular-nums }
.gx .vd-due-other { align-items: center }
.gx .vd-due-other small { display: block; font-weight: 500; font-size: 13.5px }
.gx .vd-paid-ok { margin: 8px 0 0; color: var(--ok); font-weight: 600; font-size: 14px }
.gx .vd-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px }
.gx .vd-actions > .btn { flex: 1 1 140px }
.gx .vd-cur > .vd-more { margin-top: 6px }
.gx .vd-history { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line) }
.gx .vd-history summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--ink-2) }
.gx .vd-history .list > li { flex-wrap: wrap }
.gx .vd-due-s { color: var(--ko); font-weight: 600 }
.gx .vd-pays li.is-off .vd-amount { text-decoration: line-through; color: var(--ink-3) }
.gx .vd-kv > li { padding: 9px 0 }
.gx .vd-kv b { font-variant-numeric: tabular-nums; text-align: right }
.gx .vd-cert-state { margin: 0 0 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.gx .vd-cert { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 10px; align-items: end }
.gx .vd-cert .btn { align-self: end }
.gx .vd-cert-come { margin: 8px 0 12px; display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: .92rem }
.gx input.vd-filled { animation: vd-filled .9s ease-out }
@keyframes vd-filled { from { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 35%, transparent) } }
@media (prefers-reduced-motion: reduce) { .gx input.vd-filled { animation: none } }
.gx .vd-cert-off { display: flex; align-items: center; gap: 4px; margin: 6px 0 0 }

/* ------------------------------------------------------------------------------------------------ payments */
.gx .vd-range { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px }
.gx .vd-chips { display: flex; flex-wrap: wrap; gap: 6px }
.gx .vd-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); font-weight: 600; font-size: 14px; text-decoration: none !important }
.gx .vd-chips a:hover { border-color: color-mix(in srgb, var(--ink) 25%, var(--line)) }
.gx .vd-chips a.on { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-on-primary) }
.gx .vd-dates { display: flex; align-items: center; gap: 8px; margin: 0 }
.gx .vd-dates input { width: auto }
.gx .vd-dates span { color: var(--ink-3) }
.gx .vd-kpis { margin-bottom: 16px }
.gx .vd-kpis .kpi b { font-size: 26px }
.gx .vd-kpi-main { background: var(--side, #0f1118); border-color: transparent }
.gx .vd-kpi-main b { color: #fff }
.gx .vd-kpi-main span { color: #c9ccd6 }
.gx table.vd-table .vd-num { text-align: right }
.gx table.vd-table tr.is-off td { color: var(--ink-3) }
.gx table.vd-table tr.is-off .vd-amount { text-decoration: line-through }
.gx table.vd-table td.vd-act { text-align: right; width: 1%; white-space: nowrap }
.gx table.vd-table td.vd-act small { white-space: normal }
.gx .vd-empty-go { margin-top: 12px }

/* ------------------------------------------------------------------------------------------------ expiries */
.gx .vd-scad { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) }
.gx .vd-scad > .card + .card { margin-top: 0 }
.gx .vd-rows { list-style: none; margin: 0; padding: 0 }
.gx .vd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line) }
.gx .vd-row:first-child { border-top: 0 }
.gx .vd-row-main b { display: block }
.gx .vd-row-main small { display: block; color: var(--ink-3); font-size: 13.5px }
.gx .vd-row-act { display: flex; gap: 8px; justify-content: flex-end; align-items: center }
.gx .vd-row .pill { justify-self: end }
.gx .vd-nocontact { color: var(--ink-3); font-size: 13px; white-space: nowrap }
@media (min-width: 1100px) {
  .gx .vd-scad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start }
  .gx .vd-scad-subs { grid-column: 1 / -1 }
  .gx .vd-scad > .card:not(.vd-scad-subs) .vd-row { grid-template-columns: minmax(0, 1fr) auto }
  .gx .vd-scad > .card:not(.vd-scad-subs) .vd-row-act { grid-column: 1 / -1; justify-content: flex-start }
}

/* ------------------------------------------------------------------------------------------------ phone */
@media (max-width: 899px) {
  .gx .vd-form-actions .btn, .gx .vd-danger .btn { width: 100% }
  .gx .vd-range { flex-direction: column; align-items: stretch }
  .gx .vd-dates { width: 100% }
  .gx .vd-dates input { flex: 1 1 0; min-width: 0 }
  .gx .vd-row { grid-template-columns: minmax(0, 1fr) auto }
  .gx .vd-row-act { grid-column: 1 / -1; justify-content: stretch }
  .gx .vd-row-act > .btn, .gx .vd-row-act > a { flex: 1 1 0 }
  .gx table.vd-table td.vd-act { width: 100%; justify-content: flex-end }
  .gx table.vd-table td.vd-act:empty { display: none }
  .gx .vd-kpis .kpi b { font-size: 22px }
}
@media (max-width: 560px) {
  .gx .vd-cert .btn { grid-column: 1 / -1 }
}