/* clovi-demo.css — CloviTek landing-page demo widget styles
 * Theming: override --clovi-brand (and optionally other vars) per platform
 * via inline style on the mount element, or :root in a product stylesheet.
 */

/* ─── Custom Properties ─────────────────────────────────────────── */
:root {
  --clovi-brand:   #6366f1;             /* default indigo — overridden per platform */
  --clovi-brand-dk: #4f46e5;            /* darker shade for gradients */
  --clovi-bg:      #0f0f17;
  --clovi-surface: #1a1a2e;
  --clovi-border:  rgba(255, 255, 255, 0.10);
  --clovi-text:    #f8fafc;
  --clovi-muted:   #94a3b8;
  --clovi-radius:  12px;
  --clovi-shadow:  0 4px 24px rgba(0, 0, 0, 0.45);
}

/* ─── Wrapper ────────────────────────────────────────────────────── */
.clovi-demo {
  background:    var(--clovi-surface);
  border:        1px solid var(--clovi-border);
  border-radius: var(--clovi-radius);
  padding:       2rem;
  box-shadow:    var(--clovi-shadow);
  color:         var(--clovi-text);
  font-family:   system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:     0.95rem;
  line-height:   1.5;
  box-sizing:    border-box;
}

.clovi-demo *,
.clovi-demo *::before,
.clovi-demo *::after {
  box-sizing: inherit;
}

/* ─── Two-column grid ───────────────────────────────────────────── */
.clovi-demo-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   2rem;
  align-items:           start;
}

.clovi-col-form {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.clovi-col-result {
  display:        flex;
  flex-direction: column;
  min-height:     200px;
}

/* ─── Form groups ───────────────────────────────────────────────── */
.clovi-form-group {
  display:        flex;
  flex-direction: column;
  margin-bottom:  1rem;
}

/* ─── Labels ────────────────────────────────────────────────────── */
.clovi-label {
  display:        block;
  margin-bottom:  0.35rem;
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--clovi-muted);
}

/* ─── Inputs & Selects ──────────────────────────────────────────── */
.clovi-input,
.clovi-select {
  width:            100%;
  background:       var(--clovi-bg);
  border:           1px solid var(--clovi-border);
  border-radius:    8px;
  color:            var(--clovi-text);
  font-size:        0.9rem;
  padding:          0.55rem 0.8rem;
  outline:          none;
  transition:       border-color 0.18s, box-shadow 0.18s;
  -webkit-appearance: none;
  appearance:       none;
}

.clovi-input::placeholder {
  color: var(--clovi-muted);
  opacity: 0.65;
}

.clovi-input:focus,
.clovi-select:focus {
  border-color: var(--clovi-brand);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--clovi-brand) 25%, transparent);
}

/* Fallback focus ring for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .clovi-input:focus,
  .clovi-select:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.28);
  }
}

.clovi-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 0.75rem center;
  padding-right:       2rem;
  cursor:              pointer;
}

/* ─── Submit / CTA button ───────────────────────────────────────── */
.clovi-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.4rem;
  background:      linear-gradient(135deg, var(--clovi-brand) 0%, var(--clovi-brand-dk, var(--clovi-brand)) 100%);
  color:           #fff;
  font-size:       0.9rem;
  font-weight:     700;
  padding:         0.65rem 1.4rem;
  border:          none;
  border-radius:   8px;
  cursor:          pointer;
  text-decoration: none;
  transition:      filter 0.18s, transform 0.1s;
  margin-top:      0.5rem;
  white-space:     nowrap;
}

.clovi-btn:hover:not(:disabled) {
  filter:    brightness(1.12);
  transform: translateY(-1px);
}

.clovi-btn:active:not(:disabled) {
  transform: translateY(0);
}

.clovi-btn:disabled,
.clovi-btn[disabled] {
  opacity: 0.6;
  cursor:  not-allowed;
  filter:  none;
  transform: none;
}

/* ─── Progress area ─────────────────────────────────────────────── */
.clovi-progress {
  margin-top:     1.25rem;
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
}

.clovi-progress[hidden] {
  display: none;
}

.clovi-step {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  color:       var(--clovi-muted);
  font-size:   0.85rem;
  transition:  color 0.2s;
}

.clovi-step[aria-hidden="false"] {
  color: var(--clovi-text);
}

.clovi-step-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           1.1rem;
  height:          1.1rem;
  flex-shrink:     0;
  font-size:       0.8rem;
}

/* Spinner */
.clovi-spinner {
  border:        2px solid var(--clovi-border);
  border-top:    2px solid var(--clovi-brand);
  border-radius: 50%;
  animation:     clovi-spin 0.7s linear infinite;
}

/* Checkmark (replaces spinner when step is done) */
.clovi-check {
  color:       #34d399;
  font-weight: 700;
  animation:   none;
  border:      none;
}

@keyframes clovi-spin {
  to { transform: rotate(360deg); }
}

/* ─── Result area ───────────────────────────────────────────────── */
.clovi-result {
  position: relative;
}

.clovi-result[hidden] {
  display: none;
}

.clovi-result-inner {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  position:       relative;
}

.clovi-result-img {
  width:         100%;
  max-width:     100%;
  border-radius: var(--clovi-radius);
  box-shadow:    0 8px 32px rgba(0, 0, 0, 0.5);
  display:       block;
}

.clovi-result-img[hidden] {
  display: none;
}

/* ─── Sample badge ──────────────────────────────────────────────── */
.clovi-sample-badge {
  position:      absolute;
  top:           0.6rem;
  right:         0.6rem;
  background:    #F59E0B;
  color:         #1a1000;
  font-size:     0.65rem;
  font-weight:   800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding:       0.2rem 0.55rem;
  border-radius: 999px;
  pointer-events: none;
  z-index:       10;
  box-shadow:    0 2px 6px rgba(0,0,0,0.3);
}

/* ─── Caption ───────────────────────────────────────────────────── */
.clovi-caption {
  font-size:    0.82rem;
  font-style:   italic;
  color:        var(--clovi-muted);
  margin:       0;
  line-height:  1.45;
}

/* ─── Live content (text response) ─────────────────────────────── */
.clovi-live-content {
  background:    var(--clovi-bg);
  border:        1px solid var(--clovi-border);
  border-radius: 8px;
  padding:       1rem;
  font-size:     0.88rem;
  color:         var(--clovi-text);
  white-space:   pre-wrap;
  word-break:    break-word;
}

.clovi-live-content[hidden] {
  display: none;
}

/* ─── CTA button (result) ───────────────────────────────────────── */
.clovi-cta {
  align-self:  flex-start;
  margin-top:  0.25rem;
}

/* ─── Reset link ────────────────────────────────────────────────── */
.clovi-reset {
  background:      none;
  border:          none;
  color:           var(--clovi-muted);
  font-size:       0.8rem;
  cursor:          pointer;
  padding:         0;
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self:      flex-start;
  transition:      color 0.15s;
}

.clovi-reset:hover {
  color: var(--clovi-text);
}

.clovi-reset:focus-visible {
  outline:        2px solid var(--clovi-brand);
  outline-offset: 3px;
  border-radius:  3px;
}

/* ─── Focus-visible polish ──────────────────────────────────────── */
.clovi-btn:focus-visible,
.clovi-input:focus-visible,
.clovi-select:focus-visible {
  outline:        2px solid var(--clovi-brand);
  outline-offset: 3px;
}

/* ─── Responsive — single column on mobile ──────────────────────── */
@media (max-width: 768px) {
  .clovi-demo {
    padding: 1.25rem;
  }

  .clovi-demo-grid {
    grid-template-columns: 1fr;
    gap:                   1.5rem;
  }

  .clovi-col-result {
    order: -1; /* Show result above form on mobile after generation */
  }

  .clovi-sample-badge {
    font-size: 0.6rem;
  }
}