/* Browser-specific CSS fixes for Maharaja Express website */

/* Chrome-specific fixes */
.browser-chrome .card {
  /* Fix Chrome card rendering issues */
  transform: translateZ(0);
  will-change: transform;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Specific fix for feature cards in Chrome */
.browser-chrome .feature-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 200px !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Chrome-specific gallery fixes */
.browser-chrome #gallery .card {
  height: 100% !important;
  position: relative !important;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  border-radius: 8px !important;
  overflow: hidden !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.browser-chrome #gallery .card a {
  display: block !important;
  height: 100% !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

.browser-chrome #gallery .card img {
  height: 200px !important; /* Fixed height to prevent stretching */
  width: 100% !important;
  max-width: 100% !important; /* Ensure responsive behavior */
  object-fit: cover !important; /* Maintain aspect ratio */
  transform: translateZ(0); /* Hardware acceleration */
  -webkit-transform: translateZ(0);
  will-change: transform;
  image-rendering: -webkit-optimize-contrast; /* Improve image quality in Chrome */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: block !important;
}

.browser-chrome #gallery .col-6,
.browser-chrome #gallery .col-md-4,
.browser-chrome #gallery .col-lg-3 {
  display: flex !important;
  height: 200px !important;
  margin-bottom: 16px !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

/* Column width fixes for responsive layout */
.browser-chrome #gallery .col-6 {
  flex: 0 0 50% !important;
  max-width: 50% !important; /* Ensure two columns on mobile */
}

@media (min-width: 768px) {
  .browser-chrome #gallery .col-md-4 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important; /* Three columns on medium screens */
  }
}

@media (min-width: 992px) {
  .browser-chrome #gallery .col-lg-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important; /* Four columns on large screens */
  }
}

.browser-chrome #gallery .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -8px !important;
  width: 100% !important;
}

/* Specific fix for Chrome gallery container */
.browser-chrome #gallery-container {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -8px !important;
  width: calc(100% + 16px) !important;
}

/* Fix for gallery-item-wrapper inside the flex container */
.browser-chrome .gallery-item-wrapper {
  height: 200px !important;
  position: relative !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure images maintain aspect ratio but fill container */
.browser-chrome .gallery-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

.browser-chrome img {
  /* Fix Chrome image rendering */
  image-rendering: -webkit-optimize-contrast;
}

.browser-chrome .navbar-brand {
  /* Fix Chrome logo alignment */
  display: flex !important;
  align-items: center !important;
}

.browser-chrome .card-img-top {
  /* Ensure correct rendering of card images in Chrome */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  object-fit: cover;
  height: 200px !important;
}

.browser-chrome .navbar {
  /* Fix Chrome navbar rendering issues */
  transform: translateZ(0);
  position: relative;
  z-index: 1030;
}

.browser-chrome .row {
  /* Fix Chrome flexbox issues */
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch;
}

.chrome-grid-fix {
  /* Fix Chrome grid issues */
  display: -ms-grid !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
}

/* Additional Chrome gallery fixes */
.browser-chrome .gallery-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.5) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}

.browser-chrome .gallery-card:hover .gallery-overlay {
  opacity: 1 !important;
}

.browser-chrome .gallery-card:hover .gallery-img {
  transform: scale(1.05) translateZ(0) !important;
  -webkit-transform: scale(1.05) translateZ(0) !important;
}

/* Safari-specific fixes */
.browser-safari .row {
  /* Fix Safari flexbox issues */
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.browser-safari .img-fluid {
  /* Fix Safari image proportions */
  width: 100%;
  height: auto;
}

/* Firefox-specific fixes */
.browser-firefox .card-img-top {
  /* Fix Firefox card image rendering */
  object-fit: cover;
}

.browser-firefox .navbar {
  /* Fix Firefox navbar rendering */
  width: 100%;
}

/* Edge-specific fixes */
.browser-edge .container {
  /* Fix Edge container rendering */
  width: 100%;
}

.browser-edge .row {
  /* Fix Edge row margin issues */
  margin-left: -15px !important;
  margin-right: -15px !important;
}

/* Fix badge rendering across browsers */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Fix flexbox issues across browsers */
.d-flex {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.align-items-center {
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.justify-content-center {
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

/* Fix Grid system across browsers */
.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

/* Fix image loading issues */
img {
  max-width: 100%;
  height: auto;
}

/* Fix Chrome's rendering of fixed elements */
.browser-chrome .position-fixed {
  transform: translateZ(0);
  will-change: transform;
}

/* Fix Chrome's rendering of images */
.browser-chrome img {
  transform: translateZ(0);
  backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Fix Chrome modal rendering */
.browser-chrome .modal {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Fix Chrome button rendering */
.browser-chrome .btn {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Fix for the features section cards that appear too tall */
.browser-chrome .row-cols-1.row-cols-md-2.row-cols-lg-4 .card {
  height: auto !important;
  max-height: 320px !important;
}

/* Fix for equal card heights in a row */
.browser-chrome .col {
  display: flex;
  margin-bottom: 1rem;
}

/* Specifically target the cards in the features section */
#features .card {
  height: auto !important;
  min-height: 0 !important;
}

/* Fix for padding issues that might be causing extra height */
.browser-chrome .card.p-3 {
  padding: 1rem !important;
}

.browser-chrome .card-body {
  flex: 1 0 auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.browser-chrome .card.h-100 {
  height: 100% !important;
  display: flex;
  flex-direction: column;
}

/* Ensure gallery cards maintain their position on hover in Chrome */
.browser-chrome .gallery-item-wrapper {
  overflow: hidden !important;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  position: relative;
  width: 100% !important;
  height: 200px !important;
  border-radius: 8px !important;
}

/* Prevent image stretching and improve quality in Chrome */
.browser-chrome .gallery-img {
  height: 200px !important;
  width: 100% !important;
  object-fit: cover !important;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Ensure image hover effects don't cause layout shifts */
.browser-chrome .gallery-card:hover .gallery-img {
  transform: scale(1.1) translateZ(0);
}

/* Fix blurry text in Chrome */
.browser-chrome #gallery .text-white {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Ensure images load properly in Chrome */
.browser-chrome .img-fluid.gallery-img {
  max-width: 100% !important;
  height: 200px !important;
  width: auto;
  object-fit: cover !important;
}