/* BuyukWeb - Main Stylesheet */
/* Modern WHMCS Template with Pink/Indigo/Purple Theme */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@import 'variables.css';
@import 'reset.css';
@import 'utilities.css';
@import 'layout.css';
@import 'buttons.css';
@import 'forms.css';
@import 'cards.css';
@import 'tables.css';
@import 'modals.css';
@import 'responsive.css';

/* Additional Global Styles */

/* Loading Spinner */
.bw-loading {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

.bw-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary-purple);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Skeleton Loading */
.bw-skeleton {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Avatar */
.bw-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.bw-avatar-sm { width: 32px; height: 32px; }
.bw-avatar-lg { width: 56px; height: 56px; }
.bw-avatar-xl { width: 80px; height: 80px; }

/* Badge */
.bw-badge,
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    color: var(--gray-600);
}

.bw-badge-primary { background: rgba(139, 92, 246, 0.15); color: var(--primary-purple); }
.bw-badge-pink { background: rgba(236, 72, 153, 0.15); color: var(--primary-pink); }
.bw-badge-success { background: var(--success-light); color: var(--success); }
.bw-badge-warning { background: var(--warning-light); color: var(--warning); }
.bw-badge-danger { background: var(--danger-light); color: var(--danger); }

/* Divider */
.bw-divider {
    height: 1px;
    background: var(--gray-200);
    margin: var(--spacing-lg) 0;
}

.bw-divider-text {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--gray-400);
    font-size: var(--font-size-sm);
}

.bw-divider-text::before,
.bw-divider-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}

/* List Group */
.bw-list-group,
.list-group {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.bw-list-item,
.list-group-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--white);
    border-bottom: 1px solid var(--gray-100);
    transition: background var(--transition-fast);
}

.bw-list-item:last-child,
.list-group-item:last-child {
    border-bottom: none;
}

.bw-list-item:hover,
.list-group-item:hover {
    background: var(--gray-50);
}

a.bw-list-item:hover,
a.list-group-item:hover {
    color: var(--primary-purple);
}

.bw-list-item .ml-auto {
    margin-left: auto;
}

.btn-outline-primary {
    color: var(--primary-purple);
    border: 2px solid var(--primary-purple);
    background: transparent;
    padding: 0.375rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-fast);
}

.btn-outline-primary:hover {
    background: var(--primary-purple);
    color: var(--white);
}

/* List Item Button Styles */
.bw-list-item .btn-outline-primary,
.bw-list-group .btn-outline-primary {
    padding: 0.375rem 0.875rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-md);
    white-space: nowrap;
    display: inline-block;
}

/* Well / Info Box */
.bw-well,
.well {
    padding: var(--spacing-lg);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
}

/* Blockquote */
.bw-blockquote,
blockquote {
    padding: var(--spacing-md) var(--spacing-lg);
    border-left: 4px solid var(--primary-purple);
    background: var(--gray-50);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: var(--spacing-lg) 0;
}

/* Code */
code {
    padding: 2px 6px;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    font-family: 'Fira Code', monospace;
    font-size: var(--font-size-sm);
    color: var(--primary-pink);
}

pre {
    padding: var(--spacing-lg);
    background: var(--gray-900);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}

pre code {
    background: none;
    color: var(--gray-100);
    padding: 0;
}

/* Animations */
.bw-fade-in {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.bw-slide-up {
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover Effects */
.bw-hover-lift {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.bw-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.bw-hover-glow:hover {
    box-shadow: var(--shadow-glow);
}

/* Gradient Text */
.bw-gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Icon Wrapper */
.bw-icon-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--gray-100);
    color: var(--gray-600);
}

.bw-icon-wrapper-primary {
    background: rgba(139, 92, 246, 0.15);
    color: var(--primary-purple);
}

.bw-icon-wrapper-pink {
    background: rgba(236, 72, 153, 0.15);
    color: var(--primary-pink);
}

/* Clearfix */
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* Hide/Show */
.hidden {
    display: none !important;
}

/* Full Page Overlay */
#fullpage-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
}

#fullpage-overlay .outer-wrapper {
    text-align: center;
}

#fullpage-overlay img {
    width: 60px;
    height: 60px;
    margin-bottom: var(--spacing-md);
}

#fullpage-overlay .msg {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

/* Bootstrap Grid System */
.container {
    width: 100%;
    max-width: 100%;
    padding: 0 var(--spacing-lg);
    margin: 0 auto;
}

.container-fluid {
    width: 100%;
    padding: 0 var(--spacing-lg);
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--spacing-md) * -1);
    margin-right: calc(var(--spacing-md) * -1);
}

/* Column Base */
[class*="col-"] {
    position: relative;
    width: 100%;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* Column Sizes */
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Small screens (sm >= 576px) */
@media (min-width: 576px) {
    .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Medium screens (md >= 768px) */
@media (min-width: 768px) {
    .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Large screens (lg >= 992px) */
@media (min-width: 992px) {
    .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Extra large screens (xl >= 1200px) */
@media (min-width: 1200px) {
    .col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
    .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Gravatar */
.gravatar {
    border-radius: var(--radius-full);
}

/* WHMCS Specific Overrides */
.main-content {
    min-height: calc(100vh - var(--header-height) - 100px);
}

.sidebar {
    display: none; /* We use our own sidebar */
}

#main-body {
    padding: 0;
}

.page-header {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--gray-200);
}

.page-header h1 {
    font-size: var(--font-size-2xl);
    margin: 0;
}