.pa-button {
    align-items: center;
    appearance: none;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    line-height: 1.2;
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 0 18px;
    text-align: center;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
    user-select: none;
}

.pa-button:hover {
    text-decoration: none;
}

.pa-button:focus-visible {
    box-shadow: 0 0 0 3px rgba(43,39,37,.18);
    outline: 0;
}

.pa-button--primary {
    background: var(--pa-dark);
    color: #FFFFFF;
}

.pa-button--primary:hover {
    background: #111111;
    color: #FFFFFF;
}

.pa-button--secondary {
    background: #EEEAE5;
    border-color: #EEEAE5;
    color: var(--pa-text);
}

.pa-button--secondary:hover {
    background: #E5DFD8;
    border-color: #E5DFD8;
    color: var(--pa-text);
}

.pa-button--danger {
    background: #4A1F1F;
    color: #FFFFFF;
}

.pa-button--danger:hover {
    background: #321515;
    color: #FFFFFF;
}

.pa-button--ghost {
    background: transparent;
    border-color: var(--pa-border);
    color: var(--pa-text);
}

.pa-button--ghost:hover {
    background: var(--pa-bg);
    color: var(--pa-text);
}


.pa-button--icon {
    background: transparent;
    border-color: var(--pa-border);
    color: var(--pa-text);
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    flex: 0 0 44px;
    padding: 0;
}

.pa-button--icon:hover {
    background: var(--pa-bg);
}
.pa-ui-interactive-icon .pa-ui-icon,
.pa-ui-interactive-icon__symbol {
    transform-origin: center;
    transition: transform .16s ease;
}

.pa-ui-interactive-icon:hover .pa-ui-icon,
.pa-ui-interactive-icon:focus-visible .pa-ui-icon,
.pa-ui-interactive-icon:hover .pa-ui-interactive-icon__symbol,
.pa-ui-interactive-icon:focus-visible .pa-ui-interactive-icon__symbol {
    transform: scale(1.12);
}

/* Yhteinen kuvakeliike kaikille Hallinnan klikattaville kuvakekomponenteille. */
.pa-app-shell :where(
    .pa-ui-interactive-icon,
    .pa-icon-button,
    .pa-button--icon,
    .pa-functional-icon,
    .pa-ui-arrow-button,
    [data-pa-popup-close],
    [data-calendar-offset]
) :where(.pa-ui-icon, svg, i, img, .pa-header-icon-fallback) {
    transform-origin: center;
    transition: transform .18s cubic-bezier(.2, .75, .25, 1);
}

.pa-app-shell :where(
    .pa-ui-interactive-icon,
    .pa-icon-button,
    .pa-button--icon,
    .pa-functional-icon,
    .pa-ui-arrow-button,
    [data-pa-popup-close],
    [data-calendar-offset]
):is(:hover, :focus-visible) :where(.pa-ui-icon, svg, i, img, .pa-header-icon-fallback) {
    transform: scale(1.14) !important;
}

@media (prefers-reduced-motion: reduce) {
    .pa-app-shell :where(
        .pa-ui-interactive-icon,
        .pa-icon-button,
        .pa-button--icon,
        .pa-functional-icon,
        .pa-ui-arrow-button,
        [data-pa-popup-close],
        [data-calendar-offset]
    ) :where(.pa-ui-icon, svg, i, img, .pa-header-icon-fallback) {
        transition: none !important;
    }
}

.pa-check-action {
    font-size: 0 !important;
}
.pa-check-action::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
}

/* Kun painikkeessa on jo semanttinen kuvake, piirretään check vain kerran. */
.pa-check-action:has(.pa-ui-icon)::before {
    content: none;
}

/*
 * Shared, theme-resistant icon controls. Functional component classes and
 * data attributes stay on the elements; these classes only define the visual
 * treatment shared by App View and its dynamically loaded modules.
 */
button.pa-ui-arrow-button,
a.pa-ui-arrow-button,
.elementor button.pa-ui-arrow-button,
.elementor a.pa-ui-arrow-button {
    align-items: center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    color: #817b76 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    flex: 0 0 34px !important;
    font-family: Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    height: 34px !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    transition: background-color .16s ease, color .16s ease, transform .16s ease !important;
    width: 34px !important;
}

button.pa-ui-arrow-button:hover,
button.pa-ui-arrow-button:focus-visible,
a.pa-ui-arrow-button:hover,
a.pa-ui-arrow-button:focus-visible,
.elementor button.pa-ui-arrow-button:hover,
.elementor button.pa-ui-arrow-button:focus-visible,
.elementor a.pa-ui-arrow-button:hover,
.elementor a.pa-ui-arrow-button:focus-visible {
    background: #f2f0ed !important;
    color: #2b2725 !important;
    outline: none !important;
}

button.pa-ui-arrow-button:active,
a.pa-ui-arrow-button:active {
    transform: scale(.92) !important;
}

button.pa-ui-close-button,
.elementor button.pa-ui-close-button {
    align-items: center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    color: #817b76 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    flex: 0 0 36px !important;
    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    height: 36px !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    text-shadow: none !important;
    transition: background-color .16s ease, color .16s ease, transform .16s ease !important;
    width: 36px !important;
}

button.pa-ui-close-button:hover,
button.pa-ui-close-button:focus-visible,
.elementor button.pa-ui-close-button:hover,
.elementor button.pa-ui-close-button:focus-visible {
    background: #f2f0ed !important;
    color: #2b2725 !important;
    outline: none !important;
}

button.pa-ui-close-button:active {
    transform: scale(.92) !important;
}

button.pa-check-action,
.elementor button.pa-check-action,
input.pa-check-action[type="submit"] {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

.pa-button-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 640px) {
    .pa-button {
        min-height: 48px;
        padding: 13px 20px;
    }

    .pa-button-row {
        align-items: stretch;
        flex-direction: column;
    }

    .pa-button-row .pa-button {
        width: 100%;
    }
}

/* Kaikkien avautuvien näkymien selkeä, yhtenäinen sulkeminen. */
[role="dialog"] button[aria-label^="Sulje"],
[aria-modal="true"] button[aria-label^="Sulje"],
.elementor-popup-modal .dialog-close-button {
    z-index: 100 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid #e1dcd6 !important;
    border-radius: 50% !important;
    background: #f7f4f1 !important;
    color: #292522 !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 6px 18px rgba(28, 24, 21, .1) !important;
}
[role="dialog"] button[aria-label^="Sulje"] svg,
[aria-modal="true"] button[aria-label^="Sulje"] svg { width: 18px !important; height: 18px !important; stroke: currentColor !important; }


/* PääAsia UI polish 2.1.1 source: assets\css\buttons.css */
.pa-button {
    align-items: center;
    appearance: none;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    line-height: 1.2;
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 0 18px;
    text-align: center;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
    user-select: none;
}

/* Sivuston teema lisää muutoin hallinnan painikkeisiin punaisen reunuksen. */
.pa-app-view button,
.pa-visual-modal button,
.pa-profile-modal button,
.pa-request-dialog button,
.pa-quick-add button,
.pa-customer-popup-modal button {
    border-color: transparent !important;
}

.pa-button:hover {
    text-decoration: none;
}

.pa-button:focus-visible {
    box-shadow: 0 0 0 3px rgba(43,39,37,.18);
    outline: 0;
}

.pa-button--primary {
    background: var(--pa-dark);
    color: #FFFFFF;
}

.pa-button--primary:hover {
    background: #111111;
    color: #FFFFFF;
}

.pa-button--secondary {
    background: #EEEAE5;
    border-color: #EEEAE5;
    color: var(--pa-text);
}

.pa-button--secondary:hover {
    background: #E5DFD8;
    border-color: #E5DFD8;
    color: var(--pa-text);
}

.pa-button--danger {
    background: #4A1F1F;
    color: #FFFFFF;
}

.pa-button--danger:hover {
    background: #321515;
    color: #FFFFFF;
}

.pa-button--ghost {
    background: transparent;
    border-color: var(--pa-border);
    color: var(--pa-text);
}

.pa-button--ghost:hover {
    background: var(--pa-bg);
    color: var(--pa-text);
}

.pa-button--icon {
    background: transparent;
    border-color: var(--pa-border);
    color: var(--pa-text);
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    flex: 0 0 44px;
    padding: 0;
}

.pa-button--icon:hover {
    background: var(--pa-bg);
}

/* Tummien hallintapopupien toimintojen tulee erottua myös Elementorin ja
   teeman omien painikesääntöjen läpi. */
.pa-visual-modal .pa-button--primary,
.pa-profile-modal .pa-button--primary,
.pa-request-dialog .pa-button--primary,
.pa-quick-add .pa-button--primary {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #111111 !important;
}

.pa-visual-modal .pa-button--secondary,
.pa-profile-modal .pa-button--secondary,
.pa-request-dialog .pa-button--secondary,
.pa-quick-add .pa-button--secondary {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: #ffffff !important;
}

.pa-visual-modal .pa-button--danger,
.pa-profile-modal .pa-button--danger,
.pa-request-dialog .pa-button--danger {
    background: #7a3038 !important;
    border-color: #9b4650 !important;
    color: #ffffff !important;
}

/*
 * Shared, theme-resistant icon controls. Functional component classes and
 * data attributes stay on the elements; these classes only define the visual
 * treatment shared by App View and its dynamically loaded modules.
 */
button.pa-ui-arrow-button,
a.pa-ui-arrow-button,
.elementor button.pa-ui-arrow-button,
.elementor a.pa-ui-arrow-button {
    align-items: center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    color: #817b76 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    flex: 0 0 34px !important;
    font-family: Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    height: 34px !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    transition: background-color .16s ease, color .16s ease, transform .16s ease !important;
    width: 34px !important;
}

button.pa-ui-arrow-button:hover,
button.pa-ui-arrow-button:focus-visible,
a.pa-ui-arrow-button:hover,
a.pa-ui-arrow-button:focus-visible,
.elementor button.pa-ui-arrow-button:hover,
.elementor button.pa-ui-arrow-button:focus-visible,
.elementor a.pa-ui-arrow-button:hover,
.elementor a.pa-ui-arrow-button:focus-visible {
    background: #f2f0ed !important;
    color: #2b2725 !important;
    outline: none !important;
}

button.pa-ui-arrow-button:active,
a.pa-ui-arrow-button:active {
    transform: scale(.92) !important;
}

button.pa-ui-close-button,
.elementor button.pa-ui-close-button {
    align-items: center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    color: #817b76 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    flex: 0 0 36px !important;
    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    height: 36px !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    text-shadow: none !important;
    transition: background-color .16s ease, color .16s ease, transform .16s ease !important;
    width: 36px !important;
}

button.pa-ui-close-button:hover,
button.pa-ui-close-button:focus-visible,
.elementor button.pa-ui-close-button:hover,
.elementor button.pa-ui-close-button:focus-visible {
    background: #f2f0ed !important;
    color: #2b2725 !important;
    outline: none !important;
}

button.pa-ui-close-button:active {
    transform: scale(.92) !important;
}

.pa-button-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pa-button-row > .pa-button:not(.pa-button--icon),
.pa-popup-footer > .pa-button:not(.pa-button--icon),
.pa-visual-editor__actions > .pa-button:not(.pa-button--icon),
.pa-profile-form__actions > .pa-button:not(.pa-button--icon),
.pa-customer-card__actions > .pa-button:not(.pa-button--icon),
.paaasia-mina__actions > .pa-button:not(.pa-button--icon) {
    flex: 1 1 0;
    min-width: 92px;
}

@media (max-width: 640px) {
    .pa-button {
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        padding: 0 18px;
    }

    .pa-button-row {
        align-items: stretch;
        flex-direction: column;
    }

    .pa-button-row .pa-button {
        width: 100%;
    }
}

/*
 * 2.17.10: Hello Biz määrittää kaikille button:hover- ja button:focus-tiloille
 * pinkin #cc3366-taustan. Hallinnan yhteiset kuvakekomponentit käyttävät aina
 * Design Systemin neutraalia tilaa. Näkymäkohtaiset, tätä tarkemmat säännöt
 * voivat edelleen määrittää esimerkiksi varoitus- ja vahvistusvärit.
 */
.pa-app-view button.pa-icon-button,
.pa-app-view button.pa-ui-interactive-icon,
.pa-app-view button.pa-functional-icon,
.pa-app-view a.pa-icon-button,
.pa-app-view a.pa-ui-interactive-icon,
.pa-app-view a.pa-functional-icon {
    border-color: transparent;
    background-color: transparent;
    color: #4f4d49;
}

.pa-app-view button.pa-icon-button:is(:hover, :focus, :focus-visible),
.pa-app-view button.pa-ui-interactive-icon:is(:hover, :focus, :focus-visible),
.pa-app-view button.pa-functional-icon:is(:hover, :focus, :focus-visible),
.pa-app-view a.pa-icon-button:is(:hover, :focus, :focus-visible),
.pa-app-view a.pa-ui-interactive-icon:is(:hover, :focus, :focus-visible),
.pa-app-view a.pa-functional-icon:is(:hover, :focus, :focus-visible) {
    border-color: transparent;
    background-color: #f0f0ef;
    color: #2b2725;
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}