/**
 * Public-facing CSS for AI Match Predictor Plugin
 * Final styles with Optimized Mobile Tables (Fit-to-Screen)
 */

/* --- Modern Filter Bar Styles --- */
.amp-filter-wrapper { margin-bottom: 40px; padding: 10px 0; position: relative; }
.amp-filter-bar { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; align-items: center; }
.amp-select-wrapper { position: relative; display: inline-block; min-width: 200px; }

.amp-filter-bar select {
    width: 100%; appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-color: #ffffff; border: 2px solid #e9ecef; border-radius: 50px;
    padding: 14px 45px 14px 25px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px; font-weight: 700; color: #1a0a3c; cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02); transition: all 0.2s ease-in-out;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231a0a3c%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat; background-position: right 20px center; background-size: 12px;
}
.amp-filter-bar select:hover { border-color: #1a0a3c; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(26, 10, 60, 0.1); }
.amp-filter-bar select:focus { outline: none; border-color: #ff00f7; box-shadow: 0 0 0 4px rgba(255, 0, 247, 0.15); }
.amp-no-results { text-align: center; padding: 60px; font-size: 18px; font-weight: 600; color: #777; background: #f9f9f9; border-radius: 16px; border: 2px dashed #e0e0e0; width: 100%; grid-column: 1 / -1; }

/* --- Prediction Feed Grid & Card Styles --- */
.amp-prediction-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.amp-prediction-card { background: #ffffff; border: 1px solid #e9ecef; border-radius: 16px; padding: 25px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 15px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.amp-prediction-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); }
.amp-hot-banner { position: absolute; top: 12px; right: -32px; background-color: #dc3545; color: white; padding: 5px 35px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; transform: rotate(45deg); box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.amp-card-header { text-align: center; color: #777; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.amp-card-league { display: block; color: #1a0a3c; margin-top: 5px; font-weight: 700; }
.amp-card-teams { display: flex; justify-content: space-between; align-items: center; text-align: center; padding: 10px 0; }
.amp-team { display: flex; align-items: center; gap: 12px; width: 45%; }
.amp-team-home { justify-content: flex-end; text-align: right; }
.amp-team-away { justify-content: flex-start; text-align: left; }
.amp-team-name { font-weight: 700; font-size: 16px; color: #1a0a3c; line-height: 1.2; }
.amp-team-logo { height: 36px; width: 36px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
.amp-team-separator { font-weight: 700; color: #ccc; font-size: 18px; }
.amp-card-prediction { background: #f8f9fa; border-radius: 12px; padding: 15px; text-align: center; border: 1px solid #f1f1f1; }
.amp-prediction-title { display: block; font-size: 12px; color: #777; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 5px; }
.amp-prediction-text { display: block; font-size: 20px; font-weight: 800; color: #1a0a3c; margin: 0 0 8px 0; text-transform: capitalize; }
.amp-prediction-detail-link { font-size: 13px; text-decoration: none; color: #ff00f7; font-weight: 700; transition: color 0.2s; }
.amp-prediction-detail-link:hover { color: #d600cf; text-decoration: underline; }
.amp-card-cta-button { background: linear-gradient(135deg, #ffc107 0%, #ffdb4d 100%); color: #1a0a3c; padding: 14px 25px; border-radius: 50px; text-decoration: none; font-weight: 800; font-size: 16px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px; border: none; box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4); transition: all 0.2s ease-in-out; text-transform: uppercase; letter-spacing: 0.5px; }
.amp-card-cta-button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 193, 7, 0.5); filter: brightness(105%); }
.amp-card-cta-button .amp-cta-logo { height: 22px; }
.amp-card-offer { text-align: center; font-size: 13px; color: #555; font-weight: 500; }
.amp-offer-flag { margin-right: 6px; font-size: 16px; }
.amp-single-card-wrapper { max-width: 600px; margin: 0 auto 30px auto; }

/* --- Probability Gauge Widget --- */
.amp-probability-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 15px 0 5px 0; }
.amp-probability-circle { width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; }
.amp-probability-inner { width: 54px; height: 54px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; box-shadow: inset 0 0 5px rgba(0,0,0,0.05); }
.amp-prob-number { font-size: 18px; font-weight: 800; color: #1a0a3c; }
.amp-probability-label { margin-top: 8px; font-size: 10px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; }


/* --- Odds Table Styles --- */
.amp-odds-table-container { margin: 40px 0; border-radius: 12px; overflow: hidden; }
.amp-odds-table { width: 100%; border-collapse: collapse; text-align: center; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; border: 1px solid #e9ecef; }
.amp-odds-table th { background-color: #1a0a3c; color: #ffffff; padding: 18px 15px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.amp-odds-table td { padding: 15px; background-color: #ffffff; color: #333; font-weight: 600; }
.amp-odds-table tbody tr { border-bottom: 1px solid #f1f1f1; }
.amp-odds-table tbody tr:last-child { border-bottom: none; }
.amp-odds-table .amp-bookmaker-cell { font-weight: 800; color: #1a0a3c; white-space: nowrap; font-size: 15px; }
.amp-odds-table .amp-odds-button { background-color: #ff00f7; color: #ffffff; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 15px; display: inline-block; border: none; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.amp-odds-table .amp-odds-button:hover { transform: translateY(-2px); box-shadow: 0 8px 15px rgba(255, 0, 247, 0.3); color: #ffffff; }

/* --- League Table Styles --- */
.amp-league-table-container { margin: 40px 0; border-radius: 12px; overflow: hidden; border: 1px solid #e9ecef; }
.amp-league-table { width: 100%; border-collapse: collapse; text-align: center; border-radius: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; }
.amp-league-table th { background-color: #1a0a3c; color: #ffffff; padding: 15px 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.amp-league-table td { padding: 12px 10px; background-color: #ffffff; }
.amp-league-table tbody tr { border-bottom: 1px solid #f1f1f1; }
.amp-league-table tbody tr:last-child { border-bottom: none; }
.amp-league-table .team-name { text-align: left; font-weight: 600; white-space: nowrap; color: #333; }
.amp-league-table .points { font-weight: 800; color: #1a0a3c; }
.amp-league-table .amp-highlight-team td { background-color: #f0e6ff; }


/* --- H2H Table Styles --- */
.amp-h2h-table-container { margin: 40px 0; }
.amp-table-title { font-size: 24px; font-weight: 700; color: #1a0a3c; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #f1f1f1; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.amp-h2h-table { width: 100%; border-collapse: collapse; text-align: center; font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); border: 1px solid #e9ecef; }
.amp-h2h-table th { background-color: #f8f9fa; color: #555; padding: 12px 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; border-bottom: 2px solid #e9ecef; white-space: nowrap; }
.amp-h2h-table td { padding: 15px 10px; background-color: #ffffff; }
.amp-h2h-table tbody tr { border-bottom: 1px solid #f1f1f1; }
.amp-h2h-table tbody tr:last-child { border-bottom: none; }
.amp-h2h-table .score { font-weight: 800; color: #1a0a3c; background: #f8f9fa; padding: 5px 10px; border-radius: 5px; }
.amp-h2h-table .winner { font-weight: 700; color: #28a745; }

/* --- Final Prediction Box --- */
.amp-final-prediction { background-color: #1a0a3c; color: #ffffff; padding: 25px 30px; margin: 30px 0; border-radius: 12px; font-size: 20px; font-weight: 700; text-align: center; line-height: 1.6; box-shadow: 0 8px 20px rgba(26, 10, 60, 0.4); border: 2px solid #ff00f7; }
.amp-final-prediction p { margin: 0; padding: 0; }
.amp-pagination-links { margin-top: 40px; text-align: center; }
.amp-pagination-links .page-numbers { display: inline-block; padding: 10px 18px; margin: 0 5px; border: 1px solid #e9ecef; border-radius: 8px; text-decoration: none; color: #1a0a3c; font-weight: 700; background: #fff; transition: all 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.amp-pagination-links .page-numbers.current { background: #ff00f7; color: #fff; border-color: #ff00f7; }
.amp-pagination-links .page-numbers:hover { background: #f0e6ff; transform: translateY(-2px); }

/* --- RESPONSIVE FIX (MOBILE "FIT-TO-SCREEN") --- */
@media (max-width: 768px) {
    /* 1. Reset Containers: Remove overflow/scroll blocking */
    .amp-odds-table-container,
    .amp-league-table-container,
    .amp-h2h-table-container {
        display: block;
        width: 100%;
        overflow-x: visible; /* Was auto, changed to visible to force fit */
        border-radius: 12px;
        margin-left: 0;
        margin-right: 0;
        border: 1px solid #e9ecef;
    }

    /* 2. Force Tables to Fit Width */
    .amp-odds-table,
    .amp-league-table,
    .amp-h2h-table {
        min-width: 0 !important; /* Allow shrinking */
        width: 100% !important;
        table-layout: fixed; /* Force equal/controlled widths */
        font-size: 10px; /* Small font for tight spaces */
    }

    /* 3. Compact Cells */
    .amp-odds-table th, .amp-odds-table td,
    .amp-league-table th, .amp-league-table td,
    .amp-h2h-table th, .amp-h2h-table td {
        padding: 6px 2px; /* Very tight padding */
        white-space: normal; /* Allow wrapping */
        word-wrap: break-word;
        line-height: 1.1;
    }
    
    /* 4. Odds Button Compacting */
    .amp-odds-table .amp-odds-button {
        padding: 5px 2px;
        font-size: 10px;
        width: 100%;
        display: block;
        box-sizing: border-box;
    }
    
    /* 5. League Table: Show All but Constrain Team Name */
    .amp-league-table .team-name {
        width: 40%; /* Give team name the most space */
        max-width: 80px;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Make number columns very narrow */
    .amp-league-table th:not(:nth-child(2)), 
    .amp-league-table td:not(:nth-child(2)) {
        width: 8%; 
    }
    
    /* 6. H2H Table: Hide Competition Column */
    .amp-h2h-table th:nth-child(2),
    .amp-h2h-table td:nth-child(2) {
        display: none;
    }
    
    /* 7. Filter Bar Mobile Adjustments */
    .amp-filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 10px;
        scrollbar-width: none;
    }
    .amp-filter-bar::-webkit-scrollbar { display: none; }
    .amp-select-wrapper { min-width: 160px; flex: 0 0 auto; }
}