/* =========================
   Floating Bottom Navigation
========================= */

.pd-bottom-nav {
    position: fixed;
    z-index: 30;

    left: 50%;
    bottom: calc(
    var(--petdori-nav-gap) +
    var(--petdori-safe-bottom)
);
    transform: translateX(-50%);

    width: calc(100% - 32px);
    max-width: calc(var(--petdori-max-width, 480px) - 32px);

    height: var(--petdori-nav-height);
    padding: 5px;

    display: flex;
    align-items: stretch;

    border: 1px solid rgba(220, 225, 233, 0.9);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 4px 20px rgba(20, 30, 50, 0.09);

    box-sizing: border-box;
}

/* =========================
   Navigation Items
========================= */

.pd-bottom-nav a {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 44px;

    gap: 4px;

    border-radius: 999px;

    color: var(--petdori-text-sub);
    font-size: var(--petdori-font-xs);
    font-weight: 500;
    text-decoration: none;

    -webkit-tap-highlight-color: transparent;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

/* =========================
   Active Item
========================= */

.pd-bottom-nav a[aria-current="page"] {
    background: #eef1f5;
    color: var(--petdori-primary);
    font-weight: 700;
}

.pd-bottom-nav a[aria-current="page"] svg {
    stroke-width: 2.3;
}

/* =========================
   Navigation Icons
========================= */

.pd-bottom-nav a svg {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* =========================
   Desktop Hover
========================= */

@media (hover: hover) {
    .pd-bottom-nav a:not([aria-current="page"]):hover {
        background: rgba(240, 243, 247, 0.85);
    }
}

/* =========================
   Reduced Motion
========================= */

@media (prefers-reduced-motion: reduce) {
    .pd-bottom-nav a {
        transition: none;
    }
}
/* =========================
   Dark Mode
========================= */

html[data-theme="dark"] .pd-bottom-nav {
    background: rgba(28, 34, 39, 0.97);
    border-color: var(--petdori-border);

    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"]
.pd-bottom-nav a[aria-current="page"] {
    background: #30413F;
    color: var(--petdori-primary);
}