body, h1, h2, h3, p {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100vw;
  height: 100vh;
  padding: 0vh; /* Use viewport height for padding */
}

.magazine-viewport {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  position: relative;
}

#flipbook {
  width: 100%;
  height: 100%;
}

.page {
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* Fallback color if image fails to load */
  background-size: contain; /* Changed from 'cover' to 'contain' */
  background-position: center; /* Default to center the image */
  background-repeat: no-repeat; /* Default to not repeat */
  border-radius: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0%; /* Use percentage for padding */
  text-align: center;
  color: #fff;
  /*font-size: 1.1em;*/
}

.page h3, .page p {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  font-size: 1.5em; /* Make headers scale with page font size */
}

.cover-page {
  background-image: url('Pictures/جلد.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
  /* Make cover page a flex container to help position elements */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* important for children positioned relatively or absolutely within */
}

.page-image {
  max-width: 80%;
  height: auto;
  margin-top: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Base icon styles (can be overridden by specific icon classes) */
.icon {
  position: absolute; /* Kept for specific layered icons, but values will be relative */
  height: auto;
  z-index: 10;
}

/* --- Cover Page Specific Styles (using percentages for responsiveness) --- */
.page-inner {
  position: relative; /* Children will be positioned relative to this */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; /* Default for pages, can be overridden */
  justify-content: center;
  align-items: center;
}

.cover-icon {
    width: 30%; /* Relative to parent (.page-inner) width */
    /*max-width: 500px; /* Cap its size */
    top: 85%; /* Position from top */
    left: -5%; /* Position from left */
    transform: translateY(-50%); /* Center vertically relative to its top */
}

.cover-title {
    position: absolute;
    top: 6%; /* Relative positioning */
    left: 50%; /* Relative positioning */
    font-size: 2.0vw; /* Responsive font size */
    color: white;
    font-family:'B-NAZANIN';
    font-weight:bold;
    white-space: nowrap; /* Prevent wrapping for better control */
    animation: slideInRight 1s ease-out forwards;
}

.cover-subtitle {
    position: absolute;
    top: 88%; /* Relative positioning */
    left: 25%; /* Relative positioning */
    font-size: 1vw; /* Responsive font size */
    color: white;
    font-family:'B-NAZANIN';
    animation: shake 2s ease-in-out;
    white-space: nowrap;
}


/* --- Page 1 Specific Layout (using percentages and flexbox) --- */
.page-1-layout {
  display: grid; /* Use CSS Grid for complex layouts */
  grid-template-columns: 1fr 2fr; /* Two columns: left (icons) and right (text) */
  grid-template-rows: repeat(3, 1fr); /* Three rows for text/icons */
  gap: 1%; /* Small gap between grid items */
  padding: 5%;
}
.page-1-bg {
  background-image: url('Pictures/Picture6.png'); /* Replace with your image path */
  /* You can override background-size, background-position, etc. here if needed for this specific page */
}

.page1-icon1 {
  position:absolute;
  top:50%;
  left:60%;
  width: 80%; /* Responsive width */
  justify-self: center; /* Center horizontally in its grid cell */
  align-self: center; /* Center vertically in its grid cell */
  animation: slideInRight 7s ease-out forwards;
}



.page1-text {
  /* No longer part of the grid flow; uses absolute positioning like cover elements */
  position:absolute; /* */
  top: 10%; /* Adjust vertical position as needed */
  left: 25%; /* Adjust horizontal position as needed */
  font-size: 6.25vw; /* Responsive font size, scaled from 50px on 800px width */
  color: white;
  font-family:'B-NAZANIN';
  font-weight:bold;
  white-space: nowrap;
  animation: slideInRight 2s ease-out forwards;
  animation-delay: 0; /* Apply animation delay directly here */
}


/* --- Page 2 Specific Layout (with map and icon) --- */
.page-2-layout {
  position: relative; /* To contain absolutely positioned children like map and icon */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: flex-end; /* Align to the bottom for the map */
  padding: 20px; /* Add some padding to prevent elements from touching edges */
  box-sizing: border-box; /* Include padding in the element's total width and height */
}
.page-1-bg {
  background-image: url('Pictures/Picture6.png'); /* Replace with your image path */
  /* You can override background-size, background-position, etc. here if needed for this specific page */
}

.page2-icon1 {
  position: absolute; /* Keep absolute for specific positioning on top of or next to map */
  top: 5%; /* Adjusted for better placement relative to map */
  right: 30%; /* Adjusted for better placement relative to map */
  width: 60%; /* Responsive width, adjust as needed */
  max-width: 300px; /* Limit max size */
  z-index: 10; /* Ensure it's above the map */
  animation: slideInRight 4s ease-out forwards;
}

/* --- General Content Centering --- */
.page-content-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1rem; /* Space between elements */
}


/* --- Responsive Adjustments for Mobile Portrait --- */
@media (max-width: 768px) and (orientation: portrait) {
  body {
    padding: 0; /* Remove padding to maximize space on mobile */
  }

  .magazine-viewport {
    width: 100vw; /* Take full viewport width */
    height: 100vh; /* Take most of viewport height */
    border-radius: 0; /* No rounded corners for fullscreen feel */
  }

  .page {
    padding: 0%; /* Reduced padding for smaller screens */
    font-size: 0.9em; /* Slightly smaller base font size */
  }

  .icon {
    max-width: 60px; /* Smaller max-width for icons on mobile */
  }

  /* Adjust cover page elements for mobile portrait */
  .cover-icon {
      width: 25%; /* Slightly larger on mobile */
      max-width: 80px;
      top: 85%;
      left: 5%;
  }

  .cover-title {
      font-size: 5vw; /* Larger font for mobile */
      top: 10%;
      left: 50%;
  }

  .cover-subtitle {
      font-size: 3.5vw; /* Larger font for mobile */
      top: 90%;
      left: 50%;
  }

  /* Adjust Page 1 elements for mobile portrait */
  .page-1-layout {
    /* Kept for potential other elements, but page1-text will be absolute */
    grid-template-columns: 1fr; /* Stack elements in a single column */
    grid-template-rows: auto; /* Rows size automatically */
    gap: 1rem; /* More space when stacked */
  }

  .page1-icon1 {
    /* Per user's request, leaving original mobile styles for icons */
    position: absolute;
    top:50%;
    left:60%;
    width: 80%; /* Responsive width */
    justify-self: center;
    align-self: center;
  }

  .page1-text {
    /* For mobile, also use absolute positioning for consistency */
    position: absolute;
    top: 10%; /* Adjust vertical position for mobile */
    left: 30%; /* Center horizontally */
    /*transform: translateX(-50%); /* For perfect horizontal centering */
    font-size: 20vw; /* Even larger responsive font for mobile page 1 text */
    text-align: center; /* Center text when stacked */
    white-space: normal; /* Allow text to wrap if needed */
  }

  /* Adjust Page 2 elements for mobile portrait */
  .page-2-layout {
    flex-direction: column; /* Ensure vertical stacking */
    justify-content: flex-end; /* Push map to the bottom */
    align-items: center; /* Center horizontally */
  }

  .page2-icon1 {
    /* Per user's request, leaving original mobile styles for icons */
    position: absolute;
    top: 5%;
    right: 20%;
    width: 75%;
    max-width: 350px;
    z-index: 10;
  }

  .map-container {
    /* REMOVED !important to fix mobile fullscreen map size */
    width: 160px; /* Smaller width for minimized mobile map */
    height: 120px; /* Smaller height for minimized mobile map */
    bottom: 20%; /* Keep it off the very bottom edge */
    right: 20%; /* Center horizontally */
    /*transform: translateX(50%); /* Correct centering for absolute positioned elements */
  }

  .map-toggle-btn {
    font-size: 0.8em; /* Smaller button text */
    padding: 3px 6px; /* Smaller padding */
  }
}

/* Base Animations (no change) */
@font-face {
  font-family: 'B-NAZANIN';
  src: url('B-NAZANIN.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@keyframes fadeInRight {
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}

.fade-in-right { animation: fadeInRight 5s ease-out forwards; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in { animation: fadeIn 5s ease-out forwards; }

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

/* page-inner remains relative for its children */
/* The general .page-inner styles are handled at the top of this CSS. */
/* Specific page-inner layouts (e.g., .page-1-layout) are defined below. */

#zoom-container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Map container styles */
.map-container {
  width: 250px; /* Small default width */
  height: 180px; /* Small default height */
  position: absolute; /* Position relative to .page-inner */
  bottom: 10%; /* Distance from bottom */
  right: 30%; /* Distance from right */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid #ddd;
  background: #f5f5f5;
  display: flex; /* Use flex to ensure map and controls are laid out correctly */
  flex-direction: column; /* Stack map and controls vertically */
  z-index: 50; /* Ensure it's above other page content but below fullscreen overlay */
  transition: all 0.3s ease-in-out; /* Smooth transition for fullscreen toggle */
}

/* Fullscreen mode (when map-container is inside the modal) */
.map-container.fullscreen {
  width: 100%; /* Take full width of its parent (the modal) */
  height: 100%; /* Take full height of its parent (the modal) */
  position: relative; /* Reset position for inside modal */
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

/* Map element */
#map {
  flex-grow: 1; /* Allow map to take available space */
  width: 100%;
  height: 100%;
}

/* Toggle button */
.map-controls {
    position: absolute; /* Position relative to .map-container */
    top: 10px;
    right: 10px;
    z-index: 1001; /* Ensure it's above the map tiles */
}

.map-toggle-btn {
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  white-space: nowrap; /* Prevent button text from wrapping */
}
.map-toggle-btn:hover {
  background: #f5f5f5;
}

/* NEW: Map Modal Overlay Styles */
.map-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
  display: flex; /* Use flexbox to center map */
  justify-content: center;
  align-items: center;
  z-index: 2000; /* Ensure it's on top of everything */
  opacity: 0; /* Hidden by default */
  visibility: hidden; /* Hidden by default */
  transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; /* Smooth fade, then hide */
}

.map-modal-overlay.active {
  opacity: 1; /* Show when active */
  visibility: visible; /* Show when active */
  transition: opacity 0.3s ease-in-out; /* Smooth fade in */
}