/* ═════════════════════════════════════════════════════════════════════
   OPTIKA LJILJANA — Booking form skin / Formidable form id=3
   Stabilna verzija za .ol-form-zone + .ol-frm
   ═════════════════════════════════════════════════════════════════════ */

.ol-form-zone,
.ol-frm {
  --ol-c-bg:        #0a0a0a;
  --ol-c-gold:      #c8a96e;
  --ol-c-gold-lt:   #e8d5b0;
  --ol-c-paper:     #fafaf8;
  --ol-c-surface:   #131211;
  --ol-c-bdr:       #1a1408;
  --ol-c-bdr-2:     #2a2010;
  --ol-c-dim:       #7a7268;
  --ol-c-err:       #c84a3c;
  --ol-c-ok:        #6e9a5c;
  --ol-f-serif:     'Playfair Display', Georgia, serif;
  --ol-f-sans:      'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  width: 100%;
  font-family: var(--ol-f-sans);
  color: var(--ol-c-paper);
}

/* Formidable container reset */
.ol-form-zone #frm_form_3_container.frm_forms,
.ol-form-zone #frm_form_3_container.frm_forms.with_frm_style,
.ol-frm #frm_form_3_container.frm_forms,
.ol-frm #frm_form_3_container.frm_forms.with_frm_style {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  box-shadow: none !important;
}

/* Field spacing */
.ol-form-zone #frm_form_3_container .frm_form_field,
.ol-frm #frm_form_3_container .frm_form_field {
  margin-bottom: 24px;
}

.ol-form-zone #frm_form_3_container .frm_form_field:last-child,
.ol-frm #frm_form_3_container .frm_form_field:last-child {
  margin-bottom: 0;
}

/* Labels */
.ol-form-zone #frm_form_3_container .frm_primary_label,
.ol-frm #frm_form_3_container .frm_primary_label {
  display: block !important;
  font-family: var(--ol-f-sans) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--ol-c-gold) !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
}

.ol-form-zone #frm_form_3_container .frm_required,
.ol-frm #frm_form_3_container .frm_required {
  color: var(--ol-c-gold-lt) !important;
  margin-left: 4px;
}

/* Text inputs */
.ol-form-zone #frm_form_3_container input[type="text"],
.ol-form-zone #frm_form_3_container input[type="email"],
.ol-form-zone #frm_form_3_container input[type="tel"],
.ol-form-zone #frm_form_3_container input[type="url"],
.ol-form-zone #frm_form_3_container input[type="number"],
.ol-form-zone #frm_form_3_container input[type="password"],
.ol-form-zone #frm_form_3_container input[type="search"],
.ol-form-zone #frm_form_3_container textarea,
.ol-frm #frm_form_3_container input[type="text"],
.ol-frm #frm_form_3_container input[type="email"],
.ol-frm #frm_form_3_container input[type="tel"],
.ol-frm #frm_form_3_container input[type="url"],
.ol-frm #frm_form_3_container input[type="number"],
.ol-frm #frm_form_3_container input[type="password"],
.ol-frm #frm_form_3_container input[type="search"],
.ol-frm #frm_form_3_container textarea {
  width: 100% !important;
  background: var(--ol-c-bg) !important;
  color: var(--ol-c-paper) !important;
  border: 1px solid var(--ol-c-bdr-2) !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  font-family: var(--ol-f-sans) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  transition: border-color .2s ease, background .2s ease !important;
}

/* Date input / Formidable date field */
.ol-form-zone #frm_form_3_container input.frm_date,
.ol-form-zone #frm_form_3_container input.hasDatepicker,
.ol-form-zone #frm_form_3_container input[type="date"],
.ol-frm #frm_form_3_container input.frm_date,
.ol-frm #frm_form_3_container input.hasDatepicker,
.ol-frm #frm_form_3_container input[type="date"] {
  width: 100% !important;
  background: var(--ol-c-bg) !important;
  color: var(--ol-c-paper) !important;
  border: 1px solid var(--ol-c-bdr-2) !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  font-family: var(--ol-f-sans) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  min-height: 48px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transition: border-color .2s ease !important;
}

/* Select */
.ol-form-zone #frm_form_3_container select,
.ol-frm #frm_form_3_container select {
  width: 100% !important;
  background-color: var(--ol-c-bg) !important;
  color: var(--ol-c-paper) !important;
  border: 1px solid var(--ol-c-bdr-2) !important;
  border-radius: 0 !important;
  padding: 12px 40px 12px 16px !important;
  font-family: var(--ol-f-sans) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* Focus */
.ol-form-zone #frm_form_3_container input:focus,
.ol-form-zone #frm_form_3_container textarea:focus,
.ol-form-zone #frm_form_3_container select:focus,
.ol-frm #frm_form_3_container input:focus,
.ol-frm #frm_form_3_container textarea:focus,
.ol-frm #frm_form_3_container select:focus {
  outline: none !important;
  border-color: var(--ol-c-gold) !important;
  background-color: var(--ol-c-surface) !important;
}

/* Placeholder */
.ol-form-zone #frm_form_3_container input::placeholder,
.ol-form-zone #frm_form_3_container textarea::placeholder,
.ol-frm #frm_form_3_container input::placeholder,
.ol-frm #frm_form_3_container textarea::placeholder {
  color: var(--ol-c-dim) !important;
  opacity: 1 !important;
}

/* Textarea */
.ol-form-zone #frm_form_3_container textarea,
.ol-frm #frm_form_3_container textarea {
  min-height: 96px !important;
  resize: vertical !important;
}

/* Checkbox / radio */
.ol-form-zone #frm_form_3_container .frm_opt_container,
.ol-frm #frm_form_3_container .frm_opt_container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ol-form-zone #frm_form_3_container .frm_checkbox label,
.ol-form-zone #frm_form_3_container .frm_radio label,
.ol-frm #frm_form_3_container .frm_checkbox label,
.ol-frm #frm_form_3_container .frm_radio label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--ol-c-paper) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer !important;
}

.ol-form-zone #frm_form_3_container .frm_checkbox input[type="checkbox"],
.ol-form-zone #frm_form_3_container .frm_radio input[type="radio"],
.ol-frm #frm_form_3_container .frm_checkbox input[type="checkbox"],
.ol-frm #frm_form_3_container .frm_radio input[type="radio"] {
  accent-color: var(--ol-c-gold);
  width: 18px !important;
  height: 18px !important;
  margin-top: 2px !important;
  flex-shrink: 0;
}

/* Description */
.ol-form-zone #frm_form_3_container .frm_description,
.ol-frm #frm_form_3_container .frm_description {
  font-size: 12px !important;
  color: var(--ol-c-dim) !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}

/* Submit */
.ol-form-zone #frm_form_3_container .frm_button_submit,
.ol-form-zone #frm_form_3_container input.frm_button_submit,
.ol-form-zone #frm_form_3_container button.frm_button_submit,
.ol-frm #frm_form_3_container .frm_button_submit,
.ol-frm #frm_form_3_container input.frm_button_submit,
.ol-frm #frm_form_3_container button.frm_button_submit {
  background: var(--ol-c-gold) !important;
  color: var(--ol-c-bg) !important;
  border: 1px solid var(--ol-c-gold) !important;
  border-radius: 0 !important;
  padding: 16px 32px !important;
  font-family: var(--ol-f-sans) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .2s ease !important;
  width: auto !important;
  min-width: 200px !important;
  margin-top: 8px !important;
  box-shadow: none !important;
}

.ol-form-zone #frm_form_3_container .frm_button_submit:hover,
.ol-form-zone #frm_form_3_container input.frm_button_submit:hover,
.ol-form-zone #frm_form_3_container button.frm_button_submit:hover,
.ol-frm #frm_form_3_container .frm_button_submit:hover,
.ol-frm #frm_form_3_container input.frm_button_submit:hover,
.ol-frm #frm_form_3_container button.frm_button_submit:hover {
  background: var(--ol-c-gold-lt) !important;
}

.ol-form-zone #frm_form_3_container .frm_submit,
.ol-frm #frm_form_3_container .frm_submit {
  margin-top: 32px !important;
}

/* Errors */
.ol-form-zone #frm_form_3_container .frm_error_style,
.ol-frm #frm_form_3_container .frm_error_style {
  background: rgba(200, 74, 60, 0.1) !important;
  border: 1px solid var(--ol-c-err) !important;
  color: var(--ol-c-err) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  margin-bottom: 24px !important;
}

.ol-form-zone #frm_form_3_container .frm_error,
.ol-frm #frm_form_3_container .frm_error {
  color: var(--ol-c-err) !important;
  font-size: 12px !important;
  margin-top: 8px !important;
  display: block !important;
}

.ol-form-zone #frm_form_3_container .frm_field_with_error input,
.ol-form-zone #frm_form_3_container .frm_field_with_error textarea,
.ol-form-zone #frm_form_3_container .frm_field_with_error select,
.ol-frm #frm_form_3_container .frm_field_with_error input,
.ol-frm #frm_form_3_container .frm_field_with_error textarea,
.ol-frm #frm_form_3_container .frm_field_with_error select {
  border-color: var(--ol-c-err) !important;
}

/* Success */
.ol-form-zone #frm_form_3_container .frm_message,
.ol-form-zone #frm_form_3_container .frm_form_submitted,
.ol-frm #frm_form_3_container .frm_message,
.ol-frm #frm_form_3_container .frm_form_submitted {
  background: rgba(110, 154, 92, 0.1) !important;
  border: 1px solid var(--ol-c-ok) !important;
  color: var(--ol-c-ok) !important;
  padding: 16px !important;
  font-size: 14px !important;
}

/* ═════════════════════════════════════════════════════════════════════
   jQuery UI Datepicker popup
   Popup je injectan na body, zato je globalni #ui-datepicker-div.
   ═════════════════════════════════════════════════════════════════════ */

#ui-datepicker-div.ui-datepicker {
  background: #131211 !important;
  border: 1px solid #2a2010 !important;
  padding: 12px !important;
  width: 280px !important;
  max-width: calc(100vw - 24px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6) !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 14px !important;
  color: #fafaf8 !important;
  z-index: 999999 !important;
  border-radius: 0 !important;
}

#ui-datepicker-div .ui-datepicker-header {
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 12px !important;
  position: relative !important;
}

#ui-datepicker-div .ui-datepicker-title {
  color: #fafaf8 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 32px !important;
  text-align: center !important;
}

#ui-datepicker-div .ui-datepicker-title select {
  background: #0a0a0a !important;
  color: #fafaf8 !important;
  border: 1px solid #2a2010 !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  margin: 0 4px !important;
}

#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
  width: 32px !important;
  height: 32px !important;
  top: 0 !important;
  cursor: pointer !important;
  border: 1px solid #2a2010 !important;
  background: #0a0a0a !important;
  text-indent: 0 !important;
}

#ui-datepicker-div .ui-datepicker-prev {
  left: 0 !important;
}

#ui-datepicker-div .ui-datepicker-next {
  right: 0 !important;
}

#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover {
  border-color: #c8a96e !important;
  background: #131211 !important;
}

#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 8px !important;
  height: 8px !important;
  margin: -4px 0 0 -4px !important;
  border-top: 2px solid #c8a96e !important;
  border-right: 2px solid #c8a96e !important;
  text-indent: -9999px !important;
}

#ui-datepicker-div .ui-datepicker-prev span {
  transform: rotate(-135deg) !important;
  margin-left: -2px !important;
}

#ui-datepicker-div .ui-datepicker-next span {
  transform: rotate(45deg) !important;
  margin-left: -6px !important;
}

#ui-datepicker-div .ui-datepicker-calendar {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 0 !important;
}

#ui-datepicker-div .ui-datepicker-calendar th {
  font-size: 11px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #7a7268 !important;
  font-weight: 500 !important;
  padding: 8px 0 !important;
  border: 0 !important;
  text-align: center !important;
}

#ui-datepicker-div .ui-datepicker-calendar td {
  padding: 2px !important;
  border: 0 !important;
  text-align: center !important;
}

#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
  display: block !important;
  padding: 8px 0 !important;
  color: #fafaf8 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-align: center !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}

#ui-datepicker-div .ui-datepicker-calendar td a:hover {
  background: #1a1408 !important;
  border-color: #c8a96e !important;
  color: #e8d5b0 !important;
}

#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today a {
  border-color: #c8a96e !important;
  color: #c8a96e !important;
}

#ui-datepicker-div .ui-datepicker-calendar td .ui-state-active,
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active {
  background: #c8a96e !important;
  color: #0a0a0a !important;
  border-color: #c8a96e !important;
}

#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled span,
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-unselectable span {
  color: #3a3530 !important;
  cursor: not-allowed !important;
}

/* Mobile */
@media (max-width: 600px) {
  #ui-datepicker-div.ui-datepicker {
    width: calc(100vw - 32px) !important;
    max-width: 320px !important;
    z-index: 999999 !important;
  }

  #ui-datepicker-div .ui-datepicker-calendar td a,
  #ui-datepicker-div .ui-datepicker-calendar td span {
    padding: 12px 0 !important;
    font-size: 14px !important;
  }
}