/* ==========================================================================
   Landlust Kontaktformular – Frontend CSS
   Color palette: #697e10 (primary), #4a590a (dark), #8aa015 (light),
                  #c9a84c (gold accent), #faf9f7 (warm white)
   ========================================================================== */

/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  --lkf-primary:       #697e10;
  --lkf-primary-dark:  #4a590a;
  --lkf-primary-light: #8aa015;
  --lkf-primary-bg:    #f0f4e8;
  --lkf-gold:          #c9a84c;
  --lkf-bg:            #faf9f7;
  --lkf-surface:       #ffffff;
  --lkf-border:        #e0dbd1;
  --lkf-text:          #2c2c2c;
  --lkf-text-muted:    #6b6b6b;
  --lkf-error:         #c62828;
  --lkf-error-bg:      #fff5f5;
  --lkf-success:       #2e7d32;
  --lkf-success-bg:    #f1f8e9;
  --lkf-radius:        10px;
  --lkf-shadow:        0 4px 24px rgba(0, 0, 0, 0.08);
  --lkf-shadow-modal:  0 20px 60px rgba(0, 0, 0, 0.25);
  --lkf-transition:    0.2s ease;
  --lkf-btn-color:     #697e10; /* overridable via inline style */
}

/* ── Base reset (scoped) ───────────────────────────────────────────────────── */
.lkf-form-wrapper *,
.lkf-modal-overlay * {
  box-sizing: border-box;
}

/* ── Button trigger ────────────────────────────────────────────────────────── */
button.lkf-modal-trigger {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         14px 28px;
  background:      var(--lkf-btn-color, var(--lkf-primary));
  color:           #ffffff;
  font-family:     inherit;
  font-size:       15px;
  font-weight:     600;
  letter-spacing:  0.3px;
  border:          none;
  border-radius:   var(--lkf-radius);
  cursor:          pointer;
  transition:      background var(--lkf-transition), transform var(--lkf-transition), box-shadow var(--lkf-transition);
  box-shadow:      0 2px 12px rgba(105, 126, 16, 0.3);
  position:        relative;
  overflow:        hidden;
}

button.lkf-modal-trigger::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: rgba(255,255,255,0);
  transition: background var(--lkf-transition);
}

button.lkf-modal-trigger:hover {
  background:  var(--lkf-primary-dark);
  transform:   translateY(-1px);
  box-shadow:  0 6px 20px rgba(105, 126, 16, 0.38);
}

button.lkf-modal-trigger:active {
  transform: translateY(0);
}

button.lkf-modal-trigger:focus-visible {
  outline:        3px solid var(--lkf-primary);
  outline-offset: 3px;
}

/* ── Form wrapper (inline) ─────────────────────────────────────────────────── */
.lkf-form-wrapper {
  width:          100%;
  container-type: inline-size;
  container-name: lkf-wrapper;
}

/* ── Card wrapper (inline only) ────────────────────────────────────────────── */
.lkf-form-wrapper:not(.lkf-in-modal) .lkf-form {
  background:    var(--lkf-surface);
  border-radius: 16px;
  box-shadow:    var(--lkf-shadow);
  padding:       36px;
  max-width:     720px;
  margin:        0 auto;
  border:        1px solid var(--lkf-border);
}

/* ── Form fields grid ──────────────────────────────────────────────────────── */
.lkf-form-fields {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   18px 24px;
}

/* Width overrides */
.lkf-width-100,
.lkf-privacy-field {
  grid-column: 1 / -1;
}

.lkf-width-50 {
  grid-column: span 1;
}

/* ── Form field ────────────────────────────────────────────────────────────── */
.lkf-form-field {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.lkf-form-field label {
  font-size:   14px;
  font-weight: 600;
  color:       var(--lkf-text);
  line-height: 1.3;
}

.lkf-required {
  color:       var(--lkf-primary);
  margin-left: 2px;
  font-weight: 700;
}

/* ── Inputs ─────────────────────────────────────────────────────────────────── */
.lkf-form .lkf-input {
  width:         100%;
  padding:       10px 14px;
  font-family:   inherit;
  font-size:     14px;
  color:         var(--lkf-text);
  background:    var(--lkf-bg);
  border:        1.5px solid var(--lkf-border);
  border-radius: 8px;
  transition:    border-color var(--lkf-transition), box-shadow var(--lkf-transition), background var(--lkf-transition);
  appearance:    none;
  -webkit-appearance: none;
  outline:       none;
}

.lkf-form .lkf-input:hover {
  border-color: #b0a898;
  background:   #ffffff;
}

.lkf-form .lkf-input:focus {
  border-color: var(--lkf-primary);
  box-shadow:   0 0 0 3px rgba(105, 126, 16, 0.15);
  background:   #ffffff;
  outline:      none;
}

.lkf-form .lkf-input[aria-invalid="true"] {
  border-color:  var(--lkf-error);
  background:    var(--lkf-error-bg);
  box-shadow:    0 0 0 3px rgba(198, 40, 40, 0.1);
}

textarea.lkf-input {
  resize:     vertical;
  min-height: 100px;
  line-height: 1.6;
}

select.lkf-input {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23697e10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 12px center;
  padding-right:       40px;
  cursor:              pointer;
}

input[type="date"].lkf-input::-webkit-calendar-picker-indicator {
  opacity:  0.6;
  cursor:   pointer;
  filter:   invert(40%) sepia(80%) saturate(400%) hue-rotate(55deg);
}

/* ── Checkbox ───────────────────────────────────────────────────────────────── */
.lkf-checkbox-label {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  cursor:      pointer;
  font-size:   13px;
  color:       var(--lkf-text-muted);
  line-height: 1.5;
}

.lkf-checkbox-label span a {
  color:            var(--lkf-primary);
  text-decoration:  underline;
  text-underline-offset: 2px;
}

.lkf-checkbox {
  flex-shrink:   0;
  width:         18px;
  height:        18px;
  accent-color:  var(--lkf-primary);
  cursor:        pointer;
  margin-top:    2px;
  border-radius: 4px;
}

.lkf-checkbox:focus-visible {
  outline:        3px solid var(--lkf-primary);
  outline-offset: 2px;
}

/* ── Field error ────────────────────────────────────────────────────────────── */
.lkf-field-error {
  font-size:   12px;
  color:       var(--lkf-error);
  display:     none;
  margin-top:  2px;
  font-weight: 500;
}

.lkf-field-error:not(:empty) {
  display: block;
}

/* ── Form actions ───────────────────────────────────────────────────────────── */
.lkf-form-actions {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             12px;
  margin-top:      24px;
  padding-top:     20px;
  border-top:      1px solid var(--lkf-border);
}

.lkf-required-note {
  font-size:  12px;
  color:      var(--lkf-text-muted);
  margin:     0;
}

/* ── Submit button ──────────────────────────────────────────────────────────── */
.lkf-submit-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding:         12px 28px;
  background:      linear-gradient(135deg, var(--lkf-primary), var(--lkf-primary-dark));
  color:           #ffffff;
  font-family:     inherit;
  font-size:       15px;
  font-weight:     700;
  border:          none;
  border-radius:   var(--lkf-radius);
  cursor:          pointer;
  transition:      opacity var(--lkf-transition), transform var(--lkf-transition), box-shadow var(--lkf-transition);
  box-shadow:      0 3px 14px rgba(105, 126, 16, 0.35);
  min-width:       160px;
  position:        relative;
}

.lkf-submit-btn:hover:not(:disabled) {
  background:  var(--lkf-primary-light);
  color:       #ffffff !important;
  transform:   translateY(-1px);
  box-shadow:  0 6px 20px rgba(105, 126, 16, 0.42);
}

.lkf-submit-btn:active:not(:disabled) {
  transform: translateY(0);
}

.lkf-submit-btn:focus-visible {
  outline:        3px solid var(--lkf-primary);
  outline-offset: 3px;
}

.lkf-submit-btn:disabled {
  opacity: 0.7;
  cursor:  not-allowed;
}

/* Spinner */
.lkf-btn-spinner {
  display:       none;
  width:         16px;
  height:        16px;
  border:        2px solid rgba(255,255,255,0.4);
  border-top:    2px solid #ffffff;
  border-radius: 50%;
  animation:     lkf-spin 0.7s linear infinite;
}

.lkf-submit-btn.is-loading .lkf-btn-spinner { display: block; }
.lkf-submit-btn.is-loading .lkf-btn-text    { opacity: 0.7; }

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

/* ── Form message (success/error) ───────────────────────────────────────────── */
.lkf-form-message {
  display:       none;
  margin-top:    20px;
  padding:       16px 20px;
  border-radius: var(--lkf-radius);
  font-size:     14px;
  font-weight:   500;
  line-height:   1.5;
  animation:     lkf-slide-in 0.3s ease;
}

.lkf-form-message:not(:empty) { display: block; }

.lkf-form-message.is-success {
  background:   var(--lkf-success-bg);
  border:       1.5px solid #a5d6a7;
  color:        var(--lkf-success);
}

.lkf-form-message.is-error {
  background:   var(--lkf-error-bg);
  border:       1.5px solid #ffcdd2;
  color:        var(--lkf-error);
}

@keyframes lkf-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Modal overlay ──────────────────────────────────────────────────────────── */
.lkf-modal-overlay {
  position:        fixed;
  inset:           0;
  z-index:         100000;
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
  background:      rgba(20, 20, 20, 0);
  backdrop-filter: blur(0px);
  pointer-events:  none;
  opacity:         0;
  visibility:      hidden;
  transition:      background 0.3s ease, backdrop-filter 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  padding:         0;
}

.lkf-modal-overlay.is-open {
  background:      rgba(20, 20, 20, 0.6);
  backdrop-filter: blur(4px);
  pointer-events:  all;
  opacity:         1;
  visibility:      visible;
}

/* ── Modal container ────────────────────────────────────────────────────────── */
.lkf-modal-container {
  background:    var(--lkf-surface);
  width:         100%;
  max-width:     640px;
  max-height:    92vh;
  border-radius: 20px 20px 0 0;
  box-shadow:    var(--lkf-shadow-modal);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  transform:     translateY(100%);
  transition:    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lkf-modal-overlay.is-open .lkf-modal-container {
  transform: translateY(0);
}

/* Center on desktop */
@media (min-width: 640px) {
  .lkf-modal-overlay {
    align-items: center;
    padding: 24px;
  }
  .lkf-modal-container {
    border-radius: 16px;
    max-height:    90vh;
  }
}

/* ── Modal header ───────────────────────────────────────────────────────────── */
.lkf-modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 28px 18px;
  background:      linear-gradient(135deg, var(--lkf-primary), var(--lkf-primary-dark));
  flex-shrink:     0;
}

.lkf-modal-title {
  color:       #ffffff;
  font-size:   18px;
  font-weight: 700;
  margin:      0;
  letter-spacing: -0.2px;
}

.lkf-modal-close {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  padding:         0;
  background:      rgba(255,255,255,0.15);
  border:          none;
  border-radius:   50%;
  color:           #ffffff;
  cursor:          pointer;
  transition:      background var(--lkf-transition), transform var(--lkf-transition);
  flex-shrink:     0;
}

.lkf-modal-close svg {
  display: block;
  stroke:  #ffffff;
  width:   20px;
  height:  20px;
  flex-shrink: 0;
}

.lkf-modal-close:hover {
  background: rgba(255,255,255,0.28);
  transform: rotate(90deg);
}

.lkf-modal-close:focus-visible {
  outline:        3px solid rgba(255,255,255,0.7);
  outline-offset: 2px;
}

/* ── Modal body ─────────────────────────────────────────────────────────────── */
.lkf-modal-body {
  overflow-y: auto;
  flex:       1;
  padding:    28px;
}

.lkf-modal-body .lkf-form {
  /* No card styles inside modal */
}

/* ── Modal footer ───────────────────────────────────────────────────────────── */
.lkf-modal-footer {
  padding:     12px 28px;
  text-align:  center;
  font-size:   11px;
  color:       var(--lkf-text-muted);
  background:  var(--lkf-bg);
  border-top:  1px solid var(--lkf-border);
  flex-shrink: 0;
}

/* ── Honeypot (must be invisible) ───────────────────────────────────────────── */
.lkf-hp {
  display:    none !important;
  visibility: hidden !important;
  position:   absolute !important;
  left:       -9999px !important;
  width:      0 !important;
  height:     0 !important;
  overflow:   hidden !important;
}

@container lkf-wrapper (max-width: 600px) {
  .lkf-form-wrapper:not(.lkf-in-modal) .lkf-form {
    padding: 24px 20px;
  }

  .lkf-form-fields {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .lkf-form-actions {
    flex-direction:  column;
    align-items:     stretch;
  }

  .lkf-submit-btn {
    width: 100%;
    justify-content: center;
  }

  .lkf-modal-body {
    padding: 20px 16px;
  }

  .lkf-modal-header {
    padding: 16px 20px;
  }

  /* Improved form spacing for mobile */
  .lkf-form-field label {
    font-size: 13px;
  }
  
  .lkf-form .lkf-input {
    padding: 12px; /* Slightly larger targets */
    font-size: 15px; /* Prevent iPhone zoom-on-focus */
  }

  .lkf-form-actions {
    padding-top: 16px;
  }
}

/* ── Accessibility: reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lkf-modal-container,
  .lkf-modal-overlay,
  .lkf-form-message,
  .lkf-submit-btn,
  button.lkf-modal-trigger {
    transition: none;
    animation:  none;
  }
  .lkf-btn-spinner {
    animation: none;
    border-top-color: white;
  }
}