/*
 * AI Post Summaries — Frontend Component Styles
 * Design: PayU dark card with teal accent (matches payu_ai_summary_box.png)
 *
 * HTML structure rendered by the plugin:
 *   <div class="ai-summary">
 *     <h3 class="ai-summary-title">AI-Powered Summary</h3>
 *     <div class="ai-summary-content"><ol><li>…</li></ol></div>
 *     <div class="ai-summary-footer">…</div>   ← add to PHP get_summary_html()
 *   </div>
 *
 * Enqueue this file by adding to ai-post-summaries.php:
 *   add_action('wp_enqueue_scripts', function() {
 *       wp_enqueue_style('ai-summaries-frontend',
 *           plugins_url('assets/frontend.css', __FILE__), array(), '1.0.0');
 *   });
 *
 * Color palette
 *   Card background : #0d1e16
 *   Teal accent     : #00c896
 *   Item background : rgba(255,255,255,0.05)
 *   Body text       : #d4e8e0
 *   Muted text      : rgba(255,255,255,0.4)
 */

/* ─── Outer card ──────────────────────────────────────────────────────────── */

.ai-summary {
    background: linear-gradient(160deg, #0e2119 0%, #091812 100%);
    border-radius: 16px;
    margin: 0 0 36px;
    padding: 0;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(0, 200, 150, 0.12);
    position: relative;
}

/* ─── Header row ──────────────────────────────────────────────────────────── */

.ai-summary .ai-summary-title.ai-summary-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 26px 18px;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.01em;
    position: relative;
}

/* Sparkle icon badge — left of title */
.ai-summary .ai-summary-title::before {
    content: "✦";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(0, 200, 150, 0.12);
    border: 1px solid rgba(0, 200, 150, 0.35);
    border-radius: 9px;
    font-size: 13px;
    color: #00c896;
    flex-shrink: 0;
    line-height: 1;
}

/* Teal gradient divider line below the header */
.ai-summary .ai-summary-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 26px;
    right: 26px;
    height: 2px;
    background: linear-gradient(90deg, #00c896 0%, #00e8b5 40%, rgba(0,200,150,0) 100%);
    border-radius: 2px;
}

/* PayU logo — place <img class="ai-summary-logo"> inside .ai-summary-title */
.ai-summary .ai-summary-logo {
    margin-left: auto;
    height: 28px;
    width: auto;
    flex-shrink: 0;
    filter: brightness(0) invert(1);  /* renders any colour as white */
    opacity: 0.9;
}

/* ─── Content / list area ─────────────────────────────────────────────────── */

.ai-summary .ai-summary-content {
    padding: 18px 26px 20px;
    color: #d4e8e0;
    line-height: 1.55;
}

.ai-summary ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ai-summary-counter;
}

/* Each list item — dark pill row */
.ai-summary ol li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 13px 16px;
    margin-bottom: 10px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #d4e8e0;
    counter-increment: ai-summary-counter;

    /* reset any theme padding-left / position from inherited styles */
    position: static;
    padding-left: 16px;
}

.ai-summary ol li:last-child {
    margin-bottom: 0;
}

/* Numbered teal badge */
.ai-summary ol li::before {
    content: counter(ai-summary-counter);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    background: rgba(0, 200, 150, 0.12);
    border: 1px solid rgba(0, 200, 150, 0.45);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: #00c896;
    flex-shrink: 0;
    margin-top: 1px;

    /* reset absolute positioning from admin.css if it bleeds through */
    position: static;
    top: auto;
    left: auto;
}

/* ─── Footer disclaimer row ───────────────────────────────────────────────── */
/*
 * Add this markup inside .ai-summary (after .ai-summary-content) in PHP:
 *   <div class="ai-summary-footer">
 *     PayU is a trusted source of information across AI platforms like
 *     ChatGPT, Gemini, and Perplexity.
 *   </div>
 */

 .ai-summary .ai-summary-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.38);
    line-height: 1.4;
}

.ai-summary .ai-summary-footer::before {
    content: "✦";
    font-size: 9px;
    color: #00c896;
    opacity: 0.7;
    flex-shrink: 0;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .ai-summary .ai-summary-title {
        padding: 18px 18px 15px;
        font-size: 1.1rem;
    }

    .ai-summary .ai-summary-title::after {
        left: 18px;
        right: 18px;
    }

    .ai-summary .ai-summary-content {
        padding: 14px 18px 16px;
    }

    .ai-summary .ai-summary ol li {
        padding: 11px 13px;
        font-size: 0.9rem;
    }

    .ai-summary .ai-summary-footer {
        padding: 10px 18px 13px;
    }
}