/* 
@font-face{
  font-family: 'Bangla MN';
  src: url("../fonts/BanglaMN.woff2") format("woff2"),
       url("../fonts/BanglaMN.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
*/

:root{
  --main-w: min(720px, 94vw);
  --panel-w: min(560px, 92vw);
  --gold: #f0c980;
  --gold-soft: #d9ad62;
  --cream: #fff0cb;
  --muted: #cfab72;
  --shadow: 0 18px 45px rgba(0,0,0,.55);
  --glow: 0 0 18px rgba(255,179,57,.18);
}

*{
  box-sizing: border-box;
}

html,
body{
  margin: 0;
  width: 100%;
  min-height: 100%;
}

body{
  color: var(--cream);
  background:
    linear-gradient(rgba(0,0,0,.48), rgba(0,0,0,.55)),
    url("../image/bg-v99.jpg") center center / cover no-repeat fixed;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

/* soft top/bottom glow overlay */
body::before,
body::after{
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
}

.page{
  width: var(--main-w);
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
}

.v-form{
  width: var(--panel-w);
  margin: 0;
  display: flex;
  justify-content: center;
}

/* logo */
.logo-wrap{
  width: min(420px, 78vw);
  position: relative;
  z-index: 3;
  filter:
    drop-shadow(0 8px 18px rgba(0,0,0,.6))
    drop-shadow(0 0 20px rgba(255,176,39,.22));
  animation: floatLogo 4s ease-in-out infinite;
}

.logo-wrap img{
  width: 100%;
  display: block;
  user-select: none;
  pointer-events: none;
}

@keyframes floatLogo{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}

/* main outer frame */
.main-panel{
  width: var(--panel-w);
  aspect-ratio: 676 / 585;
  height: clamp(460px, 60vh, 520px);
  height: clamp(460px, 60svh, 520px);
  position: relative;
  background: url("../image/image.png") center / 100% 100% no-repeat;
  filter:
    drop-shadow(0 12px 26px rgba(0,0,0,.55))
    drop-shadow(0 0 18px rgba(255,170,30,.08));
}

.main-panel .panel-inner{
  position: absolute;
  inset: 13.5% 8% 8.5% 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* inner form frame */
.form-frame{
  width: min(400px, 100%);
  aspect-ratio: 672 / 216;
  background: url("../image/form-frame.png") center / 100% 100% no-repeat;
  position: relative;
  padding: 20px 24px 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
}

.form-content{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.field{
  width: 100%;
  min-height: 54px;
  background: url("../image/small_input.png") center / 100% 100% no-repeat;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  position: relative;
  filter: drop-shadow(0 0 6px rgba(255,145,40,.10));
}

.field .icon{
  width: 26px;
  min-width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gold-icon{
  width: 20.15px;
  height: 20.15px;
}

.gold-icon-img{
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

.field input{
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--cream);
  font-family: "Khmer Sangam MN", "Khmer MN", "Noto Sans Khmer", "Battambang", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  padding: 6px 4px 4px 0;
  display: block;
}

.field input::placeholder{
  color: #C6986E;
  opacity: .95;
  font-family: "Khmer Sangam MN", "Khmer MN", "Noto Sans Khmer", "Battambang", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}

.toggle-pass{
  background: none;
  border: none;
  color: #d5ad73;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: .15s ease;
}

.toggle-pass:hover{
  color: #ffe3af;
  background: rgba(255,190,90,.08);
}

.forgot{
  width: 100%;
  text-align: center;
  font-family: "Bangla MN", "Khmer Sangam MN", system-ui, sans-serif;
  text-decoration: none;
  font-size: 16px;
  margin-top: 2px;
  display: flex;
  justify-content: center;
  background: linear-gradient(
    175deg,
    #FFFFFF 0%,
    #F7DEB3 30%,
    #CDA154 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.forgot:hover{
  color: #ffe0a8;
  text-shadow: 0 0 8px rgba(255,185,75,.22);
}

/* login button */
.login-btn{
  margin-top: 6px;
  width: min(255px, 55%);
  aspect-ratio: 255 / 80;
  border: none;
  padding: 0;
  background: url("../image/login.png") center / 100% 100% no-repeat;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, filter .18s ease;
  filter:
    drop-shadow(0 8px 14px rgba(0,0,0,.4))
    drop-shadow(0 0 14px rgba(255,178,40,.18));
}

.login-btn span{
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  /* line-height: 2; */
  /* letter-spacing: 1px; */
  text-transform: uppercase;
  transform: translateY(-2px);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #fff9df 0%,
    #ffe7a2 25%,
    #f4c95f 55%,
    #b97817 100%
  );
  /* -webkit-background-clip: text; */
  /* -webkit-text-fill-color: transparent; */
  background-clip: text;
  /* color: transparent; */
  color: #e7ffc7;
  margin-top: 10px !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.18),
    0 2px 8px rgba(255,170,40,.18);
}

.login-btn:hover{
  transform: translateY(-1px) scale(1.015);
  filter:
    drop-shadow(0 10px 16px rgba(0,0,0,.45))
    drop-shadow(0 0 16px rgba(255,188,65,.28));
}

.login-btn:active{
  transform: translateY(1px) scale(.995);
}

.signup{
  margin-top: -6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  row-gap: 5px;
  line-height: 1.2;
  position: relative;
  z-index: 2;
  color: white;
}

.signup .small{
  color: #fff;
  padding: 0;
  font-family: "Bangla MN", "Khmer Sangam MN", system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
}

.signup .big{
  display: inline-block;
  background: linear-gradient(
    175deg,
    #FFFFFF 0%,
    #F7DEB3 30%,
    #CDA154 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: .7px;
  text-decoration: none;
  margin-top: 0;
  transition: .18s ease;
}

.signup .big:hover{
  color: #ffe8b8;
  text-shadow: 0 0 8px rgba(255,192,80,.24);
}

/* language panel */
.lang-panel{
  width: var(--panel-w);
  aspect-ratio: 485 / 130;
  position: relative;
  background: url("../image/lang-panel.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.45));
}

.lang-panel .lang-inner{
  position: absolute;
  inset: 10% 7% 11% 7%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lang-title{
  margin-top: 6px;
  font-size: 22px;
  font-weight: 600;
  background: linear-gradient(
    175deg,
    #FFFFFF 0%,
    #F7DEB3 30%,
    #CDA154 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.lang-list{
  margin-top: 16px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: nowrap;
}

.lang-item{
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
  color: #e7c487;
  font-family: "Cormorant Garamond", serif;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 58px;
  transition: transform .15s ease, filter .2s ease;
}

.lang-item:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.lang-item.active img{
  transform: scale(1.06);
  filter: drop-shadow(0 0 10px rgba(255,180,50,.35));
}

.lang-item img{
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
  transition: .15s ease;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.35));
  user-select: none;
  pointer-events: none;
}

.lang-item span{
  font-size: 12px;
  font-weight: 200;
  padding-top: 4px;
  background: linear-gradient(
    175deg,
    #FFFFFF 0%,
    #F7DEB3 30%,
    #CDA154 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* responsive */
@media (max-width: 600px){
  body{
    background-attachment: scroll;
  }

  .page{
    min-height: 100vh;
    min-height: 100svh;
    justify-content: center;
    gap: 10px;
    padding: 12px 0;
  }

  .main-panel{
    width: 92vw;
    aspect-ratio: 647 / 530;
    height: 460px;
  }

  .lang-panel{
    width: var(--panel-w);
    aspect-ratio: 527 / 170;
  }

  .logo-wrap{
    /* width: min(340px, 84vw); */
    width: 100px !important
  }

  .main-panel .panel-inner{
    inset: 13% 7% 8% 7%;
    gap: 8px;
  }

  .form-frame{
    width: 100%;
    padding: 16px 18px 14px;
  }

  .field{
    min-height: 50px;
    padding: 0 12px;
  }

  .field input{
    font-size: 18px;
    line-height: 1.45;
    padding: 6px 4px 4px 0;
  }

  .field input::placeholder{
    font-size: 18px;
    line-height: 1.45;
  }

  .login-btn{
    width: min(230px, 60%);
    margin-top: 4px;
  }

  .login-btn span{
    font-size: 24px;
  }

  .forgot{
    font-size: 11px;
  }

  .signup{
    margin-top: -8px;
  }

  .signup .small{
    margin-top:5px ;
    font-size: 11px;
  }

  .signup .big{
    font-size: 13px;
  }

  .lang-list{
    gap: 6px;
  }

  .lang-item{
    min-width: 48px;
    gap: 4px;
  }

  .lang-item img{
    width: 45px !important;
    height: 45px !important;
  }

  .lang-item span{
    font-size: 10px;
  }
}

@media (max-width: 460px){
  .main-panel{
    width: 96vw;
    aspect-ratio: 676 / 620;
    height: 460px;
  }

  .lang-panel{
    width: 96vw;
    aspect-ratio: 485 / 190;
  }

  .page{
    padding: 10px 0;
  }

  .login-btn{
    width: min(220px, 62%);
    margin-top: -7px;
  }

  .login-btn span{
    font-size: 21px;
  }

  .lang-list{
    margin-top: 11px;
  }
}

/* Short laptop/tablet screens: keep both panels inside the viewport. */
@media (max-height: 760px) and (min-width: 601px){
  :root{
    --panel-w: min(500px, 90vw);
    --main-w: min(620px, 96vw);
  }

  .page{
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
  }

  .main-panel{
    height: 420px;
  }

  .main-panel .panel-inner{
    inset: 9% 7% 5% 7%;
    transform: scale(.84);
    transform-origin: center center;
  }

  .lang-panel{
    width: var(--panel-w);
  }
}

/* Very short phones: compact the artwork without allowing panel overlap. */
@media (max-width: 600px) and (max-height: 620px){
  :root{
    --panel-w: min(340px, 94vw);
  }

  .page{
    justify-content: flex-start;
    gap: 6px;
    padding: 6px 0;
  }

  .v-form,
  .main-panel,
  .lang-panel{
    width: var(--panel-w);
  }

  .main-panel{
    height: 390px;
  }

  .main-panel .panel-inner{
    inset: 7% 5% 4% 5%;
    transform: scale(.86);
    transform-origin: center center;
  }

  .lang-panel{
    aspect-ratio: 527 / 170;
  }

  .lang-title{
    margin-top: 2px;
    font-size: 19px;
  }

  .lang-list{
    margin-top: 8px;
  }

  .lang-item img{
    width: 40px !important;
    height: 40px !important;
  }
}