/* =========================================================
   Lucky Draw Premium UI (Pink + Black + Gold)
   File: css/luckydraw-premium.css
   Tujuan: visual seperti mockup, tetap responsive, tidak ganggu main.css
   ========================================================= */

:root{
  --bg0:#07070b;
  --bg1:#0b0b12;

  --text:#f5f5f7;
  --muted: rgba(245,245,247,.78);

  --pink:#ff4da6;
  --pink2:#ff2ca0;
  --gold:#e6b566;

  --panel: rgb(24 2 15 / 54%);
  --stroke: rgba(255,255,255,.12);

  --shadow-lg: 0 28px 80px rgba(0,0,0,.55);
  --glow-pink: 0 0 0 1px rgba(255,77,166,.18), 0 18px 52px rgba(255,44,160,.22);
}

/* ---------------------------------------------------------
   Global background overlay (tetap biarkan background-image dari PHP)
   --------------------------------------------------------- */
body{
  background-color: var(--bg0);
  color: var(--text);
  overflow-x: hidden;
  position: relative;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;
  background:
    radial-gradient(60% 60% at 50% 18%, rgba(255,77,166,.20), rgba(0,0,0,0) 60%),
    radial-gradient(80% 80% at 48% 64%, rgba(230,181,102,.10), rgba(0,0,0,0) 55%),
    radial-gradient(120% 120% at 50% 55%, rgba(0,0,0,.35), rgba(0,0,0,.78) 72%),
    linear-gradient(135deg, rgba(255,44,160,.10), rgba(0,0,0,0) 35%, rgba(0,0,0,.30));
}

/* letakkan konten di atas overlay */
.container-fluid{ position: relative; z-index: 1; }

/* ---------------------------------------------------------
   Layout: 2 panel desktop, 1 kolom mobile
   --------------------------------------------------------- */
.row.g-0{
  min-height: 100vh;
  align-items: center;
  padding: clamp(14px, 2.2vw, 30px);
  gap: clamp(12px, 2vw, 22px);
}

/* Panel wrapper style */
.gradient-border,
.col.pb-5 > .w-100.h-100{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background: var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--glow-pink);
}

/* ---------------------------------------------------------
   LEFT: Wheel panel
   --------------------------------------------------------- */
.gradient-border{
  width: min(620px, 94vw);
  padding: 16px 14px 14px;
  position: relative;
  overflow: hidden;
}

/* premium border glow line */
.gradient-border::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 26px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,77,166,.55), rgba(230,181,102,.18), rgba(255,77,166,.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity: .65;
}

.the_wheel{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: -12px 6px 2px !important;
}

/* make canvas responsive + premium shadow */
#myCanvas{
  width: min(560px, 88vw) !important;
  height: auto !important;
  border-radius: 18px;
  filter: drop-shadow(0 22px 48px rgba(0,0,0,.55))
          drop-shadow(0 0 38px rgba(255,44,160,.16));
}

/* tombol RESET/RANDOM rapih premium */
#btn_reset_wheel,
#btn_random_wheel{
  border-radius: 14px !important;
  padding: 11px 18px !important;
  font-weight: 900 !important;
  letter-spacing: .6px;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

#btn_reset_wheel{
  background: rgba(255,255,255,.92) !important;
  color: var(--pink2) !important;
}

#btn_random_wheel{
  background: linear-gradient(135deg, rgba(255,44,160,.95), rgba(255,140,180,.75)) !important;
  color: #fff !important;
}

#btn_reset_wheel:hover,
#btn_random_wheel:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

#btn_reset_wheel:active,
#btn_random_wheel:active{
  transform: translateY(0) scale(.99);
}

/* ---------------------------------------------------------
   RIGHT: Content panel
   --------------------------------------------------------- */
.col.pb-5 > .w-100.h-100{
  width: min(620px, 94vw);
  padding: clamp(18px, 2.4vw, 28px) !important;
}

/* HERO Title (Lucky Draw Tanpa Zonk!!) */
.ld-hero{
  padding: 6px 6px 12px;
}

.ld-title{
  margin: 0 0 10px 0;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: .4px;
  font-size: clamp(34px, 4.6vw, 60px);
  text-shadow: 0 18px 55px rgba(0,0,0,.60),
               0 0 32px rgba(255,44,160,.18);
}

.ld-title span{
  background: linear-gradient(90deg, var(--gold), #ffffff, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ld-sub{
  margin: 0;
  color: var(--muted);
  font-weight: 650;
  font-size: clamp(13px, 1.3vw, 15px);
}

/* Logo: sedikit lebih elegan */
.col.pb-5 img.img-fluid{
  max-width: min(340px, 70vw);
  margin-top: 10px !important;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.45));
}

/* Form: input + button premium */
.input-group{
  margin-top: 10px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.40);
}

.input-group .form-control{
  background: rgba(0,0,0,.38);
  color: var(--text);
  border: none;
  padding: 14px 14px;
}

.input-group .form-control::placeholder{
  color: rgba(245,245,247,.55);
}

.input-group .form-control:focus{
  outline: none;
  box-shadow: none;
}

/* CTA kamu sudah bagus; hanya kecilkan “noise” supaya elegan */
.cta-freebet-btn{
  box-shadow: 0 18px 44px rgba(0,0,0,.40) !important;
  border: 1px solid rgba(255,255,255,.10);
}

/* ---------------------------------------------------------
   Snowflakes jadi lebih subtle (tidak mengganggu)
   --------------------------------------------------------- */
.snowflake{
  opacity: .70;
  filter: blur(.35px);
}
.snowflake img{
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

/* ---------------------------------------------------------
   Responsive: Mobile jadi 1 kolom rapi
   --------------------------------------------------------- */
@media (max-width: 991px){
  .row.g-0{ padding: 14px; }
  .col.pb-5 > .w-100.h-100{ margin-top: 10px; }
}

@media (max-width: 576px){
  .gradient-border,
  .col.pb-5 > .w-100.h-100{
    border-radius: 22px;
  }

  #myCanvas{
    width: min(440px, 92vw) !important;
  }

  .ld-title{
    font-size: 34px;
  }

  #btn_reset_wheel,
  #btn_random_wheel{
    padding: 10px 16px !important;
    border-radius: 12px !important;
  }

  #telegram-widget .tg-button{
    width: 54px;
    height: 54px;
  }
}

@media (max-width: 380px){
  .ld-title{ font-size: 30px; }
}