/* =========================================
   GPC — Pick Ticket Number + Answers (Override)
   Works with: ul.tickets_numbers, ul.lottery-pn-answers
   Paste in: Child theme style.css OR Additional CSS
   ========================================= */

/* --- Base variables (optional) --- */
:root{
  --gpc-bg: #000;
  --gpc-card: rgba(255,255,255,.03);
  --gpc-border: rgba(255,255,255,.10);
  --gpc-text: rgba(255,255,255,.86);
  --gpc-muted: rgba(255,255,255,.60);
  --gpc-gold-1: #f5b301;
  --gpc-gold-2: #ffd45a;
  --gpc-danger: #ff5a5f;
  --gpc-danger-bg: rgba(255,90,95,.14);
  --gpc-warn: #ffd45a;
  --gpc-warn-bg: rgba(245,179,1,.16);
  --gpc-ok-bg: rgba(245,179,1,.22);
}

/* =========================
   Pick Ticket Number Grid
   ========================= */
ul.tickets_numbers{
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

ul.tickets_numbers li.tn{
  float: none !important;
  width: 62px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;

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

  list-style: none !important;
  cursor: pointer;

  background: var(--gpc-card) !important;
  border: 1px solid var(--gpc-border) !important;
  border-radius: 12px !important;

  color: var(--gpc-text) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
  user-select: none;

  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}

/* Hover (only for available) */
ul.tickets_numbers li.tn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(245,179,1,.35) !important;
}

/* Working state */
ul.tickets_numbers.working,
ul.tickets_numbers.working li{
  cursor: wait !important;
}

/* Taken (sold out) */
ul.tickets_numbers li.taken{
  background: var(--gpc-danger-bg) !important;
  border-color: rgba(255,90,95,.35) !important;
  color: rgba(255,255,255,.55) !important;
  cursor: not-allowed !important;
}

/* In cart (reserved by user) */
ul.tickets_numbers li.in_cart{
  background: var(--gpc-warn-bg) !important;
  border-color: rgba(245,179,1,.35) !important;
  color: #111 !important;
  cursor: not-allowed !important;
}

/* Reserved (held by system) */
ul.tickets_numbers li.reserved{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.55) !important;
  cursor: not-allowed !important;
}

/* Selected (your choice) — GOLD, not green */
ul.tickets_numbers li.selected{
  background: linear-gradient(135deg, var(--gpc-gold-1), var(--gpc-gold-2)) !important;
  border-color: rgba(245,179,1,.55) !important;
  color: #111 !important;
}

/* Make sure "taken:hover" doesn't turn green (plugin bug) */
ul.tickets_numbers li.taken:hover,
ul.tickets_numbers li.reserved:hover,
ul.tickets_numbers li.in_cart:hover{
  transform: none !important;
  filter: none !important;
}

/* Responsive grid tightening */
@media (max-width: 520px){
  ul.tickets_numbers{
    gap: 8px;
  }
  ul.tickets_numbers li.tn{
    width: 58px !important;
    height: 46px !important;
    font-size: 13px !important;
  }
}

/* =========================
   Answers list — inline on desktop, stacked on mobile
   ========================= */

ul.lottery-pn-answers{ margin: 0 0 16px 0 !important; padding: 0 !important; } 
ul.lottery-pn-answers li{ margin: 0 0 10px 0 !important; padding: 14px 14px !important; background: var(--gpc-card) !important; border: 1px solid var(--gpc-border) !important; border-radius: 14px !important; color: var(--gpc-text) !important; font-size: 14px !important; font-weight: 800 !important; cursor: pointer; transition: transform .12s ease, border-color .12s ease, background .12s ease; } 
ul.lottery-pn-answers li:hover{ transform: translateY(-1px); border-color: rgba(245,179,1,.35) !important; background: rgba(255,255,255,.05) !important; } 
ul.lottery-pn-answers li.selected{ background: linear-gradient(135deg, var(--gpc-gold-1), var(--gpc-gold-2)) !important; border-color: rgba(245,179,1,.55) !important; color: #111 !important; } 
ul.lottery-pn-answers li.selected.false{ background: var(--gpc-danger-bg) !important; border-color: rgba(255,90,95,.35) !important; color: rgba(255,255,255,.86) !important; }

/* Desktop/tablet: inline grid */
@media (min-width: 768px){
  ul.lottery-pn-answers{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
  }

  ul.lottery-pn-answers li{
    margin: 0 !important;               /* gap handles spacing now */
    padding: 16px 16px !important;
    min-height: 54px;                   /* keeps buttons consistent */
    display: flex !important;
    align-items: center !important;
  }
}

/* Mobile: stacked like your image */
@media (max-width: 767px){
  ul.lottery-pn-answers{
    display: block !important;
  }

  ul.lottery-pn-answers li{
    width: 100% !important;
  }
}


/* =========================
   Dropdown answer field
   ========================= */
#lottery_answer_drop{
  width: 100% !important;
  padding: 12px 12px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  color: #fff !important;
  outline: none !important;
}

#lottery_answer_drop:focus{
  border-color: rgba(245,179,1,.35) !important;
  box-shadow: 0 0 0 3px rgba(245,179,1,.12) !important;
}

/* Fix option readability (important on dark UI) */
#lottery_answer_drop option{
  background: #0b0b0b !important;
  color: #fff !important;
}

/* =========================
   Lucky dip & buttons
   ========================= */
div.lucky_dip{
  margin-bottom: 12px !important;
}

div.lucky_dip button{
  background: linear-gradient(135deg, var(--gpc-gold-1), var(--gpc-gold-2)) !important;
  color: #111 !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 12px 34px rgba(245,179,1,.18) !important;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

div.lucky_dip button:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 16px 42px rgba(245,179,1,.24) !important;
}

div.lucky_dip button:disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* =========================
   Ticket tab bar
   ========================= */
.ticket-tab-bar{
  width: 100%;
  overflow: hidden;
  display: flex;
  gap: 8px;
  margin: 12px 0 14px;
}

.ticket-tab-bar .ticket-tab-bar-item{
  float: none !important;
  opacity: 1 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.78) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-weight: 800 !important;
}

.ticket-tab-bar .ticket-tab-bar-item.ticket-tab-active{
  background: rgba(245,179,1,.14) !important;
  border-color: rgba(245,179,1,.30) !important;
  color: #fff !important;
}

.gpc-competition-details{
  margin-top:16px;
  padding:16px 16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  border-radius:14px;
}
.gpc-competition-details h3{
  margin:0 0 10px;
  color:#fff;
  font-size:16px;
  font-weight:800;
}
.gpc-competition-details ul{
  margin:0;
  padding:0;
  list-style:none;
}
.gpc-competition-details li{
  padding:8px 0;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.78);
  line-height:1.35;
}
.gpc-competition-details li:first-child{
  border-top:none;
  padding-top:0;
}
.gpc-competition-details strong{ color:#fff; }

/* Hide Lottery Info Box completely */
.lottery-ajax-change > .gpc-lottery-info {
  display: none !important;
}

.gpc-discount-wrap { margin-bottom: 14px !important; }
.gpc-slider-wrap   { margin-bottom: 14px !important; }
.gpc-answer-wrap   { margin-bottom: 14px !important; }

.single_add_to_cart_button.gpc-disabled{
  opacity: .45 !important;
  cursor: not-allowed !important;
  filter: grayscale(20%);
}