/* =========================================================
   LearnDash Case Eval — Clean CSS
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* surfaces & borders */
  --c-bg: #fff;
  --c-border: #e8e8ee;
  --c-border-muted: #d1d5db;
  --c-surface-soft: #f8fafc;
  --c-surface-soft-border: #e5e7eb;
  --c-preview-bg: #000;

  /* text */
  --c-text-muted: #666;
  --c-text-muted-2: #6b7280;
  --c-text-strong: #111827;
  --c-note: #444;

  /* brand */
  --c-primary: #0ea5e9;
  --c-primary-hover: #1e3a8a;
  --c-btn: #245cff;
  --c-danger: #ff3b30;
  --c-gray: #6b7280;

  /* stars */
  --c-star-off: #ddd;
  --c-star-on:  #f5b50a;
  --c-focus: #cbd5e1;

  /* shimmer */
  --c-shimmer-dark: #111;
  --c-shimmer-mid:  #555;
}

/* ---------- Container & Typography ---------- */
.ldvt{
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 20px;
  margin: 24px 0;
}

.ldvt-title{
  margin: 0 0 6px;
  font-size: 26px;
}

.ldvt-sub{
  margin: 0 0 14px;
  color: var(--c-muted);
}

/* ---------- Inputs ---------- */
.ldvt-input,
.ldvt-textarea,
.ldvt-photo{
  width: 100%;
  padding: 10px;
  border: 1px solid var(--c-star-off);
  border-radius: 8px;
  margin: 6px 0;
}

/* ---------- Layout helpers ---------- */
.ldvt-row{ display:flex; gap:10px; flex-wrap:wrap; }
.ldvt-recorder{ margin-top:10px; }
.ldvt-preview{
  width:100%; background:var(--c-preview-bg); border-radius:10px; margin-bottom:10px;
}
.ldvt-buttons{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.ldvt-actions{ display:flex; justify-content:center; margin-top:16px; }

/* ---------- Buttons ---------- */
.ldvt-btn{
  background: var(--c-btn);
  color:var(--c-bg);
  border:0;
  border-radius:8px;
  padding:10px 14px;
  font-weight:600;
  cursor:pointer;
}

.ldvt-btn.ldvt-stop{ background: var(--c-danger); }
.ldvt-btn.ldvt-redo{ background: var(--c-gray); }

/* CTA variants */
.ldvt-btn--primary{
  background: var(--c-primary);
  color: var(--c-bg);
  border:0;
  padding:14px 22px;
  font-size:18px;
  border-radius:12px;
  width:100%;
  max-width:360px;
  font-weight:700;
  text-decoration:none;
  display:inline-block;
}
.ldvt-btn--primary:hover{ background: var(--c-primary-hover); color: var(--c-bg); }

.ldvt-btn--secondary{
  background: transparent;
  color: var(--c-text-strong);
  border:1px solid var(--c-border-muted);
  padding:12px 18px;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
  display:inline-block;
}

/* ---------- Consent ---------- */
.ldvt-consent{ display:flex; align-items:center; gap:8px; margin:8px 0; }

/* ---------- Notes / states ---------- */
.ldvt-note{ color: var(--c-note); margin-top:6px; }
.ldvt.ldvt--submitting{ opacity:.7; pointer-events:none; }

/* ---------- Stars ---------- */
.ldvt-row--stars{ display:flex; flex-direction:column; gap:10px; }
.ldvt .ldce-stars .ldce-stars-tip{
  display:block; margin-bottom:6px; color:var(--c-preview-bg);
  font-size:22px; font-weight:700; letter-spacing:.01em;
}
.ldvt .ldce-stars span{
  cursor:pointer; margin-right:4px; display:inline-block;
  font-size:22px; line-height:1; color: var(--c-star-off);
}
.ldvt .ldce-stars span.active{ color: var(--c-star-on); }
.ldvt .ldce-stars span:focus{ outline:2px solid var(--c-focus); outline-offset:2px; }

/* ---------- Shoutout (consent-gated area) ---------- */
.ldvt-shoutout{ max-width:720px; margin:12px auto 0; }
.ldvt .ldvt-shoutout[aria-disabled="true"]{ opacity:.5; pointer-events:none; }

/* ---------- Prompts & chooser ---------- */
.ldvt-prompts{
  background: var(--c-surface-soft);
  border:1px solid var(--c-surface-soft-border);
  border-radius:10px;
  padding:10px 12px;
  margin:10px 0 14px;
}
.ldvt-chooser.ldvt-chooser--with-icon{
  display:flex;
  gap:24px;
  margin:10px 0 14px;
  justify-content: center;
}

.ldvt-chooser .ldvt-chooser-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  flex-direction: column;
  justify-content: center;
}

.ldvt-chooser .ldvt-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:10px;
  border:1px solid var(--c-primary);
  background:var(--c-bg);
  color:var(--c-primary);
  font-weight:700;
  line-height:1.1;
  cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.06);
  transition:transform .03s ease, filter .15s ease, background .15s ease, color .15s ease;
}

.ldvt-chooser .ldvt-btn.ldvt-btn--square:hover{
  filter:brightness(.98);
}

.ldvt-chooser .ldvt-btn.ldvt-btn--square:active{
  transform:translateY(1px);
}

.ldvt-chooser .ldvt-btn.ldvt-btn--square.is-active{
  background:var(--c-primary, #0ea5e9);
  color:var(--c-bg);
  border-color:var(--c-primary, #0ea5e9);
}

.ldvt-chooser .ldvt-btn .ldvt-btn-ico{
  display:inline-flex;
  width:22px;
  justify-content:center;
  font-size:18px;
}

.ldvt-chooser .ldvt-gift{
  display:block;
  width:290px;
  height:auto;
  flex:0 0 auto;
}

@media (max-width:520px){
  .ldvt-chooser.ldvt-chooser--with-icon{
    align-items:flex-start;
  }
  .ldvt-chooser .ldvt-gift{
    width:64px;
  }
}

/* ---------- Thanks card ---------- */
.ldvt-thanks-card{ padding:20px; margin:24px auto; max-width:720px; }

.ldvt-thanks-head{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
}

.ldvt-thanks-title{
  margin:0; font-size:28px;
  display:flex; align-items:center; gap:8px;
}

.ldvt-thanks-sub{ margin:0; color: var(--c-muted-2); }
.ldvt-emoji{ font-size:28px; line-height:1; }

.ldvt-thanks-ctas{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* ---------- Confetti canvas ---------- */
.ldvt-confetti{
  width:100%; height:220px; display:block;
  margin-top:6px; border-radius:10px; pointer-events:none;
}

/* ---------- Gating LearnDash button ---------- */
body.ldce-gate-complete .learndash_mark_complete_button,
body.ldce-gate-complete a.learndash_mark_complete_button{
  pointer-events:none;
  opacity:.45;
  filter:grayscale(1);
  cursor:not-allowed;
}

/* ---------- Optional tooltip hint ---------- */
.ldce-complete-hint{
  font-size:12px;
  color: var(--c-muted-2);
  margin-top:6px;
}

/* ---------- Fancy title shimmer (optional) ---------- */
.ldvt-animated{
  background: linear-gradient(90deg, var(--c-shimmer-dark), var(--c-shimmer-mid), var(--c-shimmer-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: ldvt-shimmer 3s linear infinite;
}

@keyframes ldvt-shimmer{
  0%{ background-position:0% 50% }
  100%{ background-position:200% 50% }
}

/* ---------- Responsive ---------- */
@media (min-width: 720px){
  .ldvt{ padding:28px; }
  .ldvt-title{ font-size:32px; }
}

.ldvt-select option[value=""] {
  color: var(--c-text-muted-2); /* same gray as other placeholders */
}

/* When the select has no value chosen, show gray text */
.ldvt-select:not(:valid) {
  color: var(--c-text-muted-2);
}

/* When user selects a country → switch to normal text color */
.ldvt-select:valid {
  color: var(--c-text-strong);
}