/* =========================================================
   Jaipur Silver Association — Custom CSS (Bootstrap 5 base)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --cream:#fcd4d2;
  --ink:#2B0E14;
  --wine:#7A1330;
  --wine-dark:#5C0F2B;
  --pink-light:#F3D9DE;
  --pink-mid:#E3B5C4;
  --rose:#B4577A;
  --muted:#6B4550;
}

html{ scroll-behavior:smooth; }

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',sans-serif;
}

.font-serif{ font-family:'Playfair Display',serif; }

/* ---------- Small text helpers ---------- */
.eyebrow{
  font-family:'Inter',sans-serif;
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rose);
}
.eyebrow-light{ color:rgba(255,255,255,.5); }

/* ---------- Buttons ---------- */
.btn-jsa-dark,
.btn-jsa-outline,
.btn-jsa-light{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.9rem 1.9rem;
  border-radius:50rem;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:500;
  text-decoration:none;
  border:1px solid transparent;
  transition:opacity .2s ease, transform .2s ease;
}
.btn-jsa-dark{ background:var(--wine); color:#fff; }
.btn-jsa-outline{ background:transparent; color:var(--ink); border-color:rgba(0,0,0,.35); }
.btn-jsa-light{ background:#fff; color:#111; }
.btn-jsa-dark:hover,
.btn-jsa-outline:hover,
.btn-jsa-light:hover{ opacity:.85; transform:translateY(-1px); }

/* ---------- Header / Nav ---------- */
.jsa-header{
  position:sticky;
  top:0;
  z-index:1030;
  background:rgba(251,240,240,.95);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(0,0,0,.05);
}
.jsa-logo-badge{
  height:50px;
}

.logo-text{
  color: var(--wine);
  margin-top: 6px;
}

.jsa-logo-text{ line-height:1.1; }
.jsa-logo-text .brand{ display:block; font-family:'Playfair Display',serif; font-size:1.05rem; letter-spacing:.03em;color:var(--rose); }
.jsa-logo-text .sub{ display:block; font-size:.6rem; letter-spacing:.3em; color:var(--rose); }

.jsa-nav .nav-link{
  color:#333;
  font-size:.95rem;
  padding:.5rem .75rem;
}
.jsa-nav .nav-link:hover{ color:var(--wine); }

/* ---------- Hero ---------- */
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid rgba(0,0,0,.15);
  border-radius:50rem;
  padding:.4rem 1rem;
  font-size:.7rem;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.hero-title{
  font-size:clamp(1.6rem, 3vw, 2.4rem);
  line-height:1.2;
}
.hero-lead{
  color:var(--muted);
  max-width:36rem;
}
.placeholder-img{
  background:linear-gradient(135deg,#f3d9de,#e3b5c4);
  display:flex; align-items:center; justify-content:center;
  color:#6B4550;
  font-family:'Inter',sans-serif;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  padding:1rem;
  border-radius:1.25rem;
}
.hero-portrait{
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:1.25rem;
  display:block;
}

.hero-tag-card{
  position:absolute;
  top:1.25rem; right:1.25rem;
  background:#fff;
  border-radius:1rem;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  padding:.9rem 1.1rem;
}
.hero-info-card{
  position:absolute;
  bottom:1.25rem; left:1.25rem; right:1.25rem;
  background:var(--cream);
  border-radius:1rem;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  padding:1.2rem 1.4rem;
  max-width:22rem;
}
@media (max-width: 767.98px){
  .hero-info-card{ right:1.25rem; max-width:none; }
}

.stat-block .stat-number{ font-family:'Playfair Display',serif; font-size:2.1rem; margin-bottom:.15rem; }

/* ---------- About ---------- */
.about-float-card{
  background:var(--cream);
  border:1px solid rgba(122,19,48,.12);
  border-radius:1rem;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  padding:1.5rem 1.6rem;
  margin-top:-4rem;
  margin-left:1.5rem;
  max-width:18rem;
  position:relative;
}
@media (max-width: 767.98px){
  .about-float-card{ margin-top:1rem; margin-left:0; max-width:none; }
}
.about-mission{
  border-left:2px solid var(--wine);
  padding-left:1.5rem;
}

/* ---------- Offering cards ---------- */
.offering-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:1rem;
  padding:2.25rem 1.75rem;
  background:#fff;
  position:relative;
  height:100%;
}
.offering-card .num{
  position:absolute; top:1.5rem; right:1.6rem;
  font-family:'Playfair Display',serif;
  font-size:1.9rem;
  color:rgba(122,19,48,.15);
}
.offering-icon{
  width:44px; height:44px;
  border-radius:.6rem;
  background:var(--wine);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.75rem;
}

/* ---------- Rates (dark section) ---------- */
.section-dark{ background:var(--wine-dark); color:#fff; }
.rate-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:1rem;
  padding:1.5rem;
  background:rgba(255,255,255,.03);
  height:100%;
}
.rate-bar{ height:4px; border-radius:50rem; margin-top:1rem; }
.rate-up{ background:rgba(52,211,153,.7); }
.rate-down{ background:rgba(251,113,133,.7); }

/* ---------- App section ---------- */
.app-feature-icon{
  width:40px; height:40px;
  border-radius:.6rem;
  background:var(--pink-light);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.phone-mock{
  border:8px solid #000;
  border-radius:2.2rem;
  overflow:hidden;
  box-shadow:0 20px 45px rgba(0,0,0,.25);
  max-width:20rem;
  margin:0 auto;
}
.phone-mock .placeholder-img{ border-radius:0; aspect-ratio:9/16; }
.phone-rate-card{
  background:#fff;
  border-radius:1rem;
  box-shadow:0 15px 35px rgba(0,0,0,.15);
  padding:1.1rem 1.3rem;
  margin-top:-1.5rem;
  max-width:18rem;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  z-index:2;
}
.phone-mock .phone-mock-img{
  /* width:100%;
  aspect-ratio:9/16;
  object-fit:cover;
  display:block; */
  height: 655px;
}
.phone-rate-row{
  display:flex; justify-content:space-between;
  border-top:1px solid rgba(122,19,48,.12);
  padding-top:.5rem;
  font-size:.85rem;
}

/* ---------- Membership steps ---------- */
.steps-wrap{ border-left:1px solid rgba(122,19,48,.12); }
.step-item{ padding-left:2rem; padding-bottom:2.25rem; position:relative; }
.step-dot{
  position:absolute; left:-9px; top:.25rem;
  width:16px; height:16px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--wine);
}
.step-num{ font-family:'Playfair Display',serif; font-size:1.6rem; color:rgba(122,19,48,.25); margin-bottom:.1rem; }

/* ---------- Advisory ---------- */
.advisor-portrait{
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
}

/* ---------- Contact ---------- */
.contact-icon{
  width:40px; height:40px;
  border-radius:.6rem;
  background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* ---------- Footer ---------- */
.jsa-footer{ background:var(--wine-dark); color:#fff; }
.jsa-footer ul{ list-style:none; padding:0; margin:0; }
.jsa-footer ul li{ margin-bottom:.6rem; color:rgba(255,255,255,.75); font-size:.9rem; }
.jsa-footer h4{ font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:1.1rem; }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 991.98px){
  .jsa-nav{ padding-top:.5rem; }
}
@media (max-width: 575.98px){
  .btn-jsa-dark, .btn-jsa-outline, .btn-jsa-light{ width:100%; justify-content:center; }
  .offering-card{ padding:1.75rem 1.4rem; }
}

/* ---------- Video Section ---------- */
.video-frame{
  position:relative;
  max-width:60rem;
  aspect-ratio:16/9;
  border-radius:1.5rem;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 25px 50px rgba(122,19,48,.18);
}
.video-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.video-frame:hover .video-thumb{ transform:scale(1.03); }
.video-frame::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(43,14,20,0) 40%, rgba(43,14,20,.55) 100%);
}
.video-play-btn{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:78px; height:78px;
  border-radius:50%;
  background:var(--wine);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  z-index:2;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  transition:transform .25s ease, background .25s ease;
}
.video-frame:hover .video-play-btn{
  transform:translate(-50%,-50%) scale(1.08);
  background:var(--wine-dark);
}
.video-duration{
  position:absolute;
  bottom:1.1rem; right:1.1rem;
  z-index:2;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:.75rem;
  letter-spacing:.05em;
  padding:.3rem .7rem;
  border-radius:50rem;
}
@media (max-width: 575.98px){
  .video-play-btn{ width:60px; height:60px; }
}

/* ---------- Video Modal ---------- */
.video-modal-content{
  background:#000;
  border-radius:1rem;
  overflow:hidden;
  border:none;
}
.video-modal-close{
  position:absolute;
  top:.9rem; right:.9rem;
  z-index:3;
  opacity:1;
}

/* ---------- Logo ---------- */
.jsa-logo-img{
  width:44px; height:44px;
  border-radius:50%;
  object-fit:contain;
  background:var(--pink-light);
  border:1px solid rgba(122,19,48,.12);
  padding:5px;
}

/* ---------- Desktop nav links ---------- */
.jsa-nav-link{
  color:#333;
  font-size:.92rem;
  text-decoration:none;
  position:relative;
  padding-bottom:.2rem;
}
.jsa-nav-link::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:var(--wine);
  transition:width .25s ease;
}
.jsa-nav-link:hover{ color:var(--wine); }
.jsa-nav-link:hover::after{ width:100%; }

/* ---------- Hamburger button ---------- */
.jsa-burger{
  width:42px; height:42px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:.6rem;
  background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px;
}
.jsa-burger span{
  display:block;
  width:20px; height:2px;
  background:var(--ink);
  border-radius:2px;
}

/* ---------- Mobile Offcanvas ---------- */
.jsa-offcanvas{
  width:min(320px, 85vw);
  background:var(--cream);
}
.jsa-offcanvas .offcanvas-header{
  border-bottom:1px solid rgba(122,19,48,.12);
  padding:1.25rem 1.5rem;
}
.jsa-offcanvas .offcanvas-body{
  padding:1.5rem;
}
.jsa-mobile-links li{
  border-bottom:1px solid rgba(122,19,48,.08);
}
.jsa-mobile-links li a{
  display:block;
  padding:1rem 0;
  color:var(--ink);
  text-decoration:none;
  font-family:'Playfair Display',serif;
  font-size:1.15rem;
}
.jsa-mobile-links li a:hover{ color:var(--wine); }

/* Buttons full-width fix (no more circle) */
.btn-jsa-dark.w-100,
.btn-jsa-outline.w-100{
  white-space:normal;
  text-align:center;
}

.jsa-header-row1{
  border-bottom:1px solid rgba(122,19,48,.08);
}
.jsa-header-row2{
  font-size:.92rem;
}
.jsa-event-date{
  font-size:1rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--rose);
  white-space:nowrap;
}
.jsa-event-date svg{
  flex-shrink:0;
}
/* ---------- Hero Carousel ---------- */
.hero-carousel{
  position:relative;
  border-radius:.5rem;
  overflow:hidden;
  box-shadow:0 20px 45px rgba(122,19,48,.15);
}
.hero-carousel-img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
.hero-carousel-control{
  width:44px; height:44px;
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
  opacity:1;
  z-index:4;
}
.hero-carousel-control.carousel-control-prev{ left:1.25rem; }
.hero-carousel-control.carousel-control-next{ right:1.25rem; }
.hero-carousel-arrow{
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:var(--wine);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
  pointer-events:none;
}
.hero-carousel-control:hover .hero-carousel-arrow{
  background:#fff;
}
.hero-carousel-indicators{
  bottom:1.25rem;
  margin-bottom:0;
}
.hero-carousel-indicators [data-bs-target]{
  width:8px; height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  border:none;
  opacity:1;
  margin:0 4px;
}
.hero-carousel-indicators .active{
  background:#fff;
  width:22px;
  border-radius:50rem;
  transition:width .25s ease;
}

.hero-carousel .hero-tag-card{
  position:absolute;
  top:1.25rem; right:1.25rem;
  z-index:2;
}
.hero-carousel .hero-info-card{
  position:absolute;
  bottom:3.5rem; left:1.25rem; right:auto;
  max-width:14rem;
  z-index:2;
}
@media (max-width: 767.98px){
  .hero-carousel .hero-info-card{ display:none; }
}

@media (max-width: 991.98px){
  .hero-btn-stack{ margin-bottom:1rem; }
}

/* ---------- Vertical Ticker (stats) ---------- */
.ticker-box{
  position:relative;
  height:22rem;
  overflow:hidden;
  border:1px solid rgba(122,19,48,.12);
  border-radius:1.25rem;
  background:#fff;
  padding:1.5rem 0;
}
.ticker-track{
  display:flex;
  flex-direction:column;
  animation:ticker-scroll 10s linear infinite;
}
.ticker-box:hover .ticker-track{
  animation-play-state:paused;
}
.ticker-list li{
  display:flex;
  align-items:baseline;
  gap:1rem;
  padding:1.75rem;
  border-bottom:1px solid rgba(122,19,48,.08);
  transition:background-color .25s ease;
}
.ticker-list li:hover{
  background:var(--pink-light);
}
.ticker-num{
  font-size:2.2rem;
  color:var(--wine);
  line-height:1;
  white-space:nowrap;
}
.ticker-label{
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
@keyframes ticker-scroll{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(-50%); }
}
.ticker-fade-top,
.ticker-fade-bottom{
  position:absolute;
  left:0; right:0;
  height:3rem;
  pointer-events:none;
  z-index:2;
}
.ticker-fade-top{
  top:0;
  background:linear-gradient(180deg, #fff, rgba(255,255,255,0));
}
.ticker-fade-bottom{
  bottom:0;
  background:linear-gradient(0deg, #fff, rgba(255,255,255,0));
}

/* ---------- Instagram-style card ---------- */
.insta-card{
  border:1px solid rgba(122,19,48,.12);
  border-radius:1.25rem;
  overflow:hidden;
  background:#fff;
  box-shadow:0 15px 35px rgba(0,0,0,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.insta-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 45px rgba(122,19,48,.15);
}
.insta-card-header{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:1.25rem 1.5rem;
  border-bottom:1px solid rgba(122,19,48,.08);
}
.insta-avatar{
  width:48px; height:48px;
  border-radius:50%;
  background:linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.insta-header-text{ flex:1; min-width:0; }
.insta-username{
  font-family:'Playfair Display',serif;
  font-size:1rem;
  color:var(--ink);
}
.insta-sub{
  font-size:.75rem;
  color:var(--muted);
}
.insta-follow-btn{
  background:var(--wine);
  color:#fff;
  font-size:.75rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.4rem 1rem;
  border-radius:50rem;
  flex-shrink:0;
}
.insta-card-body{
  padding:2.5rem 1.5rem;
}
.insta-body-icon{
  width:64px; height:64px;
  border-radius:50%;
  background:linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.insta-card-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:1rem;
  font-size:.85rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--wine);
  border-top:1px solid rgba(122,19,48,.08);
}
@media (max-width: 575.98px){
  .ticker-box{ height:18rem; }
}

/* ---------- Inline Floor Plan Zoom ---------- */
/* ---------- Inline Floor Plan Zoom ---------- */
.floor-plan-wrap{
  position:relative;
  border-radius:1rem;
  overflow:hidden;
  border:1px solid rgba(122,19,48,.12);
}
.floor-plan-viewer{
  width:100%;
  height:50rem;
  overflow:auto;
  background:#f4e9ea;
  cursor:grab;
  touch-action:none;
}
.floor-plan-viewer.grabbing{
  cursor:grabbing;
}
.floor-plan-zoom-img{
  display:block;
  width:100%;
  transition:transform .2s ease;
  transform-origin:top left;
  user-select:none;
  -webkit-user-drag:none;
}

.floor-plan-toolbar{
  position:absolute;
  top:1rem; right:1rem;
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.floor-plan-tool-btn{
  width:40px; height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(122,19,48,.15);
  color:var(--wine);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  transition:background .2s ease, transform .15s ease;
}
.floor-plan-tool-btn:hover{
  background:var(--wine);
  color:#fff;
  transform:scale(1.05);
}

@media (max-width: 575.98px){
  .floor-plan-viewer{ height:22rem; }
}

/* ---------- Venue Section ---------- */
.venue-card{
  background:#fff;
  border:1px solid rgba(122,19,48,.12);
  border-radius:1.25rem;
  overflow:hidden;
  box-shadow:0 15px 40px rgba(0,0,0,.06);
}
.venue-image{
  width:100%;
  aspect-ratio:16/8;
  object-fit:cover;
  display:block;
}
.venue-info{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2rem;
  padding:1.75rem 2rem;
  flex-wrap:wrap;
}
.venue-pin-icon{
  color:var(--wine);
  flex-shrink:0;
  margin-top:.2rem;
}
.venue-address{
  color:var(--muted);
  max-width:26rem;
}
.venue-info-right{
  flex-shrink:0;
}
@media (max-width: 575.98px){
  .venue-info{
    flex-direction:column;
    align-items:stretch;
  }
  .venue-info-right .btn-jsa-dark{
    width:100%;
    justify-content:center;
  }
}