/*
 * Calculator styling — full port of WPCode snippet 57755 (Resource
 * Calculator CSS) from the Old Pricing Tool. Kept close to byte-for-
 * byte with the production snippet so the New Pricing Tool renders
 * identically regardless of the surrounding theme.
 *
 * Scoping: most rules are keyed under `.dqot-form` (an Oxygen Builder
 * page-wrapper class on wirksmoving.com) and the form-level
 * `.form-container.resource-calculator` id. The `.dqot-form` wrapper
 * is emitted by `includes/shortcode.php` on block / classic themes so
 * the high-specificity rules always match.
 *
 * Design tokens:
 *   navy   #00205B  — headings, borders, button fill
 *   teal   #40C1AC  — progress bar, active pill, accent
 *   grey   #858585  — input borders
 *
 * When updating: edit this file directly. Snippet 57755 on prod is the
 * historical source but no longer canonical — local and staging ship
 * this file via wp_enqueue_style().
 */

/*
 * Bootstrap `.row` neutralisation. The calc template ships a handful
 * of `<div class="row">` wrappers that are NOT used as grid rows —
 * they wrap a single element — but Bootstrap's .row rule applies
 * `margin-left/-right: calc(-.5 * var(--bs-gutter-x))` (~-12px) which
 * pushes the wrapped element 12px left of everything else in the
 * column. On the Pick Up step this makes the "Choose Location Type"
 * select visibly misalign with the Pickup Address input above and
 * the multi-checkbox buttons below. Cancelling the gutter when `.row`
 * appears inside our form-container scope restores single-column
 * alignment without touching templates.
 */
.form-container.resource-calculator .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
}
/* .wirks-cal-day[data-date="2026-01-13"] {
    background-color: #ffffff !important;
}

.wirks-cal-day[data-date="2026-01-15"] {
    background-color: #ffffff !important;
}

.wirks-cal-day[data-date="2026-01-14"] {
    background-color: #ffffff !important;
	color:#6c757d !important;
} */


#btnBookIt{
	display:none;
}
#verifyFirst{
	display:none;
}
/* .phone-verify-wrapper #verifySMS{
	display:none;
} */
/* Align selectors in the middle */
.wirks-avcal-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.wirks-controls-selectors{
    display:flex;
	min-width:250px;
}

.wirks-controls-selectors select{
	border:none !important;
	height:auto !important;
}

.wirks-prev.is-disabled, 
.wirks-prev[disabled] {
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
}

.wirks-avcal-controls button{
	font-size:22px;
}

.packing-text{
	text-align:center;
	margin-top:0px;
}



span.select2-container.select2 {
  margin: 8px 0;
}

.step-left .select2-container--default .select2-selection--single {
  border: 1px solid #858585;
  border-radius: 6px;
  height: 48px;
  padding: 0;
}

.step-left
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 34px;
}

.step-left
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 46px;
}

.step-left h4 {
  font-size: 16px;
}

body .select2-dropdown {
  border-color: #858585;
}

body
  .select2-container--default
  .select2-search--dropdown
  .select2-search__field:focus-visible {
  outline: none;
}

body
  .select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #00205B;
}

body
  .select2-container--default
  .select2-selection--single
  .select2-selection__clear {
  display: none;
}

.form-container.resource-calculator {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Progress */
#progressBar {
  width: 50%;
  margin: 0 auto 25px;
  background-color: #f3f3f3;
}

@media (max-width: 900px) {
  #progressBar {
    width: 100%;
  }
}

#progress {
  width: 10%;
  height: 6px;
  background: #40C1AC;
}

/* Step layout */
.step-wrapper {
  display: flex;
  gap: 40px;
}

.step-wrapper {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.step-left {
  flex: 1 1 70%;
  min-width: 0;
}

.step-left p {
  font-size: 0.95em;
}

.step-left .small {
  font-size: 0.8em;
  color: #aaa;
}

.step-right {
  flex: 0 0 30%;
  border-left: 1px solid;
  border-image: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 10%,
    #858585 10%,
    #858585 100%
  ) 1;
  padding-left: 20px;
}

/* Sidebar */
.side-image {
  width: 100%;
  height: auto;
  background: #eee;
  margin-bottom: 18px;
}

.side-title {
  font-weight: bold;
  margin: 6px 0;
}

.side-text {
  font-size: 14px;
  line-height: 1.5;
}

/* Hide steps */
.form-step {
  display: none;
}

.form-step.active {
  display: block;
}

/* Fields */
input,
select,
textarea {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
}

.multi-checkbox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 1em;
}

@media (max-width: 640px) {
  .multi-checkbox {
    grid-template-columns: 1fr;
  }
}

.multi-checkbox label {
  background: #eee;
  padding: 10px 14px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.multi-checkbox input {
  accent-color: black;
}

.full-width > .custom-button,
.full-width > .custom-button button {
	margin: 0px auto;
}

.custom-button button,
a.button {
  display: block;
  margin: 0.5em auto 1em auto;
  background: #00205B;
  border: 0;
  color: #fff;
  padding: 12px;
  cursor: pointer;
  text-align: center;
  border-radius: 3px;
}

.custom-button button.secondary,
a.button.secondary {
  background: #33a18f; /* slightly darker teal */
  color: #fff;
}

.custom-button button.prev-btn {
  background: #f3f3f3;
  border: 0px solid #fff;
  color: #2e2e2e;
}

button.hidden {
	display: none;
}

/* Mobile */
@media (max-width: 640px) {
	.custom-button button {
		padding: 18px;
		margin: 1em 0em 1.5em 0em
	}
}

/* Extra stops */
.pickup-stop {
  margin-bottom: 20px;
  position: relative;
}

.remove-stop-btn {
    position: absolute;
    top: -20px;
    right: -10px;
    width: 25px !important;
    height: 25px;
    background: #04205b;
    color: #fff;
    border: none;
    font-size: 25px;
    line-height: 25px;
    cursor: pointer;
    z-index: 9999;
}


.pickup-stop hr {
  border-top: 1px solid #ddd;
  margin: 10px 0;
}

/* */
.dqot-form {
  margin: auto;
  padding: 50px 0;
}

.dqot-form .resource-calculator h2 {
  text-align: center;
}

.dqot-form .resource-calculator div#progressBar {
  width: calc(70% - 40px);
}

.dqot-form .resource-calculator .step-left button {
    width: 100%;
    border-radius: 6px;
}
.wirks-avcal-controls  button {
    width: auto !important;
    border-radius: 6px;
    border: 1px solid #dddddd;
}
body .wirks-month-label {
    flex: 1;
}

.dqot-form .resource-calculator .step-right {
  padding-left: 40px;
  border-left: 2px solid #ddd;
  padding-top: 50px;
  margin-top: -50px;
}

.dqot-form .resource-calculator .step-left .multi-checkbox label {
  display: block;
  align-items: center;
  padding: 15px 10px;
  position: relative;
  background: #fff;
  color: #00205B;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  border: 1px solid #00205B;
}

.dqot-form .resource-calculator .step-left .multi-checkbox label.active {
  background: #40C1AC;
  color: #00205B;
  font-weight: 600;
}



.dqot-form .resource-calculator .step-left .multi-checkbox label:hover {
  cursor: pointer;
}

.dqot-form
  .resource-calculator
  .step-left
  .multi-checkbox
  label
  input[type="checkbox"] {
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  position: absolute;
}

/* ?? Minimalist / Maximalist slider */
.style-slider {
  margin: 15px 0 25px;
}

.style-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 4px;
}

.style-slider input[type="range"] {
  width: 100%;
  accent-color: #000;
}

.custom-button-last {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.custom-button-last button {
  display: flex;
  align-items: center;
  padding: 15px 10px;
  position: relative;
  background: #333;
  color: #fff;
  flex: 2fr;
  cursor: pointer;
  border: 1px solid #333;
  justify-content: center;
}

.error-msg {
  color: #c0392b;
  font-size: 12px;
  margin: 2px 0 6px;
}
#msgPickupAddress {
  color: #a32c00;
  font-weight: 600;
  font-size: 12px;
  margin: 2px 0 6px;
}

#verifyFirst{
  color: #00205B;
  font-size: 12px;
  margin: 2px 0 6px;
  font-weight: 600;
}

/* Select2 styling to match inputs */
.select2-container {
  width: 100% !important;
  font-family: inherit;
}

.select2-selection--single {
  height: 42px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
}

.select2-selection--single .select2-selection__rendered {
  padding-left: 0;
  line-height: 24px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 8px;
}

.select2-dropdown {
  border: 1px solid #ccc;
}

.select2-results__option {
  padding: 8px 10px;
}

.select2-results__option--highlighted {
  background: #04205b;
  color: #fff;
}

/* Match Select2 height to inputs */
.select2-container .select2-selection--single {
  height: 44px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
}

.select2-container .select2-selection__rendered {
  line-height: normal;
  padding-left: 0;
}

.select2-container .select2-selection__arrow {
  height: 44px;
}

.select2-container--open .select2-dropdown {
  margin-top: 2em;
}
div#liveSwitchMsg {
    word-break: break-word;
}
.action-btn {
    text-align: center;
}
label[for="confirm-disclaimer"] {
    display: flex;
    align-items: flex-start;
}

label[for="confirm-disclaimer"] input#confirm-disclaimer {
    width: 20px;
    margin-right: 10px;
    accent-color: #48c1b2;
}
/* Responsive adjustments */
@media (max-width: 900px) {
	div#liveSwitchMsg>div {
    font-size: 16px !important;
}
  .step-wrapper {
    flex-direction: column;
  }

  .dqot-form .resource-calculator .step-left,
  .dqot-form .resource-calculator .step-right {
    flex: 1 1 100%;
    width: 100%;
    padding-left: 0;
    border-left: 0;
	border: 0px solid #fff;
	min-height:inherit;
  }

  .custom-button,
  .custom-button-last,
  .custom-button button,
  .custom-button-last button {
    width: 100%;
    flex-direction: column;
  }

  .custom-button button,
  .custom-button-last button {
    width: 100%;
    flex: 1;
  }

  .dqot-form .resource-calculator div#progressBar,
  #progressBar {
    width: 100%;
  }
}

.step-wrapper input[type="text"],
.step-wrapper input[type="date"],
.step-wrapper input[type="email"],
.step-wrapper input[type="number"],
.step-wrapper select {
  border: 1px solid #858585;
  border-radius: 6px;
  height: 48px;
}

.step-left {
  min-height: 600px;
}

button.inner-custon-btn a {
  color: #fff;
}

/* Base label */
.dqot-form .resource-calculator .step-left
.multi-checkbox.radio_item label {
  padding: 10px 14px;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: #333;
}

/* Checked state — entire bubble */
.dqot-form .resource-calculator .step-left
.multi-checkbox.radio_item label input[type="radio"]:checked {
  /* no styles here */
}

/* THIS is the trick */
.dqot-form .resource-calculator .step-left
.multi-checkbox.radio_item label input[type="radio"]:checked ~ * {
  color: #00205B;
  font-weight: 600;
}

/* And this */
.dqot-form .resource-calculator .step-left
.multi-checkbox.radio_item label:has(input[type="radio"]:checked),
.dqot-form .resource-calculator .step-left
.multi-checkbox.radio_item label input[type="radio"]:checked {
  background: #40C1AC;
}

.multi-checkbox.radio_item input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.furnishings-selector,
.origin-access-wrapper {
  display: none;
}

.form-step.active .furnishings-selector.is-visible,
.form-step.active .origin-access-wrapper.is-visible {
  display: block;
}

.furnishings-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

/* Tablet */
@media (max-width: 1024px) {
  .furnishings-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .furnishings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.furnish-option {
  border: 2px solid #ddd;
  border-radius: 10px;
  padding: 6px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.furnish-option img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

.furnish-option span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.2;
}

.furnish-option input {
  display: none;
}

.furnish-option:has(input:checked) {
  border-color: #40C1AC;
}

.packing-price,
.price-tag {
  display: block;
  font-size: 0.8rem;
  margin-top: 5px;
  white-space: pre-line;
}

span#packingSavings {
  display: none;
}

.step-wrapper ul li {
  padding: 0.5em 0em;
}

.budget-wrapper {
  display: block;
  min-width: 300px
  width: auto;
  max-width: 50%;
  box-sizing: border-box;
}

.budget-wrapper .budget-inner {
  display: inline-block;
  box-sizing: border-box;
  width: 45%;
  padding: 1em;
}

.savings-section {
  margin-top: 2rem;
}

.savings-intro {
  max-width: 800px;
  margin-bottom: 1.5rem;
}

.savings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.savings-card {
  border: 1px solid #e2e2e2;
  padding: 1.25rem;
  border-radius: 6px;
  background: #fff;
}

.savings-card img {
  height: 75px;
  width: auto;
  margin: 0.25em;
}

.savings-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

.savings-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.hidden {
  display: none;
}


.two-column-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;	
  column-gap: 12px;
  align-items: flex-start;
  margin: 2em 0; /* optional: space above/below */
}
.wisetack-section {
  padding: 2em;
}
.budget-section {
  padding: 2em;
  background-color: #f2f2f2; /* light gray */
  border: none;
}

/* Mobile */
@media (max-width: 600px) {
  .savings-grid,
  .two-column-grid {
    grid-template-columns: 1fr;
  }

	
  .budget-wrapper,
  .budget-wrapper .budget-inner {
    width: 100%;
  }
}

/* =========================
   Phone + Verify Button
   ========================= */

.phone-verify-wrapper,
.distance-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
	
}

#distanceContainer {
  flex-direction:column;
  gap:0px;
  align-items: normal;
} 
.distance-input-container{
	display: flex;
    gap: 10px;
    align-items: center;
}
.distance-toggle-wrapper.hidden,
.distance-toggle-wrapper input#distanceInputManual.hidden
{
	display: none;
}

.phone-verify-wrapper input#phoneInput,
.distance-toggle-wrapper input#distanceInput {
  flex: 1 1 auto;
  min-width: 0;
}

.phone-verify-wrapper button#verifySMS,
.distance-toggle-wrapper button#changeMileage {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
  padding: 10px 16px;
  height: 48px;
  border-radius: 6px;
  background: #00205B;
  color: #fff;
  border: 0;
  cursor: pointer;
}

button:disabled,
button[disabled],
button.secondary:disabled,
.phone-verify-wrapper button#verifySMS:disabled,
.phone-verify-wrapper button#verifySMS[disabled],
a.action-btn.disabled
{
  background-color: #e0e0e0;
  color: #9a9a9a;
  cursor: not-allowed;
  opacity: 1;
}

a.disabled {
	color: #e0e0e0;
	cursor: not-allowed;
}

/* Confirmation-style checkbox layout */
#confirm-disclaimer {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

#confirm-disclaimer input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

#confirm-disclaimer span {
  font-weight: 600;
}

/* Optional hover / focus state */
#confirm-disclaimer:hover {
  border-color: #c8c8c8;
  background: #f5f5f5;
}

/* Mobile-friendly adjustments */
@media (max-width: 600px) {
  #confirm-disclaimer {
    grid-template-columns: 24px 1fr;
    font-size: 13px;
  }
}
/* Container for each date/time option */
.date-time-range {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr 1fr;
  align-items: center;
  gap: 12px;

  padding: 16px;
  margin-bottom: 16px;

  background: #f7f9fc; /* light neutral */
  border: 1px solid #e2e6ef;
  border-radius: 6px;
}

/* Date picker */
.date-time-range input[type="date"] {
  width: 160px;
}

/* Time dropdowns */
.date-time-range select.osdt-time {
  width: 140px;
}

/* "to" separator */
.date-time-range span {
  font-size: 14px;
  color: #555;
  text-align: center;
}

/* Labels above each block */
label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

/* Mobile-friendly stacking */
@media (max-width: 768px) {
  .date-time-range {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .date-time-range input[type="date"],
  .date-time-range select.osdt-time {
    width: 100%;
  }

  .date-time-range span {
    display: none;
  }
}

/* Column grid */
.action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

/* Individual card */
.action-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
}

.action-card.hidden {
	display: none;
}

/* Image icon */
.action-icon-img {
  width: 30%;          /* half the card width */
  height: auto;        /* maintain aspect ratio */
  margin-bottom: 16px;
}

/* Title */
.action-card h4 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
}

/* Description */
.action-card p {
  margin: 0 0 16px;
  color: #555;
  font-size: 14px;
  line-height: 1.4;
}

/* Time Estimate for Task */
.action-est-time {
	display: block;
	color: #40C1AC;
	font-size: 0.8em;
	text-transform: uppercase;
	margin-bottom: 1em;
}

/* Button */
.action-btn {
  margin-top: auto;
  width: 100%;
  padding: 12px;
  background: #04205b;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

#loadingTruck.hidden {
	display: none;
}

/* Mobile */
@media (max-width: 768px) {
  .action-grid {
    grid-template-columns: 1fr;
  }

  .action-icon-img {
    width: 40%; /* slightly larger on mobile for balance */
  }
}

#virtualSurveyBtn, #phoneSurveyBtn {
  touch-action: manipulation;
}

.prev-btn {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#budgetFriendly.active .prev-btn {
  position: fixed;
  z-index: 1000;
  bottom: 57px;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 768px) {
   #budgetFriendly.active .prev-btn {
    width: calc(100% - 32px);
    max-width: none;
    padding: 16px;
    font-size: 16px;
    border-radius: 10px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
  }
}
@media (min-width: 769px) {
  #budgetFriendly.active .prev-btn {
    width: auto;
    min-width: 160px;
    padding: 12px 20px;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  }
}
@media (hover: hover) {
  #budgetFriendly.active .prev-btn:hover {
    transform: translateX(-50%) translateY(-2px);
  }
}
#budgetFriendly.active {
  padding-bottom: 96px; /* enough space for floating button */
}

body .wirks-avcal-wrapper, body #wirks-avcal-admin {
    max-width: 100%;
}

.address-confirm-modal {
  min-height: 100dvh;              /* full viewport height (mobile-safe) */
  display: flex;
  align-items: center;             /* vertical centering */
  justify-content: center;         /* horizontal centering */
  padding: clamp(12px, 4vw, 24px); /* breathing room on small screens */
  box-sizing: border-box;
}

.address-confirm-modal.hidden {
  display: none;
}

/* The card: only as big as its content (with sensible limits) */
.address-confirm-card {
  width: fit-content;
  max-width: min(560px, 100%);     /* stays mobile-friendly */
  height: auto;                    /* only as tall as needed */
  padding: clamp(12px, 3vw, 20px);
  box-sizing: border-box;

  /* Optional but common */
  border-radius: 12px;
  /* background: #fff; */
  /* box-shadow: 0 8px 24px rgba(0,0,0,.12); */
}

/* If the card contains long strings/addresses, prevent overflow */
.address-confirm-card * {
  overflow-wrap: anywhere;
}

/* Fallback for browsers that don't support fit-content well */
@supports not (width: fit-content) {
  .address-confirm-card { width: auto; }
}

div#verify-consent {
	font-size: 0.9rem;
	color: #363636;
}

.loading-dots {
    display: inline-block;
    width: 1.5em;        /* space for "..." */
    text-align: left;   /* dots grow to the right */
}