/* Premium Kizmio mobile navigation dock. Visual overrides only. */
.kzm-mobile-dock-spacer { display: none; }

@media (max-width: 767.98px) {
  .kizmio-theme .kzm-mobile-dock,
  .kizmiotheme .kzm-mobile-dock,
  .kzm-mobile-dock {
    --kzm-orange: #fa470d;
    --kzm-red: #ff174f;
    --kzm-pink: #ff00b8;
    --kzm-purple: #8b2cff;
    --kzm-blue: #00c8ff;
    --kzm-cyan: #00eaff;
    position: fixed;
    z-index: 999;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: 10px;
    width: auto;
    height: 82px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
  }

  .kzm-mobile-dock > .container {
    position: relative;
    isolation: isolate;
    width: min(100%, 520px);
    max-width: 520px;
    height: 82px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 30px;
    background: transparent;
    box-shadow: -18px 1px 28px rgba(250, 71, 13, .18), 0 2px 30px rgba(255, 0, 184, .15), 18px 1px 28px rgba(0, 234, 255, .18), 0 16px 30px rgba(21, 31, 58, .2);
    pointer-events: auto;
  }

  /* Wide blurred color bloom behind the sharp perimeter. */
  .kzm-mobile-dock > .container::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -7px;
    border-radius: 36px;
    background: linear-gradient(105deg, var(--kzm-orange) 0%, var(--kzm-red) 22%, var(--kzm-pink) 43%, var(--kzm-purple) 63%, var(--kzm-blue) 82%, var(--kzm-cyan) 100%);
    opacity: .34;
    filter: blur(13px);
    pointer-events: none;
  }

  /* Crisp, continuous two-pixel neon perimeter. */
  .kzm-mobile-dock > .container::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    padding: 2px;
    border-radius: 30px;
    background: linear-gradient(105deg, var(--kzm-orange) 0%, var(--kzm-red) 22%, var(--kzm-pink) 43%, var(--kzm-purple) 63%, var(--kzm-blue) 82%, var(--kzm-cyan) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: saturate(1.15) brightness(1.04);
    pointer-events: none;
  }

  .kzm-mobile-dock .footer-bottom-bar-links {
    position: absolute;
    z-index: 1;
    inset: 2px;
    display: flex;
    min-width: 0;
    height: 78px;
    align-items: stretch;
    gap: 0;
    padding: 5px 7px;
    /* Dropdown panels must be allowed to rise above the fixed dock. */
    overflow: visible;
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(244, 248, 255, .92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -2px 5px rgba(52, 67, 100, .1), 0 8px 20px rgba(30, 48, 83, .12);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }

  .kzm-mobile-dock .footer-bottom-bar-links::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 5% auto;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(ellipse at top, rgba(255, 255, 255, .95), transparent 72%);
    opacity: .7;
    pointer-events: none;
  }

  .kzm-mobile-dock .kzm-mobile-dock__item {
    --dock-item-color: var(--kzm-cyan);
    position: relative;
    z-index: 1;
    min-width: 0;
    height: 68px;
    flex: 1 1 0;
    text-align: center;
  }

  .kzm-mobile-dock .kzm-mobile-dock__item--home { --dock-item-color: var(--kzm-orange); }
  .kzm-mobile-dock .kzm-mobile-dock__item--media { --dock-item-color: var(--kzm-pink); }
  .kzm-mobile-dock .kzm-mobile-dock__item--add { --dock-item-color: var(--kzm-cyan); }
  .kzm-mobile-dock .kzm-mobile-dock__item--search { --dock-item-color: var(--kzm-purple); }
  .kzm-mobile-dock .kzm-mobile-dock__item--menu { --dock-item-color: var(--kzm-cyan); }

  .kzm-mobile-dock .kzm-mobile-dock__item:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 15px;
    right: 0;
    width: 1px;
    height: 38px;
    background: linear-gradient(180deg, transparent, rgba(82, 98, 133, .2), transparent);
    pointer-events: none;
  }

  [dir="RTL"] .kzm-mobile-dock .kzm-mobile-dock__item:not(:last-child)::after { right: auto; left: 0; }

  .kzm-mobile-dock .kzm-mobile-dock__item > a {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 7px 3px 8px;
    border: 0;
    border-radius: 20px;
    background: transparent !important;
    color: var(--dock-item-color);
    text-decoration: none;
    transition: filter .18s ease, transform .18s ease;
  }

  .kzm-mobile-dock .kzm-mobile-dock__item > a:hover,
  .kzm-mobile-dock .kzm-mobile-dock__item > a:focus,
  .kzm-mobile-dock .kzm-mobile-dock__item > a:active {
    background: transparent !important;
    color: var(--dock-item-color);
  }

  .kzm-mobile-dock .kzm-mobile-dock__item > a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--dock-item-color) 65%, white);
    outline-offset: -4px;
  }

  .kzm-mobile-dock .kzm-mobile-dock__item > a > .svg-container,
  .kzm-mobile-dock .kzm-mobile-dock__item > a > svg {
    width: 25px !important;
    height: 25px !important;
    color: currentColor !important;
    filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 42%, transparent));
  }

  .kzm-mobile-dock .kzm-mobile-dock__item > a > .svg-container svg,
  .kzm-mobile-dock .kzm-mobile-dock__item > a > svg,
  .kzm-mobile-dock .kzm-mobile-dock__item > a > i {
    fill: currentColor;
    color: currentColor;
  }

  .kzm-mobile-dock .kzm-mobile-dock__item > a > .title {
    max-width: 100%;
    overflow: hidden;
    color: #29354a;
    font-size: clamp(11px, 3.05vw, 12.5px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .01em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kzm-mobile-dock .kzm-mobile-dock__item--add > a > .svg-container {
    display: grid;
    width: 29px !important;
    height: 29px !important;
    place-items: center;
    padding: 4px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 234, 255, .42), inset 0 0 7px rgba(0, 234, 255, .12);
  }

  .kzm-mobile-dock .kzm-mobile-dock__item--add > a > .svg-container svg { width: 100% !important; height: 100% !important; }

  .kzm-mobile-dock .kzm-mobile-dock__item--menu > a > img {
    width: 29px;
    height: 29px;
    margin: 0;
    border: 2px solid var(--kzm-cyan);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(0, 234, 255, .14), 0 0 11px rgba(0, 234, 255, .56);
  }

  .kzm-mobile-dock .kzm-mobile-dock__item.active > a,
  .kzm-mobile-dock .kzm-mobile-dock__item:has(> a.show) > a {
    color: var(--kzm-orange);
    filter: drop-shadow(0 0 7px rgba(250, 71, 13, .52));
  }

  .kzm-mobile-dock .kzm-mobile-dock__item.active > a::before,
  .kzm-mobile-dock .kzm-mobile-dock__item:has(> a.show) > a::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 7px 9% 4px;
    border-radius: 18px;
    background: radial-gradient(ellipse at 50% 58%, rgba(250, 71, 13, .18), transparent 72%);
    pointer-events: none;
  }

  .kzm-mobile-dock .kzm-mobile-dock__item.active > a > .title,
  .kzm-mobile-dock .kzm-mobile-dock__item:has(> a.show) > a > .title { color: var(--kzm-orange); font-weight: 800; }

  .kzm-mobile-dock .kzm-mobile-dock__item.active > a::after,
  .kzm-mobile-dock .kzm-mobile-dock__item:has(> a.show) > a::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 50%;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--kzm-orange), #ff7043);
    box-shadow: 0 0 5px rgba(250, 71, 13, .95), 0 0 13px rgba(255, 23, 79, .68);
    transform: translateX(-50%);
  }

  .kzm-mobile-dock .dropdown-widget {
    z-index: 1005;
    margin-bottom: 12px !important;
    border: 1px solid rgba(139, 44, 255, .42);
    border-radius: 20px;
    box-shadow: 0 -12px 36px rgba(29, 38, 70, .22), 0 0 17px rgba(139, 44, 255, .2);
  }

  .kzm-mobile-dock .badge,
  .kzm-mobile-dock [class*="badge"] { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 9px rgba(255, 0, 184, .5); }

  .kzm-mobile-dock-spacer { display: block; width: 100%; height: calc(104px + env(safe-area-inset-bottom, 0px)); }

  body.night-mode .kzm-mobile-dock > .container,
  html[data-bs-theme="dark"] .kzm-mobile-dock > .container {
    box-shadow: -20px 1px 34px rgba(250, 71, 13, .38), 0 2px 38px rgba(255, 0, 184, .3), 20px 1px 34px rgba(0, 234, 255, .38), 0 17px 34px rgba(0, 0, 0, .68);
  }

  body.night-mode .kzm-mobile-dock > .container::before,
  html[data-bs-theme="dark"] .kzm-mobile-dock > .container::before {
    filter: saturate(1.3) brightness(1.2) drop-shadow(-5px 0 5px rgba(250, 71, 13, .58)) drop-shadow(5px 0 5px rgba(0, 234, 255, .58));
  }

  body.night-mode .kzm-mobile-dock > .container::after,
  html[data-bs-theme="dark"] .kzm-mobile-dock > .container::after { opacity: .7; filter: blur(15px) saturate(1.25); }

  body.night-mode .kzm-mobile-dock .footer-bottom-bar-links,
  html[data-bs-theme="dark"] .kzm-mobile-dock .footer-bottom-bar-links {
    background: linear-gradient(145deg, rgba(5, 12, 28, .94), rgba(4, 10, 24, .92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -3px 8px rgba(0, 0, 0, .62), 0 10px 25px rgba(0, 0, 0, .4);
  }

  body.night-mode .kzm-mobile-dock .footer-bottom-bar-links::before,
  html[data-bs-theme="dark"] .kzm-mobile-dock .footer-bottom-bar-links::before {
    background: radial-gradient(ellipse at top, rgba(144, 184, 255, .2), transparent 72%);
    opacity: .8;
  }

  body.night-mode .kzm-mobile-dock .kzm-mobile-dock__item:not(:last-child)::after,
  html[data-bs-theme="dark"] .kzm-mobile-dock .kzm-mobile-dock__item:not(:last-child)::after {
    background: linear-gradient(180deg, transparent, rgba(128, 162, 218, .25), transparent);
  }

  body.night-mode .kzm-mobile-dock .kzm-mobile-dock__item > a > .title,
  html[data-bs-theme="dark"] .kzm-mobile-dock .kzm-mobile-dock__item > a > .title { color: #dbe6f8; }

  body.night-mode .kzm-mobile-dock .kzm-mobile-dock__item.active > a > .title,
  body.night-mode .kzm-mobile-dock .kzm-mobile-dock__item:has(> a.show) > a > .title,
  html[data-bs-theme="dark"] .kzm-mobile-dock .kzm-mobile-dock__item.active > a > .title,
  html[data-bs-theme="dark"] .kzm-mobile-dock .kzm-mobile-dock__item:has(> a.show) > a > .title { color: #ff7447; }

  body.night-mode .kzm-mobile-dock .dropdown-widget,
  html[data-bs-theme="dark"] .kzm-mobile-dock .dropdown-widget {
    border-color: rgba(0, 200, 255, .42);
    background: #081225;
    box-shadow: 0 -16px 40px rgba(0, 0, 0, .72), 0 0 20px rgba(0, 200, 255, .26);
  }
}

@media (max-width: 340px) {
  .kzm-mobile-dock { right: 6px; left: 6px; }
  .kzm-mobile-dock .footer-bottom-bar-links { padding-right: 3px; padding-left: 3px; }
  .kzm-mobile-dock .kzm-mobile-dock__item > a { padding-right: 1px; padding-left: 1px; }
  .kzm-mobile-dock .kzm-mobile-dock__item > a > .title { font-size: 11px; }
}

@media (min-width: 768px) {
  .kzm-mobile-dock,
  .kzm-mobile-dock-spacer { display: none !important; }
}