/* ==============================
   1. TAB WRAPPER & STYLES
   ============================== */

/* Container for the two tabs */
.tab-titles {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 50px;
    overflow: hidden;
  }
  
  /* Individual tabs */
  .tab-title {
    display: inline-block;
    cursor: pointer;
    padding: 12px 25px;
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 0; /* We rely on the parent container's radius to create a uniform pill shape */
  }
  
  /* Active/Selected tab: One Time Purchase (gold) */
  .tab-title:first-of-type.active {
    background-color: #FFD85C;  /* Gold-ish background */
  }
  
  /* Inactive tab: or you can swap these if you want the first tab to be green when not active */
  .tab-title:first-of-type {
    background-color: #D8D8D8;  /* Light grey when not active */
    color: #444;
  }
  
  /* Active/Selected tab: Subscribe and Save (green) */
  .tab-title:nth-of-type(2).active {
    background-color: #5BB85C;  /* Green background */
  }
  
  /* Inactive tab: second one if not selected */
  .tab-title:nth-of-type(2) {
    background-color: #B0B0B0;  /* Light grey for second tab when not active */
    color: #444;
  }
  
  /* Just a convenience so the chosen tab stands out with a white font color */
  .tab-title.active {
    color: #fff;
  }
  
  /* Tab content panels (hide by default) */
  .tab-content {
    display: none;
    margin-top: 1.5rem;
  }
  
  /* Show the active panel */
  .tab-content.active {
    display: block;
  }
  
  /* ==============================
     2. VARIATIONS WRAPPER
     ============================== */
  
  .variations-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem; /* Space between boxes */
    margin-top: 1rem;
  }
  
  /* ==============================
     3. VARIATION BOXES
     ============================== */
  
  /* Each box (default state) */
  .variation-box {
    flex: 1 1 200px;          /* Automatic resizing to at least 200px wide */
    border: 2px solid #ccc;   /* Grey border by default */
    border-radius: 8px;
    padding: 20px 15px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
    background-color: #FFFDF3; /* Very light off-white to resemble the screenshot’s background */
  }
  
  /* On hover, show a slightly darker border */
  .variation-box:hover {
    border-color: #aaa;
  }
  
  /* Selected box gets a green border */
  .variation-box.selected {
    border-color: #3C9A33;      /* Green border */
    box-shadow: 0 2px 8px rgba(0, 128, 0, 0.15);  /* Subtle shadow */
  }
  
  /* Title: e.g., "1 Bottle" */
  .variation-box .variation-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.5rem;
  }
  
  /* The "days supply" pill shape */
  .variation-box .variation-supply-info {
    display: inline-block;
    background-color: #FFD85C; /* Gold-ish background */
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.5rem;
  }
  
  /* The "xxx capsules" text */
  .variation-box .variation-capsule-count {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 0.8rem;
  }
  
  /* Divider inside the box */
  .variation-box hr {
    width: 80%;
    margin: 10px auto;
    border: none;
    border-top: 1px solid #ddd;
  }
  
  /* Price text at the bottom of the box */
  .variation-box .variation-price {
    color: #3C9A33;   /* Green */
    font-size: 1.3rem;
    font-weight: bold;
    margin-top: 0.5rem;
  }
  .variations-wrapper {
    display: flex
;
    flex-wrap: inherit;}

.variation-box .variation-daily-price {
    font-size: 0.95rem;
    color: #ffffff;
    font-style: italic;
   
    background: #5a5a5a;
    border-radius: 100px;
    margin-bottom: -51px;
    padding-top: 0px;
    margin-top: 16px;
}