/* =========================================
   Card Templates (variants) — keep HTML same
   Toggle via body class: tpl-default / tpl-1
   ========================================= */

body.tpl-default {}

/* -------------------------
   Template 1 — "Neon Classic"
   Inspired by user's sample: dashed border, vivid colors
   ------------------------- */

body.tpl-1 #warpper{
  width: 360px;
  height: 120px;
  border: 2px dashed #e11d48;
  border-radius: 14px;
  background: #fff;
  position: relative;
  overflow: hidden;
  margin: 10px 0;
  box-shadow: 0 3px 14px rgba(0,0,0,.10);
}

/* keep ornaments but ensure corners are visible */
body.tpl-1 #back{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
}
body.tpl-1 #back img{
  width: 52px;
  position: absolute;
}
body.tpl-1 #back .im1{ top: 0; right: 0; }
body.tpl-1 #back .im2{ bottom: 0; left: 0; }
body.tpl-1 #back .im3{ bottom: 0; right: 0; transform: scaleX(-1); }
body.tpl-1 #back .im4{ top: 0; left: 0; transform: scaleX(-1); }

/* top description */
body.tpl-1 .pre-header.descripe{
  position: absolute;
  top: 6px;
  left: 12px;
  right: 12px;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  color: #22c55e; /* green */
  padding: 0;
  margin: 0;
}

/* content area */
body.tpl-1 #code{
  position: absolute;
  top: 42px;
  left: 12px;
  right: 12px;
  bottom: 30px;
  text-align: center;
}

/* neutralize bootstrap table spacing inside card */
body.tpl-1 #code table{
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}
body.tpl-1 #code table td{
  border: none !important;
  padding: 0 !important;
  vertical-align: middle !important;
  line-height: 1.05 !important;
}

/* side blocks */
body.tpl-1 td.price,
body.tpl-1 td.time{
  width: 90px;
  font-size: 22px;
  font-weight: 900;
  color: #111827;
}
body.tpl-1 td.price{ text-align: right; padding-right: 6px !important; }
body.tpl-1 td.time{ text-align: left; padding-left: 6px !important; }

/* secret */
body.tpl-1 td.secret{
  font-family: "Roboto", sans-serif !important;
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #ef4444; /* red */
  text-align: center;
}

/* date */
body.tpl-1 .date{
  position: absolute;
  left: 14px;
  bottom: 36px;
  font-size: 18px;
  color: rgba(0,0,0,.35);
}

/* footer description */
body.tpl-1 #footer.descripe{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  color: #22c55e;
  padding: 0 !important;
  margin: 0 !important;
}
body.tpl-1 #footer.descripe p{ margin: 0 !important; }