/* 12DailyBro: The Director's Cut
   Authentic recreation of 12DailyPro (2005) styling */

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #333;
  background-color: #d4d0c8;
  background-image: url('/assets/images/bg_page.gif');
  background-position: center top;
  background-repeat: repeat;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

a:link {
  color: #CCCCCC;
  text-decoration: none;
  font-weight: bold;
}

a:visited {
  color: #CCCCCC;
  text-decoration: none;
}

a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

a:active {
  color: #CCCCCC;
  text-decoration: none;
}

/* Content area links - different color */
.content-cell a:link,
.content-cell a:visited {
  color: #0000ff;
  font-weight: normal;
}

.content-cell a:hover {
  color: #0000ff;
  text-decoration: underline;
}

/* Satire Disclaimer Banner - Always visible */
.satire-banner {
  background: #ffcc00;
  color: #B71B28;
  text-align: center;
  padding: 8px;
  font-weight: bold;
  font-size: 11px;
  position: sticky;
  top: 0;
  z-index: 9999;
  border-bottom: 2px solid #B71B28;
}

/* Main layout */
.main-table {
  background-color: #fff;
  border: none;
  margin-left: auto;
  margin-right: auto;
}

/* Fix table image spacing - kill whitespace in banner/header rows */
.main-table > tbody > tr > td {
  font-size: 0;
  line-height: 0;
}

.main-table > tbody > tr > td > img,
.main-table > tbody > tr > td > a > img {
  display: block;
}

.main-table > tbody > tr > td > a {
  display: block;
  font-size: 0;
  line-height: 0;
}

.banner-images td,
.login-images > tbody > tr > td {
  font-size: 0;
  line-height: 0;
}

.banner-images img,
.login-images > tbody > tr > td > img {
  display: block;
}

.login-images form {
  display: block;
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
}

/* Restore font size for content areas */
.nav-cell,
.content-cell,
.sidebar-cell {
  font-size: 10px;
  line-height: 1.5;
}

/* Header */
.header-cell {
  padding: 0;
  background-color: #fff;
}

.banner-top {
  background: linear-gradient(to bottom, #2c1810, #1a0f0a);
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
}

.banner-tagline {
  color: #d4a574;
  font-size: 14px;
  font-style: italic;
  letter-spacing: 1px;
}

/* Navigation bar */
.nav-bar {
  background: linear-gradient(to bottom, #8B4513, #5D2E0C);
  height: 22px;
  display: flex;
  align-items: center;
}

.nav-spacer {
  flex: 1;
}

.nav-buttons {
  display: flex;
}

.nav-btn-link {
  display: block;
  padding: 4px 12px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-decoration: none;
  background: linear-gradient(to bottom, #a65d3f, #8B4513);
  border-left: 1px solid #5D2E0C;
}

.nav-btn-link:hover {
  background: linear-gradient(to bottom, #c87d5f, #a65d3f);
  color: #fff;
}

/* Main banner area */
.banner-main {
  display: flex;
  background: linear-gradient(to right, #f5f0e6, #e8e0d0);
  border-bottom: 3px solid #B83A3E;
}

.banner-lady {
  width: 235px;
  height: 167px;
  background: linear-gradient(135deg, #f0e8d8, #d4c8b4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.banner-lady::after {
  content: "👩‍💼";
  font-size: 80px;
  opacity: 0.8;
}

.banner-center {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(to bottom, #fff, #f8f4ec);
}

.banner-logo {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
}

.logo-12 {
  color: #B71B28;
  font-size: 36px;
}

.logo-daily {
  color: #B71B28;
}

.logo-pro {
  color: #cc0000;
  font-style: italic;
  font-size: 28px;
  margin-left: 5px;
}

.banner-usp {
  font-size: 11px;
  color: #666;
  line-height: 1.5;
}

.banner-right {
  width: 190px;
  background: linear-gradient(to bottom, #B83A3E, #8a2a2e);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 15px;
}

.big-percent {
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.percent-label {
  font-size: 14px;
  color: #ffcccc;
  text-transform: uppercase;
}

/* Three column layout */
.nav-cell {
  background-color: #F3F2F2;
  padding: 0;
  vertical-align: top;
  width: 235px;
}

.content-cell {
  background-color: #fff;
  padding: 15px;
  vertical-align: top;
}

.sidebar-cell {
  background-color: #F3F2F2;
  padding: 0;
  vertical-align: top;
  width: 200px;
}

/* Left sidebar - Login area */
.login-section {
  background: linear-gradient(to bottom, #e8e4e0, #d8d4d0);
  padding: 0;
}

.login-header {
  background: linear-gradient(to bottom, #8a7a6a, #6a5a4a);
  color: #fff;
  padding: 12px 15px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

.login-form {
  padding: 15px;
  background: linear-gradient(to bottom, #f0ece8, #e0dcd8);
}

.login-row {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.login-row label {
  width: 70px;
  text-align: right;
  padding-right: 8px;
  font-size: 10px;
  color: #333;
}

.login-row input[type="text"],
.login-row input[type="password"] {
  width: 100px;
  padding: 3px 5px;
  font-size: 10px;
  border: 1px solid #999;
}

.login-submit {
  text-align: center;
  margin-top: 10px;
}

.login-btn {
  background: linear-gradient(to bottom, #B83A3E, #8a2a2e);
  color: #fff;
  border: 1px solid #6a1a1e;
  padding: 5px 20px;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 3px;
}

.login-btn:hover {
  background: linear-gradient(to bottom, #c84a4e, #a83a3e);
}

.login-links {
  text-align: center;
  padding: 10px;
  background-color: #F3F2F2;
}

.login-links a {
  display: block;
  margin: 5px 0;
  padding: 8px;
  background: linear-gradient(to bottom, #d8d4d0, #c8c4c0);
  border: 1px solid #999;
  color: #666;
  font-size: 10px;
  text-decoration: none;
}

.login-links a:hover {
  background: linear-gradient(to bottom, #e8e4e0, #d8d4d0);
  color: #333;
}

/* Signup free button */
.signup-free-btn {
  display: block;
  background: linear-gradient(to bottom, #B83A3E, #8a2a2e);
  color: #fff;
  text-align: center;
  padding: 12px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px solid #6a1a1e;
}

.signup-free-btn:hover {
  background: linear-gradient(to bottom, #c84a4e, #a83a3e);
  color: #fff;
}

/* Section titles */
.section-title-bar {
  background: linear-gradient(to bottom, #8a7a6a, #6a5a4a);
  color: #fff;
  padding: 10px 15px;
  font-size: 11px;
  font-weight: bold;
}

.section-content {
  padding: 15px;
  font-size: 10px;
  line-height: 1.5;
}

/* Payment processors */
.payment-logos {
  display: flex;
  gap: 15px;
  padding: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.payment-logo {
  padding: 8px 12px;
  background: linear-gradient(to bottom, #ffd700, #cc9900);
  border: 1px solid #996600;
  font-size: 10px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

.payment-logo.stormpay {
  background: linear-gradient(to bottom, #4169e1, #2851c1);
  border-color: #1841a1;
  color: #fff;
}

/* News section */
.news-item {
  padding: 10px 15px;
  border-bottom: 1px dotted #ccc;
  font-size: 10px;
}

.news-date {
  color: #B71B28;
  font-weight: bold;
}

/* Right sidebar */
.sidebar-section {
  margin-bottom: 0;
}

.sidebar-title {
  background: linear-gradient(to bottom, #8a7a6a, #6a5a4a);
  color: #fff;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: bold;
}

.sidebar-content {
  padding: 12px;
  font-size: 10px;
  line-height: 1.5;
}

/* Site of the week */
.site-of-week {
  text-align: center;
  padding: 15px;
}

.site-of-week-banner {
  width: 125px;
  height: 125px;
  background: linear-gradient(135deg, #4a9, #286);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  color: #fff;
  font-weight: bold;
  font-size: 11px;
  text-align: center;
  border: 2px solid #333;
}

/* Testimonials / What members say */
.testimonial {
  padding: 10px 12px;
  border-bottom: 1px dotted #ccc;
  font-style: italic;
}

.testimonial-author {
  color: #666;
  font-style: normal;
  display: block;
  margin-top: 5px;
  font-size: 9px;
}

/* Main content area */
.content-title {
  color: #B71B28;
  font-size: 12px;
  font-weight: bold;
  margin: 15px 0 10px 0;
}

.content-text {
  font-size: 10px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 15px;
}

.content-text p {
  margin-bottom: 10px;
}

/* Footer */
.footer-cell {
  background-color: #B83A3E;
  padding: 0;
}

.site-footer {
  padding: 15px;
  text-align: center;
}

.footer-links {
  margin-bottom: 10px;
}

.footer-links a {
  color: #ffcccc;
  margin: 0 10px;
  font-size: 10px;
}

.footer-links a:hover {
  color: #fff;
}

.footer-copyright {
  color: #CCCCCC;
  font-size: 10px;
}

/* Warning notice */
.newsys {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: #9B3333;
  padding: 10px;
  background-color: #fff8f0;
  border: 1px solid #ddd;
  margin: 10px;
}

/* Buttons */
.retro-btn {
  background: linear-gradient(to bottom, #d8d4d0, #b8b4b0);
  border: 1px solid #888;
  padding: 5px 15px;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  color: #333;
}

.retro-btn:hover {
  background: linear-gradient(to bottom, #e8e4e0, #c8c4c0);
}

.retro-btn.primary {
  background: linear-gradient(to bottom, #B83A3E, #8a2a2e);
  color: #fff !important;
  border-color: #6a1a1e;
  text-decoration: none !important;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
}

.retro-btn.primary:hover {
  background: linear-gradient(to bottom, #c84a4e, #a83a3e);
  color: #fff !important;
  text-decoration: none;
}

/* Form inputs */
.webforms {
  padding: 3px 5px;
  font-size: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  border: 1px solid #999;
}

/* Data tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.data-table th {
  background: linear-gradient(to bottom, #B83A3E, #8a2a2e);
  color: #fff;
  padding: 8px;
  text-align: left;
  font-size: 10px;
}

.data-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #ddd;
}

.data-table tr:hover {
  background-color: #f8f4f0;
}

/* Status indicators */
.status-active {
  color: #006600;
  font-weight: bold;
}

.status-pending {
  color: #cc6600;
}

/* Educational boxes */
.edu-box {
  background-color: #f0f8ff;
  border: 1px solid #4488cc;
  border-left: 4px solid #4488cc;
  padding: 12px;
  margin: 15px 0;
  font-size: 10px;
}

.edu-box h4 {
  color: #336699;
  margin-bottom: 8px;
  font-size: 11px;
}

/* Blinking effect - subtle */
.blink {
  animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Popup overlay */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.popup.hidden {
  display: none;
}

.popup-content {
  background: #fff;
  border: 3px solid #B83A3E;
  padding: 25px;
  max-width: 450px;
  text-align: center;
}

.popup-content h3 {
  color: #B71B28;
  margin-bottom: 12px;
  font-size: 14px;
}

.popup-content p {
  font-size: 11px;
  margin-bottom: 15px;
}

/* Calculator */
.calc-box {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: 12px;
  margin: 10px 0;
}

.calc-result {
  margin-top: 10px;
  padding: 8px;
  background-color: #f0fff0;
  border: 1px solid #090;
  color: #006600;
  font-weight: bold;
  text-align: center;
  font-size: 11px;
}

/* Countdown */
.countdown-box {
  background-color: #fff8e8;
  border: 1px solid #ffcc00;
  padding: 10px;
  text-align: center;
  margin: 10px 0;
}

.countdown-display {
  font-family: "Courier New", monospace;
  font-size: 16px;
  color: #B71B28;
  font-weight: bold;
}

/* Hamster overlay */
#hamster-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 10001;
  cursor: pointer;
}

#hamster-overlay img {
  max-width: 300px;
}

#hamster-overlay p {
  color: #ffcc00;
  font-size: 20px;
  margin-top: 20px;
}

/* =====================================================
   RESPONSIVE DESIGN - Mobile-friendly while preserving desktop
   ===================================================== */

/* Mobile menu toggle button - hidden on desktop */
.mobile-menu-toggle {
  display: none;
  background: linear-gradient(to bottom, #B83A3E, #8a2a2e);
  color: #fff;
  border: none;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

.mobile-menu-toggle:hover {
  background: linear-gradient(to bottom, #c84a4e, #a83a3e);
}

/* Mobile navigation menu - hidden by default */
.mobile-nav {
  display: none;
  background: #F3F2F2;
  padding: 15px;
  border-bottom: 2px solid #B83A3E;
}

/* Mobile header branding - shown only on small screens */
.mobile-header {
  display: none;
  background: linear-gradient(to bottom, #B83A3E, #8a2a2e);
  color: #fff;
  text-align: center;
  padding: 15px;
}

.mobile-header h1 {
  font-size: 24px;
  margin: 0;
  font-weight: bold;
}

.mobile-header h1 span {
  color: #ffcccc;
}

.mobile-header p {
  font-size: 11px;
  color: #ffcccc;
  margin: 5px 0 0 0;
}

.mobile-nav.active {
  display: block;
}

.mobile-nav a {
  display: block;
  padding: 12px 15px;
  margin: 5px 0;
  background: linear-gradient(to bottom, #d8d4d0, #c8c4c0);
  border: 1px solid #999;
  color: #333 !important;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

.mobile-nav a:hover {
  background: linear-gradient(to bottom, #e8e4e0, #d8d4d0);
}

/* Tablet breakpoint - 800px */
@media (max-width: 800px) {
  /* Make main table fluid */
  .main-table {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hide sidebars on tablet/mobile */
  .nav-cell,
  .sidebar-cell {
    display: none !important;
  }

  /* Content takes full width */
  .content-cell {
    width: 100% !important;
    padding: 15px;
  }

  /* Show mobile menu toggle */
  .mobile-menu-toggle {
    display: block;
  }

  /* Banner images - scale proportionally */
  .banner-images {
    display: block !important;
  }

  .banner-images tr {
    display: flex;
    flex-wrap: wrap;
  }

  .banner-images td {
    flex: 1 1 auto;
  }

  .banner-images img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  /* Top banner and logo - scale */
  .main-table > tbody > tr > td > img,
  .main-table > tbody > tr > td[colspan="7"] > img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  /* Navigation buttons row - horizontal scroll or hide */
  .main-table > tbody > tr > td > a > img.nav-img {
    height: 22px;
    width: auto;
  }

  /* Popup responsive */
  .popup-content {
    max-width: 90%;
    margin: 20px;
  }

  /* Data tables scroll horizontally */
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Increase font sizes for readability */
  .content-cell {
    font-size: 12px;
  }

  .content-text {
    font-size: 12px;
  }

  .section-content {
    font-size: 11px;
  }
}

/* Mobile breakpoint - 600px */
@media (max-width: 600px) {
  /* Satire banner */
  .satire-banner {
    font-size: 10px;
    padding: 6px;
  }

  /* Hide the large banner images row on mobile - too much vertical space */
  .banner-images {
    display: none !important;
  }

  /* Hide navigation row images on small screens */
  .main-table > tbody > tr:nth-child(2) {
    display: none;
  }

  /* Show mobile header branding */
  .mobile-header {
    display: block;
  }

  /* Hide the desktop banner images on mobile */
  .main-table > tbody > tr:first-child,
  .main-table > tbody > tr:nth-child(3) {
    display: none;
  }

  /* Content padding */
  .content-cell {
    padding: 12px;
  }

  /* Larger touch targets for buttons */
  .retro-btn {
    padding: 12px 20px;
    font-size: 14px;
  }

  .retro-btn.primary {
    padding: 14px 24px;
    font-size: 14px;
  }

  /* Form inputs - larger for mobile */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea,
  select,
  .webforms {
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: 10px !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Login form on mobile */
  .login-row {
    flex-direction: column;
    align-items: stretch;
  }

  .login-row label {
    width: 100%;
    text-align: left;
    padding: 0 0 5px 0;
    font-size: 12px;
  }

  .login-row input {
    width: 100% !important;
  }

  /* Payment logos */
  .payment-logos {
    flex-direction: column;
    align-items: center;
  }

  /* Footer */
  .footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .footer-links a {
    display: block;
    padding: 8px;
    font-size: 12px;
  }

  /* Educational boxes */
  .edu-box {
    padding: 10px;
  }

  /* Content titles */
  .content-title {
    font-size: 14px;
  }

  /* Calculator */
  .calc-box input {
    width: 100%;
  }
}

/* Small mobile - 400px */
@media (max-width: 400px) {
  /* Even smaller satire banner */
  .satire-banner {
    font-size: 9px;
    padding: 5px;
    line-height: 1.3;
  }

  /* Content area */
  .content-cell {
    padding: 10px;
    font-size: 11px;
  }

  .content-text {
    font-size: 11px;
  }

  /* Popup on very small screens */
  .popup-content {
    padding: 15px;
    max-width: 95%;
    margin: 10px;
  }

  .popup-content h3 {
    font-size: 13px;
  }

  .popup-content p {
    font-size: 10px;
  }

  /* Trust badges stack */
  .trust-badges {
    flex-direction: column;
    align-items: center;
  }

  /* News items */
  .news-item {
    padding: 8px 10px;
    font-size: 10px;
  }
}

/* Ensure images never overflow */
img {
  max-width: 100%;
  height: auto;
}

/* Fix tables on mobile - prevent overflow */
table {
  max-width: 100%;
}

/* Horizontal scrolling wrapper for wide content */
.scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Print styles - hide non-essential */
@media print {
  .satire-banner,
  .mobile-menu-toggle,
  .mobile-nav,
  .nav-cell,
  .sidebar-cell {
    display: none !important;
  }

  .main-table {
    width: 100% !important;
  }

  .content-cell {
    width: 100% !important;
  }
}

/* =====================================================
   PAGE-SPECIFIC RESPONSIVE FIXES
   ===================================================== */

/* Section titles */
.section-title {
  font-size: 14px;
  color: #B71B28;
  font-weight: bold;
  margin: 20px 0 15px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ddd;
}

/* Important notice box */
.important-notice {
  background: #fff8e8;
  border: 1px solid #cc9900;
  border-left: 4px solid #cc9900;
  padding: 12px;
  margin: 15px 0;
  font-size: 11px;
  color: #996600;
}

/* Retro input style */
.retro-input {
  padding: 6px 8px;
  font-size: 11px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  border: 1px solid #999;
  background: #fff;
}

/* Mobile responsive for forms and tables */
@media (max-width: 600px) {
  /* Stack form table rows vertically */
  .data-table td {
    display: block;
    width: 100% !important;
    text-align: left !important;
    padding: 8px 10px !important;
  }

  .data-table td:first-child {
    padding-bottom: 2px !important;
    font-weight: bold;
  }

  .data-table td:last-child {
    padding-top: 2px !important;
  }

  /* Quick actions grid - stack on mobile */
  table[style*="width: 100%"] td[style*="width: 25%"] {
    display: block;
    width: 100% !important;
    padding: 5px !important;
  }

  /* Full width inputs */
  .retro-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Investment form - stack */
  table[style*="width: 100%"] td[style*="width: 40%"],
  table[style*="width: 100%"] td[style*="width: 30%"] {
    display: block;
    width: 100% !important;
    text-align: left !important;
    padding: 10px 0 !important;
  }

  /* Referral link flex wrap */
  div[style*="display: flex; gap: 10px"] {
    flex-direction: column !important;
  }

  /* Forum post content */
  .forum-post-content {
    font-size: 12px;
    line-height: 1.5;
  }

  /* Leaderboard responsive */
  .podium-container {
    flex-direction: column;
    gap: 15px;
  }

  .stats-grid {
    flex-direction: column;
  }
}

/* Very small screens */
@media (max-width: 400px) {
  .section-title {
    font-size: 13px;
  }

  .retro-btn {
    width: 100%;
    text-align: center;
  }

  .retro-btn.primary {
    width: 100%;
  }
}

/* Tiny text disclaimer */
.tiny-text {
  font-size: 9px;
  color: #888;
}

/* Hit counter style */
.hit-counter {
  font-size: 9px;
  color: #666;
  text-align: center;
  margin: 10px 0;
}

/* Trust badges area */
.trust-badges {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 10px;
  flex-wrap: wrap;
}

.trust-badge {
  padding: 5px 10px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  font-size: 9px;
  font-weight: bold;
}