/**
 * Framework: Hyper-Fast WP
 * File: cm-css-tabs.php
 * Aggiornato al 07-07-2023
 * Attualmente non incluso
 * Da https://freefrontend.com/css-tabs/
 * In questo caso si usano due soli tab anche se il codice ne prevede tre.
 */

#uno-panel iframe { height: 520px; }
#due-panel iframe { height: 980px; }

/* SETTAGGI VARIABILI */

/* Tab attivo */
.tabs-wrapper #uno:checked ~ .tabs #uno-tab, 
.tabs-wrapper #due:checked ~ .tabs #due-tab, 
.tabs-wrapper #tre:checked ~ .tabs #tre-tab { background: var(--grigiochiarissimo); color: var(--nero); border-top: 3px solid var(--col1); }

/* Tab inattivo */
.tabs-wrapper .tab { background: var(--grigiomedio); color: var(--bianco); }

/* Base tab */
.tabs-wrapper .panels { background: var(--grigiochiarissimo); min-height: 200px; width: 100%; max-width: 600px; }

/* Adattamento alle form */
#uno-panel, #due-panel { padding-top: 0px !important; }

@media (min-width: 320px) and (max-width: 1199.98px) { #uno-panel, #due-panel { margin-top: -20px !important; } }
@media (min-width: 1200px) { #uno-panel, #due-panel { margin-top: 20px !important; } }


/* Aggiungendo questo codice i tabs vanno a larghezza (quasi) 100% */
/*
.tabs { width: 100%; }
#uno-tab, #due-tab { width: 47%; }
*/

/* SETTAGGI FISSI */
.tabs-wrapper { display: flex; flex-direction: column; align-items: center; }
.tabs-wrapper .tab { cursor: pointer; padding: 10px 20px; margin: 0px 2px; display: inline-block; border-radius: 3px 3px 0px 0px; }
.tabs-wrapper .panels { border-radius: 3px; overflow: hidden; padding: 20px; border-radius: 3px; }
.tabs-wrapper .panel { display: none; animation: fadein .8s; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.tabs-wrapper .panel-title { font-size: 1.5em; font-weight: bold }
.tabs-wrapper .radio { display: none; }
.tabs-wrapper #uno:checked ~ .panels #uno-panel, .tabs-wrapper #due:checked ~ .panels #due-panel, .tabs-wrapper #tre:checked ~ .panels #tre-panel { display: block; }