@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
  --navy:    #0B1F3A;
  --blue:    #0c70b8;
  --blue-lt: #EBF3FF;
  --teal:    #0891B2;
  --green:   #059669;
  --green-lt:#ECFDF5;
  --amber:   #D97706;
  --amber-lt:#FFFBEB;
  --red:     #DC2626;
  --red-lt:  #FEF2F2;
  --gray-50: #F8FAFC;
  --gray-100:#F1F5F9;
  --gray-200:#E2E8F0;
  --gray-400:#94A3B8;
  --gray-600:#475569;
  --gray-800:#1E293B;
  --white:   #FFFFFF;
  --font:    'IBM Plex Sans Arabic', sans-serif;
  --mono:    'IBM Plex Mono', monospace;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.08);
  --transition: all .2s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.pcb-iframe-body {
  font-family: var(--font);
  background: var(--gray-50);
  color: var(--gray-800);
  direction: rtl;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Omantel Badge ─────────────────────────────────── */
.pcb-omantel-badge {
  background: linear-gradient(135deg, #0a1628, #1B3A6B, var(--blue));
  color: #fff;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  flex-direction: row;
  direction: rtl;
  gap: 10px;
}
[dir="ltr"] .pcb-omantel-badge {
  direction: ltr;
  flex-direction: row;
}
.pcb-badge-title {
  flex: 1;
  font-weight: 700;
  font-size: 13px;
}
.pcb-tier-pill, .pcb-color-pill {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-family: var(--mono);
}
/* زر اللغة — داخل الـ badge على اليسار */
#pcb-lang-toggle {
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.4);
  color: #fff;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  transition: var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: auto;
}
#pcb-lang-toggle:hover { background: rgba(255,255,255,.25); }
/* في المسار المباشر — يمين الـ header */
.pcb-header #pcb-lang-toggle {
  margin-right: 0;
  position: absolute;
  top: 24px;
  right: 0;
}
[dir="ltr"] .pcb-header #pcb-lang-toggle {
  right: auto;
  left: 0;
}

/* ── Container ─────────────────────────────────────── */
.pcb-container { max-width: 960px; margin: 0 auto; padding: 0 20px 48px; }
.pcb-iframe    { padding: 20px 16px 40px; }

/* ── Header ────────────────────────────────────────── */
.pcb-header {
  text-align: center;
  padding: 24px 0 20px;
  position: relative;
}
.pcb-header h2 {
  font-size: 26px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.5px;
  margin-bottom: 6px;
}
.pcb-subtitle { color: var(--gray-600); font-size: 14px; }
.pcb-header::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  border-radius: 2px;
  margin: 10px auto 0;
}

/* زر اللغة في المسار المباشر */
/* RTL (عربي): يمين — LTR (إنجليزي): يسار */
.pcb-header #pcb-lang-toggle {
  position: absolute;
  top: 24px;
  right: 0;
  background: transparent;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 5px;
}
.pcb-header #pcb-lang-toggle:hover { background: var(--blue-lt); }

/* LTR mode (English): switch to left */
[dir="ltr"] .pcb-header #pcb-lang-toggle {
  right: auto;
  left: 0;
}

/* ── Progress Bar ──────────────────────────────────── */
.pcb-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  background: var(--white);
  padding: 12px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pcb-progress::-webkit-scrollbar { display: none; }

.pcb-step-indicator {
  flex: 1;
  min-width: 72px;
  text-align: center;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  cursor: default;
  flex-shrink: 0;
  position: relative;
}
.pcb-step-indicator.active {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  box-shadow: 0 4px 12px rgba(26,86,219,.3);
}
.pcb-step-indicator.done {
  background: var(--green-lt);
  border: 1px solid #A7F3D0;
  cursor: pointer;
}
.pcb-step-indicator.done:hover { background: #d1fae5; }

.step-num {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 3px;
  color: var(--gray-400);
  font-family: var(--mono);
}
.pcb-step-indicator.active .step-num { color: var(--white); }
.pcb-step-indicator.done .step-num   { color: var(--green); }

.step-label {
  display: block;
  font-size: 10px;
  color: var(--gray-400);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 72px;
  line-height: 1.3;
}
.pcb-step-indicator.active .step-label { color: rgba(255,255,255,.9); }
.pcb-step-indicator.done .step-label   { color: var(--green); }

/* ── Mini Tracker ──────────────────────────────────── */
.pcb-mini-tracker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  box-shadow: var(--shadow-sm);
}
.pcb-mini-parts { color: var(--gray-600); letter-spacing: 2px; font-size: 15px; }
.pcb-mini-total { color: var(--navy); font-weight: 600; }
.pcb-mini-total strong { color: var(--blue); font-family: var(--mono); font-size: 15px; }
.pcb-mini-currency { color: var(--gray-400); font-size: 12px; }

/* ── Step Panel ────────────────────────────────────── */
.pcb-step-panel {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.pcb-step-panel h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-100);
}

/* ── Compat Alert ──────────────────────────────────── */
.pcb-compat-alert {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--red-lt);
  border: 1px solid #FECACA;
  color: var(--red);
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.5;
  font-weight: 500;
}
.pcb-compat-alert.ok {
  background: var(--green-lt);
  border-color: #A7F3D0;
  color: var(--green);
}
#pcb-psu-note {
  font-size: 12px;
  color: var(--amber);
  background: var(--amber-lt);
  padding: 7px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
}

/* ── Products Grid ─────────────────────────────────── */
.pcb-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

/* ── Product Card ──────────────────────────────────── */
.pcb-product-card {
  border: 1.5px solid var(--gray-200);
  border-radius: 14px;
  padding: 16px 12px 14px;
  cursor: pointer;
  transition: var(--transition);
  background: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pcb-product-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  transform: scaleX(0);
  transition: transform .25s ease;
  transform-origin: right;
  border-radius: 3px 3px 0 0;
}
.pcb-product-card:hover {
  border-color: var(--blue);
  box-shadow: 0 8px 28px rgba(26,86,219,.12);
  transform: translateY(-3px);
}
.pcb-product-card:hover::before { transform: scaleX(1); transform-origin: left; }
.pcb-product-card.selected {
  border-color: var(--blue);
  border-width: 2px;
  background: linear-gradient(160deg, #F0F6FF 0%, var(--blue-lt) 100%);
  box-shadow: 0 0 0 3px rgba(26,86,219,.1), 0 6px 24px rgba(26,86,219,.15);
}
.pcb-product-card.selected::before { transform: scaleX(1); }

/* بطاقة مُختارة + مُوصى بها معًا: كل التلوين ذهبي متّسق، لا تصادم أزرق/ذهبي */
.pcb-product-card.selected.pcb-recommended {
  background: linear-gradient(160deg, #FFFBEB 0%, #FEF3C7 100%) !important;
  box-shadow: 0 0 0 3px rgba(217,119,6,.15), 0 6px 24px rgba(217,119,6,.18) !important;
}
.pcb-product-card.selected.pcb-recommended::before {
  background: linear-gradient(90deg, #fbbf24, #d97706) !important;
}

.pcb-card-img-wrap {
  width: 72px; height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.pcb-card-img-wrap img {
  width: 72px; height: 72px;
  object-fit: contain;
  transition: transform .2s ease;
}
.pcb-product-card:hover .pcb-card-img-wrap img { transform: scale(1.08) translateY(-2px); }
.pcb-product-card.selected .pcb-card-img-wrap img { filter: drop-shadow(0 4px 12px rgba(26,86,219,.2)); }

.pcb-product-brand {
  font-size: 10px;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
}
.pcb-product-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 8px;
  line-height: 1.4;
  min-height: 32px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcb-product-card.selected .pcb-product-name { color: var(--navy); }
.pcb-product-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-lt);
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-block;
  font-family: var(--mono);
}
.pcb-product-card.selected .pcb-product-price { background: var(--blue); color: var(--white); }

/* ── Gaming mode (لمسة اختيارية، تُفعَّل تلقائيًا فقط لو usage=gaming) ── */
.pcb-gaming-badge{display:inline-block;background:rgba(139,92,246,.1);color:#7c3aed;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;margin-top:8px;}
.pcb-gaming-mode .pcb-product-card.selected{border-color:#8b5cf6 !important;box-shadow:0 0 0 1px rgba(139,92,246,.25),0 0 14px rgba(139,92,246,.28) !important;}
.pcb-gaming-mode .pcb-selected-badge{background:#8b5cf6 !important;}
.pcb-gaming-mode .pcb-product-card.selected .pcb-product-price{background:#8b5cf6 !important;}

.pcb-selected-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px; height: 22px;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(5,150,105,.4);
}
.pcb-card-specs-hint {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 6px;
  font-weight: 500;
  transition: color .2s;
}
.pcb-product-card:hover .pcb-card-specs-hint { color: var(--blue); }

/* Shake */
@keyframes pcb-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.pcb-card-shake {
  animation: pcb-shake .5s ease;
  border-color: var(--red) !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,.3) !important;
}

/* ── Nav Buttons ───────────────────────────────────── */
.pcb-nav-actions { flex-direction: row-reverse;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--gray-100);
  gap: 8px;
}
.pcb-nav-btn {
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: var(--transition);
  font-family: var(--font);
}
.pcb-nav-btn:disabled { cursor: not-allowed; transform: none !important; }
.pcb-next {
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: #fff;
  box-shadow: 0 4px 14px rgba(26,86,219,.3);
}
.pcb-next:disabled {
  background: #f1f2f5 !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #9ca3af !important;
  border: 1px solid #e2e5ea !important;
}
.pcb-next:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(26,86,219,.4);
}
.pcb-prev {
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
}
.pcb-prev:hover { background: var(--gray-200); }
.pcb-skip {
  background: transparent;
  color: var(--gray-400);
  font-size: 13px;
  padding: 8px 10px;
}
.pcb-skip:hover { color: var(--gray-600); }

/* ── Summary ───────────────────────────────────────── */
.pcb-summary-list { margin-bottom: 12px; }
.pcb-summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 13px;
}
.pcb-summary-row:last-child { border-bottom: none; }
.pcb-summary-cat {
  width: 120px; flex-shrink: 0;
  font-size: 12px; color: var(--gray-400); font-weight: 600;
}
.pcb-summary-name { flex: 1; color: var(--gray-800); font-weight: 500; line-height: 1.3; }
.pcb-summary-price {
  color: var(--blue); font-weight: 700;
  font-family: var(--mono); font-size: 12px; white-space: nowrap;
}
.pcb-total-bar {
  background: var(--navy); color: #fff;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; font-size: 14px; font-weight: 600;
}
#pcb-total-price { font-size: 20px; color: #60A5FA; font-family: var(--mono); }
.pcb-summary-meta-row {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--gray-600);
  padding: 6px 4px; border-bottom: 1px solid var(--gray-100);
}

/* ── Customer Form ─────────────────────────────────── */
.pcb-customer-form {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--gray-200);
}
.pcb-customer-form h4 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.pcb-form-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 10px;
}
.pcb-form-row input,
.pcb-form-row select {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 14px; font-family: var(--font);
  direction: rtl; color: var(--gray-800);
  background: var(--white); transition: border .2s;
}
.pcb-form-row input:focus,
.pcb-form-row select:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,86,219,.1);
}
.pcb-form-row input.error { border-color: var(--red); }

/* Payment radio */
.pcb-payment-method { margin-top: 14px; }
.pcb-payment-option {
  flex: 1; min-width: 140px;
  border: 2px solid var(--gray-200);
  border-radius: 12px; padding: 14px 16px;
  cursor: pointer; display: flex;
  align-items: center; gap: 10px;
  transition: var(--transition);
}
.pcb-payment-option:hover { border-color: var(--blue); background: var(--blue-lt); }
.pcb-payment-option input[type="radio"] { accent-color: var(--blue); }

.pcb-submit-btn {
  width: 100%; padding: 13px;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: #fff; border: none;
  border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: var(--font);
  box-shadow: 0 4px 14px rgba(26,86,219,.3);
  transition: var(--transition); margin-top: 10px;
}
.pcb-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(26,86,219,.4);
}
.pcb-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ── Empty ─────────────────────────────────────────── */
.pcb-empty { text-align: center; padding: 40px 20px; color: var(--gray-400); }
.pcb-empty-icon { font-size: 40px; margin-bottom: 10px; }

/* ── Success ───────────────────────────────────────── */
.pcb-success-icon {
  width: 72px; height: 72px;
  background: var(--green); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; margin: 0 auto 16px;
  animation: popIn .4s cubic-bezier(.175,.885,.32,1.275);
  box-shadow: 0 8px 24px rgba(5,150,105,.35);
}
@keyframes popIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ── Modal ─────────────────────────────────────────── */
#pcb-modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(11,31,58,.65);
  backdrop-filter: blur(4px);
  z-index: 9999;
  padding: 20px;
  align-items: center;
  justify-content: center;
}
#pcb-modal-overlay[style*="display: block"],
#pcb-modal-overlay[style*="display:block"] {
  display: flex !important;
}
#pcb-modal-content-wrap {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 560px;
  box-shadow: var(--shadow-lg);
  animation: modalIn .25s ease;
  overflow: hidden;
  position: relative;
  margin: auto;
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#pcb-modal-content {
  display: grid;
  grid-template-columns: 180px 1fr;
}
.pcb-modal-img-wrap {
  background: var(--gray-50);
  border-left: 1px solid var(--gray-200);
  padding: 24px 16px;
  display: flex; align-items: center; justify-content: center;
}
.pcb-modal-img-wrap img { width: 130px; height: 130px; object-fit: contain; }
.pcb-modal-info { padding: 22px; }
.pcb-modal-brand { font-size: 11px; color: var(--gray-400); font-weight: 600; text-transform: uppercase; margin-bottom: 4px; }
.pcb-modal-name  { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.3; }
.pcb-modal-price {
  display: inline-block;
  font-size: 17px; font-weight: 700; color: var(--blue);
  font-family: var(--mono); background: var(--blue-lt);
  padding: 4px 14px; border-radius: 20px; margin-bottom: 12px;
}
.pcb-specs-title { font-size: 12px; font-weight: 700; color: var(--gray-600); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }
.pcb-specs-list  { margin-bottom: 14px; max-height: 150px; overflow-y: auto; }
.pcb-spec-row {
  display: flex; justify-content: space-between;
  padding: 5px 0; border-bottom: 1px solid var(--gray-100); font-size: 12px;
}
.pcb-spec-row:last-child { border-bottom: none; }
.pcb-spec-label { color: var(--gray-400); }
.pcb-spec-value { font-weight: 600; font-family: var(--mono); color: var(--gray-800); }
.pcb-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pcb-modal-btn {
  flex: 1; padding: 10px 14px;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: #fff; border: none; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: var(--font);
  box-shadow: 0 4px 12px rgba(26,86,219,.3);
  transition: var(--transition);
}
.pcb-modal-btn:hover { transform: translateY(-1px); }
.pcb-modal-btn.selected {
  background: linear-gradient(135deg, #047857, var(--green));
  box-shadow: 0 4px 12px rgba(5,150,105,.3);
}
.pcb-modal-btn-cancel {
  padding: 10px 14px; background: var(--white);
  color: var(--gray-600); border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm); font-size: 14px;
  font-family: var(--font); cursor: pointer; transition: var(--transition);
}
.pcb-modal-btn-cancel:hover { background: var(--gray-100); }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 640px) {
  .pcb-products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pcb-form-row      { grid-template-columns: 1fr; }
  .pcb-header h2     { font-size: 22px; }
  .pcb-header #pcb-lang-toggle { top: 20px; padding: 4px 10px; font-size: 11px; }
  .pcb-progress { gap: 4px; padding: 8px 10px; border-radius: var(--radius-md); }
  .pcb-step-indicator { min-width: 52px; padding: 6px 3px; }
  .step-num { width: 24px; height: 24px; font-size: 11px; }
  .step-label { font-size: 8px; max-width: 52px; }
  .pcb-nav-actions { flex-direction: row; flex-wrap: wrap; }
  .pcb-nav-btn { padding: 10px 16px; font-size: 13px; }
  #pcb-modal-content { grid-template-columns: 1fr; }
  .pcb-modal-img-wrap { border-left: none; border-bottom: 1px solid var(--gray-200); padding: 20px; }
  .pcb-modal-img-wrap img { width: 100px; height: 100px; }
  .pcb-modal-info { padding: 16px; }
}
@media (max-width: 400px) {
  .pcb-products-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pcb-container { padding: 12px 10px 24px; }
  .step-label { font-size: 7px; max-width: 44px; }
  .pcb-product-card { padding: 12px 8px; }
}

/* ── LTR (English) Direction Overrides ────────────── */
[dir="ltr"] .pcb-summary-cat { text-align: left; }
[dir="ltr"] .pcb-total-bar   { flex-direction: row; }
[dir="ltr"] .pcb-mini-tracker { flex-direction: row; }
[dir="ltr"] .pcb-nav-actions { flex-direction: row; }
[dir="ltr"] .pcb-selected-badge { left: auto; right: 8px; }
[dir="ltr"] .pcb-product-brand { letter-spacing: .5px; }
[dir="ltr"] .pcb-header #pcb-lang-toggle { right: auto; left: 0; }
/* [dir="ltr"] .pcb-omantel-badge - keep natural LTR order */
[dir="ltr"] .pcb-form-row input,
[dir="ltr"] .pcb-form-row select { direction: ltr; text-align: left; }
[dir="ltr"] .pcb-modal-img-wrap { border-left: none; border-right: 1px solid var(--gray-200); }
[dir="ltr"] #pcb-modal-content { direction: ltr; }
[dir="ltr"] .pcb-spec-label { text-align: left; }
[dir="ltr"] .pcb-spec-value { text-align: right; }




/* ===== Mobile: Premium Progress Steps ===== */
@media (max-width: 640px) {
  /* Container: connecting line behind dots */
  html body .pcb-progress {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 18px 16px !important;
    overflow: visible !important;
  }
  /* Connecting line behind all dots */
  html body .pcb-progress::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 16px;
    right: 16px;
    height: 2px;
    background: linear-gradient(to right, #E2E8F0 0%, #E2E8F0 100%);
    transform: translateY(-50%);
    z-index: 0;
    border-radius: 2px;
  }
  /* All step indicators above the line */
  html body .pcb-step-indicator {
    position: relative !important;
    z-index: 1 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  /* Hide labels/numbers by default */
  html body .pcb-step-indicator:not(.active) .step-num,
  html body .pcb-step-indicator:not(.active) .step-label {
    display: none !important;
  }
  /* Default (upcoming): white dot with subtle border */
  html body .pcb-step-indicator:not(.active) {
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    height: 14px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 2px solid #CBD5E1 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    flex: 0 0 14px !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.6);
  }
  /* Done: green with checkmark */
  html body .pcb-step-indicator.done:not(.active) {
    background: #10B981 !important;
    border-color: #10B981 !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35), 0 0 0 3px rgba(255,255,255,0.6) !important;
  }
  html body .pcb-step-indicator.done:not(.active)::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
  }
  /* Active: only the NUMBER is in blue circle, label stays plain */
  html body .pcb-step-indicator.active {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    height: auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: none !important;
  }
  /* The number bubble — only this is blue */
  html body .pcb-step-indicator.active .step-num {
    display: inline-flex !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%) !important;
    color: #fff !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: none !important;
    flex-shrink: 0 !important;
    box-shadow:
      0 3px 8px rgba(37, 99, 235, 0.35),
      0 0 0 4px rgba(37, 99, 235, 0.12) !important;
    animation: stepNumPulse 2s ease-in-out infinite;
  }
  @keyframes stepNumPulse {
    0%, 100% { box-shadow: 0 3px 8px rgba(37, 99, 235, 0.35), 0 0 0 4px rgba(37, 99, 235, 0.12); }
    50% { box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45), 0 0 0 6px rgba(37, 99, 235, 0.18); }
  }
  /* The label — no background, just colored text, single line */
  html body .pcb-step-indicator.active .step-label {
    display: inline-block !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1E40AF !important;
    background: transparent !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    letter-spacing: 0.2px !important;
    padding: 0 !important;
    max-width: none !important;
    width: auto !important;
  }
}


/* ===== Gap between step icon and step label text ===== */
.pcb-step-indicator.active .step-label .pcb-step-icon {
  margin-inline-end: 8px !important;
  width: 18px !important;
  height: 18px !important;
  color: #1E40AF !important;
}


/* ===== Active step icon — Desktop: white on blue pill ===== */
@media (min-width: 641px) {
  .pcb-step-indicator.active .step-label .pcb-step-icon,
  .pcb-step-indicator.active .step-label svg {
    color: #fff !important;
    stroke: #fff !important;
  }
}


/* ===== Step Info Box (educational tooltip per step) ===== */
.pcb-step-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin: 0 0 18px;
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 1px solid #BFDBFE;
  border-radius: 12px;
  border-inline-start: 4px solid #2563EB;
  font-size: 13.5px;
  line-height: 1.6;
  color: #1E3A8A;
  position: relative;
  animation: pcb-info-in 0.3s ease;
}
@keyframes pcb-info-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pcb-step-info .pcb-info-icon {
  flex-shrink: 0;
  color: #2563EB;
  margin-top: 1px;
}
.pcb-step-info .pcb-info-text {
  flex: 1;
  font-weight: 500;
}

@media (max-width: 640px) {
  .pcb-step-info {
    padding: 12px 14px;
    margin: 0 0 14px;
    font-size: 12.5px;
    gap: 10px;
  }
  .pcb-step-info .pcb-info-icon {
    width: 18px;
    height: 18px;
  }
}


/* ===== Premium Mobile Sticky Tracker ===== */
@media (max-width: 640px) {
  html body .pcb-mini-tracker {
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    background: linear-gradient(135deg, #ffffff 0%, #F8FAFC 100%) !important;
    box-shadow:
      0 -8px 24px rgba(15, 35, 80, 0.10),
      0 -1px 0 rgba(0, 0, 0, 0.04) !important;
    padding: 12px 16px !important;
    z-index: 100;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border: none !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* Left: counter (1/7 قطع) */
  .pcb-mini-counter {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: #64748B;
    flex-shrink: 0;
  }
  .pcb-mini-counter #pcb-mini-count {
    font-size: 18px;
    font-weight: 800;
    color: #2563EB;
  }
  .pcb-mini-counter .pcb-mini-counter-sep {
    color: #CBD5E1;
    font-weight: 600;
    margin: 0 2px;
  }
  .pcb-mini-counter-label {
    font-size: 11px;
    margin-inline-start: 4px;
    color: #94A3B8;
  }

  /* Center: total */
  .pcb-mini-total-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    line-height: 1.1;
  }
  .pcb-mini-total-label {
    font-size: 10px;
    color: #94A3B8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
  }
  .pcb-mini-total-wrap #pcb-mini-price {
    font-size: 17px;
    font-weight: 800;
    color: #0F2350;
    font-family: 'IBM Plex Mono', monospace;
  }

  /* Right: Next button (compact) */
  .pcb-mini-next-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3);
    transition: all 0.2s ease;
    font-family: inherit;
  }
  .pcb-mini-next-btn:hover,
  .pcb-mini-next-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(37, 99, 235, 0.4);
  }
  .pcb-mini-next-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }
  .pcb-mini-next-btn svg {
    flex-shrink: 0;
  }
  /* RTL: flip arrow */
  [dir="rtl"] .pcb-mini-next-btn svg {
    transform: scaleX(-1);
  }

  /* Hide old mini-parts (icons row), keep clean */
  .pcb-mini-parts {
    display: none !important;
  }

  /* Body padding so content doesn't hide */
  body.pcb-has-sticky-tracker { padding-bottom: 76px !important; }
}

/* Hide tracker entirely on desktop */
@media (min-width: 641px) {
  .pcb-mini-tracker {
    display: none !important;
  }
}


/* ===== Respect inline display:none on tracker ===== */
.pcb-mini-tracker[style*="display:none"],
.pcb-mini-tracker[style*="display: none"] {
  display: none !important;
}


/* ===== Desktop Summary Bar — Premium Box Style ===== */
.pcb-desktop-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 22px;
  margin: 0 0 16px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 35, 80, 0.04);
  animation: pcb-info-in 0.3s ease;
}
.pcb-desktop-summary .pcb-ds-total {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.2;
}
.pcb-desktop-summary .pcb-ds-total-label {
  font-size: 14px;
  color: #64748B;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.pcb-desktop-summary .pcb-ds-total strong {
  font-size: 20px;
  font-weight: 800;
  color: #0F2350;
  font-family: 'IBM Plex Mono', monospace;
}
.pcb-desktop-summary .pcb-ds-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 14px;
  color: #64748B;
}
.pcb-desktop-summary .pcb-ds-counter strong {
  font-size: 18px;
  font-weight: 800;
  color: #2563EB;
  font-family: 'IBM Plex Mono', monospace;
}
.pcb-desktop-summary .pcb-ds-sep {
  color: #CBD5E1;
  font-weight: 600;
  margin: 0 3px;
}
.pcb-desktop-summary .pcb-ds-label {
  font-size: 13px;
  color: #94A3B8;
  font-weight: 500;
  margin-inline-start: 4px;
}
.pcb-desktop-summary .pcb-ds-dot {
  display: inline-block;
  color: #CBD5E1;
  font-weight: 700;
}

@media (max-width: 640px) {
  .pcb-desktop-summary { display: none !important; }
}
.pcb-desktop-summary[style*="display:none"],
.pcb-desktop-summary[style*="display: none"] {
  display: none !important;
}


/* MAJAN_DESKTOP_HIDE_MINITRACKER */
@media (min-width: 641px){html body #pcb-mini-tracker{display:none !important;}}


/* MAJAN_MOBILE_HIDE_BODY_NEXT */
@media (max-width: 640px){html body .pcb-nav-actions .pcb-nav-btn.pcb-next{display:none !important;}}


/* MAJAN_DS_DIR_LOCK */
html[lang="ar"] .pcb-desktop-summary, [dir="rtl"] .pcb-desktop-summary { flex-direction: row !important; }
html[lang="en"] .pcb-desktop-summary, [dir="ltr"] .pcb-desktop-summary { flex-direction: row !important; }


/* MAJAN_STEP_ANIM */
@keyframes pcb-card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.pcb-product-card.pcb-animate-in { animation: pcb-card-in 0.42s cubic-bezier(0.22,0.61,0.36,1) backwards; }
@media (prefers-reduced-motion: reduce) { .pcb-product-card.pcb-animate-in { animation: none !important; } }


/* MAJAN_MODAL_BOTTOMSHEET */
@media (max-width: 640px) {
  /* المودال يلتصق بأسفل الشاشة كـ bottom-sheet */
  html body #pcb-modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  html body #pcb-modal-content-wrap {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 88vh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    animation: pcb-sheet-up 0.3s cubic-bezier(0.22,0.61,0.36,1) !important;
  }
  /* مقبض صغير أعلى الشيت (تلميح بصري للسحب) */
  html body #pcb-modal-content-wrap::before {
    content: ""; display: block;
    width: 40px; height: 4px;
    background: #CBD5E1; border-radius: 99px;
    margin: 10px auto 0;
  }
  /* أزرار متساوية وكبيرة للّمس */
  html body .pcb-modal-actions { flex-wrap: nowrap !important; gap: 10px !important; }
  html body .pcb-modal-actions .pcb-modal-btn,
  html body .pcb-modal-actions .pcb-modal-btn-cancel {
    flex: 1 1 0 !important;
    min-height: 50px !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
@keyframes pcb-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }


/* MAJAN_MODAL_GAP_FIX */
@media (max-width: 640px) {
  /* الشيت ياخذ ارتفاع محتواه فقط — لا يتمدّد لملء الشاشة */
  html body #pcb-modal-content-wrap {
    height: auto !important;
    align-self: flex-end !important;
  }
  /* المحتوى grid: صفوف حسب المحتوى، لا تمدّد */
  html body #pcb-modal-content {
    align-content: start !important;
    grid-auto-rows: min-content !important;
  }
  /* خلية الصورة: ارتفاع ثابت معقول، لا تتمدّد */
  html body .pcb-modal-img-wrap {
    padding: 16px !important;
    min-height: 0 !important;
  }
  html body .pcb-modal-img-wrap img { width: 84px !important; height: 84px !important; }
}


/* MAJAN_COMPAT_TOAST */
.pcb-toast {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(20px);
  max-width: 90%; width: max-content; z-index: 100000;
  background: #DC2626; color: #fff; font-weight: 700; font-size: 14px;
  padding: 13px 20px; border-radius: 12px; line-height: 1.4; text-align: center;
  box-shadow: 0 8px 28px rgba(220,38,38,.45);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.pcb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.pcb-product-card.pcb-card-invalid {
  border-color: #DC2626 !important; border-width: 2px !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important;
}
.pcb-product-card.pcb-card-invalid::after {
  content: "\26A0"; position: absolute; top: 8px; inset-inline-start: 8px;
  background: #DC2626; color: #fff; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
@media (min-width: 641px) { .pcb-toast { bottom: 32px; } }

/* ── Recommended Badge (neon overlay) ── */
/* ── Recommended: neon border + corner ribbon ── */
/* ── Recommended: ribbon تطلع من حواف الكارد ── */
/* ── Recommended: neon border + corner ribbon (نسخة نظيفة، لا تكرار) ── */
/* اللون الافتراضي (قناة Direct/Coreix): ذهبي دافئ — يبرز دون تصادم مع الهوية
   الزرقاء لـ Coreix ولا مع برتقالي عمانتل (يُستبدل ببرتقالي في وضع Omantel،
   عبر .pcb-omantel-mode في class-builder-ui.php). */
.pcb-product-card.pcb-recommended{
  border-color:#d97706 !important;
  box-shadow:0 0 0 2px rgba(217,119,6,.4),0 0 16px rgba(217,119,6,.22) !important;
  overflow:visible !important;
  padding-bottom:14px !important;
  z-index:2;
}
/* الزاوية المقصوصة للـ ribbon */
.pcb-rec-badge{
  position:absolute;
  top:-7px;left:-7px;
  width:84px;height:84px;
  overflow:hidden;
  z-index:30;pointer-events:none;
  border-radius:14px 0 0 0;
}
/* الشريط المائل — حواف نظيفة، ظل واحد ناعم بدل توهج متراكب */
.pcb-rec-badge::before{
  content:'★ BEST';
  position:absolute;
  top:14px;left:-22px;
  width:112px;height:22px;
  background:linear-gradient(135deg,#fbbf24,#d97706);
  color:#fff;font-size:10px;font-weight:800;letter-spacing:1.5px;
  text-align:center;line-height:22px;
  transform:rotate(-45deg);
  box-shadow:0 2px 6px rgba(180,83,9,.35);
}
/* توهج خفيف واحد خلف الشريط (لا حلقات متعددة) */
.pcb-rec-badge::after{
  content:'';
  position:absolute;
  top:0;left:0;
  width:84px;height:84px;
  background:radial-gradient(circle at 15% 15%,rgba(217,119,6,.16) 0%,transparent 60%);
  pointer-events:none;
}
.pcb-product-card:hover .pcb-rec-badge::before{
  box-shadow:0 3px 10px rgba(180,83,9,.5);
}

/* ── Cross-selling Accessories ── */
.pcb-acc-section{margin-top:20px;padding-top:18px;border-top:1.5px dashed var(--gray-200);}
.pcb-acc-title{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:14px;}
.pcb-acc-loading{color:var(--gray-500);font-size:13px;padding:10px 0;}
.pcb-acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
.pcb-acc-card{border:1.5px solid var(--gray-200);border-radius:12px;padding:12px 10px;text-align:center;background:var(--white);transition:var(--transition);display:flex;flex-direction:column;align-items:center;gap:6px;}
.pcb-acc-card:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(26,86,219,.1);}
.pcb-acc-card.pcb-acc-selected{border-color:#059669;background:linear-gradient(160deg,#f0fdf4,#dcfce7);box-shadow:0 0 0 2px rgba(5,150,105,.15);}
.pcb-acc-img{width:56px;height:56px;display:flex;align-items:center;justify-content:center;}
.pcb-acc-img img{width:56px;height:56px;object-fit:contain;}
.pcb-acc-noimg{width:48px;height:48px;border-radius:10px;background:var(--blue-lt);color:var(--blue);font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.pcb-acc-cat{font-size:10px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.5px;}
.pcb-acc-name{font-size:11px;font-weight:600;color:var(--navy);line-height:1.3;min-height:28px;display:flex;align-items:center;}
.pcb-acc-price{font-size:13px;font-weight:800;color:#f97316;}
.pcb-acc-add{margin-top:4px;width:100%;padding:6px;border:none;border-radius:8px;background:var(--blue);color:#fff;font-size:12px;font-weight:700;cursor:pointer;transition:var(--transition);}
.pcb-acc-add:hover{background:var(--navy);}
.pcb-acc-selected .pcb-acc-add{background:#059669;}

/* ── Accessories separation + margin ── */
.pcb-acc-section{margin-bottom:22px;}
/* PCB_ACC_LINE_CSS: تفصيل الإكسسوارات في الملخص */
.pcb-acc-lines{margin-top:10px;background:#fffaf5;border:1px solid #fed7aa;border-radius:10px;padding:4px 14px;}
.pcb-acc-line{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:13px;border-bottom:1px dashed #fed7aa;}
.pcb-acc-line:last-child{border-bottom:none;}
.pcb-acc-line-name{color:#7c2d12;font-weight:500;}
.pcb-acc-line-price{color:#f97316;font-weight:700;white-space:nowrap;}
.pcb-acc-subtotal{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#fff7ed;border-radius:10px;margin-top:10px;font-size:14px;color:#9a3412;font-weight:600;}
.pcb-acc-subtotal strong{color:#f97316;font-weight:800;}
.pcb-grand-total{display:flex !important;justify-content:space-between;align-items:center;padding:14px 16px;background:linear-gradient(135deg,#f97316,#c2570a) !important;border-radius:12px;margin-top:8px;font-size:16px;color:#fff !important;font-weight:700;box-shadow:0 4px 16px rgba(249,115,22,.3);}
.pcb-grand-total span,.pcb-grand-total strong{color:#1a1a1a !important;}
.pcb-grand-total strong{font-weight:900;font-size:18px;}

/* ── 360 Case Viewer ── */
.pcb-case-viewer{margin:20px 0;padding:18px;border:1.5px solid var(--gray-200);border-radius:16px;background:linear-gradient(160deg,#fafbff,#f0f4ff);}
.pcb-cv-title{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:14px;text-align:center;}
.pcb-cv-stage{position:relative;width:100%;max-width:280px;height:240px;margin:0 auto;display:flex;align-items:center;justify-content:center;cursor:grab;border-radius:12px;background:radial-gradient(circle at 50% 40%,#fff 0%,#eef2fb 80%);overflow:hidden;}
.pcb-cv-stage:active{cursor:grabbing;}
.pcb-cv-img-wrap{transition:transform .15s ease-out;transform-style:preserve-3d;will-change:transform;}
.pcb-cv-img-wrap img{width:200px;height:200px;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(26,40,80,.18));user-select:none;}
.pcb-cv-hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--gray-500);background:rgba(255,255,255,.85);padding:4px 12px;border-radius:20px;font-weight:600;pointer-events:none;}
.pcb-cv-name{text-align:center;margin-top:12px;font-size:13px;font-weight:700;color:var(--navy);}