/* ==========================================================
   Mon Giveaway — Frontend CSS
   Inherits theme typography & colors. Dark-mode ready.
   ========================================================== */

/* ---- CSS Custom Properties (overridable by theme) ---- */
:root {
  --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;
  --mg-warning-bg:     #fff8e1;
  --mg-warning-border: #f9a825;
  /* Surfaces — transparent so theme bg shows through */
  --mg-surface:        transparent;
  --mg-card-border:    rgba(0,0,0,.12);
  --mg-card-shadow:    0 2px 16px rgba(0,0,0,.08);
  --mg-input-bg:       rgba(0,0,0,.04);
  --mg-input-border:   rgba(0,0,0,.20);
  --mg-input-focus:    var(--mg-accent);
  --mg-muted:          rgba(0,0,0,.50);
  --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;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --mg-card-border:   rgba(255,255,255,.12);
    --mg-card-shadow:   0 2px 20px rgba(0,0,0,.40);
    --mg-input-bg:      rgba(255,255,255,.06);
    --mg-input-border:  rgba(255,255,255,.22);
    --mg-muted:         rgba(255,255,255,.50);
    --mg-badge-inactive-bg:  rgba(255,255,255,.08);
    --mg-badge-inactive-text:rgba(255,255,255,.65);
    --mg-badge-pending-bg:   rgba(249,168,37,.12);
    --mg-badge-pending-text: #fdd663;
    --mg-badge-validated-bg: rgba(30,138,76,.18);
    --mg-badge-validated-text:#81c995;
    --mg-badge-ended-bg:     rgba(197,34,31,.15);
    --mg-badge-ended-text:   #f28b82;
    --mg-badge-active-bg:    rgba(30,138,76,.18);
    --mg-badge-active-text:  #81c995;
    --mg-warning-bg:         rgba(249,168,37,.10);
    --mg-warning-border:     #f9a825;
  }
}

/* Also support data-theme="dark" on body/html (manual dark mode) */
[data-theme="dark"],
.dark-mode,
body.dark {
  --mg-card-border:   rgba(255,255,255,.12);
  --mg-card-shadow:   0 2px 20px rgba(0,0,0,.40);
  --mg-input-bg:      rgba(255,255,255,.06);
  --mg-input-border:  rgba(255,255,255,.22);
  --mg-muted:         rgba(255,255,255,.50);
}

/* ---- Widget container ---- */
.mg-widget {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: var(--mg-surface);
  border: 1px solid var(--mg-card-border);
  border-radius: var(--mg-radius);
  box-shadow: var(--mg-card-shadow);
  max-width: 720px;
  margin: 2em auto;
  overflow: hidden;
}

/* ---- Header ---- */
.mg-header {
  display: flex;
  align-items: flex-start;
  gap: var(--mg-gap);
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--mg-card-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);
}

.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: inherit;
}

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

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

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

.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: inherit;
}

/* ---- Sections ---- */
.mg-step { padding: 24px 28px; }

.mg-section { margin-bottom: 24px; }
.mg-section:last-child { margin-bottom: 0; }

.mg-section-title {
  font-size: 1em;
  font-weight: 700;
  margin: 0 0 14px;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .8em;
  opacity: .7;
}

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

.mg-label {
  display: block;
  font-size: .875em;
  font-weight: 600;
  margin-bottom: 6px;
  color: inherit;
}

.mg-required {
  color: var(--mg-danger);
  margin-left: 2px;
}

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

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

.mg-input::placeholder { opacity: .5; }

.mg-field-note {
  display: block;
  font-size: .78em;
  color: var(--mg-muted);
  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-input-bg);
}

@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;
  opacity: .6;
  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;
}

.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: var(--mg-accent-text) !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-muted);
  margin-top: 12px;
  line-height: 1.5;
  border-top: 1px solid var(--mg-card-border);
  padding-top: 12px;
}

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

.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: var(--mg-danger);
}

.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);
}

/* ---- 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: inherit;
}

.mg-validate-desc,
.mg-success-desc {
  text-align: center;
  color: var(--mg-muted);
  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);
  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-muted);
  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 p {
  color: var(--mg-muted);
  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-input-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);
}

.mg-countdown-label {
  font-size: .7em;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .6;
  margin-top: 4px;
}

.mg-countdown-sep {
  font-size: 1.4em;
  font-weight: 800;
  opacity: .3;
  margin-bottom: 16px;
}

/* ---- Step transitions ---- */
.mg-step {
  animation: mg-fade-in .25s ease;
}

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