/* =============================================================
   PLANNING WIDGET
   ============================================================= */

.planning-widget-wrap {
  position: relative;
  z-index: 1;
  padding: 0 80px;
  background: var(--cream);
}

.planning-widget {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 32px 0;
  border-top: 3px solid var(--primary-color);
}

/* =============================================================
     FIELDS
     ============================================================= */

.widget-field {
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--primary-color);
  padding: 16px 20px;
  background: #fff;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.widget-field--destination {
  flex: 1.8;
}

/* Focus state — :focus-within for native inputs,
     .is-focused added via JS for Select2 */
.widget-field:focus-within,
.widget-field.is-focused {
  border-color: var(--light-primary-color);
  background-color: var(--lightest-primary-color);
  outline: none;
}

.widget-field label {
  display: block;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tanzanite-muted-text-gray);
  margin-bottom: 5px;
  white-space: nowrap;
  pointer-events: none;
  flex-shrink: 0;
}

.widget-field select,
.widget-field input {
  width: 100%;
  border: none;
  outline: none;
  font-family: "Jost", sans-serif;
  font-size: 1.11rem;
  color: var(--default-text-color);
  background: transparent;
  cursor: pointer;
  padding: 0;
}

/* =============================================================
     DATE FIELD
     ============================================================= */

.pw-date-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.pw-date-wrap input {
  padding-right: 22px;
}

.pw-date-wrap input::placeholder {
  color: var(--tanzanite-muted-text-gray);
}

.pw-field-icon {
  position: absolute;
  right: 0;
  pointer-events: none;
  color: var(--tanzanite-muted-text-gray);
  opacity: 0.5;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.pw-date-wrap:hover input::placeholder {
  color: var(--primary-color);
}

.pw-date-wrap:hover .pw-field-icon {
  color: var(--primary-color);
  opacity: 1;
}

/* =============================================================
     SUBMIT BUTTON
     ============================================================= */

.widget-btn {
  flex-shrink: 0;
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 0 36px;
  font-family: "Jost", sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 0;
  min-height: 60px;
}

.widget-btn:hover:not(:disabled) {
  background: var(--light-primary-color);
}

.widget-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.widget-btn svg {
  flex-shrink: 0;
}

/* Error shake — fires when form submitted with nothing filled */
@keyframes pw-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  60% {
    transform: translateX(6px);
  }
}

.planning-widget.pw-error {
  animation: pw-shake 0.4s ease;
}

/* =============================================================
     SELECT2 — SUMMARY TAG
     Replaces the default pill list with "N destinations" label
     ============================================================= */

.pw-summary-tag {
  list-style: none;
  font-family: "Jost", sans-serif;
  font-size: 1.11rem;
  color: var(--default-text-color);
  padding: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-field .select2-container:hover .pw-summary-tag {
  color: var(--primary-color);
}

/* =============================================================
     SELECT2 — BRAND OVERRIDES
     ============================================================= */

.select2-container {
  width: 100% !important;
}

/* --- Single selection --- */

.select2-container--default .select2-selection--single {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  height: auto !important;
  box-shadow: none !important;
  outline: none !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  font-family: "Jost", sans-serif;
  font-size: 1.11rem;
  color: var(--default-text-color) !important;
  padding: 0 22px 0 0 !important;
  line-height: 1.5 !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: var(--tanzanite-muted-text-gray) !important;
  transition: color 0.2s ease;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: 50% !important;
  transform: translateY(-50%);
  right: 0 !important;
  height: auto !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: var(--tanzanite-muted-text-gray) transparent transparent !important;
  border-width: 5px 4px 0 !important;
  transition: border-color 0.2s ease;
}

.select2-container--default.select2-container--open
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: transparent transparent var(--primary-color) !important;
  border-width: 0 4px 5px !important;
}

/* Hover — single */
.select2-container:hover
  .select2-selection--single
  .select2-selection__placeholder {
  color: var(--primary-color) !important;
}

.select2-container:hover
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: var(--primary-color) transparent transparent !important;
}

/* --- Multi selection --- */

.select2-container--default .select2-selection--multiple {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  min-height: unset !important;
  box-shadow: none !important;
  padding: 0 !important;
  cursor: pointer;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__rendered {
  padding: 0 !important;
  display: flex;
  align-items: center;
  min-height: 24px;
  flex-wrap: nowrap;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__placeholder {
  color: var(--tanzanite-muted-text-gray) !important;
  font-family: "Jost", sans-serif;
  font-size: 1.11rem;
  margin: 0 !important;
  transition: color 0.2s ease;
}

/* Hide the default search input — not needed with summary label */
.select2-container--default
  .select2-selection--multiple
  .select2-search__field {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none;
}

/* Hover — multi */
.select2-container:hover
  .select2-selection--multiple
  .select2-selection__placeholder {
  color: var(--primary-color) !important;
}

/* --- Dropdown --- */

.select2-dropdown {
  border: 1.5px solid var(--primary-color) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 24px rgba(72, 52, 212, 0.1) !important;
  font-family: "Jost", sans-serif;
  z-index: 99999 !important;
}

.select2-search--dropdown {
  padding: 8px 10px !important;
}

.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--muted-border-color) !important;
  border-radius: 0 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.85rem !important;
  padding: 6px 10px !important;
  outline: none !important;
}

.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--primary-color) !important;
}

.select2-results__option {
  font-family: "Jost", sans-serif !important;
  font-size: 0.88rem !important;
  padding: 10px 14px !important;
  color: var(--tanzanite-text-gray) !important;
}

.select2-results__option--highlighted[aria-selected] {
  background: var(--primary-color) !important;
  color: white !important;
}

.select2-results__option[aria-selected="true"] {
  background: var(--primary-color-high-opacity) !important;
  color: var(--primary-color) !important;
}

/* =============================================================
     RESPONSIVE
     ============================================================= */

/* Tablet — 2x2 */
@media (max-width: 1200px) {
  .planning-widget-wrap {
    padding: 0 40px;
  }

  .planning-widget {
    flex-wrap: wrap;
    padding: 24px 0;
  }

  .widget-field {
    flex: 1 1 calc(50% - 5px);
  }

  .widget-field--destination {
    flex: 1 1 100%;
  }

  .widget-btn {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 52px;
  }
}

/* Mobile — single column */
@media (max-width: 640px) {
  .planning-widget-wrap {
    padding: 0 18px;
  }

  .planning-widget {
    flex-direction: column;
    padding: 20px 0;
    gap: 8px;
  }

  .widget-field,
  .widget-field--destination {
    flex: 1 1 auto;
  }

  .widget-btn {
    justify-content: center;
    width: 100%;
    min-height: 52px;
  }
}

/* =============================================================
     VANILLA CALENDAR PRO — TANZANITE THEME
     ============================================================= */

[data-vc-theme="tanzanite"].vc {
  background-color: var(--tanzanite-white);
  color: var(--tanzanite-text-gray);
  z-index: 9999;
  border-radius: 0 !important;
  border: 1.5px solid var(--primary-color);
  font-family: inherit;
}

/* Enforce zero border-radius throughout */
[data-vc-theme="tanzanite"].vc *,
[data-vc-theme="tanzanite"].vc *::before,
[data-vc-theme="tanzanite"].vc *::after {
  border-radius: 0 !important;
}

/* Navigation arrows */
[data-vc-theme="tanzanite"] .vc-arrow {
  background-color: transparent;
  width: 32px;
  height: 32px;
  position: relative;
  cursor: pointer;
  display: block;
}

[data-vc-theme="tanzanite"] .vc-arrow::before {
  content: "";
  width: 9px;
  height: 9px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-left: 2px solid var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
  display: block;
}

[data-vc-theme="tanzanite"] .vc-arrow_prev::before {
  transform: translate(-35%, -50%) rotate(45deg);
}

[data-vc-theme="tanzanite"] .vc-arrow_next::before {
  transform: translate(-65%, -50%) rotate(-135deg);
}

/* Headers and day labels */
[data-vc-theme="tanzanite"] .vc-header__content,
[data-vc-theme="tanzanite"] .vc-month,
[data-vc-theme="tanzanite"] .vc-year,
[data-vc-theme="tanzanite"] .vc-week__day,
[data-vc-theme="tanzanite"] .vc-months__month,
[data-vc-theme="tanzanite"] .vc-years__year {
  text-transform: uppercase !important;
  letter-spacing: 0.05em;
}

[data-vc-theme="tanzanite"] .vc-header__content {
  font-weight: 700;
}

[data-vc-theme="tanzanite"] .vc-week__day {
  font-weight: 600;
  font-size: 10px;
  color: var(--tanzanite-muted-text-gray);
}

/* Date buttons */
[data-vc-theme="tanzanite"] .vc-date__btn {
  background-color: transparent;
  color: var(--tanzanite-text-gray);
  font-weight: 500;
}

/* Selected */
[data-vc-theme="tanzanite"] .vc-date[data-vc-date-selected] .vc-date__btn {
  background-color: var(--primary-color-high-opacity) !important;
  color: var(--primary-color) !important;
  font-weight: 700;
}

/* Range middle */
[data-vc-theme="tanzanite"]
  .vc-date[data-vc-date-selected="middle"]
  .vc-date__btn {
  background-color: var(--primary-color-high-opacity) !important;
  color: var(--primary-color) !important;
  opacity: 0.8;
}

/* Disabled */
[data-vc-theme="tanzanite"] .vc-date[data-vc-date-disabled] {
  pointer-events: none;
}

[data-vc-theme="tanzanite"] .vc-date[data-vc-date-disabled] .vc-date__btn {
  color: var(--tanzanite-muted-text-gray) !important;
  opacity: 0.2;
  background-color: var(--tanzanite-very-light-bg-gray) !important;
  cursor: not-allowed;
}

/* Out-of-month */
[data-vc-theme="tanzanite"] .vc-date[data-vc-date-month="next"] .vc-date__btn,
[data-vc-theme="tanzanite"] .vc-date[data-vc-date-month="prev"] .vc-date__btn {
  color: var(--tanzanite-muted-text-gray);
  opacity: 0.4;
}

/* Hover */
@media (hover: hover) and (pointer: fine) {
  [data-vc-theme="tanzanite"] .vc-date__btn:hover:not([data-vc-date-selected]) {
    background-color: var(--tanzanite-very-light-bg-gray);
    color: var(--primary-color);
  }

  [data-vc-theme="tanzanite"] .vc-arrow:hover {
    background-color: var(--primary-color-high-opacity);
  }
}

/* Today */
[data-vc-theme="tanzanite"] .vc-date[data-vc-date-today] .vc-date__btn {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
  color: var(--dark-earth);
}

/* Time picker */
[data-vc-theme="tanzanite"] .vc-time {
  border-top: 1px solid var(--muted-border-color);
  background-color: var(--tanzanite-very-light-bg-gray);
  display: flex;
  padding: 10px;
  gap: 10px;
}

[data-vc-theme="tanzanite"] .vc-time__hour input,
[data-vc-theme="tanzanite"] .vc-time__minute input {
  background-color: var(--tanzanite-white);
  color: var(--tanzanite-text-gray);
  border: 1px solid var(--border-color);
  text-align: center;
  padding: 4px;
}

/* Month / year grids */
[data-vc-theme="tanzanite"] .vc-months__month[data-vc-months-month-selected],
[data-vc-theme="tanzanite"] .vc-years__year[data-vc-years-year-selected] {
  background-color: var(--primary-color-high-opacity);
  color: var(--primary-color);
  font-weight: 700;
}

[data-vc-theme="tanzanite"] .vc-months__month:disabled,
[data-vc-theme="tanzanite"] .vc-years__year:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}