/* =====================================================================
   One button component for the whole site. Loaded last (partials/head.php).
   Geometry and typography come only from these tokens; a section may
   recolour its buttons by setting --btn-* on an ancestor.
   :not(.\#) is a specificity bump (+1 class each) so the component wins
   over older page rules without !important. Rollback: remove this file
   and its <link> in head.php.
   ===================================================================== */
:root {
    --btn-h: 48px;
    --btn-px: 20px;
    --btn-gap: 12px;
    --btn-radius: 6px;
    --btn-font: 600 15px/1.25 Inter, Arial, sans-serif;
    --btn-icon: 18px;
    --btn-ease: cubic-bezier(.2, .7, .2, 1);
    --btn-bg: #c6dfb7;
    --btn-ink: #112015;
    --btn-bg-hover: #dcedd2;
    --btn-line: #c6dfb7;
    --btn-ghost-ink: #eef3ea;
    --btn-ghost-line: #7f9a83;
    --btn-ghost-hover: rgba(198, 223, 183, .14);
    --btn-focus: #e5f2e7;
}

/* Shape shared by every button and link-button */
:is(.v-button, .estimate-next, .estimate-back, .estimate-add, .inquiry-next, .inquiry-back, .inquiry-secondary,
    .contact-route-button, .btn-high-contrast, .btn-outline, .cookie-btn, .header-cta, .header-contact):not(.\#):not(.\#) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    min-height: var(--btn-h);
    padding: 10px var(--btn-px);
    border: 1px solid var(--btn-line);
    border-radius: var(--btn-radius);
    font: var(--btn-font);
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    box-shadow: none;
    filter: none;
    transform: none;
    transition: background-color .22s var(--btn-ease), border-color .22s var(--btn-ease), color .22s var(--btn-ease), transform .22s var(--btn-ease);
}

/* Filled (main action) */
:is(.v-button, .estimate-next, .inquiry-next, .contact-route-button, .btn-high-contrast, .cookie-btn--primary, .header-cta):not(.\#):not(.\#) {
    background: var(--btn-bg);
    border-color: var(--btn-line);
    color: var(--btn-ink);
}
:is(.v-button, .estimate-next, .inquiry-next, .contact-route-button, .btn-high-contrast, .cookie-btn--primary, .header-cta):not(.\#):not(.\#):hover {
    background: var(--btn-bg-hover);
    border-color: var(--btn-bg-hover);
    color: var(--btn-ink);
}

/* Outlined (secondary action) */
:is(.estimate-back, .estimate-add, .inquiry-back, .inquiry-secondary, .btn-outline, .cookie-btn--secondary, .header-contact, .v-button.v-outline):not(.\#):not(.\#) {
    background: transparent;
    border-color: var(--btn-ghost-line);
    color: var(--btn-ghost-ink);
}
:is(.estimate-back, .estimate-add, .inquiry-back, .inquiry-secondary, .btn-outline, .cookie-btn--secondary, .header-contact, .v-button.v-outline):not(.\#):not(.\#):hover {
    background: var(--btn-ghost-hover);
    border-color: var(--btn-ghost-ink);
    color: var(--btn-ghost-ink);
}

/* Icons (↗ → ← or SVG) sit on the text's optical centre with a fixed gap */
:is(.v-button, .estimate-next, .estimate-back, .estimate-add, .inquiry-next, .inquiry-back, .inquiry-secondary, .contact-route-button):not(.\#):not(.\#) > :is(span[aria-hidden="true"], svg) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--btn-icon);
    height: var(--btn-icon);
    font-size: var(--btn-icon);
    line-height: 1;
    transition: transform .22s var(--btn-ease);
}
@media (hover: hover) {
    :is(.v-button, .estimate-next, .inquiry-next, .contact-route-button):not(.\#):not(.\#):hover > span[aria-hidden="true"] { transform: translate(2px, -2px); }
    .estimate-back:not(.\#):not(.\#):hover > span[aria-hidden="true"] { transform: translateX(-2px); }
}

/* States */
:is(.v-button, .estimate-next, .estimate-back, .estimate-add, .inquiry-next, .inquiry-back, .inquiry-secondary,
    .contact-route-button, .btn-high-contrast, .btn-outline, .cookie-btn, .header-cta, .header-contact):not(.\#):not(.\#):focus-visible {
    outline: 3px solid var(--btn-focus);
    outline-offset: 3px;
}
:is(.v-button, .estimate-next, .estimate-back, .estimate-add, .inquiry-next, .inquiry-back, .inquiry-secondary,
    .contact-route-button, .btn-high-contrast, .btn-outline, .cookie-btn, .header-cta, .header-contact):not(.\#):not(.\#):active {
    transform: scale(.98);
    transition-duration: .08s;
}
:is(.estimate-next, .estimate-back, .inquiry-next, .inquiry-back, .cookie-btn):not(.\#):not(.\#):disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

/* Rows: equal heights, one gap, no shifting. Main action last in the DOM, first on narrow screens. */
:is(.estimate-nav, .inquiry-nav, .v-actions, .guide-actions):not(.\#) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
}
:is(.estimate-nav, .inquiry-nav):not(.\#) { justify-content: flex-end; }
.estimate-nav:not(.\#) > .estimate-back { margin-right: auto; }
.estimate-nav:not(.\#) > .estimate-next { margin-left: 0; }
:is(.v-actions, .guide-actions):not(.\#) { align-items: center; }
@media (max-width: 559px) {
    :is(.estimate-nav, .inquiry-nav):not(.\#) { flex-direction: column-reverse; align-items: stretch; }
    :is(.estimate-nav, .inquiry-nav):not(.\#) > button { width: 100%; margin: 0; }
    .estimate-nav:not(.\#) > .estimate-back { margin-right: 0; }
}

/* Text links next to buttons share the row height and a 44 px target */
.v-text-link:not(.\#):not(.\#) { min-height: 44px; box-sizing: border-box; }

/* Header buttons: the same component, slightly tighter */
.sticky-header :is(.header-cta, .header-contact):not(.\#):not(.\#) { --btn-px: 18px; font-size: 14.5px; }

/* Contexts */
.home-cinema { --btn-bg: #d0e5c5; --btn-line: #d0e5c5; --btn-bg-hover: #e6f2df; }
.sx-band--accent { --btn-bg: #0f1d14; --btn-ink: #eef6e8; --btn-line: #0f1d14; --btn-bg-hover: #24382a; }
.sx-band--light { --btn-ghost-ink: #13221a; --btn-ghost-line: #3a4f40; --btn-ghost-hover: rgba(19, 34, 26, .06); }

@media (prefers-reduced-motion: reduce) {
    :is(.v-button, .estimate-next, .estimate-back, .estimate-add, .inquiry-next, .inquiry-back, .inquiry-secondary,
        .contact-route-button, .btn-high-contrast, .btn-outline, .cookie-btn, .header-cta, .header-contact):not(.\#):not(.\#),
    :is(.v-button, .estimate-next, .estimate-back, .estimate-add, .inquiry-next, .inquiry-back, .inquiry-secondary, .contact-route-button):not(.\#):not(.\#) > :is(span[aria-hidden="true"], svg) {
        transition: none;
    }
}