/* =============================
   ستايل وسط الصفحة والخريطة
   ============================= */
/* الحاوية الرئيسية */
.page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;        /* توسيط أفقي */
    justify-content: center;    /* توسيط عمودي */
    min-height: 100vh;            /* يغطي طول الشاشة على الأقل */
    background-color: #32353a;
    padding: 20px;
    box-sizing: border-box;
    height: 100%;
}

/* رسالة الترحيب */
.welcome-message {
  font-weight: bold;
  color: #c18a32;
  margin-bottom: 30px;
  margin-top: 0;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.welcome-message h2 {
    font-size: 28px;
    margin-bottom: 10px;
}

.welcome-message p {
    font-size: 16px;
    color: #fff7e6; /* أبيض */
}

/* حاوية الخريطة والأزرار */
.map-buttons-wrapper {
    display: flex;
    flex-direction: row;        /* الخريطة على اليسار، الأزرار على اليمين */
    align-items: center;        /* توسيط عمودي داخل الحاوية */
    justify-content: center;    /* توسيط أفقي داخل الحاوية */
    align-items: flex-start;   /* العناصر تبدأ من الأعلى */
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
}

/* الأزرار */
.buttons-column {
    
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 250px;              /* عرض محدد للعمود */
}

.buttons-column button {
    width: 100%;
    height: 50px;              /* ارتفاع كل زر */
    border: none;
    border-radius: 8px;
    background-color: #c18a32;
    color: #fff7e6;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.buttons-column button:hover {
    background-color: #a76f28;
}

/* الخريطة */
.map-wrapper {
    flex: 1;                    /* تأخذ باقي المساحة */
    width: 100%;
    height: 600px;              /* تحكمي في ارتفاع الخريطة كما تحبي */
    position: relative; /* 🔥 هذا هو المفتاح */
}

.map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* ========== استجابة الهواتف ========== */
@media screen and (max-width: 768px) {
    .map-buttons-wrapper {
        flex-direction: column; /* الخريطة فوق الأزرار */
    }

    .map-wrapper {
        aspect-ratio: auto; /* نلغي النسبة على الهاتف */
        width: 100%;
        height: 70vh;      /* تأخذ معظم طول الشاشة */
    }
 
    .map-wrapper iframe {
        height: 70vh; /* تأكد من ارتفاع iframe */
    }

    .buttons-column {
        width: 100%;
        flex-direction: column; /* الأزرار تبقى عمودية */
        gap: 10px; /* مسافة بين الأزرار */
        align-items: center; /* توسيط الأزرار أفقياً */
    }

    .buttons-column button {
        width: 80%; /* كل زر يأخذ 80% من عرض الحاوية */
        max-width: 250px;
    }
}

.overlay-card{
    position: absolute;
    top: 20%;
    left: 50%;
    direction: rtl;
    text-align: right;

    transform: translate(-50%, -50%);

    width: 340px;
    max-width: 90%;

    padding: 10px 15px 10px 15px; /* top right bottom left */

    border-radius: 18px;

    background: rgba(0, 0, 0, 0.35); /* 🔥 أكثر شفافية */
   
    border: 1px solid rgba(255,255,255,0.08);

    color: #fff7e6;

    text-align: center;

    z-index: 999;
}

/* العنوان */
.overlay-card h3{
    color: #d4af37;
    margin: 0 0 10px 0; /* 🔥 يشيل كل الفراغ فوق وتحت مضبوط */
    font-size: 20px;
}

/* النص */
.overlay-card p{
    font-size: 18px;
    line-height: 1.7;
    color: #eee;
    margin-bottom: 15px;
}

/* الزر */
.overlay-btn{
    display: inline-block;
    padding: 10px 18px;

    background: #d4af37;
    color: #fff7e6;

    border-radius: 10px;
    text-decoration: none;

    font-weight: bold;

    transition: 0.3s;
}

.overlay-btn:hover{
    transform: scale(1.05);
}

/* كلمة DEMO */
.overlay-watermark{
    position: absolute;
    top: 10px;
    right: -30px;

    transform: rotate(35deg);

    font-size: 12px;
    color: rgba(255,255,255,0.15);
    letter-spacing: 2px;
}

@media (max-width: 768px){

    .overlay-card{
        width: 65%;          /* تصغير العرض */
        padding: 6px;       /* تقليل البادينغ */
        border-radius: 14px;

        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .overlay-card h3{
        font-size: 18px;
    }

    .overlay-card p{
        font-size: 13px;
        line-height: 1.6;
    }

    .overlay-btn{
        padding: 10px 16px;
        font-size: 14px;
    }

    .overlay-watermark{
        font-size: 11px;
        right: -25px;
    }
}