/* ==========================================================================
   SERVA — صفحة طلب الخدمة (إعادة هيكلة 20260729)

   المبدأ المعماري:
     البطاقة = عمود flex بارتفاع محدود.
       ├─ رأس ثابت            (flex-shrink: 0)
       ├─ منطقة محتوى         (flex: 1; min-height: 0; تمرير داخلي)
       └─ فوتر الإجمالي والزر  (flex-shrink: 0)
     الفوتر عنصر flex غير قابل للانكماش ⇒ مستحيل يُدفع خارج الشاشة
     مهما طال المحتوى. النصوص الطويلة تبقى كاملة داخل منطقة تمرير واضحة.

   قواعد غير قابلة للكسر:
     • حقول الإدخال 16px فأكثر  → يمنع تكبير iOS التلقائي عند التركيز
     • كل هدف لمس 44px فأكثر
     • على الهاتف تُحجز مساحة شريط التنقّل السفلي داخل الارتفاع المرئي، وتُقفل الصفحة بلا تمرير
   ========================================================================== */

.ov2 {
    /* ---- ألوان ---- */
    --ov-bg: #030816;
    --ov-card: #081426;
    --ov-panel: #0b1c31;
    --ov-panel-2: #0e2338;
    --ov-line: rgba(94, 166, 198, 0.18);
    --ov-line-soft: rgba(94, 166, 198, 0.1);
    --ov-accent: #22d3ee;
    --ov-accent-deep: #0891b2;
    --ov-text: #eaf4fb;
    --ov-text-2: #a8c2d2;
    --ov-text-3: #7e9cb0;
    --ov-good: #34d399;
    --ov-warn: #fbbf24;
    --ov-bad: #f87171;

    /* ---- مقاسات ---- */
    --ov-radius: 18px;
    --ov-radius-sm: 12px;
    /* مضغوط على الجوال بحيث يتّسع المسار كامل بلا نزول؛ يتوسّع على الكمبيوتر */
    --ov-gap: 0.6rem;
    --ov-pad: 0.85rem;

    margin: 0;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    background:
        radial-gradient(circle at 12% -5%, rgba(34, 211, 238, 0.1), transparent 40%),
        radial-gradient(circle at 92% 4%, rgba(59, 130, 246, 0.12), transparent 38%),
        var(--ov-bg);
    color: var(--ov-text);
    font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* المسرح: يوسّط البطاقة ويحترم المساحات الآمنة (نتوء الشاشة/شريط الهوم) */
.ov2-stage {
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
        max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}

/* ===================== البطاقة ===================== */
.ov2-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    /* الارتفاع الأقصى = الشاشة ناقص هوامش المسرح. البطاقة لا تتجاوزها أبدًا. */
    height: calc(100dvh - 20px);
    max-height: 860px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--ov-card);
    border: 1px solid var(--ov-line);
    border-radius: var(--ov-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    overflow: visible;
}

/* ===================== الرأس ===================== */
.ov2-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem var(--ov-pad);
    background: linear-gradient(180deg, rgba(14, 35, 56, 0.95), rgba(11, 28, 49, 0.7));
    border-bottom: 1px solid var(--ov-line-soft);
}

.ov2-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--ov-text);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.3;
}

.ov2-title i {
    color: var(--ov-accent);
    font-size: 0.95em;
}

.ov2-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 45px;
    padding: 0 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--ov-line);
    background: rgba(8, 20, 38, 0.8);
    color: var(--ov-text-2);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.ov2-back:hover,
.ov2-back:focus-visible {
    color: var(--ov-text);
    border-color: var(--ov-accent);
    background: rgba(34, 211, 238, 0.1);
}

/* ===================== التنبيهات ===================== */
.ov2-alert-slot:not(:empty) {
    flex: 0 0 auto;
}

.ov2 #orderAlert:not(.hidden) {
    margin: 0.7rem var(--ov-pad) 0;
    font-size: 0.86rem;
    line-height: 1.6;
}

/* ===================== شاشة التحميل ===================== */
.ov2-loader {
    flex: 1 1 auto;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.5rem;
    padding: 3rem 1.25rem;
    text-align: center;
}

.ov2-loader[hidden] {
    display: none;
}

.ov2-loader strong {
    font-size: 0.98rem;
    color: var(--ov-text);
}

.ov2-loader span:not(.ov2-loader-ring) {
    font-size: 0.84rem;
    color: var(--ov-text-3);
}

.ov2-loader-ring {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(34, 211, 238, 0.18);
    border-top-color: var(--ov-accent);
    animation: ov2-spin 0.8s linear infinite;
}

@keyframes ov2-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===================== النموذج ===================== */
.ov2-form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* حرج: يسمح للابن بالانكماش داخل الارتفاع المتاح */
}

.ov2-form[hidden] {
    display: none;
}

/* منطقة المحتوى تتمرر وحدها، بينما يبقى الرأس والفوتر ظاهرين دائمًا. */
.ov2-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 211, 238, 0.38) rgba(8, 20, 38, 0.35);
    -webkit-overflow-scrolling: touch;
    padding: var(--ov-pad);
    display: flex;
    flex-direction: column;
    gap: var(--ov-gap);
}

.ov2-scroll::-webkit-scrollbar {
    width: 8px;
}

.ov2-scroll::-webkit-scrollbar-track {
    background: rgba(8, 20, 38, 0.35);
}

.ov2-scroll::-webkit-scrollbar-thumb {
    background: rgba(34, 211, 238, 0.38);
    border-radius: 999px;
}

/* ===================== بطاقة الخدمة ===================== */
/* تتمدد لملء المساحة المتاحة. الكتلتان المرنتان بداخلها هما الوصف والتنبيه
   (تُعرَّفان أدناه)، وهما وحدهما من يمتص ضيق الشاشة.
   تحذير: لا تضع min-height:0 هنا — تسمح للحاوية بالانكماش تحت حجم أبنائها
   فيفيض المحتوى ويُرسم فوق حقول الإدخال. القيمة الافتراضية (auto = min-content)
   هي ما يمنع التداخل. */
.ov2-service {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--ov-gap);
}

/* أثناء القياس نترك ارتفاع الخدمة على قدر محتواها، كي تُوزَّع المساحة الحرة
   فعليًا على الوصف والتنبيه بدل أن تبتلعها الحاوية وتظهر كفراغ. */
.ov2-card.is-viewport-fitted .ov2-service {
    flex: 0 0 auto;
}

.ov2-service:empty {
    display: none;
}

/* الكتل ثابتة الارتفاع — الوصف والتنبيه يُستثنيان أدناه */
.ov2-hero,
.ov2-chips,
.ov2-inline,
.ov2-fineprint {
    flex: 0 0 auto;
}

.ov2-hero {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    background: linear-gradient(135deg, var(--ov-panel-2), var(--ov-panel));
    border: 1px solid var(--ov-line);
    border-radius: var(--ov-radius-sm);
}

.ov2-hero-media {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(3, 12, 24, 0.7);
    border: 1px solid var(--ov-line);
    color: var(--ov-accent);
    font-size: 1.25rem;
    overflow: hidden;
}

.ov2-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 5px;
}

.ov2-hero-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ov2-hero-name {
    margin: 0;
    font-size: 0.97rem;
    font-weight: 800;
    line-height: 1.45;
    color: var(--ov-text);
    /* الاسم محدود الأحرف من JavaScript، مع كسر آمن للكلمات الطويلة. */
    overflow-wrap: anywhere;
}

.ov2-hero-price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    color: var(--ov-accent);
}

.ov2-hero-price strong {
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.ov2-hero-price s {
    font-size: 0.82rem;
    color: var(--ov-text-3);
    text-decoration-thickness: 1px;
}

.ov2-hero-price span {
    font-size: 0.78rem;
    color: var(--ov-text-3);
    font-weight: 700;
}

/* ===================== شارات الخصائص ===================== */
.ov2-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
}

.ov2-chips:empty {
    display: none;
}

.ov2-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.24rem 0.5rem;
    border-radius: 999px;
    background: var(--ov-panel);
    border: 1px solid var(--ov-line-soft);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ov-text-2);
    line-height: 1.45;
    white-space: nowrap;
}

.ov2-chip i {
    font-size: 0.85em;
    color: var(--ov-text-3);
}

.ov2-chip b {
    color: var(--ov-text);
    font-weight: 800;
}

/* شارات مميّزة مربوطة بلوحة التحكم */
.ov2-chip-instant {
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.35);
    color: #86efac;
}

.ov2-chip-instant i,
.ov2-chip-instant b {
    color: #6ee7b7;
}

.ov2-chip-stock {
    background: rgba(34, 211, 238, 0.1);
    border-color: rgba(34, 211, 238, 0.32);
    color: #a5f3fc;
}

.ov2-chip-stock i,
.ov2-chip-stock b {
    color: #67e8f9;
}

.ov2-chip-stock-low {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.35);
    color: #fde68a;
}

.ov2-chip-stock-low i,
.ov2-chip-stock-low b {
    color: var(--ov-warn);
}

.ov2-chip-stock-out {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fecaca;
}

.ov2-chip-stock-out i,
.ov2-chip-stock-out b {
    color: var(--ov-bad);
}

.ov2-chip-guarantee {
    background: rgba(52, 211, 153, 0.08);
    border-color: rgba(52, 211, 153, 0.25);
}

.ov2-chip-guarantee i {
    color: var(--ov-good);
}

/* ===================== الوصف والملاحظات ===================== */
.ov2-block {
    background: var(--ov-panel);
    border: 1px solid var(--ov-line-soft);
    border-radius: var(--ov-radius-sm);
    padding: 0.7rem 0.8rem;
}

.ov2-block-title {
    margin: 0 0 0.45rem;
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--ov-text-3);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ov2-block-title i {
    color: var(--ov-accent);
}

.ov2-desc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.ov2-desc-list li {
    position: relative;
    padding-inline-start: 1.05rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ov-text-2);
    overflow-wrap: anywhere;
}

.ov2-desc-list li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0.28rem;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ov-accent);
    opacity: 0.65;
}

.ov2-desc-list li img.flag-emoji-img {
    height: 1em;
    vertical-align: -0.12em;
}

/* ---- الوصف والتنبيه ----
   يبقيان بكامل ارتفاعهما؛ عند زيادة المحتوى تتمرر منطقة .ov2-scroll. */
.ov2-desc-block {
    flex: 0 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
}

.ov2-note {
    flex: 0 0 auto;
    min-height: 0;
    position: relative;
    overflow: visible;
}

.ov2-card.is-viewport-fitted .ov2-desc-block,
.ov2-card.is-viewport-fitted .ov2-note {
    flex: 0 0 var(--ov2-fit-height, 45px);
    width: 100%;
    height: var(--ov2-fit-height, 45px);
    min-height: 0;
    box-sizing: border-box;
}

.ov2-card.is-viewport-fitted .ov2-desc-block.is-compact {
    padding: 0.35rem 0.6rem;
}

.ov2-card.is-viewport-fitted .ov2-desc-block.is-compact .ov2-block-title {
    display: none;
}

.ov2-card.is-viewport-fitted .ov2-desc-block.is-compact .ov2-desc-body {
    visibility: visible;
}

.ov2-card.is-viewport-fitted .ov2-note.is-compact {
    padding: 0.35rem 0.6rem;
}

.ov2-card.is-viewport-fitted .ov2-note.is-compact > i,
.ov2-card.is-viewport-fitted .ov2-note.is-compact .ov2-note-body {
    visibility: visible;
}

.ov2-desc-block .ov2-block-title {
    flex: 0 0 auto;
}

.ov2-desc-body {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
}

/* لا نُعتّم نهاية النص ولا نفتح نافذة أخرى؛ الزائد غير معروض. */
.ov2-desc-block .ov2-desc-body {
    -webkit-mask-image: none;
    mask-image: none;
}

/* ملاحظات مهمة — لون تحذيري واضح، ظاهرة دائمًا */
.ov2-note {
    display: flex;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.28);
    border-radius: var(--ov-radius-sm);
}

.ov2-note > i {
    flex: 0 0 auto;
    color: var(--ov-warn);
    font-size: 0.95rem;
    margin-top: 0.15rem;
}

.ov2-note-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    font-size: 0.83rem;
    line-height: 1.65;
    color: #fde9b8;
    overflow-wrap: anywhere;
}

/* تنبيه داخلي (خدمة غير متاحة / كمية خارج الحدود) */
.ov2-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    border-radius: var(--ov-radius-sm);
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.55;
}

.ov2-inline-warn {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fde68a;
}

.ov2-inline-bad {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.32);
    color: #fecaca;
}

/* ===================== الحقول ===================== */
.ov2-fields {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--ov-gap);
}

.ov2-grid {
    display: flex;
    flex-direction: column;
    gap: var(--ov-gap);
}

.ov2 .form-group.hidden,
.ov2 .hidden {
    display: none !important;
}

.ov2 .form-group {
    margin: 0;
}

.ov2 .form-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.4rem;
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--ov-text-2);
    line-height: 1.4;
}

.ov2 .form-label i {
    color: var(--ov-accent);
    font-size: 0.9em;
}

.ov2 .form-input,
.ov2 .form-select,
.ov2 .form-textarea {
    width: 100%;
    min-height: 50px;
    padding: 0.72rem 0.85rem;
    border-radius: var(--ov-radius-sm);
    background: var(--ov-panel);
    border: 1px solid var(--ov-line);
    color: var(--ov-text);
    /* 16px إلزامي: أقل من ذلك يجعل iOS يكبّر الصفحة عند التركيز */
    font-size: 16px;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.ov2 .form-textarea {
    min-height: 88px;
    resize: vertical;
}

.ov2 .form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ov-text-3) 50%),
        linear-gradient(135deg, var(--ov-text-3) 50%, transparent 50%);
    background-position: left 1rem top 55%, left 0.68rem top 55%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-inline-start: 2.1rem;
}

.ov2 .form-input::placeholder,
.ov2 .form-textarea::placeholder {
    color: var(--ov-text-3);
    opacity: 0.75;
}

.ov2 .form-input:focus,
.ov2 .form-select:focus,
.ov2 .form-textarea:focus {
    outline: none;
    border-color: var(--ov-accent);
    background: var(--ov-panel-2);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16);
}

.ov2 .form-input:disabled,
.ov2 .form-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* الحقول اليدوية المولّدة من إعدادات الخدمة */
.ov2-manual {
    display: flex;
    flex-direction: column;
    gap: var(--ov-gap);
    margin-top: var(--ov-gap);
}

.ov2-manual:empty {
    display: none;
}

.ov2-manual .form-group + .form-group {
    margin-top: 0;
}

.ov2-consent-row {
    min-height: 45px;
}

.ov2-consent {
    min-height: 45px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(251, 191, 36, 0.24);
    border-radius: var(--ov-radius-sm);
    background: rgba(251, 191, 36, 0.06);
    color: var(--ov-text);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
    cursor: pointer;
}

.ov2-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--ov-accent);
    font-size: 16px;
    cursor: pointer;
}

.ov2-consent:has(input:checked) {
    border-color: rgba(52, 211, 153, 0.45);
    background: rgba(52, 211, 153, 0.08);
}

/* ---- عدّاد الكمية ---- */
.ov2-stepper {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
}

.ov2-stepper .form-input {
    flex: 1 1 auto;
    text-align: center;
    font-weight: 800;
    /* إخفاء أسهم المتصفح — لدينا أزرار أوضح */
    -moz-appearance: textfield;
    appearance: textfield;
}

.ov2-stepper .form-input::-webkit-outer-spin-button,
.ov2-stepper .form-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ov2-step {
    flex: 0 0 auto;
    width: 50px;
    min-height: 50px;
    display: grid;
    place-items: center;
    border-radius: var(--ov-radius-sm);
    border: 1px solid var(--ov-line);
    background: var(--ov-panel-2);
    color: var(--ov-accent);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.ov2-step:hover:not(:disabled) {
    background: rgba(34, 211, 238, 0.14);
    border-color: var(--ov-accent);
}

.ov2-step:active:not(:disabled) {
    transform: scale(0.94);
}

.ov2-step:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.ov2-qty-hint {
    margin: 0.35rem 0 0;
    font-size: 0.76rem;
    color: var(--ov-text-3);
    line-height: 1.5;
}

.ov2-qty-hint:empty {
    display: none;
}

.ov2-qty-hint.is-bad {
    color: var(--ov-bad);
    font-weight: 700;
}

/* ---- الكوبون ---- */
.ov2-coupon {
    grid-column: 1 / -1;
    margin-top: 0.1rem;
    padding-top: 0.35rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.12);
    opacity: 0.82;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.ov2-coupon:hover,
.ov2-coupon:focus-within,
.ov2-coupon[open] {
    opacity: 1;
}

.ov2-coupon[open] {
    border-top-color: rgba(34, 211, 238, 0.16);
}

.ov2-coupon-summary {
    width: fit-content;
    min-height: 45px;
    margin-inline: auto;
    padding: 0.25rem 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    color: var(--ov-text-2);
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 999px;
    background: rgba(14, 35, 58, 0.24);
    cursor: pointer;
    user-select: none;
}

.ov2-coupon-summary small {
    color: var(--ov-text-3);
    font-size: 0.68rem;
    font-weight: 600;
}

.ov2-coupon-summary::-webkit-details-marker {
    display: none;
}

.ov2-coupon-summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-size: 0.62rem;
    font-weight: 900;
    transition: transform 0.2s ease;
}

.ov2-coupon[open] .ov2-coupon-summary::after {
    transform: rotate(180deg);
}

.ov2-coupon-summary:hover {
    color: var(--ov-text-2);
}

.ov2-coupon-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    position: relative;
    margin-top: 0.45rem;
}

.ov2-coupon-row .form-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 45px;
    padding-inline-start: 2.4rem;
    background: rgba(7, 17, 34, 0.5);
    border-color: rgba(148, 163, 184, 0.14);
}

.ov2-coupon-icon {
    position: absolute;
    inset-inline-start: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ov-warn);
    font-size: 0.9rem;
    pointer-events: none;
    z-index: 1;
}

.ov2-optional {
    font-weight: 600;
    color: var(--ov-text-3);
    font-size: 0.92em;
}

.ov2-coupon-btn {
    flex: 0 0 auto;
    min-height: 45px;
    padding: 0 1.15rem;
    border-radius: var(--ov-radius-sm);
    border: 1px solid rgba(34, 211, 238, 0.22);
    background: rgba(34, 211, 238, 0.07);
    color: rgba(165, 243, 252, 0.82);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.ov2-coupon-btn:hover:not(:disabled) {
    background: rgba(34, 211, 238, 0.22);
    border-color: var(--ov-accent);
}

.ov2-coupon-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ov2 .ov2-coupon-result {
    margin-top: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.5;
}

.ov2 .ov2-coupon-result.coupon-success {
    color: var(--ov-good);
}

/* حالة «لم تُختَر خدمة بعد» */
.ov2-empty {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.ov2-empty > i {
    flex: 0 0 auto;
    color: var(--ov-accent);
    font-size: 1.1rem;
    margin-top: 0.2rem;
}

.ov2-empty strong {
    display: block;
    font-size: 0.92rem;
    color: var(--ov-text);
    margin-bottom: 0.2rem;
}

.ov2-empty p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ov-text-3);
    line-height: 1.6;
}

/* شارة خصم المستوى/الحساب */
.ov2-chip-discount {
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.35);
    color: #86efac;
}

.ov2-chip-discount i,
.ov2-chip-discount b {
    color: #6ee7b7;
}

/* ملاحظة العملة المعروضة */
.ov2-fineprint {
    margin: 0;
    font-size: 0.72rem;
    color: var(--ov-text-3);
    line-height: 1.6;
}

/* نتيجة الكوبون — بديل coupons.css غير المحمَّل في هذه الصفحة.
   ملاحظة: order.js يعيد ضبط className إلى "coupon-result ..." لذا نستهدفها مباشرة */
.ov2 .coupon-result {
    margin-top: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.5;
}

.ov2 .coupon-result.coupon-success {
    color: var(--ov-good);
}

.ov2 .coupon-result.coupon-error {
    color: var(--ov-bad);
}

/* ===================== الفوتر: الإجمالي + الزر ===================== */
.ov2-foot {
    /* flex-shrink:0 هو ما يضمن بقاء الزر ظاهرًا دائمًا */
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.75rem var(--ov-pad) calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(11, 28, 49, 0.92), rgba(6, 16, 30, 0.98));
    border-top: 1px solid var(--ov-line);
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.35);
}

.ov2-foot-figures {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

.ov2-foot-total,
.ov2-foot-balance {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.ov2-foot-balance {
    text-align: end;
}

.ov2-foot-label {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ov-text-3);
    line-height: 1.3;
}

.ov2-foot-amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ov-accent);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.ov2-foot-was {
    font-size: 0.8rem;
    color: var(--ov-text-3);
    line-height: 1.2;
}

.ov2-foot-was.hidden {
    display: none !important;
}

.ov2-foot-balance-value {
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--ov-text);
    line-height: 1.3;
}

.ov2-foot-balance-value.is-short {
    color: var(--ov-bad);
}

.ov2-submit {
    width: 100%;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ov-accent), var(--ov-accent-deep));
    color: #04121c;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(34, 211, 238, 0.28);
    transition: transform 0.12s, box-shadow 0.2s, filter 0.2s;
}

.ov2-submit:hover:not(:disabled) {
    filter: brightness(1.07);
    box-shadow: 0 10px 28px rgba(34, 211, 238, 0.38);
}

.ov2-submit:active:not(:disabled) {
    transform: translateY(1px);
}

.ov2-submit:disabled {
    background: linear-gradient(135deg, #475569, #334155);
    color: rgba(255, 255, 255, 0.72);
    box-shadow: none;
    cursor: not-allowed;
}

/* طمأنة الدفع: تُخفى على الجوال لتوفير المساحة، وتظهر على الكمبيوتر */
.ov2-foot-note {
    margin: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.73rem;
    color: var(--ov-text-3);
    line-height: 1.4;
    text-align: center;
}

.ov2-foot-note i {
    color: var(--ov-good);
}

/* ===================== الكمبيوتر: عمود واحد أوسع ===================== */
@media (min-width: 768px) {
    .ov2 {
        --ov-gap: 0.9rem;
        --ov-pad: 1.35rem;
    }

    .ov2-stage {
        padding: 18px;
    }

    /* مساحة أوسع ⇒ نعيد الأناقة: هوامش أريح وطمأنة الدفع ظاهرة */
    .ov2-hero {
        gap: 0.75rem;
        padding: 0.8rem 0.9rem;
    }

    .ov2-chips {
        gap: 0.42rem;
    }

    .ov2-chip {
        gap: 0.34rem;
    }

    .ov2-foot-note {
        display: flex;
    }

    .ov2-coupon-row .form-input {
        padding-inline-start: 2.6rem;
    }

    .ov2-card {
        max-width: 920px;
        height: calc(100dvh - 36px);
        max-height: 920px;
        border-radius: 22px;
    }

    .ov2-head {
        padding: 0.95rem var(--ov-pad);
    }

    .ov2-title {
        font-size: 1.15rem;
    }

    .ov2-hero-media {
        width: 54px;
        height: 54px;
        font-size: 1.45rem;
    }

    .ov2-hero-name {
        font-size: 1.04rem;
    }

    .ov2-hero-price strong {
        font-size: 1.26rem;
    }

    .ov2-chip {
        font-size: 0.79rem;
        padding: 0.34rem 0.66rem;
    }

    .ov2-desc-list li {
        font-size: 1rem;
    }

    .ov2-note-body {
        font-size: 0.875rem;
    }

    .ov2-foot {
        padding: 1rem var(--ov-pad);
    }

    .ov2-foot-amount {
        font-size: 1.7rem;
    }

    .ov2-submit {
        min-height: 56px;
        font-size: 1.05rem;
    }

    /* اتساع أكبر ⇒ نضع الكمية والكوبون جنبًا إلى جنب لتقليل الارتفاع.
       display:contents يرفع حقول .ov2-grid لتصبح عناصر مباشرة في شبكة .ov2-fields */
    .ov2-fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--ov-gap);
        align-items: start;
    }

    .ov2-grid {
        display: contents;
    }

    .ov2-field-full {
        grid-column: 1 / -1;
    }

    .ov2-field-qty {
        grid-column: auto;
    }

    /* عندما تكون الكمية مخفية (طلب ثابت) يعود الكوبون لعرضه الكامل */
    .ov2-grid:has(.ov2-field-qty.hidden) + .ov2-coupon,
    .ov2-grid.hidden + .ov2-coupon {
        grid-column: 1 / -1;
    }
}

/* شاشات الكمبيوتر الواسعة: عمود واحد أوسع قليلًا يقلّل الحاجة للتمرير */
@media (min-width: 1024px) {
    .ov2-card {
        max-width: 920px;
    }
}

/* الشاشات القصيرة: ضغط رأسي محسوب حتى يتّسع كل شيء بلا نزول،
   مع إبقاء معاينة الوصف داخل المساحة المتاحة. */
@media (max-height: 740px) {
    .ov2 {
        --ov-gap: 0.55rem;
    }

    .ov2-head {
        padding-block: 0.45rem;
    }

    .ov2-title {
        font-size: 0.95rem;
    }

    .ov2-back {
        min-height: 45px;
    }

    .ov2-hero {
        padding: 0.55rem 0.65rem;
    }

    .ov2-hero-media {
        width: 40px;
        height: 40px;
        font-size: 1.05rem;
    }

    .ov2-hero-name {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .ov2-chip {
        padding: 0.28rem 0.5rem;
        font-size: 0.73rem;
    }

    .ov2-block {
        padding: 0.55rem 0.7rem;
    }

    .ov2-block-title {
        margin-bottom: 0.3rem;
    }

    .ov2-desc-list li {
        font-size: 1rem;
        line-height: 1.7;
    }

    .ov2-note {
        padding: 0.5rem 0.65rem;
    }

    .ov2-note-body {
        font-size: 0.78rem;
        line-height: 1.55;
    }

    .ov2 .form-label {
        margin-bottom: 0.25rem;
        font-size: 0.78rem;
    }

    .ov2 .form-input,
    .ov2 .form-select,
    .ov2-step,
    .ov2-coupon-btn {
        min-height: 46px;
    }

    .ov2-step {
        width: 46px;
    }

    .ov2-qty-hint {
        margin-top: 0.2rem;
        font-size: 0.7rem;
    }

    .ov2-foot {
        gap: 0.4rem;
        padding-block: 0.55rem;
    }

    .ov2-foot-amount {
        font-size: 1.32rem;
    }

    .ov2-submit {
        min-height: 48px;
        font-size: 0.95rem;
    }

    .ov2-foot-note {
        display: none;
    }
}

/* حالات لا تكفيها الحدود الطبيعية: تُفعَّل بالقياس من order.js فقط. */
.ov2-card.ov2-fit-tight .ov2-scroll {
    padding: 0.42rem var(--ov-pad);
    gap: 0.28rem;
}

.ov2-card.ov2-fit-tight .ov2-service,
.ov2-card.ov2-fit-tight .ov2-fields,
.ov2-card.ov2-fit-tight .ov2-grid,
.ov2-card.ov2-fit-tight .ov2-manual {
    gap: 0.28rem;
}

.ov2-card.ov2-fit-tight .ov2-hero {
    min-height: 48px;
    padding: 0.28rem 0.55rem;
}

.ov2-card.ov2-fit-tight .ov2-hero-media {
    width: 36px;
    height: 36px;
}

.ov2-card.ov2-fit-tight .ov2-hero-copy {
    gap: 0.08rem;
}

.ov2-card.ov2-fit-tight .ov2-hero-name {
    font-size: 0.86rem;
    line-height: 1.25;
}

.ov2-card.ov2-fit-tight .ov2-hero-price strong {
    font-size: 1rem;
}

.ov2-card.ov2-fit-tight .ov2-chips {
    max-height: 26px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.ov2-card.ov2-fit-tight .ov2-chip {
    flex: 0 0 auto;
    padding: 0.18rem 0.42rem;
    font-size: 0.67rem;
}

.ov2-card.ov2-fit-tight .ov2-grid > .form-group:not(.order-form-main-manual-only),
.ov2-card.ov2-fit-tight .ov2-manual > .form-group:not(.ov2-consent-row) {
    min-height: 45px;
    display: grid;
    grid-template-columns: minmax(86px, 34%) minmax(0, 1fr);
    align-items: center;
    gap: 0.4rem;
}

.ov2-card.ov2-fit-tight .order-form-main-manual-only {
    display: block;
}

.ov2-card.ov2-fit-tight .ov2-manual {
    margin-top: 0;
}

.ov2-card.ov2-fit-tight .form-label {
    margin: 0;
    font-size: 0.73rem;
    line-height: 1.25;
}

.ov2-card.ov2-fit-tight .form-input,
.ov2-card.ov2-fit-tight .form-select,
.ov2-card.ov2-fit-tight .form-textarea,
.ov2-card.ov2-fit-tight .ov2-step,
.ov2-card.ov2-fit-tight .ov2-coupon-btn {
    min-height: 45px;
    height: 45px;
}

.ov2-card.ov2-fit-tight .form-textarea {
    resize: none;
}

.ov2-card.ov2-fit-tight .ov2-step {
    width: 45px;
}

.ov2-card.ov2-fit-tight .ov2-qty-hint {
    display: none;
}

.ov2-card.ov2-fit-tight .ov2-coupon {
    margin-top: 0;
    padding-top: 0;
}

.ov2-card.ov2-fit-tight .ov2-coupon-summary {
    min-height: 45px;
    padding-block: 0;
}

.ov2-card.ov2-fit-tight .ov2-foot {
    display: grid;
    grid-template-columns: minmax(118px, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 0.45rem;
    padding-block: 0.35rem;
}

.ov2-card.ov2-fit-tight .ov2-foot-figures {
    gap: 0.4rem;
}

.ov2-card.ov2-fit-tight .ov2-foot-amount {
    font-size: 1.12rem;
}

.ov2-card.ov2-fit-tight .ov2-foot-balance-value {
    font-size: 0.82rem;
}

.ov2-card.ov2-fit-tight .ov2-submit {
    min-height: 45px;
}

.ov2-card.ov2-fit-tight .ov2-foot-note {
    display: none;
}

.ov2-card.ov2-fit-ultra .ov2-chips {
    display: none;
}

.ov2-card.ov2-fit-ultra .ov2-head {
    padding-block: 0.25rem;
}

.ov2-card.ov2-fit-ultra .ov2-title {
    font-size: 0.88rem;
}

.ov2-card.ov2-fit-ultra .ov2-hero {
    min-height: 45px;
}

.ov2-card.ov2-fit-ultra .ov2-hero-media {
    width: 32px;
    height: 32px;
}

/* فتح الكوبون مؤقتًا في شاشة ممتلئة يستبدل معاينة النص، ولا يضيف تمريرًا. */
.ov2-card.ov2-fit-coupon-open .ov2-desc-block,
.ov2-card.ov2-fit-coupon-open .ov2-note {
    display: none;
}

/* الشاشات الطويلة جدًا: لا نمدّ البطاقة بلا داعٍ */
@media (min-height: 900px) and (max-width: 767px) {
    .ov2-card {
        max-height: 860px;
    }
}

/* الهاتف فقط: شريط التنقّل السفلي ثابت، لذلك لا ندع padding العام يطيل الصفحة
   ولا ندع بطاقة الطلب تمتد خلفه. بهذه الطريقة تبقى روابط التواصل فوق الشريط
   وتبقى نافذة الطلب كلها ضمن الشاشة بلا تمرير خارجي. */
@media (max-width: 767px) {
    html {
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body.ov2 {
        height: 100svh;
        height: 100dvh;
        min-height: 0;
        padding-bottom: 0 !important;
        position: fixed;
        inset: 0;
        width: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    .ov2-stage {
        height: calc(100svh - 64px - env(safe-area-inset-bottom, 0px));
        height: calc(100dvh - 64px - env(safe-area-inset-bottom, 0px));
        padding-bottom: 10px;
    }

    .ov2-card {
        height: 100%;
        max-height: 860px;
        overflow: hidden;
        overscroll-behavior: none;
    }

    .ov2-form,
    .ov2-service,
    .ov2-desc-body,
    .ov2-note,
    .ov2-note-body {
        min-height: 0;
        overflow: visible !important;
    }

    .ov2-scroll {
        min-height: 0;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .ov2-hero-name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    .ov2-foot .footer-social {
        position: relative;
        inset-block-end: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        min-height: 36px;
        margin-top: 0;
    }

    .ov2-foot .footer-social-label {
        margin: 0;
        font-size: 0.72rem;
        white-space: nowrap;
    }

    .ov2-foot .footer-social-icons {
        gap: 0.35rem;
    }

    .ov2-foot .footer-social .footer-social-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    .ov2-card.ov2-fit-tight .ov2-foot .footer-social {
        grid-column: 1 / -1;
    }

    .ov2-card.ov2-fit-ultra .ov2-foot .footer-social-label {
        display: none;
    }

    .ov2-card.ov2-fit-ultra .ov2-foot .footer-social .footer-social-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }
}

/* تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {

    .ov2 *,
    .ov2 *::before,
    .ov2 *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* تركيز واضح للوحة المفاتيح */
.ov2 :focus-visible {
    outline: 2px solid var(--ov-accent);
    outline-offset: 2px;
}