/* 
 * Surya Hotel - Responsive Styles 
 */

/* General Responsive Fixes */
@media (max-width: 991px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 768px) {
  /* Add some bottom padding to body so the sticky footer doesn't hide content */
  body {
    padding-bottom: 70px; /* Adjust based on the sticky bar height */
  }

  /* Typography adjustments for mobile */
  h1, .text-60 { font-size: 40px !important; line-height: 1.2 !important; }
  h2, .text-50 { font-size: 32px !important; line-height: 1.3 !important; }
  h3, .text-40 { font-size: 28px !important; line-height: 1.3 !important; }
  h4, .text-30 { font-size: 24px !important; line-height: 1.4 !important; }
  
  /* Sections padding adjustments */
  .section-pt { padding-top: 60px !important; }
  .section-pb { padding-bottom: 60px !important; }
  .layout-pt-lg { padding-top: 60px !important; }
  .layout-pb-lg { padding-bottom: 60px !important; }
  .layout-pt-md { padding-top: 40px !important; }
  .layout-pb-md { padding-bottom: 40px !important; }

  /* Forms and Search components */
  .searchFormItem {
    width: 100%;
    margin-bottom: 10px;
  }
}

/* Mobile Sticky Action Bar */
.mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  padding: 10px 15px;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eeeeee;
}

.mobile-sticky-bar .action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #333333;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  flex: 1;
  text-align: center;
  transition: color 0.3s ease;
}

.mobile-sticky-bar .action-btn i {
  font-size: 20px;
  margin-bottom: 4px;
}

.mobile-sticky-bar .action-btn:hover,
.mobile-sticky-bar .action-btn:active {
  color: #cda274; /* Theme accent color */
}

.mobile-sticky-bar .action-btn.-primary {
  background-color: #cda274;
  color: #ffffff;
  padding: 8px 15px;
  border-radius: 4px;
  flex: 1.5;
}

.mobile-sticky-bar .action-btn.-primary i {
  display: none; /* Hide icon for the primary button if preferred, or keep it */
}

.mobile-sticky-bar .action-btn.-primary span {
  font-size: 14px;
  font-weight: 600;
}

.mobile-sticky-bar .action-btn.-primary:hover,
.mobile-sticky-bar .action-btn.-primary:active {
  background-color: #b5895b;
  color: #ffffff;
}

@media (max-width: 768px) {
  .mobile-sticky-bar {
    display: flex;
  }

}

/* Push page titles down globally to prevent fixed header overlap */
.page-title, .entry-title, section.layout-pt-lg h1.text-64 {
  margin-top: 100px !important;
  text-align: center;
}

@media (max-width: 768px) {
  section.layout-pt-lg h1.text-64 {
}

/* 
 * Additional Static Audit Fixes 
 */

@media (max-width: 768px) {
  /* Missing Checkbox Mobile Wraps */
  .searchFormItem,
  .form-group {
    width: 100% !important;
    display: block !important;
    margin-bottom: 15px;
  }
  
  .form-checkbox, .form-radio {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  /* Button Text Overflow */
  .button, .btn, .action-btn {
    white-space: normal !important;
    text-align: center;
    padding: 10px 15px;
  }

  /* Table Overflow */
  .table-responsive,
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Image scaling reset just in case */
}

/* 
 * Browser Audit Responsive Fixes (Dynamic)
 */

@media (max-width: 768px) {
  /* Offset body padding for sticky bottom bar to prevent clipping */
  body {
    padding-bottom: 80px !important; 
  }
  
  /* Ensure header clears properly on search results */
  .search-results-page main {
    padding-top: 100px;
  }

  /* Move Testimonial arrows down so they don't overlap text */
  .testimonials-slider .swiper-button-prev,
  .testimonials-slider .swiper-button-next {
    top: auto;
    bottom: 0;
    margin-top: 0;
  }
}