/* 1. Import e Reset */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
}

/*Variabili CSS */
:root {
  --text-primary: #1c0f07;
  --text-secondary: #e4e0d9;
  --text-light: #f8f4f1;
  --text-error: #cb0001;
  --text-white: #fff;
  --bg-primary: var(--text-primary);
  --bg-secondary: var(--text-secondary);
  --bg-error: var(--text-error);
  --bg-white: var(--text-white);
  --bg-light: var(--text-light);

  --size-1: 1rem;
  --size-2: 2rem;
  --size-4: 4rem;
  --size-6: 6rem;
  --size-8: 8rem;
  --size-10: 10rem;
  --size-12: 12rem;
  --size-14: 14rem;
  --size-16: 16rem;
  --size-18: 18rem;
  --size-20: 20rem;

  --padding-2: 2rem;
  --padding-4: 4rem;
  --padding-6: 6rem;
  --padding-8: 8rem;
  --padding-10: 10rem;
  --padding-12: 12rem;
  --padding-14: 14rem;
  --padding-16: 16rem;
  --padding-18: 18rem;
  --padding-20: 20rem;

  --margin-2: var(--padding-2);
  --margin-4: var(--padding-4);
  --margin-6: var(--padding-6);
  --margin-8: var(--padding-8);
  --margin-10: var(--padding-10);
  --margin-12: var(--padding-12);
  --margin-14: var(--padding-14);
  --margin-16: var(--padding-16);
  --margin-18: var(--padding-18);
  --margin-20: var(--padding-20);

  --radius: 1rem;
}

/* Utility Classes (Background, Border, Padding, Margin) */
.bg-primary {
  background-color: var(--bg-primary);
}
.bg-secondary {
  background-color: var(--bg-secondary);
}
.bg-error {
  background-color: var(--bg-error);
}
.bg-white {
  background-color: var(--bg-white);
}
.border-radius {
  border-radius: var(--radius);
}

/* Padding Utilities */
.padding-2 {
  padding: var(--padding-2);
}
.padding-4 {
  padding: var(--padding-4);
}
.padding-6 {
  padding: var(--padding-6);
}
.padding-8 {
  padding: var(--padding-8);
}
.padding-10 {
  padding: var(--padding-10);
}
.padding-12 {
  padding: var(--padding-12);
}
.padding-14 {
  padding: var(--padding-14);
}
.padding-16 {
  padding: var(--padding-16);
}
.padding-18 {
  padding: var(--padding-18);
}
.padding-20 {
  padding: var(--padding-20);
}

/* Padding X/Y Utilities */
.padding-x-2 {
  padding-left: var(--padding-2);
  padding-right: var(--padding-2);
}
.padding-x-4 {
  padding-left: var(--padding-4);
  padding-right: var(--padding-4);
}
.padding-x-6 {
  padding-left: var(--padding-6);
  padding-right: var(--padding-6);
}
.padding-x-8 {
  padding-left: var(--padding-8);
  padding-right: var(--padding-8);
}
.padding-x-10 {
  padding-left: var(--padding-10);
  padding-right: var(--padding-10);
}
.padding-x-12 {
  padding-left: var(--padding-12);
  padding-right: var(--padding-12);
}
.padding-x-14 {
  padding-left: var(--padding-14);
  padding-right: var(--padding-14);
}
.padding-x-16 {
  padding-left: var(--padding-16);
  padding-right: var(--padding-16);
}
.padding-x-18 {
  padding-left: var(--padding-18);
  padding-right: var(--padding-18);
}
.padding-x-20 {
  padding-left: var(--padding-20);
  padding-right: var(--padding-20);
}

.padding-y-2 {
  padding-top: var(--padding-2);
  padding-bottom: var(--padding-2);
}
.padding-y-4 {
  padding-top: var(--padding-4);
  padding-bottom: var(--padding-4);
}
.padding-y-6 {
  padding-top: var(--padding-6);
  padding-bottom: var(--padding-6);
}
.padding-y-8 {
  padding-top: var(--padding-8);
  padding-bottom: var(--padding-8);
}
.padding-y-10 {
  padding-top: var(--padding-10);
  padding-bottom: var(--padding-10);
}
.padding-y-12 {
  padding-top: var(--padding-12);
  padding-bottom: var(--padding-12);
}
.padding-y-14 {
  padding-top: var(--padding-14);
  padding-bottom: var(--padding-14);
}
.padding-y-16 {
  padding-top: var(--padding-16);
  padding-bottom: var(--padding-16);
}
.padding-y-18 {
  padding-top: var(--padding-18);
  padding-bottom: var(--padding-18);
}
.padding-y-20 {
  padding-top: var(--padding-20);
  padding-bottom: var(--padding-20);
}

/* Margin Utilities */
.margin-2 {
  margin: var(--margin-2);
}
.margin-4 {
  margin: var(--margin-4);
}
.margin-6 {
  margin: var(--margin-6);
}
.margin-8 {
  margin: var(--margin-8);
}
.margin-10 {
  margin: var(--margin-10);
}
.margin-12 {
  margin: var(--margin-12);
}
.margin-14 {
  margin: var(--margin-14);
}
.margin-16 {
  margin: var(--margin-16);
}
.margin-18 {
  margin: var(--margin-18);
}
.margin-20 {
  margin: var(--margin-20);
}

.mt-2 {
  margin-top: var(--margin-2);
}
.mt-4 {
  margin-top: var(--margin-4);
}
.mt-6 {
  margin-top: var(--margin-6);
}
.mt-8 {
  margin-top: var(--margin-8);
}
.mt-10 {
  margin-top: var(--margin-10);
}
.mt-12 {
  margin-top: var(--margin-12);
}
.mt-14 {
  margin-top: var(--margin-14);
}
.mt-16 {
  margin-top: var(--margin-16);
}
.mt-18 {
  margin-top: var(--margin-18);
}
.mt-20 {
  margin-top: var(--margin-20);
}

.mb-2 {
  margin-bottom: var(--margin-2);
}
.mb-4 {
  margin-bottom: var(--margin-4);
}
.mb-6 {
  margin-bottom: var(--margin-6);
}
.mb-8 {
  margin-bottom: var(--margin-8);
}
.mb-10 {
  margin-bottom: var(--margin-10);
}
.mb-12 {
  margin-bottom: var(--margin-12);
}
.mb-14 {
  margin-bottom: var(--margin-14);
}
.mb-16 {
  margin-bottom: var(--margin-16);
}
.mb-18 {
  margin-bottom: var(--margin-18);
}
.mb-20 {
  margin-bottom: var(--margin-20);
}

/* Margin Left/Right Utilities */
.ml-2 {
  margin-left: var(--margin-2);
}
.ml-4 {
  margin-left: var(--margin-4);
}
.ml-6 {
  margin-left: var(--margin-6);
}
.ml-8 {
  margin-left: var(--margin-8);
}
.ml-10 {
  margin-left: var(--margin-10);
}
.ml-12 {
  margin-left: var(--margin-12);
}
.ml-14 {
  margin-left: var(--margin-14);
}
.ml-16 {
  margin-left: var(--margin-16);
}
.ml-18 {
  margin-left: var(--margin-18);
}
.ml-20 {
  margin-left: var(--margin-20);
}

.mr-2 {
  margin-right: var(--margin-2);
}
.mr-4 {
  margin-right: var(--margin-4);
}
.mr-6 {
  margin-right: var(--margin-6);
}
.mr-8 {
  margin-right: var(--margin-8);
}
.mr-10 {
  margin-right: var(--margin-10);
}
.mr-12 {
  margin-right: var(--margin-12);
}
.mr-14 {
  margin-right: var(--margin-14);
}
.mr-16 {
  margin-right: var(--margin-16);
}
.mr-18 {
  margin-right: var(--margin-18);
}
.mr-20 {
  margin-right: var(--margin-20);
}

/*Layout Container */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--padding-2);
}

/*Utility: Visibility */
.hidden {
  display: none;
}
.show {
  display: block;
}

/*Bottoni */
.button {
  background-color: var(--bg-primary);
  color: var(--text-white);
  padding: 16px 26px;
  font-size: medium;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
.button:hover {
  opacity: 80%;
}

.button-secondary {
  background-color: var(--bg-white);
  color: var(--text-primary);
  padding: 16px 20px;
  font-size: medium;
  border: 1px solid var(--text-primary);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
.button-secondary:hover {
  opacity: 80%;
}

/*Layout principali */
.main-page {
  max-width: 100%;
  height: 100vh;
  background-color: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-view {
  width: 40rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-2);
}
.main-view h1 {
  font-size: var(--size-2);
  text-align: center;
}
.disclaimer {
  text-align: center;
  font-size: small;
}
.main-logo {
  width: 120px;
}

/*Navbar */
.home-navbar {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--bg-secondary);
}
.home-navbar img {
  width: 100px;
}

/*Hero Section */
.home-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 20px;
}
.home-hero-img {
  width: 30rem;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.home-hero-text {
  font-size: var(--size-2);
}
.home-hero-description {
  color: var(--text-primary);
  margin-top: 10px;
}

/* Responsive Hero */
@media (max-width: 768px) {
  .home-hero {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .home-hero-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

/*Form e Input */
.custom-label-input {
  display: flex;
  flex-direction: column;
  gap: 8;
  flex: 1;
}
.custom-label-input input, select {
  height: 2.5rem;
  width: 100%;
  border: 1px solid var(--bg-primary);
  border-radius: var(--radius);
  padding: 4px;
}
#userForm {
  padding: var(--padding-4);
  border: 1px solid var(--bg-primary);
  border-radius: var(--radius);
}
.form-input-flex {
  width: 100%;
  display: flex;
  align-items: center;
  flex: 1;
  gap: 10px;
}

/*Risultati */
.result-view {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20px;
}
.result-img {
  width: 300px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  filter: grayscale(0);
}

/*Immagini Responsive */
.img-cover-21-9 {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.25);
}
.img-cover-gg {
  width: 30rem;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
@media (max-width: 640px) {
  .img-cover-gg {
    width: 100%;
  }
}

/*Loader */
.loader {
  --uib-size: 40px;
  --uib-color: black;
  --uib-speed: 0.9s;
  --uib-stroke: 5px;
  --mask-size: calc(var(--uib-size) / 2 - var(--uib-stroke));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--uib-size);
  width: var(--uib-size);
  -webkit-mask: radial-gradient(
    circle var(--mask-size),
    transparent 99%,
    #000 100%
  );
  mask: radial-gradient(circle var(--mask-size), transparent 99%, #000 100%);
  background-image: conic-gradient(transparent 25%, var(--uib-color));
  animation: spin calc(var(--uib-speed)) linear infinite;
  border-radius: 50%;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 15. Responsive Utilities */
@media (width <= 40rem) {
  #userForm {
    padding: var(--padding-2);
  }
  .main-view {
    width: 100%;
  }
  .button,
  .button-secondary {
    width: 100%;
    margin-top: 6px;
  }
  .home-hero-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .form-input-flex {
    flex-direction: column;
    align-items: normal;
  }
  .result-view {
    flex-direction: column;
  }
  .result-img {
    width: 100%;
  }
}

/* 16. Layout testo e immagine riutilizzabile */
.text-img-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.text-img-row > div {
  flex: 1;
}
.text-img-row img {
  flex-shrink: 0;
  max-width: 40%;
}
@media (max-width: 768px) {
  .text-img-row {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .text-img-row img {
    max-width: 100%;
    margin: 0 auto;
  }
}

/* 17. Footer */
.footer {
  background-color: var(--bg-primary);
  color: var(--text-secondary);
  padding: var(--padding-4);
  font-size: 1rem;
  line-height: 1.5;
}
.footer a {
  color: var(--text-error);
  text-decoration: underline;
  transition: opacity 0.3s ease;
}
.footer a:hover {
  opacity: 0.8;
}
.footer .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.footer-left,
.footer-center,
.footer-right {
  min-width: 200px;
  margin-bottom: auto;
}
.footer-left img {
  width: 160px;
}
.footer-center {
  flex: 1;
  max-width: 500px;
  padding-top: var(--padding-6);
}
.footer-right {
  flex: 1;
  padding-top: var(--padding-6);
}
@media (max-width: 768px) {
  .footer .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-left,
  .footer-center,
  .footer-right {
    max-width: 100%;
    text-align: center;
    min-width: auto;
  }
  .footer-right {
    text-align: center;
  }
}

.link {
  color: var(--text-error);
  transition: opacity 0.3s ease;
  /* Quando ci passa sopra il mause cambia per cliccare  */
  cursor: pointer;
  font-weight: bold;
}