/* =========================================================================
   Shiv Shakti — offers
   Two pieces of site chrome, rendered by Views/Shared/Components/SiteOffers:
     .ss-offerbar   the scrolling strip that sits above the maroon top bar
     .ss-offerpop   the offer popup that opens after a few seconds
   Admin → Site settings → Offers decides which of the two (or both) appear,
   so this file is only loaded when offers are switched on.
   Namespaced .ss- like the rest of the shared chrome.
   ========================================================================= */

/* ============================== Top-bar ticker ============================== */
.ss-offerbar{
  position:relative; z-index:102;
  background:linear-gradient(90deg,#8a1c2a,#a9791f 28%,#d9b04a 52%,#a9791f 76%,#8a1c2a);
  color:#2a0f12;
  font-size:.79rem; letter-spacing:.01em;
  border-bottom:1px solid rgba(40,5,9,.22);
  overflow:hidden;
}
.ss-offerbar[hidden]{display:none !important;}
.ss-offerbar-in{
  max-width:var(--ss-shell,1320px); margin:0 auto; padding:0 var(--ss-shell-pad,32px);
  display:flex; align-items:center; gap:14px; min-height:34px;
}

/* the fixed "Offers" chip on the left */
.ss-offerbar-tag{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  padding:4px 12px; border-radius:999px;
  background:rgba(40,5,9,.82); color:#f5e6bd;
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.ss-offerbar-tag svg{width:13px; height:13px; color:#e8c876;}

/* the moving part */
.ss-offerbar-view{flex:1; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);}
.ss-offerbar-track{
  display:flex; width:max-content;
  animation:ss-offer-scroll var(--of-dur,32s) linear infinite;
}
.ss-offerbar:hover .ss-offerbar-track,
.ss-offerbar-track:focus-within{animation-play-state:paused;}
.ss-offerbar-run{display:flex; align-items:center;}
@keyframes ss-offer-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

.ss-offerbar-item{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 0; margin-right:44px; white-space:nowrap;
}
.ss-offerbar-item > svg{width:15px; height:15px; flex:none; color:#4a0d14;}
.ss-offerbar-item b{font-weight:700;}
.ss-offerbar-item span b{color:#3a0a11;}
.ss-offerbar-code{
  cursor:pointer;
  padding:2px 9px; border-radius:5px;
  border:1px dashed rgba(40,5,9,.5); background:rgba(255,253,246,.55);
  font-size:.74rem; letter-spacing:.08em;
  transition:background .2s, transform .2s;
}
.ss-offerbar-code:hover{background:#fffdf6; transform:translateY(-1px);}
.ss-offerbar-code.is-copied{background:#2f6b45; border-color:#2f6b45; color:#fff;}
.ss-offerbar-item a{
  display:inline-flex; align-items:center; gap:3px;
  font-weight:700; text-decoration:underline; text-underline-offset:3px;
  color:#4a0d14;
}
.ss-offerbar-item a:hover{color:#280509;}
.ss-offerbar-chev{width:13px; height:13px;}

.ss-offerbar-x{
  flex:none; width:26px; height:26px; display:grid; place-items:center;
  border:0; border-radius:50%; background:rgba(40,5,9,.14); color:#3a0a11;
  transition:background .2s, transform .2s;
}
.ss-offerbar-x svg{width:14px; height:14px;}
.ss-offerbar-x:hover{background:rgba(40,5,9,.3); color:#fff; transform:rotate(90deg);}

@media (max-width:760px){
  .ss-offerbar{font-size:.74rem;}
  .ss-offerbar-in{padding:0 12px; gap:8px; min-height:32px;}
  .ss-offerbar-tag span{display:none;}
  .ss-offerbar-tag{padding:5px 8px;}
  .ss-offerbar-item{margin-right:30px;}
}
@media (prefers-reduced-motion:reduce){
  /* no crawl: the strip simply scrolls by hand instead */
  .ss-offerbar-track{animation:none;}
  .ss-offerbar-view{overflow-x:auto; scrollbar-width:none;}
  .ss-offerbar-view::-webkit-scrollbar{display:none;}
  .ss-offerbar-run[aria-hidden="true"]{display:none;}
}

/* ================================= Popup ================================= */
/* 890 sits above the page and the drawer, but under the quick view (900) and the
   login popup (950): a promotion that opened by itself must never cover a window
   the visitor opened on purpose. The toast (999) stays readable over it. */
.ss-offerpop{position:fixed; inset:0; z-index:890; display:grid; place-items:center; padding:20px;}
.ss-offerpop[hidden]{display:none !important;}
.ss-offerpop-scrim{
  position:absolute; inset:0; background:rgba(26,4,8,.68);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .35s ease;
}
.ss-offerpop.is-on .ss-offerpop-scrim{opacity:1;}
.ss-offerpop-box{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  width:min(880px,100%); max-height:min(90vh,720px); overflow:hidden;
  border-radius:var(--radius-l,22px);
  background:linear-gradient(160deg,#fdfaf3,#f7ecd6);
  border:1px solid rgba(169,121,31,.45);
  box-shadow:0 44px 90px -30px rgba(26,4,8,.7);
  transform:translateY(26px) scale(.97); opacity:0;
  transition:transform .45s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}
.ss-offerpop.is-on .ss-offerpop-box{transform:none; opacity:1;}
.ss-offerpop-box:not(:has(.ss-offerpop-art)){grid-template-columns:minmax(0,1fr); width:min(540px,100%);}

.ss-offerpop-art{position:relative; min-height:230px; background:#3a0a11;}
.ss-offerpop-art img{width:100%; height:100%; object-fit:cover;}
.ss-offerpop-art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg,rgba(40,5,9,.05),rgba(40,5,9,.55));
}
.ss-offerpop-badge{
  position:absolute; z-index:2; top:18px; left:18px;
  padding:6px 14px; border-radius:999px;
  background:linear-gradient(135deg,#d9b04a,#a9791f);
  color:#280509; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 10px 22px -12px rgba(40,5,9,.8);
}
.ss-offerpop-badge.flat{position:static; display:inline-block; margin-bottom:14px;}

.ss-offerpop-body{
  padding:clamp(26px,3.4vw,40px);
  overflow-y:auto;
  display:flex; flex-direction:column; justify-content:center;
}
.ss-offerpop-kicker{
  margin:0 0 8px; font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-600,#a9791f);
}
.ss-offerpop-body h2{
  margin:0 0 12px;
  font-family:var(--display,'Cinzel',serif); font-weight:700;
  font-size:clamp(1.34rem,2.3vw,1.8rem); line-height:1.24; color:var(--maroon-800,#511019);
}
.ss-offerpop-text{color:var(--ink-soft,#5a4139); font-size:.92rem; line-height:1.75;}
.ss-offerpop-text p{margin:0 0 10px;}
.ss-offerpop-text p:last-child{margin:0;}

.ss-offerpop-clock{display:flex; gap:10px; margin:18px 0 4px;}
.ss-offerpop-clock[hidden]{display:none;}
.ss-offerpop-clock span{
  min-width:60px; padding:8px 6px; text-align:center;
  border-radius:var(--radius-m,12px);
  background:var(--maroon-800,#511019); color:#f5e6bd;
}
.ss-offerpop-clock b{display:block; font-family:var(--display,'Cinzel',serif); font-size:1.14rem; line-height:1;}
.ss-offerpop-clock i{font-style:normal; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:#d9b04a;}

.ss-offerpop-code{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:20px 0 0; padding:12px 16px;
  border:1.5px dashed rgba(169,121,31,.65); border-radius:var(--radius-m,12px);
  background:rgba(255,255,255,.6);
}
.ss-offerpop-code span{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft,#5a4139);}
.ss-offerpop-code b{
  font-family:var(--display,'Cinzel',serif); font-size:1.12rem; letter-spacing:.1em;
  color:var(--maroon-700,#6e1622);
}
.ss-offerpop-code button{
  margin-left:auto; padding:7px 15px; border:0; border-radius:999px;
  background:var(--maroon-700,#6e1622); color:#f5e6bd;
  font-size:.76rem; font-weight:600; letter-spacing:.06em;
  transition:background .25s;
}
.ss-offerpop-code button:hover{background:var(--maroon-600,#8a1c2a);}
.ss-offerpop-code button.is-copied{background:#2f6b45;}

.ss-offerpop-cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px;}
.ss-offerpop-later{
  border:0; background:none; padding:4px 0;
  font-size:.82rem; color:var(--ink-soft,#5a4139);
  text-decoration:underline; text-underline-offset:3px;
}
.ss-offerpop-later:hover{color:var(--maroon-700,#6e1622);}
.ss-offerpop-fine{margin:16px 0 0; font-size:.72rem; color:#8a7461; line-height:1.6;}

.ss-offerpop-x{
  position:absolute; z-index:3; top:12px; right:12px;
  width:34px; height:34px; display:grid; place-items:center;
  border:0; border-radius:50%;
  background:rgba(255,253,246,.9); color:var(--maroon-800,#511019);
  box-shadow:0 8px 20px -10px rgba(40,5,9,.7);
  transition:transform .3s, background .25s;
}
.ss-offerpop-x svg{width:17px; height:17px;}
.ss-offerpop-x:hover{transform:rotate(90deg); background:#fff;}

@media (max-width:760px){
  .ss-offerpop{padding:14px;}
  .ss-offerpop-box{grid-template-columns:minmax(0,1fr); max-height:88vh;}
  .ss-offerpop-art{min-height:150px; max-height:190px;}
  .ss-offerpop-clock span{min-width:52px;}
}
@media (prefers-reduced-motion:reduce){
  .ss-offerpop-box, .ss-offerpop-scrim{transition-duration:.01ms;}
}