/* ==========================================================
   Mon Giveaway — Frontend CSS v1.1
   Fix dark/light mode, participant counter, winner badge
   ========================================================== */

/* ---- Design tokens — light mode defaults ---- */
.mg-widget {
  --mg-radius:         12px;
  --mg-radius-sm:      8px;
  --mg-gap:            20px;
  --mg-accent:         #1a73e8;
  --mg-accent-hover:   #1558c0;
  --mg-accent-text:    #ffffff;
  --mg-success:        #1e8a4c;
  --mg-danger:         #d93025;

  /* Explicit light-mode surface & text */
  --mg-bg:             #ffffff;
  --mg-text:           #1f1f1f;
  --mg-text-muted:     #5f6368;
  --mg-border:         rgba(0,0,0,.12);
  --mg-shadow:         0 2px 16px rgba(0,0,0,.10);
  --mg-input-bg:       #f8f9fa;
  --mg-input-border:   #dadce0;
  --mg-input-text:     #1f1f1f;
  --mg-section-bg:     #f1f3f4;
  --mg-card-border:    #e0e0e0;

  --mg-badge-active-bg:    #e6f4ea;  --mg-badge-active-text:    #1e8a4c;
  --mg-badge-inactive-bg:  #f1f3f4;  --mg-badge-inactive-text:  #5f6368;
  --mg-badge-ended-bg:     #fce8e6;  --mg-badge-ended-text:     #c5221f;
  --mg-badge-pending-bg:   #fff8e1;  --mg-badge-pending-text:   #e37400;
  --mg-badge-validated-bg: #e6f4ea;  --mg-badge-validated-text: #1e8a4c;
  --mg-warning-bg:         #fff8e1;
  --mg-warning-border:     #f9a825;
  --mg-winner-bg:          #fffbe6;
  --mg-winner-border:      #f6c000;
}

/* ---- Dark mode overrides — scoped to widget ---- */
@media (prefers-color-scheme: dark) {
  .mg-widget {
    --mg-bg:           #1e1e1e;
    --mg-text:         #e8eaed;
    --mg-text-muted:   #9aa0a6;
    --mg-border:       rgba(255,255,255,.12);
    --mg-shadow:       0 2px 20px rgba(0,0,0,.50);
    --mg-input-bg:     rgba(255,255,255,.06);
    --mg-input-border: rgba(255,255,255,.22);
    --mg-input-text:   #e8eaed;
    --mg-section-bg:   rgba(255,255,255,.05);
    --mg-card-border:  rgba(255,255,255,.10);

    --mg-badge-inactive-bg:  rgba(255,255,255,.08);  --mg-badge-inactive-text: rgba(255,255,255,.6);
    --mg-badge-pending-bg:   rgba(249,168,37,.14);   --mg-badge-pending-text:  #fdd663;
    --mg-badge-validated-bg: rgba(30,138,76,.20);    --mg-badge-validated-text:#81c995;
    --mg-badge-ended-bg:     rgba(197,34,31,.18);    --mg-badge-ended-text:    #f28b82;
    --mg-badge-active-bg:    rgba(30,138,76,.20);    --mg-badge-active-text:   #81c995;
    --mg-warning-bg:         rgba(249,168,37,.12);
    --mg-winner-bg:          rgba(246,192,0,.12);
    --mg-winner-border:      rgba(246,192,0,.50);
  }
}

/* Manual dark mode class support (theme-driven) */
.dark-mode .mg-widget,
.dark .mg-widget,
[data-theme="dark"] .mg-widget,
body.dark-mode .mg-widget {
    --mg-bg:           #1e1e1e;
    --mg-text:         #e8eaed;
    --mg-text-muted:   #9aa0a6;
    --mg-border:       rgba(255,255,255,.12);
    --mg-shadow:       0 2px 20px rgba(0,0,0,.50);
    --mg-input-bg:     rgba(255,255,255,.06);
    --mg-input-border: rgba(255,255,255,.22);
    --mg-input-text:   #e8eaed;
    --mg-section-bg:   rgba(255,255,255,.05);
    --mg-card-border:  rgba(255,255,255,.10);
    --mg-badge-inactive-bg:  rgba(255,255,255,.08);  --mg-badge-inactive-text: rgba(255,255,255,.6);
    --mg-badge-pending-bg:   rgba(249,168,37,.14);   --mg-badge-pending-text:  #fdd663;
    --mg-badge-validated-bg: rgba(30,138,76,.20);    --mg-badge-validated-text:#81c995;
}

/* =============================================
   BASE WIDGET — always explicit, never inherit
   ============================================= */
.mg-widget {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  /* Force explicit colors — never inherit from theme */
  color: var(--mg-text) !important;
  background-color: var(--mg-bg) !important;
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius);
  box-shadow: var(--mg-shadow);
  max-width: 720px;
  margin: 2em auto;
  overflow: hidden;
}

/* All text inside widget inherits from widget, not theme */
.mg-widget * {
  box-sizing: border-box;
}

/* ---- Header ---- */
.mg-header {
  display: flex;
  align-items: flex-start;
  gap: var(--mg-gap);
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--mg-border);
}

.mg-prize-image { flex-shrink: 0; }

.mg-prize-image img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--mg-radius-sm);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  display: block;
}

.mg-header-text { flex: 1; min-width: 0; }

.mg-title {
  font-size: 1.35em;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.2;
  color: var(--mg-text) !important;
}

.mg-description {
  font-size: .9em;
  color: var(--mg-text-muted) !important;
  margin: 0 0 8px;
  line-height: 1.5;
}

.mg-end-date,
.mg-start-date {
  font-size: .82em;
  color: var(--mg-text-muted) !important;
  margin: 0;
}

.mg-clock { margin-right: 4px; }

/* Participant counter */
.mg-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82em;
  font-weight: 600;
  color: var(--mg-accent) !important;
  margin-top: 6px;
}

.mg-counter-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mg-accent);
  animation: mg-pulse 2s infinite;
}

@keyframes mg-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.8); }
}

.mg-countdown-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mg-warning-bg);
  border: 1px solid var(--mg-warning-border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: .82em;
  font-weight: 600;
  color: var(--mg-text) !important;
  margin-top: 4px;
}

/* ---- Steps ---- */
.mg-step { padding: 24px 28px; animation: mg-fade-in .25s ease; }

/* ---- Section titles ---- */
.mg-section { margin-bottom: 24px; }
.mg-section:last-child { margin-bottom: 0; }

.mg-section-title {
  font-size: .78em;
  font-weight: 700;
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mg-text-muted) !important;
}

/* ---- Form fields ---- */
.mg-field { margin-bottom: 14px; }

.mg-label {
  display: block;
  font-size: .875em;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--mg-text) !important;
}

.mg-required { color: #d93025; margin-left: 2px; }

.mg-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: .95em;
  font-family: inherit;
  color: var(--mg-input-text) !important;
  background: var(--mg-input-bg) !important;
  border: 1px solid var(--mg-input-border) !important;
  border-radius: var(--mg-radius-sm);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  box-shadow: none !important;
}

.mg-input:focus {
  border-color: var(--mg-accent) !important;
  box-shadow: 0 0 0 3px rgba(26,115,232,.18) !important;
}

.mg-input::placeholder {
  color: var(--mg-text-muted) !important;
  opacity: .7;
}

.mg-field-note {
  display: block;
  font-size: .78em;
  color: var(--mg-text-muted) !important;
  margin-top: 4px;
}

/* ---- Social actions grid ---- */
.mg-actions-grid { display: flex; flex-direction: column; gap: 14px; }

.mg-action-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--mg-card-border);
  border-radius: var(--mg-radius-sm);
  background: var(--mg-section-bg) !important;
}

@media (max-width: 520px) { .mg-action-card { grid-template-columns: 1fr; } }

.mg-step-badge {
  display: block;
  font-size: .78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mg-text-muted) !important;
  margin-bottom: 8px;
}

.mg-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: .88em;
  font-weight: 700;
  font-family: inherit;
  color: #fff !important;
  background: var(--btn-color, #333);
  border: none;
  border-radius: 6px;
  text-decoration: none !important;
  cursor: pointer;
  transition: filter .15s, transform .1s;
  white-space: nowrap;
}

.mg-action-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.mg-social-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ---- Checkbox ---- */
.mg-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9em;
  cursor: pointer;
  line-height: 1.4;
  color: var(--mg-text) !important;
}

.mg-checkbox-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--mg-accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ---- Submit button ---- */
.mg-submit-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  font-size: 1em;
  font-weight: 700;
  font-family: inherit;
  color: #fff !important;
  background: var(--mg-accent);
  border: none;
  border-radius: var(--mg-radius-sm);
  cursor: pointer;
  text-align: center;
  transition: background .15s, transform .1s, box-shadow .15s;
  margin-top: 18px;
}

.mg-submit-btn:hover {
  background: var(--mg-accent-hover);
  box-shadow: 0 4px 16px rgba(26,115,232,.30);
  transform: translateY(-1px);
}

.mg-submit-btn:active { transform: translateY(0); }
.mg-submit-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.mg-submit-note {
  font-size: .78em;
  color: var(--mg-text-muted) !important;
  margin-top: 12px;
  line-height: 1.5;
  border-top: 1px solid var(--mg-border);
  padding-top: 12px;
}

/* ---- Messages ---- */
.mg-messages, .mg-validate-messages {
  margin-bottom: 14px;
  font-size: .9em;
  border-radius: var(--mg-radius-sm);
}

.mg-messages:empty, .mg-validate-messages:empty { display: none; }

.mg-msg-error {
  padding: 10px 14px;
  background: rgba(217,48,37,.1);
  border: 1px solid rgba(217,48,37,.3);
  border-radius: var(--mg-radius-sm);
  color: #d93025 !important;
}

.mg-msg-info {
  padding: 10px 14px;
  background: rgba(26,115,232,.08);
  border: 1px solid rgba(26,115,232,.2);
  border-radius: var(--mg-radius-sm);
  color: var(--mg-accent) !important;
}

/* ---- Validation step ---- */
.mg-validate-icon { font-size: 3em; text-align: center; margin-bottom: 10px; }

.mg-validate-title,
.mg-success-title,
.mg-not-started-title {
  font-size: 1.2em;
  font-weight: 700;
  text-align: center;
  margin: 0 0 8px;
  color: var(--mg-text) !important;
}

.mg-validate-desc,
.mg-success-desc {
  text-align: center;
  color: var(--mg-text-muted) !important;
  font-size: .9em;
  margin: 0 0 20px;
}

.mg-code-field { max-width: 260px; margin: 0 auto 4px; }

.mg-back-btn {
  display: block;
  background: none;
  border: none;
  color: var(--mg-accent) !important;
  font-family: inherit;
  font-size: .88em;
  cursor: pointer;
  margin: 12px auto 0;
  text-align: center;
  text-decoration: underline;
  padding: 4px 0;
}

/* ---- Success step ---- */
.mg-success-icon {
  font-size: 4em;
  text-align: center;
  margin-bottom: 10px;
  animation: mg-pop .4s cubic-bezier(.175,.885,.32,1.275);
}

@keyframes mg-pop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* ---- Ended state ---- */
.mg-ended { padding: 32px 28px; text-align: center; }
.mg-ended-icon { font-size: 3em; display: block; margin-bottom: 10px; }
.mg-ended p { color: var(--mg-text-muted) !important; font-size: .95em; margin: 0; }

/* ---- Not-started state ---- */
.mg-not-started { padding: 32px 28px; text-align: center; }
.mg-not-started-icon { font-size: 3em; display: block; margin-bottom: 12px; }

.mg-not-started-title { color: var(--mg-text) !important; }

.mg-not-started p {
  color: var(--mg-text-muted) !important;
  font-size: .9em;
  max-width: 400px;
  margin: 0 auto 20px;
  line-height: 1.6;
}

/* ---- Countdown ---- */
.mg-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.mg-countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  background: var(--mg-section-bg);
  border: 1px solid var(--mg-card-border);
  border-radius: var(--mg-radius-sm);
  padding: 10px 8px 6px;
}

.mg-countdown-val {
  font-size: 1.6em;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--mg-accent) !important;
}

.mg-countdown-label {
  font-size: .7em;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mg-text-muted) !important;
  margin-top: 4px;
}

.mg-countdown-sep {
  font-size: 1.4em;
  font-weight: 800;
  color: var(--mg-text-muted) !important;
  margin-bottom: 16px;
}

/* ---- Transitions ---- */
@keyframes mg-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}