:root{
      --bg:#f6f8fb;
      --card:#ffffff;
      --ink:#0f1b2d;
      --muted:#5b6b7c;
      --accent:#0070ba; /* PayPal blue */
      --accent-2:#003087; /* deep blue */
      --brand:#ffc439;   /* PayPal yellow */
      --ring:#d9e3ea;
      --danger:#b00020;
      --radius:14px;
      --shadow:0 10px 30px rgba(16, 42, 67, .08);
        }
    
    
            :root {
            --paypal-blue: #0070BA;
            --light-gray-bg: #f5f7fa;
            --input-border: #d3dae3;
            --page-bg: #f7f9fa;
            --text-color: #374151; /* Gray-700 equivalent */
            --sub-text-color: #4b5563; /* Gray-600 equivalent */
        }

   

     
        /* محتوى البطاقة (Form Container) */
        .form-container {
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
            padding: 1.5rem;
            transition: all 0.3s ease;
        }

        /* تصميم الشاشات الكبيرة (Responsive adjustments) */
        @media (min-width: 640px) {
            body {
                align-items: center; /* توسيط عمودي على الشاشات الكبيرة */
                padding: 0;
            }
            .form-container {
                padding: 2.5rem;
            }
        }

        /* العنوان والرأس */
        header {
            text-align: center;
            margin-bottom: 2.5rem;
        }
        .header-title {
            font-size: 24px;
            font-weight: 700;
            color: rgba(2, 39, 59, 1);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .paypal-logo-text {
            color: var(--paypal-blue);
            font-weight: 900;
            margin: 0 0.25rem;
        }
        .diamond-icon {
            color: #f59e0b;
            font-size: 1.5rem;
            margin: 0 0.25rem;
        }

        /* تصميم عناصر الإدخال المشتركة */
        .form-group {
            margin-bottom: 1.5rem;
        }
        .form-label {
            display: block;
            font-size:16px;
            font-weight: 500;
            color: rgba(7, 51, 74, 1);
            margin-bottom: 0.25rem;
        }
        .form-input {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid var(--input-border);
            border-radius: 0.5rem;
            background-color: var(--light-gray-bg);
            outline: none;
            transition: border-color 0.15s, box-shadow 0.15s;
            text-align: right;
            direction: rtl;
        }
        /* تحسين حالة التركيز للعناصر التفاعلية */
        .form-input:focus {
            border-color: var(--paypal-blue);
            box-shadow: 0 0 0 3px rgba(0, 112, 186, 0.3);
        }
        
        /* حقل كلمة المرور (مع الأيقونة) */
        .password-container {
            position: relative;
        }
        #password {
            padding-right: 3rem; /* مساحة لزر العين */
        }
        .eye-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 1rem; /* موقع الأيقونة في اليسار لـ RTL */
            padding: 0.5rem;
            color: #6b7280;
            cursor: pointer;
            transition: color 0.15s;
            background: none;
            border: none;
        }
        .eye-button:hover {
            color: var(--text-color);
        }
        .eye-svg {
            width: 1.25rem;
            height: 1.25rem;
            stroke: currentColor;
            fill: none;
        }

        /* خط فاصل */
        hr {
            border-top: 1px solid #d1d5db;
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
        }

        /* قسم التبرع والمبلغ */
        .donation-section {
            padding-top: 1rem;
        }
        .amount-text {
            font-size: 36px;
            font-weight: 300;
            color: rgba(2, 39, 59, 1);
            letter-spacing: 0.025em;
            margin-top: 1rem;
            margin-bottom: 1rem;
        }

        /* مربع اختيار الرسوم - استخدام align-items: flex-start للحفاظ على التناسق عند التفاف النص */
        .checkbox-group {
            display: flex;
            align-items: flex-start; 
            margin-top: 1rem;
            padding-top: 0.125rem; /* تعديل بسيط للمحاذاة البصرية */
        }
        #cover-fee {
            width: 1.25rem;
            height: 1.25rem;
            color: var(--paypal-blue);
            border-radius: 0.25rem;
            border: 1px solid #d1d5db;
            margin-right: 0.5rem; /* مسافة بين المربع والنص */
            cursor: pointer;
            flex-shrink: 0; /* لمنع تقلص مربع الاختيار */
        }
        .checkbox-label {
            font-size: 16px;
            color: rgba(7, 51, 74, 1);
            cursor: pointer;
            line-height: 1.4;
            margin-right: 6px; /* تحسين قراءة النص */
        }

        /* الأزرار */
        .action-buttons {
            display: flex;
            flex-direction: column; /* عمودي على الجوال */
            padding-top: 1.5rem; /* زيادة مسافة */
        }

        .action-button {
            width: 100%;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            border-radius: 10px;
            transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
            text-align: center;
            cursor: pointer;
            flex: 1;
        }

        /* زر التبرع (Primary) */
        .donate-button {
            background-color: var(--paypal-blue);
            color: white;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            margin-bottom: 0.75rem; /* مسافة بين الأزرار على الجوال */
        }
        .donate-button:hover {
            background-color: rgba(0, 112, 186, 0.9);
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
        }
        .donate-button:active {
            transform: translateY(1px); /* تأثير الضغط */
        }
        .donate-button:focus {
            outline: none;
            box-shadow: 0 0 0 4px rgba(0, 112, 186, 0.5);
        }

        /* زر الإلغاء (Secondary) */
        .cancel-button {
            background-color: white;
            color: rgba(94, 144, 176, 1);
            border: 1px solid #d1d5db;
        }
        .cancel-button:hover {
            background-color: var(--light-gray-bg);
        }
        .cancel-button:active {
            transform: translateY(1px); /* تأثير الضغط */
        }
        .cancel-button:focus {
            outline: none;
            box-shadow: 0 0 0 4px rgba(229, 231, 235, 0.5);
        }

        /* تعديل الأزرار للشاشات الكبيرة (Desktop) */
        @media (min-width: 640px) {
            .action-buttons {
                flex-direction: row-reverse; /* أفقي على شاشات سطح المكتب */
            }
            .donate-button {
                margin-bottom: 0;
                margin-right: 1rem; /* مسافة بين الأزرار */
            }
        }

        /* صندوق الرسائل المخصص (Modal/Message Box) */
        #message-box {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.6); /* تعتيم أقوى للخلفية */
            z-index: 50;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            transition: opacity 0.3s ease;
        }

        #message-box.visible {
            display: flex;
        }

        .message-content {
            background-color: white;
            border-radius: 0.75rem; /* حواف أكثر استدارة */
            padding: 1.5rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
            width: 100%;
            max-width: 20rem; /* تصغير حجم المربع قليلاً */
            text-align: right; /* محاذاة النص لليمين */
        }

        #message-text {
            font-size: 1rem; /* تصغير حجم الخط قليلاً ليكون أنسب */
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 1.5rem;
            white-space: pre-wrap;
            line-height: 1.5;
        }
        
        .message-button {
            background-color: var(--paypal-blue);
            color: white;
            padding: 0.6rem 1.5rem;
            border-radius: 9999px;
            border: none;
            cursor: pointer;
            width: auto; /* لتحديد العرض حسب النص */
            display: block;
            margin: 0.5rem auto 0; /* توسيط الزر في المربع */
        }
        .message-button:hover {
            background-color: rgba(0, 112, 186, 0.9);
        }