@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic");

/*
	Photon by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}




ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	html {
		box-sizing: border-box;
		scroll-behavior: smooth;
	}
	body {
		background-color:#181818;
		overflow-x: hidden;
		color: #ffffff;
		padding-top: 70px; /* altezza navbar */
		font-family: "Source Sans Pro", Helvetica, sans-serif;
	}


	strong, b {
		color: #555;
		font-weight: 400;
	}

	em, i {
		font-style: italic;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #555;
		line-height: 1em;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}

	h1 {
		font-size: 2.25em;
		line-height: 1.35em;
	}

	h2 {
		font-size: 2em;
		line-height: 1.35em;
	}

	h3 {
		font-size: 1.35em;
		line-height: 1.5em;
	}

	h4 {
		font-size: 1.25em;
		line-height: 1.5em;
	}

	h5 {
		font-size: 0.9em;
		line-height: 1.5em;
	}

	h6 {
		font-size: 0.7em;
		line-height: 1.5em;
	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	hr {
		border: 0;
		border-bottom: solid 1px rgba(144, 144, 144, 0.5);
		margin: 2em 0;
	}

		hr.major {
			margin: 3em 0;
		}

	blockquote {
		border-left: solid 4px rgba(144, 144, 144, 0.5);
		font-style: italic;
		margin: 0 0 2em 0;
		padding: 0.5em 0 0.5em 2em;
	}

	code {
		background: rgba(144, 144, 144, 0.075);
		border-radius: 4px;
		border: solid 1px rgba(144, 144, 144, 0.5);
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0.25em;
		padding: 0.25em 0.65em;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0 2em 0;
	}

		pre code {
			display: block;
			line-height: 1.75em;
			padding: 1em 1.5em;
			overflow-x: auto;
		}

	.align-left {
		text-align: left;
	}

	.align-center {
		text-align: center;
	}

	.align-right {
		text-align: right;
	}

/* ======== LOGIN PAGE BACKGROUND + HEADER ======== */
.login-page-background {
  min-height: 100vh;
  background: linear-gradient(135deg, #181818 0%, #1e1e1e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 60px;
  font-family: 'Segoe UI', sans-serif;
  animation: fadeIn 0.6s ease-in-out;
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
  animation: slideDown 0.6s ease-in-out;
}

.login-header h1 {
  font-size: 3.2rem;
  color: #ffffff;
  margin-bottom: 10px;
  font-weight: bold;
}

.login-header h1 span {
  background: #ffa500;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.login-header p {
  font-size: 1.3rem;
  color: #ffffff;
  opacity: 0.85;
}
/* loading-button */
   .loading-dots {
      display: none;
      position: relative;
      gap: 12px;
      justify-content: center;
      align-items: center;
    }

    .login-button.loading .button-text {
      display: none;
    }

    .login-button.loading .loading-dots {
      display: flex;
    }

    /* ✅ Cerchi grandi e rotondi */
    .dot {
      width: 14px;
      height: 14px;
      background-color: white;
      border-radius: 50%;
      opacity: 0.3;
      animation: pulse 1.4s infinite;
    }

    .dot:nth-child(2) {
      animation-delay: 0.2s;
    }

    .dot:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes pulse {
      0%, 100% {
        opacity: 0.3;
        transform: scale(1);
      }
      50% {
        opacity: 1;
        transform: scale(1.5);
      }
    }

.login-button.loading .button-text {
  opacity: 0.5; 
}   

/* ======== LOGIN FORM ======== */
.login-form-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px 80px;
  width: 100%;
}

.login-form {
  background-color: #1e1e1e;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: fadeInUp 0.8s ease-in-out;
}

.login-form h2 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #ffffff;
  text-align: center;
}

/* Modern floating label style */
.login-form label {
  font-weight: 600;
  color: #ffffff;
  font-size: 1rem;
  margin-bottom: -5px;
  transition: all 0.3s ease;
}

.login-form input.password{
  margin-bottom: -3px;
  transition: all 0.3s ease;
}

.login-form input {
  padding: 12px 16px;
  border-radius: 8px;
  border: 0.3px solid #ffa500;
  background-color: #2a2a2a;
  color: #ffffff;
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.login-form input:focus {
  outline: none;
  border-color: #ffa500;
  box-shadow: 0 0 10px #ffa500;
  background-color: #2f2f2f;
}

/* Button refined */
.login-form .login-button {
  background-color: #ffa500;
  border: 2px solid #ffa500;
  color: #ffffff;
  padding: 12px;
  border-radius: 15px;
  font-weight: 600;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.3s ease;
}


.login-form .login-button:hover {
  background-color: #ffa500;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px #ffa500;
}

/* Sign up link */
.signup-link {
  font-size: 0.9rem;
  text-align: center;
  margin-top: 10px;
  color: #dddddd;
}

.signup-link a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.signup-link a:hover {

  color: #ffa500;
  text-decoration: none;
}

/* ======== ANIMATIONS ======== */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slideDown {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ======== RESPONSIVE ======== */
@media (max-width: 480px) {
  .login-header h1 {
    font-size: 2.2rem;
  }

  .login-form {
    padding: 30px 20px;
  }

  .login-page-background {
    padding: 20px 10px 40px;
  }
}