.btn-primary {
    max-width: 150px;
    width: auto;
    display: inline-block;
}

.no-select {
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
}

/* Prevent image copying, saving, and dragging */
.no-copy {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
    -webkit-touch-callout: none; /* iOS Safari - LOL */
}

/* ========== TRICHTERTRUPP BUTTON SYSTEM ========== */
/* Base button style that all TT buttons will inherit */
.btn-tt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    font-weight: 500;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    font-size: 1rem;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-family: 'UglyQua', serif; /* Add UglyQua font by default */
    color: white !important;

    /* No select per hand */
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
}

/* Button hover and active effects - smoother transition */
.btn-tt:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

.btn-tt:active {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Icon styling inside buttons */
.btn-tt i {
    margin-right: 10px;
    font-size: 1.1em;
}

/* Animated glow effect on primary buttons */
.btn-tt::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0)
    );
    transform: rotate(30deg);
    opacity: 0;
    transition: opacity 0.5s;
}

.btn-tt:hover::after {
    opacity: 1;
    animation: tt-glow-sweep 2.5s infinite;
}

@keyframes tt-glow-sweep {
    0% {
        transform: rotate(30deg) translateX(-100%);
        opacity: 0;
    }
    20% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.5;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        transform: rotate(30deg) translateX(100%);
        opacity: 0;
    }
}

/* Primary button (purple theme) */
.btn-tt-primary {
    background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
    color: white;
    border-color: #7e22ce;
    transition: background 0.5s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.btn-tt-primary:hover {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    color: white;
    border-color: #9333ea;
    box-shadow: 0 8px 20px rgba(147, 51, 234, 0.4);
}

/* Info button (blue theme) */
.btn-tt-info {
    position: relative;
    background: linear-gradient(135deg, #333333 0%, #222222 100%);
    color: white;
    border-color: #2563eb !important;
    border-width: 2px;
    z-index: 1;
    transition: color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
}

.btn-tt-info::before {
    content: "";
    position: absolute;
    border-radius: 10px;
    border-color: #2563eb !important;
    border-width: 2px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.btn-tt-info:hover {
    color: white !important;
    border-color: #2563eb !important;
    border-width: 2px;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.btn-tt-info:hover::before {
    opacity: 1;
}

/* Warning button (yellow theme) */
.btn-tt-warning {
    position: relative;
    background: linear-gradient(135deg, #333333 0%, #222222 100%);
    color: white;
    border-color: #ca8a04 !important;
    border-width: 2px;
    z-index: 1;
    transition: color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
}

.btn-tt-warning::before {
    content: "";
    position: absolute;
    border-radius: 10px;
    border-color: #ca8a04 !important;
    border-width: 2px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.btn-tt-warning:hover {
    color: white !important;
    border-color: #ca8a04 !important;
    border-width: 2px;
    box-shadow: 0 8px 20px rgba(234, 179, 8, 0.4);
}

.btn-tt-warning:hover::before {
    opacity: 1;
}

/* Cancel/Danger button with smooth color transition */
.btn-tt-danger {
    position: relative;
    background: linear-gradient(135deg, #333333 0%, #222222 100%);
    color: white;
    border-color: #b91c1c !important;
    border-width: 2px;
    z-index: 1;
    transition: color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
    display: inline-block;
}

.btn-tt-danger::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border-color: #b91c1c !important;
    border-width: 2px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.btn-tt-danger:hover {
    color: white !important;
    border-color: #b91c1c !important;
    border-width: 2px;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
}

.btn-tt-danger:hover::before {
    opacity: 1;
}

/* Success button with green color scheme */
.btn-tt-success {
    position: relative;
    background: linear-gradient(135deg, #333333 0%, #222222 100%);
    color: white;
    border-color: #047857 !important;
    border-width: 2px;
    z-index: 1;
    transition: color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
}

.btn-tt-success::before {
    content: "";
    position: absolute;
    border-color: #047857 !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 10px;
    border-width: 2px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.btn-tt-success:hover {
    color: white !important;
    border-color: #047857 !important;
    border-width: 2px;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.btn-tt-success:hover::before {
    opacity: 1;
}

/* Outline button variations */
.btn-tt-outline {
    background: transparent;
    color: #9333ea;
    border-color: #9333ea;
    transition: background 0.4s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.btn-tt-outline:hover {
    background: rgba(147, 51, 234, 0.1);
    color: #a855f7;
    border-color: #a855f7;
    box-shadow: 0 8px 20px rgba(147, 51, 234, 0.2);
}

/* Light button for dark backgrounds */
.btn-tt-light {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    transition: background 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.btn-tt-light:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1);
}

/* Small size variation */
.btn-tt-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Large size variation */
.btn-tt-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* Default button (transparent with border) */
.btn-tt-default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    background-color: transparent;
    color: #e0e0e0;
    border: 1px solid #444444;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 1.1rem;
    font-family: 'UglyQua', serif;
    width: auto; /* This allows the button to size naturally */
}

.btn-tt-default:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: white !important;
    border-color: #6f6f6f;
    box-shadow: 0 10px 20px rgba(111, 111, 111, 0.2);
}

.btn-tt-default i {
    margin-right: 10px;
    font-size: 1.1rem;
}

/* Keep the profile-scoped version for backward compatibility */
/* It will now inherit from the global .btn-tt-default but override width to 100% */
.profile-edit-scope .btn-tt-default {
    width: 100%; /* This is the only difference needed for the profile page */
    color: var(--text-primary); /* Use the variable from profile scope */
    border-color: var(--border-color); /* Use the variable from profile scope */
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .btn-tt {
        padding: 0.7rem 1.2rem;
    }
    
    .btn-tt-lg {
        padding: 0.8rem 1.5rem;
    }
    
    .btn-tt i {
        margin-right: 8px;
    }
}

/* Fix for icon alignment in mobile buttons */
@media (max-width: 480px) {
    .btn-tt {
        justify-content: center;
        width: 100%;
        margin-bottom: 10px;
    }
}