/* =================================
   FLOATING CONTACT BUTTON
================================= */
#fgf-button {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #0077B6, #003450);
  color: #fff;
  padding: 25px 6px;
  cursor: pointer;
  z-index: 9999;
  border-radius: 0 6px 6px 0;
  font-weight: 600;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 1px;
  transition: left 0.4s ease, opacity 0.3s ease;
}

/* =================================
   SLIDE PANEL CONTAINER
================================= */
#fgf-overlay {
  position: fixed;
  top: 50%;
  left: -420px; /* hidden */
  transform: translateY(-50%);
  width: 400px;
  max-height: 90vh;
  background: #ffffff;
  box-shadow: 6px 0 20px rgba(0,0,0,0.25);
  z-index: 9998;
  transition: left 0.4s ease-in-out;
  border-radius: 0 12px 12px 0;
}

/* Panel Open */
#fgf-overlay.active {
  left: 50px;
}

/* =================================
   HIDE BUTTON WHEN PANEL OPENS
================================= */
#fgf-overlay.active + #fgf-button,
#fgf-overlay.active ~ #fgf-button {
  left: -70px;
  opacity: 0;
  pointer-events: none;
}

/* =================================
   PANEL CONTENT
================================= */
#fgf-popup {
  position: relative;
  height: 100%;
  padding: 25px;
  overflow-y: auto;
}

/* Close Icon */
#fgf-close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 26px;
  cursor: pointer;
  font-weight: bold;
  color: #000;
}

/* =================================
   GRAVITY FORM GRID
================================= */
#fgf-overlay .gform_wrapper {
  margin: 0;
}

/* Desktop – 3 Columns */
#fgf-overlay .gform_fields {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Message full width */
#fgf-overlay .gfield--type-textarea {
  grid-column: span 3;
}

/* Submit full width */
#fgf-overlay .gform_footer {
  grid-column: span 3;
  margin-top: 10px;
}

/* Inputs */
#fgf-overlay input,
#fgf-overlay textarea {
  width: 100% !important;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid #ccd6dd;
  font-size: 14px;
  outline: none;
}

/* Input Focus */
#fgf-overlay input:focus,
#fgf-overlay textarea:focus {
  border-color: #0077B6;
}

/* Submit Button */
#fgf-overlay .gform_button {
  width: 100%;
  background: #1e40ff;
  color: #fff;
  border-radius: 6px;
  padding: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

/* =================================
   TABLET (2 COLUMNS)
================================= */
@media (max-width: 991px) {
  #fgf-overlay {
    width: 360px;
  }

  #fgf-overlay .gform_fields {
    grid-template-columns: repeat(2, 1fr);
  }

  #fgf-overlay .gfield--type-textarea,
  #fgf-overlay .gform_footer {
    grid-column: span 2;
  }
}

/* =================================
   MOBILE (FULL SCREEN)
================================= */
@media (max-width: 600px) {
  #fgf-overlay {
    width: 264px;
    left: -100%;
    top: 50%;
    transform: none;
    /*height: 100vh;*/
    /*max-height: 100vh;*/
    border-radius: 0;
  }

  #fgf-overlay.active {
    left: 50px;
  }

  #fgf-overlay .gform_fields {
    grid-template-columns: 1fr;
  }

  #fgf-overlay .gfield--type-textarea,
  #fgf-overlay .gform_footer {
    grid-column: span 1;
  }

  #fgf-button {
    padding: 20px 6px;
  }
}