/* DuckyTrack — Shared Application Styles
   ========================================================================== */

/* ── Keyframes ──────────────────────────────────────────────────────────── */

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInBottom {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--dt-primary-rgb, 255,193,7), 0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(var(--dt-primary-rgb, 255,193,7), 0); }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ── Reset ────────────────────────────────────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* kill any horizontal scroll from stray wide elements */
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
}

/* Responsive media safety default. max-width:100% is safe even for images
   carrying explicit width/height attributes — it only shrinks them when the
   container is narrower than the intrinsic size, so it can't create overflow.
   height:auto is intentionally scoped to images WITHOUT explicit dimension
   attributes, so fixed-size chrome (nav/footer logos, icon SVGs that declare
   width/height) keeps its intended size and aspect ratio. */
img, svg, video, canvas {
    max-width: 100%;
}
img:not([width]):not([height]) {
    height: auto;
}

body {
    background-color: var(--dt-bg);
    color: var(--dt-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.6;
}

main {
    flex: 1;
}

/* ── Typography ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 700;
    color: var(--dt-text);
}

h1 {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}

h2 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

h3 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

h4 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

h5 {
    font-size: 1.125rem;
    font-weight: 600;
}

h6 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
}

/* ── Links ──────────────────────────────────────────────────────────────── */

a {
    color: var(--dt-primary-dark);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
a:hover {
    color: var(--dt-primary);
    text-decoration: underline;
    text-decoration-color: var(--dt-primary);
}

/* ── Selection ──────────────────────────────────────────────────────────── */

::selection {
    background: var(--dt-primary);
    color: var(--dt-text-inverse);
}

::-moz-selection {
    background: var(--dt-primary);
    color: var(--dt-text-inverse);
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--dt-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--dt-border);
    border-radius: 999px;
    border: 2px solid var(--dt-bg);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--dt-text-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--dt-border) var(--dt-bg);
}

/* ── Navigation ──────────────────────────────────────────────────────────── */

.dt-nav {
    background: var(--dt-nav-bg);
    color: var(--dt-nav-text);
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dt-nav a {
    color: var(--dt-nav-text);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.dt-nav a:hover {
    color: var(--dt-primary);
    text-decoration: none;
}
.dt-nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0; /* allow flex children to shrink instead of overflowing */
    height: 64px;
}
.dt-nav-brand img {
    height: 40px;
    width: auto;
    transition: transform 0.2s ease;
}
.dt-nav-brand img:hover {
    transform: scale(1.05);
}
.dt-nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}
.dt-nav-links a {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 0;
    position: relative;
}
.dt-nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--dt-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}
.dt-nav-links a:hover::after {
    transform: scaleX(1);
}
.dt-nav-links a.active {
    color: var(--dt-primary);
    border-bottom: 2px solid var(--dt-primary);
}
.dt-nav-links a.active::after {
    display: none;
}
.dt-nav a:focus-visible,
.dt-nav-toggle:focus-visible {
    outline: 3px solid var(--dt-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Tablet / narrow-desktop: 8 nav links + theme + auth can overflow before the
   <=768px hamburger takes over. Tighten the gap and shrink labels slightly so
   everything fits between ~769px and ~1024px without horizontal scroll. */
@media (min-width: 769px) and (max-width: 1024px) {
    .dt-nav-links { gap: 0.9rem; }
    .dt-nav-links a { font-size: 0.8125rem; }
    .dt-theme-trigger { padding: 5px 8px; }
}

/* Mobile nav toggle */
.dt-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--dt-nav-text);
    cursor: pointer;
    padding: 0.5rem;
    transition: transform 0.2s ease;
}
.dt-nav-toggle:hover {
    transform: scale(1.1);
}
.dt-nav-toggle svg { width: 24px; height: 24px; }

@media (max-width: 768px) {
    .dt-nav-toggle { display: block; }
    .dt-nav-links {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--dt-nav-bg);
        flex-direction: column;
        padding: 1rem;
        gap: 0.75rem;
        box-shadow: 0 8px 24px rgba(0,0,0,0.2);
        border-bottom: 2px solid var(--dt-primary);
        animation: slideUp 0.25s ease-out;
    }
    .dt-nav-links.open { display: flex; }
    .dt-nav-links a::after { display: none; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--dt-radius);
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    line-height: 1.5;
}
.btn:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    transition-duration: 0.08s;
}
.btn:focus-visible {
    outline: 3px solid var(--dt-primary);
    outline-offset: 2px;
}
.btn-primary {
    background: linear-gradient(135deg, var(--dt-primary) 0%, var(--dt-primary-dark) 100%);
    color: var(--dt-text-inverse);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--dt-primary-light) 0%, var(--dt-primary) 100%);
    color: var(--dt-text-inverse);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.btn-primary:active {
    background: var(--dt-primary-dark);
}
.btn-secondary {
    background: var(--dt-surface);
    color: var(--dt-text);
    border: 2px solid var(--dt-border);
}
.btn-secondary:hover {
    border-color: var(--dt-primary);
    color: var(--dt-primary);
    background: var(--dt-surface-alt);
}
.btn-accent {
    background: linear-gradient(135deg, var(--dt-accent), var(--dt-primary-dark));
    color: var(--dt-text-inverse);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.btn-accent:hover {
    opacity: 0.9;
    color: var(--dt-text-inverse);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    border-radius: var(--dt-radius-lg);
}
.btn-sm { padding: 0.5rem 1rem; font-size: 0.8125rem; }
.btn-block { display: flex; width: 100%; justify-content: center; }
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Social login buttons */
.btn-google {
    background: #FFFFFF;
    color: #1A1A1A;
    border: 2px solid #E0E0E0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.btn-google:hover {
    background: #F8F8F8;
    color: #1A1A1A;
    border-color: #BDBDBD;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.btn-facebook {
    background: linear-gradient(135deg, #1877F2, #0D5BC4);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(24,119,242,0.2);
}
.btn-facebook:hover {
    background: linear-gradient(135deg, #3B8FF6, #1877F2);
    color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(24,119,242,0.3);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

.card {
    background: var(--dt-surface);
    border-radius: var(--dt-radius-lg);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    padding: 1.5rem;
    border: 1px solid var(--dt-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}
.card-header {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--dt-border);
}

/* ── Forms ────────────────────────────────────────────────────────────────── */

.form-group { margin-bottom: 1.25rem; }
.form-label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
    color: var(--dt-text);
    letter-spacing: 0.01em;
}
.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 2px solid var(--dt-border);
    border-radius: var(--dt-radius);
    font-size: 0.875rem;
    background: var(--dt-surface);
    color: var(--dt-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--dt-primary);
    box-shadow: 0 0 0 4px rgba(var(--dt-primary-rgb, 255,193,7), 0.2);
    background: var(--dt-surface);
}
.form-input:hover, .form-select:hover, .form-textarea:hover {
    border-color: var(--dt-text-muted);
}
.form-input.error {
    border-color: var(--dt-error);
    box-shadow: 0 0 0 3px rgba(244,67,54,0.12);
}
.form-error {
    color: var(--dt-error);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.form-error::before {
    content: '\26A0';
    font-size: 0.875rem;
}
.form-help {
    color: var(--dt-text-muted);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* ── Hero Section ────────────────────────────────────────────────────────── */

.hero {
    background: var(--dt-hero-gradient);
    color: var(--dt-text-inverse);
    padding: 5rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 100%);
    pointer-events: none;
    z-index: 0;
}
.hero > * {
    position: relative;
    z-index: 1;
}
.hero h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--dt-text-inverse);
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
    letter-spacing: -0.025em;
}
.hero p {
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto 2rem;
    opacity: 0.92;
    line-height: 1.7;
}

@media (min-width: 768px) {
    .hero { padding: 6rem 2rem; min-height: 440px; }
    .hero h1 { font-size: 3.5rem; }
    .hero p { font-size: 1.25rem; }
}

/* ── Container ───────────────────────────────────────────────────────────── */

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}
.container-sm { max-width: 640px; margin: 0 auto; padding: 0 1rem; }
.container-md { max-width: 960px; margin: 0 auto; padding: 0 1rem; }

/* ── Grid ────────────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

@media (max-width: 480px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.dt-footer {
    background: var(--dt-footer-bg);
    color: var(--dt-footer-text);
    padding: 3.5rem 1rem 1.5rem;
    margin-top: auto;
    position: relative;
}
.dt-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--dt-primary), var(--dt-accent), var(--dt-primary));
}
.dt-footer a {
    color: var(--dt-footer-text);
    transition: color 0.2s ease;
}
.dt-footer a:hover {
    color: var(--dt-primary);
    text-decoration: none;
}
.dt-footer a:focus-visible {
    outline: 3px solid var(--dt-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.dt-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}
.dt-footer-section h4 {
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.5rem;
}
.dt-footer-section h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--dt-primary);
    border-radius: 999px;
}
.dt-footer-section ul { list-style: none; padding: 0; margin: 0; }
.dt-footer-section li { margin-bottom: 0.5rem; }
.dt-footer-section li a {
    font-size: 0.875rem;
    opacity: 0.85;
}
.dt-footer-section li a:hover {
    opacity: 1;
}
.dt-footer-bottom {
    max-width: 1280px;
    margin: 2rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8125rem;
    opacity: 0.8;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.dt-breadcrumb {
    font-size: 0.95rem;
    color: var(--dt-text, #1A1A1A);
    margin: 0 0 1rem;
    line-height: 1.4;
}
.dt-breadcrumb a {
    color: var(--dt-primary-dark, #C28A00);
    font-weight: 600;
    text-decoration: none;
}
.dt-breadcrumb a:hover { text-decoration: underline; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.dt-pagination { display: flex; justify-content: center; margin-top: 2rem; }
.dt-pagination ul { display: inline-flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0; }
.dt-pagination li a,
.dt-pagination li span {
    display: block;
    padding: 0.5rem 0.85rem;
    font-size: 0.875rem;
    line-height: 1.2;
    color: var(--dt-text, #1A1A1A);
    background: var(--dt-surface, #fff);
    border: 1px solid var(--dt-border, #e0e0e0);
    border-left-width: 0;
    text-decoration: none;
}
.dt-pagination li:first-child a,
.dt-pagination li:first-child span { border-left-width: 1px; border-radius: 8px 0 0 8px; }
.dt-pagination li:last-child a,
.dt-pagination li:last-child span { border-radius: 0 8px 8px 0; }
.dt-pagination li a:hover { background: var(--dt-surface-alt, #f5f5f5); }
.dt-pagination .is-current { background: var(--dt-primary, #FFC107); border-color: var(--dt-primary, #FFC107); color: #1A1A1A; font-weight: 700; }
.dt-pagination .is-disabled { color: var(--dt-text-muted, #aaa); cursor: not-allowed; }
.dt-pagination .is-gap { color: var(--dt-text-muted, #999); }

/* ── Social share row ────────────────────────────────────────────────────── */
.dt-share { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0; }
.dt-share__label { font-weight: 700; font-size: 0.85rem; margin-right: 0.2rem; }
.dt-share__btn {
    font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
    padding: 0.3rem 0.7rem; border-radius: 999px; text-decoration: none;
    background: var(--dt-surface, #fff); color: var(--dt-text, #1a1a1a);
    border: 1.5px solid var(--dt-border, #e0e0e0);
}
.dt-share__btn:hover { border-color: var(--dt-primary, #FFC107); }

/* ── Flash toasts (floating, auto-dismiss) ───────────────────────────────── */
.dt-flash-toasts {
    position: fixed; top: 1rem; right: 1rem; z-index: 3000;
    display: flex; flex-direction: column; gap: 0.5rem;
    max-width: min(360px, calc(100vw - 2rem)); pointer-events: none;
}
.dt-flash-toast {
    pointer-events: auto; cursor: pointer;
    padding: 0.8rem 1rem; border-radius: 10px; font-size: 0.9rem; font-weight: 600;
    color: #fff; box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    animation: dtToastIn 0.3s ease; transition: opacity 0.3s, transform 0.3s;
}
.dt-flash-toast--success { background: #2e7d32; }
.dt-flash-toast--error   { background: #c62828; }
.dt-flash-toast.is-leaving { opacity: 0; transform: translateX(20px); }
@keyframes dtToastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* ── Full-screen map overlay ─────────────────────────────────────────────── */
.dt-map-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.88); display: flex; }
.dt-map-overlay[hidden] { display: none; }
.dt-map-overlay__host { flex: 1; width: 100%; height: 100%; }
.dt-map-overlay__host #duck-map,
.dt-map-overlay__host .duck-map-container { width: 100% !important; height: 100% !important; border-radius: 0 !important; }
.dt-map-overlay__close {
    position: absolute; top: 14px; right: 16px; z-index: 2001;
    width: 42px; height: 42px; border: 0; border-radius: 50%;
    background: #fff; color: #1A1A1A; font-size: 1.6rem; line-height: 1; cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* ── Installed-PWA (standalone) app chrome ───────────────────────────────── */
.dt-bottom-nav { display: none; }
html.is-standalone .dt-bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
    background: var(--dt-surface, #fff); border-top: 1px solid var(--dt-border, #e0e0e0);
    padding: 0.35rem 0 calc(0.35rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}
html.is-standalone .dt-bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 0.7rem; font-weight: 600; color: var(--dt-text, #1A1A1A); text-decoration: none; padding: 0.25rem 0;
}
html.is-standalone .dt-bottom-nav a span { font-size: 1.25rem; line-height: 1; }
html.is-standalone body { padding-bottom: 64px; }   /* clear the fixed bar */

/* ── Alerts / Toast ──────────────────────────────────────────────────────── */

.alert {
    padding: 0.875rem 1.25rem 0.875rem 3rem;
    border-radius: var(--dt-radius);
    margin-bottom: 1rem;
    font-size: 0.875rem;
    border: 1px solid;
    border-left-width: 4px;
    position: relative;
    line-height: 1.5;
}
.alert::before {
    position: absolute;
    left: 0.875rem;
    top: 0.875rem;
    width: 1.25rem;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.4; /* match body text so the glyph sits on the first line */
}
.alert-success {
    background: #E8F5E9;
    border-color: #4CAF50;
    color: #1B5E20;
}
.alert-success::before { content: '\2713'; }
.alert-error {
    background: #FFEBEE;
    border-color: #F44336;
    color: #B71C1C;
}
.alert-error::before { content: '\2717'; }
.alert-warning {
    background: #FFF3E0;
    border-color: #FF9800;
    color: #E65100;
}
.alert-warning::before { content: '\26A0'; }
.alert-info {
    background: #E3F2FD;
    border-color: #2196F3;
    color: #0D47A1;
}
.alert-info::before { content: '\2139'; }

/* ── Badge ───────────────────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.badge-primary { background: var(--dt-primary); color: var(--dt-text-inverse); }
.badge-success { background: var(--dt-success); color: #FFFFFF; }
.badge-warning { background: var(--dt-warning); color: #FFFFFF; }
.badge-error { background: var(--dt-error); color: #FFFFFF; }
.badge-muted { background: #E0E0E0; color: #616161; }

/* ── Duck Status Badges ──────────────────────────────────────────────────── */

.status-active { background: #4CAF50; color: #FFF; }
.status-created { background: #9E9E9E; color: #FFF; }
.status-unreleased { background: #9E9E9E; color: #FFF; } /* legacy compat */
.status-lost { background: #F44336; color: #FFF; }
.status-retired { background: #607D8B; color: #FFF; }

/* ── Tables ──────────────────────────────────────────────────────────────── */

.table-wrap {
    overflow-x: auto;
    border-radius: var(--dt-radius);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--dt-border);
}
th {
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dt-text-muted);
    background: linear-gradient(180deg, var(--dt-surface-alt), var(--dt-surface));
    position: sticky;
    top: 0;
}
tbody tr:nth-child(even) td {
    background: var(--dt-surface-alt);
}
tr:hover td {
    background: var(--dt-surface-alt);
}

/* ── Pagination ──────────────────────────────────────────────────────────── */

.pagination {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    justify-content: center;
    margin: 2rem 0;
}
.pagination a, .pagination span {
    padding: 0.5rem 0.875rem;
    border-radius: var(--dt-radius);
    font-size: 0.875rem;
    border: 1px solid var(--dt-border);
    color: var(--dt-text);
    transition: all 0.2s ease;
}
.pagination a:hover {
    background: var(--dt-surface-alt);
    text-decoration: none;
    border-color: var(--dt-primary);
}
.pagination a:focus-visible {
    outline: 3px solid var(--dt-primary);
    outline-offset: 2px;
}
.pagination .active {
    background: var(--dt-primary);
    color: var(--dt-text-inverse);
    border-color: var(--dt-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    font-weight: 600;
}
.pagination .disabled { opacity: 0.4; pointer-events: none; }

/* ── Account Dropdown ─────────────────────────────────────────────────────── */

.dt-account-dropdown { position: relative; }
.dt-account-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--dt-nav-text, #fff);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.dt-account-trigger:hover { background: rgba(255,255,255,0.18); }
.dt-account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--dt-primary, #FFD600);
    color: #1A1A1A;
    font-weight: 800;
    font-size: 0.8125rem;
    flex-shrink: 0;
}
.dt-account-avatar--duck {
    background: none;
    width: 30px;
    height: 30px;
    overflow: hidden;
}
.dt-account-avatar--duck svg { display: block; width: 30px; height: 30px; }
.dt-account-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: #FFFFFF;
    color: #1A1A1A;
    border: 1px solid #E0E0E0;
    border-radius: var(--dt-radius, 8px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.16);
    z-index: 100;
    overflow: hidden;
    padding: 0.35rem 0;
}
.dt-account-menu.open { display: block; }
/* Scoped + explicit colors so the white `.dt-nav a` rule can't bleed in. */
.dt-account-menu a {
    display: block;
    padding: 0.55rem 1rem;
    color: #1A1A1A;
    text-decoration: none;
    font-size: 0.875rem;
}
.dt-account-menu a:hover,
.dt-account-menu a:focus-visible {
    background: #F5F5F5;
    color: #1A1A1A;
    text-decoration: none;
    outline: none;
}
.dt-account-divider { height: 1px; background: #ECECEC; margin: 0.35rem 0; }
.dt-account-menu a.dt-account-logout { color: #D32F2F; font-weight: 600; }
.dt-account-menu a.dt-account-logout:hover { color: #D32F2F; background: #FFF0F0; }
@media (max-width: 768px) {
    .dt-account-menu { right: 0; max-width: calc(100vw - 1.5rem); }
}

/* ── Theme Switcher (Dropdown) ────────────────────────────────────────────── */

.dt-theme-dropdown {
    position: relative;
}
.dt-theme-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--dt-nav-text);
    padding: 5px 10px;
    border-radius: var(--dt-radius, 8px);
    cursor: pointer;
    font-size: 0.8125rem;
    transition: background 0.2s;
    line-height: 1;
}
.dt-theme-trigger:hover {
    background: rgba(255,255,255,0.16);
}
.dt-theme-trigger:focus-visible {
    outline: 3px solid var(--dt-primary);
    outline-offset: 2px;
}
.dt-theme-trigger svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}
.dt-theme-current-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
}
.dt-theme-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    /* Hard-code light surface + dark text so no theme's custom properties can
       ever render the menu invisible (e.g. light text on a light dropdown). */
    background: #FFFFFF;
    color: #1A1A1A;
    border: 1px solid #E0E0E0;
    border-radius: var(--dt-radius, 8px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    min-width: 175px;
    max-width: calc(100vw - 2rem); /* never exceed the viewport width */
    /* Above the sticky nav (z-index:50) and any nav stacking context. */
    z-index: 100;
    overflow: hidden;
}
.dt-theme-menu.open {
    display: block;
    animation: fadeIn 0.15s ease;
}
/* Scoped under .dt-theme-menu so these beat the higher-specificity
   `.dt-nav a` rule (white nav-link color) the dropdown lives inside. */
.dt-theme-menu .dt-theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 0.8125rem;
    color: #1A1A1A;
    text-decoration: none;
    transition: background 0.15s;
    border-bottom: 1px solid #E0E0E0;
}
.dt-theme-menu .dt-theme-option:last-child {
    border-bottom: none;
}
.dt-theme-menu .dt-theme-option:hover,
.dt-theme-menu .dt-theme-option:focus-visible {
    background: #F5F5F5;
    text-decoration: none;
    color: #1A1A1A;
    outline: none;
}
.dt-theme-menu .dt-theme-option.active {
    font-weight: 700;
    background: #F5F5F5;
    color: #1A1A1A;
}
.dt-theme-menu .dt-theme-option.active::after {
    content: '\2713';
    margin-left: auto;
    color: var(--dt-primary-dark, #D35400);
    font-weight: 700;
}
.dt-theme-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

/* A theme dropdown that lives in the footer opens upward (there is nothing
   below it) and aligns to the left edge of its trigger. */
.dt-footer .dt-theme-menu {
    top: auto;
    bottom: calc(100% + 8px);
    right: auto;
    left: 0;
}

/* Mobile: keep the dropdown menu inside the viewport regardless of where its
   trigger sits. Pin it near the right gutter, cap its width, and let long
   lists scroll rather than overflow the screen. The footer switcher menu
   continues to open upward. */
@media (max-width: 768px) {
    .dt-theme-menu {
        right: 0;
        left: auto;
        min-width: 0;
        width: max-content;
        max-width: calc(100vw - 1.5rem);
        max-height: 70vh;
        overflow-y: auto;
    }
    .dt-footer .dt-theme-menu {
        right: 0;
        left: auto;
        bottom: calc(100% + 8px);
        top: auto;
    }
}

/* Legacy compat — keep old classes from breaking */
.theme-switcher { display: flex; gap: 0.5rem; align-items: center; }
.theme-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; }
.theme-dot:hover { transform: scale(1.2); }
.theme-dot:focus-visible { outline: 3px solid var(--dt-primary); outline-offset: 2px; }
.theme-dot.active { border-color: #FFF; box-shadow: 0 0 0 2px var(--dt-primary); }
.theme-dot-default { background: #FFC107; }
.theme-dot-jeepers { background: #E67E22; }
.theme-dot-cruisers { background: #2980B9; }

/* ── Cookie Consent Banner ───────────────────────────────────────────────── */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--dt-nav-bg);
    color: var(--dt-nav-text);
    padding: 1.25rem 1.5rem;
    z-index: 100;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.25);
    display: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.cookie-banner.show {
    display: block;
    animation: slideInBottom 0.4s ease-out;
}
.cookie-banner-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.cookie-banner p {
    flex: 1;
    min-width: 200px;
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}
.cookie-banner .btn { flex-shrink: 0; }

/* ── Skip Nav (Accessibility) ────────────────────────────────────────────── */

.skip-nav {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--dt-primary);
    color: var(--dt-text-inverse);
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    font-weight: 700;
    border-radius: 0 0 var(--dt-radius) var(--dt-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.skip-nav:focus {
    left: 0;
}

/* Global focus-visible fallback — guarantees a visible keyboard focus
   indicator (WCAG 2.4.7) on any interactive element not given a bespoke ring
   above. Component-specific rules win via later/equal specificity, so this is
   purely a safety net (e.g. body-content links, <summary>, custom controls). */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--dt-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
/* The skip-nav has its own visible treatment; don't double up. */
.skip-nav:focus-visible {
    outline: none;
}

/* ── Section Title ──────────────────────────────────────────────────────── */

.section-title {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
    padding-bottom: 1rem;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--dt-primary), var(--dt-accent));
    border-radius: 999px;
}

/* ── Stat Card ──────────────────────────────────────────────────────────── */

.stat-card {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--dt-surface);
    border-radius: var(--dt-radius-lg);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border: 1px solid var(--dt-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
.stat-card .stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--dt-primary), var(--dt-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}
.stat-card .stat-label {
    font-size: 0.875rem;
    color: var(--dt-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Feature Card ───────────────────────────────────────────────────────── */

.feature-card {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--dt-surface);
    border-radius: var(--dt-radius-lg);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border: 1px solid var(--dt-border);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
    overflow: hidden;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
    border-color: var(--dt-primary-light);
}
.feature-card .feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dt-surface-alt);
    font-size: 1.75rem;
    transition: transform 0.25s ease, background 0.25s ease;
}
.feature-card:hover .feature-icon {
    transform: scale(1.1);
    background: var(--dt-primary-light);
}
.feature-card h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}
.feature-card p {
    color: var(--dt-text-muted);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* ── Product Card ───────────────────────────────────────────────────────── */

.product-card {
    background: var(--dt-surface);
    border-radius: var(--dt-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border: 1px solid var(--dt-border);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
.product-card .product-image {
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--dt-surface-alt);
}
.product-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.product-card:hover .product-image img {
    transform: scale(1.08);
}
.product-card .product-info {
    padding: 1.25rem;
}
.product-card .product-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.375rem;
}
.product-card .product-price {
    font-weight: 800;
    font-size: 1.125rem;
    color: var(--dt-primary-dark);
}

/* ── Timeline Item ──────────────────────────────────────────────────────── */

.timeline-item {
    position: relative;
    padding-left: 2.5rem;
    padding-bottom: 1.5rem;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: var(--dt-border);
}
.timeline-item:last-child::before {
    display: none;
}
.timeline-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--dt-primary);
    border: 3px solid var(--dt-surface);
    box-shadow: 0 0 0 2px var(--dt-primary);
}
.timeline-item .timeline-date {
    font-size: 0.75rem;
    color: var(--dt-text-muted);
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.timeline-item .timeline-content {
    background: var(--dt-surface);
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius);
    padding: 0.875rem 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* ── Animations ─────────────────────────────────────────────────────────── */

.fade-in {
    animation: fadeIn 0.6s ease-out both;
}

.slide-up {
    animation: slideUp 0.6s ease-out both;
}

/* Stagger children */
.slide-up:nth-child(1) { animation-delay: 0s; }
.slide-up:nth-child(2) { animation-delay: 0.1s; }
.slide-up:nth-child(3) { animation-delay: 0.2s; }
.slide-up:nth-child(4) { animation-delay: 0.3s; }
.slide-up:nth-child(5) { animation-delay: 0.4s; }
.slide-up:nth-child(6) { animation-delay: 0.5s; }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html {
        scroll-behavior: auto;
    }
}

/* ── Utility Classes ─────────────────────────────────────────────────────── */

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--dt-text-muted); }
.text-primary { color: var(--dt-primary-dark); }
.text-success { color: var(--dt-success); }
.text-error { color: var(--dt-error); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.5rem; }
.text-2xl { font-size: 2rem; }
.font-bold { font-weight: 700; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.py-4 { padding-top: 2rem; padding-bottom: 2rem; }
.py-5 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-6 { padding-top: 3rem; padding-bottom: 3rem; }
.hidden { display: none; }
/* Responsive helper (replaces the removed Tailwind Play CDN). `hidden sm:inline`
   hides on mobile then shows inline at ≥640px. Declared after .hidden so it wins. */
@media (min-width: 640px) { .sm\:inline { display: inline; } }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.w-full { width: 100%; }
.rounded { border-radius: var(--dt-radius); }
.rounded-lg { border-radius: var(--dt-radius-lg); }
.shadow { box-shadow: var(--dt-card-shadow); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ── Print Styles ───────────────────────────────────────────────────────── */

@media print {
    body {
        background: #FFFFFF;
        color: #000000;
    }
    .dt-nav,
    .dt-footer,
    .cookie-banner,
    .skip-nav,
    .theme-switcher,
    .btn-google,
    .btn-facebook {
        display: none !important;
    }
    .card {
        box-shadow: none;
        border: 1px solid #CCCCCC;
        break-inside: avoid;
    }
    .hero {
        background: #F5F5F5 !important;
        color: #000000 !important;
        padding: 2rem 1rem;
        min-height: auto;
    }
    .hero::before { display: none; }
    a {
        color: #000000;
        text-decoration: underline;
    }
    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        color: #666666;
    }
}