/* .wave-topbar {
    position: relative;
    background: linear-gradient(135deg,#2E7D32,#66bb6a);
    color: #fff;
    padding: 10px 20px 70px;
    overflow: hidden;
}

.wave-topbar .wave-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.wave-topbar svg {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 90px;
    z-index: 1;
} */

.wave-topbar {
    position: relative;
    background: linear-gradient(135deg,#2E7D32,#66bb6a);
    color: #fff;
    padding: 25px 20px 50px;

    /* SVG wave as background */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z' fill='%23ffffff' opacity='0.6'/%3E%3Cpath d='M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z' fill='%23ffffff' opacity='0.6'/%3E%3Cpath d='M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716H42.401L43.415,98.342z' fill='%23ffffff' opacity='0.7'/%3E%3Cpath d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z' fill='%23ffffff'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 80px;
}


#userResult, #storeResult{
    font-weight: bold;
    color: #2E7D32;
}

#storeCode, #userCode {
  text-transform: uppercase;
}

/* Default (inactive tab) */
#forgotCodeModal .modal-body {
  border: 1px solid #e6e6e6;
  padding: 18px;
  margin: 12px;
  border-radius: 14px;
  background: #fff;

  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 10px 25px rgba(0, 0, 0, 0.08);
}

#forgotCodeModal .modal-body:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  transition: 0.25s ease;
}

#codeTabs .nav-link {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #2E7D32;
  margin-right: 5px;
  border-radius: 25px;
}

/* Active tab */
#codeTabs .nav-link.active {
  background-color: #2E7D32;
  color: #ffffff;
  border: 1px solid #2E7D32;
}

/* Hover effect for inactive tabs */
#codeTabs .nav-link:not(.active):hover {
  background-color: #ffffff;
  color: #2E7D32;
  border: 1px solid #2E7D32;
}

/* Optional: remove default Bootstrap tab border-bottom line */
#codeTabs {
  border-bottom: none;
}



/* 2. Reusable HTML block (use everywhere) */

/* <div class="wave-topbar">

    <div class="wave-content">
        <h4 class="m-0">Your Title Here</h4>
    </div>

    <!-- SAME SVG -->
    <svg viewBox="0 0 300 100" preserveAspectRatio="none">
        <path d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z"
              fill="#FFFFFF" opacity="0.6"></path>

        <path d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z"
              fill="#FFFFFF" opacity="0.6"></path>

        <path d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716H42.401L43.415,98.342z"
              fill="#FFFFFF" opacity="0.7"></path>

        <path d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z"
              fill="#FFFFFF"></path>
    </svg>

</div> */

/* ✅ 3. Use it everywhere
🔹 Login page */

/* <div class="col-md-6 p-0 bg-white">
    <div class="wave-topbar">
        <div class="wave-content">
            <h4>Login</h4>
        </div>
        <!-- SVG here -->
    </div>

    <div class="p-4">
        <!-- form -->
    </div>
</div> */

/* Modal header*/
/* <div class="modal-header p-0 border-0">
    <div class="wave-topbar w-100">
        <div class="wave-content">
            <h5>Register for Free Trial</h5>
        </div>
        <!-- SVG -->
    </div>
</div> */


/* 🔹 Card header */

/* <div class="card">
    <div class="wave-topbar">
        <div class="wave-content">
            <h5>Card Title</h5>
        </div>
        <!-- SVG -->
    </div>
    <div class="card-body">
        Content
    </div>
</div> */

/* 🔹 Navbar (optional clean version) */

/* <div class="wave-topbar" style="padding-bottom:50px;">
    <div class="wave-content d-flex justify-content-between align-items-center">
        <h5 class="m-0">Medisto</h5>
        <div>
            <button class="btn btn-light btn-sm">Login</button>
        </div>
    </div>
    <!-- SVG -->
</div> */