/* Responsive Styles for Tropical Birth Chart Calculator */

@media (max-width: 700px) {
  #natal-chart {
    width: 450px !important;
  }
}

@media (max-width: 550px) {
  #natal-chart {
    width: 300px !important;
  }

  .chart-details p {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  /* Add padding to calculator content only (not header/footer) */
  .chart-calculator {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Scale down form grid proportionally */
  .form {
    font-size: 18px;
    grid-template-columns: 180px 26px 1px 26px 60px 42px;
    grid-gap: 8px;
  }

  .form
    input:not(.lat-deg):not(.lat-min):not(.lat-sec):not(.long-deg):not(
      .long-min
    ):not(.long-sec):not(.custom-location-input) {
    font-size: 16px;
    height: 24px;
  }

  .form select:not(.lat-dir):not(.long-dir) {
    font-size: 16px;
  }

  /* Shorten "month" to "m" in date label */
  .date-label {
    font-size: 0;
  }

  .date-label::after {
    content: "Date (dd-m-yyyy):";
    font-size: 18px;
  }

  /* Shorten location label */
  .location-label {
    font-size: 0;
  }

  .location-label::after {
    content: "Location (city, region):";
    font-size: 18px;
  }

  /* Location suggestions box - make responsive on mobile */
  .suggestions-box {
    width: auto;
    left: 8px;
    right: 8px;
    max-width: 448px;
    transform: none;
  }
}

@media (max-width: 475px) {
  .custom-location-input::placeholder {
    opacity: 0;
  }
}

@media (max-width: 420px) {
  /* Scale down form grid even more */
  .form {
    grid-template-columns: 80px 26px 1px 26px 55px 44px;
    grid-gap: 6px;
  }

  .form
    input:not(.lat-deg):not(.lat-min):not(.lat-sec):not(.long-deg):not(
      .long-min
    ):not(.long-sec):not(.custom-location-input) {
    height: 22px;
  }

  .form select:not(.lat-dir):not(.long-dir) {
    height: 22px;
  }

  /* Make DMS inputs smaller at 420px */
  .form .lat-deg,
  .form .lat-min,
  .form .lat-sec,
  .form .long-min,
  .form .long-sec {
    width: 24px;
    font-size: 16px;
    padding: 6px 2px;
  }

  .form .long-deg {
    width: 32px;
    font-size: 16px;
    padding: 6px 2px;
  }

  .form .lat-dir,
  .form .long-dir {
    min-width: 24px;
    font-size: 12px;
    padding: 8px 2px;
  }

  .custom-location-input {
    font-size: 12px;
  }

  /* Shorten date label */
  .date-label::after {
    content: "Date:";
    font-size: 18px;
  }

  /* Shorten location label */
  .location-label::after {
    content: "Location:";
    font-size: 18px;
  }

  /* Shorten time label */
  .time-label {
    font-size: 0;
  }

  .time-label::after {
    content: "Time:";
    font-size: 18px;
  }
  .true-sky-save-button {
    font-size: 12px !important;
    padding: 4px 24px !important;
  }
}

@media (max-width: 380px) {
  #natal-chart {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}