/* ============================================
   SUPPORT & SHOP – GLOBAL STYLES (styles.css)
   ============================================
   Page-level layout, shared design tokens, and
   base mobile overrides. 

   RULE: Do NOT add module-specific rules here.
   Every module style belongs in modules.css so
   that editing one module never leaks into
   another.
   ============================================ */

/* --------------------------------------------
   1. PAGE SHELL & BACKGROUND
   -------------------------------------------- */
body {
  margin: 0;
  font-family: Poppins, sans-serif;
  background: linear-gradient(135deg, #ff7b00, #ff0095);
  min-height: 100vh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  /* display: flex; */
  justify-content: center;
  align-items: center;
  position: relative;
  opacity: 0;
  transition: opacity 0.4s ease;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="120" height="120" filter="url(%23n)" opacity="0.035"/></svg>');
  pointer-events: none;
}

body.page-visible {
  opacity: 1;
}

body.page-fade-out {
  opacity: 0;
}

/* --------------------------------------------
   2. MAIN LAYOUT CONTAINERS
   -------------------------------------------- */
.container-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 60px 0;
  box-sizing: border-box;
}

.container {
  max-width: 600px;
  width: 90%;
  background: #fff;
  border-radius: 28px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  text-align: center;
  position: relative;
}

/* --------------------------------------------
   3. SITE HEADER
   -------------------------------------------- */
.top-logo {
  width: 550px;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------
   4. SITE FOOTER
   -------------------------------------------- */
.footer {
  margin-top: 30px;
  font-size: 12px;
  color: #555;
  text-align: center;
  white-space: nowrap;
}

.footer img {
  width: 100px;
  margin-bottom: 6px;
}

.footer a {
  text-decoration: none;
  color: inherit;
}

/* --------------------------------------------
   5. SHARED DESIGN TOKENS
   --------------------------------------------
   These classes appear inside many modules.
   They are kept global so every module gets
   the same base look. If a module needs to
   differ, override it in modules.css under
   that module's container.
   -------------------------------------------- */

/* Widget title – used by almost every module */
.widget-title {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px 0;
  line-height: 1.2;
  color: #333;
}

/* Social buttons – used by "Other Ways" and 
   "Support Us On Social Media" modules */
.social-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
  padding-bottom: 0;
}

.social-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7b00, #ff0095);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.social-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

.social-btn::before {
  content: "";
  width: 26px;
  height: 26px;
  background-color: #fff;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* Platform icons */
.social-btn.facebook::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/facebook.svg");
}
.social-btn.instagram::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/instagram.svg");
}
.social-btn.x::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/x.svg");
}
.social-btn.tiktok::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/tiktok.svg");
}
.social-btn.youtube::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/youtube.svg");
}
.social-btn.paypal::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/paypal.svg");
}
.social-btn.venmo::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/venmo.svg");
}
.social-btn.cashapp::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/cashapp.svg");
}
.social-btn.kofi::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/kofi.svg");
}
.social-btn.gofundme::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/gofundme.svg");
}
.social-btn.justgiving::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/justgiving.svg");
}
.social-btn.zelle::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/zelle.svg");
}
.social-btn.square::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/square.svg");
}
.social-btn.patreon::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/patreon.svg");
}
.social-btn.stripe::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/stripe.svg");
}
.social-btn.githubsponsors::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/githubsponsors.svg");
}

/* --------------------------------------------
   6. BASE TYPOGRAPHY RESET
   -------------------------------------------- */
h1 {
  margin-bottom: 0;
  font-size: 24px;
  text-transform: uppercase;
}

/* ============================================
   7. MOBILE – GLOBAL ONLY
   ============================================ */
@media screen and (max-width: 480px) {
  body {
    background: #fff;
    padding: 0;
    align-items: stretch;
  }

  
  .container-wrapper {
    width: 92%;
    padding: 0;
    margin: 0 auto;
  }

  .container {
    padding: 0px;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
    width: 100%;
  }

  .top-logo {
    width: 250px;
  }

  .footer {
    white-space: normal;
  }

  .footer strong {
    white-space: nowrap;
  }

  .social-btn {
    width: 48px;
    height: 48px;
  }

  .social-btn::before {
    width: 22px;
    height: 22px;
  }
}