:root {
  --brand: orangered;
    
}

* {
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

body, html {
  margin: 0;
  padding: 0;
 /* height: 100vh; */
  width: 100%;
}

/* Utility */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  padding: 12px 20px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 15px;
}

.btn-orange {
  background: var(--brand);
  color: white;
}

.btn-white {
  background: white;
  color: var(--brand);
}

/* Landing */
.landing {
  background: linear-gradient(to bottom, #FFA726, #FB8C00);
  color: white;
  flex-direction: column;
  text-align: center;
}

.landing .logo { 
  padding-top:50% !important;
  font-size: 32px;
  font-weight: bold;
  
}
 
.landing .tagline {
  font-size: 15px;
   position: fixed; 
  text-align: center; 
  bottom: 25;
  left: 43%;
  place-items: center !important;     
   
}

/* Login */
.login-bgg {
  background: url('background.jpg') no-repeat center center/cover;
  position: relative;
  color: white;
   overflow: hidden;
    
  }
 
.welcome-bg {
   background:linear-gradient(to right, #0f2027, #1cabda, #0f2027) !important;
  /* background: url('background.jpg') no-repeat center center/cover; */
  /* position: relative; */
   height: 100vh;
   overflow: hidden !important;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
   
}

.container {
  position: relative;
  padding: 100px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center !important;
  /* margin-top: 80px; */
}

.logo-title {
  margin-top:-10px;
  font-size: 28px;
  font-weight: bold;
}

.input-group {
  width: 100%;
  max-width: 300px;
  margin-bottom: 12px;
  position: relative;
}

.input-group input,
.input-group select {
  width: 100%;
  padding: 10px 15px 10px 40px;
  border: none;
  border-radius: 25px;
  outline: none;
}

.input-icon {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: var(--brand);
}

.buttons {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
}

.footer-links {
  font-size: 12px;
  text-align: center !important;
  margin-top: 10px;
}

.fingerprint {
  margin-top: 20px;
  font-size: 32px;
}

/* Register */
.register-card {
  background: white;
  border-radius: 90px 90px 0 0;
  padding: 30px 20px;
  position: absolute;
  bottom: 0;
  width: 100%;
  max-height: 90%;
  overflow-y: auto !important;
   align-items: center !important;
}

.back-link {
  /* display: flex; */
  align-items: center !important;
  color: var(--brand);
  font-size: 15px;
  margin-bottom: 20px;
  font-weight: bolder;
  cursor: pointer;
}

.form-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--brand);
  border-radius: 25px;
  margin: 10px 0;
  padding: 5px 15px;
  width: 100%;
  max-width: 300px;
}

.form-icon {
  margin-right: 10px;
  color: var(--brand);
}

.form-group input,
.form-group select {
  border: none;
  flex: 1;
  padding: 10px;
  outline: none;
  width: 100%;
}

.terms {
  font-size: 12px;
  text-align: center;
  margin-top: 10px;
}

.terms b {
  color: var(--brand);
}

.pjax-link{
  text-decoration: none;

}

.primaryColor{
  color:var(--brand);
}

.d-none{
  display: none  ;
}
.phoneCode{
  width: 20px !important;
}
    
 /* INSTALL BUTTON */

  .card{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:14px;
    box-shadow: 0 8px 30px rgba(2,6,23,0.6);
    padding:20px;
    display:flex;
    gap:18px;
    align-items:center;
    max-width:520px;
    width:100%;
  }

  .app-preview{
    width:72px;
    height:72px;
    border-radius:16px;
    background: linear-gradient(135deg,var(--accent),var(--accent-2));
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 8px 18px rgba(107,33,168,0.28);
    flex:0 0 72px;
  }
  .app-preview svg{ width:44px; height:44px; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35)); }

  .meta{
    flex:1 1 auto;
    min-width:0;
  }
  .meta h3{ margin:0 0 6px 0; font-size:1.05rem; line-height:1.1; }
  .meta p{ margin:0; color:rgba(248,250,252,0.75); font-size:0.92rem; }

  .install-col{
    display:flex;
    flex-direction:column;
    gap:10px; 
    justify-content:center;
    flex:0 0 auto;
    max-width: 200px; 
  }

  .install-btn{
    padding:10px 14px;
    height: 50px;
    margin-top:10px;
    font-size: large;
    font-weight: bolder;
    text-align: center;
    background: rgb(225, 228, 37);
    color: black;
    border:4px;
    padding:var(--pad);
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
    display:inline-flex;
    gap:10px;
    align-items:center; 
    transition: transform .12s ease, box-shadow .12s ease;
    user-select:none;
  }
  .install-btn:active{ transform: translateY(1px) scale(.997); }
  .install-btn[aria-disabled="true"]{ opacity:.6; cursor:not-allowed; }

  .install-btn .icon{
    color:white;
    width:34px; height:34px; border-radius:8px;
    display:inline-grid; place-items:center; font-size:16px;
    box-shadow: 0 4px 10px rgba(107,33,168,0.28);
  }

  .hint{
    margin-top:8px;
    font-size:0.82rem;
    color:rgba(248,250,252,0.6);
    text-align:right;
  }

  /* iOS overlay instructional box */
  .ios-instructions{
    display:none;
    background:red;
    padding:10px 12px;
    border-radius:10px;
    font-size:0.9rem;
  }

  /* show for small widths */
  @media (max-width:480px){
    .card{ padding:14px; gap:12px; }
    .meta h3{ font-size:1rem; }
    .install-col{ align-items:stretch; }
    .hint{ text-align:left; }
  }