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

body {
  overflow-x: hidden;
}

/* =========================
   ROOT
========================= */

:root {
  --phonetastico-color: #ff3131;

  --menu-bg: #FFFFFF;
  --menu-color: #0B0D12;

  --white-premium: #FFFFFF;
  --white-soft: #f5f5f7;
  --white-muted: #EEF1F6;

  --black-premium: #0B0D12;
  --black-soft: #12141A;
  --black-muted: #1A1D24;

  --blue-premium: #0A3D91;
  --blue-soft: #E9F0FB;
  --blue-accent: #2e75e8;
  --blue-deep: #081F4D;
  --blue-muted: #2B4C7E;

  --gray-light: #E5E7EB;
  --gray-medium: #6B7280;
  --gray-dark: #1F2937;
  --gray-deep: #111827;

  --success-trust: #16A34A;
  --warning-soft: #F59E0B;
  --error-soft: #DC2626;

  --blue-accent-rgb: 46, 117, 232;
  --error-soft-rgb: 220, 38, 38;
}

/* =========================
   LAYOUT
========================= */

main {
  display: flex;
  width: 100%;
  height: 100vh;
  position: relative;
}

/* =========================
   IMAGE SIDE
========================= */

.img-container {
  width: 45%;
  position: relative;
  overflow: hidden;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-container .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
}

/* =========================
   FORM SIDE
========================= */

#form-container {
  width: 55%;
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--white-premium);
}

#form-container h2 {
  color: var(--black-premium);
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

#form-container p {
  color: var(--black-soft);
  font-size: 15px;
  max-width: 420px;
}

/* =========================
   FORM
========================= */

#contact-form {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =========================
   FLOAT LABEL FIX (IMPORTANTE)
========================= */

#contact-form input.label-style,
#contact-form textarea.label-style {
  width: 100%;
  padding: 22px 16px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.241);
  background: rgba(255,255,255,0.08);
  color: var(--black-premium);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: all 0.2s ease;
}

/* hover */
.label-style:hover {
  border-color: rgba(0,0,0,0.3);
}

/* focus */
.label-style:focus {
  border-color: var(--blue-accent);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 3px rgba(var(--blue-accent-rgb), 0.2);
}

/* placeholder obbligatorio per floating */
.label-style::placeholder {
  color: transparent;
}

/* =========================
   FLOAT LABEL (NUCLEO)
========================= */

.campo {
  position: relative;
}

.campo label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: rgba(0,0,0,0.5);
  pointer-events: none;
  transition: all 0.18s ease;
  background: var(--white-premium);
  padding: 0 4px;
}

/* stato attivo */
.label-style:focus + label,
.label-style:not(:placeholder-shown) + label {
  top: 8px;
  transform: translateY(0);
  font-size: 11px;
  font-weight: 600;
  color: var(--blue-accent);
}

/* TEXTAREA FIX LABEL */
.label-message + label {
  top: 26px;
}

/* =========================
   TEXTAREA
========================= */

.label-message {
  min-height: 160px;
  resize: none;
}

/* =========================
   PRIVACY
========================= */

.privacy-text {
  font-size: 13px;
  color: var(--gray-medium);
  margin-top: 5px;
}

.privacy-link {
  color: var(--blue-accent);
  text-decoration: underline;
}

/* =========================
   CTA
========================= */

#contact-form button {
  width: 100%;
  margin-top: 10px;
}

/* =========================
   SUCCESS STATE
========================= */

.animazione {
  width: 55%;  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
}

.animazione_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--black-premium);
  font-size: 16px;font-weight: 750;
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .animazione_container{margin-top: 60px;}
}

/* =========================
   ERROR STATE (JS READY)
========================= */

.error {
  border-color: var(--error-soft);
  background: rgba(var(--error-soft-rgb), 0.04);
  box-shadow: 0 0 0 3px rgba(var(--error-soft-rgb), 0.12);
}

/* =========================
   MOBILE
========================= */

@media (max-width: 900px) {

  main {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  #form-container {
    width: 100%;
    padding: 60px 20px;
    text-align: center;
    align-items: center;
  }

  #contact-form {
    width: 100%;
  }

  .img-container {
    width: 100%;
    height: 260px;
  }

  .animazione {
    height: 500px;
    width: 100%;
    font-size: 20px;
  }
}