/* login.html — page styles */
.lg-sec {
  padding: 104px 0 clamp(40px, 6vw, 80px);
  background: var(--paper);
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center
}

.lg-sec>.container {
  width: 100%
}

.lg-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #fff;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(59, 36, 23, .14);
  max-width: 1020px;
  margin: 0 auto
}

.lg-card {
  padding: clamp(1.6rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0
}

.lg-brand {
  margin-bottom: 1.6rem;
  align-self: flex-start
}

.lg-step h1 {
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  color: var(--lapis);
  margin: 0 0 .4rem
}

.lg-sub {
  color: var(--muted);
  margin-bottom: 1.4rem
}

.lg-sub b {
  color: var(--ink)
}

.lg-phone {
  position: relative
}

.lg-phone i {
  position: absolute;
  top: 50%;
  inset-inline-start: 1rem;
  transform: translateY(-50%);
  color: var(--turq);
  font-size: 1.2rem
}

.lg-phone input {
  padding-inline-start: 3rem;
  font-size: 1.1rem;
  letter-spacing: .08em;
  text-align: left;
  height: 56px
}

.lg-terms {
  font-size: .8rem;
  color: var(--muted);
  margin: 1rem 0 0;
  text-align: center
}

.lg-terms a {
  color: var(--lapis);
  text-decoration: underline
}

.lg-back {
  border: 0;
  background: none;
  color: var(--lapis);
  padding: 0;
  margin-bottom: 1rem;
  font-weight: 500;
  display: inline-flex;
  gap: .4rem;
  align-items: center
}

.lg-back:hover {
  color: var(--pink)
}

.otp {
  display: flex;
  gap: .6rem;
  justify-content: center;
  margin: 0 0 .4rem
}

.otp input {
  width: 56px;
  height: 64px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  border: 2px solid transparent;
  background: var(--paper);
  border-radius: 18px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  padding: 0
}

.otp input:focus {
  outline: 0;
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(255, 76, 255, .18);
  transform: translateY(-2px)
}

.otp input.filled {
  border-color: var(--lime)
}

.otp input.is-bad {
  border-color: #d94b4b;
  background: #fff3f1
}

.lg-demo {
  background: var(--sand);
  border-radius: 16px;
  padding: .6rem .9rem;
  font-size: .85rem;
  margin: .6rem 0 1.2rem
}

.lg-demo i {
  color: var(--turq)
}

.lg-demo b {
  color: var(--pink);
  font-size: 1.05rem;
  letter-spacing: .1em
}

.lg-resend {
  text-align: center;
  margin: 1rem 0 0;
  font-size: .88rem;
  color: var(--muted)
}

.lg-resend button,
.lg-skip,
.lg-links button {
  border: 0;
  background: none;
  color: var(--pink);
  text-decoration: underline;
  padding: 0
}

.lg-skip {
  display: block;
  margin: 1rem auto 0
}

.lg-who {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--paper);
  border-radius: 20px;
  padding: .9rem 1rem;
  margin: 1rem 0 1.2rem
}

.lg-who b {
  display: block;
  font-family: 'Aref Ruqaa', serif;
  font-size: 1.3rem;
  color: var(--lapis);
  line-height: 1.4
}

.lg-who small {
  color: var(--muted)
}

.lg-links {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  font-size: .9rem
}

.lg-links a {
  color: var(--lapis)
}

.lg-links a:hover {
  color: var(--pink)
}

.lg-done {
  text-align: center;
  align-items: center
}

.ok-svg {
  width: 104px;
  height: 104px;
  margin-bottom: .4rem
}

.ok-c {
  fill: var(--lime);
  stroke: var(--turq);
  stroke-width: 5;
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
  animation: draw .9s ease forwards
}

.ok-t {
  fill: none;
  stroke: var(--ink);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: draw .6s .7s ease forwards
}

@keyframes draw {
  to {
    stroke-dashoffset: 0
  }
}

.lg-done .btn {
  margin-top: .4rem
}

.lg-art {
  position: relative;
  background: var(--sand);
  overflow: hidden;
  min-height: 560px
}

.lg-star {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 130%;
  margin-left: -65%;
  color: #eed3a2;
  pointer-events: none
}

.lg-star rect {
  fill: currentColor
}

.lg-text {
  position: relative;
  z-index: 3;
  padding: 2.2rem 2rem 0;
  text-align: center
}

.lg-text h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--lapis)
}

.lg-text p {
  color: var(--muted);
  margin: 0 auto;
  max-width: 320px
}

.lg-mosque {
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 108%;
  max-width: none;
  transform: translateX(-50%);
  z-index: 1
}

.lg-bottle {
  position: absolute;
  z-index: 2;
  left: 7%;
  bottom: 5%;
  height: 46%;
  filter: drop-shadow(0 16px 14px rgba(26, 63, 134, .28))
}

@media(max-width:991px) {
  .lg-sec {
    padding-top: 90px;
    min-height: 0;
    display: block
  }

  .lg-wrap {
    grid-template-columns: 1fr;
    max-width: 560px
  }

  .lg-art {
    order: -1;
    min-height: 0;
    height: 210px
  }

  .lg-text,
  .lg-bottle {
    display: none
  }

  .lg-mosque {
    width: min(340px, 92%);
    bottom: -6px
  }

  .lg-star {
    width: 80%;
    margin-left: -40%;
    bottom: -30%
  }

  .lg-brand {
    display: none
  }
}

@media(max-width:575px) {
  .lg-sec {
    padding-top: 84px
  }

  .lg-wrap {
    border-radius: 26px
  }

  .lg-art {
    height: 170px
  }

  .lg-mosque {
    width: min(270px, 88%)
  }

  .otp {
    gap: .4rem
  }

  .otp input {
    width: 46px;
    height: 56px;
    font-size: 1.35rem;
    border-radius: 14px
  }
}

@media(max-width:360px) {
  .otp input {
    width: 40px;
    height: 50px
  }
}