.form-group.required label:after {
    content: "*";
    color: #ff8080;
    margin-left: .2em;
}

.error {
    background-color: #ce2222;
    padding: 10px;
    color: #fff;
    text-shadow: 0px 1px 1px #a00000;
    display: inline-block;
    border-radius: 5px;
    border-bottom: 2px solid #a00000;
    margin-bottom: 20px;
}


.success {
    background-color: #22be22;
    padding: 10px;
    color: #fff;
    text-shadow: 0px 1px 1px #008000;
    display: inline-block;
    border-radius: 5px;
    border-bottom: 2px solid #008000;
    margin-bottom: 20px;
}

.form-control:focus{
    border-color: #5d9cec !important;
}

.page-wrapper {
    padding: 20px 15px 0;
}

@media (min-width: 992px) {
    .page-wrapper {
        margin-top: 90px;
    }
}

.page-wrapper .breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}

#page-free-tools .block_wrapper {
    /* display: inline-block; */
    padding: 0;
    margin-bottom: 1em;
    cursor: pointer;
}

#page-free-tools .link_wrapper{
    padding: 0;
    margin-top:17px;
    cursor: pointer;
}

#page-free-tools .block_wrapper a.tool-icon{
    font-size: 3em;
}
#page-free-tools .link_wrapper a,
#page-free-tools .block_wrapper a{
    vertical-align: middle;
    text-align: center;
    color: #5d9cec;
    font-size: 18px;
}

#page-free-tools .link_wrapper a:hover{
    color: #777777;
}

#page-free-tools a:visited,
#page-free-tools a:active,
#page-free-tools a:hover{
    text-decoration: none;
}


#page-free-tools .block_wrapper:hover a.tool-icon:first-child{
    color: #777777;
}

.flex-center{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#progress-bar .progress-fill {
    line-height: 30px;
}

/* Progress bar (quick-check.php). Its track, fill and background all carry Metronic's h-30px
   and the label carries fs-7 - both sized for the dense app UI, which leaves the bar looking
   slight against the enlarged type on a tool page. Scale it with the rest. The utilities are
   !important, so the height override has to be too; scoped to .tool-page because the same
   #progress-bar id is used on the scan and keyword pages, which are not rescaled. */
.tool-page #progress-bar,
.tool-page #progress-bar .progress-bar,
.tool-page #progress-bar .progress-bg {
    height: 42px !important;
}
.tool-page #progress-bar .progress-fill {
    font-size: 1.15rem !important;
    line-height: 42px;
}

.hw-0 {
    height: 0;
    width: 0;
}

@media (max-width: 540px) {
    .card .card-body, .card .card-header {
        padding-left: 26px !important;
        padding-right: 26px !important;
    }
}

.fs-1tx {
    font-size: calc(1.3rem + .65vw)!important
}

@media (min-width: 1200px) {
    .fs-1tx {
        font-size: 1.8rem !important
    }
}

/* File inputs are excluded deliberately. CSS :read-only matches anything that is not a
   :read-write text entry, and a file input never is - so input[type=file] matches this
   selector permanently, whatever its attributes. With pointer-events: none applied it cannot
   be clicked at all, which is exactly what happened to the keyword grouper's file picker: no
   cursor, no dialog, and nothing in the console because nothing errored. */
.form-control:read-only:not([type="file"]),
.form-control:read-only:focus:not([type="file"]) {
    color: var(--bs-gray-500);
    background-color: var(--bs-gray-200);
    border-color: var(--bs-gray-300);
    opacity: 1;
    pointer-events: none;
}
/* ---------------------------------------------------------------------------
   Free tool pages (.tool-page, set on the card in views/tools/quick-check.php).
   Metronic sets the root font-size to 13px, which suits a dense app UI but reads
   far too small on these standalone, largely single-purpose pages. Scale the
   typography up here rather than app-wide, and scope everything under .tool-page
   so no other Metronic screen is affected. Sizes are rem, i.e. multiples of 13px.
   --------------------------------------------------------------------------- */
.tool-page h1 {
    font-size: 3rem;
    line-height: 1.2;
}
.tool-page h2 {
    font-size: 2rem;
    line-height: 1.3;
}
.tool-page h3 {
    font-size: 1.7rem;
}
.tool-page h4 {
    font-size: 1.5rem;
}
/* h5/h6 were left out of this scale, so they fell through to Metronic's app-UI sizes - 1.15rem
   and 1.075rem, both SMALLER than the 1.3rem body copy below. That shows up wherever a tool
   reuses the audit's check markup, which titles each check with an h5.question (see
   report/_ui_crawlability.php): the heading read as smaller than its own answer text. */
.tool-page h5 {
    font-size: 1.45rem;
}
.tool-page h6 {
    font-size: 1.32rem;
}
.tool-page p,
.tool-page li,
.tool-page td,
.tool-page th,
.tool-page .field-value,
.tool-page .field-details,
.tool-page .tool-explainer-text {
    font-size: 1.3rem;
    line-height: 1.7;
}
.tool-page .tool-explainer-text > *:last-child {
    margin-bottom: 0;
}
/* Search form: label, URL input and the Check button all scale with the copy. */
.tool-page .form-label,
.tool-page .col-form-label {
    font-size: 1.3rem;
}
.tool-page .btn-warning:not(.btn-sm),
.tool-page .btn-primary:not(.btn-sm),
.tool-page .btn-light-primary:not(.btn-sm) {
    font-size: 1.3rem;
}

/* Result-area buttons ("Show Details" / "Hide Details" from wrapInButton() in report.js,
   and the subpages "Show me more" pair). They are .btn-sm, which sets --bs-btn-font-size to
   0.95rem and so ignores the enlarged type around it - on the report page that is right, but
   here it leaves the only control in an expanded results block at app-UI size. The rules
   above deliberately exempt .btn-sm because the add/remove controls inside the generator
   forms should stay small; these four are named individually for the same reason. */
.tool-page .js-collapse-in,
.tool-page .js-collapse-out,
.tool-page .btn-show-subpagesmore,
.tool-page .btn-hide-subpagesmore {
    --bs-btn-font-size: 1.15rem;
    --bs-btn-padding-y: 0.7rem;
    --bs-btn-padding-x: 1.3rem;
}

/* Inputs. Metronic's .form-control is 1.1rem, which now reads noticeably smaller than the
   copy around it - both the placeholder and what the user types. Match the body size; the
   field is the thing people are meant to be looking at on these pages. */
.tool-page .form-control,
.tool-page .form-select,
.tool-page textarea {
    font-size: 1.3rem;
}

/* Primary search form (quick-check.php). Deliberately flat markup - no Bootstrap rows -
   because a nested .row/.col pair sets a negative margin and a matching column padding,
   and any mismatch between the two shifts the field a few px off the header text above it.
   With a plain block + flex row, the label and the input both start exactly at the
   card-body padding edge. max-width matches what col-md-5 used to give. */
.tool-page .tool-search {
    max-width: 45rem;
}
/* Opt out of that cap where the grid is sizing the form instead - see cached-website.php.
   Scoped to a modifier so the quick-check audit box and the llms.txt validator keep theirs. */
.tool-page .tool-search--wide {
    max-width: none;
}
/* flex-shrink is deliberately 0. With it enabled the field squeezed to whatever the button
   left over rather than wrapping, so on a phone the address bar ended up a few characters
   wide beside a full-size button. Holding it at its basis makes the row wrap instead, which
   is the behaviour the flex-wrap on the container was there for.

   The basis sets both the smallest the field ever gets and, with the button's width, the
   point at which the row wraps - raising it wraps earlier and leaves a wider field. 22rem is
   about 37 characters, comfortable for a URL, and still fits beside the button inside a
   two-thirds column at the lg breakpoint. */
.tool-page .tool-search .search-box {
    flex: 1 0 22rem;
}
/* The button must not shrink either. Its label carries .nowrap, so shrinking the box does not
   shrink the text - it just pushes the label outside the button, which is the overflow this
   whole row is meant to avoid. Neither item shrinking is what makes the wrap happen. */
.tool-page .tool-search .btn {
    flex: 0 0 auto;
}
/* Group heading and its intent badge. A flex item will not shrink below the width of its
   own content unless min-width is overridden, so a long group name - and merged names like
   "seo tool / seo service" are long - pushed the badge past the edge of the card instead of
   wrapping. min-width lets the heading wrap, flex-shrink holds the badge at its natural size,
   and aligning to the top stops the badge floating to the middle of a two-line heading. */
.tool-page .kd-group-head {
    align-items: flex-start;
}
.tool-page .kd-group-head h3 {
    min-width: 0;
    overflow-wrap: anywhere;
}
.tool-page .kd-group-head .badge {
    flex-shrink: 0;
}

/* File inputs get no cursor from the theme, so they show an arrow rather than a hand. The
   cursor goes on the input as well as the button pseudo-element because Bootstrap sets
   pointer-events: none on that pseudo-element - the click and the hover both land on the input
   itself, so styling only the pseudo-element would have no effect. */
.tool-page input[type="file"],
.tool-page input[type="file"]::file-selector-button,
.tool-page input[type="file"]::-webkit-file-upload-button {
    cursor: pointer;
}

/* The audit box is the point of these pages, so it is deliberately larger than a standard
   field rather than matching .form-control.

   The button beside it is sized to match rather than left to its own height. The flex row
   stretches its items, so alongside the field the button was being pulled up to the field's
   height - and then shrank back to its natural one the moment the row wrapped and it had a
   line to itself. Giving it the same type and vertical padding makes the two the same height
   by construction, so wrapping changes the arrangement and nothing else. */
.tool-page .search-box,
.tool-page .btn-do-audit,
.tool-page .tool-search .btn {
    font-size: 1.45rem;
    padding-top: 1.05rem;
    padding-bottom: 1.05rem;
}
.tool-page .btn-do-audit {
    font-size: 1.85rem;
    font-weight: 700;
    padding-left: 3rem;
    padding-right: 3rem;
    min-width: 11rem;
}

/* Checkboxes/radios. Metronic sizes these at 1.55rem against 13px UI text; next to the
   scaled-up labels and fields they now look undersized. */
.tool-page .form-check-input,
.tool-page .form-check.form-check-sm .form-check-input {
    width: 1.85rem;
    height: 1.85rem;
}
.tool-page .form-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 0;
}
.tool-page .form-check .form-check-input {
    float: none;
    margin: 0;
}
/* Checkbox/radio captions are body copy, not control labels. Metronic colours
   .form-check-label gray-500, one step lighter than --bs-card-color (gray-600), which is
   what made it look washed out next to the paragraph beneath it. */
.tool-page .form-check-label {
    font-size: 1.3rem;
    line-height: 1.7;
    color: var(--bs-gray-600);
}
/* Two fixes to the caption itself. Metronic's .form-check-custom adds its own left margin
   on top of the flex gap above, which reads as the label having drifted away from its box;
   and a label bound to a control should say so on hover. */
.tool-page .form-check .form-check-label {
    margin: 0;
    cursor: pointer;
}
/* Unchecked boxes are gray in Metronic, which puts them at odds with every text input on
   the page - those are white. Scoped to :not(:checked) so the brand fill is untouched when
   the box is on. */
.tool-page .form-check-input:not(:checked):not(:indeterminate) {
    background-color: #fff;
    border-color: var(--bs-gray-300);
}

/* Result tables (domain age checker, ...). Metronic declares
   `.table:not(.table-bordered) td/th/tr { font-size: inherit }` at 0,2,1, which outranks
   the `.tool-page td` rule above - so the cells were pulling .card-body's 1.075rem straight
   through. Sizing the table itself works with that rule instead of against it: the cells
   inherit from here. */
.tool-page .table {
    font-size: 1.3rem;
    line-height: 1.7;
}

/* Result alerts (sitemap validator, redirect checker, ...). Bootstrap's .alert sets no
   font-size, so these were inheriting .card-body's 1.075rem and reading small next to the
   rest of the page. */
.tool-page .alert {
    font-size: 1.3rem;
    line-height: 1.7;
}
.tool-page .alert p:last-child {
    margin-bottom: 0;
}

/* Incidental hints ("The path is relative to root...") - body styling, a notch smaller,
   and not italic. */
.tool-page .tool-hint {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--bs-gray-600);
}

/* The line naming an output ("Your Generated Meta Tags:") is body copy, not a control
   label, so it matches the description text in the panel above rather than inheriting
   .card-body's smaller size. */
.tool-page .tool-output-label {
    font-size: 1.3rem;
    line-height: 1.7;
    color: var(--bs-gray-600);
}

/* Copy-to-clipboard sits under the output it copies; right-aligning it keeps it clear of
   the content and consistent across tools. margin-left:auto rather than float so it does
   not escape its container. */
.tool-page .js-clipboard-input,
.tool-page .js-clipboard-text {
    display: block;
    margin-left: auto;
}

/* Select2 (the Tone dropdown on the AI tools). The closed control sits inside .tool-page,
   but the open results list is appended to <body>, so it is out of reach of that scope -
   hence the unscoped selectors below. Safe because this stylesheet is registered by
   ToolAssets and therefore only ever loads on tools pages. */
.tool-page .select2-container .select2-selection__rendered,
.select2-dropdown .select2-results__option,
.select2-dropdown .select2-search__field {
    font-size: 1.3rem;
}
.select2-dropdown .select2-results__option {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
/* Language and Tone share a flex row aligned on their bottom edge, so any difference in
   rendered height shows as one sitting lower than the other. They are initialised by two
   different scripts - language-selector.js for the flags, Metronic's data-control for Tone -
   which apply different select2 themes, so both variants are pinned to the same height as
   the text inputs elsewhere on the page. */
.tool-page .select2-container--bootstrap5 .select2-selection,
.tool-page .select2-container .select2-selection--single {
    min-height: calc(1.5em + 1.55rem + 2px);
    display: flex;
    align-items: center;
}

/* Free tools index (views/tools/index.php). Four levels stack on this page - the H1, a
   category ("AI Generators"), a sub-category ("Usability"), then the card titles at .h1
   (~1.75rem) - and Metronic's utility steps are too close together to separate them, so the
   middle two get explicit sizes stepping down from the H1. */
.tools-index-category {
    font-size: 2.4rem;
    line-height: 1.2;
    margin-top: 6rem;
    margin-bottom: 2rem;
}
.tools-index-category:first-of-type {
    margin-top: 0;
}
/* Sub-categories usually follow a row of cards, so the gap only has to separate them from
   what is above - not announce a new part of the page, which the category heading does. */
.tools-index-subcategory {
    font-size: 2rem;
    line-height: 1.25;
    margin-top: 2.5rem;
    margin-bottom: 2rem;
}
/* Directly under a category heading, that heading's own bottom margin is the gap. */
.tools-index-category + .tools-index-subcategory {
    margin-top: 0;
}
/* Jump list: a primary control on the page rather than one field among many. */
.tools-index-jump {
    font-size: 1.35rem;
    padding: 1rem 1.25rem;
}

/* Page title. Deliberately larger than an individual tool page's H1 (.tool-page h1, 3rem) -
   this is the hub, and it has three heading levels plus card titles below it to clear. The
   weight is the theme's own heading weight, i.e. what Metronic redefines fw-bold as, so it
   reads as a page title rather than a marketing hero. Set here rather than with the utility
   class: fw-bold is !important and would win either way, and stating it explicitly keeps the
   size and weight together. */
.tools-index-title {
    font-size: 4.6rem;
    font-weight: 600;
    line-height: 1.12;
}
.tools-index-sub {
    font-size: 1.3rem;
    line-height: 1.7;
}

/* Spacing. The card header carries Metronic's app-UI padding plus a min-height, and
   quick-check.php parks a hidden fs-4x <i> between header and body to preload the icon
   font - it is height/width 0 but still generates an inline line box, which was most of
   the gap above the "Website URL" label. Collapse both. */
/* NOTE ON SPECIFICITY: Metronic styles these as `.card .card-header` / `.card .card-body`
   (0,2,0) - the same weight as `.tool-page .card-header`. tools.css is registered by
   ToolAssets in ToolsController::beforeAction, i.e. BEFORE the layout registers the
   Metronic bundles, so Metronic's stylesheet loads last and wins every tie. Its shorthand
   `padding: 0 2.25rem` then clobbers any longhand padding set here. `.card.tool-page`
   (0,3,0) beats it outright, so the header and body padding below are guaranteed to apply
   and, crucially, to be equal - which is what keeps the form flush with the header text. */
.card.tool-page > .card-header {
    min-height: 0;
}
.tool-page .card-header h1 {
    margin-bottom: 0.5rem !important;
}
/* The tool icon tile (_tool_icon.php) sits directly above the H1 inside .card-title,
   which is flex-column, so the two simply stack. The H1 carries `my-5` from the shared
   header markup - kill its top margin when an icon precedes it, or the tile and the title
   drift apart. Bootstrap utilities are !important, so this needs to be too; it wins on
   specificity (0,3,1 vs 0,1,0). */
.tool-page .card-header .tool-page-icon {
    margin-bottom: 1.6rem;
}
.tool-page .card-header .tool-page-icon + h1 {
    margin-top: 0 !important;
}
/* .card-title is a flex child of the header; make sure it adds no horizontal offset of its
   own, or the header copy sits inboard of the form below it. */
.tool-page .card-header .card-title {
    margin-left: 0;
    margin-right: 0;
}
.tool-page .hw-0 {
    display: block;
    height: 0;
    line-height: 0;
    overflow: hidden;
}
/* Padding. Metronic's card padding (2rem / 2.25rem) is sized for 13px app-UI text; with
   the larger type above, the content crowds the panel edges. Top stays tighter on the main
   card because the header already provides space there. */
.card.tool-page > .card-header {
    padding: 1rem 2.35rem 0;
}
/* padding-top here is the single source of the gap between the header copy and the first
   field - the header's own trailing margins are zeroed above, so this is the one value to
   change if that space needs adjusting. */
.card.tool-page > .card-body {
    padding: 2.25rem 2.35rem 2.35rem;
}
/* Last line of the header block should not add its own bottom margin on top of the
   card-body padding below it. */
.tool-page .card-header p:last-child {
    margin-bottom: 0;
}
.tool-page .card-header .card-title {
    margin-bottom: 0;
}
/* Panels with no card-header (explainer, tool output) need their full top padding back. */
.card.tool-page-info > .card-body,
.card.tool-page-output > .card-body {
    padding-top: 2.35rem;
}

/* The check tools (quick-check.php) open straight onto the audit field, and they carry a
   hidden fs-4x icon between header and body to preload the icon font. Even collapsed, that
   element plus the standard body padding leaves a wider gap above the first label than the
   tools that open with a heading or a row of fields, so these pages get their own value.
   This has to sit AFTER the .card.tool-page shorthand above: both selectors are (0,3,0),
   so the later shorthand would otherwise reset padding-top and this rule would never
   apply - which is exactly what happened the first time round. */
.card.tool-page-check > .card-body {
    padding-top: 0.75rem;
}

/* Cluster tools (a 'view' in config/quick-checks.php, e.g. the social media links checker)
   stack their own per-check boxes straight under the shared "Result for ..." heading. That
   heading is a plain h2 with no bottom margin of its own here, so the first check label sat
   almost against it. Single-check tools are unaffected - they have no .tool-view-result. */
.tool-page .tool-view-result > h2 {
    margin-bottom: 1.75rem;
}

/* Result messages (.tool-messages, e.g. the llms.txt validator). Targeted by class rather
   than by :first-of-type / :last-of-type, which match on element type and so were matching
   whichever div happened to sit first or last - fine in the single-alert case and wrong as
   soon as the panel below it appeared.

   The card body's own 2.25rem top padding is more than a message block needs, so it is
   pulled up; the space below is kept, since the URL field sits directly under it. */
.tool-page .tool-messages {
    margin-top: -0.85rem;
}
.tool-page .tool-messages > .alert:last-child {
    margin-bottom: 2.5rem;
}
/* Headings inside an alert. Metronic colours headings gray-900 regardless of context, so a
   heading in a red or amber box came out black and bold and read as a separate element
   rather than part of the message. Bootstrap's own .alert-heading is meant to inherit; this
   restores that under Metronic's more specific heading rules. */
.tool-page .alert .alert-heading {
    color: inherit;
}
/* Result panels mix <b> labels, list items and plain text. Metronic sizes li and small
   separately, which made "Title:" visibly smaller than the section list below it. */
.tool-page .alert,
.tool-page .card.bg-gray-100 .card-body,
.tool-page .card.bg-gray-100 .card-body li {
    font-size: 1.3rem;
    line-height: 1.7;
}

/* Field labels ("Website URL", "Enter your content", ...) were gray-800 at weight 500 -
   near-black but thin, which sits awkwardly next to headings that are black AND bold.
   Match the surrounding body copy instead: Metronic sets .card-body { font-weight: 500 },
   so inherit rather than hard-coding a weight - 400 here would render the label LIGHTER
   than the text around it. Size comes from the rule above. */
.tool-page .form-label,
.tool-page .col-form-label {
    font-weight: inherit;
    color: var(--bs-gray-600);
}

/* SERP checker results (tools/serp-checker.php). Same treatment as the rank-tracking popup -
   Google's own link blue for the title, a muted grey for the URL underneath, both still links,
   underline on hover for the title only. Colours are copied verbatim from
   themes/MetronicForest/web/css/keyword-ranking-tool.css; the sizes are not, because that file
   is written against the app's 13px UI and these pages run their type considerably larger.
   Rules live here rather than registering that stylesheet, which also forces
   overflow:hidden on html/body for the popup it was written for. */
/* Title and URL are separated only by a <br>, so the gap between them is the cell's
   line-height - and .tool-page td sets that to 1.7 for body copy, which is far too airy for a
   two-line result. Tighten it here and let each link set its own. */
.tool-page .google-serp-results tbody td {
    line-height: 1.3;
}
.tool-page .google-serp-results tbody td a {
    color: #4d5156;
    font-size: 1.18rem;
    line-height: 1.35;
    word-break: break-word;
}
/* A little air between the blue title and the URL under it. The two are separated only by a
   <br>, so there is no element to space off - inline-block gives the URL a box that will take
   a margin without pushing the rows apart. */
.tool-page .google-serp-results tbody td a + a {
    display: inline-block;
    margin-top: 4px;
}
.tool-page .google-serp-results tbody td a:first-child {
    color: #1a0dab;
    font-size: 1.35rem;
    line-height: 1.25;
}
.tool-page .google-serp-results tbody td a:first-child:hover {
    text-decoration: underline !important;
}
/* The position column holds "1" through "10" or "Ad", so its width is set by the "Position"
   heading and nothing else. 1% plus nowrap shrinks it to exactly that; the small padding stops
   the browser's default cell padding reintroducing the gap on the right. */
.tool-page .google-serp-results .serp-position-col {
    width: 1%;
    white-space: nowrap;
    padding-right: 0.5rem;
}
.tool-page .google-serp-results .serp-position-col + * {
    padding-left: 0.5rem;
}

/* SERP checker form. Width is capped in px rather than taken as a grid fraction: the logged-in
   layout takes the sidebar out of the container before any percentage applies, so the same
   fraction produces two very different widths and, at the narrower one, fields too small to use
   and a button label that wraps. An absolute cap behaves identically in both layouts and simply
   fills the container when the container is the smaller of the two. */
.tool-page .serp-form-col {
    max-width: 780px;
}

/* Publish date result (when-was-this-article-published). Three short columns - a label, a date
   and where it was read from - so at full width on a container-xxl page the values end up
   stranded a long way from their labels. Capped in px rather than as a percentage for the same
   reason the SERP form is: the logged-in sidebar comes out of the container first, so a fraction
   would mean two different widths in the two layouts. */
.tool-page .published-date-table {
    max-width: 680px;
}

/* Googlebot Simulator (generateGooglebotView in the theme's report.js). The plain-text panel is
   the point of the tool - a page with its design removed - so it is deliberately set in a
   monospaced face on a flat background, scrollable rather than endless, and pre-wrap so the
   extracted spacing survives. */
.tool-page .googlebot-text {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 1.05rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 420px;
    overflow-y: auto;
    padding: 1.25rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.475rem;
    background-color: var(--bs-gray-100);
}
/* Word frequency badges. Sized to be read rather than glanced at - they are a result, not a
   decoration - and the count is spaced off the word with a margin so it cannot run into it. */
.tool-page .googlebot-word {
    font-size: 1.15rem;
    padding: 0.6rem 0.9rem;
    margin: 0 0.5rem 0.5rem 0;
}
.tool-page .googlebot-word-count {
    /* Explicitly smaller than the word it belongs to: it is a count, not the finding, and the
       badge's own font-size would otherwise render the digits at the same weight as the term. */
    font-size: 0.85em;
    margin-left: 0.65rem;
    opacity: 0.65;
}
/* No min-width here - lining H1 up with H6 padded every badge out to the width of the widest,
   which just reads as trailing space inside the badge. */
.tool-page .googlebot-level {
    font-size: 1.05rem;
    margin-right: 0.85rem;
}
.tool-page .googlebot-heading {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px dashed var(--bs-border-color);
}
.tool-page .googlebot-heading:last-child {
    border-bottom: 0;
}
.tool-page .googlebot-view .w-40 {
    width: 40%;
}
/* Same reasoning as the SERP form and the publish-date table: an absolute cap behaves the same
   in the logged-in and logged-out layouts, where a percentage would not. */
.tool-page .googlebot-view .table-part {
    max-width: 680px;
}

/* CMS Detector (generateCmsDetected in the theme's report.js). Three narrow columns, so capped
   like the other result tables; the platform icons come from the technology library at their own
   sizes and need pinning to the line height of the text beside them. */
.tool-page .cms-detected {
    max-width: 720px;
}
.tool-page .cms-detected .cms-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-right: 0.5rem;
    vertical-align: text-bottom;
}

/* ---------------------------------------------------------------------------
   Keyword Difficulty Checker
   --------------------------------------------------------------------------- */

/* The results panel appears directly under the search form on submit, and the
   form's own bottom margin alone reads as too tight once a full panel drops in
   below it. Extra breathing room above the heading separates the two. */
.tool-page .kd-results-title {
    margin-top: 4.75rem;
}

/* ApexCharts reads its height from the element via KTUtil.css(el, 'height'),
   so this has to be a real CSS height rather than a chart option. */
.tool-page .kd-chart {
    height: 320px;
    min-height: 320px;
    margin-bottom: 2rem;
}

@media (max-width: 767.98px) {
    /* ApexCharts leaves its own whitespace under the x-axis labels, which stacks
       on top of this margin. That reads as a deliberate gap on a wide screen but
       as a hole once the trend boxes sit directly underneath. */
    .tool-page .kd-chart {
        height: 240px;
        min-height: 240px;
        margin-bottom: 1rem;
    }
}

/* The submit handler appends its spinner as a sibling of the label, so letting
   the button reflow on click shows up as a height jump. The cause was always the
   label wrapping to a second line and dragging the spinner down with it, so
   nowrap is the actual fix - the spinner itself can stay in normal flow.

   Taking it out of flow instead (absolute, pinned right) was worse: the label is
   centred across the full button, so it grew into the lane the spinner occupied
   and the two overlapped, and moving the spinner clear of the text only pushed it
   into the border. In flow it cannot collide with the label by construction.

   The label shifts a few px left as the spinner appears. That is what every other
   tool button here does, and it is far less noticeable than either an overlap or
   a change in height. */
.tool-page .kd-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* ms-2 in the appended markup supplies the gap. mt-n1 is an optical nudge for
   baseline-aligned text and is wrong once the row is flex-centred - it is what
   left the spinner sitting high against the label. */
.tool-page .kd-submit .spinner-border {
    flex: none;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* col-lg-3 is at its narrowest just after the lg breakpoint, which is where the
   label plus spinner stopped fitting on one line. Step the type down through that
   band rather than truncating it - a cut label is no better than an overflowing
   one. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .tool-page .kd-submit {
        font-size: 0.95rem;
    }
}

/* Section headings sit directly under the block above them, which runs them
   together at a glance. The gap is deliberately larger than the margin below
   the heading so each title reads as belonging to what follows it. */
/* Sections already close with mb-8/mb-10, so this only has to top that up to a
   clear break - 2.75rem on top of 3rem left a gap wide enough to read as a
   missing block. */
.tool-page .kd-section-title {
    margin-top: 1.75rem;
}

/* Intent runs at the same size as the two figures beside it, but it is a word
   rather than a number, so it needs its own line-height to sit on their
   baseline. The longest value is 13 characters ("Informational" /
   "Transactional") - that is what the size has to survive without wrapping. */
.tool-page .kd-intent {
    line-height: 1.2;
}

/* The label column is effectively static - the same handful of metric names on
   every lookup - while the values swing from three digits to seven between
   keywords. Without a fixed label width the labels reflow on every search, so
   the table looks like it is jumping around when only the numbers changed. */
.tool-page .kd-metric-table td:first-child {
    width: 280px;
}

@media (max-width: 575.98px) {
    .tool-page .kd-metric-table td:first-child {
        width: 45%;
    }
}

/* Tag cells must wrap inside their column rather than force the table wide.
   The wrapper carries no .table-responsive, so there is no horizontal scroll
   to fall back on - Metronic's .badge is nowrap, which keeps each pill intact
   while the cell breaks between them. */
.tool-page .kd-metric-table td {
    white-space: normal;
    word-break: break-word;
}

/* Between the md breakpoint and roughly 1400px the boxes are a third of the
   container while the container itself is still narrow, so a word-valued box
   is at its tightest here - "Informational" and "Medium" both broke across two
   lines. They get their own step down through that band only; below md the
   boxes go full width and the problem disappears on its own. */
@media (min-width: 768px) and (max-width: 1399.98px) {
    /* Roughly a third off the display-6/display-5 curve rather than a fixed size,
       so it still scales with the viewport across the band. */
    .tool-page .kd-intent {
        font-size: calc(1.25rem + 1.15vw);
    }

    .tool-page .kd-stat-value {
        font-size: calc(1.15rem + 1.1vw);
    }
}

/* Side by side the three headline cards equalise through h-100, but stacked on
   a phone each takes its own content height - and the intent card is a badge
   row shorter whenever a keyword has no secondary intents. A floor keeps the
   three looking like a set. */
@media (max-width: 767.98px) {
    .tool-page .kd-headline-card {
        min-height: 170px;
    }

    /* align-items must be set: the card body is a flex column here, and a flex
       item defaults to stretch, which blows the inline-block badges out to the
       full width of the card instead of hugging their text. */
    .tool-page .kd-headline-card .card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

/* Weight only - the size comes from badge-lg, which every coloured tag on this
   page uses so they read as one family. */
.tool-page .kd-intent-secondary .badge {
    font-weight: 500;
}