/* ============================================
   PREMIUM FLOATING CONTACT WIDGET
   Luxury Glassmorphism Design
   ============================================ */

    :root {
      /* Luxury Color Palette */
      --emerald: #25D366;
      --emerald-deep: #128C7E;
      --royal-blue: #2563EB;
      --royal-blue-deep: #1E40AF;
      --charcoal: #111827;
      --charcoal-soft: #1F2937;
      --glass-white: rgba(255, 255, 255, 0.72);
      --glass-white-strong: rgba(255, 255, 255, 0.9);
      --glass-border: rgba(255, 255, 255, 0.35);
      --shadow-soft: 0 10px 40px rgba(17, 24, 39, 0.12);
      --shadow-luxury: 0 20px 60px rgba(37, 99, 235, 0.25), 0 8px 24px rgba(37, 211, 102, 0.18);
      --shadow-glow: 0 0 40px rgba(37, 99, 235, 0.4);
      --gradient-luxury: linear-gradient(135deg, #2563EB 0%, #25D366 100%);
      --gradient-subtle: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(37, 211, 102, 0.08));
      --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Dark mode variables */
    @media (prefers-color-scheme: dark) {
      :root {
        --glass-white: rgba(31, 41, 55, 0.72);
        --glass-white-strong: rgba(31, 41, 55, 0.92);
        --glass-border: rgba(255, 255, 255, 0.12);
        --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.5);
        --shadow-luxury: 0 20px 60px rgba(37, 99, 235, 0.35), 0 8px 24px rgba(37, 211, 102, 0.22);
        --gradient-subtle: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(37, 211, 102, 0.15));
      }
    }

    /* ============================================
   WIDGET CONTAINER
   Mobile-first: VERTICAL layout (default)
   ============================================ */
    .contact-widget {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 14px;
      background: var(--glass-white);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border: 1px solid var(--glass-border);
      border-radius: 32px;
      box-shadow: var(--shadow-soft);
      opacity: 0;
      transform: translateY(60px) scale(0.8);
      transition:
        transform 0.6s var(--ease-luxury),
        opacity 0.6s var(--ease-luxury),
        box-shadow 0.5s var(--ease-luxury),
        padding 0.5s var(--ease-luxury),
        gap 0.5s var(--ease-luxury),
        bottom 0.5s var(--ease-luxury),
        right 0.5s var(--ease-luxury),
        border-radius 0.5s var(--ease-luxury);
      will-change: transform, opacity;
    }

    /* Desktop: HORIZONTAL layout */
    @media (min-width: 768px) {
      .contact-widget {
        flex-direction: row;
        bottom: 120px;
        right: 28px;
        gap: 14px;
        padding: 14px 18px;
        border-radius: 999px;
      }
    }

    /* Large desktop */
    @media (min-width: 1200px) {
      .contact-widget {
        gap: 16px;
        padding: 10px 15px;
      }
    }

    /* Entrance animation */
    .contact-widget.loaded {
      animation: bounceIn 1.1s var(--ease-bounce) forwards;
    }

    @keyframes bounceIn {
      0% {
        opacity: 0;
        transform: translateY(80px) scale(0.6);
      }

      60% {
        opacity: 1;
        transform: translateY(-10px) scale(1.05);
      }

      80% {
        transform: translateY(4px) scale(0.98);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* Floating animation (continuous subtle float) */
    .contact-widget.loaded:not(.hidden):not(:hover) {
      animation:
        bounceIn 1.1s var(--ease-bounce) forwards,
        floatY 4s ease-in-out 1.2s infinite;
    }

    @keyframes floatY {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-6px);
      }
    }

    /* Ambient glow behind widget */
    .contact-widget::before {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: inherit;
      background: var(--gradient-luxury);
      opacity: 0;
      filter: blur(18px);
      z-index: -1;
      transition: opacity 0.6s var(--ease-luxury);
      pointer-events: none;
    }

    .contact-widget:hover::before {
      opacity: 0.35;
    }

    /* Pulse ring animation */
    .contact-widget::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      border: 2px solid var(--royal-blue);
      opacity: 0;
      pointer-events: none;
    }

    .contact-widget.pulse::after {
      animation: pulseRing 2.2s var(--ease-smooth);
    }

    @keyframes pulseRing {
      0% {
        opacity: 0.6;
        transform: scale(1);
      }

      100% {
        opacity: 0;
        transform: scale(1.35);
      }
    }

    /* Hover expand effect - vertical (mobile) */
    .contact-widget:hover {
      padding: 16px;
      gap: 14px;
      box-shadow: var(--shadow-luxury);
      transform: translateY(-4px) scale(1.04);
    }

    /* Hover expand effect - horizontal (desktop) */
    @media (min-width: 768px) {
      .contact-widget:hover {
        padding: 14px 22px;
        gap: 18px;
      }
    }

    /* Hidden state (scroll down) */
    .contact-widget.hidden {
      transform: translateY(140%) scale(0.9);
      opacity: 0;
      pointer-events: none;
    }

    /* ============================================
   ICON BUTTONS
   ============================================ */
    .widget-btn {
      position: relative;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #fff;
      outline: none;
      overflow: hidden;
      transition:
        transform 0.5s var(--ease-luxury),
        box-shadow 0.5s var(--ease-luxury),
        background 0.4s var(--ease-smooth);
      will-change: transform;
      -webkit-tap-highlight-color: transparent;
    }

    /* Desktop button sizing */
    @media (min-width: 768px) {
      .widget-btn {
        width: 40px;
        height: 40px;
        font-size: 22px;
      }
    }

    /* Large desktop */
    @media (min-width: 1200px) {
      .widget-btn {
        width: 40px;
        height: 40px;
        font-size: 23px;
      }
    }

    /* Phone button gradient */
    .widget-btn.phone {
      background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%);
      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    /* WhatsApp button gradient */
    .widget-btn.whatsapp {
      background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
      box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    /* Neumorphic hover */
    .widget-btn:hover {
      transform: translateY(-3px) scale(1.1) rotate(12deg);
    }

    .widget-btn.phone:hover {
      box-shadow: 0 14px 32px rgba(37, 99, 235, 0.55), 0 0 24px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .widget-btn.whatsapp:hover {
      box-shadow: 0 14px 32px rgba(37, 211, 102, 0.55), 0 0 24px rgba(37, 211, 102, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    /* Click animation */
    .widget-btn:active {
      transform: translateY(0) scale(0.92) rotate(12deg);
      transition: transform 0.1s var(--ease-smooth);
    }

    /* Focus state (accessibility) */
    .widget-btn:focus-visible {
      outline: 3px solid #fff;
      outline-offset: 3px;
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.5), 0 14px 32px rgba(37, 99, 235, 0.55);
    }

    /* Ripple effect */
    .ripple {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.55);
      transform: scale(0);
      animation: rippleAnim 0.7s var(--ease-smooth);
      pointer-events: none;
    }

    @keyframes rippleAnim {
      to {
        transform: scale(4);
        opacity: 0;
      }
    }

    /* Icon shimmer */
    .widget-btn i {
      position: relative;
      z-index: 2;
      transition: transform 0.5s var(--ease-luxury);
    }

    .widget-btn:hover i {
      transform: rotate(-12deg);
    }

    /* ============================================
   NOTIFICATION BADGE
   ============================================ */
    .badge {
      position: absolute;
      top: -4px;
      right: -4px;
      min-width: 22px;
      height: 22px;
      padding: 0 6px;
      background: linear-gradient(135deg, #ef4444, #b91c1c);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #fff;
      box-shadow: 0 4px 10px rgba(239, 68, 68, 0.5);
      z-index: 3;
      animation: badgePulse 2s ease-in-out infinite;
    }

    @keyframes badgePulse {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.08);
      }
    }

    /* ============================================
   TOOLTIPS
   ============================================ */
    .tooltip {
      position: absolute;
      padding: 10px 16px;
      background: var(--glass-white-strong);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid var(--glass-border);
      border-radius: 12px;
      color: var(--charcoal);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.01em;
      white-space: nowrap;
      box-shadow: var(--shadow-soft);
      opacity: 0;
      pointer-events: none;
      transition:
        opacity 0.4s var(--ease-luxury),
        transform 0.4s var(--ease-luxury);
    }

    /* Tooltip positioning - Mobile (vertical layout): appears to the LEFT */
    .tooltip {
      right: calc(100% + 16px);
      top: 50%;
      transform: translateY(-50%) translateX(8px);
    }

    .tooltip::after {
      content: '';
      position: absolute;
      top: 50%;
      right: -6px;
      transform: translateY(-50%) rotate(45deg);
      width: 10px;
      height: 10px;
      background: var(--glass-white-strong);
      border-right: 1px solid var(--glass-border);
      border-top: 1px solid var(--glass-border);
    }

    .widget-btn:hover .tooltip,
    .widget-btn:focus-visible .tooltip {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }

    /* Tooltip positioning - Desktop (horizontal layout): appears ABOVE */
    @media (min-width: 768px) {
      .tooltip {
        right: auto;
        top: auto;
        bottom: calc(100% + 16px);
        left: 50%;
        transform: translateX(-50%) translateY(8px);
      }

      .tooltip::after {
        top: auto;
        right: auto;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        border-right: 1px solid var(--glass-border);
        border-top: none;
        border-bottom: 1px solid var(--glass-border);
      }

      .widget-btn:hover .tooltip,
      .widget-btn:focus-visible .tooltip {
        transform: translateX(-50%) translateY(0);
      }
    }

    /* ============================================
   RESPONSIVE - SMALL MOBILE
   ============================================ */
    @media (max-width: 380px) {
      .contact-widget {
        bottom: 110px;
        right: 20px;
        padding: 10px;
        gap: 10px;
        border-radius: 28px;
      }

      .widget-btn {
        width: 48px;
        height: 48px;
        font-size: 18px;
      }

      .contact-widget:hover {
        padding: 12px;
        gap: 12px;
      }

      .tooltip {
        display: none;
      }
    }

    /* Very small screens */
    @media (max-width: 320px) {
      .contact-widget {
        bottom: 12px;
        right: 12px;
        padding: 8px;
        gap: 8px;
      }

      .widget-btn {
        width: 44px;
        height: 44px;
        font-size: 17px;
      }
    }

    /* Landscape mobile */
    @media (max-height: 500px) and (orientation: landscape) {
      .contact-widget {
        bottom: 12px;
        right: 12px;
        padding: 8px;
        gap: 8px;
      }

      .widget-btn {
        width: 44px;
        height: 44px;
        font-size: 17px;
      }
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {

      .contact-widget,
      .contact-widget::after,
      .widget-btn,
      .badge {
        animation: none !important;
        transition: opacity 0.3s linear !important;
      }
    }

    .my-products__gallery-main-wrap,
    .my-products__gallery-main-wrap:hover {
      transform: none !important;
      transition: none !important;
    }

    .my-products__gallery-image,
    .my-products__gallery-image:hover {
      transform: none !important;
    }