* {
    box-sizing: border-box;
}





html {
    font-size: 16px;
}

body {
        overflow-x: hidden;

    margin: 0;
    padding: 0;
    background-image: url("bg.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-color: #eef2f3;
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
}

/* ===== Footer officiel ===== */

/* ===== Footer ===== */

.site-footer{
    

width:100%;

background:#1f4fa3;

color:white;

margin-top:60px;

border-top:3px solid #153d80;

}

.footer-inner{

max-width:1100px;

margin:auto;

padding:15px 12px;

text-align:center;

box-sizing:border-box;

}

.footer-top{

font-size:15px;

font-weight:bold;

margin-bottom:6px;

}

.footer-middle{

font-size:13px;

opacity:0.9;

margin-bottom:10px;

}

.footer-bottom{

font-size:12px;

opacity:0.8;

}

/* ===== Header ===== */
.header {
    background-color: #0057a3;
 /* الأزرق */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0; 
    margin: 0;           /* مسافة جانبية */
}

/* اللوجو الشمال */
.logo-left {
    height: 159px ;
    padding: 0;
    margin: 0;   /* تحكم في الحجم */
    display: block;   /* ← ده الحل */

}

/* اللوجو اليمين */
/* الكونتينر بتاع لوجو اليمين */
.logo-right-container {
    width: 140px;        /* عرض الكونتينر */
    height: 133px;        /* ارتفاع الكونتينر */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    margin-right: 26px;
        margin-top: 26px;
       border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    
}

/* اللوجو نفسه */
.logo-right {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    
}

.mobile-logo {
    display: none;
}

.mobile-logo img {
    height: 80px;
}

.page-content {
    padding-left: 130px;
    max-width: 100%;
}

.form-box {
    background: white;
    width: 380px;
    border: 1px solid #dcdcdc;
}







/* العنوان */


/* ===== Alert ===== */
.alert {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    margin: 20px;
    padding: 15px;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* ===== Title ===== */
.page-title {
    margin: 20px;
    font-size: 1.30rem;
    color: #1d2d7a;
}

/* ===== Content ===== */
.content {
    display: flex;
    padding: 0 20px 40px;
}

/* ===== Form Box ===== */


.form-header {
    background: #f5f5f5;
    padding: 10px;
    font-size: 0.875rem;
    border-bottom: 1px solid #ddd;
}

.form-body {
    padding: 15px;
}

label {
    font-size: 0.815rem;
    font-weight: bold;
    margin-top: 12px;
    display: block;
}
label1 {
    font-size: 0.775rem;
    margin-bottom: 5px;
    margin-top: 5px;
    display: block;
}

input {
    width: 100%;
    padding: 8px 10px;
    margin-top: 4px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.875rem;
    outline: none;
    transition: box-shadow 0.3s, border-color 0.3s;
}

/* لما يتحدد أي input */
input:focus {
    border-color: #3399ff;
    box-shadow: 0 0 6px rgba(51, 153, 255, 0.7);
}



/* ===== Help Box ===== */
.help-box {
    background: #e7f0ff;
    border: 1px solid #b6d4fe;
    margin-top: 15px;
    padding: 12px;
    font-size: 0.815rem;
    color: #084298;
}

.help-box strong {
    display: block;
    margin-bottom: 8px;
}

/* ===== Button ===== */
button {
    width: 100%;
    margin-top: 15px;
    background: #0a5ea8;
    color: white;
    border: none;
    padding: 10px;
    font-size: 0.875rem;
    cursor: pointer;
}

button:hover {
    background: #084a85;
}
/* لينك الصورة */
.image-link {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}

/* الخلفية المعتمة */
.popup {
    display: none;
    position: fixed;
    inset: 0;                      /* بدل top/left/width/height */
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    z-index: 9999;                 /* مهم */
}

/* محتوى البوب اب */
.popup-content {
    background: white;
    padding: 15px;
    text-align: center;
    border-radius: 4px;
    max-width: 90vw;               /* مهم */
    max-height: 90vh;              /* مهم */
    overflow: auto;                /* مهم */
}

/* الصورة */
.popup-content img {
    display: block;
    max-width: 100%;
    max-height: 75vh;              /* أهم سطر */
    width: auto;                   /* يمنع التمدد */
    margin: 0 auto;
}

/* زر Fermer */
.close-btn {
    margin-top: 10px;
    color: #0a5ea8;
    font-weight: bold;
    cursor: pointer;
}

.help-link {
    display: block;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 8px;  
    color: #2f77e2;      /* نفس لون نص Attention */
    font-size: 0.815rem;
    text-decoration: none;
    cursor: pointer;
}

.help-link:hover {
    text-decoration: underline;
}
/* صندوق الكابتشا */
#captcha-box {
    margin-top: 8px;
    padding: 10px;
    background: linear-gradient(135deg, #e6e6e6, #f9f9f9);
    border: 1px solid #ccc;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    color: #666;
}

#captcha-error {
    margin-top: 6px;
    font-size: 0.775rem;
    font-weight: bold;
    color: #b00020;
    opacity: 0;
    transition: opacity 0.3s;
}
#captcha-canvas {
    margin-top: 25px;
    border: 1px solid #ccc;
    background-image: url("captcha.jpg");
    background-size: cover;
    background-position: center;
    width: 100%;
}

.captcha-wrapper {
    width: 100%;
    max-width: 230px;
}
#captcha-input {
    padding: 6px 8px;
    border: 1px solid #ccc;
    outline: none; /* نشيل الإطار الافتراضي */
    transition: box-shadow 0.3s, border-color 0.3s;
}

/* لما المستخدم يحدد على الخانة */
#captcha-input:focus {
    border-color: #3399ff;
    box-shadow: 0 0 6px rgba(51, 153, 255, 0.7);
}

.alert-title {
    font-family:  sans-serif;
    font-size: 0.875rem;
    font-weight: bold;
    color: #664d03;
    display: block; 
   
}

.alert-text {
    font-family: sans-serif;
    font-size: 0.875rem;
    color: #664d03;
    line-height: 1.6;
}
.form-row {
    display: flex;
    align-items: center; /* ده أهم سطر */
    margin-bottom: 12px;
    
}

.form-row label {
    width: 100%;
    max-width: 150px;
    font-size: 0.815rem;
    font-weight: bold;
    line-height: 1;      /* مهم */
    margin: 0;    
    position: relative;
    top: -5px;       /* مهم */
}



.form-row input {
    flex: 1;
    padding: 8px 10px;
    font-size: 0.875rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-row input:focus {
    border-color: #3399ff;
    box-shadow: 0 0 6px rgba(51, 153, 255, 0.7);
}

.field-error{
color:#d60000;
font-size:12px;
margin-bottom:6px;
display:none;
}
.not-found-box{

display:none;

background:#d93025;

color:white;

padding:12px;

margin-bottom:15px;

border-radius:4px;

font-size:15px;

}

/* زر البحث */
#search-btn{
position:relative;
}

/* اللودر */
.loader{
display:none;
width:18px;
height:18px;
border:3px solid white;
border-top:3px solid transparent;
border-radius:50%;
animation:spin 1s linear infinite;
margin:auto;
}

.loading .btn-text{
display:none;
}

.loading .loader{
display:inline-block;
}

@keyframes spin{

0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}

}





@media (max-width: 768px) {
 html {
        font-size: 17px;
    }
.page-title {
    margin: 20px;
    text-align: center;
    font-size: 1.30rem;
    color: #1d2d7a;
}

.footer-inner{

padding:10px 5px;

}

.footer-top{

font-size:13px;

}

.footer-middle{

font-size:12px;

}

.footer-bottom{

font-size:11px;

}

    
  .page-content {
        padding: 0 10px;      /* نشيل انحراف الشمال */
        margin: 0 auto;
        width: 100%;
    }

    .form-box {
        width: 100%;          /* بدل 380px */
        max-width: 100%;     /* يحافظ على الشكل */
        margin: 0 auto;       /* توسيط */
    }


    .header-left,
    .header-right {
        display: none;
    }

   .header {
    display: flex;
    align-items: stretch;   /* مهم */
    height: 100px;
    padding: 0;
    width: 100%;
    overflow: hidden;
}

.mobile-logo {
    display: flex;
    align-items: stretch;
    padding: 0;
    margin: 0;
}

.mobile-logo img {
    display: block;
    height: 100%;          /* يملى الارتفاع */
    width: auto;
    max-height: none;      /* مهم */
    margin: 0;
    padding: 0;
}





     .captcha-wrapper {
        width: 100%;
        max-width: 100%;
    }


    
.result-container{
margin:25px auto;
padding:0 12px;
}

.result-title{
font-size:22px !important;
}

.result-desc{
font-size:14px !important;
}

.result-table td{
font-size:13px !important;
padding:10px !important;
}

.download-btn{
font-size:15px !important;
padding:12px 22px !important;
}


    
}