/* WC Quote Request — front-end
   كل المسافات منطقية (inline/block) فالتخطيط بيتقلب لوحده في RTL. */

/* القيم دي بتتكتب من لوحة التحكم (ووكومرس ← طلب عرض سعر ← الأزرار).
   اللي هنا مجرد احتياطي لو الستايل المضمّن مانزلش. */
:root{
  --wcqr-wa:#25D366;  --wcqr-wa-text:#fff;  --wcqr-wa-hover:#128C7E;
  --wcqr-go:#7E1B1B;  --wcqr-go-text:#fff;  --wcqr-go-hover:#5F1010;
  --wcqr-r:6px;
  --wcqr-size:15px;
  --wcqr-pad:14px 28px;
  --wcqr-ink:#141210;
  --wcqr-line:rgba(20,18,16,.16);
  --wcqr-soft:rgba(20,18,16,.6);
  --wcqr-e:cubic-bezier(.16,1,.3,1);
}

/* ── الأزرار ──────────────────────────────────────────
   !important هنا مقصود ومش كسل: Woodmart بيصبغ كل <button>
   و<a class="button"> في الصفحة بخلفية وحشو وارتفاع أدنى،
   وانتقاؤه أقوى. من غير ده ألوان لوحة التحكم مابتوصلش —
   الزرار بيطلع رمادي الثيم مهما غيّرت اللون. */
.wcqr-btn,
button.wcqr-btn,
a.wcqr-btn{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:9px!important;
  padding:var(--wcqr-pad)!important;
  border:0!important;border-radius:var(--wcqr-r)!important;
  font-family:inherit!important;font-size:var(--wcqr-size)!important;
  font-weight:600!important;line-height:1!important;
  text-decoration:none!important;text-transform:none!important;letter-spacing:normal!important;
  width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;
  background-image:none!important;box-shadow:none!important;text-shadow:none!important;
  cursor:pointer!important;opacity:1!important;
  -webkit-appearance:none!important;appearance:none!important;
  transition:background-color .3s var(--wcqr-e),transform .3s var(--wcqr-e),opacity .2s!important;
}
.wcqr-btn::before,.wcqr-btn::after{content:none!important}
.wcqr-btn:hover{transform:translateY(-2px)!important}
.wcqr-btn:disabled{opacity:.6!important;cursor:default!important;transform:none!important}
.wcqr-btn .wcqr-ico{flex:none!important;margin:0!important}

/* الألوان — انتقاء مزدوج عشان يعلو على الثيم بأمان */
.wcqr-btn.wcqr-btn--wa,
a.wcqr-btn.wcqr-btn--wa,
button.wcqr-btn.wcqr-btn--wa{
  background-color:var(--wcqr-wa)!important;color:var(--wcqr-wa-text)!important;
}
.wcqr-btn.wcqr-btn--wa:hover,
.wcqr-btn.wcqr-btn--wa:focus-visible{
  background-color:var(--wcqr-wa-hover)!important;color:var(--wcqr-wa-text)!important;
}
.wcqr-btn.wcqr-btn--go,
a.wcqr-btn.wcqr-btn--go,
button.wcqr-btn.wcqr-btn--go{
  background-color:var(--wcqr-go)!important;color:var(--wcqr-go-text)!important;
  width:100%!important;
}
.wcqr-btn.wcqr-btn--go:hover,
.wcqr-btn.wcqr-btn--go:focus-visible{
  background-color:var(--wcqr-go-hover)!important;color:var(--wcqr-go-text)!important;
}
/* الأيقونة بتاخد لون النص — أيقونات الثيم بتقع على الأسود من غير ده */
.wcqr-btn .wcqr-ico{fill:currentColor!important}

/* زرار المنتج: تحت «أضف إلى طلبك» وبنفس عرضه */
.wcqr-product-wa{margin-block-start:12px!important;width:100%!important}

/* ── زرار الفتح ──────────────────────────────────────── */
.wcqr-cta{margin-block:clamp(16px,2.5vw,28px);text-align:center}
.wcqr-btn.wcqr-btn--lg{max-width:420px!important;margin-inline:auto!important}
.wcqr-cta__note{
  margin:10px 0 0;font-size:.8125rem;color:var(--wcqr-soft);line-height:1.7;
}

/* ── المودال ─────────────────────────────────────────── */
.wcqr-modal[hidden]{display:none}
.wcqr-modal{
  position:fixed;inset:0;z-index:999999;
  display:grid;place-items:center;padding:16px;
}
.wcqr-modal__veil{
  position:absolute;inset:0;background:rgba(18,16,14,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:wcqr-fade .25s var(--wcqr-e);
}
.wcqr-modal__box{
  position:relative;z-index:1;
  width:min(520px,100%);max-height:min(88vh,760px);overflow-y:auto;
  background:#fff;border-radius:calc(var(--wcqr-r) + 6px);
  padding:clamp(22px,3.5vw,34px);
  box-shadow:0 24px 70px rgba(18,16,14,.3);
  animation:wcqr-rise .32s var(--wcqr-e);
  -webkit-overflow-scrolling:touch;
}
@keyframes wcqr-fade{from{opacity:0}to{opacity:1}}
@keyframes wcqr-rise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

/* زرار الإغلاق — Woodmart بيصبغ كل <button> بحشو وخلفية وارتفاع أدنى،
   وبيغلب حتى على position. الانتقاء المزدوج + !important هنا مقصود:
   مش تحسين شكل، ده الفرق بين × في الركن ومربع أبيض فوق العنوان. */
.wcqr-modal .wcqr-modal__x,
.wcqr-modal button.wcqr-modal__x{
  position:absolute!important;
  inset-block-start:10px!important;
  inset-inline-end:10px!important;
  inset-inline-start:auto!important;
  inset-block-end:auto!important;
  z-index:2!important;
  width:36px!important;height:36px!important;
  min-width:0!important;min-height:0!important;max-width:none!important;
  margin:0!important;padding:0!important;
  display:grid!important;place-items:center!important;
  border:0!important;border-radius:50%!important;
  background:rgba(20,18,16,.06)!important;
  color:var(--wcqr-ink)!important;
  box-shadow:none!important;text-shadow:none!important;
  font-size:0!important;line-height:1!important;letter-spacing:normal!important;
  text-transform:none!important;text-decoration:none!important;
  cursor:pointer!important;opacity:1!important;
  -webkit-appearance:none!important;appearance:none!important;
  transform:none!important;transition:background .2s,color .2s!important;
}
.wcqr-modal .wcqr-modal__x:hover,
.wcqr-modal button.wcqr-modal__x:hover{
  background:rgba(20,18,16,.13)!important;color:var(--wcqr-ink)!important;
}
.wcqr-modal .wcqr-modal__x::before,
.wcqr-modal .wcqr-modal__x::after{content:none!important}

/* أيقونات الثيم/Elementor بتتصبغ أسود بلا stroke معلن — نفرض التيار */
.wcqr-modal .wcqr-modal__x svg{
  width:16px!important;height:16px!important;
  display:block!important;margin:0!important;
  fill:none!important;stroke:currentColor!important;
}

/* العنوان لازم يفضّي مكان للزرار وإلا بيركبوا على بعض في RTL */
.wcqr-panel > .wcqr-title,
.wcqr-done > h2{padding-inline-end:44px}

/* عدّاد القطع */
.wcqr-count{
  margin:0 0 16px;padding-block-end:14px;
  border-block-end:1px solid var(--wcqr-line);
  font-size:.875rem;color:var(--wcqr-soft);
}

/* قفل تمرير الصفحة ورا المودال */
html.wcqr-locked,html.wcqr-locked body{overflow:hidden!important}
.wcqr-title{
  margin:0 0 6px;font-size:clamp(1.15rem,2vw,1.45rem);font-weight:700;
  color:var(--wcqr-ink);line-height:1.4;
}
.wcqr-intro{margin:0 0 20px;color:var(--wcqr-soft);font-size:.9375rem;line-height:1.8}
.wcqr-title + .wcqr-form,.wcqr-count + .wcqr-form{margin-block-start:18px}

.wcqr-grid{
  display:grid;gap:14px 18px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.wcqr-field{margin:0;display:flex;flex-direction:column;gap:6px}
.wcqr-field--wide{grid-column:1/-1}
.wcqr-field label{
  font-size:.875rem;font-weight:500;color:var(--wcqr-ink);
  display:flex;align-items:center;gap:5px;
}
.wcqr-req{color:var(--wcqr-go);text-decoration:none;border:0}

/* انتقاء قوي كفاية يغلب ستايل حقول الثيم من غير !important */
.wcqr-form .wcqr-field input,
.wcqr-form .wcqr-field textarea{
  width:100%;box-sizing:border-box;margin:0;
  padding:11px 13px;font:400 15px/1.6 inherit;color:var(--wcqr-ink);
  background:#fff;border:1px solid var(--wcqr-line);border-radius:var(--wcqr-r);
  transition:border-color .25s var(--wcqr-e),box-shadow .25s var(--wcqr-e);
}
.wcqr-form .wcqr-field textarea{resize:vertical;min-height:84px}
.wcqr-form .wcqr-field input:focus,
.wcqr-form .wcqr-field textarea:focus{
  outline:0;border-color:var(--wcqr-go);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--wcqr-go) 18%,transparent);
}
.wcqr-form .wcqr-field .is-invalid{border-color:#c0392b;background:#fff8f7}

.wcqr-error{
  margin:16px 0 0;padding:11px 14px;border-radius:var(--wcqr-r);
  background:#fdeceb;border:1px solid #f0b4ae;color:#8a2119;
  font-size:.875rem;line-height:1.7;
}
.wcqr-error[hidden]{display:none}

.wcqr-form .wcqr-btn--go{margin-block-start:20px!important}

/* ── شاشة النجاح ─────────────────────────────────────── */
.wcqr-done[hidden]{display:none}
.wcqr-done{text-align:center}
.wcqr-done__ico{width:62px;height:62px;color:var(--wcqr-wa);margin-block-end:12px}
.wcqr-done h2{margin:0 0 8px;font-size:1.35rem;font-weight:700;color:var(--wcqr-ink)}
.wcqr-done p{margin:0 0 20px;color:var(--wcqr-soft);line-height:1.85}
/* لازم !important: القاعدة الأساسية فوق بتفرض display:inline-flex،
   ومن غيره الزرار المخفي بـ[hidden] بيفضل ظاهر. */
.wcqr-btn[hidden]{display:none!important}
.wcqr-done__back{margin:18px 0 0;font-size:.875rem}
.wcqr-done__back a{color:var(--wcqr-soft);text-decoration:underline}

@media (max-width:520px){
  .wcqr-grid{grid-template-columns:1fr}
  .wcqr-btn{width:100%!important}
  /* على الموبايل المودال بيبقى ورقة بتطلع من تحت — أريح للإبهام */
  .wcqr-modal{place-items:end center;padding:0}
  .wcqr-modal__box{
    width:100%;max-height:92vh;
    border-radius:calc(var(--wcqr-r) + 10px) calc(var(--wcqr-r) + 10px) 0 0;
    animation:wcqr-sheet .3s var(--wcqr-e);
  }
  @keyframes wcqr-sheet{from{transform:translateY(100%)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .wcqr-btn,.wcqr-form .wcqr-field input,.wcqr-form .wcqr-field textarea{transition:none!important}
  .wcqr-btn:hover{transform:none!important}
  .wcqr-modal__box,.wcqr-modal__veil{animation:none}
}