@charset "UTF-8";

/*
 * VMA QR Studio modern presentation layer
 * This file intentionally loads after the original QRcdr styles.
 */

:root {
    --vma-navy-950: #001a3b;
    --vma-navy-900: #00295b;
    --vma-navy-800: #003a77;
    --vma-blue-700: #004686;
    --vma-blue-500: #328cd2;
    --vma-red-500: #f12c30;
    --vma-red-700: #9d0716;
    --vma-ink: #172033;
    --vma-copy: #526078;
    --vma-muted: #738096;
    --vma-line: #dfe6ef;
    --vma-line-strong: #cad5e3;
    --vma-surface: #ffffff;
    --vma-surface-soft: #f7f9fc;
    --vma-page: #f2f6fb;
    --vma-success: #15956b;
    --vma-warning: #e0a11b;
    --vma-shadow-sm: 0 8px 24px rgba(0, 41, 91, 0.08);
    --vma-shadow-md: 0 18px 50px rgba(0, 41, 91, 0.12);
    --vma-shadow-lg: 0 28px 80px rgba(0, 27, 67, 0.2);
    --vma-radius-sm: 10px;
    --vma-radius-md: 16px;
    --vma-radius-lg: 24px;
    --vma-transition: 180ms ease;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}

body.vma-qr-app {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--vma-ink);
    background: var(--vma-page);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.vma-qr-app * {
    box-sizing: border-box;
}

body.vma-qr-app a {
    text-underline-offset: 3px;
}

body.vma-qr-app img,
body.vma-qr-app svg {
    max-width: 100%;
}

.vma-skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 2000;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    color: #fff;
    background: var(--vma-red-500);
    font-weight: 700;
    transform: translateY(-150%);
    transition: transform var(--vma-transition);
}

.vma-skip-link:focus {
    color: #fff;
    transform: translateY(0);
}

/* Top navigation */
.vma-topbar {
    position: sticky;
    top: 0;
    z-index: 1040;
    min-height: 76px;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(0, 41, 91, 0.08);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 4px 18px rgba(0, 41, 91, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.vma-brand,
.vma-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.72rem;
    color: var(--vma-navy-900) !important;
    text-decoration: none;
}

.vma-brand-mark {
    display: grid;
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    place-items: center;
    color: var(--vma-navy-900);
}

.vma-brand-mark svg {
    width: 45px;
    height: 45px;
}

.vma-brand-copy,
.vma-footer-brand > span:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1.12;
}

.vma-brand-copy strong,
.vma-footer-brand strong {
    color: var(--vma-navy-900);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.vma-brand-copy small,
.vma-footer-brand small {
    margin-top: 0.22rem;
    color: var(--vma-muted);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.vma-topbar .navbar-toggler {
    padding: 0.5rem;
    border: 1px solid var(--vma-line);
    border-radius: 11px;
    box-shadow: none !important;
}

.vma-topbar .navbar-toggler-icon {
    width: 1.35em;
    height: 1.35em;
}

.vma-topbar .navbar-nav {
    gap: 0.25rem;
}

.vma-topbar .nav-link {
    padding: 0.64rem 0.85rem !important;
    border-radius: 10px;
    color: #46546a;
    font-size: 0.92rem;
    font-weight: 700;
    transition: color var(--vma-transition), background-color var(--vma-transition);
}

.vma-topbar .nav-link:hover,
.vma-topbar .nav-link:focus {
    color: var(--vma-navy-900);
    background: #edf4fb;
}

.vma-topbar .dropdown-menu {
    min-width: 190px;
    padding: 0.55rem;
    border: 1px solid var(--vma-line);
    border-radius: 14px;
    box-shadow: var(--vma-shadow-md);
}

.vma-topbar .dropdown-item {
    padding: 0.58rem 0.75rem;
    border-radius: 9px;
    color: #46546a;
    font-weight: 600;
}

.vma-topbar .dropdown-item:hover,
.vma-topbar .dropdown-item:focus {
    color: var(--vma-navy-900);
    background: #edf4fb;
}

.vma-topbar .dropdown-item.active {
    color: #fff;
    background: var(--vma-navy-900);
}

/* Hero */
.vma-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(4.8rem, 8vw, 7.5rem) 0 clamp(5rem, 8vw, 7rem);
    color: #fff;
    background:
        radial-gradient(circle at 76% 18%, rgba(50, 140, 210, 0.35), transparent 31%),
        linear-gradient(132deg, var(--vma-navy-950) 0%, var(--vma-navy-900) 43%, var(--vma-blue-700) 100%);
}

.vma-hero::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    content: "";
    opacity: 0.14;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent 76%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent 76%);
}

.vma-hero::after {
    position: absolute;
    right: -8%;
    bottom: -45%;
    z-index: -1;
    width: 620px;
    height: 620px;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    box-shadow:
        0 0 0 80px rgba(255, 255, 255, 0.028),
        0 0 0 160px rgba(255, 255, 255, 0.018);
}

.vma-hero-orb {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(1px);
    pointer-events: none;
}

.vma-hero-orb-one {
    top: -160px;
    left: -120px;
    width: 360px;
    height: 360px;
    background: rgba(241, 44, 48, 0.12);
}

.vma-hero-orb-two {
    right: 29%;
    bottom: -170px;
    width: 310px;
    height: 310px;
    background: rgba(50, 140, 210, 0.17);
}

.vma-eyebrow,
.vma-section-kicker,
.vma-preview-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.115em;
    text-transform: uppercase;
}

.vma-eyebrow {
    margin-bottom: 1.25rem;
    padding: 0.52rem 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.vma-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vma-red-500);
    box-shadow: 0 0 0 5px rgba(241, 44, 48, 0.18);
}

.vma-hero h1 {
    max-width: 780px;
    margin: 0;
    color: #fff;
    font-size: clamp(3rem, 6.1vw, 5.4rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 0.99;
}

.vma-hero-copy {
    max-width: 730px;
    margin: 1.55rem 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1.03rem, 1.65vw, 1.24rem);
    line-height: 1.7;
}

.vma-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.35rem;
    margin-top: 2rem;
}

.vma-hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 54px;
    padding: 0.82rem 1.35rem;
    border: 1px solid #fff;
    border-radius: 14px;
    color: var(--vma-navy-900) !important;
    background: #fff;
    box-shadow: 0 13px 30px rgba(0, 0, 0, 0.18);
    font-weight: 800;
    text-decoration: none;
    transition: transform var(--vma-transition), box-shadow var(--vma-transition);
}

.vma-hero-button:hover,
.vma-hero-button:focus {
    transform: translateY(-2px);
    box-shadow: 0 17px 38px rgba(0, 0, 0, 0.23);
}

.vma-hero-button span {
    font-size: 1.25rem;
    line-height: 1;
}

.vma-powered-link {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 0.9rem;
    text-decoration: none;
}

.vma-powered-link:hover,
.vma-powered-link:focus {
    color: #fff !important;
}

.vma-powered-link strong {
    color: #fff;
}

.vma-feature-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-top: 2.1rem;
}

.vma-feature-row span {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.84rem;
    font-weight: 650;
}

.vma-feature-row i {
    color: #8fd6ff;
}

.vma-hero-visual {
    position: relative;
    width: min(100%, 450px);
    margin-inline: auto;
    perspective: 900px;
}

.vma-visual-card {
    position: relative;
    z-index: 2;
    width: min(100%, 390px);
    margin-inline: auto;
    padding: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 27px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--vma-shadow-lg);
    transform: rotate(2.2deg);
}

.vma-visual-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.15rem 0.25rem 0.85rem;
}

.vma-visual-status {
    display: inline-flex;
    align-items: center;
    gap: 0.43rem;
    color: #4c5b70;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.vma-visual-status span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vma-success);
    box-shadow: 0 0 0 4px rgba(21, 149, 107, 0.12);
}

.vma-visual-dots {
    color: #a6b1c0;
    letter-spacing: 0.1em;
}

.vma-demo-qr {
    display: grid;
    padding: 1.1rem;
    border: 1px solid #e6ebf2;
    border-radius: 20px;
    background: #f7f9fc;
    place-items: center;
}

.vma-demo-qr svg {
    width: 260px;
    filter: drop-shadow(0 10px 18px rgba(0, 41, 91, 0.12));
}

.vma-visual-caption {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1rem 0.3rem 0.15rem;
}

.vma-visual-caption strong {
    color: var(--vma-navy-900);
    font-size: 1rem;
}

.vma-visual-caption span {
    color: var(--vma-muted);
    font-size: 0.78rem;
}

.vma-floating-chip {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.63rem 0.82rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    color: var(--vma-navy-900);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 13px 28px rgba(0, 24, 60, 0.2);
    font-size: 0.76rem;
    font-weight: 800;
    animation: vma-float 4.8s ease-in-out infinite;
}

.vma-floating-chip i {
    color: var(--vma-blue-500);
}

.vma-chip-one {
    top: 20%;
    left: -4%;
}

.vma-chip-two {
    right: -1%;
    bottom: 26%;
    animation-delay: -1.5s;
}

.vma-chip-three {
    bottom: 3%;
    left: 3%;
    animation-delay: -2.8s;
}

@keyframes vma-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Builder area */
.vma-builder-section {
    position: relative;
    padding: clamp(4.5rem, 7vw, 6.5rem) 0 clamp(5rem, 8vw, 7.5rem);
    background:
        radial-gradient(circle at 8% 8%, rgba(50, 140, 210, 0.08), transparent 23%),
        radial-gradient(circle at 94% 42%, rgba(241, 44, 48, 0.055), transparent 22%),
        var(--vma-page);
}

.vma-builder-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.2rem;
}

.vma-section-kicker {
    color: var(--vma-blue-700);
}

.vma-builder-intro h2 {
    max-width: 760px;
    margin: 0.5rem 0 0;
    color: var(--vma-navy-950);
    font-size: clamp(2rem, 3.6vw, 3.05rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.08;
}

.vma-builder-intro p {
    max-width: 780px;
    margin: 0.9rem 0 0;
    color: var(--vma-copy);
    font-size: 1.02rem;
}

.vma-builder-badges {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding-bottom: 0.35rem;
}

.vma-builder-badges span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--vma-muted);
    font-size: 0.77rem;
    font-weight: 800;
    text-transform: uppercase;
}

.vma-builder-badges b {
    display: grid;
    width: 28px;
    height: 28px;
    border: 1px solid #cfd9e6;
    border-radius: 50%;
    color: var(--vma-navy-900);
    background: #fff;
    place-items: center;
}

.vma-builder-badges i {
    width: 28px;
    height: 1px;
    margin: 0 0.5rem;
    background: #ccd6e3;
}

.vma-editor-card,
.vma-preview-card,
.vma-info-card,
.vma-content-card {
    border: 1px solid rgba(198, 210, 225, 0.78);
    border-radius: var(--vma-radius-lg);
    background: var(--vma-surface);
    box-shadow: var(--vma-shadow-md);
}

.vma-editor-card {
    overflow: hidden;
}

.vma-editor-section {
    padding: clamp(1.35rem, 3vw, 2.15rem);
    border-bottom: 1px solid #e7ecf3;
}

.vma-editor-section-last {
    border-bottom: 0;
}

.vma-step-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.35rem;
}

.vma-step-number {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(145deg, var(--vma-navy-900), var(--vma-blue-700));
    box-shadow: 0 8px 17px rgba(0, 70, 134, 0.2);
    font-size: 0.9rem;
    font-weight: 900;
    place-items: center;
}

.vma-step-heading h3 {
    margin: 0;
    color: var(--vma-navy-950);
    font-size: 1.14rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.vma-step-heading p {
    margin: 0.24rem 0 0;
    color: var(--vma-muted);
    font-size: 0.88rem;
}

.vma-active-type-label {
    display: inline-flex;
    margin-inline-start: 0.38rem;
    padding: 0.22rem 0.45rem;
    border-radius: 7px;
    color: var(--vma-blue-700);
    background: #eaf4fc;
    font-size: 0.7rem;
    font-weight: 800;
    vertical-align: 0.12em;
}

/* QR content type selector */
.vma-type-selector {
    position: relative;
}

.vma-type-tabs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 0.68rem;
    margin: 0;
    padding: 0;
}

.vma-type-tabs .nav-item {
    min-width: 0;
}

.vma-type-tabs .nav-link {
    position: relative;
    display: flex;
    min-height: 88px;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    padding: 0.72rem 0.42rem;
    overflow: hidden;
    border: 1px solid #dfe6ef;
    border-radius: 14px !important;
    color: #4d5a70;
    background: #fbfcfe;
    font-size: 0.74rem;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    box-shadow: none;
    transition: color var(--vma-transition), border-color var(--vma-transition), background-color var(--vma-transition), transform var(--vma-transition), box-shadow var(--vma-transition);
}

.vma-type-tabs .nav-link::after {
    position: absolute;
    right: 17%;
    bottom: -15px;
    width: 34px;
    height: 34px;
    content: "";
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
}

.vma-type-tabs .nav-link:hover,
.vma-type-tabs .nav-link:focus {
    border-color: #a9c7e1;
    color: var(--vma-navy-900);
    background: #f2f7fc;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 70, 134, 0.09);
}

.vma-type-tabs .nav-link.active,
.vma-type-tabs .show > .nav-link {
    border-color: var(--vma-navy-900) !important;
    color: #fff !important;
    background: linear-gradient(145deg, var(--vma-navy-900), var(--vma-blue-700)) !important;
    box-shadow: 0 10px 22px rgba(0, 41, 91, 0.21);
    transform: translateY(-2px);
}

.vma-type-icon {
    display: grid;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: var(--vma-blue-700);
    background: #eaf3fb;
    font-size: 0.95rem;
    place-items: center;
    transition: color var(--vma-transition), background-color var(--vma-transition);
}

.vma-type-tabs .nav-link.active .vma-type-icon {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}

.vma-type-name {
    display: block;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vma-type-tabs-vertical {
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
}

/* Data panels and fields */
.vma-data-panel {
    min-height: 112px;
    padding: clamp(1.05rem, 2.4vw, 1.45rem);
    border: 1px solid #e0e7f0;
    border-radius: 16px;
    background: var(--vma-surface-soft);
}

.vma-data-panel > .tab-pane > h4 {
    display: none;
}

.vma-data-panel .tab-pane.fade:not(.show) {
    display: none;
}

.vma-data-panel .form-group:last-child,
.vma-data-panel .row:last-child {
    margin-bottom: 0;
}

body.vma-qr-app label:not(.btn):not(.form-check-label):not(.custom-file-label) {
    display: inline-block;
    margin-bottom: 0.38rem;
    color: #344158;
    font-size: 0.82rem;
    font-weight: 750;
}

body.vma-qr-app .form-group {
    margin-bottom: 1rem;
}

body.vma-qr-app .form-control,
body.vma-qr-app .form-select,
body.vma-qr-app .custom-select {
    min-height: 48px;
    padding: 0.68rem 0.82rem;
    border: 1px solid #cfd9e5;
    border-radius: 11px !important;
    color: var(--vma-ink);
    background-color: #fff;
    font-size: 0.94rem;
    box-shadow: 0 1px 2px rgba(0, 41, 91, 0.025);
    transition: border-color var(--vma-transition), box-shadow var(--vma-transition), background-color var(--vma-transition);
}

body.vma-qr-app textarea.form-control {
    min-height: 118px;
    margin-bottom: 0;
    resize: vertical;
}

body.vma-qr-app .form-control::placeholder {
    color: #9ba7b8;
}

body.vma-qr-app .form-control:focus,
body.vma-qr-app .form-select:focus,
body.vma-qr-app .custom-select:focus {
    border-color: var(--vma-blue-500);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(50, 140, 210, 0.13) !important;
}

body.vma-qr-app .input-group > .form-control:not(:last-child),
body.vma-qr-app .input-group > .form-select:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

body.vma-qr-app .input-group > .form-control:not(:first-child),
body.vma-qr-app .input-group > .form-select:not(:first-child),
body.vma-qr-app .input-group-text + .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

body.vma-qr-app .input-group-text {
    border-color: #cfd9e5;
    color: #526078;
    background: #eef3f8;
    font-weight: 700;
}

body.vma-qr-app .invalid-feedback {
    font-size: 0.78rem;
    font-weight: 650;
}

body.vma-qr-app .form-text,
body.vma-qr-app small.text-muted {
    color: var(--vma-muted) !important;
    font-size: 0.78rem;
}

body.vma-qr-app .form-check {
    min-height: 1.55rem;
}

body.vma-qr-app .form-check-label {
    color: #4d5a70;
    font-size: 0.83rem;
    font-weight: 650;
}

body.vma-qr-app .form-check-input {
    border-color: #b8c5d4;
    box-shadow: none;
}

body.vma-qr-app .form-check-input:checked {
    border-color: var(--vma-blue-700);
    background-color: var(--vma-blue-700);
}

body.vma-qr-app .form-check-input:focus {
    border-color: var(--vma-blue-500);
    box-shadow: 0 0 0 4px rgba(50, 140, 210, 0.13);
}

#map-canvas,
.venomap,
#wpol-admin-map {
    overflow: hidden;
    border: 1px solid var(--vma-line);
    border-radius: 14px;
}

/* Customization accordion */
.vma-customization-panel .accordion {
    display: grid;
    gap: 0.72rem;
    --bs-accordion-border-width: 0;
}

.vma-customization-panel .accordion-item {
    display: block !important;
    overflow: visible;
    border: 0;
    border-radius: 14px;
    background: transparent;
}

.vma-customization-panel .accordion-item > button.btn-outline-primary {
    display: flex;
    width: 100%;
    min-height: 54px;
    align-items: center;
    gap: 0.72rem;
    margin: 0 !important;
    padding: 0.85rem 1rem;
    border: 1px solid #d9e2ec;
    border-radius: 14px !important;
    color: #33425a;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 41, 91, 0.035);
    font-size: 0.94rem;
    font-weight: 800;
    text-align: start;
    transition: border-color var(--vma-transition), color var(--vma-transition), background-color var(--vma-transition), box-shadow var(--vma-transition), transform var(--vma-transition);
}

.vma-customization-panel .accordion-item > button.btn-outline-primary > svg {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 1.15rem;
    color: var(--vma-blue-700);
}

.vma-customization-panel .accordion-item > button.btn-outline-primary::after {
    margin-inline-start: auto;
    color: #8290a4;
    content: "\f107";
    font-family: FontAwesome;
    font-size: 1rem;
    transition: transform var(--vma-transition);
}

.vma-customization-panel .accordion-item > button.btn-outline-primary[aria-expanded="true"] {
    border-color: #aec9e1;
    color: var(--vma-navy-900);
    background: #f5f9fd;
    box-shadow: 0 7px 18px rgba(0, 70, 134, 0.08);
}

.vma-customization-panel .accordion-item > button.btn-outline-primary[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.vma-customization-panel .accordion-item > button.btn-outline-primary:hover,
.vma-customization-panel .accordion-item > button.btn-outline-primary:focus {
    border-color: #aec9e1;
    color: var(--vma-navy-900);
    background: #f5f9fd;
    transform: translateY(-1px);
}

.vma-customization-panel .accordion-item > .collapse,
.vma-customization-panel .accordion-item > .collapsing {
    margin-top: 0.55rem;
    padding: 1rem;
    border: 1px solid #e0e7f0;
    border-radius: 14px;
    background: #f9fbfd;
}

.vma-customization-panel .accordion-item > .collapsing {
    overflow: hidden;
}

.vma-customization-panel .btn-light,
.vma-customization-panel label.btn-light {
    border: 1px solid #d8e1eb;
    border-radius: 10px !important;
    color: #526078;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 41, 91, 0.035);
    transition: border-color var(--vma-transition), color var(--vma-transition), background-color var(--vma-transition), transform var(--vma-transition);
}

.vma-customization-panel .btn-light:hover,
.vma-customization-panel label.btn-light:hover {
    border-color: #9fc1df;
    color: var(--vma-navy-900);
    background: #eff6fc;
    transform: translateY(-1px);
}

.vma-customization-panel .btn-check:checked + .btn,
.vma-customization-panel .btn-check:active + .btn {
    border-color: var(--vma-blue-700) !important;
    color: var(--vma-navy-900) !important;
    background: #eaf4fc !important;
    box-shadow: 0 0 0 3px rgba(50, 140, 210, 0.12) !important;
}

.styleselecta,
.logoselecta {
    max-width: 100%;
}

.styleselecta label,
.logoselecta label {
    margin: 0.18rem !important;
}

.styleselecta svg {
    display: block;
}

.logoselecta img,
.hold-custom-watermark {
    min-width: 2rem;
    min-height: 2rem;
    max-width: 2rem;
    max-height: 2rem;
    object-fit: contain;
}

.custom-file {
    height: auto;
    margin-top: 0.45rem;
}

.custom-file .custom-file-input {
    min-height: 46px;
}

.custom-file-label {
    position: static;
    display: block;
    height: auto;
    margin-top: 0.35rem;
    padding: 0;
    border: 0;
    background: transparent;
}

label.custom-file-label::after {
    position: static;
    display: inline-flex;
    width: auto;
    height: auto;
    align-items: center;
    justify-content: center;
    padding: 0.62rem 1rem;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--vma-blue-700) !important;
    content: "+ Upload image" !important;
    font-family: inherit;
    font-weight: 800;
    line-height: 1.25;
}

/* Color picker */
.sp-replacer {
    min-height: 46px;
    padding: 0.56rem 0.68rem;
    border: 1px solid #cfd9e5;
    border-radius: 11px;
    background: #fff;
}

.sp-replacer:hover,
.sp-replacer.sp-active {
    border-color: var(--vma-blue-500);
}

.sp-preview {
    width: 30px;
    height: 28px;
    margin-right: 8px;
    border: 0;
    border-radius: 7px;
    overflow: hidden;
}

.sp-dd {
    padding-top: 4px;
    color: #66748a;
}

.sp-container {
    border: 1px solid var(--vma-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: var(--vma-shadow-md);
}

/* Range inputs */
body.vma-qr-app input[type="range"].qrcdr-slider-input {
    height: 7px;
    margin: 1rem 0 0.45rem;
    border-radius: 999px;
    opacity: 1;
    background: #dbe5ef;
}

body.vma-qr-app input[type="range"].qrcdr-slider-input::-webkit-slider-runnable-track {
    height: 7px;
    border-radius: 999px;
    background: #dbe5ef;
}

body.vma-qr-app input[type="range"].qrcdr-slider-input::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -5.5px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--vma-blue-700);
    box-shadow: 0 2px 7px rgba(0, 41, 91, 0.24);
}

body.vma-qr-app input[type="range"].qrcdr-slider-input::-moz-range-track {
    height: 7px;
    border-radius: 999px;
    background: #dbe5ef;
}

body.vma-qr-app input[type="range"].qrcdr-slider-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--vma-blue-700);
    box-shadow: 0 2px 7px rgba(0, 41, 91, 0.24);
}

.qrcdr-slider label.small {
    color: var(--vma-muted);
    font-weight: 700;
}

/* Preview */
.vma-preview-stack {
    position: sticky;
    top: 98px;
    display: grid;
    gap: 1rem;
}

.vma-preview-card {
    overflow: hidden;
    padding: 1.3rem;
}

.vma-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.vma-preview-eyebrow {
    color: var(--vma-blue-700);
    font-size: 0.65rem;
}

.vma-preview-header h2 {
    margin: 0.22rem 0 0;
    color: var(--vma-navy-950);
    font-size: 1.33rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.vma-preview-status {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    flex: 0 0 auto;
    margin-top: 0.1rem;
    padding: 0.38rem 0.57rem;
    border-radius: 999px;
    color: #6d788a;
    background: #eef2f6;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.vma-preview-status > span:first-child {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #96a2b2;
}

.vma-preview-status.is-updating {
    color: #8a6815;
    background: #fff5d9;
}

.vma-preview-status.is-updating > span:first-child {
    background: var(--vma-warning);
    animation: vma-pulse 1.15s ease-in-out infinite;
}

.vma-preview-status.is-ready {
    color: #0a7956;
    background: #e3f7ef;
}

.vma-preview-status.is-ready > span:first-child {
    background: var(--vma-success);
}

@keyframes vma-pulse {
    0%, 100% { opacity: 0.45; transform: scale(0.82); }
    50% { opacity: 1; transform: scale(1); }
}

.placeresult {
    position: relative;
    float: none;
    width: 100%;
    padding: 0;
    box-shadow: none;
}

.vma-preview-canvas {
    position: relative;
    display: grid;
    min-height: 330px;
    overflow: hidden;
    padding: 1.1rem;
    border: 1px solid #dfe7f0;
    border-radius: 18px;
    background-color: #f7f9fc;
    background-image:
        linear-gradient(45deg, #eef2f7 25%, transparent 25%),
        linear-gradient(-45deg, #eef2f7 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eef2f7 75%),
        linear-gradient(-45deg, transparent 75%, #eef2f7 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
    place-items: center;
}

.wrapresult {
    display: grid;
    width: 100%;
    min-height: 292px;
    margin: 0;
    place-items: center;
}

.resultholder {
    display: grid;
    width: min(100%, 290px);
    min-height: 250px;
    padding: 0.75rem;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 11px 30px rgba(0, 41, 91, 0.11);
    place-items: center;
}

.resultholder > img {
    width: min(100%, 245px);
    max-height: 245px;
    object-fit: contain;
}

.resultholder > svg {
    width: 100%;
    max-height: 280px;
}

.preloader {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.91);
    box-shadow: none;
    backdrop-filter: blur(3px);
}

.preloader .vma-spinner {
    position: absolute;
    top: calc(50% - 18px);
    left: calc(50% - 18px);
    width: 36px;
    height: 36px;
    border: 4px solid #dce8f3;
    border-top-color: var(--vma-blue-700);
    border-radius: 50%;
    animation: vma-spin 0.85s linear infinite;
}

.preloader small {
    position: absolute;
    top: calc(50% + 30px);
    left: 50%;
    color: var(--vma-muted);
    font-size: 0.74rem;
    font-weight: 750;
    transform: translateX(-50%);
    white-space: nowrap;
}

@keyframes vma-spin {
    to { transform: rotate(360deg); }
}

.generate_qrcode {
    display: inline-flex !important;
    width: 100%;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 0.62rem;
    margin-top: 1rem;
    padding: 0.82rem 1rem;
    border: 0 !important;
    border-radius: 13px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--vma-navy-900), var(--vma-blue-700)) !important;
    box-shadow: 0 10px 24px rgba(0, 70, 134, 0.19);
    font-size: 0.94rem;
    font-weight: 800;
    transition: transform var(--vma-transition), box-shadow var(--vma-transition), opacity var(--vma-transition);
}

.generate_qrcode:not(:disabled):hover,
.generate_qrcode:not(:disabled):focus {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 70, 134, 0.24);
}

.generate_qrcode:disabled {
    color: #7b8798 !important;
    background: #e6ebf1 !important;
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}

.linksholder {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.72rem;
}

.linksholder:empty {
    display: none;
}

.placeresult .linksholder .btn,
.placeresult .linksholder > a,
.placeresult .linksholder > button {
    display: inline-flex;
    min-width: 0;
    min-height: 60px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    padding: 0.5rem 0.28rem;
    border: 1px solid #d9e2ec;
    border-radius: 11px !important;
    color: #43526a;
    background: #fff;
    box-shadow: 0 3px 9px rgba(0, 41, 91, 0.04);
    font-size: 1.25rem;
    text-decoration: none;
    transition: border-color var(--vma-transition), color var(--vma-transition), background-color var(--vma-transition), transform var(--vma-transition);
}

.placeresult .linksholder .btn:hover,
.placeresult .linksholder > a:hover,
.placeresult .linksholder > button:hover {
    border-color: #9ebfdd;
    color: var(--vma-blue-700);
    background: #eff6fc;
    transform: translateY(-1px);
}

.linksholder .vma-format-label {
    color: inherit;
    font-size: 0.61rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    line-height: 1;
    text-transform: uppercase;
}

.linksholder .serve-png,
.linksholder .preload-png {
    display: none !important;
}

.vma-preview-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 1rem;
    padding: 0.8rem 0.85rem;
    border-radius: 12px;
    color: #5c6980;
    background: #f0f6fb;
}

.vma-preview-tip i {
    margin-top: 0.12rem;
    color: var(--vma-blue-700);
}

.vma-preview-tip p {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.55;
}

.vma-info-card {
    padding: 1rem;
    box-shadow: var(--vma-shadow-sm);
}

.vma-info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.72rem;
}

.vma-info-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    color: var(--vma-blue-700);
    background: #eaf4fc;
    place-items: center;
}

.vma-info-item h3 {
    margin: 0;
    color: #334158;
    font-size: 0.82rem;
    font-weight: 800;
}

.vma-info-item p {
    margin: 0.22rem 0 0;
    color: var(--vma-muted);
    font-size: 0.72rem;
    line-height: 1.5;
}

.vma-info-divider {
    height: 1px;
    margin: 0.85rem 0;
    background: #e6ebf2;
}

/* Toast */
.alert_placeholder {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    width: min(390px, calc(100vw - 2rem));
    overflow: hidden;
    border: 1px solid #f0c4c6;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--vma-shadow-md);
}

.alert_placeholder .toast-header {
    color: var(--vma-red-700);
    background: #fff1f1;
}

.alert_placeholder .toast-body {
    color: #4d5a70;
    background: #fff;
    font-size: 0.86rem;
}

/* Footer */
.vma-footer {
    padding: 3.25rem 0 1.4rem;
    color: rgba(255, 255, 255, 0.72);
    background: var(--vma-navy-950);
}

.vma-footer-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 2rem;
}

.vma-footer-brand-wrap {
    max-width: 530px;
}

.vma-footer-brand {
    color: #fff !important;
}

.vma-footer-brand strong,
.vma-footer-brand small {
    color: #fff;
}

.vma-footer-brand small {
    opacity: 0.6;
}

.vma-footer-mark {
    display: grid;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    font-size: 1.2rem;
    place-items: center;
}

.vma-footer-brand-wrap p {
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.88rem;
}

.vma-footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem 1.15rem;
}

.vma-footer-links a {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

.vma-footer-links a:hover,
.vma-footer-links a:focus {
    color: #fff;
}

.vma-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.72rem;
}

.vma-footer-bottom span:last-child {
    text-align: end;
}

.vma-footer-bottom i {
    color: #6fcaa9;
}

/* Custom HTML pages */
.vma-custom-page-wrap {
    min-height: 55vh;
    padding: 4rem 0 6rem;
}

.vma-content-card {
    padding: clamp(1.5rem, 4vw, 3rem);
}

.vma-content-card h1,
.vma-content-card h2,
.vma-content-card h3 {
    color: var(--vma-navy-950);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.modal-content {
    overflow: hidden;
    border: 1px solid var(--vma-line);
    border-radius: 18px;
    box-shadow: var(--vma-shadow-lg);
}

/* Accessibility */
body.vma-qr-app :focus-visible {
    outline: 3px solid rgba(50, 140, 210, 0.42);
    outline-offset: 3px;
}

body.vma-qr-app .btn:focus,
body.vma-qr-app .btn.focus {
    box-shadow: 0 0 0 4px rgba(50, 140, 210, 0.15) !important;
}

/* RTL */
[dir="rtl"] .vma-hero::before {
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent 76%);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent 76%);
}

[dir="rtl"] .vma-chip-one {
    right: -4%;
    left: auto;
}

[dir="rtl"] .vma-chip-two {
    right: auto;
    left: -1%;
}

[dir="rtl"] .vma-footer-bottom span:last-child {
    text-align: start;
}

/* Responsive */
@media (max-width: 1199.98px) {
    .vma-builder-badges {
        display: none;
    }

    .vma-demo-qr svg {
        width: 225px;
    }
}

@media (max-width: 991.98px) {
    .vma-topbar {
        min-height: 70px;
    }

    .vma-hero {
        padding-top: 4.6rem;
    }

    .vma-preview-stack {
        position: static;
    }

    .vma-preview-card {
        padding: 1.2rem;
    }

    .vma-preview-canvas {
        min-height: 360px;
    }

    .resultholder {
        width: min(100%, 310px);
    }
}

@media (max-width: 767.98px) {
    html {
        scroll-padding-top: 72px;
    }

    .vma-topbar .navbar-collapse {
        margin-top: 0.65rem;
        padding: 0.55rem;
        border: 1px solid var(--vma-line);
        border-radius: 14px;
        background: #fff;
        box-shadow: var(--vma-shadow-sm);
    }

    .vma-topbar .navbar-nav {
        align-items: stretch !important;
    }

    .vma-hero {
        padding: 4.15rem 0 4.75rem;
    }

    .vma-hero h1 {
        font-size: clamp(2.7rem, 13vw, 4.1rem);
    }

    .vma-hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .vma-feature-row {
        display: grid;
        gap: 0.6rem;
    }

    .vma-builder-intro {
        display: block;
    }

    .vma-type-selector::after {
        position: absolute;
        top: 0;
        right: -1px;
        bottom: 6px;
        width: 32px;
        content: "";
        background: linear-gradient(to right, transparent, #fff);
        pointer-events: none;
    }

    [dir="rtl"] .vma-type-selector::after {
        right: auto;
        left: -1px;
        background: linear-gradient(to left, transparent, #fff);
    }

    .vma-type-tabs {
        display: flex !important;
        gap: 0.62rem;
        overflow-x: auto;
        padding: 0.05rem 1.4rem 0.55rem 0.05rem;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    [dir="rtl"] .vma-type-tabs {
        padding-right: 0.05rem;
        padding-left: 1.4rem;
    }

    .vma-type-tabs .nav-item {
        flex: 0 0 94px;
        scroll-snap-align: start;
    }

    .vma-type-tabs .nav-link {
        min-height: 84px;
    }

    .vma-editor-section {
        padding: 1.25rem;
    }

    .vma-data-panel {
        padding: 1rem;
    }

    .vma-preview-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .vma-preview-status {
        margin-top: 0;
    }

    .vma-footer-main,
    .vma-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .vma-footer-links {
        justify-content: flex-start;
    }

    .vma-footer-bottom span:last-child {
        text-align: start;
    }
}

@media (max-width: 479.98px) {
    .vma-brand-copy small {
        display: none;
    }

    .vma-brand-mark {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .vma-brand-mark svg {
        width: 40px;
        height: 40px;
    }

    .vma-hero h1 {
        letter-spacing: -0.045em;
    }

    .vma-hero-copy {
        font-size: 0.98rem;
    }

    .vma-powered-link {
        max-width: 270px;
    }

    .vma-step-heading {
        gap: 0.72rem;
    }

    .vma-step-number {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .vma-preview-canvas {
        min-height: 300px;
        padding: 0.75rem;
    }

    .wrapresult {
        min-height: 260px;
    }

    .resultholder {
        min-height: 225px;
    }

    .linksholder {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}