/*
 * Wesslink premium mobile contact dock
 * Production-only compatibility layer added after the 2026-08-11 rollback audit.
 * It deliberately does not alter desktop presentation or page content.
 */

@media (max-width: 760px) {
  html {
    scroll-padding-bottom: 112px;
  }

  body {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-dock {
    position: fixed !important;
    z-index: 2147483000 !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(9px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    width: min(calc(100% - 16px), 430px) !important;
    min-height: 82px !important;
    margin: 0 !important;
    padding: 5px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    overflow: hidden !important;
    border: 1px solid rgba(190, 255, 28, 0.5) !important;
    border-radius: 21px !important;
    background:
      linear-gradient(118deg, rgba(21, 28, 23, 0.97), rgba(3, 7, 5, 0.98)) !important;
    box-shadow:
      0 20px 45px rgba(0, 0, 0, 0.48),
      0 0 0 1px rgba(255, 255, 255, 0.035) inset,
      0 0 34px rgba(174, 244, 32, 0.1) !important;
    -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
    backdrop-filter: blur(20px) saturate(130%) !important;
  }

  .mobile-dock::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(100deg, transparent 0 39%, rgba(184, 255, 27, 0.08) 48%, transparent 57%),
      radial-gradient(circle at 50% 0, rgba(190, 255, 26, 0.12), transparent 44%);
  }

  .mobile-dock a {
    position: relative !important;
    z-index: 1 !important;
    min-width: 0 !important;
    min-height: 70px !important;
    padding: 10px 7px 9px !important;
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 7px !important;
    align-content: center !important;
    align-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 16px !important;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)) !important;
    color: #f7f8f4 !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease !important;
  }

  .mobile-dock a:active {
    transform: scale(0.975) !important;
  }

  .mobile-dock a:nth-child(2) {
    border-color: rgba(202, 255, 70, 0.92) !important;
    background: linear-gradient(135deg, #c8ff35 0%, #91d500 100%) !important;
    color: #071006 !important;
    box-shadow:
      0 9px 23px rgba(160, 224, 0, 0.24),
      0 1px 0 rgba(255, 255, 255, 0.42) inset !important;
  }

  .mobile-dock .dock-icon {
    grid-row: 1 / 3 !important;
    width: 26px !important;
    height: 26px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid currentColor !important;
    border-radius: 50% !important;
    color: #bdff22 !important;
    font-size: 0 !important;
    opacity: 0.96 !important;
  }

  .mobile-dock a:nth-child(2) .dock-icon {
    color: #071006 !important;
    background: rgba(7, 16, 6, 0.06) !important;
  }

  .mobile-dock .dock-icon::before {
    content: "";
    width: 13px;
    height: 13px;
    display: block;
    background: currentColor;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
  }

  .mobile-dock a:nth-child(1) .dock-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8a15.5 15.5 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1v3.8c0 .6-.4 1-1 1A17.3 17.3 0 0 1 3 4c0-.6.4-1 1-1h3.8c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8a15.5 15.5 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1v3.8c0 .6-.4 1-1 1A17.3 17.3 0 0 1 3 4c0-.6.4-1 1-1h3.8c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1z'/%3E%3C/svg%3E");
  }

  .mobile-dock a:nth-child(2) .dock-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a9.8 9.8 0 0 0-8.4 14.9L2 22l5.3-1.5A10 10 0 1 0 12 2zm5.8 14.1c-.2.7-1.3 1.3-1.8 1.4-.5.1-1.1.2-1.8 0-.4-.1-1-.3-1.7-.6-3-1.3-5-4.3-5.1-4.5-.1-.2-1.2-1.6-1.2-3.1 0-1.5.8-2.2 1.1-2.5.3-.3.7-.4 1-.4h.7c.2 0 .5-.1.7.5.2.6.8 2.1.9 2.2.1.2.1.4 0 .6l-.4.6-.6.6c-.2.2-.4.4-.2.8.2.4.8 1.3 1.8 2.1 1.2 1.1 2.2 1.4 2.6 1.6.4.2.6.2.8-.1l1.1-1.3c.3-.3.5-.3.9-.2.4.1 2.3 1.1 2.7 1.3.4.2.6.3.7.5.1.1.1.7-.1 1.4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a9.8 9.8 0 0 0-8.4 14.9L2 22l5.3-1.5A10 10 0 1 0 12 2zm5.8 14.1c-.2.7-1.3 1.3-1.8 1.4-.5.1-1.1.2-1.8 0-.4-.1-1-.3-1.7-.6-3-1.3-5-4.3-5.1-4.5-.1-.2-1.2-1.6-1.2-3.1 0-1.5.8-2.2 1.1-2.5.3-.3.7-.4 1-.4h.7c.2 0 .5-.1.7.5.2.6.8 2.1.9 2.2.1.2.1.4 0 .6l-.4.6-.6.6c-.2.2-.4.4-.2.8.2.4.8 1.3 1.8 2.1 1.2 1.1 2.2 1.4 2.6 1.6.4.2.6.2.8-.1l1.1-1.3c.3-.3.5-.3.9-.2.4.1 2.3 1.1 2.7 1.3.4.2.6.3.7.5.1.1.1.7-.1 1.4z'/%3E%3C/svg%3E");
  }

  .mobile-dock a:nth-child(3) .dock-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h16a2 2 0 0 0 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h16a2 2 0 0 0 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");
  }

  .mobile-dock strong {
    align-self: end !important;
    min-width: 0 !important;
    color: inherit !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: clamp(8.8px, 2.6vw, 10.5px) !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0.075em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  /* Keep the longest label fully readable on narrow phones. */
  .mobile-dock a:nth-child(2) strong {
    font-size: clamp(8.3px, 2.35vw, 9.6px) !important;
    letter-spacing: 0.035em !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .mobile-dock a::after {
    align-self: start !important;
    min-width: 0 !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    color: rgba(247, 248, 244, 0.6) !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: clamp(7px, 2.05vw, 8.3px) !important;
    font-weight: 520 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-overflow: ellipsis !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  .mobile-dock a:nth-child(1)::after {
    content: "072 271 7111";
  }

  .mobile-dock a:nth-child(2)::after {
    content: "Message instantly";
    color: rgba(7, 16, 6, 0.72) !important;
  }

  .mobile-dock a:nth-child(3)::after {
    content: "Bookings inbox";
  }
}

@media (max-width: 350px) {
  .mobile-dock {
    width: calc(100% - 10px) !important;
  }

  .mobile-dock a {
    grid-template-columns: 23px minmax(0, 1fr) !important;
    column-gap: 5px !important;
    padding-inline: 5px !important;
  }

  .mobile-dock .dock-icon {
    width: 23px !important;
    height: 23px !important;
  }
}