/* CSS Custom Properties / Theme Fallbacks */
:root {
  --dp-page-bg: #ffcb99;
  --dp-market-bg: #ffebdc;
  --dp-live-card-bg: #ffffa6;
  --dp-border: #ff1731;
  --dp-market-name: #fd019d;
  --dp-result-color: #001b72;
  --dp-time-color: #444444;
  --dp-section-pink: #f20a8b;
  --dp-section-teal: #028d88;
  --dp-jodi-bg: #028d88;
  --dp-panel-bg: #76145f;
  --dp-footer-bg: #111111;
  --dp-footer-text: #ffffff;
}

/* ==========================================================================
   DPBOSS RATAN.COM — MASTER MOBILE RESPONSIVE STYLESHEET (V2)
   Guarantees 100% Viewport Fit & Zero Horizontal Scroll for All Mobile Devices
   ========================================================================== */

/* 1. Global Box Model & Viewport Boundaries */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: border-box !important;
  max-width: 100%;
}

/* Main React App Layout Container */
.dpratan-react-v2-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 4px 6px 96px 6px !important; /* Bottom padding for floating action bar */
}

/* 2. Locked Header Styling & Scalability */
.locked-header-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 8px auto !important;
}

.m-icon {
  width: 100% !important;
  background: #ffcb99 !important;
  border: 2px solid #ff1731 !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
}

.dpr-welcome-logo {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

.m-icon p {
  margin: 0 !important;
  color: #111 !important;
  font-size: clamp(11px, 3.5vw, 15px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.brand-header-box {
  position: relative !important;
  width: 100% !important;
  background: #ffd0a7 !important;
  border: 2px solid #ff1731 !important;
  border-radius: 8px !important;
  padding: 8px 6px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50px !important;
  margin-bottom: 6px !important;
  overflow: hidden !important;
}

.brand-header-box::before {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: clamp(45px, 16vw, 90px) !important;
  height: clamp(35px, 12vw, 70px) !important;
  background: url('/favicon-48x48.png') no-repeat center center / contain !important;
  opacity: 0.8 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.brand-title {
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 1px !important;
  text-decoration: none !important;
  font-style: italic !important;
  white-space: nowrap !important;
}

.brand-dp {
  color: var(--dp-market-name, #fd019d) !important;
  font-family: Georgia, serif !important;
  font-size: clamp(22px, 7vw, 36px) !important;
  font-weight: 900 !important;
  letter-spacing: -2px !important;
}

.brand-rest {
  color: #111 !important;
  font-family: Arial, sans-serif !important;
  font-size: clamp(15px, 4.5vw, 24px) !important;
  font-weight: 900 !important;
}

.brand-badge {
  background: #b80000 !important;
  color: #fff !important;
  font-size: clamp(9px, 2.5vw, 11px) !important;
  font-weight: 900 !important;
  padding: 2px 5px !important;
  border-radius: 4px !important;
  margin-left: 3px !important;
  vertical-align: super !important;
  font-style: normal !important;
}

.text2 {
  width: 100% !important;
  background: #ffcb99 !important;
  border: 2px solid #ff1731 !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  text-align: center !important;
}

.text2 h1 {
  color: #b80000 !important;
  font-size: clamp(13px, 3.8vw, 18px) !important;
  font-weight: 900 !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.25 !important;
}

.text2 h2 {
  color: #333 !important;
  font-size: clamp(11px, 3vw, 13px) !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

/* 3. Quick Sticky Navigation Bar */
.quick-sticky-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  justify-content: center !important;
  background: #3a18aa !important;
  padding: 6px !important;
  border-radius: 8px !important;
  margin: 8px 0 !important;
  width: 100% !important;
}

.nav-item-btn {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  padding: 6px 8px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-size: clamp(10px, 2.8vw, 12px) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: center !important;
  flex: 1 1 auto !important;
  min-width: 60px !important;
}

.nav-item-btn.active, .nav-item-btn:hover {
  background: #fd019d !important;
  color: #fff !important;
  border-color: #fd019d !important;
}

/* 4. Predictions Section */
.dpr-user-pred-section {
  width: 100% !important;
  background: #ffd0a7 !important;
  border: 2px solid #ff1731 !important;
  border-radius: 8px !important;
  padding: 8px !important;
  text-align: center !important;
  margin-top: 10px !important;
}

.pred-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
}

@media (max-width: 480px) {
  .pred-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 5. Upper Live Result Header & Expanded Grid */
.liv-rslt {
  width: 100% !important;
  background: #ffd0a7 !important;
  border: 2px solid #ff1731 !important;
  border-radius: 8px !important;
  padding: 6px !important;
  margin-top: 10px !important;
}

.live-head {
  background: #ff1731 !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
}

.expanded-live-markets-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 8px !important;
  margin-top: 8px !important;
  width: 100% !important;
}

@media (max-width: 600px) {
  .expanded-live-markets-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 6. Lower Markets Master Grid */
.market-master-section {
  width: 100% !important;
  margin-top: 12px !important;
}

.lower-markets-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

@media (max-width: 600px) {
  .lower-markets-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Market Card Box Model */
.market-card {
  width: 100% !important;
  background: var(--dp-market-bg, #ffebdc) !important;
  border: 1px solid #ff1731 !important;
  border-radius: 8px !important;
  padding: 10px 8px !important;
  text-align: center !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.06) !important;
}

.market-card.live-active-card {
  background: var(--dp-live-card-bg, #ffffa6) !important;
  border: 2px solid #ff1731 !important;
}

.mkt-name {
  font-size: clamp(14px, 4vw, 17px) !important;
  font-weight: 900 !important;
  color: #fd019d !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.mkt-res {
  font-size: clamp(18px, 5.5vw, 24px) !important;
  font-weight: 900 !important;
  color: var(--dp-result-color, #001b72) !important;
  letter-spacing: 1px !important;
  margin: 4px 0 !important;
}

.mkt-time {
  font-size: clamp(10px, 3vw, 12px) !important;
  color: var(--dp-time-color, #444) !important;
  font-weight: 700 !important;
}

/* Action Buttons Grid Inside Cards */
.mkt-btns {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin-top: 8px !important;
  width: 100% !important;
}

.mkt-btn {
  flex: 1 1 50% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 6px 4px !important;
  background: var(--dp-jodi-bg, #028d88) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: clamp(11px, 3vw, 13px) !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
}

.mkt-btn-panel {
  background: var(--dp-panel-bg, #76145f) !important;
}

/* Upper Live Cards (No Actions Layout) */
.upper-live-card-no-actions {
  padding: 10px 8px !important;
}

/* 7. Chart Directory Section */
.chart-directory-section {
  width: 100% !important;
  background: #ffd0a7 !important;
  border: 2px solid #ff1731 !important;
  border-radius: 8px !important;
  padding: 10px 8px !important;
  margin-top: 12px !important;
}

/* 8. Notice & Footer */
.kalyan-notice, .footer-box {
  width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* 9. Bottom Floating Bar */
.bottom-float-bar {
  position: fixed !important;
  left: 50% !important;
  bottom: 8px !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 16px) !important;
  max-width: 480px !important;
  z-index: 9999 !important;
  display: flex !important;
  gap: 6px !important;
  background: rgba(17, 17, 17, 0.95) !important;
  padding: 6px !important;
  border-radius: 30px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
  pointer-events: auto !important;
}

.bottom-float-bar a, .bottom-float-bar button {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 8px 4px !important;
  min-height: 38px !important;
  border-radius: 20px !important;
  font-size: clamp(10px, 2.8vw, 12px) !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* 10. Specific 320px Worst Case Overrides */
@media (max-width: 340px) {
  .mkt-btns {
    flex-direction: column !important;
  }
  .mkt-btn {
    width: 100% !important;
    min-height: 38px !important;
  }
  .brand-dp {
    font-size: 20px !important;
  }
  .brand-rest {
    font-size: 13px !important;
  }
}