/* =====================================================
   PVII HARMONY – CLEAN PRODUCTION BUILD (CONSOLIDATED)
   -----------------------------------------------------
   PURPOSE:
   - Remove duplicate systems
   - Keep single source of truth per module
   - Preserve visual behavior while eliminating conflicts
===================================================== */

/* =====================================================
   1. RESET / FOUNDATION
===================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Montserrat', Arial, sans-serif;
  background: #fff;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* =====================================================
   2. PVII ROOT GRID
===================================================== */

.p7HMY {
  display: flex;
  flex-flow: row wrap;
  margin: auto;
}

.hmy-section {
  flex-grow: 1;
  display: flex;
  box-sizing: border-box;
}

.hmy-content-wrapper {
  width: 100%;
  box-sizing: border-box;
}

.hmy-content {
  padding: 20px;
  box-sizing: border-box;
}

/* =====================================================
   3. COLOR SYSTEM (SINGLE SOURCE)
===================================================== */

.p7HMY.hmy-color-root-mint,
.p7HMY .hmy-content-wrapper.hmy-color-content-mint { background: rgb(73,159,175); color: #000; }
.p7HMY.hmy-color-root-blue,
.p7HMY .hmy-content-wrapper.hmy-color-content-blue { background: rgb(69,114,150); color: #fff; }
.p7HMY.hmy-color-root-gray,
.p7HMY .hmy-content-wrapper.hmy-color-content-gray { background: rgb(134,134,134); color: #000; }
.p7HMY.hmy-color-root-black,
.p7HMY .hmy-content-wrapper.hmy-color-content-black { background: rgb(21,21,21); color: #fff; }
.p7HMY.hmy-color-root-white,
.p7HMY .hmy-content-wrapper.hmy-color-content-white { background: rgb(255,255,255); color: #000; }
.p7HMY.hmy-color-root-green,
.p7HMY .hmy-content-wrapper.hmy-color-content-green { background: rgb(126,188,89); color: #fff; }
.p7HMY.hmy-color-root-red,
.p7HMY .hmy-content-wrapper.hmy-color-content-red { background: rgb(251,11,11); color: #000; }
.p7HMY.hmy-color-root-skyblue,
.p7HMY .hmy-content-wrapper.hmy-color-content-skyblue { background: rgb(140,188,208); color: #000; }
.p7HMY.hmy-color-root-silver,
.p7HMY .hmy-content-wrapper.hmy-color-content-silver { background: rgb(230,219,201); color: #000; }
.p7HMY.hmy-color-root-purple,
.p7HMY .hmy-content-wrapper.hmy-color-content-purple { background: rgb(17,28,48); color: #fff; }
.p7HMY.hmy-color-root-beige,
.p7HMY .hmy-content-wrapper.hmy-color-content-beige { background: rgb(231,213,175); color: #000; }
.p7HMY.hmy-color-root-wine,
.p7HMY .hmy-content-wrapper.hmy-color-content-wine { background: rgb(167,27,27); color: #fff; }
.p7HMY.hmy-color-root-forest,
.p7HMY .hmy-content-wrapper.hmy-color-content-forest { background: rgb(107,138,85); color: #fff; }
.p7HMY.hmy-color-root-gold,
.p7HMY .hmy-content-wrapper.hmy-color-content-gold { background: rgb(226,160,71); color: #000; }
.p7HMY.hmy-color-root-orange,
.p7HMY .hmy-content-wrapper.hmy-color-content-orange { background: rgb(239,118,51); color: #fff; }

/* =====================================================
   4. LAYOUT SYSTEM
===================================================== */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.container.narrow { max-width: 800px; }
.container.text { max-width: 850px; }
.container.standard { max-width: 1000px; }
.container.wide { max-width: 1200px; }
.container.full { max-width: 100%; }

.section {
  padding: 40px 0;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* =====================================================
   5. TAB SYSTEM (SINGLE SOURCE)
===================================================== */

.tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
}

.tab-btn {
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  background: #e0e0e0;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  background: #fff7e6;
  transform: translateY(-2px);
  border-color: #C19A6B;
}

.tab-btn.is-active {
  background: linear-gradient(135deg, #b8860b, #d4af37);
  color: #fff;
  border-color: #b8860b;
  box-shadow: 0 4px 10px rgba(184,134,11,0.3);
}
/* =====================================================
   TAB SYSTEM – VISIBILITY CONTROL FIX
   (Fixes content stacking / falling down page)
===================================================== */

/* ALL tab panels hidden by default */
.tab-content,
.estimator-tab,
.package-estimator,
.build-estimator {
  display: none;
}

/* ONLY active tab content shows */
.tab-content.is-active,
.estimator-tab.is-active,
.package-estimator.is-active,
.build-estimator.is-active {
  display: block;
}

/* Safety override if Harmony system is interfering */
.bar-estimator .tab-content,
.bar-estimator .estimator-tab {
  display: none;
}

.bar-estimator .tab-content.is-active,
.bar-estimator .estimator-tab.is-active {
  display: block;
}
/* =====================================================
   BAR ESTIMATOR – TAB SPACING + WRAP FIX (FINAL)
   Fixes cramped edges + prevents button squish
===================================================== */

.bar-estimator .tabs {
  display: flex;
  flex-wrap: wrap;          /* ✅ Fix #2: allow wrapping */
  gap: 12px;
  padding: 0 16px;          /* ✅ Fix #1: side breathing room */
  margin: 10px 0 20px;      /* adds vertical spacing between groups */
}

/* Make buttons distribute nicely and stay readable */
.bar-estimator .tab-btn {
  flex: 1 1 auto;           /* allows responsive growth */
  text-align: center;
  min-width: 90px;          /* prevents tiny compressed buttons */
}

/* Optional: tighten on very small screens */
@media (max-width: 480px) {
  .bar-estimator .tabs {
    padding: 0 10px;
    gap: 8px;
  }

  .bar-estimator .tab-btn {
    min-width: 70px;
    font-size: 0.9rem;
    padding: 8px 10px;
  }
}

/* =====================================================
   6. GOLD UI SYSTEM (UNIFIED FINAL)
===================================================== */

.gold-card,
.date-btn,
.option-card {
  border: 2px solid #d4af37;
  border-radius: 10px;
  background: #fff;
  color: #333;
  padding: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
}

.gold-card:hover,
.date-btn:hover,
.option-card:hover {
  transform: translateY(-2px);
  background: #fff7e6;
}

.gold-card.is-active,
.date-btn.is-active,
.option-card.is-active,
.option-card:has(input:checked) {
  background: linear-gradient(135deg, #b8860b, #d4af37);
  color: #fff;
  border-color: #b8860b;
  box-shadow: 0 8px 20px rgba(184,134,11,0.25);
}

/* ================================
   BAR ESTIMATOR – STABILITY LOCK
   Prevents results from ever hiding
================================ */

.bar-estimator-box,
#barResults,
.bar-estimator .estimator-results,
.bar-result-card {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}
.bar-estimator .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 16px;
}
/* Ensure tabs NEVER hide results accidentally */
.bar-estimator .estimator-tab {
  display: block; /* override any legacy tab hiding */
}

.bar-estimator .estimator-tab.is-active {
  display: block;
}
.bar-grid-clean {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 20px 0;
}

.bar-item {
  border: 1px solid #ddd;
  padding: 18px;
  text-align: center;
  border-radius: 8px;
  background: #fff;
}

.bar-item-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.bar-item-number {
  font-size: 1.8rem;
  font-weight: bold;
}

.bar-item-sub {
  font-size: 0.9rem;
  color: #666;
}

/* =====================================================
   GUEST COUNT SLIDER – FULL WIDTH FIX
===================================================== */

/* Let the estimator section expand */
.pricing-estimator,
.guest-estimator,
.bar-estimator {
  width: 100%;
}

/* Kill container restriction ONLY for this module */
.pricing-estimator .container,
.guest-estimator .container {
  max-width: 100%;
}

/* Ensure the slider wrapper spans full width */
.slider-wrap,
.range-wrap {
  width: 100%;
}

/* Force the actual slider to stretch */
input[type="range"] {
  width: 100%;
  display: block;
}

/* If inside flex/grid, allow expansion */
.slider-wrap,
.range-wrap,
.bar-form-group {
  flex: 1 1 100%;
}

/* =====================================================
   8. MOBILE
===================================================== */

@media (max-width: 768px) {
  .section { padding: 20px 16px; }
  .container { max-width: 100%; padding: 0 12px; }
  .two-col { grid-template-columns: 1fr; }
  .bar-grid-clean { grid-template-columns: 1fr 1fr; }
  .tabs { overflow-x: auto; }
}

/* =====================================================
   9. UTILITIES
===================================================== */

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

#barResults,
.bar-estimator .estimator-results,
.bar-result-card {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* =====================================================
   MOBILE NAV / TAB BAR – FULL WIDTH RESTORE FIX
===================================================== */

@media (max-width: 768px) {

  /* FORCE NAV/TABS TO STAY FULL WIDTH */
  .tabs,
  .nav-tabs,
  .menu-tabs,
  .bar-tabs {
    display: flex !important;
    flex-direction: row !important;   /* prevents vertical stacking */
    flex-wrap: nowrap !important;
    width: 100% !important;
    justify-content: space-between;
    overflow-x: auto;                 /* allows scroll instead of squish */
    -webkit-overflow-scrolling: touch;
  }

  /* MAKE EACH TAB TAKE EQUAL SPACE */
  .tab-btn,
  .nav-item,
  .menu-item {
    flex: 1 1 auto !important;
    min-width: 90px;                 /* prevents ultra-squished buttons */
    text-align: center;
    white-space: nowrap;
  }

  /* PREVENT CONTAINER FROM COLLAPSING */
  .container,
  .bar-estimator-box {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* SAFETY: PREVENT VERTICAL MENU FALLBACK */
  nav ul,
  .navbar,
  .menu {
    display: flex !important;
    flex-direction: row !important;
  }
}