/* ==========================================================================
   Chameli Spa Ajman — Home Page Content Redesign
   Namespaced with the `cs-` prefix so nothing here collides with the
   site's existing CSS. Colors, spacing and layout intentionally reuse the
   site's own production theme (black backgrounds, brown/gold accent)
   rather than introducing a new palette. Font-family and font-size are
   deliberately left undeclared here so every element inherits the site's
   own global type rules (body Roboto, h1-h4 Raleway, base paragraph size)
   instead of this stylesheet re-specifying them.
   ========================================================================== */

:root{
  --cs-bg-0:#000;
  --cs-bg-1:#0a0a0a;
  --cs-bg-2:#050505;
  --cs-bg-3:#080808;
  --cs-bg-4:#030303;
  --cs-panel:#0e0e14;
  --cs-line:rgba(255,255,255,.09);
  --cs-text:#fff;
  --cs-text-soft:rgba(215,210,220,.8);
  --cs-text-softer:rgba(190,185,205,.65);
  --cs-brown:#a85f2b;
  --cs-brown-dark:#7d4822;
  --cs-gold:#d4a96a;
  --cs-gold-soft:#c9935a;
  --cs-yellow:#ff0;
  --cs-radius:14px;
}

.cs-section{padding:64px 20px;}
.cs-wrap{max-width:1180px;margin:0 auto;}
.cs-wrap-narrow{max-width:820px;margin:0 auto;}

.cs-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cs-gold);
  margin-bottom:12px;
}
.cs-eyebrow::before{content:"";width:22px;height:2px;background:var(--cs-gold);border-radius:2px;flex-shrink:0;}
.cs-center .cs-eyebrow{justify-content:center;}
.cs-center .cs-eyebrow::before{display:none;}

.cs-head{margin-bottom:36px;}
.cs-head h2{color:var(--cs-text)!important;font-weight:800;line-height:1.25;margin:0 0 12px;}
.cs-head p{color:var(--cs-text-soft)!important;line-height:1.7;max-width:680px;margin:0;}
.cs-center{text-align:center;}
.cs-center .cs-head p{margin-left:auto;margin-right:auto;}

.cs-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;border-radius:100px;
  font-weight:700;text-decoration:none;cursor:pointer;
  border:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.cs-btn:hover{transform:translateY(-2px);text-decoration:none;}
.cs-btn-gold{background:linear-gradient(135deg,var(--cs-gold-soft),var(--cs-brown));color:#fff;box-shadow:0 6px 20px rgba(168,95,43,.35);}
.cs-btn-gold:hover{box-shadow:0 10px 26px rgba(168,95,43,.45);color:#fff;}
.cs-btn-outline{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;}
.cs-btn-outline:hover{background:rgba(255,255,255,.08);color:#fff;}
.cs-btn-whatsapp{background:#25d366;color:#fff;box-shadow:0 6px 20px rgba(37,211,102,.3);}
.cs-btn-whatsapp:hover{background:#1ebc59;color:#fff;}

/* ---------- ABOUT ---------- */
.cs-about{background:var(--cs-bg-0);}
.cs-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.cs-about h2{color:var(--cs-text)!important;font-weight:800;margin:0 0 18px;line-height:1.25;}
.cs-about p{color:var(--cs-text-soft)!important;line-height:1.75;margin:0 0 14px;}
.cs-about a.cs-inline-link{color:var(--cs-gold);font-weight:700;border-bottom:1px solid rgba(212,169,106,.5);}
.cs-about a.cs-inline-link:hover{color:#fff;}
.cs-ticks{list-style:none;margin:16px 0 0;padding:0;}
.cs-ticks li{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;color:var(--cs-text-soft)!important;}
.cs-tick-ico{color:var(--cs-gold);font-weight:700;flex-shrink:0;line-height:1.5;}
.cs-reviewed-tag{margin-top:16px;color:var(--cs-text-softer)!important;}
.cs-about-img-wrap{position:relative;}
.cs-about-img-wrap img{width:100%;height:380px;object-fit:cover;border-radius:16px;display:block;}
.cs-badge-hex{
  position:absolute;bottom:-28px;left:-28px;width:150px;height:150px;
  background:linear-gradient(160deg,var(--cs-gold),var(--cs-gold-soft));
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0% 50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:16px;box-shadow:0 16px 34px rgba(0,0,0,.5);
}
.cs-badge-hex svg{width:28px;height:28px;margin-bottom:6px;}
.cs-badge-hex .cs-num{font-weight:800;line-height:1;color:#1a1005;margin-bottom:5px;}
.cs-badge-hex .cs-cap{font-weight:700;line-height:1.3;color:#1a1005;}
@media(max-width:860px){
  .cs-about-grid{grid-template-columns:1fr;gap:40px;}
  .cs-badge-hex{width:120px;height:120px;bottom:-18px;left:-14px;padding:10px;}
}

/* ---------- WHY GRID ---------- */
.cs-why{background:var(--cs-bg-1);}
.cs-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--cs-line);border:1px solid var(--cs-line);border-radius:var(--cs-radius);overflow:hidden;}
.cs-why-card{background:#0c0c0c;padding:26px 22px;min-height:172px;}
.cs-why-card h4{color:var(--cs-text)!important;font-weight:700;margin:0 0 8px;}
.cs-why-card p{color:var(--cs-text-soft)!important;line-height:1.65;margin:0;}
@media(max-width:860px){.cs-why-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.cs-why-grid{grid-template-columns:1fr;}}

/* ---------- THERAPISTS ---------- */
.cs-therapists{background:var(--cs-bg-0);}
.cs-t-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.cs-t-card{text-align:center;}
.cs-t-photo{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;margin-bottom:10px;background:#161616;}
.cs-t-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.cs-t-card b{display:block;color:var(--cs-text);}
.cs-t-card span{color:var(--cs-text-softer)!important;}
@media(max-width:860px){.cs-t-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- CREDENTIALING ---------- */
.cs-credentialing{background:var(--cs-bg-2);}
.cs-cred-intro{max-width:700px;margin-bottom:34px;}
.cs-cred-intro h2{color:var(--cs-text)!important;font-weight:800;margin:0 0 12px;}
.cs-cred-intro p{color:var(--cs-text-soft)!important;line-height:1.75;margin:0;}
.cs-cred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.cs-cred-card{background:var(--cs-panel);border:1px solid var(--cs-line);border-radius:var(--cs-radius);padding:24px;}
.cs-cred-step{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:linear-gradient(135deg,var(--cs-gold-soft),var(--cs-brown));
  color:#fff;font-weight:800;margin-bottom:14px;
}
.cs-cred-card h4{color:var(--cs-text)!important;font-weight:700;margin:0 0 8px;}
.cs-cred-card p{color:var(--cs-text-soft)!important;line-height:1.65;margin:0;}
.cs-cred-foot{margin-top:26px;color:var(--cs-text-softer)!important;border-top:1px solid var(--cs-line);padding-top:18px;}
.cs-cred-foot b{color:var(--cs-gold);}
@media(max-width:860px){.cs-cred-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.cs-cred-grid{grid-template-columns:1fr;}}

/* ---------- GALLERY ---------- */
.cs-gallery{background:var(--cs-bg-3);}
.cs-gal-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:170px;gap:14px;}
.cs-gal-item{position:relative;border-radius:12px;overflow:hidden;}
.cs-gal-item.cs-tall{grid-row:span 2;}
.cs-gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
.cs-gal-item:hover img{transform:scale(1.06);}
.cs-gal-cap{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px 12px;
  background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);
  color:#fff!important;font-weight:600;margin:0;
}
@media(max-width:860px){.cs-gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;}}
@media(max-width:480px){.cs-gal-grid{grid-auto-rows:130px;}}

/* ---------- SERVICES (redesigned, static) ---------- */
.cs-services{background:linear-gradient(180deg,#0d0704 0%,#000 60%);}
.cs-svc-toprow{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:10px;}
.cs-svc-toprow .cs-head{margin-bottom:0;}
.cs-svc-toprow .cs-head p{max-width:640px;}
.cs-filters{margin:30px 0 0;}
.cs-filters-label{letter-spacing:.1em;text-transform:uppercase;color:var(--cs-text-softer)!important;margin:0 0 12px;font-weight:700;}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px;}
.cs-chip{
  appearance:none;border:1px solid rgba(255,255,255,.22);background:transparent;
  color:var(--cs-text-soft);
  padding:9px 18px;border-radius:100px;cursor:pointer;transition:.15s ease;
}
.cs-chip:hover{border-color:var(--cs-gold);color:#fff;}
.cs-chip.cs-active{background:linear-gradient(135deg,var(--cs-gold-soft),var(--cs-brown));border-color:transparent;color:#fff;font-weight:700;}
.cs-result-count{color:var(--cs-text-softer)!important;margin:14px 0 0;min-height:16px;}

.cs-svc-cards{display:flex;flex-direction:column;gap:1px;background:var(--cs-line);border-radius:var(--cs-radius);overflow:hidden;margin-top:26px;}
.cs-svc-card{background:#0a0a0a;padding:26px;display:grid;grid-template-columns:190px 1fr 190px;gap:26px;align-items:start;transition:background .2s ease;}
.cs-svc-card:hover{background:#111;}
.cs-svc-card.cs-hidden{display:none;}
.cs-svc-name{font-weight:800;color:var(--cs-gold)!important;margin:0 0 14px;}
.cs-gauge{display:flex;flex-direction:column;gap:6px;}
.cs-gauge-label{letter-spacing:.08em;text-transform:uppercase;color:var(--cs-text-softer)!important;font-weight:700;}
.cs-gauge-bar{display:flex;gap:3px;}
.cs-gauge-seg{height:5px;flex:1;border-radius:2px;background:rgba(255,255,255,.14);}
.cs-gauge-seg.cs-on{background:linear-gradient(90deg,var(--cs-gold-soft),var(--cs-brown));}
.cs-gauge-text{color:var(--cs-text-soft)!important;}
.cs-svc-card-body p{margin:0 0 14px;line-height:1.65;color:var(--cs-text-soft)!important;}
.cs-tags{display:flex;flex-wrap:wrap;gap:6px;}
.cs-tag{padding:4px 11px;border-radius:100px;background:rgba(212,169,106,.14);color:var(--cs-gold)!important;border:1px solid rgba(212,169,106,.3);white-space:nowrap;}
.cs-svc-action{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right;}
.cs-duration{color:var(--cs-text-softer)!important;}
.cs-svc-link{font-weight:700;color:var(--cs-gold);white-space:nowrap;}
.cs-svc-link:hover{color:#fff;}
.cs-empty{padding:40px 20px;text-align:center;color:var(--cs-text-softer)!important;display:none;}
.cs-empty.cs-show{display:block;}

.cs-svc-book{
  margin-top:30px;background:rgba(255,255,255,.04);border:1px solid var(--cs-line);
  border-radius:var(--cs-radius);padding:28px 30px;display:flex;align-items:center;
  justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cs-svc-book h4{color:var(--cs-text)!important;font-weight:700;margin:0 0 6px;}
.cs-svc-book p{color:var(--cs-text-soft)!important;margin:0;}

@media(max-width:760px){
  .cs-svc-card{grid-template-columns:1fr;gap:14px;padding:22px 20px;}
  .cs-svc-action{flex-direction:row;align-items:center;justify-content:space-between;text-align:left;}
}

/* ---------- VIDEOS ---------- */
.cs-videos{background:var(--cs-bg-4);}
.cs-video-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.cs-video-card{background:var(--cs-panel);border:1px solid var(--cs-line);border-radius:var(--cs-radius);overflow:hidden;}
.cs-video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.cs-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.cs-video-cap{padding:16px 20px;}
.cs-video-cap h4{color:var(--cs-text)!important;font-weight:700;margin:0 0 4px;}
.cs-video-cap p{color:var(--cs-text-softer)!important;margin:0;}
@media(max-width:760px){.cs-video-grid{grid-template-columns:1fr;}}

/* ---------- BENEFITS ---------- */
.cs-benefits{background:var(--cs-bg-1);}
.cs-benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px;}
.cs-b-card{background:var(--cs-panel);border:1px solid var(--cs-line);border-radius:var(--cs-radius);padding:26px;}
.cs-b-ico{width:54px;height:54px;border-radius:15px;background:rgba(212,169,106,.12);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.cs-b-card h4{color:var(--cs-text)!important;font-weight:700;margin:0 0 8px;}
.cs-b-card p{color:var(--cs-text-soft)!important;line-height:1.65;margin:0;}
.cs-benefits-cta{text-align:center;margin-top:36px;}
@media(max-width:860px){.cs-benefits-grid{grid-template-columns:1fr;}}

/* ---------- EXPERIENCE ---------- */
.cs-experience{background:var(--cs-bg-2);}
.cs-exp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:8px;}
.cs-exp-card{padding:6px;}
.cs-exp-ico{margin-bottom:10px;}
.cs-exp-card h4{color:var(--cs-text)!important;font-weight:700;margin:0 0 8px;}
.cs-exp-card p{color:var(--cs-text-soft)!important;line-height:1.6;margin:0;}
@media(max-width:860px){.cs-exp-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- AUTHOR BIO ---------- */
.cs-author-wrap{background:var(--cs-bg-0);}
.cs-author{
  max-width:1180px;margin:0 auto;background:var(--cs-panel);border:1px solid var(--cs-line);
  border-radius:18px;padding:32px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;
}
.cs-author-avatar{width:74px;height:74px;border-radius:50%;flex-shrink:0;background:linear-gradient(160deg,var(--cs-gold),var(--cs-brown-dark));}
.cs-author-body{flex:1;min-width:260px;}
.cs-author-k{letter-spacing:.08em;text-transform:uppercase;color:var(--cs-gold);font-weight:800;margin-bottom:6px;}
.cs-author-body h4{color:var(--cs-text)!important;font-weight:700;margin:0 0 6px;}
.cs-author-body p{color:var(--cs-text-soft)!important;margin:0 0 4px;}

/* ---------- AS SEEN ON ---------- */
.cs-featured{background:var(--cs-bg-1);}
.cs-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.cs-feat-card{background:var(--cs-panel);border:1px solid var(--cs-line);border-radius:12px;padding:20px;display:flex;align-items:center;gap:14px;transition:.2s ease;}
.cs-feat-card:hover{border-color:var(--cs-gold);transform:translateY(-2px);}
.cs-feat-logo{
  width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--cs-gold-soft),var(--cs-brown));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;
}
.cs-feat-fname{font-weight:700;color:var(--cs-text)!important;}
.cs-feat-furl{color:var(--cs-text-softer)!important;}
@media(max-width:760px){.cs-feat-grid{grid-template-columns:1fr;}}

/* ---------- FAQ ---------- */
.cs-faq{background:var(--cs-bg-4);}
.cs-faq-item{border-bottom:1px solid var(--cs-line);padding:20px 0;}
.cs-faq-item h4{color:var(--cs-text)!important;font-weight:700;margin:0 0 8px;}
.cs-faq-item p{color:var(--cs-text-soft)!important;line-height:1.65;margin:0;}
.cs-faq-item a{color:var(--cs-gold);font-weight:700;border-bottom:1px solid rgba(212,169,106,.5);}
.cs-faq-item a:hover{color:#fff;}

/* ---------- BOOKING (redesigned) ---------- */
.cs-booking{background:var(--cs-bg-0);}
.cs-book-card{max-width:780px;margin:0 auto;background:var(--cs-panel);border:1px solid var(--cs-line);border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5);}
.cs-book-head{
  background:linear-gradient(120deg,#1a0e05 45%,#2b1a0c);color:#fff;
  padding:40px 40px 36px;display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center;position:relative;overflow:hidden;
}
.cs-book-head h3{color:#fff!important;font-weight:800;line-height:1.25;margin:0;position:relative;z-index:1;}
.cs-book-head h3 span{color:var(--cs-gold);display:block;}
.cs-book-rule{width:46px;height:2px;background:var(--cs-gold);margin:16px 0 14px;}
.cs-book-head p{color:rgba(255,255,255,.78)!important;max-width:340px;margin:0;position:relative;z-index:1;}
.cs-book-head-img{height:130px;border-radius:12px;overflow:hidden;position:relative;z-index:1;background:#000;}
.cs-book-head-img img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;}
.cs-book-form{padding:34px 40px 40px;}
.cs-sec-label{display:flex;align-items:center;gap:12px;margin:28px 0 18px;}
.cs-sec-label:first-child{margin-top:0;}
.cs-sec-icon{width:34px;height:34px;border-radius:9px;background:rgba(212,169,106,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cs-sec-label h4{color:var(--cs-text)!important;font-weight:700;margin:0;}
.cs-row2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.cs-field{margin-bottom:16px;}
.cs-field label{display:block;font-weight:700;color:var(--cs-text)!important;margin-bottom:7px;}
.cs-field label .cs-req{color:#e0664b;}
.cs-input-wrap{position:relative;}
.cs-input-wrap .cs-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.4);pointer-events:none;}
.cs-book-form input[type=text],.cs-book-form input[type=tel],.cs-book-form input[type=date],
.cs-book-form input[type=time],.cs-book-form textarea{
  width:100%;border:1px solid var(--cs-line);border-radius:9px;
  padding:11px 14px 11px 38px;color:#fff;
  background:#050505;transition:.15s;
}
.cs-book-form textarea{padding-left:14px;resize:vertical;min-height:80px;}
.cs-book-form input:focus,.cs-book-form textarea:focus{outline:none;border-color:var(--cs-gold);background:#0a0a0a;}
.cs-book-form input::placeholder,.cs-book-form textarea::placeholder{color:rgba(255,255,255,.35);}
.cs-massage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.cs-m-card{
  border:1px solid var(--cs-line);border-radius:10px;padding:14px 12px;
  display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:700;
  color:#fff!important;background:#050505;transition:.15s;
}
.cs-m-card:hover{border-color:var(--cs-gold);}
.cs-m-card.cs-active{border-color:var(--cs-gold);background:rgba(212,169,106,.1);box-shadow:0 0 0 1px var(--cs-gold) inset;}
.cs-m-card input{display:none;}
.cs-diff-row{display:flex;gap:26px;margin-bottom:14px;}
.cs-radio-opt{display:flex;align-items:center;gap:8px;color:#fff!important;cursor:pointer;}
.cs-radio-opt input{appearance:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--cs-line);display:inline-block;position:relative;cursor:pointer;flex-shrink:0;}
.cs-radio-opt input:checked{border-color:var(--cs-gold);}
.cs-radio-opt input:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--cs-gold);}
#csPainDetail{display:none;}
#csPainDetail.cs-show{display:block;}
.cs-agree{display:flex;align-items:flex-start;gap:10px;margin:24px 0 22px;color:var(--cs-text-soft)!important;}
.cs-agree input{margin-top:3px;}
.cs-submit-btn{
  width:100%;background:linear-gradient(135deg,var(--cs-gold-soft),var(--cs-brown));color:#fff;border:none;border-radius:10px;
  padding:15px;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:.15s;
}
.cs-submit-btn:hover{opacity:.92;}
.cs-secure{text-align:center;color:var(--cs-text-softer)!important;margin-top:20px;display:flex;align-items:center;justify-content:center;gap:6px;}
@media(max-width:640px){
  .cs-book-head{grid-template-columns:1fr;padding:32px 24px;}
  .cs-book-head-img{height:100px;}
  .cs-book-form{padding:26px 22px 30px;}
  .cs-row2,.cs-massage-grid{grid-template-columns:1fr 1fr;}
  .cs-diff-row{gap:16px;}
}
@media(max-width:420px){.cs-massage-grid{grid-template-columns:1fr;}}