/*
  Global style definitions for the BUDDYWIFI website
  A sleek, futuristic aesthetic with neon accents and a dark backdrop.
*/

/* CSS custom properties for easy theming */
:root {
  --bg-color: #0b0c10;
  --primary-color: #0d6efd;     /* bold blue for primary actions */
  --secondary-color: #00ffd9;   /* neon cyan accent */
  --text-color: #e8e8e8;
  --muted-color: #cccccc;
  /* Reduce the hero overlay for the lighter sky‑blue hero image */
  --overlay-opacity: 0.15;
}

/* Reset some basic styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  background-color: var(--bg-color);
  color: var(--text-color);
  overflow-x: hidden;
}

a {
  color: var(--secondary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--primary-color);
}

/* Navigation bar styling */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

/* Toggle button for mobile navigation */
.menu-toggle {
  display: none;
  border: none;
  background: transparent;
  color: var(--text-color);
  font-size: 2rem;
  cursor: pointer;
}

/* Container for the logo in the navbar */
.logo-container {
  display: flex;
  align-items: center;
}

/* Logo image sizing */
/* Increase logo size to make it more prominent */
.logo-img {
  /* Increase the logo size slightly further for better visibility */
  height: 80px;
  width: auto;
}

.navbar .logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--secondary-color);
  letter-spacing: 1px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links li a {
  color: var(--text-color);
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-links li a:hover {
  color: var(--secondary-color);
}

/* Mobile navigation styles */
@media (max-width: 900px) {
  .menu-toggle {
    display: block;
  }
  .nav-links {
    position: fixed;
    right: 0;
    top: 70px;
    background: rgba(0, 0, 0, 0.95);
    flex-direction: column;
    gap: 1rem;
    padding: 0; /* no padding when collapsed */
    width: 240px;
    max-height: 0;
    overflow: hidden;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0;
    pointer-events: none;
    /* Prevent the items from peeking out of the nav when collapsed */
    visibility: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease, visibility 0.3s ease;
    z-index: 999;
  }
  .nav-links.open {
    max-height: 80vh;
    padding: 1rem 1.5rem;
    opacity: 1;
    pointer-events: auto;
    /* Make items visible when menu is open */
    visibility: visible;
  }
}

/* Video section styles */
.video {
  padding: 6rem 2rem 4rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
}

.video h2 {
  color: var(--secondary-color);
  margin-bottom: 1.5rem;
  font-size: 2rem;
}

.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  max-width: 800px;
  margin: 0 auto;
}

/* Ensure that any embedded videos or placeholders fill the video wrapper */
.video-wrapper iframe,
.video-wrapper .video-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  /* Maintain aspect ratio while filling the container */
  object-fit: cover;
}

/* Override object-fit specifically for video elements to ensure the entire video is visible */
.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: contain;
}

.video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed var(--secondary-color);
  color: var(--muted-color);
  font-size: 1.1rem;
}

/* Tokenomics & Rewards section */
.tokenomics {
  padding: 6rem 2rem 4rem;
  text-align: center;
}

.tokenomics h2 {
  color: var(--secondary-color);
  margin-bottom: 2rem;
  font-size: 2rem;
}

.token-grid {
  display: grid;
  /* Display up to five items in a single row on larger screens */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Force five columns on wider screens */
@media (min-width: 1024px) {
  .token-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.token-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.token-item h3 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.token-item p {
  color: var(--muted-color);
  font-size: 1rem;
}

/* Roadmap section styles */
.roadmap {
  padding: 6rem 2rem 4rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
}

.roadmap h2 {
  color: var(--secondary-color);
  margin-bottom: 2rem;
  font-size: 2rem;
}

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.roadmap-step {
  background: rgba(255, 255, 255, 0.05);
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.roadmap-step h3 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}

.roadmap-step p {
  color: var(--muted-color);
  font-size: 0.9rem;
}

/* FAQ section styles */
.faq {
  padding: 6rem 2rem 4rem;
  text-align: center;
}

.faq h2 {
  color: var(--secondary-color);
  margin-bottom: 2rem;
  font-size: 2rem;
}

.faq-item {
  max-width: 800px;
  margin: 0.5rem auto;
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  text-align: left;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.faq-item summary {
  color: var(--primary-color);
  font-weight: 600;
  cursor: pointer;
  outline: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item p {
  margin-top: 0.5rem;
  color: var(--muted-color);
  font-size: 1rem;
}

/* How it works section */
.how-it-works {
  padding: 6rem 2rem 4rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
}

.how-it-works h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--secondary-color);
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.how-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 2rem;
  border-radius: 0.5rem;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.how-item img {
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
}

.how-item h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.how-item p {
  font-size: 1rem;
  color: var(--muted-color);
  line-height: 1.6;
}

/* Hero section with full‑screen background and overlay */
.hero {
  background: url('hero-bg.png') center/cover no-repeat fixed;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
}


.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, var(--overlay-opacity));
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  padding: 2rem;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--secondary-color);
}

.hero-content p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: var(--muted-color);
}

/*
  Move the call‑to‑action button lower in the hero so it appears as if the
  BuddyWifi mascot is holding it.  We add extra margin above the button on
  larger screens and reduce it slightly on mobile for better fit.
*/
.hero-content .btn-router {
  /* Increase margin to lower the button so it aligns with the mascot's hands */
  margin-top: 13rem;
}

@media (max-width: 900px) {
  .hero-content .btn-router {
    margin-top: 8rem;
  }
}

.btn-primary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--primary-color);
  color: var(--bg-color);
  border-radius: 0.25rem;
  font-weight: 600;
  transition: background 0.3s ease;
}

.btn-primary:hover {
  background: var(--secondary-color);
}

/* Router button styling: shape resembles a Wi‑Fi router with a small antenna */
/*
   Custom button styled to resemble a Wi‑Fi router.  The base is a rounded rectangle
   with a LED indicator on the left and an antenna protruding from the top.  The
   button remains fully clickable and adopts our primary and secondary colours.
*/
.btn-router {
  position: relative;
  display: inline-block;
  padding: 1rem 2.2rem;
  /* Use a dark background so the button stands out against the bright hero */
  background: #0d111a;
  /* Neon text colour for high contrast */
  color: var(--secondary-color);
  border-radius: 0.6rem;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  cursor: pointer;
  overflow: visible;
  border: none;
}

/* LED indicator on the router base */
.btn-router::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 0.5rem;
  background: var(--secondary-color);
  border-radius: 50%;
}

/* Antenna protruding from the top centre */
.btn-router::after {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.35rem;
  height: 0.6rem;
  /* Use the secondary accent colour for the antenna to contrast with the dark base */
  background: var(--secondary-color);
  border-radius: 0.2rem 0.2rem 0 0;
}

.btn-router:hover {
  /* Slightly lighten the dark background on hover */
  background: #1a2231;
}

/* Features section */
.features {
  padding: 6rem 2rem 4rem;
  text-align: center;
}

.features h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--secondary-color);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.feature-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 2rem;
  border-radius: 0.5rem;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.feature-item h3 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: var(--primary-color);
}

.feature-item p {
  font-size: 1rem;
  color: var(--muted-color);
}

/* About section */
.about {
  padding: 4rem 2rem;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.about h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--secondary-color);
}

.about p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #dddddd;
}

/* Contact section */
.contact {
  padding: 4rem 2rem;
  text-align: center;
}

.contact h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--secondary-color);
}

.contact p {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.contact a {
  color: var(--primary-color);
}

.contact a:hover {
  color: var(--secondary-color);
}

/* Social media icon styling */
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.social-icon {
  width: 24px;
  height: 24px;
  /* Invert the black SVG icon to appear light on dark backgrounds */
  filter: invert(1);
}

/* Footer styling */
footer {
  text-align: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  color: #888;
  font-size: 0.9rem;
}

/* Cart page styles */
.cart {
  /* Extra padding on top to clear the fixed navbar */
  padding: 7rem 2rem 4rem;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.cart h1 {
  color: var(--secondary-color);
  margin-bottom: 2rem;
  font-size: 2rem;
}

.cart-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  /* Arrange the item content and remove button horizontally */
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.cart-item h3 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}

.cart-item p {
  color: var(--muted-color);
  margin: 0.25rem 0;
  font-size: 1rem;
}

.cart-total {
  font-size: 1.6rem;
  margin-top: 1.5rem;
  color: var(--secondary-color);
}

.paypal-container {
  margin-top: 2rem;
}

/* Button to remove individual items from the cart */
.remove-btn {
  background: none;
  border: none;
  color: var(--secondary-color);
  font-size: 1.4rem;
  cursor: pointer;
  margin-left: 0.5rem;
  transition: color 0.3s ease;
}
.remove-btn:hover {
  color: var(--primary-color);
}

/* Proceed to checkout button displayed when cart has items */
.proceed-btn {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.75rem 1.5rem;
  background: var(--primary-color);
  color: var(--bg-color);
  border-radius: 0.3rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.3s ease;
}
.proceed-btn:hover {
  background: var(--secondary-color);
}

/* Team page styles */
.team-header {
  padding: 6rem 2rem 2rem;
  text-align: center;
}

.team-header h1 {
  color: var(--secondary-color);
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.team-header p {
  font-size: 1.1rem;
  color: var(--muted-color);
}

.team-section {
  padding: 2rem;
}

.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.team-member {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
  padding: 2rem;
  max-width: 300px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
}

.team-member h3 {
  font-size: 1.5rem;
  color: var(--primary-color);
  margin-top: 1rem;
}

.team-member p {
  font-size: 1rem;
  color: var(--muted-color);
  margin: 0.5rem 0;
}

.team-photo {
  width: 100%;
  height: auto;
  border-radius: 50%;
}

/* Shop page specific styles */
.shop-header {
  padding: 8rem 2rem 3rem 2rem;
  text-align: center;
}

.shop-header h1 {
  color: var(--secondary-color);
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.product-list {
  padding: 2rem;
  display: flex;
  justify-content: center;
}

.product-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
  padding: 2rem;
  max-width: 350px;
  text-align: center;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.product-card img {
  max-width: 100%;
  height: auto;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
}

.product-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.product-card .price {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--secondary-color);
}

.product-card .description {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  color: var(--muted-color);
}

/* Modal for cart feedback */
.cart-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.cart-modal.show {
  display: flex;
}

.cart-content {
  background: var(--bg-color);
  padding: 2rem;
  border-radius: 0.5rem;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

.cart-content h2 {
  margin-bottom: 1rem;
  color: var(--secondary-color);
}

.cart-content p {
  margin-bottom: 1.5rem;
  color: var(--muted-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.5rem;
  }
  .hero-content p {
    font-size: 1.1rem;
  }
  .features h2 {
    font-size: 1.75rem;
  }
  .about h2 {
    font-size: 1.75rem;
  }
  .shop-header h1 {
    font-size: 2rem;
  }
  .product-card {
    margin: 0 1rem;
  }
}

/* Team page styles */
.team-header {
  padding: 8rem 2rem 3rem;
  text-align: center;
}

.team-header h1 {
  color: var(--secondary-color);
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.team-members {
  display: flex;
  justify-content: center;
  padding: 2rem;
}

.team-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
  padding: 2rem;
  max-width: 300px;
  text-align: center;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.team-card img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.team-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
  color: var(--primary-color);
}

.team-card p {
  margin-bottom: 0.5rem;
  color: var(--muted-color);
}