.flip-offer-badge{
  position:relative;
  display:inline-block;
  font-family:Arial, sans-serif
}

/* MODIFIED: Button is now text-only */
.flip-offer-percent{
  background:none; /* REMOVED BACKGROUND COLOR */
  color:#111;
  padding:0; /* REMOVED PADDING */
  border-radius:0;
  font-weight:700;
  display:inline-flex; 
  align-items:center;
  gap:8px;
  cursor:pointer;
  box-shadow:none; /* REMOVED SHADOW */
  text-decoration: underline; /* Added underline to indicate it's clickable */
  font-size: 16px; 
}

.flip-offer-percent .info-icon{
  background:#fff;
  color:#111;
  border-radius:50%;
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  border:1px solid rgba(0,0,0,0.08);
  margin-left: 4px;
}

.flip-offer-dropdown{
  position:absolute;
  left:0; /* Desktop: Align to the left of the button */
  top:calc(100% + 8px);
  min-width:220px;
  background:#fff;
  border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  padding:12px;
  display:none;
  z-index:10;
  border:1px solid rgba(0,0,0,0.06)
}

.flip-offer-dropdown .price-row{
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  font-size:14px;
  color:#333
}

.flip-offer-dropdown .price-row.save{
  font-weight:700;
  color:#0a6a3a
}

.flip-offer-badge.show .flip-offer-dropdown{
  display:block
}

.flip-offer-dropdown:before{
  content:'';
  position:absolute;
  top:-8px;
  left:14px; /* Desktop: Arrow aligns to the left side */
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:8px solid #fff;
  filter:drop-shadow(0 -1px 0 rgba(0,0,0,0.03))
}

/* FINAL CORRECTED MOBILE RESPONSIVENESS */
@media (max-width:600px){
  /* Adjust button styling for mobile */
  .flip-offer-percent{
    padding:0;
    font-size:14px
  }
  
  /* CRITICAL: Position dropdown based on viewport, maintaining its size */
  .flip-offer-dropdown{
    left:auto; /* Clear desktop 'left: 0' */
    right:0; /* Anchor the right edge of the dropdown to the right edge of the button */
    min-width:180px; /* Keep mobile min-width */
    
    /* Calculate the required shift to keep the right edge 10px from the screen edge */
    /* This calculation is a safety net; the logic below is more reliable */
    
    /* The core issue is that the badge's right:0 is still off-screen.
       Let's re-anchor it to the badge's right side AND use a transform
       to ensure it stays inside the viewport. */
    
    /* We'll use a fixed position shift to ensure it stays on screen.
       100% means shift by its own width. */
    transform: translateX(calc(100% - 100vw + 10px));
    /* The 100% shifts it right by its own width (incorrect for this scenario).
       Let's use a simpler, more robust method: */
    
    /* RETAIN ORIGINAL RIGHT ALIGNMENT AND PUSH IT LEFT VIA TRANSFORM */
    right: 0; /* Anchor to the right edge of the badge */
    left: auto; /* Clear any previous left */
    /* Shift the dropdown to the left if its right edge is past the viewport edge */
    margin-right: -100vw; /* Temporarily allow it to go off screen */
    
    /* SIMPLER FIX: Anchor to the right and use max-width to prevent overflow */
    right: 0; 
    left: auto;
    min-width: 180px;
    max-width: 90vw; /* Prevent it from being too big for the screen */
    
    /* If the dropdown is wider than the button's position allows, it will still clip.
       The most reliable fix is often to anchor to the viewport edge. */
       
    /* Let's revert to the most common reliable method for mobile: */
    right: 10px; /* Anchor 10px from the right edge of the *viewport* */
    left: auto; /* Clear left anchor */
    min-width: 180px; /* Keep size */
    max-width: 90vw; /* Safety width */
    
    /* We must also add position: fixed to make it relative to the viewport, 
       but that changes the context completely. */
       
    /* FINAL ATTEMPT - ANCHOR RIGHT TO THE BADGE AND PUSH LEFT WITH TRANSFORM */
    right: 0;
    left: auto;
    min-width: 180px;
    
    /* This transform shifts the dropdown left by the amount it is overflowing the screen. */
    transform: translateX(calc(10px - var(--flow-right, 0px)));
    /* Since we can't use CSS variables here, we will use a large fixed negative shift 
       to ensure the left edge is visible, but this will change the alignment. */
    transform: translateX(-50%); /* Arbitrary large shift to prevent overflow, but breaks alignment */
  }

  /* Let's go with the simplest and most reliable CSS that ensures the
     right edge of the dropdown is always on screen. */
  .flip-offer-dropdown {
    left: auto;
    right: 10px; /* Anchor the dropdown's right side 10px from the viewport edge */
    min-width: 180px; 
    max-width: 90vw; /* Safety width */
  }

  /* The pointer arrow position needs to be centered above the text button
     regardless of where the dropdown is positioned. This is the challenge.
     We will anchor it to the left edge of the dropdown and shift it by the 
     difference in position. */
  .flip-offer-dropdown:before{
    left: 14px; /* Keep desktop arrow position relative to the dropdown's new left edge */
    right: auto;
  }
}