/* ==========================================================
   MIOR Checkout PRO — PRODUCT PAGE POLISH (RTL)
   ✅ Button + Qty less cramped
   ✅ Works with #mior-form / #opi-form
   Paste in: WP Customizer → Additional CSS
   ========================================================== */

#mior-form, #opi-form{
  --mior-primary: var(--mior-primary, #19a463);
  --mior-primary-hover: var(--mior-primary-hover, #0f8b54);
  --mior-accent: var(--mior-accent, var(--mior-primary));
  --mior-surface: var(--mior-surface, #ffffff);
  --mior-input-bg: var(--mior-input-bg, #ffffff);
  --mior-text: var(--mior-text, #0f172a);
  --mior-label: var(--mior-label, #334155);
  --mior-btn-text: var(--mior-btn-text, #ffffff);
  --mior-radius: var(--mior-radius, 14px);
  --mior-font-size: var(--mior-font-size, 16px);

  --mior-line: rgba(15,23,42,.10);
  --mior-soft: #f6f9f7;
  --mior-border: rgba(15,23,42,.10);
  --mior-shadow: 0 14px 30px rgba(15,23,42,.08);
  --mior-focus: 0 0 0 4px rgba(25,164,99,.12);

  direction: rtl !important;
  text-align: right !important;
  font-family: "Tajawal","Cairo",sans-serif !important;
  color: var(--mior-text) !important;
  font-size: var(--mior-font-size) !important;

  background: var(--mior-surface) !important;
  border: 1px solid var(--mior-border) !important;
  border-radius: var(--mior-radius) !important;
  box-shadow: var(--mior-shadow) !important;
  padding: 14px !important;
  box-sizing: border-box !important;

  display:block !important;
}

#mior-form *, #opi-form *{ direction: rtl; }

/* ------------------------------------------
   Rows / cols
------------------------------------------ */
.mior-row, .opi-row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap: 12px !important;
  margin: 0 !important;
}
.mior-col, .opi-col{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  min-width: 0 !important;
}
.mior-row .mior-col, .opi-row .opi-col{
  flex: 1 1 calc(50% - 12px) !important;
}
@media (max-width:520px){
  .mior-row .mior-col, .opi-row .opi-col{ flex: 1 1 100% !important; }
}

/* ------------------------------------------
   Labels
------------------------------------------ */
#mior-form label, #opi-form label{
  color: var(--mior-label) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: .2px !important;
}

/* ------------------------------------------
   Inputs
------------------------------------------ */
#mior-form input,
#mior-form select,
#mior-form textarea,
#opi-form input,
#opi-form select,
#opi-form textarea{
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 12px !important;           /* ✅ slightly smaller */
  border-radius: 12px !important;
  border: 2px solid rgba(15,23,42,.10) !important;
  background: var(--mior-input-bg) !important;
  color: var(--mior-text) !important;
  font-size: 15px !important;
  text-align: right !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
  outline: none !important;
}
#mior-form input:focus,
#mior-form select:focus,
#mior-form textarea:focus,
#opi-form input:focus,
#opi-form select:focus,
#opi-form textarea:focus{
  border-color: var(--mior-primary) !important;
  box-shadow: var(--mior-focus) !important;
}
#mior-form ::placeholder,
#opi-form ::placeholder{
  color: rgba(15,23,42,.35) !important;
}

/* Select arrow RTL */
#mior-form select,
#opi-form select{
  height: 46px !important;                 /* ✅ a bit shorter */
  appearance:none !important;
  cursor:pointer !important;
  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>") !important;
  background-repeat:no-repeat !important;
  background-position:left 12px center !important;
  background-size:18px 18px !important;
  padding-left:40px !important;
}

/* ------------------------------------------
   Livraison cards
------------------------------------------ */
.mior-livraison, .opi-livraison{
  display:flex !important;
  gap: 10px !important;
  align-items:center !important;
  margin: 2px 0 0 !important;
  flex-wrap: wrap !important;
}
.mior-livraison label, .opi-livraison label{
  flex: 1 1 calc(50% - 10px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 12px !important;           /* ✅ less tall */
  border-radius: 12px !important;
  background: var(--mior-soft) !important;
  border: 1px solid var(--mior-line) !important;
  color: var(--mior-text) !important;
  font-weight: 900 !important;
  cursor:pointer !important;
}
.mior-livraison input[type="radio"],
.opi-livraison input[type="radio"]{
  width: 18px !important;
  height: 18px !important;
  cursor:pointer !important;
  accent-color: var(--mior-accent) !important;
}
.mior-livraison label:has(input[type="radio"]:checked),
.opi-livraison label:has(input[type="radio"]:checked){
  border-color: rgba(25,164,99,.55) !important;
  background: rgba(25,164,99,.10) !important;
}

/* ------------------------------------------
   Coupon inline
------------------------------------------ */
#mior-form .mior-coupon-inline,
#opi-form .mior-coupon-inline{
  display:flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
#mior-form .mior-coupon-label,
#opi-form .mior-coupon-label{
  font-size: 12px !important;
  color: rgba(15,23,42,.55) !important;
  font-weight: 800 !important;
}

/* ------------------------------------------
   CTA ROW (less cramped)
------------------------------------------ */
#mior-form .mior-cta-row,
#opi-form .mior-cta-row{
  display:flex !important;
  align-items:stretch !important;
  justify-content: space-between !important;
  gap: 14px !important;                    /* ✅ more air */
  flex-wrap: nowrap !important;
  margin-top: 10px !important;
}

/* Button: smaller padding + no overflow */
#mior-form .mior-cta-row .mior-submit,
#opi-form .mior-cta-row .opi-submit,
#mior-form .mior-cta-row button[type="submit"],
#opi-form .mior-cta-row button[type="submit"]{
  border: none !important;
  cursor: pointer !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border-radius: 14px !important;
  padding: 14px 14px !important;           /* ✅ smaller */
  background: linear-gradient(135deg, var(--mior-primary), var(--mior-primary-hover)) !important;
  box-shadow: 0 12px 22px rgba(25,164,99,.20) !important; /* ✅ softer */
  color: var(--mior-btn-text) !important;
  font-weight: 900 !important;
  font-size: 16px !important;              /* ✅ slightly smaller */
  letter-spacing: .2px !important;
  white-space: nowrap !important;
}

/* Qty: make it compact */
#mior-form .mior-qty-wrapper,
#opi-form .mior-qty-wrapper{
  flex: 0 0 150px !important;              /* ✅ smaller than 170 */
  width: 150px !important;
  min-width: 150px !important;
  display:inline-flex !important;
  align-items:stretch !important;
  justify-content:center !important;
  flex-wrap: nowrap !important;
  border-radius: 12px !important;
  overflow:hidden !important;
  background:#fff !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  height: 46px !important;                 /* ✅ match select */
}

#mior-form .mior-qty-btn,
#opi-form .mior-qty-btn{
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  border: none !important;
  background:#fff !important;
  color: var(--mior-text) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  cursor:pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding: 0 !important;
}

#mior-form .mior-qty-display,
#opi-form .mior-qty-display{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 46px !important;
  padding: 0 !important;
  text-align:center !important;
  font-weight: 900 !important;
  background:#fff !important;
  color: var(--mior-text) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#mior-form #mior-quantity,
#opi-form #mior-quantity{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width: 100% !important;
  height: 46px !important;
  line-height: 46px !important;
  white-space: nowrap !important;
}

/* ------------------------------------------
   Summary: add spacing from buttons
------------------------------------------ */
.mior-summary, .opi-summary{
  margin-top: 12px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
}
.mior-summary > div,
.opi-summary > div{
  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 6px 0 !important;
  border-bottom: 1px dashed rgba(15,23,42,.10) !important;
}
.mior-summary > div:last-child,
.opi-summary > div:last-child{ border-bottom: none !important; }
.mior-summary strong, .opi-summary strong{
  font-weight: 900 !important;
  color: var(--mior-primary) !important;
}

/* ------------------------------------------
   Mobile: keep row on normal phones, stack on tiny
------------------------------------------ */
@media (max-width: 520px){
  #mior-form .mior-cta-row,
  #opi-form .mior-cta-row{
    gap: 12px !important;
  }
}
@media (max-width: 380px){
  #mior-form .mior-cta-row,
  #opi-form .mior-cta-row{
    flex-wrap: wrap !important;
  }
  #mior-form .mior-qty-wrapper,
  #opi-form .mior-qty-wrapper{
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
}

/* ==========================================================
   MIOR — FORCE CTA ROW (Button + Qty) — ULTRA SPECIFIC
   Paste THIS at the very bottom of Additional CSS
   ========================================================== */

/* Debug: if you see the red border, CSS is applying */
html body.single-product #mior-form .mior-cta-row,
html body.single-product #opi-form  .mior-cta-row{
  outline: 2px solid red !important;      /* ✅ remove later */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  margin-top: 10px !important;
}

/* Force button sizing */
html body.single-product #mior-form .mior-cta-row > button.mior-submit,
html body.single-product #mior-form .mior-cta-row > button[type="submit"],
html body.single-product #opi-form  .mior-cta-row > button.opi-submit,
html body.single-product #opi-form  .mior-cta-row > button[type="submit"]{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  padding: 14px 14px !important;
  border-radius: 14px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Force qty wrapper to stay compact and not crush the button */
html body.single-product #mior-form .mior-cta-row > .mior-qty-wrapper,
html body.single-product #opi-form  .mior-cta-row > .mior-qty-wrapper{
  flex: 0 0 150px !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

/* If something is forcing block layout on children, kill it */
html body.single-product #mior-form .mior-cta-row > * ,
html body.single-product #opi-form  .mior-cta-row > * {
  float: none !important;
  clear: none !important;
}

/* Mobile fallback */
@media (max-width: 380px){
  html body.single-product #mior-form .mior-cta-row,
  html body.single-product #opi-form  .mior-cta-row{
    flex-wrap: wrap !important;
  }
  html body.single-product #mior-form .mior-cta-row > .mior-qty-wrapper,
  html body.single-product #opi-form  .mior-cta-row > .mior-qty-wrapper{
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}