#fw-section-hero-0 {
--color-primary: #dc0c0c;
--color-primary-rgb: 220, 12, 12;
--color-background: #1c131c;
--color-background-rgb: 28, 19, 28;
--color-on-background: #da1213;
--color-on-background-rgb: 218, 18, 19;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-product-image-background: #da1213;
--color-background-brightness: 23;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #1c131c;
--primary-btn-text: #da1213;
--primary-btn-border-color: #dc0c0c;
--secondary-btn-bg: transparent;
--secondary-btn-text: #da1213;
--secondary-btn-border-color: #da1213;

}









#fw-section-custom-html-d0ed1edd-d518-4443-96ca-cf02a48db02b {

/* ═══ MANAL'S PLAYGROUND THEME ═══ */

/* Import matching font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Global dark theme */
:root {
  --color-bg: #030712;
  --color-surface: #111827;
  --color-border: rgba(255,255,255,0.05);
  --color-text: #f3f4f6;
  --color-text-muted: #9ca3af;
  --color-blush: #EC4899;
  --color-royal: #7C3AED;
}

body, html {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* All sections dark */
section, div[class*="section"], div[class*="Section"],
.section, main, header, footer, nav,
div[class*="container"], div[class*="Container"],
div[class*="wrapper"], div[class*="Wrapper"],
div[class*="block"], div[class*="Block"],
div[class*="hero"], div[class*="Hero"] {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* Cards and elevated surfaces */
div[class*="card"], div[class*="Card"],
div[class*="panel"], div[class*="Panel"],
div[class*="tile"], div[class*="Tile"],
div[class*="product"], div[class*="Product"],
div[class*="membership"], div[class*="Membership"],
div[class*="tier"], div[class*="Tier"] {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 16px !important;
}

/* Headings — gradient text */
h1, h2, h3 {
  background: linear-gradient(to right, var(--color-blush), var(--color-royal)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 900 !important;
}

h4, h5, h6 {
  color: var(--color-text) !important;
  font-weight: 700 !important;
}

/* Body text */
p, span, li, td, th, label, small {
  color: var(--color-text-muted) !important;
}

a {
  color: var(--color-blush) !important;
  text-decoration: none !important;
  transition: opacity 0.2s !important;
}
a:hover {
  opacity: 0.8 !important;
}

/* Primary buttons — pink-purple gradient */
button, a[class*="btn"], a[class*="Btn"],
a[class*="button"], a[class*="Button"],
input[type="submit"], [class*="cta"], [class*="CTA"],
a[class*="primary"], a[class*="Primary"],
div[class*="button"] a, [class*="join"] a {
  background: linear-gradient(to right, var(--color-blush), var(--color-royal)) !important;
  color: white !important;
  -webkit-text-fill-color: white !important;
  border: none !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  padding: 12px 28px !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  text-transform: none !important;
}
button:hover, a[class*="btn"]:hover, a[class*="Button"]:hover,
input[type="submit"]:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 8px 30px rgba(236, 72, 153, 0.25) !important;
}

/* Input fields */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], textarea, select {
  background: rgba(17, 24, 39, 0.5) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  color: white !important;
  padding: 12px 16px !important;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(236, 72, 153, 0.5) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.15) !important;
}

/* Navigation */
nav, header, [class*="nav"], [class*="Nav"],
[class*="header"], [class*="Header"] {
  background: rgba(3, 7, 18, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
nav a, header a, [class*="nav"] a {
  color: var(--color-text-muted) !important;
}
nav a:hover, header a:hover {
  color: var(--color-blush) !important;
}

/* Footer */
footer, [class*="footer"], [class*="Footer"] {
  background: var(--color-bg) !important;
  border-top: 1px solid var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

/* Images and media */
img {
  border-radius: 12px !important;
}

/* Price styling */
[class*="price"], [class*="Price"],
[class*="amount"], [class*="Amount"] {
  color: var(--color-blush) !important;
  -webkit-text-fill-color: var(--color-blush) !important;
  font-weight: 800 !important;
}

/* Dividers and borders */
hr {
  border-color: var(--color-border) !important;
}

/* Product grid */
[class*="grid"], [class*="Grid"] {
  gap: 16px !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

/* Supporter/membership posts */
[class*="post"], [class*="Post"],
[class*="article"], [class*="Article"] {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}

/* Donation widget */
[class*="donation"], [class*="Donation"],
[class*="donate"], [class*="Donate"] {
  background: var(--color-surface) !important;
  border-radius: 16px !important;
}

/* Remove any white backgrounds that slip through */
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: rgb(255"],
[style*="background: white"],
[style*="background: #fff"] {
  background-color: var(--color-bg) !important;
  background: var(--color-bg) !important;
}
}


#fw-section-announcement-bar {

/* ═══ MANAL'S PLAYGROUND THEME ═══ */

/* Import matching font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Global dark theme */
:root {
  --color-bg: #030712;
  --color-surface: #111827;
  --color-border: rgba(255,255,255,0.05);
  --color-text: #f3f4f6;
  --color-text-muted: #9ca3af;
  --color-blush: #EC4899;
  --color-royal: #7C3AED;
}

body, html {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* All sections dark */
section, div[class*="section"], div[class*="Section"],
.section, main, header, footer, nav,
div[class*="container"], div[class*="Container"],
div[class*="wrapper"], div[class*="Wrapper"],
div[class*="block"], div[class*="Block"],
div[class*="hero"], div[class*="Hero"] {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* Cards and elevated surfaces */
div[class*="card"], div[class*="Card"],
div[class*="panel"], div[class*="Panel"],
div[class*="tile"], div[class*="Tile"],
div[class*="product"], div[class*="Product"],
div[class*="membership"], div[class*="Membership"],
div[class*="tier"], div[class*="Tier"] {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 16px !important;
}

/* Headings — gradient text */
h1, h2, h3 {
  background: linear-gradient(to right, var(--color-blush), var(--color-royal)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 900 !important;
}

h4, h5, h6 {
  color: var(--color-text) !important;
  font-weight: 700 !important;
}

/* Body text */
p, span, li, td, th, label, small {
  color: var(--color-text-muted) !important;
}

a {
  color: var(--color-blush) !important;
  text-decoration: none !important;
  transition: opacity 0.2s !important;
}
a:hover {
  opacity: 0.8 !important;
}

/* Primary buttons — pink-purple gradient */
button, a[class*="btn"], a[class*="Btn"],
a[class*="button"], a[class*="Button"],
input[type="submit"], [class*="cta"], [class*="CTA"],
a[class*="primary"], a[class*="Primary"],
div[class*="button"] a, [class*="join"] a {
  background: linear-gradient(to right, var(--color-blush), var(--color-royal)) !important;
  color: white !important;
  -webkit-text-fill-color: white !important;
  border: none !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  padding: 12px 28px !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  text-transform: none !important;
}
button:hover, a[class*="btn"]:hover, a[class*="Button"]:hover,
input[type="submit"]:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 8px 30px rgba(236, 72, 153, 0.25) !important;
}

/* Input fields */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], textarea, select {
  background: rgba(17, 24, 39, 0.5) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  color: white !important;
  padding: 12px 16px !important;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(236, 72, 153, 0.5) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.15) !important;
}

/* Navigation */
nav, header, [class*="nav"], [class*="Nav"],
[class*="header"], [class*="Header"] {
  background: rgba(3, 7, 18, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
nav a, header a, [class*="nav"] a {
  color: var(--color-text-muted) !important;
}
nav a:hover, header a:hover {
  color: var(--color-blush) !important;
}

/* Footer */
footer, [class*="footer"], [class*="Footer"] {
  background: var(--color-bg) !important;
  border-top: 1px solid var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

/* Images and media */
img {
  border-radius: 12px !important;
}

/* Price styling */
[class*="price"], [class*="Price"],
[class*="amount"], [class*="Amount"] {
  color: var(--color-blush) !important;
  -webkit-text-fill-color: var(--color-blush) !important;
  font-weight: 800 !important;
}

/* Dividers and borders */
hr {
  border-color: var(--color-border) !important;
}

/* Product grid */
[class*="grid"], [class*="Grid"] {
  gap: 16px !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

/* Supporter/membership posts */
[class*="post"], [class*="Post"],
[class*="article"], [class*="Article"] {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}

/* Donation widget */
[class*="donation"], [class*="Donation"],
[class*="donate"], [class*="Donate"] {
  background: var(--color-surface) !important;
  border-radius: 16px !important;
}

/* Remove any white backgrounds that slip through */
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: rgb(255"],
[style*="background: white"],
[style*="background: #fff"] {
  background-color: var(--color-bg) !important;
  background: var(--color-bg) !important;
}
}