/* C2C Checkout Base Styles */
/* Provide safe defaults for CSS variables so UI does not break
   even if inline settings fail to inject. Inline settings will override these. */
.c2c-checkout{
  --c2c-text:#1f2937;
  --c2c-bg:#f8fafc;
  --c2c-header:#2a2a73;
  --c2c-accent:#007fff;
  --c2c-button-bg:#007fff;
  --c2c-button-text:#ffffff;
  --c2c-plan-bg:#ffffff;
  --c2c-plan-border:#e5e7eb;
  --c2c-plan-text:#111827;
  --c2c-method-bg:#ffffff;
  --c2c-method-active-bg:#007fff;
  --c2c-method-text:#111827;
}
.c2c-checkout { color: var(--c2c-text); background: var(--c2c-bg); }
.c2c-checkout .c2c-container { max-width: 1000px; margin: 0 auto; padding: 50px 0; }
.c2c-checkout .c2c-title { color: var(--c2c-header); font-weight: 700; letter-spacing: -0.01em; text-align:center; padding-top: 50px; }
.c2c-progress { margin: 8px auto 16px; max-width: 720px; }
.c2c-progress-steps { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; align-items:center; justify-content:center; padding:6px; border:1px solid #e6edf7; border-radius:999px; background:#f8fbff; }
.c2c-progress-steps .c2c-step-chip { position:relative; display:flex; align-items:center; justify-content:center; gap:10px; padding:10px 16px; width:100%; border:1px solid transparent; border-radius:5px !important; color:#4b5563; background:#f6f9ff; box-shadow: 0 1px 2px rgba(16,24,40,0.06); text-align:center; transition: transform 360ms ease, box-shadow 360ms ease, background-color 360ms ease, color 360ms ease; font-weight: 400 !important; }
.c2c-progress-steps .c2c-step-chip span:not(.c2c-step-icon), .c2c-progress-steps .c2c-step-chip .c2c-step-label { font-weight: 400 !important; }
.c2c-step-chip.active { color: var(--c2c-accent); border-color: var(--c2c-accent); }
.c2c-step-chip.active { background:#eaf3ff; color:#111827; box-shadow: inset 0 0 0 1px rgba(0,127,255,0.15), 0 1px 2px rgba(16,24,40,0.06); animation: c2c-active-pop 500ms ease-out both; font-weight: 700 !important; }
.c2c-step-chip.active span:not(.c2c-step-icon), .c2c-step-chip.active .c2c-step-label { font-weight: 700 !important; }
.c2c-step-chip.active .c2c-step-icon{ animation: c2c-active-ring 560ms ease-out both; }
.c2c-progress-bar { height:6px; background:#d7e4f6; border-radius:999px; overflow:hidden; margin-top:8px; }
.c2c-progress-bar > span { display:block; width:33%; height:100%; background: var(--c2c-accent); transition: width 220ms ease; }

/* Icon bubble inside step tabs */
.c2c-step-chip .c2c-step-icon{ width:28px; height:28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background: var(--c2c-accent); color: #ffffff; box-shadow: 0 1px 2px rgba(16,24,40,0.06); transition: background-color 360ms ease, box-shadow 360ms ease, color 360ms ease; }
.c2c-step-chip.active .c2c-step-icon{ background: var(--c2c-accent); color:#ffffff; box-shadow: 0 0 0 2px rgba(0,127,255,0.18) inset; }

/* Completed step chips: subtle highlight with a one-time pop */
.c2c-step-chip.completed{ border-color: var(--c2c-accent); background:#f3f8ff; box-shadow: inset 0 0 0 1px rgba(0,127,255,0.12), 0 1px 2px rgba(16,24,40,0.06); font-weight: 400 !important; }
.c2c-step-chip.completed span:not(.c2c-step-icon), .c2c-step-chip.completed .c2c-step-label { font-weight: 400 !important; }
/* Hover effect in colors for completed steps */
.c2c-step-chip.completed:hover{
  border-color: var(--c2c-accent);
  background: #eaf4ff;
  color: #0f172a;
  box-shadow: 0 6px 12px rgba(0,127,255,0.22), inset 0 0 0 1px rgba(0,127,255,0.20);
  transform: translateY(-1px);
}
.c2c-step-chip.completed:hover .c2c-step-icon{
  background: var(--c2c-accent);
  color:#fff;
  box-shadow: 0 0 0 2px rgba(0,127,255,0.24) inset;
}

@keyframes c2c-complete-pop{
  0%{ transform: scale(0.98); box-shadow: inset 0 0 0 0 rgba(0,127,255,0.00), 0 1px 2px rgba(16,24,40,0.06); }
  60%{ transform: scale(1.01); box-shadow: inset 0 0 0 2px rgba(0,127,255,0.20), 0 4px 10px rgba(16,24,40,0.10); }
  100%{ transform: scale(1); box-shadow: inset 0 0 0 1px rgba(0,127,255,0.12), 0 1px 2px rgba(16,24,40,0.06); }
}
@keyframes c2c-complete-ring{
  0%{ box-shadow: 0 0 0 0 rgba(0,127,255,0.00); }
  40%{ box-shadow: 0 0 0 6px rgba(0,127,255,0.18); }
  100%{ box-shadow: 0 0 0 2px rgba(0,127,255,0.18) inset; }
}

/* (Removed check overlay pop per updated spec) */

/* Active step cards: subtle pop on selection */
@keyframes c2c-active-pop{
  0%{ transform: scale(0.98); }
  50%{ transform: scale(1.02); }
  100%{ transform: scale(1); }
}
@keyframes c2c-active-ring{
  0%{ box-shadow: 0 0 0 0 rgba(0,127,255,0.00); }
  60%{ box-shadow: 0 0 0 8px rgba(0,127,255,0.16); }
  100%{ box-shadow: 0 0 0 2px rgba(0,127,255,0.18) inset; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .c2c-step-chip.completed,
  .c2c-step-chip.completed .c2c-step-icon{ animation: none !important; transition: border-color 200ms ease, background-color 200ms ease; }
  .c2c-step-chip.active,
  .c2c-step-chip.active .c2c-step-icon{ animation: none !important; }
  /* Blur removed; no overlay animation to disable */
}

.c2c-layout { display:grid; grid-template-columns: 1fr; gap:16px; max-width: 980px; margin: 0 auto; padding-bottom: 50px; }
.c2c-step { background:#fff; border:1px solid #e8eef6; border-radius: var(--c2c-radius,12px); padding:24px; box-shadow: 0 2px 8px rgba(16,24,40,0.06); display:none; }
.c2c-step.active{ display:block; }
.c2c-fields label { font-weight:600; color: var(--c2c-header); }
.c2c-fields { max-width: 720px; margin: 0 auto; }
.c2c-fields input { width:100%; max-width: 720px; margin: 6px 0 12px; }
.c2c-help { color:#6b7280; font-size: 0.85rem; margin-top: -6px; margin-bottom: 10px; display:block; max-width:720px; margin-left:auto; margin-right:auto; padding-left:14px; }

/* Step 1 form: match progress width, full-width inputs, 5px radius, no labels */
.c2c-step-1 h3{ max-width:720px; margin: 0 auto 12px; }
.c2c-step-2 h3{ max-width:720px; margin: 0 auto 12px; }
.c2c-step-3 h3{ max-width:720px; margin: 0 auto 12px; }
.c2c-step-3 .c2c-thanks{ max-width:720px; margin:0 auto; }
.c2c-step-1 .c2c-fields{ max-width:720px; margin:0 auto; }
.c2c-step-1 .c2c-fields label{ display:none; }
.c2c-step-1 .c2c-fields input{ width:100%; max-width:100%; border-radius: var(--c2c-radius,12px); background:#ffffff; border:1px solid #dbe5f3; padding:12px 14px; }
.c2c-step-1 .c2c-fields input::placeholder{ color:#94a3b8; }
.c2c-step-1 .c2c-fields input:focus{ outline:none; border-color: var(--c2c-accent); box-shadow: 0 0 0 3px rgba(0,127,255,0.12); background:#fff; }
.c2c-step-1 .c2c-help{ padding-left:0; }

.c2c-plans { display:grid; gap:14px; grid-template-columns: 1fr 1fr; }
.c2c-plans.c2c-plans-two{ grid-template-columns: 1fr 1fr; }
.c2c-plan { position:relative; border:1px solid var(--c2c-plan-border,#e5e7eb); background: var(--c2c-plan-bg,#fff); color: var(--c2c-plan-text,#111827); border-radius: var(--c2c-radius,12px); padding:14px; transition: transform 160ms ease, box-shadow 160ms ease; cursor:pointer; }
.c2c-plan:hover { transform: translateY(-1px); box-shadow: 0 6px 12px rgba(16,24,40,0.06); }
.c2c-plan.active { outline: 2px solid var(--c2c-accent); border-color: var(--c2c-accent); box-shadow: 0 16px 28px rgba(0,127,255,0.16), 0 6px 12px rgba(16,24,40,0.06); transform: translateY(-2px) scale(1.01); background: linear-gradient(0deg, #fafdff, #ffffff); }
.c2c-plan.active::after{ content:""; position:absolute; inset:-2px; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(0,127,255,0.35); pointer-events:none; }
.c2c-plan.active::before{ content:"\2714"; position:absolute; top:-16px; left:12px; width:32px; height:32px; border-radius:999px; display:flex; align-items:center; justify-content:center; background: var(--c2c-accent); color:#fff; font-size:18px; font-weight:800; box-shadow: 0 6px 12px rgba(0,127,255,0.26); border:2px solid #ffffff; }
.c2c-plan:not(.active){ filter: saturate(0.85) brightness(0.98); opacity:0.92; }
.c2c-plan.active .c2c-price-main{ color: var(--c2c-accent); }
.c2c-plan.active .c2c-plan-title{ font-weight:700; color: var(--c2c-header); }

/* Center all step titles */
.c2c-step h3{ text-align:center !important; }
.c2c-plan.featured { outline: 2px solid var(--c2c-accent); }
.c2c-card-head { display:flex; align-items:center; justify-content:space-between; }
.c2c-badge{ position:absolute; top:-10px; right:10px; background:var(--c2c-accent); color:#fff; font-size:12px; font-weight:700; padding:4px 8px; border-radius:999px; box-shadow: 0 2px 8px rgba(0,127,255,0.18); }
.c2c-price { display:flex; align-items:baseline; gap:8px; }
.c2c-price-main { font-size:22px; font-weight:700; }
.c2c-price-old { text-decoration: line-through; color:#9ca3af; }
.c2c-plan-save { color: var(--c2c-accent); font-weight:600; }
.c2c-benefits { margin:10px 0 0; padding-left:18px; }
.c2c-benefits li{ list-style:none; position:relative; padding-left:22px; margin:6px 0; }
.c2c-benefits li::before{ content:"\2713"; position:absolute; left:0; top:0; color: var(--c2c-accent); font-weight:700; font-size:16px; line-height:1; }

.c2c-methods { margin-top: 16px; }
.c2c-method-list { display:flex; flex-direction:column; gap:10px; }
.c2c-method-row-two { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.c2c-method { display:flex; align-items:center; justify-content:space-between; border:1px solid var(--c2c-plan-border,#e5e7eb); border-radius: var(--c2c-radius,12px); padding:12px 14px; background: var(--c2c-method-bg,#fff); color: var(--c2c-method-text,#111827); cursor:pointer; transition: transform 160ms ease, box-shadow 160ms ease; }
.c2c-method:hover { filter:brightness(1.02); }
.c2c-method.active { background: var(--c2c-method-active-bg,#2563eb); color: var(--c2c-button-text,#fff); border-color: var(--c2c-method-active-bg,#2563eb); }
.c2c-method .c2c-method-name { font-weight:600; }
.c2c-method-icons i{ font-size:24px; opacity:0.95; }

/* Method details and payment form spacing */
.c2c-method-details{ margin-top: 12px; }
.c2c-method-details .c2c-instructions{ background:#f6faff; border:1px solid #dbe5f3; border-left:4px solid var(--c2c-accent); border-radius: var(--c2c-radius,12px); padding:12px 14px; font-weight:600; font-size:16px; line-height:1.6; }
.c2c-method-details .c2c-instructions{ word-break: break-word; white-space: normal; hyphens:auto; }
.c2c-method-details .c2c-copy-list,
.c2c-method-details .c2c-payment-form,
.c2c-method-details .c2c-whatsapp-contact{ margin-top: 10px; }

/* Modern details rows: label | value centered | copy button */
.c2c-copy-list{ display:grid; gap:10px; }
.c2c-copy-item{ display:grid; grid-template-columns:280px 1fr 96px; column-gap:16px; align-items:center; padding:10px 12px; background:#fff; border:1px solid #e4ecf7; border-radius: var(--c2c-radius,12px); }
.c2c-copy-label{ font-weight:600; color:#1f2937; padding-inline:2px; }
.c2c-copy-value{ display:block; width:100%; padding:10px 12px; background:#f3f4f6; border:1px dashed #bcd2f0; border-radius: var(--c2c-radius,12px); color:#0f172a; font-weight:500; text-align:left; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.c2c-copy-btn{ display:inline-flex; align-items:center; justify-content:center; width:96px; height:46px; border:0; background:var(--c2c-accent); color:#fff; border-radius: var(--c2c-radius,12px); cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.18); transition:transform .16s ease, box-shadow .16s ease, filter .16s ease, background-color .16s ease; }
.c2c-copy-btn:hover{ transform:translateY(-1px) scale(1.02); box-shadow:0 8px 18px rgba(0,0,0,.22); filter:saturate(1.05); }
.c2c-copy-btn:active{ transform:translateY(0) scale(0.98); box-shadow:0 4px 10px rgba(0,0,0,.18); }
.c2c-copy-btn .c2c-icon{ filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.c2c-copy-btn .c2c-copied-label{ margin-left:6px; font-weight:600; font-size:13px; }
html[dir="rtl"] .c2c-copy-item{ direction:rtl; }

/* Payment form: modern inputs, labels hidden as placeholders */
.c2c-payment-form{ display:grid; gap:12px; }
.c2c-payment-form label{ display:block; }
.c2c-label-text{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.c2c-field{ display:block; width:100%; padding:12px 14px; border:1px solid #dbe5f3; border-radius: var(--c2c-radius,12px); background:#fff; font-size:15px; transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.c2c-payment-form input.c2c-field,
.c2c-payment-form textarea.c2c-field{ width:100%; border-radius: var(--c2c-radius,12px) !important; }
.c2c-method-details .c2c-payment-form .c2c-field{ box-sizing:border-box; }
.c2c-payment-form input[type="text"],
.c2c-payment-form textarea{ width:100%; border-radius: var(--c2c-radius,12px); box-sizing:border-box; }
.c2c-field:focus{ outline:none; border-color:var(--c2c-accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--c2c-accent) 16%, transparent); }
.c2c-file{ padding:10px; border-radius:5px; }

@media (max-width: 640px){
  .c2c-copy-item{ grid-template-columns:minmax(180px,auto) 1fr auto; }
}
.c2c-payment-form label{ display:block; font-weight:600; color: var(--c2c-header); margin: 8px 0 10px; }
.c2c-payment-form input,
.c2c-payment-form textarea{ width:100%; max-width: 100%; margin-top: 6px; }
/* Inputs, file control */
.c2c-fields input,
.c2c-payment-form input,
.c2c-payment-form textarea{ background:#f6faff; border:1px solid #dbe5f3; border-radius: var(--c2c-radius,12px); padding:12px 14px; }
.c2c-payment-form input[type="file"]{ background:#f8fbff; border:1px dashed var(--c2c-plan-border,#e5e7eb); border-radius: var(--c2c-radius,12px); padding:12px; }

/* Drag & drop uploader */
.c2c-upload{ position:relative; width:100%; max-width:100%; min-height:160px; padding:18px; background:#f8fbff; border:2px dashed var(--c2c-accent); border-radius: var(--c2c-radius,12px); transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.c2c-upload.is-drag{ background:#f0f7ff; border-color:var(--c2c-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--c2c-accent) 20%, transparent) inset; }
.c2c-upload-zone{ position:relative; display:flex; align-items:center; justify-content:center; min-height:124px; padding:0; background:transparent; border:0; border-radius:inherit; }
.c2c-upload-inner{ text-align:center; color:#1f2937; width:100%; }
.c2c-upload-icon{ font-size:32px; color:var(--c2c-accent); display:inline-block; margin-bottom:10px; }
.c2c-upload-text{ margin:0; font-weight:600; }
.c2c-upload-text .c2c-upload-choose{ background:none; border:0; color:var(--c2c-accent); text-decoration:underline; cursor:pointer; padding:0 2px; }
.c2c-upload-meta{ display:grid; grid-template-columns:1fr 1fr; justify-items:center; text-align:center; gap:10px; margin-top:12px; color:#6b7280; font-size:13px; }
.c2c-upload-preview{ display:flex; gap:14px; align-items:center; justify-content:space-between; animation: c2cfade .18s ease; }
.c2c-upload-preview img{ width:64px; height:64px; object-fit:cover; border-radius: var(--c2c-radius,12px); display:block; }
.c2c-upload-info{ flex:1; min-width:0; }
 .c2c-upload-name{ font-weight:700; color:#111827; font-family:'Alexandria', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Arabic', Arial, sans-serif; }
/* Truncate long filenames safely */
.c2c-upload-name{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c2c-upload-size{ color:#6b7280; font-size:13px; margin-top:4px; }
.c2c-upload-actions{ display:flex; gap:10px; align-items:center; margin-left:12px; }
 .c2c-upload-change{ border-radius: var(--c2c-radius,12px) !important; background:#111827 !important; color:#fff !important; border:1px solid #111827 !important; padding:8px 14px; font-weight:600; }
.c2c-upload-change:hover{ filter:brightness(1.05); }
.c2c-upload-remove{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius: var(--c2c-radius,12px); background:#ef4444; color:#fff; border:0; box-shadow:0 4px 10px rgba(239,68,68,.25); cursor:pointer; }
.c2c-upload-remove:hover{ filter:brightness(1.05); }
.c2c-upload-remove i{ font-size:16px; }
@keyframes c2cfade{ from{ opacity:0; transform:scale(.98);} to{ opacity:1; transform:scale(1);} }

/* Hide drop zone when a file is present, keep container dimensions/border */
.c2c-upload.has-file .c2c-upload-zone{ display:none; }

/* Hide preview until a file is selected */
.c2c-upload:not(.has-file) .c2c-upload-preview{ display:none; }

/* Add space between preview image and actions */
.c2c-upload .c2c-upload-preview{ gap:20px; }
.c2c-upload .c2c-upload-actions{ margin-left:24px; }

/* Preview layout: image/info left, actions right; bigger thumbnail */
.c2c-upload .c2c-upload-preview{ justify-content:space-between; align-items:center; min-height:124px; }
.c2c-upload .c2c-upload-preview img{ width:96px; height:96px; border-radius: var(--c2c-radius,12px); }
.c2c-upload .c2c-upload-info{ flex:1 1 auto; text-align:left; }

/* Copy list styling */
.c2c-copy-list{ background:#f4f6fa; border:1px solid var(--c2c-plan-border,#e5e7eb); border-radius: var(--c2c-radius,12px); padding:10px; box-shadow: 0 1px 2px rgba(16,24,40,0.04); }
.c2c-copy-item{ display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:12px; padding:10px 12px; }
.c2c-copy-label{ font-weight:600; color: var(--c2c-header); }
.c2c-copy-value{ color:#111827; }
.c2c-copy-value{ background:#f3f4f6; }
.c2c-dir-ltr{ direction:ltr; }
.c2c-copy-btn{ display:inline-flex; align-items:center; justify-content:center; width:96px; height:46px; border:0; background:#007fff; color:#fff; border-radius: var(--c2c-radius,12px); cursor:pointer; box-shadow:0 6px 14px rgba(0,127,255,.25); }
.c2c-copy-btn.copied{ background:#e8fff1; border-color:#10b981; color:#065f46; }
.c2c-icon{ display:inline-block; }
.c2c-copy-link-row{ padding:0 12px 10px; }
.c2c-link-btn{ display:flex; align-items:center; justify-content:center; width:100%; height:46px; border:0; background:#007fff; color:#fff; border-radius: var(--c2c-radius,12px); cursor:pointer; box-shadow:0 6px 14px rgba(0,127,255,.25); text-decoration:none; gap:8px; }
.c2c-copy-list .c2c-link-btn{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:46px !important; background:#007fff !important; color:#fff !important; border-radius: var(--c2c-radius,12px) !important; box-shadow:0 6px 14px rgba(0,127,255,.25) !important; text-decoration:none !important; gap:8px !important; padding:0 14px !important; }
.c2c-copy-link-row a{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:46px !important; background:#007fff !important; color:#fff !important; border-radius: var(--c2c-radius,12px) !important; box-shadow:0 6px 14px rgba(0,127,255,.25) !important; text-decoration:none !important; gap:8px !important; padding:0 14px !important; font-weight:600; }
.c2c-link-btn:hover{ filter:brightness(1.05); }

.c2c-step-actions { display:flex; gap: 10px; justify-content: flex-end; margin-top: 24px !important; }
/* Step 2 actions on opposite sides */
.c2c-step-2 .c2c-step-actions{ justify-content: space-between; }
.c2c-step-actions .button{ border-radius: var(--c2c-radius,12px); height:40px; padding:0 14px; }

/* Responsive layout: tablet & mobile */
@media (max-width: 1024px){
  .c2c-progress-steps{ gap:10px; }
  .c2c-copy-item{ grid-template-columns: auto 1fr auto; }
}
@media (max-width: 768px){
  /* Progress tabs stack */
  .c2c-progress-steps{ grid-template-columns: 1fr; border-radius: 16px; }
  .c2c-progress-steps .c2c-step-chip{ padding:10px 12px; }
  /* Plans single column */
  .c2c-plans{ grid-template-columns: 1fr; }
  /* Methods two-column grid becomes single column */
  .c2c-method-row-two{ grid-template-columns: 1fr; }
  /* Actions become stacked full-width */
  .c2c-step-actions{ flex-direction: column; align-items: stretch; gap:12px; }
  .c2c-step-actions .button{ width:100%; height:44px; }
  /* Uploader preview compact */
  .c2c-upload .c2c-upload-preview img{ width:80px; height:80px; }
  .c2c-upload .c2c-upload-actions{ margin-left:0; }
}
@media (max-width: 640px){
  .c2c-progress-steps .c2c-step-chip{ gap:8px; font-weight: 400 !important; }
  .c2c-progress-steps .c2c-step-chip span:not(.c2c-step-icon), .c2c-progress-steps .c2c-step-chip .c2c-step-label { font-weight: 400 !important; }
  .c2c-step-chip .c2c-step-icon{ width:24px; height:24px; }
  /* Softer, faster animation on mobile */
  .c2c-step-chip.completed{ animation-duration: 260ms; font-weight: 400 !important; }
  .c2c-step-chip.completed span:not(.c2c-step-icon), .c2c-step-chip.completed .c2c-step-label { font-weight: 400 !important; }
  .c2c-step-chip.completed .c2c-step-icon{ animation-duration: 300ms; }
  .c2c-step-chip.active{ animation-duration: 420ms; font-weight: 700 !important; }
  .c2c-step-chip.active span:not(.c2c-step-icon), .c2c-step-chip.active .c2c-step-label { font-weight: 700 !important; }
  .c2c-step-chip.active .c2c-step-icon{ animation-duration: 480ms; }
  /* No overlay duration needed */
  .c2c-price-main{ font-size:20px; }
  .c2c-copy-item{ grid-template-columns:minmax(160px,auto) 1fr auto; }
  .c2c-upload .c2c-upload-preview{ flex-wrap: wrap; }
  .c2c-upload .c2c-upload-preview img{ width:64px; height:64px; }
  .c2c-upload .c2c-upload-actions{ width:100%; justify-content:center; }
  /* Align step icons consistently: fixed icon column, text column */
  .c2c-progress-steps .c2c-step-chip{ display:grid; grid-template-columns: 28px 1fr; align-items:center; justify-content:initial; text-align:left; }
  .c2c-progress-steps .c2c-step-chip .c2c-step-icon{ justify-self:start; }
  /* RTL mobile: icon on left, text on right */
  .c2c-checkout[dir="rtl"] .c2c-progress-steps .c2c-step-chip{ display:flex !important; flex-direction:row !important; direction:ltr !important; justify-content:flex-start !important; }
  .c2c-checkout[dir="rtl"] .c2c-progress-steps .c2c-step-chip .c2c-step-icon{ order:1 !important; justify-self:auto !important; }
  .c2c-checkout[dir="rtl"] .c2c-progress-steps .c2c-step-chip .c2c-step-label{ order:2 !important; text-align:right !important; direction:rtl !important; flex:1 !important; }
  /* Mobile uploader: image at top, name under (ellipsis), actions centered */
  .c2c-upload .c2c-upload-preview{ display:flex; flex-direction:column; align-items:center; gap:12px; }
  .c2c-upload .c2c-upload-preview img{ width:128px; height:128px; }
  .c2c-upload .c2c-upload-name{ display:none; }
  .c2c-upload .c2c-upload-size{ text-align:center; }
  /* Meta info stacked: each line centered on its own row */
  .c2c-upload-meta{ display:grid; grid-template-columns: 1fr; justify-items:center; text-align:center; }
}

/* Inline error banner */
.c2c-errors{ display:none; margin:12px 0; padding:12px 14px; border:1px solid #ef4444; background:#fff5f5; color:#991b1b; border-radius: var(--c2c-radius,12px); }
.c2c-errors.show{ display:block; }
/* Field-level errors under inputs/uploader */
.c2c-field-error{ display:flex; align-items:flex-start; gap:8px; margin-top:10px; margin-bottom:12px; padding:10px 12px; background:#fef2f2; border:1px solid #fecaca; color:#991b1b; border-radius:10px; }
.c2c-field-error .c2c-error-icon{ color:#ef4444; line-height:1; }
.c2c-field-error .c2c-error-text{ display:flex; flex-direction:column; gap:2px; }
.c2c-field-error .c2c-error-main{ font-size:13px; font-weight:600; }
.c2c-field-error .c2c-error-hint{ font-size:12px; color:#b91c1c; }

.c2c-error-retry {
  margin-top: 10px;
  padding: 6px 12px;
  background: var(--primary, #2563eb);
  color: var(--primary-foreground, #ffffff);
  border: 1px solid var(--primary, #2563eb);
  border-radius: var(--c2c-radius, 12px);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease;
  font-family: var(--font);
}

.c2c-error-retry:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

.c2c-error-retry:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
}

.c2c-error-retry:active {
  transform: translateY(0);
}

/* WhatsApp buttons: center, bold, with icon, rounded */
.c2c-whatsapp-contact{ display:flex; justify-content:center !important; margin-top:20px !important; width:100%; }
.c2c-thanks p{ text-align:center; margin-top:20px; }
.c2c-whatsapp-button{ display:inline-flex; align-items:center; gap:8px; border-radius:10px; font-weight:700 !important; }
.c2c-whatsapp-button .fa-whatsapp{ font-size:16px; }

/* Center the Step 1 continue button with 5px radius */
.c2c-step-1 #c2c_to_step2{ display:block; margin:16px auto 0; border-radius:5px; padding:10px 16px; }

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

.c2c-rtl .c2c-benefits { padding-left: 0; padding-right: 18px; }
.c2c-rtl .c2c-benefits li{ padding-left: 0; padding-right:22px; }
.c2c-rtl .c2c-benefits li::before{ left:auto; right:0; }

@media (max-width: 768px){
  .c2c-plans { grid-template-columns: 1fr; }
  .c2c-method-row-two { grid-template-columns: 1fr; }
  .c2c-step { padding: 18px; }
  .c2c-price-main { font-size: 20px; }
  .c2c-copy-item{ grid-template-columns: 1fr; }
}

/* Overlay spinner for loading states */
.c2c-overlay{ position:fixed; inset:0; background: rgba(0,0,0,0.12); display:none; align-items:center; justify-content:center; z-index:9999; }
.c2c-spinner{ width:32px; height:32px; border:3px solid #e5e7eb; border-top-color: var(--c2c-accent); border-radius:50%; animation: c2cspin 0.8s linear infinite; }
@keyframes c2cspin{ to{ transform: rotate(360deg); } }

/* -- Overrides to ensure details grid and copy button match spec -- */
.c2c-method-details .c2c-copy-list .c2c-copy-item{ display:grid !important; grid-template-columns: 280px 1fr 96px !important; column-gap:16px !important; }
.c2c-method-details .c2c-copy-list .c2c-copy-btn{ width:96px !important; height:46px !important; background:var(--c2c-accent) !important; color:#fff !important; border:0 !important; border-radius: var(--c2c-radius,12px) !important; box-shadow:0 6px 14px rgba(0,0,0,.18) !important; }
.c2c-method-details .c2c-copy-list .c2c-copy-btn i{ font-size:18px; }
@media (max-width: 640px){
  /* Mobile: two-line details — 1st line (label | copy), 2nd line value full width */
  .c2c-method-details .c2c-copy-list .c2c-copy-item{ display:grid !important; grid-template-columns: 1fr auto !important; grid-template-rows:auto auto !important; grid-template-areas:'label copy' 'value value' !important; column-gap:12px !important; row-gap:10px !important; }
  .c2c-method-details .c2c-copy-list .c2c-copy-label{ grid-area: label; }
  .c2c-method-details .c2c-copy-list .c2c-copy-btn{ grid-area: copy; justify-self:end; width:auto !important; height:40px !important; padding:0 10px !important; }
  .c2c-method-details .c2c-copy-list .c2c-copy-value{ grid-area: value; overflow-wrap:anywhere; }
}
/* Ensure payer/note are full width with global radius */
.c2c-method-details .c2c-payment-form input.c2c-field,
.c2c-method-details .c2c-payment-form textarea.c2c-field{ width:100% !important; max-width:100% !important; border-radius: var(--c2c-radius,12px) !important; box-sizing:border-box; }
.c2c-method-details .c2c-payment-form input.c2c-field{ width:100% !important; max-width:100% !important; border-radius: var(--c2c-radius,12px) !important; box-sizing:border-box; }
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;600;700&display=swap');