/**
 * CSSRC US — front-end styles for the Ad Manager, News features and
 * Reusable blocks. Uses the theme's existing CSS custom properties so it
 * inherits colours, radius and dark/sepia themes automatically.
 */

/* =====================================================================
 * Ads
 * =================================================================== */
.cssrcus-ad {
	position: relative;
	margin: 1.4rem auto;
	text-align: center;
}
.cssrcus-ad__label {
	display: block;
	font-size: .66rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wa-text-mute, #8a93a8);
	margin-bottom: .35rem;
}
.cssrcus-ad__media img { max-width: 100%; height: auto; border-radius: var(--wa-r, 12px); }
.cssrcus-ad--header,
.cssrcus-ad--hero { margin: 1rem auto; max-width: var(--wa-shell, 1240px); padding: 0 clamp(1rem, 4vw, 2rem); }
.cssrcus-ad-footer { padding-top: 1rem; padding-bottom: 1rem; }
.cssrcus-ad--sidebar { margin: 0 0 1.4rem; }

/* Pop-up / interstitial */
.cssrcus-ad-popup { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
.cssrcus-ad-popup[hidden] { display: none; }
.cssrcus-ad-popup__veil { position: absolute; inset: 0; background: rgba(8, 12, 26, .66); backdrop-filter: blur(2px); }
.cssrcus-ad-popup__box {
	position: relative;
	z-index: 1;
	max-width: min(92vw, 560px);
	background: var(--wa-surface, #fff);
	border-radius: var(--wa-r-lg, 18px);
	padding: 1.6rem;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
}
.cssrcus-ad-popup__close {
	position: absolute; top: 8px; right: 10px;
	border: 0; background: transparent;
	font-size: 1.7rem; line-height: 1; cursor: pointer;
	color: var(--wa-text-mute, #8a93a8);
}
body.cssrcus-popup-open { overflow: hidden; }

/* =====================================================================
 * Breaking-news ticker bar
 * =================================================================== */
.cssrcus-breakingbar {
	background: var(--wa-crimson, #e4453a);
	color: #fff;
}
.cssrcus-breakingbar .wa-shell-x { display: flex; align-items: center; }
.cssrcus-ticker--breaking { color: #fff; padding: .4rem 0; }
.cssrcus-ticker--breaking .cssrcus-ticker__label {
	background: rgba(0, 0, 0, .18);
	color: #fff; font-weight: 800;
	text-transform: uppercase; letter-spacing: .08em;
	padding: .2rem .7rem; border-radius: 4px; margin-right: .8rem;
	display: inline-flex; align-items: center; gap: .4rem;
}
.cssrcus-ticker--breaking a { color: #fff; }

/* =====================================================================
 * Category navigation bar
 * =================================================================== */
.cssrcus-catnav { border-bottom: 1px solid var(--wa-line, #e6e8ef); background: var(--wa-surface, #fff); }
.cssrcus-catnav__inner { display: flex; gap: .25rem; overflow-x: auto; padding: .35rem clamp(1rem, 4vw, 2rem); scrollbar-width: thin; }
.cssrcus-catnav__link {
	white-space: nowrap;
	padding: .5rem .85rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: .9rem;
	color: var(--wa-text, #141a2b);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.cssrcus-catnav__link:hover { color: var(--cssrcus-cat, var(--wa-royal)); }
.cssrcus-catnav__link.is-active { color: var(--cssrcus-cat, var(--wa-royal)); border-bottom-color: var(--cssrcus-cat, var(--wa-royal)); }
.cssrcus-catnav__home { font-weight: 800; }

/* =====================================================================
 * Reading time
 * =================================================================== */
.cssrcus-readtime-row { margin: 0 0 1rem; }
.cssrcus-readtime {
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: .82rem; font-weight: 600;
	color: var(--wa-text-mute, #6b7280);
	background: var(--wa-surface-2, #f1f3f9);
	padding: .25rem .6rem; border-radius: 999px;
}

/* =====================================================================
 * Social share
 * =================================================================== */
.cssrcus-share {
	display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
	margin: 2rem 0 1rem; padding: 1rem 0;
	border-top: 1px solid var(--wa-line, #e6e8ef);
	border-bottom: 1px solid var(--wa-line, #e6e8ef);
}
.cssrcus-share__label { font-weight: 800; margin-right: .3rem; }
.cssrcus-share__btn {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .45rem .7rem; border-radius: 8px;
	border: 1px solid var(--wa-line, #e6e8ef);
	background: var(--wa-surface, #fff);
	color: var(--wa-text, #141a2b);
	cursor: pointer; text-decoration: none;
	font-size: .85rem; font-weight: 600;
}
.cssrcus-share__btn:hover { border-color: var(--wa-royal); color: var(--wa-royal); }
.cssrcus-share__btn--x:hover { border-color: #000; color: #000; }
.cssrcus-share__btn--facebook:hover { border-color: #1877f2; color: #1877f2; }
.cssrcus-share__btn--linkedin:hover { border-color: #0a66c2; color: #0a66c2; }
.cssrcus-share__btn--whatsapp:hover { border-color: #25d366; color: #1a9e4b; }
.cssrcus-share__copy.is-copied { border-color: var(--wa-emerald); color: var(--wa-emerald); }
.cssrcus-share__copy.is-copied span::after { content: " ✓"; }

/* =====================================================================
 * Related articles
 * =================================================================== */
.cssrcus-related { margin: 2.2rem 0; }
.cssrcus-related__title { font-size: 1.3rem; margin: 0 0 1rem; }
.cssrcus-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.cssrcus-related__card {
	display: flex; flex-direction: column;
	border: 1px solid var(--wa-line, #e6e8ef);
	border-radius: var(--wa-r, 12px);
	overflow: hidden; text-decoration: none;
	background: var(--wa-surface, #fff);
}
.cssrcus-related__card:hover { box-shadow: var(--wa-shadow, 0 8px 24px rgba(0, 0, 0, .08)); transform: translateY(-2px); transition: .2s; }
.cssrcus-related__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.cssrcus-related__media img { width: 100%; height: 100%; object-fit: cover; }
.cssrcus-related__body { padding: .8rem .9rem 1rem; }
.cssrcus-related__h { display: block; font-weight: 700; color: var(--wa-text, #141a2b); line-height: 1.3; }
.cssrcus-related__meta { display: block; margin-top: .4rem; font-size: .78rem; color: var(--wa-text-mute, #6b7280); }

/* =====================================================================
 * Most read
 * =================================================================== */
.cssrcus-mostread__list { list-style: none; margin: 0; padding: 0; counter-reset: mr; }
.cssrcus-mostread__item { display: flex; gap: .65rem; align-items: flex-start; padding: .5rem 0; border-bottom: 1px dashed var(--wa-line, #e6e8ef); }
.cssrcus-mostread__item:last-child { border-bottom: 0; }
.cssrcus-mostread__rank { font-weight: 900; color: var(--wa-royal); min-width: 1.4rem; }
.cssrcus-mostread__item a { color: var(--wa-text, #141a2b); text-decoration: none; font-weight: 600; }
.cssrcus-mostread__item a:hover { color: var(--wa-royal); }

/* =====================================================================
 * News newsletter CTA
 * =================================================================== */
.cssrcus-news-cta { margin: 2rem 0; }

/* =====================================================================
 * Search filters
 * =================================================================== */
.cssrcus-searchfilters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1.4rem; }
.cssrcus-searchfilters input[type="search"] { flex: 1 1 240px; padding: .6rem .8rem; border-radius: var(--wa-r-sm, 8px); border: 1px solid var(--wa-line, #e6e8ef); }
.cssrcus-searchfilters__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.cssrcus-chip { cursor: pointer; }
.cssrcus-chip input { position: absolute; opacity: 0; }
.cssrcus-chip span {
	display: inline-block; padding: .4rem .75rem; border-radius: 999px;
	border: 1px solid var(--wa-line, #e6e8ef);
	font-size: .85rem; font-weight: 600; color: var(--wa-text, #141a2b);
}
.cssrcus-chip.is-active span,
.cssrcus-chip input:checked + span { background: var(--wa-royal); border-color: var(--wa-royal); color: #fff; }

/* =====================================================================
 * Tag cloud
 * =================================================================== */
.cssrcus-tagcloud { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 1rem 0 0; }
.cssrcus-tagcloud__label { font-weight: 800; margin-right: .3rem; }
.cssrcus-tagcloud__tag {
	padding: .3rem .65rem; border-radius: 999px;
	background: var(--wa-surface-2, #f1f3f9); color: var(--wa-text, #141a2b);
	text-decoration: none; font-size: .85rem; font-weight: 600;
}
.cssrcus-tagcloud__tag:hover,
.cssrcus-tagcloud__tag.is-active { background: var(--wa-royal); color: #fff; }

/* =====================================================================
 * Reusable blocks — CTA + score box
 * =================================================================== */
.cssrcus-cta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
	justify-content: space-between;
	margin: 2rem 0; padding: clamp(1.2rem, 3vw, 2rem);
	border-radius: var(--wa-r-lg, 18px);
	color: #fff;
	background: var(--wa-grad-brand, linear-gradient(135deg, #3d5afe, #13a36b));
}
.cssrcus-cta--gold { background: linear-gradient(135deg, #e3b23c, #d99a1f); color: #1b1402; }
.cssrcus-cta--emerald { background: linear-gradient(135deg, #13a36b, #0c7a4f); }
.cssrcus-cta--ink { background: var(--wa-ink, #0b1020); }
.cssrcus-cta__heading { margin: 0 0 .2rem; color: inherit; font-size: 1.3rem; }
.cssrcus-cta__lede { margin: 0; opacity: .92; max-width: 60ch; }
.cssrcus-cta__btn { flex: 0 0 auto; }

.cssrcus-scorebox {
	display: flex; align-items: center; gap: 1.2rem;
	margin: 1.6rem 0; padding: 1.2rem 1.4rem;
	border: 1px solid var(--wa-line, #e6e8ef);
	border-radius: var(--wa-r-lg, 18px);
	background: var(--wa-surface, #fff);
}
.cssrcus-scorebox__label { display: block; font-weight: 800; font-size: 1.05rem; }
.cssrcus-scorebox__text { margin: .3rem 0 0; color: var(--wa-text-mute, #6b7280); }



/* =====================================================================
 * v1.5.0 — Complaints, Casino Finder, Safety flags & Awards
 * =================================================================== */

/* ---- Shared form fields (complaints + finder) ---- */
.wa-field { display: grid; gap: .35rem; margin: 0 0 1rem; }
.wa-field > label { font-weight: 700; font-size: .92rem; }
.wa-field input[type="text"],
.wa-field input[type="email"],
.wa-field input[type="url"],
.wa-field select,
.wa-field textarea {
	width: 100%; padding: .7rem .85rem;
	border: 1px solid var(--wa-line, #e4e7ee);
	border-radius: var(--wa-r-sm, 10px);
	background: var(--wa-surface, #fff); color: var(--wa-text, #141a2b);
	font: inherit;
}
.wa-field small { color: var(--wa-text-mute, #6b7280); font-size: .82rem; }
.wa-field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.wa-field-consent { display: flex; gap: .6rem; align-items: flex-start; margin: .4rem 0 1.2rem; font-size: .92rem; color: var(--wa-text-soft, #4b5468); }
.wa-field-consent input { margin-top: .25rem; }
@media (max-width: 640px) { .wa-field-grid { grid-template-columns: 1fr; } }


/* ---- Complaints ---- */
.wa-complaints-block { margin: 1.6rem 0; }
.wa-complaints-list { display: grid; gap: 1rem; margin: 1.2rem 0; }
.wa-complaint-card {
	border: 1px solid var(--wa-line, #e4e7ee);
	border-radius: var(--wa-r-lg, 18px);
	background: var(--wa-surface, #fff);
	padding: 1.1rem 1.2rem;
}
.wa-complaint-card__top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.wa-complaint-card__title { margin: 0; font-size: 1.08rem; }
.wa-complaint-card__facts { list-style: none; margin: .7rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .86rem; color: var(--wa-text-soft, #4b5468); }
.wa-complaint-card__facts li { margin: 0; }
.wa-complaint-card__excerpt { margin: .3rem 0 .6rem; color: var(--wa-text-soft, #4b5468); }
.wa-complaint-form { max-width: 640px; }
.wa-complaints-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.wa-complaints-filter a {
	padding: .4rem .85rem; border-radius: var(--wa-r-pill, 999px);
	border: 1px solid var(--wa-line, #e4e7ee); font-size: .85rem; font-weight: 600;
	color: var(--wa-text-soft, #4b5468); text-decoration: none;
}
.wa-complaints-filter a.is-active { background: var(--wa-ink, #0b1020); color: #fff; border-color: var(--wa-ink, #0b1020); }
.wa-complaint-single__head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ---- "How it works" step cards ---- */
.wa-complaints-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.wa-step-card {
	position: relative; padding: 1.4rem 1.2rem;
	border: 1px solid var(--wa-line, #e4e7ee); border-radius: var(--wa-r-lg, 18px);
	background: var(--wa-surface, #fff);
}
.wa-step-card__num {
	position: absolute; top: -.7rem; right: 1rem;
	width: 2rem; height: 2rem; display: grid; place-items: center;
	border-radius: 999px; background: var(--wa-grad-gold, #e3b23c); color: var(--wa-ink, #0b1020); font-weight: 900;
}
.wa-step-card__icon { color: var(--wa-royal, #3d5afe); display: inline-flex; margin-bottom: .4rem; }
.wa-step-card h3 { margin: .2rem 0 .4rem; font-size: 1.05rem; }
.wa-step-card p { margin: 0; color: var(--wa-text-soft, #4b5468); font-size: .92rem; }
@media (max-width: 780px) { .wa-complaints-steps { grid-template-columns: 1fr; } }


/* ---- Casino Finder ---- */
.wa-finder { display: grid; grid-template-columns: 280px 1fr; gap: 1.6rem; align-items: start; }
.wa-finder__rail {
	position: sticky; top: calc(var(--wa-header-h, 64px) + 1rem);
	border: 1px solid var(--wa-line, #e4e7ee); border-radius: var(--wa-r-lg, 18px);
	background: var(--wa-surface, #fff); padding: 1.2rem;
}
.wa-finder__facet { border: 0; margin: 0 0 1.2rem; padding: 0; }
.wa-finder__facet legend { font-weight: 800; font-size: .95rem; margin-bottom: .5rem; padding: 0; }
.wa-finder__options { display: grid; gap: .45rem; max-height: 220px; overflow: auto; }
.wa-finder__option { display: flex; gap: .55rem; align-items: center; font-size: .9rem; cursor: pointer; }
.wa-finder__option small { color: var(--wa-text-mute, #6b7280); }
.wa-finder__facet input[type="range"] { width: 100%; }
.wa-finder__bar { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.wa-finder__sort { display: inline-flex; gap: .5rem; align-items: center; font-size: .9rem; font-weight: 600; }
.wa-finder__sort select { padding: .45rem .6rem; border: 1px solid var(--wa-line, #e4e7ee); border-radius: var(--wa-r-sm, 10px); font: inherit; background: var(--wa-surface, #fff); }
.wa-finder__count { font-weight: 700; margin: 0 0 1rem; }
.wa-finder__results { display: grid; gap: 1rem; }
.wa-finder__out.is-loading { opacity: .55; transition: opacity .2s ease; }
.wa-finder__empty, .wa-blacklist-empty, .wa-complaints-empty { color: var(--wa-text-mute, #6b7280); padding: 1rem 0; }
.wa-finder__pages { margin-top: 1.4rem; }
.wa-finder__pages a.is-current { background: var(--wa-ink, #0b1020); color: #fff; }
@media (max-width: 900px) {
	.wa-finder { grid-template-columns: 1fr; }
	.wa-finder__rail { position: static; }
}


/* ---- Safety banner (blacklist) ---- */
.wa-safety-banner {
	display: flex; gap: 1rem; align-items: flex-start;
	margin: 0 0 1.4rem; padding: 1.1rem 1.2rem;
	border: 1px solid var(--wa-crimson, #e4453a);
	border-left: 5px solid var(--wa-crimson, #e4453a);
	border-radius: var(--wa-r, 14px);
	background: color-mix(in srgb, var(--wa-crimson, #e4453a) 8%, var(--wa-surface, #fff));
}
.wa-safety-banner__icon { color: var(--wa-crimson, #e4453a); flex: 0 0 auto; }
.wa-safety-banner__body strong { display: block; color: var(--wa-crimson, #e4453a); font-size: 1.05rem; }
.wa-safety-banner__body p { margin: .3rem 0 0; color: var(--wa-text-soft, #4b5468); }

/* ---- Award ribbon ---- */
.wa-award-ribbon {
	display: inline-flex; align-items: center; gap: .4rem;
	margin: .4rem 0; padding: .3rem .8rem;
	border-radius: var(--wa-r-pill, 999px);
	background: var(--wa-grad-gold, linear-gradient(135deg,#e3b23c,#ffd874));
	color: var(--wa-ink, #0b1020); font-weight: 800; font-size: .85rem;
}
.wa-award-ribbon__year { opacity: .75; font-weight: 700; }

/* ---- Casinos to Avoid list ---- */
.wa-blacklist { display: grid; gap: 1rem; }
.wa-blacklist__item {
	border: 1px solid var(--wa-line, #e4e7ee);
	border-left: 4px solid var(--wa-crimson, #e4453a);
	border-radius: var(--wa-r, 14px);
	background: var(--wa-surface, #fff); padding: 1.1rem 1.2rem;
}
.wa-blacklist__head { display: flex; align-items: center; gap: .6rem; }
.wa-blacklist__head h3 { margin: 0; font-size: 1.1rem; }
.wa-blacklist__icon { color: var(--wa-crimson, #e4453a); }
.wa-blacklist__reason { margin: .6rem 0; color: var(--wa-text-soft, #4b5468); }



/* =====================================================================
 * v1.5.1 — Casino-row "Visit" button alignment fix (sitewide)
 * The base .wa-btn is white-space:nowrap; long labels like
 * "Visit Emerald Bay Casino" overflowed the grid cell and collided with
 * the score ring. Inside listing rows the CTA now fills its cell and
 * wraps cleanly, so it stays aligned at every width.
 * =================================================================== */
.wa-row { overflow: hidden; }
.wa-row__cta { min-width: 0; align-content: center; }
.wa-row__cta .wa-btn {
	width: 100%;
	max-width: 100%;
	white-space: normal;          /* allow long casino names to wrap */
	text-align: center;
	line-height: 1.15;
	padding-left: .9em;
	padding-right: .9em;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.wa-row__cta .wa-card__read,
.wa-row__cta .wa-btn--ghost { text-align: center; }

/* Finder reuses casino rows — same safe behaviour, plus tidy spacing. */
.wa-finder__results .wa-row__cta .wa-btn { width: 100%; }