/* ===============================
   CASINO REGISTER – GOLD GLASS UI
   + Animated premium border
   + Mobile app-like optimizations
   =============================== */

.casino-register-form-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 12px;
  box-sizing:border-box;
}

/* CARD */
.casino-register-form-container{
  width: 360px;
  padding: 26px 22px 28px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;

  /* Base background */
  background:
    radial-gradient(120% 120% at top left, rgba(255,180,70,.25), transparent 60%),
    linear-gradient(180deg, #0c0a08, #050403);

  box-shadow:
    0 25px 60px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(255,180,90,.18),
    inset 0 0 35px rgba(255,170,60,.15);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ===== Animated border light (no extra HTML required) ===== */
.casino-register-form-container::before{
  content:"";
  position:absolute;
  inset:-2px;              /* slightly outside */
  border-radius: 24px;
  padding: 2px;            /* border thickness */

  /* Rotating conic gradient to simulate moving light */
  background: conic-gradient(
    from 0deg,
    rgba(255,208,120,0) 0deg,
    rgba(255,208,120,.75) 40deg,
    rgba(255,208,120,0) 95deg,
    rgba(255,208,120,0) 180deg,
    rgba(255,160,60,.55) 240deg,
    rgba(255,208,120,0) 310deg,
    rgba(255,208,120,0) 360deg
  );

  /* Mask to make it only a border ring */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  filter: blur(.25px);
  opacity: .85;

  animation: casinoBorderSpin 3.2s linear infinite;
  pointer-events:none;
}

/* Inner subtle shimmer */
.casino-register-form-container::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 22px;
  background: radial-gradient(60% 40% at 30% 0%, rgba(255,200,120,.14), transparent 65%);
  pointer-events:none;
}

@keyframes casinoBorderSpin{
  to{ transform: rotate(360deg); }
}

/* FORM */
.casino-register-form{
  position: relative;
  z-index: 1;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* INPUT WRAPPER */
.casino-form-field{ position:relative; }
.casino-input-wrapper{ position:relative; }

/* INPUT */
.casino-register-form input{
  width:100%;
  height:46px;
  padding:0 44px;
  border-radius:14px;

  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,200,120,.12);

  color:#f5f5f5;
  font-size:14px;

  outline:none;
  transition: all .25s ease;
  box-sizing:border-box;

  /* app-like */
  -webkit-appearance:none;
  appearance:none;
}

.casino-register-form input::placeholder{ color: rgba(255,255,255,.45); }

.casino-register-form input:focus{
  border-color: rgba(255,200,120,.45);
  box-shadow:
    0 0 0 2px rgba(255,180,80,.25),
    0 0 18px rgba(255,160,60,.35);
}

/* ICON LEFT (expects .casino-input-icon element present in PHP) */
.casino-input-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform: translateY(-50%);
  opacity:.7;
  display:flex;
  align-items:center;
}

/* PASSWORD TOGGLE */
.casino-password-toggle{
  position:absolute;
  right:12px;
  top:50%;
  transform: translateY(-50%);
  background:none;
  border:0;
  cursor:pointer;
  opacity:.6;
  padding: 6px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.casino-password-toggle:hover{ opacity:.9; }

/* BUTTON */
.casino-register-button{
  margin-top: 6px;
  height: 48px;
  border-radius: 18px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size: 15px;
  font-weight: 800;
  letter-spacing: .3px;
  color:#fff;
  text-decoration:none;

  background: linear-gradient(180deg, #ffd37a, #c98b2c 55%, #8a5a12);

  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.35),
    inset 0 -3px 6px rgba(0,0,0,.5),
    0 10px 25px rgba(255,170,70,.45);

  transition: all .25s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.casino-register-button:hover{
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(255,190,90,.6);
}
.casino-register-button:active{
  transform: translateY(1px);
  filter: brightness(1.05);
}

/* ===== Mobile app-like layout ===== */
@media (max-width: 480px){
  .casino-register-form-wrapper{
    padding: 14px 10px;
  }

  .casino-register-form-container{
    width: 100%;
    max-width: 420px;
    padding: 22px 16px 24px;
    border-radius: 20px;
  }

  .casino-register-form-container::before{
    inset:-2px;
    border-radius: 22px;
  }

  .casino-register-form input{
    height: 50px;          /* easier to tap */
    border-radius: 16px;
    font-size: 15px;
    padding: 0 46px;
  }

  .casino-register-button{
    height: 52px;
    border-radius: 18px;
    font-size: 16px;
  }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  .casino-register-form-container::before{
    animation: none;
  }
  .casino-register-button,
  .casino-register-form input{
    transition: none;
  }
}


/* ===== Force override Flatsome/Theme input styles (fix white background + misaligned text) ===== */
.casino-register-form-wrapper .casino-register-form-container .casino-register-form input[type="text"],
.casino-register-form-wrapper .casino-register-form-container .casino-register-form input[type="password"]{
  background: rgba(255,255,255,.06) !important;
  background-color: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,200,120,.12) !important;
  color: #f5f5f5 !important;

  /* vertical align like app */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 46px !important;
  height: 46px !important;

  box-shadow: none !important;
}

@media (max-width: 480px){
  .casino-register-form-wrapper .casino-register-form-container .casino-register-form input[type="text"],
  .casino-register-form-wrapper .casino-register-form-container .casino-register-form input[type="password"]{
    height: 50px !important;
    line-height: 50px !important;
  }
}

/* Keep placeholder color visible on all themes */
.casino-register-form-wrapper .casino-register-form-container .casino-register-form input::placeholder{
  color: rgba(255,255,255,.45) !important;
}