﻿/* Container of the card including image */
.price-card-container {
    width: 100%;
    max-width: 400px; /* optional */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    font-family: 'Inter', sans-serif;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
}

/* Top image: full width, no padding */
.price-card-image {
    position: relative;
    width: 100%;
    height: 12rem; /* ~192px */
    overflow: hidden;
}

    .price-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Content area (name, description, price) with padding */
.price-card-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    /* Name */
    .price-card-content h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #0f172a;
    }

    /* Description */
    .price-card-content p {
        margin: 0;
        font-size: 14px;
        color: #6b7280; /* muted */
        flex-grow: 1;
    }

/* Price card footer */
.price-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid #e2e8f0;
    padding-top: 16px;
    margin-top: 8px;
}

    /* Left side: Price & Label */
    .price-card .price-info {
        display: flex;
        flex-direction: column;
    }

        /* Label "From" */
        .price-card .price-info .label {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #94a3b8; /* slate-400 */
            margin: 0 0 2px 0;
        }

        /* Price €149.00 */
        .price-card .price-info .price {
            font-size: 24px;
            font-weight: 700;
            color: #0f172a; /* slate-900 */
            margin: 0;
        }

            /* Suffix "net" */
            .price-card .price-info .price .net {
                font-size: 14px;
                font-weight: 400;
                color: #94a3b8; /* slate-400 */
                margin-left: 4px;
            }

    /* Right side: Icon Button */
    .price-card .price-action {
        width: 40px;
        height: 40px;
        border-radius: 9999px; /* full circle */
        background-color: #0f172a; /* slate-900 */
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease;
        cursor: pointer;
        flex-shrink: 0;
    }

        /* Hover effect */
        .price-card .price-action:hover {
            background-color: #2563eb; /* blue-600 */
        }

        /* SVG icon inside the button */
        .price-card .price-action svg {
            width: 16px;
            height: 16px;
            stroke: #ffffff; /* white */
        }
