/* ============================================
   SUPPORT PAGES STYLES (Help Center, Terms, Bug Report)
   ============================================ */

/* Help Center Styles */
.help-card {
    @apply bg-gradient-to-br from-white/6 to-white/3 border border-white/10 rounded-2xl p-6 hover:border-white/20 hover:from-white/8 hover:to-white/4 transition-all duration-300 hover:shadow-xl hover:shadow-black/30;
}

.help-link {
    @apply block text-sm text-white/70 hover:text-white hover:translate-x-1 transition-all duration-200;
}

/* Terms & Policies Styles */
.tab-btn {
    @apply px-5 py-2.5 rounded-xl text-sm font-bold transition-all whitespace-nowrap;
    @apply bg-white/5 border border-white/10 text-white/70;
}

.tab-btn:hover {
    @apply bg-white/8 text-white/90 border-white/15;
}

.tab-btn.active {
    @apply bg-white/95 text-[#0b0c10] border-white;
}

.tab-content {
    @apply hidden;
}

.tab-content.active {
    @apply block;
}

.terms-section {
    @apply bg-gradient-to-br from-white/6 to-white/3 border border-white/10 rounded-2xl p-8 mb-6;
}

.terms-section h2 {
    @apply text-2xl font-black text-white mb-4;
}

.terms-section p {
    @apply text-white/75 leading-relaxed mb-4;
}

.terms-section p:last-child {
    @apply mb-0;
}

.terms-section ul {
    @apply list-disc list-inside space-y-2 text-white/75 ml-4;
}

.terms-section strong {
    @apply text-white font-bold;
}

/* Bug Report Styles */
.bug-radio-card {
    @apply cursor-pointer;
}

.bug-radio-content {
    @apply flex items-center gap-3 px-4 py-3.5 rounded-xl border border-white/10 bg-white/5 transition-all;
}

.bug-radio-card input:checked+.bug-radio-content {
    @apply border-white/95 bg-white/95 text-[#0b0c10];
}

.bug-radio-card:hover .bug-radio-content {
    @apply border-white/20 bg-white/8;
}

.bug-radio-card input:checked+.bug-radio-content {
    @apply hover:border-white hover:bg-white;
}

.bug-radio-content span {
    @apply text-sm font-bold text-white/90;
}

.bug-radio-card input:checked+.bug-radio-content span {
    @apply text-[#0b0c10];
}

/* Utility for hiding screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Common Header Styles */
.support-header {
    @apply border-b border-white/8 bg-black/20 backdrop-blur-md sticky top-0 z-40;
}

.support-back-btn {
    @apply flex items-center gap-3 group;
}

.support-back-icon {
    @apply w-8 h-8 rounded-xl bg-white/10 border border-white/20 flex items-center justify-center group-hover:bg-white/15 transition-all;
}

.support-back-text {
    @apply text-sm font-bold text-white/90 group-hover:text-white transition-colors;
}

/* Hero Section Common Styles */
.support-hero {
    @apply max-w-7xl mx-auto px-6 py-16 text-center;
}

.support-hero-icon {
    @apply inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 border border-white/10 mb-6;
}

.support-hero-title {
    @apply text-4xl md:text-5xl font-black text-white mb-4 tracking-tight;
}

.support-hero-desc {
    @apply text-lg text-white/60 max-w-2xl mx-auto;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .terms-section {
        @apply p-6;
    }

    .support-hero-title {
        @apply text-3xl;
    }
}


.overflow-auto {
    overflow: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}