/* ============================================
   VIMANIA V4 — Deal Card Component
   Data-first layout. No images. Price dominant.
   ============================================ */

.deals-grid,
.offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

/* ============ DEAL CARD ============ */
.deal-card,
.offer-card {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.06);
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
    overflow: hidden;
}

.deal-card:hover,
.offer-card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 8px 30px rgba(0,0,0,0.11), 0 2px 8px rgba(0,0,0,0.06);
    transform: translateY(-4px);
}

/* ---- Destination photo header ---- */
.deal-photo {
    height: 130px;
    background-size: cover;
    background-position: center;
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    position: relative;
    overflow: hidden;
}

.deal-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.06) 0%,
        rgba(0,0,0,0.62) 100%
    );
}

.deal-photo-savings {
    position: absolute;
    bottom: var(--space-3);
    right: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 800;
    color: white;
    background: #059669;
    padding: 1px var(--space-3);
    border-radius: var(--radius-full);
    z-index: 1;
    letter-spacing: -0.03em;
    box-shadow: 0 2px 10px rgba(5, 150, 105, 0.55);
}

.deal-photo-chollo {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    font-size: 10px;
    font-weight: 800;
    color: white;
    background: #DC2626;
    padding: 3px var(--space-3);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(220,38,38,0.45);
}

/* ---- Featured card — first in grid, spans 2 columns ---- */
.deal-card.deal-featured {
    grid-column: span 2;
}

.deal-card.deal-featured .deal-photo {
    height: 200px;
}

/* Tier glow effects */
.deal-card.tier-exceptional {
    border-color: rgba(16, 185, 129, 0.22);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(16,185,129,0.09);
}
.deal-card.tier-exceptional:hover {
    box-shadow: 0 8px 30px rgba(16,185,129,0.16), 0 2px 8px rgba(0,0,0,0.06);
}

.deal-card.deal-hot,
.deal-card.tier-great {
    border-color: rgba(234, 88, 12, 0.22);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(234,88,12,0.07);
}
.deal-card.deal-hot:hover,
.deal-card.tier-great:hover {
    box-shadow: 0 8px 30px rgba(234,88,12,0.14), 0 2px 8px rgba(0,0,0,0.06);
}

/* Hot deal variant (legacy chollo class) */
.offer-card.chollo {
    border-color: rgba(234, 88, 12, 0.3);
}

/* ---- Header: Route + Score ---- */
.deal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.deal-route {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.deal-iata {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

.deal-connector {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--accent);
    min-width: 56px;
}

.deal-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.deal-plane-icon {
    flex-shrink: 0;
}

.deal-score {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(234, 88, 12, 0.2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    min-width: 36px;
    text-align: center;
    line-height: 1.3;
}

/* ---- City names ---- */
.deal-cities {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

/* ---- Metadata row ---- */
.deal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.deal-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.deal-meta-item svg {
    opacity: 0.7;
}

/* ---- Verification Badge V4 ---- */
.deal-verified {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.deal-verified--confirmed,
.offer-verified.verified-confirmed {
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.deal-verified--better,
.offer-verified.verified-better {
    background: var(--verified-soft);
    color: var(--verified);
    border: 1px solid rgba(6, 182, 212, 0.2);
}

.deal-verified--mismatch,
.offer-verified.verified-mismatch {
    background: var(--warning-soft);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* ---- Footer: Price + CTA ---- */
.deal-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    gap: var(--space-3);
}

.deal-price {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

/* Deal cards with exceptional tier show price in green */
.deal-card.tier-exceptional .deal-price {
    color: var(--success);
}

.deal-price-currency {
    font-size: var(--text-lg);
    opacity: 0.75;
    vertical-align: super;
}

.deal-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--gradient-accent);
    color: white;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 4px 16px var(--accent-glow);
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.deal-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px var(--accent-glow);
}

/* ============ SCORE TIERS ============ */
/* Exceptional (80-100): Green */
.deal-card.tier-exceptional {
    border-color: rgba(22, 163, 74, 0.2);
}
.deal-card.tier-exceptional .deal-score {
    color: var(--score-exceptional);
    background: var(--score-exceptional-bg);
    border: 1px solid rgba(22, 163, 74, 0.2);
}

/* Great Deal (60-79): Deep orange */
.deal-card.tier-great {
    border-color: rgba(234, 88, 12, 0.2);
}
.deal-card.tier-great .deal-score {
    color: var(--score-great);
    background: var(--score-great-bg);
    border: 1px solid rgba(234, 88, 12, 0.2);
}

/* Good Price (40-59): Amber/yellow */
.deal-card.tier-good .deal-score {
    color: var(--score-good);
    background: var(--score-good-bg);
    border: 1px solid rgba(202, 138, 4, 0.2);
}

/* Fair (0-39): Gray */
.deal-card.tier-fair .deal-score {
    color: var(--score-fair);
    background: var(--score-fair-bg);
    border: 1px solid var(--border-default);
}

/* Score badge icon + number layout */
.deal-score {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.deal-score-label {
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: capitalize;
}

/* ---- Price Context: Savings Badge ---- */
.deal-price-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.deal-savings {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--success);
    background: var(--success-soft);
    border: 1px solid rgba(22, 163, 74, 0.2);
    border-radius: var(--radius-full);
    padding: 2px var(--space-2);
    line-height: 1.4;
    width: fit-content;
}

.deal-savings svg {
    opacity: 0.8;
}

/* ============ LEGACY COMPAT (old offer-* classes) ============ */
.offer-image {
    height: 140px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) 0;
    margin-bottom: var(--space-4);
}

.offer-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bg-surface) 0%, transparent 60%);
}

.offer-badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: var(--bg-surface);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--accent);
    z-index: 5;
}

.offer-chollo-badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background: var(--gradient-danger);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: 700;
    color: white;
    z-index: 5;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.offer-body {
    /* padding handled by card padding now */
}

.offer-route {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.offer-code {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.offer-arrow {
    color: var(--accent);
    font-size: var(--text-sm);
}

.offer-names {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.offer-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.offer-detail {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.offer-detail svg {
    opacity: 0.7;
}

.offer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.offer-price {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.offer-btn {
    padding: var(--space-2) var(--space-4);
    background: var(--accent-soft);
    border: 1px solid rgba(234, 88, 12, 0.3);
    color: var(--accent);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--duration-fast);
    text-decoration: none;
}

.offer-btn:hover {
    background: var(--accent);
    color: white;
}

.offer-btn.book-btn {
    background: var(--gradient-accent);
    border: none;
    color: white;
    padding: var(--space-2) var(--space-5);
    box-shadow: 0 4px 16px var(--accent-glow);
}

.offer-btn.book-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px var(--accent-glow);
}

/* Legacy verification badge compat */
.offer-verified {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.offer-verified-icon {
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
}

.offer-verified-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 640px) {
    .deals-grid,
    .offers-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .deal-card,
    .offer-card {
        padding: var(--space-4);
    }

    .deal-iata,
    .offer-code {
        font-size: var(--text-lg);
    }

    .deal-price,
    .offer-price {
        font-size: var(--text-2xl);
    }
}