/* Flip card container */
.flip-card-container {
  perspective: 1500px;
  width: 100%;
  min-height: 750px;
  height: 100%;
}

/* Flip card wrapper */
.flip-card {
  position: relative;
  width: 100%;
  min-height: 750px;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

/* When flipped */
.flip-card.flipped {
  transform: rotateY(180deg);
}

/* Both card faces */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  min-height: 750px;
  height: 100%;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Front face - KEEP ORIGINAL STYLING */
.flip-card-front {
  z-index: 2;
  transform: rotateY(0deg);
}

/* Back face - FLEXIBLE HEIGHT */
.flip-card-back {
  transform: rotateY(180deg);
  z-index: 1;
  overflow: visible;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem 0;
}

/* Form container - FLUID AND RESPONSIVE */
.flip-card-back > div {
  width: 100%;
  max-width: 90%; /* Fluid max-width */
  padding: 1.5rem 1rem !important;
  height: auto;
  margin: 0 auto;
  box-sizing: border-box;
}

/* KEEP ALL ORIGINAL RESERVATION CARD STYLES FOR FRONT SIDE */
.reservation-card {
  background-color: #f9f5ec !important;
  padding: 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reservation-card-container {
  padding: 3rem;
  height: 100%;
}

.reservation-card-inner {
  padding: 2rem;
  text-align: center;
}

/* Image section styling - KEEP ORIGINAL HEIGHT */
.image-section {
  height: 100%;
  overflow: hidden;
}

.image-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Desktop view - Ultra compact form container */
@media (min-width: 992px) {
  .flip-card-back {
    padding: 1rem 0 !important;
    align-items: flex-start !important;
    overflow: visible !important;
    max-height: none !important;
  }

  .flip-card-back .row {
    display: block !important;
  }

  .flip-card-back .col-sm-6 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* ULTRA COMPACT SPACING */
  .flip-card-back .mb-5 {
    margin-bottom: 1.25rem !important; /* Reduced from 2rem */
  }

  .flip-card-back .mb-4 {
    margin-bottom: 0.75rem !important; /* Reduced from 1.25rem */
  }

  .flip-card-back .mb-3 {
    margin-bottom: 0.75rem !important;
  }

  .flip-card-back > div {
    max-width: 450px; /* Smaller container */
    padding: 1.5rem 1.25rem 2rem 1.25rem !important; /* Added bottom padding to prevent cutoff */
    margin: 0 auto !important;
    min-height: auto !important;
  }

  /* More compact form controls */
  .flip-card-back .form-control {
    padding: 0.4rem 0.75rem; /* More compact */
    font-size: 0.85rem;
    height: 2.5rem; /* Fixed height */
  }

  .flip-card-back .form-label {
    margin-bottom: 0.25rem !important; /* Tighter */
    font-size: 0.75rem;
  }

  /* Compact button spacing */
  .flip-card-back .col-12 {
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important; /* Add bottom margin */
  }

  /* Smaller headings */
  .flip-card-back h2 {
    font-size: 1.5rem; /* Smaller heading */
    margin-bottom: 0.75rem !important;
  }

  .flip-card-back .lead {
    font-size: 0.85rem; /* Smaller text */
    line-height: 1.3;
    margin-bottom: 0 !important;
  }

  /* Make the label title smaller */
  .flip-card-back .label-title {
    font-size: 0.7rem;
    margin-bottom: 0.5rem !important;
  }
}

/* Large screens (1440px and above) - MODERATELY BIGGER FORM */
@media (min-width: 1440px) {
  .flip-card-back > div {
    max-width: 500px; /* Reduced from 550px */
    padding: 2rem 1.5rem 2.5rem 1.5rem !important; /* Added bottom padding */
  }

  .flip-card-back .mb-5 {
    margin-bottom: 1.5rem !important; /* Reduced from 2rem */
  }

  .flip-card-back .mb-4 {
    margin-bottom: 1rem !important; /* Reduced from 1.25rem */
  }

  .flip-card-back .form-control {
    padding: 0.5rem 0.75rem; /* Reduced from 0.6rem */
    font-size: 0.9rem; /* Reduced from 0.95rem */
    height: 2.75rem; /* Reduced from 3rem */
  }

  .flip-card-back .form-label {
    margin-bottom: 0.35rem !important; /* Reduced from 0.4rem */
    font-size: 0.8rem; /* Reduced from 0.85rem */
  }

  .flip-card-back .col-12 {
    margin-top: 1.25rem; /* Reduced from 1.5rem */
  }

  .flip-card-back h2 {
    font-size: 1.6rem; /* Reduced from 1.75rem */
    margin-bottom: 0.75rem !important; /* Reduced from 1rem */
  }

  .flip-card-back .lead {
    font-size: 0.9rem; /* Reduced from 0.95rem */
  }

  .flip-card-back .label-title {
    font-size: 0.75rem; /* Reduced from 0.8rem */

    margin-bottom: 0.6rem !important; /* Reduced from 0.75rem */
  }
}

/* Extra large screens (4K and ultrawide) - MODERATELY LARGER FORM */
@media (min-width: 1920px) {
  .flip-card-back > div {
    max-width: 550px; /* Reduced from 650px */
    padding: 2.5rem 2rem !important; /* Reduced padding */
  }

  .flip-card-back .mb-5 {
    margin-bottom: 2rem !important; /* Reduced from 2.5rem */
  }

  .flip-card-back .mb-4 {
    margin-bottom: 1.25rem !important; /* Reduced from 1.5rem */
  }

  .flip-card-back .form-control {
    padding: 0.6rem 0.85rem; /* Reduced from 0.8rem */
    font-size: 0.95rem; /* Reduced from 1rem */
    height: 3rem; /* Reduced from 3.5rem */
  }

  .flip-card-back .form-label {
    margin-bottom: 0.4rem !important; /* Reduced from 0.5rem */
    font-size: 0.85rem; /* Reduced from 0.9rem */
  }

  .flip-card-back .col-12 {
    margin-top: 1.5rem; /* Reduced from 2rem */
  }

  .flip-card-back h2 {
    font-size: 1.75rem; /* Reduced from 2rem */
    margin-bottom: 1rem !important; /* Reduced from 1.25rem */
  }

  .flip-card-back .lead {
    font-size: 0.95rem; /* Reduced from 1rem */
  }

  .flip-card-back .label-title {
    font-size: 0.8rem; /* Reduced from 0.9rem */

    margin-bottom: 0.75rem !important; /* Reduced from 1rem */
  }
}
/* Medium screens (tablets and small laptops) - EVEN MORE COMPACT */
@media (min-width: 768px) and (max-width: 1199px) {
  .flip-card-back > div {
    max-width: 400px; /* Even smaller */
    padding-bottom: 2rem !important; /* Add bottom padding */
  }

  /* Super tight spacing */
  .flip-card-back .mb-5 {
    margin-bottom: 1rem !important;
  }

  .flip-card-back .mb-4 {
    margin-bottom: 0.5rem !important;
  }

  .flip-card-back .col-12 {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem !important; /* Add bottom margin */
  }

  .flip-card-back h2 {
    font-size: 1.35rem;
    margin-bottom: 0.5rem !important;
  }

  .flip-card-back .lead {
    font-size: 0.8rem;
  }
}

/* Mobile view */
@media (max-width: 991px) {
  /* Stack the layout on mobile */
  .no-gutters > .container-fluid > .row {
    flex-direction: column;
  }

  .flip-card-back {
    padding: 0.75rem 0 !important;
    align-items: flex-start !important;
  }

  .flip-card-back > div {
    max-width: 100% !important; /* Full width on mobile */
    padding: 1.25rem 1rem !important; /* Better padding for mobile */
    margin: 0 !important;
  }

  /* KEEP 2 COLUMNS ON MOBILE - 2 fields per row */
  .flip-card-back .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
  }

  .flip-card-back .col-sm-6 {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Better spacing for mobile */
  .flip-card-back .mb-5 {
    margin-bottom: 1.25rem !important;
  }

  .flip-card-back .mb-4 {
    margin-bottom: 0.75rem !important;
  }

  .flip-card-back .mb-3 {
    margin-bottom: 0.75rem !important;
  }

  .flip-card-back .col-12 {
    margin-top: 1rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    /* Keep buttons side by side on mobile */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* Button container adjustments for mobile - keep side by side */
  .flip-card-back .col-12 button {
    flex: 1 1 auto !important;
    min-width: 120px !important;
    max-width: calc(50% - 0.25rem) !important;
    margin: 0 !important;
  }

  /* Better form controls for mobile */
  .flip-card-back .form-control {
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    height: auto !important;
    min-height: 3rem !important;
  }

  .flip-card-back .form-label {
    margin-bottom: 0.5rem !important;
    font-size: 0.9rem !important;
  }

  .flip-card-back h2 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
  }

  .flip-card-back .lead {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
  }

  .flip-card-back .label-title {
    font-size: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }
}

/* Small mobile adjustments */
@media (max-width: 576px) {
  .flip-card-back {
    padding: 0.5rem 0 !important;
  }

  .flip-card-back > div {
    max-width: 100% !important; /* Full width on very small screens */
    padding: 1rem 0.75rem !important;
    margin: 0 !important;
  }

  .flip-card-back .mb-5 {
    margin-bottom: 1rem !important;
  }

  .flip-card-back .mb-4 {
    margin-bottom: 0.75rem !important;
  }

  .flip-card-back .mb-3 {
    margin-bottom: 0.75rem !important;
  }

  /* Keep 2 columns even on very small screens */
  .flip-card-back .col-sm-6 {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
    margin-bottom: 0.625rem !important;
  }

  .flip-card-back .col-12 {
    margin-top: 0.75rem !important;
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
    gap: 0.5rem !important;
  }

  /* Keep buttons side by side on small screens too */
  .flip-card-back .btn {
    flex: 1 1 auto !important;
    min-width: 100px !important;
    max-width: calc(50% - 0.25rem) !important;
    margin: 0 !important;
  }

  .flip-card-back .btn-wide {
    min-width: 100px !important;
    max-width: calc(50% - 0.25rem) !important;
  }

  /* Better form controls for very small screens */
  .flip-card-back .form-control {
    padding: 0.7rem 0.875rem !important;
    font-size: 0.95rem !important;
    min-height: 2.875rem !important;
  }

  .flip-card-back .form-label {
    font-size: 0.875rem !important;
  }

  .flip-card-back h2 {
    font-size: 1.35rem !important;
  }

  .flip-card-back .lead {
    font-size: 0.9rem !important;
  }
}

/* Allow natural flow without scrollbars */
.flip-card-back {
  overflow: visible !important;
}

.flip-card-back > div {
  overflow: visible !important;
  box-sizing: border-box !important;
}

.flip-card-back form {
  overflow: visible !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.flip-card-back form .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
  max-width: 100%;
}

.flip-card-back form [class*="col-"] {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  box-sizing: border-box;
}

/* Ensure the row elements equal height */
.no-gutters > .container-fluid > .row {
  display: flex;
  flex-wrap: wrap;
}

.no-gutters > .container-fluid > .row > .col,
.no-gutters > .container-fluid > .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

/* Reduce only the white space between sections on mobile */
@media (max-width: 991px) {
  /* Target the specials section that comes after the reservation section */
  #res + section#special {
    padding-bottom: 1rem !important; /* Reduced from 8rem */
  }

  /* Also reduce the inner spacing of the specials section */
  #special .mb-5.pb-5 {
    margin-bottom: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* Mobile view - Shorten the entire flip card container */
@media (max-width: 991px) {
  .flip-card-container,
  .flip-card,
  .flip-card-front,
  .flip-card-back {
    min-height: 600px !important; /* Reduce from 750px */
    height: auto !important;
    max-height: 100vh !important; /* Prevent overflow */
  }

  .flip-card-back {
    max-height: 100% !important;
    overflow-y: auto !important;
  }

  .flip-card-front .reservation-card {
    min-height: 600px !important;
    height: auto !important;
  }

  .flip-card-front .reservation-card-container {
    padding: 2rem 1.5rem !important;
  }

  .flip-card-front .reservation-card-inner {
    padding: 1.5rem !important;
  }
}
#res.consistent-spacing {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

@media (min-width: 992px) {
  .image-section img {
    height: 51rem !important;
  }
}