/**
 * RoseBella — Primary Action Button System
 * Amazon-style gold pill CTA (Download Invoice reference)
 * Load last (after rb-typography.css)
 */

:root {
    --rb-btn-compact-h: 44px;
    --rb-btn-compact-px: 22px;
    --rb-btn-compact-fs: 14px;
    --rb-btn-compact-gap: 10px;
    --rb-btn-compact-icon: 16px;
    --rb-btn-lg-h: 48px;
    --rb-btn-lg-px: 24px;
    --rb-btn-lg-fs: 15px;
}

/* ── Shared primary selectors ── */
.rb-btn-primary,
body:not(.pos-page):not(.pos-cashier-mode) .btn.btn-primary,
body:not(.pos-page):not(.pos-cashier-mode) .btn-primary,
body:not(.pos-page):not(.pos-cashier-mode) .common-btn,
body:not(.pos-page):not(.pos-cashier-mode) .import-btn,
body:not(.pos-page):not(.pos-cashier-mode) .submit-btn,
body:not(.pos-page):not(.pos-cashier-mode) .btn-dipBlue,
body:not(.pos-page):not(.pos-cashier-mode) .addBtn,
.rb-manage-btn--gold,
.rb-order-show__btn--invoice,
.rb-hero-action--accent,
.rb-wallet-withdraw-btn,
.rb-orders-btn--filter,
.rosabella-login__submit,
body:not(.pos-page):not(.pos-cashier-mode) .swal2-styled.swal2-confirm {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--rb-btn-compact-gap) !important;
    width: auto !important;
    max-width: 100%;
    min-width: 0 !important;
    min-height: var(--rb-btn-compact-h) !important;
    height: var(--rb-btn-compact-h) !important;
    padding: 0 var(--rb-btn-compact-px) !important;
    border-radius: 9999px !important;
    border: 1px solid var(--rb-cta-border) !important;
    border-color: var(--rb-cta-border) var(--rb-cta-border-mid) var(--rb-cta-dark-gold) !important;
    background: var(--rb-cta-gradient) !important;
    background-color: var(--rb-cta-bottom) !important;
    color: var(--rb-cta-text) !important;
    font-family: "Lusail", "Inter", Arial, sans-serif !important;
    font-size: var(--rb-btn-compact-fs) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap;
    box-shadow: var(--rb-cta-shadow) !important;
    transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
    cursor: pointer;
}

.rb-btn-primary i,
.rb-btn-primary .bi,
.rb-btn-primary svg,
.rb-btn-primary .fa,
.rb-btn-primary img,
body:not(.pos-page):not(.pos-cashier-mode) .btn-primary i,
body:not(.pos-page):not(.pos-cashier-mode) .btn-primary .bi,
body:not(.pos-page):not(.pos-cashier-mode) .btn-primary .fa,
body:not(.pos-page):not(.pos-cashier-mode) .btn-primary img,
body:not(.pos-page):not(.pos-cashier-mode) .common-btn i,
body:not(.pos-page):not(.pos-cashier-mode) .common-btn img,
body:not(.pos-page):not(.pos-cashier-mode) .import-btn i,
body:not(.pos-page):not(.pos-cashier-mode) .submit-btn i,
body:not(.pos-page):not(.pos-cashier-mode) .btn-dipBlue i,
body:not(.pos-page):not(.pos-cashier-mode) .addBtn i,
.rb-manage-btn--gold i,
.rb-manage-btn--gold .bi,
.rb-order-show__btn--invoice i,
.rb-order-show__btn--invoice .bi,
.rb-hero-action--accent i,
.rb-wallet-withdraw-btn i,
.rb-orders-btn--filter i,
.rosabella-login__submit i,
.rosabella-login__submit .fa {
    font-size: var(--rb-btn-compact-icon) !important;
    width: var(--rb-btn-compact-icon);
    height: var(--rb-btn-compact-icon);
    color: var(--rb-cta-text) !important;
    flex-shrink: 0;
    line-height: 1 !important;
}

/* Hover */
.rb-btn-primary:hover,
.rb-btn-primary:focus-visible,
body:not(.pos-page):not(.pos-cashier-mode) .btn.btn-primary:hover,
body:not(.pos-page):not(.pos-cashier-mode) .btn-primary:hover,
body:not(.pos-page):not(.pos-cashier-mode) .btn-primary:focus-visible,
body:not(.pos-page):not(.pos-cashier-mode) .common-btn:hover,
body:not(.pos-page):not(.pos-cashier-mode) .import-btn:hover,
body:not(.pos-page):not(.pos-cashier-mode) .submit-btn:hover,
body:not(.pos-page):not(.pos-cashier-mode) .btn-dipBlue:hover,
body:not(.pos-page):not(.pos-cashier-mode) .addBtn:hover,
.rb-manage-btn--gold:hover,
.rb-manage-btn--gold:focus,
.rb-order-show__btn--invoice:hover,
.rb-hero-action--accent:hover,
.rb-wallet-withdraw-btn:hover,
.rb-orders-btn--filter:hover,
.rosabella-login__submit:hover,
body:not(.pos-page):not(.pos-cashier-mode) .swal2-styled.swal2-confirm:hover {
    background: var(--rb-cta-gradient-hover) !important;
    background-color: var(--rb-cta-bottom-hover) !important;
    border-color: var(--rb-cta-border) var(--rb-cta-border-mid) var(--rb-cta-dark-gold) !important;
    color: var(--rb-cta-text) !important;
    box-shadow: var(--rb-cta-shadow-hover) !important;
    transform: none !important;
    filter: none !important;
}

/* Active / pressed */
.rb-btn-primary:active,
body:not(.pos-page):not(.pos-cashier-mode) .btn.btn-primary:active,
body:not(.pos-page):not(.pos-cashier-mode) .btn-primary:active,
body:not(.pos-page):not(.pos-cashier-mode) .common-btn:active,
body:not(.pos-page):not(.pos-cashier-mode) .import-btn:active,
body:not(.pos-page):not(.pos-cashier-mode) .submit-btn:active,
body:not(.pos-page):not(.pos-cashier-mode) .btn-dipBlue:active,
body:not(.pos-page):not(.pos-cashier-mode) .addBtn:active,
.rb-manage-btn--gold:active,
.rb-order-show__btn--invoice:active,
.rb-hero-action--accent:active,
.rb-wallet-withdraw-btn:active,
.rb-orders-btn--filter:active,
.rosabella-login__submit:active,
body:not(.pos-page):not(.pos-cashier-mode) .swal2-styled.swal2-confirm:active {
    background: var(--rb-cta-gradient-active) !important;
    background-color: var(--rb-cta-bottom-active) !important;
    color: var(--rb-cta-text) !important;
    box-shadow: var(--rb-cta-shadow-active) !important;
    transform: none !important;
    filter: none !important;
}

/* Disabled */
.rb-btn-primary:disabled,
.rb-btn-primary.disabled,
body:not(.pos-page):not(.pos-cashier-mode) .btn-primary:disabled,
body:not(.pos-page):not(.pos-cashier-mode) .btn-primary.disabled,
body:not(.pos-page):not(.pos-cashier-mode) .common-btn:disabled,
body:not(.pos-page):not(.pos-cashier-mode) .submit-btn:disabled,
.rb-manage-btn--gold:disabled,
.rb-manage-btn--gold.disabled,
.rosabella-login__submit:disabled {
    background: linear-gradient(to bottom, #f7f8fa, var(--rb-cta-bg-disabled)) !important;
    border-color: #d5d9d9 !important;
    color: var(--rb-cta-text-disabled) !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* Focus */
.rb-btn-primary:focus-visible,
body:not(.pos-page):not(.pos-cashier-mode) .btn-primary:focus-visible,
body:not(.pos-page):not(.pos-cashier-mode) .common-btn:focus-visible,
.rb-manage-btn--gold:focus-visible,
.rb-order-show__btn--invoice:focus-visible,
.rosabella-login__submit:focus-visible {
    outline: 2px solid var(--rb-cta-border) !important;
    outline-offset: 2px;
    box-shadow: var(--rb-cta-shadow-hover) !important;
}

/* Dropdown caret on gold primary buttons */
body:not(.pos-page):not(.pos-cashier-mode) .btn-primary.dropdown-toggle::after,
.rb-manage-btn--gold.dropdown-toggle::after {
    margin-inline-start: 6px;
    border-top-color: var(--rb-cta-text) !important;
}

/* ── Size variants ── */

/* Small — tables, dense toolbars */
body:not(.pos-page):not(.pos-cashier-mode) .btn-primary.btn-sm,
body:not(.pos-page):not(.pos-cashier-mode) .common-btn.btn-sm,
body:not(.pos-page):not(.pos-cashier-mode) .import-btn.btn-sm,
.rb-btn-primary.btn-sm {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    gap: 6px !important;
}

body:not(.pos-page):not(.pos-cashier-mode) .btn-primary.btn-sm i,
body:not(.pos-page):not(.pos-cashier-mode) .btn-primary.btn-sm .bi {
    font-size: 12px !important;
    width: 12px;
    height: 12px;
}

/* Large — hero forms, login emphasis */
body:not(.pos-page):not(.pos-cashier-mode) .btn-primary.btn-lg,
body:not(.pos-page):not(.pos-cashier-mode) .common-btn.btn-lg,
.rb-btn-primary.rb-btn-primary--lg {
    min-height: var(--rb-btn-lg-h) !important;
    height: var(--rb-btn-lg-h) !important;
    padding: 0 var(--rb-btn-lg-px) !important;
    font-size: var(--rb-btn-lg-fs) !important;
    font-weight: 700 !important;
    gap: 10px !important;
}

body:not(.pos-page):not(.pos-cashier-mode) .btn-primary.btn-lg i,
body:not(.pos-page):not(.pos-cashier-mode) .btn-primary.btn-lg .bi {
    font-size: 16px !important;
    width: 16px;
    height: 16px;
}

/* Full-width form submits */
body:not(.pos-page):not(.pos-cashier-mode) .submit-btn {
    width: 100%;
}

.rosabella-login__submit {
    width: 100%;
    min-height: var(--rb-btn-lg-h) !important;
    height: var(--rb-btn-lg-h) !important;
    font-size: var(--rb-btn-lg-fs) !important;
    font-weight: 700 !important;
    margin-top: 0.35rem;
}

/* Icon-only / circle actions */
body:not(.pos-page):not(.pos-cashier-mode) .circleIcon.btn-primary,
body:not(.pos-page):not(.pos-cashier-mode) .btn-icon-only.btn-primary {
    min-width: 0 !important;
    min-height: 38px !important;
    width: 38px;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 9999px !important;
    gap: 0 !important;
}

/* ── Form back button ── */
.rb-form-actions {
    width: 100%;
}

body:not(.pos-page):not(.pos-cashier-mode) .rb-btn-back,
body:not(.pos-page):not(.pos-cashier-mode) .rb-form-back.btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--rb-btn-compact-gap) !important;
    min-height: var(--rb-btn-compact-h) !important;
    height: var(--rb-btn-compact-h) !important;
    padding: 0 var(--rb-btn-compact-px) !important;
    border-radius: 9999px !important;
    border: 1px solid #d5d9d9 !important;
    background: linear-gradient(to bottom, #ffffff, #f0f2f2) !important;
    color: #111111 !important;
    font-family: "Lusail", "Inter", Arial, sans-serif !important;
    font-size: var(--rb-btn-compact-fs) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) !important;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body:not(.pos-page):not(.pos-cashier-mode) .rb-btn-back:hover,
body:not(.pos-page):not(.pos-cashier-mode) .rb-form-back.btn-secondary:hover,
body:not(.pos-page):not(.pos-cashier-mode) .rb-btn-back:focus-visible,
body:not(.pos-page):not(.pos-cashier-mode) .rb-form-back.btn-secondary:focus-visible {
    background: linear-gradient(to bottom, #fafafa, #e3e6e6) !important;
    border-color: #c7cccc !important;
    color: #111111 !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08) !important;
}

body:not(.pos-page):not(.pos-cashier-mode) .rb-btn-back i,
body:not(.pos-page):not(.pos-cashier-mode) .rb-form-back.btn-secondary i {
    font-size: var(--rb-btn-compact-icon) !important;
    line-height: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    .rb-btn-primary,
    body:not(.pos-page):not(.pos-cashier-mode) .btn-primary,
    body:not(.pos-page):not(.pos-cashier-mode) .common-btn,
    body:not(.pos-page):not(.pos-cashier-mode) .submit-btn,
    .rb-manage-btn--gold,
    .rosabella-login__submit {
        transition: none !important;
    }
}