.trial-banner,
.subscription-expiry-banner{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2rem;
overflow: hidden;
padding: 12px 18px;
border-radius: 12px;
background: linear-gradient(135deg, #0d6b68, #12857f);
color: #fff;
box-shadow: 0 2px 10px rgba(13,107,104,.25);
  }
  .trial-banner--urgent,
  .subscription-expiry-banner--urgent{
background: linear-gradient(135deg, #a8560a, #c4711b);
box-shadow: 0 2px 10px rgba(168, 86, 10, .25);
  }
  /* --- Section One --- */
  .banner-section-one{
display: flex;
align-items: center;
justify-items: center;
gap: 1rem;
  }
  .banner-section-one i{
font-size: 20px;
opacity: 0.9;
flex-shrink: 0;
  }
  .banner-section-one .banner-text{
min-width: 180px;
flex: 1;
display: flex;
flex-direction: column;
line-height: 1.35;
  }
  .banner-section-one .banner-text .sub{
font-size: 13px;
opacity: 0.85;
  }

  /* --- Section Two --- */
  .banner-section-two{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-items: center;
gap: 1rem;
  }
  .banner-section-two .counter-container{
display: flex;
align-items: center;
justify-items: start;
gap: 0.5rem;
flex-shrink: 0;
background: rgba(255, 255, 255, .16);
padding: 6px 14px;
border-radius: 100px;
  }
  .banner-section-two .counter-container .counter_number{
font-size: 20px; 
font-weight: 700; 
font-variant-numeric: tabular-nums;
  }
  .banner-section-two .counter-container .counter-days{
font-size: 12.5px; 
opacity: 0.9;
  }

  /* -- cta -- */
  .banner-cta{
flex-shrink: 0;
background: #fff;
color: #0d6b68;
font-weight: 600;
font-size: 14px;
padding: 8px 18px;
border-radius: 100px;
text-decoration: none;
white-space: nowrap;
  }
  .banner-cta:hover{
background: rgba(255, 255, 255, .16);
color: #fff;
  }

.subscription-expiry-banner { margin-bottom: 1rem; }
.subscription-countdown {
  display: flex;
  gap: .75rem;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .16);
}
.subscription-countdown[hidden] { display: none; }
.subscription-countdown > span { display: flex; flex-direction: column; text-align: center; min-width: 2.5rem; }
.subscription-countdown strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.subscription-countdown small { font-size: 12px; }
@media (max-width: 575px) {
  .subscription-expiry-banner { gap: 1rem; padding: 12px; }
  .subscription-expiry-banner .banner-section-two { width: 100%; }
  .subscription-countdown { gap: .5rem; padding: 8px; }
}