/* frontend/css/card.css */

.card {
    background: linear-gradient(135deg, rgba(18, 30, 50, 0.6) 0%, rgba(8, 13, 22, 0.85) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 24px !important;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    padding: 20px !important;
    color: #ffffff !important;
    width: 100%;
    max-width: 380px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.card-header {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #f1f5f9 !important;
    letter-spacing: -0.2px;
}

.card-image-wrap {
    width: 100%;
    border-radius: 16px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(0, 0, 0, 0.2);
}

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

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px !important;
    color: #94a3b8 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 12px !important;
    margin-top: 2px;
}