/* =========================================================
   MOG Student Contact Form – CSS pulito (vFinal)
   - Header arancio, card bianca
   - Campi compatti
   - Checkbox allineati
   - Password dentro box grigio "Crea Account"
   ========================================================= */

/* -------- Card base -------- */
.mog-scf{
  background:#fff;
  border:1px solid #df5900;
  border-radius:14px;
  box-shadow:0 18px 45px rgba(2,6,23,.10);
  overflow:hidden;
  padding:0;
  font-family:inherit;
}

/* -------- Header -------- */
.mog-scf__header{
  background:#df5900;
  padding:18px 18px 16px;
  margin:0;
  border:0;
  text-align:center;
}

.mog-scf__title{
  margin:0;
  color:#fff;
  font-weight:800;
  font-size:16px;
  line-height:1.25;
}

.mog-scf__subtitle{
  margin:6px 0 0;
  color:rgba(255,255,255,.80);
  font-weight:600;
  font-size:11px;
  line-height:1.25;
}

.mog-scf__subtitle a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:700;
}

/* -------- Layout campi (compatto) -------- */
.mog-scf__grid{
  display:grid;
  grid-template-columns:1fr; /* sidebar-first */
  
  padding:12px 18px 8px;
}

/* Label visibili e compatte (necessarie perché non hai placeholder) */
.mog-scf__field label{
  display:block;
  font-size:11.5px;
  font-weight:700;
  color:rgba(17,24,39,.80);
  margin:0 0 4px;
  letter-spacing:.1px;
}

/* -------- Inputs -------- */
.mog-scf__control{
  width:100%;
  height:36px;
  padding:8px 12px;
  border-radius:4px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111827;
  outline:none;
  box-sizing:border-box;
  font-size:13px;
  line-height:1;
  transition:border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.mog-scf__control::placeholder{ color:rgba(17,24,39,.55); }

.mog-scf__control:focus{
  border-color:rgba(17,24,39,.35);
  box-shadow:0 0 0 3px rgba(17,24,39,.10);
}

/* Select: freccia pulita (riallineata per altezza 36px) */
.mog-scf select.mog-scf__control{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(17,24,39,.60) 50%),
    linear-gradient(135deg, rgba(17,24,39,.60) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 14px,
    calc(100% - 11px) 14px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:34px;
}

/* Note non necessarie */
.mog-scf__note{ display:none !important; }

/* -------- Checkbox: layout unificato -------- */
.mog-scf__checkrow{
  display:grid;
  grid-template-columns:16px 1fr;
  column-gap:10px;
  align-items:start;
}

.mog-scf__checkrow input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:2px 0 0 0;
  padding:0;
  justify-self:start;
  accent-color:#6b7280;
}

.mog-scf__checkrow > label,
.mog-scf__checkrow > div{
  margin:0;
  padding:0;
  line-height:1.28;
}

/* -------- Box "Crea Account" + Password dentro lo stesso box grigio -------- */
.mog-scf__upgrade{
  margin:0;
  padding:0 18px 8px;
  background:transparent;
  border:0;
}

/* Parte alta del box (checkbox + testi) */
.mog-scf__upgrade .mog-scf__checkrow{
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  border-bottom:0;
  border-radius:4px 4px 0 0;
  padding:10px 10px;
}

.mog-scf__upgrade-title{
  margin:0;
  font-size:12px;
  font-weight:900;
  color:#111827;
}

.mog-scf__upgrade-text{
  margin:4px 0 0;
  font-size:12px;
  font-weight:600;
  color:rgba(17,24,39,.72);
  line-height:1.28;
}

/* Parte bassa del box (password) */
.mog-scf__upgrade .mog-scf__password{
  display:none; /* gestita dal JS */
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  border-top:0;
  border-radius:0 0 4px 4px;
  padding:10px 10px;
  margin-top:0;
}

/* Quando il JS la rende visibile, mantiene styling */
.mog-scf__upgrade .mog-scf__password[style*="display: block"],
.mog-scf__upgrade .mog-scf__password[style*="display:block"]{
  background:#f3f4f6;
}

.mog-scf__upgrade .mog-scf__password .mog-scf__field{ margin:0; }

.mog-scf__upgrade .mog-scf__password label{
  display:block;
  font-size:11.5px;
  font-weight:700;
  color:rgba(17,24,39,.80);
  margin:0 0 4px;
}

/* -------- Privacy (box grigio come account, allineato) -------- */
.mog-scf__privacy{
  padding:6px 18px 0;
  margin:0;
  border-top:0;
}

.mog-scf__privacy .mog-scf__checkrow{
  
  padding:10px 10px;
}

.mog-scf__privacy label{
  font-size:12px;
  font-weight:700;
  color:rgba(17,24,39,.78);
  line-height:1.35;
}

/* -------- CTA -------- */
.mog-scf__btn{
  display:block;
  width:calc(100% - 36px);
  margin:12px 18px 16px;
  height:48px;
  border:0;
  border-radius:6px;
  cursor:pointer;
  background:#b08f4a;
  color:#fff;
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
  font-size:14px;
  box-shadow:0 14px 26px rgba(176,143,74,.28);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.mog-scf__btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.02);
  box-shadow:0 18px 32px rgba(176,143,74,.34);
}

.mog-scf__btn:active{
  transform:translateY(0);
  filter:brightness(.98);
}

.mog-scf__btn::after{
  content:" \2192";
  font-weight:900;
}

/* Reset aggressività tema su form controls */
.mog-scf input.mog-scf__control,
.mog-scf select.mog-scf__control,
.mog-scf button.mog-scf__btn{
  -webkit-appearance:none;
  appearance:none;
}

/* -------- Mobile -------- */
@media (max-width:420px){
  .mog-scf__header{ padding:16px 14px 14px; }
  .mog-scf__grid{ padding:12px 14px 8px; }
  .mog-scf__upgrade{ padding:0 14px 8px; }
  .mog-scf__privacy{ padding:6px 14px 0; }
  .mog-scf__btn{ width:calc(100% - 28px); margin:12px 14px 14px; }
}