/* ------------------------------
   Base typography & layout
--------------------------------*/
html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

body {
  margin-bottom: 60px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
               "Noto Color Emoji", sans-serif;
  line-height: 1.5;
  color: #222;
  background: #fff;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  body {
    color: #eaeaea;
    background: #121212;
  }
  .response-section {
    background-color: #1b2635;
    border-color: #344a63;
  }
  .confirmation-message {
    background-color: #1f3d2c;
    border-color: #2d6a4f;
    color: #d4edda;
  }
}

/* Bootstrap focus ring compat + custom focus-visible */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem #258cfb;
  outline: none;
}

:focus-visible {
  outline: 2px solid #258cfb;
  outline-offset: 2px;
}

/* Optional helpers */
.container-narrow {
  max-width: 860px;
  margin-inline: auto;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.d-none { display: none !important; }

/* ------------------------------
   Animations
--------------------------------*/
@keyframes greenPulse {
  0%   { box-shadow: 0 0 6px rgba(40, 167, 69, 0.55); }
  50%  { box-shadow: 0 0 12px rgba(40, 167, 69, 0.85); }
  100% { box-shadow: 0 0 6px rgba(40, 167, 69, 0.55); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ------------------------------
   Global Green Glow submit style
--------------------------------*/
button[type="submit"],
input[type="submit"],
.btn-primary {
  background-color: #28a745 !important;
  color: #fff !important;
  font-weight: 600;
  border: none !important;
  border-radius: 4px;
  padding: 10px 18px;
  transition: transform 0.12s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 0 8px rgba(40, 167, 69, 0.7);
  animation: greenPulse 2.5s ease-in-out infinite;
  cursor: pointer;
}
button[type="submit"]:hover,
input[type="submit"]:hover,
.btn-primary:hover {
  background-color: #218838 !important;
  box-shadow: 0 0 14px rgba(40, 167, 69, 0.95);
  transform: translateY(-1px) scale(1.02);
}
button[type="submit"]:active,
input[type="submit"]:active,
.btn-primary:active {
  background-color: #1e7e34 !important;
  box-shadow: 0 0 10px rgba(40, 167, 69, 0.8);
  transform: translateY(0) scale(0.985);
}
button[type="submit"]:disabled,
input[type="submit"]:disabled,
.btn-primary:disabled {
  background-color: #7cc690 !important;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  animation: none;
}

/* ------------------------------
   Utility buttons
--------------------------------*/
.btn-green-glow,
.send-agent-btn {
  background-color: #28a745 !important;
  color: white !important;
  font-weight: 600;
  border: none !important;
  border-radius: 4px;
  padding: 10px 18px;
  box-shadow: 0 0 8px rgba(40, 167, 69, 0.7);
  transition: transform 0.12s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  animation: greenPulse 2.5s ease-in-out infinite;
  cursor: pointer;
}
.btn-green-glow:hover,
.send-agent-btn:hover {
  background-color: #218838 !important;
  box-shadow: 0 0 14px rgba(40, 167, 69, 0.95);
  transform: translateY(-1px) scale(1.02);
}
.btn-green-glow:active,
.send-agent-btn:active {
  background-color: #1e7e34 !important;
  box-shadow: 0 0 10px rgba(40, 167, 69, 0.8);
  transform: translateY(0) scale(0.985);
}
.send-agent-btn.is-loading {
  opacity: .85;
  cursor: not-allowed;
  filter: saturate(1.1);
}

/* ------------------------------
   Spinner utility
--------------------------------*/
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.6);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

/* ------------------------------
   Appointment Agent helpers
--------------------------------*/
.tz-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.response-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #f2f9ff;
  border: 1px solid #a6c8ff;
  border-radius: 6px;
}
.confirmation-message {
  margin-top: 16px;
  padding: 12px;
  background-color: #e8f5e9;
  border: 1px solid #81c784;
  border-radius: 6px;
  color: #2e7d32;
}
.slot-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
}
.slot-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.slot-item input[type="radio"] {
  transform: translateY(1px);
}
.slot-raw {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity: .75;
  margin-left: .35rem;
}

/* ------------------------------
   Mobile responsiveness
--------------------------------*/
@media (max-width: 992px) {
  /* Fix inline grid overflows on tablets */
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns: 1fr 1fr 1fr auto"] {
    grid-template-columns: 1fr !important;
  }
  [style*="padding: 40px"] {
    padding: 20px !important;
  }
}

@media (max-width: 768px) {
  /* Stack all multi-column grids */
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Shrink oversized inline fonts */
  [style*="font-size: 42px"],
  [style*="font-size: 36px"] {
    font-size: 24px !important;
  }
  [style*="font-size: 28px"] {
    font-size: 20px !important;
  }
  [style*="font-size: 64px"],
  [style*="font-size: 48px"] {
    font-size: 28px !important;
  }
  /* Fix wide padding */
  [style*="padding: 30px 40px"] {
    padding: 20px 16px !important;
  }
  [style*="padding: 40px 20px"] {
    padding: 20px 12px !important;
  }
  /* Fix tables overflow */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Fix max-width containers */
  [style*="max-width: 1600px"],
  [style*="max-width: 1400px"],
  [style*="max-width: 1200px"] {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 480px) {
  button, .btn, .send-agent-btn {
    width: 100%;
    font-size: 15px;
    padding: 12px;
  }
  .slot-list {
    grid-template-columns: 1fr;
  }
  /* Single column everything */
  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Smaller stat cards */
  [style*="font-size: 36px"] {
    font-size: 20px !important;
  }
  [style*="font-size: 28px"] {
    font-size: 18px !important;
  }
  /* Compact padding */
  [style*="padding: 20px"] {
    padding: 12px !important;
  }
  [style*="gap: 25px"],
  [style*="gap: 30px"] {
    gap: 12px !important;
  }
  /* Fix border-radius on mobile */
  [style*="border-radius: 16px"] {
    border-radius: 10px !important;
  }
}