/* Reset & Base */
    *, *:before, *:after { box-sizing: border-box; margin:0; padding:0; }
    body { font-family: 'Noto Sans', sans-serif; background: #039067; color: #333; font-size:16px; line-height:1.5; font-weight: 400;}
    
    input, select, textarea, button {
        font-family: 'Noto Sans', sans-serif; font-weight: 400;
    }
    
    .container { max-width:600px; margin:40px auto; background:#fff; padding:30px; border-radius:16px; }
    

    /* Inputs */
    input, select, textarea { width:100%; padding:12px 16px; margin-bottom:20px; border:1px solid #ccc; border-radius:8px; font-size:14px; transition:border-color .2s; }
    input:focus, select:focus, textarea:focus { border-color:#27ae60; outline:none; }

    /* Progress */
    .progress-container { position:relative; margin-bottom:40px; }
    .progress-bar { width:100%; height:6px; background:#ddd; border-radius:3px; }
    .progress { height:6px; margin-top:-6px; background:#27ae60; border-radius:3px; width:0; transition:width .3s ease; }
    .progressbar { position:absolute; top:-12px; left:0; right:0; display:flex; justify-content:space-between; }
    .progressbar .step { width:30px; height:30px; background:#ddd; border-radius:50%; display:flex; align-items:center; justify-content:center; }
    .progressbar .step.active { background:#27ae60; color:#fff; font-weight:bold; }

    /* Wizard */
    .step-content { display:none; }
    .step-content.active { display:block; }
    h2 { margin-bottom:24px; color:#27ae60; }

    /* Groups */
    .stacked-group label { display:block; margin-bottom:8px; font-weight:500; }
    .row-group { display:flex; gap:10px; margin-bottom:20px; }
    .row-group > div { flex:1; }
    @media(max-width:600px){ .row-group{ flex-direction:column;} }

    /* Phone with prefix */
    .phone-group { position:relative; }
    .phone-prefix { position:absolute; top:55%; left:16px; transform:translateY(-50%); display:flex; align-items:center; font-weight:bold; cursor:pointer; color:#27ae60; }
    .phone-group input { padding-left:80px; }

    /* DocType */
    .doc-type-group { display:flex; justify-content:space-around; margin-bottom:20px; gap: 10px;}
    .doc-type-option { flex:1; margin:0; padding:5px; border-radius:8px; text-align:center; cursor:pointer; border:2px solid #cccccc; transition:background .3s, border-color .3s; }
    .doc-type-option {
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s;
    background: #f9f9f9;
    box-shadow: 3px 3px 5px #33333333;
    padding: 8px;
}

    .doc-type-option:hover {
        background: #fcfcfc;
        box-shadow: 0px 0px 5px #33333333;
    }
    .doc-type-option input { position:absolute; opacity:0; width:0; height:0; }
    .doc-type-option img { max-width:60px; margin-bottom:5px; }
    .doc-type-option.selected { background:#e8f5ea; border-color:#27ae60; }

    /* File Upload */
    .file-group { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
    .file-upload { flex:1 1 calc(50% - 10px); position:relative; }
    .captured-photo { position:relative; background:#fafafa; border:1px solid #ccc; border-radius:8px; min-height:150px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; overflow:hidden; }
    .captured-photo img { width:100%; height:auto; }

    
    .captured-photo.docEvidenzaRapporto-photo {
         display: block !important;
    }
    /* Photo Buttons */
    .button-group { display:flex; justify-content:center; gap:12px; }
    .camera-button { background:#27ae60; color:#fff; border:none; padding:10px 16px; border-radius:24px; font-size:14px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.2); transition:background .3s; }
    .camera-button:hover { background:#219150; }
    
.button-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 8px 12px;
  background:#27ae60;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition:background .3s;
}

.button-with-icon:hover {
    background:#219150; 
}

.button-with-icon svg {
  width: 26px;
  height: 26px;
  fill: white;
}


.button-with-icon img {
  width: 26px;
  height: 26px;
  display: block;
}


    /* Camera Modal */
    #cameraModal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); display:none; align-items:center; justify-content:center; z-index:9999; }
#cameraContent {
  position: relative;
  width: 90vw;
  max-width: 480px;
  background: #000000ee;
  border-radius: 16px;
  overflow: visible; /* così l’overlay non viene tagliato */
}

/* fai in modo che il video non strabordi */
#cameraVideo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* overlay sempre in primo piano */
.camera-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid rgba(39, 174, 96, 0.8);
  border-radius: 16px;
  pointer-events: none;
  z-index: 10;

  /* oscuramento attorno alla maschera */
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.6); /* ombra esterna molto ampia */
  transition: width 0.2s ease, height 0.2s ease;
}



.camera-overlay.mask-elettronica { aspect-ratio: 85.6/54 !important; }
.camera-overlay.mask-cartacea    { aspect-ratio: 74/105 !important; }
.camera-overlay.mask-passaporto  { aspect-ratio: 88/125 !important; }

    .camera-buttons { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:12px; z-index: 20; }

    /* Buttons Container */
    .buttons { text-align:right; margin-top:20px; }
    .buttons button { background:#27ae60; color:#fff; border:none; padding:12px 20px; border-radius:8px; cursor:pointer; transition:background .3s; }
    .buttons button:hover { background:#219150; }

    /* Accordion */
    .info-icon { display:inline-flex; align-items:center; justify-content:center; background:#27ae60; color:#fff; width:20px; height:20px; border-radius:50%; font-size:12px; cursor:pointer; margin-left:5px; }
    .accordion-content { display:none; background:#f9f9f9; border:1px solid #ccc; padding:12px; border-radius:8px; margin-bottom:20px; }

    /* Summary & Others */
    .error-message { color:red; font-size:12px; }
    
.suggestions {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  position: absolute;
  z-index: 1000;
}

.suggestion-item {
  padding: 10px 10px;
  cursor: pointer;
  transition: background 0.2s;
  font-size:15px;
}

.suggestion-item:hover {
  background: #eafaf1;
}

button:disabled, button:disabled:hover {
  background: #ccc;
  color: #666;
  cursor: not-allowed;
  box-shadow: none;
}

.waiting {
  display: block;
  margin: 0 auto;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.spinner-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width:50px !important;
  height:50px !important;
}

.icon-ok {
  font-size: 24px;
  color: #27ae60;    /* verde bank */
}
.icon-err {
  font-size: 24px;
  color: #e74c3c;    /* rosso vivo */
}


body {
  background: #039067;
  color: #2c3e50;
}

.container {
  max-width: 700px;
  padding: 40px;
  border-radius: 20px;
}

input, select, textarea {
  background: #fff;
  border: 1px solid #ccd6dd;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 15px;
  transition: border 0.3s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: #2ecc71;
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.2);
}

.buttons button, .camera-button {
  font-weight: bold;
  letter-spacing: 0.5px;
  padding: 12px 24px;
  font-size: 15px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.payment-option {
  margin-top: 10px;
}

/* Label e radio sulla stessa linea */
.payment-option > label {
  cursor: pointer;
}

/* Spazio tra radio e testo */
.payment-option input[type="radio"] {
  margin-right: 8px;
  width:20px;
  height: 20px;
  margin-top: 5px;
}

/* I box partono nascosti */
.payment-box {
  display: none;
  margin-left: 24px;  /* indentazione sotto il label */
  margin-top: 6px;
}

#paypal-container {
  display: block;
}



    .privacy label {
        font-size:14px;
    }
    
    /* Regole specifiche solo per il modal Privacy */
  #modalPrivacy .modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: justify;
  }
  #modalPrivacy .modal-body h1,
  #modalPrivacy .modal-body h2,
  #modalPrivacy .modal-body h3 {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
  }
  #modalPrivacy .modal-body p {
    margin: 0.8rem 0;
  }
  #modalPrivacy .modal-body ul,
  #modalPrivacy .modal-body ol {
    margin: 0.8rem 0 0.8rem 1.5rem;
  }
  #modalPrivacy .modal-body li {
    margin-bottom: 0.5rem;
    list-style-position: inside;
  }
  #modalPrivacy .modal-body a {
    color: #007bff;
    text-decoration: underline;
    word-break: break-word;
  }
    
              .doc-type-option {
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.doc-type-option.active {
  border-color: #27ae60; /* o il colore che preferisci */
}

.button-with-icon.sostituisci {
  background-color: #dd903e !important;
  color: #fff;
}

.badge.success {
  display: inline-block;
  margin-top: 8px;
  font-weight: bold;
  color: #27ae60;
}

/* 1) Step 3: rendi indirizzo vs. civico su 3/4 – 1/4 */
.address-row {
  display: flex;
  gap: 10px;
}
.address-row > div:first-child {
  flex: 3;    /* 3 parti di spazio */
}
.address-row > div:last-child {
  flex: 1;    /* 1 parte di spazio */
}

/* 2) Province e CAP più strette */
.location-row {
  display: flex;
  gap: 10px;
  align-items: flex-end; /* allinea le label in basso se vuoi */
}
.location-row > div:first-child {  /* Provincia */
  flex: 0 0 auto;
}
.location-row > div:last-child {   /* CAP */
  flex: 1; 
}

.location-row > div {
  display: flex;
  flex-direction: column;  /* label sopra all’input */
}
/* un po’ di spazio tra label e input */
.location-row > div label {
  margin-bottom: 4px;
}

/* imposta larghezze massime */
#provincia, #provinciaNascita {
  max-width: 5em;   /* circa 2 caratteri + padding */
}
#cap {
  max-width: 7em; /* circa 5 caratteri + padding */
}

/* facoltativo: se vuoi che i campi si espandano */
#indirizzoResidenza,
#numeroCivico,
#provincia,
#cap {
  width: 100%;
  box-sizing: border-box;
}

#cameraCountdown {
  z-index: 1001;    /* qualsiasi valore > dello z-index dell’overlay */
}