/* ═══════════════════════════════════════════
   GM Dashboard Upgrade Prompts
   v6.3.0
   All classes prefixed gm- per brand guidelines
   ═══════════════════════════════════════════ */

/* ── Banner Style ── */
.gm-upgrade-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 16px 20px !important;
    margin: 0 0 20px !important;
    background: linear-gradient(135deg, #EEF1F8 0%, #F3F1F9 100%) !important;
    border: 1px solid #C4C0D8 !important;
    border-left: 4px solid #5B3FB5 !important;
    border-radius: 10px !important;
    font-family: 'DM Sans', sans-serif !important;
}
.gm-upgrade-banner-content {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.gm-upgrade-banner-icon {
    font-size: 24px !important;
    flex-shrink: 0 !important;
}
.gm-upgrade-banner-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.gm-upgrade-banner-text strong {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1A1530 !important;
    line-height: 1.3 !important;
}
.gm-upgrade-banner-text span {
    font-size: 13px !important;
    color: #6B6490 !important;
    line-height: 1.4 !important;
}
.gm-upgrade-banner-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

/* ── Inline Style (compact, one-line) ── */
.gm-upgrade-inline {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    margin: 0 0 16px !important;
    background: #F3F1F9 !important;
    border-radius: 8px !important;
    font-family: 'DM Sans', sans-serif !important;
}
.gm-upgrade-inline-icon {
    font-size: 18px !important;
    flex-shrink: 0 !important;
}
.gm-upgrade-inline-text {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #3D3660 !important;
    flex: 1 !important;
}

/* ── Card Style (prominent, with feature list) ── */
.gm-upgrade-card {
    padding: 28px !important;
    margin: 0 0 24px !important;
    background: #FFFFFF !important;
    border: 1.5px solid #E8E5F0 !important;
    border-radius: 16px !important;
    font-family: 'DM Sans', sans-serif !important;
    position: relative !important;
    overflow: hidden !important;
}
.gm-upgrade-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #5B3FB5, #7C5FD6, #F47458) !important;
}
.gm-upgrade-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}
.gm-upgrade-card-icon {
    font-size: 28px !important;
}
.gm-upgrade-card-badge {
    display: inline-block !important;
    padding: 3px 10px !important;
    background: #EEF1F8 !important;
    color: #5B3FB5 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: 20px !important;
    font-family: 'JetBrains Mono', monospace !important;
}
.gm-upgrade-card-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1A1530 !important;
    margin: 0 0 6px !important;
    line-height: 1.3 !important;
}
.gm-upgrade-card-desc {
    font-size: 14px !important;
    color: #6B6490 !important;
    line-height: 1.5 !important;
    margin: 0 0 16px !important;
}
.gm-upgrade-card-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}
.gm-upgrade-card-features li {
    font-size: 13px !important;
    color: #3D3660 !important;
    padding-left: 0 !important;
    line-height: 1.4 !important;
}
.gm-upgrade-card-footer {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

/* ── Gate Style (locked feature overlay) ── */
.gm-upgrade-gate {
    text-align: center !important;
    padding: 48px 24px !important;
    margin: 0 0 20px !important;
    background: linear-gradient(155deg, rgba(45,27,105,0.04) 0%, rgba(91,63,181,0.06) 100%) !important;
    border: 2px dashed #C4C0D8 !important;
    border-radius: 16px !important;
    font-family: 'DM Sans', sans-serif !important;
}
.gm-upgrade-gate-icon {
    font-size: 40px !important;
    margin-bottom: 12px !important;
    opacity: 0.7 !important;
}
.gm-upgrade-gate-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1A1530 !important;
    margin: 0 0 8px !important;
}
.gm-upgrade-gate-desc {
    font-size: 14px !important;
    color: #6B6490 !important;
    margin: 0 0 20px !important;
}
.gm-upgrade-gate-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
}
.gm-upgrade-gate-compare {
    font-size: 13px !important;
    color: #5B3FB5 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
.gm-upgrade-gate-compare:hover {
    text-decoration: underline !important;
}

/* ── Shared button styles ── */
.gm-btn-sm {
    padding: 8px 18px !important;
    font-size: 13px !important;
}
.gm-btn-xs {
    padding: 5px 14px !important;
    font-size: 12px !important;
}
.gm-upgrade-link {
    font-size: 13px !important;
    color: #5B3FB5 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}
.gm-upgrade-link:hover {
    text-decoration: underline !important;
}

/* ── Sticky bottom bar (overview only, for free tier) ── */
.gm-upgrade-sticky {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 14px 20px !important;
    background: linear-gradient(155deg, #2D1B69 0%, #3A2280 30%, #5B3FB5 65%, #7C5FD6 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    border-radius: 0 0 12px 12px !important;
    margin: 20px -1px -1px !important;
    font-family: 'DM Sans', sans-serif !important;
    z-index: 10 !important;
}
.gm-upgrade-sticky-text {
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.gm-upgrade-sticky-text strong {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}
.gm-upgrade-sticky .gm-btn-primary {
    background: #F47458 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 10px 22px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.gm-upgrade-sticky .gm-btn-primary:hover {
    background: #E55D40 !important;
    transform: translateY(-1px) !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .gm-upgrade-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .gm-upgrade-banner-actions {
        width: 100% !important;
    }
    .gm-upgrade-banner-actions .gm-btn {
        flex: 1 !important;
        text-align: center !important;
    }
    .gm-upgrade-card-features {
        grid-template-columns: 1fr !important;
    }
    .gm-upgrade-card-footer {
        flex-direction: column !important;
    }
    .gm-upgrade-card-footer .gm-btn {
        width: 100% !important;
        text-align: center !important;
    }
    .gm-upgrade-sticky {
        flex-direction: column !important;
        text-align: center !important;
    }
}