/* نموذج الطلب: نافذة وسط الشاشة بنفس لغة الموقع (أسود/ذهبي).
   النافذة داكنة في الوضعين، فتُستعمل رموز الذهب الفاتح الصالحة على الداكن. */
.order-open { width: 100%; }

/* النموذج فوق زر السلة العائم (z-index 70) دائماً، لا بالاعتماد على إخفائه. */
.om-scrim {
  position: fixed; inset: 0; background: rgba(10, 8, 6, .72);
  backdrop-filter: blur(3px); z-index: 85; opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.om-scrim.open { opacity: 1; pointer-events: auto; }

.om-card {
  position: fixed; z-index: 86; inset-inline: 0; margin: 0 auto;
  top: 3vh; bottom: 3vh; width: min(760px, 94vw);
  background: var(--panel, #14110D); color: #F6F0E6;
  border: 1px solid rgba(227, 183, 94, .35); border-radius: var(--r, 16px);
  display: none; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.om-card.open { display: flex; }

/* قواعد العرض الصريحة تتجاوز سمة hidden، فنؤكد الإخفاء داخل النافذة
   حتى تعمل حقول الظهر وخانة غرض الصورة الثانية كما هو مقصود. */
.om-card [hidden] { display: none !important; }

/* النافذة داكنة دائماً، فهذه القواعد تتجاوز ألوان وضع الموقع الفاتح حتى
   تبقى كل النصوص والحقول واضحة للزبون في الوضعين. الحقول النصية كلها
   موحّدة هنا، بما فيها حقول القطعة (الكمية والطول والأسماء). */
.om-card .field > span { color: rgba(246, 241, 233, .8); font-size: 15px; }
.om-card input:not([type="radio"]):not([type="checkbox"]),
.om-card select,
.om-card textarea {
  padding: 10px 12px; border-radius: 10px; font: inherit;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: #F6F1E9;
}
/* متصفح فيسبوك وإنستغرام على الآيفون يكبّر الصفحة عند لمس حقل خطّه أصغر من
   16px ولا يعيدها، فيختفي زر الإرسال. أقل حجم لكل حقل كتابة أو قائمة هو 16px،
   وما كان أكبر (حقول الاسم والهاتف) يبقى كما هو. */
.om-card input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.om-card select,
.om-card textarea { font-size: max(16px, 1em); }
.om-card input::placeholder, .om-card textarea::placeholder { color: rgba(246, 241, 233, .42); }
.om-card select option { background: #14120f; color: #F6F1E9; }

.om-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08); }
.om-head h2 { font-size: 18px; margin: 0; font-family: var(--font-display, serif); }
.om-head .spacer { flex: 1; }
/* هدف لمس لا يقل عن 44px للإغلاق على الهاتف. */
.om-x { background: none; border: 0; color: inherit; font-size: 26px;
  line-height: 1; cursor: pointer; padding: 0 6px; min-width: 44px; min-height: 44px;
  display: inline-grid; place-items: center; }

.om-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.om-foot { padding: 12px 18px; border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ملخّص أعلى النموذج: الإجمالي شاملاً التوصيل، ثم التوصيل والدفع بسطرين هادئين. */
.om-sum { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(227, 183, 94, .35); background: rgba(227, 183, 94, .07); }
.om-sum-total { margin: 0; font-size: 17px; font-weight: 700; color: var(--gold-hi, #F3D391); }
.om-sum-line { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; opacity: .88; }
/* الإجمالي بجانب زر الإرسال في الشريط الثابت. */
.om-foot-sum { font-size: 15px; white-space: nowrap; color: var(--gold-hi, #F3D391); }
.om-foot-sum b { font-weight: 700; }
.om-foot-sum small { font-size: 12px; opacity: .75; color: #F6F0E6; }
/* «اسأل على واتساب»: واتساب الثانوي (إطار أخضر، الأيقونة وحدها خضراء) بعد الزر الذهبي وإجماليه، بنص فاتح على
   النافذة الداكنة. يختفي ما دام «إرسال على واتساب» ظاهراً (بعد تعذّر الإرسال أو بعد الطلب): زر واتساب واحد. */
.om-card .om-ask { color: #F6F0E6; padding-inline: 18px; }
.om-foot .btn-wa:not([hidden]) ~ .om-ask { display: none; }
/* متجر الإمارات: سطر الموافقة على الشروط وسياسة الاسترجاع تحت زر الإرسال. */
.om-terms { flex-basis: 100%; margin: 0; font-size: 12.5px; line-height: 1.5; opacity: .8; }
.om-terms a { text-decoration: underline; text-underline-offset: 2px; }
/* متجر الأردن: موافقة الإعلانات الاختيارية تحت حقول التواصل (غير مختارة)، ونصها قد يلتف سطرين. */
.om-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: 14px;
  line-height: 1.6; cursor: pointer; }
.om-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--gold-bright, #E3B75E); }
.om-check a { text-decoration: underline; text-underline-offset: 2px; }

.om-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
/* minmax(0, 1fr): عمود التفاصيل لا يتمدد بعرض ما فيه (خانة رفع الصورة
   مثلاً)، فلا يفيض جسم النموذج عرضاً ولا تُقصّ الجهة اليمنى من كل صف. */
.om-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px;
  padding: 10px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; }
.om-line img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.om-line-code { font-weight: 700; }
.om-line-sub { font-size: 13px; opacity: .75; }
/* زر حذف السطر الذي جاء من «قائمة الطلب». */
.om-line-x { width: 28px; height: 28px; align-self: start; border: 0; border-radius: 50%;
  background: none; color: inherit; opacity: .6; font-size: 20px; line-height: 1;
  cursor: pointer; }
.om-line-x:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.om-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.om-opts label { display: flex; flex-direction: column; font-size: 15px; gap: 4px; }
/* حقل اسم النقش بعرض السطر كله، فيظهر الاسم الطويل كاملاً. */
.om-opts label.om-name-field { flex-basis: 100%; }
.om-opts label.om-name-field input { width: 100%; box-sizing: border-box; }
/* دليل الأطوال: سطر يُفتح بلمسة تحت قائمة الطول، والصورة داخله. */
.om-len-guide { flex-basis: 100%; font-size: 15px; }
.om-len-guide summary { cursor: pointer; padding: 11px 0; color: var(--gold-hi, #F3D391);
  text-decoration: underline; text-underline-offset: 3px; }
.om-len-guide img { display: block; width: 100%; max-width: 420px; height: auto;
  margin-top: 6px; border-radius: 10px; cursor: zoom-in; }
.om-len-avail { margin: 6px 0 0; font-size: 14px; opacity: .9; }
.om-opts input, .om-opts select { min-width: 84px; }
.om-qty { width: 70px; }

/* اختيار الطلي: قائمة واضحة بجانب الكمية، بعرض يكفي لأطول تسمية. */
.om-metal-wrap { min-width: 190px; }
.om-metal { min-width: 190px; }

/* النقش على الظهر: صف الخيار ثم حقول الأسماء تحته، وتبقى مخفية حتى يُختار. */
.om-back { flex-direction: row !important; align-items: center; gap: 10px;
  flex-basis: 100%; min-height: 44px; font-size: 15px; font-weight: 600; cursor: pointer; }
.om-back input { min-width: 0; width: 22px; height: 22px; flex: none;
  accent-color: var(--gold-bright, #E3B75E); }
.om-back-names { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.om-back-names label { display: flex; flex-direction: column; font-size: 15px; gap: 4px; }
/* عبارات علاقة المفاتيح الاختيارية: صف مستقل تحت الصورة أو الرقم. */
.om-phrases { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.om-phrases label { flex-basis: 100%; }
.om-opts .om-phrase { min-width: 0; width: 100%; box-sizing: border-box; }
/* توضيح الاسمين: نص صغير تحت حقلي الاسم مباشرة. */
.om-name-hint { flex-basis: 100%; margin: 2px 0 0; font-size: 14px; opacity: .9; }

.om-fields { display: flex; flex-direction: column; gap: 12px; }
.om-fields .field { display: flex; flex-direction: column; gap: 5px; }

/* ملاحظة التأكيد قبل الإجمالي: سطر هادئ لا ينافس الأزرار. */
.om-note { margin: 14px 0 0; padding: 10px 12px; font-size: 13px; line-height: 1.6;
  border: 1px dashed rgba(255, 255, 255, .16); border-radius: 10px; opacity: .85; }

/* صور التغليف كبيرة ومربعة ليراها الزبون بوضوح، والاسم والسعر تحتها. */
.om-pack { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.om-pack label { display: flex; flex-direction: column; gap: 10px; padding: 10px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease; }
.om-pack label.on { border-color: var(--gold-bright, #E3B75E); box-shadow: 0 0 0 1px var(--gold-bright, #E3B75E) inset; }
.om-pack img { display: block; width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.om-pack-info { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; }
.om-pack-info input { flex: none; margin: 3px 0 0; accent-color: var(--gold-bright, #E3B75E); }
.om-pack-info > span { min-width: 0; }
.om-pack b { display: block; font-size: 14px; }
.om-pack i { font-size: 12.5px; opacity: .75; font-style: normal; }

/* خانات الصور لكل سلسلة: عمود هادئ، والغرض يظهر بعد رفع الصورة الثانية. */
.om-photos { display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
  flex-basis: 100%; min-width: 0; }
.om-photo { display: flex; flex-direction: column; gap: 5px; }
.om-photo-title { font-size: 15px; font-weight: 600; }
.om-photo-hint { margin: 0; font-size: 14px; opacity: .85; }
/* زر اختيار الصورة: عريض وواضح، وخانة الملف الشفافة تغطيه كله. */
.om-opts .om-photo-pick { position: relative; display: flex; flex-direction: row;
  align-items: center; justify-content: center;
  min-height: 52px; padding: 8px 14px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--gold-bright, #E3B75E); background: rgba(227, 183, 94, .08);
  color: var(--gold-hi, #F3D391); font-size: 16px; font-weight: 700; text-align: center; }
.om-photo-pick:focus-within { outline: 2px solid var(--gold-hi, #F3D391); outline-offset: 2px; }
.om-photo-pick.om-invalid:focus-within { outline-color: #ff8a80; }
.om-card .om-photo-pick input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 16px; }
.om-photo-thumb { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
/* خانة الملف لا تتجاوز عرض عمودها أبداً (هي الآن شفافة فوق زر الصورة). */
.om-card input[type="file"] { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
/* سطر حالة الصورة: اسم الملف ثم زر حذفه، فلا يبقى الزبون عالقاً بصورة بالخطأ. */
/* min-width: 0 هنا وعلى خانات الصور: اسم ملف طويل يُقصّ بنقاط ولا يوسّع القسم خارج بطاقته. */
.om-photo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.om-photo-thumb:not([hidden]) + .om-photo-name { display: none; }
.om-photo-name { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; font-size: 13px; opacity: .7; }
.om-photo-clear { flex: none; min-height: 40px; padding: 5px 14px;
  font: inherit; font-size: 14px; cursor: pointer; border-radius: 8px;
  border: 1px solid rgba(255, 138, 128, .45);
  background: rgba(255, 138, 128, .12); color: #FFB4AB; }
.om-photo-clear:hover { background: rgba(255, 138, 128, .2); }
.om-photo-purpose { display: flex; flex-direction: column; gap: 5px; }
.om-photo-purpose > span { font-size: 15px; opacity: .9; }
.om-photo-purpose select { padding: 8px 10px; border-radius: 10px; }

/* النافذة داكنة في الوضعين: لون ثابت لا --ink-3 الذي يصير بنياً داكناً في الوضع الفاتح (3.1:1 على الخلفية). */
.om-delivery { margin: 14px 0 0; font-size: 14px; color: #A99A82; }
.om-total { font-size: 17px; font-weight: 700; margin: 16px 0 6px; color: var(--gold-hi, #F3D391); }
.om-delivery + .om-total { margin-top: 6px; }
/* سبب رفض الإرسال: سطر كامل فوق زر الإرسال في الشريط الثابت، والحقل المعني
   بإطار أحمر حتى يُصحَّح. */
.om-err { flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 600;
  line-height: 1.5; color: #ff8a80; }
.om-card .om-invalid { border-color: #ff8a80 !important;
  box-shadow: 0 0 0 2px rgba(255, 138, 128, .35); }
.om-msg { min-height: 20px; font-size: 14px; margin: 8px 0 0; }
.om-msg.ok { color: #7ddc8a; }
.om-msg.bad { color: #ff8a80; }
/* طلب محفوظ كما أُرسل أولاً وتعديل الزبون لم يصله: تنبيه واضح لا رسالة نجاح،
   وملخّص النموذج (المحسوب من التعديل) يُخفى فلا يناقض إجمالي الطلب المحفوظ. */
.om-msg.warn { color: #ffd27d; font-weight: 600; line-height: 1.6; }
.om-card.om-kept .om-sum,
.om-card.om-kept .om-delivery,
.om-card.om-kept .om-total { display: none !important; }

/* كتلة الدفع بعد نجاح الطلب: يراها الزبون فوراً، فلا يبحث عن طريقة الدفع. */
.om-pay { margin: 12px 0 0; padding: 12px 14px; border: 1px solid rgba(240,112,0,.35);
          border-radius: 12px; background: rgba(240,112,0,.06); }
.om-pay h3 { margin: 0 0 8px; font-size: 15px; color: var(--gold-hi, #F3D391); }
.om-pay-row { margin: 0 0 4px; font-size: 14px; }
.om-pay-k { opacity: .8; }
.om-pay-note { margin: 8px 0 0; font-size: 13px; opacity: .85; }
/* العربون: الباقي نقداً عند الاستلام، أوضح من الملاحظة التي تحته */
.om-pay-rest { margin: 10px 0 0; font-size: 14.5px; font-weight: 700; }
.om-pay-wa { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 600;
             color: var(--gold-hi, #F3D391); text-decoration: underline; }

@media (max-width: 560px) {
  .om-card { top: 0; bottom: 0; width: 100vw; border-radius: 0; }
  /* الجوال: «متابعة للدفع» وإجماليه سطراً، ثم سطر الموافقة، ثم «اسأل على واتساب» رابطاً خفيفاً في سطر قصير
     (لا زراً أعرض من زر الدفع)، فلا يكبر الشريط الثابت إلا سطراً صغيراً. */
  .om-card .om-ask { order: 1; flex-basis: 100%; min-height: 36px; padding: 4px 8px; border-color: transparent;
    font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
}

/* طريقة الدفع (الأردن): بطاقتان كالتغليف بلا صور، البطاقة مختارة والنقد بديل. */
.om-paypick { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.om-paypick label { gap: 0; }
.om-paypick i { display: block; margin-top: 2px; }
.om-paypick-h { grid-column: 1 / -1; margin: 6px 0 -4px; font-weight: 700; }

/* نمط الهدية (خطة الهدايا §6هـ): النافذة الداكنة نفسها بلمسة الورد المغبّر، وعناوين لأقسام النموذج
   (المُهدى إليه، المرسل، البطاقة، الموعد)، ورقاقات الحجم والطلي والفترة كبطاقات التغليف. */
.om-card.om-gift { border-color: rgba(217, 163, 168, .45); }
.og-h { margin: 10px 0 0; padding-top: 14px; border-top: 1px solid rgba(217, 163, 168, .22);
  font-family: var(--font-display, serif); font-size: 18px; font-weight: 700; color: #E7B9BE; }
.og-h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.og-line > .og-opts { grid-column: 1 / -1; margin-top: 0; }
/* حقول القطعة تأخذ عرضاً أدنى (.om-opts input)؛ أزرار الاختيار بحجمها الطبيعي. */
.og-opts input[type="radio"], .og-opts input[type="checkbox"] { min-width: 0; }
.og-sub { flex-basis: 100%; margin: 6px 0 0; font-size: 14.5px; font-weight: 700; opacity: .92; }
.og-chips { flex-basis: 100%; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.og-chips label, .og-slots label { gap: 0; padding: 10px 12px; border-radius: 12px; }
.og-chips i, .og-slots i { display: block; margin-top: 2px; }
/* نافذة الهدية داكنة في الوضعين: شريط التمرير ومربع «لا تذكروا اسمي» داكنان معها لا أبيضان. */
.om-card.om-gift { color-scheme: dark; }
.om-card.om-gift .om-pack label.on { border-color: #D9A3A8; box-shadow: 0 0 0 1px #D9A3A8 inset; }
.om-card.om-gift .om-pack-info input { accent-color: #D9A3A8; }
.og-slots { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.og-slots label.is-off { opacity: .45; cursor: not-allowed; }
.og-check { display: flex; flex-direction: row !important; align-items: center; gap: 10px;
  flex-basis: 100%; min-height: 44px; font-size: 15px; cursor: pointer; }
.og-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: #D9A3A8; }
.og-phone { display: flex; gap: 8px; }
.og-phone select { flex: 0 1 auto; max-width: 48%; }
.og-phone input { flex: 1; min-width: 0; }
/* الجوال: البلد ورمزه سطر كامل والرقم تحته، فلا يُقصّ «Saudi Arabia (+966)» ولا «السعودية (966)». */
@media (max-width: 420px) {
  .og-phone { flex-wrap: wrap; }
  .og-phone select { flex: 1 1 100%; max-width: none; }
}
.og-count { align-self: flex-end; font-size: 12.5px; opacity: .7; }
.og-count.is-over { color: #ff8a80; opacity: 1; }
/* «ورد مع سنسال»: الاسم ولغته في إطار وردي، والاسم تحته بخط النقش كما سيُنقش. */
.og-neck { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px;
  border: 1px dashed rgba(217, 163, 168, .45); border-radius: 12px; }
.og-neck-show { flex-basis: 100%; margin: 2px 0 0; min-height: 1.4em; text-align: center; color: #E7B9BE;
  font-family: var(--font-display, serif); font-size: 26px; line-height: 1.4; overflow-wrap: anywhere; }
.og-neck-show[lang="en"] { font-family: var(--font-latin, Georgia, serif); font-style: italic; }
.og-neck-show:empty { display: none; }
.og-hint { margin: 0; font-size: 15px; line-height: 1.6; opacity: .88; }
/* تصميم السنسال (طلب المالك 10/10/2026: أوضح حتى لكبار السن): شبكة صور كبيرة تلتفّ بلا تمرير أفقي، عمودان على
   الجوال وثلاثة على الأعرض وأربعة على الحاسوب، والرقم والسعر بخط كبير، والمختار بإطار سميك وشارة «✓ مختار». */
.og-design { flex-basis: 100%; display: grid; gap: 12px; min-width: 0; }
/* «ورد لوحده / مع سنسال» على أي باقة (طلب المالك 10/10/2026): زرّان كبيران بعرض السطر، وتحتهما التصميم وحقوله. */
.og-neck-sw { flex-basis: 100%; display: grid; gap: 8px; min-width: 0; }
.og-neck-sw .og-sub { margin-top: 10px; font-size: 17px; }
.og-neck-sw .og-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.om-opts .og-neck-sw .og-types label { justify-content: center; flex-wrap: wrap; gap: 2px 8px; min-height: 60px;
  border-radius: 14px; text-align: center; }
.og-neck-wrap { flex-basis: 100%; display: grid; gap: 12px; min-width: 0; }
.og-neck-wrap[hidden] { display: none; }
.og-dz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; min-width: 0; padding: 2px; }
@media (min-width: 440px) { .og-dz { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .og-dz { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.om-opts .og-dz label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  padding: 8px 8px 10px; border: 2px solid rgba(217, 163, 168, .32); border-radius: 14px; cursor: pointer;
  text-align: center; transition: border-color .15s, background .15s; }
.og-dz label:hover { border-color: rgba(217, 163, 168, .7); }
.og-dz label.on { border: 3px solid #F2C6CB; padding: 7px 7px 9px; background: rgba(217, 163, 168, .18); }
.og-dz-on { display: none; position: absolute; top: 6px; inset-inline-start: 6px; padding: 4px 10px; border-radius: 999px;
  background: #F2C6CB; color: #1A1012; font-size: 14px; font-weight: 700; line-height: 1.3; }
.og-dz label.on .og-dz-on { display: block; }
.og-dz label:has(input:focus-visible) { outline: 3px solid #F2C6CB; outline-offset: 3px; }
.og-dz input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.og-dz label img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px;
  background: rgba(255, 255, 255, .05); }
.og-dz b { font-size: 17px; line-height: 1.35; }
.og-dz i { font-size: 16px; font-style: normal; font-weight: 700; color: #F4D58C; white-space: nowrap; }
.og-more { justify-self: stretch; min-height: 52px; padding: 10px 18px; border: 2px solid rgba(217, 163, 168, .55);
  border-radius: 14px; background: rgba(217, 163, 168, .08); color: #F2C6CB; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.og-more:hover { background: rgba(217, 163, 168, .16); }
.og-more:focus-visible { outline: 3px solid #F2C6CB; outline-offset: 3px; }
/* سطر الاختيار: ما اختير وسعره بخط كبير في إطار ظاهر. */
.og-dz-now { margin: 0; padding: 12px 14px; border: 1px solid rgba(244, 213, 140, .45); border-radius: 12px;
  background: rgba(244, 213, 140, .08); color: #fff; font-size: 17px; font-weight: 700; line-height: 1.6; }
/* رقاقات نوع السنسال: أزرار كبيرة تلتفّ أسطراً فتظهر كلها حتى على 360px، والمختارة وردية، والعدد بجانب الاسم. */
.og-types { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.om-opts .og-types label { position: relative; display: inline-flex; flex-direction: row; align-items: center; gap: 8px;
  min-height: 48px; padding: 8px 16px; border: 2px solid rgba(217, 163, 168, .4); border-radius: 999px; cursor: pointer;
  font-size: 17px; transition: border-color .15s, background .15s; }
.og-types label:hover { border-color: rgba(217, 163, 168, .8); }
.og-types label.on { border-color: #F2C6CB; background: #F2C6CB; color: #1A1012; font-weight: 700; }
.og-types label:has(input:focus-visible) { outline: 3px solid #F2C6CB; outline-offset: 3px; }
.og-types input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.og-types i { font-size: 14px; font-style: normal; opacity: .8; }
/* حقول السنسال المختار من نموذج المجوهرات (الطلي، الأسماء، الظهر، الصور: om-*) بلون الورد وبعرض الإطار كله. */
.og-neck-fields { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.og-neck-fields:empty { display: none; }
.og-neck-fields .om-metal-wrap, .og-neck-fields .om-metal { flex: 1 1 100%; min-width: 0; }
.og-neck-fields .om-photos { flex-basis: 100%; margin-top: 2px; }
.og-neck-fields .om-back-names label { flex: 1 1 100%; }
.og-neck-fields .om-back-names input { width: 100%; box-sizing: border-box; }
.og-neck-fields label.om-name-field .og-count, .og-neck-fields .om-back-names .og-count { align-self: flex-end; }
.om-card.om-gift .og-neck .om-back input { accent-color: #D9A3A8; }
.om-card.om-gift .og-neck .om-photo-pick { border-color: #D9A3A8; background: rgba(217, 163, 168, .1); color: #F2D3D6; }
.om-card.om-gift .og-neck .om-photo-pick:focus-within { outline-color: #D9A3A8; }
.og-neck-sum { flex-basis: 100%; font-weight: 700; opacity: .95; color: #E7B9BE; }
.og-neck-sum:empty { display: none; }
/* كلمات جاهزة حسب المناسبة فوق البطاقة: قائمة المناسبة ثم ثلاث كلمات تُضغط فتملأ البطاقة. */
.og-ideas { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; }
.og-idea-list { display: grid; gap: 8px; }
.og-idea { min-height: 44px; padding: 10px 14px; border: 1px solid rgba(217, 163, 168, .35); border-radius: 12px;
  background: rgba(217, 163, 168, .06); color: inherit; font: inherit; font-family: var(--font-display, serif);
  font-size: 16px; line-height: 1.55; text-align: start; cursor: pointer; transition: border-color .2s, background .2s; }
.og-idea:hover { border-color: #D9A3A8; background: rgba(217, 163, 168, .12); }
.og-idea:focus-visible { outline: 2px solid #D9A3A8; outline-offset: 2px; }
/* «رجوع لكلماتك» بعد أن حلّت كلمات مقترحة محل ما كتبه المرسل. */
.og-undo { align-self: flex-start; min-height: 44px; padding: 8px 16px; border: 1px solid rgba(217, 163, 168, .45);
  border-radius: 999px; background: none; color: #E7B9BE; font: inherit; font-size: 14px; cursor: pointer; }
.og-undo:hover { background: rgba(217, 163, 168, .12); }
.og-undo:focus-visible { outline: 2px solid #D9A3A8; outline-offset: 2px; }

/* تسهيل النموذج (18/10/2026): صور التغليف أقصر فيقصر النموذج على الجوال. */
.om-card:not(.om-gift) .om-pack img { aspect-ratio: 4 / 3; }