/* =========================================================
   MCP — APPLE MINIMAL (scoped)
   Colle après tes autres styles
   ========================================================= */

/* Base + variables */
.mcp-page{
  --am-bg: #f5f5f7;        /* Apple-ish background */
  --am-card:#ffffff;
  --am-ink:#1d1d1f;
  --am-muted:#6e6e73;
  --am-line: rgba(0,0,0,.08);
  --am-soft: rgba(0,0,0,.04);
  --am-focus: rgba(0,0,0,.18);

  --am-radius: 20px;
  --am-radius-sm: 14px;

  --am-shadow: 0 20px 50px rgba(0,0,0,.08);
  --am-shadow-soft: 0 12px 30px rgba(0,0,0,.06);

  /* Button: Apple blue */
  --am-blue:#0071e3;
  --am-blue2:#0077ed;

  background: var(--am-bg) !important;
  color: var(--am-ink) !important;
  direction: rtl !important;
  text-align: right !important;

  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text",
               Segoe UI, Roboto, Arial, "Noto Sans Arabic", "Noto Kufi Arabic", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reset local */
.mcp-page, .mcp-page *{ box-sizing:border-box; }
.mcp-page img{ max-width:100%; height:auto; display:block; }

/* Topbar: minimal (plus de jaune) */
.mcp-topbar{
  background: rgba(255,255,255,.72) !important;
  border-bottom: 1px solid var(--am-line) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 10px 0 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--am-muted) !important;
}
.mcp-topbar div{ opacity:1 !important; }
@keyframes mcp-mq{
  0%{transform:translateX(30%);}
  100%{transform:translateX(-130%);}
}

/* Shell */
.mcp-shell{
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 16px 12px 36px !important;
}

/* HERO layout: clean, spacing */
.mcp-hero{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  display:grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important;
  gap: 14px !important;
}

/* Cards: white, thin border, soft shadow */
.mcp-media, .mcp-info, .mcp-section{
  background: var(--am-card) !important;
  border: 1px solid var(--am-line) !important;
  border-radius: var(--am-radius) !important;
  box-shadow: var(--am-shadow-soft) !important;
}

/* Media card */
.mcp-media{ padding: 14px !important; }
.mcp-main{
  border:0 !important;
  background: transparent !important;
  border-radius: var(--am-radius) !important;
  overflow:hidden !important;
}
.mcp-main img{
  width:100% !important;
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
  border-radius: var(--am-radius) !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s cubic-bezier(.2,.8,.2,1) !important;
}
.mcp-main img:hover{ transform: scale(1.02) !important; filter: saturate(1.02); }

/* Gallery thumbs: minimal */
.mcp-gallery{ margin-top: 12px !important; }
.mcp-gallery-grid{
  display:flex !important;
  gap:10px !important;
  overflow-x:auto !important;
  padding: 2px 2px 10px !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling:touch;
}
.mcp-thumb{
  flex: 0 0 auto !important;
  width: 80px !important;
  aspect-ratio: 1/1 !important;
  border-radius: 16px !important;
  border: 1px solid var(--am-line) !important;
  background: var(--am-soft) !important;
  opacity: .9 !important;
  cursor:pointer !important;
  scroll-snap-align: start !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1), opacity .2s ease !important;
}
.mcp-thumb:hover{
  opacity:1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.10) !important;
}
.mcp-thumb.is-active{
  opacity:1 !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,.16) !important;
}

/* Scrollbar very subtle */
.mcp-gallery-grid::-webkit-scrollbar{ height:6px; }
.mcp-gallery-grid::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius:999px; }
.mcp-gallery-grid::-webkit-scrollbar-track{ background: transparent; }

/* Info card */
.mcp-info{
  padding: 16px !important;
  display:flex !important;
  flex-direction:column !important;
  gap: 10px !important;
}

/* Pill: make it Apple-like (quiet) */
.mcp-pill{
  background: rgba(0,0,0,.06) !important;
  color: var(--am-ink) !important;
  border: 1px solid var(--am-line) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  box-shadow:none !important;
}

/* Title / Subtitle: typography first */
.mcp-title{
  font-size: 26px !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
  margin: 0 !important;
  color: var(--am-ink) !important;
}
.mcp-sub{
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  color: var(--am-muted) !important;
}

/* Badges: turn into minimal “chips” */
.mcp-badges{ gap: 8px !important; }
.mcp-badge{
  background: rgba(0,0,0,.04) !important;
  border: 1px solid var(--am-line) !important;
  border-radius: 999px !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
  color: var(--am-muted) !important;
}

/* Price: clean, no green screaming */
.mcp-pricebox{
  padding: 12px !important;
  border: 1px solid var(--am-line) !important;
  border-radius: var(--am-radius) !important;
  background: #fff !important;
  gap: 10px !important;
}
.mcp-price{
  font-size: 28px !important;
  font-weight: 850 !important;
  color: var(--am-ink) !important;
}
.mcp-old{
  font-size: 13px !important;
  color: var(--am-muted) !important;
  text-decoration: line-through !important;
  opacity: .9 !important;
}
.mcp-offer{
  margin-inline-start:auto !important;
  background: rgba(0,0,0,.06) !important;
  color: var(--am-ink) !important;
  border: 1px solid var(--am-line) !important;
  font-weight: 750 !important;
  font-size: 12px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
}

/* USP: simple blocks */
.mcp-usps{
  margin-top: 2px !important;
  gap: 10px !important;
}
.mcp-usp{
  border: 1px solid var(--am-line) !important;
  background: rgba(0,0,0,.02) !important;
  border-radius: var(--am-radius) !important;
  padding: 10px 12px !important;
  font-size: 13.5px !important;
  color: var(--am-ink) !important;
}
.mcp-usp i{ opacity:.85; }

/* Form: Apple card */
.mcp-formcard{
  margin-top: 12px !important;
  background: #fff !important;
  border: 1px solid var(--am-line) !important;
  border-radius: var(--am-radius) !important;
  box-shadow: var(--am-shadow) !important;
  overflow:hidden !important;
}
.mcp-formcard:before{ display:none !important; }

.mcp-formtitle{
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: var(--am-ink) !important;
  margin-bottom: 6px !important;
}
.mcp-formsub{
  font-size: 13px !important;
  color: var(--am-muted) !important;
}

/* Fields: white, thin border, calm focus */
.mcp-field .mcp-ico{
  left: 12px !important;
  right: auto !important;
  background: rgba(0,0,0,.04) !important;
  border: 1px solid var(--am-line) !important;
  border-radius: 12px !important;
  color: var(--am-ink) !important;
}
.mcp-field input,
.mcp-field select{
  background:#fff !important;
  border:1px solid var(--am-line) !important;
  border-radius: 16px !important;
  padding-left: 52px !important;
  padding-right: 12px !important;
  font-size: 14px !important;
  color: var(--am-ink) !important;
  transition: box-shadow .25s cubic-bezier(.2,.8,.2,1), border-color .25s cubic-bezier(.2,.8,.2,1) !important;
}
.mcp-field input::placeholder{ color: rgba(110,110,115,.85) !important; }
.mcp-field input:focus,
.mcp-field select:focus{
  outline:none !important;
  border-color: rgba(0,0,0,.25) !important;
  box-shadow: 0 0 0 4px rgba(0,0,0,.08) !important;
}

/* Delivery options: minimal segmented feel */
.mcp-delivery{
  gap: 10px !important;
}
.mcp-delivery__opt{
  background: rgba(0,0,0,.03) !important;
  border: 1px solid var(--am-line) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  box-shadow:none !important;
}
.mcp-delivery__opt:hover{
  background: rgba(0,0,0,.05) !important;
  border-color: rgba(0,0,0,.18) !important;
}
.mcp-delivery__opt:after{
  border-color: rgba(0,0,0,.22) !important;
}
.mcp-delivery__opt:has(input:checked){
  background:#fff !important;
  border-color: rgba(0,0,0,.22) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08) !important;
}
.mcp-delivery__opt:has(input:checked):after{
  border-color: rgba(0,0,0,.55) !important;
  background: rgba(0,0,0,.55) !important;
}

/* Qty: calm controls */
.mcp-qty .mcp-qtybox{
  border:1px solid var(--am-line) !important;
  background:#fff !important;
  border-radius: 16px !important;
}
.mcp-qty .mcp-qtybtn{
  background: rgba(0,0,0,.04) !important;
  border:1px solid var(--am-line) !important;
  border-radius: 14px !important;
  transition: transform .15s ease, background .15s ease !important;
}
.mcp-qty .mcp-qtybtn:hover{ background: rgba(0,0,0,.06) !important; transform: translateY(-1px); }
.mcp-qty .mcp-qtyinput{
  color: var(--am-ink) !important;
}

/* CTA button: Apple blue, simple */
.mcp-btn{
  border-radius: 999px !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  background: linear-gradient(180deg, var(--am-blue2), var(--am-blue)) !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 18px 40px rgba(0,113,227,.25) !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1) !important;
}
.mcp-btn:before{ display:none !important; }
.mcp-btn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 24px 60px rgba(0,113,227,.28) !important;
}
.mcp-btn small{
  opacity:.9 !important;
  font-weight:700 !important;
}

/* Sections bottom: minimal */
.mcp-section{
  margin-top: 12px !important;
  padding: 16px 14px !important;
}
.mcp-section h2{
  font-size: 15px !important;
  font-weight: 850 !important;
  color: var(--am-ink) !important;
}
.mcp-text{
  font-size: 14px !important;
  line-height: 1.95 !important;
  color: var(--am-muted) !important;
}

/* Steps: simple cards */
.mcp-steps{ gap: 10px !important; }
.mcp-step{
  background: rgba(0,0,0,.02) !important;
  border: 1px solid var(--am-line) !important;
  border-radius: var(--am-radius) !important;
  padding: 12px !important;
  color: var(--am-ink) !important;
}
.mcp-step b{
  font-weight: 850 !important;
  color: var(--am-ink) !important;
}

/* Lightbox: clean */
.mcp-lightbox{ background: rgba(0,0,0,.78) !important; }
.mcp-lightbox-inner img{
  border-radius: 22px !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.55) !important;
}
.mcp-lightbox-close{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  color: var(--am-ink) !important;
}

/* Responsive */
@media (max-width: 980px){
  .mcp-hero{ grid-template-columns: 1fr !important; }
  .mcp-title{ font-size: 23px !important; }
}
@media (max-width: 640px){
  .mcp-shell{ padding: 12px 10px 26px !important; }
  .mcp-main img{ aspect-ratio: 4/5 !important; }
  .mcp-thumb{ width: 74px !important; }
  .mcp-form .mcp-row-2{ grid-template-columns: 1fr !important; }
  .mcp-field input, .mcp-field select{ font-size: 16px !important; } /* anti-zoom iOS */
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .mcp-main img, .mcp-thumb, .mcp-btn{ transition:none !important; }
  .mcp-topbar div{ animation:none !important; }
}