/*
 * نموذج حجز الصيانة - يعتمد على متغيرات هوية AAMFIX (نفس متغيرات ثيم aamfix-oem)
 * القيم الاحتياطية (fallback) داخل var() تضمن مظهرًا متسقًا حتى لو تغيّر الثيم مستقبلاً
 */
.aamfix-sb-form-wrap {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-top: 4px solid var(--primary, #4f46e5);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow, 0 4px 24px rgba(79, 70, 229, 0.08));
    padding: 1.75rem;
    max-width: 760px;
    margin: 0 auto;
    font-family: var(--font-ar, 'Segoe UI Arabic', 'Segoe UI', Tahoma, sans-serif);
    color: var(--text-primary, #0f172a);
}

.aamfix-sb-alert-area:empty { display: none; }
.aamfix-sb-alert-area .alert { margin-bottom: 1.25rem; }

/*
 * قاعدة الثيم الخاصة بصور المحتوى ".product-description img { width:auto !important;
 * height:auto !important }" لها نفس أولوية (specificity) قاعدة ووردبريس لتحجيم الإيموجي
 * "img.emoji { width:1em !important }"، فتفوز قاعدة الثيم بترتيب التحميل وتُصغّر الأيقونة
 * إلى 0×0. نرفع هنا خصوصية المحدد فوق الاثنتين معًا حتى تفوز أيقونتنا دائمًا.
 */
.aamfix-sb-form-wrap .alert-icon img.emoji {
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    display: inline-block !important;
}

.aamfix-sb-form-wrap--disabled { border-top-color: var(--danger, #dc2626); }
.aamfix-sb-form-wrap--disabled .aamfix-sb-disabled-alert { margin-bottom: 1.5rem; }
.aamfix-sb-form-wrap--disabled .aamfix-sb-grid {
    opacity: 0.55;
    pointer-events: none;
    filter: grayscale(0.3);
}

/*
 * "left:-9999px" كانت تدفع الحقل بعيدًا عن حدود الصفحة فعليًا (لا يُحتوى داخل أي عنصر
 * overflow:hidden)، فيوسّع هذا عرض الصفحة القابل للتمرير أفقيًا على الجوال - يظهر كصفحة
 * فارغة يجب سحبها لرؤية المحتوى الحقيقي. الأسلوب الآمن: إبقاء الحقل داخل تدفق الصفحة
 * الطبيعي بحجم 1×1 بكسل مع overflow:hidden بدل دفعه خارج حدود الشاشة.
 */
.aamfix-sb-honeypot {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

.aamfix-sb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

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

.aamfix-sb-field { display: flex; flex-direction: column; gap: 0.4rem; }

.aamfix-sb-field label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--text-secondary, #334155);
}

.aamfix-sb-field .req { color: var(--danger, #dc2626); }

.aamfix-sb-form input[type="text"],
.aamfix-sb-form input[type="tel"],
.aamfix-sb-form input[type="email"],
.aamfix-sb-form input[type="date"],
.aamfix-sb-form select,
.aamfix-sb-form textarea {
    width: 100%;
    padding: 0.65rem 0.9rem;
    background: var(--bg-input, #f1f5f9);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 12px);
    color: var(--text-primary, #0f172a);
    font-family: inherit;
    font-size: var(--font-size-sm, 0.875rem);
    transition: var(--transition, all 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}

.aamfix-sb-form select:disabled,
.aamfix-sb-form input:disabled { opacity: 0.6; cursor: not-allowed; }

.aamfix-sb-form input:focus,
.aamfix-sb-form select:focus,
.aamfix-sb-form textarea:focus {
    outline: none;
    border-color: var(--border-focus, #4f46e5);
    box-shadow: 0 0 0 3px var(--primary-light, #eef2ff);
}

.aamfix-sb-form textarea { resize: vertical; min-height: 80px; }

.aamfix-sb-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.aamfix-sb-submit:disabled { opacity: 0.65; cursor: not-allowed; transform: none !important; }

.aamfix-sb-spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: aamfix-sb-spin 0.7s linear infinite;
}

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

@media (max-width: 640px) {
    .aamfix-sb-form-wrap { padding: 1.25rem; border-radius: var(--radius, 12px); }
    .aamfix-sb-grid { grid-template-columns: 1fr; }
}