/* ==========================================================================
   MJCR QR Studio - Complete & Responsive Stylesheet
   ========================================================================== */

/* O footer global aplica margem negativa ao <main>; no QR Studio ela causa
   sobreposição com o header fixo e precisa ser neutralizada. */
main {
    margin-top: 0 !important;
    /* O header fixo mede 81px em todos os breakpoints. */
    padding-top: 5.0625rem !important;
}

/* Sub-header em faixa contínua: ocupa a viewport e limita apenas o conteúdo. */
.qr-studio-subheader {
    isolation: isolate;
    padding-bottom: .4rem !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(37, 99, 235, .13), transparent 32%),
        linear-gradient(115deg, #0f172a 0%, #111827 55%, #0b1220 100%) !important;
    box-shadow: 0 12px 28px -22px rgba(15, 23, 42, .9) !important;
}
.qr-studio-subheader::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .025), transparent);
}
.qr-studio-subheader__inner {
    position: relative;
    z-index: 1;
}
.qr-studio-subheader__account {
    min-height: 2rem;
    max-width: 10.5rem;
    padding: .42rem .68rem !important;
    font-size: .66rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
.qr-studio-subheader__account span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qr-studio-subheader__admin {
    width: 2rem !important;
    height: 2rem !important;
}
.qr-studio-subheader__menu-button {
    min-height: 2.5rem;
    padding-inline: 1rem !important;
    border: 1px solid rgba(96, 165, 250, .65) !important;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
    box-shadow: 0 9px 20px -12px rgba(37, 99, 235, .9) !important;
    font-weight: 900 !important;
}
.qr-studio-subheader__menu-button:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
    border-color: rgba(147, 197, 253, .9) !important;
    transform: translateY(-1px);
}
.qr-studio-subheader__menu-button .fa-th {
    color: #dbeafe !important;
}
.qr-studio-subheader__menu-button .fa-chevron-down {
    color: #bfdbfe !important;
    transition: transform .2s ease;
}
.qr-studio-subheader__menu-button[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}
.qr-studio-subheader__menu-count {
    display: inline-grid;
    min-width: 1.55rem;
    height: 1.45rem;
    padding-inline: .35rem;
    place-items: center;
    border: 1px solid rgba(191, 219, 254, .25);
    border-radius: 999px;
    background: rgba(15, 23, 42, .28);
    font-size: .62rem;
    line-height: 1;
}
.qr-studio-subheader__chips {
    padding-top: .5rem;
    border-top: 1px solid rgba(71, 85, 105, .38);
}
.qr-studio-subheader__chips-track {
    padding: .125rem .75rem .125rem .125rem;
    scroll-padding-inline: .75rem;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 639px) {
    .qr-studio-subheader__inner {
        gap: .625rem;
    }
    .qr-studio-subheader__account {
        max-width: 9.25rem;
    }
    .qr-studio-subheader__menu-button {
        min-height: 2.625rem;
    }
}

/* Hide scrollbars but keep smooth touch scrolling */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Glassmorphism Preview Card */
.preview-card {
    background: #ffffff;
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);
}

/* Color picker styling */
input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    cursor: pointer;
    background: none;
    padding: 0;
    flex-shrink: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
}

/* Force badges to never wrap text */
.badge-nowrap {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* QR Code Display Canvas styling - 100% COMPLETE & CENTERED */
#qr-canvas-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    overflow: visible;
}

#qr-canvas-container canvas,
#qr-canvas-container svg {
    max-width: 250px !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
    box-sizing: border-box;
}

/* QR Frame Overlay Simulation */
.qr-frame-wrapper {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.qr-frame-bottom-banner {
    border: 3px solid #000;
    background-color: #ffffff;
}

.qr-frame-text-badge {
    margin-top: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 9999px;
    font-size: 11px;
}

/* ==========================================================================
   Mobile Responsive Adjustments (< 1024px)
   ========================================================================== */
@media (max-width: 1023px) {
    main {
        padding-bottom: 2.5rem !important;
    }

    main h1 {
        font-size: 1.15rem !important;
        line-height: 1.4 !important;
    }

    /* Reduzir padding dos cards no mobile */
    .preview-card {
        padding: 1rem !important;
        border-radius: 1.25rem !important;
    }

    /* QR Code Canvas no mobile */
    #qr-canvas-container canvas,
    #qr-canvas-container svg {
        max-width: 190px !important;
    }

    /* Inputs e Controles compactos */
    input[type="text"],
    input[type="url"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    input[type="datetime-local"],
    textarea,
    select {
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.75rem !important;
        border-radius: 0.75rem !important;
    }

    label {
        font-size: 0.6875rem !important;
        margin-bottom: 0.35rem !important;
    }
}

@media (max-width: 639px) {
    .qr-studio-subheader {
        padding-top: .75rem !important;
        padding-bottom: .4rem !important;
    }
    .qr-studio-subheader__inner {
        display: flex;
        flex-direction: column;
        gap: .7rem;
    }
    .qr-studio-subheader__top {
        flex-wrap: nowrap;
        gap: .5rem;
    }
    .qr-studio-subheader__brand {
        width: auto;
        flex: 1 1 auto;
        min-height: 2rem;
    }
    .qr-studio-subheader__brand-copy {
        flex: 1 1 auto;
    }
    .qr-studio-subheader__actions {
        width: auto;
        flex: 0 0 auto;
        display: flex;
        gap: .5rem;
    }
    .qr-studio-subheader__account {
        flex: 0 1 auto;
        max-width: 9.25rem;
        min-width: 0;
        justify-content: center;
        min-height: 2rem;
    }
    .qr-studio-subheader__account span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .qr-studio-subheader__admin {
        width: 2rem !important;
        height: 2rem !important;
        flex: 0 0 2rem;
    }
    .qr-studio-subheader__menu {
        flex: 1 1 auto;
        min-width: 0;
    }
    .qr-studio-subheader__menu > button {
        width: 100%;
        min-height: 2.4rem;
        justify-content: space-between;
        padding-inline: .85rem !important;
    }
    .qr-studio-subheader__chips {
        padding-top: .5rem;
        border-top-color: rgba(71, 85, 105, .38);
    }
}

@media (min-width: 1024px) {
    .qr-studio-subheader__inner {
        display: grid !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "brand account menu"
            "chips chips chips";
        column-gap: .65rem;
        row-gap: .55rem;
    }
    .qr-studio-subheader__top {
        display: contents;
    }
    .qr-studio-subheader__brand {
        grid-area: brand;
    }
    .qr-studio-subheader__actions {
        grid-area: account;
    }
    .qr-studio-subheader__menu {
        grid-area: menu;
        width: auto !important;
    }
    .qr-studio-subheader__menu-button {
        width: auto !important;
        min-height: 2.35rem;
        justify-content: center;
    }
    .qr-studio-subheader__chips {
        grid-area: chips;
        padding-top: .25rem;
    }
}

/* ========================================================================== 
   Tool hero, breadcrumb and editorial SEO sections
   ========================================================================== */
.qr-tool-hero {
    --qr-accent: #2563eb;
    --qr-accent-soft: #eff6ff;
    position: relative;
    isolation: isolate;
    width: 100%;
    margin-left: 0;
    padding: 1.55rem 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #f8fafc;
    box-shadow: 0 0 0 100vmax #f8fafc, 0 16px 34px -28px rgba(15, 23, 42, .45);
    clip-path: inset(0 -100vmax);
}
.qr-tool-hero::before {
    content: "";
    position: absolute;
    width: 18rem;
    height: 18rem;
    left: -8rem;
    top: -12rem;
    border-radius: 9999px;
    background: var(--qr-accent);
    filter: blur(85px);
    opacity: .11;
    pointer-events: none;
}
.qr-tool-hero::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: min(42vw, 36rem);
    opacity: .3;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(15, 23, 42, .12) 1px, transparent 1.5px);
    background-size: 20px 20px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%, #000);
    mask-image: linear-gradient(90deg, transparent, #000 38%, #000);
}
.qr-tool-hero > * { position: relative; z-index: 1; }
.qr-tool-hero > div:first-child { min-width: 0; flex: 1 1 auto; }
.qr-tool-hero nav { flex-wrap: wrap; row-gap: .4rem; margin-bottom: .8rem !important; color: #64748b !important; }
.qr-tool-hero nav a {
    padding: .3rem .58rem;
    border-radius: .65rem;
    color: #475569 !important;
    background: rgba(255, 255, 255, .86);
    border: 1px solid #dbe4f0;
    backdrop-filter: blur(8px);
}
.qr-tool-hero nav a:hover { color: var(--qr-accent) !important; background: #fff; border-color: color-mix(in srgb, var(--qr-accent) 28%, #dbe4f0); }
.qr-tool-hero nav i { color: #94a3b8 !important; }
.qr-tool-hero nav > span:last-child { color: color-mix(in srgb, var(--qr-accent) 82%, #0f172a) !important; }
.qr-tool-hero h1 {
    max-width: 58rem;
    color: #0f172a !important;
    font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -.025em !important;
    text-wrap: balance;
}
.qr-tool-hero h1 > span:first-child {
    width: 2.75rem !important;
    height: 2.75rem !important;
    flex: 0 0 2.75rem;
    color: var(--qr-accent) !important;
    background: color-mix(in srgb, var(--qr-accent) 11%, #fff) !important;
    border-color: color-mix(in srgb, var(--qr-accent) 25%, #fff) !important;
    box-shadow: inset 0 1px 0 #fff, 0 12px 24px -18px var(--qr-accent) !important;
}
.qr-tool-hero p { max-width: 56rem; color: #526176 !important; line-height: 1.65; margin-top: .55rem !important; }
.qr-tool-hero > div + div { flex: none; }
.qr-tool-hero > div + div button,
.qr-tool-hero > div + div a {
    color: #334155 !important;
    background: rgba(255, 255, 255, .9) !important;
    border-color: #dbe4f0 !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 24px -18px rgba(0, 0, 0, .8) !important;
}
.qr-tool-hero > div + div button:hover,
.qr-tool-hero > div + div a:hover { color: var(--qr-accent) !important; background: #fff !important; border-color: color-mix(in srgb, var(--qr-accent) 45%, #dbe4f0) !important; }
.qr-tool-hero > div + div i { color: var(--qr-accent) !important; }
.qr-tool-hero[data-qr-tool="url"], .qr-tool-hero[data-qr-tool="whatsapp"], .qr-tool-hero[data-qr-tool="music"] { --qr-accent: #16a34a; --qr-accent-soft: #f0fdf4; }
.qr-tool-hero[data-qr-tool="wifi"], .qr-tool-hero[data-qr-tool="vcard"], .qr-tool-hero[data-qr-tool="sms"], .qr-tool-hero[data-qr-tool="links"] { --qr-accent: #7c3aed; --qr-accent-soft: #f5f3ff; }
.qr-tool-hero[data-qr-tool="pix"], .qr-tool-hero[data-qr-tool="location"] { --qr-accent: #0891b2; --qr-accent-soft: #ecfeff; }
.qr-tool-hero[data-qr-tool="email"], .qr-tool-hero[data-qr-tool="phone"], .qr-tool-hero[data-qr-tool="event"], .qr-tool-hero[data-qr-tool="menu"], .qr-tool-hero[data-qr-tool="review"] { --qr-accent: #ea580c; --qr-accent-soft: #fff7ed; }
.qr-tool-hero[data-qr-tool="protected"], .qr-tool-hero[data-qr-tool="product"] { --qr-accent: #e11d48; --qr-accent-soft: #fff1f2; }

/* Home: hero em largura total no mesmo sistema visual de /android-apps/. */
.qr-home-hero {
    isolation: isolate;
    background:
        radial-gradient(circle at 82% 76%, rgba(109, 40, 217, .19), transparent 31%),
        linear-gradient(115deg, #020617 0%, #071127 58%, #160f34 100%);
}
.qr-home-hero__grid {
    background-image:
        linear-gradient(rgba(96, 165, 250, .075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 165, 250, .075) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}
.qr-home-hero__visual::after {
    content: "";
    position: absolute;
    inset: auto 8% -35% 8%;
    height: 55%;
    border-radius: 9999px;
    background: rgba(37, 99, 235, .35);
    filter: blur(45px);
    pointer-events: none;
}
.qr-home-hero h1 {
    text-wrap: balance;
}

.qr-tool-showcase-hero__eyebrow {
    border-color: color-mix(in srgb, var(--qr-tool-accent) 58%, rgba(255,255,255,.25));
    background: color-mix(in srgb, var(--qr-tool-accent) 22%, transparent);
}

.qr-tool-showcase-hero__type-icon {
    background: var(--qr-tool-accent);
}

@media (max-width: 1023px) {
    /* Neutraliza a regra compacta compartilhada pelos formulários do módulo. */
    .qr-home-hero h1 {
        font-size: clamp(2rem, 7vw, 3rem) !important;
        line-height: 1.08 !important;
    }
}

@media (max-width: 639px) {
    .qr-home-hero__visual .fa-qrcode {
        font-size: 6rem !important;
    }
}

.qr-seo-footer { color: #334155; }
.qr-seo-footer section, .qr-seo-guide { scroll-margin-top: 6rem; }
.qr-seo-guide::after {
    content: "";
    position: absolute;
    width: 14rem;
    height: 14rem;
    right: -6rem;
    top: -7rem;
    border-radius: 9999px;
    background: rgba(37, 99, 235, .08);
    pointer-events: none;
}
.qr-seo-guide__intro { background: linear-gradient(135deg, #fff 0%, #f8fbff 65%, #eff6ff 100%); }
.qr-seo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border: 1px solid #bfdbfe;
    border-radius: 9999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.qr-seo-eyebrow .material-symbols-outlined { font-size: .95rem; }
.qr-seo-kicker { color: #2563eb; font-size: .7rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.qr-benefit-card { position: relative; transition: background-color .2s ease; }
.qr-benefit-card:hover { background: #f8fafc; }
.qr-benefit-card__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .8rem;
    background: #eff6ff;
    color: #2563eb;
    font-size: 1.25rem;
}
.qr-step-card { min-height: 12rem; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.qr-step-card:hover { transform: translateY(-2px); border-color: #bfdbfe; box-shadow: 0 14px 28px -22px rgba(37, 99, 235, .65); }
.qr-step-card__number {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: .6rem;
    background: #0f172a;
    color: #fff;
    font-size: .7rem;
    font-weight: 900;
}
.qr-related-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    min-height: 8.2rem;
    padding: 1.1rem 1rem 1rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tool-color) 24%, #e2e8f0);
    border-radius: 1rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--tool-color) 10%, #fff) 0%, #fff 72%);
    box-shadow: 0 12px 24px -20px color-mix(in srgb, var(--tool-color) 48%, #0f172a);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.qr-related-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tool-color), color-mix(in srgb, var(--tool-color) 25%, #fff));
}
.qr-related-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tool-color) 48%, #cbd5e1);
    background: linear-gradient(145deg, color-mix(in srgb, var(--tool-color) 16%, #fff) 0%, #fff 76%);
    box-shadow: 0 20px 36px -24px color-mix(in srgb, var(--tool-color) 65%, #0f172a);
}
.qr-related-card__icon {
    display: grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 2.65rem;
    border-radius: .85rem;
    color: var(--tool-color);
    background: color-mix(in srgb, var(--tool-color) 17%, #fff);
    border: 1px solid color-mix(in srgb, var(--tool-color) 30%, #fff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 7px 14px -10px var(--tool-color);
}
.qr-related-card__arrow {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    flex: 0 0 1.8rem;
    margin-top: .35rem;
    border-radius: 9999px;
    color: var(--tool-color);
    background: color-mix(in srgb, var(--tool-color) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--tool-color) 20%, #fff);
    font-size: 1rem;
    transition: transform .2s ease, background .2s ease;
}
.qr-related-card:hover .qr-related-card__arrow { transform: translateX(3px); background: color-mix(in srgb, var(--tool-color) 20%, #fff); }
.qr-faq-card { padding: 1rem 1.1rem; border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; box-shadow: 0 7px 18px -19px rgba(15, 23, 42, .65); }
.qr-faq-card[open] { border-color: #bfdbfe; box-shadow: 0 12px 24px -22px rgba(37, 99, 235, .65); }

@media (max-width: 639px) {
    .qr-tool-hero { padding: 1.2rem 0 1.3rem; border-radius: 0; }
    .qr-tool-hero h1 { align-items: flex-start !important; }
    .qr-tool-hero h1 > span:first-child { width: 2.35rem !important; height: 2.35rem !important; flex-basis: 2.35rem; }
    .qr-tool-hero::after { width: 65vw; opacity: .16; }
    .qr-tool-hero > div + div { width: 100%; }
    .qr-tool-hero > div + div button,
    .qr-tool-hero > div + div a { width: 100%; justify-content: center; }
    .qr-related-card { min-height: 0; }
    .qr-step-card { min-height: 0; }
}

@supports not (color: color-mix(in srgb, #000, #fff)) {
    .qr-tool-hero { background: #f8fafc; box-shadow: 0 0 0 100vmax #f8fafc, 0 16px 34px -28px rgba(15, 23, 42, .45); }
    .qr-related-card { border-color: #cbd5e1; background: #fff; box-shadow: 0 10px 25px -18px rgba(15, 23, 42, .45); }
    .qr-related-card__icon, .qr-related-card__arrow { background: #f1f5f9; border-color: #e2e8f0; }
}

/* Print Styles */
@media print {
    header, nav, footer, .controls-panel, .no-print, .bg-slate-900 {
        display: none !important;
    }
    main {
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
    }
}
@media (max-width: 1023px) {
    .preview-column-mobile-sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 3.25rem !important;
        z-index: 35 !important;
    }
    .preview-card {
        padding: 0.75rem 1rem !important;
        border-radius: 1.25rem !important;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(8px) !important;
    }
    #qr-canvas-container canvas,
    #qr-canvas-container svg {
        max-width: 140px !important;
        max-height: 140px !important;
    }
}