/*
 * Grid for the offer cards
 */
.promotions-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to one column */
    gap: 2rem; /* Equivalent to gap-8 */
    margin-top: 3rem;
}

/* Media query for medium screens (md) */
@media (min-width: 768px) {
    .promotions-grid {
        grid-template-columns: repeat(3, 1fr); /* Equivalent to md:grid-cols-3 */
    }
}

/*
 * Styles for each individual offer card
 */
.offer-card {
    background-color: rgba(255, 255, 255, 0.1); /* Equivalent to bg-white/10 */
    backdrop-filter: blur(4px); /* Equivalent to backdrop-blur-sm */
    border-radius: 0.75rem; /* Equivalent to rounded-xl */
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Equivalent to transition-all duration-300 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Equivalent to border border-white/20 */
}

    .offer-card:hover {
        background-color: rgba(255, 255, 255, 0.15); /* Equivalent to hover:bg-white/15 */
    }

.card-content-wrapper {
    position: relative;
    padding: 1rem; /* Equivalent to p-4 */
}

.card-header {
    display: flex;
    align-items: flex-start; /* Equivalent to items-start */
    justify-content: space-between; /* Equivalent to justify-between */
    margin-bottom: 1rem; /* Equivalent to mb-4 */
}

.icon-wrapper {
    background-color: var(--daikin-blue); /* Equivalent to bg-daikin-blue */
    border-radius: 0.5rem; /* Equivalent to rounded-lg */
    padding: 0.5rem; /* Equivalent to p-2 */
}

    .icon-wrapper .icon {
        width: 1.5rem; /* Equivalent to w-6 */
        height: 1.5rem; /* Equivalent to h-6 */
        float: left;
    }

.savings-tag {
    background-color: var(--flamingo); /* Equivalent to bg-green-500 */
    color: #fff;
    padding: 0.25rem 0.75rem; /* Equivalent to px-3 py-1 */
    border-radius: 9999px; /* Equivalent to rounded-full */
    font-size: 0.875rem; /* Equivalent to text-sm */
    font-weight: 500; /* Equivalent to font-medium */
}

.product-image-container {
    background-color: #fff;
    border-radius: 0.5rem; /* Equivalent to rounded-lg */
    padding: 1rem; /* Equivalent to p-4 */
    margin-bottom: 1rem; /* Equivalent to mb-4 */
}

.product-image {
    width: 100%;
    height: 12rem; /* Equivalent to h-48 (48 * 0.25rem = 12rem) */
    object-fit: contain; /* Equivalent to object-contain */
}

.product-model {
    font-size: 1.125rem; /* Equivalent to text-lg */
    font-weight: 600; /* Equivalent to font-semibold */
    margin-bottom: 0.5rem; /* Equivalent to mb-2 */
    color: var(--white)
}

.offer-description {
    color: #bfdbfe; /* Equivalent to text-blue-100 */
    margin-bottom: 1rem; /* Equivalent to mb-4 */
}

.validity-info {
    display: flex;
    align-items: center;
    font-size: 0.875rem; /* Equivalent to text-sm */
    color: #93c5fd; /* Equivalent to text-blue-200 */
    margin-bottom: 1rem; /* Equivalent to mb-4 */
}

.validity-icon {
    width: 1rem; /* Equivalent to w-4 */
    height: 1rem; /* Equivalent to h-4 */
    margin-right: 0.5rem; /* Equivalent to mr-2 */
}

.offer-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.learn-more-button {
    width: 100%;
    /* Using standard CSS for Button variant="outline" */
    border: 1px solid rgba(255, 255, 255, 0.5); /* Equivalent to border-white/50 (adjust opacity as needed) */
    background-color: var(--white);
    color: #020617; /* Equivalent to text-slate-950 */
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.learn-more-button:hover {
    background-color: #fff; /* Equivalent to hover:bg-white */
}

.group .learn-more-button .icon {
    margin-left: 0.5rem;
    transition: all 0.3s ease;
}
/* Group hover effect on button icon */
.group:hover .learn-more-button .icon {
    transform: translateX(0.25rem); /* Equivalent to group-hover:translate-x-1 */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* transition-transform */
}

.validity-info .icon {
    margin-right: 0.5rem;
}