/* =====================================================
   DE MADE IN CANADA BADGE
   Canada red #d52b1e · white · Digital Eminence fonts
===================================================== */
.decb-badge {
    --decb-red: #d52b1e;
    --decb-red-2: #a3150b;
    --decb-h: 46px;
    --decb-fs: 13px;
    --decb-disc: 34px;
    --decb-ease: cubic-bezier(.16, 1, .3, 1);

    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    height: var(--decb-h);
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #ef3b2d 0%, var(--decb-red) 45%, var(--decb-red-2) 100%) !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .92), inset 0 0 0 4px var(--decb-red), 0 12px 28px -12px rgba(213, 43, 30, .75) !important;
    color: #fff !important;
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-size: var(--decb-fs) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap;
    vertical-align: middle;
    cursor: default;
    overflow: visible;
    isolation: isolate;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    transition: transform .5s var(--decb-ease), box-shadow .5s var(--decb-ease), padding .55s var(--decb-ease), gap .55s var(--decb-ease);
}
a.decb-badge { cursor: pointer; }
.decb-badge *, .decb-badge *::before, .decb-badge *::after { box-sizing: border-box; }
.decb-badge:focus { outline: none; }
.decb-badge:focus-visible { outline: 2px solid #fff !important; outline-offset: 4px; }

/* sizes */
.decb-badge--sm { --decb-h: 36px; --decb-fs: 11px; --decb-disc: 26px; gap: 7px; padding: 0 14px !important; }
.decb-badge--lg { --decb-h: 58px; --decb-fs: 16px; --decb-disc: 44px; gap: 12px; padding: 0 24px !important; }

/* sizes kept for the settings preview */
/* light sweep (clipped to the pill) */
.decb-shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.decb-shine::before {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -40%;
    width: 30%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-18deg) translateX(0);
    animation: decb-sweep 5.5s ease-in-out 1.2s infinite;
}

.decb-word { position: relative; z-index: 1; display: inline-block; max-width: 140px; overflow: hidden; transition: max-width .55s var(--decb-ease), opacity .35s ease, transform .55s var(--decb-ease); }
.decb-word--l { transform-origin: right center; }
.decb-word--r { transform-origin: left center; }

/* white disc with the red maple leaf */
.decb-disc {
    position: relative;
    z-index: 1;
    flex: none;
    width: var(--decb-disc);
    height: var(--decb-disc);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .45), inset 0 -2px 4px rgba(213, 43, 30, .15);
}
.decb-leaf {
    display: block;
    width: 64%;
    height: 64%;
    fill: var(--decb-red);
    transform-origin: 50% 60%;
    animation: decb-sway 4s ease-in-out infinite;
    transition: transform .8s var(--decb-ease);
}
.decb-ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); opacity: 0; animation: decb-ping 3s ease-out 2s infinite; pointer-events: none; }

/* hover text */
.decb-tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(14, 8, 22, .92);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    font-family: "Kumbh Sans", system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px) scale(.96);
    transition: opacity .3s ease, transform .45s var(--decb-ease), visibility .3s;
    pointer-events: none;
}
.decb-tip i { width: 7px; height: 7px; border-radius: 50%; background: var(--decb-red); box-shadow: 0 0 10px rgba(213, 43, 30, .9); }
.decb-tip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: rgba(14, 8, 22, .92); border-right: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14); transform: rotate(45deg); }

/* hover / focus */
.decb-badge:hover, .decb-badge:focus-visible {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--decb-red), 0 18px 40px -12px rgba(213, 43, 30, .95), 0 0 0 6px rgba(213, 43, 30, .14) !important;
}
.decb-badge:hover .decb-leaf, .decb-badge:focus-visible .decb-leaf { animation: none; transform: rotate(360deg) scale(1.12); }
.decb-badge:hover .decb-shine::before, .decb-badge:focus-visible .decb-shine::before { animation: decb-sweep-fast .9s ease-out; }
.decb-badge:hover .decb-tip, .decb-badge:focus-visible .decb-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }

/* =====================================================
   FLOATING BADGE (every page)
===================================================== */
.decb-float {
    position: fixed;
    z-index: var(--decb-z, 1);
    pointer-events: none;
    animation: decb-in .9s var(--decb-ease, cubic-bezier(.16, 1, .3, 1)) .6s both;
}
.decb-float .decb-badge, .decb-float .decb-seal { pointer-events: auto; }

/* Scroll move: real end position + FLIP glide on `translate` (never fights the entrance / hover transforms) */
.decb-float[data-decb-dock] { transition: translate 1.1s cubic-bezier(.65, 0, .25, 1); }
.decb-float.is-docked { top: auto !important; bottom: var(--decb-dock-y, 24px) !important; }
.decb-float.is-docked.is-dock-left { left: var(--decb-x) !important; right: auto !important; }
.decb-float.is-docked.is-dock-right { right: var(--decb-x) !important; left: auto !important; }
.decb-float.is-docked.is-dock-left .decb-tip { left: 0; right: auto; }
.decb-float.is-docked.is-dock-left .decb-tip::after { left: 30px; right: auto; }
.decb-float.is-docked.is-dock-right .decb-tip { left: auto; right: 0; }
.decb-float.is-docked.is-dock-right .decb-tip::after { left: auto; right: 24px; }
.decb-float.is-moving .decb-leaf, .decb-float.is-moving .decb-seal__core svg { animation: decb-travel 1.1s cubic-bezier(.65, 0, .25, 1); }
.decb-float.is-moving .decb-badge, .decb-float.is-moving .decb-seal { filter: drop-shadow(0 18px 26px rgba(213, 43, 30, .45)); }
@keyframes decb-travel { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(200deg) scale(1.18); } 100% { transform: rotate(360deg) scale(1); } }
.decb-float.is-docked .decb-tip { top: auto; bottom: calc(100% + 12px); }
.decb-float.is-docked .decb-tip::after { bottom: auto; top: 100%; margin: -5px 0 0 -5px; transform: rotate(45deg); }
.decb-float--bottom-left  { left: var(--decb-x); bottom: var(--decb-y); }
.decb-float--bottom-right { right: var(--decb-x); bottom: var(--decb-y); }
.decb-float--top-left     { left: var(--decb-x); top: var(--decb-y); }
.decb-float--top-right    { right: var(--decb-x); top: var(--decb-y); }
.decb-float--top-left .decb-tip, .decb-float--top-right .decb-tip { bottom: auto; top: calc(100% + 12px); }
.decb-float--top-left .decb-tip::after, .decb-float--top-right .decb-tip::after { top: auto; bottom: 100%; margin: 0 0 -5px -5px; transform: rotate(225deg); }
.decb-float--bottom-left .decb-tip, .decb-float--top-left .decb-tip { left: 0; transform: translate(0, 8px) scale(.96); }
.decb-float.decb-float--bottom-left :hover > .decb-tip, .decb-float.decb-float--top-left :hover > .decb-tip, .decb-float.decb-float--bottom-left :focus-visible > .decb-tip, .decb-float.decb-float--top-left :focus-visible > .decb-tip { transform: none; }
.decb-float--bottom-left .decb-tip::after, .decb-float--top-left .decb-tip::after { left: 30px; }
.decb-float--bottom-right .decb-tip, .decb-float--top-right .decb-tip { left: auto; right: 0; transform: translate(0, 8px) scale(.96); }
.decb-float.decb-float--bottom-right :hover > .decb-tip, .decb-float.decb-float--top-right :hover > .decb-tip, .decb-float.decb-float--bottom-right :focus-visible > .decb-tip, .decb-float.decb-float--top-right :focus-visible > .decb-tip { transform: none; }
.decb-float--bottom-right .decb-tip::after, .decb-float--top-right .decb-tip::after { left: auto; right: 24px; }

/* collapsed while scrolling down: only the maple leaf shows */
.decb-float.is-mini .decb-badge { padding: 0 6px !important; gap: 0; }
.decb-float.is-mini .decb-word { max-width: 0; opacity: 0; transform: scale(.6); }
.decb-float.is-mini .decb-badge:hover { padding: 0 18px !important; gap: 9px; }
.decb-float.is-mini .decb-badge:hover .decb-word { max-width: 140px; opacity: 1; transform: none; }

/* =====================================================
   DESIGN 2: ROUND SEAL (text turns around the maple leaf)
===================================================== */
.decb-seal {
    --decb-red: #d52b1e;
    --decb-ease: cubic-bezier(.16, 1, .3, 1);
    --decb-s: 96px;
    position: relative;
    display: inline-grid !important;
    place-items: center;
    width: var(--decb-s);
    height: var(--decb-s);
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 30% 25%, #f04434 0%, var(--decb-red) 45%, #9e140a 100%) !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .95), inset 0 0 0 4px var(--decb-red), 0 16px 34px -14px rgba(213, 43, 30, .85) !important;
    color: #fff !important;
    text-decoration: none !important;
    line-height: 1 !important;
    cursor: default;
    isolation: isolate;
    box-sizing: border-box;
    transition: transform .55s var(--decb-ease), box-shadow .5s var(--decb-ease);
}
a.decb-seal { cursor: pointer; }
.decb-seal:focus { outline: none; }
.decb-seal:focus-visible { outline: 2px solid #fff !important; outline-offset: 4px; }
.decb-seal__spin { position: absolute; inset: 0; display: block; animation: decb-rotate 16s linear infinite; }
.decb-seal__ring { display: block; width: 100%; height: 100%; overflow: visible; }
.decb-seal__ring text { fill: #fff; font-family: "Montserrat", system-ui, sans-serif; font-weight: 800; font-size: 10.6px; letter-spacing: .06em; }
.decb-seal__core {
    position: relative;
    z-index: 1;
    width: 46%;
    height: 46%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .55), inset 0 -2px 5px rgba(213, 43, 30, .18);
}
.decb-seal .decb-leaf { width: 66%; height: 66%; }
.decb-seal:hover, .decb-seal:focus-visible {
    transform: translateY(-3px) scale(1.06);
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--decb-red), 0 22px 44px -12px rgba(213, 43, 30, 1), 0 0 0 7px rgba(213, 43, 30, .16) !important;
}
.decb-seal:hover .decb-leaf, .decb-seal:focus-visible .decb-leaf { animation: none; transform: rotate(360deg) scale(1.15); }
.decb-seal:hover .decb-tip, .decb-seal:focus-visible .decb-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
@keyframes decb-rotate { to { transform: rotate(360deg); } }

/* Settings page preview cards */
.decb-admin-designs { display: flex; flex-wrap: wrap; gap: 18px; margin: 10px 0 8px; }
.decb-admin-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 300px; padding: 46px 18px 18px; border-radius: 16px; background: #0b0710; border: 2px solid #2a2033; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.decb-admin-card input { position: absolute; left: 14px; top: 14px; margin: 0; }
.decb-admin-card:has(input:checked) { border-color: #d52b1e; box-shadow: 0 0 0 4px rgba(213, 43, 30, .2); }
.decb-admin-card__stage { min-height: 110px; display: grid; place-items: center; }
.decb-admin-card__name { color: #fff; font-weight: 600; }

@media (max-width: 767px) {
    .decb-float .decb-badge { --decb-h: 40px; --decb-fs: 11.5px; --decb-disc: 30px; gap: 8px; padding: 0 14px !important; }
    .decb-float { left: auto; }
    .decb-float--bottom-left, .decb-float--top-left { left: min(var(--decb-x), 16px); }
    .decb-float--bottom-right, .decb-float--top-right { right: min(var(--decb-x), 16px); }
    .decb-float--bottom-left, .decb-float--bottom-right { bottom: min(var(--decb-y), 16px); }
    .decb-float .decb-seal { --decb-s: 78px; }
    .decb-float--top-left, .decb-float--top-right { top: var(--decb-y); }
    .decb-float--no-mobile { display: none !important; }
    .decb-float.is-docked { bottom: min(var(--decb-dock-y, 24px), 16px) !important; }
    .decb-float.is-docked.is-dock-left { left: min(var(--decb-x), 16px) !important; }
    .decb-float.is-docked.is-dock-right { right: min(var(--decb-x), 16px) !important; }
}

@keyframes decb-in { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes decb-sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes decb-ping { 0% { opacity: .9; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.55); } }
@keyframes decb-sweep { 0%, 70% { transform: skewX(-18deg) translateX(0); } 100% { transform: skewX(-18deg) translateX(560%); } }
@keyframes decb-sweep-fast { from { transform: skewX(-18deg) translateX(0); } to { transform: skewX(-18deg) translateX(560%); } }

@media (prefers-reduced-motion: reduce) {
    .decb-badge, .decb-badge *, .decb-badge *::before, .decb-seal, .decb-seal *, .decb-float { animation: none !important; transition: none !important; }
}