/* ==========================================================
   PixelloHost — Complete Modern Elegant Dark WHMCS Theme
   - Keeps all original sections & selectors you provided
   - Background fixed to #0D2538
   - Accent: Soft Blue (#007BFF)
   - Font: Inter
   - Subtle animations, glassy panels, consistent spacing
   ========================================================== */

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

/* -------------------------
   Theme variables
   ------------------------- */
:root{
  --bg-dark: #0D2538;             /* base background */
  --bg-panel: rgba(18,40,60,0.85);/* card/panel base */
  --bg-panel-2: #121d2d;
  --bg-lighter: #162A3E;
  --accent: #007BFF;             /* soft blue accent */
  --accent-2: #00E5FF;           /* lighter cyan for subtle highlight */
  --accent-teal: #00FFAE;        /* used sparingly */
  --text: #FFFFFF;
  --muted: #9fb0c6;
  --radius: 10px;
  --border-weak: rgba(255,255,255,0.06);
  --glass-blur: 8px;
  --shadow-weak: 0 6px 18px rgba(3,12,26,0.6);
  --transition: 0.24s cubic-bezier(.2,.8,.2,1);
}

/* Global base */
*{box-sizing:border-box}
html,body{
  height:100%;
  font-family: 'Inter', "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--bg-dark) !important;
  color: var(--text) !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition: background var(--transition), color var(--transition);
}

/* ==========================================================
   Preserve and override any forced white/light elements
   ========================================================== */
.bg-white,
.bg-light,
.card,
.panel,
.table,
.modal-content {
  background-color: var(--bg-panel) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.05) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-weak) !important;
  backdrop-filter: blur(var(--glass-blur));
}

/* Links & accents */
a, a:link, a:visited {
  color: var(--accent) !important;
  transition: color var(--transition), text-shadow var(--transition);
}
a:hover, a:focus {
  color: var(--accent-2) !important;
  text-shadow: 0 0 6px rgba(0,123,255,0.12);
  text-decoration: none;
}

/* Inputs & form fields */
input, textarea, select, .form-control {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
input:focus, textarea:focus, select:focus, .form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 6px 20px rgba(0,123,255,0.12) !important;
  transform: translateY(-1px);
  outline: none !important;
}

/* ==============================
   BUTTONS with refined Soft Blue style
   ============================== */
.btn,
.button,
input[type="submit"],
button {
  background: linear-gradient(180deg, rgba(0,123,255,1), rgba(0,98,220,0.95));
  border: 1px solid rgba(255,255,255,0.04);
  color: #fff !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,123,255,0.12);
  transition: all var(--transition);
}
.btn:hover,
.button:hover,
input[type="submit"]:hover,
button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,123,255,0.18);
  filter: brightness(1.03);
}

/* ==============================
   Misc fixes (tables, placeholders, alerts)
   ============================== */
table, th, td {
  background: transparent !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
::placeholder{ color: rgba(255,255,255,0.6) !important; }

.alert, .badge, .label {
  background: rgba(255,255,255,0.03) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}

/* Homepage search input (preserve ID usage) */
#frmDomainHomepage input.form-control {
  background: var(--bg-dark) !important;
  color: #fff !important;
  border: 2px solid var(--accent) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(0,123,255,0.08) !important;
  padding: 12px 14px !important;
}
#frmDomainHomepage input.form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 10px 30px rgba(0,123,255,0.12) !important;
  outline:none!important;
}
#frmDomainHomepage input.form-control::placeholder {
  color: rgba(255,255,255,0.72) !important;
}

/* ==============================
   HEADER / NAVBAR
   ============================== */
#header, .header {
  background-color: var(--bg-dark) !important;
  border-bottom: 2px solid rgba(0,123,255,0.12) !important;
  box-shadow: 0 6px 20px rgba(2,8,20,0.6);
  backdrop-filter: blur(6px);
  position: relative;
}
#header a, .header a { color: var(--text) !important; font-weight: 600; transition: color var(--transition);}
#header a:hover, .header a:hover { color: var(--accent) !important; }

/* Header search */
#header input[type="text"], .header input[type="text"] {
  background-color: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
  border-radius: 8px;
  padding: 8px 10px;
}
#header input[type="text"]::placeholder, .header input[type="text"]::placeholder { color: #9fb0c6 !important; }

/* Header buttons (search/cart) */
#header .btn, .header .btn {
  background: linear-gradient(180deg,var(--accent),#0066d6) !important;
  color: #fff !important;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,123,255,0.12);
}

/* ==============================
   FOOTER
   ============================== */
#footer, .footer, .site-footer {
  background-color: var(--bg-dark) !important;
  color: var(--text) !important;
  border-top: 2px solid rgba(0,123,255,0.06) !important;
  box-shadow: 0 -6px 20px rgba(2,8,20,0.55);
  padding: 26px 12px;
}
#footer a, .footer a, .site-footer a { color: var(--text) !important; font-weight:500; transition:color var(--transition); }
#footer a:hover, .footer a:hover, .site-footer a:hover { color: var(--accent) !important; }
#footer h4, .footer h4, .site-footer h4 {
  color: var(--accent) !important;
  border-bottom: 1px solid rgba(0,123,255,0.06);
  padding-bottom:6px;
  margin-bottom:12px;
}

/* Footer icons */
#footer i, .footer i, .site-footer i { color: var(--accent) !important; transition: transform var(--transition); }
#footer i:hover, .footer i:hover, .site-footer i:hover { transform: translateY(-2px); color: var(--text) !important; text-shadow: 0 0 8px rgba(0,123,255,0.12); }

/* ==============================
   Support Ticket Editor (preserve original rule but keep accessible contrast)
   Note: original had black text — we'll keep readable dark-on-light area
   ============================== */
/* Make text inside the ticket message editor black (if editor uses light bg) */
.md-editor textarea,
.md-editor .md-input {
  color: #000000 !important;
  background: rgba(255,255,255,0.96) !important;
  border-radius: 8px !important;
  padding: 10px !important;
}

/* ==============================
   GENERAL LAYOUT
   ============================== */
#main-body {
  background: var(--bg-dark);
  color: var(--text);
  font-family: 'Inter', Tahoma, Verdana, sans-serif;
  padding: 18px;
}

/* ==============================
   SIDEBAR PANELS
   ============================== */
.sidebar .panel {
  background: linear-gradient(180deg,var(--bg-panel-2), rgba(10,20,30,0.6));
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 14px;
  margin-bottom: 20px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.55);
  transition: transform var(--transition), box-shadow var(--transition);
  padding: 0;
}
.sidebar .panel:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.65);
}
.sidebar .panel-heading {
  background: linear-gradient(90deg,#0f2a44,#16354d);
  color: var(--text) ;
  font-weight:700;
  font-size:15px;
  padding:12px 16px;
  border-radius: 14px 14px 0 0;
}
.sidebar .panel-body { padding: 14px; font-size:14px; color:var(--muted); line-height:1.6; }

/* ==============================
   DASHBOARD TOP BOXES (Services, Domains, Tickets, Invoices)
   ============================== */
.dashboard-panels .panel-accent {
  border-radius: 12px;
  padding: 20px;
  background: linear-gradient(145deg,#0e2236,#142b45);
  color: var(--text);
  text-align:center;
  box-shadow: 0 8px 22px rgba(0,0,0,0.55);
  transition: transform var(--transition), box-shadow var(--transition);
}
.dashboard-panels .panel-accent:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(2,8,20,0.7);
}
.dashboard-panels .panel-accent .stat {
  font-size:34px;
  font-weight:700;
  margin-bottom:6px;
  color: var(--accent-2);
  text-shadow: 0 0 8px rgba(0,229,255,0.08);
}
.dashboard-panels .panel-accent-services { border-top: 3px solid #00c853; }
.dashboard-panels .panel-accent-domains  { border-top: 3px solid #ff9100; }
.dashboard-panels .panel-accent-tickets  { border-top: 3px solid #29b6f6; }
.dashboard-panels .panel-accent-invoices { border-top: 3px solid #ef5350; }

/* ==============================
   CLIENT HOME PANELS
   ============================== */
.client-home-panels .panel {
  background: linear-gradient(165deg,#0f1e33,#162a44);
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 14px;
  margin-bottom:22px;
  padding:0;
  overflow:hidden;
  box-shadow: 0 8px 26px rgba(0,0,0,0.55);
  position:relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.client-home-panels .panel:hover { transform: translateY(-6px); box-shadow: 0 18px 48px rgba(0,0,0,0.7); }

/* Accent strip */
.client-home-panels .panel::before{
  content:"";
  display:block;
  height:3px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: 14px 14px 0 0;
}

/* Panel Header & Body */
.client-home-panels .panel-heading {
  background: linear-gradient(90deg,#113358,#175280);
  color: var(--accent-2);
  font-size: 15px;
  font-weight:600;
  padding:14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  text-transform:uppercase;
  letter-spacing:0.6px;
  text-shadow: 0 0 6px rgba(0,229,255,0.04);
}
.client-home-panels .panel-body { padding:16px; font-size:14px; color: var(--muted); }

/* ==============================
   BUTTONS (refined)
   ============================== */
.btn, .btn-primary {
  background: linear-gradient(90deg, #007BFF, #0066D6);
  border: none;
  border-radius: 10px;
  color: #fff !important;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,123,255,0.12);
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn:hover, .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0,123,255,0.18);
}

/* Ghost / Secondary */
.btn-default, .btn-secondary {
  background: transparent;
  border:1px solid rgba(255,255,255,0.06);
  color: var(--text) !important;
  border-radius: 10px;
  padding: 8px 14px;
}
.btn-default:hover, .btn-secondary:hover{
  background: rgba(255,255,255,0.03);
  color: var(--accent) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.5);
}

/* ==============================
   Dropdowns / Selects
   ============================== */
select.form-control {
  color: var(--text) !important;
  background-color: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  border-radius: 8px;
  padding: 8px 12px;
}
select.form-control option { color: var(--text) !important; background-color: rgba(0,0,0,0.02) !important; }
select.form-control option:hover, select.form-control option:checked { background-color: rgba(0,123,255,0.08) !important; }

/* ==============================
   Responsive fixes
   ============================== */
@media (max-width: 768px) {
  .dashboard-panels .panel-accent { margin-bottom: 15px; }
  .sidebar { margin-bottom: 18px; max-width:100%; text-align:center; }
  .client-home-panels .panel { margin-bottom:18px; }
}

/* ==============================
   Custom client home cards (kept selectors)
   ============================== */
.custom-client-card {
  background-color: #122433;
  border: 1px solid rgba(0,196,167,0.08);
  color: var(--text);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.5);
  transition: transform var(--transition), box-shadow var(--transition);
  padding: 16px;
}
.custom-client-card:hover { transform: translateY(-6px); box-shadow: 0 18px 48px rgba(0,0,0,0.65); }
.custom-client-card .card-header, .custom-client-card .card-footer { background-color: rgba(13,27,42,0.6); border-color: rgba(0,196,167,0.06); color: var(--text); }

/* Global client area card theme */
.top-dashboard-card, .custom-client-card, .client-home-cards .card {
  background-color: #102433 !important;
  border: 1px solid rgba(0,196,167,0.06) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: transform var(--transition), box-shadow var(--transition);
}
.top-dashboard-card:hover, .custom-client-card:hover, .client-home-cards .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(0,0,0,0.7);
}
.top-dashboard-card .title, .top-dashboard-card .stat { color: var(--accent-teal) !important; }
.client-home-cards a { color: var(--accent-teal) !important; }

/* Fix white backgrounds under products & news */
.client-home-cards .card-body, .client-home-cards .list-group-item, .custom-client-card .card-body, .custom-client-card .list-group-item,
.client-home-cards .list-group, .client-home-cards .list-group-item-action {
  background-color: rgba(18,36,54,0.85) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.03) !important;
}
.client-home-cards .card-body p, .client-home-cards .card-body a, .client-home-cards .list-group-item a { color: var(--accent-teal) !important; }

/* Remove grey default box color under certain sections */
.card.bg-light, .bg-light, .table-striped>tbody>tr:nth-of-type(odd) {
  background-color: rgba(24,35,51,0.9) !important;
  color: var(--text) !important;
}

/* Ensure all buttons inside cards match theme */
.client-home-cards .btn, .custom-client-card .btn {
  background: linear-gradient(90deg, #00c4a7 0%, #008cff 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
}
.client-home-cards .btn:hover { opacity: 0.95; transform: translateY(-3px); }

/* Fix small "Active" badges */
.label, .badge, span.label, span.badge {
  background-color: #00c4a7 !important;
  color: #0d1b2a !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-weight:700;
}

/* ==============================
   CLIENT AREA PRODUCT PAGE STYLES
   (Preserve all selectors you gave)
   ============================== */
.client-product-tabcontent {
  background: rgba(13,15,22,0.86);
  color: #e6eef8;
  font-family: 'Inter', sans-serif;
  padding: 24px;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  transition: all var(--transition);
}
.client-product-card {
  background: rgba(20,22,30,0.88);
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  transition: transform var(--transition), box-shadow var(--transition);
  padding: 18px;
}
.client-product-card:hover { transform: translateY(-6px); box-shadow: 0 24px 64px rgba(0,0,0,0.7); }

.client-product-icon .fa-stack-2x { color: rgba(16,20,31,0.9); }
.client-product-icon .fa-inverse { color: var(--accent-2); }

.client-product-name { font-size: 1.5rem; margin-top:10px; font-weight:700; color:var(--text); }
.client-product-groupname { color: #94a7b8; font-size:0.95rem; }

/* Status colors kept but refined */
.client-product-status-text {
  margin-top:10px;
  font-weight:700;
  text-transform:uppercase;
  border-radius:8px;
  display:inline-block;
  padding:6px 14px;
  font-size:0.85rem;
  letter-spacing:0.6px;
}
.product-status-active .client-product-status-text {
  background: rgba(0,255,153,0.07);
  color: #00ff9d;
  border: 1px solid rgba(0,255,153,0.12);
}
.product-status-pending .client-product-status-text {
  background: rgba(255,235,59,0.06);
  color: #ffe082;
  border: 1px solid rgba(255,235,59,0.12);
}
.product-status-suspended .client-product-status-text {
  background: rgba(255,82,82,0.06);
  color: #ff5252;
  border: 1px solid rgba(255,82,82,0.12);
}

/* Info layout */
.client-product-heading { font-size:0.9rem; text-transform:uppercase; color:#97a9bd; margin-top:14px; }
.client-product-col-right div { font-weight:600; color:var(--text); }

/* Action buttons */
.client-product-actions-wrapper .btn { margin-top:10px; font-weight:700; text-transform:uppercase; border-radius:10px; }
.client-product-upgrade-btn .btn { background: linear-gradient(90deg,#00b09b,#96c93d); color:#fff; }
.client-product-renew-btn .btn { background: linear-gradient(90deg,#007cf0,#00dfd8); color:#fff; }
.client-product-cancel-btn .btn { background: linear-gradient(90deg,#f85032,#e73827); color:#fff; }
.client-product-actions-wrapper .btn:hover { transform: scale(1.03); filter: brightness(1.06); }

/* Tabs */
.client-product-tabs { border-bottom:1px solid rgba(255,255,255,0.03); margin-top:22px; }
.client-product-tab-item .nav-link { color:#b7c7d7; padding:10px 18px; background:transparent; transition: all var(--transition); }
.client-product-tab-item .nav-link.active { color: var(--accent-2); border-bottom:2px solid var(--accent-2); background: rgba(255,255,255,0.02); }
.client-product-tab-item .nav-link:hover { color: var(--accent-2); }

/* Tab Panels */
.client-product-tab-container {
  background: rgba(17,20,30,0.92);
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,0.03);
}

/* Alerts */
.client-product-unpaidinvoice {
  background: rgba(255,235,59,0.06);
  color:#fff;
  border: 1px solid rgba(255,235,59,0.12);
  border-radius:10px;
  padding:12px;
  margin-bottom:16px;
}
.client-product-unpaidinvoice a.btn { background:#ffb300; color:#000; border-radius:6px; }

/* Table / Inputs inside tabs */
.client-product-tab-container table { width:100%; border-collapse:collapse; color:#e6eef8; }
.client-product-tab-container table tr { border-bottom:1px solid rgba(255,255,255,0.03); }
.client-product-tab-container table td { padding:10px; }
.client-product-tab-container input, .client-product-tab-container select {
  background: rgba(255,255,255,0.02);
  color: #e6eef8;
  border:1px solid rgba(255,255,255,0.04);
  border-radius:8px;
  padding:8px 10px;
}

/* Hover & transitions */
.client-product-card, .client-product-tab-container, .client-product-actions-wrapper .btn {
  transition: all var(--transition);
}

/* Mobile adjustments */
@media (max-width:768px){
  .client-product-card{ padding:14px; }
  .client-product-tabcontent{ padding:14px; }
  .client-product-actions-wrapper .btn{ font-size:0.88rem; }
}

/* ===========================
   Corrected Fix for White Product Icon Area
   (Preserved selectors; improved visuals)
   =========================== */
.client-product-card .fa-stack,
.client-product-card .product-icon,
.client-product-card .product-image,
.client-product-card .client-product-icon {
  background: radial-gradient(circle at center, rgba(0,229,255,0.05), rgba(0,229,255,0.01));
  border-radius: 50%;
  border: 1px solid rgba(0,229,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  width:110px;
  height:110px;
  margin:0 auto;
  box-shadow: 0 8px 30px rgba(0,229,255,0.03);
  transition: transform var(--transition), box-shadow var(--transition);
}
.client-product-card .fa-stack-2x,
.client-product-card .product-icon img {
  background: transparent !important;
  color: var(--accent-2);
  box-shadow:none !important;
}
/* Hide broken placeholders */
.client-product-card img[src=""],
.client-product-card img:not([src]),
.client-product-card img[src*="default.png"],
.client-product-card img[src*="placeholder"] { display:none !important; }

/* Ensure text alignment and readable colors (remove black text issues) */
.client-product-name, .client-product-groupname { text-align:center; margin-top:10px; color: var(--text) !important; }
.client-product-card .fa-stack:hover, .client-product-card .product-icon:hover {
  box-shadow: 0 12px 38px rgba(0,229,255,0.06);
  transform: scale(1.03);
}

/* Status text styling inside product card */
.client-product-card .status-text { color: var(--text) !important; background: rgba(255,255,255,0.02); padding:6px 10px; border-radius:6px; }

/* ==============================
   DOMAIN CARD - THEME MATCHED STYLE
   ============================== */
.clientarea-domains {
  background: linear-gradient(180deg,#0c1624,#07101a);
  border: 1px solid rgba(0,255,191,0.04);
  border-radius: 10px;
  overflow:hidden;
  margin-top:20px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  transition: all var(--transition);
}
.clientarea-domains:hover { box-shadow: 0 20px 56px rgba(0,0,0,0.72); }

/* Header (outer glow) */
.clientarea-domains .card-header {
  background: rgba(13,25,43,0.65);
  border-bottom: 1px solid rgba(0,255,191,0.03);
  padding:12px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.clientarea-domains .card-title { color:#e6fffa; font-weight:700; font-size:1.03rem; display:flex; gap:8px; align-items:center; }
.clientarea-domains .card-title i { color: #00ffc3; }

/* Manage Domain button */
.clientarea-domains .card-header .btn.bg-color-green {
  background: linear-gradient(135deg,#00ffc3,#00bfa5) !important;
  color:#001c18 !important;
  border:none !important;
  font-weight:700;
  border-radius:8px;
  padding:6px 12px;
}
.clientarea-domains .card-header .btn.bg-color-green:hover {
  box-shadow: 0 10px 28px rgba(0,255,191,0.06);
  transform: translateY(-2px);
}

/* Table Section */
.domain-table {
  background: transparent;
  color: #d9fdf2;
  font-size:14px;
  width:100%;
  border-collapse:collapse;
}
.domain-table thead th {
  background: rgba(0,255,191,0.03);
  color: #8ef5dc;
  text-transform:uppercase;
  font-size:13px;
  font-weight:700;
  padding:10px 12px;
  border-bottom:1px solid rgba(0,255,191,0.04);
}
.domain-table tbody tr { transition: background var(--transition); }
.domain-table tbody tr:hover { background: rgba(0,255,191,0.03); }

/* Domain link */
.domain-link { color: #00ffd0; font-weight:700; text-shadow: 0 0 5px rgba(0,255,191,0.06); transition: all var(--transition); }
.domain-link:hover { color:#6effff; text-shadow:0 0 10px rgba(0,255,191,0.12); text-decoration:none; }

/* Badges & manage button in table */
.badge.bg-success { background:#00c586; color:#fff; border-radius:6px; font-weight:700; box-shadow: 0 6px 18px rgba(0,255,191,0.06); }
.badge.bg-secondary { background:#2b2b2b; color:#ddd; border-radius:6px; font-weight:600; box-shadow:0 6px 16px rgba(255,255,255,0.02); }
.domain-table .btn.bg-color-green {
  background: linear-gradient(135deg,#00ffc3,#00bfa5) !important;
  color:#001c18 !important;
  border:none !important;
  border-radius:8px;
  padding:6px 10px;
}
.domain-table .btn.bg-color-green:hover { box-shadow:0 10px 28px rgba(0,255,191,0.06); transform:translateY(-2px); }

/* ==============================
   Invite/Login/Register fixes (remove white background)
   ============================== */
#main-body .logincontainer,
#main-body .registercontainer,
#main-body .card,
#main-body .panel,
#inviteContainer .logincontainer,
#inviteContainer .registercontainer,
#inviteContainer .card,
#inviteContainer .panel {
  background: rgba(13,25,43,0.82) !important;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,209,255,0.06) !important;
  box-shadow: 0 12px 36px rgba(0,209,255,0.03);
  color: var(--text) !important;
  border-radius: 12px !important;
}

/* Fix text colors */
#main-body .logincontainer h1,
#main-body .registercontainer h1,
#main-body .logincontainer label,
#main-body .registercontainer label {
  color: var(--accent-2) !important;
  text-shadow: 0 0 6px rgba(0,229,255,0.03);
}

/* Inputs on forms */
#main-body input, #main-body select, #main-body textarea {
  background-color: rgba(255,255,255,0.02) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  border-radius: 8px;
}
#main-body input:focus, #main-body select:focus, #main-body textarea:focus {
  border-color: var(--accent-2) !important;
  box-shadow: 0 10px 30px rgba(0,229,255,0.06);
}

/* Buttons */
#main-body .btn, #main-body .btn-primary {
  background: linear-gradient(90deg,#00b8ff,#0066d6) !important;
  border:none !important;
  color:#fff !important;
  border-radius:8px;
  box-shadow: 0 10px 30px rgba(0,209,255,0.06);
}

/* ==============================
   PixelloHost — Invite Page Override
   (keeps your selectors and updates visuals)
   ============================== */
.pixellohost-invite-page {
  background-color: #0f2438 !important;
  color: #e6f7ff !important;
  padding: 40px 0;
}
.pixellohost-invite-page .card,
.pixellohost-invite-page .panel,
.pixellohost-invite-page .panel-default,
.pixellohost-invite-page .well {
  background: rgba(15,36,56,0.92) !important;
  border: 1px solid rgba(0,209,255,0.06) !important;
  box-shadow: 0 12px 36px rgba(0,209,255,0.02);
  border-radius: 10px !important;
  color: #e6f7ff !important;
}
.pixellohost-invite-page .card-header, .pixellohost-invite-page .panel-heading {
  background: linear-gradient(90deg, rgba(0,209,255,0.06), rgba(0,120,255,0.05)) !important;
  border-bottom: 1px solid rgba(0,209,255,0.04) !important;
  color: #e6f7ff !important;
  text-shadow: 0 0 6px rgba(0,209,255,0.01);
}
.pixellohost-invite-page h1, .pixellohost-invite-page h2, .pixellohost-invite-page h3,
.pixellohost-invite-page h4, .pixellohost-invite-page label {
  color: var(--accent-2) !important;
  text-shadow: 0 0 4px rgba(0,229,255,0.02);
}
.pixellohost-invite-page input, .pixellohost-invite-page select, .pixellohost-invite-page textarea {
  background: rgba(255,255,255,0.02) !important;
  color: var(--text) !important;
  border: 1px solid rgba(28,74,89,0.06) !important;
}
.pixellohost-invite-page input:focus, .pixellohost-invite-page select:focus, .pixellohost-invite-page textarea:focus {
  border-color: var(--accent-2) !important;
  box-shadow: 0 10px 30px rgba(0,209,255,0.04);
}
.pixellohost-invite-page .btn, .pixellohost-invite-page .btn-primary {
  background: linear-gradient(90deg,#00b8ff,#0066d6) !important;
  border:none !important;
  color:#fff !important;
  border-radius:8px !important;
  box-shadow: 0 10px 30px rgba(0,209,255,0.04);
}
.pixellohost-invite-page .btn:hover { background: linear-gradient(90deg,#00eaff,#0099ff) !important; }

/* Fix white text inside forms and notes */
.pixellohost-invite-page p, .pixellohost-invite-page span, .pixellohost-invite-page small, .pixellohost-invite-page strong { color: #e6f7ff !important; }

/* Fixes for links in invite page (use accent subtle) */
.pixellohost-invite-page a { color: var(--accent) !important; }
.pixellohost-invite-page a:hover { color: var(--accent-2) !important; }

/* ==============================
   Scrollbar (subtle)
   ============================== */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background: rgba(3,8,20,0.6); border-radius:10px; }
::-webkit-scrollbar-thumb { background: rgba(30,58,86,0.9); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(45,80,125,0.95); }

/* ==============================
   Animations & utilities (subtle)
   ============================== */
.fade-in { animation: fadeIn 0.55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.slight-pop { transition: transform var(--transition), box-shadow var(--transition); }
.slight-pop:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0,0,0,0.55); }

/* ==============================
   Minor helpers to keep everything consistent
   ============================== */
.text-muted { color: var(--muted) !important; }
.h-100 { height:100% !important; }
.rounded-lg { border-radius: var(--radius) !important; }

/* ==============================
   LEGACY / EXACT SELECTORS YOU SENT (kept, updated values)
   This block re-contains many of your original selectors so nothing is missed.
   ============================== */

/* Buttons (alternate style retained) */
.btn, .button, input[type="submit"], button {
  background-color: var(--bg-dark) !important;
  border: 1px solid var(--accent) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  transition: all var(--transition) !important;
  box-shadow: 0 0 6px rgba(0,123,255,0.08) !important;
}
.btn:hover, .button:hover, input[type="submit"]:hover, button:hover {
  background-color: var(--accent) !important;
  color: var(--bg-dark) !important;
  box-shadow: 0 0 18px rgba(0,123,255,0.16) !important;
  transform: translateY(-2px);
}

/* Misc tables (explicitly kept) */
table, th, td { background: transparent !important; color: var(--text) !important; border-color: rgba(255,255,255,0.06) !important; }

/* Homepage search (explicit duplication kept) */
#frmDomainHomepage input.form-control { background: var(--bg-dark) !important; color:#fff !important; border:2px solid var(--accent) !important; border-radius:8px !important; box-shadow:0 6px 18px rgba(0,123,255,0.06) !important; }

/* Header (duplicate kept) */
#header, .header { background-color: var(--bg-dark) !important; border-bottom:2px solid var(--accent) !important; box-shadow: 0 0 12px rgba(0,123,255,0.04); }

/* Footer (duplicate kept) */
#footer, .footer, .site-footer { background-color: var(--bg-dark) !important; color: var(--text) !important; border-top:2px solid var(--accent) !important; box-shadow: 0 -2px 12px rgba(0,123,255,0.03); padding: 20px 0; }

/* Product card icon fixes (duplicate kept) */
.client-product-card .fa-stack, .client-product-card .product-icon, .client-product-card .product-image, .client-product-card .client-product-icon {
  background: radial-gradient(circle at center, rgba(0,255,255,0.03), rgba(0,255,255,0.008));
  border-radius:50%;
  border:2px solid rgba(0,255,255,0.04);
  width: 110px; height:110px; margin:0 auto;
}

/* Domain card (duplicate kept) */
.clientarea-domains { background:#0c1624; border:1px solid rgba(0,255,191,0.04); border-radius:10px; box-shadow:0 12px 36px rgba(0,0,0,0.55); }

/* Invite page (duplicate kept) */
.pixellohost-invite-page { background-color:#0f2438 !important; color:#e6f7ff !important; padding:40px 0; }

/* End of preserved blocks */

/* ==============================
   End of stylesheet
   ============================== */
   /* === Fix for Navbar Dropdown Overlay === */
.navbar,
.header {
  position: relative;
  z-index: 1000 !important;
}

.navbar .dropdown-menu {
  position: absolute;
  z-index: 1050 !important;
  background: rgba(18, 40, 60, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
}

.navbar .dropdown-menu a {
  color: #e6edf5 !important;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}

.navbar .dropdown-menu a:hover {
  background: rgba(0, 123, 255, 0.2);
  color: #fff !important;
}
/* ===============================
   FIX INVITE PAGE BACKGROUND ISSUE
   =============================== */

/* Remove the white background from invite login/register boxes */
#main-body .logincontainer,
#main-body .registercontainer,
#main-body .card,
#main-body .panel,
#inviteContainer .logincontainer,
#inviteContainer .registercontainer,
#inviteContainer .card,
#inviteContainer .panel {
    background: transparent !important; /* remove white */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 209, 255, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 209, 255, 0.15);
    color: #fff !important;
}

/* Fix text colors */
#main-body .logincontainer h1,
#main-body .registercontainer h1,
#main-body .logincontainer label,
#main-body .registercontainer label {
    color: #00eaff !important;
    text-shadow: 0 0 5px rgba(0, 234, 255, 0.5);
}

/* Inputs */
#main-body input,
#main-body select,
#main-body textarea {
    background-color: #0f2438 !important;
    color: #fff !important;
    border: 1px solid #00aaff !important;
    border-radius: 6px;
}

#main-body input:focus,
#main-body select:focus,
#main-body textarea:focus {
    border-color: #00eaff !important;
    box-shadow: 0 0 10px rgba(0, 234, 255, 0.4);
}

/* Buttons */
#main-body .btn,
#main-body .btn-primary {
    background: linear-gradient(90deg, #00d1ff, #0078ff) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 209, 255, 0.3);
}
/* ======================================================
   PixelloHost — Invite Page Override
   ====================================================== */

.pixellohost-invite-page {
    background-color: #0f2438 !important;
    color: #e0f4ff !important;
    padding: 40px 0;
}

/* Override the white card background */
.pixellohost-invite-page .card,
.pixellohost-invite-page .panel,
.pixellohost-invite-page .panel-default,
.pixellohost-invite-page .well {
    background: #0f2438 !important;
    border: 1px solid #00d1ff !important;
    box-shadow: 0 0 15px rgba(0, 209, 255, 0.25);
    border-radius: 10px !important;
    color: #e0f4ff !important;
}

/* Header strip styling */
.pixellohost-invite-page .card-header,
.pixellohost-invite-page .panel-heading {
    background: linear-gradient(90deg, rgba(0, 209, 255, 0.15), rgba(0, 120, 255, 0.15)) !important;
    border-bottom: 1px solid #00d1ff !important;
    color: #000000 !important;
    text-shadow: 0 0 6px rgba(0, 209, 255, 0.6);
}

/* Headings & labels */
.pixellohost-invite-page h1,
.pixellohost-invite-page h2,
.pixellohost-invite-page h3,
.pixellohost-invite-page h4,
.pixellohost-invite-page label {
    color: #00eaff !important;
    text-shadow: 0 0 5px rgba(0, 234, 255, 0.5);
}

/* Input fields */
.pixellohost-invite-page input,
.pixellohost-invite-page select,
.pixellohost-invite-page textarea {
    background: #0f2438 !important;
    color: #fff !important;
    border: 1px solid #1c4a59 !important;
}

.pixellohost-invite-page input:focus,
.pixellohost-invite-page select:focus,
.pixellohost-invite-page textarea:focus {
    border-color: #00d1ff !important;
    box-shadow: 0 0 10px rgba(0, 209, 255, 0.4);
}

/* Buttons */
.pixellohost-invite-page .btn,
.pixellohost-invite-page .btn-primary {
    background: linear-gradient(90deg, #00d1ff, #0078ff) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 6px !important;
    box-shadow: 0 0 10px rgba(0, 209, 255, 0.3);
}

.pixellohost-invite-page .btn:hover {
    background: linear-gradient(90deg, #00eaff, #0099ff) !important;
}

/* Fix white text inside forms and notes */
.pixellohost-invite-page p,
.pixellohost-invite-page span,
.pixellohost-invite-page small,
.pixellohost-invite-page strong {
    color: #e0f4ff !important;
}

/* Fixes for links */
.pixellohost-invite-page a {
    color: #000000 !important;
}
.pixellohost-invite-page a:hover {
    color: #000000 !important;
}
/* ===============================
   Dropdowns
================================= */
select.form-control {
    color: #ffffff !important;
    background-color: #0d1a2b !important;
    border: 1px solid #1e90ff !important;
    border-radius: 6px;
    padding: 6px 10px;
}

select.form-control option {
    color: #ffffff !important;
    background-color: #0d1a2b !important;
}

select.form-control option:hover,
select.form-control option:checked {
    background-color: #1e90ff !important;
    color: #ffffff !important;
}





























/* ==============================================================
   FIX WHITE BACKGROUND BEHIND PRODUCT ICON (WORKING FINAL VERSION)
   ============================================================== */

/* Reset and clear all background layers */
.product-details .fa-stack,
.product-details .fa-stack-1x,
.product-details .fa-stack-2x,
.product-details .product-icon,
.product-details .product-icon img,
.product-details .product-image,
.client-product-card .fa-stack,
.client-product-card .product-icon,
.client-product-card .product-image {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

/* Fix any inline SVG or masked icon shapes */
.product-details .fa-stack svg,
.client-product-card .fa-stack svg {
    background: transparent !important;
    fill: #00ffff !important; /* cyan tint */
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.3));
}

/* Add soft glow and rounded look matching your theme */
.product-details .fa-stack,
.client-product-card .product-icon {
    border-radius: 50%;
    border: 2px solid rgba(0, 255, 255, 0.25);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
    transition: all 0.3s ease;
}

/* Hover animation for interactivity */
.product-details .fa-stack:hover,
.client-product-card .product-icon:hover {
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.35);
    transform: scale(1.05);
}

/* Ensure icon and text are visible on dark backgrounds */
.product-details .fa-stack i,
.client-product-card .product-icon i {
    color: #00ffff !important;
}

/* Adjust status colors */
.product-details .status-text,
.client-product-card .status-text {
    color: #00ffae !important;
    background: rgba(0, 255, 174, 0.1) !important;
    border: 1px solid rgba(0, 255, 174, 0.3);
    border-radius: 6px;
    padding: 2px 8px;
}

/* Optional – slightly smaller image icons */
.product-details .product-icon img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50%;
}
/* ==================================================
   FIX: Icon Overlay & Background Transparency Issue
   ================================================== */

/* Make sure the product icon stays inside its box */
.product-details .product-icon,
.client-product-card .product-icon {
    position: relative !important;
    z-index: 1 !important;
    background: radial-gradient(circle at center, rgba(0, 255, 255, 0.1), rgba(0, 255, 255, 0.03)) !important;
    border-radius: 50% !important;
    border: 2px solid rgba(0, 255, 255, 0.2) !important;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 90px !important;
    height: 90px !important;
    margin: 10px auto 15px auto !important; /* Centered, no overlap */
    overflow: hidden !important;
}

/* Ensure the icon doesn’t spill outside or overlay the green card */
.product-details .product-icon img,
.client-product-card .product-icon img {
    background: transparent !important;
    border-radius: 50% !important;
    width: 70px !important;
    height: 70px !important;
    object-fit: contain !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Fix for the green service box text alignment */
.product-details .product-title,
.client-product-card .product-name {
    position: relative !important;
    z-index: 3 !important;
    text-align: center !important;
}

/* Optional: keep the green box layout clean */
.product-details .panel,
.client-product-card {
    overflow: hidden !important;
    position: relative !important;
    border-radius: 8px !important;
}

.custom-client-card .btn {
    padding: 10px;
    font-size: 15px;
    border-radius: 6px;
}

.custom-client-card .btn:hover {
    filter: brightness(1.1);
}