/* ==================================================
   PPM Buttons Kit for Bootstrap 5
   Core classes: .btn, .btn-ppm-*
   Bootstrap aliases: .btn-primary, .btn-secondary, .btn-success, .btn-orange
   ================================================== */

:root {
    --ppm-btn-primary: var(--pm-color-primary, #ec0d0d);
    --ppm-btn-primary-hover: #d20b0b;
    --ppm-btn-primary-active: #b80909;
    --ppm-btn-secondary: var(--pm-color-secondary, #616161);
    --ppm-btn-secondary-hover: #4f4f4f;
    --ppm-btn-secondary-active: #3f3f3f;
    --ppm-btn-success: var(--pm-color-success, #9bc601);
    --ppm-btn-success-hover: #84aa00;
    --ppm-btn-success-active: #6f9000;
    --ppm-btn-warning: var(--pm-color-orange, #f6b020);
    --ppm-btn-warning-hover: #f8af1b;
    --ppm-btn-warning-active: #f3a913;
    --ppm-btn-info: #168da3;
    --ppm-btn-info-hover: #11798c;
    --ppm-btn-info-active: #0d6575;
    --ppm-btn-danger: #d61f1f;
    --ppm-btn-danger-hover: #bd1717;
    --ppm-btn-danger-active: #a31313;
    --ppm-btn-dark: #2b2b2b;
    --ppm-btn-dark-hover: #1f1f1f;
    --ppm-btn-dark-active: #141414;
    --ppm-btn-grey: #818181;
    --ppm-btn-light: #ffffff;
    --ppm-btn-light-hover: #f4f4f4;
    --ppm-btn-border: #bbbbbb;
    --ppm-btn-text: #262626;
    --ppm-btn-muted: #6b6b6b;
    --ppm-btn-radius: 6px;
    --ppm-btn-radius-sm: 2px;
    --ppm-btn-focus: rgba(236, 13, 13, .18);
}

/* ---------- Base ---------- */

.btn {
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1.05rem;
    --bs-btn-padding-y: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    /*min-height: 40px;*/
    border-width: 1px;
    line-height: 1.2;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    box-shadow: none;
    transition:
        color .16s ease,
        background-color .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease,
        filter .16s ease;
}

.btn:active,
.btn.active,
.btn.show {
    background-color: var(--bs-btn-active-bg);
    transform: translateY(0);
}

.btn:focus,
.btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    opacity: .52;
    pointer-events: none;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    /* color: var(--bs-btn-disabled-color); */
    pointer-events: none;
    /* background-color: var(--bs-btn-disabled-bg); */
    /* border-color: var(--bs-btn-disabled-border-color); */
    /* opacity: var(--bs-btn-disabled-opacity); */
}

.btn i,
.btn .fa,
.btn .fa-solid,
.btn .fa-regular,
.btn .fa-brands {
    flex: 0 0 auto;
    line-height: 1;
}

button span {
    margin-left: 2px;
}
/* ---------- Solid ---------- */

.btn-primary,
.btn-ppm-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ppm-btn-primary);
    --bs-btn-border-color: var(--ppm-btn-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-primary-hover);
    --bs-btn-hover-border-color: var(--ppm-btn-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ppm-btn-primary-active);
    --bs-btn-active-border-color: var(--ppm-btn-primary-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--ppm-btn-primary);
    --bs-btn-disabled-border-color: var(--ppm-btn-primary);
    /*box-shadow: 0 8px 18px rgba(236, 13, 13, .22);*/
}

.btn-primary:hover,
.btn-ppm-primary:hover {
    box-shadow: 0 10px 24px rgba(236, 13, 13, .28);
}

.btn-secondary,
.btn-ppm-secondary {
    /*--bs-btn-color: #fff;*/
    /*--bs-btn-bg: var(--ppm-btn-secondary);*/
    --bs-btn-border-color: var(--ppm-btn-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-secondary-hover);
    --bs-btn-hover-border-color: var(--ppm-btn-secondary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ppm-btn-secondary-active);
    --bs-btn-active-border-color: var(--ppm-btn-secondary-active);
    /*box-shadow: 0 8px 18px rgba(97, 97, 97, .18);*/
}

.btn-success,
.btn-ppm-success {
    /*--bs-btn-color: #fff;*/
    /*--bs-btn-bg: var(--ppm-btn-success);*/
    --bs-btn-border-color: var(--ppm-btn-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-success-hover);
    --bs-btn-hover-border-color: var(--ppm-btn-success-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ppm-btn-success-active);
    --bs-btn-active-border-color: var(--ppm-btn-success-active);
    box-shadow: 0 8px 18px rgba(155, 198, 1, .24);
}

.btn-warning,
.btn-ppm-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ppm-btn-warning);
    --bs-btn-border-color: var(--ppm-btn-warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-warning-hover);
    --bs-btn-hover-border-color: var(--ppm-btn-warning-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ppm-btn-warning-active);
    --bs-btn-active-border-color: var(--ppm-btn-warning-active);
    box-shadow: 0 8px 18px rgba(246, 176, 32, .25);
}

.btn-info,
.btn-ppm-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ppm-btn-info);
    --bs-btn-border-color: var(--ppm-btn-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-info-hover);
    --bs-btn-hover-border-color: var(--ppm-btn-info-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ppm-btn-info-active);
    --bs-btn-active-border-color: var(--ppm-btn-info-active);
    /*box-shadow: 0 8px 18px rgba(22, 141, 163, .22);*/
}

.btn-danger,
.btn-ppm-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ppm-btn-danger);
    --bs-btn-border-color: var(--ppm-btn-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-danger-hover);
    --bs-btn-hover-border-color: var(--ppm-btn-danger-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ppm-btn-danger-active);
    --bs-btn-active-border-color: var(--ppm-btn-danger-active);
    /*box-shadow: 0 8px 18px rgba(214, 31, 31, .22);*/
}

.btn-dark,
.btn-ppm-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ppm-btn-dark);
    --bs-btn-border-color: var(--ppm-btn-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-dark-hover);
    --bs-btn-hover-border-color: var(--ppm-btn-dark-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ppm-btn-dark-active);
    --bs-btn-active-border-color: var(--ppm-btn-dark-active);
    /*box-shadow: 0 8px 18px rgba(43, 43, 43, .18);*/
}

.btn-light,
.btn-ppm-light {
    --bs-btn-color: var(--ppm-btn-text);
    --bs-btn-bg: var(--ppm-btn-light);
    --bs-btn-border-color: var(--ppm-btn-border);
    --bs-btn-hover-color: var(--ppm-btn-text);
    --bs-btn-hover-bg: var(--ppm-btn-light-hover);
    --bs-btn-hover-border-color: #d7d7d7;
    --bs-btn-active-color: var(--ppm-btn-text);
    --bs-btn-active-bg: #ececec;
    --bs-btn-active-border-color: #d0d0d0;
    /*box-shadow: 0 8px 18px rgba(0, 0, 0, .06);*/
}

/* ---------- Outline ---------- */

.btn-outline-primary,
.btn-ppm-outline-primary {
    --bs-btn-color: var(--ppm-btn-primary);
    --bs-btn-border-color: rgba(236, 13, 13, .42);

    --bs-btn-hover-color: var(--ppm-btn-light);
    --bs-btn-hover-bg: var(--ppm-btn-primary);
    --bs-btn-hover-border-color: var(--ppm-btn-primary);

    --bs-btn-active-color: var(--ppm-btn-primary);
    --bs-btn-active-bg: var(--ppm-btn-light);
    --bs-btn-active-border-color: var(--ppm-btn-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ppm-btn-secondary);
    --bs-btn-border-color: var(--ppm-btn-border);

    --bs-btn-hover-color: var(--ppm-btn-light-hover);
    --bs-btn-hover-bg: var(--ppm-btn-secondary);
    --bs-btn-hover-border-color: var(--ppm-btn-border);

    --bs-btn-active-color: var(--ppm-btn-grey);
    --bs-btn-active-bg: var(--ppm-btn-light-hover);
    --bs-btn-active-border-color: var(--ppm-btn-border);
}

.btn-outline-secondary.bg-white {
    --bs-btn-hover-color: var(--ppm-btn-grey);
    --bs-btn-hover-bg: var(--ppm-btn-secondary);
    --bs-btn-hover-border-color: var(--ppm-btn-border);
}

.btn-outline-success,
.btn-ppm-outline-success {
    --bs-btn-color: #638200;
    --bs-btn-border-color: rgba(155, 198, 1, .5);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-success);
    --bs-btn-hover-border-color: var(--ppm-btn-success);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ppm-btn-success-active);
    --bs-btn-active-border-color: var(--ppm-btn-success-active);
}

.btn-outline-warning,
.btn-ppm-outline-warning,
.btn-ppm-outline-orange {
    --bs-btn-color: #9d6500;
    --bs-btn-border-color: rgba(246, 176, 32, .55);
    --bs-btn-hover-color: #2b2110;
    --bs-btn-hover-bg: var(--ppm-btn-warning);
    --bs-btn-hover-border-color: var(--ppm-btn-warning);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ppm-btn-warning-active);
    --bs-btn-active-border-color: var(--ppm-btn-warning-active);
}

.btn-outline-info,
.btn-ppm-outline-info {
    --bs-btn-color: var(--ppm-btn-info);
    --bs-btn-border-color: rgba(22, 141, 163, .45);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-info);
    --bs-btn-hover-border-color: var(--ppm-btn-info);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ppm-btn-info-active);
    --bs-btn-active-border-color: var(--ppm-btn-info-active);
}

.btn-outline-danger,
.btn-ppm-outline-danger {
    --bs-btn-color: var(--ppm-btn-danger);
    --bs-btn-border-color: rgba(214, 31, 31, .42);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-danger);
    --bs-btn-hover-border-color: var(--ppm-btn-danger);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ppm-btn-danger-active);
    --bs-btn-active-border-color: var(--ppm-btn-danger-active);
}

.btn-outline-dark,
.btn-ppm-outline-dark {
    --bs-btn-color: var(--ppm-btn-dark);
    --bs-btn-border-color: rgba(43, 43, 43, .34);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-dark);
    --bs-btn-hover-border-color: var(--ppm-btn-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ppm-btn-dark-active);
    --bs-btn-active-border-color: var(--ppm-btn-dark-active);
}

.btn-outline-light,
.btn-ppm-outline-light {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .6);
    --bs-btn-hover-color: var(--ppm-btn-text);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: var(--ppm-btn-text);
    --bs-btn-active-bg: #f1f1f1;
    --bs-btn-active-border-color: #f1f1f1;
}

.btn.btn-outline.btn-primary {
    --bs-btn-color: var(--ppm-btn-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(236, 13, 13, .42);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-primary);
    --bs-btn-hover-border-color: var(--ppm-btn-primary);
    box-shadow: none;
}

/* ---------- Soft ---------- */

.btn-ppm-soft-primary {
    --bs-btn-color: var(--pm-color-theme);
    --bs-btn-bg: rgba(236, 13, 13, .08);
    --bs-btn-border-color: rgba(236, 13, 13, .14);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--pm-color-theme);
    --bs-btn-hover-border-color: var(--pm-color-theme);
}

.btn-ppm-soft-secondary {
    --bs-btn-color: var(--ppm-btn-secondary);
    --bs-btn-bg: rgba(97, 97, 97, .08);
    --bs-btn-border-color: rgba(97, 97, 97, .14);
    --bs-btn-hover-color: var( --bs-btn-color);
    --bs-btn-active-color: #fff;
    --bs-btn-hover-bg: var(--bs-btn-bg);
    --bs-btn-active-bg: #606060;
    --bs-btn-hover-border-color: var(--bs-btn-border-color);
    --bs-btn-active-border-color: #d5d5d5;
}

.btn-ppm-soft-success {
    --bs-btn-color: #638200;
    --bs-btn-bg: rgba(155, 198, 1, .12);
    --bs-btn-border-color: rgba(155, 198, 1, .2);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-success);
    --bs-btn-hover-border-color: var(--ppm-btn-success);
}

.btn-ppm-soft-warning {
    --bs-btn-color: #9d6500;
    --bs-btn-bg: rgba(246, 176, 32, .13);
    --bs-btn-border-color: rgba(246, 176, 32, .22);
    --bs-btn-hover-color: #2b2110;
    --bs-btn-hover-bg: var(--ppm-btn-warning);
    --bs-btn-hover-border-color: var(--ppm-btn-warning);
}

.btn-ppm-soft-info {
    --bs-btn-color: var(--ppm-btn-info);
    --bs-btn-bg: rgba(22, 141, 163, .1);
    --bs-btn-border-color: rgba(22, 141, 163, .18);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-info);
    --bs-btn-hover-border-color: var(--ppm-btn-info);
}

.btn-ppm-soft-danger {
    --bs-btn-color: var(--ppm-btn-danger);
    --bs-btn-bg: rgba(214, 31, 31, .08);
    --bs-btn-border-color: rgba(214, 31, 31, .14);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-danger);
    --bs-btn-hover-border-color: var(--ppm-btn-danger);
}

.btn-ppm-soft-dark {
    --bs-btn-color: var(--ppm-btn-dark);
    --bs-btn-bg: rgba(43, 43, 43, .07);
    --bs-btn-border-color: rgba(43, 43, 43, .13);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-dark);
    --bs-btn-hover-border-color: var(--ppm-btn-dark);
}

/* ---------- Gradient & Special ---------- */

.btn-ppm-gradient-primary {
    --bs-btn-color: #fff;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: transparent;
    background-image: linear-gradient(135deg, #ef1717 0%, #bd1010 52%, #8d1919 100%);
    /*box-shadow: 0 10px 24px rgba(236, 13, 13, .28);*/
}

.btn-ppm-gradient-fresh {
    --bs-btn-color: #fff;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: transparent;
    background-image: linear-gradient(135deg, #9bc601 0%, #53a617 55%, #168da3 100%);
    /*box-shadow: 0 10px 24px rgba(83, 166, 23, .24);*/
}

.btn-ppm-gradient-warm {
    --bs-btn-color: #2b2110;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #211808;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: transparent;
    background-image: linear-gradient(135deg, #ffd66b 0%, #f6b020 55%, #ec0d0d 100%);
    /*box-shadow: 0 10px 24px rgba(246, 176, 32, .26);*/
}

.btn-ppm-gradient-primary:hover,
.btn-ppm-gradient-fresh:hover,
.btn-ppm-gradient-warm:hover,
.btn-ppm-gradient-1:hover,
.btn-ppm-gradient-2:hover,
.btn-ppm-gradient-3:hover,
.btn-ppm-gradient-4:hover,
.btn-ppm-gradient-5:hover,
.btn-ppm-gradient-6:hover,
.btn-ppm-filter:hover,
.btn-ppm-play:hover {
    filter: saturate(1.05) brightness(1.02);
}

.btn-ppm-cart {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ppm-btn-success);
    --bs-btn-border-color: var(--ppm-btn-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-success-hover);
    --bs-btn-hover-border-color: var(--ppm-btn-success-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ppm-btn-success-active);
    --bs-btn-active-border-color: var(--ppm-btn-success-active);
    /*box-shadow: 0 10px 22px rgba(155, 198, 1, .26);*/
}

.btn-ppm-checkout {
    --bs-btn-color: #2b2110;
    --bs-btn-bg: var(--ppm-btn-warning);
    --bs-btn-border-color: var(--ppm-btn-warning);
    --bs-btn-hover-color: #211808;
    --bs-btn-hover-bg: var(--ppm-btn-warning-hover);
    --bs-btn-hover-border-color: var(--ppm-btn-warning-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ppm-btn-warning-active);
    --bs-btn-active-border-color: var(--ppm-btn-warning-active);
    /*box-shadow: 0 10px 22px rgba(246, 176, 32, .26);*/
}

.btn-ppm-favorite {
    --bs-btn-color: #fff;
    --bs-btn-bg: #e32740;
    --bs-btn-border-color: #e32740;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c91f36;
    --bs-btn-hover-border-color: #c91f36;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ab1a2e;
    --bs-btn-active-border-color: #ab1a2e;
    /*box-shadow: 0 10px 22px rgba(227, 39, 64, .22);*/
}

.btn-ppm-download {
    --bs-btn-color: var(--ppm-btn-text);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #dedede;
    --bs-btn-hover-color: var(--ppm-btn-text);
    --bs-btn-hover-bg: #f5f5f5;
    --bs-btn-hover-border-color: #d4d4d4;
    --bs-btn-active-color: var(--ppm-btn-text);
    --bs-btn-active-bg: #ededed;
    --bs-btn-active-border-color: #cfcfcf;
    /*box-shadow: 0 8px 20px rgba(0, 0, 0, .07);*/
}

.btn-ppm-ghost {
    --bs-btn-color: var(--ppm-btn-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--ppm-btn-primary);
    --bs-btn-hover-bg: rgba(236, 13, 13, .06);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--ppm-btn-primary-active);
    --bs-btn-active-bg: rgba(236, 13, 13, .1);
    --bs-btn-active-border-color: transparent;
    box-shadow: none;
}

.btn-ppm-glass {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(255, 255, 255, .12);
    --bs-btn-border-color: rgba(255, 255, 255, .32);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, .18);
    --bs-btn-hover-border-color: rgba(255, 255, 255, .48);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, .22);
    --bs-btn-active-border-color: rgba(255, 255, 255, .55);
    backdrop-filter: blur(12px);
    /*box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);*/
}

/* Old gradient aliases kept for compatibility. */
.btn-ppm-gradient-1 {
    --bs-btn-color: #fff;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: transparent;
    background-image: linear-gradient(135deg, #ef1717 0%, #bd1010 52%, #8d1919 100%);
    /*box-shadow: 0 10px 24px rgba(236, 13, 13, .28);*/
}

.btn-ppm-gradient-2,
.btn-ppm-filter,
.btn-ppm-play {
    --bs-btn-color: #fff;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: transparent;
    background-image: linear-gradient(135deg, #168da3 0%, #53a617 100%);
    /*box-shadow: 0 10px 24px rgba(22, 141, 163, .22);*/
}

.btn-ppm-gradient-3 {
    --bs-btn-color: #fff;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: transparent;
    background-image: linear-gradient(135deg, #9bc601 0%, #53a617 55%, #168da3 100%);
    /*box-shadow: 0 10px 24px rgba(83, 166, 23, .24);*/
}

.btn-ppm-gradient-4,
.btn-ppm-gradient-5,
.btn-ppm-gradient-6 {
    --bs-btn-color: #2b2110;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #211808;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: transparent;
    background-image: linear-gradient(135deg, #ffd66b 0%, #f6b020 55%, #ec0d0d 100%);
    /*box-shadow: 0 10px 24px rgba(246, 176, 32, .26);*/
}

/* ---------- Sizes ---------- */

.btn-ppm-xs {
    --bs-btn-padding-x: .55rem;
    --bs-btn-padding-y: .24rem;
    --bs-btn-font-size: .75rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
    min-height: 28px;
    gap: .32rem;
}

.btn-ppm-sm,
.btn-sm {
    --bs-btn-padding-x: .78rem;
    --bs-btn-padding-y: .38rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-border-radius: 4px;
    min-height: 34px;
    gap: .36rem;
}

.btn-ppm-md {
    --bs-btn-padding-x: 1.05rem;
    --bs-btn-padding-y: .55rem;
    --bs-btn-font-size: 1rem;
    min-height: 40px;
}

.btn-ppm-lg,
.btn-lg {
    --bs-btn-padding-x: 1.35rem;
    --bs-btn-padding-y: .72rem;
    --bs-btn-font-size: 1.05rem;
    --bs-btn-border-radius: 10px;
    min-height: 48px;
}

.btn-ppm-xl {
    --bs-btn-padding-x: 1.65rem;
    --bs-btn-padding-y: .9rem;
    --bs-btn-font-size: 1.12rem;
    --bs-btn-border-radius: 12px;
    min-height: 56px;
}

/* ---------- Icon Buttons ---------- */

.btn-ppm-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
    aspect-ratio: 1;
}

.btn-ppm-icon.btn-ppm-xs {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
}

.btn-ppm-icon.btn-ppm-sm,
.btn-ppm-icon.btn-sm {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
}

.btn-ppm-icon.btn-ppm-lg,
.btn-ppm-icon.btn-lg {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

.btn-ppm-icon.btn-ppm-xl {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
}

.btn-ppm-icon i,
.btn-ppm-icon .fa,
.btn-ppm-icon .fa-solid,
.btn-ppm-icon .fa-regular,
.btn-ppm-icon .fa-brands {
    margin: 0;
}

.btn-ppm-icon-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ppm-btn-primary);
    --bs-btn-border-color: var(--ppm-btn-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-primary-hover);
    --bs-btn-hover-border-color: var(--ppm-btn-primary-hover);
}

.btn-ppm-icon-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ppm-btn-success);
    --bs-btn-border-color: var(--ppm-btn-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-success-hover);
    --bs-btn-hover-border-color: var(--ppm-btn-success-hover);
}

.btn-ppm-icon-warning,
.btn-ppm-icon-warning {
    --bs-btn-color: #2b2110;
    --bs-btn-bg: var(--ppm-btn-warning);
    --bs-btn-border-color: var(--ppm-btn-warning);
    --bs-btn-hover-color: #211808;
    --bs-btn-hover-bg: var(--ppm-btn-warning-hover);
    --bs-btn-hover-border-color: var(--ppm-btn-warning-hover);
}

.btn-ppm-icon-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ppm-btn-info);
    --bs-btn-border-color: var(--ppm-btn-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-info-hover);
    --bs-btn-hover-border-color: var(--ppm-btn-info-hover);
}

.btn-ppm-icon-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ppm-btn-danger);
    --bs-btn-border-color: var(--ppm-btn-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-danger-hover);
    --bs-btn-hover-border-color: var(--ppm-btn-danger-hover);
}

.btn-ppm-icon-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ppm-btn-dark);
    --bs-btn-border-color: var(--ppm-btn-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-dark-hover);
    --bs-btn-hover-border-color: var(--ppm-btn-dark-hover);
}

.btn-ppm-icon-outline {
    --bs-btn-color: var(--ppm-btn-dark);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(43, 43, 43, .26);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ppm-btn-dark);
    --bs-btn-hover-border-color: var(--ppm-btn-dark);
}

/* ---------- State ---------- */


.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color)
}

/* ---------- State Helpers ---------- */

.btn-ppm-block {
    width: 100%;
}

.btn-ppm-raised {
    box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
}

.btn-ppm-flat {
    box-shadow: none !important;
}

.btn-ppm-pill {
    --bs-btn-border-radius: 999px;
}

.btn-ppm-square {
    --bs-btn-border-radius: 0;
}

/* btn-ppm-loading used */
.btn-ppm-loading {
    position: relative;
    pointer-events: none;
}

.btn-ppm-loading::before {
    content: "";
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: .78;
    animation: btnPpmSpin .72s linear infinite;
}

.btn-ppm-loading > span {
    opacity: .72;
}

.btn-ppm-state-hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.btn-ppm-state-active {
    transform: translateY(0);
    filter: brightness(.96);
}

.btn-ppm-state-disabled {
    opacity: .52;
    pointer-events: none;
    box-shadow: none !important;
    transform: none !important;
}

@keyframes btnPpmSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn-ppm-loading::before {
        transition: none;
        animation-duration: 1.2s;
    }

    .btn:hover,
    .btn:active,
    .btn.active,
    .btn.show {
        transform: none;
    }
}


.form-control {
    display: block;
    width: 100%;
    padding: 6px 12px;
    background-image: none;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
}

.form-control:focus {
    border-color: #bbd912;
    outline: 0;
    -webkit-box-shadow: unset;
    box-shadow: unset;
}