@charset "utf-8";
/*

Theme Name: LFMTE Default Theme

Theme URI: http://thetrafficexchangescript.com/

Description: The default theme for LFMTE traffic exchanges.

Version: 3.0

Author: Josh Abbott

*/



/* Main font settings */

body {
	font-size: 20px;
	font-weight: 400;
	color: #1C0000;
}


/* Main styles for the top level of the main menu */

.lfm_menu_bar {
	background-color: #460030;
	padding: 0 0 45px;
	margin-bottom: 30px; /* If your menu bar is overlapping the page content, increase the margin here */
}

@media (max-width: 991.98px) {
	/* Mobile view settings for the top level navigation */
	.lfm_menu_bar {
		padding-bottom: 0;
		margin-bottom: 20px;
	}
}


/* Site logo styles */

.lfm_menu_logo {
	max-height: 35px;
}
@media (min-width: 992px) {
	.lfm_menu_logo {
		margin-right: 20px;
	}
}


.lfm_menu_bar .navbar-nav > .nav-item > .nav-link {
	/* Sets the navigation tabs for the top level */
	font-size: 20px;
	color: #FFE8A3;
}

.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link {
	/* Changes the colors when a tab is opened */
	color: #FFE8A3;
	background-color: #460030;
}

.lfm_menu_bar .navbar-nav > .nav-item > .nav-link:hover {
	/* Hover style when a tab is not opened */
	background-color: #460030;
}

.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:hover {
	/* Hover style when a tab is opened */
	background-color: #460030;
}

@media (min-width: 992px) {
	/* Desktop view settings for the top level navigation tabs */
	.lfm_menu_bar .navbar-nav > .nav-item > .nav-link {
		margin: 0px 0px;
		padding: 6px 15px;
		border: 0px solid rgba(255,255,255,0);
		border-radius: 5px;
		position: relative;
	}
	
	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link,
	.lfm_menu_bar .navbar-nav > .nav-item > .nav-link:hover {
		border: 1px solid #FFD27F;
	}
	
	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:after {
		/* Fills in the gap between an opened tab and the bottom of the bar */
		content: "";
		background-color: #7E0000;
		width: calc(100% + 2px);
		height: 14px;
		position: absolute;
		bottom: -20px;
		left: -1px;
		border: 0px solid #DDDDDD;
		border-top: none;
	}
}

@media (max-width: 991.98px) {
	/* Mobile view settings for the top level navigation tabs */
	.lfm_menu_bar .navbar-nav > .nav-item > .nav-link {
		padding: 8px 15px;
		text-align: left;
	}
	
	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link {
		/* Returns to the original colors when a tab is closed in mobile */
		color: #0A111F;
		background-color:  #0A111F;
	}
	
	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link:hover {
		/* Returns to the original hover effect when closed in mobile  */
		color: #0A111F;
		background-color: #0A111F;
	}
	
	/* Adds an arrow in mobile view */
	.lfm_menu_bar .navbar-nav > .nav-item > .nav-link:after {
		content: "";
		border-top: 0.3em solid;
		border-right: 0.3em solid transparent;
		border-bottom: 0;
		border-left: 0.3em solid transparent;
		color: #0A111F;
		transform: rotate(-90deg);
		position: absolute;
		right: 1.25rem;
		transition: all 0.1s ease-out;
	}
	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:after {
		color: navy;
		transform: rotate(0deg);
	}
	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link:after {
		color: #0A111F;
		transform: rotate(-90deg);
	}
}


/* Main styles for the second level of the main menu */

.lfm_menu_tab {
	background-color: #460030cc;
	border: 0px solid #DDDDDD;
	position: absolute;
	display: none;
	left: 0;
	top: 100%;
	z-index: 999;
	width: 100%;
}

li.lfm_tab_opened .lfm_menu_tab {
	display: flex;
}

@media (max-width: 991.98px) {
	/* Mobile view settings for the second level navigation */
	.lfm_menu_tab {
		background-color: #FFD9B3;
		position: relative;
		flex-direction: column;
		top: 0;
		padding: 5px 0;
	}
	li.lfm_tab_closed .lfm_menu_tab {
		display: none;
	}
}


.lfm_menu_tab > li > a {
	/* Sets the navigation links for the second level */
	font-size: 20px;
	padding: 0 20px;
	line-height: 45px;
	color: #FFE8A3;
	text-decoration: none;
	display: block;
}
.lfm_menu_tab > li > a:hover {
	color: white; /* White text on hover */
	background-color: #D65A31; /* Reddish-orange hover effect */
}

.lfm_menu_tab .dropdown-menu a {
	/* Sets the navigation links for the third level */
	font-size: 18px;
	padding: 0 20px;
	line-height: 32px;
	color: #FFC107;
	text-decoration: none;
	white-space: nowrap;
	display: block;
}
.lfm_menu_tab .dropdown-menu li:hover {
	background-color: #380000;
}

@media (max-width: 991.98px) {
	/* Mobile view settings for the second level navigation links */
	.lfm_menu_tab > li > a {
		padding-left: 40px;
		line-height: 36px;
		width: 100%;
	}
	
	/* Mobile view settings for the third level navigation links */
	.lfm_menu_tab .dropdown-menu a {
		padding-left: 50px;
	}
}



/* Icon settings */

.far, .fas {
	margin-right:3px;
}

.feedicon {
	color:#3097D1;
	font-size:20px;
	margin-right:5px;
}


/* Profile picture sizes */

.profilepic_small {
	width:40px;
	height:40px;
}

.profilepic_med {
	width:75px;
	height:75px;
}

.profilepic_large {
	width:200px;
	height:200px;
}


/* Various styles */

.buttonlink {
	/* This class defines <a> tag links that look like buttons */
	cursor: pointer;
	background-color:#d90b0b;
	border-radius:2px;
	border:1px solid #002175;
	display:inline-block;
	cursor:pointer;
	color:#e90b0b;
	font-family:arial;
	font-size:18px;
	font-weight:500;
	padding:4px 7px;
	margin:2px 1px 2px 1px;
	text-decoration:none;
}
.buttonlink:hover {
	/* This controls the button links when you hover over them */
	color:#0A111F;
	background-color:#1C0000;
	text-decoration:none;
}


.infobar {
	/* This class defines sections that span the entire page width */
	width:100%;
	padding-top: 15px;
	padding-bottom: 15px;
	color:#0A111F;
	background-color:#555555;
}
.infobar h2 {
	color:#0A111F;
}


.vcenter {
	/* This is a class that can be used in Bootstrap rows to vertically center the content */
	display: flex;
	align-items: center;
}


/* The next 3 sections control various text styles used throughout the LFM Members Area */
.lfm_title {
	font-family: "Arial"; color:#FFC107; font-size:32px;
}

.lfm_descr {
	font-family: "Arial"; color:#FFC107; font-size:18px;
}

.lfm_descr_bold {
	font-family: "Arial"; color:#FFC107; font-size:16px;
	font-weight:700;
}

/* ==========================================================
   SUNRISE TE - BUSINESS BANNER THEME PATCH
   Paste at the END of your CSS (overrides older rules)
   ========================================================== */

:root{
  --sr-bg: #0b1220;        /* dark navy */
  --sr-bg2:#0a1020;        /* deeper navy */
  --sr-panel: rgba(255,255,255,0.06);
  --sr-border: rgba(255,255,255,0.10);
  --sr-text: rgba(255,255,255,0.90);
  --sr-muted: rgba(255,255,255,0.72);
  --sr-gold: #f2b84b;      /* soft gold accent */
  --sr-gold2:#ffd27d;      /* lighter gold */
  --sr-cta: #ff8c42;       /* sunrise orange (CTA only) */
  --sr-ctaText:#0b1220;
}

/* ----------------------------
   Base typography / body
   ---------------------------- */
body{
  font-size: 18px;               /* 20px felt heavy; more business */
  font-weight: 400;
  color: #cfd6e4;                /* default text for light content areas */
}

/* If your pages are mostly light backgrounds, keep above.
   If pages are dark, uncomment:
   body{ color: #cfd6e4; }
*/

/* ----------------------------
   TOP MENU BAR
   ---------------------------- */
.lfm_menu_bar{
  background: linear-gradient(180deg, var(--sr-bg) 0%, var(--sr-bg2) 100%);
  padding: 0 0 18px;             /* was 45px (too tall) */
  margin-bottom: 22px;
  border-bottom:1px solid rgba(255,255,255,0.02);
}

/* Logo */
.lfm_menu_logo{
  max-height: 34px;
}

/* Top-level nav links */
.lfm_menu_bar .navbar-nav > .nav-item > .nav-link{
  font-size: 16px;
  font-weight: 800;
  color: rgba(255,255,255,0.82);
}

/* Desktop tabs: clean, not boxed */
@media (min-width: 992px){
  .lfm_menu_bar .navbar-nav > .nav-item > .nav-link{
    padding: 10px 14px;
    margin: 0 4px;
    border: 0 !important;
    border-radius: 10px;
    position: relative;
  }

  .lfm_menu_bar .navbar-nav > .nav-item > .nav-link:hover{
    background: var(--sr-panel);
    color: rgba(255,255,255,0.95);
  }

  .lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link{
    background: var(--sr-panel);
    color: var(--sr-gold);
  }

  /* Remove the old “bridge” block under open tab */
  .lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:after{
    content: none !important;
  }
}

/* ----------------------------
   SECOND LEVEL MENU
   ---------------------------- */
/* Fix invalid original (#460030C) + match business theme */
.lfm_menu_tab{
  background: rgba(11,18,32,0.98);
  border: 1px solid var(--sr-border);
  border-left: 0;
  border-right: 0;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}

/* Second-level links */
.lfm_menu_tab > li > a{
  font-size: 15px;
  font-weight: 750;
  padding: 0 18px;
  line-height: 44px;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  display: block;
}
.lfm_menu_tab > li > a:hover{
  color: #fff;
  background: var(--sr-panel);
}

/* Third level dropdown */
.lfm_menu_tab .dropdown-menu a{
  font-size: 14px;
  color: rgba(255,255,255,0.82);
}
.lfm_menu_tab .dropdown-menu li:hover{
  background: var(--sr-panel);
}

/* ----------------------------
   MOBILE NAV (remove orange blocks)
   ---------------------------- */
@media (max-width: 991.98px){
  .lfm_menu_bar{
    padding-bottom: 0;
    margin-bottom: 16px;
  }

  .lfm_menu_bar .navbar-nav > .nav-item > .nav-link{
    padding: 10px 14px;
    text-align: left;
  }

  /* Stop closed tabs from turning orange */
  .lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link{
    color: rgba(255,255,255,0.86);
    background: transparent;
  }
  .lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link:hover{
    color:#fff;
    background: var(--sr-panel);
  }

  .lfm_menu_tab{
    background: rgba(11,18,32,0.98);
    position: relative;
    flex-direction: column;
    top: 0;
    padding: 6px 0;
  }

  /* Arrow colors */
  .lfm_menu_bar .navbar-nav > .nav-item > .nav-link:after{
    color: rgba(255,255,255,0.75);
  }
  .lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:after{
    color: var(--sr-gold);
  }
}

/* ----------------------------
   BUTTON LINKS (fix readability + business style)
   ---------------------------- */
.buttonlink{
  cursor: pointer;
  background: var(--sr-cta);
  color: var(--sr-ctaText);
  border-radius: 12px;
  border: 1px solid rgba(255,140,66,0.55);
  display: inline-block;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  padding: 10px 14px;
  margin: 2px 1px;
  text-decoration: none;
  box-shadow: 0 14px 40px rgba(255,140,66,0.22);
}
.buttonlink:hover{
  color: var(--sr-ctaText);
  background: #101724;
  text-decoration: none;
}

/* ----------------------------
   Titles & description text (less “yellow everywhere”)
   ---------------------------- */
.lfm_title{
  font-family: inherit;
  color: var(--sr-gold);
  font-size: 30px;
  font-weight: 950;
  letter-spacing: -0.3px;
}
.lfm_descr{
  font-family: inherit;
  color: rgba(255,255,255,0.78);
  font-size: 16px;
}
.lfm_descr_bold{
  font-family: inherit;
  color: rgba(255,255,255,0.86);
  font-size: 16px;
  font-weight: 850;
}



.sr-bpop-wrap {
  max-width:980px;
  margin:24px auto;
  padding:0 18px;
  color:#cfd6e4; /* silver-grey */
  font-family:Poppins, Arial, sans-serif;
}
.sr-bpop-card { background:linear-gradient(180deg,#0f172a,#0b1220); border:1px solid rgba(255,255,255,0.08); border-radius:18px; box-shadow:0 20px 55px rgba(0,0,0,0.45); overflow:hidden; }
.sr-bpop-head { padding:18px 20px; border-bottom:1px solid rgba(255,255,255,0.02); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sr-bpop-body ul li{ margin: 6px 0; }
.sr-bpop-body strong{ color:#f1f5f9; }
.sr-bpop-title {
  margin:0;
  font-size:20px;
  font-weight:800;
  color:#f1f5f9; /* bright silver */
}
.sr-bpop-score {
  font-size:14px;
  color:rgba(207,214,228,0.7);
}
.sr-bpop-table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.06);

  /* DARKER, BLACKER BASE */
  background: linear-gradient(
    180deg,
    rgba(6,10,18,0.98),
    rgba(11,18,32,0.98)
  );

  color:#cfd6e4;
  box-shadow:0 12px 30px rgba(0,0,0,0.65);
  font-size:14px;
}


.sr-bpop-table tbody td {
  color:#cfd6e4; /* silver-grey instead of white */
}

.sr-bpop-table thead th { background:rgba(255,255,255,0.04); color:#ffd27f; font-weight:800; font-size:13px; padding:12px 14px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.02); white-space:nowrap; }
.sr-bpop-table tbody td { background:transparent; color:#fff; font-size:14px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,0.03); vertical-align:middle; }
.sr-bpop-table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.015); /* almost black */
}
.sr-bpop-table tbody tr:hover td { background: rgba(255,140,66,0.08); }
.sr-rank-pill {
  color:#f1f5f9;
}
.sr-numeric { text-align:right; font-weight:700; white-space:nowrap; }
.sr-bpop-empty {
  color:rgba(207,214,228,0.65);
}
.sr-bpop-foot { padding:14px 18px; border-top:1px solid rgba(255,255,255,0.04); display:flex; justify-content:space-between; align-items:center; gap:12px; background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); }
.sr-bpop-btn { display:inline-block; padding:10px 14px; border-radius:12px; font-weight:800; background: linear-gradient(135deg,#ffd27f,#ff8c42); color:#0b1220; text-decoration:none; box-shadow:0 12px 30px rgba(255,140,66,0.18); }

/* Responsive stacking */
@media (max-width:760px){
.sr-bpop-head { flex-direction:column; align-items:flex-start; }
.sr-bpop-table thead { display:none; }
.sr-bpop-table, .sr-bpop-table tbody, .sr-bpop-table tr, .sr-bpop-table td { display:block; width:100%; }
.sr-bpop-table tr { margin-bottom:12px; border-bottom:1px solid rgba(255,255,255,0.02); padding-bottom:6px; }
.sr-bpop-table td { padding:8px 10px; text-align:left; }
.sr-bpop-table td::before { content: attr(data-label); display:block; font-weight:700; color:rgba(255,255,255,0.72); margin-bottom:6px; }
}
.sr-bpop-spacer{ height:24px; }

/* Hover on ANY top-nav link */
.lfm_menu_bar .navbar-nav .nav-link:hover{
  color:#fff !important;
  background-color: rgba(255,255,255,0.08) !important;
}

.lfm_menu_bar .navbar-nav .lfm_tab_opened > .nav-link{
  color:#ffd27f !important;
  background-color: rgba(255,255,255,0.08) !important;
}

.lfm_menu_bar .navbar-nav .nav-link:hover{
  background-color: var(--sr-panel, rgba(255,255,255,0.08)) !important;
  color:#fff !important;
}

/* DROPDOWN MENU – dark theme */
.lfm_menu_bar .dropdown-menu{
  background-color: #0b1220 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,0.6);
}

/* Dropdown links */
.lfm_menu_bar .dropdown-menu .dropdown-item,
.lfm_menu_bar .dropdown-menu a{
  color: rgba(255,255,255,0.85) !important;
  background: transparent !important;
}

/* Hover / active state */
.lfm_menu_bar .dropdown-menu .dropdown-item:hover,
.lfm_menu_bar .dropdown-menu a:hover{
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
}

/* Active (current page) item */
.lfm_menu_bar .dropdown-menu .active,
.lfm_menu_bar .dropdown-menu .active a{
  color: #ffd27f !important;
  background: rgba(255,255,255,0.10) !important;
}

/* 1) Page canvas */
html, body{
  background:#0b1220 !important;
  min-height:100%;
}

/* 2) Theme wrappers that usually paint white */
#page, #wrapper, #content, #main, #container,
.container, .content, .wrapper, .main, .page,
.lfm_content, .lfm_page, .lfm_body, .lfm_main{
  background: transparent !important;
}

/* 3) Common “white box” blocks */
.card, .panel, .well, .widget, .box{
  background: rgba(15,23,42,0.92) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Headings stay brighter */
h1, h2, h3, h4, h5{
  color: #f1f5f9;
}

/* Muted / secondary text */
small, .text-muted, .muted{
  color: rgba(207,214,228,0.65);
}

/* Paragraphs */
p, li, td, span{
  color: #cfd6e4;
}

/* ==========================
   DARK FORM ELEMENTS (GLOBAL)
   ========================== */

/* Inputs & textareas */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea,
select {
  background: rgba(11,18,32,0.95) !important;
  color: #cfd6e4 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
}

/* Placeholder text */
input::placeholder,
textarea::placeholder {
  color: rgba(207,214,228,0.55);
}

/* Focus state */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #ffb24a !important;
  box-shadow: 0 0 0 2px rgba(255,178,74,0.25);
}

/* ==========================
   STEP / SECTION HEADERS
   ========================== */
.step,
.step-title,
.step-header,
.section-title {
  background: rgba(11,18,32,0.98) !important;
  color: #f1f5f9 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

div[style*="background:#fff"],
div[style*="background: white"] {
  background: rgba(11,18,32,0.98) !important;
  color: #f1f5f9 !important;
}

/* Better typography inside the card */
.sr-bpop-card .sr-bpop-body{
  line-height: 1.55;
}

/* Turn the two UL columns into clean “feature” lists */
.sr-bpop-card .sr-bpop-body ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.sr-bpop-card .sr-bpop-body li{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: rgba(207,214,228,0.92);
}

.sr-bpop-card .sr-bpop-body li:last-child{
  border-bottom: 0;
}

.sr-bpop-card .sr-bpop-body li strong{
  color: #f1f5f9;
  font-weight: 800;
}

/* Value part slightly muted */
.sr-bpop-card .sr-bpop-body li strong + *{
  color: rgba(207,214,228,0.85);
}

/* Make the CTA area feel intentional */
.sr-bpop-card .sr-bpop-body .sr-cta,
.sr-bpop-card .sr-bpop-body .sr-pay,
.sr-bpop-card .sr-bpop-body .sr-cta-wrap{
  margin-top: 22px;
  display: flex;
  justify-content: center;
}

/* Title + price alignment */
.sr-bpop-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  width:100%;
}
.sr-price{
  font-size:14px;
  font-weight:800;
  color: rgba(207,214,228,0.8);
  white-space:nowrap;
}

/* Description */
.sr-desc{
  margin:0 0 18px;
  color: rgba(207,214,228,0.8);
}

/* Specs grid */
.sr-specs{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

/* Each spec “pill” */
.sr-spec{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.18);
  border-radius: 12px;
}

.sr-spec span{
  color: rgba(207,214,228,0.85);
  font-weight:700;
}

.sr-spec strong{
  color:#f1f5f9;
  font-weight:900;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
}

/* CTA area */
.sr-cta-wrap{
  margin-top: 22px;
  display:flex;
  justify-content:center;
}

/* Mobile */
@media (max-width: 760px){
  .sr-specs{ grid-template-columns: 1fr; }
}

.sr-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 14px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.12));
  border: 1px solid rgba(255,255,255,0.05);
}

.sr-row span{
  font-weight:700;
  color: rgba(207,214,228,0.75);
}

.sr-row b{
  font-weight:900;
  color:#f8fafc;
}

.sr-link{
  color:#8bd3ff;
  text-decoration:none;
}
.sr-link:hover{
  text-decoration:underline;
}

.sr-refcard{
  max-width: 980px;
  margin: 22px auto;
  padding: 18px 18px 20px;
  background: linear-gradient(180deg,#0e1629,#0a1020);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

.sr-refhead{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sr-refphoto{
  width:68px;
  height:68px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

.sr-refname{
  font-size:18px;
  font-weight:900;
  letter-spacing:0.2px;
}

.sr-refmeta{
  max-width: 760px;
  margin: 0 auto;
  display:grid;
  gap: 8px; /* was larger */
}

.sr-source{
  margin-top: 14px;
  text-align:center;
  font-size:13px;
  color: rgba(207,214,228,0.7);
}

.sr-source a{
  color:#7dd3fc;
  font-weight:600;
}
.sr-source a:hover{ text-decoration:underline; }

.sr-refactions{
  margin-top: 18px;
  display:flex;
  justify-content:center;
  gap:14px;
}

.sr-refactions input[type="submit"]{
  min-width: 210px;
  padding: 12px 18px;
  border-radius: 16px;
  font-size:14px;
  letter-spacing:.3px;
}

.sr-refcard:hover{
  box-shadow:
    0 14px 40px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,178,74,0.08);
}



/* ================================
   COMPACT REFERRAL CARD MODE
   ================================ */

/* Overall card */
.sr-refcard{
  max-width: 860px;          /* was 980px */
  margin: 14px auto;
  padding: 12px 14px 14px;   /* tighter padding */
  border-radius: 16px;       /* slightly smaller corners */
}

/* Header */
.sr-refhead{
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

/* Avatar */
.sr-refphoto{
  width:52px;
  height:52px;
  border-radius: 50%;
}

/* Name */
.sr-refname{
  font-size:15px;
  font-weight:800;
}

/* Meta container */
.sr-refmeta{
  max-width: 680px;          /* tighter content width */
  gap: 6px;
}

/* Rows */
.sr-row{
  padding: 8px 12px;         /* smaller row height */
  border-radius: 10px;
  font-size: 13px;
}

/* Labels */
.sr-row span{
  font-size: 13px;
  font-weight:600;
}

/* Values */
.sr-row b{
  font-size: 13px;
  font-weight:800;
}

/* Source info */
.sr-source{
  margin-top: 10px;
  font-size: 12px;
}

/* Buttons container */
.sr-refactions{
  margin-top: 12px;
  gap: 10px;
}

/* Buttons */
.sr-refactions input[type="submit"]{
  min-width: 160px;
  padding: 8px 12px;
  font-size:12px;
  border-radius: 12px;
}

/* =========================
   GLOBAL FORM / WHITE BOX FIX
   (referral_transfer.php etc.)
   ========================= */

/* Any leftover “white panel” containers */
table, .table, .panel, .well, .card, .box, .content-box, .container .panel,
form{
  color: #cfd6e4;
}

/* Make common light form wrappers dark */
table[bgcolor],
td[bgcolor],
div[style*="background"],
div[style*="background-color"],
td[style*="background"],
td[style*="background-color"]{
  background-color: transparent !important;
}

/* Inputs / selects / textareas (dark) */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="password"],
select,
textarea{
  background: rgba(11,18,32,0.95) !important;
  color: #cfd6e4 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.55);
  padding: 10px 12px;
}

/* Placeholder */
input::placeholder, textarea::placeholder{
  color: rgba(207,214,228,0.55);
}

/* Focus glow */
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: #ffb24a !important;
  box-shadow: 0 0 0 2px rgba(255,178,74,0.25);
}

/* Buttons (match Sunrise) */
input[type="submit"], button{
  background: linear-gradient(135deg,#ffd27f,#ff8c42) !important;
  color: #0b1220 !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 10px 16px !important;
  font-weight: 900 !important;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(255,140,66,0.18);
}

input[type="submit"]:hover, button:hover{
  filter: brightness(1.05);
}

/* If that white box is a TABLE (very likely on old scripts) */
table{
  background: rgba(15,23,42,0.92) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 18px;
}

/* Make table cells match */
td{
  background: transparent !important;
}

/* ===============================
   GLOBAL TABLE MODERNIZATION
   =============================== */

/* Table wrapper */
table{
  width:100%;
  border-collapse: separate !important;
  border-spacing: 0;
  background: linear-gradient(180deg,#0f172a,#0b1220);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
  color: #cfd6e4;
}

/* Table headers */
th{
  background: rgba(255,255,255,0.04);
  color: #f1f5f9;
  font-weight: 800;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: left;
}

/* Table cells */
td{
  padding: 14px 16px;
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* Last row cleanup */
tr:last-child td{
  border-bottom: 0;
}

/* Zebra striping (subtle) */
tr:nth-child(even) td{
  background: rgba(255,255,255,0.02);
}

/* Hover effect */
tr:hover td{
  background: rgba(255,178,74,0.08);
}

/* Rounded corners fix */
table tr:first-child th:first-child{
  border-top-left-radius: 18px;
}
table tr:first-child th:last-child{
  border-top-right-radius: 18px;
}
table tr:last-child td:first-child{
  border-bottom-left-radius: 18px;
}
table tr:last-child td:last-child{
  border-bottom-right-radius: 18px;
}

th[colspan]{
  text-align:center;
  font-size:15px;
  letter-spacing:.3px;
  background: linear-gradient(135deg,rgba(255,210,127,0.15),rgba(255,140,66,0.15));
  color:#ffd27f;
}

/* ===============================
   STEP BARS / SECTION DIVIDERS
   (fix white "Step 2/3" rows)
   =============================== */

/* If those bars are table cells with a white bg */
td[bgcolor="#ffffff"],
td[bgcolor="white"],
td[style*="background:#fff"],
td[style*="background: #fff"],
td[style*="background-color:#fff"],
td[style*="background-color: #fff"],
div[style*="background:#fff"],
div[style*="background: #fff"],
div[style*="background-color:#fff"],
div[style*="background-color: #fff"]{
  background: linear-gradient(135deg, rgba(255,210,127,0.14), rgba(255,140,66,0.12)) !important;
  color: #ffd27f !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Make the "Step ..." text readable + centered */
td[bgcolor="#ffffff"],
td[bgcolor="white"],
td[style*="background:#fff"],
td[style*="background-color:#fff"]{
  text-align: center !important;
  font-weight: 900 !important;
  letter-spacing: .2px;
  padding: 14px 16px !important;
}

/* Rounded ends for the bar (works when it's inside a table) */
table tr td[bgcolor="#ffffff"]:first-child,
table tr td[style*="background:#fff"]:first-child{
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
table tr td[bgcolor="#ffffff"]:last-child,
table tr td[style*="background:#fff"]:last-child{
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

a[href*="tweet"],
input[value*="Tweet"],
button{
  background: linear-gradient(135deg,#ffd27f,#ff8c42) !important;
  color:#0b1220 !important;
  border:0 !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
}

/* =========================================
   FORCE DARK “STEP” BARS (old table layouts)
   ========================================= */

/* 1) Cells/rows using old bgcolor attributes */
table tr[bgcolor],
table td[bgcolor],
table th[bgcolor],
table tr[bgcolor="#fff"],
table tr[bgcolor="#ffffff"],
table td[bgcolor="#fff"],
table td[bgcolor="#ffffff"],
table th[bgcolor="#fff"],
table th[bgcolor="#ffffff"],
table tr[bgcolor="white"],
table td[bgcolor="white"],
table th[bgcolor="white"]{
  background: linear-gradient(135deg, rgba(255,210,127,0.16), rgba(255,140,66,0.14)) !important;
  color: #ffd27f !important;
  font-weight: 900 !important;
  text-align: center !important;
  letter-spacing: .25px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* 2) Anything with inline white background styles */
table td[style*="background:#fff"],
table td[style*="background: #fff"],
table td[style*="background-color:#fff"],
table td[style*="background-color: #fff"],
table td[style*="background:white"],
table td[style*="background: white"],
table td[style*="background-color:white"],
table td[style*="background-color: white"],
table th[style*="background:#fff"],
table th[style*="background-color:#fff"],
table th[style*="background:white"],
table th[style*="background-color:white"],
div[style*="background:#fff"],
div[style*="background-color:#fff"],
div[style*="background:white"],
div[style*="background-color:white"]{
  background: linear-gradient(135deg, rgba(255,210,127,0.16), rgba(255,140,66,0.14)) !important;
  color: #ffd27f !important;
  font-weight: 900 !important;
  text-align: center !important;
  letter-spacing: .25px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* 3) Make the text inside those bars readable */
table tr[bgcolor] *,
table td[bgcolor] *,
table th[bgcolor] *,
table td[style*="background"] *,
table th[style*="background"] *,
div[style*="background"] *{
  color: #ffd27f !important;
}

/* 4) Add padding + rounded corners to the bar cell */
table td[bgcolor],
table th[bgcolor],
table td[style*="background"],
table th[style*="background"]{
  padding: 14px 16px !important;
  border-radius: 16px !important;
}

/* Kill stubborn white separator lines */
hr{
  border: 0 !important;
  height: 1px !important;
  background: rgba(255,255,255,0.10) !important;
}

/* ==============================
   FIX Bootstrap bg-light step bars
   ============================== */

.bg-light{
  background: linear-gradient(135deg, rgba(255,210,127,0.16), rgba(255,140,66,0.14)) !important;
  color: #ffd27f !important;
}

.bg-light td,
.bg-light th,
.bg-light td *,
.bg-light th *{
  color: #ffd27f !important;
  font-weight: 900 !important;
  letter-spacing: .25px;
}

/* Make it look like a rounded banner */
tr.bg-light > td,
tr.bg-light > th{
  padding: 14px 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background-clip: padding-box;
}

/* Center text (already, but enforce) */
tr.bg-light .text-center{
  text-align: center !important;
}

/* Fix blue links inside Step bars */
tr.bg-light a,
tr.bg-light a:visited,
tr.bg-light a:hover,
tr.bg-light a:active{
  color: #ffd27f !important;     /* gold */
  text-decoration: none !important;
  font-weight: 900;
}

/* Optional hover effect */
tr.bg-light a:hover{
  text-decoration: underline;
}

/* =====================================
   FORCE LINK COLOR IN STEP BARS (FINAL)
   ===================================== */

/* Absolute override for ANY link inside bg-light rows */
tr.bg-light a,
tr.bg-light a *,
tr.bg-light td a,
tr.bg-light td a *{
  color: #ffd27f !important;
}

/* Kill Bootstrap primary/link colors */
tr.bg-light a.text-primary,
tr.bg-light a.text-info,
tr.bg-light a.text-success,
tr.bg-light a.text-warning,
tr.bg-light a.text-danger{
  color: #ffd27f !important;
}

/* Prevent hover reverting to blue */
tr.bg-light a:hover,
tr.bg-light a:focus,
tr.bg-light a:active,
tr.bg-light a:visited{
  color: #ffd27f !important;
  text-decoration: underline;
}
tr.bg-light a[style]{
  color: #ffd27f !important;
}

/* =====================================
   Fix blue links in those step tables
   ===================================== */

/* Any link inside the step tables */
table.table a,
table.table-bordered a,
table.table-hover a,
table.table-striped a,
table.table-sm a{
  color: #cfd6e4 !important;
  text-decoration: none !important;
  font-weight: 800;
}

table.table a:hover,
table.table-bordered a:hover,
table.table-hover a:hover,
table.table-striped a:hover,
table.table-sm a:hover{
  color: #cfd6e4 !important;
  text-decoration: underline !important;
}

/* Also catch that exact pattern you showed */
td.text-center a,
td.text-center a:visited,
td.text-center a:hover,
td.text-center a:active{
  color: #cfd6e4 !important;
}

/* Affiliate link under "Your Affiliate Link" */
a[href*="sunrisete.net/?rid="],
a[href*="/?rid="]{
  color: #ffd27f !important;      /* gold */
  font-weight: 800;
  text-decoration: none;
}
a[href*="sunrisete.net/?rid="]:hover,
a[href*="/?rid="]:hover{
  text-decoration: underline;
}

/* Gold button = dark text (correct contrast) */
a[href*="tweet"],
a[href*="twitter"],
input[value*="Tweet"],
button{
  color: #0b1220 !important;   /* dark charcoal */
  font-weight: 900 !important;
}


/* Ensure hover/focus stays readable */
a[href*="twitter"]:hover,
a[href*="tweet"]:hover,
button:hover,
input[value*="Tweet"]:hover{
  color: #1e293b !important;
}
a[href*="tweet"]{
  letter-spacing: .3px;
}

/* =========================================
   FORCE “Send Tweet” button text to be dark
   ========================================= */

/* Most likely: it's a Bootstrap .btn link */
a.btn,
a.btn span,
a.btn strong{
  color: #0b1220 !important;
}

/* If it uses button color variants */
a.btn-primary,
a.btn-info,
a.btn-success,
a.btn-warning,
a.btn-danger,
a.btn-primary *,
a.btn-info *,
a.btn-success *,
a.btn-warning *,
a.btn-danger *{
  color: #0b1220 !important;
}

/* If it’s specifically a Tweet/Twitter link */
a[href*="tweet"],
a[href*="twitter"],
a[href*="intent/tweet"],
a[href*="tweet"] *,
a[href*="twitter"] *,
a[href*="intent/tweet"] *{
  color: #0b1220 !important;
}
td a.btn,
td a.btn *{
  color:#0b1220 !important;
}

/* =====================================
   COMPACT PROFILE / ACCOUNT FORMS
   ===================================== */

/* Target the profile edit table/card */
table,
table td,
table th{
  font-size: 14px !important;
}

/* Shrink table rows */
table tr td{
  padding: 10px 14px !important;
}

/* Labels on the left */
table td:first-child{
  font-weight: 700;
  color: rgba(207,214,228,0.8);
  width: 32%;
}

/* Inputs: smaller & tighter */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select{
  height: 38px !important;
  padding: 6px 10px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
}

/* Textareas */
textarea{
  min-height: 80px !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
}

/* Reduce vertical spacing between rows */
table tr{
  line-height: 1.2;
}

/* Buttons smaller */
input[type="submit"],
button{
  padding: 8px 14px !important;
  font-size: 13px !important;
  border-radius: 12px !important;
}

/* Reduce card height */
table{
  max-width: 900px;
  margin: 16px auto;
}
table td:first-child{
  padding-right: 8px !important;
}

/* Divider */
hr{
  border: none;
  height: 1px;
  background: rgba(255,255,255,0.08);
  width: 100%;
  margin: 14px 0;
}

/* Main purchase card */
.completepurchase{
  max-width: 460px;          /* slightly smaller */
  width: 100%;
  margin: 16px auto;
  padding: 14px 16px;

  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;

  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

/* Deposit wrapper */
.depositoptionouter{
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

/* Deposit inner card */
.depositoptioninner{
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  padding: 14px 16px;

  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}

/* ================================
   COMPACT ADD MONEY BOXES
   ================================ */

/* Reduce card width */
.completepurchase,
.depositoptioninner{
  max-width: 440px !important;   /* was ~520 */
  padding: 12px 14px !important;
}

/* Tighten headings */
.completepurchase h2,
.completepurchase h3,
.depositoptioninner h2,
.depositoptioninner h3{
  font-size: 17px !important;
  margin-bottom: 6px !important;
}

/* Paragraph spacing */
.completepurchase p,
.depositoptioninner p{
  margin: 6px 0 !important;
  line-height: 1.45 !important;
  font-size: 14px !important;
}

/* Labels */
.completepurchase label,
.depositoptioninner label{
  margin-bottom: 2px !important;
  display: block;
  font-size: 13px !important;
}

/* Inputs (shorter height) */
.completepurchase input[type="text"],
.completepurchase input[type="number"],
.depositoptioninner input[type="text"],
.depositoptioninner input[type="number"]{
  height: 34px !important;
  padding: 5px 9px !important;
  font-size: 14px !important;
}

/* Buttons (less tall) */
.completepurchase input[type="submit"],
.depositoptioninner input[type="submit"],
.completepurchase button,
.depositoptioninner button{
  padding: 8px 12px !important;
  font-size: 14px !important;
  border-radius: 12px !important;
}

/* Reduce vertical gaps between sections */
.completepurchase br,
.depositoptioninner br{
  display: none !important;
}

/* Make amounts look inline instead of stacked */
.completepurchase .amount,
.depositoptioninner .amount{
  margin-top: 4px !important;
}

/* =====================================
   ADD FUNDS: 2-column layout on desktop
   ===================================== */

/* Parent wrapper becomes a grid */
.depositoptionouter{
  max-width: 980px !important;
  margin: 18px auto !important;
  padding: 0 18px !important;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

/* Cards fill the grid cells */
.depositoptionouter .completepurchase,
.depositoptionouter .depositoptioninner{
  max-width: none !important;   /* let grid control width */
  width: 100% !important;
  margin: 0 !important;
}

/* Stack to 1 column on tablet/mobile */
@media (max-width: 900px){
  .depositoptionouter{
    grid-template-columns: 1fr;
  }
}
/* =====================================
   Add-money icons
   ===================================== */

.sr-pay-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 0 0 10px !important;
}

/* Icon base */
.sr-pay-title::before{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 18px;
  line-height: 1;
}

/* Specific icons */
.sr-pay-transfer .sr-pay-title::before{ content: "🔄"; }
.sr-pay-cwallet  .sr-pay-title::before{ content: "💳"; }
.sr-pay-addfunds .sr-pay-title::before{ content: "💰"; } /* use if you have a generic “Add Funds” card */
/* =====================================
   Center Transfer From Commissions card
   ===================================== */

.sr-transfer-center{
  grid-column: 1 / -1;        /* span full width of grid */
  justify-self: center;       /* center inside grid */
  max-width: 520px;           /* keep it compact */
}

/* On mobile keep it normal */
@media (max-width: 900px){
  .sr-transfer-center{
    grid-column: auto;
    max-width: 100%;
  }
}
/* Fix tight min/max amount text */
.depositoptioninner small,
.depositoptioninner .minmax,
.depositoptioninner .amount-info{
  display: block;
  margin-top: 6px;
  line-height: 1.4;
  color: rgba(207,214,228,0.75);
}

/* If min/max text is plain text nodes */
.depositoptioninner{
  word-break: break-word;
}

/* Space between input rows */
.depositoptioninner .deposit-row,
.depositoptioninner p{
  margin-bottom: 8px;
}

/* =====================================
   Claim page buttons ONLY (scoped)
   ===================================== */

/* Scope ONLY inside the claim content */
table[align="center"] a[href*="surf"],
table[align="center"] a[href*="Surf"],
table[align="center"] a[href*="claim"]{
  display: inline-block;
  margin: 10px 0 6px;
  padding: 10px 16px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .2px;
  text-decoration: none !important;

  background: linear-gradient(135deg,#ffd27f,#ff8c42);
  color: #0b1220 !important;
  box-shadow: 0 12px 30px rgba(255,140,66,0.18);
}

/* Hover */
table[align="center"] a[href*="surf"]:hover,
table[align="center"] a[href*="claim"]:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
/* Claim card only */
table[align="center"]{
  max-width: 980px !important;
  width: calc(100% - 36px) !important;
  margin: 24px auto !important;
  padding: 18px 18px 22px !important;

  background: linear-gradient(180deg, rgba(15,23,42,0.92), rgba(11,18,32,0.92)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45) !important;

  color: #cfd6e4 !important;
}

/* =========================================
   FORCE override OLD <font color=""> tags
   (Daily Active Surfer Rewards page)
   ========================================= */

/* Kill ALL hard-coded font colors inside claim table */
table font,
table font[color]{
  color: #e5e7eb !important; /* silver */
  font-weight: 800;
}

/* Also fix links wrapped inside font tags */
table font a,
table font a:visited,
table font a:hover{
  color: #e5e7eb !important;
  text-decoration: none;
}
table font a:hover{
  text-decoration: underline;
}

/* =====================================
   POD INFO PAGE – modern, compact
   ===================================== */

font[face="Verdana"][size="3"]{
  font-size: 14px !important;
  color:#cfd6e4 !important;
}
font[face="Verdana"][size="3"] b{
  display:block;
  font-size: 18px !important;
  font-weight: 900;
  color:#f1f5f9;
}
font[face="Verdana"][size="3"] p{
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(207,214,228,0.85);
}
/* =====================================
   TrafficPods tabs (Info / Current / Next / My Site)
   ===================================== */

/* The tab bar container (common legacy tab markup) */
.nav-tabs,
ul.nav-tabs,
#tabs,
.tabs,
.tabnav{
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

/* Each tab item */
.nav-tabs > li > a,
ul.nav-tabs > li > a,
.tabs a,
.tabnav a{
  background: rgba(255,255,255,0.06) !important;
  color: rgba(207,214,228,0.85) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-bottom: 0 !important;

  padding: 8px 12px !important;
  margin-right: 6px !important;
  border-radius: 12px 12px 0 0 !important;

  font-weight: 800 !important;
  text-decoration: none !important;
}

/* Hover */
.nav-tabs > li > a:hover,
ul.nav-tabs > li > a:hover,
.tabs a:hover,
.tabnav a:hover{
  background: rgba(255,140,66,0.10) !important;
  color: #f1f5f9 !important;
}

/* Active tab */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
ul.nav-tabs > li.active > a,
ul.nav-tabs > li.active > a:hover{
  background: linear-gradient(135deg, rgba(255,210,127,0.18), rgba(255,140,66,0.12)) !important;
  color: #ffd27f !important;
  border-color: rgba(255,255,255,0.14) !important;
}

/* The panel under the tabs */
.tab-content,
#tabs_content,
.tabscontent{
  background: linear-gradient(180deg, rgba(15,23,42,0.88), rgba(11,18,32,0.92)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 18px 18px 18px !important;
  padding: 16px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45) !important;
}

/* =====================================
   FIX fixed-width legacy center tables
   ===================================== */

/* Force legacy centered tables to expand */
center > table,
center table[width],
center table td[width]{
  width: 100% !important;
  max-width: 1100px;        /* controls how wide it gets */
}

/* Center the table nicely */
center > table{
  margin: 0 auto;
}

/* Let content breathe */
center > table td{
  padding: 12px 16px;
}
center > table{
  background: linear-gradient(180deg,#0f172a,#0b1220);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 20px 55px rgba(0,0,0,0.45);
}

/* =====================================
   TrafficPods responsive layout
   ===================================== */

.sr-pods-wrap{
  width: calc(100% - 36px);
  max-width: 1100px;
  margin: 0 auto;
}

.sr-pods-panel{
  width: calc(100% - 36px);
  max-width: 1100px;
  margin: 0 auto 18px;

  padding: 14px 16px;

  background: linear-gradient(180deg, rgba(15,23,42,0.92), rgba(11,18,32,0.92));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  color: #cfd6e4;
}

/* Tabs bar */
#podstabs.shadetabs{
  width: calc(100% - 36px);
  max-width: 1100px;
  margin: 18px auto 10px;
}

/* Info content table */
.sr-pods-info{
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* Kill old hard <font> colors inside this section */
.sr-pods-panel font,
.sr-pods-panel font[color]{
  color: inherit !important;
}

/* =========================================
   LOGIN SPOTLIGHT page styling
   ========================================= */

.sr-spotlight-wrap{
  max-width: 1100px;
  width: calc(100% - 36px);
  margin: 22px auto;
}

.sr-spotlight-card{
  padding: 18px 18px 22px;
  background: linear-gradient(180deg, rgba(15,23,42,0.92), rgba(11,18,32,0.92));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  color: #cfd6e4;
}

/* Kill legacy center + fixed widths inside the card */
.sr-spotlight-card center{ display:block; }
.sr-spotlight-card table{
  width: 100% !important;
  max-width: 100% !important;
}

/* Headings */
.sr-spotlight-card font[face="Tahoma"][size="4"] b{
  color: #f1f5f9 !important;
  font-weight: 900;
}
.sr-spotlight-card h3,
.sr-spotlight-card b{
  color: #f1f5f9;
}

/* Inputs */
.sr-spotlight-card input[type="text"]{
  background: rgba(11,18,32,0.9);
  color: #cfd6e4;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 8px 10px;
  height: 38px;
  outline: none;
}

/* Buttons (Edit / etc.) */
.sr-spotlight-card input[type="submit"],
.sr-spotlight-card button{
  background: linear-gradient(135deg,#ffd27f,#ff8c42);
  color: #0b1220 !important;
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(255,140,66,0.18);
}

/* Links */
.sr-spotlight-card a{
  color:#7dd3fc;
  text-decoration:none;
}
.sr-spotlight-card a:hover{
  text-decoration: underline;
}

/* My Spotlight table */
.sr-spotlight-card table[border="0"][cellpadding="2"][cellspacing="2"]{
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Force header row dark even if inline bgcolor exists */
.sr-spotlight-card tr[bgcolor="#000000"] th{
  background: rgba(255,255,255,0.05) !important;
  color: #ffd27f !important;
  font-weight: 900;
  padding: 12px 12px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Body rows (overrides bgcolor="#F8F8F8") */
.sr-spotlight-card tr[bgcolor="#F8F8F8"] td{
  background: rgba(255,255,255,0.03) !important;
  color: #cfd6e4 !important;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sr-spotlight-card tr[bgcolor="#F8F8F8"]:nth-child(even) td{
  background: rgba(255,255,255,0.02) !important;
}
/* Fix spotlight description box */
.sr-spotlight-card table[width="500"],
.sr-spotlight-card table[width="482"]{
  background: rgba(15,23,42,0.92) !important;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 14px;
}

/* Force readable text */
.sr-spotlight-card table[width="500"] font,
.sr-spotlight-card table[width="482"] font,
.sr-spotlight-card table[width="500"] p,
.sr-spotlight-card table[width="482"] p{
  color: #cfd6e4 !important;
  line-height: 1.6;
}

/* Highlight keywords instead of markdown **red/green** */
.sr-spotlight-card font[color="red"]{
  color: #ef4444 !important;
  font-weight: 800;
}
.sr-spotlight-card font[color="green"]{
  color: #22c55e !important;
  font-weight: 800;
}
/* Calendar containers */
.sr-spotlight-card table.calendar,
.sr-spotlight-card table[id*="calendar"],
.sr-spotlight-card td[valign="top"] table{
  background: rgba(11,18,32,0.95) !important;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 12px;
}

/* Calendar headers (month name) */
.sr-spotlight-card th,
.sr-spotlight-card .calendar th{
  color: #f1f5f9 !important;
  font-weight: 900;
}

/* Weekday labels */
.sr-spotlight-card td b{
  color: #94a3b8;
}

/* Available dates (green) */
.sr-spotlight-card a{
  color: #22c55e !important;
  font-weight: 800;
}

/* Booked dates */
.sr-spotlight-card .booked,
.sr-spotlight-card .booked font{
  color: #ef4444 !important;
  font-weight: 800;
}

/* Expired dates */
.sr-spotlight-card .expired,
.sr-spotlight-card .expired font{
  color: #64748b !important;
}
/* =========================================
   SPOTLIGHT: kill remaining white panels
   ========================================= */

/* =========================================
   SPOTLIGHT ONLY (won’t affect footer/menu)
   ========================================= */

/* Target only the spotlight main wrapper */
.sr-spotlight-wrap .sr-spotlight-card{
  color: #cfd6e4;
}

/* Do NOT touch theme footer even if nested */
.sr-spotlight-wrap .lfm_footer,
.sr-spotlight-wrap footer,
.sr-spotlight-wrap #footer{
  color: inherit !important;
  background: inherit !important;
}

/* Kill remaining white panels INSIDE spotlight card only */
.sr-spotlight-wrap .sr-spotlight-card [style*="background: white"],
.sr-spotlight-wrap .sr-spotlight-card [style*="background-color: white"],
.sr-spotlight-wrap .sr-spotlight-card [style*="background:#fff"],
.sr-spotlight-wrap .sr-spotlight-card [style*="background: #fff"],
.sr-spotlight-wrap .sr-spotlight-card [style*="background-color:#fff"],
.sr-spotlight-wrap .sr-spotlight-card [style*="background-color: #fff"],
.sr-spotlight-wrap .sr-spotlight-card [style*="background:#ffffff"],
.sr-spotlight-wrap .sr-spotlight-card [style*="background: #ffffff"],
.sr-spotlight-wrap .sr-spotlight-card [style*="background-color:#ffffff"],
.sr-spotlight-wrap .sr-spotlight-card [style*="background-color: #ffffff"],
.sr-spotlight-wrap .sr-spotlight-card table[bgcolor],
.sr-spotlight-wrap .sr-spotlight-card td[bgcolor]{
  background: linear-gradient(180deg, rgba(15,23,42,0.92), rgba(11,18,32,0.92)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
}

/* Make text readable INSIDE spotlight only */
.sr-spotlight-wrap .sr-spotlight-card font,
.sr-spotlight-wrap .sr-spotlight-card p,
.sr-spotlight-wrap .sr-spotlight-card td,
.sr-spotlight-wrap .sr-spotlight-card div{
  color: #cfd6e4 !important;
}

/* Headings brighter */
.sr-spotlight-wrap .sr-spotlight-card b,
.sr-spotlight-wrap .sr-spotlight-card strong{
  color: #f1f5f9 !important;
}
/* =========================================
   SPOTLIGHT: kill remaining white panels
   ========================================= */

/* Anything inside spotlight that is white/light -> force dark */
.sr-spotlight-card table,
.sr-spotlight-card td,
.sr-spotlight-card div{
  background-color: transparent !important;
}

/* Specifically catch common white colors */
.sr-spotlight-card [style*="background: white"],
.sr-spotlight-card [style*="background-color: white"],
.sr-spotlight-card [style*="background:#fff"],
.sr-spotlight-card [style*="background: #fff"],
.sr-spotlight-card [style*="background-color:#fff"],
.sr-spotlight-card [style*="background-color: #fff"],
.sr-spotlight-card [style*="background:#ffffff"],
.sr-spotlight-card [style*="background: #ffffff"],
.sr-spotlight-card [style*="background-color:#ffffff"],
.sr-spotlight-card [style*="background-color: #ffffff"]{
  background: linear-gradient(180deg, rgba(15,23,42,0.92), rgba(11,18,32,0.92)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
}

/* Force all text readable (kills “light text on white”) */
.sr-spotlight-card,
.sr-spotlight-card *{
  color: #cfd6e4 !important;
}

/* Headings a bit brighter */
.sr-spotlight-card b,
.sr-spotlight-card strong{
  color: #f1f5f9 !important;
}

/* =========================================
   BUY CREDITS page
   ========================================= */

.sr-buy-card{
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
.sr-buy-card{
  padding: 18px 18px 22px;
  background: linear-gradient(180deg, rgba(15,23,42,0.92), rgba(11,18,32,0.92));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  color: #cfd6e4;
}

/* kill old <center> spacing inside card */
.sr-buy-card center{ display:block; }
.sr-buy-card hr{
  border: none;
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 18px 0;
}

/* Make legacy fixed tables responsive */
.sr-buy-card table[width="500"],
.sr-buy-card table[width=500]{
  width: 100% !important;
  max-width: 100% !important;
}

/* Headings */
.sr-buy-card h4,
.sr-buy-card font[face="Tahoma"][size="4"] b{
  color: #f1f5f9 !important;
  font-weight: 900;
}

/* Calendar containers (activecalendar.php output) */
.sr-buy-card table table{
  max-width: 100%;
  background: rgba(11,18,32,0.95) !important;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 12px;
}

/* Available date links */
.sr-buy-card a{
  color:#22c55e;
  font-weight: 800;
  text-decoration: none;
}
.sr-buy-card a:hover{ text-decoration: underline; }

/* --- PRODUCT LIST: turn those nested tables into cards + grid --- */

/* Outer “list” table becomes a simple block */
.sr-buy-card table[width="500"] > tbody > tr > td{
  display:block;
}

/* Each product is printed as its own <table> ... style them as cards */
.sr-buy-card table[width="500"] table{
  width: 100% !important;
  max-width: 520px;
  margin: 0 auto 14px !important;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  overflow: hidden;
}
.sr-buy-card table[width="500"] table td{
  padding: 12px 14px;
}

/* Title line */
.sr-buy-card table[width="500"] table tr:first-child td b{
  font-size: 18px;
  color: #ffd27f !important;
}

/* Description */
.sr-buy-card table[width="500"] table tr:last-child td{
  color: rgba(207,214,228,0.85) !important;
  line-height: 1.5;
}

/* Buttons inside show_button_code() */
.sr-buy-card input[type="submit"],
.sr-buy-card button,
.sr-buy-card .btn{
  background: linear-gradient(135deg,#ffd27f,#ff8c42) !important;
  color: #0b1220 !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-weight: 900 !important;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(255,140,66,0.18);
}

/* Desktop: show product cards 2-up */
@media (min-width: 1000px){
  .sr-buy-products{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 22px;
  }
}
  .sr-buy-card table[width="500"] table{
    max-width: 100%;
    margin: 0 !important;
  }
}
/* Center headings + legacy <center> blocks inside Buy Credits card */
.sr-buy-card,
.sr-buy-card center,
.sr-buy-card h4,
.sr-buy-card h3,
.sr-buy-card font{
  text-align: center !important;
}
.sr-buy-card td[align="left"]{ text-align:center !important; }
/* Calendar: force ALL text visible (kills random black days) */
.sr-buy-card .calendar,
.sr-buy-card .calendar * ,
.sr-buy-card table[id*="calendar"],
.sr-buy-card table[id*="calendar"] * ,
.sr-buy-card td[valign="top"] table,
.sr-buy-card td[valign="top"] table *{
  color: #cfd6e4 !important;
}

/* Available day links */
.sr-buy-card td[valign="top"] table a{
  color: #22c55e !important;
  font-weight: 900;
  text-decoration: none;
}
.sr-buy-card td[valign="top"] table a:hover{
  text-decoration: underline;
}

/* If calendar uses inline FONT colors */
.sr-buy-card font[color="black"]{ color:#cfd6e4 !important; }
.sr-buy-card font[color="#000000"]{ color:#cfd6e4 !important; }
.sr-buy-card font[color="blue"],
.sr-buy-card font[color="#0000FF"]{ color:#22c55e !important; }
/* Product cards (the nested tables you echo per product) */
.sr-buy-card table table{
  width: 100% !important;
  max-width: 560px;
  margin: 0 auto 16px !important;

  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  overflow: hidden;
}

.sr-buy-card table table td{
  padding: 12px 14px !important;
  text-align: center !important;
}

/* Product title */
.sr-buy-card table table tr:first-child td{
  font-size: 18px;
  font-weight: 900;
  color: #ffd27f !important;
}

/* Description */
.sr-buy-card table table tr:last-child td{
  color: rgba(207,214,228,0.85) !important;
  line-height: 1.5;
}

/* Buttons inside show_button_code() */
.sr-buy-card input[type="submit"],
.sr-buy-card button,
.sr-buy-card .btn{
  background: linear-gradient(135deg,#ffd27f,#ff8c42) !important;
  color: #0b1220 !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-weight: 900 !important;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(255,140,66,0.18);
}
/* Hide empty spacers that show_button_code may output */
.buycard hr,
.buycard br + br,
.buycard p:empty,
.buycard div:empty,
.buycard td:empty{
  display:none !important;
}

/* Also remove weird “blank bar” elements */
.buycard input[type="text"]:empty,
.buycard input[type="email"]:empty,
.buycard textarea:empty{
  display:none !important;
}
/* Kill empty spacer cells from legacy payment code */
td#nostyle {
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.buycard div:empty,
.buycard td:empty {
  display: none !important;
}

.sr-dash{max-width:1100px;margin:24px auto;padding:0 18px;color:#cfd6e4;font-family:Poppins,Arial,sans-serif}
.sr-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px}
@media(max-width:980px){.sr-pagehead{flex-direction:column;align-items:flex-start}}
.sr-h1{font-size:26px;font-weight:900;color:#f1f5f9}
.sr-sub{font-size:13px;opacity:.75;margin-top:4px}
.sr-user{display:flex;gap:10px;align-items:center}
.sr-avatar{width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.16);object-fit:cover}
.sr-name{font-weight:900;color:#f1f5f9}
.sr-meta{font-size:12px;opacity:.75}

.sr-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:12px}
@media(max-width:980px){.sr-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.sr-kpis{grid-template-columns:1fr}}
.sr-kpi{background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(11,18,32,.92));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;box-shadow:0 18px 45px rgba(0,0,0,.35)}
.sr-kpi-label{font-size:12px;opacity:.75}
.sr-kpi-value{font-size:24px;font-weight:900;color:#f1f5f9;margin-top:6px}
.sr-kpi-sub{font-size:12px;opacity:.7;margin-top:4px}

.sr-actionsbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.sr-btn{display:inline-block;padding:10px 14px;border-radius:12px;font-weight:900;text-decoration:none;background:linear-gradient(135deg,#ffd27f,#ff8c42);color:#0b1220 !important;box-shadow:0 12px 30px rgba(255,140,66,.18)}
.sr-btn:hover{filter:brightness(1.03)}
.sr-btn-ghost{background:rgba(255,255,255,.06);color:#f1f5f9 !important;border:1px solid rgba(255,255,255,.10);box-shadow:none}

.sr-grid2{display:grid;grid-template-columns:1.3fr .7fr;gap:14px;margin-bottom:14px}
@media(max-width:980px){.sr-grid2{grid-template-columns:1fr}}
.sr-card{background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(11,18,32,.92));border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px;box-shadow:0 20px 55px rgba(0,0,0,.38)}
.sr-card-tight{padding:14px 16px}
.sr-card-title{font-weight:900;color:#f1f5f9;margin-bottom:10px}

.sr-minirow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:520px){.sr-minirow{grid-template-columns:1fr}}
.sr-mini{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between}
.sr-mini span{font-size:12px;opacity:.75}
.sr-mini b{color:#f1f5f9}

.sr-divider{height:1px;background:rgba(255,255,255,.06);margin:12px 0}
.sr-rowline{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.sr-rowline:last-child{border-bottom:0}
.sr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
.sr-link{color:#cfd6e4 !important;text-decoration:none}
.sr-link:hover{color:#ffd27f !important;text-decoration:underline}

.sr-list{display:grid;gap:8px}
.sr-note{margin-top:12px;font-size:12px;opacity:.72;line-height:1.5}

.sr-partners{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sr-partners a{display:inline-block}
.sr-partners img{width:120px;height:42px;object-fit:contain;border-radius:12px;padding:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}

/* Dashboard Cross Promos */
.sr-promo-list{display:grid;gap:12px}
.sr-promo{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:12px;
}
.sr-promo-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.sr-promo-name{font-weight:900;color:#f1f5f9}
.sr-promo-meta{font-size:12px;opacity:.78;margin-top:2px;line-height:1.35}
.sr-promo-bar{
  margin:10px 0;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.06);
}
.sr-promo-barfill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(135deg,#ffd27f,#ff8c42);
}
.sr-promo-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.sr-promo-progress{font-size:13px;opacity:.85}

.sr-promos{ display:flex; flex-direction:column; gap:10px; }

.sr-promo{
  padding:14px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.sr-promo-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.sr-promo-title{
  font-weight:800;
  color:var(--title);
}

.sr-promo-meta{
  font-size:12px;
  color:var(--text2);
  margin-bottom:10px;
}

.sr-progress{
  background: rgba(255,255,255,.10);
}

.sr-progress-bar{
  background: linear-gradient(90deg, #ffd27f, #ffb35c);
  box-shadow: 0 0 10px rgba(255,179,92,.35);
}

.sr-promo-status{
  margin-top:8px;
  font-size:12px;
  color:var(--text2);
}

.sr-btn-sm{ padding:8px 12px; border-radius:12px; font-size:13px; }

.sr-promo:hover{
  border-color: rgba(255,179,92,.35);
}

.sr-promos-scroll{
  max-height:360px;
  overflow:auto;
  padding-right:6px;
}

.sr-actions a{
  min-width:120px;
  text-align:center;
  opacity:1 !important;
  filter:none !important;
}

a:hover{ filter:brightness(1.1); }

/* Partners row */
.sr-partners{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.sr-partner{
  display:inline-flex;
  align-items:center;
  padding:9px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(241,245,249,.92) !important;
  font-weight:800;
  font-size:13px;
  letter-spacing:.1px;
  transition:transform .15s ease, filter .15s ease;
}

.sr-partner:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
  text-decoration:none;
}



/* make the message tables inside $iconmessage behave */
.ic-right table{ width: 100% !important; }
.ic-right td{ padding: 6px 8px; vertical-align: top; }

@media (max-width: 720px){
  .ic-grid{ grid-template-columns: 1fr; }
}

/* Force DataTables not to stretch wider than layout */
#adstable,
#adstable_wrapper,
#adstable_wrapper .dataTables_scroll,
#adstable_wrapper .dataTables_scrollBody {
  width: 100% !important;
  max-width: 1000px;
  margin: 0 auto;
}

/* Kill the blue hover highlight */
#adstable.table-hover tbody tr:hover {
  background-color: transparent !important;
}

/* Remove pointer cursor */
#adstable td,
#adstable tr {
  cursor: default !important;
}

/* ===== FORCE COMPACT DATATABLES (override style.css !important) ===== */
table.dataTable td,
table.dataTable th,
table.dataTable tr td,
table.dataTable tr th{
  padding: 6px 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* stop the forced huge inline width (like 1824px) */
#widgetadstable,
#widgetadstable_wrapper{
  width: 90% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

/* remove blue hover highlight */
#widgetadstable.table-hover tbody tr:hover{
  background-color: transparent !important;
}

/* remove pointer cursor */
#widgetadstable td,
#widgetadstable tr{
  cursor: default !important;
}

/* Surfbar: business readability */
.surfbar, .surfbar *{
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
  letter-spacing: .2px;
}

/* Links look like modern nav */
.surfbar a{
  font-weight: 600;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
}

.surfbar a:hover{
  background: rgba(255,255,255,.08);
}
 
 /* ==========================================
   SUNRISE GOLD/BROWN – FORCE COLOR OVERRIDE
   (Overrides hard-coded navy/blue)
   ========================================== */

/* 1) PAGE BACKGROUND */
html, body{
  background:
    radial-gradient(1000px 520px at 35% 0%,
      rgba(214,167,86,0.14),
      transparent 60%),
    linear-gradient(180deg,#0c0b08,#14110b) !important;
}

/* 2) ALL DARK PANELS / CARDS */
.card,
.panel,
.well,
.widget,
.box,
.sr-card,
.sr-kpi,
.sr-refcard,
.sr-bpop-card,
.sr-buy-card,
.sr-spotlight-card,
.sr-promo,
.sr-mini,
.sr-partner,
table{
  background:
    linear-gradient(180deg,
      rgba(24,20,12,0.96),
      rgba(14,12,8,0.96)) !important;
  border-color: rgba(242,209,140,0.10) !important;
}

/* 3) REMOVE NAVY / BLUE GRADIENTS EVERYWHERE */
[class*="bg-"],
div,
section{
  background-color: transparent;
}

/* 4) HEADINGS → GOLD */
h1, h2, h3,
.lfm_title,
.sr-card-title,
.sr-promo-name{
  color: #d6a756 !important;
}

/* 5) PRIMARY TEXT */
p, li, td, span{
  color: rgba(241,245,249,0.90) !important;
}

/* 6) MUTED TEXT */
small,
.text-muted,
.sr-muted{
  color: rgba(241,245,249,0.65) !important;
}

/* 7) NAV BAR (REMOVE BLUE) */
.lfm_menu_bar{
  background: linear-gradient(180deg,#14110b,#0c0b08) !important;
}

/* Active tab */
.lfm_tab_opened > .nav-link{
  color: #f2d18c !important;
}

/* 8) PROGRESS / BARS */
.sr-progress-bar,
.sr-promo-barfill{
  background: linear-gradient(135deg,#f2d18c,#e7b35a) !important;
}

/* 9) LINKS (KILL BLUE) */
a{
  color: #cfd6e4 !important;
}
a:hover{
  color: #f2d18c !important;
}

/* 10) REMOVE ANY REMAINING BLUE SHADOWS */
*{
  box-shadow: none;
}

 /* ==========================================
   SUNRISE CITY BACKGROUND (DARK UI SAFE)
   ========================================== */

html, body{
  background:
    /* Dark overlay for readability */
    linear-gradient(
      rgba(11,18,32,0.88),
      rgba(11,18,32,0.92)
    ),
    /* Sunrise city image */
    url("/sunrise-city-gold.jpg")
      center top / cover
      no-repeat
      fixed !important;
}

/* Gold sunrise glow (top only) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(
      900px 420px at 50% 0%,
      rgba(255,210,127,0.22),
      transparent 60%
    );
  pointer-events:none;
  z-index:-1;
}

/* Ensure content floats above background */
#page, #wrapper, #content, #main,
.container, .lfm_content{
  background: transparent !important;
}

.card,
.panel,
.well,
.widget,
.sr-card,
.sr-kpi,
.sr-refcard,
.sr-bpop-card{
  background: rgba(15,23,42,0.94) !important;
  backdrop-filter: blur(2px);
}

/* ==========================================
   SUNRISE CITY BACKGROUND (NO OVERLAY)
   ========================================== */

html, body{
  background:
    url("/sunrise-city-gold.jpg")
      center top / cover
      no-repeat
      fixed !important;
}

/* REMOVE any previous overlay/glow */
body::before{
  content:none !important;
}

/* Make sure layout containers stay transparent */
#page, #wrapper, #content, #main,
.container, .lfm_content,
.lfm_page, .lfm_body, .lfm_main{
  background: transparent !important;
}

/* Top navigation readability */
.lfm_menu_bar{
  background: linear-gradient(
    180deg,
    rgba(8,12,18,0.92),
    rgba(8,12,18,0.85)
  ) !important;
  backdrop-filter: blur(4px);
}

/* ===== Surf page Sunrise accents (minimal) ===== */

/* GO button ring */
.surfbar .go,
.surfbar .go-ring{
  border-color:#d6a756 !important;
  color:#d6a756 !important;
}

/* Starting text */
.surfbar .status,
.surfbar .status a{
  color:#d6a756 !important;
  font-weight:700;
}

/* Avatar strip (anchor the page) */
.surfbar .topstrip,
.surfbar .members{
  background: linear-gradient(180deg,#0b1220,#0f172a) !important;
}

/* Hover only (don’t recolor everything) */
.surfbar a:hover{
  color:#d6a756 !important;
}

.site-footer{
  margin-top: 28px;
  border-top: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(800px 240px at 20% 0%, rgba(246,199,107,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65));
}

.footer-inner{
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: 26px 0 18px;

  display:grid;
  grid-template-columns: 1.2fr .9fr .9fr;
  gap: 22px;
}

.footer-brand .brand-row{
  display:flex;
  gap:12px;
  align-items:center;
}

.brand-avatar{
  width:46px;
  height:46px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}

.brand-name{
  font-weight:800;
  font-size:18px;
  letter-spacing:-0.01em;
  text-shadow:0 0 18px rgba(246,199,107,.18);
}

.brand-tag{
  font-size:13px;
  color:rgba(255,255,255,.68);
  max-width:46ch;
}

.brand-mini{
  margin-top:12px;
  font-size:12px;
  color:rgba(255,255,255,.55);
}

.footer-title{
  font-size:12px;
  letter-spacing:.25px;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  margin-bottom:10px;
}

.footer-link{
  display:block;
  padding:7px 0;
  font-size:14px;
  color:rgba(255,255,255,.82);
  text-decoration:none;
  transition:.15s ease;
}

.footer-link:hover{
  color:#f6c76b;
  transform:translateX(2px);
}

.footer-link.strong{
  font-weight:800;
  color:#fff;
}

.footer-right{
  text-align:right;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:12px 0;
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,.55);
}

/* MOBILE */
@media(max-width: 900px){
  .footer-inner{
    width: min(1280px, calc(100% - 28px));
    grid-template-columns:1fr;
  }
  .footer-right{
    text-align:left;
  }
}

/* SUNRISE SIGNUP BLOCK (sales-page style) */
.sr-wrap{
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 0;
}

.sr-card{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: rgba(0,0,0,.30);
  box-shadow: 0 30px 90px rgba(0,0,0,.60);
  overflow: hidden;
}

.sr-grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  align-items: start;
}

.sr-left{
  padding: 26px 26px 22px;
  background:
    radial-gradient(700px 280px at 20% 10%, rgba(246,199,107,.12), transparent 60%),
    rgba(0,0,0,.18);
}

.sr-title{
  font-size: 44px;
  line-height: 1.03;
  margin: 0 0 14px;
  font-weight: 900;
  color: #f6c76b;
  text-shadow:
    0 2px 10px rgba(0,0,0,.65),
    0 0 22px rgba(246,199,107,.35),
    0 0 44px rgba(227,155,46,.18);
}

.sr-sub{
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
  margin: 0 0 14px;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}

.sr-list{
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  line-height: 1.85;
}

.sr-list li::before{
  content: "✓";
  color: #f6c76b;
  font-weight: 900;
  margin-right: 10px;
}

.sr-note{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(246,199,107,.25);
  font-size: 13px;
  color: rgba(246,199,107,.92);
  font-weight: 800;
  text-shadow: 0 0 10px rgba(246,199,107,.25);
}

/* RIGHT PANEL (form) */
.sr-right{
  padding: 22px 22px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
}

.sr-form{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(0,0,0,.20);
  padding: 18px;
}

.sr-form .membertdbold{
  display:none; /* hides old table headings if your form injects them */
}

/* make typical form fields look modern without changing backend */
.sr-form input[type="text"],
.sr-form input[type="password"],
.sr-form input[type="email"],
.sr-form select,
.sr-form textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.92);
  font-size: 15px;
  outline:none;
}

.sr-form input:focus,
.sr-form select:focus,
.sr-form textarea:focus{
  border-color: rgba(246,199,107,.55);
  box-shadow: 0 0 0 4px rgba(246,199,107,.14);
  background: rgba(0,0,0,.36);
}

.sr-form input[type="submit"],
.sr-form button,
.sr-form .btn,
.sr-form input[type="button"]{
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(135deg, #f6c76b, #e39b2e);
  color: #1b1305;
  box-shadow:
    0 18px 44px rgba(227,155,46,.45),
    0 0 22px rgba(246,199,107,.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sr-form input[type="submit"]:hover,
.sr-form button:hover{
  transform: translateY(-2px);
  box-shadow:
    0 22px 60px rgba(227,155,46,.55),
    0 0 32px rgba(246,199,107,.35);
}

/* remove extra gaps caused by tables inside form systems */
.sr-form table{
  width: 100%;
  border-collapse: collapse;
}
.sr-form td{
  padding: 8px 6px;
  vertical-align: top;
}

/* MOBILE */
@media(max-width: 980px){
  .sr-wrap{ width: min(1280px, calc(100% - 28px)); }
  .sr-grid{ grid-template-columns: 1fr; }
  .sr-title{ font-size: 36px; }
}

/* Signup container (sales-page style) */
.sr-wrap{
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: 24px 0 0;
}
.sr-card{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(0,0,0,.30);
  box-shadow: 0 30px 90px rgba(0,0,0,.60);
}
.sr-grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: start;
}
.sr-left{
  padding: 26px 26px 22px;
  background:
    radial-gradient(700px 280px at 20% 10%, rgba(246,199,107,.12), transparent 60%),
    rgba(0,0,0,.18);
}
.sr-title{
  font-size: 44px;
  line-height: 1.03;
  margin: 0 0 14px;
  font-weight: 900;
  color: #f6c76b;
  text-shadow:
    0 2px 10px rgba(0,0,0,.65),
    0 0 22px rgba(246,199,107,.35),
    0 0 44px rgba(227,155,46,.18);
}
.sr-sub{
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
  margin: 0 0 14px;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
.sr-list{
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  line-height: 1.85;
}
.sr-list li{ margin: 6px 0; }
.sr-list li::before{
  content: "✓";
  color: #f6c76b;
  font-weight: 900;
  margin-right: 10px;
}
.sr-note{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(246,199,107,.25);
  font-size: 13px;
  color: rgba(246,199,107,.92);
  font-weight: 800;
  text-shadow: 0 0 10px rgba(246,199,107,.25);
}

/* Right side form panel */
.sr-right{
  padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
}
.sr-form{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(0,0,0,.20);
  padding: 18px;
}

/* Fix table spacing + modernize fields without backend changes */
.sr-form table{
  width:100%;
  border-collapse: collapse;
}
.sr-form td{
  padding: 8px 6px;
  vertical-align: middle;
}

/* Your old labels */
.sr-form .formlabelbold{
  color: rgba(255,255,255,.82);
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}

/* Inputs/selects */
.sr-form input[type="text"],
.sr-form input[type="password"],
.sr-form input[type="email"],
.sr-form select,
.sr-form textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.92);
  font-size: 15px;
  outline:none;
}
.sr-form input:focus,
.sr-form select:focus,
.sr-form textarea:focus{
  border-color: rgba(246,199,107,.55);
  box-shadow: 0 0 0 4px rgba(246,199,107,.14);
  background: rgba(0,0,0,.36);
}

/* Radios/checkboxes */
.sr-form input[type="checkbox"],
.sr-form input[type="radio"]{
  transform: translateY(1px);
  accent-color: #f6c76b;
}

/* Submit button */
.sr-form input[type="submit"],
.sr-form button{
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(135deg, #f6c76b, #e39b2e);
  color: #1b1305;
  box-shadow:
    0 18px 44px rgba(227,155,46,.45),
    0 0 22px rgba(246,199,107,.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sr-form input[type="submit"]:hover{
  transform: translateY(-2px);
  box-shadow:
    0 22px 60px rgba(227,155,46,.55),
    0 0 32px rgba(246,199,107,.35);
}

/* Referrer line (replaces <br><center>) */
.sr-ref{
  width: min(1280px, calc(100% - 48px));
  margin: 14px auto 0;
  text-align:center;
  color: rgba(255,255,255,.82);
  font-weight: 800;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  border-radius: 999px;
}

/* Mobile stacking */
@media(max-width: 980px){
  .sr-wrap{ width: min(1280px, calc(100% - 28px)); }
  .sr-grid{ grid-template-columns: 1fr; }
  .sr-title{ font-size: 36px; }
  .sr-form td{ display:block; width:100%; }
  .sr-form .formlabelbold{ margin-top: 6px; display:block; }
}

.sr-wrap{
  width: min(1280px, calc(100% - 48px));
  margin: 18px auto 0;
}

.sr-card{
  padding-top: 48px;
  padding-bottom: 48px;
}


.sr-grid{
  align-items: stretch;
  min-height: 620px;
}

.sr-left{
  padding: 26px 26px;
  color:#fff;
}

.sr-title{
  font-size: 40px;
  line-height:1.05;
  font-weight: 900;
  color:#ffb347;
  text-shadow: 0 0 10px rgba(255,179,71,.55), 0 0 24px rgba(255,140,0,.35);
  margin: 0 0 14px;
}

.sr-sub{
  color: rgba(255,255,255,.85);
  line-height:1.6;
  margin: 0 0 14px;
}

.sr-list{
  margin: 0 0 14px;
  padding-left: 18px;
  color: rgba(255,255,255,.88);
  line-height:1.9;
}

.sr-note{
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,179,71,.35);
  color:#ffb347;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(255,179,71,.45);
}

.sr-right{
  padding: 22px 22px;
  background: rgba(255,255,255,.03);
  border-left: 1px solid rgba(255,255,255,.10);
}

.sr-form{ width:100%; }
.sr-table{ width:100%; border-collapse: collapse; }

.sr-table td{
  padding: 10px 8px;
  color:#fff;
}

.sr-table input[type="text"],
.sr-table input[type="password"],
.sr-table select{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color:#fff;
}

.sr-table input[type="submit"]{
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 14px 18px;
  font-weight: 900;
  background: linear-gradient(135deg,#ffb300,#ff6f00);
  color:#240018;
  box-shadow: 0 14px 34px rgba(255,140,0,.35);
  cursor:pointer;
}

.sr-error{
  width:min(1280px, calc(100% - 48px));
  margin: 12px auto 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,0,0,.12);
  color:#fff;
  font-weight: 800;
  text-align:center;
}

@media (max-width: 980px){
  .sr-grid{ grid-template-columns: 1fr; }
  .sr-right{ border-left:none; border-top: 1px solid rgba(255,255,255,.10); }
}

.sr-refwrap{
  width:min(1280px, calc(100% - 48px));
  margin: 10px auto 22px;
  display:flex;
  justify-content:center;
}

.sr-ref{
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,179,71,.35);
  background: rgba(0,0,0,.45);
  color: rgba(255,255,255,.90);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
  text-shadow: 0 0 10px rgba(255,179,71,.25);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

.sr-ref b{
  color:#ffb347;
  text-shadow: 0 0 12px rgba(255,179,71,.35);
}

.sr-card{
  padding: 40px 0;
}

.sr-grid{
  min-height: 560px;
}

.sr-left,
.sr-right{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sr-form input[type="text"],
.sr-form input[type="password"],
.sr-form select{
  height: 40px;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 8px;
}

.sr-form input::placeholder{
  font-size: 13px;
  opacity: 0.8;
}

.sr-form tr td{
  padding-top: 6px;
  padding-bottom: 6px;
}

.sr-title{
  font-size: 34px;
  line-height: 1.05;
}

.sr-sub{
  font-size: 14px;
  line-height: 1.6;
}

.sr-list li{
  font-size: 13.5px;
  line-height: 1.6;
}

.sr-form input[type="text"],
.sr-form input[type="password"],
.sr-form select{
  height: 40px;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 8px;
}

.sr-form td.formlabelbold{
  font-size: 13px;
}

.sr-form tr td{
  padding-top: 6px;
  padding-bottom: 6px;
}

.sr-title{
  font-size: 34px;
}

.sr-sub{
  font-size: 14px;
}

.sr-list li{
  font-size: 13.5px;
}

.sr-form input[type="submit"]{
  height: 42px;
  font-size: 15px;
}

.sr-card{
  padding: 22px 26px;
}

.sr-grid{
  gap: 22px;
}

.sr-sub{
  margin-bottom: 12px;
}

.sr-list{
  margin-bottom: 14px;
}

.sr-list li{
  margin-bottom: 6px;
}

.sr-note{
  margin-top: 10px;
  padding-top: 8px;
}

.sr-form{
  padding: 16px;
}

.sr-title{
  margin-bottom: 10px;
}

.sr-wrap{ margin:8px auto; }

.sr-card{ padding:14px 18px !important; }

.sr-grid{ gap:14px !important; }

.sr-title{
  font-size:30px;
  line-height:1.05;
  margin-bottom:8px;
}

.sr-sub{
  font-size:14px;
  line-height:1.45;
  margin-bottom:8px;
}

.sr-list{ margin:0 0 8px; }

.sr-list li{
  margin-bottom:4px;
  font-size:14px;
  line-height:1.4;
}

.sr-note{
  margin-top:6px;
  padding-top:6px;
  font-size:13px;
}

.sr-form{ padding:12px !important; }

.sr-form table td{
  padding:4px 6px !important;
  line-height:1.3;
}

.sr-form input[type="text"],
.sr-form input[type="password"],
.sr-form select{
  height:36px;
  padding:6px 10px;
  font-size:14px;
}

.sr-form input[type="submit"]{
  height:40px;
  font-size:15px;
  margin-top:6px;
}