*{box-sizing:border-box;margin:0;padding:0;}
 
.usa-bar{
  width:100%;
  height:58px;
  position:relative;
  overflow:hidden;
  font-family:'Barlow Condensed',sans-serif;
  background:#002868;
  display:flex;
  border-bottom:2px solid rgba(255,255,255,0.1);
}
 
/* FLAG PANEL LEFT */
.usa-bar .flag-panel{
  width:68px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
.usa-bar .stripe{flex:1;}
.usa-bar .s1{background:#B22234;}
.usa-bar .s2{background:#FFFFFF;}
.usa-bar .s3{background:#B22234;}
.usa-bar .s4{background:#FFFFFF;}
.usa-bar .s5{background:#B22234;}
.usa-bar .s6{background:#FFFFFF;}
.usa-bar .s7{background:#B22234;}
 
.usa-bar .canton{
  position:absolute;top:0;left:0;
  width:68px;height:100%;
  background:#002868;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:1px;
}
.usa-bar .star-row{display:flex;gap:3px;align-items:center;}
.usa-bar .s-star{
  color:#fff;font-size:7px;line-height:1;display:inline-block;
  animation:usaStarTwinkle 3s ease-in-out infinite;
}
.usa-bar .s-star:nth-child(odd){animation-delay:0.5s;}
.usa-bar .s-star:nth-child(3n){animation-delay:1s;}
@keyframes usaStarTwinkle{0%,100%{opacity:0.7;transform:scale(1);}50%{opacity:1;transform:scale(1.3);}}
 
.usa-bar .panel-divider{
  width:4px;flex-shrink:0;
}
 
/* RED: OFFER BADGE */
.usa-bar .offer-section{
  background:#B22234;
  display:flex;align-items:center;
  padding:0 20px 0 16px;gap:14px;
  position:relative;flex-shrink:0;
}
.usa-bar .offer-section::after{
  content:'';position:absolute;right:-16px;top:0;
  width:0;height:0;
  border-top:58px solid #B22234;
  border-right:16px solid transparent;
  z-index:2;
}
.usa-bar .badge-wrap{display:flex;align-items:center;gap:8px;}
.usa-bar .fire-icon{
  font-size:18px;
  animation:usaFireShake 0.8s ease-in-out infinite alternate;
}
@keyframes usaFireShake{from{transform:rotate(-8deg) scale(1);}to{transform:rotate(8deg) scale(1.1);}}
.usa-bar .badge-text-block{display:flex;flex-direction:column;gap:1px;}
.usa-bar .badge-top{
  font-size:8px;font-weight:700;letter-spacing:3px;
  color:rgba(255,255,255,0.75);text-transform:uppercase;line-height:1;
}
.usa-bar .badge-main{
  font-size:18px;font-weight:900;letter-spacing:1px;
  color:#fff;line-height:1;text-transform:uppercase;white-space:nowrap;
}
 
/* NAVY: OFFER DETAILS */
.usa-bar .offer-details{
  background:#002868;
  display:flex;align-items:center;gap:18px;
  padding:0 24px 0 32px;flex:1;
}
.usa-bar .cam-icon-wrap{display:flex;gap:3px;}
.usa-bar .cam-icon-wrap img{
  width:120px;height:64px;
  border-radius:2px;position:relative;opacity:0.9;
}
.usa-bar .cam-icon::after{
  content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);
  width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:6px solid #fff;opacity:0.9;
}
.usa-bar .cam-icon::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:6px;height:6px;border-radius:50%;background:#002868;
}
.usa-bar .offer-txt{display:flex;flex-direction:column;gap:1px;}
.usa-bar .offer-txt-top{
  font-size:11px;font-weight:600;letter-spacing:2px;
  color:rgba(255,255,255,0.65);text-transform:uppercase;
}
.usa-bar .offer-txt-main{
  font-size:20px;font-weight:900;letter-spacing:0.5px;
  color:#FFD700;text-transform:uppercase;line-height:1;white-space:nowrap;
}
.usa-bar .vdivider{width:1px;height:32px;background:rgba(255,255,255,0.2);flex-shrink:0;}
.usa-bar .save-block{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:rgba(255,215,0,0.12);
  border:1px solid rgba(255,215,0,0.35);
  border-radius:5px;padding:5px 14px;flex-shrink:0;
}
.usa-bar .save-lbl{font-size:8px;font-weight:700;letter-spacing:2.5px;color:rgba(255,215,0,0.7);text-transform:uppercase;}
.usa-bar .save-val{font-size:16px;font-weight:900;letter-spacing:1px;color:#FFD700;line-height:1;}
 
/* WHITE: TIMER */
.usa-bar .timer-section{
  background:#FFFFFF;
  display:flex;align-items:center;
  padding:0 20px 0 28px;gap:14px;flex-shrink:0;position:relative;
}
.usa-bar .timer-section::before{
  content:'';position:absolute;left:-16px;top:0;
  width:0;height:0;
  border-bottom:58px solid #FFFFFF;
  border-left:16px solid transparent;z-index:2;
}
.usa-bar .ends-block{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.usa-bar .ends-lbl{font-size:8px;font-weight:700;letter-spacing:2px;color:rgba(0,40,104,0.5);text-transform:uppercase;line-height:1;}
.usa-bar .ends-val{font-size:13px;font-weight:900;letter-spacing:1.5px;color:#B22234;text-transform:uppercase;line-height:1;}
.usa-bar .timer{display:flex;align-items:center;gap:4px;}
.usa-bar .t-block{
  display:flex;flex-direction:column;align-items:center;
  background:#002868;border-radius:4px;padding:4px 10px 5px;min-width:42px;
}
.usa-bar .t-num{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:900;color:#FFFFFF;line-height:1;letter-spacing:1px;}
.usa-bar .t-lbl{font-size:7px;font-weight:700;letter-spacing:2px;color:rgba(255,255,255,0.5);text-transform:uppercase;margin-top:1px;}
.usa-bar .t-colon{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:900;color:#002868;margin-bottom:8px;animation:usaColonBlink 1s step-end infinite;}
@keyframes usaColonBlink{0%,100%{opacity:1}50%{opacity:0.2}}
 
/* RED: CTA */
.usa-bar .cta-section{background:#B22234;display:flex;align-items:center;padding:0 22px;gap:12px;flex-shrink:0;}
.usa-bar .stars-vertical{display:flex;flex-direction:column;gap:2px;align-items:center;}
.usa-bar .sv-star{color:rgba(255,255,255,0.6);font-size:8px;animation:usaSvTwinkle 2s ease-in-out infinite;}
.usa-bar .sv-star:nth-child(2){animation-delay:.5s;color:rgba(255,255,255,0.9);}
.usa-bar .sv-star:nth-child(3){animation-delay:1s;}
@keyframes usaSvTwinkle{0%,100%{opacity:0.6}50%{opacity:1;transform:scale(1.4)}}
 
.usa-bar .cta-btn{
  display:flex;align-items:center;gap:10px;
  background:#fff;border-radius:5px;padding:0 18px;height:36px;
  text-decoration:none;transition:transform 0.15s,box-shadow 0.15s;
  position:relative;overflow:hidden;
}
.usa-bar .cta-btn::after{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(0,40,104,0.1),transparent);
  animation:usaBtnSheen 2.5s ease-in-out infinite;
}
@keyframes usaBtnSheen{0%{left:-100%}60%,100%{left:150%}}
.usa-bar .cta-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.3);}
.usa-bar .cta-btn:hover .cta-main{color:#B22234;}
.usa-bar .phone-icon{width:16px;height:16px;flex-shrink:0;}
.usa-bar .cta-inner{display:flex;flex-direction:column;gap:1px;}
.usa-bar .cta-main{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:900;letter-spacing:1.5px;color:#002868;text-transform:uppercase;transition:color 0.15s;line-height:1;}
.usa-bar .cta-num{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:1px;color:#B22234;line-height:1;}
 
/* BOTTOM ANIMATED LINE */
.usa-bar .progress-line{position:absolute;bottom:0;left:0;right:0;height:2px;overflow:hidden;z-index:10;}
.usa-bar .pl-track{
  height:100%;
  background:linear-gradient(90deg,#002868 0%,#002868 33%,#FFFFFF 33%,#FFFFFF 66%,#B22234 66%,#B22234 100%);
  background-size:200% 100%;
  animation:usaPlMove 4s linear infinite;
}
@keyframes usaPlMove{0%{background-position:200% 0}100%{background-position:0% 0}}
 
/* =====================
   RESPONSIVE
   ===================== */
@media(max-width:1100px){
  .usa-bar .offer-section::after{display:none;}
  .usa-bar .timer-section::before{display:none;}
  .usa-bar .timer-section{padding:0 20px;}
  .usa-bar .offer-details{padding:0 16px;}
}
 
@media(max-width:900px){
  .usa-bar .timer-section{display:none;}
}
 
/* =====================
   MOBILE: 2-ROW LAYOUT
   ===================== */
@media(max-width:700px){
 
  /* Switch to vertical stacking */
  .usa-bar{
    flex-direction:column;
    height:auto;
    /* ✅ FIX: overflow visible rakho taake image clip na ho */
    overflow:visible;
  }
 
  /* Hide desktop-only decorative elements */
  .usa-bar .flag-panel,
  .usa-bar .panel-divider,
  .usa-bar .vdivider,
  .usa-bar .stars-vertical,
  .usa-bar .offer-section::after,
  .usa-bar .timer-section::before{
    display:none !important;
  }
 
  /* ── ROW 1: Red — Offer info ── */
  .usa-bar .offer-section{
    width:100%;
    padding:8px 14px;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    position:relative;
  }

  .usa-bar .badge-main{font-size:15px;}
 
  /* Show offer-details inside row 1 visually by making them share the red bg */
  .usa-bar .offer-details{
    background:#B22234;
    padding:8px 14px 8px;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    border-top:none;
    /* ✅ FIX: overflow visible taake image na kaate */
    overflow:visible;
  }

  /* ✅ FIX: Cam image mobile ke liye proper size aur display */
  .usa-bar .cam-icon-wrap{
    display:flex;
    align-items:center;
    overflow:visible;
  }
  .usa-bar .cam-icon-wrap img{
    width:90px !important;
    height:48px !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    object-fit:contain;
    border-radius:2px;
  }

  .usa-bar .offer-txt-top{
    font-size:9px;
    color:rgba(255,255,255,0.7);
  }
  .usa-bar .offer-txt-main{
    font-size:16px;
    color:#FFD700;
  }
  .usa-bar .save-block{
    padding:3px 10px;
    background:rgba(255,215,0,0.18);
    border-color:rgba(255,215,0,0.45);
  }
  .usa-bar .save-lbl{font-size:7px;}
  .usa-bar .save-val{font-size:13px;}
 
  /* ── ROW 2: Navy — Timer + CTA ── */
  .usa-bar .timer-section{
    display:flex !important;
    background:#002868;
    width:100%;
    padding:8px 14px;
    gap:10px;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid rgba(255,255,255,0.12);
    position:relative;
  }
  .usa-bar .ends-block{align-items:flex-start;}
  .usa-bar .ends-lbl{color:rgba(255,255,255,0.45);}
  .usa-bar .ends-val{color:#B22234;}
 
  /* Timer blocks: white text on navy bg */
  .usa-bar .t-block{
    background:rgba(255,255,255,0.1);
    padding:3px 7px;
    min-width:34px;
  }
  .usa-bar .t-num{font-size:18px;color:#fff;}
  .usa-bar .t-lbl{color:rgba(255,255,255,0.45);}
  .usa-bar .t-colon{color:rgba(255,255,255,0.6);font-size:18px;}
 
  /* CTA section: embed inside row 2 */
  .usa-bar .cta-section{
    background:transparent;
    padding:0;
    gap:0;
    flex-shrink:0;
  }
  .usa-bar .cta-btn{
    height:34px;
    padding:0 14px;
    gap:8px;
  }
  .usa-bar .cta-main{font-size:12px;}
  .usa-bar .cta-num{font-size:10px;}
  .usa-bar .phone-icon{width:14px;height:14px;}
}

@media(max-width:700px){
  .usa-bar .desktop-cta{display:none !important;}
  .offer-section{display:none !important;}
}

@media(min-width:701px){
  .usa-bar .timer-section .cta-section{display:none !important;}
}