:root {
  --vp-blue:        #3d7edb;
  --vp-blue-hover:  #2f6cc4;
  --vp-blue-pale:   #e8f2fc;
  --vp-gray-900:    #1a1d23;
  --vp-gray-700:    #3d4350;
  --vp-gray-500:    #6b7280;
  --vp-gray-400:    #9ca3af;
  --vp-gray-200:    #e2e6ec;
  --vp-gray-100:    #f3f5f8;
  --vp-gray-50:     #f8f9fb;
  --vp-white:       #ffffff;
  --vp-border:      #d1d7e0;
  --vp-radius:      4px;
  --vp-font:        Arial, Helvetica, sans-serif;
  --vp-red:         #dc3545;
}

.vp-form-page *,
.vp-form-page *::before,
.vp-form-page *::after {
  box-sizing: border-box;
}

.vp-form-page .form-item,
.vp-form-page .js-form-item,
.vp-form-page .form-type-textfield,
.vp-form-page .form-type-select,
.vp-form-page .form-type-number,
.vp-form-page .form-type-tel,
.vp-form-page .form-type-email,
.vp-form-page .form-type-date,
.vp-form-page .form-type-textarea,
.vp-form-page .form-type-webform-markup,
.vp-form-page .js-form-type-select {
  margin: 0 !important;
  padding: 0 !important;
}

.vp-form-page fieldset,
.vp-form-page details {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}

.vp-form-page .container-inline,
.vp-form-page .container-inline div,
.vp-form-page .container-inline label {
  display: block !important;
}

.vp-form-page .js-webform-flexbox,
.vp-form-page .webform-flexbox {
  display: contents !important;
}

.vp-form-page .webform-details-toggle-state,
.vp-form-page .js-webform-details-toggle {
  display: none !important;
}

.vp-form-page abbr[title] {
  text-decoration: none !important;
  border-bottom: none !important;
}

.vp-form-page label,
.vp-form-page .form-item__label {
  display: block !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: var(--vp-font) !important;
  color: var(--vp-blue) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
  text-transform: none !important;
}

.vp-form-page label .form-required,
.vp-form-page .form-required {
  align-content: end;
}

.vp-form-page label .form-required::after,
.vp-form-page .form-required::after {
  color: var(--vp-red) !important;
}



.vp-form-page {
  font-family: var(--vp-font);
  font-size: 14px;
  color: var(--vp-gray-900);
  line-height: 1.5;
}

.vp-page-title {
  font-family: var(--vp-font) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--vp-blue) !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: none !important;
}

.vp-card {
  background: var(--vp-white);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius);
  padding: 20px 22px;
  margin-bottom: 14px;
}

.vp-card--no-pad {
  padding: 0;
  overflow: hidden;
}

.vp-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--vp-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--vp-gray-200);
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.vp-grid {
  display: grid !important;
  gap: 14px;
}

.vp-grid.margin-bottom {
  margin-bottom: 14px;
}

.vp-grid--2 { grid-template-columns: 1fr 1fr; }
.vp-grid--3 { grid-template-columns: 130px 1fr 1fr; }
.vp-grid--4 { grid-template-columns: 1fr 150px 150px 1fr; }

.vp-field {
  display: block;
  min-width: 0;
}

.vp-field .input-group,
.vp-field {
  width: 100%;
}

.vp-field.factory-select .input-group .input-group-addon {
  display: none;
}

.vp-factory-search {
  display: flex !important;
  align-items: flex-end;
  gap: 14px;
}

.vp-field--grow { flex: 1 1 auto; min-width: 0; }
.vp-field--btn  { flex: 0 0 auto; }

.vp-program-layout {
  display: flex;
  gap: 14px;
  min-height: 180px;
}

.vp-program-table {
  min-width: 70%;
  margin-top: 24px;
}

.vp-program-table > .control-label::after {
  background-image: none;
  content: "*";
  padding-left: 5px;
  color: var(--vp-red) !important;
}

.vp-calendar {
  background: var(--vp-white);
  min-width: 300px;
  margin-top: 24px;
}

.vp-calendar .control-label {
  color: var(--vp-red) !important;
}

.vp-form-page .program-date-wrapper {
  display: contents;
}

.vp-info-box {
  background: var(--vp-blue);
  border-radius: var(--vp-radius);
  padding: 20px 24px;
  margin-bottom: 18px;
  color: var(--vp-white);
}

.vp-info-box .form-item {
  margin: 0 !important;
  padding: 0 !important;
}

.vp-info-box h3 {
  font-family: var(--vp-font);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--vp-white);
}

.vp-info-box p {
  font-size: 13px;
  margin: 0 0 2px;
  color: rgba(255,255,255,0.88);
  padding-left: 14px;
}

.vp-info-box a {
  color: rgba(255,255,255,0.9);
  text-decoration: underline;
}

.vp-form-page input[type="text"],
.vp-form-page input[type="number"],
.vp-form-page input[type="email"],
.vp-form-page input[type="tel"],
.vp-form-page input[type="date"],
.vp-form-page select,
.vp-form-page textarea {
  font-family: var(--vp-font) !important;
  font-size: 13px !important;
  color: var(--vp-gray-900) !important;
  background: var(--vp-white) !important;
  border: 1px solid var(--vp-border) !important;
  border-radius: var(--vp-radius) !important;
  padding: 0 10px !important;
  height: 34px !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  line-height: normal !important;
  display: block !important;
}

.vp-form-page textarea {
  height: 90px !important;
  padding: 8px 10px !important;
  resize: vertical;
  line-height: 1.5 !important;
}

.vp-form-page input[type="text"]:focus,
.vp-form-page input[type="number"]:focus,
.vp-form-page input[type="email"]:focus,
.vp-form-page input[type="tel"]:focus,
.vp-form-page input[type="date"]:focus,
.vp-form-page select:focus,
.vp-form-page textarea:focus {
  border-color: var(--vp-blue) !important;
  box-shadow: 0 0 0 3px rgba(61,126,219,0.12) !important;
}

.vp-form-page .form-item--error input,
.vp-form-page .form-item--error select,
.vp-form-page .form-item--error textarea {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,0.10) !important;
}

.vp-form-page .description,
.vp-form-page .form-item__description {
  font-size: 11px !important;
  color: var(--vp-gray-500) !important;
  margin-top: 4px !important;
  font-family: var(--vp-font) !important;
}

.vp-form-page .form-item--error-message {
  font-size: 11px !important;
  color: #c0392b !important;
  margin-top: 4px !important;
}


.vp-field--grow select,
.vp-field--grow input[type="text"] {
  border-right: none !important;
  border-radius: var(--vp-radius) 0 0 var(--vp-radius) !important;
}

.vp-field--grow .select2-container {
  width: 100% !important;
  max-width: 100% !important;
}

.vp-field--grow .select2-container--default .select2-selection--single,
.vp-field--grow .select2-container--default .select2-selection--multiple {
  border-right: none !important;
  border-radius: var(--vp-radius) 0 0 var(--vp-radius) !important;
}

.vp-form-page .select2-container--default .select2-selection--single,
.vp-form-page .select2-container--default .select2-selection--multiple {
  font-family: var(--vp-font) !important;
  font-size: 13px !important;
  border: 1px solid var(--vp-border) !important;
  border-radius: var(--vp-radius) !important;
  min-height: 34px !important;
  height: 34px !important;
  background: var(--vp-white) !important;
  box-shadow: none !important;
}

.vp-form-page .select2-container--default .select2-selection--single
.select2-selection__rendered {
  line-height: 32px !important;
  padding-left: 10px !important;
  color: var(--vp-gray-900) !important;
  font-size: 13px !important;
}

.vp-form-page .select2-container--default .select2-selection--single
.select2-selection__arrow {
  height: 32px !important;
}

.vp-form-page .select2-container--default.select2-container--open
.select2-selection--single {
  border-color: var(--vp-blue) !important;
  box-shadow: 0 0 0 3px rgba(61,126,219,0.12) !important;
}

.select2-dropdown {
  font-family: var(--vp-font) !important;
  font-size: 13px !important;
  border: 1px solid var(--vp-border) !important;
  border-radius: var(--vp-radius) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  max-width: 100vw;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: var(--vp-blue) !important;
}

.date-picker-inline {
  padding: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%);
  border: 2px solid #e8eef7;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
  position: relative;
  overflow: visible !important;
}

.date-picker-inline .ui-datepicker {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  padding: 0 !important;
}

.date-picker-inline .ui-datepicker-header {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border: none !important;
  border-radius: 6px;
  padding: 8px 6px !important;
  margin-bottom: 10px;
  color: white !important;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.date-picker-inline .ui-datepicker-title {
  font-size: 13px !important;
  font-weight: 600;
  display: flex;
  gap: 6px;
  flex: 1;
  text-align: center;
}

.date-picker-inline .ui-datepicker-prev,
.date-picker-inline .ui-datepicker-next {
  position: absolute !important;
  top: 13px !important;
  cursor: pointer;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.date-picker-inline .ui-datepicker-prev {
  left: 6px !important;
}

.date-picker-inline .ui-datepicker-next {
  right: 6px !important;
}

.date-picker-inline .ui-datepicker-prev span,
.date-picker-inline .ui-datepicker-next span {
  display: inline-block;
  font-size: 14px;
  color: white;
  font-weight: bold;
}

.date-picker-inline .ui-datepicker-prev:hover,
.date-picker-inline .ui-datepicker-next:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.date-picker-inline .ui-datepicker-calendar {
  width: 100% !important;
  border-collapse: collapse;
}

.date-picker-inline .ui-datepicker-calendar thead tr {
  background-color: #f0f4f9;
}

.date-picker-inline .ui-datepicker-calendar th {
  background-color: #f0f4f9 !important;
  color: #4b5563 !important;
  font-weight: 600 !important;
  padding: 6px 2px !important;
  border: none !important;
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.date-picker-inline .ui-datepicker-calendar td {
  padding: 1px !important;
  border: none !important;
}

.date-picker-inline .ui-datepicker-calendar a,
.date-picker-inline .ui-datepicker-calendar span {
  display: block;
  padding: 5px 3px !important;
  text-align: center;
  font-weight: 500;
  border-radius: 5px;
  margin: 2px !important;
  border: 2px solid transparent !important;
  font-size: 12px;
}

.date-picker-inline .ui-datepicker-calendar a {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  cursor: pointer;
  transition: all 0.15s ease;
}

.date-picker-inline .ui-datepicker-calendar a:hover {
  background-color: #e0f2fe !important;
  border-color: #3b82f6 !important;
  transform: scale(1.04);
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.1);
}

.ui-datepicker-calendar .available-date a {
  background-color: #28a745 !important;
  color: white !important;
  border-color: #1e7e34 !important;
}

.ui-datepicker-calendar .available-date a:hover {
  background-color: #28a745 !important;
  border-color: #1e7e34 !important;
}

.ui-datepicker-calendar .disabled-date a {
  background-color: #f3f4f6 !important;
  color: #d1d5db !important;
  cursor: not-allowed !important;
  text-decoration: none;
  opacity: 0.5;
}

.ui-datepicker-calendar .disabled-date a:hover {
  background-color: #f3f4f6 !important;
  transform: none !important;
  box-shadow: none !important;
}

.ui-datepicker-calendar .available-date-locked a,
.ui-datepicker-calendar .available-date-locked span {
  background-color: #c8ddf7 !important;
  color: #555 !important;
  cursor: not-allowed !important;
  opacity: 0.7;
  border-color: #9bbfe8 !important;
}

.ui-datepicker-calendar .available-date-locked a:hover,
.ui-datepicker-calendar .available-date-locked span:hover {
  background-color: #c8ddf7 !important;
  transform: none !important;
  box-shadow: none !important;
}

.ui-datepicker-calendar .insufficient-capacity a {
  background-color: #fbbf24 !important;
  color: #92400e !important;
  border-color: #f59e0b !important;
  cursor: not-allowed !important;
  opacity: 0.8;
}

.ui-datepicker-calendar .insufficient-capacity a:hover {
  background-color: #fbbf24 !important;
  transform: none !important;
  box-shadow: none !important;
}

.ui-datepicker-title {
  color: #0a0a0a;
}

.date-picker-inline .ui-datepicker-calendar .ui-state-other {
  color: #d1d5db !important;
}

.date-picker-inline .ui-datepicker-calendar .ui-state-other a {
  background-color: #f9fafb !important;
  color: #d1d5db !important;
}

.date-picker-inline .ui-datepicker-calendar .ui-datepicker-current-day a {
  background-color: var(--vp-blue) !important;
  color: white !important;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

.date-picker-inline .ui-datepicker-calendar .ui-datepicker-current-day a:hover {
  transform: scale(1.04);
}

.webform-submission-visit-request-main-form .fieldset-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.form-item-date {
  flex-basis: auto;
  flex-grow: 0;
}

.program-date-wrapper {
  display: flex;
  gap: 32px;
}
#extra_visitors_table .webform-multiple-table table tbody td:nth-child(2) div:first-child {
  width: 20%;
}

.vp-actions .form-actions,
.vp-actions .webform-actions {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.webform-type-select .input-group {
  width: 100%;
}

.vp-actions input[type="submit"],
.vp-form-page .webform-actions input[type="submit"] {
  font-family: var(--vp-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: var(--vp-blue) !important;
  color: var(--vp-white) !important;
  border: none !important;
  border-radius: var(--vp-radius) !important;
  height: 40px !important;
  width: auto !important;
  padding: 0 24px !important;
  cursor: pointer;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  display: inline-block !important;
  line-height: 40px !important;
  text-shadow: none !important;
  transition: background 0.15s;
}

.vp-actions input[type="submit"]:hover {
  background: var(--vp-blue-hover) !important;
}

@media (max-width: 860px) {
  .vp-grid--4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .vp-grid--3 { grid-template-columns: 1fr 1fr; }
  .vp-grid--2 { grid-template-columns: 1fr; }
  .vp-program-layout { flex-direction: column; }
  .vp-program-table { border-right: none; border-bottom: 1px solid var(--vp-border); }
  .vp-card { padding: 14px; }
}

/* Program templates container and items */
.program-templates-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: scroll;
  max-height: 326px;
}

.program-item-wrapper {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 12px !important;
  margin: 0 !important;
  background: var(--vp-gray-50);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius);
  transition: all 0.15s ease;
}

.program-item-wrapper:has(input[type="radio"]:checked) {
  background: var(--vp-blue-pale);
  border-color: var(--vp-blue);
}

.program-item-wrapper input[type="radio"],
.program-item-wrapper input[type="radio"]::-webkit-outer-spin-button,
.program-item-wrapper input[type="radio"]::-webkit-inner-spin-button {
  display: inline-block;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  border: 2px solid var(--vp-border) !important;
  border-radius: 50% !important;
  background: white !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  position: relative !important;
}

.program-item-wrapper input[type="radio"]:hover {
  border-color: var(--vp-blue) !important;
  box-shadow: 0 0 0 3px rgba(61, 126, 219, 0.1) !important;
}

.program-item-wrapper input[type="radio"]:checked {
  border-color: var(--vp-blue) !important;
  background: var(--vp-blue) !important;
  box-shadow: inset 0 0 0 4px white !important;
}

.program-item-wrapper label.control-label.option {
  display: inline !important;
  align-content: center !important;
  flex: 1;
  margin: 0 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--vp-gray-900) !important;
  padding: 0 !important;
  cursor: pointer;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.program-item-wrapper .description {
  flex-shrink: 0;
  text-align: right;
  margin: 0 !important;
  font-size: 11px !important;
  color: var(--vp-gray-500) !important;
  white-space: nowrap;
  display: flex;
  gap: 8px;
  align-items: center;
}

.program-item-wrapper .program-link {
  color: var(--vp-blue) !important;
  text-decoration: none;
  font-weight: 600;
  padding: 2px 8px;
  border: 1px solid var(--vp-blue);
  border-radius: 3px;
  font-size: 10px !important;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.program-item-wrapper .program-link:hover {
  background: var(--vp-blue);
  color: white !important;
}

/* Modal dialog responsive styles */
@media (max-width: 480px) {
  .vp-grid--3 { grid-template-columns: 1fr; }
  .vp-grid--4 { grid-template-columns: 1fr; }

  .vp-factory-search { flex-direction: column; align-items: stretch; }

  .vp-field--grow select,
  .vp-field--grow input[type="text"] {
    border-right: 1px solid var(--vp-border) !important;
    border-radius: var(--vp-radius) !important;
  }

  .vp-field--grow .select2-container--default .select2-selection--single {
    border-right: 1px solid var(--vp-border) !important;
    border-radius: var(--vp-radius) !important;
  }

  .ui-dialog {
    width: calc(100% - 20px) !important;
    left: 10px !important;
    max-height: 90vh !important;
  }
}

/* Custom tooltip for dates */
.date-picker-custom-tooltip {
  position: absolute !important;
  color: white !important;
  padding: 10px 14px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 1000 !important;
  border: 1px solid !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Red tooltip for unavailable dates */
.date-picker-custom-tooltip.date-picker-tooltip-warning {
  background-color: #dc2626 !important;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4), 0 0 0 1px rgba(220, 38, 38, 0.2) !important;
  border-color: #b91c1c !important;
}

/* Green tooltip for capacity info */
.date-picker-custom-tooltip.date-picker-tooltip-success {
  background-color: #059669 !important;
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.4), 0 0 0 1px rgba(5, 150, 105, 0.2) !important;
  border-color: #047857 !important;
}

.date-picker-custom-tooltip.show {
  opacity: 1 !important;
}

/* Enable pointer events on disabled dates for tooltip interaction */
.date-picker-inline .ui-datepicker-calendar td.ui-state-disabled {
  pointer-events: auto !important;
}