/* =================================================================
 *  VFastrr - Raksha Bandhan campaign skin
 *  Loaded only while the campaign is active (see rakhi-campaign.php).
 *  Festive palette sits next to the brand navy from page-theme.css.
 * ================================================================= */

:root{
    --rk-maroon:#8c0f2c;
    --rk-red:#c9184a;
    --rk-saffron:#ff7a18;
    --rk-gold:#ffc94d;
    --rk-cream:#fff6e9;
}

/* ---------------- bottom ribbon (all pages) ---------------- */
.rakhi-ribbon{
    position:fixed; left:0; right:0; bottom:0; z-index:99999;
    background:linear-gradient(100deg,var(--rk-maroon) 0%,var(--rk-red) 48%,var(--rk-saffron) 100%);
    color:#fff; box-shadow:0 -8px 28px rgba(0,0,0,.22);
    transform:translateY(110%); transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.rakhi-ribbon.is-in{ transform:translateY(0); }

/* the "thread" running along the top edge */
.rakhi-ribbon__thread{
    height:4px;
    background:repeating-linear-gradient(90deg,
        var(--rk-gold) 0 14px, transparent 14px 24px, #fff 24px 30px, transparent 30px 44px);
    opacity:.9;
}
.rakhi-ribbon__in{
    max-width:1180px; margin:0 auto; padding:11px 18px;
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.rakhi-ribbon__tag{
    display:inline-flex; align-items:center; gap:7px; flex:none;
    font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
    background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32);
    padding:5px 13px 5px 6px; border-radius:100px; white-space:nowrap;
}

/* ---------------- the rakhi itself ---------------- */
.rakhi-svg{ display:block; width:100%; height:auto; overflow:visible; }
.rakhi-svg__rosette{ transform-origin:32px 32px; }

/* mini rakhi sitting inside the "Rakhi Special" pill */
.rakhi-svg--mini{
    width:22px; flex:none;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
    animation:rkSpin 14s linear infinite;
}
@keyframes rkSpin{ to{ transform:rotate(360deg); } }

/* rakhis tied on the thread at either end of the ribbon - the rosette sits
   above the bar, the tassels dangle down over it */
.rakhi-hang{
    position:absolute; top:0; width:56px; z-index:2; line-height:0;
    transform:translateY(-50%);
    transform-origin:50% 37%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));
    animation:rkSway 4.5s ease-in-out infinite;
}
.rakhi-hang--l{ left:3.5%; }
.rakhi-hang--r{ right:3.5%; animation-delay:-2.2s; }
.rakhi-hang--r .rakhi-svg{ transform:scaleX(-1); }
@keyframes rkSway{
    0%,100%{ transform:translateY(-50%) rotate(-5deg); }
    50%{ transform:translateY(-50%) rotate(5deg); }
}
.rakhi-ribbon__copy{
    margin:0; padding:0; flex:1 1 320px; line-height:1.45; font-size:14px; color:#fff;
}
.rakhi-ribbon__copy strong{ font-weight:800; margin-right:8px; }
.rakhi-ribbon__copy span{ opacity:.9; }
.rakhi-ribbon__count{
    flex:none; font-size:13px; font-weight:700; white-space:nowrap;
    padding:5px 12px; border-radius:100px;
    background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.2);
}
.rakhi-ribbon__cta{
    flex:none; background:#fff; color:var(--rk-maroon) !important;
    font-weight:800; font-size:13px; letter-spacing:.2px;
    padding:9px 20px; border-radius:100px; white-space:nowrap;
    transition:transform .2s ease, box-shadow .2s ease;
}
.rakhi-ribbon__cta:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.25); }
.rakhi-ribbon__x{
    flex:none; background:transparent; border:0; color:#fff; cursor:pointer;
    font-size:24px; line-height:1; opacity:.75; padding:0 2px;
}
.rakhi-ribbon__x:hover{ opacity:1; }

/* keep the ribbon from covering page content / floating widgets */
body.has-rakhi-ribbon{ padding-bottom:64px; }

/* the hanging rakhis only get the outer gutters once the centred content
   stops reaching the edges - below that the pill rakhi carries the motif */
@media (max-width:1359px){
    .rakhi-hang{ width:48px; }
    .rakhi-hang--l{ left:14px; }
    .rakhi-hang--r{ right:14px; }
}
@media (max-width:1199px){
    .rakhi-hang{ display:none; }
    .rakhi-svg--mini{ width:28px; }
}

@media (max-width:980px){
    .rakhi-ribbon__count{ display:none; }
}
@media (max-width:767px){
    .rakhi-ribbon__in{ padding:10px 12px; gap:10px; }
    .rakhi-ribbon__copy{ flex-basis:100%; order:3; font-size:13px; }
    .rakhi-ribbon__copy span{ display:block; }
    .rakhi-ribbon__cta{ order:4; margin-left:auto; }
    body.has-rakhi-ribbon{ padding-bottom:112px; }
}

/* ---------------- welcome popup (homepage, first visit) ---------------- */
.rakhi-pop{ position:fixed; inset:0; z-index:100010; display:flex; align-items:center; justify-content:center; padding:24px; }
.rakhi-pop[hidden]{ display:none; }
.rakhi-pop__veil{
    position:absolute; inset:0; background:rgba(40,4,14,.72); backdrop-filter:blur(3px);
    opacity:0; transition:opacity .3s ease;
}
.rakhi-pop.is-in .rakhi-pop__veil{ opacity:1; }
.rakhi-pop__box{
    position:relative; width:100%; max-width:860px;
    background:#fff; border-radius:18px; overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.45);
    opacity:0; transform:translateY(24px) scale(.97);
    transition:opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
    max-height:calc(100vh - 48px); overflow-y:auto;
}
.rakhi-pop.is-in .rakhi-pop__box{ opacity:1; transform:none; }
.rakhi-pop__art{ display:block; width:100%; height:auto; }
.rakhi-pop__x{
    position:absolute; top:12px; right:12px; z-index:3;
    width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
    font-size:24px; line-height:1; color:#fff;
    background:rgba(20,0,8,.5); transition:background .2s ease;
}
.rakhi-pop__x:hover{ background:rgba(20,0,8,.8); }
.rakhi-pop__foot{ padding:20px 26px 24px; text-align:center; background:#fff; }
.rakhi-pop__line{
    margin:0 0 16px; padding:0; font-size:15px; line-height:1.6; color:#4a4d52;
}
.rakhi-pop__line strong{ color:var(--rk-maroon); }
.rakhi-pop__btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.rakhi-pop__cta{
    display:inline-block; padding:13px 32px; border-radius:100px;
    font-weight:800; font-size:14.5px; color:#fff !important;
    background:linear-gradient(120deg,var(--rk-red),var(--rk-saffron));
    box-shadow:0 10px 24px rgba(201,24,74,.32);
    transition:transform .2s ease, box-shadow .2s ease;
}
.rakhi-pop__cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(201,24,74,.42); }
.rakhi-pop__later{
    padding:13px 24px; border-radius:100px; cursor:pointer;
    border:1px solid #dcdfe5; background:transparent;
    font-size:14px; font-weight:600; color:#6b6f76;
}
.rakhi-pop__later:hover{ background:#f4f5f8; }
body.rakhi-pop-open{ overflow:hidden; }

@media (max-width:600px){
    .rakhi-pop{ padding:14px; }
    .rakhi-pop__foot{ padding:16px 18px 20px; }
    .rakhi-pop__line{ font-size:14px; }
    .rakhi-pop__btns .rakhi-pop__cta,
    .rakhi-pop__btns .rakhi-pop__later{ flex:1 1 100%; text-align:center; }
}

/* ---------------- homepage festive band ---------------- */
.rakhi-band{
    position:relative; overflow:hidden;
    padding:76px 0 82px;
    background:
        radial-gradient(1100px 420px at 12% -10%, rgba(255,201,77,.30), transparent 60%),
        linear-gradient(125deg,#5c0718 0%,var(--rk-maroon) 42%,var(--rk-red) 78%,#e0501f 100%);
    color:#fff;
}
.rakhi-band:before{ /* thread strip on top edge, mirrors the ribbon */
    content:""; position:absolute; left:0; right:0; top:0; height:5px;
    background:repeating-linear-gradient(90deg,
        var(--rk-gold) 0 16px, transparent 16px 28px, #fff 28px 34px, transparent 34px 50px);
}
.rakhi-band__glow{
    position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none;
}
.rakhi-band__glow--a{ width:340px; height:340px; right:-70px; top:-90px; background:rgba(255,122,24,.45); }
.rakhi-band__glow--b{ width:280px; height:280px; left:-60px; bottom:-110px; background:rgba(255,201,77,.28); }

.rakhi-band__wrap{
    position:relative; z-index:2;
    max-width:1180px; margin:0 auto; padding:0 20px;
    display:grid; grid-template-columns:1.35fr .95fr; gap:52px; align-items:center;
}
.rakhi-band__eyebrow{
    display:inline-block; font-size:12px; font-weight:800; letter-spacing:2px;
    text-transform:uppercase; color:var(--rk-gold);
    border:1px solid rgba(255,201,77,.45); background:rgba(255,201,77,.12);
    padding:7px 16px; border-radius:100px; margin-bottom:20px;
}
.rakhi-band__copy h2{
    color:#fff; font-size:46px; line-height:1.14; font-weight:800;
    padding:0; margin:0 0 16px;
}
.rakhi-band__copy h2 em{
    font-style:normal;
    background:linear-gradient(90deg,var(--rk-gold),#fff);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.rakhi-band__copy > p{
    font-size:16.5px; line-height:1.75; color:rgba(255,255,255,.86);
    max-width:610px; padding:0; margin:0 0 24px;
}
.rakhi-band__points{ list-style:none; margin:0 0 30px; padding:0; }
.rakhi-band__points li{
    display:flex; align-items:center; gap:12px;
    font-size:15px; font-weight:600; color:rgba(255,255,255,.94);
    padding:9px 0;
}
.rakhi-band__points i{
    flex:none; width:32px; height:32px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:13px; color:var(--rk-maroon);
    background:linear-gradient(140deg,var(--rk-gold),#fff);
}
.rakhi-band__actions{ display:flex; flex-wrap:wrap; gap:14px; }
.rakhi-band__btn{
    display:inline-block; padding:14px 30px; border-radius:100px;
    font-weight:800; font-size:14.5px; letter-spacing:.3px;
    background:linear-gradient(120deg,var(--rk-gold),var(--rk-saffron));
    color:#43050f !important; border:1px solid rgba(255,255,255,.25);
    transition:transform .22s ease, box-shadow .22s ease;
}
.rakhi-band__btn:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.32); }
.rakhi-band__btn--ghost{
    background:transparent; color:#fff !important; border:1px solid rgba(255,255,255,.5);
}
.rakhi-band__btn--ghost:hover{ background:rgba(255,255,255,.12); }

/* countdown card */
.rakhi-band__card{
    position:relative; text-align:center;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.24);
    border-radius:22px; padding:64px 26px 28px;
    backdrop-filter:blur(6px);
    box-shadow:0 22px 50px rgba(0,0,0,.28);
}
/* the rakhi resting on top of the countdown card */
.rakhi-band__rakhi{
    position:absolute; top:-42px; left:50%; transform:translateX(-50%);
    width:86px; line-height:0;
}
.rakhi-svg--knot{
    filter:drop-shadow(0 12px 22px rgba(0,0,0,.4));
    animation:rkFloat 3.6s ease-in-out infinite;
}
@keyframes rkFloat{
    0%,100%{ transform:translateY(0) rotate(-3deg); }
    50%{ transform:translateY(-7px) rotate(3deg); }
}
.rakhi-band__cardhead{
    margin:0 0 16px; padding:0; font-size:13px; font-weight:700;
    letter-spacing:1.6px; text-transform:uppercase; color:var(--rk-gold);
}
.rakhi-band__clock{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.rakhi-band__clock > div{
    background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.16);
    border-radius:14px; padding:14px 6px;
}
.rakhi-band__clock b{
    display:block; font-size:30px; line-height:1; font-weight:800; color:#fff;
    font-variant-numeric:tabular-nums;
}
.rakhi-band__clock span{
    display:block; margin-top:7px; font-size:10.5px; font-weight:700;
    letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,.7);
}
.rakhi-band__today{
    margin:0; padding:14px 0; font-size:22px; font-weight:800; color:var(--rk-gold);
}
.rakhi-band__note{
    margin:18px 0 0; padding:0; font-size:12.5px; line-height:1.6;
    color:rgba(255,255,255,.72);
}

@media (max-width:980px){
    .rakhi-band{ padding:60px 0 66px; }
    .rakhi-band__wrap{ grid-template-columns:1fr; gap:44px; }
    .rakhi-band__copy h2{ font-size:36px; }
    .rakhi-band__card{ max-width:460px; margin:0 auto; }
}
@media (max-width:520px){
    .rakhi-band__copy h2{ font-size:29px; }
    .rakhi-band__clock{ grid-template-columns:repeat(2,1fr); }
    .rakhi-band__actions .rakhi-band__btn{ flex:1 1 100%; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
    .rakhi-ribbon,.rakhi-hang,.rakhi-svg--mini,.rakhi-svg--knot{ animation:none; transition:none; }
    .rakhi-hang{ transform:translateY(-46%); }
}