.offers-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    padding: 2rem;
}

.offers-container h1 {
    font-size: 2.5rem;
    color: #b3a4ff;
    margin-bottom: 1rem;
}

.offers-container p {
    font-size: 1.2rem;
    color: #ddd;
    margin-bottom: 2rem;
}

.offers-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    gap: 1.5rem;
}

.tab-btn {
    background-color: #292952;
    color: #fff;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.tab-btn.active, .tab-btn:hover {
    background-color: #b3a4ff;
    color: #1c1c3c;
}

.search-bar {
    display: flex;
    justify-content: center; /* Center align the search bar */
    margin-bottom: 2rem;
    position: relative; /* For adding the search icon */
}

.search-bar input {
    width: 300px;
    padding: 0.8rem;
    padding-left: 2.5rem; /* Add space for the search icon */
    border-radius: 30px; /* Rounded edges */
    border: 1px solid #444; /* Darker border for better contrast */
    font-size: 1rem;
    color: #fff; /* Text color */
    background-color: #292952; /* Dark background */
    text-align: left; /* Align text to the left */
}

.search-bar input::placeholder {
    color: #aaa; /* Placeholder color */
    font-style: italic; /* Make placeholder text italic */
}

.search-bar::before {
    content: '🔍'; /* Unicode for search icon */
    position: absolute;
    left: calc(50% - -130px + 10px); /* Adjusted placement for inside input */
    top: 50%;
    transform: translateY(-50%);
    color: #aaa; /* Icon color */
    font-size: 1.2rem; /* Icon size */
    padding-top: -50px;
    padding-bottom: 15px;
}

.offers-table {
    width: 100%;
    border-collapse: collapse; /* Ensures borders collapse properly */
    margin: 0 auto;
    color: #fff;
}

.offers-table th,
.offers-table td {
    padding: 1rem; /* Uniform padding for all table cells */
    border: 0; /* Remove all borders */
    text-align: center;
}

.offers-table th {
    background-color: #292952;
    font-weight: bold;
}

.offers-table tr {
    border-bottom: 1px solid #444; /* Add a single border to the entire row */
}

.offers-table tr:last-child {
    border-bottom: none; /* Remove border for the last row */
}

.offers-table td:first-child {
    display: flex;
    align-items: center; /* Vertically align logo and text */
    gap: 0.5rem; /* Space between logo and text */
    text-align: left;
    padding-left: 1rem; /* Padding for left alignment */
    background-color: transparent; /* Ensure no background is applied */
    border-radius: 0; /* Remove rounded corners */
    overflow: hidden; /* Prevent overflow issues */
}

.offers-table td:first-child img {
    width: 40px; /* Logo size */
    height: auto;
    border-radius: 5px; /* Optional: rounded corners for the logo itself */
}

.offers-table td:nth-child(2) {
    text-align: center; /* Align discount text to the left */
}

.offers-table td:nth-child(3),
.offers-table td:nth-child(4) {
    text-align: center; /* Center align promo code and buy buttons */
    width: 15%; /* Adjust width for uniform columns */
}

.promo-code-btn, .buy-btn {
    background: linear-gradient(115deg, #ff00ff, #800080);
    color: #fff;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-decoration: none; /* ensure no underline if it's an anchor */
}

.promo-code-btn:hover, .buy-btn:hover {
    background: linear-gradient(100deg, #800080, #ff00ff);
}

/* If .buy-btn is an <a> link, remove underline in all states */
a.buy-btn, a.buy-btn:hover, a.buy-btn:focus, a.buy-btn:active {
    text-decoration: none;
}