/* ========================================
   CTA Buttons — Unified Styles
   Used across: category listing, product profile,
   most-popular section, visit-website-buttons partial
   ======================================== */

/* ----------------------------------------
   Campaign Buttons (vendor URL — campaign active)
   Colors: green (#10b981) for demo, amber (#F59E0B) for pricing
   ---------------------------------------- */
.campaign-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 500;
    font-size: 12px;
    padding: 7px 18px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
    min-height: 32px;
}

.campaign-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.campaign-btn:active {
    transform: translateY(0);
    filter: brightness(0.95);
}

.campaign-btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.campaign-btn-demo {
    background: #10b981;
    color: #ffffff;
}

.campaign-btn-pricing {
    background: #F59E0B;
    color: #ffffff;
}

@media (min-width: 480px) {
    .campaign-btn {
        padding: 8px 20px;
        font-size: 13px;
        min-height: 34px;
    }

    .campaign-btn svg {
        width: 14px;
        height: 14px;
    }
}

/* ----------------------------------------
   Lead CTA Buttons (lead popup — no campaign / not in country)
   Used on: category listing cards
   Colors: indigo (#6366f1) for demo, outline for pricing
   ---------------------------------------- */
.lead-cta-btns {
    display: flex;
    gap: 10px;
}

.lead-cta-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 18px;
    min-width: 130px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    min-height: 32px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    border: none;
    white-space: nowrap;
}

.lead-cta-btn.demo {
    background: #6366f1;
    color: #fff;
}

.lead-cta-btn.demo:hover {
    background: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.lead-cta-btn.pricing {
    background: #fff;
    color: #475569;
    border: 2px solid #e2e8f0;
}

.lead-cta-btn.pricing:hover {
    border-color: #6366f1;
    color: #6366f1;
    background: #eef2ff;
}

.lead-cta-btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

@media (min-width: 480px) {
    .lead-cta-btn {
        padding: 8px 20px;
        font-size: 13px;
        min-height: 34px;
    }

    .lead-cta-btn svg {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 640px) {
    .lead-cta-btns {
        flex-direction: column;
    }

    .lead-cta-btn {
        width: 100%;
    }
}

/* ----------------------------------------
   Product CTA Buttons (product profile page)
   Used on: product header & visit-website-buttons partial
   Colors: indigo (#6366f1) for demo, outline for pricing
   ---------------------------------------- */
.product-cta-btns {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.product-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 18px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    min-height: 32px;
    min-width: 130px;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    text-decoration: none;
    white-space: nowrap;
}

.product-cta-btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.product-cta-btn.demo {
    background: #6366f1;
    color: white;
}

.product-cta-btn.demo:hover {
    background: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.product-cta-btn.pricing {
    background: #fff;
    color: #475569;
    border: 2px solid #e2e8f0;
}

.product-cta-btn.pricing:hover {
    border-color: #6366f1;
    color: #6366f1;
    background: #eef2ff;
    transform: translateY(-1px);
}

@media (min-width: 480px) {
    .product-cta-btn {
        padding: 8px 20px;
        font-size: 13px;
        min-height: 34px;
    }

    .product-cta-btn svg {
        width: 14px;
        height: 14px;
    }
}