/**
 * Vaca Muerta CTA surfaces — single source for hub, onboarding, and account.
 *
 * Sizing matches site-ui (.site-ui .btn-primary): 48px height, 0 20px padding, 14px / 700.
 * Primary: VM gold gradient (same structure as Alto Valle IT green gradient).
 * Secondary: black fill, white hairline (site-ui secondary).
 */

body.vaca-layout,
body.vm-onboarding-shell,
body.vm-account-shell {
    --vm-cta-height: 48px;
    --vm-cta-padding-inline: 20px;
    --vm-cta-radius: 4px;
    --vm-cta-font-size: 14px;
    --vm-cta-font-weight: 700;
    --vm-cta-letter-spacing: 0.02em;

    --vm-cta-primary-bg: #d4c09a;
    --vm-cta-primary-bg-hover: #e5d3b0;
    --vm-cta-primary-fg: var(--cta-primary-fg, #111318);
    --vm-cta-primary-gradient: linear-gradient(
        148deg,
        #e8d4b2 0%,
        #d4c09a 32%,
        #b89a6f 68%,
        #8f7350 100%
    );
    --vm-cta-primary-gradient-hover: linear-gradient(
        148deg,
        #f0dfc0 0%,
        #e5d3b0 34%,
        #c4a67a 70%,
        #9a7d52 100%
    );
    --vm-cta-primary-inset: inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 4px rgba(32, 22, 12, 0.32);
    --vm-cta-primary-glow: 0 6px 16px rgba(16, 11, 6, 0.36);
    --vm-cta-primary-glow-hover: 0 8px 18px rgba(16, 11, 6, 0.42);

    --vm-cta-secondary-bg: #000000;
    --vm-cta-secondary-bg-hover: #1a1a1a;
    --vm-cta-secondary-fg: #ffffff;
    --vm-cta-secondary-border: #ffffff;
}

/* Shared shell (sizing + type — aligned with site-ui buttons) */
body.vaca-layout :is(.btn-primary, .btn-secondary, .vm-home-cta__btn),
body.vaca-layout .vm-company-cta:not(.vm-company-cta--quiet),
.vm-explore-carousel .vm-explore-card__cta,
body.vaca-layout.vaca-company-page .vm-company-inquiry button,
body.vm-onboarding-shell .vm-onboarding-btn--primary,
body.vm-onboarding-shell .vm-onboarding-btn--secondary,
body.vm-account-shell :is(
    .vm-account__submit,
    .vm-account__file-button,
    .vm-account-bar__cta,
    .vm-account-picks__save
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    box-sizing: border-box;
    height: var(--vm-cta-height);
    min-height: var(--vm-cta-height);
    padding: 0 var(--vm-cta-padding-inline);
    border-radius: var(--vm-cta-radius);
    font-family: var(--font-secondary, "Space Grotesk", system-ui, sans-serif);
    font-size: var(--vm-cta-font-size);
    font-weight: var(--vm-cta-font-weight);
    letter-spacing: var(--vm-cta-letter-spacing);
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transform: none;
    transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s;
}

/* Primary — VM gold gradient */
body.vaca-layout :is(.btn-primary, .vm-home-cta__btn),
body.vaca-layout .vm-company-cta:not(.vm-company-cta--quiet),
.vm-explore-carousel .vm-explore-card__cta,
body.vaca-layout.vaca-company-page .vm-company-inquiry button,
body.vm-onboarding-shell .vm-onboarding-btn--primary,
body.vm-account-shell :is(
    .vm-account__submit,
    .vm-account__file-button,
    .vm-account-bar__cta,
    .vm-account-picks__save
) {
    border: 0;
    background-color: var(--vm-cta-primary-bg);
    background-image: var(--vm-cta-primary-gradient);
    box-shadow: var(--shadow-base, 0 2px 12px rgba(0, 0, 0, 0.3)),
        var(--vm-cta-primary-glow), var(--vm-cta-primary-inset);
    color: var(--vm-cta-primary-fg);
}

body.vaca-layout :is(.btn-primary, .vm-home-cta__btn):hover,
body.vaca-layout :is(.btn-primary, .vm-home-cta__btn):focus-visible,
body.vaca-layout .vm-company-cta:not(.vm-company-cta--quiet):hover,
body.vaca-layout .vm-company-cta:not(.vm-company-cta--quiet):focus-visible,
.vm-explore-carousel .vm-content-card:hover .vm-explore-card__cta,
.vm-explore-carousel .vm-content-card:focus-visible .vm-explore-card__cta,
body.vaca-layout.vaca-company-page .vm-company-inquiry button:hover,
body.vaca-layout.vaca-company-page .vm-company-inquiry button:focus-visible,
body.vm-onboarding-shell .vm-onboarding-btn--primary:hover:not(:disabled),
body.vm-onboarding-shell .vm-onboarding-btn--primary:focus-visible,
body.vm-account-shell :is(
    .vm-account__submit,
    .vm-account__file-button,
    .vm-account-bar__cta,
    .vm-account-picks__save
):hover,
body.vm-account-shell :is(
    .vm-account__submit,
    .vm-account__file-button,
    .vm-account-bar__cta,
    .vm-account-picks__save
):focus-visible {
    background-color: var(--vm-cta-primary-bg-hover);
    background-image: var(--vm-cta-primary-gradient-hover);
    box-shadow: var(--shadow-base, 0 2px 12px rgba(0, 0, 0, 0.3)),
        var(--vm-cta-primary-glow-hover), var(--vm-cta-primary-inset);
    color: var(--vm-cta-primary-fg);
    text-decoration: none;
    transform: none;
}

/* Secondary — black + white border (site-ui) */
body.vaca-layout .btn-secondary,
body.vm-onboarding-shell .vm-onboarding-btn--secondary {
    border: 1px solid var(--vm-cta-secondary-border);
    background-color: var(--vm-cta-secondary-bg);
    background-image: none;
    box-shadow: none;
    color: var(--vm-cta-secondary-fg);
}

body.vaca-layout .btn-secondary:hover,
body.vaca-layout .btn-secondary:focus-visible,
body.vm-onboarding-shell .vm-onboarding-btn--secondary:hover:not(:disabled),
body.vm-onboarding-shell .vm-onboarding-btn--secondary:focus-visible {
    border-color: var(--vm-cta-secondary-border);
    background-color: var(--vm-cta-secondary-bg-hover);
    background-image: none;
    color: var(--vm-cta-secondary-fg);
    text-decoration: none;
    transform: none;
}

body.vaca-layout :is(.btn-primary, .btn-secondary):disabled,
body.vm-onboarding-shell .vm-onboarding-btn--primary:disabled,
body.vm-onboarding-shell .vm-onboarding-btn--secondary:disabled,
body.vm-onboarding-shell .vm-onboarding-btn[aria-disabled="true"],
body.vm-account-shell :is(.vm-account__submit, .vm-account__file-button):disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

body.vaca-layout :is(.btn-primary, .btn-secondary):focus-visible,
body.vm-onboarding-shell :is(.vm-onboarding-btn--primary, .vm-onboarding-btn--secondary):focus-visible,
body.vm-account-shell :is(.vm-account__submit, .vm-account__file-button):focus-visible {
    outline: 2px solid #fafafa;
    outline-offset: 3px;
}

body.vaca-layout .site-nav__actions .vm-nav-cta.btn-primary {
    flex-shrink: 0;
}