/* SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 56 / 64 / 80 / 96 / 112 / 128 / 144 / 160 / 192 / 224 / 256 / 288 / 320 / 384 / 448 / 512

/* FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 28 / 32 / 36 / 40 / 48 / 56 / 64 / 72 / 80 / 96 / 112 / 128 / 144
*/

html {
  font-family: "Segoe UI", sans-serif;
  color: #222;
}

/* Global dropdown menu styling and Firefox dropdown fix */
select {
  color: #2c3d4f;
  background-color: white;
  border: 1px solid #2c3d4f;
  border-radius: 2px;
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background: white;
  margin: 0;
}

/* ----- Birth Details ----- */
.chart-details {
  padding: 0;
  margin: 16px auto 0;
  max-width: 80vmin;
  text-align: left;
  line-height: 1.4;
}

.chart-details p {
  font-family: "OpenSans", sans-serif;
  margin: 0;
  padding: 0;
  font-size: 18px;
  color: #111;
}

.chart-details strong {
  font-weight: 600;
}

/* ----- Wheel Size ----- */
@media screen {
  #natal-chart {
    width: 80vmin;
    max-width: 90vw;
    display: flex;
    margin: -8px auto auto;
  }
}

/* ----- Forms ----- */
.form {
  font-size: 20px;
  display: grid;
  justify-content: center;
  grid-template-rows: auto auto auto auto auto auto auto;
  grid-template-columns: 280px 28px 1px 28px 72px 48px;
  row-gap: 4px;
  column-gap: 8px;
  margin-top: 8px;
}

.form-title {
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  grid-column: 1 / 7;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 4px;
}

.form input {
  font-family: "Segoe UI", sans-serif;
  font-size: 18px;
  color: #2c3d4f;
  padding: 0 2px;
  box-sizing: border-box;
}

.form .name-label {
  grid-column: 1 / 2;
}

.name {
  grid-column: 2 / 7;
}

.date-label {
  grid-column: 1 / 2;
}

.day {
  grid-column: 2 / 3;
}

.month {
  grid-column: 3 / 6;
  font-family: "Segoe UI", sans-serif;
  font-size: 18px;
  color: #2c3d4f;
}

.year {
  grid-column: 6 / 7;
}

.time-label {
  grid-column: 1 / 2;
}

.hour {
  grid-column: 2 / 3;
}

.semicolon {
  grid-column: 3 / 4;
  justify-self: center;
  margin-top: -2px;
}

.minute {
  grid-column: 4 / 5;
}

.time-format {
  font-size: 14px;
  margin-top: 4px;
  grid-column: 5 / 7;
}

.location-label {
  grid-column: 1 / 2;
}

.location {
  grid-column: 2 / 7;
}

.calculate {
  margin-top: 8px;
  font-family: "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: normal;
  color: #2c3d4f;
  grid-column: 1 / 7;
  cursor: pointer;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: radial-gradient(
      circle at 0% 0%,
      var(--calc-color-left-008, rgba(225, 89, 71, 0.08)) 0%,
      var(--calc-color-left-005, rgba(225, 89, 71, 0.05)) 40%,
      var(--calc-color-left-002, rgba(225, 89, 71, 0.02)) 60%,
      transparent 100%
    ),
    radial-gradient(
      circle at 100% 0%,
      var(--calc-color-right-008, rgba(213, 143, 59, 0.08)) 0%,
      var(--calc-color-right-005, rgba(213, 143, 59, 0.05)) 40%,
      var(--calc-color-right-002, rgba(213, 143, 59, 0.02)) 60%,
      transparent 100%
    ),
    #fbfdff;
  transition: background-color 0.2s, box-shadow 0.1s ease, transform 0.1s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.calculate:hover {
  background: radial-gradient(
      circle at 0% 0%,
      var(--calc-hover-left-008, rgba(225, 89, 71, 0.08)) 0%,
      var(--calc-hover-left-005, rgba(225, 89, 71, 0.05)) 40%,
      var(--calc-hover-left-003, rgba(225, 89, 71, 0.03)) 60%,
      transparent 100%
    ),
    radial-gradient(
      circle at 100% 0%,
      var(--calc-hover-right-008, rgba(213, 143, 59, 0.08)) 0%,
      var(--calc-hover-right-005, rgba(213, 143, 59, 0.05)) 40%,
      var(--calc-hover-right-003, rgba(213, 143, 59, 0.03)) 60%,
      transparent 100%
    ),
    #fbfdff;
}

.errorMessage {
  margin-bottom: -8px;
  color: red;
  text-align: center;
  grid-column: 1 / 7;
  margin-top: 0px;
  min-height: 28px;
}

/* Location suggestion box */
.suggestions-box {
  position: absolute;
  background-color: white;
  border: 2px solid #2c3d4f;
  max-height: 160px;
  overflow-y: auto;
  width: 448px;
  display: none;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 12px;
}

.suggestion-item {
  font-family: "Segoe UI", sans-serif;
  font-size: 18px;
  color: #2c3d4f;
  padding: 2px;
  cursor: pointer;
}

.suggestion-item:hover {
  background: radial-gradient(
      circle at 0% 0%,
      var(--hover-color-left-008, rgba(225, 89, 71, 0.07)) 0%,
      var(--hover-color-left-005, rgba(225, 89, 71, 0.05)) 40%,
      var(--hover-color-left-002, rgba(225, 89, 71, 0.025)) 60%,
      transparent 100%
    ),
    radial-gradient(
      circle at 100% 0%,
      var(--hover-color-right-008, rgba(213, 143, 59, 0.07)) 0%,
      var(--hover-color-right-005, rgba(213, 143, 59, 0.05)) 40%,
      var(--hover-color-right-002, rgba(213, 143, 59, 0.025)) 60%,
      transparent 100%
    ),
    #ffffff !important;
  position: relative;
  overflow: hidden;
}

.lat-long-container {
  display: flex;
  align-items: center;
  gap: 1px;
  margin: 4px 4px;
}

.lat-long-container input {
  font-family: "Segoe UI", sans-serif;
  font-size: 18px;
  color: #2c3d4f;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.custom-location-input {
  width: 130px;
  min-width: 64px;
}

.lat-deg,
.lat-min,
.lat-sec,
.long-min,
.long-sec {
  width: 32px;
}

.long-deg {
  width: 42px;
}

.lat-dir {
  width: 30px;
  text-align: center;
  padding: 8px;
  margin-left: 1px;
  margin-right: 4px;
  border-radius: 4px;
  cursor: pointer;
  background: #fbfdff;
  border: 1px solid #2c3d4f;
  appearance: none;
}

.long-dir {
  width: 30px;
  text-align: center;
  padding: 8px;
  margin-left: 1px;
  margin-right: 4px;
  border-radius: 4px;
  cursor: pointer;
  background: #fbfdff;
  border: 1px solid #2c3d4f;
  appearance: none;
}

.lat-long-button {
  padding: 6px 10px;
  cursor: pointer;
  background: #fbfdff;
  border: 1px solid #2c3d4f;
  transition: background-color 0.2s, box-shadow 0.1s ease, transform 0.1s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.lat-long-button:hover {
  background: linear-gradient(
      135deg,
      var(--delete-hover-left-012, rgba(225, 89, 71, 0.12)) 0%,
      var(--delete-hover-right-012, rgba(213, 143, 59, 0.12)) 100%
    ),
    #ffffff !important;
}

/* Tooltips for chart */
.tooltip {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #f1f1f1;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  transition: opacity 0.3s ease;
}

.tooltip-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

/* ----- Loading Overlay ----- */
#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  z-index: 100;
  display: none;
}

.spinner {
  position: absolute;
  border-radius: 50%;
  border: 8px solid #eaf0f6;
  border-top: 8px solid #889cb1;
  animation: spinner 1.5s linear infinite;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
}

@keyframes spinner {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ----- Print ----- */
.birth-details {
  display: none;
}

.system-details {
  display: none;
}

@media print {
  .birth-details {
    display: block;
  }

  .system-details {
    display: block;
  }

  body * {
    visibility: hidden;
  }

  #natal-chart * {
    visibility: visible;
  }

  #natal-chart {
    position: fixed;
    width: 100%;
    height: 100%;
  }
}

/* Tropical Birth Chart Calculator Page Overrides */
/* Override the large margin from main site's h1.no-subtext */
h1.no-subtext {
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
}