/*
 * =================================================================
 * NAMA ACS Frontend CSS - Optimized by Gemini AI
 * Version: 2.9 - Final QR Scanner Spacing Adjustments
 * Date: 22-06-2025
 * Changes: Reduced top margin of QR scanner card, tightened space between camera and buttons.
 * =================================================================
 */
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;700&display=swap');

 /* Resetting box-sizing for all elements */
 *, *::before, *::after {
     box-sizing: border-box;
 }
 
 body.rtl, :dir(rtl) {
     direction: rtl;
 }
 
 body:not(.rtl), :dir(ltr) {
     direction: ltr;
 }
 
 body.rtl * {
     font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', Arial, sans-serif;
 }
 
 :root {
     /* الهوية الرئيسية للتصميم */
     --acs-primary: #16a34a;
     --acs-primary-light: #dcfce7;
     --acs-secondary: #64748b;
     --acs-bg: #f8fafc;
     --acs-card-bg: #fff;
     --acs-border: #e2e8f0;
     --acs-success: #22c55e;
     --acs-error: #ef4444;
     --acs-warning: #f59e42;
     --acs-text: #1e293b;
     --acs-text-light: #64748b;
     --acs-radius: 1.2rem;
     --acs-shadow: 0 4px 24px 0 rgba(22, 163, 74, 0.07);
     --acs-font: 'Cairo', 'Tajawal', 'Segoe UI', Arial, sans-serif;
 
     /* أسماء مستعارة (Aliases) للثيم */
     --nama-acs-background: var(--acs-bg);
     --nama-acs-card-bg: var(--acs-card-bg);
     --nama-acs-shadow: var(--acs-shadow);
     --nama-acs-text: var(--acs-text);
     --nama-acs-text-light: var(--acs-text-light);
     --nama-acs-primary: var(--acs-primary);
     --nama-acs-secondary: var(--acs-secondary);
     --nama-acs-border: var(--acs-border);
     --nama-acs-success: var(--acs-success);
     --nama-acs-error: var(--acs-error);
     --nama-acs-warning: var(--acs-warning);
     --nama-acs-danger: var(--acs-error);
 }
 
 body {
     background: var(--acs-bg);
     font-family: var(--acs-font);
     margin: 0;
     padding: 0;
     overflow-x: hidden;
 }
 
 /* === Animation Keyframes === */
 @keyframes nama-acs-spin {
     to { transform: rotate(360deg); }
 }
 
 /* ===== General Containers & Cards ===== */
 .nama-acs-clean-container, .nama-acs-verification-container {
     max-width: 900px;
     margin: 2rem auto;
     padding: 30px;
     background: var(--nama-acs-card-bg);
     border-radius: var(--acs-radius);
     box-shadow: var(--acs-shadow);
 }
 .nama-acs-clean-container {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--acs-bg);
 }
 
 .nama-acs-card, .nama-acs-clean-card {
     background: var(--nama-acs-card-bg);
     border-radius: 0.75rem;
     padding: 2rem;
     box-shadow: var(--acs-shadow);
     margin-block-end: 1.5rem;
 }
 .nama-acs-clean-card {
     padding: 2.5rem 2rem 2rem;
     max-width: 520px;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 /* ===== Headers & Titles ===== */
 .nama-acs-clean-header, .nama-acs-verification-header {
     text-align: center;
     margin-block-end: 0.1rem;
 }
 .nama-acs-clean-title, .nama-acs-title {
     font-size: 2rem;
     color: var(--nama-acs-primary);
     font-weight: 700;
     margin-block-end: 0.5rem;
     margin-block-start: 0;
     letter-spacing: 0.5px;
 }
 .nama-acs-clean-subtitle, .nama-acs-subtitle {
     color: var(--nama-acs-text-light);
     font-size: 1.1rem;
     margin-block-start: 0;
 }
 
 /* ===== Forms & Input Groups ===== */
 .nama-acs-clean-form {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
 }
 .nama-acs-input-group, .nama-acs-clean-input-group {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     margin-bottom: 0;
     position: relative;
 }
 .nama-acs-label, .nama-acs-clean-label {
     display: block;
     color: var(--nama-acs-text);
     font-weight: 500;
     font-size: 1rem;
     margin-block-end: 0.5rem;
 }
 .acs-input-wrap, .nama-acs-input-wrapper {
     position: relative;
     width: 100%;
 }
 
 /* ===== Input Fields ===== */
 .nama-acs-clean-input, #namaAcsProductCodeInput {
     padding: 0.8rem 0.8rem;
     font-size: 1.08rem;
     border-radius: 0.5rem;
     border: 1.5px solid var(--acs-border);
     background: #f9fbfc;
     color: var(--acs-text);
     transition: border-color 0.2s, box-shadow 0.2s;
     width: 100%;
     text-align: center;
     height: 2.7em;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 #namaAcsProductCodeInput {
     padding-inline-start: 0 !important;
     padding-inline-end: 0 !important;
 }
 .nama-acs-clean-input:focus, #namaAcsProductCodeInput:focus {
     border-color: var(--nama-acs-primary);
     outline: none;
     box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
 }
 
 /* ===== Buttons ===== */
 .nama-acs-clean-buttons, .nama-acs-buttons-group {
     display: flex;
     gap: 1rem;
     width: 100%;
     margin-top: 0;
     margin-bottom: 0;
 }
 .nama-acs-clean-btn, .button, .nama-acs-button {
     flex: 1 1 0;
     width: 100%;
     padding: 0.8rem 0.1rem;
     border-radius: 0.32rem;
     border: none;
     font-size: 1.1rem;
     font-weight: 600;
     cursor: pointer;
     transition: background 0.18s, color 0.18s, box-shadow 0.18s;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     text-decoration: none;
 }
 .nama-acs-clean-btn {
     box-shadow: 0 2px 8px 0 rgba(22,163,74,0.04);
     background: var(--acs-primary-light);
     color: var(--acs-primary);
 }
 .nama-acs-clean-btn-primary, .button-primary, .nama-acs-button-primary, #namaAcsBackToFormButton {
     background: var(--nama-acs-primary) !important;
     color: #fff !important;
 }
 .nama-acs-clean-btn-primary:hover, .button-primary:hover, .nama-acs-button-primary:hover, #namaAcsBackToFormButton:hover {
     background: #107a38 !important;
 }
 .nama-acs-clean-btn-secondary, .button-secondary, .nama-acs-button-secondary, #namaAcsCancelQrScan {
     background: var(--acs-secondary) !important;
     color: #fff !important;
 }
 .nama-acs-clean-btn-secondary:hover, .button-secondary:hover, .nama-acs-button-secondary:hover, #namaAcsCancelQrScan:hover {
     background: #334155 !important;
 }
 .nama-acs-clean-btn-outline {
     background: transparent;
     border: 1.5px solid var(--acs-primary);
     color: var(--acs-primary);
 }
 .nama-acs-clean-btn-outline:hover {
     background: var(--acs-primary-light);
 }
 
 /* ===== Spinners / Loading Indicators ===== */
 .nama-acs-clean-loading, .nama-acs-loading-indicator {
     width: 100%;
     text-align: center;
     margin: 1.5rem 0 0.5rem 0;
     padding: 2rem;
 }
 .nama-acs-clean-spinner, .nama-acs-spinner {
     width: 40px;
     height: 40px;
     border: 4px solid var(--acs-border);
     border-top-color: var(--acs-primary);
     border-radius: 50%;
     margin: 0 auto 1rem;
     animation: nama-acs-spin 1s linear infinite;
 }
 
 /* ===== Result / Message Areas ===== */
 .nama-acs-clean-result,
 .nama-acs-clean-result.success,
 .nama-acs-clean-result.error,
 .nama-acs-clean-result.warning {
     padding: 1.2rem 1.5rem;
     min-height: 3.2rem;
     border-radius: 0.7rem;
     font-size: 1.08rem;
     text-align: center;
     width: 100%;
     display: none;
     border: 1.5px solid transparent;
     margin-top: 1.5rem;
 }
 .nama-acs-clean-result.success,
 .nama-acs-clean-result.error,
 .nama-acs-clean-result.warning {
     display: block;
 }
 .nama-acs-clean-result.success {
     background-color: #d4edda;
     color: #155724;
     border-color: #c3e6cb;
 }
 .nama-acs-clean-result.error,
 .nama-acs-clean-result.danger {
     background-color: #f8d7da;
     color: #721c24;
     border-color: #f5c6cb;
 }
 .nama-acs-clean-result.warning {
     background: #fffde7;
     color: #f59e42;
     border-color: #ffc107;
 }
 .acs-msg-row {
     display: flex;
     align-items: center;
     gap: 8px;
     text-align: start !important;
     margin-block-end: 2px;
 }
 .acs-msg-icon {
     font-size: 1.3em;
     margin-inline-end: 4px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }
 .acs-msg-title {
     display: block;
     font-weight: 800;
     font-size: 1.08em;
     color: var(--nama-acs-text);
     margin-block-end: 4px;
     text-align: start !important;
     line-height: 1.25;
     letter-spacing: .1px;
 }
 .acs-msg-text {
     display: block;
     font-weight: 400;
     color: #222;
     font-size: 1em;
     text-align: start !important;
     margin-block: 3px 0;
 }
 .nama-acs-message-icon {
     margin-inline-end: 8px;
     vertical-align: middle;
     font-size: 1.2em;
 }
 .nama-acs-message-icon.danger {
     color: var(--acs-error) !important;
 }
 
 
 /* ===== QR Code Section ===== */
 .nama-acs-clean-qr-section, .nama-acs-qr-section {
     width: 100%;
     margin-top: 0;
     display: none; /* Controlled by JS */
 }
 .nama-acs-clean-qr-card {
     background: #e6f7ee;
     border-radius: 14px;
     padding: 18px 10px 10px 10px !important;
     margin: 0 auto !important;
     box-shadow: 0 1px 8px #e2e8f0;
     max-width: 340px;
 }
 .nama-acs-clean-qr-card h3 {
     margin: 0 0 8px 0 !important;
     font-size: 1.02rem !important;
     text-align: center !important;
     font-weight: 800;
 }
 .nama-acs-clean-qr-card p {
     margin: 0 0 10px 0 !important;
     font-size: 0.97rem !important;
     text-align: center !important;
     color: #218a5a;
 }
 #namaAcsQrCodeReader {
     margin: 0 auto 10px auto !important;
     display: block;
     border-radius: 12px;
     max-width: 100%;
 }
 .nama-acs-clean-btn.nama-acs-clean-btn-outline {
     margin-top: 8px !important;
     margin-bottom: 0 !important;
 }
 
 /* ===== Footers ===== */
 .nama-acs-clean-footer, .nama-acs-verification-footer {
     width: 100%;
     text-align: center;
     margin-block-start: 2.2rem;
     color: var(--acs-text-light);
     font-size: 0.98rem;
     border-top: 1px solid var(--acs-border);
     padding-block-start: 1.2rem;
 }
 
 /* ===== Product Info ===== */
 .acs-product-info {
     margin-block-start: 15px;
     padding-block-start: 15px;
     border-top: 1px dashed var(--acs-border);
     text-align: start;
 }
 .acs-product-info p {
     margin-block: 5px;
     font-size: 15px;
     color: var(--acs-text-light);
     font-weight: normal;
 }
 .acs-product-info p strong {
     color: var(--acs-text);
 }
 
 
 /* ===== Responsive Design ===== */
 @media (max-width: 768px) {
     body {
         padding-inline-start: 0.08rem;
         padding-inline-end: 0.08rem;
     }
 
     .nama-acs-clean-container,
     .nama-acs-verification-container,
     .nama-acs-main-box {
         margin: 1rem auto;
         padding: 1rem;
         width: calc(100% - 0.16rem);
         max-width: none;
     }
 
     /* **تعديلات شاشة QR Scanner: المسافة العلوية والمسافة بين الكاميرا والزر** */
     .nama-acs-clean-qr-card {
         margin-block-start: 0.5rem; /* تقليل المسافة العلوية للبطاقة الخضراء الفاتحة (كان 1rem) */
     }
 
     .nama-acs-clean-buttons { /* هذا هو زر إلغاء المسح هنا */
         margin-block-start: 0.5rem; /* تم تقليل المسافة بين مربع الكاميرا وزر إلغاء المسح */
     }
 
     .nama-acs-buttons-group {
         flex-direction: column;
         gap: 0.75rem;
     }
     .nama-acs-button, .button,
     #namaAcsBackToFormButton, #namaAcsCancelQrScan {
         width: 100% !important;
         justify-content: center !important;
         padding: 0.9rem 2rem !important;
         font-size: 1rem !important;
     }
     /* تعديلات حجم الخط والمسافات بين العنوان والعنوان الفرعي للـ QR scanner (من التعديل السابق) */
     .nama-acs-clean-title, .nama-acs-title {
         font-size: 1.6rem;
         margin-block-end: 0.2rem;
     }
     .nama-acs-clean-subtitle, .nama-acs-subtitle {
         font-size: 1rem;
         margin-block-start: 0.2rem;
         margin-block-end: 0.5rem;
     }
     #namaAcsQrCodeReader, .nama-acs-clean-qr-reader {
         margin-block-start: 0.5rem;
     }
 }
 
 @media (max-width: 600px) {
     .nama-acs-clean-card {
         padding: 0.8rem 1rem 1rem;
         width: 100%;
         margin: 0 auto;
     }
     /* **تعديلات شاشة QR Scanner: المسافة العلوية والمسافة بين الكاميرا والزر** */
     .nama-acs-clean-qr-card {
         margin-block-start: 0.3rem; /* تقليل المسافة العلوية للبطاقة الخضراء الفاتحة أكثر */
     }
 
     .nama-acs-clean-buttons { /* هذا هو زر إلغاء المسح هنا */
         margin-block-start: 0.3rem; /* تقليل المسافة بين مربع الكاميرا وزر إلغاء المسح أكثر */
     }
 
     .nama-acs-clean-title {
         font-size: 1.3rem;
         margin-block-end: 0.15rem;
     }
     .nama-acs-clean-subtitle {
         font-size: 0.95rem;
         margin-block-start: 0.15rem;
         margin-block-end: 0.3rem;
     }
     #namaAcsQrCodeReader, .nama-acs-clean-qr-reader {
         margin-block-start: 0.3rem;
     }
     .nama-acs-clean-form {
         gap: 1rem;
     }
     .nama-acs-clean-buttons {
         flex-direction: column;
         gap: 0.7rem;
     }
     .nama-acs-clean-btn {
         font-size: 1rem;
         padding: 0.8rem 0;
     }
 }
 
 @media (max-width: 480px) {
     body {
         padding-inline-start: 0.05rem;
         padding-inline-end: 0.05rem;
     }
     .nama-acs-clean-container,
     .nama-acs-verification-container,
     .nama-acs-main-box {
         width: calc(100% - 0.1rem);
     }
     .nama-acs-clean-card {
         padding: 0.5rem 0.8rem 0.8rem;
     }
     /* **تعديلات شاشة QR Scanner: المسافة العلوية والمسافة بين الكاميرا والزر** */
     .nama-acs-clean-qr-card {
         margin-block-start: 0.1rem; /* تقليل المسافة العلوية للبطاقة الخضراء الفاتحة إلى أدنى حد */
     }
 
     .nama-acs-clean-buttons { /* هذا هو زر إلغاء المسح هنا */
         margin-block-start: 0.1rem; /* تقليل المسافة بين مربع الكاميرا وزر إلغاء المسح إلى أدنى حد */
     }
 
     .nama-acs-clean-title {
         font-size: 1.15rem;
         margin-block-end: 0.1rem;
     }
     .nama-acs-clean-subtitle {
         font-size: 0.85rem;
         margin-block-start: 0.1rem;
         margin-block-end: 0.2rem;
     }
     #namaAcsQrCodeReader, .nama-acs-clean-qr-reader {
         margin-block-start: 0.2rem;
     }
 }
 
 
 .nama-acs-main-box {
     max-width: 420px;
     width: 100%;
     margin: 2.5rem auto;
     padding: 2.2rem 1.5rem 1.5rem 1.5rem;
     background: #fff;
     box-shadow: 0 6px 32px 0 rgba(33,153,111,0.16);
     border-radius: 1.1rem;
     border: 1.2px solid #e3e7ee;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .nama-acs-message-icon,
 .dashicons,
 .acs-msg-icon {
     font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Arial Unicode MS', 'Material Icons', sans-serif !important;
 }
 
 .dashicons {
     font-family: 'dashicons' !important;
     font-style: normal !important;
     font-weight: normal !important;
     speak: never;
     display: inline-block;
     text-decoration: inherit;
     text-align: center;
 }