/* -----------------------------
   BLUE THEME (Complete)
   All backgrounds = rgb(4, 12, 51)
   Text = white and yellow
------------------------------ */

/* Body background */
body {
    background-color: rgb(4, 12, 51) !important;
    color: #ffffff !important;
}

/* Link color */
a, a:hover {
    color: #ffd642 !important;
}

/* Pagination style */
.pagination .page-item.active .page-link,
div.pagination ul.pagination li.active .page-link,
div.pagination ul.pagination li.active a {
    background-color: rgb(4, 12, 51) !important;
    border-color: #ffd642 !important;
    color: #ffd642 !important;
}

/* Header style */
.header {
    background: rgb(4, 12, 51) !important;
}

/* Title style */
.title {
    background: rgb(4, 12, 51) !important;
}
.title h3 {
    color: #ffd642 !important;
}

/* Navigation bar style */
.nav-content nav.navbar {
    background: rgb(4, 12, 51) !important;
    border-bottom: 2px solid #ffce00 !important;
}

.nav-content nav.navbar .navbar-nav > .active > a,
nav.navbar .navbar-nav > .active > a:hover,
nav.navbar .navbar-nav > .active > a:focus {
    color: #ffd642 !important;
}

.nav-content nav.navbar .navbar-nav > li > a {
    color: #ffd642 !important;
}

@media (max-width: 767px) {
    nav.navbar .navbar-nav .show .dropdown-menu > a {
        color: #ffd642 !important;
    }

    nav.navbar .navbar-nav .show .dropdown-menu > a:hover,
    nav.navbar .navbar-nav .show .dropdown-menu > a:focus {
        color: #fff0a8 !important;
    }
}

.nav-content nav.navbar .navbar-nav > li > a:hover {
    color: #fff0a8 !important;
}

.nav-content nav.navbar .navbar-nav > .open > a,
nav.navbar .navbar-nav > .open > a:hover,
nav.navbar .navbar-nav > .open > a:focus {
    color: #fff0a8 !important;
}

/* ALL CARDS - Keep original styling, only change background if needed */
.card, .panel, .panel-default, .package_box, .panel-body, .well, 
.list-group-item, .card-blesta, .cards .card, .service-box, 
.package-card, .plan-card, .trial-card, .product-card {
    background: rgb(4, 12, 51) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 214, 66, 0.3) !important;
}

/* Card headers */
.card-header, .panel-heading, .card-blesta > .card-header {
    background: rgb(4, 12, 51) !important;
    color: #ffd642 !important;
    border-bottom: 2px solid #ffd642 !important;
}

/* Card titles and headings inside cards */
.card-title, .card h3, .card h4, .card h5, .card h6,
.panel-title, .panel h3, .panel h4, .panel h5, .panel h6 {
    color: #ffd642 !important;
}

/* Card body text */
.card-body, .panel-body {
    color: #ffffff !important;
}

/* Special text inside cards - yellow for emphasis */
.card .highlight, .card .price, .card .amount, 
.card .feature, .card .benefit {
    color: #ffd642 !important;
}

/* Form labels and backgrounds */
label, .control-label, .form-label {
    background-color: rgb(4, 12, 51) !important;
    color: #ffd642 !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    margin-bottom: 5px !important;
}

/* Form sections and containers */
.form-group, .input-group {
    background-color: rgb(4, 12, 51) !important;
    color: #ffd642 !important;
    border: 1px solid rgba(255, 214, 66, 0.3) !important;
    border-radius: 4px !important;
}

.form-control {
    background-color: rgb(4, 12, 51) !important;
    color: white !important;
    border: 1px solid rgba(255, 214, 66, 0.3) !important;
}

.form-control:focus {
    background-color: rgb(4, 12, 51) !important;
    color: white !important;
    border-color: #ffd642 !important;
    box-shadow: 0 0 5px rgba(255, 214, 66, 0.5) !important;
}

/* Form containers and sections */
.form-container, .form-section, .form-wrapper {
    background-color: rgb(4, 12, 51) !important;
    color: #ffd642 !important;
    padding: 15px !important;
    border-radius: 6px !important;
    margin-bottom: 15px !important;
}

/* Highlight Color */
.list-group.list-options a.list-group-item:hover,
.list-group.list-options a.list-group-item:focus,
a.list-group-item:hover,
a.list-group-item:focus {
    background-color: rgba(255,214,66,0.08) !important;
    color: #ffffff !important;
}

a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    background-color: #ffd642 !important;
    color: rgb(4, 12, 51) !important;
}

.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
    background-color: rgba(255,214,66,0.06) !important;
}

/* Settings Link Text Color */
.list-group-item.credits {
    color: #ffd642 !important;
}

.top-focus-box {
    background-color: rgba(255,214,66,0.06) !important;
}

.list-group-item h4 {
    color: #ffd642 !important;
}

/* Top navigation style */
.top-nav .dropdown a.dropdown-toggle,
.top-nav .dropdown a.dropdown-toggle:focus {
    color: #ffd642 !important;
}

.top-nav .dropdown a.dropdown-toggle:hover {
    color: #fff0a8 !important;
}

/* Bootstrap theme primary */
.bg-primary {
    background-color: rgb(4, 12, 51) !important;
}

.text-primary {
    color: rgb(4, 12, 51) !important;
}

.border-primary {
    border-color: rgb(4, 12, 51) !important;
}

.badge-primary {
    color: #ffd642 !important;
    background-color: rgb(4, 12, 51) !important;
}

.btn-primary {
    color: #ffd642 !important;
    background-color: rgb(4, 12, 51) !important;
    border-color: #ffd642 !important;
    font-weight: 600;
    border-radius: 6px;
}

.btn-primary:hover {
    color: rgb(4, 12, 51) !important;
    background-color: #ffd642 !important;
    border-color: #ffd642 !important;
}

.btn-primary:disabled, .btn-primary.disabled {
    background-color: rgb(4, 12, 51) !important;
}

.btn-outline-primary {
    color: rgb(4, 12, 51) !important;
    border-color: rgb(4, 12, 51) !important;
}

.btn-outline-primary:hover {
    color: #ffd642 !important;
    background: rgb(4, 12, 51) !important;
    border-color: rgb(4, 12, 51) !important;
}

.alert-primary {
    color: #ffd642 !important;
    background: rgb(4, 12, 51) !important;
    border-color: #ffd642 !important;
}

/* Secondary */
.bg-secondary {
    background-color: rgb(4, 12, 51) !important;
}

.text-secondary {
    color: rgb(4, 12, 51) !important;
}

.border-secondary {
    border-color: rgb(4, 12, 51) !important;
}

.badge-secondary {
    color: #ffd642 !important;
    background-color: rgb(4, 12, 51) !important;
}

.btn-secondary {
    color: #ffd642 !important;
    background-color: rgb(4, 12, 51) !important;
    border-color: #ffd642 !important;
}

.btn-secondary:hover {
    color: rgb(4, 12, 51) !important;
    background-color: #ffd642 !important;
    border-color: #ffd642 !important;
}

.btn-secondary:disabled, .btn-secondary.disabled {
    background-color: rgb(4, 12, 51) !important;
}

.btn-outline-secondary {
    color: rgb(4, 12, 51) !important;
    border-color: rgb(4, 12, 51) !important;
}

.btn-outline-secondary:hover {
    color: #ffd642 !important;
    background: rgb(4, 12, 51) !important;
    border-color: rgb(4, 12, 51) !important;
}

.alert-secondary {
    color: #ffd642 !important;
    background: rgb(4, 12, 51) !important;
    border-color: #ffd642 !important;
}

/* Success */
.bg-success {
    background-color: rgb(4, 12, 51) !important;
}

.text-success {
    color: rgb(4, 12, 51) !important;
}

.border-success {
    border-color: rgb(4, 12, 51) !important;
}

.badge-success {
    color: #ffd642 !important;
    background-color: rgb(4, 12, 51) !important;
}

.btn-success {
    color: #ffd642 !important;
    background-color: rgb(4, 12, 51) !important;
    border-color: #ffd642 !important;
}

.btn-success:hover {
    color: rgb(4, 12, 51) !important;
    background-color: #ffd642 !important;
    border-color: #ffd642 !important;
}

.btn-success:disabled, .btn-success.disabled {
    background-color: rgb(4, 12, 51) !important;
}

.btn-outline-success {
    color: rgb(4, 12, 51) !important;
    border-color: rgb(4, 12, 51) !important;
}

.btn-outline-success:hover {
    color: #ffd642 !important;
    background: rgb(4, 12, 51) !important;
    border-color: rgb(4, 12, 51) !important;
}

.alert-success {
    color: #ffd642 !important;
    background: rgb(4, 12, 51) !important;
    border-color: #ffd642 !important;
}

/* Info */
.bg-info {
    background-color: rgb(4, 12, 51) !important;
}

.text-info {
    color: rgb(4, 12, 51) !important;
}

.border-info {
    border-color: rgb(4, 12, 51) !important;
}

.badge-info {
    color: #ffd642 !important;
    background-color: rgb(4, 12, 51) !important;
}

.btn-info {
    color: #ffd642 !important;
    background-color: rgb(4, 12, 51) !important;
    border-color: #ffd642 !important;
}

.btn-info:hover {
    color: rgb(4, 12, 51) !important;
    background-color: #ffd642 !important;
    border-color: #ffd642 !important;
}

.btn-info:disabled, .btn-info.disabled {
    background-color: rgb(4, 12, 51) !important;
}

.btn-outline-info {
    color: rgb(4, 12, 51) !important;
    border-color: rgb(4, 12, 51) !important;
}

.btn-outline-info:hover {
    color: #ffd642 !important;
    background: rgb(4, 12, 51) !important;
    border-color: rgb(4, 12, 51) !important;
}

.alert-info {
    color: #ffd642 !important;
    background: rgb(4, 12, 51) !important;
    border-color: #ffd642 !important;
}

/* Warning */
.bg-warning {
    background-color: rgb(4, 12, 51) !important;
}

.text-warning {
    color: rgb(4, 12, 51) !important;
}

.border-warning {
    border-color: rgb(4, 12, 51) !important;
}

.badge-warning {
    color: #ffd642 !important;
    background-color: rgb(4, 12, 51) !important;
}

.btn-warning {
    color: #ffd642 !important;
    background-color: rgb(4, 12, 51) !important;
    border-color: #ffd642 !important;
}

.btn-warning:hover {
    color: rgb(4, 12, 51) !important;
    background-color: #ffd642 !important;
    border-color: #ffd642 !important;
}

.btn-warning:disabled, .btn-warning.disabled {
    background-color: rgb(4, 12, 51) !important;
}

.btn-outline-warning {
    color: rgb(4, 12, 51) !important;
    border-color: rgb(4, 12, 51) !important;
}

.btn-outline-warning:hover {
    color: #ffd642 !important;
    background: rgb(4, 12, 51) !important;
    border-color: rgb(4, 12, 51) !important;
}

.alert-warning {
    color: #ffd642 !important;
    background: rgb(4, 12, 51) !important;
    border-color: #ffd642 !important;
}

/* Danger */
.bg-danger {
    background-color: rgb(4, 12, 51) !important;
}

.text-danger {
    color: rgb(4, 12, 51) !important;
}

.border-danger {
    border-color: rgb(4, 12, 51) !important;
}

.badge-danger {
    color: #ffd642 !important;
    background-color: rgb(4, 12, 51) !important;
}

.btn-danger {
    color: #ffd642 !important;
    background-color: rgb(4, 12, 51) !important;
    border-color: #ffd642 !important;
}

.btn-danger:hover {
    color: rgb(4, 12, 51) !important;
    background-color: #ffd642 !important;
    border-color: #ffd642 !important;
}

.btn-danger:disabled, .btn-danger.disabled {
    background-color: rgb(4, 12, 51) !important;
}

.btn-outline-danger {
    color: rgb(4, 12, 51) !important;
    border-color: rgb(4, 12, 51) !important;
}

.btn-outline-danger:hover {
    color: #ffd642 !important;
    background: rgb(4, 12, 51) !important;
    border-color: rgb(4, 12, 51) !important;
}

.alert-danger {
    color: #ffd642 !important;
    background: rgb(4, 12, 51) !important;
    border-color: #ffd642 !important;
}

/* Light */
.bg-light {
    background-color: rgb(4, 12, 51) !important;
}

.text-light {
    color: rgb(4, 12, 51) !important;
}

.border-light {
    border-color: rgb(4, 12, 51) !important;
}

.badge-light {
    color: #ffd642 !important;
    background-color: rgb(4, 12, 51) !important;
}

.btn-light {
    color: #ffd642 !important;
    background-color: rgb(4, 12, 51) !important;
    border-color: #ffd642 !important;
}

.btn-light:hover {
    color: rgb(4, 12, 51) !important;
    background-color: #ffd642 !important;
    border-color: #ffd642 !important;
}

.btn-light:disabled, .btn-light.disabled {
    background-color: rgb(4, 12, 51) !important;
}

.btn-outline-light {
    color: rgb(4, 12, 51) !important;
    border-color: rgb(4, 12, 51) !important;
}

.btn-outline-light:hover {
    color: #ffd642 !important;
    background: rgb(4, 12, 51) !important;
    border-color: rgb(4, 12, 51) !important;
}

.alert-light {
    color: #ffd642 !important;
    background: rgb(4, 12, 51) !important;
    border-color: #ffd642 !important;
}

/* All section backgrounds to blue */
.section, .container, .content, .main, .wrapper, .page-content, .content-area {
    background-color: rgb(4, 12, 51) !important;
}

/* Sidebar and aside sections */
.sidebar, .aside, .nav-sidebar, .side-nav {
    background-color: rgb(4, 12, 51) !important;
    color: #ffd642 !important;
}

/* Table backgrounds */
.table > thead > tr > th {
    background: rgb(4, 12, 51) !important;
    color: #ffd642 !important;
    border-bottom: 2px solid #ffd642 !important;
}

.table > tbody > tr > td {
    background: rgb(4, 12, 51) !important;
    color: #ffffff !important;
}

/* Footer */
#footer, footer, .footer {
    background: rgb(4, 12, 51) !important;
    color: #ffd642 !important;
    border-top: 2px solid #ffce00 !important;
}

/* All headings */
h1,h2,h3,h4,h5,h6 {
    color: #ffd642 !important;
}

/* Alerts default */
.alert {
    border-radius: 6px !important;
}

/* small UI niceties */
a.btn, .btn, button {
    transition: all .18s ease-in-out !important;
}

/* Ensure dropdowns and navbars remain blue */
.dropdown-menu, .navbar-inverse, .navbar-default {
    background: rgb(4, 12, 51) !important;
    color: #ffd642 !important;
}

/* Hover focus for links in blue background */
.navbar a:hover, .dropdown-menu a:hover {
    color: #ffffff !important;
    background: rgba(255, 214, 66, 0.1) !important;
}

/* Make sure forms show clear focus */
input:focus, select:focus, textarea:focus {
    outline: none !important;
    box-shadow: 0 0 8px rgba(255,214,66,0.14) !important;
    border-color: #ffd642 !important;
}

/* Small screens adjustments */
@media (max-width: 767px) {
    body {
        background-color: rgb(4, 12, 51) !important;
    }
    .navbar, .header {
        background: rgb(4, 12, 51) !important;
    }
}

/* Additional blue backgrounds for common sections */
.module, .widget, .box, .container-fluid, .row, .col, .col-md, .col-lg, .col-sm, .col-xs {
    background-color: rgb(4, 12, 51) !important;
}

/* Form field containers */
.field, .form-field, .input-field {
    background-color: rgb(4, 12, 51) !important;
    padding: 10px !important;
    border-radius: 4px !important;
    margin-bottom: 10px !important;
}

/* Card specific improvements */
.card:hover, .panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(255, 214, 66, 0.2) !important;
    transition: all 0.3s ease !important;
}

/* Card text colors */
.card p, .panel p, .card-body p, .panel-body p {
    color: #ffffff !important;
}

.card small, .panel small, .card-text {
    color: #ffd642 !important;
    opacity: 0.9;
}

/* Card links */
.card a, .panel a {
    color: #ffd642 !important;
    text-decoration: underline;
}

.card a:hover, .panel a:hover {
    color: #ffffff !important;
}

/* Modal backgrounds */
.modal-content, .modal-header, .modal-body, .modal-footer {
    background-color: rgb(4, 12, 51) !important;
    color: #ffffff !important;
    border-color: #ffd642 !important;
}

/* List group items */
.list-group-item {
    background-color: rgb(4, 12, 51) !important;
    color: #ffffff !important;
    border-color: rgba(255, 214, 66, 0.3) !important;
}

/* Progress bars */
.progress {
    background-color: rgb(4, 12, 51) !important;
    border: 1px solid #ffd642 !important;
}

.progress-bar {
    background-color: #ffd642 !important;
    color: rgb(4, 12, 51) !important;
}

/* Breadcrumb */
.breadcrumb {
    background-color: rgb(4, 12, 51) !important;
    color: #ffd642 !important;
}

/* Code and pre elements */
code, pre {
    background-color: rgb(4, 12, 51) !important;
    color: #ffd642 !important;
    border: 1px solid #ffd642 !important;
}

/* Blockquote */
blockquote {
    background-color: rgb(4, 12, 51) !important;
    color: #ffffff !important;
    border-left: 4px solid #ffd642 !important;
}

/* Ensure everything has blue background */
* {
    background-color: rgb(4, 12, 51) !important;
}
.small, small {
    display: none;
    font-size: .875em;
    font-weight: 400;
}
/* Sirf 1 Year Plan Component Center */
.plan-container {
  margin: 20px auto !important;
  max-width: 400px !important;
  padding: 20px !important;
  border: 1px solid rgba(255, 214, 66, 0.3) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(255, 214, 66, 0.1) !important;
  background-color: rgb(4, 12, 51) !important;
  text-align: center !important;
}

.plan-header, .plan-description, .selected-indicator {
  text-align: center !important;
}

.plan-option {
  display: flex !important;
  align-items: center !important;
  padding: 15px !important;
  border: 2px solid rgba(255, 214, 66, 0.3) !important;
  border-radius: 6px !important;
  margin-bottom: 10px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  background-color: rgb(4, 12, 51) !important;
}

.plan-option.selected {
  border-color: #ffd642 !important;
  background-color: rgba(255, 214, 66, 0.1) !important;
}