/* =====================================================
   FLICKO WHMCS THEME - Complete Stylesheet
   Author: FlickoTech LLC
   ===================================================== */

/* ----- CSS Variables ----- */
:root {
  /* Sidebar */
  --sidebar-width: 260px;
  --sidebar-bg: var(--bg-sidebar);
  --sidebar-border: var(--border-color);
  --sidebar-text: var(--text-secondary);
  --sidebar-text-hover: var(--text-primary);
  --sidebar-active-bg: var(--accent-blue);
  --sidebar-active-text: var(--text-primary);

  /* Header */
  --header-height: 70px;
  --header-bg: var(--bg-secondary);
  --header-border: var(--border-color);
  --header-text: var(--text-secondary);

  /* Content */
  --content-bg: var(--bg-primary);
  --content-text: var(--text-primary);
  --content-text-secondary: var(--text-secondary);

  /* Cards */
  --card-bg: var(--bg-card);
  --card-border: var(--border-color);
  --card-hover-border: var(--accent-blue);

  /* Primary/Accent */
  --primary: var(--accent-blue);
  --primary-hover: var(--accent-blue-hover);
  --primary-light: rgba(0, 102, 255, 0.1);
  --primary-glow: rgba(0, 102, 255, 0.3);

  /* Status Colors */
  --success: var(--success);
  --warning: var(--warning);
  --danger: var(--error);
  --info: var(--info);

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ----- Reset & Base ----- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body.flicko-body {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.6;
  color: var(--content-text);
  background: var(--content-bg);
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--primary-hover);
}

/* ----- LEFT SIDEBAR ----- */
.flicko-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.sidebar-logo {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-logo img {
  max-width: 200px;
  height: auto;
  min-height: 50px;
}

.sidebar-logo .logo-text {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
}

.sidebar-nav {
  padding: 20px 0;
  flex: 1;
  overflow-y: auto;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  margin: 4px 16px;
  color: var(--sidebar-text);
  font-size: 15px;
  font-weight: 500;
  border-radius: 10px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.sidebar-link i {
  width: 20px;
  text-align: center;
  font-size: 16px;
}

.sidebar-link:hover {
  color: var(--sidebar-text-hover);
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-link.active {
  color: var(--sidebar-active-text);
  background: var(--sidebar-active-bg);
  box-shadow: 0 4px 15px var(--primary-glow);
}

/* ----- MAIN WRAPPER ----- */
.flicko-main-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ----- TOP HEADER ----- */
.flicko-header {
  height: var(--header-height);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--header-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.header-link:hover {
  color: var(--primary);
}

.header-link i {
  font-size: 16px;
}

.cart-badge {
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 4px;
}

.header-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--header-border);
  border-radius: 8px;
  padding: 8px 16px;
  color: var(--header-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.header-dropdown-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.header-dropdown-btn i.fa-chevron-down {
  font-size: 10px;
  margin-left: 4px;
}

/* Dropdown Menu Styling */
.dropdown-menu {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  min-width: 180px;
}

.dropdown-item {
  color: var(--content-text);
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.dropdown-divider {
  border-color: var(--card-border);
  margin: 8px 0;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--header-text);
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
}

/* ----- MAIN CONTENT ----- */
.flicko-content {
  flex: 1;
  padding: 32px;
}

/* ----- PAGE TITLE ----- */
.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}

.page-subtitle {
  font-size: 15px;
  color: var(--content-text-secondary);
  margin-bottom: 32px;
}

/* ----- CARDS ----- */
.flicko-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.flicko-card:hover {
  border-color: var(--card-hover-border);
  box-shadow: 0 8px 30px rgba(168, 85, 247, 0.1);
}

.flicko-card-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
}

.flicko-card-text {
  font-size: 14px;
  color: var(--content-text-secondary);
  margin-bottom: 16px;
}

/* ----- PRODUCT CARDS ----- */
.product-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
}

.product-title {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
}

.product-price {
  font-size: 18px;
  font-weight: 600;
  color: var(--content-text);
  margin-bottom: 16px;
}

.product-description {
  font-size: 14px;
  color: var(--content-text-secondary);
  margin-bottom: 20px;
  line-height: 1.6;
}

.product-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}

.product-features li {
  padding: 8px 0;
  font-size: 14px;
  color: var(--content-text);
  display: flex;
  align-items: center;
}

.product-features li::before {
  content: "•";
  color: var(--primary);
  font-weight: bold;
  margin-right: 12px;
}

/* ----- BUTTONS ----- */
.btn-flicko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-flicko-primary {
  background: var(--primary);
  color: #ffffff;
}

.btn-flicko-primary:hover {
  background: var(--primary-hover);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--primary-glow);
}

.btn-flicko-outline {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}

.btn-flicko-outline:hover {
  background: var(--primary);
  color: #ffffff;
}

/* ----- FORMS ----- */
.form-control,
.form-select {
  background: var(--content-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--content-text);
  font-size: 14px;
  transition: all 0.2s ease;
}

.form-control:focus,
.form-select:focus {
  background: var(--content-bg);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  color: var(--content-text);
  outline: none;
}

.form-control::placeholder {
  color: var(--content-text-secondary);
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--content-text);
  margin-bottom: 8px;
}

/* ----- TABLES ----- */
.table {
  color: var(--content-text);
  margin-bottom: 0;
}

.table thead th {
  background: rgba(168, 85, 247, 0.1);
  color: var(--content-text-secondary);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 16px;
  border: none;
}

.table tbody td {
  padding: 16px;
  border-bottom: 1px solid var(--card-border);
  vertical-align: middle;
}

.table tbody tr:hover {
  background: rgba(168, 85, 247, 0.03);
}

/* ----- BADGES ----- */
.badge-flicko {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge-active,
.badge-paid {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
}

.badge-pending {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
}

.badge-unpaid,
.badge-overdue,
.badge-cancelled {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

/* ----- ALERTS ----- */
.alert {
  border: none;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.alert-info {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
}

.alert-success {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
}

.alert-warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.alert-danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

/* ----- FOOTER ----- */
.flicko-footer {
  padding: 24px 32px;
  border-top: 1px solid var(--card-border);
  text-align: center;
}

.flicko-footer p {
  color: var(--content-text-secondary);
  font-size: 13px;
  margin: 0;
}

/* ----- RESPONSIVE ----- */
@media (max-width: 991px) {
  .flicko-sidebar {
    transform: translateX(-100%);
  }

  .flicko-sidebar.open {
    transform: translateX(0);
  }

  .flicko-main-wrapper {
    margin-left: 0;
  }

  .mobile-menu-toggle {
    display: block;
  }
}

@media (max-width: 767px) {
  .flicko-content {
    padding: 20px;
  }

  .flicko-header {
    padding: 0 20px;
  }

  .header-right {
    gap: 12px;
  }

  .header-link span {
    display: none;
  }

  .header-dropdown-btn span {
    display: none;
  }
}

/* ----- UTILITIES ----- */
.text-primary {
  color: var(--primary) !important;
}

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

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

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

.text-muted {
  color: var(--content-text-secondary) !important;
}

.bg-primary-light {
  background: var(--primary-light) !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 8px !important;
}

.mb-2 {
  margin-bottom: 16px !important;
}

.mb-3 {
  margin-bottom: 24px !important;
}

.mb-4 {
  margin-bottom: 32px !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 8px !important;
}

.mt-2 {
  margin-top: 16px !important;
}

.mt-3 {
  margin-top: 24px !important;
}

.mt-4 {
  margin-top: 32px !important;
}

/* ========================================
   PRICING TABLES & STORE PAGE - COMPLETE FIX
   ======================================== */

/* Container */
.pricing-section {
  padding: 40px 20px;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Pricing Grid - CSS Grid for equal height cards */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  justify-content: center;
}

/* Pricing Card - NEW DESIGN */
.pricing-card {
  background: rgba(20, 35, 65, 0.9);
  border: 1px solid rgba(100, 120, 160, 0.3);
  border-radius: 20px;
  padding: 32px 28px;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 480px;
  overflow: visible;
}

.pricing-card:hover {
  transform: translateY(-5px);
  border-color: #3b82f6;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.pricing-card.featured {
  border: 2px solid #3b82f6;
}

.pricing-card.featured:hover {
  box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
}

/* Best Value Ribbon */
.best-value-ribbon {
  position: absolute;
  top: 16px;
  right: -32px;
  background: #3b82f6;
  color: #fff;
  padding: 6px 36px;
  transform: rotate(45deg);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 20;
}

/* Pricing Header */
.pricing-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 0;
  border-bottom: none;
}

/* Plan Name - WHITE, centered */
.plan-name {
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 16px;
}

/* Price Display - LARGE WHITE */
.plan-price {
  display: block;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 8px;
  font-size: 48px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.plan-price span {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
}

/* Per month text */
.plan-cycle {
  font-size: 14px;
  color: #94a3b8;
  margin-top: 8px;
  margin-bottom: 24px;
  text-align: center;
}

/* Features List - LEFT aligned with blue checkmarks */
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  flex: 1;
}

.pricing-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #e2e8f0;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

/* Blue checkmark icon */
.pricing-feature-item i {
  color: #3b82f6;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Pricing Button - OUTLINE style */
.pricing-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  padding: 0 24px;
  background: transparent;
  color: #ffffff;
  border: 2px solid #3b82f6;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  margin-top: auto;
  transition: all 0.3s ease;
}

.pricing-btn:hover {
  background: #3b82f6;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.pricing-card.featured .pricing-btn {
  background: #3b82f6;
  border-color: #3b82f6;
}

.pricing-card.featured .pricing-btn:hover {
  background: #2563eb;
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.3);
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 16px;
  }

  .pricing-card {
    padding: 28px 24px;
    min-height: 460px;
  }

  .plan-price {
    font-size: 36px;
  }
}

@media (max-width: 768px) {
  .pricing-section {
    padding: 24px 16px;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 400px;
  }

  .pricing-card {
    padding: 28px 24px;
    min-height: auto;
  }

  .plan-price {
    font-size: 38px;
  }

  .best-value-ribbon {
    font-size: 10px;
    padding: 5px 32px;
    right: -30px;
    top: 14px;
  }
}

/* ========================================
   LAGOM-INSPIRED STORE PAGE - COMPLETE REWRITE
   ======================================== */

/* Global Store Page Reset */
.main-content,
#main-body,
.store-page {
  background: #0a0e27 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Hide any Bootstrap panels default styling */
.main-content .panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* ========================================
   PRODUCT CARDS CONTAINER
   Only target specific product grid areas, NOT the main layout rows
   ======================================== */

/* Target only the products row - NOT all rows which would break layout */
.products,
.products-container,
#order-standard_cart .products,
.row.product-group,
.store-products {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 24px !important;
  padding: 30px 20px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Target product columns specifically - NOT sidebar columns */
.products>[class*="col-"],
.products-container>[class*="col-"],
#order-standard_cart .products>[class*="col-"],
.store-products>[class*="col-"],
.product-group>[class*="col-"] {
  /* Remove Bootstrap column constraints for product cards */
  width: auto !important;
  max-width: 340px !important;
  flex: 0 0 320px !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  position: relative !important;
}

/* ========================================
   INDIVIDUAL PRODUCT CARD - LAGOM WHITE STYLE
   ======================================== */
.main-content .product,
.main-content .panel.panel-default,
.main-content [class*="col-"] .panel,
#order-standard_cart .product,
.product {
  /* WHITE CARD like Lagom */
  background: rgba(20, 35, 60, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;

  /* NO OVERFLOW HIDDEN */
  overflow: visible !important;

  /* Card sizing - SMALLER to fit 3 per row */
  flex: 0 0 260px !important;
  max-width: 280px !important;
  min-width: 220px !important;
  min-height: 380px !important;

  /* Layout */
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  position: relative !important;

  /* Hover */
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.main-content .product:hover,
.main-content .panel.panel-default:hover,
#order-standard_cart .product:hover,
.product:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
}

/* ========================================
   CARD INNER CONTENT - CENTERED
   ======================================== */
.main-content .product>*,
.main-content .panel-body,
.main-content .panel-heading,
.main-content .panel-footer,
#order-standard_cart .product>div,
.product>div {
  background: transparent !important;
  padding: 28px 20px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* ========================================
   PRODUCT TITLE - WHITE LIKE REFERENCE
   ======================================== */
.main-content .product header,
.main-content .product header h4,
.main-content .product h3,
.main-content .product h4,
.main-content .panel-heading,
.main-content .panel-title,
#order-standard_cart header,
#order-standard_cart header h4,
#order-standard_cart .product header,
#order-standard_cart .product h4,
.product header,
.product h3,
.product h4 {
  background: transparent !important;
  border: none !important;
  /* WHITE TITLE - matches reference */
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: 20px 0 20px 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* Header link - WHITE like title */
.main-content .product header a,
.main-content .panel-heading a,
#order-standard_cart header a,
#order-standard_cart .product header a,
.product header a {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ========================================
   PRICE DISPLAY - WHITE COLOR LIKE REFERENCE
   ======================================== */
.main-content .price,
.main-content .product-price,
.main-content .panel-body .price,
#order-standard_cart .price,
.product .price,
.price {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;

  /* Typography - WHITE, LARGE like reference */
  font-size: 48px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;

  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

/* Price currency/suffix */
.main-content .price span,
.main-content .price small,
#order-standard_cart .price span,
.product .price span,
.price span {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  display: inline !important;
  margin-left: 4px !important;
}

/* Billing cycle text - gray like reference */
.main-content .billing-cycle,
.main-content .term,
.product .billing-cycle,
.product .term {
  font-size: 14px !important;
  color: #94a3b8 !important;
  text-align: center !important;
  margin: 8px 0 24px 0 !important;
}

/* ========================================
   FEATURE LIST - LEFT aligned with blue checkmarks
   ======================================== */
.main-content .product-features,
.main-content .features,
.main-content ul.list-unstyled,
#order-standard_cart .product-features,
.product ul {
  list-style: none !important;
  padding: 0 16px !important;
  margin: 0 0 20px 0 !important;
  flex: 1 !important;
  text-align: left !important;
  width: 100% !important;
}

.main-content .product-features li,
.main-content .features li,
#order-standard_cart .product-features li,
.product ul li {
  color: #e2e8f0 !important;
  font-size: 14px !important;
  padding: 8px 0 !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  text-align: left !important;
}

/* Blue checkmark before each feature */
.main-content .product-features li::before,
.main-content .features li::before,
#order-standard_cart .product-features li::before,
.product ul li::before {
  content: "✓";
  color: #3b82f6 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  flex-shrink: 0;
}

/* Make strong text white */
.main-content .product-features li strong,
.product ul li strong,
.product ul li b {
  font-weight: 600 !important;
  color: #ffffff !important;
}

/* ========================================
   ORDER BUTTON - OUTLINE STYLE (not solid)
   ======================================== */
.main-content .btn-order-now,
.main-content .btn-success,
.main-content .btn-primary,
.main-content .panel-footer .btn,
#order-standard_cart .btn-order-now,
#order-standard_cart .btn-success,
.product .btn,
.btn-order-now {
  /* OUTLINE Button - transparent with blue border */
  background: transparent !important;
  border: 2px solid #3b82f6 !important;
  color: #ffffff !important;
  border-radius: 10px !important;

  /* Sizing */
  width: 85% !important;
  max-width: 200px !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 28px !important;

  /* Push to bottom and center */
  margin: auto auto 20px auto !important;

  /* Typography */
  font-size: 16px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  text-decoration: none !important;

  /* Layout */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  /* Transition */
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.main-content .btn-order-now:hover,
.main-content .btn-success:hover,
.main-content .panel-footer .btn:hover,
#order-standard_cart .btn-order-now:hover,
.product .btn:hover,
.btn-order-now:hover {
  background: #2563eb !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4) !important;
}

/* Icon in button */
.main-content .btn i,
.product .btn i,
.btn-order-now i {
  font-size: 14px !important;
}

/* ========================================
   FEATURED CARD STYLING
   ======================================== */
.main-content .product.featured,
.main-content .product:nth-child(2),
#order-standard_cart .product:nth-child(2) {
  /* Slightly brighter for featured */
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* ========================================
   RESPONSIVE - MOBILE FIRST
   ======================================== */

/* TABLET: 768px - 991px (2 cards per row) */
@media (max-width: 991px) {

  .products,
  .products-container,
  #order-standard_cart .products,
  .store-products {
    gap: 20px !important;
    padding: 20px 16px !important;
  }

  .products>[class*="col-"],
  .products-container>[class*="col-"],
  #order-standard_cart .products>[class*="col-"],
  .product-group>[class*="col-"] {
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    min-width: 260px !important;
  }

  .product {
    min-height: 380px !important;
  }

  .price {
    font-size: 28px !important;
  }
}

/* MOBILE: < 768px (1 card per row, stacked) */
@media (max-width: 768px) {

  .products,
  .products-container,
  #order-standard_cart .products,
  .store-products {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px !important;
  }

  .products>[class*="col-"],
  .products-container>[class*="col-"],
  #order-standard_cart .products>[class*="col-"],
  .product-group>[class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 360px !important;
    width: 100% !important;
  }

  .product {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: auto !important;
  }

  .price {
    font-size: 30px !important;
  }

  .product>div {
    padding: 20px 24px !important;
  }
}

/* ========================================
   SIDEBAR CATEGORIES - LAGOM STYLE
   ======================================== */

/* Sidebar container — order form categories panel only (NOT the main nav sidebar) */
.main-content .sidebar:not(.mini-sidebar),
#order-standard_cart .sidebar:not(.mini-sidebar),
.col-md-3.col-sm-4,
.col-md-3 {
  background: transparent !important;
  padding: 0 !important;
}

/* Remove all boxes/borders from sidebar panels */
.main-content .sidebar .panel,
.main-content .sidebar .card,
#order-standard_cart .sidebar .panel,
.sidebar .panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 20px !important;
}

/* "Categories" heading - BLUE, LEFT aligned like items */
.main-content .sidebar .panel-heading,
.main-content .sidebar .card-header,
#order-standard_cart .sidebar .panel-heading,
.sidebar .panel-heading,
.sidebar .panel-title {
  background: transparent !important;
  border: none !important;
  color: #3b82f6 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-start !important;
}

/* Hide ALL icons in heading - we use the existing WHMCS icon */
.sidebar .panel-heading::before,
.sidebar .panel-title::before {
  display: none !important;
  content: none !important;
}

/* Keep only the first icon (WHMCS cart), style it blue */
.sidebar .panel-heading i,
.sidebar .panel-heading .fa,
.sidebar .panel-title i {
  display: inline-block !important;
  color: #3b82f6 !important;
  font-size: 16px !important;
}

/* Hide the chevron/caret if any */
.sidebar .panel-heading::after,
.sidebar a[data-toggle]::after {
  display: none !important;
}

/* Category items - Lagom style with icons and hover effect */
.main-content .sidebar .list-group-item,
.main-content .sidebar .panel-body a,
.main-content .sidebar .list-group a,
#order-standard_cart .sidebar .list-group-item,
#order-standard_cart .sidebar a,
.sidebar .list-group-item {
  background: transparent !important;
  border: none !important;
  color: #cbd5e1 !important;
  padding: 12px 16px !important;
  margin: 2px 0 !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  border-radius: 6px !important;
  gap: 12px !important;
}

/* Add icon placeholder before category items */
.sidebar .list-group-item::before,
#order-standard_cart .sidebar .list-group a::before {
  content: "≡";
  font-size: 16px;
  color: #64748b;
  margin-right: 4px;
}

/* Category items hover */
.main-content .sidebar .list-group-item:hover,
.main-content .sidebar .panel-body a:hover,
#order-standard_cart .sidebar a:hover,
.sidebar .list-group-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

/* Active category item - light blue/gray background like Lagom */
.main-content .sidebar .list-group-item.active,
.main-content .sidebar .active>a,
#order-standard_cart .sidebar .list-group-item.active,
#order-standard_cart .sidebar .active a,
.sidebar .list-group-item.active,
.sidebar .active {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
}

/* ========================================
   HIDE ACTIONS SECTION ONLY (KEEP CATEGORIES)
   ======================================== */

/* Hide Actions panel by ID - this is the key selector */
#collapseTwo,
.sidebar #collapseTwo,
#order-standard_cart #collapseTwo {
  display: none !important;
}

/* Hide Actions heading/trigger */
.sidebar a[href="#collapseTwo"],
.sidebar [data-target="#collapseTwo"],
.sidebar .panel-heading:has(a[href="#collapseTwo"]) {
  display: none !important;
}

/* Hide domain/cart action links */
.sidebar a[href*="domainchecker"],
.sidebar a[href*="cart.php?a=view"],
.sidebar a[href*="transfer"],
.sidebar a[href*="domainregister"],
.sidebar a:has(i.fa-globe),
.sidebar a:has(i.fa-share) {
  display: none !important;
}

/* ========================================
   PAGE TITLE AREA
   ======================================== */
.main-content .page-header,
.main-content h1.page-title,
.page-title {
  color: #fff !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

.main-content .page-subtitle,
.page-subtitle {
  color: #94a3b8 !important;
  font-size: 15px !important;
  margin-bottom: 24px !important;
}