/* ==== MIOR Checkout – base (compatible OPI) ==== */
#mior-form, #opi-form {
  /* variables overridées depuis l’admin (wp_head) */
  --mior-primary: #b3004b;
  --mior-primary-hover: #a00044;
  --mior-surface: #faf9fa;
  --mior-border: #ccc;
  --mior-radius: 8px;
}

#mior-form, #opi-form {
  direction: rtl;
  text-align: right;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

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

.mior-summary, .opi-summary {
  width:100%; text-align:center; margin-top:20px; font-size:20px; line-height:2;
}

/* Bouton principal */
.mior-submit, .opi-submit {
  display:block; margin:20px auto 0;
  background-color: var(--mior-primary);
  color:#fff; padding:14px 28px; font-size:16px; font-weight:bold;
  border:none; border-radius: var(--mior-radius);
  width:100%; max-width:680px; cursor:pointer; transition:.3s ease-in-out;
}
.mior-submit:hover, .opi-submit:hover {
  background-color: var(--mior-primary-hover);
  transform: scale(1.03);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}

/* Inputs */
input[name="shipping_address"],
#mior-form input, #mior-form select,
#opi-form  input, #opi-form  select {
  width:100%; padding:12px; border:1px solid var(--mior-border);
  border-radius:6px; font-size:15px; direction:rtl; text-align:right; box-sizing:border-box;
}

/* 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;
  padding:10px; border-radius:8px; border:2px solid transparent; transition:all .3s ease;
  cursor:pointer; width:100%; font-weight:500; white-space:nowrap;
  background: var(--mior-surface); color:#7c7c7c;
}
.mior-livraison input[type="radio"], .opi-livraison input[type="radio"] {
  accent-color: var(--mior-primary);
  width:20px; height:20px; margin-left:8px; margin-right:0; cursor:pointer;
}
.mior-livraison label:has(input[type="radio"]:checked),
.opi-livraison  label:has(input[type="radio"]:checked) {
  border:2px solid var(--mior-primary);
  background:#ffe9f3; color:#222;
}

/* Selects */
#mior-form select, #opi-form select {
  padding:12px 16px 12px 38px;
  border:1.5px solid #eee; border-radius:10px; font-size:17px;
  background:#faf9fa; color:#444; font-family:"Tajawal","Cairo",sans-serif;
  appearance:none; outline:none; margin-bottom:15px; line-height:1.8; height:48px;
  transition:border .2s, background .2s; cursor:pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg width='20' height='20' fill='gray' xmlns='http://www.w3.org/2000/svg'><polygon points='6,8 14,8 10,14' /></svg>");
  background-repeat:no-repeat; background-position:left 12px center; background-size:18px 18px;
}

/* Quantité */
.mior-qty-wrapper, .opi-qty-wrapper {
  display:flex; justify-content:center; align-items:center; background:#fff; border:none; box-shadow:none;
  overflow:hidden; width:fit-content; margin-top:20px; font-family:'Tajawal','Cairo',sans-serif;
}
.mior-qty-btn, .mior-qty-display, .opi-qty-btn, .opi-qty-display {
  height:45px; width:50px; font-size:20px; font-weight:bold; display:flex; align-items:center; justify-content:center; user-select:none; box-sizing:border-box;
}
.mior-qty-btn, .opi-qty-btn { background:#fff; cursor:pointer; transition:background .2s ease; border:1px solid #ccc; font-size:26px; color:#000; }
.mior-qty-btn:hover, .opi-qty-btn:hover { background:#f0f0f0; }
.mior-qty-display, .opi-qty-display { background:transparent; border:none; box-shadow:none; color:#000; }
.mior-qty-wrapper .mior-qty-btn:first-child, .opi-qty-wrapper .opi-qty-btn:first-child { border-right:none; }
.mior-qty-wrapper .mior-qty-btn:last-child,  .opi-qty-wrapper .opi-qty-btn:last-child  { border-left:none; }
#mior-quantity, #opi-quantity { user-select:none; }

/* Vibrate */
@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:45px; height:42px; font-size:18px; }
}

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