/* =====================================================================
   Zamapunji V218 - Mobile professional-fit layer
   Built from clean V208. Desktop/laptop styles are untouched because all
   layout changes below are scoped to max-width: 991.98px / 767.98px.
   ===================================================================== */

/* Desktop remains visually unchanged. Global safety only prevents accidental horizontal page growth. */
html, body {
  max-width: 100%;
  overflow-x: hidden !important;
}
img, svg, video, iframe, canvas { max-width: 100%; }

@media (max-width: 991.98px) {
  /* Reliable premium background fallback behind Vanta on phones/tablets */
  html,
  body {
    background-color: #000 !important;
    background-image:
      radial-gradient(circle at 18% 8%, rgba(199,161,70,.18), transparent 32%),
      radial-gradient(circle at 85% 18%, rgba(199,161,70,.10), transparent 34%),
      linear-gradient(180deg, #050402 0%, #000 45%, #050402 100%) !important;
    background-attachment: fixed !important;
  }
  #vanta-bg {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: .50 !important;
    background:
      radial-gradient(circle at 20% 12%, rgba(199,161,70,.20), transparent 30%),
      radial-gradient(circle at 76% 30%, rgba(199,161,70,.10), transparent 34%),
      #000 !important;
  }
  #vanta-bg canvas { width: 100% !important; height: 100% !important; display: block !important; }
  body > *:not(#vanta-bg):not(#intro-loader):not(.custom-cursor) { position: relative; z-index: 1; }

  html, body {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    overscroll-behavior-x: none;
    -webkit-text-size-adjust: 100%;
  }

  /* Navbar becomes a clean full-width mobile drawer without affecting desktop */
  .navbar {
    width: 100% !important;
    padding: 10px 0 !important;
    overflow: visible !important;
  }
  .navbar .container,
  .navbar .container-max {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }
  #logo,
  .navbar-brand img {
    width: 142px !important;
    max-width: 58vw !important;
    height: auto !important;
  }
  .navbar-brand { margin-right: auto !important; padding: 0 !important; }
  .navbar-toggler {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    width: 42px !important;
    height: 42px !important;
    padding: 6px !important;
    border: 1px solid rgba(199,161,70,.28) !important;
    border-radius: 10px !important;
    background: rgba(0,0,0,.44) !important;
  }
  .navbar-toggler-icon { filter: invert(75%) sepia(27%) saturate(748%) hue-rotate(4deg) brightness(91%); }

  .navbar .navbar-collapse {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 12px !important;
    padding: 14px 12px !important;
    background: rgba(0,0,0,.96) !important;
    border: 1px solid rgba(199,161,70,.24) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.55) !important;
    overflow: visible !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  .navbar .navbar-collapse:not(.show) { display: none !important; }
  .navbar .navbar-collapse.show,
  .navbar .navbar-collapse.collapsing { display: block !important; }

  .navbar .navbar-nav {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .navbar .navbar-nav > li,
  .navbar .navbar-collapse .navbar-nav > li,
  .navbar .navbar-collapse .nav-item,
  .navbar-nav .nav-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    text-align: left !important;
  }
  .navbar .nav-link,
  .navbar .navbar-nav .nav-link,
  .navbar .btn,
  .navbar .btn-outline-gold {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 12px 12px !important;
    min-height: 44px !important;
    text-align: left !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    border-radius: 10px !important;
  }
  .navbar .btn-outline-gold { justify-content: center !important; margin-top: 8px !important; }

  .navbar .dropdown { position: static !important; }
  .navbar .dropdown:hover > .dropdown-menu { display: none; }
  .navbar .dropdown.show > .dropdown-menu,
  .navbar .dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .navbar .dropdown-menu {
    position: static !important;
    transform: none !important;
    float: none !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 2px 0 8px 0 !important;
    padding: 6px !important;
    border-radius: 12px !important;
    background: rgba(12,9,2,.98) !important;
    border: 1px solid rgba(199,161,70,.22) !important;
    box-shadow: none !important;
    overflow: visible !important;
    text-align: left !important;
  }
  .navbar .dropdown-item {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    padding: 11px 14px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    border-radius: 9px !important;
    line-height: 1.25 !important;
  }

  /* Page-wide fit: nothing should push outside mobile viewport */
  .container,
  .container-fluid,
  .container-max,
  main,
  section,
  footer,
  .section,
  .surface,
  .card,
  .modal-dialog,
  .modal-content,
  .row {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .container,
  .container-max,
  .section > .container,
  footer .container {
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .row > [class*='col-'] {
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 14px !important;
  }
  .surface,
  .actions-row .card {
    padding: 16px !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    background: rgba(255,255,255,.045) !important;
    backdrop-filter: blur(7px) !important;
  }
  h1, h2, h3, h4, h5, h6, p, li, a, span, label, button, input, select, textarea, strong, div {
    overflow-wrap: anywhere;
  }

  /* Home hero replica, resized professionally for mobile */
  .hero-wrap {
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
  }
  .carousel,
  .carousel-inner,
  .carousel-item {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .carousel-item,
  .carousel-item .slide-img {
    height: clamp(360px, 74vh, 560px) !important;
  }
  .carousel-item .slide-img,
  .slide-img {
    width: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }
  .carousel-caption {
    left: 16px !important;
    right: 16px !important;
    bottom: 24px !important;
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .carousel-caption h1 { font-size: clamp(26px, 8vw, 36px) !important; line-height: 1.05 !important; }
  .carousel-caption p { font-size: 15px !important; line-height: 1.45 !important; }
  .carousel-caption .btn { width: auto !important; max-width: 100% !important; white-space: normal !important; }
  #tradingview_xauusd { height: 360px !important; max-width: 100% !important; overflow: hidden !important; }

  /* Forms/calculator/auth fit */
  input, select, textarea, .form-control, .form-select, .input-group, .iti, .iti--allow-dropdown {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .input-group { flex-wrap: wrap !important; }
  .input-group > * { min-width: 0 !important; }
  table { width: 100% !important; max-width: 100% !important; }
  .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

  .modal-dialog {
    width: calc(100% - 24px) !important;
    margin: 12px auto !important;
  }
  #authModal .modal-body,
  #authModal .modal-content { max-width: 100% !important; overflow-x: hidden !important; }
}

@media (max-width: 575.98px) {
  .section { padding: 44px 0 !important; }
  #logo, .navbar-brand img { width: 132px !important; max-width: 56vw !important; }
  .navbar .container, .navbar .container-max,
  .container, .container-max, .section > .container, footer .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .surface { border-radius: 14px !important; }
  .actions-row .card .card-body,
  .card-body { padding: 16px !important; }
  footer { text-align: center !important; }
}

/* =====================================================================
   Zamapunji V219 - Final requested mobile refinements
   1) Shorter home carousel on mobile so Welcome widget appears on first view.
   2) Deposit/Withdrawal calendar alignment and width containment on phones.
   Desktop remains untouched; all rules are mobile/tablet scoped.
   ===================================================================== */

@media (max-width: 991.98px) {
  /* Reduce all three hero carousel slides from the bottom on mobile/tablet. */
  .hero-wrap {
    min-height: 0 !important;
    margin-bottom: 0 !important;
  }
  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item {
    height: clamp(300px, 52vh, 430px) !important;
    min-height: 300px !important;
    max-height: 430px !important;
  }
  #heroCarousel .carousel-item .slide-img,
  #heroCarousel .slide-img,
  #heroCarousel .carousel-item > img {
    height: 100% !important;
    min-height: 300px !important;
    max-height: 430px !important;
    object-fit: cover !important;
  }
  #heroCarousel .carousel-caption {
    bottom: 16px !important;
  }
  #heroCarousel .carousel-caption h1 {
    font-size: clamp(24px, 6.8vw, 34px) !important;
    line-height: 1.05 !important;
    margin-bottom: 8px !important;
  }
  #heroCarousel .carousel-caption p {
    font-size: 14px !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
  }
  #heroCarousel .carousel-caption .d-flex {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #heroCarousel .carousel-caption .btn {
    padding: 8px 14px !important;
    font-size: 14px !important;
  }
  #heroCarousel #tradingview_xauusd {
    height: 240px !important;
    max-height: 240px !important;
  }
  #heroCarousel .container,
  #heroCarousel .container-max {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  #actions.section {
    padding-top: 28px !important;
  }

  /* Calendar pages: keep year selector and quarter calendars centered and contained. */
  .calendar-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    align-items: center !important;
    text-align: center !important;
  }
  #yearSelector {
    width: auto !important;
    min-width: 120px !important;
    max-width: 180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    display: block !important;
  }
  .quarters-container {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    justify-content: center !important;
    align-items: stretch !important;
    overflow: hidden !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .quarter-block {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    transform: none !important;
  }
  .quarter-block:hover {
    transform: none !important;
  }
  .months-container {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .month {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
  }
  .month-name {
    text-align: center !important;
  }
  .days {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 3px !important;
    justify-items: stretch !important;
    align-items: center !important;
  }
  .day,
  .day-label {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 575.98px) {
  /* iPhone first-view target: carousel shorter so Welcome to Zamapunji is visible. */
  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item {
    height: clamp(265px, 42vh, 345px) !important;
    min-height: 265px !important;
    max-height: 345px !important;
  }
  #heroCarousel .carousel-item .slide-img,
  #heroCarousel .slide-img,
  #heroCarousel .carousel-item > img {
    height: 100% !important;
    min-height: 265px !important;
    max-height: 345px !important;
  }
  #heroCarousel .carousel-caption {
    left: 14px !important;
    right: 14px !important;
    bottom: 12px !important;
    max-width: calc(100% - 28px) !important;
  }
  #heroCarousel .carousel-caption h1 {
    font-size: clamp(22px, 6.4vw, 28px) !important;
  }
  #heroCarousel .carousel-caption p {
    font-size: 12.5px !important;
    line-height: 1.28 !important;
    margin-bottom: 6px !important;
  }
  #heroCarousel .carousel-caption .btn {
    padding: 7px 12px !important;
    font-size: 12.5px !important;
  }
  #heroCarousel #tradingview_xauusd {
    height: 190px !important;
    max-height: 190px !important;
  }
  #actions.section {
    padding-top: 22px !important;
  }
  #actions .text-center.mb-4 {
    margin-bottom: 14px !important;
  }
  #actions h2 {
    font-size: 24px !important;
  }

  /* Deposit/Withdraw calendars become single clean mobile column. */
  .quarters-container {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .quarter-block {
    padding: 11px !important;
    border-radius: 12px !important;
  }
  .quarter-title {
    font-size: 15px !important;
    margin-bottom: 8px !important;
    text-align: center !important;
  }
  .month {
    padding: 8px 7px !important;
    border-radius: 8px !important;
  }
  .month-name {
    font-size: 12px !important;
    margin-bottom: 5px !important;
  }
  .day-label {
    font-size: 9px !important;
  }
  .day {
    font-size: 10px !important;
    padding: 3px 1px !important;
  }
}

@media (max-width: 390px) {
  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item {
    height: 255px !important;
    min-height: 255px !important;
    max-height: 255px !important;
  }
  #heroCarousel .carousel-item .slide-img,
  #heroCarousel .slide-img,
  #heroCarousel .carousel-item > img {
    min-height: 255px !important;
    max-height: 255px !important;
  }
  #heroCarousel .carousel-caption p { display: none !important; }
}