/* =========================================================
   TOTOSLOTJP — Kupon Visual Component
   Standalone UI component. Does not modify existing APIs.
   ========================================================= */

.coupon-widget{
  position:relative;
  width:min(800px, calc(100% - 20px));
  height:112px;
  margin:10px auto 18px;
  padding:18px 28px;
  display:flex;
  align-items:center;
  gap:18px;
  overflow:hidden;

  background:linear-gradient(135deg,#344a55 0%,#2e424c 45%,#26353d 100%);
  border:2px solid #52636b;
  border-radius:8px;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 0 1px rgba(0,0,0,.55);
}

/* dotted inner frame */
.coupon-widget::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px dotted rgba(247,197,61,.9);
  border-radius:5px;
  pointer-events:none;
  z-index:1;
}

/* decorative lamps are generated by coupon-widget.js */
.coupon-lamps{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
}

.coupon-lamp{
  position:absolute;
  width:7px;
  height:7px;
  margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:#ff3158;
  border:1px solid rgba(255,255,255,.28);
  opacity:1;
  transform:scale(1);
  animation:couponLampRedYellow .70s steps(1,end) infinite;
  animation-delay:0s;
  animation-iteration-count:infinite;
  box-shadow:
    0 0 3px #ff3158,
    0 0 7px rgba(255,49,88,.75);
}

/*
  IMPORTANT:
  Every lamp uses the EXACT SAME animation and EXACT SAME delay.
  The keyframes contain NO !important because !important declarations
  are invalid inside CSS @keyframes in browsers.
  Result: all lamps are red together, then gold together.
*/
@keyframes couponLampRedYellow{
  0%,49.999%{
    background-color:#ff3158;
    border-color:#ff3158;
    box-shadow:
      0 0 3px #ff3158,
      0 0 7px rgba(255,49,88,.85),
      0 0 12px rgba(255,49,88,.55);
    opacity:1;
    transform:scale(1);
  }
  50%,100%{
    background-color:#ffd83d;
    border-color:#ffd83d;
    box-shadow:
      0 0 3px #ffd83d,
      0 0 7px rgba(255,216,61,.90),
      0 0 12px rgba(255,216,61,.60);
    opacity:1;
    transform:scale(1);
  }
}

.coupon-brand{
  position:relative;
  z-index:4;
  flex:0 0 190px;
  min-width:190px;
  color:#f5f7f8;
  font-size:22px;
  line-height:1;
  font-style:italic;
  font-weight:900;
  letter-spacing:-.5px;
}

.coupon-brand-main{
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}

.coupon-brand-icon{
  font-size:17px;
  font-style:normal;
  line-height:1;
}

.coupon-buy{
  display:block;
  width:114px;
  height:28px;
  margin-top:11px;
  border:0;
  border-radius:16px;
  background:linear-gradient(#ffd35a,#ffc13c);
  color:#16110a;
  font:900 10px/28px Arial,Helvetica,sans-serif;
  text-align:center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 1px 2px rgba(0,0,0,.25);
  cursor:pointer;
}

.coupon-total{
  position:relative;
  z-index:4;
  flex:1;
  min-width:0;
  height:56px;
  padding:0 14px;
  display:flex;
  align-items:center;

  border:1px solid #5b6970;
  border-radius:14px;
  background:rgba(255,255,255,.035);

  color:#aeb7ba;
  font-size:20px;
  font-weight:900;
  letter-spacing:.3px;
  white-space:nowrap;
  overflow:hidden;
}

.coupon-total-label{
  flex:0 0 auto;
}

.coupon-total-value{
  margin-left:auto;
  color:#fff;
  font-size:34px;
  line-height:1;
  font-weight:900;
  letter-spacing:.2px;
}

@media(max-width:700px){
  .coupon-widget{
    width:calc(100% - 16px);
    height:110px;
    margin:10px auto 16px;
    padding:14px 17px;
    gap:10px;
  }

  .coupon-brand{
    flex:0 0 112px;
    min-width:112px;
    font-size:18px;
  }

  .coupon-brand-icon{
    font-size:14px;
  }

  .coupon-buy{
    width:102px;
    height:27px;
    line-height:27px;
    margin-top:9px;
    font-size:9px;
  }

  .coupon-total{
    height:58px;
    padding:0 11px;
    border-radius:13px;
    font-size:14px;
  }

  .coupon-total-value{
    font-size:22px;
  }

  .coupon-lamp{
    width:6px;
    height:6px;
    margin:-3px 0 0 -3px;
  }
}