/* ── Kölcsönző Manager – Booking Form Styles ─────────────────────────────── */

/* CSS változók alapértékei (shortcode inline style felülírja) */
.km-booking-wrap {
  --km-primary: #2563eb;
  --km-bg: #ffffff;
  --km-text: #111111;
  --km-radius: 8px;

  /* Belső változók */
  --km-border: rgba(0, 0, 0, 0.18);
  --km-border-focus: var(--km-primary);
  --km-input-bg: #ffffff;
  --km-label-color: #374151;
  --km-req-color: #dc2626;
  --km-muted: #6b7280;
  --km-gap: 16px;

  box-sizing: border-box;
  background: var(--km-bg);
  color: var(--km-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 24px;
  border: 1px solid var(--km-border);
  border-radius: calc(var(--km-radius) * 1.5);
}

.km-booking-wrap *,
.km-booking-wrap *::before,
.km-booking-wrap *::after {
  box-sizing: inherit;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.km-form {
  margin: 0;
}

.km-row {
  margin-bottom: var(--km-gap);
}

.km-row:last-child {
  margin-bottom: 0;
}

/* 2 oszlopos sor – desktop */
@media (min-width: 600px) {
  .km-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--km-gap);
    margin-bottom: var(--km-gap);
  }

  .km-row-2 .km-field {
    margin-bottom: 0;
  }
}

/* ── Mezők ───────────────────────────────────────────────────────────────── */

.km-field {
  display: flex;
  flex-direction: column;
}

.km-field:not(:last-child) {
  margin-bottom: var(--km-gap);
}

.km-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--km-label-color);
  margin-bottom: 5px;
  display: block;
  text-align: left;
}

.km-req {
  color: var(--km-req-color);
}

.km-field input[type="text"],
.km-field input[type="tel"],
.km-field input[type="email"],
.km-field input[type="url"],
.km-field textarea,
.km-select-search,
.km-date-input {
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--km-text);
  background: var(--km-input-bg);
  border: 1px solid var(--km-border);
  border-radius: var(--km-radius);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
  -webkit-appearance: none;
}

.km-field input[type="text"]:focus,
.km-field input[type="tel"]:focus,
.km-field input[type="email"]:focus,
.km-field textarea:focus,
.km-select-search:focus,
.km-date-input:focus {
  border-color: var(--km-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--km-primary) 15%, transparent);
}

.km-field textarea {
  resize: vertical;
  min-height: 80px;
}


/* ── Elválasztó vonal ────────────────────────────────────────────────────── */

.km-divider {
  border: none;
  border-top: 1px solid var(--km-border);
  margin: 30px 0 30px 0 !important;
}

/* ── Kereshető dropdown ──────────────────────────────────────────────────── */

.km-select {
  position: relative;
  user-select: none;
}

.km-select-search {
  padding-right: 32px;
  cursor: pointer;
}

.km-select-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--km-muted);
  pointer-events: none;
  transition: transform .2s;
}

.km-select.km-open .km-select-arrow {
  transform: translateY(-50%) rotate(180deg);
}

.km-select.km-open .km-select-search {
  border-color: var(--km-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--km-primary) 15%, transparent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.km-select-dropdown {
  display: none;
  position: absolute;
  z-index: 9999;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid var(--km-border-focus);
  border-top: none;
  border-bottom-left-radius: var(--km-radius);
  border-bottom-right-radius: var(--km-radius);
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
}

.km-select.km-open .km-select-dropdown {
  display: block;
}

.km-select-group {
  padding: 7px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--km-muted);
  background: #f9fafb;
  border-bottom: 1px solid #f0f0f0;
}

.km-select-item {
  padding: 9px 16px;
  font-size: 14px;
  cursor: pointer;
  color: var(--km-text);
  transition: background .1s;
}

.km-select-item:hover,
.km-select-item.km-selected {
  background: color-mix(in srgb, var(--km-primary) 10%, transparent);
  color: var(--km-primary);
}

.km-select-empty {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--km-muted);
  text-align: center;
}

.km-select-item.km-item-unavailable {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

.km-select-item.km-item-unavailable .km-item-name {
  display: block;
  font-style: italic;
}

.km-select-item.km-item-conflict {
  display: block;
  font-size: 11px;
  color: #b91c1c;
  margin-top: 2px;
  font-style: normal;
}

/* Tiltott dropdown (dátum megadása előtt) */
.km-select.km-disabled .km-select-search {
  background: #f3f4f6;
  cursor: not-allowed;
  color: var(--km-muted);
}

.km-select.km-disabled .km-select-arrow {
  opacity: 0.3;
}

/* ── Elérhetőség státusz ────────────────────────────────────────────────── */

.km-avail-status {
  padding: 9px 14px;
  border-radius: var(--km-radius);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: var(--km-gap);
}

.km-avail-checking {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.km-avail-available {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.km-avail-unavailable {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.km-avail-error {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* ── GDPR checkbox ──────────────────────────────────────────────────────── */

.km-gdpr-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--km-muted);
  font-weight: 400 !important;
}

.km-gdpr-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--km-primary);
}

/* ── Küldés gomb ────────────────────────────────────────────────────────── */

.km-submit-btn {
  display: inline-block;
  padding: 11px 28px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--km-primary);
  border: none;
  border-radius: var(--km-radius);
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  width: 100%;
}

@media (min-width: 600px) {
  .km-submit-btn {
    width: auto;
    min-width: 200px;
  }
}

.km-submit-btn:hover:not(:disabled) {
  opacity: .88;
}

.km-submit-btn:active:not(:disabled) {
  transform: scale(.98);
}

.km-submit-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ── Üzenetek ───────────────────────────────────────────────────────────── */

.km-msg {
  padding: 12px 16px;
  border-radius: var(--km-radius);
  font-size: 14px;
  margin-top: var(--km-gap);
  line-height: 1.5;
}

.km-msg-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.km-msg-success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  font-weight: 500;
}

/* ── Betöltés ───────────────────────────────────────────────────────────── */

.km-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--km-muted);
  font-size: 14px;
  padding: 16px 0;
}

.km-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #e5e7eb;
  border-top-color: var(--km-primary);
  border-radius: 50%;
  animation: km-spin .7s linear infinite;
  flex-shrink: 0;
}

@keyframes km-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Flatpickr testreszabás ─────────────────────────────────────────────── */

.flatpickr-calendar {
  border-radius: var(--km-radius) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--km-primary) !important;
  border-color: var(--km-primary) !important;
}

.flatpickr-day:hover {
  background: color-mix(in srgb, var(--km-primary) 12%, transparent) !important;
}