/* ============================================================
   Al Shahi Furniture Upholstery — Brand Stylesheet
   Palette pulled from logo: deep navy + antique gold
   ============================================================ */

:root{
  --navy:        #0d1e38;
  --navy-2:      #142c50;
  --navy-soft:   #1c3a66;
  --gold:        #c9a15a;
  --gold-deep:   #a97f36;
  --gold-pale:   #e8d4a4;
  --cream:       #f8f4ea;
  --cream-2:     #f1e9d8;
  --ink:         #2a2620;
  --ink-soft:    #6b6458;
  --white:       #ffffff;

  --font-display: "Manrope", "Segoe UI", sans-serif;
  --font-body:    "Manrope", "Segoe UI", sans-serif;

  --radius: 2px;
  --shadow-soft: 0 10px 30px rgba(13,30,56,.08);
  --shadow-strong: 0 20px 50px rgba(13,30,56,.18);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  font-size: 1rem;
  line-height:1.7;
}

h1,h2,h3,h4,.font-display{
  font-family: var(--font-display);
  color: var(--navy);
  font-weight:700;
  letter-spacing:.2px;
}

a{ text-decoration:none; }
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--gold-deep);
  outline-offset: 2px;
}

.text-gold{ color: var(--gold-deep); }
.bg-navy{ background: var(--navy); }
.bg-cream{ background: var(--cream); }

.eyebrow{
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}

/* ---------- Tufted / diamond-quilt signature texture ---------- */
.quilt-bg{
  background-color: var(--navy);
  background-image:
    linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.75)),
    url("../img/gallery/gallery-majlis-lounge.webp");
  background-size: cover, cover;
  background-position: center;
  background-repeat: no-repeat, no-repeat;
}

.stitch-divider{
  height:1px;
  background-image: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 14px);
  opacity:.8;
}

/* ---------- Navbar ---------- */
.navbar-brand-wrap{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.navbar-brand-wrap img{
  height: 52px;
  width:auto;
}
.brand-text{
  font-family: var(--font-display);
  line-height:1.1;
}
.brand-text .top{
  color: var(--navy);
  font-weight:700;
  font-size: 1.05rem;
  letter-spacing:.5px;
}
.brand-text .sub{
  color: var(--gold-deep);
  font-family: var(--font-body);
  font-size:.62rem;
  letter-spacing: 2.5px;
  text-transform:uppercase;
  font-weight:600;
}

.site-header{
  background: var(--white);
  border-bottom: 1px solid var(--cream-2);
  position: sticky;
  top:0;
  z-index: 1030;
}
.top-bar{
  background: var(--navy);
  color: var(--gold-pale);
  font-size:.82rem;
}
.top-bar a{ color: var(--gold-pale); }
.top-bar a:hover{ color: var(--white); }

.nav-link{
  color: var(--navy) !important;
  font-weight:500;
  letter-spacing:.3px;
  margin: 0 .35rem;
  position:relative;
  padding: .5rem .2rem !important;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:2px;
  height:2px;
  background: var(--gold-deep);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .25s ease;
}
.nav-link:hover::after,
.nav-link.active::after{
  transform: scaleX(1);
}
.nav-link.active{ color: var(--gold-deep) !important; }

.btn-gold{
  background: var(--gold-deep);
  border: 1px solid var(--gold-deep);
  color: var(--white);
  font-weight:600;
  letter-spacing:.4px;
  padding: .65rem 1.6rem;
  border-radius: var(--radius);
  transition: all .25s ease;
}
.btn-gold:hover{
  background: transparent;
  color: var(--gold-deep);
}
.btn-outline-navy{
  border: 1px solid rgba(255,255,255,.5);
  color: var(--white);
  font-weight:600;
  letter-spacing:.4px;
  padding: .65rem 1.6rem;
  border-radius: var(--radius);
  transition: all .25s ease;
}
.btn-outline-navy:hover{
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}
.btn-outline-gold{
  border: 1px solid var(--gold-deep);
  color: var(--gold-deep);
  font-weight:600;
  letter-spacing:.4px;
  padding: .6rem 1.5rem;
  border-radius: var(--radius);
  transition: all .25s ease;
}
.btn-outline-gold:hover{
  background: var(--gold-deep);
  color: var(--white);
}

/* ---------- Hero ---------- */
.hero{
  color: var(--white);
  position:relative;
  overflow:hidden;
  padding: 2.5rem 0 1.5rem;
}
.hero h1{
  color: var(--white);
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height:1.15;
}
.hero p.lead{
  color: rgba(255,255,255,.82);
  font-size: 1.1rem;
  max-width: 560px;
}
.hero-badge{
  border: 1px solid var(--gold);
  color: var(--gold-pale);
  font-size:.72rem;
  letter-spacing:2px;
  text-transform:uppercase;
  padding: .35rem .9rem;
  border-radius: 30px;
  display:inline-block;
}

.hero-stats{
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 3rem;
  padding-top: 2rem;
}
.hero-stats .num{
  font-family: var(--font-display);
  font-size: 2.1rem;
  color: var(--gold);
  font-weight:700;
}
.hero-stats .label{
  font-size:.78rem;
  color: rgba(255,255,255,.7);
  text-transform:uppercase;
  letter-spacing:1px;
}

/* ---------- Sections ---------- */
section{ padding: 5rem 0; }
.section-title{
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: .75rem;
}
.section-lead{
  color: var(--ink-soft);
  max-width: 620px;
}

/* Service cards */
.service-card{
  background: var(--white);
  border: 1px solid var(--cream-2);
  border-radius: var(--radius);
  padding: 2.2rem 1.8rem;
  height:100%;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
  border-color: var(--gold);
}
.service-icon{
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--cream);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--gold-deep);
  margin-bottom: 1.3rem;
}
.service-card h3{ font-size: 1.2rem; }
.service-card p{ color: var(--ink-soft); font-size:.95rem; }

/* ---------- Shop page ---------- */
.shop-filters{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-bottom: 2.5rem;
}
.shop-filter-btn{
  border: 1px solid var(--cream-2);
  background: var(--white);
  color: var(--navy);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.3px;
  padding: .55rem 1.3rem;
  border-radius: 30px;
  transition: all .25s ease;
}
.shop-filter-btn:hover{
  border-color: var(--gold-deep);
  color: var(--gold-deep);
}
.shop-filter-btn.active{
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.product-card{
  background: var(--white);
  border: 1px solid var(--cream-2);
  border-radius: var(--radius);
  overflow:hidden;
  height:100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.product-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
}
.product-media{
  position:relative;
  aspect-ratio: 4/5;
  overflow:hidden;
}
.product-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .5s ease;
}
.product-card:hover .product-media img{ transform: scale(1.06); }
.product-badge{
  position:absolute;
  top:.9rem; left:.9rem;
  background: rgba(13,30,56,.85);
  color: var(--gold-pale);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-weight:600;
  padding: .35rem .8rem;
  border-radius: 30px;
}
.product-body{
  padding: 1.3rem 1.4rem 1.5rem;
}
.product-body h3{
  font-size: 1.05rem;
  margin-bottom:.4rem;
}
.product-body p{
  color: var(--ink-soft);
  font-size:.9rem;
  margin-bottom: 1.1rem;
}
.product-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
}
.product-price{
  color: var(--gold-deep);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.3px;
}
.product-enquire{
  font-size:.85rem;
  font-weight:600;
  color: var(--navy);
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.product-enquire:hover{ color: var(--gold-deep); }
.shop-note{
  background: var(--cream);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
}

/* ---------- Gallery Slider ---------- */
.gallery-section{
  background: var(--navy);
  position:relative;
  overflow:hidden;
}
.gallery-slider{
  position:relative;
}
.gallery-track{
  display:flex;
  gap: 1.5rem;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scroll-behavior:smooth;
  padding: .5rem .25rem 1.5rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar{ display:none; }

.gallery-item{
  flex: 0 0 auto;
  width: 320px;
  scroll-snap-align: start;
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  cursor: pointer;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-strong);
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .55s ease;
}
.gallery-item:hover img{ transform: scale(1.08); }

.gallery-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(13,30,56,0) 40%, rgba(13,30,56,.92) 100%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 1.4rem;
  color: var(--white);
}
.gallery-overlay .tag{
  color: var(--gold);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:2px;
  font-weight:600;
  margin-bottom:.3rem;
}
.gallery-overlay h4{
  color: var(--white);
  font-size:1.1rem;
  margin:0;
}
.gallery-zoom-ic{
  position:absolute;
  top:1rem; right:1rem;
  width:38px; height:38px;
  border-radius:50%;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.4);
  backdrop-filter: blur(4px);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform: translateY(-6px);
  transition: all .3s ease;
}
.gallery-item:hover .gallery-zoom-ic{
  opacity:1;
  transform: translateY(0);
}

.gallery-arrow{
  width:52px; height:52px;
  border-radius:50%;
  background: var(--gold-deep);
  color: var(--white);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  transition: all .25s ease;
  flex:none;
}
.gallery-arrow:hover{ background: var(--gold); color: var(--navy); }
.gallery-arrow:disabled{ opacity:.35; cursor:default; }

.gallery-progress{
  height: 3px;
  background: rgba(255,255,255,.15);
  border-radius: 3px;
  overflow:hidden;
  flex:1;
}
.gallery-progress-bar{
  height:100%;
  width: 16.6%;
  background: var(--gold);
  border-radius: 3px;
  transition: width .35s ease, transform .35s ease;
}

/* Lightbox modal */
#galleryLightbox .modal-content{
  background: transparent;
  border:none;
}
#galleryLightbox .modal-body{
  position:relative;
  padding:0;
}
#galleryLightbox img{
  width:100%;
  max-height:80vh;
  object-fit:contain;
  border-radius: var(--radius);
  background:#000;
}
#galleryLightbox .lightbox-caption{
  color:#fff;
  text-align:center;
  margin-top:1rem;
}
#galleryLightbox .lightbox-caption .tag{
  color: var(--gold);
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:.75rem;
  font-weight:600;
}
#galleryLightbox .btn-close{
  filter:invert(1);
  position:absolute;
  top:-2.5rem;
  right:0;
  opacity:.85;
}
#galleryLightbox .lightbox-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:48px; height:48px;
  border-radius:50%;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
}
#galleryLightbox .lightbox-nav:hover{ background: var(--gold); color: var(--navy); }
#galleryLightbox .lightbox-prev{ left:-1.2rem; }
#galleryLightbox .lightbox-next{ right:-1.2rem; }
@media (max-width: 991.98px){
  #galleryLightbox .lightbox-prev{ left:.4rem; }
  #galleryLightbox .lightbox-next{ right:.4rem; }
}

@media (max-width: 575.98px){
  .gallery-item{ width: 78vw; }
}

/* Process steps */
.process-step{
  text-align:center;
  padding: 0 1rem;
}
.process-num{
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--gold-pale);
  -webkit-text-stroke: 1.5px var(--gold-deep);
  color: transparent;
  line-height:1;
  margin-bottom: .5rem;
}
.process-step h4{ font-size: 1.05rem; }
.process-step p{ color: var(--ink-soft); font-size:.92rem; }

/* Why us list */
.check-item{
  display:flex;
  gap: .9rem;
  align-items:flex-start;
  margin-bottom: 1.4rem;
}
.check-item .ic{
  flex:none;
  width: 34px;
  height:34px;
  border-radius:50%;
  background: var(--navy);
  color: var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
}
.check-item h5{ font-size:1rem; margin-bottom:.2rem; color:var(--navy);}
.check-item p{ color:var(--ink-soft); font-size:.92rem; margin:0;}

/* CTA banner */
.cta-banner{
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 3.2rem;
  position:relative;
  overflow:hidden;
}
.cta-banner h3{ color: var(--white); }
.cta-banner p{ color: rgba(255,255,255,.75); }

/* Testimonials */
.testimonial-card{
  background: var(--white);
  border: 1px solid var(--cream-2);
  padding: 2rem;
  border-radius: var(--radius);
  height:100%;
}
.testimonial-card .stars{ color: var(--gold-deep); letter-spacing:2px; }
.testimonial-card p.quote{
  font-style: italic;
  color: var(--ink);
}
.testimonial-card .author{
  font-weight:600;
  color: var(--navy);
  font-size:.92rem;
}

/* Page header (interior pages) */
.page-header{
  color: var(--white);
  padding: 3.6rem 0 3rem;
  position:relative;
}
.page-header h1{ color: var(--white); font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.breadcrumb-nav a{ color: var(--gold-pale); }
.breadcrumb-nav span{ color: rgba(255,255,255,.55); }

/* About page */
.about-photo-frame{
  border: 8px solid var(--white);
  box-shadow: var(--shadow-strong);
  border-radius: var(--radius);
}
.value-card{
  border-left: 3px solid var(--gold-deep);
  padding: .3rem 0 .3rem 1.2rem;
  margin-bottom: 1.6rem;
}
.value-card h5{ color:var(--navy); }
.value-card p{ color: var(--ink-soft); font-size:.93rem; margin:0; }

/* Contact page */
.contact-card{
  background: var(--white);
  border:1px solid var(--cream-2);
  border-radius: var(--radius);
  padding: 1.8rem;
  height:100%;
}
.contact-card .ic{
  width:48px; height:48px;
  border-radius:50%;
  background: var(--navy);
  color: var(--gold);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 1rem;
}
.form-control, .form-select{
  border-radius: var(--radius);
  border: 1px solid #d9d2c2;
  padding: .7rem .9rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 .2rem rgba(169,127,54,.15);
}
.form-label{
  font-size:.85rem;
  font-weight:600;
  color: var(--navy);
  letter-spacing:.3px;
}
.map-frame iframe{
  width:100%;
  height:100%;
  min-height: 340px;
  border:0;
  border-radius: var(--radius);
}

/* Legal pages */
.legal-content h2{
  font-size: 1.35rem;
  margin-top: 2.2rem;
  margin-bottom: .8rem;
}
.legal-content h2:first-child{ margin-top:0; }
.legal-content p, .legal-content li{
  color: var(--ink-soft);
  font-size: .98rem;
}
.legal-content ul{ padding-left: 1.2rem; }
.legal-updated{
  color: var(--gold-deep);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.legal-toc{
  background: var(--cream);
  border-radius: var(--radius);
  padding: 1.5rem 1.7rem;
  position: sticky;
  top: 100px;
}
.legal-toc a{
  display:block;
  color: var(--ink);
  font-size:.92rem;
  padding: .35rem 0;
  border-bottom: 1px dashed var(--cream-2);
}
.legal-toc a:hover{ color: var(--gold-deep); }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--navy);
  color: rgba(255,255,255,.75);
}
.footer-logo-badge{
  background: var(--white);
  display:inline-flex;
  align-items:center;
  padding: .8rem 1.1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.footer-logo-badge img{
  height: 42px;
  width:auto;
  display:block;
}

.site-footer h5{
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 1.2rem;
}
.site-footer a{
  color: rgba(255,255,255,.68);
}
.site-footer a:hover{ color: var(--gold); }
.footer-links li{ margin-bottom:.6rem; font-size:.92rem; }
.footer-about p{ font-size:.92rem; color: rgba(255,255,255,.65); }
.footer-contact li{
  display:flex;
  gap:.7rem;
  margin-bottom:.9rem;
  font-size:.9rem;
  align-items:flex-start;
}
.footer-contact .ic{ color: var(--gold); flex:none; margin-top:.15rem; }
.social-row a{
  width: 36px; height:36px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:.5rem;
  transition: all .25s ease;
}
.social-row a:hover{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.12);
  font-size:.85rem;
  padding: 1.2rem 0;
}
.footer-bottom a{ color: rgba(255,255,255,.75); }
.footer-bottom a:hover{ color: var(--gold); }

/* Back to top */
.back-to-top{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold-deep);
  color: var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transform: translateY(10px);
  transition: all .3s ease;
  z-index:1050;
  box-shadow: var(--shadow-soft);
}
.back-to-top.show{
  opacity:1; visibility:visible; transform: translateY(0);
}
.back-to-top:hover{ background: var(--navy); color: var(--gold);}

@media (max-width: 767.98px){
  .hero{ padding: 3.5rem 0 3rem; text-align:center; }
  .hero p.lead{ margin-left:auto; margin-right:auto; }
  .hero-stats{ text-align:center; }
  section{ padding: 3.2rem 0; }
  .legal-toc{ position:static; margin-bottom: 2rem; }
}