/* buttons.css – shared button and pill system */

/* Base pill button */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    background: #f1f1f4;
    color: #222222;
    box-shadow: none;
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.05s ease;
}

.btn:hover {
    background: #e5e5ea;
    transform: translateY(-0.5px);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.6;
    cursor: default;
    box-shadow: none;
}

/* Variants */

.btn-primary {
    background: #00c853;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 200, 83, 0.4);
    border-color: transparent;
}

.btn-primary:hover:not(:disabled) {
    background: #00a746;
}

.btn-secondary {
    background: #f1f1f4;
    color: #222222;
    border-color: #d1d1d1;
    box-shadow: none;
}

.btn-secondary:hover:not(:disabled) {
    background: #e4e4ea;
}

.btn-danger {
    background: #b32222;
    color: #ffe8e8;
    border-color: #8a1a1a;
}

.btn-danger:hover:not(:disabled) {
    background: #8a1a1a;
}

/* Better visibility for login button */
.btn-login {
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    color: rgba(255, 255, 255, 0.95) !important;
    background: transparent !important;
    backdrop-filter: blur(4px);
}

.btn-login:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Subtle, visible login button for dark nav bg */
.btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #ffffff;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-weight: 500;
}

.btn-ghost:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* Reuse existing .btn, .btn-primary, .btn-xs etc. */


/* Pager-style */

.btn-pager {
    background: #ffffff;
    border-color: #d1d1d1;
    color: #444444;
    box-shadow: none;
    font-size: 0.8rem;
    padding: 4px 10px;
}

/* Sizes */

.btn-xs {
    font-size: 11px;
    padding: 4px 10px;
}

.btn-xxs {
    font-size: 10px;
    padding: 2px 8px;
}

/* Full-width helper */

.btn-block {
    width: 100%;
    justify-content: center;
}


/* Buttons should never underline */
.btn,
.btn:hover,
.btn:focus {
    text-decoration: none !important;
}

/* Status pills (from old status-pill) */

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

/* Neutral / generic */

.status-pill-neutral {
    background: #333344;
    color: #ccccdd;
}

/* Success / fulfilled */

.status-pill-success {
    background: #1f8a3b;
    color: #e5ffe9;
}

/* Warning / pending */

.status-pill-warning {
    background: #b27c1b;
    color: #fff7e0;
}

/* Info / submitted */

.status-pill-info {
    background: #1b6fb2;
    color: #e3f2ff;
}

/* Error / cancelled / refunded */

.status-pill-danger {
    background: #8a1f1f;
    color: #ffe8e8;
}