/* ==========================================================================
   buttons.css
   Button styles from the Figma components: base, sizes, states, and the
   primary, secondary and tertiary buttons with their inverse versions.
   Also the Tabler icon labels (green check, box and arrows).

   01. Base (Brand) Button Styles
   02. Button Size Modifiers
   03. Base (Brand) States
   04. Base (Brand) Inverse Modifier
   05. Primary Button
   06. Primary Inverse
   07. Secondary Button
   08. Secondary Inverse
   08a. Button Link
   09. Tertiary Button
   10. Tertiary Inverse
   11. Tabler Icon Labels
   ========================================================================== */

/* ==== 01. Base (Brand) Button Styles ==== */
.elementor .elementor-button,
.elementor .elementor-button:visited,
.elementor .elementor-button:active {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-8);
    height: var(--btn-density-medium);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    border-radius: var(--btn-border-radius);
    font-family: var(--typography-font-primary);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--weight-bold);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-neg-28);
    color: var(--content-primary-inverse);
    background-color: var(--background-brand);
    border: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.elementor .link-signin .elementor-heading-title {
    font-family: var(--typography-font-primary);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--weight-bold);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-neg-28);
    color: var(--content-primary);
}

.elementor .elementor-button svg {
    width: var(--svg-icon-width);
    height: var(--svg-icon-height);
    flex-shrink: 0; /* Prevents the icon from shrinking on smaller buttons */
    display: block; /* Removes any extra baseline space */
}

.elementor .elementor-button span, /* or .elementor-button-text if Elementor adds a wrapper */
.elementor .elementor-button .elementor-button-text {
    line-height: 1; /* Ensures text stays vertically centered with icon */
    display: inline-flex;
    align-items: center; /* Centers text within its own box */
}

.elementor .elementor-button svg path {
    stroke: var(--content-primary-inverse);
    stroke-width: var(--svg-stroke-width);
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* ==== 02. Button Size Modifiers ==== */
.elementor .btn-large .elementor-button {
    height: var(--btn-density-large);
    padding: var(--btn-padding-large-y) var(--btn-padding-large-x);
    font-size: 16px;
    letter-spacing: var(--ls-neg-32);
}

/* Small Button via Parent Container */
.elementor .btn-small .elementor-button {
    height: var(--btn-density-small);
    line-height: 1;
    box-sizing: border-box;
    padding: var(--btn-padding-small-y) var(--btn-padding-small-x);
    gap: var(--gap-4);
}

/* ==== 03. Base (Brand) States ==== */
.elementor .elementor-button:hover {
    background: linear-gradient(0deg, var(--state-hover, rgba(0, 0, 0, 0.08)) 0%, var(--state-hover, rgba(0, 0, 0, 0.08)) 100%), var(--background-brand, #218241);
}

.elementor .elementor-button:active,
.elementor .pressed .elementor-button {
    background: linear-gradient(0deg, var(--states-press, rgba(0, 0, 0, 0.12)) 0%, var(--states-press, rgba(0, 0, 0, 0.12)) 100%), var(--background-brand, #218241);
}

.elementor .selected .elementor-button {
    background: var(--background-primary-inverse);
}

.elementor .disabled .elementor-button,
.elementor .disabled .elementor-button:hover,
.elementor .elementor-button:disabled {
    background: var(--state-disabled);
    color: var(--content-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

/* ==== 04. Base (Brand) Inverse Modifier ==== */
.elementor .inverse .elementor-button:hover {
    background: linear-gradient(0deg, var(--state-hover-inverse, rgba(255, 255, 255, 0.1)) 0%, var(--state-hover-inverse, rgba(255, 255, 255, 0.1)) 100%), var(--background-brand, #218241);
}

.elementor .inverse .elementor-button:active,
.elementor .inverse.pressed .elementor-button {
    background: linear-gradient(0deg, var(--states-press-inverse, rgba(255, 255, 255, 0.2)) 0%, var(--states-press-inverse, rgba(255, 255, 255, 0.2)) 100%), var(--background-brand, #218241);
}

.elementor .inverse.selected .elementor-button {
    background: var(--background-primary);
    color: var(--content-primary);
}

.elementor .inverse.disabled .elementor-button,
.elementor .inverse.disabled .elementor-button:hover,
.elementor .elementor-button.inverse:disabled {
    background: var(--state-disabled-inverse);
    color: var(--content-disabled-inverse);
    cursor: not-allowed;
    pointer-events: none;
}

/* ==== 05. Primary Button ==== */
.elementor .btn-primary .elementor-button {
    background: var(--background-primary-inverse);
    color: var(--content-primary-inverse);
}

.elementor .btn-primary .elementor-button svg path {
    stroke: var(--content-primary-inverse);
}

.elementor .btn-primary .elementor-button:hover {
    background: linear-gradient(0deg, var(--state-hover-inverse, rgba(255, 255, 255, 0.1)) 0%, var(--state-hover-inverse, rgba(255, 255, 255, 0.1)) 100%), var(--background-primary-inverse);
}

.elementor .btn-primary .elementor-button:active,
.elementor .btn-primary.pressed .elementor-button {
    background: linear-gradient(0deg, var(--states-press-inverse, rgba(255, 255, 255, 0.2)) 0%, var(--states-press-inverse, rgba(255, 255, 255, 0.2)) 100%), var(--background-primary-inverse);
}

.elementor .btn-primary.selected .elementor-button {
    background: var(--background-brand) !important;
}

.elementor .btn-primary.disabled .elementor-button {
    background: var(--state-disabled);
    color: var(--content-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

/* ==== 06. Primary Inverse ==== */
.elementor .inverse.btn-primary .elementor-button {
    background: var(--background-primary);
    color: var(--content-primary);
}

.elementor .inverse.btn-primary .elementor-button svg path {
    stroke: var(--content-primary);
}

.elementor .inverse.btn-primary .elementor-button:hover {
    background: linear-gradient(0deg, var(--state-hover, rgba(0, 0, 0, 0.08)) 0%, var(--state-hover, rgba(0, 0, 0, 0.08)) 100%), var(--background-primary, #fff);
}

.elementor .inverse.btn-primary .elementor-button:active,
.elementor .inverse.btn-primary.pressed .elementor-button {
    background: linear-gradient(0deg, var(--states-press, rgba(0, 0, 0, 0.12)) 0%, var(--states-press, rgba(0, 0, 0, 0.12)) 100%), var(--background-primary, #fff);
}

.elementor .inverse.btn-primary.selected .elementor-button {
    background: var(--background-brand);
    color: var(--content-primary-inverse);
}

.elementor .inverse.btn-primary.disabled .elementor-button,
.elementor .inverse.btn-primary.disabled .elementor-button:hover {
    background: linear-gradient(0deg, var(--background-primary, #fff) 0%, var(--background-primary, #fff) 100%), var(--states-disabled, rgba(0, 0, 0, 0.03));
    color: var(--content-disabled, #929285);
    cursor: not-allowed;
    pointer-events: none;
}

/* ==== 07. Secondary Button ==== */
.elementor .btn-secondary .elementor-button {
    background: transparent;
    border: 1px solid var(--line-emphasis);
    color: var(--content-primary);
}

.elementor .btn-secondary .elementor-button svg path {
    stroke: var(--content-primary);
}

.elementor .btn-secondary .elementor-button:hover {
    background: var(--state-hover);
}

.elementor .btn-secondary .elementor-button:active,
.elementor .btn-secondary.pressed .elementor-button {
    background: var(--state-press);
}

.elementor .btn-secondary.selected .elementor-button {
    background: var(--background-primary-inverse);
    border-color: var(--line-alpha);
    color: var(--content-primary-inverse);
}

.elementor .btn-secondary.disabled .elementor-button {
    background: var(--background-secondary), var(--state-disabled);
    border-color: var(--line-disabled);
    color: var(--content-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

/* ==== 08. Secondary Inverse ==== */
.elementor .btn-secondary.inverse .elementor-button {
    background: transparent;
    border: 1px solid var(--line-emphasis-inverse);
    color: var(--content-primary-inverse);
}

.elementor .inverse.btn-secondary .elementor-button svg path {
    stroke: var(--content-primary-inverse);
}

.elementor .btn-secondary.inverse .elementor-button:hover {
    background: var(--state-hover-inverse);
}

.elementor .btn-secondary.inverse .elementor-button:active,
.elementor .btn-secondary.inverse.pressed .elementor-button {
    background: var(--state-press-inverse);
}

.elementor .btn-secondary.inverse.selected .elementor-button {
    background: var(--background-primary);
    color: var(--content-primary);
}

.elementor .btn-secondary.inverse.disabled .elementor-button {
    background: var(--state-disabled-inverse);
    border-color: var(--line-disabled-inverse);
    color: var(--content-disabled-inverse);
    cursor: not-allowed;
    pointer-events: none;
}

/* ==== 08a. Button Link ==== */
.elementor .link-signin .elementor-button {
}

/* ==== 09. Tertiary Button ==== */
.elementor .btn-tertiary .elementor-button {
    background: transparent;
    border: none;
    color: var(--content-primary);
}

.elementor .btn-tertiary .elementor-button svg path {
    stroke: var(--content-primary);
}

.elementor .btn-tertiary .elementor-button:hover {
    background: var(--state-hover);
}

.elementor .btn-tertiary:active .elementor-button,
.elementor .btn-tertiary.pressed .elementor-button {
    background: var(--state-press);
}

.elementor .btn-tertiary.selected .elementor-button {
    background: var(--background-brand);
    color: var(--content-primary-inverse, #fff);
}

.elementor .btn-tertiary.disabled .elementor-button {
    color: var(--content-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

/* ==== 10. Tertiary Inverse ==== */
.elementor .btn-tertiary.inverse .elementor-button {
    background: transparent;
    border: none;
    color: var(--content-primary-inverse);
}

.elementor .inverse.btn-tertiary .elementor-button svg path {
    stroke: var(--content-primary-inverse);
}

.elementor .btn-tertiary.inverse .elementor-button:hover {
    background: var(--state-hover-inverse);
}

.elementor .btn-tertiary.inverse .elementor-button:active,
.elementor .btn-tertiary.inverse.pressed .elementor-button {
    background: var(--state-press-inverse);
}

.elementor .btn-tertiary.inverse.selected .elementor-button {
    background: var(--background-brand);
}

.elementor .btn-tertiary.inverse.disabled .elementor-button {
    background: var(--state-disabled-inverse);
    color: var(--content-disabled-inverse);
    cursor: not-allowed;
    pointer-events: none;
}

/* ==== 11. Tabler Icon Labels ==== */
/* Green Check Feature Lists */
.elementor .green-check-label .elementor-widget-container {
    padding-left: 32px !important;
    font-size: var(--font-size-14) !important;
    color: var(--content-primary);
}
.green-check-label::before {
    position: absolute;
    left: 0;
    vertical-align: middle; /* Align with text */
    content: "\ea5e";
    font-family: "tabler-icons";
    font-weight: normal;
    font-style: normal;
    font-size: 1.5em; /* icon is 1.5x the text size */
    line-height: 1;
    display: inline-block;
    color: var(--background-brand); /* Makes the icon green */
}

.green-check-label a {
    text-decoration: underline dotted;
}

/* Add a Green Box in front of Element (can be applied to most) */
.green-box-label {
    display: inline-flex; /* Use flex to align icon + text */
    align-items: center; /* Vertically center icon and text */
    gap: 4px; /* Space between icon and text */
    font-size: 1em; /* same size as the surrounding text */
    color: var(--content-primary) !important;
    font-family: var(--typography-font-primary) !important;
    font-weight: var(--weight-bold) !important;
}

/* Add a Green Arrow Pointing Up in front of Element (can be applied to most) */
.green-arrow-up-label {
    display: inline-flex; /* Use flex to align icon + text */
    align-items: center; /* Vertically center icon and text */
    gap: 4px; /* Space between icon and text */
    font-size: 1em; /* same size as the surrounding text */
    color: var(--content-primary) !important;
    font-family: var(--typography-font-primary) !important;
    font-weight: var(--weight-bold) !important;
}

/* Icon before the label */
.green-arrow-up-label::before {
    content: "\ea24";
    font-family: "tabler-icons";
    font-weight: normal;
    font-style: normal;
    font-size: 1.5em; /* icon is 1.5x the text size */
    line-height: 1;
    color: var(--background-brand); /* Green color */
    display: inline-block;
}

/* Add a Green Arrow Pointing Right in front of Element (can be applied to most) */
.green-arrow-label {
    display: inline-flex; /* Use flex to align icon + text */
    align-items: center; /* Vertically center icon and text */
    gap: 4px; /* Space between icon and text */
    font-size: 1em; /* same size as the surrounding text */
    color: var(--content-primary) !important;
    font-family: var(--typography-font-primary) !important;
    font-weight: var(--weight-bold) !important;
}

/* Icon before the label */
.green-arrow-label::before {
    content: "\ea1f";
    font-family: "tabler-icons";
    font-weight: normal;
    font-style: normal;
    font-size: 1.5em; /* icon is 1.5x the text size */
    line-height: 1;
    color: var(--background-brand); /* Green color */
    display: inline-block;
}