/* ═══════════════════════════════════════════════
   COD ORDER PRO — Form Builder CSS v5.24
   One adaptive design, fully CSS-variable driven
═══════════════════════════════════════════════ */
.copfb-wrap {
  --fb-bg: #ffffff; --fb-border-color: #e5e7eb; --fb-border-width: 1px;
  --fb-border-style: solid; --fb-shadow: none; --fb-radius: 16px;
  --fb-field-bg: #f9fafb; --fb-field-border: #d1d5db; --fb-field-radius: 10px;
  --fb-field-focus: #e63946; --fb-btn-bg: #e63946; --fb-btn-color: #ffffff;
  --fb-btn-radius: 12px; --fb-form-blur: 0px;
  --fb-var-selected-bg: #e63946; --fb-var-selected-txt: #ffffff;
  --fb-var-badge-bg: #16a34a; --fb-var-badge-txt: #ffffff;
  font-family: 'Cairo','Tajawal',sans-serif; direction: rtl; text-align: right;
  /* Reset any theme interference */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ════════════════════════════════════════════
   BASE FORM SHELL — fully CSS-var driven
   blur, border, shadow, radius, bg all live
════════════════════════════════════════════ */
.copfb-wrap-box {
  position: relative;
  background: var(--fb-bg) !important;
  backdrop-filter: blur(var(--fb-form-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--fb-form-blur)) saturate(160%);
  border: var(--fb-border-width) var(--fb-border-style) var(--fb-border-color) !important;
  border-radius: var(--fb-radius) !important;
  box-shadow: var(--fb-shadow) !important;
  outline: none !important;
  padding: 20px;
  overflow: hidden;
}

/* Glass blob decoration (shows when blur > 0) */
.copfb-wrap-box::before {
  content: '';
  position: absolute; width: 200px; height: 200px; border-radius: 50%;
  background: color-mix(in srgb, var(--fb-btn-bg) 16%, transparent);
  filter: blur(50px); top: -60px; right: -60px; pointer-events: none;
  opacity: max(0, calc(var(--fb-form-blur) / 20));
}
.copfb-wrap-box::after {
  content: '';
  position: absolute; width: 140px; height: 140px; border-radius: 50%;
  background: color-mix(in srgb, var(--fb-btn-bg) 10%, transparent);
  filter: blur(40px); bottom: -50px; left: -40px; pointer-events: none;
  opacity: max(0, calc(var(--fb-form-blur) / 20));
}

/* ════ HEADING BLOCK (below variations) ════ */
.copfb-heading-block { padding: 4px 0 12px; }
.copfb-heading-title { font-size: 1.05rem; font-weight: 900; color: #111827; margin: 0 0 4px; letter-spacing: -.01em; line-height: 1.3; }
.copfb-heading-sub   { font-size: .83rem; color: #6b7280; margin: 0; }

/* ════ HEADER ════ */
.copfb-header { margin-bottom: 16px; }
.copfb-header h3 { font-size:.95rem;font-weight:800;color:#111827;margin:0 0 4px;letter-spacing:-.01em; }
.copfb-header p  { font-size:.82rem;color:#6b7280;margin:0; }

/* ════ BOLD HEADER (for backward compat) ════ */
.copfb-form-body { padding: 0; }
.copfb-bold-header { padding: 16px 20px; background: var(--fb-btn-bg); }
.copfb-bold-header h3 { font-size:1rem;font-weight:900;color:#fff;margin:0 0 3px; }
.copfb-bold-header p  { font-size:.81rem;color:rgba(255,255,255,0.85);margin:0; }

/* ════ ERROR / OOS ════ */
.copfb-error { background:#fef2f2;border:1px solid #fca5a5;color:#991b1b;border-radius:8px;padding:10px 14px;font-size:.85rem;margin-bottom:12px; }
.copfb-oos   { background:#fef2f2;border:1px solid #fca5a5;color:#991b1b;border-radius:8px;padding:12px 16px;font-size:.9rem; }

/* ════ FIELDS ════ */
.copfb-field-group { margin-bottom:12px; }
.copfb-label { display:block;font-size:.76rem;font-weight:700;color:#6b7280;margin-bottom:5px; }
.copfb-req { color:#e63946;margin-right:2px; }
.copfb-input {
  display:block;width:100%;padding:10px 13px;
  background:var(--fb-field-bg);
  border:1.5px solid var(--fb-field-border);
  border-radius:var(--fb-field-radius);
  font-size:.9rem;color:#111827;font-family:'Cairo','Tajawal',sans-serif;
  direction:rtl;text-align:right;transition:border-color .18s, box-shadow .18s;
  outline:none;box-sizing:border-box;
}
.copfb-input:focus {
  border-color:var(--fb-field-focus);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--fb-field-focus) 15%, transparent);
}

/* ════ BUNDLE CARDS ════ */
.copfb-variations { margin-bottom:14px; }
.copfb-var-group  { margin-bottom:12px; }
.copfb-var-group-title { font-size:.74rem;font-weight:800;color:#9ca3af;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px; }
.copfb-bundle-list { display:flex;flex-direction:column;gap:8px; }
.copfb-bundle-item {
  display:flex;flex-direction:column;
  border:2px solid var(--fb-field-border);border-radius:var(--fb-field-radius);
  background:var(--fb-field-bg);cursor:pointer;overflow:visible;
  transition:all .2s cubic-bezier(.25,.8,.25,1);position:relative;user-select:none;
}
.copfb-bundle-row { display:flex;align-items:center;gap:10px;padding:12px 14px;width:100%;box-sizing:border-box; }
.copfb-bundle-item:hover { border-color:var(--fb-var-selected-bg); }
.copfb-bundle-item.is-selected {
  border-color:var(--fb-var-selected-bg);background:var(--fb-var-selected-bg);
  box-shadow:0 4px 16px color-mix(in srgb, var(--fb-var-selected-bg) 35%, transparent);
  transform:translateY(-1px);
}
.copfb-bundle-item input[type=radio] { display:none; }
.copfb-bundle-dot { width:20px;height:20px;flex-shrink:0;border:2px solid var(--fb-field-border);border-radius:50%;background:#fff;transition:all .2s;position:relative; }
.copfb-bundle-item:hover .copfb-bundle-dot { border-color:var(--fb-var-selected-bg); }
.copfb-bundle-item.is-selected .copfb-bundle-dot { border-color:var(--fb-var-selected-txt);background:var(--fb-var-selected-txt); }
.copfb-bundle-item.is-selected .copfb-bundle-dot::after { content:'';position:absolute;width:7px;height:7px;border-radius:50%;background:var(--fb-var-selected-bg);top:50%;left:50%;transform:translate(-50%,-50%); }
.copfb-bundle-img { flex-shrink:0;width:48px;height:48px;border-radius:8px;overflow:hidden;background:#f3f4f6;display:flex;align-items:center;justify-content:center;border:2px solid #e5e7eb; }
.copfb-bundle-img img { width:100%;height:100%;object-fit:cover;display:block; }
.copfb-bundle-item.has-img .copfb-bundle-dot { display:none; }
.copfb-bundle-info { flex:1;min-width:0; }
.copfb-bundle-label { display:block;font-size:.9rem;font-weight:700;color:#1f2937;transition:color .2s; }
.copfb-bundle-item.is-selected .copfb-bundle-label { color:var(--fb-var-selected-txt); }
.copfb-bundle-sub   { display:block;font-size:.74rem;color:#9ca3af;margin-top:2px;transition:color .2s; }
.copfb-bundle-item.is-selected .copfb-bundle-sub { color:color-mix(in srgb, var(--fb-var-selected-txt) 75%, transparent); }
.copfb-bundle-badge { font-size:.7rem;font-weight:800;padding:3px 10px;border-radius:4px;background:var(--fb-var-badge-bg);color:var(--fb-var-badge-txt);white-space:nowrap;flex-shrink:0;letter-spacing:.02em; }
.copfb-bundle-price { font-size:.9rem;font-weight:900;color:#1f2937;flex-shrink:0;transition:color .2s; }
.copfb-bundle-item.is-selected .copfb-bundle-price { color:var(--fb-var-selected-txt); }
.copfb-swatches { display:flex;flex-wrap:wrap;gap:7px;margin-top:5px; }
.copfb-swatch { padding:6px 14px;border:2px solid var(--fb-field-border);border-radius:var(--fb-field-radius);background:var(--fb-field-bg);color:#374151;font-size:.83rem;font-weight:600;cursor:pointer;transition:all .15s; }
.copfb-swatch.active { background:var(--fb-var-selected-bg);color:var(--fb-var-selected-txt);border-color:var(--fb-var-selected-bg); }
.copfb-var-label-display { background:color-mix(in srgb, var(--fb-var-selected-bg) 10%, #fff);border:1px solid color-mix(in srgb, var(--fb-var-selected-bg) 25%, transparent);border-radius:8px;padding:7px 12px;font-size:.82rem;font-weight:700;color:var(--fb-var-selected-bg);margin-bottom:10px; }

/* ════ QTY ════ */
.copfb-qty-group { margin-bottom:12px; }
.copfb-qty-ctrl  { display:inline-flex;align-items:center;border:2px solid var(--fb-field-border);border-radius:var(--fb-field-radius);overflow:hidden; }
.copfb-qty-btn { width:38px;height:38px;background:var(--fb-field-bg);color:#374151;font-size:1.15rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background .15s;cursor:pointer;border:none;font-family:'Cairo','Tajawal',sans-serif; }
.copfb-qty-btn:hover { background:var(--fb-field-border); }
.copfb-qty-num { min-width:42px;text-align:center;font-weight:800;font-size:.95rem;line-height:38px;padding:0 4px;color:#111827;border-inline:2px solid var(--fb-field-border); }

/* ════ SUMMARY ════ */
.copfb-summary { background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:12px 14px;margin-bottom:14px; }
.copfb-summary-title { font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#9ca3af;margin-bottom:8px; }
.copfb-summary-row { display:flex;justify-content:space-between;align-items:center;font-size:.84rem;color:#6b7280;padding:4px 0;border-bottom:1px dashed #e5e7eb; }
.copfb-summary-row:last-of-type { border-bottom:none; }
.copfb-summary-total { display:flex;justify-content:space-between;align-items:center;font-size:.95rem;font-weight:800;color:#111827;padding-top:8px;margin-top:4px;border-top:1.5px solid #e5e7eb; }
.copfb-free { color:#16a34a;font-weight:700; }
.copfb-fee-pending { color:#9ca3af; }

/* ════ BUTTON ════ */
.copfb-btn {
  display:block;width:100%;padding:14px 20px;background:var(--fb-btn-bg);color:var(--fb-btn-color);
  border:none;border-radius:var(--fb-btn-radius);font-size:.95rem;font-weight:800;
  font-family:'Cairo','Tajawal',sans-serif;cursor:pointer;text-align:center;
  box-shadow:0 4px 16px color-mix(in srgb, var(--fb-btn-bg) 40%, transparent);
  transition:filter .18s, transform .12s, box-shadow .18s;
  position:relative;overflow:hidden;margin-bottom:6px;letter-spacing:.01em;
}
.copfb-btn:hover  { filter:brightness(.93);transform:translateY(-1px); }
.copfb-btn:active { transform:translateY(0);filter:brightness(.88); }
@keyframes copfb-pulse { 0%,100%{box-shadow:0 4px 16px color-mix(in srgb,var(--fb-btn-bg) 40%,transparent);}50%{box-shadow:0 4px 28px color-mix(in srgb,var(--fb-btn-bg) 70%,transparent),0 0 0 8px color-mix(in srgb,var(--fb-btn-bg) 15%,transparent);} }
.copfb-btn-anim-pulse { animation:copfb-pulse 2.2s ease-in-out infinite; }
@keyframes copfb-bounce { 0%,100%{transform:translateY(0);}40%{transform:translateY(-6px);}70%{transform:translateY(-3px);} }
.copfb-btn-anim-bounce { animation:copfb-bounce 1.6s ease-in-out infinite; }
@keyframes copfb-shake { 0%,100%{transform:translateX(0);}10%,50%,90%{transform:translateX(-4px);}30%,70%{transform:translateX(4px);} }
.copfb-btn-anim-shake { animation:copfb-shake 2.5s ease-in-out infinite; }
.copfb-btn-anim-shake:hover { animation:none;transform:translateY(-1px); }
@keyframes copfb-sweep { 0%{background-position:200% center;}100%{background-position:-200% center;} }
.copfb-btn-anim-sweep { background:linear-gradient(90deg,var(--fb-btn-bg) 0%,color-mix(in srgb,var(--fb-btn-bg) 60%,#fff) 40%,var(--fb-btn-bg) 60%,color-mix(in srgb,var(--fb-btn-bg) 60%,#fff) 80%,var(--fb-btn-bg) 100%);background-size:300% 100%;animation:copfb-sweep 2.4s linear infinite; }
.copfb-btn-anim-none { animation:none; }
.copfb-btn-spinner { font-size:.88rem; }
.copfb-btn.loading .copfb-btn-label   { display:none; }
.copfb-btn.loading .copfb-btn-spinner { display:inline !important; }

/* ════ TRUST ════ */
.copfb-trust { display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:4px; }
.copfb-trust-item { font-size:.75rem;font-weight:700;color:#9ca3af; }
@media (max-width: 768px) {
  .copfb-btn { margin-bottom:2px; }
}

/* ════ SUCCESS ════ */
.copfb-success { text-align:center;padding:32px 20px; }
.copfb-success-icon  { font-size:3rem;margin-bottom:12px; }
.copfb-success-title { font-size:1.1rem;font-weight:900;color:#111827;margin-bottom:6px; }
.copfb-success-msg   { font-size:.88rem;color:#6b7280; }

/* ════ STICKY ════ */
.copfb-sticky { display:none;position:fixed;bottom:0;inset-inline:0;z-index:9999;padding:10px 16px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-top:1px solid #e5e7eb;box-shadow:0 -4px 20px rgba(0,0,0,.1); }
.copfb-sticky .copfb-btn { margin-bottom:0; }
@media (max-width:768px) { .copfb-sticky{display:block;} .copfb-wrap{padding-bottom:70px;} }

/* ════ MISC ════ */
.copfb-delivery-msg { background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:9px 14px;font-size:13px;font-weight:600;color:#166534;margin-bottom:12px;text-align:center; }
.copfb-scarcity { background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:9px 14px;font-size:13px;font-weight:700;color:#9a3412;margin-bottom:12px;text-align:center; }
.copfb-countdown { background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:9px 14px;font-size:13px;font-weight:600;color:#1e40af;margin-bottom:12px;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px; }
.copfb-cd-timer { font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;color:#1d4ed8; }
.copfb-input.copfb-invalid { border-color:#e63946 !important;box-shadow:0 0 0 3px rgba(230,57,70,.15) !important;animation:copfb-shake-field .35s ease-in-out; }
@keyframes copfb-shake-field { 0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);} }
.copfb-radio-list { display:flex;flex-direction:column;gap:8px; }
.copfb-radio-item { display:flex;align-items:center;gap:10px;padding:12px 14px;border:2px solid var(--fb-field-border);border-radius:var(--fb-field-radius);background:var(--fb-field-bg);cursor:pointer;transition:all .15s;user-select:none; }
.copfb-radio-item:hover { border-color:var(--fb-field-focus);background:#fff; }
.copfb-radio-item.checked { border-color:var(--fb-field-focus);background:#eff6ff; }
.copfb-radio-item input[type=radio] { display:none; }
.copfb-radio-check { width:18px;height:18px;border-radius:50%;border:2px solid #d1d5db;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s; }
.copfb-radio-item.checked .copfb-radio-check { border-color:var(--fb-field-focus);background:var(--fb-field-focus); }
.copfb-radio-item.checked .copfb-radio-check::after { content:'';width:7px;height:7px;border-radius:50%;background:#fff;display:block; }
.copfb-radio-label { flex:1;font-size:14px;font-weight:600;color:#111827; }
.copfb-radio-price { font-size:14px;font-weight:800;color:var(--fb-field-focus);margin-inline-start:auto; }

/* ════ LEGACY DESIGN CLASSES (no-op now, vars do everything) ════ */
.copfb-design-classic .copfb-btn { background:linear-gradient(135deg,var(--fb-btn-bg),color-mix(in srgb,var(--fb-btn-bg) 78%,#000)); }

.copfb-gift-strip { display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;margin-top:8px; }
.copfb-gift-img { flex-shrink:0;width:40px;height:40px;border-radius:6px;overflow:hidden;border:2px solid rgba(255,255,255,.5);background:rgba(255,255,255,.2); }
.copfb-gift-img img { width:100%;height:100%;object-fit:cover;display:block; }
.copfb-gift-text { flex:1;font-size:13px;font-weight:800;color:#fff; }
.copfb-gift-value { font-size:12px;color:rgba(255,255,255,.75);font-weight:600;white-space:nowrap; }

.copfb-gift-inline { display:flex;align-items:center;gap:10px;padding:8px 14px;width:calc(100% + 4px);margin:0 -2px -2px;border-radius:0 0 calc(var(--fb-field-radius, 10px) - 2px) calc(var(--fb-field-radius, 10px) - 2px); }
.copfb-gift-inline .copfb-gift-img { flex-shrink:0;width:36px;height:36px;border-radius:6px;overflow:hidden;border:2px solid rgba(255,255,255,.4);background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center; }
.copfb-gift-inline .copfb-gift-img img { width:100%;height:100%;object-fit:cover;display:block; }
.copfb-gift-inline .copfb-gift-text { flex:1;font-size:12px;font-weight:800;color:#fff; }
.copfb-gift-inline .copfb-gift-value { font-size:11px;color:rgba(255,255,255,.75);font-weight:600;white-space:nowrap; }