/* ═══════════════════════════════════════════════════════
   المحترف — بناء التجميعة  v3.2.3
   White + Sky Blue | RTL/LTR | Animations | Woodmart-safe
   ═══════════════════════════════════════════════════════ */

#ampc-root, #ampc-root * { box-sizing: border-box !important; }

/* ── Tokens ── */
#ampc-root {
  --cp:#0ea5e9; --cph:#0284c7; --cplt:#e0f2fe;
  --cbg:#f0f6ff; --csf:#ffffff; --csf2:#e8f1fc; --cbr:#c7ddf7;
  --ctx:#0f172a; --cmt:#64748b;
  --cok:#22c55e; --cwn:#f59e0b; --cng:#ef4444;
  --sh:0 4px 24px rgba(14,165,233,.18); --shsm:0 1px 4px rgba(14,165,233,.10);
  --rd:12px; --rdb:8px; --tr:.18s ease;
  --fn:'Segoe UI',Tahoma,Arial,sans-serif;

  font-family:var(--fn) !important;
  font-size:14px !important; line-height:1.55 !important;
  color:var(--ctx) !important; background:var(--cbg) !important;
  direction:rtl !important;
  border-radius:16px !important; border:1px solid var(--cbr) !important;
  box-shadow:var(--sh) !important; overflow:hidden !important; width:100% !important;
}

/* ── Keyframes ── */
@keyframes ampcFadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes ampcFade   { from{opacity:0} to{opacity:1} }
@keyframes ampcPop    { 0%{transform:scale(.4)} 70%{transform:scale(1.15)} 100%{transform:scale(1)} }
@keyframes ampcSpin   { to{transform:rotate(360deg)} }

/* ══ HEADER ══ */
.ampc__header{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:12px !important; padding:18px 24px 15px !important;
  background:linear-gradient(135deg,#0ea5e9,#0284c7) !important;
}
.ampc__title{ margin:0 0 3px !important; font-size:20px !important; font-weight:800 !important; color:#fff !important; line-height:1.25 !important; }
.ampc__sub{ margin:0 !important; font-size:12px !important; color:rgba(255,255,255,.88) !important; }
.ampc__header-btns{ display:flex !important; gap:8px !important; align-items:center !important; flex-shrink:0 !important; }
.ampc__lang-toggle, .ampc__saved-toggle{
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  background:rgba(255,255,255,.18) !important; border:1.5px solid rgba(255,255,255,.45) !important;
  color:#fff !important; border-radius:99px !important; padding:7px 14px !important;
  font-size:12px !important; font-weight:800 !important; cursor:pointer !important;
  white-space:nowrap !important; transition:var(--tr) !important; font-family:var(--fn) !important;
  line-height:1.2 !important; box-shadow:none !important;
}
.ampc__lang-toggle:hover, .ampc__saved-toggle:hover{ background:rgba(255,255,255,.35) !important; transform:translateY(-1px) !important; }

/* ══ PRESET BAR ══ */
.ampc__preset-bar{
  display:flex !important; align-items:center !important; gap:10px !important; flex-wrap:wrap !important;
  padding:9px 20px !important; background:var(--cplt) !important; border-bottom:1px solid var(--cbr) !important;
}
.ampc__preset-label{ font-size:12px !important; color:var(--cph) !important; font-weight:800 !important; }
.ampc__preset-chips{ display:flex !important; gap:6px !important; flex-wrap:wrap !important; }
.ampc__preset-chip{
  padding:5px 14px !important; border-radius:99px !important; background:#fff !important;
  border:1.5px solid var(--cp) !important; color:var(--cp) !important;
  font-size:12px !important; font-weight:700 !important; cursor:pointer !important;
  transition:var(--tr) !important; font-family:var(--fn) !important; box-shadow:none !important;
}
.ampc__preset-chip:hover{ background:var(--cp) !important; color:#fff !important; transform:translateY(-1px) !important; }

/* ══ STEPS STRIP ══ */
.ampc__steps-strip{ background:var(--csf) !important; border-bottom:1px solid var(--cbr) !important; }
.ampc__steps-track{
  display:flex !important; align-items:stretch !important; overflow-x:auto !important;
  scroll-behavior:smooth !important; padding:0 10px !important;
  scrollbar-width:none !important; -ms-overflow-style:none !important;
}
.ampc__steps-track::-webkit-scrollbar{ display:none !important; }
.ampc__step-btn{
  display:flex !important; align-items:center !important; gap:7px !important;
  padding:12px 13px !important; background:none !important; border:none !important;
  border-bottom:3px solid transparent !important; cursor:pointer !important;
  color:var(--cmt) !important; font-family:var(--fn) !important;
  font-size:12px !important; font-weight:600 !important;
  white-space:nowrap !important; flex-shrink:0 !important;
  transition:var(--tr) !important; box-shadow:none !important;
}
.ampc__step-btn:hover{ background:var(--cplt) !important; color:var(--cph) !important; }
.ampc__step-btn.is-active{ border-bottom-color:var(--cp) !important; background:var(--cplt) !important; color:var(--cph) !important; }
.ampc__step-btn.is-complete{ color:var(--cok) !important; }
.ampc__step-num{
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:20px !important; height:20px !important; border-radius:50% !important;
  background:var(--cbr) !important; color:var(--cmt) !important;
  font-size:10px !important; font-weight:800 !important; flex-shrink:0 !important;
  transition:var(--tr) !important;
}
.ampc__step-btn.is-active   .ampc__step-num{ background:var(--cp)  !important; color:#fff !important; }
.ampc__step-btn.is-complete .ampc__step-num{ background:var(--cok) !important; color:#fff !important; }
.ampc__step-icon{ font-size:16px !important; line-height:1 !important; }
.ampc__step-icon[data-icon="cpu"]::before{content:"🖥️"}
.ampc__step-icon[data-icon="motherboard"]::before{content:"🔌"}
.ampc__step-icon[data-icon="ram"]::before{content:"💾"}
.ampc__step-icon[data-icon="gpu"]::before{content:"🎮"}
.ampc__step-icon[data-icon="storage"]::before{content:"💿"}
.ampc__step-icon[data-icon="psu"]::before{content:"⚡"}
.ampc__step-icon[data-icon="case"]::before{content:"📦"}
.ampc__step-icon[data-icon="cooler"]::before{content:"❄️"}
.ampc__step-name em{ color:var(--cng) !important; font-style:normal !important; }
.ampc__step-check{ opacity:0 !important; color:var(--cok) !important; font-weight:800 !important; font-size:13px !important; transition:var(--tr) !important; }
.ampc__step-btn.is-complete .ampc__step-check{ opacity:1 !important; animation:ampcPop .25s ease !important; }
.ampc__step-arrow{ align-self:center !important; color:var(--cbr) !important; flex-shrink:0 !important; }
.ampc__step-arrow::after{ content:"‹"; font-size:16px; }
#ampc-root[dir="ltr"] .ampc__step-arrow::after{ content:"›"; }

/* ══ LAYOUT ══ */
.ampc__layout{ display:flex !important; min-height:540px !important; background:var(--cbg) !important; }
.ampc__content{
  flex:1 !important; min-width:0 !important; padding:14px !important;
  display:flex !important; flex-direction:column !important; gap:10px !important;
}
.ampc__summary{
  width:285px !important; min-width:285px !important; flex-shrink:0 !important;
  background:var(--csf) !important;
  border-inline-start:1px solid var(--cbr) !important;
}
.ampc__summary-inner{ padding:14px !important; display:flex !important; flex-direction:column !important; gap:11px !important; }
.ampc__summary-title{
  margin:0 !important; font-size:14px !important; font-weight:800 !important; color:var(--ctx) !important;
  padding-bottom:9px !important; border-bottom:2px solid var(--cplt) !important;
}

/* ══ TOOLBAR ══ */
.ampc__toolbar{ display:flex !important; gap:6px !important; flex-wrap:wrap !important; align-items:center !important; }
.ampc__search{
  flex:1 !important; min-width:150px !important;
  background:var(--csf) !important; border:1px solid var(--cbr) !important; border-radius:var(--rdb) !important;
  color:var(--ctx) !important; padding:8px 12px !important; font-size:13px !important;
  font-family:var(--fn) !important; outline:none !important; transition:var(--tr) !important;
}
.ampc__search:focus{ border-color:var(--cp) !important; box-shadow:0 0 0 3px rgba(14,165,233,.15) !important; }
.ampc__search::placeholder{ color:var(--cmt) !important; }
.ampc__filters{ display:flex !important; gap:4px !important; flex-wrap:wrap !important; }
.ampc__filter-btn{
  padding:5px 11px !important; border-radius:99px !important;
  background:var(--csf) !important; border:1px solid var(--cbr) !important;
  color:var(--cmt) !important; font-size:11px !important; font-weight:600 !important;
  cursor:pointer !important; transition:var(--tr) !important; font-family:var(--fn) !important; box-shadow:none !important;
}
.ampc__filter-btn.is-active, .ampc__filter-btn:hover{ background:var(--cp) !important; border-color:var(--cp) !important; color:#fff !important; }
.ampc__sort-sel{
  background:var(--csf) !important; border:1px solid var(--cbr) !important; color:var(--ctx) !important;
  padding:7px 10px !important; border-radius:var(--rdb) !important;
  font-size:12px !important; font-family:var(--fn) !important; cursor:pointer !important; outline:none !important;
}
.ampc__compat-banner{
  background:var(--cplt) !important; border:1px solid var(--cbr) !important;
  border-inline-start:3px solid var(--cp) !important; border-radius:var(--rdb) !important;
  padding:8px 13px !important; font-size:12px !important; color:var(--cph) !important; font-weight:600 !important;
  animation:ampcFade .3s ease !important;
}

/* ══ GRID + CARDS ══ */
.ampc__grid{ display:flex !important; flex-wrap:wrap !important; gap:11px !important; align-content:flex-start !important; }
.ampc__card{
  width:calc(25% - 9px) !important; min-width:165px !important;
  background:var(--csf) !important; border:1.5px solid var(--cbr) !important;
  border-radius:var(--rd) !important; overflow:hidden !important; cursor:pointer !important;
  position:relative !important; display:flex !important; flex-direction:column !important;
  box-shadow:var(--shsm) !important;
  transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr) !important;
  animation:ampcFadeUp .35s ease both !important;
}
.ampc__card:hover{ border-color:var(--cp) !important; transform:translateY(-3px) !important; box-shadow:var(--sh) !important; }
.ampc__card.is-selected{ border-color:var(--cp) !important; background:var(--cplt) !important; box-shadow:0 0 0 2px var(--cp) !important; }
.ampc__card.is-incompatible{ opacity:.4 !important; pointer-events:none !important; }
.ampc__card-badge{
  position:absolute !important; top:8px !important; inset-inline-end:8px !important;
  background:var(--cng) !important; color:#fff !important;
  font-size:10px !important; font-weight:700 !important;
  padding:2px 8px !important; border-radius:99px !important; z-index:2 !important;
}
.ampc__card-tick{
  position:absolute !important; top:8px !important; inset-inline-start:8px !important;
  width:22px !important; height:22px !important;
  background:var(--cp) !important; color:#fff !important; border-radius:50% !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:11px !important; font-weight:800 !important;
  opacity:0 !important; z-index:2 !important; transition:opacity var(--tr) !important;
  box-shadow:0 2px 8px rgba(14,165,233,.4) !important;
}
.ampc__card.is-selected .ampc__card-tick{ opacity:1 !important; animation:ampcPop .3s ease !important; }
.ampc__card--upsell.is-selected .ampc__card-tick{ background:var(--cok) !important; box-shadow:0 2px 8px rgba(34,197,94,.4) !important; }

/* image: perfectly contained + zoom on hover */
.ampc__card-imgwrap{
  width:100% !important; aspect-ratio:1/1 !important; height:auto !important;
  flex-shrink:0 !important; background:#fff !important;
  border-bottom:1px solid var(--cbr) !important;
  display:block !important; padding:6px !important; overflow:hidden !important;
}
.ampc__card-img{
  width:100% !important; height:100% !important;
  object-fit:contain !important; object-position:center !important;
  display:block !important;
  transition:transform .3s ease !important;
}
.ampc__card:hover .ampc__card-img{ transform:scale(1.06) !important; }

.ampc__card-body{ padding:9px 11px 11px !important; flex:1 !important; display:flex !important; flex-direction:column !important; gap:4px !important; }
.ampc__card-brand{ font-size:10px !important; color:var(--cp) !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.5px !important; min-height:12px !important; }
.ampc__card-name{
  font-size:12px !important; font-weight:600 !important; color:var(--ctx) !important;
  line-height:1.45 !important; margin:0 !important;
  display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important;
  min-height:35px !important;
}
.ampc__card-specs{ display:flex !important; flex-direction:column !important; gap:2px !important; }
.ampc__card-spec{ font-size:10px !important; color:var(--cmt) !important; }
.ampc__card-spec strong{ color:var(--ctx) !important; font-size:10px !important; }
.ampc__card-spec--bad{ color:var(--cng) !important; font-weight:600 !important; }
.ampc__card-price{ margin-top:auto !important; padding-top:6px !important; font-size:13.5px !important; font-weight:800 !important; color:var(--cph) !important; }
.ampc__card-price s{ font-size:10px !important; color:var(--cmt) !important; font-weight:400 !important; margin-inline-start:4px !important; }
.ampc__card-select, .ampc__upsell-add{
  display:block !important; width:100% !important; margin-top:8px !important; padding:8px !important;
  background:var(--csf2) !important; border:1.5px solid var(--cbr) !important; border-radius:var(--rdb) !important;
  color:var(--cph) !important; font-size:12px !important; font-weight:700 !important;
  cursor:pointer !important; text-align:center !important; font-family:var(--fn) !important;
  transition:var(--tr) !important; box-shadow:none !important;
}
.ampc__card-select:hover, .ampc__upsell-add:hover{ background:var(--cp) !important; border-color:var(--cp) !important; color:#fff !important; }
.ampc__card.is-selected .ampc__card-select{ background:var(--cp) !important; border-color:var(--cp) !important; color:#fff !important; }
.ampc__card--upsell.is-selected .ampc__upsell-add{ background:var(--cok) !important; border-color:var(--cok) !important; color:#fff !important; }

/* loading / empty */
.ampc__loading, .ampc__empty{
  width:100% !important; text-align:center !important; padding:50px 20px !important;
  color:var(--cmt) !important; font-size:14px !important; animation:ampcFade .3s ease !important;
}
.ampc__loading::before{
  content:"" !important; display:block !important; width:36px !important; height:36px !important;
  border:3px solid var(--cbr) !important; border-top-color:var(--cp) !important; border-radius:50% !important;
  margin:0 auto 14px !important; animation:ampcSpin .8s linear infinite !important;
}

/* pagination */
.ampc__pagination{ display:flex !important; gap:4px !important; justify-content:center !important; flex-wrap:wrap !important; padding:4px 0 !important; }
.ampc__page-btn{
  width:31px !important; height:31px !important; border-radius:7px !important;
  background:var(--csf) !important; border:1px solid var(--cbr) !important;
  color:var(--cmt) !important; font-size:12px !important; font-weight:700 !important;
  cursor:pointer !important; transition:var(--tr) !important; font-family:var(--fn) !important; box-shadow:none !important;
}
.ampc__page-btn.is-active, .ampc__page-btn:hover{ background:var(--cp) !important; border-color:var(--cp) !important; color:#fff !important; }

/* ══ SUMMARY ══ */
.ampc__summary-rows{ display:flex !important; flex-direction:column !important; gap:4px !important; }
.ampc__srow{
  display:flex !important; align-items:flex-start !important; gap:6px !important;
  padding:7px 9px !important; border-radius:8px !important;
  background:var(--csf2) !important; border:1px solid var(--cbr) !important;
  min-height:35px !important; transition:var(--tr) !important;
}
.ampc__srow--filled{ border-color:var(--cp) !important; background:var(--cplt) !important; }
.ampc__srow-label{ font-size:10px !important; color:var(--cmt) !important; font-weight:700 !important; white-space:nowrap !important; min-width:52px !important; padding-top:2px !important; }
.ampc__srow-val{ flex:1 !important; font-size:11px !important; font-weight:600 !important; color:var(--ctx) !important; line-height:1.35 !important; }
.ampc__srow-price{ font-size:10px !important; color:var(--cph) !important; font-weight:800 !important; }
.ampc__srow-remove{
  background:none !important; border:none !important; color:var(--cmt) !important;
  cursor:pointer !important; font-size:11px !important; padding:0 3px !important;
  line-height:1 !important; box-shadow:none !important; transition:var(--tr) !important;
}
.ampc__srow-remove:hover{ color:var(--cng) !important; }

.ampc__totals{
  background:linear-gradient(135deg,#e0f2fe,#f0f9ff) !important;
  border:1px solid var(--cbr) !important; border-radius:10px !important;
  padding:11px 13px !important; display:flex !important; flex-direction:column !important; gap:6px !important;
}
.ampc__totals-row{ display:flex !important; justify-content:space-between !important; align-items:center !important; font-size:12.5px !important; color:var(--cmt) !important; }
.ampc__totals-row--inst{ border-top:1px solid var(--cbr) !important; padding-top:6px !important; }
.ampc__totals-row strong{ color:var(--cph) !important; font-size:15px !important; font-weight:800 !important; }

.ampc__payment{
  display:flex !important; gap:14px !important;
  background:var(--csf2) !important; border:1px solid var(--cbr) !important;
  padding:9px 12px !important; border-radius:8px !important;
}
.ampc__radio{ display:flex !important; align-items:center !important; gap:6px !important; cursor:pointer !important; font-size:12.5px !important; font-weight:600 !important; color:var(--ctx) !important; }
.ampc__radio input{ accent-color:var(--cp) !important; width:15px !important; height:15px !important; cursor:pointer !important; margin:0 !important; }

.ampc__incomplete{
  font-size:11px !important; font-weight:600 !important; text-align:center !important;
  color:#92400e !important; background:#fef3c7 !important;
  border:1px solid #fde68a !important; border-radius:7px !important; padding:7px 10px !important;
}

.ampc__progress-wrap{ background:var(--csf2) !important; border:1px solid var(--cbr) !important; border-radius:8px !important; padding:9px 11px !important; }
.ampc__progress-label{ font-size:11px !important; color:var(--cmt) !important; font-weight:700 !important; margin-bottom:6px !important; }
.ampc__progress-bar{ height:6px !important; background:var(--cbr) !important; border-radius:99px !important; overflow:hidden !important; }
.ampc__progress-fill{
  height:100% !important; width:0% !important; border-radius:99px !important;
  background:linear-gradient(90deg,var(--cp),var(--cok)) !important;
  transition:width .45s ease !important;
}

.ampc__wattage{
  background:var(--csf2) !important; border:1px solid var(--cbr) !important;
  border-radius:8px !important; padding:9px 11px !important;
  display:flex !important; flex-direction:column !important; gap:4px !important;
  animation:ampcFade .3s ease !important;
}
.ampc__watt-title{ font-size:10.5px !important; font-weight:800 !important; color:var(--cph) !important; }
.ampc__watt-row{ display:flex !important; justify-content:space-between !important; font-size:10.5px !important; color:var(--cmt) !important; }
.ampc__watt-row strong{ color:var(--ctx) !important; font-weight:800 !important; }
.ampc__watt-bar{ height:5px !important; background:var(--cbr) !important; border-radius:99px !important; overflow:hidden !important; margin:3px 0 !important; }
.ampc__watt-fill{ height:100% !important; width:0% !important; background:var(--cok) !important; border-radius:99px !important; transition:width .45s ease,background .3s !important; }
.ampc__watt-status{ font-size:10.5px !important; font-weight:700 !important; }

.ampc__compat-score{
  display:flex !important; align-items:center !important; gap:8px !important;
  background:var(--csf2) !important; border:1px solid var(--cbr) !important;
  border-radius:8px !important; padding:8px 10px !important;
}
.ampc__compat-label{ font-size:10.5px !important; font-weight:800 !important; color:var(--cmt) !important; white-space:nowrap !important; }
.ampc__compat-bar{ flex:1 !important; height:5px !important; background:var(--cbr) !important; border-radius:99px !important; overflow:hidden !important; }
.ampc__compat-fill{ height:100% !important; width:0% !important; background:var(--cok) !important; border-radius:99px !important; transition:width .45s ease !important; }
.ampc__compat-pct{ font-size:10.5px !important; font-weight:800 !important; min-width:32px !important; }

.ampc__btn-reset-sm{
  padding:8px !important; background:var(--csf2) !important;
  border:1.5px solid var(--cbr) !important; border-radius:var(--rdb) !important;
  color:var(--cmt) !important; font-size:12px !important; font-weight:700 !important;
  cursor:pointer !important; text-align:center !important; font-family:var(--fn) !important;
  transition:var(--tr) !important; box-shadow:none !important; width:100% !important;
}
.ampc__btn-reset-sm:hover{ border-color:var(--cng) !important; color:var(--cng) !important; background:#fef2f2 !important; }

/* verdict colors */
.ampc__ok{ color:var(--cok) !important; font-weight:700 !important; }
.ampc__warn{ color:var(--cwn) !important; font-weight:700 !important; }
.ampc__bad{ color:var(--cng) !important; font-weight:700 !important; }

/* ══ COMPLETION ══ */
#ampc-completion{ display:none; background:var(--cbg) !important; }
#ampc-completion.is-open{ display:block !important; animation:ampcFadeUp .35s ease !important; }
.ampc__comp-header{ padding:20px 24px 15px !important; background:linear-gradient(135deg,#0ea5e9,#0284c7) !important; }
.ampc__comp-title{ margin:0 0 3px !important; font-size:20px !important; font-weight:800 !important; color:#fff !important; }
.ampc__comp-sub{ margin:0 !important; font-size:12px !important; color:rgba(255,255,255,.88) !important; }
.ampc__comp-body{ display:flex !important; gap:16px !important; padding:16px 20px !important; flex-wrap:wrap !important; }
.ampc__comp-table-wrap{ flex:1 !important; min-width:0 !important; overflow-x:auto !important; }
.ampc__comp-table{ width:100% !important; border-collapse:collapse !important; font-size:13px !important; font-family:var(--fn) !important; background:var(--csf) !important; border-radius:10px !important; overflow:hidden !important; }
.ampc__comp-table th{
  background:var(--cplt) !important; color:var(--cph) !important;
  padding:9px 11px !important; text-align:start !important;
  font-size:11px !important; font-weight:800 !important; border-bottom:2px solid var(--cbr) !important;
}
.ampc__ct-label{ color:var(--cmt) !important; font-size:11px !important; font-weight:700 !important; padding:7px 11px !important; border-bottom:1px solid var(--cbr) !important; white-space:nowrap !important; }
.ampc__ct-name{ font-size:12px !important; font-weight:600 !important; padding:7px 11px !important; border-bottom:1px solid var(--cbr) !important; }
.ampc__ct-price{ font-size:12px !important; font-weight:800 !important; color:var(--cph) !important; padding:7px 11px !important; border-bottom:1px solid var(--cbr) !important; white-space:nowrap !important; }
.ampc__extra-tr td{ background:#f0fdf4 !important; }
.ampc__rm-extra{
  background:none !important; border:none !important; color:var(--cng) !important;
  cursor:pointer !important; font-size:12px !important; padding:0 4px !important; box-shadow:none !important;
}
.ampc__comp-side{ width:265px !important; flex-shrink:0 !important; display:flex !important; flex-direction:column !important; gap:10px !important; }
.ampc__comp-totals{
  background:linear-gradient(135deg,#e0f2fe,#f0f9ff) !important;
  border:1px solid var(--cbr) !important; border-radius:10px !important;
  padding:12px 14px !important; display:flex !important; flex-direction:column !important; gap:7px !important;
}
.ampc__comp-trow{ display:flex !important; justify-content:space-between !important; align-items:center !important; font-size:13px !important; color:var(--cmt) !important; }
.ampc__comp-trow strong{ font-size:16px !important; font-weight:800 !important; color:var(--cph) !important; }
.ampc__comp-watt{ background:var(--csf2) !important; border:1px solid var(--cbr) !important; border-radius:10px !important; padding:11px 13px !important; }
.ampc__comp-watt-title{ font-size:11px !important; font-weight:800 !important; color:var(--cph) !important; margin-bottom:5px !important; }
.ampc__comp-watt-status{ font-size:12px !important; line-height:1.5 !important; }
.ampc__comp-actions{ display:flex !important; flex-direction:column !important; gap:8px !important; }
.ampc__comp-row3{ display:flex !important; gap:6px !important; }

/* buttons */
.ampc__btn{
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:7px !important; padding:11px 15px !important;
  border-radius:var(--rdb) !important; border:none !important;
  font-size:13px !important; font-weight:800 !important; cursor:pointer !important;
  text-decoration:none !important; text-align:center !important;
  font-family:var(--fn) !important; line-height:1.35 !important; transition:var(--tr) !important;
}
.ampc__btn:disabled{ opacity:.45 !important; pointer-events:none !important; }
.ampc__btn--cart{ background:var(--cp) !important; color:#fff !important; box-shadow:0 3px 14px rgba(14,165,233,.35) !important; }
.ampc__btn--cart:hover{ background:var(--cph) !important; transform:translateY(-1px) !important; }
.ampc__btn--wa{ background:#128c7e !important; color:#fff !important; box-shadow:0 3px 14px rgba(18,140,126,.3) !important; }
.ampc__btn--wa:hover{ background:#0e7268 !important; transform:translateY(-1px) !important; }
.ampc__btn--sec{
  flex:1 !important; background:var(--csf2) !important;
  border:1.5px solid var(--cbr) !important; color:var(--cmt) !important;
  font-size:11px !important; padding:8px 4px !important; box-shadow:none !important;
}
.ampc__btn--sec:hover{ border-color:var(--cp) !important; color:var(--cp) !important; background:var(--cplt) !important; }
.ampc__btn--edit{
  background:var(--csf2) !important; border:1.5px solid var(--cbr) !important;
  color:var(--cmt) !important; font-size:12px !important; box-shadow:none !important;
}
.ampc__btn--edit:hover{ border-color:var(--cp) !important; color:var(--cp) !important; background:var(--cplt) !important; }

/* ══ UPSELL ══ */
.ampc__upsell{ padding:0 20px 20px !important; }
.ampc__upsell-header{
  display:flex !important; align-items:center !important; gap:14px !important; flex-wrap:wrap !important;
  padding:14px 0 12px !important; border-top:2px solid var(--cplt) !important;
}
.ampc__upsell-title{ margin:0 !important; font-size:15px !important; font-weight:800 !important; color:var(--ctx) !important; white-space:nowrap !important; }
.ampc__upsell-tabs{ display:flex !important; gap:6px !important; flex-wrap:wrap !important; }
.ampc__upsell-tab{
  padding:7px 17px !important; border-radius:99px !important;
  background:var(--csf) !important; border:1.5px solid var(--cbr) !important;
  color:var(--cmt) !important; font-size:13px !important; font-weight:700 !important;
  cursor:pointer !important; transition:var(--tr) !important; font-family:var(--fn) !important; box-shadow:none !important;
}
.ampc__upsell-tab.is-active, .ampc__upsell-tab:hover{
  background:var(--cp) !important; border-color:var(--cp) !important; color:#fff !important;
  transform:translateY(-1px) !important;
}
.ampc__grid--upsell .ampc__card--upsell{ cursor:pointer !important; }

/* ══ DRAWER ══ */
.ampc__overlay{
  position:fixed !important; inset:0 !important;
  background:rgba(15,23,42,.45) !important; backdrop-filter:blur(2px) !important;
  z-index:999998 !important;
  opacity:0 !important; visibility:hidden !important; transition:opacity .25s ease,visibility .25s !important;
}
.ampc__overlay.is-open{ opacity:1 !important; visibility:visible !important; }
.ampc__drawer{
  position:fixed !important; top:0 !important; inset-inline-start:0 !important;
  width:330px !important; max-width:92vw !important; height:100vh !important; height:100dvh !important;
  background:var(--csf) !important; z-index:999999 !important;
  display:flex !important; flex-direction:column !important;
  box-shadow:0 0 40px rgba(14,165,233,.25) !important;
  transform:translateX(-105%) !important; visibility:hidden !important;
  transition:transform .3s ease,visibility .3s !important;
}
#ampc-root[dir="ltr"] .ampc__drawer{ transform:translateX(105%) !important; }
.ampc__drawer.is-open{ transform:translateX(0) !important; visibility:visible !important; }
.ampc__drawer-head{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  padding:16px 20px !important; flex-shrink:0 !important;
  background:linear-gradient(135deg,#e0f2fe,#c7ddf7) !important; border-bottom:1px solid var(--cbr) !important;
}
.ampc__drawer-head h3{ margin:0 !important; font-size:15px !important; font-weight:800 !important; color:var(--cph) !important; }
.ampc__drawer-close{
  background:none !important; border:none !important; color:var(--cmt) !important;
  font-size:19px !important; cursor:pointer !important; padding:4px 9px !important;
  border-radius:6px !important; line-height:1 !important; box-shadow:none !important; transition:var(--tr) !important;
}
.ampc__drawer-close:hover{ color:var(--cng) !important; background:#fef2f2 !important; }
.ampc__drawer-list{ flex:1 !important; overflow-y:auto !important; padding:14px 16px !important; display:flex !important; flex-direction:column !important; gap:10px !important; }
.ampc__drawer-empty{ color:var(--cmt) !important; text-align:center !important; padding:26px 10px !important; font-size:13px !important; }
.ampc__saved-item{
  background:var(--csf2) !important; border:1px solid var(--cbr) !important;
  border-radius:10px !important; padding:12px !important;
  display:flex !important; flex-direction:column !important; gap:6px !important;
  transition:var(--tr) !important; animation:ampcFadeUp .3s ease both !important;
}
.ampc__saved-item:hover{ border-color:var(--cp) !important; box-shadow:var(--shsm) !important; }
.ampc__saved-name{ font-size:13px !important; font-weight:800 !important; color:var(--ctx) !important; }
.ampc__saved-meta{ font-size:11px !important; color:var(--cmt) !important; }
.ampc__saved-actions{ display:flex !important; gap:5px !important; }
.ampc__saved-copy, .ampc__saved-load, .ampc__saved-del{
  flex:1 !important; padding:6px 4px !important; border-radius:6px !important;
  background:var(--csf) !important; border:1px solid var(--cbr) !important;
  color:var(--cmt) !important; font-size:11px !important; font-weight:700 !important;
  cursor:pointer !important; text-align:center !important;
  font-family:var(--fn) !important; transition:var(--tr) !important; box-shadow:none !important;
}
.ampc__saved-copy:hover{ border-color:var(--cp)  !important; color:var(--cp)  !important; background:var(--cplt) !important; }
.ampc__saved-load:hover{ border-color:var(--cok) !important; color:var(--cok) !important; background:#f0fdf4 !important; }
.ampc__saved-del:hover { border-color:var(--cng) !important; color:var(--cng) !important; background:#fef2f2 !important; }

/* ══ TOAST ══ */
.ampc__toast{
  position:fixed !important; bottom:26px !important; left:50% !important;
  transform:translateX(-50%) translateY(16px) !important;
  background:#0284c7 !important; color:#fff !important;
  padding:11px 24px !important; border-radius:99px !important;
  font-size:13px !important; font-weight:700 !important;
  font-family:'Segoe UI',Tahoma,Arial,sans-serif !important;
  box-shadow:0 6px 24px rgba(14,165,233,.45) !important;
  z-index:9999999 !important; opacity:0 !important; pointer-events:none !important;
  transition:opacity .25s,transform .25s !important; white-space:nowrap !important;
  max-width:92vw !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
.ampc__toast.is-visible{ opacity:1 !important; transform:translateX(-50%) translateY(0) !important; }

/* ══ EMPTY STATE ══ */
.ampc__empty-state{
  text-align:center !important; padding:60px 20px !important; color:var(--cmt) !important;
  display:flex !important; flex-direction:column !important; align-items:center !important; gap:12px !important;
}
.ampc__empty-icon{ font-size:52px !important; line-height:1 !important; }

/* ══ RESPONSIVE ══ */
@media (max-width:900px){
  .ampc__layout{ flex-direction:column !important; min-height:auto !important; }
  .ampc__summary{ width:100% !important; min-width:0 !important; border-inline-start:none !important; border-top:1px solid var(--cbr) !important; }
  .ampc__card{ width:calc(33.333% - 8px) !important; }
  .ampc__comp-body{ flex-direction:column !important; }
  .ampc__comp-side{ width:100% !important; }
}
@media (max-width:640px){
  .ampc__header{ padding:14px 15px 12px !important; }
  .ampc__title{ font-size:17px !important; }
  .ampc__saved-toggle span{ display:none !important; }
  .ampc__step-num{ display:none !important; }
  .ampc__step-arrow{ display:none !important; }
  .ampc__card{ width:calc(50% - 6px) !important; min-width:140px !important; }
  .ampc__grid{ gap:8px !important; }
  .ampc__content{ padding:10px !important; }
}

/* scrollbars + reduced motion */
#ampc-root ::-webkit-scrollbar{ width:5px !important; height:5px !important; }
#ampc-root ::-webkit-scrollbar-track{ background:transparent !important; }
#ampc-root ::-webkit-scrollbar-thumb{ background:var(--cbr) !important; border-radius:99px !important; }
@media (prefers-reduced-motion:reduce){
  #ampc-root *{ animation:none !important; transition:none !important; }
}