/* =========================
   GLOBAL COLORS
   ========================= */

:root {
    --content-bg-color: #15151E;
    --content-text-color: #F1F1F1;

    --navbar-bg-color: #0B0B10;
    --navbar-text-color: #FFFFFF;

    --footer-bg-color: #0B0B10;
    --footer-text-color: #CCCCCC;

    --link-color: #F1F1F1;
    --link-visited-color: #8AB4F8;
    --link-bg-color: #630300;

    --accent-color: #FF3333;
    --footer-border-color: #333333;
    --social-bg-color: #333333;

    --quote-bg-color: #8B0000;
    --quote-border-color: #E10600;
    --backUp-button-color: 40, 40, 40;

    /* Magari trovare un rosso diverso */
    --buttons: #A60006;

    --success-color: #4ade80;
    --error-color: #f87171;
    --success-border: #15803d;
    --error-border: #b91c1c;

    /*  COLORI DA USARE PER SCUDERIE/PILOTI */

    --ferrari-color: #C62000;
    --redbull-color: #0600EF;
    --mclaren-color: #A35600;
    --mercedes-color: #007064;
    --alpine-color: #0061BA;
    --astonmartin-color: #006A3A;
    --williams-color: #0059B3;
    --haas-color: #212121;
    --racingbulls-color: #0059B3;
    --sauber-color: #007300;
    --superstar-color: #856404;

    /* Font stack per dispositivi Windows, Android, Apple (MacOS, iOS), font di backup e font per la visualizzazione delle emoji */
    --main-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --base-font-size: 16px;
}

/* =========================
   RESET & GLOBAL
   ========================= */

* {
    margin: 0;
    border: 0;
}

html {
    height: 100%;
    scroll-behavior: smooth;
    font-family: var(--main-font);
    font-size: var(--base-font-size);
}

body {
    background-color: var(--content-bg-color);
    color: var(--content-text-color);
    font-size: 100%;
    line-height: 1.5em;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main, #content {
    flex: 1 0 auto;
}

header {
    padding: 0;
}

h1,
h2,
h3 {
    text-align: center;
}

main .title-f1 {
    font-size: 2.5em;
    margin-bottom: 0.4em;
    border-top: 0.07em solid var(--accent-color);
    border-bottom: 0.07em solid var(--accent-color);
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-top: 0.4em;
}

abbr {
    cursor: help;
}

/* =========================
   GLOBAL LINK STYLES
   ========================= */

a {
    color: var(--link-color);
    text-decoration: underline;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.2em;
    transition: color 0.3s ease, background-color 0.3s ease;
}

a:visited {
    color: var(--link-visited-color);
}

a:hover,
a:focus-visible {
    color: var(--link-color);
}

/* =========================
   NAVBAR
   ========================= */

.hamburger{
    display: none;
}

.navbar {
    background-color: var(--navbar-bg-color);
    color: var(--navbar-text-color);
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    padding: 1em 0;
}

/* =========================
   LOGO
   ========================= */

.hide {
    position: relative;
    display: inline-block;
    width: 5em;
    height: 1.25em;
    text-indent: -9999em;
    overflow: hidden;
    white-space: nowrap;
}

h1.hide {
    background-image: url("../resources/logo.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 1em;
}

/* =========================
   MENU
   ========================= */

#menu {
    list-style: none;
    display: flex;
    gap: 1.25em;
    margin: 0;
    padding: 0;
}

/* =========================
   NAVBAR LINKS 
   ========================= */

#menu a {
    text-decoration: underline;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.25em;
    text-decoration-color: currentColor;
    font-weight: bold;
    padding: 0.4em 0.75em;
    border-radius: 0.3em;
}

/*QUESTO SERVE PER INDICARE LA POSIZIONE CORRENTE*/
#menu a[aria-current="page"] {
    pointer-events: none;
    /* Disabilita i link */
    text-decoration-thickness: 0.2em;
    text-decoration-color: var(--accent-color);
}

#menu a:visited {
    color: var(--link-visited-color);
}

.navbar a:hover,
.navbar a:focus-visible {
    background-color: var(--link-bg-color);
    color: var(--link-color);
    text-decoration-thickness: 0.18em;
}

.navbar a:visited:hover,
.navbar a:visited:focus-visible {
    color: var(--link-visited-color);
}

/* =========================
   BREADCRUMB
   ========================= */

#breadcrumb {
    background-color: var(--content-bg-color);
    color: var(--content-text-color);
    width: 100%;
}

#breadcrumb p {
    padding: 0.5em 0 0.5em 1em;
}

/* =========================
   PULSANTE TORNA SU
   ========================= */

#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background-color: rgba(var(--backUp-button-color), 0.7);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  z-index: 100;
}

#backToTop img {
  width: 36px;
  height: 36px;
}

#backToTop:focus {
  outline: 3px solid var(--accent-color);
  outline-offset: 1px;
}

#backToTopIcon {
  width: 80%;
  height: auto;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

/* @media (prefers-reduced-motion: reduce)*  non serve perchè animazione quasi impercettibile*/

#backToTop.clicked #backToTopIcon {
  transform: translateX(-50px);
  opacity: 0; 
}



/* =========================
   FOOTER
   ========================= */

.f1-footer {
    flex-shrink: 0; 
    border-top: 0.2em solid var(--accent-color);
    background-color: var(--content-bg-color);
    color: var(--content-text-color);
    padding-top: 2.5em;
}

.footer-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    max-width: 75em;
    margin: 0 auto;
    padding: 0 1.25em;
}

.footer-col {
    flex: 1;
    min-width: 15.5em;
    margin-bottom: 1.25em;
}

.footer-col .footer-heading {
    color: var(--accent-color);
    font-size: 1.125em;
    margin-bottom: 1.25em;
    text-transform: uppercase;
    border-bottom: 0.15em solid var(--accent-color);
    display: inline-block;
    padding-bottom: 0.3em;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 0.6em;
}

.footer-col ul li a {
    color: var(--footer-text-color);
}

.footer-col ul li a[aria-current="page"] {
    pointer-events: none;
    /* Disabilita i link */
    text-decoration-thickness: 0.15em;
    text-decoration-color: var(--accent-color);
}

.footer-col ul li a:visited {
    color: var(--link-visited-color);
}

.footer-col ul li a:hover,
.footer-col ul li a:focus-visible {
    color: var(--link-color);
}

/* =========================
   SOCIAL LINKS
   ========================= */

.social-links {
    display: flex;
    gap: 0.8em;
    padding: 1em 0;
}

.social-links a {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;

    background-color: var(--social-bg-color, #333);
    color: var(--navbar-text-color, #fff);
    text-decoration: none;

    padding: 0.5em;
    border: 0.15em solid transparent;
    box-sizing: border-box;
    
    transition: all 0.3s ease;
}

.social-links a img,
.social-links a svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Rende l'icona bianca se l'originale è nera */
    filter: brightness(0) invert(1); 
    transition: filter 0.3s ease;
}

.social-links a:hover,
.social-links a:focus-visible,
.social-links a:active {
    background-color: var(--accent-color); 
    border-color: #ffffff;                 
    transform: scale(1.1);
    outline: none;
}

/* =========================
   FOOTER BOTTOM
   ========================= */

.footer-bottom {
    background-color: var(--footer-bg-color);
    text-align: center;
    padding: 1.25em;
    font-size: 0.875em;
    color: var(--footer-text-color);
    margin-top: 1.25em;
    border-top: 0.08em solid var(--footer-border-color);
}

.disclaimer {
    font-style: italic;
    font-size: 0.75em;
    margin-top: 0.4em;
}

/* =========================
   INDEX PAGE
   ========================= */

main section h2, article.aboutus h2 {
    border-top: 0.07em solid var(--accent-color);
    border-bottom: 0.07em solid var(--accent-color);
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    margin-top: 0.4em;
}

#content p {
    max-width: 90%;
    padding: 1em 2.5em;
}

#content h3 {
    max-width: 90%;
    text-align: left;
    border-left: 0.2em solid var(--accent-color);
    padding-left: 0.2em;
    padding-right: 0.2em;
    border-right: 0.2em;

}

#content section {
    max-width: 90%;
    display: block;
    overflow: visible;
    padding: 0;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    min-height: 20em;
    position: relative;
    background-image: linear-gradient(to bottom right, var(--navbar-bg-color), var(--content-bg-color));
}

#content section > div {
    padding: 2em 2.5em;
    position: relative;
    box-sizing: border-box;
    margin-right: 40%;
}

#content section img {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 0% 100%);
    margin: 0;
    display: block;
}
.aboutus{
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.aboutus blockquote{
    background-color: var(--quote-bg-color);
    border: 0.2em solid var(--quote-border-color);
    text-align: center;
    font-style: italic;
    font-size: larger;
}
.aboutus cite{
    font-size: medium;
}

/* =========================
   PILOTI PAGE
   ========================= */

.piloti ul {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
}

.piloti li {
    width: 30em;
    padding: 2em;
}

.piloti article {
    position: relative;
    overflow: hidden;
    border: 0.5em solid var(--navbar-bg-color);
}

.piloti article img {
    width: 30em;
    height: 20em;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.piloti article a:hover img {
    transform: scale(1.05);
}

.piloti article a:hover h3 {
    text-decoration: underline;
}

.piloti article h3 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3em;
    margin: 0;

    color: var(--content-text-color);
    background-color: var(--footer-border-color);
    padding: 1em;
    text-align: center;
    box-sizing: border-box;

    z-index: 2;
}

.piloti h3#alpine-heading{
    font-size: 1.5em;
}

.piloti h3#astonmartin-heading{
    font-size: 1.5em;
}

.piloti h3#ferrari-heading{
    font-size: 1.5em;
}

.piloti h3#haas-heading{
    font-size: 1.5em;
}

.piloti h3#mclaren-heading{
    font-size: 1.5em;
}

.piloti h3#mercedes-heading{
    font-size: 1.5em;
}

.piloti h3#rbheading{
    font-size: 1.5em;
}

.piloti h3#redbullracing-heading{
    font-size: 1.5em;
}

.piloti h3#sauber-heading{
    font-size: 1.5em;
}

.piloti h3#superstar-heading{
    font-size: 1.5em;
}

.piloti h3#williams-heading{
    font-size: 1.5em;
}

.piloti h3#alpine-heading~ul article h3{
    background-color: var(--alpine-color);
}

.piloti h3#astonmartin-heading~ul article h3{
    background-color: var(--astonmartin-color);
}

.piloti h3#ferrari-heading~ul article h3{
    background-color: var(--ferrari-color);
}

.piloti h3#haas-heading~ul article h3{
    background-color: var(--haas-color);
}

.piloti h3#mclaren-heading~ul article h3{
    background-color: var(--mclaren-color);
}

.piloti h3#mercedes-heading~ul article h3{
    background-color: var(--mercedes-color);
}

.piloti h3#rbheading~ul article h3{
    background-color: var(--racingbulls-color);
}

.piloti h3#redbullracing-heading~ul article h3{
    background-color: var(--redbull-color);
}

.piloti h3#sauber-heading~ul article h3{
    background-color: var(--sauber-color);
}

.piloti h3#williams-heading~ul article h3{
    background-color: var(--williams-color);
}

.piloti h3#superstar-heading~ul article h3{
    background-color: var(--superstar-color);
}

/* =========================
   SCUDERIE PAGE
   ========================= */

#scuderie {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#scuderie h2 {
    width: 100%;
    font-size: 2.5em;
    margin-bottom: 0.4em;
    border-top: 0.07em solid var(--accent-color);
    border-bottom: 0.07em solid var(--accent-color);
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-top: 0.4em;
}

#scuderie article {
    position: relative;
    overflow: hidden;
    padding-top: 0em;
    padding-right: 2em;
    padding-left: 2em;
    padding-bottom: 2em;
    background-color: var(--navbar-bg-color);
    border: 0.15em solid var(--footer-border-color);
    border-radius: 0.5em;
    margin: 0.5em;
    margin-bottom: 1em;
    max-width: 60em;
}

#scuderie article img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

#scuderie article h3 {
    font-size: 1.5em;
    padding: 0.5em;
    color: var(--content-text-color);
    text-align: center;
}

#scuderie article:hover {
    transform: scale(1.01);
    border-color: var(--accent-color);
}

/* =========================
   GARE PAGE - CARD DESIGN
   ========================= */

.gp {
    display: flex;
    background-color: var(--navbar-bg-color);
    border: 0.3em solid var(--footer-border-color);
    border-left: 0.5em solid var(--accent-color); 
    padding: 2em;
    margin: 2em auto;
    width: 95%;
    max-width: 55em;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.gp:hover {
    transform: scale(1.01);
    border-color: var(--accent-color);
}

.gp img {
    width: 22em;
    height: auto;
    object-fit: cover;
    flex-shrink: 0; 
}

.gp > div {
    padding: 1.5em;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.gp h2 {
    text-align: left;
    color: var(--accent-color);
    margin: 0 0 0.2em 0;
    text-transform: uppercase;
    font-size: 1.6em;
    border: none; 
    padding: 0;
}

.gp p {
    margin: 0 0 1em 0;
    font-size: 0.9em;
    color: var(--footer-text-color);
}

.gp dl {
    display: grid;
    grid-template-columns: 9em 1fr;
    gap: 0.4em 0.5em;
    margin: 0;
}

.gp dt {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8em;
    color: var(--accent-color); 
    align-self: start;
}

.gp dd {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.3;
}

.gp dd a {
    text-decoration: underline;
    font-weight: bold;
}

.gp dd a:hover {
    text-decoration: underline;
    color: var(--accent-color);
}

.gp button.btn-view-comments {
    margin-top: 2em;
    align-self: flex-start;
    padding: 0.6em 1.2em;
    background-color: transparent;
    color: var(--accent-color);
    border: 0.15em solid var(--accent-color);
    border-radius: 0.3em;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.gp button.btn-view-comments:hover {
    color: var(--buttons);
    border: 0.15em solid var(--buttons);
    background-color: var(--buttons);
    color: var(--content-text-color);
}

/* =========================
   CIRCUITI PAGE
   ========================= */

.circuiti{
    display: flex;
    background-color: var(--navbar-bg-color);
    border: 0.3em solid var(--footer-border-color);
    border-left: 0.5em solid var(--accent-color);
    margin: 2em auto;
    width: 95%;
    max-width: 55em;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.circuiti:hover {
    transform: scale(1.01);
    border-color: var(--accent-color);
}

.circuiti > div {
    padding: 1.5em;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.circuiti h2 {
    text-align: left;
    color: var(--accent-color);
    margin: 0 0 0.2em 0;
    text-transform: uppercase;
    font-size: 1.6em;
    border: none;
    padding: 1em;
}

.circuiti dl {
    display: grid;
    grid-template-columns: 9em 1fr;
    gap: 0.4em 0.5em;
    margin: 0;
}

.circuiti dt {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8em;
    color: var(--footer-text-color);
    align-self: start;
}

.circuiti dd {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.3;
}

.circuiti img {    
    width: 22em;
    height: auto;
    display: block;
    background-color: var(--navbar-text-color);
    object-fit: cover;
    flex-shrink: 0;
    margin: 2em; 
}

/* =========================
   CLASSIFICA PAGE
   ========================= */

.classifica_piloti,
.classifica_costruttori {
    margin: 0 auto;
    line-height: 2em;
    width: calc(100% - 4em);
    margin: 2em;
    border-collapse: collapse;
    margin: 2em;
}

.classifica_piloti caption,
.classifica_costruttori caption {
    font-size: 1.5em;
    border-top: 0.07em solid var(--accent-color);
    border-bottom: 0.07em solid var(--accent-color);
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    margin-top: 0.4em;
}

th,
.classifica_piloti td, 
.classifica_costruttori td {
    text-align: center;
    vertical-align: middle;
    border-radius: 0.2em;
    border: 0.2em solid var(--link-color);
}

.classifica_piloti tr,
.classifica_costruttori tr {
    padding: 1em;
    background: var(--footer-border-color);
}

.classifica_piloti th,
.classifica_costruttori th {
    font-size: larger;
    background: var(--navbar-bg-color);
}

/* =========================
   LOGIN & REGISTRAZIONE PAGES
   ========================= */

#login_form,
#signup_form {
    background-color: var(--navbar-bg-color);
    border: 0.15em solid var(--footer-border-color);
    border-radius: 0.5em;
    padding: 2em;
    max-width: 28em;
    margin: 2em auto;
    box-sizing: border-box;
}

#signup_main h1,
#signup_main p,
#login_main h1,
#login_main p {
    text-align: center;
}

#login_form legend,
#signup_form legend {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  color: var(--content-text-color);
  margin-bottom: 1em;
}

#login_form ul,
#signup_form ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#login_form li,
#signup_form li {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5em;
}

#login_form label,
#signup_form label {
    font-weight: bold;
    margin-bottom: 0.5em;
    color: var(--content-text-color);
}

#login_form input[type="text"],
#login_form input[type="email"],
#login_form input[type="password"],
#signup_form input[type="text"],
#signup_form input[type="email"],
#signup_form input[type="password"] {
    padding: 0.6em 0.8em;
    font-size: 1em;
    border: 0.1em solid var(--footer-border-color);
    border-radius: 0.3em;
    background-color: var(--content-bg-color);
    color: var(--content-text-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

#login_form input[type="date"],
#signup_form input[type="date"] {
    appearance: none;
    padding: 0.6em 1.5em 0.6em 0.8em;
    font-size: 1em;
    border: 0.1em solid var(--footer-border-color);
    border-radius: 0.3em;
    background-color: var(--content-bg-color);
    color: var(--content-text-color);
    background-image: none;
    background-repeat: no-repeat;
    background-position: right 0.8em center;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#login_form input[type="date"]:focus,
#signup_form input[type="date"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.15em var(--accent-color);
}

#login_form input[type="date"]::-webkit-calendar-picker-indicator,
#signup_form input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0.8em;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2em;
    height: 1.2em;
    right: 0.3em;
    color: var(--accent-color);
    filter: invert(1) sepia(1) saturate(5) hue-rotate(330deg);
    background: none;
    cursor: pointer;
}

#login_form input:focus,
#signup_form input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.1em var(--accent-color);
}

#login_form input[type="checkbox"],
#signup_form input[type="checkbox"] {
    margin-right: 0.5em;
}

#login_form li.checkbox-group,
#signup_form li.checkbox-group {
    flex-direction: row;
    align-items: center;
}

#login_form button[type="submit"],
#signup_form button[type="submit"],
#modifica-anagrafica button[type="submit"],
#modifica-username button[type="submit"],
#modifica-password button[type="submit"] {
  display: block;
  width: 100%;
  padding: 0.8em;
  font-size: 1em;
  font-weight: bold;
  background-color: transparent;
  color: var(--accent-color);
  border: 0.15em solid var(--accent-color);
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
 
#login_form button[type="submit"]:hover,
#login_form button[type="submit"]:focus,
#signup_form button[type="submit"]:hover,
#signup_form button[type="submit"]:focus,
#modifica-anagrafica button[type="submit"]:hover,
#modifica-anagrafica button[type="submit"]:focus,
#modifica-username button[type="submit"]:hover,
#modifica-username button[type="submit"]:focus,
#modifica-password button[type="submit"]:hover,
#modifica-password button[type="submit"]:focus {
  color: var(--buttons);
  border: 0.15em solid var(--buttons);
  background-color: var(--buttons);
  color: var(--content-text-color);
  outline: none;
}

#signup_form .switch-form,
#login_form .switch-form {
    text-align: center;
    margin-top: 1em;
}

#signup_form .switch-form a,
#login_form .switch-form a {
    color: var(--link-color);
    text-decoration: underline;
}

#signup_form .switch-form a:hover,
#login_form .switch-form a:hover {
    color: var(--link-bg-color);
}

/* ============================================================
   AREA UTENTE - STILI GENERALI
   ============================================================ */

.area_utente_info, 
.area_utente_modifica, 
.area_utente_commenti, 
.area_utente_logout {
    max-width: 50em;
    margin: 2em auto;
    padding: 1.5em;
    background-color: var(--navbar-bg-color);
    border: 0.15em solid var(--footer-border-color);
    border-radius: 0.5em;
}

.area_utente_info h3, 
.area_utente_modifica h3, 
.area_utente_commenti h3, 
.area_utente_logout h3,
.azioni_admin h3 {
    text-align: left;
    color: var(--accent-color);
    border-bottom: 0.1em solid var(--accent-color);
    padding-bottom: 0.3em;
    margin-bottom: 1em;
    font-size: 1.5em;
    text-transform: uppercase;
}

.area_utente_logout #logout-container {
    display: flex;
    align-items: center;
    gap: 1em;
}

.area_utente_logout #logout-container .btn-logout,
.area_utente_logout #logout-container .btn-delete {
    display: inline-block;
    width: 100%;
    padding: 0.8em;
    font-size: 1em;
    font-weight: bold;
    background-color: transparent;
    color: var(--accent-color);
    border: 0.15em solid var(--accent-color);
    border-radius: 0.3em;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 1em;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

.area_utente_logout #logout-container .btn-logout:hover,
.area_utente_logout #logout-container .btn-delete:hover {
    color: var(--buttons);
    border: 0.15em solid var(--buttons);
    background-color: var(--buttons);
    color: var(--content-text-color);
}

/* --- Info Personali (Griglia Dati) --- */
.area_utente_info dl {
    display: grid;
    grid-template-columns: 12em 1fr;
    gap: 0.8em;
}

.area_utente_info dt {
    font-weight: bold;
    color: var(--accent-color);
}

.area_utente_info dd {
    margin: 0;
    color: var(--content-text-color);
}

/* --- Form di Modifica --- */
.area_utente_modifica fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

#modifica-anagrafica legend {
    display: none; 
}

.area_utente_modifica label {
    display: block;
    margin-bottom: 0.4em;
    font-weight: bold;
}

.area_utente_modifica input {
    width: 100%;
    padding: 0.7em;
    background-color: var(--content-bg-color);
    border: 0.1em solid var(--footer-border-color);
    border-radius: 0.3em;
    color: var(--content-text-color);
    box-sizing: border-box;
}

.area_utente_modifica input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.15em var(--accent-color);
}

.area_utente_modifica fieldset legend,
.area_utente_modifica form legend {
    text-align: left;
    color: var(--accent-color);
    border-bottom: 0.1em solid var(--accent-color);
    padding-bottom: 0.3em;
    margin-bottom: 1em;
    font-size: 1em;
}

.area_utente_commenti .comment-list {
    list-style: none;
    padding: 0;
}

.commento-card {
    background-color: var(--content-bg-color);
    border-left: 0.3em solid var(--accent-color);
    padding: 1.2em;
    margin-bottom: 1.5em;
    border-radius: 0 0.4em 0.4em 0;
    transition: transform 0.2s ease;
}

.commento-card:hover {
    transform: translateX(5px);
}

.commento-card h3 {
    margin: 0 0 0.3em 0;
    font-size: 1.1em;
    color: var(--accent-color);
}

.comment-date {
    font-size: 0.85em;
    color: var(--footer-text-color);
    margin-bottom: 0.8em;
}

.comment-content {
    margin: 0;
    line-height: 1.5;
    font-style: italic;

    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;

    max-width: 100%;
    
    line-height: 1.5em;
    hyphens: auto;
}

/* --- Bottoni ed Errori --- */
.btn-logout, .btn-admin, button[type="submit"], #open-delete-modal {
    display: inline-block;
    padding: 0.8em 1.5em;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0.3em;
    text-transform: uppercase;
    border: 0.15em solid var(--accent-color);
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
    color: var(--accent-color);
    margin-top: 1em;
}

.anagrafica_errors, .form_errors {
    margin-top: 1em;
    padding: 0.8em;
    color: #b91c1c;
    border-radius: 0.3em;
    font-weight: bold;
    font-size: 0.9em;
}

.anagrafica_errors:empty, .form_errors:empty {
    display: none;
}

#delete-modal[hidden] {
    display: none;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999
}

.modal-content {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    max-width: 400px;
    text-align: center;
    color: #333;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; 
    backdrop-filter: blur(3px);
}

.modal-content {
    background-color: var(--navbar-bg-color); 
    border: 0.2em solid var(--accent-color);  
    border-radius: 0.5em;
    padding: 2.5em;
    max-width: 30em;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 2em rgba(0, 0, 0, 0.5);
}

#modal-title {
    color: var(--accent-color);
    text-transform: uppercase;
    font-size: 1.8em;
    margin-bottom: 0.8em;
    border-bottom: 0.05em solid var(--footer-border-color);
    padding-bottom: 0.4em;
}

#modal-desc {
    color: var(--content-text-color);
    margin-bottom: 2em;
    font-size: 1em;
    line-height: 1.6;
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 1.5em;
    flex-wrap: wrap;
}

.modal-actions form{
    margin-left:auto;
    margin-right:auto;
    width: 100%;
}

.btn-secondary {
    background-color: transparent;
    color: var(--content-text-color);
    border: 0.15em solid var(--footer-border-color);
    padding: 0.8em 1.5em;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0.3em;
    transition: background-color 0.3s ease;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background-color: var(--footer-border-color);
    outline: none;
}

.btn-confirm-delete {
    background-color: var(--accent-color);
    color: white;
    border: 0.15em solid var(--accent-color);
    padding: 0.8em 1.5em;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0.3em;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

.btn-confirm-delete:hover,
.btn-confirm-delete:focus-visible {
    color: var(--navbar-text-color);
    border: 0.15em solid var(--buttons);
    background-color: var(--buttons);
    transform: scale(1.05); 
    outline: none;
}

#delete-modal[hidden] {
    display: none;
}

/* =========================
   AREA ADMIN - AZIONI ADMIN
   ========================= */

.azioni_admin {    
    max-width: 50em;
    margin: 2em auto;
    padding: 1.5em;
    background-color: var(--navbar-bg-color);
    border: 0.15em solid var(--footer-border-color);
    border-radius: 0.5em;
}

.azioni_admin a.btn-admin-action {
    display: inline-block;
    width: 50%;
    padding: 0.8em;
    font-family: inherit; 
    font-size: 1em;
    font-weight: bold;
    background-color: transparent;
    color: var(--accent-color);
    border: 0.15em solid var(--accent-color);
    border-radius: 0.3em;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 1em;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

.azioni_admin a.btn-admin-action:hover {
    color: var(--buttons);
    border: 0.15em solid var(--buttons);
    background-color: var(--buttons);
    color: white;
}

/* =========================
   AZIONI ADMIN - UTENTI
   ========================= */

/* =========================
   FORM UTENTI – STILI COMUNI
   ========================= */

#form-utenti-elimina,
#form-utenti-aggiungi {
    background-color: var(--navbar-bg-color);
    border: 0.15em solid var(--footer-border-color);
    border-radius: 0.5em;
    padding: 2em;
    width: 50%;
    margin: 2em auto;
}

#form-utenti-elimina legend,
#form-utenti-aggiungi legend {
    display: block;
    width: 100%;
    margin-bottom: 1em;

    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: var(--content-text-color);
}

#form-utenti-elimina fieldset,
#form-utenti-aggiungi fieldset {
    border: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 1em;
}

#form-utenti-elimina label,
#form-utenti-aggiungi label {
    margin-bottom: 0.3em;
    font-weight: bold;
    color: var(--content-text-color);
}

/* =========================
   INPUT BASE
   ========================= */

#form-utenti-elimina input[type="text"],
#form-utenti-aggiungi input[type="text"],
#form-utenti-aggiungi input[type="email"],
#form-utenti-aggiungi input[type="password"],
#form-utenti-aggiungi select,
#form-utenti-aggiungi input[type="date"] {
    width: 100%;
    box-sizing: border-box;

    padding: 0.6em 0.8em;
    font-size: 1em;

    background-color: var(--content-bg-color);
    color: var(--content-text-color);

    border: 0.1em solid var(--footer-border-color);
    border-radius: 0.3em;

    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#form-utenti-elimina input:focus,
#form-utenti-aggiungi input:focus,
#form-utenti-aggiungi select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.15em var(--accent-color);
}

/* =========================
   INPUT DATE – RAFFINAMENTI
   ========================= */

#form-utenti-aggiungi input[type="date"] {
    appearance: none;

    padding-right: 1.5em;
    cursor: pointer;
    background-image: none;
}

#form-utenti-elimina input[type="date"]::-webkit-calendar-picker-indicator,
#form-utenti-aggiungi input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0.3em;
    top: 50%;
    transform: translateY(-50%);

    width: 1.2em;
    height: 1.2em;

    color: var(--accent-color);
    filter: invert(1) sepia(1) saturate(5) hue-rotate(330deg);
    background: none;
    cursor: pointer;
}

/* =========================
   SUBMIT BUTTON
   ========================= */

#form-utenti-elimina button[type="submit"]:hover,
#form-utenti-aggiungi button[type="submit"]:hover {
    color: var(--buttons);
    border: 0.15em solid var(--buttons);
    background-color: var(--buttons);
    color: white;
}

/* =========================
   AZIONI ADMIN - GARE
   ========================= */

/* =========================
   FORM GARE – STILI COMUNI
   ========================= */

#form-gare-elimina,
#form-gare-aggiungi {
    background-color: var(--navbar-bg-color);
    border: 0.15em solid var(--footer-border-color);
    border-radius: 0.5em;
    padding: 2em;
    width: 50%;
    margin: 2em auto;
}

#form-gare-elimina legend,
#form-gare-aggiungi legend {
    display: block;
    width: 100%;
    margin-bottom: 1em;

    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: var(--content-text-color);
}

#form-gare-elimina fieldset,
#form-gare-aggiungi fieldset {
    border: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 1em;
}

#form-gare-elimina label,
#form-gare-aggiungi label {
    margin-bottom: 0.3em;
    font-weight: bold;
    color: var(--content-text-color);
}

/* =========================
   INPUT BASE (text, email, password, select)
   ========================= */

#form-gare-elimina input[type="text"],
#form-gare-aggiungi input[type="text"],
#form-gare-aggiungi input[type="email"],
#form-gare-aggiungi input[type="password"],
#form-gare-aggiungi select,
#form-gare-aggiungi input[type="date"] {
    width: 100%;
    box-sizing: border-box;

    padding: 0.6em 0.8em;
    font-size: 1em;

    background-color: var(--content-bg-color);
    color: var(--content-text-color);

    border: 0.1em solid var(--footer-border-color);
    border-radius: 0.3em;

    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#form-gare-elimina input:focus,
#form-gare-aggiungi input:focus,
#form-gare-aggiungi select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.15em var(--accent-color);
}

/* =========================
   INPUT DATE (raffinamenti)
   ========================= */

#form-gare-aggiungi input[type="date"] {
    appearance: none;

    padding-right: 1.5em;
    cursor: pointer;
    background-image: none;
}

#form-gare-elimina input[type="date"]::-webkit-calendar-picker-indicator,
#form-gare-aggiungi input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0.3em;
    top: 50%;
    transform: translateY(-50%);

    width: 1.2em;
    height: 1.2em;

    color: var(--accent-color);
    filter: invert(1) sepia(1) saturate(5) hue-rotate(330deg);
    background: none;
    cursor: pointer;
}

/* =========================
   SUBMIT BUTTON
   ========================= */

#form-gare-elimina button[type="submit"]:hover,
#form-gare-aggiungi button[type="submit"]:hover {
    color: var(--buttons);
    border: 0.15em solid var(--buttons);
    background-color: var(--buttons);
    color: white;
}

/* =========================
   AZIONI ADMIN - CLASSIFICHE
   ========================= */

/* =========================
   FORM MODIFICA PUNTI PILOTA
   ========================= */

#form-modifica-punti-pilota {
    background-color: var(--navbar-bg-color);
    border: 0.15em solid var(--footer-border-color);
    border-radius: 0.5em;
    padding: 2em;
    width: 50%;
    margin: 2em auto;
}

#form-modifica-punti-pilota legend {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 1em;

    font-size: 1.5em;
    font-weight: bold;
    color: var(--content-text-color);
}

#form-modifica-punti-pilota fieldset {
    border: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 1em;
}

.crea-classifica-section ul {
    list-style: none;
    padding: 0;
}

.crea-classifica-section li {
    margin-bottom: 1.2em;
}

#form-modifica-punti-pilota label {
    margin-bottom: 0.3em;
    font-weight: bold;
    color: var(--content-text-color);
}

#form-modifica-punti-pilota select,
#form-modifica-punti-pilota input[type="number"] {
    width: 100%;
    box-sizing: border-box;

    padding: 0.6em 0.8em;
    font-size: 1em;

    background-color: var(--content-bg-color);
    color: var(--content-text-color);

    border: 0.1em solid var(--footer-border-color);
    border-radius: 0.3em;

    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#form-modifica-punti-pilota select:focus,
#form-modifica-punti-pilota input[type="number"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.15em var(--accent-color);
}

/* =========================
   RADIO BUTTONS – F1 STYLE
   ========================= */

#form-modifica-punti-pilota fieldset {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

[aria-label="Aggiungi o diminuisci punti"] {
    display: flex;
    align-items: center;
    flex-direction: row; 
    gap: 1.5em;          
    margin-top: 0.5em;
}

#form-modifica-punti-pilota input[type="radio"] {
    appearance: none;
    position: relative;
    width: 1.4em;
    height: 1.4em;
    border: 0.15em solid var(--accent-color);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
    margin: 0;
}

#form-modifica-punti-pilota input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    inset: 0.25em;
    background-color: var(--accent-color);
    border-radius: 50%;
}

#form-modifica-punti-pilota input[type="radio"]:hover {
    box-shadow: 0 0 0 0.2em rgba(225, 6, 0, 0.3);
}

#form-modifica-punti-pilota input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.25em rgba(225, 6, 0, 0.5);
}

#form-modifica-punti-pilota input[type="radio"] + label {
    display: inline-flex;
    align-items: center;
    gap: 0.4em; 
    font-weight: bold;
    cursor: pointer;
    margin: 0;
}

/* =========================
   SUBMIT BUTTON
   ========================= */

#form-modifica-punti-pilota button[type="submit"]:hover{
    color: var(--buttons);
    border: 0.15em solid var(--buttons);
    background-color: var(--buttons);
    color: white;
} 

/* =========================
   CLASSIFICA - TABS STYLES
   ========================= */

.tabs-navigation {
    display: flex;
    justify-content: center;
    gap: 0; 
    margin: 2em auto;
    max-width: 50em;
}

[role="tab"] {
    background-color: var(--navbar-bg-color);
    color: var(--content-text-color);
    padding: 0.8em 1.5em;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border: 0.15em solid var(--footer-border-color);
    transition: all 0.3s ease;
    font-family: inherit;
}

[role="tab"]:first-child {
    border-radius: 0.5em 0 0 0.5em;
}
[role="tab"]:last-child {
    border-radius: 0 0.5em 0.5em 0;
    border-left: none;
}

[role="tab"]:hover, 
[role="tab"]:focus-visible {
    color: var(--buttons);
    border-color: var(--buttons);
    outline: none;
    z-index: 1;
}

[role="tab"][aria-selected="true"] {
    background-color: var(--buttons);
    color: white;
    border-color: var(--buttons);
}

[role="tabpanel"][hidden] {
    display: none;
}

.classifica_piloti,
.classifica_costruttori {
    width: calc(100% - 2em);
    max-width: 60em;
    margin: 2em auto;
    border-collapse: separate;
    border-spacing: 0 0.4em; 
}

.classifica_piloti th,
.classifica_costruttori th {
    background-color: var(--navbar-bg-color);
    color: var(--accent-color);
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.1em;
    padding: 1em;
    border: none;
    border-bottom: 0.2em solid var(--accent-color);
}

.classifica_piloti td, 
.classifica_piloti tbody th,
.classifica_costruttori td, 
.classifica_costruttori tbody th{
    background-color: var(--footer-border-color);
    padding: 0.8em;
    border: none; 
}

.classifica_piloti tbody th,
.classifica_costruttori tbody th {
    font-weight: 900;
    font-size: 1.2em;
    color: var(--content-text-color);
    width: 3em;
    background-color: var(--navbar-bg-color);
    border-left: 0.3em solid var(--accent-color);
}

.classifica_piloti tbody tr:hover td,
.classifica_costruttori tbody tr:hover td {
    background-color: #444444;
    cursor: default;
}

/* =========================
   ACCESSIBILITÀ COMBO-BOX
   ========================= */

select {
    background-color: var(--content-bg-color);  
    color: var(--content-text-color);             

    border: 2px solid var(--footer-border-color); 
    border-radius: 4px;

    font-size: 1rem;
    line-height: 1.4;
    padding: 0.6rem 0.75rem;

    min-height: 44px; 

    appearance: auto;
}

select:hover {
    border-color: var(--accent-color); 
}

select:focus {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
    border-color: var(--accent-color);
}

select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

select[aria-invalid="true"] {
    border-color: var(--accent-color);
}

label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    color: var(--content-text-color);
}

/* =========================
   PILOTA/SCUDERIE/GARE DETAIL PAGE
   ========================= */

#info-piloti, #info-scuderie, #gare {
    width: 60%;
    margin: 0 auto;
    padding: 2em 1.25em;
}

#info-piloti section, #info-scuderie section, #gare section {
    background-color: var(--navbar-bg-color);
    border: 0.15em solid var(--footer-border-color);
    border-radius: 0.5em;
    padding: 2em;
    margin-bottom: 2em;
    position: relative;
    overflow: hidden;
}

#info-piloti section h3, #info-scuderie section h3, #gare section h3 {
    text-align: left;
    color: var(--accent-color);
    text-transform: uppercase;
    font-size: 1.4em;
    margin-bottom: 1.5em;
    border-bottom: 0.1em solid var(--accent-color);
    padding-bottom: 0.4em;
}

#info-piloti dl, #info-scuderie dl, #gare dl {
    display: grid;
    grid-template-columns: 15em 1fr;
    gap: 1em;
}

#info-piloti dt, #info-scuderie dt, #gare dt {
    font-weight: bold;
    color: var(--footer-text-color);
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
}

#info-piloti dd, #info-scuderie dd, #gare dd {
    margin: 0;
    font-size: 1.2em;
    font-weight: 600;
    color: var(--content-text-color);
}

#info-scuderie section.piloti ul {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
}

#info-scuderie section.piloti li {
    width: 30em;
    padding: 2em;
}

#info-scuderie section.piloti article {
    position: relative;
    overflow: hidden;
    border: 0.5em solid var(--navbar-bg-color);
}

#info-scuderie section.piloti article img {
    width: 30em;
    height: 20em;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease;
}

#info-scuderie section.piloti article a:hover img {
    transform: scale(1.05);
}

#info-scuderie section.piloti article a:hover h3 {
    text-decoration: underline;
}

#info-scuderie section.piloti article h3 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3em;
    margin: 0;

    color: var(--content-text-color);
    background-color: var(--footer-border-color);
    padding: 1em;
    text-align: center;
    box-sizing: border-box;

    z-index: 2;
    border-bottom: none;
}

#info-scuderie section.piloti article.alpine-heading h3 {
    background-color: var(--alpine-color);
    text-transform: none;
}

#info-scuderie section.piloti article.astonmartin-heading h3 {
    background-color: var(--astonmartin-color);
    text-transform: none;
}

#info-scuderie section.piloti article.ferrari-heading h3 {
    background-color: var(--ferrari-color);
    text-transform: none;
}

#info-scuderie section.piloti article.haas-heading h3 {
    background-color: var(--haas-color);
    text-transform: none;
}

#info-scuderie section.piloti article.mclaren-heading h3 {
    background-color: var(--mclaren-color);
    text-transform: none;
}

#info-scuderie section.piloti article.mercedes-heading h3 {
    background-color: var(--mercedes-color);
    text-transform: none;
}

#info-scuderie section.piloti article.rb-heading h3 {
    background-color: var(--racingbulls-color);
    text-transform: none;
}

#info-scuderie section.piloti article.redbullracing-heading h3 {
    background-color: var(--redbull-color);
    text-transform: none;
}

#info-scuderie section.piloti article.sauber-heading h3 {
    background-color: var(--sauber-color);
    text-transform: none;
}

#info-scuderie section.piloti article.williams-heading h3 {
    background-color: var(--williams-color);
    text-transform: none;
}

#info-scuderie section.piloti article.superstar-heading h3 {
    background-color: var(--superstar-color);
    text-transform: none;
}

/* =========================
   ERROR 403 PAGE
   ========================= */

#E403 {
    text-align: center;
}

#E403 p{
    padding: 2em;
    margin: 0em 20em;
}

#E403 img{
    width: 20em;
    height: auto;
}

/* =========================
   ERROR 404 PAGE
   ========================= */
#E404 {
    text-align: center;
}

#E404 p{
    padding: 2em;
    margin: 0em 20em;
}

#E404 img{
    width: 20em;
    height: auto;
    padding: 1em;
    animation: guida 3s ease-in-out infinite;    
}

@keyframes guida {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-50px); }
  100% { transform: translateX(0); }
}

/* =========================
   ERROR 500 PAGE
   ========================= */

#E500 {
    text-align: center;
}

#E500 p{
    padding: 2em;
    margin: 0em 20em;
}

#E500 img{
    width: auto;
    height: 5em;
    padding: 2em;
    animation: fluttua 3s ease-in-out infinite;
}

@keyframes fluttua {
  0%   { transform: translateY(0); opacity: 1; }
  50%  { transform: translateY(-15px); opacity: 0.8; }
  100% { transform: translateY(0); opacity: 1; }
}

#stop, #start{
    background-color: var(--navbar-bg-color);
    color: var(--content-text-color);
    padding: 0.8em 1.5em;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border: 0.15em solid var(--accent-color);
}

#stop:hover, #start:hover{
    background-color: var(--accent-color);
}


/* =========================
   GP HEADER SECTION (PHP GENERATED)
   ========================= */

.gp-stats {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em 1.5em;
    margin: 1.5em 0;
    padding: 1em 0;
    border-top: 1px solid var(--footer-border-color);
    border-bottom: 1px solid var(--footer-border-color);
}

.gp-stats dt {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85em;
    color: var(--accent-color); 
    align-self: center;
}

.gp-stats dd {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--content-text-color);
}

/* =========================
   PODIUM SUMMARY 
   ========================= */

.podium-summary {
    display: flex;
    gap: 0.5em;
    margin-top: 1.5em;
    padding: 0;
    list-style: none; 
}

.podium-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--content-bg-color);
    padding: 1em 0.5em;
    border-radius: 0.2em;
    border-top: 0.3em solid var(--footer-border-color); 
    transition: transform 0.3s ease;
}

.podium-item.gold { border-top-color: #FFD700; }
.podium-item.silver { border-top-color: #C0C0C0; }
.podium-item.bronze { border-top-color: #CD7F32; }

.podium-item .rank {
    font-size: 1.5em;
    font-weight: 900;
    margin-bottom: 0.2em;
    display: block;
}

.gold .rank { color: #FFD700; }
.silver .rank { color: #C0C0C0; }
.bronze .rank { color: #CD7F32; }

.podium-item .driver {
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    color: var(--content-text-color);
}

.podium-item:hover {
    transform: translateY(-3px);
    background-color: var(--navbar-bg-color);
}

/* =========================
    SEZIONE AGGIUNGI COMMENTO
   ========================= */

.commento-titolo {
    text-align: left;
    color: var(--accent-color);
    text-transform: uppercase;
    font-size: 1.5em;
    border-bottom: 0.1em solid var(--accent-color);
    padding-bottom: 0.4em;
    margin-bottom: 1.2em;
}

#form-commento {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

#form-commento label {
    font-size: 0.95em;
    color: var(--footer-text-color);
}

#form-commento label strong {
    color: var(--content-text-color);
}

#testo-commento {
    width: 100%;
    box-sizing: border-box;
    padding: 1em;
    background-color: var(--content-bg-color);
    color: var(--content-text-color);
    border: 0.1em solid var(--footer-border-color);
    border-radius: 0.3em;
    font-family: inherit;
    font-size: 1em;
    line-height: 1.5;
    resize: vertical;
    min-height: 8em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#testo-commento:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.15em rgba(225, 6, 0, 0.3);
}

#form-commento button[type="submit"] {
    align-self: flex-start;
    padding: 0.8em 2em;
    background-color: transparent;
    color: var(--accent-color);
    border: 0.15em solid var(--accent-color);
    border-radius: 0.3em;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

#form-commento button[type="submit"]:hover,
#form-commento button[type="submit"]:focus {
    color: var(--buttons);
    border: 0.15em solid var(--buttons);
    background-color: var(--buttons);
    color: var(--content-text-color);
    outline: none;
}

.error-msg, .success-msg {
    margin-top: 1em;
    padding: 0.8em;
    border-radius: 0.3em;
    font-weight: bold;
    text-align: center;
}

.error-msg {
    background-color: rgba(185, 28, 28, 0.1);
    color: var(--error-color);
    border: 1px solid var(--error-border);
}

.success-msg {
    background-color: rgba(21, 128, 61, 0.1);
    color: var(--success-color);
    border: 1px solid var(--success-border);
}

.area_commenti {
    max-width: 50em;
    margin: 2em auto;
    padding: 1.5em;
    background-color: var(--navbar-bg-color);
    border: 0.15em solid var(--footer-border-color);
    border-radius: 0.5em;
}

.area_commenti .comment-list {
    list-style: none;
    padding: 0;
}

/* =========================
   PULSANTE ELIMINA COMMENTO
   ========================= */

.commento-card header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; 
    gap: 1em;
    margin-bottom: 0.8em;
}

.comment-meta {
    flex-grow: 1;
}

.comment-meta h3 {
    text-align: left;
    margin: 0;
    font-size: 1.1em;
    color: var(--accent-color);
}

.btn-delete {
    background-color: transparent;
    color: var(--accent-color);
    border: 0.12em solid var(--accent-color);
    border-radius: 0.3em;
    padding: 0.4em 0.8em;
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    white-space: nowrap; 
}

.btn-delete:hover,
.btn-delete:focus-visible {
    color: var(--buttons);
    border: 0.15em solid var(--buttons);
    background-color: var(--buttons);
    color: white;
    outline: none;
    transform: scale(1.05);
}

.area_commenti p.success, 
.area_commenti p.error {
    margin-bottom: 0.5em;
    border-radius: 0.3em;
    font-weight: bold;
    font-size: 0.9em;
}

.area_commenti p.success {
    color: var(--success-color);
}

.area_commenti p.error {
    color: var(--error-color);
}

/* =========================
   VALIDATORI HTML5
   ========================= */
   
.validators-group {
    position: relative;
    text-align: right;   
    width: 100%;          
    margin-top: 1em;
    display: block;      
}

.validators-group a {
    display: inline-block; 
    margin-left: 0.5em;   
    position: relative;  
}

.validators-group img {
    opacity: 0.8;
    transition: opacity 0.3s ease;
    vertical-align: middle;
}

.validators-group img:hover {
    opacity: 1;
}