* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

html,
body {
  height: 100%;
  overflow: hidden; /* Prevent scrolling on body - KEEP THIS */
}

/* --- Icon Font Replacements (using Unicode in ::before) --- */
.icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-weight: normal; /* Reset potential bolding */
  margin-right: 0.3em; /* Default spacing */
  vertical-align: middle; /* Align icons better */
}
.icon::before {
  font-family:
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* Use system emoji fonts */
  font-size: 1.1em; /* Default icon size adjustment */
  line-height: 1;
}

/* Specific Icons */
.icon-language::before {
  content: "🌐";
}
.icon-shield::before {
  content: "🛡️";
  font-size: 1.2em;
} /* Slightly larger */
.icon-rocket::before {
  content: "🚀";
}
.icon-device::before {
  content: "💻";
} /* Replaced laptop-house */
.icon-delivery::before {
  content: "🚚";
}
.icon-gift::before {
  content: "🎁";
}
.icon-money-bag::before {
  content: "💰";
}
.icon-apple::before {
  content: "📱"; /* Using generic phone for better compatibility than Apple logo */
  margin-right: 0.2em;
}
.icon-share::before {
  content: "↑";
  display: inline-block;
  border: 1px solid currentColor;
  padding: 0 0.1em 0.1em 0.1em;
  margin: 0 0.2em;
  line-height: 0.8;
  border-radius: 2px;
} /* Basic share icon representation */
.icon-android::before {
  content: "🤖";
  margin-right: 0.2em;
} /* Robot */
.icon-ellipsis::before {
  content: "⋮";
  font-weight: bold;
  font-size: 1.3em;
}
.icon-browser::before {
  content: "🌐";
} /* Generic browser/web */
.icon-download::before {
  content: "📥";
  font-size: 1.1em;
} /* Inbox tray */
.icon-desktop::before {
  content: "🖥️";
}
.icon-globe::before {
  content: "🌐";
}
.icon-menu::before {
  content: "☰";
  font-weight: bold;
}

/* --- PWA Install Container --- */
.pwa-install-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Full viewport height */
  background: linear-gradient(
    135deg,
    #fff8e1 0%,
    #ffecb3 100%
  ); /* Very Light Yellow to Pale Yellow */
  background-size: 200% 200%;
  animation: gradientShift 20s ease infinite;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Align card to the top of the container */
  z-index: 10000;
  overflow-y: auto; /* Allow scrolling *within* the container if content overflows */
  padding: 80px 20px 40px 20px; /* Generous top padding for logo, bottom padding for scroll space */
  position: relative; /* Needed for pseudo-element */
}

/* Texture Overlay - MODIFICATION: Replaced image with CSS gradient */
.pwa-install-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Subtle diagonal lines pattern */
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.02) 10px,
    rgba(0, 0, 0, 0.02) 12px
  );
  opacity: 0.5; /* Adjust opacity of the pattern */
  pointer-events: none; /* Don't interfere with clicks */
  z-index: -1; /* Ensure it's behind the content */
}

/* --- Card Wrapper & Card --- */
.pwa-card-wrapper {
  perspective: 1200px;
  width: 100%; /* Allow wrapper to take full width for centering */
  display: flex; /* Use flex to center the card horizontally easily */
  justify-content: center; /* Center card horizontally */
}

.pwa-card {
  background: rgba(255, 255, 240, 0.98); /* Ivory, slightly more opaque */
  border-radius: 35px; /* Rounded rectangle */
  width: 90%;
  max-width: 480px; /* Slightly wider max-width */
  min-height: 600px; /* Adjusted height for language switcher */
  height: auto; /* Allow height to adjust */
  padding: 30px 40px 40px 40px; /* Reduced top padding */
  text-align: center;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  transform-style: preserve-3d;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Space out content vertically */
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border */
  margin-top: 60px; /* Half the logo container height to roughly center the card visually below it */
  margin-bottom: 20px; /* Ensure some space at the bottom */
}

.pwa-card:hover {
  transform: scale(1.01); /* Very subtle zoom instead of tilt */
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
}

/* --- Language Switcher --- */
.lang-switcher {
  position: absolute;
  top: 20px;
  right: 25px;
  background: #fff3e0; /* Light Orange to match features */
  border: 1px solid #ffe0b2;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #f57c00; /* Vibrant Orange */
  cursor: pointer;
  transition:
    background 0.3s ease,
    color 0.3s ease;
  z-index: 15; /* Above logo container slightly */
}
.lang-switcher:hover {
  background: #ffe0b2;
  color: #e64a19;
}
.lang-switcher .icon {
  /* Adjust icon spacing */
  margin-right: 4px;
}

/* --- Logo --- */
.logo-container {
  position: absolute;
  top: -60px; /* Position half its height above the card's top edge */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  width: 120px;
  height: 120px;
  background: radial-gradient(
    circle,
    #fffacd 40%,
    #ffd700 100%
  ); /* LemonChiffon to Gold */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  z-index: 10; /* Ensure logo is above card content */
}

.pwa-logo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #eee; /* Placeholder if image fails */
  object-fit: cover; /* If using img tag */
  animation: sizzle 2.5s ease-in-out infinite alternate;
}

/* --- Text Elements --- */
h1 {
  color: #d32f2f; /* Spicy red */
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;
  margin-top: 10px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}

.subtitle {
  color: #388e3c; /* Fresh basil green */
  font-size: 16px;
  margin-bottom: 15px;
  font-weight: 500;
  font-style: italic;
}

.why-pwa {
  color: #4e342e; /* Rich chocolate brown */
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 0 10px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Features --- */
.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  width: 100%;
  max-width: 380px; /* Control max width */
  margin: 25px auto; /* Center grid */
}

.feature {
  background: #ffecb3; /* Light peach */
  border-radius: 15px;
  padding: 12px 10px;
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
  display: flex; /* Align icon and text vertically */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.feature:hover {
  background: #ffe082; /* Brighter peach */
  transform: scale(1.05);
}

.feature .icon {
  /* Feature icon styling */
  font-size: 28px;
  color: #ef5350; /* Warm red */
  margin-bottom: 8px; /* Space below icon */
  margin-right: 0; /* Reset horizontal margin */
}
.feature .icon::before {
  font-size: 1em; /* Make feature icons consistent size */
}

.feature h3 {
  color: #4e342e;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

/* --- Instructions --- */
.instructions {
  margin: 20px 0;
  width: 100%;
  font-size: 13px;
  color: #4e342e;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.platform-instructions {
  margin: 10px 0; /* Increased vertical spacing slightly */
  padding: 12px 15px; /* Slightly more padding */
  border-radius: 10px;
  background: #fff8e1; /* Lighter background */
  border: 1px solid #ffecc1; /* Subtle border */
  display: flex; /* Use flex */
  align-items: flex-start; /* Align icon/text to top */
  gap: 8px; /* Space between icon and text block */
  text-align: left;
  font-size: 12px;
  color: #4e342e;
  line-height: 1.5; /* Improve readability */
}
/* Instruction icon styling */
.platform-instructions > .icon:first-child {
  /* Target the icon directly if it's the first child */
  color: #f57c00; /* Orange icon color */
  font-size: 18px;
  min-width: 20px; /* Ensure alignment */
  text-align: center;
  margin-right: 0; /* Gap handles spacing */
  margin-top: 1px; /* Fine-tune vertical alignment */
  flex-shrink: 0; /* Prevent icon from shrinking */
}
.platform-instructions > .icon:first-child::before {
  font-size: 1em; /* Ensure icon size matches font-size */
}
/* Style for inline icons within instruction text */
.platform-instructions .text-content .icon {
  color: #e65100; /* Slightly darker orange for inline icons */
  font-size: 1em; /* Match surrounding text size */
  margin: 0 0.1em; /* Adjust spacing slightly */
}
.platform-instructions .text-content .icon::before {
  font-size: 1em; /* Ensure inline icons match text size */
}

.platform-instructions strong {
  font-weight: 600; /* Make platform names bold */
  color: #4e342e;
}
.platform-instructions .text-content {
  flex-grow: 1; /* Allow text to take remaining space */
}

/* --- Install Button --- */
.install-btn {
  position: relative; /* Needed for bite effect */
  background: linear-gradient(45deg, #ef5350, #f44336); /* Warm red gradient */
  color: white;
  border: none;
  padding: 15px 40px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  margin-top: 25px;
  display: inline-flex; /* Align icon and text */
  align-items: center;
  gap: 10px;
}

.install-btn:hover {
  background: linear-gradient(45deg, #f44336, #ef5350);
  box-shadow: 0 5px 20px rgba(239, 83, 80, 0.5);
  transform: translateY(-2px); /* Subtle lift */
}

.install-btn:active {
  transform: translateY(0); /* Revert lift */
  box-shadow: 0 3px 10px rgba(239, 83, 80, 0.3);
}

.install-btn .btn-text {
  position: relative;
  z-index: 1;
}

.bite-effect {
  /* Original bite effect styles */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 30% 70%,
    transparent 20%,
    rgba(255, 255, 255, 0.3) 21%,
    transparent 22%
  );
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.install-btn:hover .bite-effect {
  opacity: 1;
  animation: bite 0.5s ease; /* Link to original bite animation */
}

.install-btn.hidden {
  /* Class to hide button if needed */
  display: none;
}

/* --- Animations --- */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) translateZ(0) rotateX(0) rotateY(0);
  }
  50% {
    transform: translateY(-10px) translateZ(5px) rotateX(2deg) rotateY(2deg);
  }
}

@keyframes sizzle {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes bite {
  /* Original bite animation */
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* --- Media Queries --- */
@media (max-width: 768px) {
  /* Tablet */
  .pwa-install-container {
    padding: 60px 15px 30px 15px; /* Adjust padding */
  }
  .pwa-card {
    max-width: 420px;
    min-height: 0; /* Allow card to shrink */
    padding: 25px 30px 30px 30px; /* Adjust padding */
    margin-top: 60px; /* Keep space for logo */
  }
  h1 {
    font-size: 24px;
    margin-top: 5px;
  }
  .subtitle {
    font-size: 15px;
  }
  .why-pwa {
    font-size: 13px;
  }
  .features {
    gap: 12px;
    margin: 20px auto;
  }
  .feature .icon {
    font-size: 26px;
  }
  .feature h3 {
    font-size: 12px;
  }
  .instructions {
    font-size: 12px;
    margin: 15px auto;
  }
  .platform-instructions {
    padding: 10px 12px;
    gap: 8px;
    font-size: 11px;
  }
  .platform-instructions > .icon:first-child {
    font-size: 16px;
  }
  .install-btn {
    padding: 12px 30px;
    font-size: 15px;
    margin-top: 20px;
  }
  .lang-switcher {
    top: 15px;
    right: 20px;
    font-size: 11px;
    padding: 4px 8px;
  }
}

@media (max-width: 480px) {
  /* Mobile */
  .pwa-install-container {
    padding: 50px 10px 85px 10px;
  }
  .pwa-card {
    max-width: 95%; /* Use more screen width */
    min-height: auto; /* Let height adjust */
    padding: 20px 20px 25px 20px; /* Adjust padding */
    border-radius: 25px;
    margin-top: 50px; /* Adjust for smaller logo */
  }

  .logo-container {
    top: -50px; /* Adjust relative position */
    width: 100px;
    height: 100px;
  }

  .pwa-logo {
    width: 80px;
    height: 80px;
  }

  h1 {
    font-size: 22px;
    margin-top: 5px; /* Adjust */
  }

  .subtitle {
    font-size: 14px;
    margin-bottom: 12px;
  }
  .why-pwa {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 15px;
    padding: 0 5px;
  }

  .features {
    grid-template-columns: repeat(2, 1fr); /* Keep 2 columns */
    gap: 10px;
    margin: 15px auto;
    max-width: 90%;
  }
  @media (max-width: 360px) {
    .features {
      grid-template-columns: 1fr;
    }
  }

  .feature {
    padding: 10px;
  }
  .feature .icon {
    font-size: 24px;
  }
  .feature h3 {
    font-size: 11px;
  }

  .instructions {
    margin: 15px auto;
    font-size: 11px;
    max-width: 90%;
  }
  .platform-instructions {
    padding: 10px 10px;
    gap: 6px;
    font-size: 10px;
    margin: 8px 0;
  }
  .platform-instructions > .icon:first-child {
    font-size: 15px;
  }

  .install-btn {
    padding: 12px 25px;
    font-size: 14px;
    width: calc(100% - 20px); /* Full width button adjusted */
    margin-left: 10px;
    margin-right: 10px;
    justify-content: center; /* Center icon/text */
    margin-top: 20px;
  }
  .lang-switcher {
    top: 10px;
    right: 15px;
    font-size: 10px;
    padding: 3px 6px;
  }
}
/* Ensure enough height for logo even on landscape short screens */
@media (max-height: 500px) and (min-width: 481px) {
  /* Landscape mobile/short tablet */
  .pwa-install-container {
    padding-top: 70px; /* Ensure logo space */
  }
  .pwa-card {
    margin-top: 50px; /* Ensure card sits below logo */
    padding-top: 15px;
  }
  h1 {
    margin-top: 0;
  }
}

/* --- Footer --- */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 20px 40px;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 13px;
  color: #4e342e;
  z-index: 10001;
}

.footer .company-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.footer .contact-info {
  display: flex;
  justify-content: center;
  gap: 15px;
  align-items: center;
}

.footer .icon {
  margin-right: 5px;
}