/* =====================================================
   SERVICE PAGES — FULL FONT SIZE RESTORATION
   Overrides Tailwind preflight & main.purged.min.css resets
   Restores exact Bootstrap 5 defaults used in reference
   ===================================================== */
body { font-size: 1rem; line-height: 1.5; font-family: 'Inter', system-ui, -apple-system, sans-serif !important; color: #212529 !important; }
h1, .h1 { font-size: calc(1.375rem + 1.5vw); font-weight: 700 !important; line-height: 1.2 !important; margin-bottom: 0.5rem !important; color: inherit !important; }
h2, .h2 { font-size: calc(1.325rem + .9vw); font-weight: 700 !important; line-height: 1.2 !important; margin-bottom: 0.5rem !important; color: inherit !important; }
h3, .h3 { font-size: calc(1.3rem + .6vw); font-weight: 700 !important; line-height: 1.2 !important; margin-bottom: 0.5rem !important; color: inherit !important; }
h4, .h4 { font-size: calc(1.275rem + .3vw); font-weight: 600 !important; line-height: 1.2 !important; margin-bottom: 0.5rem !important; color: inherit !important; }
h5, .h5 { font-size: 1.25rem; font-weight: 600 !important; line-height: 1.2 !important; color: inherit !important; }
h6, .h6 { font-size: 1rem; font-weight: 600 !important; line-height: 1.2 !important; color: inherit !important; }
p { font-size: 1rem; line-height: 1.5; margin-top: 0 !important; margin-bottom: 1rem; color: #212529; }
.text-muted { color: #6c757d !important; font-size: 1rem; }
strong, b { font-weight: 700 !important; }
small, .small { font-size: 0.875em; }
.lead { font-size: 1.25rem; font-weight: 300 !important; }
.card-title { font-size: 1.25rem; font-weight: 600 !important; }
#pricing-header { font-size: 1.5rem !important; font-weight: 700 !important; }
.food-menu-heading { font-size: 1.5rem !important; font-weight: 700 !important; }
.offer-title { font-size: 1rem !important; font-weight: 600 !important; }
@media (min-width: 1200px) {
    h1, .h1 { font-size: 2.5rem; }
    h2, .h2 { font-size: 2rem; }
    h3, .h3 { font-size: 1.75rem; }
    h4, .h4 { font-size: 1.5rem; }
}
@media (max-width: 767.98px) {
    body { font-size: 0.9375rem; }
    h1, .h1 { font-size: 1.75rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
    h4, .h4 { font-size: 1.125rem; }
    p { font-size: 0.9375rem; }
}

/* Meal Section Tight Layout Fix (Forces single-line on desktop) */
@media (min-width: 992px) {
    #meal-section .d-flex.flex-row.flex-wrap {
        flex-wrap: nowrap !important;
    }
}
#meal-section .d-flex.flex-row.flex-wrap > div {
    margin-right: 0.5rem !important; /* Tighter gap like reference */
    flex-shrink: 0;
}
#meal-section .col-auto + .col {
    padding-left: 0 !important; /* Bring icons closer to the badge */
}
#meal-section i {
    font-size: 1.5rem !important; /* Shrink icons slightly to match reference tight layout */
}
#meal-section p {
    font-size: inherit; /* Remove the previous override and let inline styles take over */
}
/* Only tighten the specific meal item labels and times */
#meal-section .d-flex.flex-row.flex-wrap p {
    margin-bottom: 0px !important; 
    line-height: 1.2 !important;
}
#meal-section .d-flex.flex-row.flex-wrap p:last-child {
    color: #777 !important; /* Force the lighter color for times */
    font-size: 0.8rem !important; /* Ensure the time range font-size is correct */
}
#meal-section .col-auto div {
    padding: 0.4rem 0.75rem !important; /* Slightly tighter badge to save space */
}

    @media(min-width:768px) {
      .left-col-fixed {
        max-width: 100%;
      }
    }

    .carousel-inner img {
      object-fit: cover;
      height: 100%;
      max-height: 410px;
    }

    a {
      color: #000;
    }

    .pill-button-group {
      border: 1px solid #ddd;
      border-radius: 9999px;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      width: auto;
    }

    .pill-btn {
      border: none;
      background: none;
      padding: .75rem 1.5rem;
      font-weight: 500;
      border-radius: 50px;
      margin: 5px;
      transition: background-color .3s;
      cursor: pointer;
    }

    .btn-inactive {
      color: #6c757d;
    }

    .btn-inactive:hover {
      background-color: #f8f9fa;
    }

    .btn-active {
      background-color: #28A3DC;
      color: #fff;
    }

    .btn-active:hover {
      color: #fff;
    }





    .mint-card {
      background-color: #F1F8FF;
      border: 1px solidrgb(255, 228, 146);
      border-radius: 8px;
      padding: 1.5rem;
      margin-top: 1rem;
    }

    .btn-mint {
      background-color: #28A3DC;
      color: #fff;
      border: none;
      transition: background-color .3s;
    }

    .btn-mint:hover {
      background-color: #28A3DC;
      color: #ffffff;
    }

    .info-box {
      background: #f2f8ff;
      border: 1px dashed #aaa;
      border-radius: 8px;
      padding: 1rem;
      margin-bottom: 1rem;
    }

    .info-box .info-item {
      display: flex;
      align-items: start;
      gap: .75rem;
      margin-bottom: 1rem;
    }

    .info-box .info-item:last-child {
      margin-bottom: 0;
    }

    .info-icon {
      font-size: 1.5rem;
      color: #002a3f;
      margin-top: 3px;
    }

    .custom-tab-container {
      background-color: #fff;
      border-radius: 1rem;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
      padding: .75rem 1rem;
    }

    .custom-tab-container .nav-tabs {
      border-bottom: none;
      justify-content: center;
    }

    .custom-tab-container .nav-link {
      border: none;
      border-radius: 0;
      margin: 0 1rem;
      color: #333;
      font-weight: 500;
      padding-bottom: .5rem;
    }

    .custom-tab-container .nav-link.active {
      color: #002a3f;
      position: relative;
    }

    .custom-tab-container .nav-link.active::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #002a3f;
    }

    .food-menu-heading {
      font-size: 1.5rem;
      font-weight: 700;
      margin-top: 2rem;
      margin-bottom: 1rem;
    }

    .day-nav .nav-link {
      border-radius: 0;
      color: #333;
      font-weight: 500;
    }

    .day-nav .nav-link.active {
      background-color: #f2f8ff;
      ;
      color: #002a3f;
      border: none;
      position: relative;
    }

    .day-nav .nav-link.active::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 5px;
      height: 100%;
      background-color: #28A3DC;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }

    .menu-panel {
      background-color: #f2f8ff;
      ;
      border-radius: 8px;
      padding: 1rem;
    }

    .meal-column {
      background: #fff;
      border-radius: 6px;
      padding: 1rem;
      margin-bottom: .5rem;
    }

    .meal-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: #002a3f;
      margin-bottom: .25rem;
    }

    .meal-time {
      font-size: .9rem;
      color: #666;
      margin-bottom: .75rem;
      border-bottom: 1px solid #ddd;
      padding-bottom: .25rem;
    }

    .meal-item {
      border-bottom: 1px solid #eee;
      padding: .25rem 0;
      margin-bottom: .25rem;
    }

    .meal-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }

    .sticky-right {
      position: sticky;
      top: 0;
    }

    a {
      text-decoration: none;
    }

    .rentbtn {
      font-family: inter, sans-serif;
      color: #000;
      text-decoration: none;
    }

    .nav-tabs:hover {
      color: #000;
    }

    .carousel-inner {
      height: 410px;
      /* Fixed height for the carousel */
      border-radius: 20px;
      overflow: hidden;
    }

    .carousel-item {
      height: 100%;
    }

    .carousel-inner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }


    /* Custom Switch Styles */
    .custom-switch {
      position: relative;
      display: inline-block;
      width: 48px;
      height: 24px;
      margin-left: 10px;
    }

    .custom-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .custom-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: .4s;
      border-radius: 34px;
    }

    .custom-slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }

    input:checked+.custom-slider {
      background-color: #4D4C4D;
    }

    input:checked+.custom-slider:before {
      transform: translateX(24px);
    }

    input:focus-visible+.custom-slider {
      box-shadow: 0 0 0 3px rgba(101, 162, 72, 0.25);
    }

    html {
      scroll-behavior: smooth;
    }

    /* Common custom tab container styles */
    .custom-tab-container {
      background-color: #fff;
      position: sticky;
      z-index: 10;
      border-bottom: 1px solid #dee2e6;
    }

    .btn:hover {
      background-color: #28A3DC;
      color: white;
    }

    /* Large devices: top offset 120px */
    @media (min-width: 768px) {
      .custom-tab-container {
        top: 120px;
      }

      /* When clicking an anchor, the section will appear 120px from the top */
      #occupancy-section,
      #amenities-section,
      #details-section,
      #other-section{
        scroll-margin-top: 170px;
      }
      #meal-section,
      #services-section{
          scroll-margin-top:180px;
      }
      #meal-section{
          scroll-margin-top:190px;
      }
      
    }

    /* Small devices: top offset 70px */
    @media (max-width: 767.98px) {
      .custom-tab-container {
        top: 60px;
      }

      #occupancy-section,
      #amenities-section,
      #details-section,
      #services-section{
        scroll-margin-top: 150px;
      }
      #meal-section{
          scroll-margin-top:155px;
      }
    }

    /* Outer container to hold the vertical label and the offers stack */
    .offers-section {
      display: flex;
      align-items: flex-start;
    }

    /* Vertical text on the left side */
    .offers-label {
      writing-mode: vertical-rl;
      /* vertical text top-to-bottom */
      transform: rotate(180deg);
      /* flip it so it's readable bottom-to-top */
      font-weight: bold;
      font-size: 14px;
      color: #333;
      margin-right: 20px;
    }

    /* Container for the two colored boxes */
    .offers-container {
      width: 380px;
      /* adjust as needed */
      position: relative;
      /* allow overlapping child elements */
      overflow: visible;
      /* ensure overlap is visible */
    }

    /* Common styling for both offer boxes */
    .offer-box {
      position: relative;
      /* so z-index can be applied */
      border-radius: 10px;
      /* 'pill' shape corners */
      margin-bottom: 16px;
      color: #fff !important;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .offer-box p {
      color: #fff !important;
    }

    /* Top offer box (purple) */
    .offer-box.purple {
      background-color: #0f5275;
      z-index: 2;
      /* keep this box on top */
    }

    /* Bottom offer box (pink) */
    .offer-box.pink {
      background-color: #4D4C4D;
      margin-top: -30px;
      /* pull the pink box up behind the purple */
      z-index: 1;
      /* so it's behind the purple box */
    }

    /* Header of each box: title, link, and arrow */
    .offer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
    }

    /* Container for the main text on the left side */
    .offer-header-left {
      display: flex;
      flex-direction: column;
      /* so "title" is on top, "See X apartments" is below */
      gap: 2px;
    }

    .offer-title {
      font-size: 16px;
      font-weight: 700 !important; /* Forces bold heading as requested */
      margin: 0;
    }
    .offer-body p {
      font-weight: 400 !important; /* Ensures the description is normal text weight */
      color: #fff !important;      /* Guarantee white text color */
      font-size: 0.95rem !important; /* Slightly smaller cleaner text */
    }

    .offer-subtitle {
      font-size: 14px;

      margin: 0;
    }

    /* Arrow on the right */
    .arrow {
      font-size: 16px;
      transition: transform 0.3s ease;
    }

    /* Collapsible body: hidden by default */
    .offer-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
      background-color: #fff;
      color: #333;
      padding: 0 20px;
      /* Collapsed state: no vertical padding */
    }

    /* When the box is open, reveal the body */
    .offer-box.open .offer-body {
      padding: 15px 20px;
      max-height: 200px;
      /* adjust if you have more text */
    }

    /* Rotate the arrow when open */
    .offer-box.open .arrow {
      transform: rotate(180deg);
    }
    .swal2-confirm{
        background-color:black;
        color:white;
    }
      @media (max-width: 768px) {
    .custom-tab-container .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .custom-tab-container .nav-tabs .nav-item {
    flex: 1;
    text-align: center;
    margin: 0;
    padding: 0;
  }
  .custom-tab-container .nav-tabs .nav-link {
    padding: 1rem 0.2rem; /* Adjust as needed */
    margin: 0;
    font-size: 0.9rem; /* Optional: adjust font size for better fit */
  }
}

    #sticky-sidebar {
    position: sticky;
    top: 20px; /* Adjust top spacing */
    align-self: flex-start;
  }