/* ===== CTA Buttons plugin =====
   All selectors scoped under [data-cb-type="cta-buttons"].
   Per-button colors come from CSS variables that `mount` sets inline
   (--btn-color1 / --btn-color2 / --btn-text-color). The only theme-dependent
   CSS color is the outline style's surface, routed through --cta-outline-bg. */
[data-cb-type="cta-buttons"] {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px 0;
    --cta-outline-bg: #ffffff;
}

/* ── Dark mode (opt-in — commented out) ───────────────────────────────────
   Dark mode for a rendered block is the SITE's responsibility, not the plugin's.
   The outline surface is a CSS variable, so redefine it below under whatever
   trigger your site uses — a class, [data-theme="dark"], @media
   (prefers-color-scheme: dark), etc. Uncomment and point the selector at your
   site's theme system. (The button colors themselves are your chosen settings.)
   NOTE: `.dark` is also the ContentBuilder editor's own UI theme, so on a page
   that runs the editor, prefer a different class here.

.dark [data-cb-type="cta-buttons"] {
    --cta-outline-bg: transparent;
}
.dark [data-cb-type="cta-buttons"] .cta-btn[data-style="outline"]:hover {
    background: color-mix(in srgb, var(--btn-color2) 8%, transparent);
}
*/

/* Button Base Styles */
[data-cb-type="cta-buttons"] .cta-btn {
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    white-space: nowrap;
    /* Don't override inline styles from JavaScript */
}

/* Gradient Style */
[data-cb-type="cta-buttons"] .cta-btn[data-style="gradient"] {
    background: linear-gradient(135deg, var(--btn-color1) 0%, var(--btn-color2) 100%);
    color: var(--btn-text-color);
    border: none;
}

[data-cb-type="cta-buttons"] .cta-btn[data-style="gradient"][data-shadow="true"] {
    box-shadow: 0 10px 40px color-mix(in srgb, var(--btn-color1) 25%, transparent);
}

[data-cb-type="cta-buttons"] .cta-btn[data-style="gradient"]:hover[data-shadow="true"] {
    box-shadow: 0 15px 50px color-mix(in srgb, var(--btn-color1) 38%, transparent);
}

/* Solid Style */
[data-cb-type="cta-buttons"] .cta-btn[data-style="solid"] {
    background: var(--btn-color1);
    color: var(--btn-text-color);
    border: none;
}

[data-cb-type="cta-buttons"] .cta-btn[data-style="solid"][data-shadow="true"] {
    box-shadow: 0 10px 40px color-mix(in srgb, var(--btn-color1) 25%, transparent);
}

[data-cb-type="cta-buttons"] .cta-btn[data-style="solid"]:hover {
    background: var(--btn-color2);
}

[data-cb-type="cta-buttons"] .cta-btn[data-style="solid"]:hover[data-shadow="true"] {
    box-shadow: 0 15px 50px color-mix(in srgb, var(--btn-color1) 38%, transparent);
}

/* Outline Style - Uses color1 for border, color2 for hover */
[data-cb-type="cta-buttons"] .cta-btn[data-style="outline"] {
    background: var(--cta-outline-bg);
    color: var(--btn-text-color);
    border: 1px solid var(--btn-color1);
}

[data-cb-type="cta-buttons"] .cta-btn[data-style="outline"][data-shadow="true"] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-cb-type="cta-buttons"] .cta-btn[data-style="outline"]:hover {
    background: color-mix(in srgb, var(--btn-color2) 3%, transparent);
    border-color: var(--btn-color2);
}

[data-cb-type="cta-buttons"] .cta-btn[data-style="outline"]:hover[data-shadow="true"] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Ghost Style - Transparent background, uses color1 for text and shadows */
[data-cb-type="cta-buttons"] .cta-btn[data-style="ghost"] {
    background: transparent;
    color: var(--btn-color1);
    border: none;
}

[data-cb-type="cta-buttons"] .cta-btn[data-style="ghost"][data-shadow="true"] {
    box-shadow: 0 10px 40px color-mix(in srgb, var(--btn-color1) 25%, transparent);
}

[data-cb-type="cta-buttons"] .cta-btn[data-style="ghost"]:hover {
    background: color-mix(in srgb, var(--btn-color1) 3%, transparent);
    color: var(--btn-color1);
}

[data-cb-type="cta-buttons"] .cta-btn[data-style="ghost"]:hover[data-shadow="true"] {
    box-shadow: 0 15px 50px color-mix(in srgb, var(--btn-color1) 37%, transparent);
}

/* Hover Lift Effect */
[data-cb-type="cta-buttons"] .cta-btn[data-hover-lift="true"]:hover {
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    [data-cb-type="cta-buttons"] {
        flex-direction: column;
        gap: 12px;
    }
    
    [data-cb-type="cta-buttons"] .cta-btn {
        width: 100%;
        text-align: center;
    }
}