/* ==========================================================================
   WebRSA - Tema Dark
   Override del template chiaro (assets/css/style.css) senza modificarlo.
   Palette: fondo quasi-nero, testo chiaro, accento rosso brand + azzurro.
   ========================================================================== */

:root {
  --wrsa-bg: #0b0e13;
  --wrsa-bg-alt: #0f131a;
  --wrsa-surface: #151b24;
  --wrsa-surface-2: #1b2330;
  --wrsa-border: rgba(255, 255, 255, 0.08);
  --wrsa-text: #e9edf3;
  --wrsa-text-muted: #9aa7b8;
  --wrsa-red: #e6342f;
  --wrsa-red-dark: #b41212;
  --wrsa-teal: #01b1d7;
  --wrsa-font-heading: 'Sora', 'Poppins', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--wrsa-bg);
  color: var(--wrsa-text);
}

a {
  color: var(--wrsa-teal);
}

a:hover {
  color: var(--wrsa-red);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wrsa-font-heading);
  color: #fff;
}

.accent-red {
  color: var(--wrsa-red) !important;
  font-weight: bold;
}

/* ---------- Topbar & Header ---------- */
#topbar {
  background: #05070a;
  color: var(--wrsa-text-muted);
  border-bottom: 1px solid var(--wrsa-border);
}

#topbar .contact-info a {
  color: var(--wrsa-text-muted);
}

#topbar .contact-info a:hover {
  color: var(--wrsa-red);
}

#topbar .contact-info i {
  color: var(--wrsa-teal);
}

#topbar .social-links a {
  color: var(--wrsa-text-muted);
}

#header {
  background: rgba(11, 14, 19, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--wrsa-border);
}

#header.header-scrolled {
  background: rgba(11, 14, 19, 0.97);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

#header .logo h1 a,
#header .logo h1 a span {
  color: #fff;
}

#header .logo h1 a span i {
  color: var(--wrsa-red);
}

.nav-menu a {
  color: var(--wrsa-text);
}

.nav-menu a:hover,
.nav-menu .active > a,
.nav-menu li:hover > a {
  color: var(--wrsa-red);
}

.nav-menu li a[href*="Registrazione"] {
  background: linear-gradient(135deg, var(--wrsa-red-dark), var(--wrsa-red));
  color: #fff !important;
  padding: 8px 16px !important;
  border-radius: 30px;
}

.mobile-nav-toggle,
.mobile-nav-toggle i {
  color: #fff;
}

.mobile-nav-active #mobile-body-overly {
  background: rgba(0, 0, 0, 0.8);
}

/* Il template la chiama .mobile-nav (non un id) */
.mobile-nav {
  background: var(--wrsa-bg-alt) !important;
  border: 1px solid var(--wrsa-border);
}

.mobile-nav a {
  color: var(--wrsa-text) !important;
}

.mobile-nav a:hover,
.mobile-nav .active > a,
.mobile-nav li:hover > a {
  color: var(--wrsa-red) !important;
}

/* ---------- Hero ---------- */
#hero .carousel-item::before {
  background: linear-gradient(180deg, rgba(5, 7, 10, 0.55) 0%, rgba(5, 7, 10, 0.85) 65%, #05070a 100%) !important;
}

#hero h2 {
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

#hero p {
  color: #d6dce4;
}

#hero .btn-get-started {
  background: linear-gradient(135deg, var(--wrsa-red-dark), var(--wrsa-red));
  border: none;
}

#hero .btn-get-started:hover {
  background: var(--wrsa-teal);
}

#hero .carousel-indicators li {
  background-color: rgba(255, 255, 255, 0.35);
}

#hero .carousel-indicators li.active {
  background-color: var(--wrsa-red);
}

/* ---------- Section title ---------- */
/* Il template originale usa lo span come watermark gigante quasi invisibile
   dietro il titolo (posizione assoluta, colore chiarissimo). Sul tema dark
   lo trasformiamo invece in una normale "eyebrow label" sopra il titolo. */
.section-title span {
  position: static;
  display: block;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--wrsa-teal);
  margin-bottom: 8px;
}

.section-title h2 {
  color: #fff;
  font-size: 42px;
  position: relative;
  display: inline-block;
  padding-bottom: 18px;
}

@media (max-width: 575px) {
  .section-title h2 {
    font-size: 30px;
  }
}

.section-title h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: var(--wrsa-red);
}

.section-title p {
  color: var(--wrsa-text-muted);
}

/* ---------- About ---------- */
.about {
  background: var(--wrsa-bg);
}

.about .content h3 {
  color: var(--wrsa-text);
}

.about .content p,
.about .content ul li {
  color: var(--wrsa-text-muted);
}

.about .content ul i {
  color: var(--wrsa-teal);
}

.btn-demo-hero {
  height: 64px;
  padding: 0 32px;
  border: none;
  border-radius: 40px;
  background: linear-gradient(135deg, var(--wrsa-red-dark), var(--wrsa-red));
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 8px 24px rgba(230, 52, 47, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-demo-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(230, 52, 47, 0.5);
  color: #fff;
}

.text-demo-hint {
  color: var(--wrsa-text-muted) !important;
}

/* ---------- About list (icon boxes) ---------- */
.about-list {
  background: var(--wrsa-bg-alt);
}

.about-list .icon-box {
  background: var(--wrsa-surface-2);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* Bug ereditato dal template: mt-lg-0 su più box annulla il margine tra loro
   su schermi grandi. Il margin-bottom qui sopra risolve indipendentemente
   dalle classi Bootstrap applicate nel markup. */
.about-list .icon-box:last-child {
  margin-bottom: 0;
}

.about-list .icon-box:hover {
  border-color: var(--wrsa-teal);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

.about-list .icon-box i {
  color: var(--wrsa-teal);
}

.about-list .icon-box h4 {
  color: #fff;
}

.about-list .icon-box p {
  color: var(--wrsa-text-muted);
}

.about-list .image {
  border: 1px solid var(--wrsa-border) !important;
  border-radius: 12px;
  filter: brightness(0.92);
  background-color: var(--wrsa-surface);
  background-size: contain !important;
}

/* Pannelli con vera <img> (si adattano alle proporzioni reali, niente spazio vuoto) */
.about-list .image.image-fit {
  min-height: 0;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  overflow: visible;
  border: none !important;
  background: none !important;
  border-radius: 0;
  filter: none;
}

.about-list .image.image-fit img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--wrsa-border);
}

/* Due immagini impilate nello stesso riquadro, con distacco tra loro */
.about-list .image.image-fit-stack {
  flex-direction: column;
  gap: 14px;
}

.about-list a {
  color: var(--wrsa-teal);
}

/* ---------- Target section (a chi è rivolto) ---------- */
.target-section {
  background: var(--wrsa-bg);
  padding: 60px 0;
}

.target-grid {
  margin-top: 20px;
  row-gap: 28px;
  column-gap: 0;
}

.target-card {
  background: var(--wrsa-surface-2);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 28px 22px;
  height: 100%;
  margin: 0 0 28px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.target-card:hover {
  transform: translateY(-4px);
  border-color: var(--wrsa-red);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

.target-grid > [class*="col-"] {
  padding-left: 14px;
  padding-right: 14px;
}

.target-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(230, 52, 47, 0.18), rgba(1, 177, 215, 0.18));
  margin-bottom: 16px;
}

.target-icon i {
  font-size: 26px;
  color: var(--wrsa-red);
}

.target-card h4 {
  font-size: 17px;
  margin-bottom: 10px;
  color: #fff;
}

.target-card p {
  color: var(--wrsa-text-muted);
  font-size: 14px;
  margin-bottom: 14px;
}

.target-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.target-card ul li {
  font-size: 13.5px;
  color: var(--wrsa-text);
  margin-bottom: 8px;
}

.target-card ul i {
  color: var(--wrsa-teal);
  margin-right: 6px;
}

.target-banner {
  margin-top: 20px;
  background: linear-gradient(135deg, var(--wrsa-surface-2), var(--wrsa-surface));
  border: 1px solid var(--wrsa-border);
  border-radius: 16px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.target-banner-icon {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 50%;
  background: rgba(1, 177, 215, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.target-banner-icon i {
  font-size: 26px;
  color: var(--wrsa-teal);
}

.target-banner-text {
  flex: 1;
  min-width: 220px;
}

.target-banner-text h5 {
  color: #fff;
  margin-bottom: 4px;
  font-size: 16px;
}

.target-banner-text p {
  color: var(--wrsa-text-muted);
  margin: 0;
  font-size: 14px;
}

.btn-demo-banner {
  background: linear-gradient(135deg, var(--wrsa-red-dark), var(--wrsa-red));
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-demo-banner:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(230, 52, 47, 0.4);
}

/* ---------- Novità section ---------- */
.novita-section {
  background: var(--wrsa-bg-alt);
  padding: 60px 0;
}

.novita-grid {
  margin-top: 10px;
  row-gap: 28px;
}

.novita-card {
  background: var(--wrsa-surface-2);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 3px solid var(--wrsa-red);
  border-radius: 12px;
  padding: 24px 20px;
  height: 100%;
  margin: 0 0 28px;
  text-align: left;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.novita-card:hover {
  border-color: var(--wrsa-teal);
  border-top-color: var(--wrsa-teal);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

.novita-grid > [class*="col-"] {
  padding-left: 14px;
  padding-right: 14px;
}

.novita-card i {
  font-size: 28px;
  color: var(--wrsa-red);
  margin-bottom: 12px;
  display: inline-block;
}

.novita-card h4 {
  font-size: 15.5px;
  color: #fff;
  margin-bottom: 8px;
}

.novita-card p {
  font-size: 13.5px;
  color: var(--wrsa-text-muted);
  margin: 0;
}

/* ---------- Portfolio / Gallery ---------- */
.portfolio {
  background: var(--wrsa-bg);
}

.portfolio #portfolio-flters li {
  color: var(--wrsa-text-muted);
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
  color: #fff;
  background: var(--wrsa-red);
}

.portfolio .portfolio-wrap {
  border-radius: 10px;
  overflow: hidden;
}

.portfolio .portfolio-wrap .portfolio-info {
  background: rgba(11, 14, 19, 0.88);
}

.portfolio .portfolio-wrap .portfolio-info h4 {
  color: #fff;
}

.portfolio .portfolio-wrap .portfolio-info p {
  color: var(--wrsa-text-muted);
}

.portfolio .portfolio-wrap .portfolio-info .portfolio-links a {
  background: var(--wrsa-red);
}

/* ---------- Contact ---------- */
.contact {
  background: var(--wrsa-bg-alt);
}

.contact .info-wrap .row {
  row-gap: 20px;
}

.contact .info-wrap .row > [class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
}

.contact .info {
  background: var(--wrsa-surface-2);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 20px;
  margin: 0 8px 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.contact .info i {
  color: var(--wrsa-teal);
  background: transparent;
}

.contact .info h4 {
  color: #fff;
}

.contact .info p,
.contact .info p a {
  color: var(--wrsa-text-muted);
}

.contact .info:hover i {
  background: var(--wrsa-red);
  color: #fff;
}

/* ---------- Footer ---------- */
#footer {
  background: #05070a;
  border-top: 1px solid var(--wrsa-border);
}

#footer .footer-top {
  background: #05070a;
}

#footer .footer-top .footer-info h3 span {
  color: #fff;
}

#footer .footer-top .footer-info p,
#footer .footer-top .footer-info p a {
  color: var(--wrsa-text-muted);
}

#footer .footer-top h4 {
  color: #fff;
}

#footer .footer-top .footer-links ul a {
  color: var(--wrsa-text-muted);
}

#footer .footer-top .footer-links ul a:hover {
  color: var(--wrsa-red);
}

#footer .footer-top .footer-links ul i {
  color: var(--wrsa-teal);
}

#footer .copyright,
#footer .credits {
  color: var(--wrsa-text-muted);
}

#footer .credits a {
  color: var(--wrsa-teal);
}

.logo-savesoft {
  border-radius: 18px;
  overflow: hidden;
  display: inline-block;
}

/* ---------- Modali Bootstrap (Regolamento) ---------- */
.modal-content {
  background: var(--wrsa-surface);
  color: var(--wrsa-text);
  border: 1px solid var(--wrsa-border);
}

.modal-footer.bg-light {
  background: var(--wrsa-surface-2) !important;
}

.modal .text-secondary {
  color: var(--wrsa-text-muted) !important;
}

/* ---------- jQuery UI autocomplete (suggerimenti Veronika) ---------- */
.ui-autocomplete {
  background: var(--wrsa-surface) !important;
  border: 1px solid var(--wrsa-border) !important;
  color: var(--wrsa-text) !important;
}

.ui-menu-item-wrapper {
  color: var(--wrsa-text) !important;
}

.ui-menu-item-wrapper.ui-state-active,
.ui-state-active {
  background: var(--wrsa-red) !important;
  border-color: var(--wrsa-red) !important;
  color: #fff !important;
}