/* iOS-style Distance Calculator */

/* Base reset and typography */
* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  background-color: #f2f2f7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.max-width-800 {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.hidden {
  display: none !important;
}

/* Container card */
.container {
  background-color: #ffffff;
  border-radius: 12px;
  margin-top: 20px;
}

/* Form styles */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  color: #8e8e93;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: -0.08px;
}

.p-4 {
  padding: 16px;
}

/* Fix CLS: Reserve space for autocomplete containers */
#departure-container,
#arrival-container {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Google Places Autocomplete Element styling - iOS style */
gmp-place-autocomplete {
  width: 100%;
}

gmp-place-autocomplete::part(input) {
  background-color: #f2f2f7;
  border: none;
  border-radius: 10px;
  width: 100%;
  padding: 12px 16px;
  color: #000000;
  font-size: 17px;
  font-family: inherit;
  line-height: 22px;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.2s ease;
}

gmp-place-autocomplete::part(input):focus {
  outline: none;
  background-color: #e5e5ea;
}

gmp-place-autocomplete::part(input)::placeholder {
  color: #c7c7cc;
}

/* iOS-style button */
.btn-primary {
  width: 100%;
  background-color: #007aff;
  color: white;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-primary:active {
  background-color: #004494;
  transform: scale(0.98);
}

/* Spinner - iOS style */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e5e5ea;
  border-top-color: #007aff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Results card - iOS style */
.results-card {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 20px;
}

.results-card .p-4 {
  padding: 16px;
}

.results-card p {
  font-size: 17px;
  color: #000000;
  margin: 0;
  padding: 14px 0;
  border-bottom: 0.5px solid #c6c6c8;
}

.results-card p:last-child {
  border-bottom: none;
}

.results-card strong {
  float: right;
  font-weight: 600;
}

.flight-distance {
  color: #007aff !important;
}

/* Icons in results */
.icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Address display under autocomplete - iOS style */
.address-display {
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #34c759;
  background-color: rgba(52, 199, 89, 0.1);
  border-radius: 8px;
}

/* Form input for fallback */
.form-input {
  background-color: #f2f2f7;
  border: none;
  border-radius: 10px;
  width: 100%;
  padding: 12px 16px;
  color: #000000;
  font-size: 17px;
  font-family: inherit;
  line-height: 22px;
  -webkit-appearance: none;
  appearance: none;
}

.form-input:focus {
  outline: none;
  background-color: #e5e5ea;
}

/* Table styles - iOS style */
.data-table {
  max-width: 500px;
  margin: 20px auto;
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
}

.data-table table {
  width: 100%;
  table-layout: fixed;
}

.data-table th {
  background-color: #f2f2f7;
  color: #000000;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: -0.08px;
}

.data-table td {
  padding: 14px 16px;
  font-size: 17px;
  border-bottom: 0.5px solid #c6c6c8;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr {
  background-color: #ffffff;
  transition: background-color 0.2s;
}

.data-table tbody tr:active {
  background-color: #f2f2f7;
}

/* iOS-style error */
.text-red-600 {
  color: #ff3b30 !important;
}

/* Safe area padding for iOS devices */
@supports (padding-top: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000000;
  }

  .container {
    background-color: #1c1c1e;
  }

  .form-label {
    color: #8e8e93;
  }

  gmp-place-autocomplete::part(input) {
    background-color: #2c2c2e;
    color: #ffffff;
  }

  gmp-place-autocomplete::part(input):focus {
    background-color: #3a3a3c;
  }

  gmp-place-autocomplete::part(input)::placeholder {
    color: #636366;
  }

  .form-input {
    background-color: #2c2c2e;
    color: #ffffff;
  }

  .form-input:focus {
    background-color: #3a3a3c;
  }

  .results-card {
    background-color: #1c1c1e;
  }

  .results-card p {
    color: #ffffff;
    border-bottom-color: #38383a;
  }

  .data-table {
    background-color: #1c1c1e;
  }

  .data-table th {
    background-color: #2c2c2e;
    color: #ffffff;
  }

  .data-table td {
    color: #ffffff;
    border-bottom-color: #38383a;
  }

  .data-table tbody tr {
    background-color: #1c1c1e;
  }

  .data-table tbody tr:active {
    background-color: #2c2c2e;
  }
}