/*
| Riquadri dei piani di licenza.
|
| In un foglio a parte perche' li mostrano due pagine di natura molto
| diversa: la console e la pagina pubblica di registrazione, che dello
| stile della console non carica nulla. Duplicare le regole avrebbe
| significato due aspetti destinati a divergere al primo ritocco.
*/

/* Riquadri dei piani di licenza.

   auto-fit con minmax porta le quattro colonne a due e poi a una senza
   bisogno di media query: il numero di piani puo' cambiare, e una griglia
   fissa a quattro andrebbe riscritta il giorno in cui se ne aggiunge uno. */

.plan-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:16px;
    margin:18px 0 0;
}

.plan-card{
    display:flex;
    flex-direction:column;
    padding:18px;
    border:1px solid #e0e4ea;
    border-radius:10px;
    background:#fbfcfd;
}

.plan-card-current{
    border-color:#0d6efd;
    box-shadow:0 0 0 3px rgba(13,110,253,.12);
}

.plan-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:8px;
}

.plan-card-head h3{margin:0;font-size:17px;}

.plan-card-badge{
    padding:3px 8px;
    border-radius:20px;
    background:#0d6efd;
    color:#fff;
    font-size:11px;
    font-weight:600;
    white-space:nowrap;
}

.plan-card-summary{
    margin:0 0 14px;
    color:#6b7280;
    font-size:13px;
    line-height:1.5;
    /* Riassunti di lunghezza diversa disallineerebbero i prezzi fra una
       card e l'altra: questo tiene la riga del prezzo alla stessa altezza. */
    min-height:58px;
}

.plan-card-price{
    padding-bottom:14px;
    margin-bottom:14px;
    border-bottom:1px solid #e6e9ee;
}

.plan-card-price strong{font-size:24px;}
.plan-card-price span{color:#6b7280;font-size:13px;}
.plan-card-price-year{margin-top:5px;color:#6b7280;font-size:12px;}
.plan-card-saving{color:#1e6b34;}

.plan-card-limits{width:100%;border-collapse:collapse;font-size:13px;}
.plan-card-limits th{
    padding:5px 0;
    color:#6b7280;
    font-weight:normal;
    text-align:left;
}
.plan-card-limits td{padding:5px 0;text-align:right;font-weight:600;}
.plan-card-unlimited{color:#1e6b34;}

.plan-card-vat{margin-top:8px;color:#6b7280;font-size:12px;}

/* Riquadro selezionabile: l'etichetta copre tutta la card, cosi' si sceglie
   il piano cliccando ovunque e non su un cerchietto di dodici pixel.

   Il radio si nasconde alla vista ma resta nel documento: toglierlo con
   display:none lo renderebbe irraggiungibile da tastiera, e chi naviga con
   il Tab non potrebbe scegliere il piano. */

.plan-card-selectable{cursor:pointer;position:relative;}

.plan-card-radio{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.plan-card-selectable:hover{border-color:#9db8e8;}

.plan-card-selectable:has(.plan-card-radio:checked){
    border-color:#0d6efd;
    background:#f5f9ff;
    box-shadow:0 0 0 3px rgba(13,110,253,.14);
}

/* Il fuoco da tastiera deve vedersi: senza, chi usa il Tab non sa dove si
   trova, perche' il radio a cui il browser lo darebbe e' invisibile. */
.plan-card-selectable:has(.plan-card-radio:focus-visible){
    outline:2px solid #0d6efd;
    outline-offset:2px;
}

/* Piano in evidenza: chi ha un badge si presenta piu' grande e in rilievo.

   La differenza di dimensione e' il punto: un'etichetta della stessa
   grandezza degli altri riquadri si legge dopo tutto il resto, cioe' non si
   legge, e il badge non indicherebbe piu' niente. */

.plan-card-featured{
    padding-top:26px;
    transform:scale(1.035);
    border-color:#c7d4e6;
    background:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.10);
    z-index:1;
}

.plan-card-ribbon{
    position:absolute;
    top:0;
    left:0;
    right:0;
    padding:5px 10px;
    border-radius:9px 9px 0 0;
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    text-align:center;
}

/* Il riquadro in evidenza ha bisogno di posizionamento anche quando non e'
   selezionabile: la fascetta e' ancorata a lui. */
.plan-card{position:relative;}

/* Su schermo stretto le card sono incolonnate e l'ingrandimento le farebbe
   sbordare dai margini, senza per altro distinguerle: in colonna la
   fascetta colorata basta da sola. */
@media (max-width:700px){
    .plan-card-featured{transform:none;}
}

/* Piano sospeso: resta visibile al gestore, ma si vede che non e' in
   listino. Non compare affatto a chi deve sceglierlo. */
.plan-card-suspended{opacity:.65;}
.plan-card-badge-off{background:#6b7280;}

/* Riquadro in modifica: deve saltare all'occhio di essere entrati in
   modifica. Il modulo sta in fondo a una pagina lunga, e senza un segno
   evidente si finisce per compilare il modulo di creazione credendo di
   star modificando — o viceversa. */

.card-editing{
    border-left:4px solid #0d6efd;
    box-shadow:0 2px 14px rgba(13,110,253,.16);
}