/* Existing styles for the member benefits grid */
.member-benefits-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Adjust for responsiveness */
    gap: 20px;
}

/* Styles for each member benefit card */
.member-benefit-card {
    display: flex;
    flex-direction: row;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.08); /* Light and soft shadows */
    padding: 15px;
    position: relative; /* Ensures absolute positioning of the banner */
    background-color: #fff; /* Ensure it's on a clean, white background */
}

.member-benefit-card .dashicons{
    vertical-align: text-top;
}

/* Gold banner styling */
.benefit-banner {
    position: absolute; /* Position the banner on top-right */
    top: 10px; /* Space from the top of the container */
    right: 10px; /* Space from the right edge */
    background-color: #FFA907;
    color:#8d5b00;
    font-size: 16px; /* Text size */
    padding: 8px 15px; /* Padding inside the banner */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Drop shadow to make it appear elevated */
    font-weight: bold; /* Make the text bold */
    z-index: 10; /* Ensure the banner stays on top */
}

/* Styles for the benefit image - Fixed square size */
.member-benefit-image {
    width: 150px; /* Fixed width */
    height: 150px; /* Fixed height */
    overflow: hidden; /* Hide overflowed image */
    margin-right: 20px; /* Space between image and text */
}

/* Ensure the image fills the container perfectly */
.member-benefit-image img {
    width: 100% !important; /* Image width fills the container */
    height: 100% !important; /* Image height fills the container */
    object-fit: cover; /* Maintain aspect ratio and cover the area */
}

/* Styles for the content area */
.member-benefit-content {
    flex: 1;
}

.member-benefit-content h3 {
    font-size: 1.5em;
    margin: 0;
}

.member-benefit-content p {
    font-size: 1em;
    color: #555;
}

/* New gray box with lock icon and message */
.login-message {
    display: flex;
    align-items: center;
    background-color: #f0f0f0; /* Light gray background */
    padding: 10px 15px;
    margin-top: 10px;
    font-size: 16px;
}

/* Style for the lock icon */
.login-message .lock-icon {
    font-size: 20px; /* Icon size */
    margin-right: 10px; /* Space between the icon and the text */
}

/* Style for the login message text */
.login-message .login-text {
    color: #333; /* Dark text for the message */
}

/* Existing styles for the locked section */
.benefit-locked-section {
    margin-top: 15px;
}

.member-benefit-card .benefit-cta-button {
    background-color: #EC1E27;
    color: #8C1015;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.member-benefit-card .benefit-cta-button:hover {
    background-color: #b7050e;
}

/* Styles for locked benefit message */
.locked-benefit-message {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #888;
}

.locked-benefit-message i {
    margin-right: 10px;
    color: #888;
}

.member-benefit-content .member-benefit-small-text {
    color: #999 !important;
    font-size: 12px !important;
}

.member-benefit-content .member-benefit-details {
    color: #999 !important;
    font-style: italic;
}