/* =========================================================
   TailGrids page fixes (scoped) — CTA + FAQ
   Scope: .tg-amz-namegen
   ========================================================= */




.amazon-tool-heading h1 {
  font-weight: 900 !important;
  color: #333 !important;
  letter-spacing: -2px !important;
}

@media (max-width: 768px) {
    .amazon-tool-heading h1 {
        font-size: 2rem !important;
    }
}

/* Safety: keep this CSS from leaking outside the page */
.tg-amz-namegen { 
  /* nothing here on purpose */
}

/* ---------- CTA (TailGrids) ---------- */
.tg-amz-namegen .tg-cta,
.tg-amz-namegen .tg-cta * {
  box-sizing: border-box;
}

.tg-amz-namegen .tg-cta a,
.tg-amz-namegen .tg-cta a:link,
.tg-amz-namegen .tg-cta a:visited {
  text-decoration: none !important;
  color: inherit;
}

.tg-amz-namegen .tg-cta .container {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* TailGrids CTA card */
.tg-amz-namegen .tg-cta .relative.z-10.overflow-hidden.rounded-sm.bg-primary {
  background: #FF6F5E !important;
  border-radius: 0.25rem !important; /* rounded-sm */
  overflow: hidden !important;
}

/* Ensure CTA text colors aren’t overwritten */
.tg-amz-namegen .tg-cta .text-white {
  color: #fff !important;
}

.tg-amz-namegen .tg-cta .text-primary {
  color: #FF6F5E !important;
}

/* CTA button (the white button) */
.tg-amz-namegen .tg-cta a.inline-flex.rounded-md.bg-white {
  background: #fff !important;
  color: #FF6F5E !important;
  border-radius: 0.375rem !important; /* rounded-md */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.75rem 1.75rem !important; /* py-3 px-7 */
  font-weight: 500 !important;
  line-height: 1.5 !important;
  border: 0 !important;
}

/* Prevent theme link-hover styles from breaking the CTA button */
.tg-amz-namegen .tg-cta a.inline-flex.rounded-md.bg-white:hover {
  filter: brightness(0.98);
}

/* Fix common Elementor/theme overrides that collapse SVG positioning */
.tg-amz-namegen .tg-cta svg,
.tg-amz-namegen .tg-cta img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ---------- FAQ (TailGrids / Alpine) ---------- */
.tg-amz-namegen .tg-faq,
.tg-amz-namegen .tg-faq * {
  box-sizing: border-box;
}

.tg-amz-namegen .tg-faq .container {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Ensure the FAQ cards look like TailGrids */
.tg-amz-namegen .tg-faq .rounded-lg.bg-white {
  background: #fff !important;
  border-radius: 0.5rem !important;
}

/* Ensure the FAQ card shadow shows (themes sometimes remove/override it) */
.tg-amz-namegen .tg-faq .shadow-\[0px_4px_18px_0px_rgba\(0\,0\,0\,0\.07\)\] {
  box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.07) !important;
}

/* Fix buttons getting theme styles (borders/background/uppercase/etc.) */
.tg-amz-namegen .tg-faq button.faq-btn {
  all: unset; /* removes theme button styling completely */
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}

/* Restore the intended typography after all:unset */
.tg-amz-namegen .tg-faq button.faq-btn h4 {
  margin: 0 !important;
  font-weight: 600 !important;
  color: #111928 !important; /* text-dark */
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

/* TailGrids icon pill (+ / -) */
.tg-amz-namegen .tg-faq .icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 2rem !important;  /* h-8 */
  width: 2rem !important;   /* 32px */
  max-width: 32px !important;
  border-radius: 9999px !important;
  border: 2px solid #FF6F5E !important; /* border-primary */
  color: #FF6F5E !important;             /* text-primary */
  font-weight: 600 !important;
  line-height: 1 !important;
  background: transparent !important;
}

/* FAQ content text */
.tg-amz-namegen .tg-faq .faq-content p {
  margin: 0 !important;
  padding-top: 1.5rem !important; /* pt-6 */
  color: #637381 !important;      /* text-body-color */
  font-size: 1rem !important;     /* text-base */
  line-height: 1.625 !important;
}

/* If any theme sets p margin/padding weirdly inside accordion */
.tg-amz-namegen .tg-faq p,
.tg-amz-namegen .tg-faq h2,
.tg-amz-namegen .tg-faq h4 {
  margin-block: 0 !important;
}

/* Optional: match your Tailwind responsive heading sizes a bit closer */
@media (min-width: 540px) {
  .tg-amz-namegen .tg-faq button.faq-btn h4 { font-size: 1.125rem !important; } /* sm:text-lg */
}
@media (min-width: 720px) {
  .tg-amz-namegen .tg-faq button.faq-btn h4 { font-size: 1.25rem !important; } /* md:text-xl */
}
@media (min-width: 960px) {
  .tg-amz-namegen .tg-faq button.faq-btn h4 { font-size: 1.5rem !important; }  /* lg:text-2xl */
}


/* ─────────────────────────────────────────────
   TailGrids Amazon Name Generator – minor fixes
   File: tg-amz-namegen-fixes.css
   ───────────────────────────────────────────── */

/* Letter spacing */
.tg-amz-namegen h2 {
  letter-spacing: -2px !important;
}

.tg-amz-namegen h4 {
  letter-spacing: -1px !important;
}

/* CTA text weight: “Find the Right Amazon Keywords” + button text */
.font-medium {
  font-weight: 700 !important;
}

.tg-amz-namegen .tg-cta a.inline-flex.rounded-md.bg-white {
  font-weight: 700 !important;
}