*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:'Tajawal',sans-serif;
min-height:100vh;
background:linear-gradient(135deg,#075e54 0%,#128c7e 50%,#25d366 100%);
padding:20px;
display:flex;
justify-content:center;
align-items:center;
}
.wrapper{width:100%;max-width:1180px}
.grid{
display:grid;
grid-template-columns:minmax(320px,560px);
justify-content:center;
place-content:center;
gap:30px;
width:100%;
}
.card{
background:#fff;
border-radius:28px;
overflow:hidden;
box-shadow:0 25px 70px rgba(0,0,0,.22);
}
.topbar{
background:#075e54;
padding:22px 24px;
color:#fff;
display:flex;
align-items:center;
gap:12px;
}
.topbar.rtl{direction:rtl}
.dot{
width:12px;height:12px;border-radius:50%;background:#25d366;
box-shadow:0 0 0 5px rgba(37,211,102,.18)
}
.topbar h3{font-size:20px;font-weight:700}
.topbar p{font-size:13px;opacity:.85}
.content{padding:34px 26px;text-align:center}
.brand-logo{
width:120px;height:120px;
margin:0 auto 18px;
border-radius:50%;
background:#f5f5f5;
border:2px solid #e5e7eb;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-shadow:0 12px 30px rgba(7,94,84,.15)
}
.brand-logo img{width:100%;height:100%}
.brand-name{
font-size:30px;
font-weight:800;
color:#075e54;
margin-bottom:10px
}
.message{
max-width:390px;
margin:0 auto 20px;
line-height:1.8;
font-size:16px;
color:#4b5563
}
.message.rtl {
   direction:rtl 
}
.phone{
display:inline-block;
padding:11px 18px;
border-radius:50px;
background:#ecfdf3;
font-weight:700;
color:#075e54;
border:1px solid rgba(37,211,102,.3);
margin-bottom:24px;
direction:ltr;
}
.wa-btn{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
text-decoration:none;
background:#25d366;
color:#fff;
padding:16px 22px;
border-radius:18px;
font-weight:800;
font-size:17px;
box-shadow:0 14px 28px rgba(37,211,102,.35)
}
.divider{
margin:28px 0 24px;
height:1px;
background:#e5e7eb;
}
.location-box{
background:#f9fafb;
border:1px solid #e5e7eb;
border-radius:22px;
padding:22px;
text-align:left;
}
.location-box.rtl{text-align:right;direction:rtl}
.location-title{
font-size:14px;
font-weight:800;
color:#075e54;
margin-bottom:14px;
text-transform:uppercase;
}
.mall-row{
display:flex;
align-items:center;
gap:14px;
margin-bottom:16px;
}
.mall-row.rtl{flex-direction:row-reverse}
.mall-logo{
width:80px;height:80px;
background:#fff;
border:1px solid #ddd;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.mall-logo img{max-height:100%}
.mall-details strong{
display:block;
font-size:16px;
margin-bottom:4px;
color:#111827
}
.mall-details span{
font-size:15px;
color:#374151
}
.address{
font-size:15px;
line-height:1.8;
color:#374151;
margin-bottom:18px
}
.map-link{
display:inline-block;
text-decoration:none;
background:#075e54;
color:#fff;
padding:10px 18px;
border-radius:14px;
font-weight:700;
margin-right:10px;
}
.note{
margin-top:18px;
font-size:12px;
color:#6b7280
}

.note.rtl{
direction:rtl
}
.lang-badge{
position:absolute;
top:16px;
right:18px;
background:#ecfdf3;
color:#075e54;
padding:6px 12px;
border-radius:20px;
font-size:12px;
font-weight:700;
}

.lang-badge a:link,.lang-badge a:visited,.lang-badge a:hover {
        text-decoration: none;
    color: #000;
}
.card-wrap{position:relative}
.rtl .lang-badge{left:18px;right:auto}
@media(max-width:920px){
.grid{grid-template-columns:1fr}
}
@media(max-width:480px){
.brand-name{font-size:25px}
.content{padding:28px 20px}
.location-box,.location-box.rtl{text-align:center}
.mall-row,.mall-row.rtl{flex-direction:column}
}