style.css

.form-cnt {
    padding: 37px 60px;         
    border-radius: 10px;        
    display: flex;              
    flex-direction: column;     
    gap: 7px;                  /* المسافة بين كل عنصر، يمكن تعديلها حسب الحاجة */
    align-items: center;    /* محاذاة العناصر إلى اليسار، لتتناسب مع العناوين */
    position: absolute;         
    left: 200px;                
    top: 50%;                   
    transform: translateY(-50%);
    border: 2px solid #ccc;     
    box-sizing: border-box;     
    background-color: #f5f5f5;  
}

.form-cnt h3 {
    margin: 0;          /* remove all extra space */
    padding: 0;         /* remove any padding */
    font-size: 18px;    /* optional: adjust size */
}

.form-cnt input {
    margin-top: 2px;    /* tiny space between h3 and input */
    padding: 5px;       /* keep input usable */
}


.result {
    border: 2px solid #333;        /* إطار غامق حول مربع النتيجة */
    padding: 15px;                 /* مساحة داخلية للنصوص */
    width: 300px;                  /* عرض ثابت للمربع */
    position: fixed;               /* يبقى مكانه عند التمرير */
    top: 50%;                      /* منتصف ارتفاع الصفحة */
    right: 200px;                      /* ملصق تماماً إلى يمين الصفحة */
    transform: translateY(-50%);   /* يحركه نصف ارتفاعه للأعلى ليكون في المنتصف */
    background-color: #f9f9f9;    /* خلفية فاتحة */
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1); /* ظل خفيف */
    border-radius: 5px;            /* حواف دائرية */
}