/* ========================================
   PROFESSIONAL PURPLE THEME - DollarBold
   ======================================== */

/* === Purple Color Variables === */
:root {
    --purple-primary: #7c3aed;
    --purple-dark: #6d28d9;
    --purple-light: #a78bfa;
    --purple-border: #9333ea;
    --white: #ffffff;
    --text-dark: #1f2937;
    --shadow-purple: rgba(124, 58, 237, 0.15);
}

/* === Cards - White with Purple Border === */
.card, .card-primary, .card-body {
    background-color: var(--white) !important;
    border: 1px solid var(--purple-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px var(--shadow-purple) !important;
    transition: all 0.3s ease !important;
}

.card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px var(--shadow-purple) !important;
}

.card-history {
    border: 1px solid var(--purple-border) !important;
    background-color: var(--white) !important;
}

/* === Buttons - Purple with White Text === */
.btn-primary {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%) !important;
    border: none !important;
    color: var(--white) !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px var(--shadow-purple) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(135deg, var(--purple-dark) 0%, var(--purple-primary) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px var(--shadow-purple) !important;
    color: var(--white) !important;
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    color: var(--white) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: var(--white) !important;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border: none !important;
    color: var(--white) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

/* === Navbar - Purple Bottom Border === */
.navbar, header {
    border-bottom: 1px solid var(--purple-border) !important;
    background-color: var(--white) !important;
    box-shadow: 0 2px 10px var(--shadow-purple) !important;
}

/* === Footer - Purple Top Border === */
.page-footer, footer {
    border-top: 1px solid var(--purple-border) !important;
    background-color: var(--white) !important;
    padding: 20px 0 !important;
    margin-top: 40px !important;
}

/* === Pills/Tabs - Purple Theme === */
.nav-link.b-b:not(.active) {
    border: 1px solid var(--purple-border) !important;
    border-radius: 8px !important;
    margin-right: 6px !important;
    margin-top: 4px !important;
    padding: 8px 18px !important;
    color: var(--purple-primary) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.nav-link.b-b:hover {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%) !important;
    color: var(--white) !important;
    transform: translateY(-2px) !important;
}

.p-s, .active.p-pills {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%) !important;
    border: none !important;
    color: var(--white) !important;
    margin-right: 6px !important;
    margin-top: 4px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

.p-ss {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%) !important;
    border: none !important;
    color: var(--white) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

/* === Badges === */
.badge-info {
    background-color: var(--purple-light) !important;
    color: var(--white) !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

.badge-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

.badge-pending {
    background-color: #fbbf24 !important;
    color: var(--white) !important;
    font-weight: 600 !important;
}

.badge-send {
    background-color: #10b981 !important;
    color: var(--white) !important;
    font-weight: 600 !important;
}

.badge-danger {
    background-color: #ef4444 !important;
    color: var(--white) !important;
    font-weight: 600 !important;
}

/* === Balance Card - Purple Gradient === */
.card-balance {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%) !important;
    border: none !important;
    color: var(--white) !important;
    box-shadow: 0 8px 30px var(--shadow-purple) !important;
}

.card-deposit-balance {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    border: none !important;
    color: var(--white) !important;
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.3) !important;
}

/* === Form Controls - Purple Border === */
.form-control {
    border: 1px solid var(--purple-border) !important;
    border-radius: 8px !important;
    color: var(--text-dark) !important;
    padding: 12px !important;
    transition: all 0.3s ease !important;
}

.form-control:focus,
.form-control:hover {
    border: 1px solid var(--purple-dark) !important;
    box-shadow: 0 0 0 3px var(--shadow-purple) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: var(--purple-light) !important;
}

/* === Alerts === */
.alert-primary {
    background-color: #f3e8ff !important;
    color: var(--purple-dark) !important;
    border: 1px solid var(--purple-light) !important;
    border-radius: 8px !important;
}

.alert-info {
    background-color: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #60a5fa !important;
    border-radius: 8px !important;
}

.alert-success {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #34d399 !important;
    border-radius: 8px !important;
}

.alert-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fbbf24 !important;
    border-radius: 8px !important;
}

.alert-ref {
    background-color: #d1fae5 !important;
    color: #047857 !important;
    border: 1px solid #6ee7b7 !important;
    border-radius: 8px !important;
}

/* === Text Colors === */
.text-primary, .text-history, label {
    color: var(--purple-primary) !important;
}

.text-main, .modal-title, .text-ltc {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.text-reward {
    color: var(--purple-dark) !important;
    font-weight: 700 !important;
}

.text-dark-main {
    color: var(--text-dark) !important;
}

/* === Dropdown Menu === */
.dropdown-menu {
    border: 1px solid var(--purple-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px var(--shadow-purple) !important;
}

.dropdown-item {
    color: var(--purple-primary) !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    transition: all 0.3s ease !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%) !important;
    color: var(--white) !important;
}

.dropdown-item.active {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%) !important;
    color: var(--white) !important;
}

/* === Modal === */
.modal-content {
    border: 1px solid var(--purple-border) !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 40px var(--shadow-purple) !important;
}

.modal-header {
    border-bottom: 1px solid var(--purple-light) !important;
}

.modal-footer {
    border-top: 1px solid var(--purple-light) !important;
}

.close {
    color: var(--purple-primary) !important;
    font-size: 32px !important;
}

.close:hover {
    color: var(--purple-dark) !important;
}

/* === Tables === */
.table {
    border: 1px solid var(--purple-border) !important;
    border-radius: 8px !important;
}

.table thead th {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%) !important;
    color: var(--white) !important;
    border: none !important;
    font-weight: 600 !important;
}

.table tbody tr {
    border-bottom: 1px solid var(--purple-light) !important;
}

.table tbody tr:hover {
    background-color: #faf5ff !important;
}

/* === Progress Bar === */
.progress {
    background-color: #e9d5ff !important;
    border-radius: 8px !important;
    border: 1px solid var(--purple-light) !important;
}

.progress-bar {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%) !important;
    border-radius: 8px !important;
}

/* === SweetAlert === */
.swal2-confirm {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%) !important;
    color: var(--white) !important;
    border: none !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

.swal2-confirm:hover,
.swal2-confirm:focus {
    box-shadow: 0 4px 15px var(--shadow-purple) !important;
}

/* === Links === */
a {
    color: var(--purple-primary) !important;
    transition: all 0.3s ease !important;
}

a:hover {
    color: var(--purple-dark) !important;
    text-decoration: none !important;
}

/* === Navbar Toggler === */
.navbar-toggler {
    border: 1px solid var(--purple-border) !important;
}

.navbar-toggler:focus,
.navbar-toggler:hover {
    box-shadow: 0 0 0 3px var(--shadow-purple) !important;
}

/* === Nav Items === */
.nav-item.active a {
    color: var(--purple-primary) !important;
    font-weight: 700 !important;
}

.nav-link.cus1,
.nav-link.cus2,
.nav-link.cus4 {
    color: var(--purple-primary) !important;
    font-weight: 600 !important;
}

.nav-link.cus1:hover,
.nav-link.cus2:hover {
    color: var(--purple-dark) !important;
}

.nav-link.cus4:hover {
    color: var(--white) !important;
}

/* === HR Divider === */
hr {
    border-color: var(--purple-border) !important;
    opacity: 0.3 !important;
}

.color-1 p, .color-1 hr {
    color: var(--purple-primary) !important;
    border-color: var(--purple-border) !important;
}

/* === Code === */
code {
    background-color: #f3e8ff !important;
    color: var(--purple-dark) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    border: 1px solid var(--purple-light) !important;
}

/* === Utility Classes === */
.-ml-2 { margin-left: -7px !important; }
.-mr-2 { margin-right: -7px !important; }
.-mt-1 { margin-top: -4px !important; }

.balance-text {
    margin-bottom: 10px !important;
    margin-top: 1px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

#refresh {
    margin-top: 0.7px !important;
    margin-left: 10px !important;
    margin-right: -5px !important;
}

/* === Pill Pills Hover Effects === */
.i-pill:hover {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%) !important;
    color: var(--white) !important;
}

.p-pills.i-pill:hover,
.p-pills.i-pill:focus,
.p-pills.i-pill:active,
.p-pills.i-pill:not(:hover) {
    background-color: transparent !important;
}

/* === Ad Container === */
.ad-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto !important;
    max-width: 468px;
    padding: 10px;
}

/* === Responsive === */
@media screen and (max-width: 767px) {
    .ad-container {
        max-width: 100%;
        padding: 5px;
    }
    
    .btn-primary, .btn-success, .btn-warning {
        padding: 8px 16px !important;
        font-size: 14px !important;
    }
    
    .card {
        margin-bottom: 15px !important;
    }
}

/* === Additional Purple Accents === */
.bg-main {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%) !important;
}

.border-purple {
    border-color: var(--purple-border) !important;
}

.shadow-purple {
    box-shadow: 0 4px 15px var(--shadow-purple) !important;
}

/* === Focus States === */
*:focus {
    outline: none !important;
}

button:focus,
a:focus {
    outline: none !important;
}

/* === Text Selection === */
::selection {
    background-color: var(--purple-light) !important;
    color: var(--white) !important;
}

::-moz-selection {
    background-color: var(--purple-light) !important;
    color: var(--white) !important;
}

/* === Feature Cards (Homepage) === */
.feature-card {
    transition: all 0.3s ease !important;
    cursor: pointer;
}

.feature-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
}

/* === Stat Cards (Homepage) === */
.stat-card {
    transition: all 0.3s ease !important;
}

.stat-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
}

/* === Live Badge === */
.badge-live {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3) !important;
}

/* === Hero Section Clean === */
.hero-section-clean {
    background: transparent !important;
    padding: 40px 0 !important;
}


/* === Additional Button Styles === */
.btn-primary.dep {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%) !important;
    box-shadow: 0 4px 15px var(--shadow-purple) !important;
}

.btn-primary.dep:hover,
.btn-primary.dep:focus,
.btn-primary.dep:active {
    background: linear-gradient(135deg, var(--purple-dark) 0%, var(--purple-primary) 100%) !important;
    transform: translateY(-2px) !important;
}

.btn-primary.with {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%) !important;
    color: var(--white) !important;
}

/* === Text Gradient Classes === */
.text-ltc2 {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.text-x {
    color: var(--purple-primary) !important;
}

.text-dark-blue {
    color: var(--purple-dark) !important;
}

.text-dark-p {
    color: var(--text-dark) !important;
}

/* === Badge Warning Button === */
.badge-warning-btn {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%) !important;
    color: var(--white) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.badge-warning-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 2px 8px var(--shadow-purple) !important;
}

/* === Price Data === */
.priceData {
    width: 21px;
    height: 21px;
    margin-top: -3.5px;
}

/* === Underline Class === */
.underline {
    text-decoration: underline !important;
}