@import url('https://fonts.googleapis.com/css2?family=Jura:wght@400;500;600&family=Work+Sans:wght@400;500&display=swap');

.altr-step{
font-family:'Work Sans',sans-serif;
}

@media (max-width:768px){

.altr-activate-box{
padding:30px 22px;
}

.altr-step{
padding:28px 24px;
}

}

.altr-step input,
.altr-step select,
.altr-step button,
.altr-otp-input{
font-family:'Jura',sans-serif;
font-size:14px;
letter-spacing:.3px;
}

.altr-step input,
.altr-step select{

padding:12px 14px;
border:1px solid #e5e5e5;
background:#fafafa;

transition:all .15s ease;
}

.altr-step input:focus,
.altr-step select:focus{

outline:none;
border-color:#000;
background:#fff;
}

.altr-step button{

width:100%;

padding:16px;

border-radius:10px;

background:#000;
color:#fff;

font-family:'Jura',sans-serif;

font-size:15px;

border:none;

cursor:pointer;

transition:
transform .08s ease,
box-shadow .15s ease;

box-shadow:
0 4px 10px rgba(0,0,0,.15);

}

.altr-step button:hover{

transform:translateY(-1px);

box-shadow:
0 6px 14px rgba(0,0,0,.18);

}

.altr-otp-row{

display:flex;
gap:10px;
margin-top:12px;

}

.altr-otp-input{

flex:1;
padding:14px;

font-family:'Jura',sans-serif;
font-size:16px;

border:1px solid #ddd;

}

.altr-otp-verify{

flex:0 0 140px;

background:#000;
color:#fff;

font-family:'Jura',sans-serif;

border:0;

padding:14px;

cursor:pointer;
}

.altr-radio-group{
display:flex;
gap:18px;
margin-top:6px;
}

.altr-radio{

display:flex;
align-items:center;

gap:10px;

padding:10px 14px;

border:1px solid #e5e5e5;

border-radius:10px;

cursor:pointer;

transition:all .2s ease;

}

.altr-radio:hover{

border-color:#000;

}

.altr-radio input{

width:18px;
height:18px;

accent-color:#000;

}

.altr-step{

border:1px solid #ececec;

padding:22px;

background:#fff;

box-shadow:0 6px 16px rgba(0,0,0,.04);
}

::placeholder{
color:#b7b7b7;
font-family:'Jura',sans-serif;
}

/* ALTRG inline error styling */
.altrg-inline-error{
  margin-top: 8px;
  padding: 10px 12px;
  background: #fff3f3;
  border: 1px solid #f1c0c0;
  border-left: 4px solid #cc1818;
  border-radius: 6px;
  font-size: 11px!important;
  line-height: 1.35;
  color: #991b1b;
  font-family:'Work Sans';
}

.altr-activate-box{ margin-top: 12px; font-family: system-ui; }
.altr-inline-note{ padding:10px 12px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:6px; }
.altr-inline-errorbox{ padding:10px 12px; background:#fff3f3; border:1px solid #f1c0c0; border-left:4px solid #cc1818; border-radius:6px; color:#991b1b; }
.altr-otp-row{ display:flex; gap:10px; align-items:center; margin-top:10px; }
.altr-otp-input{ flex:1; padding:10px 12px; border:1px solid #e5e7eb; border-radius:6px; font-size:14px; }
.altr-otp-verify{ padding:10px 12px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; cursor:pointer; }
.altr-inline-loader{ margin-top:8px; height:3px; width:120px; background:rgba(0,0,0,0.08); border-radius:999px; position:relative; overflow:hidden; }
.altr-inline-loader::after{ content:""; position:absolute; top:0; left:-40%; height:100%; width:40%; background:rgba(37,99,235,0.6); animation: altrLoader 0.9s infinite ease-in-out; }
@keyframes altrLoader{ 0%{ left:-40%; } 100%{ left:110%; } }
.altr-meta{ margin-top:10px; border:1px solid #e5e7eb; border-radius:6px; overflow:hidden; }
.altr-meta-row{ display:grid; grid-template-columns: 1fr 2fr; padding:10px 12px; border-top:1px solid #eef2f7; }
.altr-meta-row:first-child{ border-top:none; }
.altr-meta-row .k{ color:#64748b; font-size:12px; }
.altr-meta-row .v{ color:#0f172a; font-size:13px; word-break:break-word; }
.altr-confirm-actions{ margin-top:10px; }
.altr-edit-link{ color:#1d4ed8; font-weight:600; text-decoration:none; }
.altr-edit-link:hover{ text-decoration:underline; }
.altr-account-exists
{
    font-family: 'Jura';
    background: #f0f5ff;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 19px;
    border-width: 1px 1px 1px 5px;
    border-style: solid;
    border-radius: 8px;
    margin-top: 7px;
    border-color: #0047cd;    
}
/* Small inline loader under email */
.altr-inline-loader{
  margin-top: 8px;
  height: 3px;
  width: 120px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.altr-inline-loader::after{
  content:"";
  position:absolute;
  top:0;
  left:-40%;
  height:100%;
  width:40%;
  background: rgba(37,99,235,0.6);
  animation: altrLoader 0.9s infinite ease-in-out;
}
@keyframes altrLoader{
  0%{ left:-40%; }
  100%{ left:110%; }
}

/* ===== Activation UI ===== */
.altr-activate-box{
width:100%;
max-width:none;
margin:0;
padding:40px 6vw;
box-sizing:border-box;
}

.altr-step{

max-width:720px;
margin:0 auto;

padding:40px 36px;

background:#fff;

border-radius:16px;

box-shadow:
0 20px 40px rgba(0,0,0,.06),
0 1px 1px rgba(0,0,0,.04);

transition:all .35s cubic-bezier(.22,.61,.36,1);

}

.altr-step-enter{

opacity:0;
transform:translateY(20px);

}

.altr-step-active{

opacity:1;
transform:translateY(0);

transition:
opacity .35s ease,
transform .35s cubic-bezier(.22,.61,.36,1);

}

.altr-progress{

margin-bottom:28px;

}

.altr-progress-bar{

height:4px;
background:#e6e6e6;

border-radius:10px;
overflow:hidden;

}

.altr-progress-fill{

height:100%;
background:#000;

transition:width .45s ease;

}

.altr-progress-label{

font-family:'Jura',sans-serif;
font-size:12px;

margin-top:10px;

color:#666;

}

.altr-step h3{
  margin:0 0 14px;
  font-size:16px;
  font-weight:600;
}

.altr-row{

display:flex;
flex-direction:column;

margin-bottom:22px;

}
.altr-row label{ font-size:12px; color:#444; }

.altr-readonly{
  padding:10px 12px;
  border:1px solid #e3e3e3;
  background:#fafafa;
}

.altr-step input, .altr-step select{
  padding:10px 12px;
  border:1px solid #e3e3e3;
  outline:none;
}


.altr-step button:hover{ opacity:.92; }

.altr-id-link{
  display:inline-block;
  padding:8px 10px;
  border:1px solid #e3e3e3;
  background:#fafafa;
  text-decoration:none;
  color:#111;
  width:max-content;
}

.altr-step button:active{

transform:translateY(0);

box-shadow:
0 3px 6px rgba(0,0,0,.12);

}

/* Lightbox */
.altr-lightbox{ position:fixed; inset:0; display:none; z-index:999999; }
.altr-lightbox.open{ display:block; }
.altr-lightbox-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.65); }
.altr-lightbox-panel{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(900px,92vw);
  height:min(90vh,700px);
  background:#fff;
  border-radius:10px;
  overflow:hidden;
}
.altr-lightbox-close{
  position:absolute; right:10px; top:10px;
  width:36px; height:36px;
  border:0;
  background:#111;
  color:#fff;
  font-size:22px;
  cursor:pointer;
  border-radius:999px;
}
.altr-lightbox-img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}