/*
Theme Name: FR
Theme URI: https://francescoraucci.it
Template: generatepress
Author: Francesco Raucci
Author URI: https://francescoraucci.it
Description: FRis a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh FR install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, FR is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. FR is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://francescoraucci.it
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 1.0.1772882264
Updated: 2026-03-07 12:17:44

*/
:root {
    --fr-fonT-family-primary: Geist, "Geist Fallback";
    --fr-fonT-family-secondary: "Geist Mono", "Geist Mono Fallback";
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.frda-hero,
.frda-hero * {
    box-sizing: border-box;
}

.frda-hero {
    --frda-bg: #eeeeee;
    /*--frda-text: #111827;
    --frda-text-soft: #4b5563;*/
    --frda-line: rgba(17, 24, 39, 0.08);
    --frda-line-strong: rgba(17, 24, 39, 0.14);
    --frda-panel: rgba(255, 255, 255, 0.72);
    --frda-panel-strong: rgba(255, 255, 255, 0.9);
    --frda-accent: #2563eb;
    --frda-accent-1: rgb(30,115,190);
    --frda-accent-2: #0f766e;
    --frda-glow: rgba(37, 99, 235, 0.12);
    --frda-radius: 28px;
    --frda-shadow: 0 24px 60px rgba(17, 24, 39, 0.08);
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 32px;
    background:
            radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.1), transparent 0 26%),
            radial-gradient(circle at 82% 30%, rgba(15, 118, 110, 0.08), transparent 0 20%),
            linear-gradient(180deg, rgba(255,255,255,0.66), rgba(255,255,255,0.42));
    box-shadow: var(--frda-shadow);
    isolation: isolate;
    margin: 2rem;
}

.frda-hero::before,
.frda-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.frda-hero::before {
    background:
            linear-gradient(var(--frda-line) 1px, transparent 1px),
            linear-gradient(90deg, var(--frda-line) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at 50% 50%, black 38%, transparent 88%);
    opacity: 0.9;
    z-index: -3;
    animation: frdaGridShift 18s linear infinite;
}

.frda-hero::after {
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.08) 46%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.08) 54%, transparent 100%);
    transform: translateX(-70%);
    z-index: -2;
    opacity: 0.55;
    animation: frdaSweep 9s ease-in-out infinite;
}
.frda-orb,
.frda-ring,
.frda-ring-2,
.frda-beam {
    position: absolute;
    pointer-events: none;
}

.frda-orb {
    width: min(42vw, 520px);
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(37,99,235,0.14) 0%, rgba(37,99,235,0.06) 34%, transparent 72%);
    filter: blur(10px);
    z-index: -4;
    animation: frdaBreathe 6.5s ease-in-out infinite;
}

.frda-beam {
    left: 50%;
    top: 50%;
    width: 2px;
    height: 72%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, transparent, rgba(37,99,235,0.25), transparent);
    z-index: -2;
    opacity: 0.55;
}

.frda-ring,
.frda-ring-2 {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    z-index: -1;
}

.frda-ring {
    width: min(74vw, 760px);
    height: min(74vw, 760px);
    border: 1px solid rgba(17,24,39,0.08);
    animation: frdaSpin 28s linear infinite;
}

.frda-ring-2 {
    width: min(56vw, 580px);
    height: min(56vw, 580px);
    border: 1px dashed rgba(17,24,39,0.1);
    animation: frdaSpinReverse 24s linear infinite;
}
/***
Typography
 */
/*.fr-post-excerpt {
    font-weight: 400;
    font-size: 36px;
}*/

.inside-header{ padding-bottom: 60px}

/* =========================================================
   BUTTON SYSTEM — inspired by factory.ai, adapted for francescoraucci.it
   ========================================================= */

:root {
    --fr-btn-bg: #111111;
    --fr-btn-bg-hover: #1c1c1c;
    --fr-btn-text: #ffffff;
    --fr-btn-border: #111111;

    --fr-btn-alt-bg: #ffffff;
    --fr-btn-alt-bg-hover: #f5f5f5;
    --fr-btn-alt-text: #111111;
    --fr-btn-alt-border: rgba(17, 17, 17, 0.16);

    --fr-btn-ghost-text: #111111;
    --fr-btn-ghost-text-hover: #000000;
    --fr-btn-ghost-border: transparent;

    --fr-btn-radius: .25rem;
    --fr-btn-height: 25px;
    --fr-btn-pad-x: 1.3rem;
    --fr-btn-font-size: 0.75rem;
    --fr-btn-font-weight: 400;
    --fr-btn-letter-spacing: -0.01em;

    --fr-btn-shadow: 0 1px 0 rgba(17, 17, 17, 0.04),
    0 8px 24px rgba(17, 17, 17, 0.08);

    --fr-btn-shadow-hover: 0 1px 0 rgba(17, 17, 17, 0.05),
    0 12px 28px rgba(17, 17, 17, 0.12);

    --fr-btn-focus-ring: 0 0 0 3px rgba(17, 17, 17, 0.12);
}

/* base */
.fr-btn,
a.fr-btn,
button.fr-btn,
.wp-block-button__link.fr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: var(--fr-btn-height);
    padding: 0 var(--fr-btn-pad-x);
    border: 1px solid var(--fr-btn-border);
    border-radius: var(--fr-btn-radius);
    font-size: var(--fr-btn-font-size);
    font-weight: var(--fr-btn-font-weight);
    letter-spacing: var(--fr-btn-letter-spacing);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--fr-btn-shadow);
    transition:
            background-color 0.18s ease,
            color 0.18s ease,
            border-color 0.18s ease,
            box-shadow 0.18s ease,
            transform 0.18s ease,
            opacity 0.18s ease;
    text-transform: uppercase;
}

/* hover / active / focus */
.fr-btn:hover,
a.fr-btn:hover,
button.fr-btn:hover,
.wp-block-button__link.fr-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--fr-btn-shadow-hover);
    text-decoration: none;
}

.fr-btn:active,
a.fr-btn:active,
button.fr-btn:active,
.wp-block-button__link.fr-btn:active {
    transform: translateY(0);
    box-shadow: var(--fr-btn-shadow);
}

.fr-btn:focus-visible,
a.fr-btn:focus-visible,
button.fr-btn:focus-visible,
.wp-block-button__link.fr-btn:focus-visible {
    outline: none;
    box-shadow: var(--fr-btn-focus-ring), var(--fr-btn-shadow-hover);
}

/* disabled */
.fr-btn[disabled],
.fr-btn.is-disabled,
a.fr-btn[aria-disabled="true"] {
    opacity: 0.56;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

/* PRIMARY */
.fr-btn--primary {
    background: var(--fr-btn-bg);
    color: var(--fr-btn-text);
    border-color: var(--fr-btn-border);
}

.fr-btn--primary:hover,
.fr-btn--primary:focus-visible {
    background: var(--fr-btn-bg-hover);
    color: var(--fr-btn-text);
    border-color: var(--fr-btn-bg-hover);
}

/* SECONDARY / outline soft */
.fr-btn--secondary {
    background: var(--fr-btn-alt-bg);
    color: var(--fr-btn-alt-text);
    border-color: var(--fr-btn-alt-border);
}

.fr-btn--secondary:hover,
.fr-btn--secondary:focus-visible {
    background: var(--fr-btn-alt-bg-hover);
    color: var(--fr-btn-alt-text);
    border-color: rgba(17, 17, 17, 0.28);
}

/* GHOST / text CTA for cards */
.fr-btn--ghost {
    background: transparent;
    color: var(--fr-btn-ghost-text);
    border-color: var(--fr-btn-ghost-border);
    box-shadow: none;
    padding-inline: 0;
    min-height: auto;
    border-radius: 0;
}

.fr-btn--ghost:hover,
.fr-btn--ghost:focus-visible {
    color: var(--fr-btn-ghost-text-hover);
    box-shadow: none;
    transform: none;
}

.fr-btn--ghost::after {
    content: "→";
    display: inline-block;
    margin-left: 0.15rem;
    transition: transform 0.18s ease;
}

.fr-btn--ghost:hover::after,
.fr-btn--ghost:focus-visible::after {
    transform: translateX(2px);
}

/* full width utility */
.fr-btn--block {
    width: 100%;
}

/* compact variant */
.fr-btn--sm {
    min-height: 40px;
    padding: 0.62rem 1rem;
    font-size: 0.88rem;
}

/* larger hero CTA */
.fr-btn--lg {
    min-height: 54px;
    padding: 0.95rem 1.55rem;
    font-size: 1rem;
}

/* button groups */
.fr-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
}

/* icon sizing */
.fr-btn__icon,
.fr-btn svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
}
.fr-btn__inner {
    display: inline-flex;
    align-items: center;
    gap: .55em;
}

.fr-btn__icon {
    display: inline-flex;
    line-height: 0;
}

.fr-btn__icon svg {
    width: 1.1em;
    height: 1.1em;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fr-btn--icon-right .fr-btn__inner {
    flex-direction: row;
}

.fr-btn--icon-left .fr-btn__inner {
    flex-direction: row;
}


/***
fr-child-pages
 */
.fr-child-pages {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.fr-child-card {
    height: 100%;
    padding: 24px;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    background: rgba(255,255,255,0.48);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.fr-child-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,.08);
    border-color: #d8d8d8;
    background: rgba(255,255,255,0.72);
}

.fr-child-card img {
    /*width: 48px;
    height: 48px;*/
    object-fit: contain;
}

.fr-child-card .fr-post-title {
    margin: 0 0 15px 0;
    font-size: 24px;
    line-height: 1.2;
}

.fr-child-card p {
    margin: 0;
}

.fr-child-card.has-container-link {
    position: relative;
}

.fr-child-card.has-container-link a:first-of-type::before {
    content: "";
    position: absolute;
    inset: 0;
}
.fr-breadcrumbs-wrap{ margin-bottom: 30px;}
.fr-breadcrumbs {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.58);
    border: 1px solid rgba(17,24,39,0.08);
    color: rgb(16, 16, 16);
    font-weight: 400;
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(10px);
    font-family: var(--fr-fonT-family-secondary);
}
.fr-breadcrumbs a{color: rgb(16, 16, 16);}

.fr-breadcrumbs::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--frda-accent-1);
    box-shadow: 0 0 0 6px rgba(15,118,110,0.08);
    animation: frdaPulseDot 2s ease infinite;
}


.Buttonprimary {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s cubic-bezier(.22,1,.36,1);
}

.Buttonprimary .gb-shape {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .22s cubic-bezier(.22,1,.36,1);
}

.Buttonprimary .gb-shape svg {
    display: block;
    height: 16px;
}

/* =========================================================
   FORM STYLE - SOBRIO / CODE / PROGRAMMER
   Wrapper principale: .fr-form-code
   ========================================================= */

.fr-form-code {
    --fr-form-bg: #ffffff;
    --fr-form-field-bg: #f7f7f8;
    --fr-form-border: #d9dce1;
    --fr-form-border-focus: #111111;
    --fr-form-text: #111111;
    --fr-form-muted: #6b7280;
    --fr-form-label: #111111;
    --fr-form-placeholder: #8b93a1;
    --fr-form-radius: 6px;
    --fr-form-padding-x: 14px;
    --fr-form-padding-y: 12px;
    --fr-form-gap: 18px;
    --fr-form-font: var(--fr-fonT-family-primary);
    --fr-form-mono: var(--fr-fonT-family-secondary);
    --fr-form-transition: 160ms ease;
    --fr-form-shadow-focus: 0 0 0 3px rgba(17, 17, 17, 0.08);

    color: var(--fr-form-text);
    font-family: var(--fr-form-font);
}

/* Reset spaziature base */
.fr-form-code form,
.fr-form-code .gb-container,
.fr-form-code .gb-grid-wrapper {
    margin: 0;
}

/* Griglia opzionale per campi affiancati */
.fr-form-code .fr-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--fr-form-gap);
}

.fr-form-code .fr-col-12 { grid-column: span 12; }
.fr-form-code .fr-col-6  { grid-column: span 6; }
.fr-form-code .fr-col-4  { grid-column: span 4; }
.fr-form-code .fr-col-3  { grid-column: span 3; }

@media (max-width: 768px) {
    .fr-form-code .fr-col-6,
    .fr-form-code .fr-col-4,
    .fr-form-code .fr-col-3 {
        grid-column: span 12;
    }
}

/* Wrapper singolo campo */
.fr-form-code .fr-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fr-form-code .fr-field .wpcf7-list-item{
    margin-left: 0;
}

.fr-form-code .fr-field p {
    margin-bottom: 0;
}

/* Label */
.fr-form-code label {
    display: inline-block;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--fr-form-label);
}

/* Hint / descrizioni */
.fr-form-code .fr-field-help,
.fr-form-code .field-help,
.fr-form-code small {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--fr-form-muted);
}

/* Campi base */
.fr-form-code input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
.fr-form-code select,
.fr-form-code textarea {
    width: 100%;
    min-height: 46px;
    padding: var(--fr-form-padding-y) var(--fr-form-padding-x);
    border: 1px solid var(--fr-form-border);
    border-radius: var(--fr-form-radius);
    background: var(--fr-form-field-bg);
    color: var(--fr-form-text);
    font-family: var(--fr-form-font);
    font-size: 0.96rem;
    line-height: 1.5;
    transition:
            border-color var(--fr-form-transition),
            background-color var(--fr-form-transition),
            box-shadow var(--fr-form-transition),
            color var(--fr-form-transition);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Textarea */
.fr-form-code textarea {
    min-height: 140px;
    resize: vertical;
}

/* Placeholder */
.fr-form-code input::placeholder,
.fr-form-code textarea::placeholder {
    color: var(--fr-form-placeholder);
    opacity: 1;
}

/* Hover */
.fr-form-code input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):hover,
.fr-form-code select:hover,
.fr-form-code textarea:hover {
    border-color: #b9bec7;
    background: #fcfcfc;
}

/* Focus */
.fr-form-code input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):focus,
.fr-form-code select:focus,
.fr-form-code textarea:focus {
    outline: none;
    border-color: var(--fr-form-border-focus);
    background: #ffffff;
    box-shadow: var(--fr-form-shadow-focus);
}

/* Select con freccia minimale */
.fr-form-code select {
    background-image:
            linear-gradient(45deg, transparent 50%, #111111 50%),
            linear-gradient(135deg, #111111 50%, transparent 50%);
    background-position:
            calc(100% - 18px) calc(50% - 3px),
            calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 42px;
}

/* Checkbox e radio */
.fr-form-code input[type="checkbox"],
.fr-form-code input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #111111;
    flex: 0 0 auto;
}

.fr-form-code .fr-choice,
.fr-form-code .wpcf7-list-item-label,
.fr-form-code .gchoice label {
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--fr-form-text);
}

.fr-form-code .fr-check,
.fr-form-code .fr-radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* File input */
.fr-form-code input[type="file"] {
    width: 100%;
    font-size: 0.92rem;
    color: var(--fr-form-muted);
}

/* Riga separatore opzionale */
.fr-form-code .fr-form-divider {
    height: 1px;
    background: var(--fr-form-border);
    margin: 6px 0 2px;
}

/* Messaggi errore / validazione */
.fr-form-code .fr-error,
.fr-form-code .validation-error,
.fr-form-code .wpcf7-not-valid-tip,
.fr-form-code .gfield_validation_message {
    font-size: 0.82rem;
    line-height: 1.4;
    color: #b42318;
    margin-top: 4px;
}

.fr-form-code .is-error input,
.fr-form-code .is-error select,
.fr-form-code .is-error textarea,
.fr-form-code input[aria-invalid="true"],
.fr-form-code select[aria-invalid="true"],
.fr-form-code textarea[aria-invalid="true"],
.fr-form-code .wpcf7-not-valid,
.fr-form-code .gfield_error input,
.fr-form-code .gfield_error select,
.fr-form-code .gfield_error textarea {
    border-color: #d92d20;
    background: #fff8f7;
}

/* Stato success */
.fr-form-code .fr-success,
.fr-form-code .wpcf7-response-output,
.fr-form-code .gform_confirmation_message {
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 12px 14px;
    border: 1px solid #cfe3d4;
    border-radius: var(--fr-form-radius);
    background: #f3faf5;
    color: #1f5130;
}

/* Pulsanti */
.fr-form-code button,
.fr-form-code input[type="submit"],
.fr-form-code input[type="button"],
.fr-form-code .fr-form-submit {

}

.fr-form-code button:hover,
.fr-form-code input[type="submit"]:hover,
.fr-form-code input[type="button"]:hover,
.fr-form-code .fr-form-submit:hover {
    background: #ffffff;
    color: #111111;
    border-color: #111111;
    transform: translateY(-1px);
}

.fr-form-code button:focus,
.fr-form-code input[type="submit"]:focus,
.fr-form-code input[type="button"]:focus,
.fr-form-code .fr-form-submit:focus {
    outline: none;
    box-shadow: var(--fr-form-shadow-focus);
}

/* Disabled */
.fr-form-code button:disabled,
.fr-form-code input:disabled,
.fr-form-code select:disabled,
.fr-form-code textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Stile leggermente più "console" per campi speciali */
.fr-form-code .fr-mono,
.fr-form-code input[type="email"],
.fr-form-code input[type="url"],
.fr-form-code input[type="tel"] {
    font-family: var(--fr-form-mono);
    font-size: 0.9rem;
}

/* Spaziatura verticale standard tra elementi del form */
.fr-form-code form > * + *,
.fr-form-code .fr-stack > * + * {
    margin-top: var(--fr-form-gap);
}

.fr-product-price {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;

    font-family: var(--fr-fonT-family-secondary);
    font-size: clamp(1rem, .8rem + 0.5vw, 1rem);

    line-height: 1;
    letter-spacing: -0.035em;
    color: #111;
    font-variant-numeric: tabular-nums lining-nums;
    text-transform: lowercase;
}
.fr-product-price .woocommerce-Price-amount{font-size: clamp(1.25rem, 1rem + 0.5vw, 1.55rem);font-weight: 600;}
.fr-product-price bdi{}
.fr-product-price del bdi{font-size: clamp(1.15rem, .9rem + 0.5vw, 1.45rem);font-weight: 300;}
.fr-product-price ins{ display: block;}

/**
 * fr-code-block
 */
.fr-code-card {
    --fr-crimson: #c9404b;
    --fr-aqua: #34cba0;
    --fr-aqua-readable: #237761;

    --fr-ink: #404040;
    --fr-muted: #687076;
    --fr-border: #e6e6e6;
    --fr-surface: #fafafa;
    --fr-surface-secondary: #f4f4f4;

    box-sizing: border-box;
    width: 100%;

    color: var(--fr-ink);
    background: var(--fr-surface);

    border: 1px solid var(--fr-border);
    border-top: 3px solid var(--accent);
    border-radius: 16px;
    overflow: hidden;

    box-shadow:
            0 18px 45px rgba(15, 15, 15, 0.065),
            0 2px 5px rgba(15, 15, 15, 0.035);
}

.fr-code-card *,
.fr-code-card *::before,
.fr-code-card *::after {
    box-sizing: border-box;
}

/* Intestazione reale */
.fr-code-card__header {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 20px;

    background: var(--fr-surface-secondary);
    border-bottom: 1px solid var(--fr-border);
}

.fr-code-card__dots {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.fr-code-card__dots i {
    display: block;
    width: 7px;
    height: 7px;
    background: #bfc3c5;
    border-radius: 50%;
}

.fr-code-card__dots i:nth-child(1) {
    background: var(--accent);
}

.fr-code-card__dots i:nth-child(2) {
    background: #aeb3b6;
}

.fr-code-card__dots i:nth-child(3) {
    background: var(--fr-aqua);
}

.fr-code-card__filename {
    color: #606060;

    font-family:
            ui-monospace,
            SFMono-Regular,
            Menlo,
            Monaco,
            Consolas,
            monospace;
    font-size: 0.67rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Corpo del codice */
.fr-code-card > .fr-code-card__body {
    width: 100%;
    margin: 0;
    padding: clamp(1.25rem, 3vw, 1.85rem);

    color: var(--fr-ink);
    background:
            linear-gradient(
                    90deg,
                    rgba(64, 64, 64, 0.035) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    rgba(64, 64, 64, 0.035) 1px,
                    transparent 1px
            ),
            var(--fr-surface);
    background-size: 28px 28px;

    border: 0;
    border-radius: 0;
    box-shadow: none;

    font-family:
            ui-monospace,
            SFMono-Regular,
            Menlo,
            Monaco,
            Consolas,
            "Liberation Mono",
            monospace;
    font-size: clamp(0.78rem, 1.1vw, 0.92rem);
    font-weight: 500;
    line-height: 1.8;
    font-variant-ligatures: none;
    tab-size: 2;

    white-space: pre;
    overflow: auto;

    scrollbar-width: thin;
    scrollbar-color:
            rgba(201, 64, 75, 0.35)
            transparent;
}

.fr-code-card__body code {
    display: block;
    min-width: max-content;
    padding: 0;

    color: inherit;
    background: transparent;
    font: inherit;
}

/* Sintassi */
.fr-code-card .token-blue {
    color: var(--accent);
    font-weight: 700;
}

.fr-code-card .token-yellow {
    color: #34383b;
    font-weight: 700;
}

.fr-code-card .token-muted {
    color: var(--fr-muted);
}

.fr-code-card .token-green {
    color: var(--fr-ink);
}

/* Footer reale */
.fr-code-card__footer {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 20px;

    color: var(--fr-muted);
    background: var(--fr-surface-secondary);
    border-top: 1px solid var(--fr-border);

    font-family:
            ui-monospace,
            SFMono-Regular,
            Menlo,
            Monaco,
            Consolas,
            monospace;
    font-size: 0.68rem;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fr-code-card__footer strong {
    color: var(--accent);
    font-size: inherit;
    font-weight: 700;
}

.fr-code-card__verified {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.fr-code-card__verified i {
    width: 7px;
    height: 7px;

    background: var(--fr-aqua);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(52, 203, 160, 0.13);
}

/* Selezione e focus */
.fr-code-card ::selection {
    color: #2b2f33;
    background: rgba(201, 64, 75, 0.18);
}

.fr-code-card:focus-within {
    border-color: rgba(201, 64, 75, 0.7);
    border-top-color: var(--fr-crimson);

    box-shadow:
            0 0 0 3px rgba(201, 64, 75, 0.1),
            0 18px 45px rgba(15, 15, 15, 0.07);
}

.fr-code-card__body:focus-visible {
    outline: none;
}

/* Scrollbar */
.fr-code-card__body::-webkit-scrollbar {
    height: 8px;
}

.fr-code-card__body::-webkit-scrollbar-track {
    background: transparent;
}

.fr-code-card__body::-webkit-scrollbar-thumb {
    background: rgba(201, 64, 75, 0.34);
    border-radius: 999px;
}

/* Mobile */
@media (max-width: 600px) {
    .fr-code-card {
        border-radius: 6px;
    }

    .fr-code-card__header,
    .fr-code-card__footer {
        padding-right: 15px;
        padding-left: 15px;
    }

    .fr-code-card > .fr-code-card__body {
        padding: 1.1rem 1rem;
        font-size: 0.75rem;
        line-height: 1.7;
    }

    .fr-code-card__footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
        padding-top: 13px;
        padding-bottom: 13px;
    }
}


@media (max-width: 1024px) {
    .fr-child-pages .gb-query-loop-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .fr-child-pages .gb-query-loop-items {
        grid-template-columns: 1fr;
    }
}


/* responsive */
@media (max-width: 767px) {
    .fr-btn-group {
        flex-direction: column;
        align-items: stretch;
    }

    .fr-btn-group .fr-btn {
        width: 100%;
    }
}