/* ShadCN-inspired theme for C2C
   Notes:
   - ShadCN UI relies on Tailwind + Radix in React. In WordPress/PHP, we mimic tokens and key component styles.
   - Tokens follow ShadCN naming; we bridge existing c2c variables to these tokens to keep settings working.
*/

/* Default tokens (light) */
:root{
  --background:#ffffff;
  --foreground:#0f172a;
  --muted:#f1f5f9;
  --muted-foreground:#64748b;
  --card:#ffffff;
  --card-foreground:#0f172a;
  --popover:#ffffff;
  --popover-foreground:#0f172a;
  --primary:#007fff;
  --primary-foreground:#ffffff;
  --secondary:#0ea5e9;
  --secondary-foreground:#ffffff;
  --accent:#6366f1;
  --accent-foreground:#ffffff;
  --destructive:#ef4444;
  --destructive-foreground:#ffffff;
  --border:#e5e7eb;
  --input:#e5e7eb;
  --ring: var(--primary);
  --radius:0.6rem;
  --font: 'Alexandria', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif;
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.04);
  --shadow-sm: 0 2px 6px rgba(16,24,40,0.06);
  --shadow-md: 0 6px 12px rgba(16,24,40,0.08);
}

/* Bridge: map c2c variables to ShadCN tokens when c2c container exists */
.c2c-checkout, .c2c-admin{
  --background: var(--c2c-bg, #ffffff);
  --foreground: var(--c2c-text, #0f172a);
  --primary: var(--c2c-accent, #2563eb);
  --primary-foreground: var(--c2c-button-text, #ffffff);
  --border: var(--c2c-border, #e5e7eb);
  --font: var(--c2c-font, var(--font));
}

/* Base */
.c2c-checkout, .c2c-admin{
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font);
}

/* Modern typography */
.c2c-checkout .c2c-title{
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  letter-spacing: -0.01em;
}
.c2c-section-title{
  font-weight: 700;
  font-size: 1rem;
  color: var(--foreground);
}

/* Layout container polish */
.c2c-layout{
  max-width: 1000px;
  margin: 0 auto;
  gap: 20px;
}

/* Button: ShadCN style */
.button{
  display:inline-flex; align-items:center; justify-content:center;
  height:2.5rem; padding:0 1rem;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background:#f8fafc; color:#111827;
  font-size:0.875rem; font-weight:600;
  transition: all 160ms ease;
}
.button:hover{ filter: brightness(0.98); }
.button:focus{ outline:none; box-shadow: 0 0 0 2px var(--ring); }
.button.button-primary{
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
.button.button-primary:hover{ filter:brightness(1.05); }
.button.button-danger{ background: var(--destructive); color: var(--destructive-foreground); border-color: var(--destructive); }

/* Button variants for richer UI */
.button-outline{
  background: transparent;
  color: var(--foreground);
  border-color: var(--border);
}
.button-soft{
  background: var(--muted);
  color: var(--foreground);
  border-color: var(--muted);
}
.button-icon{ gap: 8px; }

/* Inputs */
.c2c-fields input,
.c2c-payment-form input,
.c2c-payment-form textarea{
  height:2.3rem; padding:0.5rem 0.75rem; border-radius: var(--c2c-radius, 12px);
  border:1px solid var(--input); background:#fff; color: var(--foreground);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.02);
}
.c2c-payment-form textarea{ height:auto; min-height: 5.5rem; }
.c2c-fields label, .c2c-payment-form label{ font-weight:600; color: var(--foreground); }

.c2c-fields input:focus,
.c2c-payment-form input:focus,
.c2c-payment-form textarea:focus{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
  border-color: var(--ring);
}
.c2c-field-help{ color: var(--muted-foreground); font-size: 0.85rem; }
.c2c-error{ color: var(--destructive); font-weight: 600; }

/* Cards */
.c2c-step{ border:1px solid var(--border); border-radius: var(--c2c-radius, 12px); background: var(--card); box-shadow: var(--shadow-xs); }
.c2c-plan, .c2c-method{ border:1px solid var(--border); border-radius: var(--c2c-radius, 12px); background: var(--card); box-shadow: var(--shadow-xs); }
.c2c-plan:hover, .c2c-method:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); }
.c2c-plan.featured{ outline: 2px solid var(--primary); }
.c2c-method.active{ background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

.c2c-card-head{ display:flex; align-items:center; justify-content:space-between; }
.c2c-card-subtitle{ color: var(--muted-foreground); font-size: 0.9rem; }

/* Progress chips */
.c2c-step-chip{ border:1px solid var(--border); border-radius: 999px; color:#64748b; background: #fff; padding: 6px 10px; }
.c2c-step-chip.active{ color: var(--primary); border-color: var(--primary); }
.c2c-progress-bar{ height:6px; background: var(--muted); border-radius: 999px; overflow: hidden; }
.c2c-progress-bar > span{ height:100%; background: var(--primary); box-shadow: inset 0 0 4px rgba(255,255,255,0.5); transition: width 220ms ease; }

/* Copy list */
.c2c-copy-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px dashed var(--border); border-radius: var(--c2c-radius, 12px); }
.c2c-copy-label{ font-weight:600; color: var(--foreground); }
.c2c-copy-btn{ height:2rem; padding:0 0.6rem; border-radius: var(--c2c-radius, 12px); border:1px solid var(--border); background:#f8fafc; }
.c2c-copy-btn.copied{ background:#dcfce7; color:#14532d; border-color:#86efac; }

/* Overlay */
.c2c-overlay{ backdrop-filter: blur(2px); }
.c2c-overlay .c2c-spinner{ box-shadow: 0 0 0 4px rgba(37,99,235,0.12); }

/* Admin wrappers */
.wrap.c2c-admin .submit{ display:flex; justify-content:center; }
.c2c-admin .card{ border:1px solid var(--border); border-radius: var(--radius); padding:16px; background: var(--card); }

/* Dark mode opt-in via wrapper */
.c2c-dark{
  --background:#0b1020;
  --foreground:#e5e7eb;
  --muted:#0f172a;
  --muted-foreground:#94a3b8;
  --card:#0f172a;
  --card-foreground:#e5e7eb;
  --popover:#0f172a;
  --popover-foreground:#e5e7eb;
  --primary:#4f46e5;
  --primary-foreground:#ffffff;
  --secondary:#22d3ee;
  --secondary-foreground:#0b1020;
  --accent:#8b5cf6;
  --accent-foreground:#ffffff;
  --destructive:#ef4444;
  --destructive-foreground:#ffffff;
  --border:#1f2937;
  --input:#1f2937;
  --ring: var(--primary);
}

/* Utility helpers for spacing */
.c2c-space-y-2 > * + *{ margin-top: 8px; }
.c2c-space-y-3 > * + *{ margin-top: 12px; }
.c2c-space-y-4 > * + *{ margin-top: 16px; }