/* Global Base Styles */
body {
  margin: 0;
  padding: 0;
  background: #EAE4DD; /* Main background color */
  font-family: 'Poppins', 'Abhaya Libre', Arial, sans-serif; /* Main font */
  color: #000; /* Main text color */
}

/* Page Main Content Wrapper */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: filter 0.3s ease-in-out; /* Transition for background blur */
  scroll-behavior: smooth; /* Smooth scrolling */
}
.page-wrapper.search-active {
  filter: blur(5px); /* Blur background content when search is active */
}

/* New: Common Site Logo Image Style */
.site-logo {
    height: 40px; /* Default Logo height */
    width: auto;
    object-fit: contain;
    vertical-align: middle; /* Help with vertical alignment */
}

/* New: Common Back Button Image Style */
.common-back-button-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    cursor: pointer;
    vertical-align: middle; /* Help with alignment */
}

/* New: Common Class for Hidden Pages, Ensures Element is Not Visible */
.hidden-page {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    z-index: -1 !important;
}

/* ---------- New Media Queries ---------- */

/* Mobile Device Styles (e.g., screen width <= 768px) */
@media (max-width: 768px) {
  body, .page-wrapper { /* New: Force remove body and page-wrapper top whitespace on mobile */
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .navbar { /* Hide desktop navigation bar */
    display: none !important; /* Use !important to override other styles */
  }

  #new-homepage-content { /* Hide desktop main page content */
    display: none !important;
  }

  #mobile-main-app-view { /* Show mobile main app view */
    display: flex !important; /* Use flex because its internal is flex layout */
  }

  /* If search overlay is not needed on mobile, it can be hidden here */
  /* #search-overlay {
    display: none !important;
  } */

  /* All other specific to "page" containers should be hidden on mobile unless they are part of mobile view */
  /* For example, if product details page etc are not immediately shown on mobile homepage */
  #product-detail-page,
  #about-page-content,
  #cakes-page-content,
  #wishlist-page-content,
  #payment-page-content,
  #thank-you-page-content {
    /* Ensure these are not accidentally displayed in mobile view when mobile view is priority */
    /* display: none; */ /* This may need JS to control which page to display */
  }
}

/* Tablet and Desktop Device Styles (e.g., screen width > 768px) */
@media (min-width: 769px) {
  #mobile-main-app-view { /* Hide mobile main app view */
    display: none !important;
  }

  /* Ensure desktop elements are visible (if they were previously globally hidden) */
  .navbar {
    display: flex !important; /* Or table, block etc, depending on original display type */
  }

  #new-homepage-content {
    display: block !important; /* Or other original display type */
  }
}

/* You may also need to add specific display/hide logic for #search-overlay,
    because it may be present in both desktop and mobile but trigger and style differently.
    Currently, #search-overlay has its own close button and display logic controlled by JS,
    these media queries are mainly for ensuring main page layout switch.
*/