.va-frontend-wrap { 
    max-width: 900px; 
    margin: 0 auto;           /* Center the whole box */
    padding: 20px; 
    background: #FFF9EC;
    border: 1px solid #eee; 
    direction: rtl;
    text-align: center;        /* Center all inside text */
    font-family: "Alef", "Rubik", "Assistant", sans-serif;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

@media (max-width: 767px) {
    input#va-file {
    border: 2px solid #fcb900;
    padding: 10px  ! important;
    border-radius: 40px;
}
}
/* Input fields */
.va-form input[type="text"], 
.va-form input[type="file"] { 
    padding: 8px; 
    font-size: 14px; 
    width: 100%; 
    box-sizing: border-box;
    direction: rtl;
    text-align: right;
    margin-top: 10px;
}
#va-result {
margin-top: 20px;
background: #ffffff;
padding: 20px;

border: 1px solid #ddd;
border-radius: 8px;
min-height: 400px; /* Makes the box tall/big */
font-size: 16px;   /* Larger, readable text */
line-height: 1.6;
color: #333;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
white-space: pre-wrap; /* Preserves line breaks like the <pre> tag did */
font-family: inherit; /* Uses your site's standard font instead of computer code font */
 text-align: right;
direction: rtl;
}
/* Button centered */
.va-button { 
    display: inline-block !important;
    margin: 15px auto 0 !important;
    padding: 14px 28px !important;       /* Your padding */
    background: #F8AB53 !important;      /* Your orange color */
    color: #fff !important;
    border: none !important;             /* Your border style */
    border-radius: 25px !important;      /* Rounded button */
    cursor: pointer !important;
    font-size: 16px !important;          /* Bigger text */
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    flex-grow: 1 !important;
    transition: background-color 0.3s ease, 
                transform 0.1s ease !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    width:200px ! important;
}

.va-button:hover { 
    background: #d57f22 !important;     /* Darker hover */
    transform: scale(1.02) !important;  /* Small hover effect */
}


/* Result box also centered */