/* ============================================================
   Nation Towers Mall — rebuilt stylesheet
   Matches the original 2021 design: pastel category cards,
   grey tenant tiles, pink accents, dark footer. EN + AR (RTL).
   ============================================================ */

:root{
  --pink:        #ee82ee;
  --pink-soft:   #f3a6f3;
  --pink-deep:   #e06ee0;
  --dine-bg:     #f5b8ec;
  --dine-bar:    #f08cb4;
  --life-bg:     #d97ae8;
  --life-bar:    #c07cb0;
  --ent-bg:      #8ce6f0;
  --ent-bar:     #6cc2ee;
  --srv-bg:      #eef2b4;
  --srv-bar:     #c3b577;
  --gold:        #cfc98a;
  --teal:        #4fd6c8;
  --sky:         #7fd4f5;
  --ink:         #4a4a4a;
  --ink-dark:    #222;
  --tile:        #efefef;
  --footer-grey: #f4f4f4;
  --font-main:   'Poppins','Tajawal',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-main);
  color:var(--ink);
  background:#fff;
  line-height:1.6;
}
html[dir="rtl"] body{font-family:'Tajawal','Poppins',sans-serif}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- Header ---------- */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:0 40px;
}
.logo-badge{
  background:#fff;border-radius:0 0 50% 50%/0 0 22px 22px;
  padding:18px 26px 22px;box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.logo-badge img{width:150px;height:auto}
.logo-mark{display:flex;flex-direction:column;align-items:center;gap:6px}
.logo-mark .towers{font-size:0}
.logo-mark svg{width:64px;height:78px}
.logo-mark .wordmark{
  font-size:13px;letter-spacing:4px;color:#222;font-weight:600;text-transform:uppercase;
  font-family:'Poppins',sans-serif;
}
.logo-mark .sub{font-size:8px;letter-spacing:5px;color:#777;text-transform:uppercase;font-family:'Poppins',sans-serif}

.lang-switch{
  margin-top:26px;background:var(--pink);color:#fff;
  padding:9px 32px;border-radius:24px;font-weight:600;font-size:15px;
  transition:.25s;box-shadow:0 4px 12px rgba(238,130,238,.35);
}
.lang-switch:hover{background:var(--pink-deep)}

/* ---------- Hero ---------- */
.hero{position:relative;height:480px;overflow:hidden}
.hero .slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1s ease;
}
.hero .slide.active{opacity:1}
.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:15;
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:var(--pink);color:#fff;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;opacity:.85;transition:.25s;
}
.hero-arrow:hover{opacity:1;transform:translateY(-50%) scale(1.08)}
.hero-arrow.prev{left:22px}
.hero-arrow.next{right:22px}
html[dir="rtl"] .hero-arrow.prev{left:auto;right:22px}
html[dir="rtl"] .hero-arrow.next{right:auto;left:22px}

/* hero photos */
.ph-home1{background-image:url('../img/photos/hero-home-1.jpg')}
.ph-home2{background-image:url('../img/photos/hero-home-2.jpg')}
.ph-home3{background-image:url('../img/photos/hero-home-3.jpg')}
.ph-dine{background-image:url('../img/photos/hero-dine.jpg')}
.ph-life-1{background-image:url('../img/photos/hero-lifestyle-1.jpg')}
.ph-life-2{background-image:url('../img/photos/hero-lifestyle-2.jpg')}
.ph-life-3{background-image:url('../img/photos/hero-lifestyle-3.jpg')}
.ph-ent-1{background-image:url('../img/photos/hero-entertainment-1.jpg')}
.ph-ent-2{background-image:url('../img/photos/hero-entertainment-2.jpg')}

/* ---------- Page intro ---------- */
.page-intro{text-align:center;padding:56px 24px 30px}
.page-intro h1{font-size:44px;font-weight:600;margin-bottom:14px}
.page-intro p{max-width:840px;margin:0 auto;color:#7a7a7a;font-size:15.5px}
.t-dine{color:#f59ad0}.t-life{color:#cf6ee4}.t-ent{color:#3fd9d0}.t-srv{color:var(--gold)}

/* ---------- Tenant grid ---------- */
.tenants{padding:30px 0 60px}
.tenant-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
}
.tenant{
  background:var(--tile);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  padding:26px;transition:.3s;
}
.tenant:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.tenant img{max-height:70%;object-fit:contain;mix-blend-mode:multiply}
.tenant .brand-name{
  text-align:center;font-weight:600;color:#555;font-size:17px;letter-spacing:1px;
  text-transform:uppercase;line-height:1.4;font-family:'Poppins',sans-serif;
}
.tenant .brand-name small{display:block;font-weight:400;font-size:11px;letter-spacing:2px;color:#999;margin-top:4px}

/* ---------- Category cards ---------- */
.categories{padding:40px 0 70px}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.cat-card{display:flex;flex-direction:column;overflow:hidden;transition:.3s}
.cat-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(0,0,0,.12)}
.cat-card .icon{
  aspect-ratio:1/1.05;display:flex;align-items:center;justify-content:center;
}
.cat-card .icon svg{width:55%;height:55%;stroke:#fff;fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.cat-card .label{
  text-align:center;color:#fff;font-weight:600;font-size:20px;padding:10px 0;
}
.cat-dine .icon{background:var(--dine-bg)}   .cat-dine .label{background:var(--dine-bar)}
.cat-life .icon{background:var(--life-bg)}   .cat-life .label{background:var(--life-bar)}
.cat-ent  .icon{background:var(--ent-bg)}    .cat-ent  .label{background:var(--ent-bar)}
.cat-srv  .icon{background:var(--srv-bg)}    .cat-srv  .label{background:var(--srv-bar)}

/* ---------- About (home) ---------- */
.about{background:var(--sky);padding:70px 0}
.about .wrap{display:grid;grid-template-columns:420px 1fr;gap:44px;align-items:center}
.about .photo{background:url('../img/photos/about.jpg') center/cover;min-height:340px;box-shadow:0 12px 30px rgba(0,0,0,.15)}
.about h2{color:#fff;font-size:30px;margin-bottom:18px;font-weight:600}
.about p{color:#fdfdfd;font-size:15px;margin-bottom:14px}

/* ---------- Newsletter ---------- */
.newsletter{
  position:relative;padding:90px 24px;text-align:center;color:#fff;
  background:linear-gradient(rgba(20,20,25,.6),rgba(20,20,25,.6)),url('../img/photos/newsletter.jpg');
  background-size:cover;background-position:center;
}
.newsletter h2{font-size:34px;color:#f5e98a;font-weight:600;margin-bottom:34px}
.newsletter input{
  width:min(460px,90%);padding:14px 18px;border:none;font-size:15px;display:block;margin:0 auto 26px;
  font-family:inherit;
}
.btn{
  display:inline-block;background:var(--pink);color:#fff;border:none;cursor:pointer;
  padding:12px 42px;border-radius:26px;font-size:16px;font-weight:600;font-family:inherit;
  transition:.25s;box-shadow:0 6px 16px rgba(238,130,238,.4);
}
.btn:hover{background:var(--pink-deep);transform:translateY(-2px)}
.btn.subscribe{background:#fff;color:var(--pink)}
.btn.subscribe:hover{background:var(--pink);color:#fff}

/* ---------- Contact ---------- */
.contact{padding:80px 0}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.contact .map{background:#e8e8e4;min-height:420px;border:1px solid #ddd}
.contact .map iframe{width:100%;height:100%;min-height:420px;border:0}
.contact h2{font-size:34px;text-align:center;margin-bottom:36px;font-weight:600;color:#555}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .full{grid-column:1/-1}
.contact input,.contact textarea{
  width:100%;padding:14px 20px;border:1px solid #cfcfcf;border-radius:26px;
  font-size:15px;font-family:inherit;color:#555;outline:none;transition:.25s;background:#fff;
}
.contact textarea{border-radius:18px;min-height:150px;resize:vertical}
.contact input:focus,.contact textarea:focus{border-color:var(--pink)}
.contact .actions{text-align:end;margin-top:26px}

/* ---------- Footer ---------- */
.footer-info{background:var(--footer-grey);text-align:center;padding:26px 16px;font-size:16px}
.footer-info b{color:#222}
.site-footer{background:#0c0c0c;color:#ddd;text-align:center;padding:34px 16px 90px;position:relative}
.site-footer p{font-size:15px}
.socials{
  position:absolute;left:50%;transform:translateX(-50%);bottom:-1px;
  background:var(--pink);border-radius:18px 18px 0 0;padding:10px 22px;display:flex;gap:18px;
}
.socials a{color:#fff;display:flex}
.socials svg{width:20px;height:20px;fill:#fff}
.fab-call{
  position:fixed;right:26px;bottom:26px;z-index:50;
  width:62px;height:62px;border-radius:50%;background:var(--pink);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(238,130,238,.5);
  transition:.25s;
}
html[dir="rtl"] .fab-call{right:auto;left:26px}
.fab-call:hover{transform:scale(1.08)}
.fab-call svg{width:26px;height:26px;fill:#fff}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .tenant-grid,.cat-grid{grid-template-columns:repeat(2,1fr)}
  .about .wrap,.contact .wrap{grid-template-columns:1fr}
  .page-intro h1{font-size:34px}
}
@media(max-width:540px){
  .tenant-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .cat-grid{grid-template-columns:1fr 1fr;gap:14px}
  .site-header{padding:0 16px}
  .logo-badge{padding:12px 16px 16px}
  .logo-mark svg{width:46px;height:56px}
  .hero{height:340px}
}