/* ═══════════════════════════════════════════════════
   NexAffil — Frontend Styles v2.0.0
   Premium affiliate templates — Modern Design
   ═══════════════════════════════════════════════════ */

:root {
    --nxa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --nxa-primary: #4f46e5;
    --nxa-primary-hover: #4338ca;
    --nxa-primary-glow: rgba(79,70,229,.2);
    --nxa-accent: #f59e0b;
    --nxa-success: #10b981;
    --nxa-danger: #ef4444;
    --nxa-text: #0f172a;
    --nxa-text-md: #475569;
    --nxa-text-lt: #94a3b8;
    --nxa-bg: #ffffff;
    --nxa-bg2: #f8fafc;
    --nxa-border: #e2e8f0;
    --nxa-border-lt: #f1f5f9;
    --nxa-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);
    --nxa-shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
    --nxa-shadow-lg: 0 12px 32px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);
    --nxa-shadow-xl: 0 20px 50px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.05);
    --nxa-r: 14px;
    --nxa-r-sm: 10px;
    --nxa-r-xs: 6px;
    --nxa-t: .25s cubic-bezier(.4,0,.2,1);
}

.nexaffil-box, .nexaffil-box * { box-sizing:border-box; margin:0; padding:0; }

/* ════════════════════════════════════════════
   PRODUCT BOX — Horizontal (flagship template)
   ════════════════════════════════════════════ */

.nexaffil-product-box {
    position:relative;
    font-family:var(--nxa-font);
    background:var(--nxa-bg);
    border:1px solid var(--nxa-border);
    border-radius:var(--nxa-r);
    box-shadow:var(--nxa-shadow-md);
    overflow:hidden;
    margin:1.75em 0;
    transition:box-shadow var(--nxa-t), transform var(--nxa-t);
}
.nexaffil-product-box:hover {
    box-shadow:var(--nxa-shadow-xl);
    transform:translateY(-3px);
}

/* Badge — pill style, bien visible */
.nexaffil-badge {
    position:absolute; top:12px; right:12px;
    color:#fff; font-size:.72rem; font-weight:800;
    letter-spacing:.05em; padding:.4em 1em;
    border-radius:50px; z-index:3; text-transform:uppercase;
    box-shadow:0 3px 10px rgba(0,0,0,.2);
}

/* Promo bar — modern gradient */
.nexaffil-promo {
    background:linear-gradient(135deg, var(--nxa-primary), #6366f1);
    color:#fff; text-align:center;
    padding:.6em 1em; font-size:.84rem;
    font-weight:600; letter-spacing:.02em;
}

/* Inner flex layout */
.nexaffil-box-inner { display:flex; align-items:stretch; }

/* Image zone */
.nexaffil-box-image {
    position:relative; flex:0 0 280px; min-height:220px;
    display:flex; align-items:center; justify-content:center;
    padding:1.75em;
    background:#ffffff;
    border-right:1px solid var(--nxa-border);
}
.nexaffil-box-image .nexaffil-image-link {
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%; text-decoration:none;
}
.nexaffil-img {
    max-width:100%; max-height:230px; width:auto; height:auto;
    object-fit:contain; transition:transform .4s cubic-bezier(.25,.46,.45,.94);
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.06));
}
.nexaffil-box-image:hover .nexaffil-img { transform:scale(1.08); }

/* Discount tag */
.nexaffil-discount-tag {
    position:absolute; top:14px; left:14px;
    background:linear-gradient(135deg,#ef4444,#dc2626);
    color:#fff; font-size:.78rem; font-weight:800;
    padding:.35em .75em; border-radius:var(--nxa-r-xs);
    z-index:2; box-shadow:0 2px 8px rgba(239,68,68,.3);
    letter-spacing:.02em;
}

/* Content zone */
.nexaffil-box-content {
    flex:1; padding:1.75em;
    display:flex; flex-direction:column; gap:.7em;
}

/* Title */
.nexaffil-title {
    font-size:1.2rem; font-weight:800; line-height:1.3;
    color:var(--nxa-text); margin:0; letter-spacing:-.01em;
}
.nexaffil-title a { color:inherit; text-decoration:none; transition:color var(--nxa-t); }
.nexaffil-title a:hover { color:var(--nxa-primary); }

/* Rating */
.nexaffil-rating { display:flex; align-items:center; gap:.5em; }
.nexaffil-rating-label { font-size:.82rem; font-weight:600; color:var(--nxa-text-md); white-space:nowrap; }
.nexaffil-stars { display:flex; gap:1px; }
.nexaffil-star { width:16px; height:16px; }
.nexaffil-star-full { color:var(--nxa-accent); filter:drop-shadow(0 1px 2px rgba(245,158,11,.3)); }
.nexaffil-star-half { color:var(--nxa-accent); opacity:.5; }
.nexaffil-star-empty { color:#e2e8f0; }
.nexaffil-rating-count { font-size:.78rem; color:var(--nxa-text-lt); font-weight:500; }

/* Description */
.nexaffil-description { font-size:.88rem; line-height:1.65; color:var(--nxa-text-md); }
.nexaffil-description p { margin:0 0 .4em; }
.nexaffil-description ul { padding-left:1.2em; margin:.3em 0; }
.nexaffil-description li { margin-bottom:.2em; }

/* Pros & Cons */
.nexaffil-pros-cons { display:flex; gap:1.25em; font-size:.84rem; }
.nexaffil-pros, .nexaffil-cons { list-style:none; padding:0; margin:0; flex:1; }
.nexaffil-pros li, .nexaffil-cons li {
    padding:.25em 0; display:flex; align-items:flex-start; gap:.4em; line-height:1.5;
}
.nexaffil-icon-check {
    color:#fff; font-weight:700; flex-shrink:0;
    width:18px; height:18px; line-height:18px; text-align:center;
    background:var(--nxa-success); border-radius:50%; font-size:.65rem;
}
.nexaffil-icon-cross {
    color:#fff; font-weight:700; flex-shrink:0;
    width:18px; height:18px; line-height:18px; text-align:center;
    background:var(--nxa-danger); border-radius:50%; font-size:.65rem;
}

/* Footer */
.nexaffil-box-footer {
    display:flex; align-items:center; justify-content:space-between; gap:1em;
    margin-top:auto; padding-top:1.1em;
    border-top:1px solid var(--nxa-border-lt);
}
.nexaffil-price-block { display:flex; align-items:center; gap:.75em; }
.nexaffil-merchant-logo { width:24px; height:24px; object-fit:contain; flex-shrink:0; opacity:.7; }
.nexaffil-prices { display:flex; flex-direction:column; }
.nexaffil-old-price { font-size:.78rem; color:var(--nxa-text-lt); text-decoration:line-through; line-height:1; }
.nexaffil-price { font-size:1.5rem; font-weight:900; color:var(--nxa-text); line-height:1.15; letter-spacing:-.02em; }

/* CTA Button — gradient, glow */
.nexaffil-button {
    display:inline-flex; align-items:center; gap:.5em;
    padding:.8em 1.6em; border:none;
    border-radius:var(--nxa-r-sm);
    color:#fff !important; font-size:.92rem; font-weight:700;
    text-decoration:none !important; cursor:pointer;
    transition:all var(--nxa-t); white-space:nowrap; flex-shrink:0;
    background:linear-gradient(135deg, var(--nxa-primary), #6366f1);
    box-shadow:0 4px 14px var(--nxa-primary-glow);
    position:relative; overflow:hidden;
}
.nexaffil-button::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,.15), transparent);
    transition:opacity var(--nxa-t);
}
.nexaffil-button:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 24px var(--nxa-primary-glow);
    color:#fff !important;
}
.nexaffil-button:active { transform:translateY(0); }
.nexaffil-button .nexaffil-btn-arrow { transition:transform var(--nxa-t); }
.nexaffil-button:hover .nexaffil-btn-arrow { transform:translateX(3px); }

/* Responsive */
@media (max-width:768px) {
    .nexaffil-box-inner { flex-direction:column; }
    .nexaffil-box-image { flex:none; min-height:180px; border-right:0; border-bottom:1px solid var(--nxa-border); }
    .nexaffil-box-footer { flex-direction:column; text-align:center; }
    .nexaffil-price-block { justify-content:center; }
    .nexaffil-button { width:100%; justify-content:center; }
    .nexaffil-badge { top:10px; right:-36px; font-size:.6rem; }
}

/* ════════════════════════════════════════════
   PRODUCT BOX — Vertical
   ════════════════════════════════════════════ */

.nexaffil-box-vertical {
    font-family:var(--nxa-font);
    background:var(--nxa-bg);
    border:1px solid var(--nxa-border);
    border-radius:var(--nxa-r);
    box-shadow:var(--nxa-shadow-md);
    overflow:hidden; margin:1.5em 0;
    max-width:340px;
    display:flex; flex-direction:column;
    transition:box-shadow var(--nxa-t), transform var(--nxa-t);
}
.nexaffil-box-vertical:hover { box-shadow:var(--nxa-shadow-xl); transform:translateY(-3px); }

.nexaffil-vert-image {
    position:relative;
    background:#ffffff;
    border-bottom:1px solid var(--nxa-border);
    padding:1.5em; text-align:center;
    min-height:180px; display:flex; align-items:center; justify-content:center;
}
.nexaffil-vert-image .nexaffil-img { max-height:180px; max-width:100%; transition:transform .4s cubic-bezier(.25,.46,.45,.94); filter:drop-shadow(0 4px 8px rgba(0,0,0,.06)); }
.nexaffil-vert-image:hover .nexaffil-img { transform:scale(1.08); }

.nexaffil-vert-content { padding:1.25em; display:flex; flex-direction:column; gap:.5em; }
.nexaffil-vert-title { font-size:1rem; font-weight:700; text-align:center; color:var(--nxa-text); }
.nexaffil-vert-title a { color:inherit; text-decoration:none; }
.nexaffil-vert-title a:hover { color:var(--nxa-primary); }

.nexaffil-vert-footer {
    margin-top:auto; padding-top:.75em; border-top:1px solid var(--nxa-border-lt); text-align:center;
}
.nexaffil-vert-footer .nexaffil-prices { margin-bottom:.5em; display:flex; flex-direction:column; align-items:center; }
.nexaffil-vert-footer .nexaffil-price { font-size:1.3rem; }
.nexaffil-button-full { display:block; width:100%; text-align:center; justify-content:center; }

/* ════════════════════════════════════════════
   MINI CARD — Inline compact
   ════════════════════════════════════════════ */

.nexaffil-mini-card {
    font-family:var(--nxa-font);
    display:flex; align-items:center; gap:1em;
    background:var(--nxa-bg);
    border:1px solid var(--nxa-border);
    border-radius:var(--nxa-r-sm);
    padding:.85em 1.1em;
    margin:1em 0;
    box-shadow:var(--nxa-shadow);
    transition:all var(--nxa-t);
    border-left:3px solid var(--nxa-primary);
}
.nexaffil-mini-card:hover {
    box-shadow:var(--nxa-shadow-lg);
    border-left-color:var(--nxa-primary-hover);
}

.nexaffil-mini-img-wrap { flex-shrink:0; text-decoration:none; }
.nexaffil-mini-img {
    width:64px; height:64px; object-fit:contain;
    border-radius:var(--nxa-r-xs);
    background:var(--nxa-bg2); padding:4px;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.04));
}

.nexaffil-mini-info { flex:1; min-width:0; }
.nexaffil-mini-title { font-size:.92rem; font-weight:700; margin:0 0 .2em; line-height:1.3; color:var(--nxa-text); }
.nexaffil-mini-title a { color:inherit; text-decoration:none; }
.nexaffil-mini-title a:hover { color:var(--nxa-primary); }

.nexaffil-mini-action { flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:.35em; }
.nexaffil-mini-action .nexaffil-price { font-size:1.15rem; font-weight:800; }
.nexaffil-mini-btn { font-size:.78rem; padding:.5em 1em; }

/* ════════════════════════════════════════════
   COMPARISON TABLE
   ════════════════════════════════════════════ */

.nexaffil-compare-table {
    font-family:var(--nxa-font);
    background:var(--nxa-bg);
    border:1px solid var(--nxa-border);
    border-radius:var(--nxa-r);
    box-shadow:var(--nxa-shadow-md);
    overflow:hidden; margin:1.75em 0;
}
.nexaffil-compare-scroll { overflow-x:auto; }
.nexaffil-table { width:100%; border-collapse:collapse; min-width:500px; }
.nexaffil-th { padding:.75em; vertical-align:top; text-align:center; position:relative; }
.nexaffil-compare-badge {
    display:inline-block; color:#fff; font-size:.65rem; font-weight:700;
    padding:.25em .8em; border-radius:50px; text-transform:uppercase;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.nexaffil-td {
    padding:.85em; text-align:center; vertical-align:top;
    border-top:1px solid var(--nxa-border-lt);
    font-size:.88rem; color:var(--nxa-text);
}
.nexaffil-td-img img {
    max-height:140px; max-width:140px; object-fit:contain;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.05));
    transition:transform .3s; cursor:pointer;
}
.nexaffil-td-img img:hover { transform:scale(1.08); }
.nexaffil-td-title { font-size:.92rem; font-weight:700; }
.nexaffil-td-pros .nexaffil-pros, .nexaffil-td-cons .nexaffil-cons { text-align:left; font-size:.8rem; }
.nexaffil-td-cta { padding:1em; }
.nexaffil-td-cta .nexaffil-prices { display:flex; flex-direction:column; align-items:center; }
.nexaffil-td-cta .nexaffil-price { font-size:1.2rem; }

/* Zebra + highlight */
.nexaffil-table tr td:nth-child(even),
.nexaffil-table tr th:nth-child(even) { background:rgba(248,250,252,.7); }
.nexaffil-table tr:hover td { background:rgba(79,70,229,.02); }

/* ════════════════════════════════════════════
   GRID
   ════════════════════════════════════════════ */

.nexaffil-grid {
    font-family:var(--nxa-font);
    display:grid;
    grid-template-columns:repeat(var(--nxa-grid-cols,3),1fr);
    gap:1.25em; margin:1.75em 0;
}
@media(max-width:900px) { .nexaffil-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:550px) { .nexaffil-grid { grid-template-columns:1fr; } }

.nexaffil-grid-item {
    position:relative;
    background:var(--nxa-bg);
    border:1px solid var(--nxa-border);
    border-radius:var(--nxa-r);
    box-shadow:var(--nxa-shadow);
    overflow:hidden;
    display:flex; flex-direction:column;
    transition:all var(--nxa-t);
}
.nexaffil-grid-item:hover {
    box-shadow:var(--nxa-shadow-xl);
    transform:translateY(-4px);
    border-color:rgba(79,70,229,.2);
}

.nexaffil-grid-badge {
    position:absolute; top:10px; right:10px;
    color:#fff; font-size:.62rem; font-weight:700;
    padding:.25em .65em; border-radius:50px; z-index:2;
    text-transform:uppercase; letter-spacing:.04em;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.nexaffil-grid-discount {
    position:absolute; top:10px; left:10px;
    background:linear-gradient(135deg,#ef4444,#dc2626);
    color:#fff; font-size:.7rem; font-weight:800;
    padding:.2em .55em; border-radius:var(--nxa-r-xs); z-index:2;
    box-shadow:0 2px 6px rgba(239,68,68,.3);
}
.nexaffil-grid-img {
    background:#ffffff;
    border-bottom:1px solid var(--nxa-border);
    padding:1.5em; text-align:center;
    min-height:170px; display:flex; align-items:center; justify-content:center;
}
.nexaffil-grid-img img {
    max-height:160px; max-width:100%; object-fit:contain;
    transition:transform .4s cubic-bezier(.25,.46,.45,.94);
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.05));
}
.nexaffil-grid-item:hover .nexaffil-grid-img img { transform:scale(1.08); }
.nexaffil-grid-img a { text-decoration:none; display:flex; align-items:center; justify-content:center; }

.nexaffil-grid-body { padding:1.1em; flex:1; display:flex; flex-direction:column; gap:.4em; }
.nexaffil-grid-title { font-size:.92rem; font-weight:700; line-height:1.3; margin:0; color:var(--nxa-text); }
.nexaffil-grid-title a { color:inherit; text-decoration:none; }
.nexaffil-grid-title a:hover { color:var(--nxa-primary); }
.nexaffil-grid-merchant { font-size:.72rem; color:var(--nxa-text-lt); font-weight:500; }

.nexaffil-grid-footer {
    margin-top:auto; padding-top:.75em;
    border-top:1px solid var(--nxa-border-lt);
    display:flex; flex-direction:column; gap:.5em;
}
.nexaffil-grid-footer .nexaffil-prices { text-align:center; }
.nexaffil-grid-footer .nexaffil-price { font-size:1.15rem; }
.nexaffil-grid-footer .nexaffil-old-price { font-size:.72rem; }

/* ════════════════════════════════════════════
   CAROUSEL
   ════════════════════════════════════════════ */

.nexaffil-carousel-wrap {
    font-family:var(--nxa-font);
    position:relative; margin:1.75em 0; overflow:hidden;
}
.nexaffil-carousel-track {
    display:flex; gap:1.1em; overflow-x:auto;
    scroll-behavior:smooth; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:.5em .25em 1.25em;
    scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent;
}
.nexaffil-carousel-track::-webkit-scrollbar { height:5px; }
.nexaffil-carousel-track::-webkit-scrollbar-track { background:transparent; }
.nexaffil-carousel-track::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }

.nexaffil-carousel-slide { flex:0 0 280px; scroll-snap-align:start; }

.nexaffil-carousel-card {
    position:relative;
    background:var(--nxa-bg); border:1px solid var(--nxa-border);
    border-radius:var(--nxa-r); box-shadow:var(--nxa-shadow);
    overflow:hidden; height:100%;
    display:flex; flex-direction:column;
    transition:all var(--nxa-t);
}
.nexaffil-carousel-card:hover {
    box-shadow:var(--nxa-shadow-xl);
    transform:translateY(-3px);
    border-color:rgba(79,70,229,.15);
}

.nexaffil-carousel-badge {
    position:absolute; top:8px; right:8px;
    color:#fff; font-size:.58rem; font-weight:700;
    padding:.2em .55em; border-radius:50px; z-index:2;
    text-transform:uppercase; box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.nexaffil-carousel-discount {
    position:absolute; top:8px; left:8px;
    background:linear-gradient(135deg,#ef4444,#dc2626);
    color:#fff; font-size:.68rem; font-weight:800;
    padding:.18em .5em; border-radius:var(--nxa-r-xs); z-index:2;
    box-shadow:0 2px 6px rgba(239,68,68,.25);
}
.nexaffil-carousel-img {
    background:#ffffff;
    border-bottom:1px solid var(--nxa-border);
    padding:1.1em; text-align:center;
    min-height:150px; display:flex; align-items:center; justify-content:center;
}
.nexaffil-carousel-img img {
    max-height:140px; max-width:100%; object-fit:contain;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.05));
}
.nexaffil-carousel-img a { display:flex; align-items:center; justify-content:center; text-decoration:none; }

.nexaffil-carousel-body { padding:1em; flex:1; display:flex; flex-direction:column; gap:.3em; }
.nexaffil-carousel-title { font-size:.85rem; font-weight:700; line-height:1.3; margin:0; color:var(--nxa-text); }
.nexaffil-carousel-title a { color:inherit; text-decoration:none; }
.nexaffil-carousel-title a:hover { color:var(--nxa-primary); }

.nexaffil-carousel-footer {
    margin-top:auto; padding-top:.6em; border-top:1px solid var(--nxa-border-lt);
    display:flex; flex-direction:column; gap:.4em; text-align:center;
}
.nexaffil-carousel-footer .nexaffil-prices { text-align:center; }
.nexaffil-carousel-footer .nexaffil-price { font-size:1.05rem; }
.nexaffil-carousel-btn { font-size:.8rem; padding:.55em 1em; }

/* Nav arrows */
.nexaffil-carousel-nav {
    position:absolute; top:50%; transform:translateY(-60%);
    width:38px; height:38px;
    border:1px solid var(--nxa-border);
    border-radius:50%;
    background:var(--nxa-bg);
    color:var(--nxa-text); font-size:1.1rem;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow:var(--nxa-shadow-md);
    z-index:3; transition:all var(--nxa-t);
    padding:0; line-height:1;
}
.nexaffil-carousel-nav:hover {
    background:var(--nxa-primary); color:#fff;
    border-color:var(--nxa-primary);
    box-shadow:0 4px 14px var(--nxa-primary-glow);
}
.nexaffil-carousel-prev { left:8px; }
.nexaffil-carousel-next { right:8px; }

@media(max-width:600px) {
    .nexaffil-carousel-slide { flex:0 0 240px; }
    .nexaffil-carousel-nav { display:none; }
}