/* ==== MIOR Checkout – style harmonisé (compatible OPI) ==== */
#mior-form, #opi-form{
  /* Variables (peuvent être écrasées par l’admin) */
  --mior-primary: #0ea5e9;           /* accent boutons / radios */
  --mior-primary-hover: #0b90cf;
  --mior-surface: #f5fbff;           /* fond carte formulaire */
  --mior-border: #e5e7eb;
  --mior-ink: #0f172a;
  --mior-muted: #6b7280;
  --mior-radius: 16px;
  --mior-shadow: 0 12px 28px rgba(17,24,39,.08);
}

#mior-form, #opi-form{
  direction: rtl; text-align: right;
  width:100%; padding:18px; box-sizing:border-box;
  color:var(--mior-ink); background:linear-gradient(180deg, var(--mior-surface), #fff);
  border:1px solid var(--mior-border); border-radius:var(--mior-radius); box-shadow:var(--mior-shadow);
  font-family:"Tajawal","Cairo",system-ui,Segoe UI,Arial,sans-serif;
}

/* Layout */
.mior-row, .opi-row{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:14px }
.mior-col, .opi-col{ flex:1 1 48%; display:flex; flex-direction:column; }

/* Récapitulatif / mini-total */
.mior-summary, .opi-summary{
  width:100%; text-align:center; margin-top:16px; line-height:1.9; font-weight:700;
}
.mior-summary strong, .opi-summary strong{ color:#16a34a; font-weight:900 }

/* Bouton principal */
.mior-submit, .opi-submit{
  display:block; margin:18px auto 0;
  background:linear-gradient(135deg, #111827, #0b1220);
  color:#fff; padding:14px 24px; font-size:16px; font-weight:800;
  border:0; border-radius:14px; width:100%; max-width:680px; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.mior-submit:hover, .opi-submit:hover{ transform:translateY(-1px); filter:brightness(.98); box-shadow:0 10px 24px rgba(0,0,0,.18) }
.mior-submit:disabled, .opi-submit:disabled{ opacity:.6; cursor:not-allowed }

/* Champs */
input[name="shipping_address"],
#mior-form input, #mior-form select, #mior-form textarea,
#opi-form  input, #opi-form  select, #opi-form  textarea{
  width:100%; padding:12px 14px; border:1px solid var(--mior-border);
  border-radius:12px; font-size:15px; box-sizing:border-box; background:#fff; color:var(--mior-ink);
}
#mior-form input:focus, #mior-form select:focus, #mior-form textarea:focus,
#opi-form  input:focus, #opi-form  select:focus, #opi-form  textarea:focus{
  outline:none; border-color:#bae6fd; box-shadow:0 0 0 4px rgba(14,165,233,.15);
}

/* Sélecteurs (flèche custom) */
#mior-form select, #opi-form select{
  appearance:none; background:#fafafa; line-height:1.8; height:48px;
  padding:12px 16px 12px 38px; border:1.5px solid #eee; border-radius:12px; font-size:16px;
  background-image:url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='gray'><polygon points='6,8 14,8 10,14'/></svg>");
  background-repeat:no-repeat; background-position:left 12px center; background-size:18px 18px;
}

/* Livraison (cartes radio) */
.mior-livraison, .opi-livraison{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; width:100% }
.mior-livraison label, .opi-livraison label{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  background:#fff; color:var(--mior-muted);
  padding:12px; border-radius:12px; border:2px solid transparent; transition:all .18s ease; cursor:pointer; width:100%; white-space:nowrap;
  box-shadow:0 6px 16px rgba(17,24,39,.06);
}
.mior-livraison input[type="radio"], .opi-livraison input[type="radio"]{
  accent-color:var(--mior-primary); width:20px; height:20px; margin-left:8px; cursor:pointer;
}
.mior-livraison label:has(input[type="radio"]:checked),
.opi-livraison  label:has(input[type="radio"]:checked){
  border-color:var(--mior-primary); background:#eaf6ff; color:#111;
}

/* Fallback si :has() non supporté */
.mior-livraison input[type="radio"]:checked + span,
.opi-livraison  input[type="radio"]:checked + span{
  font-weight:700; color:var(--mior-primary);
}

/* Quantité — bloc bien visible */
.mior-qty-wrapper, .opi-qty-wrapper{
  display:flex; justify-content:center; align-items:center; width:fit-content;
  gap:0; margin:18px auto 8px; user-select:none; background:#fff; border:1px solid var(--mior-border);
  border-radius:12px; overflow:hidden; box-shadow:0 8px 18px rgba(17,24,39,.06);
  position:relative;
}
.mior-qty-wrapper::before, .opi-qty-wrapper::before{
  content:"🔢 الكميّة"; position:absolute; top:-22px; right:0; font-weight:700; font-size:13px; color:var(--mior-ink);
}
.mior-qty-btn, .opi-qty-btn,
.mior-qty-display, .opi-qty-display{
  height:46px; width:50px; display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:900; box-sizing:border-box;
}
.mior-qty-btn, .opi-qty-btn{
  background:var(--mior-primary); color:#fff; cursor:pointer; transition:filter .15s ease;
}
.mior-qty-btn:hover, .opi-qty-btn:hover{ filter:brightness(.95) }
.mior-qty-display, .opi-qty-display{
  background:#fff; color:#111; width:64px; font-size:18px; border-left:1px solid var(--mior-border); border-right:1px solid var(--mior-border);
}

/* Inputs number natifs (si présents) */
#mior-form input[type="number"], #opi-form input[type="number"]{
  text-align:center; font-weight:800; font-size:18px;
}
#mior-form input[type="number"]::-webkit-outer-spin-button,
#mior-form input[type="number"]::-webkit-inner-spin-button,
#opi-form  input[type="number"]::-webkit-outer-spin-button,
#opi-form  input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
#mior-form input[type="number"], #opi-form input[type="number"]{ -moz-appearance:textfield }

/* Étiquettes / aides */
#mior-form .help, #opi-form .help{ color:var(--mior-muted); font-size:13px }

/* Animation "vibrate" (état attention) */
@keyframes mior-vibrate{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px)} 50%{transform:translateX(2px)} 75%{transform:translateX(-1px)} }
.mior-submit.vibrate, .opi-submit.vibrate{ animation:mior-vibrate .6s ease-in-out infinite }

/* Mobile */
@media (max-width:480px){
  .mior-col, .opi-col{ flex:1 1 100% }
  .mior-livraison label, .opi-livraison label{ flex-direction:row-reverse; justify-content:space-between; font-size:15px; padding:10px 12px; white-space:normal }
  .mior-livraison input[type="radio"], .opi-livraison input[type="radio"]{ transform:scale(1.1); margin-left:10px }
  .mior-submit, .opi-submit{ font-size:15px; padding:12px 20px }
  .mior-summary, .opi-summary{ font-size:17px }
  #mior-form select, #opi-form select{ font-size:16px; padding:10px 14px 10px 36px }
  .mior-qty-btn, .opi-qty-btn, .mior-qty-display, .opi-qty-display{ width:48px; height:44px; font-size:18px }
}