/*! Live Elhamdania — public site styles
 *  Consolidated from the design handoff (site.css + index.html inline block
 *  + the two stylesheets chatbot.js used to inject at runtime).
 *  Static-site :target navigation hacks removed — Blade uses real routes. */

/* ==========================================================================
   Tokens & base
   ========================================================================== */

:root{--purple:#5421c7;--purple2:#7a32e2;--deep:#190553;--ink:#201068;--pink:#ff426d;--muted:#77718d;--line:#ece9f5;--soft:#f7f4ff;--icon-bg:#f4f0fa;--shadow:0 10px 34px rgba(35,16,96,.09)}

.listing-card,.article,.article-lead,.news-item{position:relative}.listing{position:relative}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fbfaff;color:var(--ink);font-family:"Tajawal",Arial,sans-serif}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}button,input{font:inherit}.container{width:min(1180px,92%);margin:auto}
.top{background:linear-gradient(120deg,#1b075c,#331086);color:#fff}.nav{height:82px;display:flex;align-items:center;gap:38px}.logo{margin-left:auto;font-size:27px;font-weight:900;font-style:italic;line-height:.75}.logo small{display:block;text-align:center;font-size:11px;font-style:normal;margin-top:8px}.links{display:flex;gap:31px;align-items:stretch;font-size:14px;font-weight:700}.links a{padding:32px 5px 27px;border-bottom:2px solid transparent}.links a:hover,.links a.active{border-color:var(--pink)}.nav-actions{display:flex;gap:12px;align-items:center}.round{width:44px;height:44px;border:1px solid #7658b9;border-radius:50%;display:grid;place-items:center}.primary{border:0;background:linear-gradient(135deg,#ff5572,#ff2f61);color:#fff;border-radius:12px;padding:13px 25px;font-weight:800}
.page-hero{background:linear-gradient(120deg,rgba(27,7,92,.94),rgba(72,20,151,.9)),url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1800&q=82') center/cover;color:#fff;padding:58px 0 67px;text-align:center}.crumbs{font-size:13px;color:#cfc1ef;margin-bottom:18px}.page-hero h1{font-size:46px;margin:0 0 12px}.page-hero p{max-width:650px;margin:auto;color:#ddd3f5;line-height:1.8}.search{max-width:700px;height:60px;margin:25px auto 0;background:#fff;border-radius:13px;padding:7px;display:flex;box-shadow:0 12px 30px #16034855}.search input{flex:1;border:0;outline:0;padding:0 17px}.search button{border:0;border-radius:9px;padding:0 28px;background:var(--purple);color:#fff;font-weight:800}
.section{padding:48px 0}.heading{text-align:center;margin-bottom:28px}.heading h2{font-size:30px;margin:0 0 8px}.heading p{color:var(--muted);margin:0}.filters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 28px}.filter{background:#fff;border:1px solid var(--line);padding:10px 18px;border-radius:999px;color:#6e6485;font-weight:700;font-size:13px}.filter.active,.filter:hover{background:var(--purple);color:#fff;border-color:var(--purple)}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.category{background:#fff;border:1px solid var(--line);border-radius:15px;padding:25px;box-shadow:var(--shadow);transition:.25s;position:relative;overflow:hidden;scroll-margin-top:25px}.category:after{content:"←";position:absolute;left:20px;bottom:25px;color:#6b2ed1;font-size:20px}.category:hover{transform:translateY(-5px);border-color:#cdbcf2}.category:target{border-color:#6a2bd1;box-shadow:0 0 0 4px #6a2bd11a,0 12px 34px rgba(35,16,96,.14)}.cat-icon{width:62px;height:62px;border-radius:18px;background:var(--icon-bg);display:grid;place-items:center;font-size:30px;margin-bottom:17px;overflow:hidden}.category h3{margin:0 0 6px;font-size:18px}.category p{color:var(--muted);font-size:13px;line-height:1.7;margin:0 0 16px}.category small{color:#5722c6;font-weight:800}
.featured-strip{background:linear-gradient(120deg,#351094,#772bdc);border-radius:18px;color:#fff;padding:35px 45px;display:flex;align-items:center;justify-content:space-between}.featured-strip h2{margin:0 0 7px}.featured-strip p{margin:0;color:#ddd0f6}.white-btn{background:#fff;color:#5421c7;padding:12px 24px;border-radius:10px;font-weight:800}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.offer{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:var(--shadow);position:relative;transition:.25s}.offer:hover{transform:translateY(-5px)}.offer img{width:100%;height:210px;object-fit:cover}.discount{position:absolute;top:14px;right:14px;background:var(--pink);color:#fff;border-radius:8px;padding:7px 12px;font-weight:900}.save{position:absolute;top:14px;left:14px;width:34px;height:34px;display:grid;place-items:center;background:#1d1232aa;color:#fff;border:1px solid #ffffffaa;border-radius:50%}.offer-body{padding:19px}.offer-brand{color:#7c7192;font-size:12px}.offer h3{margin:7px 0;font-size:18px}.offer p{font-size:13px;color:var(--muted);line-height:1.7;min-height:44px}.offer-meta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #f0edf6;padding-top:13px;font-size:12px}.ends{color:#e23b62;font-weight:700}.code{background:#f3edff;color:#5721c7;padding:5px 9px;border-radius:6px;font-weight:800}
.article-lead{display:grid;grid-template-columns:1.25fr 1fr;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:26px}.article-lead img{width:100%;height:380px;object-fit:cover}.lead-copy{padding:42px;display:flex;flex-direction:column;justify-content:center}.tag{display:inline-block;width:max-content;background:#f0e9ff;color:#5a22c7;padding:6px 11px;border-radius:7px;font-size:12px;font-weight:800}.lead-copy h2{font-size:30px;line-height:1.45;margin:14px 0}.lead-copy p{color:var(--muted);line-height:1.9}.read{color:#5821c7;font-weight:800;margin-top:9px}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.article{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}.article img{width:100%;height:190px;object-fit:cover}.article-body{padding:19px}.article h3{font-size:18px;line-height:1.55;margin:11px 0}.article p{font-size:13px;color:var(--muted);line-height:1.8}.article-meta{display:flex;justify-content:space-between;color:#91899f;font-size:11px;margin-top:18px}.newsletter{background:linear-gradient(110deg,#291080,#7130d2);border-radius:18px;padding:42px;color:#fff;text-align:center}.newsletter h2{font-size:27px;margin:0 0 8px}.newsletter p{color:#d9cef0}.newsletter form{display:flex;max-width:570px;margin:20px auto 0}.newsletter input{flex:1;padding:15px;border:0;border-radius:0 9px 9px 0}.newsletter button{border:0;background:var(--pink);color:#fff;padding:0 27px;border-radius:9px 0 0 9px;font-weight:800}
footer{background:linear-gradient(120deg,#180459,#281077);color:#fff;padding:50px 0 20px;margin-top:45px}.footer-grid{display:grid;grid-template-columns:1.9fr .9fr 1fr;gap:45px}.footer-logo{font-size:29px;font-weight:900}.footer-col h3{font-size:15px;margin:0 0 10px}.footer-col a,.footer-col p{display:block;color:#c7bde0;font-size:13px;line-height:2}.copyright{border-top:1px solid #ffffff1c;margin-top:34px;padding-top:18px;text-align:center;font-size:12px;color:#b9afd1}
@media(max-width:900px){.links{display:none}.category-grid{grid-template-columns:repeat(2,1fr)}.offer-grid,.article-grid{grid-template-columns:repeat(2,1fr)}.article-lead{grid-template-columns:1fr}.article-lead img{height:260px}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.container{width:94%}.nav{gap:12px}.nav-actions .primary{padding:11px 14px}.page-hero{padding:43px 0}.page-hero h1{font-size:34px}.category-grid,.offer-grid,.article-grid{grid-template-columns:1fr}.featured-strip{padding:28px 22px;display:block}.featured-strip .white-btn{display:inline-block;margin-top:18px}.lead-copy{padding:25px}.lead-copy h2{font-size:23px}.newsletter{padding:30px 18px}.footer-grid{grid-template-columns:1fr}.footer-col:not(:first-child){display:none}}
.listing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.listing-card{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:var(--shadow)}.listing-card img{width:100%;height:205px;object-fit:cover}.listing-body{padding:18px}.listing-body h3{margin:0 0 7px;font-size:18px}.listing-body p{margin:0;color:var(--muted);font-size:13px}.listing-meta{display:flex;justify-content:space-between;margin-top:15px;padding-top:13px;border-top:1px solid #f0edf6;font-size:12px}.rating-star{color:#ffb400}.status-open{color:#199454;font-weight:800}.category-nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:25px}.category-nav a{padding:9px 15px;background:#fff;border:1px solid var(--line);border-radius:9px;font-size:12px;font-weight:700}.category-nav a:hover{background:var(--purple);color:#fff}.empty-guide{text-align:center;background:#fff;border:1px solid var(--line);border-radius:15px;padding:45px}@media(max-width:900px){.listing-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.listing-grid{grid-template-columns:1fr}}
.detail-crumbs{padding:22px 0;color:#817793;font-size:13px}.detail-crumbs a{color:#5922c6}.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:180px 180px;gap:10px;border-radius:18px;overflow:hidden}.gallery img{width:100%;height:100%;object-fit:cover}.gallery img:first-child{grid-row:1/3}.detail-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:25px;margin-top:28px}.content-card,.side-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:26px;box-shadow:var(--shadow);margin-bottom:20px}.detail-title{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.detail-title h1{font-size:32px;margin:0 0 8px}.detail-title p{color:var(--muted);margin:0}.score{background:#effff4;color:#168748;border-radius:11px;padding:12px;text-align:center;font-weight:900;white-space:nowrap}.score small{display:block;font-weight:500}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.fact{background:var(--soft);border-radius:10px;padding:15px;text-align:center;font-size:13px}.content-card h2,.side-card h2{font-size:20px;margin:0 0 16px}.content-card p{color:#5f596b;line-height:2}.menu-row,.hours-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f0edf6;font-size:13px}.side-action{display:block;text-align:center;padding:13px;border-radius:10px;margin-top:10px;background:var(--purple);color:#fff;font-weight:800}.side-action.secondary{background:#f0eaff;color:var(--purple)}.review{padding:15px 0;border-bottom:1px solid #f0edf6}.review b{display:block}.review small{color:#8b8495}.article-page{max-width:850px;margin:auto}.article-cover{width:100%;height:430px;object-fit:cover;border-radius:18px}.article-header{text-align:center;margin:22px auto 30px}.article-header h1{font-size:40px;line-height:1.45;margin:15px 0}.article-header p{color:var(--muted)}.prose{background:#fff;border:1px solid var(--line);border-radius:16px;padding:42px;box-shadow:var(--shadow);font-size:17px;line-height:2.15;color:#4f495b}.prose h2{color:var(--ink);font-size:25px;margin:30px 0 8px}.prose blockquote{margin:25px 0;padding:20px;border-right:4px solid var(--purple);background:var(--soft);color:var(--ink);font-weight:700}.news-hero-image{width:100%;height:460px;object-fit:cover}.news-wrap{max-width:900px;margin:-70px auto 0;position:relative}.news-info{display:flex;gap:22px;flex-wrap:wrap;color:#766e84;font-size:13px;margin:15px 0 25px}.event-box{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:linear-gradient(120deg,#351094,#722bd2);color:#fff;border-radius:14px;padding:24px;margin:25px 0}.event-box div{text-align:center;border-left:1px solid #ffffff28}.event-box div:last-child{border:0}.event-box b{display:block;font-size:18px}@media(max-width:800px){.gallery{grid-template-columns:1fr 1fr;grid-template-rows:260px 130px}.gallery img:first-child{grid-column:1/3;grid-row:auto}.detail-layout{grid-template-columns:1fr}.article-cover,.news-hero-image{height:300px}.news-wrap{margin:-35px auto 0}.article-header h1{font-size:30px}}@media(max-width:560px){.facts,.event-box{grid-template-columns:1fr}.gallery{display:block}.gallery img{height:120px;margin-bottom:8px}.gallery img:first-child{height:230px}.content-card,.side-card,.prose{padding:21px}.detail-title{display:block}.score{margin-top:15px;width:max-content}.article-header h1{font-size:26px}.prose{font-size:15px}.event-box div{border-left:0;border-bottom:1px solid #ffffff28;padding:9px}}

/* ==========================================================================
   Chat assistant
   ========================================================================== */

.chat-launch{position:fixed;left:24px;bottom:24px;width:60px;height:60px;border:0;border-radius:50%;background:linear-gradient(135deg,#7a32e2,#4b16b7);color:#fff;font-size:26px;box-shadow:0 12px 30px #35108055;cursor:pointer;z-index:9998}.chat-panel{position:fixed;left:24px;bottom:96px;width:390px;max-height:620px;background:#fff;border:1px solid #e8e2f4;border-radius:20px;box-shadow:0 18px 55px #1c075d33;overflow:hidden;display:none;z-index:9999;direction:rtl;font-family:inherit}.chat-panel.open{display:flex;flex-direction:column}.chat-head{background:linear-gradient(120deg,#260b75,#6926d2);color:#fff;padding:17px;display:flex;justify-content:space-between;align-items:center}.chat-head b{display:block;font-size:16px}.chat-head small{color:#ddd1f5}.chat-close{border:0;background:#ffffff18;color:#fff;width:31px;height:31px;border-radius:50%;cursor:pointer;font-size:20px}.chat-body{min-height:360px;max-height:465px;overflow:auto;padding:17px;background:#faf9fd}.chat-msg{background:#fff;border:1px solid #ebe6f4;padding:12px 14px;border-radius:14px;font-size:14px;line-height:1.7;margin-bottom:13px}.chat-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.chat-option{border:1px solid #ded4f1;background:#fff;color:#48209b;border-radius:12px;padding:13px 9px;font-weight:800;font-size:12px;cursor:pointer;text-align:center}.chat-option:hover{background:#5a22c7;color:#fff}.chat-results{display:grid;gap:10px}.chat-result{background:#fff;border:1px solid #e6def2;border-radius:14px;padding:13px}.chat-result-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.chat-result h4{margin:0 0 4px;color:#26106f;font-size:14px}.chat-result p{margin:0;color:#7b7288;font-size:11px;line-height:1.6}.chat-status{white-space:nowrap;background:#e8faef;color:#148442;border-radius:20px;padding:4px 8px;font-size:10px;font-weight:800}.chat-status.offer{background:#fff0f3;color:#d93263}.chat-result a{display:block;margin-top:10px;background:#5a22c7;color:#fff!important;text-decoration:none;text-align:center;padding:9px;border-radius:9px;font-size:11px;font-weight:800}.chat-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.chat-back,.chat-home{border:0;border-radius:10px;padding:10px;font-weight:800;cursor:pointer}.chat-back{background:#eee8fa;color:#5421c7}.chat-home{background:#fff;border:1px solid #ded4f1;color:#5421c7}.chat-note{font-size:11px;color:#827990;text-align:center;margin-top:13px}@media(max-width:480px){.chat-panel{left:3%;right:3%;bottom:86px;width:94%;max-height:74vh}.chat-launch{left:16px;bottom:16px}.chat-body{min-height:330px}.chat-options{grid-template-columns:1fr 1fr}}

/* ==========================================================================
   Responsive overrides (was injected by chatbot.js)
   ========================================================================== */

html,body{max-width:100%;overflow-x:hidden}.mobile-nav-toggle{display:none;width:44px;height:44px;border:1px solid #ffffff55;border-radius:11px;background:#ffffff12;color:#fff;cursor:pointer;place-items:center;padding:0}.mobile-nav-toggle span,.mobile-nav-toggle:before,.mobile-nav-toggle:after{content:"";display:block;width:20px;height:2px;background:#fff;border-radius:3px;transition:.2s}.mobile-nav-toggle span{margin:5px 0}.mobile-open .mobile-nav-toggle span{opacity:0}.mobile-open .mobile-nav-toggle:before{transform:translateY(7px) rotate(45deg)}.mobile-open .mobile-nav-toggle:after{transform:translateY(-7px) rotate(-45deg)}@media(max-width:900px){header nav,header .nav,.top nav{position:relative;z-index:50}.mobile-nav-toggle{display:grid}.nav-actions{margin-right:auto}.links{display:none!important;position:absolute!important;top:calc(100% - 2px);right:0;left:0;flex-direction:column;gap:0!important;align-items:stretch!important;background:#27106f;border:1px solid #ffffff1c;border-radius:0 0 16px 16px;padding:9px;box-shadow:0 18px 35px #13043e55;z-index:100}.mobile-open>.links{display:flex!important}.links a,.links a:first-child{display:block;padding:13px 15px!important;border:0!important;border-radius:9px}.links a:hover,.links a.active,.links a:first-child:hover{background:#ffffff14;color:#fff}.page-hero{position:relative;z-index:1}.section{padding:36px 0}.category-nav{flex-wrap:nowrap!important;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}.category-nav::-webkit-scrollbar{display:none}.category-nav a{white-space:nowrap}.detail-layout{gap:16px}.footer-grid{gap:28px}}@media(max-width:560px){header nav,header .nav,.top nav{height:72px!important;gap:8px!important}.logo{font-size:23px!important;flex:0 0 auto}.nav-actions{gap:7px!important}.nav-actions .round,.nav-actions .search-round{display:none!important}.nav-actions .primary{padding:10px 12px!important;border-radius:10px!important;font-size:12px!important}.mobile-nav-toggle{width:42px;height:42px}.page-hero{padding:37px 0 42px!important}.page-hero h1{font-size:30px!important;line-height:1.3}.page-hero p{font-size:13px;padding:0 8px}.crumbs{font-size:11px}.section{padding:28px 0}.heading h2,.section-title{font-size:23px!important}.heading-row{gap:12px;align-items:flex-start!important}.heading-row .section-title{margin-bottom:0}.quick{padding:15px 7px!important;gap:13px 5px!important}.quick-icon{width:50px!important;height:50px!important;font-size:23px!important}.quick-item{font-size:11px!important}.cards{grid-template-columns:1fr!important;gap:14px!important}.place-card img{height:190px!important}.count-grid{grid-template-columns:1fr 1fr!important}.count-card{height:auto!important;min-height:150px;padding:15px 9px!important}.three-grid{gap:14px!important}.panel{padding:17px!important}.explore{grid-template-columns:1fr 1fr!important}.stats{grid-template-columns:1fr 1fr!important}.app-banner{min-height:auto!important}.stores{flex-wrap:wrap}.business .outline{margin:10px 0 0!important}.offer img,.article img,.listing-card img{height:210px}.article-cover,.news-hero-image{height:235px!important}.content-card,.side-card,.prose{padding:18px!important}.detail-title h1{font-size:25px!important}.footer-grid{grid-template-columns:1fr!important;gap:22px!important}.footer-col:not(:first-child){display:block!important}.chat-panel{max-height:calc(100dvh - 105px)!important}.chat-body{min-height:0!important;max-height:calc(100dvh - 190px)!important}}@media(max-width:370px){.nav-actions .primary{display:none!important}.count-grid,.explore,.stats{grid-template-columns:1fr!important}.chat-options{grid-template-columns:1fr!important}}

/* ==========================================================================
   Whole-card links
   The design made listing cards clickable with a JS click handler; a real
   anchor covering the card does the same thing accessibly.
   ========================================================================== */
.listing-card,.article,.offer{position:relative}
.card-hit{position:absolute;inset:0;z-index:3;border-radius:inherit}
.card-hit:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.listing-card:hover,.article:hover{border-color:#cdbcf2}
.rating-empty{color:var(--muted)}

/* ==========================================================================
   Forms & misc additions
   Pieces the design mocked up statically but never styled as real forms.
   ========================================================================== */
.contact-form{display:grid;gap:15px}
.contact-form label{display:grid;gap:7px;font-size:13px;font-weight:700;color:var(--ink)}
.contact-form input,.contact-form textarea{border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;color:var(--ink);background:#fff}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--purple);outline-offset:1px;border-color:var(--purple)}
.contact-form textarea{resize:vertical}
.contact-form .primary{justify-self:start;cursor:pointer}
.filter.active{background:var(--purple);color:#fff;border-color:var(--purple)}
.category-nav a.active{background:var(--purple);color:#fff;border-color:var(--purple)}
.review-cta{margin-top:18px;padding-top:16px;border-top:1px solid #f0edf6;color:var(--muted);font-size:13px}
.site-status{background:#e8fff0;border:1px solid #b6e9c9;color:#17794a;border-radius:11px;padding:14px 18px;margin-bottom:20px;font-weight:700}
.socials a{display:inline-block;margin-left:9px;font-size:17px}
.empty-guide h3{margin:0 0 9px;font-size:21px}
.empty-guide p{color:var(--muted);margin:0}

/* A related-items row with only one or two cards should not stretch them
   across the full three-column track. */
.listing-grid:has(> .listing-card:only-child),
.offer-grid:has(> .offer:only-child),
.article-grid:has(> .article:only-child){grid-template-columns:repeat(3,1fr);justify-items:stretch}
.listing-grid > .listing-card:only-child,
.offer-grid > .offer:only-child,
.article-grid > .article:only-child{max-width:390px}

/* ==========================================================================
   Broken-image resilience
   Rows reference uploads that may be missing on a given environment. A failed
   image must not collapse the card or spill alt text across the layout.
   ========================================================================== */
.place-card img,.listing-card img,.offer img,.article img,
.article-lead img,.news-item img,.gallery img,.article-cover,.news-hero-image{
  background:linear-gradient(135deg,#f6f1ff,#e6dbfb);
  color:transparent;font-size:0;object-fit:cover;
}
/* Hide the browser's broken-file glyph; the gradient stands in for the image. */
.place-card img:not([src]),.listing-card img:not([src]),.gallery img:not([src]){visibility:hidden}
img{text-indent:-9999px}
/* Keep the reserved box even when the file 404s. */
.place-card img{min-height:145px}
.listing-card img{min-height:205px}
.offer img{min-height:210px}
.article img{min-height:190px}
.news-item img{width:82px;height:46px;flex:0 0 82px}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:34px}
.pager-link{min-width:42px;height:42px;padding:0 13px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-weight:700;font-size:13px}
.pager-link:hover{border-color:#cdbcf2;color:var(--purple)}
.pager-link.is-active{background:var(--purple);border-color:var(--purple);color:#fff}
.pager-link.is-disabled{opacity:.45;pointer-events:none}
.pager-gap{color:var(--muted);padding:0 4px}
@media(max-width:560px){.pager{gap:6px}.pager-link{min-width:38px;height:38px;padding:0 9px;font-size:12px}}
.heading .muted{color:var(--muted);font-size:13px}

/* ==========================================================================
   Filter bar
   ========================================================================== */
.filter-bar{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:24px}
.filter-row{display:flex;flex-wrap:wrap;gap:14px;align-items:end}
.filter-field{display:grid;gap:6px;font-size:12px;font-weight:700;color:var(--muted)}
.filter-field select{border:1px solid var(--line);border-radius:9px;padding:9px 12px;font:inherit;font-size:13px;color:var(--ink);background:#fff;min-width:150px}
.filter-field select:focus{outline:2px solid var(--purple);outline-offset:1px}
.filter-check{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink);padding-bottom:9px;cursor:pointer}
.filter-check input{width:17px;height:17px;accent-color:var(--purple);cursor:pointer}
.filter-clear{color:var(--pink);font-size:12px;font-weight:800;padding-bottom:11px}
.filter-apply{border:0;background:var(--purple);color:#fff;border-radius:9px;padding:10px 20px;font-weight:800;cursor:pointer}
@media(max-width:560px){.filter-row{gap:10px}.filter-field{flex:1 1 100%}.filter-field select{width:100%}}

/* ==========================================================================
   Map
   ========================================================================== */
#site-map{height:620px;border-radius:15px;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;background:#eee}
.map-note{text-align:center;color:var(--muted);font-size:13px;margin-top:14px}
/* Google's InfoWindow renders LTR by default; the content is Arabic. */
.map-popup{direction:rtl;text-align:right;font-family:inherit;font-size:13px;min-width:150px}
.map-popup b{color:var(--ink)}
.map-popup small{color:var(--muted)}
.map-popup a{display:inline-block;margin-top:8px;color:var(--purple);font-weight:800}
.gm-style .gm-style-iw-c{padding:12px!important}
.gm-style .gm-style-iw-d{overflow:hidden!important}
@media(max-width:560px){#site-map{height:440px}}

/* ==========================================================================
   Category icons
   Uploaded icons already carry their own light-lavender canvas, so the tile
   behind them uses the same colour and the image fills it edge to edge —
   otherwise the artwork's square sits on a differently tinted container.
   ========================================================================== */
.cat-icon img,.quick-icon img{width:100%;height:100%;object-fit:cover;background:none;display:block}
/* Emoji/glyph fallback keeps the old inset look. */
.cat-icon:not(:has(img)),.quick-icon:not(:has(img)){color:var(--purple)}

/* ==========================================================================
   Brand logo
   The design used a styled text wordmark; this is the real logo image, so the
   type rules no longer apply and the anchor just sizes the image.
   ========================================================================== */
.logo{margin-left:auto;display:flex;align-items:center;flex:0 0 auto}
/* Both dimensions are capped. The uploaded logo can be any shape, and sizing
   on width alone let a tall image dictate its own height and overflow the bar;
   object-fit keeps it undistorted inside the box whatever its ratio. */
.logo img{max-width:140px;max-height:52px;width:auto;height:auto;display:block;object-fit:contain;background:none}
.footer-logo{display:inline-block;margin-bottom:12px}
.footer-logo img{max-width:160px;max-height:60px;width:auto;height:auto;display:block;object-fit:contain;background:none}
@media(max-width:900px){.logo img{max-width:120px;max-height:46px}}
@media(max-width:560px){.logo img{max-width:100px;max-height:40px}.footer-logo img{max-width:140px;max-height:52px}}

/* ==========================================================================
   Client accounts
   ========================================================================== */
.nav-account{display:inline-grid;place-items:center;height:42px;padding:0 15px;border:1px solid #7658b9;border-radius:11px;font-size:13px;font-weight:800;white-space:nowrap}
.nav-account:hover{background:#ffffff14}
.auth-card{max-width:520px;margin:0 auto}
.auth-card h2{margin:0 0 20px}
/* .contact-form makes labels grid rows; the checkbox needs to stay inline. */
.contact-form label.filter-check{display:flex;align-items:center;gap:8px;padding-bottom:0}
.auth-alt{margin-top:18px;font-size:13px;color:var(--muted)}
.auth-alt a{color:var(--purple);font-weight:800}
.auth-note{margin-top:8px;font-size:12px;color:var(--muted)}
.account-nav{align-items:center}
.account-logout{margin-right:auto}
.account-logout button{border:1px solid var(--line);background:#fff;color:var(--pink);border-radius:9px;padding:9px 15px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.account-logout button:hover{border-color:var(--pink)}
a.count-card{text-decoration:none}
a.count-card:hover{border-color:#cdbcf2}
.review-pending{background:#fff6e5;color:#a86a00;border-radius:8px;padding:6px 10px;font-size:11px;font-weight:800;white-space:nowrap}
.place-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.place-actions form{margin:0}
.place-action{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:11px 18px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.place-action:hover{border-color:var(--purple);color:var(--purple)}
.place-action.is-active{background:var(--purple);border-color:var(--purple);color:#fff}
.review-form{margin-top:20px;padding-top:18px;border-top:1px solid #f0edf6}
.review-form select,.review-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;color:var(--ink);background:#fff}
.review-form label{display:grid;gap:7px;font-size:13px;font-weight:700;margin-bottom:12px}
@media(max-width:560px){.nav-account{display:none}.account-logout{margin-right:0;width:100%}.account-logout button{width:100%}}

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

   Four columns on desktop: brand, sections, quick links, contact.
   On phones the three link columns collapse into accordions — stacked open
   they ran past a screen and a half before reaching the copyright.
   ========================================================================== */
/* Top padding is back: the download banner used to sit here with a negative
   margin and supply the clearance itself. */
footer{padding:52px 0 22px;margin-top:86px;position:relative}
/* A hairline of brand colour along the top edge, so the footer reads as a
   deliberate close rather than the page running out. */
footer:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--purple2),var(--pink),var(--purple2))}
.footer-grid{grid-template-columns:1.9fr .9fr 1fr;gap:44px}

.footer-col h3{font-size:12.5px;margin:0 0 15px;color:#fff;font-weight:800;
  letter-spacing:.7px;text-transform:uppercase;opacity:.92}
.footer-col a{transition:color .18s,padding .18s}
.footer-col a:hover{color:#fff}
.footer-links a{display:block;color:#c7bde0;font-size:13px;line-height:2.1}
.footer-links a:hover{padding-inline-start:4px}

/* A closed <details> normally hides its content, but the site's own
   display rules on .footer-links override that, so hide it explicitly. */
details.footer-col:not([open]) > .footer-links{display:none}
details.footer-col > summary{list-style:none;cursor:default}
details.footer-col > summary::-webkit-details-marker{display:none}
details.footer-col > summary::marker{content:''}

.footer-brand .footer-logo{margin-bottom:14px}
.footer-tagline{max-width:270px;line-height:1.95;color:#bfb3da;font-size:13px}

/* The number and address sit under the icon tiles. A tile dials or opens a
   mail client; it never shows the value, which people copy or read off. */
.footer-reach{margin-top:18px;display:grid;gap:7px;justify-items:start}
.footer-reach a{color:#cabfe3;font-size:13px;font-weight:700;transition:color .18s}
.footer-reach a:hover{color:#fff}
.footer-reach bdi{direction:ltr;unicode-bidi:embed}
.footer-reach .footer-more{margin-top:3px}

/* Brand artwork, so no pill: a border and dark fill around a full-colour
   rounded-square icon reads as a box drawn on top of the logo. The tile is
   the icon itself, and hover lifts it rather than tinting a background. */
.footer-social{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
/* Anchor and image are the same box: the artwork is edge-to-edge, so any
   difference shows as a ring around the icon (visible once .sm-twitter
   paints a white plate underneath). */
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:8px;color:#d7ccee;font-size:15px;line-height:1;
  transition:transform .15s ease,filter .15s ease}
.footer-social a img{width:28px;height:28px;display:block;border-radius:8px;object-fit:contain}
.footer-social a:hover{transform:translateY(-2px);filter:brightness(1.1)}
/* The X icon is a black square with the mark knocked out of it as
   transparency — every pixel in the file is RGB 0,0,0, so the mark shows
   whatever is behind it. On the dark footer that means it shows nothing.
   A white anchor background lights the mark up through the cut-out, which
   is also how the brand renders on dark surfaces. */
.footer-social .sm-twitter{background:#fff}
/* Channels with no artwork keep the old bordered look so they do not read as
   a missing image next to the brand tiles. */
.footer-social a:not(:has(img)){border:1px solid #ffffff2e}
.footer-social a:not(:has(img)):hover{background:#ffffff14;border-color:#ffffff5c;color:#fff}

.footer-more{color:#b79cff!important;font-weight:800;margin-top:10px;display:inline-block}

/* --- Store badges --------------------------------------------------------
   The footer's download banner was removed (the home page carries the same
   call to action directly above it). These base rules stay for the home
   banner's badges, which home.css then sizes. */
.store-text{display:grid;line-height:1.25;font-size:14px;font-weight:800}
.store-text small{font-size:10px;font-weight:500;color:#c9bce6}

.copyright{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  text-align:right;font-size:12.5px;color:#a89ec6}
.copyright-links{display:flex;gap:20px}
.copyright-links a{color:#b9afd1;position:relative}
.copyright-links a:hover{color:#fff}
/* A dot between the two policy links rather than gap alone. */
.copyright-links a+a:before{content:"";position:absolute;right:-11px;top:50%;
  width:3px;height:3px;margin-top:-1px;border-radius:50%;background:#ffffff3d}

@media(max-width:1100px){
  /* Brand spans the top, the three link columns sit in one row beneath it —
     a 2-column grid stranded "تواصل معنا" on its own row. */
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:28px 24px}
  .footer-brand{grid-column:1/-1;text-align:center}
  .footer-brand .footer-tagline{max-width:420px}
  /* The brand column is centred from here down, so centre the icon row with
     it — it sat left-aligned on wider phones. */
  .footer-social{justify-content:center}
  .footer-reach{justify-items:center}
  .footer-brand{text-align:center}
  .footer-brand .footer-logo{display:block;margin:0 0 12px}
  .footer-brand .footer-logo img{margin-inline:auto}
  .footer-col .footer-tagline{margin-inline:auto}
}
@media(max-width:760px){
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:24px 18px}
  
}

/* --- Phones -------------------------------------------------------------
   Accordions, so the footer is a short list of headings rather than every
   link at once. --- */
@media(max-width:560px){
  footer{padding:0 0 18px;margin-top:64px}
  .footer-grid{grid-template-columns:1fr!important;gap:0!important}
  .footer-col:not(:first-child){display:block!important}


  /* The tagline repeats the banner's promise; the logo and socials carry it. */
  .footer-brand{padding-bottom:16px;text-align:center}
  .footer-col .footer-tagline{display:none}
  .footer-social{justify-content:center;margin-top:0}
  /* .footer-reach is justify-items:start, which would strand the number and
     address on one side of an otherwise centred column. */
  .footer-reach{justify-items:center;margin-top:15px}
  /* The anchor is display:block here, so centre the image inside it rather
     than the anchor itself. */
  .footer-brand .footer-logo{display:block;margin:0 0 12px}
  .footer-brand .footer-logo img{margin-inline:auto}

  details.footer-col{border-top:1px solid #ffffff1a}
  /* -webkit-tap-highlight-color stops the grey flash on iOS; the open state
     does the feedback instead. */
  details.footer-col > summary{display:flex;align-items:center;justify-content:space-between;
    cursor:pointer;padding:16px 2px;list-style:none;-webkit-tap-highlight-color:transparent}
  details.footer-col > summary h3{margin:0;transition:color .18s}
  details.footer-col[open] > summary h3{color:#d9c9ff}
  details.footer-col > summary::after{content:'';width:9px;height:9px;flex:0 0 auto;
    border-right:2px solid #b79cff;border-bottom:2px solid #b79cff;
    transform:rotate(45deg);margin-bottom:4px;transition:transform .2s}
  details.footer-col[open] > summary::after{transform:rotate(225deg);margin-bottom:0}
  details.footer-col .footer-links{padding:0 2px 15px}


  .copyright{justify-content:center;text-align:center;gap:10px}
  .copyright-links{justify-content:center}
}

/* ==========================================================================
   Business signup form
   ========================================================================== */
.contact-form small{font-weight:500;font-size:11px;color:var(--muted);line-height:1.7}
.contact-form input[type=file]{border:1px dashed var(--line);border-radius:10px;padding:11px 13px;
  font:inherit;font-size:13px;color:var(--muted);background:#fff;cursor:pointer;width:100%}
.contact-form input[type=file]:hover{border-color:var(--purple)}
.contact-form input[type=file]::file-selector-button{border:0;background:#f0eaff;color:var(--purple);
  border-radius:8px;padding:7px 14px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;margin-inline-end:10px}
/* Number inputs: the spinner is noise on a registry number. */
.contact-form input[type=number]{appearance:textfield;-moz-appearance:textfield}
.contact-form input[type=number]::-webkit-outer-spin-button,
.contact-form input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Store badge icons: inline SVG so the Apple mark is not U+F8FF, which only
   renders on Apple devices and is a tofu box everywhere else. */
.store-icon{width:20px;height:20px;display:block;flex:0 0 auto}

.stores .store{display:inline-flex;align-items:center;gap:8px}
.stores .store-icon{width:17px;height:17px}