/* =========================================================================
   Royale Casino — theme design layer
   Loaded on the front end and inside the editor canvas.
   Structure comes from core blocks; this file supplies the premium casino
   look (cards, glows, badges) and the mobile behaviour the old inline
   markup lacked.
   ========================================================================= */

:root {
	--rc-maxw: 1200px;
	--rc-card-border: 1px solid rgba(224, 168, 153, .12);
	--rc-card-border-strong: 1px solid rgba(224, 168, 153, .22);
	--rc-hairline: 1px solid rgba(255, 255, 255, .06);
}

/* ---- Base canvas & background glow ------------------------------------ */
body {
	background-color: var(--wp--preset--color--base);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* clip (not hidden) prevents sideways scroll without creating a scroll
	   container that would break the sticky header */
	overflow-x: clip;
}

/* Front-end only: the ambient purple/gold glows from the original design. */
.wp-site-blocks {
	position: relative;
}
.wp-site-blocks::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(1200px 600px at 78% -8%, rgba(107, 132, 176, .16), transparent 60%),
		radial-gradient(900px 500px at 12% 4%, rgba(224, 168, 153, .08), transparent 55%);
}
.wp-site-blocks > * {
	position: relative;
	z-index: 1;
}

::selection {
	background: rgba(224, 168, 153, .3);
	color: #fff;
}

img {
	max-width: 100%;
	height: auto;
}

/* ---- Reusable section rhythm ------------------------------------------ */
.rc-section {
	padding-top: clamp(40px, 6vw, 56px);
	padding-bottom: clamp(16px, 3vw, 24px);
}

/* ---- Eyebrow / labels -------------------------------------------------- */
.rc-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--wp--preset--color--purple-soft);
}

/* ---- Live / license badge --------------------------------------------- */
.rc-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px;
	border-radius: 100px;
	border: 1px solid rgba(224, 168, 153, .28);
	background: rgba(224, 168, 153, .06);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .4px;
	color: var(--wp--preset--color--gold);
}
.rc-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--green);
	box-shadow: 0 0 8px var(--wp--preset--color--green);
}

/* ---- Cards ------------------------------------------------------------- */
.rc-card,
.rc-card-raised {
	border-radius: 16px;
	background: var(--wp--preset--gradient--card);
	border: var(--rc-card-border);
}
.rc-card-raised {
	background: var(--wp--preset--gradient--card-raised);
	border: var(--rc-card-border-strong);
	box-shadow: var(--wp--preset--shadow--card);
}

/* ---- Buttons ----------------------------------------------------------- */
.wp-block-button.rc-btn-outline .wp-block-button__link,
.wp-block-button__link.rc-btn-outline {
	background: rgba(255, 255, 255, .02) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid rgba(224, 168, 153, .3);
	box-shadow: none;
}
.wp-block-button.rc-btn-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold-soft) !important;
}
/* Gold buttons: explicit gradient (theme.json color.background renders a
   gradient token as a flat colour, so we set the real gradient here). */
.wp-block-button:not(.rc-btn-outline) > .wp-block-button__link {
	background: var(--wp--preset--gradient--gold) !important;
	color: var(--wp--preset--color--ink) !important;
	border: none;
	box-shadow: var(--wp--preset--shadow--gold);
}
.wp-block-button:not(.rc-btn-outline) > .wp-block-button__link:hover { filter: brightness(1.05); }
/* keep button labels on one line (fixes "Giri / ş" wrapping in the header) */
.wp-block-button__link { white-space: nowrap; }
/* button sizing by context (kept out of block attrs so markup stays valid) */
.rc-hero .wp-block-buttons .wp-block-button__link { padding: 15px 30px; font-size: 16px; }
.rc-header .wp-block-button__link { padding: 10px 16px; font-size: 14px; }
.rc-topbar__muted { opacity: .7; }
.rc-gold-text { background: linear-gradient(120deg, #F0C9BC, #6B84B0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #9DB0D2; }
.wp-block-separator.rc-sep { border: none; height: 1px; background: rgba(224, 168, 153, .12); opacity: 1; max-width: none; }

/* ---- Hero -------------------------------------------------------------- */
.rc-hero {
	padding-top: clamp(36px, 6vw, 64px);
}
.rc-hero__art img {
	border-radius: 20px;
	border: 1px solid rgba(224, 168, 153, .18);
	box-shadow: var(--wp--preset--shadow--soft);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}
.rc-stats {
	gap: 26px 32px;
}
.rc-stat__num {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 26px;
	color: var(--wp--preset--color--gold);
	line-height: 1;
}
.rc-stat__label {
	font-size: 12.5px;
	color: var(--wp--preset--color--dim);
	font-weight: 600;
}

/* ---- Hero trust / payments row ---------------------------------------- */
/* Sits under the stats in the home hero so the (shorter) text column fills
   more of the height next to the tall image + offer card, killing the void
   that appeared when the columns were vertically centred. */
.rc-trustrow {
	gap: 10px;
	margin-top: 24px;
	align-items: center;
}
.rc-trust {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(224, 168, 153, .14);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}
.rc-trust b { color: var(--wp--preset--color--contrast); font-weight: 700; }

/* ---- Bonus offer card -------------------------------------------------- */
.rc-offer {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	padding: 34px 30px;
	background: var(--wp--preset--gradient--card-raised);
	border: var(--rc-card-border-strong);
	box-shadow: var(--wp--preset--shadow--card);
}
.rc-offer::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 22px;
	pointer-events: none;
	background: radial-gradient(400px 200px at 80% 0%, rgba(107, 132, 176, .22), transparent 65%);
}
.rc-offer > * { position: relative; z-index: 1; }
.rc-offer__amount {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 46px;
	line-height: 1;
	color: var(--wp--preset--color--heading);
}
.rc-offer__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	padding: 9px 0;
	border-bottom: var(--rc-hairline);
}
.rc-offer__row span:first-child { color: var(--wp--preset--color--muted); }
.rc-offer__row span:last-child  { color: var(--wp--preset--color--contrast); font-weight: 700; }

/* Floating animation (respect reduced motion) */
@keyframes rc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.rc-float { animation: rc-float 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rc-float { animation: none; } }

/* ---- Quick links ------------------------------------------------------- */
.rc-quicklink {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 18px;
	border-radius: 14px;
	background: var(--wp--preset--gradient--card);
	border: var(--rc-card-border);
	transition: transform .18s ease, border-color .18s ease;
}
.rc-quicklink:hover { transform: translateY(-3px); border-color: rgba(224, 168, 153, .35); }
.rc-quicklink__icon { font-size: 26px; }
.rc-quicklink__title { font-size: 15.5px; font-weight: 700; color: var(--wp--preset--color--contrast); }
.rc-quicklink__sub { font-size: 12.5px; color: var(--wp--preset--color--dim); }

/* ---- Game cards -------------------------------------------------------- */
.rc-game {
	border-radius: 14px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(224, 168, 153, .1);
	transition: transform .18s ease, border-color .18s ease;
}
.rc-game:hover { transform: translateY(-4px); border-color: rgba(224, 168, 153, .3); }
.rc-game__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.rc-game__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rc-game__body { padding: 12px 13px; }
.rc-game__title {
	font-size: 14px; font-weight: 700; color: var(--wp--preset--color--contrast);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-game__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.rc-game__provider { font-size: 11.5px; color: var(--wp--preset--color--dim); }
.rc-game__play {
	font-size: 12px; font-weight: 700; color: var(--wp--preset--color--ink);
	background: var(--wp--preset--gradient--gold); padding: 5px 12px; border-radius: 7px;
}
.rc-tag {
	position: absolute; top: 9px; left: 9px; z-index: 2;
	padding: 3px 9px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: .5px;
}
.rc-tag--hot { background: var(--wp--preset--color--danger); color: #fff; }
.rc-tag--jackpot { background: var(--wp--preset--gradient--gold); color: var(--wp--preset--color--ink); }

/* ---- Filter chips ------------------------------------------------------ */
.rc-chips .wp-block-button__link {
	padding: 9px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 700;
	background: transparent !important; color: var(--wp--preset--color--muted) !important;
	border: 1px solid rgba(224, 168, 153, .14); box-shadow: none;
}
.rc-chips .wp-block-button.is-active .wp-block-button__link,
.rc-chips .wp-block-button:first-child .wp-block-button__link {
	background: rgba(224, 168, 153, .12) !important; color: var(--wp--preset--color--gold) !important;
	border-color: rgba(224, 168, 153, .4);
}

/* ---- Feature cards ----------------------------------------------------- */
.rc-feature { padding: 26px 24px; border-radius: 16px; background: var(--wp--preset--gradient--card); border: var(--rc-card-border); }
.rc-feature__icon {
	width: 48px; height: 48px; border-radius: 12px; background: rgba(224, 168, 153, .1);
	display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px;
}
.rc-feature__title { font-size: 17px; font-weight: 700; color: var(--wp--preset--color--contrast); margin-bottom: 7px; }
.rc-feature__text { font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--muted); }

/* ---- App download ------------------------------------------------------ */
.rc-app {
	position: relative; overflow: hidden;
	border-radius: 22px; padding: clamp(28px, 4vw, 44px);
	background: var(--wp--preset--gradient--card-raised);
	border: 1px solid rgba(224, 168, 153, .16);
}
.rc-app::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(500px 300px at 90% 50%, rgba(107, 132, 176, .16), transparent 60%);
}
.rc-app > * { position: relative; z-index: 1; }
.rc-app__art img { border-radius: 18px; border: 1px solid rgba(224, 168, 153, .16); width: 100%; }
.rc-store {
	display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 11px;
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(224, 168, 153, .25);
	font-weight: 700; color: var(--wp--preset--color--contrast);
}
.rc-store:hover { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold-soft); }

/* ---- Payments ---------------------------------------------------------- */
.rc-pay {
	height: 64px; border-radius: 12px; background: var(--wp--preset--color--surface);
	border: 1px solid rgba(224, 168, 153, .1); display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 14px; color: #F0C9BC;
}

/* ---- Steps ------------------------------------------------------------- */
.rc-step { padding: 28px 24px; border-radius: 16px; background: var(--wp--preset--gradient--card); border: var(--rc-card-border); }
.rc-step__num { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 40px; color: rgba(224, 168, 153, .35); line-height: 1; margin-bottom: 14px; }
.rc-step__title { font-size: 18px; font-weight: 700; color: var(--wp--preset--color--contrast); margin-bottom: 7px; }
.rc-step__text { font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--muted); }

/* ---- Reviews & comparison --------------------------------------------- */
.rc-review { padding: 20px 22px; border-radius: 14px; background: var(--wp--preset--gradient--card); border: var(--rc-card-border); }
.rc-avatar {
	width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
	background: var(--wp--preset--gradient--purple);
	display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff;
}
.rc-stars { color: var(--wp--preset--color--gold); font-size: 13px; letter-spacing: 1px; }
.rc-rating-pill {
	padding: 6px 12px; border-radius: 100px; background: rgba(107, 132, 176, .12);
	color: var(--wp--preset--color--green-soft); font-size: 13px; font-weight: 700;
}
.rc-compare { padding: 28px 26px; border-radius: 18px; background: var(--wp--preset--gradient--card-raised); border: var(--rc-card-border-strong); position: sticky; top: 96px; }
.rc-compare__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 8px 0; border-bottom: var(--rc-hairline); }
.rc-compare__row span:first-child { color: var(--wp--preset--color--muted); }
.rc-compare__row span:last-child { color: var(--wp--preset--color--green-soft); font-weight: 700; }

/* ---- Blog cards -------------------------------------------------------- */
.rc-post { border-radius: 16px; overflow: hidden; background: var(--wp--preset--color--surface); border: var(--rc-card-border); display: block; transition: transform .18s ease, border-color .18s ease; }
.rc-post:hover { transform: translateY(-4px); border-color: rgba(224, 168, 153, .3); }
.rc-post__cover { aspect-ratio: 16 / 9; overflow: hidden; }
.rc-post__cover img { width: 100%; height: 100%; object-fit: cover; }
.rc-post__body { padding: 18px 20px; }
.rc-post__cat { font-size: 12px; font-weight: 700; color: var(--wp--preset--color--purple-soft); }
.rc-post__title { font-size: 16px; font-weight: 700; color: var(--wp--preset--color--contrast); line-height: 1.35; margin: 8px 0 6px; }
.rc-post__date { font-size: 12.5px; color: var(--wp--preset--color--dim); }

/* ---- FAQ (native <details>) ------------------------------------------- */
.rc-faq { border-radius: 14px; background: var(--wp--preset--gradient--card); border: 1px solid rgba(224, 168, 153, .12); overflow: hidden; }
.rc-faq + .rc-faq { margin-top: 12px; }
.rc-faq > summary {
	list-style: none; cursor: pointer; padding: 20px 22px;
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	font-size: 16px; font-weight: 700; color: var(--wp--preset--color--contrast);
}
.rc-faq > summary::-webkit-details-marker { display: none; }
.rc-faq > summary::after {
	content: "+"; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px;
	background: rgba(224, 168, 153, .12); color: var(--wp--preset--color--gold);
	display: flex; align-items: center; justify-content: center; font-size: 18px; transition: transform .2s ease;
}
.rc-faq[open] > summary::after { transform: rotate(45deg); }
.rc-faq__answer { margin: 0; padding: 0 22px 20px; font-size: 14.5px; line-height: 1.6; color: #C3CBDC; }

/* ---- Responsible gaming banner ---------------------------------------- */
.rc-18 {
	display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-radius: 14px;
	background: rgba(107, 132, 176, .06); border: 1px solid rgba(107, 132, 176, .2);
}
.rc-18__badge {
	width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px; background: rgba(107, 132, 176, .15);
	display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: var(--wp--preset--color--purple-soft);
}
.rc-18__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--wp--preset--color--muted); }

/* =========================================================================
   INTERIOR PAGES — shared helpers
   ========================================================================= */
.rc-breadcrumb { font-size: 12.5px; color: var(--wp--preset--color--dim); }
.rc-breadcrumb a { color: var(--wp--preset--color--muted); }
.rc-lead { font-size: 18px; line-height: 1.6; color: var(--wp--preset--color--body); max-width: 660px; }

/* ---- Interior page hero (breadcrumb + eyebrow + H1 + lead + CTA) -------
   The interior hero is a single constrained column, so with the 820px content
   width the text used to float mid-screen with dead gutters on both sides and
   the lead (max-width 660) auto-centred *narrower* than the H1 — reading as a
   broken indent. We turn it into a deliberate, symmetric centred page header
   with an ambient glow so the first screen feels composed, not empty.
   Targets only the interior variant (the home hero has columns, no breadcrumb). */
.rc-hero:has(.rc-breadcrumb) {
	position: relative;
	overflow: clip;
	text-align: center;
	padding-top: clamp(48px, 6vw, 76px);
	padding-bottom: clamp(28px, 4vw, 44px);
}
.rc-hero:has(.rc-breadcrumb)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(680px 320px at 50% 8%, rgba(107, 132, 176, .16), transparent 62%),
		radial-gradient(420px 220px at 50% 4%, rgba(224, 168, 153, .07), transparent 60%);
}
.rc-hero:has(.rc-breadcrumb) > * { position: relative; z-index: 1; }
/* comfortable measure + real centring for the lead and buttons */
.rc-hero:has(.rc-breadcrumb) .rc-lead {
	margin-left: auto;
	margin-right: auto;
}
.rc-hero:has(.rc-breadcrumb) .rc-breadcrumb,
.rc-hero:has(.rc-breadcrumb) .rc-eyebrow { text-align: center; }
.rc-hero:has(.rc-breadcrumb) .wp-block-buttons { justify-content: center; margin-top: 8px; }

/* Fallback for browsers without :has() — still readable, just left-aligned */
@supports not selector(:has(*)) {
	.rc-hero .rc-lead { margin-right: auto; }
}

/* generic stat tiles (aviator game info, payment facts) */
.rc-statbox { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.rc-stat-tile {
	padding: 16px 18px; border-radius: 12px; background: var(--wp--preset--gradient--card);
	border: var(--rc-card-border);
}
.rc-stat-tile .k { font-size: 12px; color: var(--wp--preset--color--dim); font-weight: 600; }
.rc-stat-tile .v { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 22px; color: var(--wp--preset--color--gold); }

/* bonus card = feature card + a price line + button (reuses .rc-feature look) */
.rc-bonus__amount { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 30px; color: var(--wp--preset--color--gold); line-height: 1; margin: 6px 0 8px; }

/* CTA banner */
.rc-cta {
	position: relative; overflow: hidden; text-align: center;
	padding: clamp(28px, 4vw, 44px); border-radius: 22px;
	background: var(--wp--preset--gradient--card-raised); border: var(--rc-card-border-strong);
}
.rc-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 240px at 50% 0%, rgba(107,132,176,.16), transparent 65%); }
.rc-cta > * { position: relative; z-index: 1; }

/* comparison / payment tables (dense, kept in html blocks) */
.rc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Pages emit <figure class="wp-block-table rc-table">, so the figure itself is the
   horizontal scroll container on mobile; the inner <table> keeps the min width. */
.rc-table { display: block; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 14px; }
.rc-table > table { width: 100%; border-collapse: collapse; min-width: 560px; }
.rc-table th, .rc-table td { padding: 12px 14px; text-align: left; border-bottom: var(--rc-hairline); }
.rc-table thead th { color: var(--wp--preset--color--heading); font-weight: 800; }
.rc-table tbody th { color: var(--wp--preset--color--muted); font-weight: 600; }
.rc-table td { color: var(--wp--preset--color--contrast); }
.rc-table .yes { color: var(--wp--preset--color--green-soft); font-weight: 700; }
.rc-table .no { color: var(--wp--preset--color--dim); }
.rc-table .rc-col-hi { background: rgba(224,168,153,.08); color: var(--wp--preset--color--gold); font-weight: 700; }
.rc-table .rc-badge-rec { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:6px; font-size:10px; font-weight:800; background:var(--wp--preset--gradient--gold); color:var(--wp--preset--color--ink); }

/* warning-sign / checklist rows */
.rc-warn { list-style: none; padding-left: 0; margin: 0; display: grid; gap: 10px; }
.rc-warn li { position: relative; padding: 12px 14px 12px 42px; border-radius: 12px; background: var(--wp--preset--gradient--card); border: var(--rc-card-border); font-size: 14px; color: var(--wp--preset--color--body); }
.rc-warn li::before { content: "⚠"; position: absolute; left: 14px; top: 12px; color: var(--wp--preset--color--gold); }

/* =========================================================================
   HEADER
   ========================================================================= */
.rc-header {
	position: sticky; top: 0; z-index: 50;
	backdrop-filter: blur(14px);
	background: rgba(7, 12, 26, .82);
	border-bottom: 1px solid rgba(224, 168, 153, .14);
}
.rc-header__inner {
	min-height: 74px;
	max-width: var(--rc-maxw);
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
	gap: 20px;
}
.rc-topbar {
	max-width: var(--rc-maxw);
	margin: 0 auto;
	padding: 6px 24px;
	width: 100%;
}
.rc-header__actions { margin-left: auto; }
/* the nav lives in the middle and can shrink/scroll before the burger kicks in */
.rc-nav { min-width: 0; }
.rc-brand { display: flex; align-items: center; gap: 11px; }
.rc-brand__mark {
	position: relative;
	width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto;
	background: var(--wp--preset--gradient--gold);
	border: 1px solid rgba(157, 176, 210, .55);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 22px; color: var(--wp--preset--color--ink);
	box-shadow: 0 4px 18px rgba(11, 16, 32, .40);
}
/* Brass crown embossed above the R monogram. */
.rc-brand__mark::before {
	content: "\2654";
	position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
	font-size: 15px; line-height: 1; color: #9DB0D2;
	text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 -1px 0 rgba(255,255,255,.35);
}
.rc-brand__name { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 20px; color: var(--wp--preset--color--heading); }
.rc-brand__name b { color: var(--wp--preset--color--gold); font-weight: 700; }
.rc-brand__num {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 22px; padding: 0 5px; margin-left: 2px;
	border-radius: 6px; background: var(--wp--preset--gradient--gold);
	border: 1px solid rgba(157, 176, 210, .6);
	font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: 14px;
	color: #FFFFFF; vertical-align: middle;
}

/* Navigation */
.rc-nav { flex-wrap: nowrap; }
.rc-nav .wp-block-navigation-item__content { font-size: 14px; font-weight: 600; color: var(--wp--preset--color--body); padding: 8px 11px; border-radius: 8px; white-space: nowrap; }
.rc-header__inner .wp-block-navigation__responsive-container:not(.is-menu-open) { background: transparent; }
.rc-nav .current-menu-item .wp-block-navigation-item__content,
.rc-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--contrast); background: rgba(224, 168, 153, .08); }

/* Language pills */
.rc-lang { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(224, 168, 153, .2); border-radius: 9px; background: rgba(255, 255, 255, .02); }
.rc-lang a { padding: 5px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 700; color: var(--wp--preset--color--dim); }
.rc-lang a.is-active { background: rgba(224, 168, 153, .16); color: var(--wp--preset--color--gold); }

.rc-topbar { min-height: 34px; font-size: 12px; color: var(--wp--preset--color--dim); }
.rc-topbar b { color: var(--wp--preset--color--gold); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.rc-footer { border-top: 1px solid rgba(224, 168, 153, .12); background: var(--wp--preset--color--base-deep); }
.rc-footer__col-title { font-size: 13px; font-weight: 800; letter-spacing: .6px; color: var(--wp--preset--color--contrast); margin-bottom: 14px; }
.rc-footer a { font-size: 13px; color: var(--wp--preset--color--muted); }
.rc-footer a:hover { color: var(--wp--preset--color--gold); }
.rc-footer .rc-footer__links { list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.rc-footer .rc-brand__name { color: var(--wp--preset--color--heading); }
.rc-footer__legal { font-size: 12px; color: var(--wp--preset--color--dim); }
.rc-chip {
	padding: 8px 14px; border-radius: 8px; background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .06); font-size: 12px; font-weight: 600; color: var(--wp--preset--color--dim);
}

/* =========================================================================
   RESPONSIVE  — the piece the original inline markup was missing entirely
   ========================================================================= */

/* Tablet */
@media (max-width: 900px) {
	.rc-compare { position: static; }
	.rc-offer__amount { font-size: 40px; }
}

/* Mobile */
@media (max-width: 600px) {
	body { --rc-side: 16px; }
	.rc-section { padding-top: 36px; }

	/* tighten root padding on small screens */
	.rc-header__inner { min-height: 60px; }
	.rc-brand__mark { width: 32px; height: 32px; font-size: 18px; }
	.rc-brand__name { font-size: 17px; }

	/* stat row wraps to 2-up */
	.rc-stats { gap: 18px 28px; }

	.rc-offer { padding: 26px 20px; }
	.rc-offer__amount { font-size: 38px; }

	/* buttons go full width so they are tappable */
	.rc-hero .wp-block-buttons .wp-block-button,
	.rc-app .wp-block-buttons .wp-block-button { width: 100%; }
	.rc-hero .wp-block-buttons .wp-block-button__link,
	.rc-app .wp-block-buttons .wp-block-button__link { display: block; text-align: center; }

	.rc-faq > summary { font-size: 15px; padding: 16px 18px; }
	.rc-18 { flex-direction: row; align-items: flex-start; }
}

/* Mobile header: keep only logo, burger and the primary CTA; the language
   switch and secondary link move out of the cramped bar. Core Navigation
   shows its hamburger below 600px. */
@media (max-width: 600px) {
	.rc-header__inner { gap: 10px; padding: 0 16px; }
	.rc-topbar { padding: 6px 16px; }
	.rc-lang { display: none; }
	.rc-header__actions .rc-btn-outline { display: none; }
	.rc-header__actions { gap: 10px; }
	/* let the nav (burger) sit just before the CTA on the right */
	.rc-nav { order: 3; margin-left: auto; }
	.rc-header__actions { order: 4; margin-left: 0; }
	.rc-topbar { font-size: 11px; gap: 4px 12px; }
}

/* Very small */
@media (max-width: 400px) {
	.rc-brand__name { display: none; }
	.rc-header__actions .wp-block-button__link { padding: 9px 14px !important; }
}

/* ===========================================================================
   Accessibility & polish pass (v2.1.0)
   Additive only — no changes to block markup, so Gutenberg validation is safe.
   =========================================================================== */

/* Skip-to-content: off-screen until it receives keyboard focus. */
.rc-skip-link {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -130%);
	z-index: 2000;
	padding: 12px 22px;
	background: #070C1A;
	color: #FFFFFF;
	font-family: "Source Sans 3", system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
	transition: transform .18s ease-out;
}
.rc-skip-link:focus {
	transform: translate(-50%, 0);
	outline: none;
}

/* Visible keyboard focus on every interactive element (WCAG 2.4.7).
   Only shows for keyboard users via :focus-visible, so mouse clicks stay clean. */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #F0C9BC;
	outline-offset: 3px;
	border-radius: 6px;
}

/* Mobile: guarantee 44px tap targets and remove the 300ms tap delay (WCAG 2.5.5). */
@media (max-width: 600px) {
	.wp-block-button__link,
	.rc-nav .wp-block-navigation-item__content,
	.rc-header__actions a,
	.rc-lang a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		touch-action: manipulation;
	}
}

/* Honour prefers-reduced-motion globally, not just the floating hero art. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---- Supplement: native wp:table dark styling + mobile scroll, notes (added by builder) ---- */
.wp-block-table{margin:18px 0;}
.wp-block-table.rc-table,.wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.wp-block-table table{width:100%;border-collapse:collapse;min-width:520px;font-size:14px;}
.wp-block-table th,.wp-block-table td{padding:12px 14px;text-align:left;border-bottom:var(--rc-hairline,1px solid rgba(255,255,255,.08));}
.wp-block-table thead th{color:var(--wp--preset--color--heading);font-weight:800;font-family:var(--wp--preset--font-family--mono);letter-spacing:.3px;}
.wp-block-table tbody td{color:var(--wp--preset--color--body);}
.wp-block-table tbody td:nth-child(n+2){font-family:var(--wp--preset--font-family--mono);color:var(--wp--preset--color--contrast);}
.rc-note{font-size:13px;line-height:1.6;color:var(--wp--preset--color--dim);border-left:2px solid rgba(224,168,153,.30);padding:2px 0 2px 14px;margin:14px 0;}
.rc-rating-pill{white-space:nowrap;}
@media (max-width:600px){.wp-block-table table{min-width:480px;}}

/* ===========================================================================
   royale-promokod.com — Navy & Rose-Gold identity (R-under-crown wordmark)
   =========================================================================== */
/* Rose-gold monogram tile; crown embossed above the R (restores base crown,
   overriding the sibling spade). */
.rc-brand__mark{
	border-radius:10px;
	box-shadow:0 4px 16px rgba(0,0,0,.5), inset 0 0 0 1px rgba(240,201,188,.30);
}
.rc-brand__mark::before{ /* crown ♔ above the R, rose-gold */
	content:"\2654";
	position:absolute; top:-11px; left:50%; right:auto; bottom:auto;
	transform:translateX(-50%);
	width:auto; height:auto; border-radius:0; background:none; box-shadow:none;
	display:block; font-size:15px; line-height:1;
	color:var(--wp--preset--color--gold-soft);
	text-shadow:0 1px 0 rgba(0,0,0,.5), 0 -1px 0 rgba(240,201,188,.35);
}
/* Static single-language marker (AZ-only site). */
.rc-langtag{
	display:inline-flex;align-items:center;padding:6px 11px;border-radius:8px;
	border:1px solid rgba(224,168,153,.30);background:rgba(224,168,153,.07);
	font-size:12.5px;font-weight:700;letter-spacing:.4px;
	color:var(--wp--preset--color--gold);
}
/* Promokod copy field (offer pages). */
.rc-promo{
	display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;
	max-width:460px;margin:6px 0 2px;
}
.rc-promo__code{
	flex:1 1 200px;display:flex;align-items:center;justify-content:center;
	font-family:var(--wp--preset--font-family--mono);font-weight:700;font-size:19px;
	letter-spacing:2px;color:var(--wp--preset--color--gold-soft);
	padding:14px 18px;border-radius:12px;
	background:rgba(224,168,153,.07);border:1px dashed rgba(224,168,153,.46);
}
.rc-promo__btn{
	flex:0 0 auto;cursor:pointer;font:inherit;font-weight:800;
	padding:14px 22px;border-radius:12px;min-height:44px;border:none;
	color:var(--wp--preset--color--ink);
	background:var(--wp--preset--gradient--gold);
	box-shadow:var(--wp--preset--shadow--gold);
}
.rc-promo__btn:hover{filter:brightness(1.04);}
.rc-promo__btn.is-copied{background:var(--wp--preset--color--green);color:#070C1A;}

/* ==========================================================================
   PROMOKOD EDITION — editorial casino redesign
   A deliberate dark-club identity: inky green velvet, brass highlights and
   calmer surfaces.  These overrides are shared by the home and guide pages.
   ========================================================================== */
:root {
	--rc-ink: #071510;
	--rc-ink-deep: #030806;
	--rc-velvet: #0b241b;
	--rc-brass: #d6aa58;
	--rc-cream: #f7f0df;
	--rc-line: rgba(214, 170, 88, .20);
	--rc-panel: rgba(12, 33, 25, .82);
}
body { background: var(--rc-ink-deep); color: #d7dfd7; }
.wp-site-blocks::before {
	background:
		radial-gradient(900px 540px at 92% -6%, rgba(159, 100, 43, .17), transparent 60%),
		radial-gradient(720px 480px at 3% 12%, rgba(21, 100, 65, .22), transparent 66%),
		linear-gradient(115deg, #030806 0%, #071510 54%, #06110d 100%);
}
.rc-header { background: rgba(3, 10, 7, .88); border-bottom-color: var(--rc-line); }
.rc-header__inner, .rc-topbar { max-width: 1240px; }
.rc-brand__mark { background: linear-gradient(145deg, #f1d58c, #b77b30); border-color: rgba(255,232,165,.7); color: #122018; }
.rc-brand__name { letter-spacing: -.04em; color: var(--rc-cream); }
.rc-brand__name b, .rc-gold-text, .rc-eyebrow { color: var(--rc-brass); }
.rc-topbar, .rc-stat__label, .rc-feature__text, .rc-step__text { color: #9cae9f; }
.rc-card, .rc-feature, .rc-step, .rc-review, .rc-faq, .rc-quicklink {
	background: linear-gradient(145deg, rgba(19,47,35,.86), rgba(7,20,15,.84));
	border-color: var(--rc-line);
}
.rc-card-raised, .rc-offer, .rc-app, .rc-cta, .rc-compare {
	background: linear-gradient(145deg, rgba(27,59,41,.96), rgba(8,25,18,.96));
	border-color: rgba(214,170,88,.34);
	box-shadow: 0 24px 60px rgba(0,0,0,.30);
}
.rc-offer::after, .rc-app::after, .rc-cta::after { background: radial-gradient(520px 250px at 100% 0%, rgba(214,170,88,.13), transparent 68%); }
.rc-offer__amount, .rc-stat__num, .rc-step__num, .rc-bonus__amount { color: #f1d58c; }
.wp-block-button:not(.rc-btn-outline) > .wp-block-button__link, .rc-promo__btn {
	background: linear-gradient(135deg, #f1d58c, #c88937) !important;
	box-shadow: 0 10px 28px rgba(188,126,46,.22);
}
.wp-block-button.rc-btn-outline .wp-block-button__link { border-color: rgba(214,170,88,.45); }
.rc-badge, .rc-langtag { border-color: rgba(214,170,88,.36); background: rgba(214,170,88,.08); color: #f1d58c; }
.rc-hero__art img, .rc-hero-art { border-radius: 4px 24px 4px 24px; border-color: rgba(214,170,88,.32); }
.rc-game, .rc-post { background: #0a1d15; border-color: rgba(214,170,88,.16); }
.rc-game:hover, .rc-post:hover, .rc-quicklink:hover { border-color: rgba(241,213,140,.58); transform: translateY(-5px); }
.rc-game__play { background: linear-gradient(135deg,#f1d58c,#c88937); color: #102016; }
.rc-pay { background: rgba(12,38,27,.85); border-color: var(--rc-line); color: #f1d58c; }
.rc-footer { background: #020704; border-color: var(--rc-line); }
.rc-hero { padding-top: clamp(48px, 8vw, 88px); }
@media (max-width: 600px) {
	.rc-hero { padding-top: 38px; }
	.rc-hero__art img, .rc-hero-art { border-radius: 4px 18px 4px 18px; }
}

/* ==========================================================================
   NAVIGATION — concise desktop bar and a real mobile drawer
   ========================================================================== */
.rc-header { box-shadow: 0 10px 34px rgba(0, 0, 0, .16); }
.rc-header__inner {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	min-height: 78px;
	gap: clamp(18px, 3vw, 44px);
}
.rc-brand { text-decoration: none; white-space: nowrap; }
.rc-brand__name { font-size: 19px; }
.rc-nav { justify-self: center; min-width: 0; }
.rc-nav .wp-block-navigation__container {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 5px;
	border: 1px solid rgba(214, 170, 88, .14);
	border-radius: 12px;
	background: rgba(255, 255, 255, .025);
}
.rc-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 12px;
	font-size: 13px;
	letter-spacing: .01em;
	color: #bdc9bf;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}
.rc-nav .wp-block-navigation-item__content:hover,
.rc-nav .current-menu-item .wp-block-navigation-item__content {
	background: rgba(214, 170, 88, .13);
	color: #f8efd9;
}
.rc-header__actions { gap: 10px; }
.rc-header__actions > p { margin: 0; }
.rc-header__actions .rc-langtag { display: none; }
.rc-header__actions .wp-block-buttons { gap: 8px; }
.rc-header__actions .wp-block-button__link { min-height: 40px; padding: 10px 14px; font-size: 13px; }
.rc-topbar { min-height: 30px; padding-top: 5px; padding-bottom: 5px; border-top: 1px solid rgba(214, 170, 88, .09); }
.wp-block-navigation__responsive-container-open { display: none; }

/* WordPress keeps the overlay markup in the DOM even on desktop.  Make the
   desktop state explicit so an orphaned modal close control can never sit on
   top of the navigation bar. */
@media (min-width: 921px) {
	.rc-nav .wp-block-navigation__responsive-container {
		display: block !important;
		position: static !important;
		inset: auto !important;
		width: auto !important;
		height: auto !important;
		background: transparent !important;
		color: inherit !important;
	}
	.rc-nav .wp-block-navigation__responsive-close,
	.rc-nav .wp-block-navigation__responsive-container-close,
	.rc-nav .wp-block-navigation__responsive-container-open { display: none !important; }
	.rc-nav .wp-block-navigation__responsive-container-content { display: block !important; padding: 0 !important; }
}

@media (max-width: 920px) {
	.rc-header__inner { min-height: 66px; padding: 0 18px; grid-template-columns: auto 1fr auto; gap: 12px; }
	.rc-header__actions .rc-btn-outline { display: none; }
	.rc-nav { justify-self: end; order: 2; }
	.rc-header__actions { order: 3; margin-left: 0; }
	.wp-block-navigation__responsive-container-open {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		border: 1px solid rgba(214, 170, 88, .34);
		border-radius: 10px;
		background: rgba(214, 170, 88, .08);
		color: #f1d58c;
		cursor: pointer;
	}
	.rc-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.rc-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: 0;
		z-index: 1000;
		display: block;
		background: rgba(3, 11, 8, .98);
		backdrop-filter: blur(16px);
	}
	.rc-nav .wp-block-navigation__responsive-close { min-height: 74px; padding: 0 20px; display: flex; justify-content: flex-end; }
	.rc-nav .wp-block-navigation__responsive-container-close {
		width: 42px; height: 42px; margin-top: 16px; border: 1px solid rgba(214,170,88,.34);
		border-radius: 10px; background: transparent; color: #f1d58c;
	}
	.rc-nav .wp-block-navigation__responsive-container-content { padding: 10px 28px 40px; }
	.rc-nav .wp-block-navigation__container {
		display: flex; flex-direction: column; align-items: stretch; gap: 5px;
		padding: 0; border: 0; background: transparent;
	}
	.rc-nav .wp-block-navigation-item__content {
		justify-content: space-between; min-height: 58px; padding: 0 18px; border-radius: 12px;
		font-size: 18px; color: #f7f0df; background: rgba(255,255,255,.035);
	}
	.rc-nav .wp-block-navigation-item__content::after { content: "→"; color: #d6aa58; }
	.rc-topbar { display: none; }
}
@media (max-width: 460px) {
	.rc-brand__name { font-size: 16px; }
	.rc-brand__mark { width: 31px; height: 31px; font-size: 17px; }
	.rc-header__actions .wp-block-button__link { padding: 10px 12px; font-size: 12px; }
}