/* ===== SMILERS VIBE LAYER — brighter, happier, more smiley ===== */
:root {
  --smile-yellow: #FFD200;
  --smile-orange: #FF9E1B;
  --smile-pink: #FF7A9C;
  --smile-ink: #12100E;
}

/* warmer, brighter primaries */
.bg-primary-container { background-color: var(--smile-yellow) !important; }
.bg-primary { background-color: var(--smile-yellow) !important; }
.text-primary { color: var(--smile-yellow) !important; }
.border-primary { border-color: var(--smile-yellow) !important; }
.hover\:bg-primary-container:hover { background-color: var(--smile-orange) !important; }
.hover\:bg-primary:hover { background-color: var(--smile-orange) !important; }
.hover\:text-primary:hover { color: var(--smile-yellow) !important; }

/* friendlier geometry */
.rounded { border-radius: 0.75rem !important; }
.rounded-lg { border-radius: 1.125rem !important; }
.rounded-xl { border-radius: 1.5rem !important; }
img { border-radius: 1rem; }

/* warm gradient wash on dark surfaces so it stops feeling cold */
header { background-image: linear-gradient(90deg, rgba(255,210,0,0.07), rgba(255,158,27,0.03) 45%, rgba(255,122,156,0.05)); }
body { background-image: radial-gradient(1100px 520px at 85% -8%, rgba(255,210,0,0.10), transparent 60%), radial-gradient(900px 480px at 5% 108%, rgba(255,122,156,0.08), transparent 58%); }

/* smiley accents */
.smile-h2 { display: flex; align-items: center; gap: 0.7rem; }
.smile-h2::before { content: "\263A"; font-size: 1.15em; color: var(--smile-yellow); line-height: 1; }
.smile-strip { background: var(--smile-yellow); color: var(--smile-ink); font-weight: 800; }

/* cards get a lift and a glow */
.smile-card { background: linear-gradient(160deg, rgba(255,210,0,0.10), rgba(255,255,255,0.02)); border: 1px solid rgba(255,210,0,0.22); border-radius: 1.5rem; padding: 1.6rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.smile-card:hover { transform: translateY(-6px); border-color: rgba(255,210,0,0.55); box-shadow: 0 18px 44px -18px rgba(255,210,0,0.45); }

/* buttons become pill-shaped and pop */
a[class*="bg-primary-container"], button[class*="bg-primary-container"], a[class*="bg-primary"] { border-radius: 999px !important; font-weight: 800 !important; }
a[class*="bg-primary-container"]:hover, a[class*="bg-primary"]:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(255,210,0,0.7) !important; }

/* review cards */
.smile-review { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,210,0,0.20); border-radius: 1.5rem; padding: 1.5rem; height: 100%; }
.smile-stars { color: var(--smile-yellow); letter-spacing: 2px; font-size: 1.05rem; }
.smile-review blockquote { font-size: 1.02rem; line-height: 1.65; margin: 0.7rem 0; color: #efe9dd; }
.smile-review .who { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: #b9b2a4; }

/* gallery tiles */
.smile-tile { position: relative; overflow: hidden; border-radius: 1.25rem; border: 1px solid rgba(255,210,0,0.18); }
.smile-tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .4s ease; display: block; }
.smile-tile:hover img { transform: scale(1.07); }
.smile-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55)); opacity: 0; transition: opacity .3s ease; }
.smile-tile:hover::after { opacity: 1; }

/* social embeds */
.smile-social iframe { width: 100%; border: 0; border-radius: 1.25rem; background: #fff; }
.smile-ig-cta { display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.4rem; border-radius: 999px; background: linear-gradient(90deg, #FFD200, #FF9E1B); color: var(--smile-ink); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; text-decoration: none; }
.smile-ig-cta:hover { filter: brightness(1.07); transform: translateY(-2px); }


/* keep the smiley marquee clear of the fixed header */
.smile-marquee { margin-top: 5rem; position: relative; z-index: 40; }
@media (max-width: 1023px) { .smile-marquee { margin-top: 5rem; } }
/* give the hero a touch more warmth */
#reviews .smile-review, #follow .smile-tile { backdrop-filter: blur(2px); }

/* marquee of smiles */
.smile-marquee { overflow: hidden; background: var(--smile-yellow); color: var(--smile-ink); }
.smile-marquee .track { display: flex; gap: 2.5rem; white-space: nowrap; animation: smileScroll 26s linear infinite; font-weight: 800; text-transform: uppercase; letter-spacing: .18em; padding: .7rem 0; font-size: .82rem; }
@keyframes smileScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }