/* Prebuilt Tailwind-like CSS for immediate use.
   This file will be overwritten by Tailwind build output. */

:root{ --background:#ffffff; --foreground:#0f172a; --primary:#2563eb; --primary-foreground:#ffffff; --border:#e5e7eb; --radius:0.6rem; --c2c-radius: 12px; --font:'Montserrat',system-ui,sans-serif; }
.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)); --ring: var(--primary); }
.c2c-checkout, .c2c-admin{ color:var(--foreground); background:var(--background); font-family:var(--font); }
.c2c-checkout *, .c2c-admin * { font-family: inherit; }
/* Preserve Dashicons font for WordPress icons */
.c2c-checkout .dashicons, .c2c-admin .dashicons { font-family: Dashicons !important; }
/* Preserve Font Awesome fonts for method icons in admin */
.c2c-admin .fa-solid,
.c2c-checkout .fa-solid {
  font-family: var(--fa-style-family, "Font Awesome 7 Free") !important;
  font-weight: var(--fa-style, 900) !important;
}
.c2c-admin .fa-regular,
.c2c-checkout .fa-regular {
  font-family: var(--fa-style-family, "Font Awesome 7 Free") !important;
  font-weight: var(--fa-style, 400) !important;
}
.c2c-admin .fa-brands,
.c2c-checkout .fa-brands {
  font-family: var(--fa-style-family, "Font Awesome 7 Brands") !important;
  font-weight: var(--fa-style, 400) !important;
}

.button, .c2c-upload-change { font-family: var(--font); }
.button{ display:inline-flex; align-items:center; justify-content:center; height:2.25rem; padding:0 0.9rem; border-radius: var(--c2c-radius, 12px); 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.95); }
.button:focus{ outline:none; box-shadow:0 0 0 2px var(--primary); }
.button.button-primary{ background:var(--primary); color:var(--primary-foreground); border-color:var(--primary); }
.button.button-danger{ background:#ef4444; color:#ffffff; border-color:#ef4444; }

.input{ height:2.25rem; padding:0.5rem 0.75rem; border-radius: var(--c2c-radius, 12px); border:1px solid var(--border); background:#fff; color:var(--foreground); box-shadow:inset 0 1px 0 rgba(0,0,0,0.02); }
.textarea{ min-height:5.5rem; padding:0.75rem; border-radius: var(--c2c-radius, 12px); border:1px solid var(--border); background:#fff; color:var(--foreground); box-shadow:inset 0 1px 0 rgba(0,0,0,0.02); }
.c2c-fields input{ width:100%; max-width:420px; }

.card{ border:1px solid var(--border); border-radius: var(--c2c-radius, 12px); background:#fff; box-shadow:0 1px 2px rgba(16,24,40,0.04); }
.card:hover{ transform:translateY(-1px); box-shadow:0 6px 12px rgba(16,24,40,0.06); }
.c2c-step{ border:1px solid var(--border); border-radius: var(--c2c-radius, 12px); background:#fff; box-shadow:0 1px 2px rgba(16,24,40,0.04); }
.c2c-plan, .c2c-method{ border:1px solid var(--border); border-radius: var(--c2c-radius, 12px); background:#fff; box-shadow:0 1px 2px rgba(16,24,40,0.04); }
.c2c-plan.featured{ outline:2px solid var(--primary); }
.c2c-method.active{ background:var(--primary); color:var(--primary-foreground); border-color:var(--primary); }

.chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:#64748b; }
.chip-active{ color:var(--primary); border-color:var(--primary); }
.progress{ height:6px; background:#f1f5f9; border-radius:999px; overflow:hidden; }
.progress > span{ display:block; height:100%; background:var(--primary); }

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

/* Ensure payment form fields use the selected accent on focus */
.c2c-payment-form input:focus,
.c2c-payment-form textarea:focus{
  outline: none;
  border-color: var(--primary) !important; /* maps to --c2c-accent */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 24%, transparent) !important;
}

/* Baseline (unfocused) state: keep neutral border regardless of site theme */
.c2c-checkout .c2c-payment-form input,
.c2c-checkout .c2c-payment-form textarea{
  border-color: var(--border) !important;
}
.c2c-checkout .c2c-payment-form input:hover,
.c2c-checkout .c2c-payment-form textarea:hover{
  border-color: var(--border) !important;
}

/* Target fields by ID to override any theme-level styles that persist */
.c2c-payment-form [id^="c2c_payer_number_"]:focus,
.c2c-payment-form [id^="c2c_note_"]:focus{
  outline: none;
  border-color: var(--c2c-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c2c-accent) 24%, transparent) !important;
}

/* Neutralize external theme containers: remove label border/shadow so input accent wins */
.c2c-checkout .c2c-payment-form label{
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  background: transparent !important;
}
.c2c-checkout .c2c-payment-form label:focus-within{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.c2c-overlay{ backdrop-filter: blur(1px); }
.wrap.c2c-admin .submit{ display:flex; justify-content:center; }
.c2c-admin .card{ border:1px solid var(--border); border-radius: var(--radius); padding:16px; background:#fff; }