/* Cookie Rocket — admin design system.
 * The structure, type and controls follow Elementor's admin (Editor One, Elementor 4.3:
 * modules/editor-one/assets/scss), so a site built with Elementor feels at home here. Cookie Rocket
 * keeps its own accent and mark. Everything is scoped to the plugin's screens (body.cr-app).
 */

/* ── Type: Roboto 3, variable, self-hosted (SIL OFL 1.1, fonts/LICENSE.txt). No CDN. ── */
@font-face { font-family: 'Roboto'; src: url('fonts/Roboto-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

.cr-app, .cr-wrap {
	--cr-font: 'Roboto', 'Helvetica', 'Arial', sans-serif;
	/* Text */
	--cr-ink: #0c0d0e;          /* text primary */
	--cr-muted: #3f444b;        /* text secondary, 9.8:1 */
	--cr-muted-soft: #69727d;   /* text tertiary, 4.9:1 on white: helper text */
	--cr-tab: #51575d;
	/* Accent: Cookie Rocket's own; white on it is 6.2:1 */
	--cr-accent: #533afd;
	--cr-accent-strong: #4329e6;
	--cr-accent-tint: rgba(83, 58, 253, .08);
	--cr-dark: #0c0d0e;
	--cr-secondary: #515962;    /* outlined buttons, selects, checkmarks */
	/* Surfaces and lines */
	--cr-card: #fff;
	--cr-surface: #f9fafa;
	--cr-fill: #f3f4f7;
	--cr-surface-2: #edeef2;
	--cr-line: rgba(0, 0, 0, .12);      /* divider */
	--cr-line-strong: #8b93a1;          /* control edge, 3.1:1 */
	--cr-hover: rgba(0, 0, 0, .04);
	--cr-selected: rgba(0, 0, 0, .08);
	/* States */
	--cr-ok: #0a875a; --cr-ok-ink: #06704a; --cr-ok-tint: #e7f5ef;
	--cr-danger: #dc2626; --cr-warn: #bb5b1d; --cr-info: #2563eb;
	/* What Cookie Rocket Pro adds: Elementor's promotion color, marked with a crown */
	--cr-promo: #93003f; --cr-promo-strong: #7e013b; --cr-promo-tint: #f8e7ec; --cr-promo-ink: #67002c;
	/* Shape */
	--cr-r-btn: 3px; --cr-r: 4px; --cr-r-card: 8px; --cr-r-chip: 12px;
	/* Spacing scale: every gap on every screen is one of these. */
	--cr-gap-xs: 4px; --cr-gap-s: 8px; --cr-gap-m: 16px; --cr-gap-l: 24px; --cr-gap-xl: 32px;
	--cr-focus: 0 0 0 2px #fff, 0 0 0 4px var(--cr-accent);
	/* No measures: every block fills the content column, like the cards around it (owner's rule). */
	/* WordPress palette, used only where a native WP control is kept on purpose */
	--cr-wp-blue: #2271b1; --cr-wp-ink: #1d2327; --cr-wp-text: #50575e; --cr-wp-muted: #8c8f94; --cr-wp-line: #c3c4c7; --cr-wp-bg: #f0f0f1; --cr-wp-bg-soft: #f6f7f7;
	--cr-top: 50px; --cr-side: 240px; --cr-menu: 160px; --cr-adminbar: 32px;
	font-family: var(--cr-font);
}
.cr-app #wpcontent, .cr-app #wpcontent input, .cr-app #wpcontent select, .cr-app #wpcontent textarea, .cr-app #wpcontent button, .cr-app #wpcontent .button { font-family: var(--cr-font); }
.cr-app #wpcontent { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--cr-ink); font-size: 14px; line-height: 1.43; }
.cr-wrap *, .cr-sidenav, .cr-sidenav *, .cr-topbar-app, .cr-topbar-app * { box-sizing: border-box; }

/* ── App layout: Editor One (white page, 50px top bar, 240px side navigation) ── */
/* The page keeps WordPress's own grey and spacing (.wrap: 10px top, 20px right, 2px left), so
   Cookie Rocket sits in a white frame exactly as wide as every notice above it. */
.cr-app { --cr-frame-top: 10px; --cr-frame-bottom: 20px; }
/* WordPress keeps 65px under the page for its footer ("Thank you for creating with WordPress", the
   version); the frame ends above it. Below 783px WordPress hides that footer. */
@media screen and (min-width: 783px) {
	.cr-app { --cr-frame-bottom: 65px; }
}
.cr-app.folded { --cr-menu: 36px; }
/* The app is a grid in the page flow: other plugins' notices on top, full width; then the Cookie Rocket
   top bar; then the side menu and the screen. Nothing is fixed over the page, so a notice always sits
   above the whole app, as on any WordPress screen; the side menu stays in view while scrolling. */
.cr-app #wpbody-content { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; padding: var(--cr-frame-top) 20px var(--cr-frame-bottom) 2px; }
.cr-app #wpbody-content > * { min-width: 0; }
@media screen and (min-width: 783px) {
	.cr-app #wpbody-content { grid-template-columns: var(--cr-side) minmax(0, 1fr); }
	.cr-app #wpbody-content > * { grid-column: 2; }
	.cr-app #wpbody-content > #screen-meta, .cr-app #wpbody-content > #screen-meta-links, .cr-app #wpbody-content > .update-nag, .cr-app #wpbody-content > .cr-wp-notices, .cr-app #wpbody-content > .cr-topbar-app, .cr-app #wpbody-content > .clear { grid-column: 1 / -1; }
	.cr-app #wpbody-content > .cr-sidenav { grid-column: 1; grid-row: span 3; align-self: stretch; }
	/* The frame: the top bar opens it, the side menu and the screen close it, all on white. */
	.cr-app #wpbody-content > .cr-topbar-app { border: 1px solid var(--cr-line); border-radius: var(--cr-r-card) var(--cr-r-card) 0 0; }
	.cr-app #wpbody-content > .cr-sidenav { border-left: 1px solid var(--cr-line); border-bottom: 1px solid var(--cr-line); border-bottom-left-radius: var(--cr-r-card); }
	.cr-app #wpbody-content > .cr-notes, .cr-app #wpbody-content > .cr-wrap { align-self: stretch; background: var(--cr-card); border-right: 1px solid var(--cr-line); }
	.cr-app #wpbody-content > .cr-wrap { border-bottom: 1px solid var(--cr-line); border-bottom-right-radius: var(--cr-r-card); }
	.cr-sidenav > ul, .cr-sidenav__promo { position: sticky; top: calc(var(--cr-adminbar) + 12px); }
	.cr-sidenav__promo { top: auto; bottom: 12px; }
	/* A screen too short for both: the menu scrolls with the page, as WordPress's own menu does (admin.js),
	   and the card rides right under it, 12px below its last item. */
	.cr-sidenav.is-tight > ul, .cr-sidenav.is-tight .cr-sidenav__promo { position: static; }
	.cr-sidenav.is-tight .cr-sidenav__promo { margin-top: 0; }
}
@media screen and (min-width: 783px) and (max-width: 960px) { .cr-app.auto-fold { --cr-menu: 36px; } }
.cr-topbar-app { box-sizing: border-box; height: var(--cr-top); display: flex; align-items: center; gap: 12px; padding: 0 20px; background: var(--cr-card); border-bottom: 1px solid var(--cr-line); }
.cr-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--cr-ink); text-decoration: none; font-weight: 700; font-size: 15px; }
.cr-brand:hover, .cr-brand:focus { color: var(--cr-ink); }
.cr-brand__mark { width: 28px; height: 28px; border-radius: 6px; background: var(--cr-accent); display: grid; place-items: center; }
.cr-brand__mark svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cr-topbar-app__end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cr-sidenav { background: var(--cr-card); border-right: 1px solid var(--cr-line); padding: 12px; display: flex; flex-direction: column; min-height: calc(100vh - var(--cr-adminbar) - var(--cr-top) - var(--cr-frame-top) - var(--cr-frame-bottom)); }
.cr-sidenav ul { list-style: none; margin: 0; padding: 0; }
.cr-sidenav > ul { display: grid; gap: 2px; }
.cr-sidenav li { margin: 0; }
.cr-sidenav__link { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: var(--cr-r); color: var(--cr-muted); text-decoration: none; font-size: 14px; }
.cr-sidenav__link:hover, .cr-sidenav__sublink:hover { background: var(--cr-hover); color: var(--cr-ink); }
.cr-sidenav__link[aria-current="page"], .cr-sidenav__sublink[aria-current="page"] { background: var(--cr-selected); color: var(--cr-ink); font-weight: 500; }
.cr-sidenav__item.is-open > .cr-sidenav__link { color: var(--cr-ink); font-weight: 500; }
.cr-ico { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cr-sidenav__sub { display: grid; gap: 2px; margin: 2px 0 6px !important; }
.cr-sidenav__sublink { display: flex; align-items: center; min-height: 34px; padding: 6px 12px 6px 44px; border-radius: var(--cr-r); color: var(--cr-muted); text-decoration: none; font-size: 13px; }
.cr-sidenav a:focus { box-shadow: none; outline: none; }
.cr-sidenav a:focus-visible, .cr-brand:focus-visible, .cr-topbar-app a:focus-visible { box-shadow: var(--cr-focus); outline: none; }
.cr-sidenav__end { flex: 1 0 auto; display: flex; flex-direction: column; padding-top: 12px; }
.cr-sidenav__promo { margin-top: auto; padding: 16px; border: 1px solid var(--cr-line); border-radius: var(--cr-r-card); }
.cr-sidenav__promo strong { display: block; font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.cr-sidenav__promo p { margin: 0 0 12px; color: var(--cr-muted-soft); font-size: 13px; line-height: 1.45; }
.cr-sidenav__promo .cr-btn-promo { width: 100%; }
/* Notes about the site (law suggestion, reject rate, review ask) sit at the top of the content. */
/* Other plugins' notices land here (WordPress moves them after .wp-header-end), full width above the page. */
.cr-wp-notices { padding: 0; }
.cr-wp-notices hr.wp-header-end { display: none; margin: 0; }
/* WordPress's own update nag is not moved with the notices: align it with them. */
.cr-app #wpbody-content > .update-nag { margin: 5px 0 15px; }
.cr-app #wpbody-content .cr-wp-notices > .notice, .cr-app #wpbody-content .cr-wp-notices > div.updated, .cr-app #wpbody-content .cr-wp-notices > div.error { margin: 5px 0 15px; }
.cr-notes:empty { display: none; }
.cr-app .cr-notes .button { min-height: 30px; padding: 5px 12px; font-size: 13px; }
.cr-notes { padding: 20px 32px 0; }

/* The page: 24px top, 32px sides; title left, actions right, a divider under them. */
.cr-app .cr-wrap { margin: 0; padding: 24px 32px 48px; max-width: none; float: none; }
.cr-app .cr-wrap > h1:first-child, .cr-app .cr-wrap > .cr-page-head:first-child { margin-top: 0; }
.cr-app .cr-wrap h1 { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: 0; color: var(--cr-ink); margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid var(--cr-line); }
.cr-app .cr-wrap h2 { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: 0; color: var(--cr-ink); }
.cr-app .cr-wrap h3 { font-size: 16px; line-height: 1.3; font-weight: 500; letter-spacing: 0; color: var(--cr-ink); }
.cr-wrap a { color: var(--cr-info); }
.cr-wrap a:hover { color: #1d4ed8; }

/* ── Controls (Editor One _common / _elements) ── */
.cr-app .cr-wrap .button, .cr-app .cr-notes .button {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 34px; height: auto; padding: 7px 16px; line-height: 1.2;
	border-radius: var(--cr-r-btn); border: 1px solid var(--cr-secondary); background: transparent; color: var(--cr-ink);
	font-size: 14px; font-weight: 500; box-shadow: none; text-shadow: none; vertical-align: middle;
}
.cr-app .cr-wrap .button:hover, .cr-app .cr-notes .button:hover { background: var(--cr-hover); border-color: var(--cr-ink); color: var(--cr-ink); }
.cr-app .cr-wrap .button:active { background: var(--cr-selected); }
.cr-app .cr-wrap .button-primary, .cr-app .cr-notes .button-primary { background: var(--cr-accent); border-color: var(--cr-accent); color: #fff; }
.cr-app .cr-wrap .button-primary:hover, .cr-app .cr-notes .button-primary:hover { background: var(--cr-accent-strong); border-color: var(--cr-accent-strong); color: #fff; }
.cr-app .cr-wrap .button:focus, .cr-app .cr-notes .button:focus { box-shadow: none; outline: none; }
.cr-app .cr-wrap .button:focus-visible, .cr-app .cr-notes .button:focus-visible { box-shadow: var(--cr-focus); }
.cr-app .cr-wrap .button[disabled], .cr-app .cr-wrap .button:disabled { opacity: .5; cursor: not-allowed; }
.cr-app .cr-wrap .button-hero { min-height: 42px; padding: 10px 22px; font-size: 15px; }
.cr-app .cr-wrap .button-link { border: 0; background: none; padding: 0; min-height: 0; color: var(--cr-info); }
/* A button's icon is the button's own ink, at text size: never a second color. */
.cr-app .cr-wrap .button .dashicons, .cr-app .cr-notes .button .dashicons { color: currentColor; font-size: 16px; width: 16px; height: 16px; line-height: 1; margin: 0; vertical-align: middle; }
.cr-app .cr-wrap .button.disabled, .cr-app .cr-wrap .button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Alerts inside a screen: an icon, a title, what it means and what to do. */
.cr-alert { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 var(--cr-gap-l); padding: var(--cr-gap-m); border: 1px solid; border-radius: var(--cr-r-card); font-size: 13px; line-height: 1.55; }
.cr-alert > .dashicons { flex: 0 0 auto; font-size: 20px; width: 20px; height: 20px; }
.cr-alert strong { display: block; font-size: 14px; font-weight: 600; color: var(--cr-ink); }
.cr-alert p { margin: var(--cr-gap-xs) 0 0; color: var(--cr-muted); }
.cr-alert form { margin: var(--cr-gap-m) 0 0; }
.cr-alert--warn { background: #fff8eb; border-color: #f0c77a; }
.cr-alert--warn > .dashicons { color: var(--cr-warn); }
.cr-alert--danger { background: #fdf0f0; border-color: #f2b8b8; }
.cr-alert--danger > .dashicons { color: var(--cr-danger); }
.cr-btn-promo { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 6px 14px; border-radius: var(--cr-r-btn); border: 1px solid var(--cr-promo); background: var(--cr-promo); color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.cr-btn-promo:hover, .cr-btn-promo:focus { background: var(--cr-promo-strong); border-color: var(--cr-promo-strong); color: #fff; }
.cr-wrap a.cr-btn-promo, .cr-wrap a.cr-btn-promo:hover { color: #fff; text-decoration: none; }
.cr-btn-promo--outlined { background: transparent; color: var(--cr-promo); }
.cr-btn-promo--outlined:hover, .cr-btn-promo--outlined:focus { background: var(--cr-promo-tint); color: var(--cr-promo); }
.cr-crown { width: 16px; height: 16px; flex: 0 0 16px; fill: currentColor; }
.cr-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--cr-r-chip); font-size: 13px; font-weight: 400; line-height: 1; text-decoration: none; white-space: nowrap; }
.cr-chip--ok { background: var(--cr-ok-tint); color: var(--cr-ok-ink); }
.cr-chip--ok::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cr-ok); }
.cr-chip--promo { background: var(--cr-promo-tint); color: var(--cr-promo-ink); }
.cr-chip--promo .cr-crown { width: 12px; height: 12px; flex-basis: 12px; }
a.cr-chip:hover { filter: brightness(.97); }

.cr-wrap input[type="text"], .cr-wrap input[type="email"], .cr-wrap input[type="url"], .cr-wrap input[type="number"], .cr-wrap input[type="search"], .cr-wrap input[type="password"], .cr-wrap input[type="tel"], .cr-wrap textarea {
	min-height: 34px; padding: 6px 10px; border: 1px solid var(--cr-line-strong); border-radius: var(--cr-r-btn); background: var(--cr-card); color: var(--cr-ink); font-size: 13px; line-height: 1.4; box-shadow: none;
}
.cr-wrap input[type="text"]:hover, .cr-wrap input[type="email"]:hover, .cr-wrap input[type="url"]:hover, .cr-wrap input[type="number"]:hover, .cr-wrap textarea:hover { border-color: var(--cr-muted); }
.cr-wrap input:focus, .cr-wrap textarea:focus, .cr-wrap select:focus { border-color: var(--cr-accent); box-shadow: 0 0 0 1px var(--cr-accent); outline: none; }
.cr-wrap select { min-height: 34px; height: 34px; padding: 0 32px 0 10px; line-height: 32px; border: 1px solid var(--cr-secondary); border-radius: var(--cr-r-btn); color: var(--cr-ink); font-size: 13px; background-color: var(--cr-card); background-position: right 10px center; }
.cr-wrap select:hover { color: var(--cr-ink); border-color: var(--cr-ink); }
.cr-wrap input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; margin: 0 6px 0 0; border: 1px solid var(--cr-line-strong); border-radius: 4px; background: var(--cr-card); box-shadow: none; vertical-align: -3px; }
.cr-wrap input[type="checkbox"]:checked::before { content: none; }
.cr-wrap input[type="checkbox"]:checked { background: var(--cr-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.2 2.6 2.6L12 5.4' fill='none' stroke='%23515962' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.cr-wrap input[type="radio"] { width: 16px; height: 16px; border: 1px solid var(--cr-line-strong); box-shadow: none; }
/* WordPress 7 fills a checked radio with the admin colour scheme blue, under our dark dot: keep it white. */
.cr-wrap input[type="radio"]:checked { border-color: var(--cr-ink); background: var(--cr-card); }
.cr-wrap input[type="radio"]:checked::before { width: 8px; height: 8px; margin: 3px; background: var(--cr-ink); border-radius: 50%; }
.cr-wrap input[type="checkbox"]:focus-visible, .cr-wrap input[type="radio"]:focus-visible { box-shadow: var(--cr-focus); }

/* Settings rows: Elementor's .form-table — label 219px 600, value 13px, a divider per row. */
.cr-wrap .form-table { border-collapse: separate; border-spacing: 0; margin: 0; }
.cr-wrap .form-table th { width: 219px; padding: 16px 24px 16px 0; font-size: 14px; font-weight: 600; color: var(--cr-ink); vertical-align: top; line-height: 1.4; }
.cr-wrap .form-table td { padding: 12px 0; font-size: 13px; color: var(--cr-ink); vertical-align: top; }
.cr-wrap .form-table tr { border-bottom: 1px solid var(--cr-line); }
.cr-wrap .form-table tr:last-child { border-bottom: 0; }
.cr-wrap .form-table th, .cr-wrap .form-table td { border-bottom: 1px solid var(--cr-line); }
.cr-wrap .form-table tr:last-child th, .cr-wrap .form-table tr:last-child td { border-bottom: 0; }
.cr-wrap .form-table .description, .cr-wrap p.description { color: var(--cr-muted-soft); font-size: 13px; line-height: 1.45; margin-top: 6px; font-style: normal; }
.cr-wrap .form-table td > label { font-size: 13px; line-height: 1.5; }
@media screen and (max-width: 782px) {
	.cr-wrap .form-table th { width: auto; padding: 16px 0 4px; border-bottom: 0; }
	.cr-wrap .form-table td { padding: 4px 0 16px; }
}

/* ── Page header with actions (Elementor .e-admin-header) and the two-column body of Home ── */
.cr-page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid var(--cr-line); }
.cr-app .cr-wrap .cr-page-head h1 { flex: 1; margin: 0; padding: 0; border: 0; }
.cr-page-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cr-cols { display: grid; grid-template-columns: minmax(0, 1fr) 305px; gap: 20px; align-items: start; }
.cr-cols__main > * + *, .cr-cols__side > * + * { margin-top: 20px; }
.cr-cols .cr-card { margin: 0; }
.cr-cols__side .cr-setup-grid { grid-template-columns: 1fr; gap: 0; }
.cr-cols__side .cr-setup-item { border: 0; border-bottom: 1px solid var(--cr-line); border-radius: 0; background: none; padding: 12px 0; }
.cr-cols__side .cr-setup-item:last-child { border-bottom: 0; padding-bottom: 0; }
.cr-cols__side .cr-setup-item:hover { background: none; }
.cr-cols__side .cr-setup-item:hover .cr-setup-item__val { color: var(--cr-accent); }
.cr-cols__side .cr-section-title { margin: 20px 0 8px; }
.cr-cols__side .cr-section-title + .cr-card { margin-top: 0; }
@media screen and (max-width: 1100px) { .cr-cols { grid-template-columns: 1fr; } }
/* Status: the live protection, as a card with its switches as chips. */
.cr-dash .cr-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 0; padding: 20px 24px; background: var(--cr-card); border: 1px solid var(--cr-line); border-radius: var(--cr-r-card); }
.cr-dash .cr-topbar__logo { width: 40px; height: 40px; border-radius: 50%; background: var(--cr-ok-tint); }
.cr-dash .cr-topbar__logo .dashicons { color: var(--cr-ok-ink); }
.cr-dash .cr-topbar__txt strong { font-size: 16px; font-weight: 500; }
.cr-dash .cr-topbar__txt span { font-size: 13px; color: var(--cr-muted-soft); }
.cr-dash .cr-pill { height: 24px; padding: 0 10px; border: 0; background: var(--cr-ok-tint); color: var(--cr-ok-ink); font-size: 13px; font-weight: 400; }
.cr-dash .cr-pill .dashicons { color: var(--cr-ok-ink); font-size: 14px; width: 14px; height: 14px; }
.cr-dash .cr-pill--off { background: var(--cr-fill); color: var(--cr-muted); }
.cr-dash .cr-pill--off .dashicons { color: var(--cr-muted); }
.cr-dash .cr-topbar__setup { color: var(--cr-info); font-size: 13px; }
/* Stat cards (Elementor Home): the label on top, then the figure, then what it means. */
.cr-stat { padding: 20px 24px; }
.cr-stat__label { order: -1; margin: 0 0 4px; }
.cr-stat__num { font-size: 32px; font-weight: 700; line-height: 1.235; }
.cr-stat__num--text { font-size: 20px; font-weight: 500; line-height: 1.6; }
.cr-stat__icon { color: var(--cr-muted-soft); top: 20px; right: 20px; }
.cr-stat__link { color: var(--cr-info); font-weight: 500; }
/* The Pro panel in the side column: header, features, one button. The crown and the feature icons
   share a column, and the title lines up with the feature names. */
.cr-propanel { margin: 0; background: var(--cr-card); border: 1px solid var(--cr-line); border-radius: var(--cr-r-card); overflow: hidden; }
.cr-propanel__head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 16px; background: var(--cr-card); color: var(--cr-ink); border-bottom: 1px solid var(--cr-line); }
.cr-propanel__mark { display: flex; flex: 0 0 18px; margin-top: 2px; color: var(--cr-promo); }
.cr-propanel__mark .cr-crown { width: 18px; height: 18px; flex-basis: 18px; }
.cr-app .cr-wrap .cr-propanel__head h2 { margin: 0 0 2px; color: var(--cr-ink); font-size: 16px; font-weight: 600; line-height: 1.4; }
.cr-propanel__head p { margin: 0; color: var(--cr-muted-soft); font-size: 13px; line-height: 1.45; text-wrap: balance; }
.cr-propanel__list { margin: 0; padding: 0 20px; list-style: none; }
.cr-propanel__item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cr-line); }
.cr-propanel__item:last-child { border-bottom: 0; }
.cr-propanel__icon { flex: 0 0 auto; color: var(--cr-promo); font-size: 18px; width: 18px; height: 18px; margin-top: 1px; }
.cr-propanel__txt { flex: 1; min-width: 0; }
.cr-propanel__txt strong { display: block; color: var(--cr-ink); font-size: 13px; font-weight: 500; }
.cr-propanel__txt p { margin: 2px 0 0; color: var(--cr-muted); font-size: 12px; line-height: 1.45; }
.cr-propanel__foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 20px 20px; background: var(--cr-card); }
.cr-propanel__foot .cr-btn-promo { width: 100%; min-height: 36px; }
.cr-propanel__foot span { color: var(--cr-muted); font-size: 12px; text-align: center; }

/* ── Tables (Elementor _tables.scss): one divider per row, no zebra, hover tint ── */
.cr-wrap .widefat { border: 1px solid var(--cr-line); border-radius: var(--cr-r-card); border-collapse: separate; border-spacing: 0; box-shadow: none; background: var(--cr-card); overflow: hidden; }
.cr-wrap .widefat thead th, .cr-wrap .widefat thead td, .cr-wrap .widefat tfoot th { padding: 12px 12px; border-bottom: 1px solid var(--cr-line); background: var(--cr-card); color: var(--cr-ink); font-size: 14px; font-weight: 500; line-height: 1.5; }
.cr-wrap .widefat tbody td, .cr-wrap .widefat tbody th { padding: 10px 12px; border-bottom: 1px solid var(--cr-line); color: var(--cr-ink); font-size: 13px; vertical-align: middle; }
.cr-wrap .widefat tbody tr:last-child td, .cr-wrap .widefat tbody tr:last-child th { border-bottom: 0; }
.cr-wrap .widefat.striped > tbody > :nth-child(odd), .cr-wrap .widefat tbody tr { background: var(--cr-card); }
.cr-wrap .widefat tbody tr:hover { background: var(--cr-hover); }
.cr-log-card, .cr-table-card { border: 0; }
/* A select inside a table takes its column's width, so a long option never widens the table past the screen. */
.cr-wrap .widefat select { width: 100%; max-width: 100%; min-width: 0; }

/* ── Consent Log actions, Scanner state and License (Cookie Rocket Pro screens) ── */
/* The log reads top to bottom on one rhythm: intro, retention, figures, actions, verdict, table. */
.cr-log .cr-lead { margin: 0 0 var(--cr-gap-s); }
.cr-log .cr-log-retention { margin: 0 0 var(--cr-gap-l); }
.cr-log .cr-stat-grid { margin: 0 0 var(--cr-gap-l); }
.cr-log-actions { justify-content: flex-start; gap: var(--cr-gap-s); margin: 0 0 var(--cr-gap-m); }
.cr-log-note { margin: 0 0 8px; font-size: 13px; color: var(--cr-muted-soft); }
.cr-log-integrity { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 var(--cr-gap-l); font-size: 13px; line-height: 1.5; }
.cr-log-integrity__note { color: var(--cr-muted); }
.cr-log-integrity .dashicons { font-size: 16px; width: 16px; height: 16px; }
.cr-log-integrity.is-ok { color: var(--cr-ok-ink); }
.cr-log-integrity.is-bad { color: var(--cr-danger); }
.cr-scan-state--on > .dashicons { color: var(--cr-ok-ink); }
.cr-inline-form { display: flex; gap: 6px; align-items: center; }
.crp-lic-grid { display: flex; gap: 32px; flex-wrap: wrap; margin: 4px 0 24px; }
.crp-lic-grid b { display: block; font-size: 16px; font-weight: 500; }
.crp-lic-grid span { color: var(--cr-muted-soft); font-size: 12px; }
.crp-key-in { max-width: 420px; width: 100%; font-variant-numeric: tabular-nums; }
.crp-lic-form--spaced { margin-bottom: 18px; }
.crp-msg { margin-left: 10px; font-weight: 500; }
.crp-msg.ok { color: var(--cr-ok-ink); }
.crp-msg.err { color: var(--cr-danger); }

/* ── Folder tabs (Elementor Settings .nav-tab-wrapper) ── */
.cr-ntabs { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0 0 28px; }
.cr-ntabs::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--cr-line); }
.cr-ntab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; max-height: 36px; padding: 10px; border: 1px solid var(--cr-line); border-bottom: 0; border-radius: 3px 3px 0 0; background: var(--cr-hover); color: var(--cr-tab); font: 500 14px/1 var(--cr-font); cursor: pointer; white-space: nowrap; }
.cr-ntab:hover { background: var(--cr-selected); }
.cr-ntab[aria-selected="true"] { z-index: 2; background: var(--cr-card); color: var(--cr-ink); }
.cr-ntab[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cr-card); }
.cr-ntab:focus { outline: none; }
.cr-ntab:focus-visible { box-shadow: var(--cr-focus); }
.cr-stab[hidden] { display: none; }
.cr-app .cr-wrap .cr-stab__title { margin: 0 0 4px; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.cr-stab__lead { margin: 0 0 8px; color: var(--cr-muted-soft); font-size: 14px; }
.cr-stab .form-table { margin-bottom: 32px; }
.cr-unit, .cr-inline { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--cr-muted); }
.cr-inline input[type="color"] { width: 44px; height: 34px; padding: 2px; border: 1px solid var(--cr-line-strong); border-radius: var(--cr-r-btn); background: var(--cr-card); }
.cr-wrap input.small-text { width: 96px; }
.cr-wrap input[type="number"] { width: 96px; }
.cr-copy { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cr-copy code { padding: 6px 10px; border-radius: var(--cr-r); background: var(--cr-fill); color: var(--cr-ink); font-size: 13px; }
.cr-app .cr-wrap .cr-copy__btn { min-height: 30px; padding: 5px 12px; font-size: 13px; }
/* Pro, seen from the free plugin: explained in one line, one way to it, no disabled control. */
.cr-promo-row { margin: 8px 0 32px; }
.cr-promo-alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--cr-r); background: var(--cr-promo-tint); color: var(--cr-promo-ink); }
.cr-promo-alert > .cr-crown { margin-top: 2px; }
.cr-promo-alert strong { font-weight: 500; }
.cr-promo-alert p { margin: 2px 0 10px; color: var(--cr-muted); font-size: 13px; }
/* Save: pinned to the bottom of the screen, as Elementor's settings footer. */
.cr-savebar { border-bottom-right-radius: var(--cr-r-card); position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; gap: 16px; margin: 0 -32px -48px; padding: 12px 32px; background: var(--cr-card); border-top: 1px solid var(--cr-line); }
.cr-savebar .submit { margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; }
.cr-savebar__dirty { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.cr-savebar__dirty::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cr-warn); }
.cr-savebar__dirty[hidden] { display: none; }
@media screen and (max-width: 782px) {
	.cr-ntabs { flex-wrap: nowrap; overflow-x: auto; }
	.cr-savebar { margin: 0 -16px -40px; padding: 12px 16px; }
}

/* ── Mobile (≤782): WordPress hides its menu; the side navigation becomes a scrolling row ── */
@media screen and (max-width: 782px) {
	.cr-app { --cr-adminbar: 46px; }
	/* WordPress's own phone spacing: 10px from the screen edge, as .wrap. */
	.cr-app #wpbody-content { padding: var(--cr-frame-top) 10px var(--cr-frame-bottom) 0; }
	.cr-app #wpbody-content > .cr-topbar-app { border: 1px solid var(--cr-line); border-radius: var(--cr-r-card) var(--cr-r-card) 0 0; }
	.cr-app #wpbody-content > .cr-sidenav, .cr-app #wpbody-content > .cr-notes, .cr-app #wpbody-content > .cr-wrap { background: var(--cr-card); border-left: 1px solid var(--cr-line); border-right: 1px solid var(--cr-line); }
	.cr-app #wpbody-content > .cr-wrap { border-bottom: 1px solid var(--cr-line); border-radius: 0 0 var(--cr-r-card) var(--cr-r-card); }
	.cr-topbar-app { padding: 0 16px; }
	.cr-sidenav { position: static; min-height: 0; padding: 6px 12px; border-right: 0; border-bottom: 1px solid var(--cr-line); flex-direction: row; overflow-x: auto; }
	.cr-sidenav > ul { display: flex; gap: 4px; }
	.cr-sidenav__item { display: contents; }
	.cr-sidenav__link { min-height: 36px; white-space: nowrap; }
	.cr-sidenav__link .cr-ico { display: none; }
	.cr-sidenav__item > .cr-sidenav__link[href] { display: flex; }
	.cr-sidenav__sub { display: contents; }
	.cr-sidenav__sub li { display: contents; }
	.cr-sidenav__sublink { padding: 6px 12px; white-space: nowrap; min-height: 36px; }
	.cr-sidenav__item.is-open > .cr-sidenav__link { display: none; }
	.cr-sidenav__item:not(.is-open) .cr-sidenav__sub { display: none; }
	.cr-sidenav__end { display: none; }
	.cr-notes { padding: 16px 16px 0; }
	.cr-wp-notices { padding: 0; }
	.cr-app #wpbody-content > .update-nag { margin: 5px 0 15px; }
	.cr-app .cr-wrap { padding: 20px 16px 40px; }
	.cr-app .cr-wrap h1 { font-size: 20px; }
}
/* 783–1100: the side navigation folds to its icons, as Editor One's collapsed state. */
@media screen and (min-width: 783px) and (max-width: 1100px) {
	.cr-app { --cr-side: 72px; }
	.cr-sidenav { padding: 12px 8px; }
	.cr-sidenav__link { justify-content: center; padding: 10px; }
	.cr-sidenav__sub, .cr-sidenav__promo p, .cr-sidenav__promo strong { display: none; }
	.cr-sidenav__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.cr-sidenav__item.is-open > .cr-sidenav__link { background: var(--cr-selected); }
	.cr-sidenav__promo { padding: 0; border: 0; display: flex; justify-content: center; }
	.cr-sidenav__promo .cr-btn-promo { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
	.cr-sidenav__promo .cr-btn-promo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ─── Status pills (dashboard topbar) — crisp white badges ───
   White surface + hairline border + faint shadow so they read as finished,
   not washed. The adaptive accent shows in the check + the "on" border tint. */
.cr-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--cr-r-chip); font-size: 12px; font-weight: 600; letter-spacing: .005em; background: var(--cr-card); color: var(--cr-ink); }
.cr-pill .dashicons { font-size: 15px; width: 15px; height: 15px; }
.cr-pill--on { border-color: rgba(34, 113, 177, .38); border-color: rgba(83,58,253,.35); }
.cr-pill--on .dashicons { color: var(--cr-accent); }
.cr-pill--off { color: var(--cr-muted); }
.cr-pill--off .dashicons { color: var(--cr-muted); }

/* ─── Stat grid ──────────────────────────────────────── */
/* The track is capped, so a stat card is the SAME size on every screen. With a 1fr max,
   a screen showing two stats stretched each card to ~540px while the dashboard's four sat
   at ~250px — one component, two sizes. */
/* Four indicators, so the column count must divide 4 evenly (4 → 2 → 1) — never 3, which would
   orphan the 4th card alone on a second row. auto-fit is avoided for exactly that reason. */
.cr-stat-grid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px; margin: 0 0 24px;
}
@media (max-width: 960px) { .cr-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cr-stat-grid { grid-template-columns: 1fr; } }
.cr-stat {
	position: relative; display: flex; flex-direction: column;
	background: var(--cr-card); border: 1px solid var(--cr-line);
	border-radius: var(--cr-r-card); padding: 20px 20px;
}
.cr-stat__num { font-size: 30px; font-weight: 600; line-height: 1; color: var(--cr-ink); padding-right: 28px; }
.cr-stat__num small { font-size: 14px; font-weight: 600; color: var(--cr-muted); }
/* Text values (e.g. a date) use a smaller size and may wrap, so long months never overflow. */
.cr-stat__num--text { font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.cr-stat__label { margin-top: 8px; font-size: 12px; font-weight: 400; letter-spacing: .03333em; color: var(--cr-muted-soft); }
.cr-stat__desc { margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--cr-muted); font-weight: 400; }
.cr-stat__link { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 600; color: var(--cr-accent); text-decoration: none; }
.cr-stat__link:hover { text-decoration: underline; }
.cr-stat__link:focus { outline: none; box-shadow: none; border-radius: var(--cr-r-card); }
.cr-stat__link:focus-visible { outline: 2px solid var(--cr-accent); outline-offset: 2px; border-radius: var(--cr-r-card); }
.cr-stat__icon { position: absolute; top: 18px; right: 20px; color: var(--cr-accent); font-size: 20px; width: 20px; height: 20px; opacity: .9; }

/* ─── Cards & sections ───────────────────────────────── */
.cr-card {
	background: var(--cr-card); border: 1px solid var(--cr-line);
	border-radius: var(--cr-r-card);
	padding: 24px 24px; margin: 0 0 20px;
}
.cr-card > h2, .cr-card > h3 { margin-top: 0; }
.cr-section-title { font-size: 16px; font-weight: 500; color: var(--cr-ink); margin: 24px 0 12px; }

/* ─── Dashboard: slim light topbar (replaces the dark hero) ─── */
/* ── One-click autopilot hero + result (first-run / "compliant" celebration) ── */
.cr-autopilot { margin: 24px 0; padding: 44px 32px; text-align: center; background: var(--cr-card); border: 1px solid var(--cr-line); border-radius: var(--cr-r-card); }
.cr-autopilot__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--cr-r); background: var(--cr-accent-tint); color: var(--cr-accent); margin-bottom: 18px; }
.cr-autopilot__icon svg { width: 32px; height: 32px; }
.cr-autopilot__icon--ok { background: var(--cr-ok-tint); color: var(--cr-ok); }
.cr-autopilot__icon--ok .dashicons { font-size: 36px; width: 36px; height: 36px; line-height: 1; }
.cr-autopilot__title { font-size: 24px; font-weight: 600; color: var(--cr-ink); margin: 0 0 10px; }
.cr-autopilot__lead { font-size: 14.5px; line-height: 1.6; color: var(--cr-muted); max-width: 540px; margin: 0 auto 22px; }
.cr-autopilot__go { margin-bottom: 14px !important; }
.cr-autopilot__manual { display: inline-block; font-size: 13px; color: var(--cr-muted); text-decoration: underline; }
.cr-autopilot__manual:hover { color: var(--cr-accent); }
/* width:fit-content (not a fixed max-width) so the list hugs its widest row and the whole group
   centers under the centered icon/title — a fixed 400px box left the rows visually shifted left. */
.cr-autopilot__list { list-style: none; margin: 4px auto 24px; padding: 0; width: fit-content; max-width: 100%; text-align: left; }
.cr-autopilot__list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 14px; color: var(--cr-ink); border-bottom: 1px solid var(--cr-line); }
.cr-autopilot__list li:last-child { border-bottom: 0; }
.cr-autopilot__check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--cr-r); background: var(--cr-ok-tint); color: var(--cr-ok); flex: 0 0 auto; }
.cr-autopilot__check .dashicons { font-size: 15px; width: 15px; height: 15px; line-height: 22px; }
.cr-autopilot__check--warn { background: color-mix(in srgb, var(--cr-warn) 14%, transparent); color: var(--cr-warn); }
.cr-autopilot__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cr-dash .cr-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; background: var(--cr-card); border: 1px solid var(--cr-line); border-radius: var(--cr-r-card); padding: 16px 20px; margin: 8px 0 20px; }
.cr-topbar__brand { display: flex; align-items: center; gap: 12px; }
.cr-topbar__logo { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--cr-r); background: var(--cr-accent); flex: 0 0 auto; }
.cr-topbar__logo .dashicons { color: var(--cr-card); font-size: 22px; width: 22px; height: 22px; }
.cr-topbar__txt strong { display: block; font-size: 14px; color: var(--cr-ink); line-height: 1.2; }
.cr-topbar__txt span { font-size: 12px; color: var(--cr-muted); }
.cr-topbar__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cr-topbar__setup { font-size: 12px; color: var(--cr-muted); text-decoration: none; align-self: center; }
.cr-topbar__setup:hover { color: var(--cr-accent); }
.cr-topbar__setup:focus { outline: none; box-shadow: none; border-radius: var(--cr-r); }
.cr-topbar__setup:focus-visible { outline: 2px solid var(--cr-accent); outline-offset: 2px; border-radius: var(--cr-r); }

/* ─── First-run setup wizard: sober linear steps (progress = one thin bar + a count, no
   numbered stepper) ─── */
.cr-wizard__head { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 12px; }
.cr-wizard__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--cr-ink); }
.cr-wizard__brand .dashicons { color: var(--cr-accent); }
.cr-wizard__progress { font-size: 12px; font-weight: 600; color: var(--cr-muted); }
.cr-wizard__bar { height: 4px; border-radius: var(--cr-r-btn); background: var(--cr-line); overflow: hidden; margin-bottom: 20px; }
.cr-wizard__bar span { display: block; height: 100%; background: var(--cr-accent); border-radius: var(--cr-r-btn); }
.cr-wizard__card { padding: 28px; }
.cr-wizard__card h1 { margin: 0 0 8px; font-size: 22px; }
.cr-wizard__lead { color: var(--cr-muted); font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
.cr-wizard__card .cr-field { max-width: 340px; }
.cr-wizard__actions { margin: 24px 0 0; display: flex; align-items: center; gap: 16px; }
.cr-wizard__skip { font-size: 13px; color: var(--cr-muted); text-decoration: none; }
.cr-wizard__skip:hover { color: var(--cr-accent); }
.cr-wizard__skip:focus { outline: none; box-shadow: none; border-radius: var(--cr-r); }
.cr-wizard__skip:focus-visible { outline: 2px solid var(--cr-accent); outline-offset: 2px; border-radius: var(--cr-r); }
.cr-wizard__note { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cr-ink); margin: 0 0 16px; }
.cr-wizard__note .dashicons { color: var(--cr-accent); }
.cr-wizard__summary { list-style: none; margin: 0 0 8px; padding: 0; }
.cr-wizard__summary li { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 14px; color: var(--cr-ink); }
.cr-wizard__summary .dashicons { color: var(--cr-accent); }

/* ─── What's left: compliance verdict + the single next action ─────────
   No stepper, no numbered marks. Each pending task is a plain row separated by the same
   hairline every surface uses; the top-priority row carries the primary button. When nothing
   is pending it collapses to one "all set" line. Subtraction, not a wizard rail. */
.cr-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cr-card__head h2 { margin: 0; font-size: 16px; color: var(--cr-ink); }
.cr-next__count { font-size: 12px; font-weight: 600; color: var(--cr-ink); background: var(--cr-accent-tint); padding: 4px 12px; border-radius: var(--cr-r-chip); white-space: nowrap; }
.cr-next__list { list-style: none; margin: 12px 0 0; padding: 0; }
.cr-next__item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--cr-line); }
.cr-next__item:first-child { border-top: 0; padding-top: 4px; }
.cr-next__item:last-child { padding-bottom: 4px; }
.cr-next__txt { min-width: 0; }
.cr-next__txt strong { display: block; font-size: 14px; color: var(--cr-ink); margin-bottom: 2px; }
.cr-next__txt span { font-size: 13px; color: var(--cr-muted); line-height: 1.5; }
.cr-next__item .button { flex: 0 0 auto; }
.cr-next--done .cr-next__done { display: flex; align-items: center; gap: 12px; }
.cr-next__done-icon { color: var(--cr-accent); font-size: 22px; width: 22px; height: 22px; flex: 0 0 auto; }
.cr-next__done-txt { flex: 1 1 auto; min-width: 0; }
.cr-next__done-txt strong { display: block; font-size: 14px; color: var(--cr-ink); }
.cr-next__done-txt span { font-size: 13px; color: var(--cr-muted); }
.cr-next__rescan { flex: 0 0 auto; }

/* ─── Banner editor: Elementor's editor — controls in a panel, the live page beside it ─── */
.cr-app .cr-wrap.cr-editor { padding: 0; }
.cr-editor__app { display: grid; grid-template-columns: 400px minmax(0, 1fr); height: calc(100vh - var(--cr-adminbar) - var(--cr-top) - var(--cr-frame-top) - var(--cr-frame-bottom) - 2px); min-height: 560px; }
.cr-editor__panel { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--cr-line); background: var(--cr-card); }
.cr-app .cr-wrap .cr-editor__title { margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--cr-line); font-size: 16px; font-weight: 500; line-height: 1.4; }
.cr-subnav { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--cr-line); }
.cr-subnav__item { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 4px 9px; border: 0; background: none; color: var(--cr-muted-soft); font: 400 12px/1.2 var(--cr-font); cursor: pointer; }
.cr-subnav__item .cr-ico { width: 20px; height: 20px; }
.cr-subnav__item:hover { color: var(--cr-ink); background: var(--cr-hover); }
.cr-subnav__item.is-active { color: var(--cr-ink); font-weight: 700; }
.cr-subnav__item.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--cr-ink); }
.cr-subnav__item:focus { outline: none; box-shadow: none; }
.cr-subnav__item:focus-visible { box-shadow: inset 0 0 0 2px var(--cr-accent); }
.cr-editor__main { flex: 1; min-height: 0; overflow-y: auto; }
.cr-panel { display: none; }
.cr-panel.is-active { display: block; }
/* Inside the panel, sections are divided by lines, not boxed: the panel is the surface. */
.cr-editor__panel .cr-card { border: 0; border-radius: 0; margin: 0; padding: 16px 20px 20px; }
.cr-editor__panel .cr-card__head h2 { font-size: 14px; font-weight: 700; }
.cr-editor__panel .cr-acc { border: 0; border-bottom: 1px solid var(--cr-line); border-radius: 0; margin: 0; }
.cr-editor__panel .cr-acc__head { padding: 14px 20px; font-size: 13px; font-weight: 700; }
.cr-editor__panel .cr-acc__body { padding: 0 20px 20px; }
/* The Style tab's Save sits outside the sections: give it their 20 px inset so it lines up
   with the content above instead of touching the panel's edge. */
.cr-editor__panel #cr-design-form > .submit { margin: 0; padding: 20px; }
/* Accordions everywhere else (Blocking, Policy) stay bordered cards. */
.cr-acc { border: 1px solid var(--cr-line); border-radius: var(--cr-r-card); background: var(--cr-card); margin: 0 0 16px; overflow: hidden; }
.cr-acc__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px; background: transparent; border: 0; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--cr-ink); }
.cr-acc__head .dashicons { color: var(--cr-muted); }
.cr-acc.is-open .cr-acc__head .dashicons { transform: rotate(180deg); }
.cr-acc__head:focus { outline: none; box-shadow: none; }
.cr-acc__head:focus-visible { box-shadow: inset 0 0 0 2px var(--cr-accent); }
.cr-acc__body { padding: 0 20px 20px; display: none; }
.cr-acc.is-open .cr-acc__body { display: block; }
.cr-acc__body .form-table { margin-top: 0; }
/* Panel width: the components line up in the narrow column. */
.cr-editor__panel .cr-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cr-editor__panel .cr-cfields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.cr-editor__panel .cr-corners__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cr-gap-s); }
.cr-editor__panel .cr-corner { width: auto; min-width: 0; padding: 12px; }
.cr-corner__name, .cr-corner__value { max-width: 100%; overflow-wrap: anywhere; }
/* Typography bar (Pro): one row per element, a weight and three toggles, as a text editor. */
.cr-typo { margin: var(--cr-gap-l) 0 0; padding: var(--cr-gap-l) 0 0; border-top: 1px solid var(--cr-line); }
.cr-typo__title { margin: 0 0 var(--cr-gap-s); font-size: 14px; font-weight: 600; color: var(--cr-ink); }
.cr-typo__row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: var(--cr-gap-s); margin: 0 0 var(--cr-gap-s); }
.cr-typo__label { font-size: 13px; color: var(--cr-muted); }
.cr-typo__tools { display: flex; align-items: center; gap: var(--cr-gap-xs); flex-wrap: wrap; }
.cr-app .cr-wrap .cr-typo__tools select { min-height: 32px; height: 32px; max-width: 132px; font-size: 13px; }
.cr-app .cr-wrap .cr-typo__btn { min-width: 32px; min-height: 32px; height: 32px; padding: 0 8px; font-size: 14px; line-height: 1; }
.cr-app .cr-wrap .cr-typo__btn[aria-pressed="true"] { background: var(--cr-ink); border-color: var(--cr-ink); color: #fff; }
.cr-typo__btn--b { font-weight: 700; } .cr-typo__btn--i { font-style: italic; font-family: Georgia, serif; } .cr-typo__btn--u { text-decoration: underline; } .cr-typo__btn--aa { font-size: 12px !important; letter-spacing: .04em; }
/* Custom radius (Pro): a number and a slider under the corners. */
.cr-radius-custom { display: flex; align-items: center; gap: var(--cr-gap-s); margin: var(--cr-gap-m) 0 0; flex-wrap: wrap; }
.cr-radius-custom label { font-size: 13px; font-weight: 600; color: var(--cr-ink); }
.cr-radius-custom input[type="range"] { flex: 1 1 140px; accent-color: var(--cr-accent); }
.cr-app .cr-wrap .cr-radius-custom input[type="number"] { width: 72px; }
/* Fonts (Pro): Google Fonts hosted on the site, or the owner's own files. */
.crp-fonts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cr-gap-m); margin: var(--cr-gap-m) 0 0; }
.crp-fonts__group { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cr-gap-s); }
.crp-fonts > *, .crp-fonts__group > *, .crp-fonts__row > * { min-width: 0; }
.cr-app .cr-wrap .crp-fonts__row select, .cr-app .cr-wrap .crp-fonts__row input[type="text"] { width: auto; max-width: none; }
.crp-fonts__group[hidden] { display: none; }
.crp-fonts__head { font-size: 13px; font-weight: 600; color: var(--cr-ink); }
.crp-fonts__row { display: flex; align-items: center; gap: var(--cr-gap-s); }
.crp-fonts__row > select, .crp-fonts__row > input[type="text"] { flex: 1 1 0; min-width: 0; }
.crp-fonts__row > .button { flex: 0 0 auto; }
.cr-app .cr-wrap .crp-fonts__file { position: relative; overflow: hidden; max-width: 55%; }
.crp-fonts__file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.crp-fonts__file:has(input:focus-visible) { box-shadow: var(--cr-focus); }
.crp-fonts__file span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crp-fonts__hint { font-size: 12px; color: var(--cr-muted-soft); }
.crp-fonts__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--cr-gap-xs); }
.crp-fonts__item { display: flex; align-items: center; gap: var(--cr-gap-s); padding: 6px 0; border-bottom: 1px solid var(--cr-line); }
.crp-fonts__sample { flex: 1 1 auto; font-size: 15px; color: var(--cr-ink); }
.crp-fonts__status { margin: 0; font-size: 13px; color: var(--cr-muted); }
.crp-fonts__status:empty { display: none; }
.crp-fonts__status.is-error { color: var(--cr-danger); }
.cr-typo .cr-field + .cr-typo__bar, .cr-typo .cr-pro-sample { margin-top: var(--cr-gap-m); }
.cr-typo__bar { margin-top: var(--cr-gap-l); }
.cr-editor__panel .cr-hex { width: 100%; min-width: 0; }
.cr-editor__panel .cr-cfield__ctl { min-width: 0; }
.cr-editor__panel .cr-theme-card { grid-template-columns: 1fr; }
.cr-editor__panel .cr-theme-card__meta { border-right: 0; border-bottom: 1px solid var(--cr-line); padding: 12px 14px; }
.cr-editor__panel .cr-theme-stage { min-height: 0; padding: 12px; }
.cr-editor__panel .cr-theme-mini { flex-direction: column; align-items: stretch; gap: 8px; }
.cr-editor__panel .cr-content-form select { max-width: 100%; }
/* The stage: device buttons on top, the page below at the chosen width. */
.cr-editor__stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--cr-fill); }
.cr-stage__bar { position: relative; display: flex; align-items: center; justify-content: center; height: 48px; flex: 0 0 48px; background: var(--cr-card); border-bottom: 1px solid var(--cr-line); }
.cr-devices { display: flex; gap: 4px; }
.cr-device { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--cr-r); background: none; color: var(--cr-muted); cursor: pointer; }
.cr-device:hover { background: var(--cr-hover); color: var(--cr-ink); }
.cr-device[aria-pressed="true"] { background: var(--cr-selected); color: var(--cr-ink); }
.cr-device:focus { outline: none; box-shadow: none; }
.cr-device:focus-visible { box-shadow: var(--cr-focus); }
.cr-stage__hint { position: absolute; right: 20px; font-size: 12px; color: var(--cr-muted-soft); }
/* The page is drawn at the real width of the device (1280, 768 or 390) and scaled down to fit,
   so the banner shows the layout a visitor on that screen gets, not the one of a narrow frame. */
.cr-preview__stage { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; align-items: center; padding: 20px; overflow: hidden; }
.cr-preview__device { flex: none; width: var(--cr-dw, 100%); height: var(--cr-dh, 100%); transform: scale(var(--cr-ds, 1)); transform-origin: top center; background: var(--cr-card); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .06); border-radius: 6px; overflow: hidden; }
#cr-preview-frame { width: 100%; height: 100%; border: 0; display: block; background: var(--cr-card); }
@media screen and (min-width: 783px) and (max-width: 1100px) {
	.cr-editor__app { grid-template-columns: 360px minmax(0, 1fr); }
	.cr-stage__hint { display: none; }
}
@media screen and (max-width: 782px) {
	.cr-editor__app { grid-template-columns: 1fr; height: auto; }
	.cr-editor__stage { order: -1; height: 60vh; min-height: 420px; }
	.cr-editor__panel { border-right: 0; }
	.cr-editor__main { overflow: visible; }
	.cr-stage__hint { display: none; }
	.cr-preview__stage { padding: 12px; }
}

/* ─── Quick actions ──────────────────────────────────── */
/* Actions hold buttons. A grid track stretches a lone button to the whole column (it was
   rendering ~630px wide); a primary action must keep its intrinsic width. */
.cr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0 0 20px; }
.cr-action {
	display: flex; align-items: center; gap: 16px;
	background: var(--cr-card); border: 1px solid var(--cr-line);
	border-radius: var(--cr-r-card); padding: 16px 20px;
	text-decoration: none; color: var(--cr-ink);
}
.cr-action:hover {
	border-color: rgba(29, 35, 39, .55); color: var(--cr-ink);
}
.cr-action__icon {
	width: 42px; height: 42px; border-radius: var(--cr-r); flex-shrink: 0;
	background: var(--cr-accent-tint); color: var(--cr-accent-strong);
	display: flex; align-items: center; justify-content: center;
}
.cr-action__icon .dashicons { font-size: 22px; width: 22px; height: 22px; }
.cr-action__body { flex: 1; min-width: 0; }
.cr-action__body strong { display: block; font-size: 14px; font-weight: 600; }
.cr-action__body span { display: block; font-size: 12px; color: var(--cr-muted); margin-top: 1px; }
.cr-action__arrow { color: var(--cr-muted); opacity: .6; }
.cr-action:hover .cr-action__arrow { color: var(--cr-accent-strong); opacity: 1; }
.cr-action:focus { outline: none; box-shadow: none; border-radius: var(--cr-r-card); }
.cr-action:focus-visible { outline: 2px solid var(--cr-accent); outline-offset: 2px; }


/* ─── Form polish (Settings / Design) ────────────────── */
.cr-wrap .form-table .description { color: var(--cr-muted); font-style: normal; }
.cr-wrap input[type="color"] { width: 54px; height: 34px; padding: 2px; cursor: pointer; vertical-align: middle; border-radius: var(--cr-r); }
.cr-wrap input[type="number"] { width: 100px; }
/* Buttons, focus rings and form tables are left to WordPress native styling (neutral, accessible). */

/* ─── Save toast ─────────────────────────────────────── */
.cr-notice-saved {
	display: inline-flex; align-items: center; margin-left: 12px;
	padding: 4px 12px; background: var(--cr-accent-tint); color: var(--cr-wp-ink);
	border-radius: var(--cr-r-chip); font-size: 12px; font-weight: 600;
	opacity: 0; 
}
.cr-notice-saved.cr-visible { opacity: 1; }

/* ONE code treatment for the whole admin. Scoped to .cr-wrap so inline <code> in prose
   (e.g. .cr-lead) never inherits the muted grey, which fails contrast on its own tint. */
.cr-wrap code { background: var(--cr-fill); padding: 4px 8px; border-radius: var(--cr-r-btn); color: var(--cr-ink); }

/* ─── Banner theme picker ────────────────────────────── */
/* Style presets: one full-width row each — what it is on the left, the banner as visitors see it
   on the right, on a page, with its real text and its three buttons. */
/* Colors: three groups (Banner, Accept and Reject, Customize) split by a hairline, never boxed. */
.cr-colors, .cr-shape { padding-top: 4px; }
.cr-cgroup { padding: 20px 0; border-top: 1px solid var(--cr-line); }
.cr-cgroup:first-child { padding-top: 4px; border-top: 0; }
.cr-cgroup:last-of-type { padding-bottom: 4px; }
.cr-cgroup__title { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--cr-ink); }
.cr-cgroup__desc { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--cr-muted); }
.cr-cfields { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 16px 32px; }
.cr-cfields + .cr-cfields { margin-top: 16px; }
.cr-cfield label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--cr-ink); }
.cr-cfield__ctl { display: flex; align-items: center; gap: 8px; }
.cr-cfield__ctl input[type="color"] { width: 40px; height: 36px; margin: 0; padding: 2px; border: 1px solid #8c8f94; border-radius: var(--cr-r); background: var(--cr-card); cursor: pointer; }
/* Same 36px as the color and hex fields: line-height is the inner height (36 minus the 2px of
   border), and the chevron gets room of its own, centered, instead of touching the text. */
.cr-wrap .cr-cfield__ctl select { height: 36px; min-height: 36px; margin: 0; padding: 0 36px 0 12px; line-height: 34px; background-position: right 12px center; }
.cr-wrap .cr-hex { width: 96px; min-height: 36px; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.cr-wrap .cr-hex[aria-invalid="true"] { border-color: var(--cr-danger); box-shadow: 0 0 0 1px var(--cr-danger); }
.cr-cfield__desc { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--cr-muted); }
.cr-cgroup__contrast { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 14px 0 0; font-size: 12px; color: var(--cr-muted); font-variant-numeric: tabular-nums; }
.cr-ratio.is-low { color: var(--cr-danger); font-weight: 600; }
.cr-ratio__fix { margin-left: 8px !important; font-size: 12px !important; }
@media (max-width: 782px) { .cr-cfields { grid-template-columns: 1fr; } }
/* Corners: each choice shows its own shape. The radio stays in the page (keyboard, screen reader). */
.cr-corners { margin: 0; padding: 4px 0; border: 0; min-width: 0; }
.cr-corners__list { display: flex; flex-wrap: wrap; gap: 12px; }
.cr-corner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 132px; padding: 14px; box-sizing: border-box; border: 1.5px solid var(--cr-line); background: var(--cr-card); cursor: pointer; }
.cr-corner:hover { border-color: var(--cr-accent); }
.cr-corner input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.cr-corner:has(input:checked) { border-color: var(--cr-accent); box-shadow: inset 0 0 0 1px var(--cr-accent); }
.cr-corner:has(input:focus-visible) { outline: 2px solid var(--cr-accent); outline-offset: 2px; }
.cr-corner__shape { display: block; width: 52px; height: 34px; margin: 0 0 4px; box-sizing: border-box; border: 1.5px solid var(--cr-ink); background: var(--cr-fill); }
.cr-corner__shape.is-borderless { border-color: transparent; }
.cr-corner__shape.is-shadowed { border-color: transparent; box-shadow: 0 8px 8px rgba(0, 0, 0, .16); }
.cr-cfield__ctl[hidden], .crp-border[hidden] { display: none; }
.cr-cfield__label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--cr-ink); }
.cr-cfield .cr-cfield__ctl .cr-check { display: inline-flex; align-items: center; gap: 6px; height: 36px; margin: 0; font-size: 13px; font-weight: 400; }
.cr-border .crp-border, .cr-shadow .crp-shadow { margin-top: 14px; }
.cr-corner__name { font-size: 13px; font-weight: 600; color: var(--cr-ink); }
.cr-corner__value { font-size: 12px; color: var(--cr-muted); font-variant-numeric: tabular-nums; }
.cr-subnote.cr-theme-intro { margin: 0 0 20px; }
.cr-theme-grid { display: flex; flex-direction: column; gap: 12px; margin: 0 0 8px; }
.cr-theme-card { position: relative; display: grid; grid-template-columns: minmax(200px, 260px) 1fr; border: 1.5px solid var(--cr-line); border-radius: var(--cr-r-card); overflow: hidden; cursor: pointer; background: var(--cr-card); outline: none; }
.cr-theme-card:hover { border-color: var(--cr-accent); }
.cr-theme-card:focus-visible, .cr-theme-card.is-selected { border-color: var(--cr-accent); }
.cr-theme-card__meta { padding: 16px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--cr-line); }
.cr-theme-card__name { font-size: 14px; font-weight: 600; color: var(--cr-ink); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cr-theme-card__desc { margin: 0; font-size: 12px; line-height: 1.5; color: var(--cr-muted); }
.cr-theme-pro { background: var(--cr-accent); color: var(--cr-card); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--cr-r-chip); }
.cr-theme-active { background: var(--cr-accent-tint); color: var(--cr-accent-strong); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--cr-r-chip); }
/* Page content sits only BEHIND the banner: a solid style hides it completely, and a see-through
   one (Frosted) shows it, which is the only thing it is there for. */
.cr-theme-stage { position: relative; min-height: 118px; padding: 16px; display: flex; align-items: center; background: var(--cr-fill); overflow: hidden; }
.cr-theme-page { position: absolute; left: 32px; right: 32px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 7px; }
.cr-theme-page i { display: block; height: 7px; background: rgba(18, 19, 23, .12); }
.cr-theme-page i:nth-child(1) { width: 38%; height: 11px; background: rgba(18, 19, 23, .22); }
.cr-theme-page i:nth-child(2) { width: 86%; }
.cr-theme-page i:nth-child(3) { width: 72%; }
.cr-theme-page i:nth-child(4) { width: 80%; }
.cr-theme-mini { position: relative; width: 100%; display: flex; align-items: center; gap: 16px; padding: 12px 14px; box-sizing: border-box; background: var(--bg); color: var(--tx); border: 1px solid var(--tx); border-radius: var(--rad); }
.cr-theme-mini__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cr-theme-mini__t { font-size: 12px; font-weight: 600; line-height: 1.3; }
.cr-theme-mini__p { font-size: 11px; line-height: 1.4; opacity: .72; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cr-theme-mini__btns { flex-shrink: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.cr-theme-mini__btns span { padding: 6px 10px; font-size: 11px; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; background: var(--ab); color: var(--abt); border: 1px solid transparent; border-radius: min(var(--rad), 4px); }
.cr-theme-mini__btns .is-config { background: transparent; color: var(--tx); border-color: rgba(128, 128, 128, .4); }
.cr-theme-card.is-frosted .cr-theme-mini { background: color-mix(in srgb, var(--bg) 85%, transparent); border-color: transparent; box-shadow: 0 4px 8px rgba(0, 0, 0, .16); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cr-theme-lock { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: var(--cr-r); background: rgba(10, 15, 26, .55); color: var(--cr-card); display: flex; align-items: center; justify-content: center; }
.cr-theme-lock .dashicons { font-size: 14px; width: 14px; height: 14px; }
/* Narrow screens: the row stacks, and the banner stacks the way it does on a phone. */
@media (max-width: 960px) {
	.cr-theme-card { grid-template-columns: 1fr; }
	.cr-theme-card__meta { border-right: 0; border-bottom: 1px solid var(--cr-line); }
	.cr-theme-mini { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* ─── Layout picker (where & how) ────────────────────── */
.cr-layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 16px; margin: 0 0 24px; }
.cr-layout-grid + .cr-subnote { margin: -12px 0 20px; }
.cr-layout-card { position: relative; border: 1.5px solid var(--cr-line); border-radius: var(--cr-r-card); background: var(--cr-card); cursor: pointer; overflow: hidden; outline: none; }
.cr-layout-card:hover { border-color: var(--cr-accent); }
.cr-layout-card:focus-visible, .cr-layout-card.is-selected { border-color: var(--cr-accent); }
.cr-layout-card.is-selected::after { content: "\f147"; font-family: dashicons; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: var(--cr-r-card); background: var(--cr-accent); color: var(--cr-card); font-size: 15px; line-height: 22px; text-align: center; }
.cr-layout-diagram { position: relative; height: 92px; background: var(--cr-fill); overflow: hidden; }
.cr-layout-bar { position: absolute; background: var(--cr-accent); border-radius: var(--cr-r); opacity: .9; }
.cr-lay-bottom_bar .cr-layout-bar { left: 12%; right: 12%; bottom: 12px; height: 16px; }
.cr-lay-top_bar .cr-layout-bar { left: 12%; right: 12%; top: 12px; height: 16px; }
.cr-lay-modal .cr-layout-diagram { background: var(--cr-surface-2); }
/* The two layouts that stack their buttons in a column are vertical cards, not bars, so their
   thumbnails are drawn vertical to match what applying them produces. */
.cr-lay-modal .cr-layout-bar { left: 50%; top: 50%; transform: translate(-50%,-50%); width: 40%; height: 66px; }
.cr-lay-floating .cr-layout-bar { right: 13px; bottom: 13px; width: 30%; height: 62px; }
.cr-lay-drawer .cr-layout-bar { right: 12px; top: 12px; bottom: 12px; width: 28%; }
.cr-layout-name { padding: 12px 12px; font-size: 13px; font-weight: 600; text-align: center; color: var(--cr-ink); border-top: 1px solid var(--cr-line); }
.cr-layout-pos { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; flex-wrap: wrap; }
.cr-layout-bd { margin: 12px 0 4px; }
/* A Cookie Rocket Pro option in the free edition: a picture of what it does, with a lock, that opens the Pro page. */
.cr-pro-sample { position: relative; display: grid; gap: 10px; margin: 14px 0 4px; padding: 14px; border: 1.5px solid var(--cr-line); border-radius: var(--cr-r-card); background: var(--cr-card); color: var(--cr-ink); text-decoration: none; }
.cr-wrap a.cr-pro-sample, .cr-wrap a.cr-pro-sample:hover, .cr-wrap a.cr-pro-sample:focus { color: var(--cr-ink); }
.cr-pro-sample:hover, .cr-pro-sample:focus { border-color: var(--cr-accent); }
.cr-pro-sample:focus { outline: none; box-shadow: none; }
.cr-pro-sample:focus-visible { box-shadow: var(--cr-focus); }
.cr-pro-sample__head { display: flex; align-items: center; gap: 8px; padding-right: 32px; font-size: 13px; font-weight: 600; line-height: 1.4; }
.cr-pro-sample__head .cr-theme-pro { flex: 0 0 auto; }
.cr-pro-sample__desc { margin-top: -4px; font-size: 12px; line-height: 1.5; color: var(--cr-muted); }
.cr-pro-sample__pics { display: grid; grid-template-columns: repeat(var(--cr-sample-cols, 3), minmax(0, 1fr)); gap: 8px; }
.cr-pro-sample__tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 10px; border: 1px solid var(--cr-line); border-radius: var(--cr-r); }
.cr-pro-sample__tile.is-wide, .cr-pro-sample__tile:has(.is-button) { grid-column: 1 / -1; }
.cr-pro-sample__tile:has(.is-button) { flex-direction: row; align-items: center; gap: 12px; }
.cr-pro-sample__name { max-width: 100%; font-size: 12px; font-weight: 600; color: var(--cr-ink); overflow-wrap: anywhere; }
.cr-pro-sample__shape { display: block; box-sizing: border-box; width: 52px; max-width: 100%; height: 34px; border: 1.5px solid var(--cr-ink); background: var(--cr-fill); }
.cr-pro-sample__shape.is-type { display: flex; align-items: center; width: auto; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--cr-ink); }
.cr-pro-sample__shape.is-type::before { width: 22px; height: 22px; font-size: 22px; }
.cr-pro-sample__shape.is-radius { width: 64px; height: 40px; }
.cr-pro-sample__shape.is-shadow { border-color: transparent; }
.cr-pro-sample__shape.is-space { display: flex; }
.cr-pro-sample__shape.is-space::before { content: ""; flex: 1; background: var(--cr-muted); opacity: .45; }
.cr-pro-sample__shape.is-button { width: auto; height: auto; padding: 6px 12px; border: 0; border-radius: 4px; background: var(--cr-ink); color: #fff; line-height: 1.2; white-space: nowrap; }
.cr-pro-sample__shape.is-blur { position: relative; width: 100%; height: 64px; padding: 9px 10px; border: 1px solid var(--cr-line); background: var(--cr-card); overflow: hidden; }
.cr-pro-sample__shape.is-blur i { display: block; height: 6px; margin: 0 0 7px; border-radius: 3px; background: var(--cr-muted-soft); opacity: .6; filter: blur(2.5px); }
.cr-pro-sample__shape.is-blur i:nth-child(2) { width: 72%; }
.cr-pro-sample__shape.is-blur i:nth-child(4) { width: 56%; }
.cr-pro-sample__shape.is-blur b { position: absolute; top: 50%; left: 50%; width: 46%; height: 26px; transform: translate(-50%, -50%); border-radius: 4px; background: var(--cr-card); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
/* A control width, deliberately narrow: controls keep their own size, while every content
   block fills its column. */
.cr-content-form select { max-width: 300px; }
.cr-layout-pos__label { font-size: 13px; font-weight: 600; color: var(--cr-ink); margin-right: 4px; }
/* One control height for the whole product. These rendered at 33px: neither a button (40)
   nor a segmented item — a third size that bought nothing. (.cr-barw-btn has no rules of its
   own; the markup reuses this class, so both are fixed here.) */
.cr-pos-btn { display: inline-flex; align-items: center; min-height: 40px; border: 1px solid var(--cr-line); background: var(--cr-card); border-radius: var(--cr-r-btn); padding: 8px 20px; font-size: 13px; font-weight: 500; color: var(--cr-ink); cursor: pointer; }
.cr-pos-btn:hover { border-color: var(--cr-accent); }
.cr-pos-btn.is-selected { border-color: transparent; background: var(--cr-accent-tint); color: var(--cr-accent-strong); }
/* Pill button: kill the browser/WP square focus ring + keep the capsule for mouse focus; keyboard
   focus shows an accent outline that follows the pill radius. */
.cr-pos-btn:focus { outline: none; box-shadow: none; border-radius: var(--cr-r-btn); }
.cr-pos-btn:focus-visible { outline: 2px solid var(--cr-accent); outline-offset: 2px; }
.cr-layout-font { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cr-line); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cr-layout-font form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; min-width: 0; }
/* The Pro family field is .regular-text (25em): on a phone it has to give way, not push the page. */
.cr-layout-font input.regular-text { flex: 1 1 12em; width: auto; max-width: 25em; min-width: 0; }
.cr-layout-font .cr-subnote { flex-basis: 100%; margin: 6px 0 0; }
.cr-layout-font .button { margin: 0 !important; }

/* ─── Cookie Scanner ──────────────────────────────────── */
.cr-scan-cta, .cr-scan-state { display: flex; align-items: center; gap: 16px; padding: 20px 20px; margin: 20px 0; border: 1px solid var(--cr-line); border-radius: var(--cr-r-card); background: var(--cr-card); }
.cr-scan-cta > .dashicons, .cr-scan-state > .dashicons { font-size: 30px; width: 30px; height: 30px; flex: 0 0 auto; color: var(--cr-muted); }
.cr-scan-state__body { flex: 1 1 auto; min-width: 0; }
.cr-scan-state__body strong { display: block; font-size: 14px; color: var(--cr-ink); margin-bottom: 2px; }
.cr-scan-state__body p { margin: 4px 0; font-size: 13px; color: var(--cr-muted); }
.cr-scan-state__pro { color: var(--cr-muted); font-weight: 600; }
.cr-scan-state__pro .dashicons { font-size: 15px; width: 15px; height: 15px; vertical-align: text-bottom; margin-right: 4px; }
.cr-scan-cta .button, .cr-scan-state .button { margin-left: auto; flex: 0 0 auto; align-self: center; }
.cr-scan-state--stale { border-color: rgba(34, 113, 177, .38); border-color: rgba(83,58,253,.35); background: var(--cr-surface); }
.cr-scan-state--stale > .dashicons { color: var(--cr-accent); }
.cr-scan-state--fresh { border-color: rgba(29, 35, 39, .5); }
.cr-scan-state--fresh > .dashicons { color: var(--cr-wp-ink); }
.cr-scan-table .dashicons { font-size: 16px; width: 16px; height: 16px; margin-right: 2px; }
.cr-pro-hooks { margin: 28px 0 0; padding: 24px 24px; border-radius: var(--cr-r-card); background: var(--cr-dark); color: var(--cr-surface-2); }
.cr-pro-hooks h2 { margin: 0 0 16px; color: var(--cr-card); font-size: 16px; }
.cr-pro-hooks ul { margin: 0 0 16px; padding: 0; list-style: none; }
.cr-pro-hooks li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; font-size: 13px; color: var(--cr-line-strong); }
.cr-pro-hooks li .dashicons { color: var(--cr-wp-line); flex: 0 0 auto; font-size: 18px; width: 18px; height: 18px; }

/* ─── Categories: one premium card per consent category ─── */
.cr-lead { font-size: 13px; line-height: 1.55; color: var(--cr-muted); margin: 4px 0 20px; }
.cr-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; margin: 0 0 24px; }
.cr-cat-card { background: var(--cr-card); border: 1px solid var(--cr-line); border-radius: var(--cr-r-card); overflow: hidden; }
.cr-cat-card__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--cr-line); background: var(--cr-surface); }
.cr-cat-card__icon { width: 30px; height: 30px; border-radius: var(--cr-r); background: var(--cr-accent-tint); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cr-cat-card__icon .dashicons { color: var(--cr-accent); font-size: 17px; width: 17px; height: 17px; line-height: 17px; }
.cr-cat-card__title { font-size: 14px; font-weight: 600; color: var(--cr-ink); }
.cr-badge { margin-left: auto; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: var(--cr-r-chip); color: var(--cr-muted); background: var(--cr-fill); }
.cr-badge--on { color: var(--cr-accent-strong); background: rgba(34, 113, 177, .08); background: color-mix(in srgb, var(--cr-accent) 9%, var(--cr-card)); border-color: rgba(34, 113, 177, .28); border-color: color-mix(in srgb, var(--cr-accent) 30%, transparent); }
.cr-cat-card__body { padding: 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.cr-field-row { display: flex; gap: 12px; align-items: flex-start; }
.cr-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cr-field--grow { flex: 1 1 auto; }
.cr-field--num { flex: 0 0 78px; width: 78px; }
.cr-field label { font-size: 13px; font-weight: 500; color: var(--cr-muted); }
/* Fields inherit the native WordPress control: height 40, radius 2px, font-size 14px and —
   critically — the native #8c8f94 border (3.03:1). The hairline token (#e3e5e8 = 1.26:1) must
   not paint the boundary: it fails WCAG 1.4.11, which axe cannot detect.
   Only layout is authored here. */
.cr-wrap .cr-field input[type="text"], .cr-wrap .cr-field input[type="number"], .cr-wrap .cr-field textarea { width: 100%; margin: 0; }
.cr-wrap .cr-field textarea { resize: vertical; }
.cr-wrap .cr-field input:focus, .cr-wrap .cr-field textarea:focus { border-color: var(--cr-accent); outline: none; }
/* Cookie Banner → Content panel */
.cr-content-form { display: flex; flex-direction: column; gap: 16px; }
.cr-content-sub { margin: 8px 0 0; padding-top: 20px; border-top: 1px solid var(--cr-line); font-size: 16px; font-weight: 500; color: var(--cr-ink); }
.cr-content-form .cr-field-row { gap: 12px; flex-wrap: wrap; }
.cr-content-form .cr-field--grow { flex: 1 1 150px; }
.cr-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cr-ink); }
.cr-check input { margin: 0; }
.cr-content-actions { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; }
.cr-content-saved { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--cr-accent-strong); }
.cr-content-saved .dashicons { color: var(--cr-accent); font-size: 17px; width: 17px; height: 17px; }

/* Dashboard → Your setup (config at a glance) */
.cr-setup { margin-bottom: 24px; }
.cr-setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.cr-setup-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--cr-line); border-radius: var(--cr-r-card); background: var(--cr-surface); text-decoration: none; }
.cr-setup-item:hover { border-color: var(--cr-accent); background: var(--cr-card); }
/* Card tile: `:focus{outline:none}` alone left WP core's a:focus box-shadow ring + border-radius: var(--cr-r); keyboard
   focus shows an accent outline that follows the card corners. */
.cr-setup-item:focus { outline: none; box-shadow: none; border-radius: var(--cr-r-card); }
.cr-setup-item:focus-visible { outline: 2px solid var(--cr-accent); outline-offset: 2px; }
.cr-setup-item__icon { color: var(--cr-accent); font-size: 20px; width: 20px; height: 20px; flex: 0 0 auto; }
.cr-setup-item__txt { display: flex; flex-direction: column; min-width: 0; }
.cr-setup-item__label { font-size: 12px; font-weight: 400; color: var(--cr-muted-soft); }
.cr-setup-item__val { font-size: 13px; font-weight: 600; color: var(--cr-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* Reusable "Pro" note (class-based, no inline styles). */
/* Consent Log: what each column means, a "?" on each column that opens it, and finding a person's records. */
.cr-log-help__list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 24px; margin: 0 0 var(--cr-gap-m); }
.cr-log-help__list dt { font-size: 13px; font-weight: 600; color: var(--cr-ink); outline: none; border-radius: var(--cr-r); }
.cr-log-help__list dd { margin: 0; font-size: 13px; line-height: 1.55; color: var(--cr-muted); border-radius: var(--cr-r); }
.cr-log-help__list dt.is-flash, .cr-log-help__list dt.is-flash + dd { animation: cr-flash 1.8s ease-out; }
@keyframes cr-flash { from { background: var(--cr-accent-tint); box-shadow: 0 0 0 6px var(--cr-accent-tint); } to { background: transparent; box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .cr-log-help__list dt.is-flash, .cr-log-help__list dt.is-flash + dd { animation: none; background: var(--cr-accent-tint); } }
.cr-log-help__note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--cr-ink); }
.cr-log-find { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--cr-gap-m); }
.cr-log-find label { font-size: 13px; font-weight: 600; color: var(--cr-ink); }
.cr-log-find__row { display: flex; gap: var(--cr-gap-s); }
.cr-app .cr-wrap .cr-log-find__row input { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; }
.cr-log-find__help { font-size: 12px; line-height: 1.5; color: var(--cr-muted); }
.cr-log-found { margin: 0 0 var(--cr-gap-m); font-size: 13px; color: var(--cr-ink); }
.cr-th-help { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px; border: 1px solid var(--cr-line); border-radius: 50%; font-size: 11px; font-weight: 600; line-height: 1; color: var(--cr-muted); text-decoration: none; vertical-align: middle; }
.cr-log-card th { white-space: nowrap; } /* a header and its "?" stay on one line */
.cr-log-card td.cr-log-hash, .cr-log-card td.cr-log-date { white-space: nowrap; font-variant-numeric: tabular-nums; } /* codes and dates never break; the categories column wraps */
.cr-th-help::after { content: ""; position: absolute; inset: -4px; } /* a 26px target (WCAG 2.5.8) around an 18px mark */
.cr-wrap a.cr-th-help:hover, .cr-wrap a.cr-th-help:focus-visible { color: var(--cr-accent); border-color: var(--cr-accent); outline: none; }
@media (max-width: 600px) { .cr-log-help__list { grid-template-columns: minmax(0, 1fr); gap: 2px; } .cr-log-help__list dd { margin-bottom: 12px; } }
/* Your own services: one card per service; every field has its label above it, and fills its column. */
.cr-services { display: grid; gap: var(--cr-gap-m); margin: 0 0 var(--cr-gap-l); }
.cr-service { padding: 20px 24px; border: 1px solid var(--cr-line); border-radius: var(--cr-r-card); background: var(--cr-card); }
.cr-app .cr-wrap .cr-service__title { margin: 0 0 var(--cr-gap-m); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--cr-ink); }
.cr-service__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--cr-gap-m); }
.cr-service__field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--cr-gap-m); }
.cr-service > .cr-service__field:last-of-type { margin-bottom: 0; }
.cr-service__field label { font-size: 13px; font-weight: 600; color: var(--cr-ink); }
.cr-app .cr-wrap .cr-service__field input, .cr-app .cr-wrap .cr-service__field select, .cr-app .cr-wrap .cr-service__field textarea { width: 100%; max-width: none; margin: 0; }
.cr-service__help { margin: 0; font-size: 12px; line-height: 1.5; color: var(--cr-muted); }
.cr-service > .cr-service__help { margin-top: var(--cr-gap-s); }
@media (max-width: 782px) { .cr-service { padding: 16px; } .cr-service__row { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* A Pro note spans the content like the cards around it; only its text keeps the reading measure. */
.cr-pronote { display: flex; gap: 12px; align-items: flex-start; background: var(--cr-card); border: 1px solid var(--cr-line); border-radius: var(--cr-r-card); padding: 16px 20px; }
.cr-pronote__icon { width: 34px; height: 34px; border-radius: var(--cr-r); background: var(--cr-accent-tint); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cr-pronote__icon .dashicons { color: var(--cr-accent); font-size: 18px; width: 18px; height: 18px; }
.cr-pronote__txt strong { display: block; font-size: 13px; color: var(--cr-ink); margin-bottom: 2px; }
.cr-pronote__txt p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--cr-muted); }

/* ─── Cookie Policy ──────────────────────────────────── */
.cr-policy-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cr-ink); margin: 2px 0 16px; }
.cr-policy-status .dashicons { color: var(--cr-accent); font-size: 18px; width: 18px; height: 18px; }
.cr-policy-help { font-size: 13px; color: var(--cr-muted); margin: 2px 0 16px; line-height: 1.5; }
.cr-shortcode { border-top: 1px solid var(--cr-line); padding-top: 16px; }
.cr-shortcode label { display: block; font-size: 13px; font-weight: 500; color: var(--cr-muted); margin-bottom: 8px; }
/* Native control geometry. Codes and figures use the sans's tabular numerals. */
.cr-policy .cr-shortcode input { width: 100%; max-width: 320px; margin: 0; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.cr-note { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 20px; padding: 12px 16px; border: 0; border-radius: var(--cr-r); background: var(--cr-fill); }
.cr-note .dashicons { color: var(--cr-info); flex: 0 0 auto; font-size: 18px; width: 18px; height: 18px; }
.cr-note p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--cr-muted); }

/* ─── Consent Log ────────────────────────────────────── */
/* Wide content stays reachable: the table scrolls inside its own container. `overflow:hidden`
   here would cut the last columns off on narrow viewports with no way to reach them. */
/* Tables span the content like the cards around them; a wide one scrolls inside its card. */
.cr-log-card, .cr-table-card { padding: 0; overflow-x: auto; }
.cr-log-date { white-space: nowrap; color: var(--cr-muted); }
.cr-log-hash { font-size: 11px; color: var(--cr-muted); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; word-break: break-all; }
.cr-log-muted { color: var(--cr-muted-soft); }
.cr-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: var(--cr-r-chip); white-space: nowrap; }
.cr-tag--ok { color: var(--cr-accent-strong); background: rgba(34, 113, 177, .08); background: color-mix(in srgb, var(--cr-accent) 9%, var(--cr-card)); border-color: rgba(34, 113, 177, .28); border-color: color-mix(in srgb, var(--cr-accent) 28%, transparent); }
.cr-tag--muted { color: var(--cr-muted); background: var(--cr-fill); border-color: var(--cr-line); }
.cr-pager { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; }
.cr-pager__info { font-size: 13px; color: var(--cr-muted); }
.cr-empty { margin: 0; font-size: 13px; color: var(--cr-muted); }

/* ─── Scanner results (shares the log-table look) ─── */
.cr-subhead { margin: 24px 0 12px; font-size: 14px; font-weight: 600; color: var(--cr-ink); }
.cr-mono { font-size: 12px; color: var(--cr-muted); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.cr-status { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 12px; }
.cr-status .dashicons { font-size: 16px; width: 16px; height: 16px; }
.cr-status--ok { color: var(--cr-accent-strong); }
.cr-status--off { color: var(--cr-danger); }
.cr-status__fix { display: block; margin-top: 3px; font-size: 12px; }
.cr-hint { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--cr-muted); display: flex; align-items: flex-start; gap: 8px; }
.cr-hint .dashicons { color: var(--cr-accent); flex: 0 0 auto; font-size: 17px; width: 17px; height: 17px; }
.cr-hint--plain { display: block; }
.cr-hint a { color: var(--cr-accent); }
.cr-subnote { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--cr-muted); }

@media (max-width: 782px) {
	.cr-stat__num { font-size: 23px; }
	.cr-scan-cta, .cr-scan-state { flex-wrap: wrap; }
	.cr-scan-cta .button, .cr-scan-state .button { margin-left: 0; }
}

/* ── Chrome contextual notes (law suggestion / review ask) ─────────────── */
.cr-chrome-note { display: flex; align-items: center; gap: 12px; background: var(--cr-card); border: 1px solid var(--cr-line); border-radius: var(--cr-r-card); padding: 12px 16px; margin: 0 0 12px; font-size: 13px; }
.cr-chrome-note > .dashicons { color: var(--cr-info); flex: none; }
.cr-chrome-note > div { flex: 1; line-height: 1.5; }
.cr-chrome-note__actions { display: flex; gap: 8px; white-space: nowrap; }
@media (max-width: 782px) { .cr-chrome-note { flex-wrap: wrap; } .cr-chrome-note__actions { width: 100%; justify-content: flex-end; } }

/* ── Accessible help "?" + tooltip ───────────────────────────────────── */