@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');
*{box-sizing:border-box;}
body{margin:0;font-family:'Cairo',sans-serif;background:#f4faf4;color:#12351f;overflow-x:hidden;}
.public-header{background:linear-gradient(135deg,#0f331c,#1B5E20);color:#fff;padding:16px 38px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 10px 26px rgba(0,0,0,.14);position:relative;z-index:5;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font-weight:900;font-size:20px;}
.brand img{width:54px;height:54px;border-radius:16px;background:#fff;padding:5px;object-fit:cover;}
.public-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.public-nav a{text-decoration:none;color:#fff;font-weight:800;padding:9px 14px;border-radius:999px;transition:.2s;background:rgba(255,255,255,.08);}
.public-nav a:hover,.public-nav a.active{background:rgba(255,255,255,.22);}
.lang-switch{display:flex;background:rgba(0,0,0,.18);padding:3px;border-radius:999px;gap:3px;}
.lang-switch a{background:transparent!important;padding:5px 10px!important;}
.lang-switch a.active{background:#fff!important;color:#1B5E20!important;}
.map-section{padding:28px;}
.map-card{background:#fff;border-radius:26px;box-shadow:0 20px 46px rgba(0,0,0,.09);padding:18px;overflow:hidden;border:1px solid #dcebdd;}
.map-title{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 15px;flex-wrap:wrap;}
.map-title h1{margin:0;color:#1B5E20;font-size:28px;font-weight:900;}
.map-title p{margin:5px 0 0;color:#66746b;font-weight:700;}
.map-frame{width:100%;height:calc(100vh - 175px);min-height:560px;border:none;border-radius:20px;background:#e8f5e9;display:block;}
@media(max-width:800px){.public-header{padding:14px 16px;flex-direction:column;align-items:stretch}.public-nav{justify-content:center}.map-section{padding:14px}.map-frame{height:620px;min-height:620px}.map-title h1{font-size:23px}}
/* ==============================
   Responsive Mobile Fix
   أضفه في آخر ملف CSS فقط
============================== */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
iframe {
    max-width: 100%;
}

/* التابلت والجوال */
@media (max-width: 800px) {
    .public-header {
        padding: 14px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .brand {
        justify-content: center;
        font-size: 18px;
        text-align: center;
        line-height: 1.5;
    }

    .brand img {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        flex: 0 0 48px;
    }

    .public-nav {
        justify-content: center;
        gap: 8px;
    }

    .public-nav a {
        font-size: 13px;
        padding: 8px 12px;
    }

    .lang-switch {
        margin: 0 auto;
    }

    .lang-switch a {
        font-size: 12px;
        padding: 5px 9px !important;
    }

    .map-section {
        padding: 14px;
    }

    .map-card {
        padding: 14px;
        border-radius: 22px;
    }

    .map-title {
        gap: 10px;
        margin-bottom: 12px;
    }

    .map-title h1 {
        font-size: 23px;
        line-height: 1.5;
    }

    .map-title p {
        font-size: 13px;
        line-height: 1.7;
    }

    .map-frame {
        width: 100%;
        height: 68vh;
        min-height: 520px;
        border-radius: 18px;
    }
}

/* الجوالات */
@media (max-width: 520px) {
    .public-header {
        padding: 12px;
        gap: 12px;
    }

    .brand {
        font-size: 16px;
        gap: 9px;
    }

    .brand img {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        padding: 4px;
        flex: 0 0 42px;
    }

    .public-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 7px;
    }

    .public-nav a {
        text-align: center;
        font-size: 12px;
        padding: 8px 10px;
        border-radius: 16px;
    }

    .lang-switch {
        grid-column: 1 / -1;
        justify-self: center;
    }

    .map-section {
        padding: 10px;
    }

    .map-card {
        padding: 11px;
        border-radius: 19px;
    }

    .map-title {
        display: block;
        text-align: center;
    }

    .map-title h1 {
        font-size: 20px;
    }

    .map-title p {
        font-size: 12px;
        margin-top: 6px;
    }

    .map-frame {
        height: 64vh;
        min-height: 430px;
        border-radius: 16px;
    }
}

/* الجوالات الصغيرة */
@media (max-width: 380px) {
    .brand {
        font-size: 14px;
    }

    .brand img {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .public-nav {
        grid-template-columns: 1fr;
    }

    .public-nav a {
        font-size: 11.5px;
    }

    .map-title h1 {
        font-size: 18px;
    }

    .map-frame {
        height: 60vh;
        min-height: 380px;
    }
}