/* 
		Theme: Skila  
		Prometheus Version: 1.6 
		*/

/* Define CSS variables for consistent colors */
:root {
    --skila-red: #ff3333;
    --skila-blue: #0066ff;
    --skila-black: #121216;
    --skila-dark: #1a1a1f;
    --skila-darker: #15151a;
    --skila-white: #ffffff;
    --skila-light-gray: #e0e0e5;
}

/* Navbar styling with gradient */
.navbar-inverse {
    background: linear-gradient(90deg, rgba(255, 51, 51, 0.1), rgba(0, 102, 255, 0.1)) !important;
    backdrop-filter: blur(10px) !important;
    border: none !important;
}

.navbar-inverse .navbar-nav > li > a {
    color: var(--skila-light-gray) !important;
    transition: all 0.3s ease !important;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    background: linear-gradient(90deg, var(--skila-red), var(--skila-blue)) !important;
    color: var(--skila-white) !important;
    border-radius: 6px !important;
}

/* Body and background */
body, .wrap {
    background-color: var(--skila-black) !important;
    background-image: linear-gradient(135deg, rgba(255, 51, 51, 0.05), rgba(0, 0, 0, 0.1), rgba(0, 102, 255, 0.05)) !important;
    color: var(--skila-light-gray) !important;
}

/* Links and accents */
a {
    background: linear-gradient(90deg, var(--skila-red), var(--skila-blue)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    transition: all 0.2s ease !important;
}

a:hover, a:focus {
    opacity: 0.8 !important;
}

/* Headers */
h1, .header {
    background: linear-gradient(90deg, var(--skila-red), var(--skila-blue)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
}

/* Buttons */
.btn-prom {
    background: linear-gradient(90deg, var(--skila-red), var(--skila-blue)) !important;
    border: none !important;
    color: var(--skila-white) !important;
    transition: all 0.3s ease !important;
}

.btn-prom:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(255, 51, 51, 0.3), 0 4px 15px rgba(0, 102, 255, 0.3) !important;
}

/* Panels and boxes */
.options, .dashboard-widget-small-box, .panel-body, .stat-box, #sortable li {
    background: linear-gradient(135deg, rgba(255, 51, 51, 0.05), rgba(0, 0, 0, 0.1), rgba(0, 102, 255, 0.05)) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Store boxes */
.store-box {
    background: linear-gradient(135deg, rgba(255, 51, 51, 0.05), rgba(0, 0, 0, 0.1), rgba(0, 102, 255, 0.05)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
}

.store-box:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
}

.store-box-header {
    background: linear-gradient(90deg, var(--skila-red), var(--skila-blue)) !important;
    color: var(--skila-white) !important;
}

/* Form elements */
.form-control {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--skila-light-gray) !important;
}

.form-control:focus {
    border-color: var(--skila-red) !important;
    box-shadow: 0 0 15px rgba(255, 51, 51, 0.2), 0 0 15px rgba(0, 102, 255, 0.2) !important;
}

/* Tables */
.table-striped thead {
    background: linear-gradient(90deg, var(--skila-red), var(--skila-blue)) !important;
    color: var(--skila-white) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Modal styling */
.modal-content {
    background: linear-gradient(135deg, rgba(255, 51, 51, 0.05), rgba(0, 0, 0, 0.1), rgba(0, 102, 255, 0.05)) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.modal-header {
    background: linear-gradient(90deg, var(--skila-red), var(--skila-blue)) !important;
    color: var(--skila-white) !important;
}

/* Package cards */
.package-card {
    background: linear-gradient(135deg, rgba(255, 51, 51, 0.05), rgba(0, 0, 0, 0.1), rgba(0, 102, 255, 0.05)) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.package-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
}

/* Navigation elements */
.pagination > .active > a {
    background: linear-gradient(90deg, var(--skila-red), var(--skila-blue)) !important;
    border: none !important;
    color: var(--skila-white) !important;
}

.pagination > li > a {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Footer */
.footer {
    background: linear-gradient(90deg, rgba(255, 51, 51, 0.1), rgba(0, 102, 255, 0.1)) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus{color: rgb(220, 45, 45) !important;}.navbar-inverse .navbar-nav > .active > a{background-color: rgb(30, 30, 35) !important;}.navbar-inverse .navbar-nav > .active > a{color: rgb(240, 240, 245) !important;}body{color: rgb(220, 220, 225) !important;}hr{border-color: rgb(45, 45, 50) !important;}h2{color: rgb(240, 240, 245) !important;}h3{color: rgb(220, 45, 45) !important;}h6{color: rgb(220, 45, 45) !important;}.bs-callout{background-color: rgb(25, 25, 30) !important; border: 1px solid rgb(35, 35, 40) !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;}.bs-callout{color: rgb(220, 220, 225) !important;}.bs-callout-success{border-left-color: rgb(40, 180, 40) !important;}.bs-callout-danger{border-left-color: rgb(220, 45, 45) !important;}.bs-callout-info{border-left-color: rgb(220, 45, 45) !important;}.pagination li a{background-color: rgb(25, 25, 30) !important; border-radius: 6px !important; margin: 0 2px !important;}.pagination li a{color: rgb(220, 220, 225) !important;}.pagination li a:hover, .pagination li a:focus{background-color: rgb(220, 45, 45) !important;}.pagination li a:hover, .pagination li a:focus{color: rgb(240, 240, 245) !important;}.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus{background-color: rgb(220, 45, 45) !important;}.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus{color: rgb(240, 240, 245) !important;}.srv-label{background-color: rgb(220, 45, 45) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; border-radius: 6px !important;}.srv-label{color: rgb(240, 240, 245) !important;}.srv-box:hover{background-color: rgb(30, 30, 35) !important; transition: all 0.3s ease !important;}.srv-box:hover .fa{color: rgb(220, 45, 45) !important;}.options, .dashboard-widget-small-box, .panel-body, .stat-box, #sortable li{background-color: rgb(25, 25, 30) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; border-radius: 10px !important;}.options, .dashboard-widget-small-box, .panel-body, .panel-body .panel-inner, .stat-box{color: rgb(200, 200, 205) !important;}.panel-body > .panel-header, .stat-box-header{background-color: rgb(30, 30, 35) !important; border-bottom: 1px solid rgb(40, 40, 45) !important; border-radius: 10px 10px 0 0 !important;}.panel-body > .panel-header, .stat-box-header{color: rgb(220, 45, 45) !important;}.dashboard-widget-small-box{border-color: rgb(40, 40, 45) !important; transition: transform 0.2s ease !important;}.dashboard-widget-small-box:hover{transform: translateY(-2px) !important;}.dashboard-widget-small-box .element{color: rgb(220, 45, 45) !important;}.dashboard-widget-small-box i, #sortable li i{color: rgb(220, 45, 45) !important;}.dashboard-widget-small-box .caption{color: rgb(220, 220, 225) !important;}.form-control{background-color: rgb(30, 30, 35) !important; border: 1px solid rgb(45, 45, 50) !important; border-radius: 8px !important; transition: all 0.3s ease !important;}.form-control{color: rgb(220, 220, 225) !important;}.form-control:focus{border-color: rgb(220, 45, 45) !important; box-shadow: 0 0 5px rgba(220, 45, 45, 0.2) !important;}.icheckbox_line-red, .iradio_line-red{background: rgb(30, 30, 35) !important; border-radius: 6px !important;}.icheckbox_line-red, .iradio_line-red{color: rgb(240, 240, 245) !important;}.icheckbox_line-red.checked, .iradio_line-red.checked{border-color: rgb(220, 45, 45) !important;}.icheckbox_line-red, .iradio_line-red{border-color: rgb(220, 45, 45) !important;}.btn-prom{background-color: rgb(220, 45, 45) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; border-radius: 8px !important; transition: all 0.3s ease !important;}.btn-prom{color: rgb(240, 240, 245) !important;}.btn-prom:hover, .btn-prom:focus{background-color: rgb(180, 35, 35) !important; transform: translateY(-1px) !important;}.btn-prom:hover, .btn-prom:focus{color: rgb(240, 240, 245) !important;}.dropdown-menu{background-color: rgb(25, 25, 30) !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important; border-radius: 8px !important;}.dropdown-menu{color: rgb(220, 220, 225) !important;}.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{background-color: rgb(35, 35, 40) !important;}.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{color: rgb(220, 45, 45) !important;}.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus{background-color: rgb(220, 45, 45) !important;}.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus{color: rgb(240, 240, 245) !important;}.table-striped thead{background-color: rgb(30, 30, 35) !important;}.table-striped thead{color: rgb(220, 45, 45) !important;}.table-striped > tbody > tr:nth-of-type(odd){background-color: rgb(25, 25, 30) !important;}.table-striped > tbody > tr:nth-of-type(odd){color: rgb(220, 220, 225) !important;}.table{color: rgb(200, 200, 205) !important; border-radius: 8px !important; overflow: hidden !important;}.main-menu-box, .version-marker{background-color: rgb(18, 18, 22) !important; border-radius: 0 10px 10px 0 !important;}.main-menu-box ul li{color: rgb(220, 220, 225) !important; transition: all 0.2s ease !important;}.main-menu-box ul li:hover{background-color: rgb(30, 30, 35) !important;}.main-menu-box ul li.active{background-color: rgb(220, 45, 45) !important;}.main-menu-box ul li.active{color: rgb(240, 240, 245) !important;}.version-marker{color: rgb(150, 150, 155) !important;}.main-menu-box .sub-menu{background-color: rgb(22, 22, 26) !important;}.main-menu-box ul.sub-menu .submenu-header{color: rgb(220, 45, 45) !important;}.content-page-top{background-color: rgb(18, 18, 22) !important; border-radius: 10px !important;}.content-page-top > span{color: rgb(220, 45, 45) !important;}.content-page-top > span > i{color: rgb(220, 45, 45) !important;}.content-page-top:after{border-color: rgb(18, 18, 22) transparent transparent !important;}.dashboard-nav, .dashboard-nav a{background-color: rgb(25, 25, 30) !important; border-radius: 8px !important;}.dashboard-nav a{color: rgb(220, 220, 225) !important; transition: all 0.2s ease !important;}.dashboard-nav a:hover, .dashboard-nav a:focus{background-color: rgb(35, 35, 40) !important;}.dashboard-nav a:hover, .dashboard-nav a:focus{color: rgb(220, 45, 45) !important;}.dashboard-nav a.active{background-color: rgb(220, 45, 45) !important;}.dashboard-nav a.active{color: rgb(240, 240, 245) !important;}.pkg-step{background-color: rgb(25, 25, 30) !important; border-radius: 8px !important;}.pkg-step{color: rgb(220, 220, 225) !important;}.modal-content{background-color: rgb(25, 25, 30) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; border-radius: 12px !important;}.modal-content{color: rgb(220, 220, 225) !important;}.modal-header{background-color: rgb(30, 30, 35) !important; border-bottom: 1px solid rgb(40, 40, 45) !important; border-radius: 12px 12px 0 0 !important; padding: 20px !important;}.modal-header{color: rgb(220, 45, 45) !important;}.modal-footer{background-color: rgb(30, 30, 35) !important; border-top: 1px solid rgb(40, 40, 45) !important; border-radius: 0 0 12px 12px !important;}.credits{background-color: rgb(18, 18, 22) !important; border-radius: 10px !important;}.credits{color: rgb(220, 220, 225) !important;}.banner{background-color: rgb(22, 22, 26) !important; border-radius: 10px !important;}.footer{background-color: rgb(18, 18, 22) !important; border-radius: 10px 10px 0 0 !important;}.footer{color: rgb(220, 220, 225) !important;}.version{color: rgb(220, 45, 45) !important;}.darker-box, .info-box{background-color: rgb(25, 25, 30) !important; border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;}.categoryLink{background-color: rgb(220, 45, 45) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; border-radius: 8px !important; transition: all 0.3s ease !important;}.categoryLink{color: rgb(240, 240, 245) !important;}.categoryLink:hover{color: rgb(220, 220, 225) !important; transform: translateY(-2px) !important;}.buy-btn{background-color: rgb(220, 45, 45) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; border-radius: 8px !important; transition: all 0.3s ease !important;}.buy-btn{color: rgb(240, 240, 245) !important;}.buy-btn{border-color: rgb(220, 45, 45) !important;}.buy-btn:hover, .buy-btn:focus{background-color: rgb(180, 35, 35) !important; transform: translateY(-1px) !important;}.buy-btn:hover{border-color: rgb(180, 35, 35) !important;}.store-box, .store-box-upper span, .store-box-upper li{border-color: rgb(40, 40, 45) !important;}.store-box-upper span{color: rgb(220, 45, 45) !important;}.store-box-header{background-color: rgb(30, 30, 35) !important; border-radius: 10px 10px 0 0 !important;}.store-box-header{color: rgb(220, 45, 45) !important;}.credit-content{border-color: rgb(40, 40, 45) !important; border-radius: 8px !important;}.credit-content{color: rgb(220, 45, 45) !important;}.credit-content span{color: rgb(150, 150, 155) !important;}.ticket-header{background-color: rgb(30, 30, 35) !important; border-radius: 10px 10px 0 0 !important;}.ticket-header{color: rgb(220, 45, 45) !important;}.store-box{background-color: rgb(25, 25, 30) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; border-radius: 10px !important; overflow: hidden !important; transition: transform 0.2s ease !important; display: flex !important; flex-direction: column !important; height: auto !important; margin-bottom: 10px !important;}.store-box:hover{transform: translateY(-2px) !important;}.store-box-upper{padding: 15px !important; flex-grow: 1 !important;}.store-box-upper span{font-size: 1.5em !important; color: rgb(220, 45, 45) !important; display: block !important; margin-bottom: 10px !important;}.store-box-upper ul{list-style: none !important; padding: 0 !important; margin: 0 !important;}.store-box-upper ul li{padding: 8px 0 !important; border-top: 1px solid rgb(35, 35, 40) !important;}.store-box-lower{padding: 20px !important; border-top: 1px solid rgb(35, 35, 40) !important;}.store-box-footer{padding: 20px !important; border-top: 1px solid rgb(35, 35, 40) !important; display: flex !important; justify-content: space-between !important; align-items: center !important;}.store-box-footer-price{font-size: 1.2em !important;}.store-box-footer-button{text-align: right !important;}

/* Modal Styles */
.modal-content{background-color: rgb(25, 25, 30) !important; border: none !important;}.modal-header{border-bottom: 1px solid rgb(35, 35, 40) !important; padding: 20px !important;}.modal-header .close{color: rgb(220, 220, 225) !important; opacity: 0.8 !important; transition: opacity 0.2s ease !important; background: none !important; border: none !important; font-size: 24px !important; padding: 0 !important; margin: 0 !important; width: 30px !important; height: 30px !important; line-height: 30px !important; text-shadow: none !important;}.modal-header .close:hover{opacity: 1 !important; color: rgb(220, 45, 45) !important;}.modal-title{color: rgb(220, 45, 45) !important; font-size: 1.8em !important;}.modal-body{padding: 30px !important;}.package-details h6{color: rgb(220, 45, 45) !important; margin-bottom: 20px !important;}.package-features{list-style: none !important; padding: 0 !important; margin: 0 0 30px 0 !important;}.package-features li{padding: 10px 15px !important; background: rgb(30, 30, 35) !important; margin-bottom: 5px !important; border-radius: 5px !important;}.package-description{color: rgb(200, 200, 205) !important;}.package-price{background: rgb(30, 30, 35) !important; padding: 20px !important; border-radius: 10px !important;}.modal-footer{border-top: 1px solid rgb(35, 35, 40) !important; padding: 20px !important;}

/* Package sections */
.packages-with-images,
.packages-no-images {
    margin-bottom: 30px !important;
}

.packages-with-images .col-md-3,
.packages-no-images .col-md-3 {
    display: flex !important;
    justify-content: center !important;
}

/* Package card styles */
.package-card {
    background-color: rgb(25, 25, 30) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    max-width: 280px !important;
    margin-bottom: 10px !important;
}

.package-card:hover {
    transform: translateY(-2px) !important;
}

.package-card-image {
    width: 100% !important;
    height: 240px !important;
    overflow: hidden !important;
}

.package-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.package-card-content {
    padding: 15px !important;
}

.package-card-content h3 {
    color: rgb(220, 45, 45) !important;
    font-size: 1.4em !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

.package-card-price {
    color: rgb(240, 240, 245) !important;
    font-size: 1.2em !important;
    text-align: center !important;
    margin-bottom: 0 !important;
}

/* Modal Styles */
.modal-header {
    text-align: center !important;
    display: block !important;
    padding: 20px !important;
}

.modal-title {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    color: rgb(220, 45, 45) !important;
    font-size: 1.8em !important;
}

.modal-header .close {
    position: absolute !important;
    right: 20px !important;
    top: 20px !important;
}

/* Modal footer with buttons */
.modal-footer {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 20px !important;
    border-top: 1px solid rgb(40, 40, 45) !important;
}

.modal-footer .btn,
.modal-footer input[type="submit"] {
    min-width: 120px !important;
    padding: 10px 20px !important;
    text-align: center !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.modal-footer .btn-prom {
    background-color: rgb(220, 45, 45) !important;
    color: rgb(240, 240, 245) !important;
}

.modal-footer .btn-prom:hover {
    background-color: rgb(180, 35, 35) !important;
    transform: translateY(-2px) !important;
}

.modal-footer .btn-default {
    background-color: rgb(30, 30, 35) !important;
    color: rgb(220, 220, 225) !important;
    border: 1px solid rgb(45, 45, 50) !important;
}

.modal-footer .btn-default:hover {
    background-color: rgb(35, 35, 40) !important;
    color: rgb(220, 45, 45) !important;
}

/* Hide secondary button in modal footer */
.modal-footer .btn-secondary {
    display: none !important;
}

/* Donor Tables - Darkened Headers */
.top-donors th,
.recent-donors th,
.donors-table th,
.table-header {
    background: linear-gradient(90deg, 
        rgba(255, 51, 51, 0.3), 
        rgba(0, 102, 255, 0.3)
    ) !important;
    color: var(--skila-white) !important;
    padding: 12px 15px !important;
}

/* Ensure the text in these headers is visible */
.top-donors th span,
.recent-donors th span,
.donors-table th span {
    color: var(--skila-white) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Table Headers Text Color */
.table-striped thead,
.table-striped thead th,
.table-striped thead td,
.store-box-header,
.panel-body > .panel-header,
.stat-box-header,
.ticket-header,
.content-page-top > span,
.content-page-top > span > i {
    color: var(--skila-white) !important;
}

/* Admin Navigation Fixes */
.main-menu-box {
    background: var(--skila-black) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.main-menu-box ul li {
    background: transparent !important;
    color: var(--skila-light-gray) !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.main-menu-box ul li:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.main-menu-box ul li.active {
    background: linear-gradient(90deg, 
        rgba(255, 51, 51, 0.3), 
        rgba(0, 102, 255, 0.3)
    ) !important;
    color: var(--skila-white) !important;
}

/* Admin Dropdowns */
.admin-dropdown {
    background: var(--skila-dark) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--skila-light-gray) !important;
}

.admin-dropdown:hover,
.admin-dropdown:focus {
    background: linear-gradient(90deg, 
        rgba(255, 51, 51, 0.1), 
        rgba(0, 102, 255, 0.1)
    ) !important;
}

/* Admin Settings Panels */
.settings-panel {
    background: var(--skila-dark) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 20px !important;
}

.settings-header {
    color: var(--skila-white) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
}

/* Admin Form Elements */
.admin-form-control {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--skila-light-gray) !important;
    border-radius: 4px !important;
}

.admin-form-control:focus {
    border-color: rgba(255, 51, 51, 0.5) !important;
    box-shadow: 0 0 5px rgba(255, 51, 51, 0.2) !important;
}

/* Admin Section Headers */
.section-header {
    color: var(--skila-red) !important;
    font-size: 1.2em !important;
    margin: 20px 0 10px !important;
}

/* Admin Panel Text Styling */
.general-settings h2,
.general-settings h6,
.payment-gateways h2,
.payment-gateways h6,
.darker-box h2,
.darker-box h6,
.form-group label,
.control-label,
.checkbox label,
.form-control,
.selectpicker,
.help-box,
.panel-title,
.settings-header,
.admin-content h2,
.admin-content h6 {
    color: var(--skila-white) !important;
}

/* Admin Headers with Gradient */
.general-settings h2,
.payment-gateways h2,
.admin-content h2,
.settings-header {
    background: linear-gradient(90deg, var(--skila-red), var(--skila-blue)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: bold !important;
}

/* Admin Section Headers */
.general-settings h6,
.payment-gateways h6,
.admin-content h6 {
    color: var(--skila-white) !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
}

/* Admin Form Elements */
.form-control,
.selectpicker {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--skila-white) !important;
}

.form-control:focus {
    border-color: var(--skila-red) !important;
    box-shadow: 0 0 8px rgba(255, 51, 51, 0.2) !important;
}

/* Admin Boxes */
.darker-box {
    background: var(--skila-dark) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

/* Admin Navigation */
.admin-nav {
    background: linear-gradient(90deg, rgba(255, 51, 51, 0.1), rgba(0, 102, 255, 0.1)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Admin Buttons */
.btn-prom {
    background: linear-gradient(90deg, var(--skila-red), var(--skila-blue)) !important;
    border: none !important;
    color: var(--skila-white) !important;
    transition: all 0.3s ease !important;
}

.btn-prom:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(255, 51, 51, 0.3), 0 4px 15px rgba(0, 102, 255, 0.3) !important;
}

/* Help Box */
.help-box {
    color: var(--skila-white) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    text-align: center !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
}

.help-box:hover {
    background: linear-gradient(90deg, var(--skila-red), var(--skila-blue)) !important;
    transform: scale(1.1) !important;
}

/* Admin Panel Specific Styles */
.main-menu-box {
    background-color: var(--skila-black) !important;
    color: var(--skila-white) !important;
}

.main-menu-box ul li {
    background-color: transparent !important;
    color: var(--skila-white) !important;
}

.main-menu-box ul li:hover {
    background: linear-gradient(90deg, rgba(255, 51, 51, 0.1), rgba(0, 102, 255, 0.1)) !important;
}

.main-menu-box ul li.active {
    background: linear-gradient(90deg, var(--skila-red), var(--skila-blue)) !important;
}

.main-menu-box .sub-menu {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

.main-menu-box .sub-menu .submenu-header {
    background: linear-gradient(90deg, var(--skila-red), var(--skila-blue)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: bold !important;
}

.content-page-top {
    background-color: var(--skila-black) !important;
}

.content-page-top span {
    background: linear-gradient(90deg, var(--skila-red), var(--skila-blue)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: bold !important;
}

.content-page-top:before {
    border-color: var(--skila-black) transparent transparent !important;
}

/* Dashboard Widgets */
.dashboard-widget-small-box {
    background: var(--skila-dark) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 20px !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
}

.dashboard-widget-small-box .element {
    background: linear-gradient(90deg, var(--skila-red), var(--skila-blue)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 24px !important;
    font-weight: bold !important;
    margin-bottom: 5px !important;
}

.dashboard-widget-small-box .caption {
    color: var(--skila-white) !important;
    opacity: 0.8 !important;
}

.dashboard-widget-small-box i {
    color: var(--skila-white) !important;
    opacity: 0.2 !important;
}

/* Panel Styles */
.panel-body {
    background: var(--skila-dark) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.panel-header {
    background: linear-gradient(90deg, rgba(255, 51, 51, 0.1), rgba(0, 102, 255, 0.1)) !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--skila-white) !important;
}

.panel-inner {
    padding: 20px !important;
    color: var(--skila-white) !important;
}

/* General Settings Text */
.general-settings h2,
.payment-gateways h2 {
    background: linear-gradient(90deg, var(--skila-red), var(--skila-blue)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: bold !important;
    margin-bottom: 20px !important;
}

/* Form Elements */
.form-control,
select,
input[type="text"],
input[type="password"],
textarea {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--skila-white) !important;
    border-radius: 4px !important;
}

.form-control:focus {
    border-color: var(--skila-red) !important;
    box-shadow: 0 0 5px rgba(255, 51, 51, 0.2) !important;
}

/* Labels and Text */
label,
.control-label,
.checkbox label {
    color: var(--skila-white) !important;
}

/* Alert Messages */
.bs-callout {
    background: var(--skila-dark) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 15px 20px !important;
    margin-bottom: 20px !important;
    color: var(--skila-white) !important;
}

.bs-callout a {
    color: var(--skila-red) !important;
}

.bs-callout a:hover {
    color: var(--skila-blue) !important;
}

/* Charts */
canvas {
    background: var(--skila-dark) !important;
    border-radius: 8px !important;
    padding: 10px !important;
}