/* ===============================
   GILT STORE – LIGHT / THEME FRIENDLY
================================= */

.store-page{
  padding:16px;
  background:transparent; /* ikut theme global */
}

/* ===============================
   SECTION TITLE
================================= */

.section-title{
  font-size:15px;
  font-weight:600;
  margin-bottom:12px;
  letter-spacing:.2px;
}


/* ===============================
   GRID
================================= */

.store-grid{
  display:grid;
grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-bottom:28px;
}


/* ===============================
   CARD
================================= */

.store-card{
  background:var(--card-bg, #ffffff);
  border-radius:16px;
  padding:12px;
  position:relative;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  transition:.2s ease;
}

.store-card:active{
  transform:scale(.98);
}

/* FLASH LIVE EFFECT */

.flash-card{
  border:1px solid rgba(255,0,0,.25);
}

.flash-card.live{
  box-shadow:0 0 18px rgba(255,0,0,.35);
  border:1px solid rgba(255,0,0,.6);
}


/* ===============================
   IMAGE
================================= */

.card-image{
  width:100%;
  aspect-ratio:1/1;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:10px;
}

.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* ===============================
   BADGE
================================= */

.badge{
  position:absolute;
  top:10px;
  left:10px;
  padding:4px 10px;
  font-size:10px;
  font-weight:600;
  border-radius:20px;
}

.badge.flash{
  background:#ff3b3b;
  color:#fff;
}

.badge.sold{
  background:#999;
  color:#fff;
}


/* ===============================
   CARD BODY
================================= */

.card-body h3{
  font-size:13px;
  font-weight:600;
  margin-bottom:6px;
  line-height:1.3;
}

.card-info{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}

.price{
  font-size:14px;
  font-weight:700;
}

.price.gp{
  color:#e6a800;
}

.stock{
  font-size:11px;
  opacity:.7;
}


/* ===============================
   FLASH START INFO
================================= */

.flash-start{
  font-size:11px;
  margin-bottom:6px;
  opacity:.75;
}


/* ===============================
   COUNTDOWN
================================= */

.countdown{
  margin-bottom:10px;
}

.cd-label{
  font-size:11px;
  opacity:.6;
  margin-bottom:2px;
}

.cd-time{
  font-size:14px;
  font-weight:700;
  letter-spacing:.5px;
  color:#ff3b3b;
}


/* ===============================
   BUTTONS
================================= */

.store-card button{
  width:100%;
  padding:9px;
  border:none;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:.15s ease;
}

.store-card button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.btn-primary{
  background:#111;
  color:#fff;
}


.btn-flash{
  background:#ff3b3b;
  color:#fff;
}


/* ===============================
   LEADERBOARD
================================= */

.leaderboard{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid rgba(0,0,0,.06);
}

.leader-title{
  font-size:11px;
  font-weight:600;
  margin-bottom:4px;
  opacity:.7;
}

.leader-item{
  font-size:11px;
  opacity:.75;
  margin-bottom:2px;
}


/* ===============================
   LOSE ANIMATION
================================= */

.lose-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
  backdrop-filter:blur(4px);
}

.lose-box{
  background:#fff;
  padding:28px;
  border-radius:16px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  animation:pop .25s ease-out;
}

.lose-box h2{
  font-size:18px;
  margin-bottom:8px;
}

.lose-box p{
  font-size:14px;
  opacity:.7;
}

@keyframes pop{
  from{
    transform:scale(.8);
    opacity:0;
  }
  to{
    transform:scale(1);
    opacity:1;
  }
}

/* ===============================
   RESPONSIVE
================================= */

@media (min-width:768px){
  .store-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

/* LIVE GLOW */
.flash-card.live{
  box-shadow:0 0 25px rgba(255,0,0,.6);
  border:1px solid rgba(255,0,0,.7);
  transition:.2s ease;
}

/* BLINK LAST 10 SEC */
@keyframes blink{
  0%{opacity:1;}
  50%{opacity:.2;}
  100%{opacity:1;}
}

.blink{
  animation:blink .8s infinite;
}

/* WINNER #1 GOLD */
.leader-item:first-child{
  color:gold;
  font-weight:700;
}

/* CONFETTI */
.confetti-canvas{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
}

.winner-banner{
  background: linear-gradient(90deg,#ffd700,#ffb700);
  color:#000;
  font-weight:700;
  text-align:center;
  padding:8px;
  border-radius:12px 12px 0 0;
  animation: winnerSlide 0.4s ease-out;
}

@keyframes winnerSlide{
  from{
    transform:translateY(-20px);
    opacity:0;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}

.flash-card.sold-out{
  opacity:0.85;
}


/* ===============================
   WAR OVERLAY NUMBER
================================= */

#warOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* supaya tetap bisa lihat background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999; /* HARUS tinggi */
}

#warNumber {
  font-size: 22vw; /* responsif besar */
  font-weight: 900;
  color: #ff2e2e;
  text-shadow:
    0 0 10px rgba(255,0,0,0.8),
    0 0 30px rgba(255,0,0,0.6),
    0 0 60px rgba(255,0,0,0.4);
  animation: warPulse 1s ease-in-out infinite;
}

@keyframes warPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ===============================
   GILT STORE BANNER
================================= */

.gilt-store-banner{
  position: sticky;
  top: 0;
  z-index: 20;

  padding:16px;
  margin-bottom:18px;

  border-radius:16px;

  background:linear-gradient(135deg,#0f766e,#065f5b);

  box-shadow:0 6px 18px rgba(0,0,0,0.15);

  color:#fff;
}


/* ===============================
   STORE TITLE
================================= */

.gilt-store-title{
  font-weight:700;
  font-size:16px;

  letter-spacing:2px;

  margin-bottom:12px;
}


/* ===============================
   STORE MENU CONTAINER
================================= */

.store-menu{
  display:flex;
  justify-content:space-around;
  align-items:center;
}


/* ===============================
   MENU ITEM
================================= */

.store-menu-item{

  display:flex;
  flex-direction:column;
  align-items:center;

  cursor:pointer;

  font-size:12px;

  transition:0.2s ease;

}

.store-menu-item:hover{
  transform:translateY(-2px);
}


/* ===============================
   MENU ICON
================================= */

.menu-icon{
  font-size:20px;
  margin-bottom:4px;
}


/* ===============================
   MENU LABEL
================================= */

.menu-label{
  opacity:.9;
  font-weight:500;
}


/* ===============================
   PAGE OPEN TOKO
================================= */

.store-sheet{
  position:fixed;
  inset:0;
  z-index:2000;
}

.store-sheet.hidden{
  display:none;
}

.sheet-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
}

.sheet-container{
  position:absolute;
  bottom:0;
  left:0;
  right:0;

  background:#f5f5f4;

  border-radius:16px 16px 0 0;

  padding:20px;

  max-height:85vh;
  overflow:auto;
}

.sheet-header{
  text-align:center;
  margin-bottom:15px;
}

.sheet-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sheet-body input,
.sheet-body textarea,
.sheet-body select{
  padding:10px;
  border-radius:8px;
  border:1px solid #d4d4d4;
}

.tos-check{
  font-size:13px;
}

/* ===============================
   IMAGE PREVIEW MODAL
================================= */

.flash-image-modal{

  position:fixed;
  inset:0;

  z-index:3000;

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

}

.flash-image-modal.hidden{
  display:none;
}

.flash-image-bg{

  position:absolute;
  inset:0;

  background:rgba(0,0,0,0.8);

}

/* IMAGE */

#flashImagePreview{

  max-width:90%;
  max-height:90%;

  border-radius:10px;

  position:relative;
  z-index:1;

}

/* ===============================
   INBOX ITEM TYPE ICON
================================= */

.inbox-type{
  font-size:13px;
  font-weight:600;
  margin-bottom:6px;
  opacity:.85;
  letter-spacing:.3px;
}

.inbox-type.voucher::before{
  content:"🎟 ";
}

.inbox-type.reward::before{
  content:"🎁 ";
}

.inbox-type.product::before{
  content:"🛍 ";
}


/* ===============================
   EXPIRED CARD EFFECT
================================= */

.store-card.expired{
  opacity:.55;
  filter:grayscale(60%);
  transform:scale(.98);
}


/* ===============================
   STATUS BADGE
================================= */

.status{
  display:inline-block;

  padding:4px 9px;

  border-radius:6px;

  font-size:12px;
  font-weight:600;

  text-transform:capitalize;
  letter-spacing:.2px;
}

.status.unused{
  background:#0f766e;
  color:#fff;
}

.status.used{
  background:#9ca3af;
  color:#fff;
}

.status.expired{
  background:#d08a8f;
  color:#fff;
}


/* ===============================
   EXPIRE DATE
================================= */

.expire{
  margin-top:5px;
  font-size:12px;
  opacity:.75;
}


/* ===============================
   USE VOUCHER BUTTON
================================= */

.btn-use{
  margin-top:12px;

  background:#d08a8f;
  color:#fff;

  border:none;

  padding:8px 14px;

  border-radius:8px;

  font-size:13px;
  font-weight:600;

  cursor:pointer;

  transition:all .2s ease;

  box-shadow:0 2px 6px rgba(0,0,0,0.25);
}

.btn-use:hover{
  background:#e8a4aa;
  transform:translateY(-1px);
}

.btn-use:active{
  transform:translateY(0);
}


/* ===============================
   INBOX BADGE
================================= */

.inbox-badge{
  position:absolute;

  top:-6px;
  right:-8px;

  background:#d08a8f;
  color:white;

  font-size:11px;
  font-weight:700;

  padding:2px 6px;

  border-radius:10px;

  box-shadow:0 0 0 2px #065f5b;
}


/* ===============================
   HIDDEN UTILITY
================================= */

.hidden{
  display:none !important;
}

/* FLASH ADMIN */

.flash-admin-page{
  max-width:700px;
  margin:auto;
}

.flash-form{

  display:flex;
  flex-direction:column;

  gap:10px;

  background:#ffffff;

  padding:18px;

  border-radius:14px;

  box-shadow:0 4px 14px rgba(0,0,0,0.08);
}

.flash-form input{

  padding:10px;

  border-radius:8px;

  border:1px solid #ddd;

}

.flash-save-btn{

  background:#0f766e;

  color:white;

  border:none;

  padding:12px;

  border-radius:10px;

  font-weight:600;

  cursor:pointer;
}

.flash-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.flash-card{

  background:#fff;

  border-radius:12px;

  padding:14px;

  box-shadow:0 3px 10px rgba(0,0,0,0.08);
}

.flash-title{
  font-weight:700;
  margin-bottom:6px;
}

.flash-info{
  font-size:13px;
  opacity:.8;
}

.flash-actions{
  margin-top:10px;
}

.flash-actions button{

  margin-right:6px;

  padding:6px 10px;

  border-radius:6px;

  border:none;

  cursor:pointer;
}

/* ===============================
   REWARD CARD PREMIUM
================================= */

.reward-card{

  transition:transform .2s ease,
             box-shadow .2s ease;

}

.reward-card:hover{

  transform:translateY(-3px);

  box-shadow:
    0 8px 20px rgba(0,0,0,.18);

}


/* ===============================
   IMAGE
================================= */

.reward-image{

  position:relative;
  overflow:hidden;

}

.reward-image img{

  width:100%;
  height:100%;
  object-fit:cover;

}


/* ===============================
   REWARD BADGE
================================= */

.badge.reward{

  position:absolute;
  top:8px;
  left:8px;

  background:#16a34a;

  color:white;

  font-size:11px;
  font-weight:700;

  padding:3px 8px;

  border-radius:6px;

}


/* ===============================
   GP PRICE BADGE
================================= */

.reward-gp{

  position:absolute;
  bottom:8px;
  right:8px;

  background:#111;

  color:#22c55e;

  font-weight:700;

  padding:4px 8px;

  border-radius:6px;

  font-size:12px;

  box-shadow:
    0 0 8px rgba(0,0,0,.4);

}


/* ===============================
   GP BUTTON
================================= */

.btn-gp{

  width:100%;

  margin-top:10px;

  padding:10px;

  border:none;

  border-radius:10px;

  font-weight:600;

  font-size:14px;

  background:linear-gradient(
    90deg,
    #16a34a,
    #15803d
  );

  color:white;

  cursor:pointer;

  transition:.2s;

}

.btn-gp:hover{

  transform:translateY(-1px);

  box-shadow:
    0 4px 10px rgba(0,0,0,.2);

}

.btn-gp:active{

  transform:translateY(0);

}


/* ===============================
   REWARD ADMIN PANEL
================================= */

.admin-store-page{
  padding:20px;
}

/* CARD CONTAINER */

.admin-card{

  background:#ffffff;

  border-radius:16px;

  padding:20px;

  box-shadow:
    0 6px 18px rgba(0,0,0,.08);

  border:1px solid rgba(0,0,0,.05);

  margin-bottom:20px;

}

/* CARD BODY */

.card-body{
  display:flex;
  flex-direction:column;
  gap:12px;
}


/* ===============================
   TITLE
================================= */

.admin-store-page h2{

  font-size:22px;
  font-weight:700;

  margin-bottom:12px;

  color:#065f5b;

}

.admin-store-page h3{

  font-size:18px;
  font-weight:600;

  margin-bottom:10px;

  color:#065f5b;

}


/* ===============================
   INPUT STYLE
================================= */

.card-body input{

  width:100%;

  padding:12px 14px;

  border-radius:10px;

  border:1px solid #d1d5db;

  font-size:14px;

  background:#f9fafb;

  transition:.15s;

}

.card-body input:focus{

  outline:none;

  border-color:#0f766e;

  background:white;

  box-shadow:
    0 0 0 2px rgba(15,118,110,.15);

}


/* ===============================
   SAVE BUTTON
================================= */

.btn-primary{

  margin-top:6px;

  padding:12px;

  border:none;

  border-radius:10px;

  font-weight:600;

  font-size:14px;

  background:linear-gradient(
    90deg,
    #0f766e,
    #065f5b
  );

  color:white;

  cursor:pointer;

  transition:.2s;

}

.btn-primary:hover{

  transform:translateY(-1px);

  box-shadow:
    0 4px 10px rgba(0,0,0,.15);

}


/* ===============================
   EXISTING REWARD LIST
================================= */

.admin-card strong{

  font-size:16px;

  color:#111;

}


/* ACTION BUTTONS */

.admin-card button{

  padding:6px 10px;

  border:none;

  border-radius:6px;

  font-size:12px;

  font-weight:600;

  cursor:pointer;

  margin-right:6px;

}


/* ACTIVATE BUTTON */

.admin-card button:nth-child(1){

  background:#16a34a;
  color:white;

}


/* EDIT BUTTON */

.admin-card button:nth-child(2){

  background:#0ea5e9;
  color:white;

}


/* DELETE BUTTON */

.admin-card button:nth-child(3){

  background:#dc2626;
  color:white;

}


/* ===============================
   IMAGE CLICK
================================= */

.card-image{
  cursor:pointer;
}


/* ===============================
   MOBILE IMPROVEMENT
================================= */

@media (max-width:600px){

  .store-card{
    padding:16px;
  }

  .card-body input{
    font-size:13px;
  }

}


/* ===============================
   REWARD CONFIRM MODAL
================================= */

.reward-confirm-modal{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

  display:flex;

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

  z-index:5000;

}

.reward-confirm-bg{

  position:absolute;

  inset:0;

  background:rgba(0,0,0,0.6);

}

.reward-confirm-box{

  position:relative;

  background:#fff;

  padding:24px;

  border-radius:16px;

  width:90%;
  max-width:360px;

  text-align:center;

  box-shadow:
    0 15px 40px rgba(0,0,0,0.25);

  z-index:1;

}

.reward-actions{

  display:flex;

  gap:10px;

  margin-top:16px;

}

.btn-cancel{

  flex:1;

  padding:10px;

  border:none;

  border-radius:10px;

  background:#e5e7eb;

}

.btn-redeem{

  flex:1;

  padding:10px;

  border:none;

  border-radius:10px;

  background:#16a34a;

  color:white;

  font-weight:600;

}

.app-toast{

  position:fixed;
  bottom:90px;
  left:50%;
  transform:translateX(-50%);

  background:#111;
  color:white;

  padding:12px 18px;
  border-radius:10px;

  font-size:14px;

  opacity:0;
  transition:.2s;

  z-index:5000;
}

.app-toast.show{
  opacity:1;
}


/* ===============================
   FLASH BADGE
================================= */

.flash-badge{

  position:absolute;

  top:8px;
  left:8px;

  background:linear-gradient(
    135deg,
    #ff3b3b,
    #ff7a00
  );

  color:#fff;

  font-size:10px;
  font-weight:700;

  padding:4px 8px;

  border-radius:6px;

  box-shadow:0 2px 8px rgba(0,0,0,.25);

  letter-spacing:.4px;

}

/* ===============================
   FLASH PRICE
================================= */

.flash-price{

  display:flex;

  align-items:center;

  gap:6px;

  flex-wrap:wrap;

  margin:6px 0;

}

/* NORMAL PRICE */

.price-normal{

  font-size:12px;

  color:#999;

  text-decoration:line-through;

}

/* FLASH PRICE */

.price-flash{

  font-size:16px;

  font-weight:700;

  color:#f59e0b;

}

/* DISCOUNT BADGE */

.flash-discount{

  background:#ef4444;

  color:#fff;

  font-size:11px;

  font-weight:700;

  padding:2px 6px;

  border-radius:6px;

}


/* ===============================
   CART DRAWER
================================= */

.cart-drawer{
  position:fixed;
  inset:0;
  z-index:4000;
}

.cart-drawer.hidden{
  display:none;
}

.cart-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
}

.cart-panel{

  position:absolute;
  bottom:0;
  left:0;
  right:0;

  background:#fff;

  border-radius:18px 18px 0 0;

  padding:16px;

  max-height:80vh;
  overflow:auto;

  animation:slideUp .25s ease;

}

@keyframes slideUp{
  from{
    transform:translateY(100%);
  }
  to{
    transform:translateY(0);
  }
}

/* ===============================
   CART HEADER
================================= */

.cart-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.cart-header span{
  cursor:pointer;
  font-size:18px;
}


/* ===============================
   CART ITEM
================================= */

.cart-item{
  display:flex;
  gap:10px;
  margin-bottom:12px;
}

.cart-item img{
  width:60px;
  height:60px;
  object-fit:cover;
  border-radius:8px;
}

.cart-info{
  flex:1;
}

.cart-info b{
  font-size:13px;
}

.cart-info small{
  opacity:.6;
}


/* ===============================
   QTY BUTTON
================================= */

.cart-qty{
  display:flex;
  gap:6px;
  margin-top:6px;
}

.cart-qty button{

  width:24px;
  height:24px;

  border:none;

  border-radius:6px;

  background:#f1f1f1;

  font-weight:700;

  cursor:pointer;

}

.cart-qty span{
  min-width:18px;
  text-align:center;
}


/* ===============================
   CART SUMMARY
================================= */

.cart-summary{
  display:flex;
  justify-content:space-between;
  margin:10px 0;
  font-weight:600;
}


/* ===============================
   GP REWARD PREVIEW
================================= */

.cart-gp-reward{

  margin-top:6px;

  padding:10px;

  background:#fef9c3;

  border-radius:10px;

  font-size:13px;

  text-align:center;

  color:#92400e;

  font-weight:600;

}


/* ===============================
   SUCCESS PURCHASE NOTICE
================================= */

.store-success-box{

  position:fixed;
  inset:0;

  background:rgba(0,0,0,.5);

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

  z-index:9999;

}

.store-success-card{

  background:#fff;

  padding:30px;

  border-radius:18px;

  text-align:center;

  box-shadow:
    0 20px 40px rgba(0,0,0,.25);

  animation:pop .25s ease-out;

}

.store-success-card h2{
  margin-bottom:8px;
}

.gp-reward{

  font-size:28px;
  font-weight:700;

  color:#eab308;

  margin:12px 0;

}


/* ===============================
   POP ANIMATION
================================= */

@keyframes pop{

  from{
    transform:scale(.85);
    opacity:0;
  }

  to{
    transform:scale(1);
    opacity:1;
  }

}