/**
 * Affiliate Links Pro - Frontend Styles
 * v2.8.2 - Light mode only by default, dark mode via .alp-dark class
 */

/* ============================================
   BASE WIDGET
   ============================================ */
.alp-widget {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* HORIZONTAL */
.alp-style-horizontal { flex-direction: row; display: flex; gap: 20px; }
.alp-style-horizontal .alp-image { flex-shrink: 0; width: 200px; }

/* VERTICAL */
.alp-style-vertical { flex-direction: column; text-align: center; display: flex; gap: 20px; }
.alp-style-vertical .alp-image { width: 100%; max-width: 300px; margin: 0 auto; }
.alp-style-vertical .alp-buttons { justify-content: center; }

/* COMPACT */
.alp-style-compact { padding: 15px; }
.alp-style-compact .alp-title { font-size: 1.1em; margin-bottom: 10px; }
.alp-style-compact .alp-buttons { margin-top: 10px; }

/* IMAGE */
.alp-image img { max-width: 100%; height: auto; border-radius: 4px; display: block; }

/* CONTENT */
.alp-content { flex: 1; min-width: 0; }
.alp-title { margin: 0 0 10px 0; font-size: 1.3em; font-weight: 600; color: #333; line-height: 1.3; }
.alp-price { font-size: 1.5em; font-weight: bold; color: #E94B3C; margin: 10px 0; }

/* FEATURES */
.alp-features { list-style: none; padding: 0; margin: 15px 0; }
.alp-features li { padding: 5px 0 5px 24px; position: relative; font-size: 0.95em; color: #555; line-height: 1.4; }
.alp-features li:before { content: "✓"; position: absolute; left: 0; color: #28A745; font-weight: bold; }

/* BUTTONS */
.alp-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.alp-button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 24px; color: #fff !important; text-decoration: none !important;
    font-weight: 600; font-size: 0.95em; transition: all 0.25s ease;
    text-align: center; border: none; cursor: pointer;
}
.alp-button:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); color: #fff !important; text-decoration: none !important; }
.alp-button:active { transform: translateY(0); }
.alp-btn-rounded { border-radius: 4px; }
.alp-btn-pill { border-radius: 50px; }
.alp-btn-square { border-radius: 0; }

/* RESPONSIVE WIDGET */
@media (max-width: 768px) {
    .alp-widget, .alp-style-horizontal { flex-direction: column; }
    .alp-style-horizontal .alp-image, .alp-image { width: 100%; max-width: 100%; }
    .alp-image img { max-height: 250px; object-fit: contain; margin: 0 auto; }
    .alp-buttons { flex-direction: column; }
    .alp-button { width: 100%; justify-content: center; }
    .alp-title { font-size: 1.15em; }
    .alp-price { font-size: 1.3em; }
}

/* ============================================
   COMPARATEUR DE PRIX
   ============================================ */
.alp-comparator {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.alp-comparator-header {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    padding: 15px 20px;
    text-align: center;
}

.alp-comparator-title {
    margin: 0;
    font-size: 1.4em;
    font-weight: 800;
    color: #111;
    text-transform: none;
    letter-spacing: 0.3px;
}

.alp-comparator-table { width: 100%; }

/* Rows avec 3 colonnes (marchand | prix | lien) */
.alp-comparator-row {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    gap: 10px;
}

/* Rows avec 2 colonnes (marchand | lien) — quand pas de colonne prix */
.alp-comparator-row.alp-row-no-price {
    grid-template-columns: 1fr auto;
}

.alp-comparator-row:last-child { border-bottom: none; }

.alp-comparator-header-row {
    background: #f8f9fa;
    font-weight: 600;
    color: #888;
    font-size: 0.85em;
    padding: 10px 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.alp-comparator-row.alp-best-price {
    background: #f0faf0;
}

/* Colonnes */
.alp-col-merchant {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.alp-col-price { text-align: center; }
.alp-col-link { text-align: right; }

/* Logo marchand */
.alp-merchant-logo {
    width: 28px; height: 28px;
    object-fit: contain; border-radius: 4px; flex-shrink: 0;
}

.alp-merchant-name { font-weight: 700; font-size: 1.05em; color: #333; }

/* Badge meilleur prix */
.alp-best-badge {
    background: #28a745; color: #fff; font-size: 0.7em;
    padding: 3px 8px; border-radius: 20px; font-weight: 600; text-transform: uppercase;
}

/* Prix */
.alp-current-price { font-size: 1.3em; font-weight: 700; color: #333; display: block; }
.alp-old-price { font-size: 0.9em; color: #999; text-decoration: line-through; display: block; margin-top: 2px; }

/* Bouton */
.alp-offer-btn {
    display: inline-block;
    background: linear-gradient(135deg, #FF9900 0%, #FF6600 100%);
    color: #fff !important;
    padding: 10px 24px;
    border-radius: 25px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.9em;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.alp-offer-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255,153,0,0.3);
    color: #fff !important;
}

/* Footer */
.alp-comparator-footer {
    background: #f8f9fa;
    padding: 10px 20px;
    text-align: center;
    color: #999;
    font-size: 0.85em;
}

/* RESPONSIVE COMPARATEUR */
@media (max-width: 600px) {
    .alp-comparator-row {
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: center;
    }
    .alp-comparator-row.alp-row-no-price {
        grid-template-columns: 1fr;
    }
    .alp-col-merchant { justify-content: center; }
    .alp-col-price { text-align: center; }
    .alp-col-link { text-align: center; }
    .alp-comparator-header-row { display: none; }
    .alp-merchant-logo { max-height: 30px; }
    .alp-offer-btn { width: 100%; padding: 12px 20px; text-align: center; }
}

/* PRINT */
@media print {
    .alp-widget { box-shadow: none; border: 1px solid #000; }
    .alp-button { border: 1px solid currentColor; }
}

/* ============================================
   DARK MODE (optionnel — activé via classe .alp-dark)
   N'utilise PAS prefers-color-scheme pour éviter
   les conflits avec les sites en mode clair.
   ============================================ */
.alp-dark .alp-widget,
.alp-dark .alp-comparator {
    background: #1e1e1e;
    border-color: #333;
}

.alp-dark .alp-title,
.alp-dark .alp-current-price,
.alp-dark .alp-merchant-name {
    color: #fff;
}

.alp-dark .alp-features li { color: #ccc; }

.alp-dark .alp-comparator-header-row {
    background: #2a2a2a;
    color: #aaa;
}

.alp-dark .alp-comparator-row { border-color: #333; }

.alp-dark .alp-comparator-row.alp-best-price {
    background: linear-gradient(90deg, #1b3d1b 0%, #1e1e1e 100%);
}

.alp-dark .alp-comparator-footer {
    background: #2a2a2a;
    color: #777;
}