/* custom.css */
body {
    font-family:'Source Sans Pro', sans-serif;
    /* margin-left:25px; */
    font-size: 1rem;
    padding: 5px 10px;
}
.header {
    padding:15px 0;
    margin-bottom: 10px;
    border-bottom:2px black solid;
}
.btn-custom {
    background-color: #2aa3bd;
    border: black 1px solid;
    color: white;
    border-radius: 5px;
    /* height: 35px; */
    width:150px;
    font-weight:bold;
    font-size: 16px;
    text-align: center;
}
.btn-custom:hover {
    background-color: #5FB6CC;
    color: white;
    border: black 1px solid;
    border-radius: 5px;
}
.form-check-input {
  border-color: #999999;
}
.input-container {
    position:relative;
}
.input-responsive {
    height: 1.5rem;       /* scales with root font size */
    font-size: 1rem;      /* adjusts text proportionally */
    padding: 0.25rem 0.5rem;
}

.custom-border {
    border-color: #999999;
}

.paymentbox-heading {
    background:#2aa3bd;
    padding:5px 15px 0 15px;
}
.paymentbox-heading h5 {
    color:white;
    font-weight:bold;
}
.paymentbox {
    border: 1px solid #075064;
    height: 500px;
    /* max-height: 500px; */
    /* overflow: hidden; */
    overflow-y: auto;
    overflow-x: hidden;
    background: #aeddea;
    border-radius: 5px;
    line-height: 1;
    color:black;
}
.collapsible {
    background-color: #3d3d3d;
    color: #f0f0f0;
    cursor: pointer;
    padding: 10px 20px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    border-radius: 5px;
    margin-bottom: 5px;
}
.active, .collapsible:hover {
    background-color: black;
}
/* collapsed */
.content {
    padding: 0 20px; 
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #f0f0f0;
    border-radius: 0 0 5px 5px;
    margin-bottom: 10px;
    max-height: 0;
}
/* open */
.collapsible.active + .content {
  padding-top: 10px;
  padding-bottom: 10px;
}
.content-inner {
  padding: 10px 20px 1px;
}

.sm-pbutton {
    background-color: #2aa3bd;
    color: black;
    cursor: pointer;
    margin: 10px 0;
    padding: 10px 20px;
    width: 150px;
    border: 1px solid black;
    text-align: center;
    outline: none;
    font-size: 16px;
    border-radius: 5px;
    margin-bottom: 5px;
}
.sm-pbutton:hover,.sec-dropdown:hover {
    background-color: #9d9d9d;
    
}

.sm-pbutton:disabled,
.sm-pbutton:disabled:hover {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
  opacity: 0.6;
}
.sec-dropdown {
    background-color: #f1f1f1;/* #2aa3bd; */
    color: black;
    cursor: pointer;
    padding: 2px 5px;
    text-align: center;
    outline: none;
    font-size: 16px;
    border-radius: 5px;
    margin-bottom: 5px;
}
.dropdown-item:hover {
  background-color: #aeddea;
}
.container,
.row {
  overflow: visible;
}
.dropdown {
  position: static;
}
#account-form .form-control::placeholder {
  color: #9aa0a6;
  opacity: 1;
}

/* =========================================================
   Scheduling UI (cards + dim details only + pills)
   + Flatpickr readability (all dates equally prominent)
   ========================================================= */

/* --- Schedule cards --- */
.schedule-card {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
  border: 2px solid transparent !important;
  transition: filter 160ms ease, transform 160ms ease,
              box-shadow 160ms ease, border-color 160ms ease;
}

/* When inactive: keep header readable; dim ONLY the details */
.schedule-card.is-inactive {
  filter: grayscale(0.3);
  transform: scale(0.995);
}

.schedule-card.is-active {
  transform: none;
  filter: none;
  border: 2px solid #2aa3bd !important;
  background-color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* --- Mode header --- */
.mode-header {
  flex: 0 0 auto;
}

.mode-label {
  display: block;
  cursor: pointer;
  user-select: none;
  line-height: 1.15;
}

.mode-title {
  display: block;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Optional: safe to keep even if you removed subtext spans */
.mode-subtext {
  display: block;
  font-size: 0.9rem;
  opacity: 0.8;
  margin-top: 2px;
}

/* --- Details area --- */
.schedule-details {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 10px;

  opacity: 1;
  max-height: none;
  overflow: visible;
  transition: opacity 160ms ease, filter 160ms ease;
}

/* DIM ONLY DETAILS when card inactive */
.schedule-card.is-inactive .schedule-details {
  opacity: 0.55;
  filter: grayscale(0.15);
}

/* Active details: crisp */
.schedule-card.is-active .schedule-details {
  opacity: 1;
  filter: none;
}

/* ---- Soonest card layout tuning ---- */

/* Make the Soonest details area take up the remaining height */
#cardSoonest #soonestDetails {
  flex: 1 1 auto;
  display: flex;
  margin-left: 0 !important;   /* overrides ms-2 */
  min-height: 0;
}

/* Make the options container stretch to full height */
#cardSoonest #soonestOptions {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

/* Center the header/title area in each card */
.mode-header {
  text-align: center;
}

.mode-label {
  width: 100%;
}

/* Preferred card: force details to be left aligned + remove the extra left offset */
#cardPreferred #preferredDetails {
  margin-left: 0 !important;   /* overrides ms-4 */
  text-align: left;
}


/* Center the pill group vertically in the available space */
#cardSoonest #soonestOptions .pill-group {
  margin-top: auto;
  margin-bottom: auto;
  justify-content: center; /* keep pills centered*/
}

/* Keep the helper text pinned toward the bottom */
#cardSoonest #soonestOptions .soonest-footer {
  margin-top: auto !important;
  text-align: center;
  padding-top: 15px;
}

/* --- Pills (radio replacement) --- */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.pill-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill {
  display: inline-flex;
  width: 125px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #999;
  background: #fff;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  line-height: 1;

  /* prevents "Any time" becoming two lines */
  white-space: nowrap;
}

/* Selected pill */
.pill-input:checked + .pill {
  background: #2aa3bd;
  border-color: #2aa3bd;
  color: #fff;
}

/* Keyboard focus (accessible) */
.pill-input:focus + .pill,
.mode-label:focus-visible {
  outline: 2px solid #2aa3bd;
  outline-offset: 2px;
}

/* Optional hover affordance */
.pill:hover {
  border-color: #2aa3bd;
}

/* Keep Soonest pills on one line (desktop feel) */
#cardSoonest .pill-group {
  flex-wrap: nowrap;
  gap: 10px;
  flex-direction: column;
  align-items: center;
}

/* Slightly smaller pills for Soonest only (prevents wrapping) */
#cardSoonest .pill {
  padding: 7px 10px;
  font-size: 0.95rem;
}

/* =========================================================
   Flatpickr: make ALL dates equally prominent
   - Disabled dates are readable + struck-through + not clickable
   - Adjacent month dates are not faded
   ========================================================= */

/* Base day appearance */
.flatpickr-day {
  opacity: 1 !important;
  font-weight: 400;
}

/* Adjacent month days: remove default fading */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  opacity: 1 !important;
}

/* Disabled days: same prominence as enabled, but clearly unavailable */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed:hover {
  opacity: 1 !important;
  text-decoration: line-through;
  cursor: not-allowed;
  color: inherit !important;
  background: transparent !important;
}

/* Keep hover from affecting readability */
.flatpickr-day:hover {
  opacity: 1 !important;
}
.btn.is-invalid {
  border-color: #dc3545;
}
#paymentPage .paymentbox {
  max-height: none !important;
  height: auto !important;
}

#paymentPage .paymentbox > div:not(.paymentbox-heading):not(.row) {
  overflow: visible !important;
}

#paymentPage .paymentbox-heading {
  padding: 12px 20px;
}

#stateMenu,
#cardStateMenu {
  max-height: 220px;   /* controls visible height (~5–8 items) */
  overflow-y: auto;    /* enables scrolling */
  overscroll-behavior: contain;
}