/* 
 * EMERGENCY UI ENFORCEMENT - VIP TRANSFER GRID CARD 
 * DO NOT OVERRIDE WITHOUT LEAD APPROVAL
 */

/* Layout Variants */
.mhm-transfer-results.rv-transfer-results--grid .mhm-transfer-results__grid {
    display: grid !important;
    grid-template-columns: repeat(var(--columns, 3), 1fr) !important;
    gap: var(--mhm-space-phi-3, 1.3125rem) !important;
}

.mhm-transfer-results.rv-transfer-results--list .mhm-transfer-results__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--mhm-space-phi-2, 0.8125rem) !important;
}

.mhm-transfer-results.rv-transfer-results--list .mhm-transfer-card {
    max-width: 100% !important;
    flex-direction: row !important;
}

.mhm-transfer-results-page .rv-unified-search-results.mhm-transfer-results {
    margin-top: var(--mhm-space-phi-4, 2.125rem) !important;
}

/* Surface width consistency with other shortcode pages */
.mhm-transfer-results-page {
    box-sizing: border-box !important;
    padding-inline: var(--mhm-surface-gutter-desktop, var(--mhm-space-phi-2, 0.8125rem)) !important;
}

/* Card Core Specs */
.rv-unified-search-results .mhm-transfer-card {
    background: #fff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #eee !important;
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
}

.rv-unified-search-results .mhm-transfer-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
}

/* Mandatory Card Header (Image Wrapper) */
.mhm-transfer-card .mhm-card-header {
    position: relative !important;
    height: 220px !important;
    background: #fdfdfd !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

.mhm-transfer-card .mhm-card-header img {
    max-width: 90% !important;
    max-height: 85% !important;
    object-fit: contain !important;
}

/* Category Badge (Positioned over header) */
.mhm-transfer-card .mhm-transfer-card__category {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    background: var(--mhm-primary, #0073aa) !important;
    color: #fff !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    z-index: 5 !important;
}

/* Info Layer */
.mhm-transfer-card .mhm-transfer-card__info {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    flex-grow: 1 !important;
}

.mhm-transfer-card .mhm-transfer-card__title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--mhm-text-primary, #1a1a1a) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Mandatory Flex Pill Grid */
.mhm-transfer-card .mhm-transfer-card__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 10px 0 !important;
}

.mhm-transfer-card .mhm-transfer-card__meta-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f8f9fa !important;
    /* EXACT SPEC */
    padding: 4px 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    color: var(--mhm-text-secondary, #555) !important;
    font-weight: 500 !important;
    border: 1px solid #eee !important;
    white-space: nowrap !important;
}

.mhm-transfer-card .mhm-transfer-card__meta-item svg {
    color: var(--mhm-primary, #0073aa) !important;
    flex-shrink: 0 !important;
}

/* Footer / CTA Area */
.mhm-transfer-card .mhm-transfer-card__footer {
    margin-top: auto !important;
    padding: 16px 20px !important;
    border-top: 1px solid #f0f0f0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
}

.mhm-transfer-card .mhm-transfer-card__price-amount {
    display: block !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--mhm-price-color, #10b981) !important;
    line-height: 1.2 !important;
}

.mhm-transfer-card .mhm-transfer-card__price-period {
    font-size: 11px !important;
    color: #888 !important;
    display: block !important;
    margin-top: 2px !important;
}

.mhm-transfer-card .mhm-transfer-card__btn {
    background: var(--mhm-btn-bg, #0073aa) !important;
    color: var(--mhm-btn-color, #fff) !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.mhm-transfer-card .mhm-transfer-card__btn:hover {
    background: #005a87 !important;
    box-shadow: 0 4px 15px rgba(0, 115, 170, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* List layout: footer should stack price + button vertically on the right */
.mhm-transfer-results.rv-transfer-results--list .mhm-transfer-card .mhm-transfer-card__footer {
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    min-width: 160px !important;
    border-top: none !important;
    border-left: 1px solid #f0f0f0 !important;
    padding: 20px !important;
    justify-content: center !important;
}

/* Mobile Responsivity & Parity */
@media (max-width: 782px) {
    .mhm-transfer-results-page {
        padding-inline: var(--mhm-surface-gutter-mobile, var(--mhm-space-phi-2, 0.8125rem)) !important;
    }

    .mhm-transfer-results.rv-unified-search-results .mhm-transfer-results__grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .rv-unified-search-results .mhm-transfer-card {
        max-width: 100% !important;
    }

    .mhm-transfer-card .mhm-card-header {
        height: 160px !important;
    }

    .mhm-transfer-card .mhm-transfer-card__meta-item {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }
}