.np-button,
.np-btn,
button.np-button,
button.np-btn,
input[type="button"].np-button,
input[type="button"].np-btn,
input[type="reset"].np-button,
input[type="reset"].np-btn,
input[type="submit"].np-button,
input[type="submit"].np-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--np-spacing-xs, 0.5rem);
    min-width: 0;
    min-height: var(--np-button-height-md, 3rem);
    padding-block: 0;
    padding-inline: var(--np-button-padding-x-md, 1.25rem);
    overflow: hidden;
    background: var(--np-button-secondary-background, #ffffff);
    border: var(--np-button-border-width, 1px) var(--np-button-border-style, solid) var(--np-button-secondary-border-color, #e0e7ff);
    border-radius: var(--np-button-radius, 999px);
    color: var(--np-button-secondary-color, #4f46e5);
    font-family: var(--np-button-font-family, Tahoma, Arial, sans-serif);
    font-size: var(--np-button-font-size, 0.875rem);
    font-weight: var(--np-button-font-weight, 700);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--np-button-secondary-shadow, 0 1px 3px rgba(15, 23, 42, 0.06));
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    transition: var(--np-button-transition, transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease);
}

.np-button:hover,
.np-button:focus,
.np-btn:hover,
.np-btn:focus {
    transform: translateY(-2px);
    background: var(--np-button-secondary-background-hover, #eef2ff);
    border-color: var(--np-color-primary-subtle, #e0e7ff);
    color: var(--np-button-secondary-color, #4f46e5);
    text-decoration: none;
    box-shadow: var(--np-shadow-sm, 0 8px 24px rgba(15, 23, 42, 0.08));
}

.np-button:active,
.np-btn:active {
    transform: translateY(0);
    box-shadow: var(--np-shadow-xs, 0 1px 3px rgba(15, 23, 42, 0.06));
}

.np-button:disabled,
.np-button[disabled],
.np-button[aria-disabled="true"],
.np-button.is-disabled,
.np-btn:disabled,
.np-btn[disabled],
.np-btn[aria-disabled="true"],
.np-btn.is-disabled {
    opacity: 0.58;
    pointer-events: none;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

.np-button-primary,
.np-btn-primary {
    background: var(--np-button-primary-background, linear-gradient(135deg, #4f46e5 0%, #38bdf8 100%));
    border-color: var(--np-button-primary-border-color, transparent);
    color: var(--np-button-primary-color, #ffffff);
    box-shadow: var(--np-button-primary-shadow, 0 18px 48px rgba(79, 70, 229, 0.22));
}

.np-button-primary:hover,
.np-button-primary:focus,
.np-btn-primary:hover,
.np-btn-primary:focus {
    background: var(--np-button-primary-background-hover, linear-gradient(135deg, #4338ca 0%, #0ea5e9 100%));
    border-color: var(--np-button-primary-border-color, transparent);
    color: var(--np-button-primary-color, #ffffff);
    box-shadow: var(--np-shadow-primary, 0 18px 48px rgba(79, 70, 229, 0.22));
}

.np-button-secondary,
.np-btn-secondary {
    background: var(--np-button-secondary-background, #ffffff);
    border-color: var(--np-button-secondary-border-color, #e0e7ff);
    color: var(--np-button-secondary-color, #4f46e5);
    box-shadow: var(--np-button-secondary-shadow, 0 1px 3px rgba(15, 23, 42, 0.06));
}

.np-button-secondary:hover,
.np-button-secondary:focus,
.np-btn-secondary:hover,
.np-btn-secondary:focus {
    background: var(--np-button-secondary-background-hover, #eef2ff);
    border-color: var(--np-color-primary-subtle, #e0e7ff);
    color: var(--np-button-secondary-color, #4f46e5);
}

.np-button-outline,
.np-btn-outline {
    background: var(--np-button-outline-background, transparent);
    border-color: var(--np-button-outline-border-color, rgba(79, 70, 229, 0.34));
    color: var(--np-button-outline-color, #4f46e5);
    box-shadow: var(--np-button-outline-shadow, none);
}

.np-button-outline:hover,
.np-button-outline:focus,
.np-btn-outline:hover,
.np-btn-outline:focus {
    background: var(--np-button-outline-background-hover, #eef2ff);
    border-color: var(--np-color-primary, #4f46e5);
    color: var(--np-button-outline-color, #4f46e5);
}

.np-button-ghost,
.np-btn-ghost {
    background: var(--np-button-ghost-background, transparent);
    border-color: var(--np-button-ghost-border-color, transparent);
    color: var(--np-button-ghost-color, #334155);
    box-shadow: var(--np-button-ghost-shadow, none);
}

.np-button-ghost:hover,
.np-button-ghost:focus,
.np-btn-ghost:hover,
.np-btn-ghost:focus {
    background: var(--np-button-ghost-background-hover, #f1f5f9);
    border-color: transparent;
    color: var(--np-color-primary, #4f46e5);
    box-shadow: none;
}

.np-button-cta,
.np-btn-cta {
    background: var(--np-button-cta-background, linear-gradient(135deg, #a3e635 0%, #2dd4bf 100%));
    border-color: var(--np-button-cta-border-color, transparent);
    color: var(--np-button-cta-color, #1f2937);
    box-shadow: var(--np-button-cta-shadow, 0 18px 48px rgba(163, 230, 53, 0.2));
}

.np-button-cta:hover,
.np-button-cta:focus,
.np-btn-cta:hover,
.np-btn-cta:focus {
    background: var(--np-button-cta-background-hover, linear-gradient(135deg, #84cc16 0%, #14b8a6 100%));
    border-color: var(--np-button-cta-border-color, transparent);
    color: var(--np-button-cta-color, #1f2937);
    box-shadow: var(--np-shadow-lime, 0 18px 48px rgba(163, 230, 53, 0.2));
}

.np-button-danger,
.np-btn-danger {
    background: var(--np-button-danger-background, #dc2626);
    border-color: var(--np-button-danger-border-color, transparent);
    color: var(--np-button-danger-color, #ffffff);
    box-shadow: 0 18px 42px rgba(var(--np-color-danger-rgb), 0.18);
}

.np-button-danger:hover,
.np-button-danger:focus,
.np-btn-danger:hover,
.np-btn-danger:focus {
    background: var(--np-button-danger-background-hover, #b91c1c);
    border-color: var(--np-button-danger-border-color, transparent);
    color: var(--np-button-danger-color, #ffffff);
}

.np-button-success,
.np-btn-success {
    background: var(--np-color-success, #16a34a);
    border-color: transparent;
    color: var(--np-color-white, #ffffff);
    box-shadow: 0 18px 42px rgba(var(--np-color-success-rgb), 0.18);
}

.np-button-success:hover,
.np-button-success:focus,
.np-btn-success:hover,
.np-btn-success:focus {
    background: var(--np-color-success-hover, #15803d);
    border-color: transparent;
    color: var(--np-color-white, #ffffff);
}

.np-button-warning,
.np-btn-warning {
    background: var(--np-color-warning, #f59e0b);
    border-color: transparent;
    color: var(--np-color-heading, #0f172a);
    box-shadow: 0 18px 42px rgba(var(--np-color-warning-rgb), 0.18);
}

.np-button-warning:hover,
.np-button-warning:focus,
.np-btn-warning:hover,
.np-btn-warning:focus {
    background: var(--np-color-warning-hover, #d97706);
    border-color: transparent;
    color: var(--np-color-heading, #0f172a);
}

.np-button-info,
.np-btn-info {
    background: var(--np-color-info, #2563eb);
    border-color: transparent;
    color: var(--np-color-white, #ffffff);
    box-shadow: 0 18px 42px rgba(var(--np-color-info-rgb), 0.18);
}

.np-button-info:hover,
.np-button-info:focus,
.np-btn-info:hover,
.np-btn-info:focus {
    background: var(--np-color-info-hover, #1d4ed8);
    border-color: transparent;
    color: var(--np-color-white, #ffffff);
}

.np-button-sky,
.np-btn-sky {
    background: var(--np-color-sky, #38bdf8);
    border-color: transparent;
    color: var(--np-color-heading, #0f172a);
    box-shadow: var(--np-shadow-sky, 0 18px 48px rgba(56, 189, 248, 0.18));
}

.np-button-sky:hover,
.np-button-sky:focus,
.np-btn-sky:hover,
.np-btn-sky:focus {
    background: var(--np-color-sky-hover, #0ea5e9);
    border-color: transparent;
    color: var(--np-color-white, #ffffff);
}

.np-button-teal,
.np-btn-teal {
    background: var(--np-color-teal, #2dd4bf);
    border-color: transparent;
    color: var(--np-color-heading, #0f172a);
    box-shadow: var(--np-shadow-teal, 0 18px 48px rgba(45, 212, 191, 0.18));
}

.np-button-teal:hover,
.np-button-teal:focus,
.np-btn-teal:hover,
.np-btn-teal:focus {
    background: var(--np-color-teal-hover, #14b8a6);
    border-color: transparent;
    color: var(--np-color-white, #ffffff);
}

.np-button-lime,
.np-btn-lime {
    background: var(--np-color-lime, #a3e635);
    border-color: transparent;
    color: var(--np-color-heading, #0f172a);
    box-shadow: var(--np-shadow-lime, 0 18px 48px rgba(163, 230, 53, 0.2));
}

.np-button-lime:hover,
.np-button-lime:focus,
.np-btn-lime:hover,
.np-btn-lime:focus {
    background: var(--np-color-lime-hover, #84cc16);
    border-color: transparent;
    color: var(--np-color-heading, #0f172a);
}

.np-button-light,
.np-btn-light {
    background: var(--np-color-white, #ffffff);
    border-color: rgba(255, 255, 255, 0.42);
    color: var(--np-color-heading, #0f172a);
    box-shadow: var(--np-shadow-sm, 0 8px 24px rgba(15, 23, 42, 0.08));
}

.np-button-light:hover,
.np-button-light:focus,
.np-btn-light:hover,
.np-btn-light:focus {
    background: var(--np-color-primary-soft, #eef2ff);
    border-color: var(--np-color-white, #ffffff);
    color: var(--np-color-primary, #4f46e5);
}

.np-button-dark,
.np-btn-dark {
    background: var(--np-color-heading, #0f172a);
    border-color: transparent;
    color: var(--np-color-white, #ffffff);
    box-shadow: var(--np-shadow-md, 0 14px 38px rgba(15, 23, 42, 0.1));
}

.np-button-dark:hover,
.np-button-dark:focus,
.np-btn-dark:hover,
.np-btn-dark:focus {
    background: var(--np-color-text, #334155);
    border-color: transparent;
    color: var(--np-color-white, #ffffff);
}

.np-button-white,
.np-btn-white {
    background: var(--np-color-white, #ffffff);
    border-color: var(--np-color-white, #ffffff);
    color: var(--np-color-primary, #4f46e5);
    box-shadow: var(--np-shadow-sm, 0 8px 24px rgba(15, 23, 42, 0.08));
}

.np-button-white:hover,
.np-button-white:focus,
.np-btn-white:hover,
.np-btn-white:focus {
    background: var(--np-color-primary-soft, #eef2ff);
    border-color: var(--np-color-white, #ffffff);
    color: var(--np-color-primary-active, #3730a3);
}

.np-button-xs,
.np-btn-xs {
    min-height: var(--np-button-height-xs, 2.25rem);
    padding-inline: var(--np-button-padding-x-xs, 0.875rem);
    font-size: var(--np-font-size-xs, 0.75rem);
}

.np-button-sm,
.np-btn-sm {
    min-height: var(--np-button-height-sm, 2.5rem);
    padding-inline: var(--np-button-padding-x-sm, 1rem);
    font-size: var(--np-font-size-sm, 0.875rem);
}

.np-button-md,
.np-btn-md {
    min-height: var(--np-button-height-md, 3rem);
    padding-inline: var(--np-button-padding-x-md, 1.25rem);
    font-size: var(--np-button-font-size, 0.875rem);
}

.np-button-lg,
.np-btn-lg {
    min-height: var(--np-button-height-lg, 3.5rem);
    padding-inline: var(--np-button-padding-x-lg, 1.75rem);
    font-size: var(--np-font-size-md, 1rem);
}

.np-button-xl,
.np-btn-xl {
    min-height: var(--np-button-height-xl, 4rem);
    padding-inline: var(--np-button-padding-x-xl, 2.25rem);
    font-size: var(--np-font-size-lg, 1.125rem);
}

.np-button-square,
.np-btn-square,
.np-button-icon,
.np-btn-icon {
    width: var(--np-button-height-md, 3rem);
    min-width: var(--np-button-height-md, 3rem);
    height: var(--np-button-height-md, 3rem);
    min-height: var(--np-button-height-md, 3rem);
    padding: 0;
}

.np-button-icon.np-button-xs,
.np-btn-icon.np-btn-xs,
.np-button-square.np-button-xs,
.np-btn-square.np-btn-xs {
    width: var(--np-button-height-xs, 2.25rem);
    min-width: var(--np-button-height-xs, 2.25rem);
    height: var(--np-button-height-xs, 2.25rem);
    min-height: var(--np-button-height-xs, 2.25rem);
}

.np-button-icon.np-button-sm,
.np-btn-icon.np-btn-sm,
.np-button-square.np-button-sm,
.np-btn-square.np-btn-sm {
    width: var(--np-button-height-sm, 2.5rem);
    min-width: var(--np-button-height-sm, 2.5rem);
    height: var(--np-button-height-sm, 2.5rem);
    min-height: var(--np-button-height-sm, 2.5rem);
}

.np-button-icon.np-button-lg,
.np-btn-icon.np-btn-lg,
.np-button-square.np-button-lg,
.np-btn-square.np-btn-lg {
    width: var(--np-button-height-lg, 3.5rem);
    min-width: var(--np-button-height-lg, 3.5rem);
    height: var(--np-button-height-lg, 3.5rem);
    min-height: var(--np-button-height-lg, 3.5rem);
}

.np-button-icon.np-button-xl,
.np-btn-icon.np-btn-xl,
.np-button-square.np-button-xl,
.np-btn-square.np-btn-xl {
    width: var(--np-button-height-xl, 4rem);
    min-width: var(--np-button-height-xl, 4rem);
    height: var(--np-button-height-xl, 4rem);
    min-height: var(--np-button-height-xl, 4rem);
}

.np-button-rounded,
.np-btn-rounded {
    border-radius: var(--np-radius-lg, 1rem);
}

.np-button-pill,
.np-btn-pill {
    border-radius: var(--np-radius-pill, 999px);
}

.np-button-circle,
.np-btn-circle {
    border-radius: var(--np-radius-circle, 50%);
}

.np-button-block,
.np-btn-block {
    width: 100%;
}

.np-button-wide,
.np-btn-wide {
    min-width: min(100%, 12rem);
}

.np-button-fluid,
.np-btn-fluid {
    width: 100%;
    max-width: none;
}

.np-button-link,
.np-btn-link {
    min-height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--np-color-primary, #4f46e5);
    box-shadow: none;
    font-weight: var(--np-font-weight-bold, 700);
    text-decoration: none;
}

.np-button-link:hover,
.np-button-link:focus,
.np-btn-link:hover,
.np-btn-link:focus {
    transform: none;
    background: transparent;
    color: var(--np-color-sky, #38bdf8);
    box-shadow: none;
    text-decoration: none;
}

.np-button-underline,
.np-btn-underline {
    min-height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--np-color-primary, #4f46e5);
    box-shadow: none;
    font-weight: var(--np-font-weight-bold, 700);
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

.np-button-underline:hover,
.np-button-underline:focus,
.np-btn-underline:hover,
.np-btn-underline:focus {
    transform: none;
    background: transparent;
    color: var(--np-color-sky, #38bdf8);
    box-shadow: none;
    text-decoration-thickness: 0.12em;
}

.np-button-soft-primary,
.np-btn-soft-primary {
    background: var(--np-color-primary-soft, #eef2ff);
    border-color: var(--np-color-primary-subtle, #e0e7ff);
    color: var(--np-color-primary-active, #3730a3);
    box-shadow: none;
}

.np-button-soft-primary:hover,
.np-button-soft-primary:focus,
.np-btn-soft-primary:hover,
.np-btn-soft-primary:focus {
    background: var(--np-color-primary, #4f46e5);
    border-color: var(--np-color-primary, #4f46e5);
    color: var(--np-color-white, #ffffff);
}

.np-button-soft-sky,
.np-btn-soft-sky {
    background: var(--np-color-sky-soft, #e0f2fe);
    border-color: var(--np-color-sky-subtle, #bae6fd);
    color: var(--np-color-sky-active, #0284c7);
    box-shadow: none;
}

.np-button-soft-sky:hover,
.np-button-soft-sky:focus,
.np-btn-soft-sky:hover,
.np-btn-soft-sky:focus {
    background: var(--np-color-sky, #38bdf8);
    border-color: var(--np-color-sky, #38bdf8);
    color: var(--np-color-heading, #0f172a);
}

.np-button-soft-teal,
.np-btn-soft-teal {
    background: var(--np-color-teal-soft, #ccfbf1);
    border-color: var(--np-color-teal-subtle, #99f6e4);
    color: var(--np-color-teal-active, #0f766e);
    box-shadow: none;
}

.np-button-soft-teal:hover,
.np-button-soft-teal:focus,
.np-btn-soft-teal:hover,
.np-btn-soft-teal:focus {
    background: var(--np-color-teal, #2dd4bf);
    border-color: var(--np-color-teal, #2dd4bf);
    color: var(--np-color-heading, #0f172a);
}

.np-button-soft-lime,
.np-btn-soft-lime {
    background: var(--np-color-lime-soft, #ecfccb);
    border-color: var(--np-color-lime-subtle, #d9f99d);
    color: var(--np-color-lime-active, #65a30d);
    box-shadow: none;
}

.np-button-soft-lime:hover,
.np-button-soft-lime:focus,
.np-btn-soft-lime:hover,
.np-btn-soft-lime:focus {
    background: var(--np-color-lime, #a3e635);
    border-color: var(--np-color-lime, #a3e635);
    color: var(--np-color-heading, #0f172a);
}

.np-button-soft-danger,
.np-btn-soft-danger {
    background: var(--np-color-danger-soft, #fee2e2);
    border-color: rgba(var(--np-color-danger-rgb), 0.18);
    color: var(--np-color-danger, #dc2626);
    box-shadow: none;
}

.np-button-soft-danger:hover,
.np-button-soft-danger:focus,
.np-btn-soft-danger:hover,
.np-btn-soft-danger:focus {
    background: var(--np-color-danger, #dc2626);
    border-color: var(--np-color-danger, #dc2626);
    color: var(--np-color-white, #ffffff);
}

.np-button-soft-success,
.np-btn-soft-success {
    background: var(--np-color-success-soft, #dcfce7);
    border-color: rgba(var(--np-color-success-rgb), 0.18);
    color: var(--np-color-success, #16a34a);
    box-shadow: none;
}

.np-button-soft-success:hover,
.np-button-soft-success:focus,
.np-btn-soft-success:hover,
.np-btn-soft-success:focus {
    background: var(--np-color-success, #16a34a);
    border-color: var(--np-color-success, #16a34a);
    color: var(--np-color-white, #ffffff);
}

.np-button-soft-warning,
.np-btn-soft-warning {
    background: var(--np-color-warning-soft, #fef3c7);
    border-color: rgba(var(--np-color-warning-rgb), 0.18);
    color: var(--np-color-warning-hover, #d97706);
    box-shadow: none;
}

.np-button-soft-warning:hover,
.np-button-soft-warning:focus,
.np-btn-soft-warning:hover,
.np-btn-soft-warning:focus {
    background: var(--np-color-warning, #f59e0b);
    border-color: var(--np-color-warning, #f59e0b);
    color: var(--np-color-heading, #0f172a);
}

.np-button-soft-info,
.np-btn-soft-info {
    background: var(--np-color-info-soft, #dbeafe);
    border-color: rgba(var(--np-color-info-rgb), 0.18);
    color: var(--np-color-info, #2563eb);
    box-shadow: none;
}

.np-button-soft-info:hover,
.np-button-soft-info:focus,
.np-btn-soft-info:hover,
.np-btn-soft-info:focus {
    background: var(--np-color-info, #2563eb);
    border-color: var(--np-color-info, #2563eb);
    color: var(--np-color-white, #ffffff);
}

.np-button .np-button-icon,
.np-button .np-btn-icon-inner,
.np-btn .np-button-icon,
.np-btn .np-btn-icon-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125em;
    height: 1.125em;
    flex: 0 0 auto;
    line-height: 1;
}

.np-button .np-button-icon svg,
.np-button .np-btn-icon-inner svg,
.np-btn .np-button-icon svg,
.np-btn .np-btn-icon-inner svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.np-button-icon-start,
.np-btn-icon-start {
    flex-direction: row;
}

.np-button-icon-end,
.np-btn-icon-end {
    flex-direction: row;
}

.np-button-icon-end .np-button-icon,
.np-button-icon-end .np-btn-icon-inner,
.np-btn-icon-end .np-button-icon,
.np-btn-icon-end .np-btn-icon-inner {
    order: 2;
}

.np-button-icon-start .np-button-text,
.np-btn-icon-start .np-button-text {
    order: 2;
}

.np-button-icon-end .np-button-text,
.np-btn-icon-end .np-button-text {
    order: 1;
}

.np-button-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.np-button-arrow,
.np-btn-arrow {
    gap: var(--np-spacing-sm, 0.75rem);
}

.np-button-arrow::after,
.np-btn-arrow::after {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    line-height: 1;
    transition: transform var(--np-transition-fast, 160ms ease);
    content: "←";
}

[dir="ltr"] .np-button-arrow::after,
[dir="ltr"] .np-btn-arrow::after,
.ltr .np-button-arrow::after,
.ltr .np-btn-arrow::after {
    content: "→";
}

.np-button-arrow:hover::after,
.np-button-arrow:focus::after,
.np-btn-arrow:hover::after,
.np-btn-arrow:focus::after {
    transform: translateX(-3px);
}

[dir="ltr"] .np-button-arrow:hover::after,
[dir="ltr"] .np-button-arrow:focus::after,
[dir="ltr"] .np-btn-arrow:hover::after,
[dir="ltr"] .np-btn-arrow:focus::after,
.ltr .np-button-arrow:hover::after,
.ltr .np-button-arrow:focus::after,
.ltr .np-btn-arrow:hover::after,
.ltr .np-btn-arrow:focus::after {
    transform: translateX(3px);
}

.np-button-external,
.np-btn-external {
    gap: var(--np-spacing-sm, 0.75rem);
}

.np-button-external::after,
.np-btn-external::after {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    font-size: 0.85em;
    line-height: 1;
    content: "↗";
}

.np-button-loading,
.np-btn-loading,
.np-button.is-loading,
.np-btn.is-loading {
    color: transparent !important;
    pointer-events: none;
}

.np-button-loading::after,
.np-btn-loading::after,
.np-button.is-loading::after,
.np-btn.is-loading::after {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 1.125rem;
    height: 1.125rem;
    margin-block-start: -0.5625rem;
    margin-inline-start: -0.5625rem;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: var(--np-radius-circle, 50%);
    color: inherit;
    animation: np-button-spin 700ms linear infinite;
    content: "";
}

[dir="rtl"] .np-button-loading::after,
[dir="rtl"] .np-btn-loading::after,
[dir="rtl"] .np-button.is-loading::after,
[dir="rtl"] .np-btn.is-loading::after,
.rtl .np-button-loading::after,
.rtl .np-btn-loading::after,
.rtl .np-button.is-loading::after,
.rtl .np-btn.is-loading::after {
    margin-inline-start: 0;
    margin-inline-end: -0.5625rem;
}

.np-button-primary.np-button-loading::after,
.np-button-primary.is-loading::after,
.np-btn-primary.np-btn-loading::after,
.np-btn-primary.is-loading::after,
.np-button-danger.np-button-loading::after,
.np-button-danger.is-loading::after,
.np-btn-danger.np-btn-loading::after,
.np-btn-danger.is-loading::after,
.np-button-success.np-button-loading::after,
.np-button-success.is-loading::after,
.np-btn-success.np-btn-loading::after,
.np-btn-success.is-loading::after,
.np-button-info.np-button-loading::after,
.np-button-info.is-loading::after,
.np-btn-info.np-btn-loading::after,
.np-btn-info.is-loading::after,
.np-button-dark.np-button-loading::after,
.np-button-dark.is-loading::after,
.np-btn-dark.np-btn-loading::after,
.np-btn-dark.is-loading::after {
    color: var(--np-color-white, #ffffff);
}

.np-button-group,
.np-btn-group,
.np-button-row,
.np-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--np-spacing-sm, 0.75rem);
}

.np-button-group.is-center,
.np-btn-group.is-center,
.np-button-row.is-center,
.np-btn-row.is-center {
    justify-content: center;
}

.np-button-group.is-end,
.np-btn-group.is-end,
.np-button-row.is-end,
.np-btn-row.is-end {
    justify-content: flex-end;
}

.np-button-group.is-between,
.np-btn-group.is-between,
.np-button-row.is-between,
.np-btn-row.is-between {
    justify-content: space-between;
}

.np-button-group.is-stretch,
.np-btn-group.is-stretch,
.np-button-row.is-stretch,
.np-btn-row.is-stretch {
    align-items: stretch;
}

.np-button-group.is-stretch > *,
.np-btn-group.is-stretch > *,
.np-button-row.is-stretch > *,
.np-btn-row.is-stretch > * {
    flex: 1 1 0;
}

.np-button-stack,
.np-btn-stack {
    display: grid;
    gap: var(--np-spacing-sm, 0.75rem);
}

.np-button-stack > *,
.np-btn-stack > * {
    width: 100%;
}

.np-button-segment,
.np-btn-segment {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    background: var(--np-color-surface, #ffffff);
    border: var(--np-border, 1px solid #e2e8f0);
    border-radius: var(--np-radius-pill, 999px);
    box-shadow: var(--np-shadow-xs, 0 1px 3px rgba(15, 23, 42, 0.06));
}

.np-button-segment .np-button,
.np-button-segment .np-btn,
.np-btn-segment .np-button,
.np-btn-segment .np-btn {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.np-button-segment .np-button + .np-button,
.np-button-segment .np-btn + .np-btn,
.np-btn-segment .np-button + .np-button,
.np-btn-segment .np-btn + .np-btn {
    border-inline-start: var(--np-border, 1px solid #e2e8f0);
}

.np-button-segment .np-button:first-child,
.np-button-segment .np-btn:first-child,
.np-btn-segment .np-button:first-child,
.np-btn-segment .np-btn:first-child {
    border-start-start-radius: var(--np-radius-pill, 999px);
    border-end-start-radius: var(--np-radius-pill, 999px);
}

.np-button-segment .np-button:last-child,
.np-button-segment .np-btn:last-child,
.np-btn-segment .np-button:last-child,
.np-btn-segment .np-btn:last-child {
    border-start-end-radius: var(--np-radius-pill, 999px);
    border-end-end-radius: var(--np-radius-pill, 999px);
}

.np-button-floating,
.np-btn-floating {
    position: fixed;
    z-index: var(--np-z-index-sticky, 100);
    inset-inline-end: var(--np-spacing-lg, 1.5rem);
    inset-block-end: max(var(--np-spacing-lg, 1.5rem), env(safe-area-inset-bottom));
    box-shadow: var(--np-shadow-lg, 0 24px 70px rgba(15, 23, 42, 0.14));
}

.np-button-floating.is-start,
.np-btn-floating.is-start {
    inset-inline-start: var(--np-spacing-lg, 1.5rem);
    inset-inline-end: auto;
}

.np-button-floating.is-top,
.np-btn-floating.is-top {
    inset-block-start: calc(var(--np-admin-offset, 0px) + var(--np-spacing-lg, 1.5rem));
    inset-block-end: auto;
}

.np-button-badge,
.np-btn-badge {
    position: relative;
}

.np-button-badge[data-count]::after,
.np-btn-badge[data-count]::after {
    position: absolute;
    inset-block-start: -0.45rem;
    inset-inline-end: -0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding-inline: 0.35rem;
    background: var(--np-color-danger, #dc2626);
    border: 2px solid var(--np-color-surface, #ffffff);
    border-radius: var(--np-radius-pill, 999px);
    color: var(--np-color-white, #ffffff);
    font-size: var(--np-font-size-2xs, 0.6875rem);
    font-weight: var(--np-font-weight-black, 900);
    line-height: 1;
    content: attr(data-count);
}

.np-button-dot,
.np-btn-dot {
    position: relative;
}

.np-button-dot::after,
.np-btn-dot::after {
    position: absolute;
    inset-block-start: 0.35rem;
    inset-inline-end: 0.35rem;
    width: 0.6rem;
    height: 0.6rem;
    background: var(--np-color-danger, #dc2626);
    border: 2px solid var(--np-color-surface, #ffffff);
    border-radius: var(--np-radius-circle, 50%);
    content: "";
}

.np-button-filter,
.np-btn-filter {
    background: var(--np-color-surface, #ffffff);
    border-color: var(--np-color-border-soft, #e2e8f0);
    color: var(--np-color-text, #334155);
    box-shadow: none;
}

.np-button-filter:hover,
.np-button-filter:focus,
.np-btn-filter:hover,
.np-btn-filter:focus {
    background: var(--np-color-primary-soft, #eef2ff);
    border-color: var(--np-color-primary-subtle, #e0e7ff);
    color: var(--np-color-primary, #4f46e5);
}

.np-button-filter.is-active,
.np-button-filter[aria-pressed="true"],
.np-button-filter[aria-selected="true"],
.np-btn-filter.is-active,
.np-btn-filter[aria-pressed="true"],
.np-btn-filter[aria-selected="true"] {
    background: var(--np-color-primary, #4f46e5);
    border-color: var(--np-color-primary, #4f46e5);
    color: var(--np-color-white, #ffffff);
}

.np-button-tab,
.np-btn-tab {
    background: transparent;
    border-color: transparent;
    border-radius: var(--np-radius-lg, 1rem);
    color: var(--np-color-text-muted, #64748b);
    box-shadow: none;
}

.np-button-tab:hover,
.np-button-tab:focus,
.np-btn-tab:hover,
.np-btn-tab:focus {
    background: var(--np-color-surface-muted, #f1f5f9);
    color: var(--np-color-primary, #4f46e5);
    box-shadow: none;
}

.np-button-tab.is-active,
.np-button-tab[aria-selected="true"],
.np-button-tab[aria-pressed="true"],
.np-btn-tab.is-active,
.np-btn-tab[aria-selected="true"],
.np-btn-tab[aria-pressed="true"] {
    background: var(--np-color-primary-soft, #eef2ff);
    color: var(--np-color-primary, #4f46e5);
}

.np-button-nav,
.np-btn-nav {
    background: transparent;
    border-color: transparent;
    border-radius: var(--np-header-nav-link-radius, 999px);
    color: var(--np-header-link-color, #334155);
    box-shadow: none;
}

.np-button-nav:hover,
.np-button-nav:focus,
.np-btn-nav:hover,
.np-btn-nav:focus {
    background: var(--np-header-nav-link-background-hover, #eef2ff);
    color: var(--np-header-link-color-hover, #4f46e5);
    box-shadow: none;
}

.np-button-nav.is-active,
.np-button-nav[aria-current="page"],
.np-btn-nav.is-active,
.np-btn-nav[aria-current="page"] {
    background: var(--np-color-primary-soft, #eef2ff);
    color: var(--np-color-primary, #4f46e5);
}

.np-button-close,
.np-btn-close {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    background: var(--np-color-surface-muted, #f1f5f9);
    border-color: var(--np-color-border-soft, #e2e8f0);
    border-radius: var(--np-radius-circle, 50%);
    color: var(--np-color-text, #334155);
    box-shadow: none;
}

.np-button-close:hover,
.np-button-close:focus,
.np-btn-close:hover,
.np-btn-close:focus {
    background: var(--np-color-danger-soft, #fee2e2);
    border-color: rgba(var(--np-color-danger-rgb), 0.18);
    color: var(--np-color-danger, #dc2626);
    box-shadow: none;
}

.np-button-close::before,
.np-btn-close::before {
    content: "×";
    font-size: 1.45rem;
    font-weight: var(--np-font-weight-regular, 400);
    line-height: 1;
}

.np-button-menu,
.np-btn-menu {
    width: 2.875rem;
    min-width: 2.875rem;
    height: 2.875rem;
    min-height: 2.875rem;
    padding: 0;
    background: var(--np-color-surface, #ffffff);
    border-color: var(--np-color-border-soft, #e2e8f0);
    color: var(--np-color-heading, #0f172a);
    box-shadow: var(--np-shadow-xs, 0 1px 3px rgba(15, 23, 42, 0.06));
}

.np-button-menu:hover,
.np-button-menu:focus,
.np-btn-menu:hover,
.np-btn-menu:focus {
    background: var(--np-color-primary-soft, #eef2ff);
    border-color: var(--np-color-primary-subtle, #e0e7ff);
    color: var(--np-color-primary, #4f46e5);
}

.np-button-menu-lines,
.np-btn-menu-lines {
    position: relative;
    display: inline-flex;
    width: 1.25rem;
    height: 0.875rem;
}

.np-button-menu-lines::before,
.np-button-menu-lines::after,
.np-button-menu-lines span,
.np-btn-menu-lines::before,
.np-btn-menu-lines::after,
.np-btn-menu-lines span {
    position: absolute;
    inset-inline: 0;
    height: 2px;
    background: currentColor;
    border-radius: var(--np-radius-pill, 999px);
    transition: transform var(--np-transition-fast, 160ms ease), opacity var(--np-transition-fast, 160ms ease), inset var(--np-transition-fast, 160ms ease);
    content: "";
}

.np-button-menu-lines::before,
.np-btn-menu-lines::before {
    inset-block-start: 0;
}

.np-button-menu-lines span,
.np-btn-menu-lines span {
    inset-block-start: 50%;
    transform: translateY(-50%);
}

.np-button-menu-lines::after,
.np-btn-menu-lines::after {
    inset-block-end: 0;
}

[aria-expanded="true"] .np-button-menu-lines::before,
[aria-expanded="true"] .np-btn-menu-lines::before {
    inset-block-start: 50%;
    transform: translateY(-50%) rotate(45deg);
}

[aria-expanded="true"] .np-button-menu-lines span,
[aria-expanded="true"] .np-btn-menu-lines span {
    opacity: 0;
}

[aria-expanded="true"] .np-button-menu-lines::after,
[aria-expanded="true"] .np-btn-menu-lines::after {
    inset-block-end: 50%;
    transform: translateY(50%) rotate(-45deg);
}

.np-button-search,
.np-btn-search,
.np-button-cart,
.np-btn-cart,
.np-button-account,
.np-btn-account {
    width: 2.875rem;
    min-width: 2.875rem;
    height: 2.875rem;
    min-height: 2.875rem;
    padding: 0;
    background: var(--np-header-action-background, #eef2ff);
    border-color: transparent;
    color: var(--np-header-action-color, #4f46e5);
    box-shadow: none;
}

.np-button-search:hover,
.np-button-search:focus,
.np-btn-search:hover,
.np-btn-search:focus,
.np-button-cart:hover,
.np-button-cart:focus,
.np-btn-cart:hover,
.np-btn-cart:focus,
.np-button-account:hover,
.np-button-account:focus,
.np-btn-account:hover,
.np-btn-account:focus {
    background: var(--np-color-primary, #4f46e5);
    color: var(--np-color-white, #ffffff);
    box-shadow: var(--np-shadow-primary, 0 18px 48px rgba(79, 70, 229, 0.22));
}

.wp-element-button,
.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--np-spacing-xs, 0.5rem);
    min-height: var(--np-button-height-md, 3rem);
    padding-block: 0;
    padding-inline: var(--np-button-padding-x-lg, 1.75rem);
    background: var(--np-button-primary-background, linear-gradient(135deg, #4f46e5 0%, #38bdf8 100%));
    border: var(--np-button-border-width, 1px) var(--np-button-border-style, solid) transparent;
    border-radius: var(--np-button-radius, 999px);
    color: var(--np-button-primary-color, #ffffff);
    font-family: var(--np-button-font-family, Tahoma, Arial, sans-serif);
    font-size: var(--np-button-font-size, 0.875rem);
    font-weight: var(--np-button-font-weight, 700);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--np-button-primary-shadow, 0 18px 48px rgba(79, 70, 229, 0.22));
    transition: var(--np-button-transition, transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease);
}

.wp-element-button:hover,
.wp-element-button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
    transform: translateY(-2px);
    background: var(--np-button-primary-background-hover, linear-gradient(135deg, #4338ca 0%, #0ea5e9 100%));
    color: var(--np-button-primary-color, #ffffff);
    text-decoration: none;
    box-shadow: var(--np-shadow-primary, 0 18px 48px rgba(79, 70, 229, 0.22));
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
    background: var(--np-button-outline-background, transparent);
    border-color: var(--np-button-outline-border-color, rgba(79, 70, 229, 0.34));
    color: var(--np-button-outline-color, #4f46e5);
    box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link.is-style-outline:hover,
.wp-block-button .wp-block-button__link.is-style-outline:focus {
    background: var(--np-button-outline-background-hover, #eef2ff);
    border-color: var(--np-color-primary, #4f46e5);
    color: var(--np-button-outline-color, #4f46e5);
}

.wp-block-button.is-style-fill .wp-block-button__link {
    background: var(--np-button-primary-background, linear-gradient(135deg, #4f46e5 0%, #38bdf8 100%));
    color: var(--np-color-white, #ffffff);
}

.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--np-spacing-sm, 0.75rem);
}

.wp-block-buttons.is-content-justification-center {
    justify-content: center;
}

.wp-block-buttons.is-content-justification-right,
.wp-block-buttons.is-content-justification-end {
    justify-content: flex-end;
}

.wp-block-buttons.is-content-justification-left,
.wp-block-buttons.is-content-justification-start {
    justify-content: flex-start;
}

.wp-block-buttons.is-vertical {
    align-items: stretch;
    flex-direction: column;
}

.wp-block-buttons.is-vertical .wp-block-button,
.wp-block-buttons.is-vertical .wp-block-button__link {
    width: 100%;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page #respond input#submit,
.woocommerce a.added_to_cart,
.woocommerce-page a.added_to_cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--np-spacing-xs, 0.5rem);
    min-height: var(--np-button-height-md, 3rem);
    padding-block: 0;
    padding-inline: var(--np-button-padding-x-md, 1.25rem);
    background: var(--np-button-primary-background, linear-gradient(135deg, #4f46e5 0%, #38bdf8 100%));
    border: var(--np-button-border-width, 1px) var(--np-button-border-style, solid) transparent;
    border-radius: var(--np-button-radius, 999px);
    color: var(--np-button-primary-color, #ffffff);
    font-family: var(--np-button-font-family, Tahoma, Arial, sans-serif);
    font-size: var(--np-button-font-size, 0.875rem);
    font-weight: var(--np-button-font-weight, 700);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--np-button-primary-shadow, 0 18px 48px rgba(79, 70, 229, 0.22));
    cursor: pointer;
    transition: var(--np-button-transition, transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease);
}

.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit:focus,
.woocommerce-page a.button:hover,
.woocommerce-page a.button:focus,
.woocommerce-page button.button:hover,
.woocommerce-page button.button:focus,
.woocommerce-page input.button:hover,
.woocommerce-page input.button:focus,
.woocommerce-page #respond input#submit:hover,
.woocommerce-page #respond input#submit:focus,
.woocommerce a.added_to_cart:hover,
.woocommerce a.added_to_cart:focus,
.woocommerce-page a.added_to_cart:hover,
.woocommerce-page a.added_to_cart:focus {
    transform: translateY(-2px);
    background: var(--np-button-primary-background-hover, linear-gradient(135deg, #4338ca 0%, #0ea5e9 100%));
    border-color: transparent;
    color: var(--np-button-primary-color, #ffffff);
    box-shadow: var(--np-shadow-primary, 0 18px 48px rgba(79, 70, 229, 0.22));
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt,
.woocommerce-page input.button.alt {
    background: var(--np-button-cta-background, linear-gradient(135deg, #a3e635 0%, #2dd4bf 100%));
    border-color: transparent;
    color: var(--np-button-cta-color, #1f2937);
    box-shadow: var(--np-button-cta-shadow, 0 18px 48px rgba(163, 230, 53, 0.2));
}

.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus,
.woocommerce button.button.alt:hover,
.woocommerce button.button.alt:focus,
.woocommerce input.button.alt:hover,
.woocommerce input.button.alt:focus,
.woocommerce-page a.button.alt:hover,
.woocommerce-page a.button.alt:focus,
.woocommerce-page button.button.alt:hover,
.woocommerce-page button.button.alt:focus,
.woocommerce-page input.button.alt:hover,
.woocommerce-page input.button.alt:focus {
    background: var(--np-button-cta-background-hover, linear-gradient(135deg, #84cc16 0%, #14b8a6 100%));
    border-color: transparent;
    color: var(--np-button-cta-color, #1f2937);
}

.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce a.button:disabled[disabled],
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled],
.woocommerce-page a.button.disabled,
.woocommerce-page a.button:disabled,
.woocommerce-page a.button:disabled[disabled],
.woocommerce-page button.button.disabled,
.woocommerce-page button.button:disabled,
.woocommerce-page button.button:disabled[disabled],
.woocommerce-page input.button.disabled,
.woocommerce-page input.button:disabled,
.woocommerce-page input.button:disabled[disabled] {
    opacity: 0.58;
    pointer-events: none;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

.woocommerce .quantity .button,
.woocommerce-page .quantity .button {
    width: var(--np-button-height-sm, 2.5rem);
    min-width: var(--np-button-height-sm, 2.5rem);
    height: var(--np-button-height-sm, 2.5rem);
    min-height: var(--np-button-height-sm, 2.5rem);
    padding: 0;
    background: var(--np-color-surface-muted, #f1f5f9);
    border-color: var(--np-color-border-soft, #e2e8f0);
    color: var(--np-color-text, #334155);
    box-shadow: none;
}

.woocommerce .quantity .button:hover,
.woocommerce .quantity .button:focus,
.woocommerce-page .quantity .button:hover,
.woocommerce-page .quantity .button:focus {
    background: var(--np-color-primary-soft, #eef2ff);
    border-color: var(--np-color-primary-subtle, #e0e7ff);
    color: var(--np-color-primary, #4f46e5);
    transform: none;
}

.dokan-btn,
.dokan-btn-theme,
.dokan-btn-default,
.dokan-dashboard .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--np-spacing-xs, 0.5rem);
    min-height: var(--np-button-height-md, 3rem);
    padding-block: 0;
    padding-inline: var(--np-button-padding-x-md, 1.25rem);
    border-radius: var(--np-button-radius, 999px);
    font-family: var(--np-button-font-family, Tahoma, Arial, sans-serif);
    font-size: var(--np-button-font-size, 0.875rem);
    font-weight: var(--np-button-font-weight, 700);
    line-height: 1;
    text-decoration: none;
    transition: var(--np-button-transition, transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease);
}

.dokan-btn-theme {
    background: var(--np-color-teal, #2dd4bf);
    border-color: transparent;
    color: var(--np-color-heading, #0f172a);
}

.dokan-btn-theme:hover,
.dokan-btn-theme:focus {
    background: var(--np-color-teal-hover, #14b8a6);
    border-color: transparent;
    color: var(--np-color-white, #ffffff);
}

.dokan-btn-default,
.dokan-dashboard .button {
    background: var(--np-color-surface, #ffffff);
    border-color: var(--np-color-border-soft, #e2e8f0);
    color: var(--np-color-text, #334155);
}

.dokan-btn-default:hover,
.dokan-btn-default:focus,
.dokan-dashboard .button:hover,
.dokan-dashboard .button:focus {
    background: var(--np-color-primary-soft, #eef2ff);
    border-color: var(--np-color-primary-subtle, #e0e7ff);
    color: var(--np-color-primary, #4f46e5);
}

.elementor-button,
.elementor-button:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--np-spacing-xs, 0.5rem);
    min-height: var(--np-button-height-md, 3rem);
    padding-block: 0;
    padding-inline: var(--np-button-padding-x-lg, 1.75rem);
    border-radius: var(--np-button-radius, 999px);
    font-family: var(--np-button-font-family, Tahoma, Arial, sans-serif);
    font-size: var(--np-button-font-size, 0.875rem);
    font-weight: var(--np-button-font-weight, 700);
    line-height: 1;
    text-decoration: none;
}

.elementor-button:hover,
.elementor-button:focus {
    text-decoration: none;
}

.elementor-button .elementor-button-content-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--np-spacing-xs, 0.5rem);
}

.elementor-button .elementor-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.np-section-dark .np-button-secondary,
.np-section-dark .np-btn-secondary,
.np-section-dark .np-button-outline,
.np-section-dark .np-btn-outline,
.np-layout-dark .np-button-secondary,
.np-layout-dark .np-btn-secondary,
.np-layout-dark .np-button-outline,
.np-layout-dark .np-btn-outline {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--np-color-white, #ffffff);
    box-shadow: none;
}

.np-section-dark .np-button-secondary:hover,
.np-section-dark .np-button-secondary:focus,
.np-section-dark .np-btn-secondary:hover,
.np-section-dark .np-btn-secondary:focus,
.np-section-dark .np-button-outline:hover,
.np-section-dark .np-button-outline:focus,
.np-section-dark .np-btn-outline:hover,
.np-section-dark .np-btn-outline:focus,
.np-layout-dark .np-button-secondary:hover,
.np-layout-dark .np-button-secondary:focus,
.np-layout-dark .np-btn-secondary:hover,
.np-layout-dark .np-btn-secondary:focus,
.np-layout-dark .np-button-outline:hover,
.np-layout-dark .np-button-outline:focus,
.np-layout-dark .np-btn-outline:hover,
.np-layout-dark .np-btn-outline:focus {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--np-color-white, #ffffff);
}

.np-section-dark .np-button-ghost,
.np-section-dark .np-btn-ghost,
.np-layout-dark .np-button-ghost,
.np-layout-dark .np-btn-ghost {
    color: rgba(255, 255, 255, 0.82);
}

.np-section-dark .np-button-ghost:hover,
.np-section-dark .np-button-ghost:focus,
.np-section-dark .np-btn-ghost:hover,
.np-section-dark .np-btn-ghost:focus,
.np-layout-dark .np-button-ghost:hover,
.np-layout-dark .np-button-ghost:focus,
.np-layout-dark .np-btn-ghost:hover,
.np-layout-dark .np-btn-ghost:focus {
    background: rgba(255, 255, 255, 0.1);
    color: var(--np-color-white, #ffffff);
}

@keyframes np-button-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 782px) {
    .np-button,
    .np-btn,
    button.np-button,
    button.np-btn,
    input[type="button"].np-button,
    input[type="button"].np-btn,
    input[type="reset"].np-button,
    input[type="reset"].np-btn,
    input[type="submit"].np-button,
    input[type="submit"].np-btn {
        min-height: var(--np-button-height-md, 3rem);
    }

    .np-button-mobile-block,
    .np-btn-mobile-block {
        width: 100%;
    }

    .np-button-group,
    .np-btn-group,
    .np-button-row,
    .np-btn-row {
        align-items: stretch;
    }

    .np-button-group.is-mobile-stack,
    .np-btn-group.is-mobile-stack,
    .np-button-row.is-mobile-stack,
    .np-btn-row.is-mobile-stack {
        flex-direction: column;
    }

    .np-button-group.is-mobile-stack > *,
    .np-btn-group.is-mobile-stack > *,
    .np-button-row.is-mobile-stack > *,
    .np-btn-row.is-mobile-stack > * {
        width: 100%;
    }

    .np-button-segment,
    .np-btn-segment {
        width: 100%;
        overflow-x: auto;
        border-radius: var(--np-radius-xl, 1.25rem);
    }

    .np-button-segment .np-button,
    .np-button-segment .np-btn,
    .np-btn-segment .np-button,
    .np-btn-segment .np-btn {
        flex: 1 0 auto;
    }

    .np-button-floating,
    .np-btn-floating {
        inset-inline-end: var(--np-spacing-md, 1rem);
        inset-block-end: max(var(--np-spacing-md, 1rem), env(safe-area-inset-bottom));
    }

    .np-button-floating.is-start,
    .np-btn-floating.is-start {
        inset-inline-start: var(--np-spacing-md, 1rem);
    }

    .wp-block-buttons {
        align-items: stretch;
    }

    .wp-block-buttons.is-mobile-stack {
        flex-direction: column;
    }

    .wp-block-buttons.is-mobile-stack .wp-block-button,
    .wp-block-buttons.is-mobile-stack .wp-block-button__link {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .np-button-xs,
    .np-btn-xs,
    .np-button-sm,
    .np-btn-sm {
        min-height: var(--np-button-height-sm, 2.5rem);
    }

    .np-button-lg,
    .np-btn-lg,
    .np-button-xl,
    .np-btn-xl {
        min-height: var(--np-button-height-lg, 3.5rem);
        padding-inline: var(--np-button-padding-x-lg, 1.75rem);
        font-size: var(--np-font-size-md, 1rem);
    }

    .np-button-close,
    .np-btn-close,
    .np-button-menu,
    .np-btn-menu,
    .np-button-search,
    .np-btn-search,
    .np-button-cart,
    .np-btn-cart,
    .np-button-account,
    .np-btn-account {
        width: 2.75rem;
        min-width: 2.75rem;
        height: 2.75rem;
        min-height: 2.75rem;
    }

    .np-button-floating,
    .np-btn-floating {
        inset-inline-end: var(--np-spacing-sm, 0.75rem);
        inset-block-end: max(var(--np-spacing-sm, 0.75rem), env(safe-area-inset-bottom));
    }

    .np-button-floating.is-start,
    .np-btn-floating.is-start {
        inset-inline-start: var(--np-spacing-sm, 0.75rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .np-button,
    .np-btn,
    .wp-element-button,
    .wp-block-button__link,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    .woocommerce-page a.button,
    .woocommerce-page button.button,
    .woocommerce-page input.button,
    .woocommerce-page #respond input#submit,
    .dokan-btn,
    .elementor-button {
        transition: none !important;
    }

    .np-button:hover,
    .np-button:focus,
    .np-btn:hover,
    .np-btn:focus,
    .wp-element-button:hover,
    .wp-element-button:focus,
    .wp-block-button__link:hover,
    .wp-block-button__link:focus,
    .woocommerce a.button:hover,
    .woocommerce a.button:focus,
    .woocommerce button.button:hover,
    .woocommerce button.button:focus,
    .woocommerce input.button:hover,
    .woocommerce input.button:focus,
    .woocommerce #respond input#submit:hover,
    .woocommerce #respond input#submit:focus,
    .woocommerce-page a.button:hover,
    .woocommerce-page a.button:focus,
    .woocommerce-page button.button:hover,
    .woocommerce-page button.button:focus,
    .woocommerce-page input.button:hover,
    .woocommerce-page input.button:focus,
    .woocommerce-page #respond input#submit:hover,
    .woocommerce-page #respond input#submit:focus {
        transform: none !important;
    }

    .np-button-loading::after,
    .np-btn-loading::after,
    .np-button.is-loading::after,
    .np-btn.is-loading::after {
        animation: none !important;
    }
}

@media print {
    .np-button,
    .np-btn,
    .wp-element-button,
    .wp-block-button__link,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    .woocommerce-page a.button,
    .woocommerce-page button.button,
    .woocommerce-page input.button,
    .woocommerce-page #respond input#submit,
    .dokan-btn,
    .elementor-button {
        background: transparent !important;
        border: 1px solid #000000 !important;
        color: #000000 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .np-button-floating,
    .np-btn-floating {
        display: none !important;
    }
}