/* =========================================
   GPC — WooCommerce Lottery UI (Override)
   Paste in: Customizer > Additional CSS
   ========================================= */

/* 1) Countdown wrapper */
.hasCountdown,
.wc_lotery_countdown-row{
  background: transparent !important;
  border: 0 !important;
}

/* 2) Countdown layout (4 boxes) */
.wc_lotery_countdown-row{
  display: flex !important;
  gap: 10px;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0 !important;
  text-align: left !important;
}

.wc_lotery_countdown-section{
  float: none !important;
  width: auto !important;
  flex: 1 1 0;
  min-width: 64px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px 10px 9px;
}

/* 3) Countdown numbers + labels */
.wc_lotery_countdown-amount{
  display:block;
  color: #fff !important;
  font-weight: 900;
  font-size: 22px !important; /* was 200% */
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.wc_lotery_countdown-period{
  display:block;
  margin-top: 6px;
  color: rgba(255,255,255,.65) !important;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.01em;
  text-transform: none;
  text-align: center;
}

/* 4) "Holding" / inactive state */
.wc_lotery_countdown-holding span{
  color: rgba(255,255,255,.45) !important;
}

/* 5) Finished/over message */
.hasCountdown .over,
.widget .has-finished,
.widget .time-left{
  color: rgba(255,255,255,.78) !important;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 12px 14px;
}

/* 6) Progress (progress element) */
progress[value]{
  height: 20px !important;
  border-radius: 999px !important;
  overflow: hidden;
}

progress[value]::-webkit-progress-bar{
  background-color: rgba(255,255,255,.08) !important;
  border-radius: 999px !important;
}

progress[value]::-webkit-progress-value{
  background: linear-gradient(135deg, #f5b301, #ffd45a) !important;
  border-radius: 999px !important;
}

/* If plugin adds .full when maxed, keep it but still brand it */
.full > progress[value]::-webkit-progress-value{
  background: linear-gradient(135deg, #f5b301, #ffd45a) !important;
}

/* 7) Meter variant (some templates use <meter>) */
.wcl-progress-meter{
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.wcl-progress-meter meter{
  height: 12px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
}

.wcl-progress-meter meter::-webkit-meter-bar{
  background: rgba(255,255,255,.08) !important;
}

.wcl-progress-meter meter::-webkit-meter-optimum-value,
.wcl-progress-meter meter::-webkit-meter-suboptimum-value{
  background: linear-gradient(135deg, #f5b301, #ffd45a) !important;
  box-shadow: none !important;
}

/* 8) Labels around progress */
.wcl-progress-meter .zero,
.wcl-progress-meter .min,
.wcl-progress-meter .max{
  color: rgba(255,255,255,.55) !important;
  font-weight: 700;
  font-size: 12px;
  top: -26px !important;
}

/* 9) “winning” badge — make it match GPC (optional)
   If you want to hide it completely: display:none; */
span.winning{
  background: linear-gradient(135deg, #f5b301, #ffd45a) !important;
  color: #111 !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 34px rgba(245,179,1,.18);
}

/* 10) Remove the plugin lottery icon badge (optional) */
.lottery-bage{
  opacity: .0;
  pointer-events: none;
}

/* 11) Fix “sold” label positioning */
span.sold{
  position: static !important;
  display: inline-block;
  margin-top: 10px;
  color: rgba(255,255,255,.75) !important;
  font-weight: 700;
}

/* 12) Mobile: keep boxes readable */
@media (max-width: 520px){
  .wc_lotery_countdown-row{
    gap: 8px;
  }
  .wc_lotery_countdown-section{
    min-width: 58px;
    padding: 9px 8px 8px;
  }
  .wc_lotery_countdown-amount{
    font-size: 20px !important;
  }
}

/* Modal */
.alertable {
  position: fixed;
  z-index: 9999;
  top: 38vh;
  left: calc(50% - 150px);
  width: 380px;
  background: white;
  border-radius: 4px;
  padding: 20px;
  margin: 0 auto;
}
@media (max-width: 576px) {
  .alertable {
    width: 80%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
}


/* Overlay */
.alertable-overlay {
  position: fixed;
  z-index: 9998;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
}

/* Message */
.alertable-message {
  margin-bottom: 20px;
}
.alertable-message::after {
  content: "";
  clear: both;
  display: table;
}

/* Prompt */
.alertable-prompt {
  margin-bottom: 20px;
}

.alertable-input {
  width: 100%;
  border-radius: 4px;
  box-shadow: none;
  border: solid 1px #ccc;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  padding: 6px 12px;
  display: block;
  box-sizing: border-box;
  margin-bottom: 10px;
}

/* Button group */
.alertable-buttons {
  text-align: right;
}

/* OK button */
.alertable-ok {
  background: #09d;
  border: solid 1px #09d;
  font-family: inherit;
  font-size: inherit;
  color: white;
  border-radius: 4px;
  padding: 6px 12px;
  margin-left: 4px;
  cursor: pointer;
}

.alertable-ok:hover,
.alertable-ok:focus,
.alertable-ok:active {
  background-color: #08c;
}

/* Cancel button */
.alertable-cancel {
  border: solid 1px #ddd;
  background: white;
  font-family: inherit;
  font-size: inherit;
  color: #888;
  border-radius: 4px;
  padding: 6px 12px;
  margin-left: 4px;
  cursor: pointer;
}

.alertable-cancel:hover,
.alertable-cancel:focus,
.alertable-cancel:active {
  background-color: #f2f2f2;
}

/* =========================================================
   GPC — FORCE override for jquery.alertable.css
   (plugin wins unless we use specificity + !important)
   ========================================================= */

body .alertable-overlay{
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

body .alertable{
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: min(420px, calc(100% - 28px)) !important;
  padding: 18px 18px 16px !important;
  border-radius: 18px !important;

  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;

  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(245,179,1,.10) inset !important;
  color: rgba(255,255,255,.92) !important;
}

/* text-ul nu se vede pentru ca pluginul lasa culori/light backgrounds */
body .alertable-message{
  color: rgba(255,255,255,.92) !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  margin: 0 0 14px !important;

  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

body .alertable-prompt{
  color: rgba(255,255,255,.75) !important;
  margin: 0 0 14px !important;
}

body .alertable-input{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
  border-radius: 14px !important;
  padding: 12px 12px !important;
  box-shadow: none !important;
}

body .alertable-input:focus{
  border-color: rgba(245,179,1,.40) !important;
  box-shadow: 0 0 0 3px rgba(245,179,1,.14) !important;
}

body .alertable-buttons{
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 8px !important;
  text-align: right !important;
}

body .alertable-ok{
  background: linear-gradient(135deg, #f5b301, #ffd45a) !important;
  color: #111 !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 11px 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 14px 36px rgba(245,179,1,.18) !important;
}

body .alertable-ok:hover{
  filter: brightness(1.03) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 44px rgba(245,179,1,.26) !important;
}

body .alertable-cancel{
  color: rgba(255,255,255,.78) !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  padding: 11px 14px !important;
  font-weight: 900 !important;
}

/* =========================
   GPC — Reorder blocks WITHOUT moving DOM
   Works with TranslatePress (RO/EN) + keeps plugin events alive
   ========================= */

/* Make cart a vertical stack so we can use order */
.ct-product-add-to-cart form.cart,
form.cart {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* Orders (lower = higher on page) */
form.cart .gpc-discount-wrap { order: 10 !important; }
form.cart .gpc-slider-wrap   { order: 20 !important; }

/* Question block elements (we don't wrap them, only order them) */
form.cart .gpc-q-title   { order: 30 !important; margin-top: 10px !important; }
form.cart .gpc-q-text    { order: 31 !important; }
form.cart ul.lottery-pn-answers { order: 32 !important; }

/* CTA last */
form.cart .single_add_to_cart_button { order: 40 !important; }

/* Keep answer grid (desktop inline) */
@media (min-width: 768px){
  form.cart ul.lottery-pn-answers{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
    gap: 12px !important;
  }
}