.callback-container {
      position: fixed;
      bottom: -20px;
      right: -90px;
      z-index: 1000;
      transition: transform 1s ease;
      transform: translate(0, 0);
    }

    .cloud-button {
      width: 300px;
      height: 240px;
      background: none;
      border: none;
      cursor: pointer;
      transform-origin: center center;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 1s ease;
    }

    .cloud-button svg {
      width: 100%;
      height: 100%;
      transition: opacity 0.6s ease;
    }

    .cloud-button svg g.cloud ellipse:nth-child(1) { animation: puff1 3s ease-in-out infinite; }
    .cloud-button svg g.cloud ellipse:nth-child(2) { animation: puff2 4s ease-in-out infinite; }
    .cloud-button svg g.cloud ellipse:nth-child(3) { animation: puff3 3.5s ease-in-out infinite; }
    .cloud-button svg g.cloud ellipse:nth-child(4) { animation: puff4 2.8s ease-in-out infinite; }
    .cloud-button svg g.cloud ellipse:nth-child(5) { animation: puff5 3.2s ease-in-out infinite; }
    .cloud-button svg g.cloud ellipse:nth-child(6) { animation: puff6 3.4s ease-in-out infinite; }
    .cloud-button svg g.cloud ellipse:nth-child(7) { animation: puff7 3.6s ease-in-out infinite; }

    @keyframes puff1 { 0%, 100% { rx: 28; ry: 18; } 50% { rx: 32; ry: 20; } }
    @keyframes puff2 { 0%, 100% { rx: 28; ry: 12; } 50% { rx: 21; ry: 24; } }
    @keyframes puff3 { 0%, 100% { rx: 25; ry: 10; } 50% { rx: 19; ry: 22; } }
    @keyframes puff4 { 0%, 100% { rx: 23; ry: 8; } 50% { rx: 16; ry: 20; } }
    @keyframes puff5 { 0%, 100% { rx: 27; ry: 11; } 50% { rx: 20; ry: 23; } }
    @keyframes puff6 { 0%, 100% { rx: 24; ry: 15; } 50% { rx: 18; ry: 21; } }
    @keyframes puff7 { 0%, 100% { rx: 32; ry: 38; } 50% { rx: 36; ry: 30; } }

    .callback-container.expanded .cloud-button {
      transform: rotate(135deg) scale(3);
    }

    .cloud-to-center {
      transform: translate(calc(-50vw + 90px), calc(-50vh + 90px)) scale(3) !important;
    }

    .callback-container.expanded .cloud-icon,
    .cloud-to-center .cloud-icon {
      opacity: 0;
    }

    .callback-options {
      opacity: 0;
      transition: opacity 0.6s ease;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
      position: absolute;
      top: 30px;
      right: 100px;
      pointer-events: none;
    }

    .callback-container.expanded .callback-options {
      opacity: 1;
      pointer-events: auto;
    }

    .option-wrapper {
      display: flex;
      align-items: center;
      cursor: pointer;
      text-decoration: none;
    }

    .option-circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: white;
      background: currentColor;
    }

    .phone { color: #c23ad1; }
    .whatsapp { color: #25D366; }
    .telegram { color: #0088cc; }

    .option-label {
      margin-left: 12px;
      background: white;
      border-radius: 20px;
      padding: 6px 12px;
      font-size: 13px;
      color: #333;
      white-space: nowrap;
    }

    .overlay-dark {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 999;
    }

    .overlay-dark.active {
      opacity: 1;
    }

    .callback-form {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.8);
      opacity: 0;
      background: #f6bfb6;
      border-radius: 16px;
      padding: 20px;
      width: 90%;
      max-width: 400px;
      transition: opacity 0.8s ease, transform 0.8s ease;
      z-index: 1001;
    }

    .callback-form.active {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .callback-form input[type="tel"] {
      width: calc(100%);
      padding: 12px 16px;
      border: none;
      border-radius: 10px;
      font-size: 16px;
      margin-bottom: 10px;
    }

    .callback-form button {
      padding: 10px 20px;
      font-size: 16px;
      background: #33a507;
      border: none;
      color: white;
      border-radius: 8px;
      cursor: pointer;
    }

    .cloud-icon {
    opacity: 1;
    transition: opacity 0.6s ease;
}

.overlay-dark {
  pointer-events: none;
}

.overlay-dark.active {
  pointer-events: auto;
}

.callback-form {
  pointer-events: none;
}

.callback-form.active {
  pointer-events: auto;
}