:root {
  --cream: #F5F0E8;
  --cream-dark: #EAE3D2;
  --brown: #6B4C2A;
  --brown-mid: #8B6340;
  --gold: #B88E33;
  --gold-light: #D4AC5A;
  --gold-pale: #FDF8EE;
  --text-dark: #2C1F0E;
  --text-mid: #5A3E28;
  --text-muted: #8C7355;
  --white: #FFFFFF;
  --border: #D4C4A8;
  --error: #ff0d00;
  --radius: 6px;
}

/* ── Wrapper ── */
.mf-wrap { max-width: 800px; margin: 0 auto; padding: 0 16px; }

/* ── Header ── */
.mf-header { text-align: center; margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.mf-header h2 { font-size: 32px; font-weight: 600; color: var(--brown); margin-bottom: 10px; }
.mf-header p { font-size: 15px; color: var(--text-muted); max-width: 520px; margin: 0 auto; }
.ornament { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 14px; }
.ornament span { display: block; height: 1px; width: 60px; background: var(--gold); opacity: .6; }
.ornament svg { width: 20px; height: 20px; fill: var(--gold); opacity: .75; }

/* ── Grid layout ── */
.mf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; }
.mf-grid .full { grid-column: 1 / -1; }
.mf-divider { grid-column: 1 / -1; border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.sec-lbl { font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); display: block; }
.req-note { font-size: 12px; color: var(--text-muted); text-align: right; }

/* ── Fields ── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; color: var(--text-mid); }
.field label .req { color: var(--gold); margin-left: 2px; }

.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-dark);
  background: var(--white);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,144,58,.12);
}

.field input.err { border-color: var(--error) !important; }
.field textarea { resize: vertical; min-height: 100px; }
.char-counter { font-size: 11px; color: var(--text-muted); text-align: right; margin-top: -4px; }

/* ── Stepper ── */
.stepper-group { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}

.stepper button {
  width: 40px;
  height: 44px;
  border: none;
  background: var(--cream);
  color: var(--brown);
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.stepper button:hover { background: var(--cream-dark); }

.stepper input[type="number"] {
  flex: 1;
  text-align: center;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0;
  padding: 11px 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--brown);
  -moz-appearance: textfield;
  box-shadow: none;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Radio cards ── */
.radio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.rc {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  background: var(--white);
  display: flex;
  flex-direction: column;
}

.rc:has(input:checked) {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(184,144,58,.15);
}

/* gallery inside card */
.rc-gal {
  position: relative;
  width: 100%;
  height: 165px;
  overflow: hidden;
  background: var(--cream);
  flex-shrink: 0;
}

.rc-gal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

.rc-gal img.on { opacity: 1; }

.rc-gal .arr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.3);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  padding: 0;
  z-index: 2;
}

.rc-gal .arr:hover { background: rgba(0,0,0,.55); }
.rc-gal .arr.p { left: 7px; }
.rc-gal .arr.n { right: 7px; }

.rc-dots {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
}

.rc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s;
}

.rc-dot.on { background: rgba(255,255,255,.95); }

.rc-body { padding: 12px 14px 16px; display: flex; align-items: flex-start; gap: 10px; }

.rc-body input[type="radio"] {
  accent-color: var(--gold);
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.rc-info .rc-t { font-size: 14px; font-weight: 700; color: var(--text-dark); display: block; }
.rc-info .rc-d { font-size: 12px; color: var(--text-muted); margin-top: 3px; display: block; line-height: 1.45; }
.rc-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-top: 7px; }
.badge-s { background: #FEF3CD; color: #7A5500; }
.badge-f { background: #E8F4EC; color: #2A5A35; }
#izbaErr { font-size: 12px; color: var(--error); margin-top: 6px; display: none; }

/* ── Range date picker ── */
.datepicker-wrap { position: relative; }

.dp-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}

.dp-inputs:focus-within,
.dp-inputs.open { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,144,58,.12); }
.dp-inputs.err { border-color: var(--error) !important; }

.dp-field { display: flex; flex-direction: column; padding: 10px 14px; flex: 1; border: none; }
.dp-field:first-child { border-right: 1px solid var(--border); }
.dp-field-lbl { font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted); }
.dp-field-val { font-size: 14px; color: var(--text-dark); margin-top: 1px; min-height: 21px; }
.dp-field-val.placeholder { color: var(--text-muted); }

/* Calendar popup */
.cal-popup {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  padding: 16px 18px;
  width: 640px;
  max-width: 96vw;
}

.cal-popup.show { display: block; }

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cal-nav {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brown);
  transition: background .15s;
}

.cal-nav:hover { background: var(--cream); }

.cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.cal-month-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--brown);
  text-align: center;
  margin-bottom: 8px;
}

.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.cal-dow { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--text-muted); text-align: center; padding: 4px 0; }

.cal-day {
  position: relative;
  text-align: center;
  padding: 5px 2px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
  transition: background .12s, color .12s;
  color: var(--text-dark);
  user-select: none;
}

.cal-day:hover:not(.disabled):not(.empty) { background: var(--cream-dark); }
.cal-day.disabled { color: #ccc; cursor: default; pointer-events: none; }
.cal-day.empty { cursor: default; }

.cal-day.start,
.cal-day.end { background: var(--gold) !important; color: #fff !important; font-weight: 700; }

.cal-day.in-range { background: #FEF0D0; color: var(--brown); border-radius: 0; }
.cal-day.start:not(.end) { border-radius: 4px 0 0 4px; }
.cal-day.end:not(.start) { border-radius: 0 4px 4px 0; }
.cal-day.start.end { border-radius: 4px; }
.cal-day.hover-range { background: #FEF0D0; border-radius: 0; }

.cal-day.today::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

.cal-day.start.today::after,
.cal-day.end.today::after { background: #fff; }

/* ── Warning box ── */
.warn-box {
  display: none;
  background: #FFF3CD;
  border-left: 3px solid #F0AD00;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 14px;
  font-size: 13px;
  color: #7A5500;
}

.warn-box.show { display: block; }
.warn-box a { color: var(--brown-mid); }

/* ── Price panel ── */
.price-panel {
  background: var(--gold-pale);
  border: 1.5px solid var(--gold-light);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: none;
}

.price-panel.show { display: block; }

.pp-head {
  font-size: 14px;
  color: var(--brown);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pp-head svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; flex-shrink: 0; }
.pp-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-mid); padding: 3px 0; }
.pp-sep { border: none; border-top: 1px solid var(--border); margin: 8px 0 6px; }
.pp-total { display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; color: var(--brown); }
.pp-total span:last-child { font-size: 18px; color: var(--gold); }
.pp-note { font-size: 11px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }
.stag { font-size: 10px; background: #FEF3CD; color: #7A5500; padding: 1px 6px; border-radius: 10px; margin-left: 5px; vertical-align: middle; }

/* ── Checkboxes ── */
.cbx { display: flex; gap: 10px; align-items: flex-start; }

.cbx input[type="checkbox"] {
  accent-color: var(--gold);
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}

.cbx input.err { outline: 2px solid var(--error); }
.cbx label { font-size: 13px; color: var(--text-mid); line-height: 1.55; cursor: pointer; }
.cbx label a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }

/* ── Submit button ── */
.sub-area { text-align: center; margin-top: 8px; }

.btn-sub {
  display: inline-block;
  padding: 14px 52px;
  background: var(--brown);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .2s, transform .1s;
}

.btn-sub:hover { background: var(--brown-mid); }
.btn-sub:active { transform: scale(.98); }
.btn-sub.loading { opacity: .7; pointer-events: none; }

/* ── Success message ── */
.ok-msg { display: none; text-align: center; padding: 40px 20px; }

.ok-msg .ic {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.ok-msg .ic svg { width: 26px; height: 26px; stroke: var(--gold); fill: none; }
.ok-msg h3 { font-size: 24px; color: var(--brown); margin-bottom: 8px; }
.ok-msg p { font-size: 14px; color: var(--text-muted); }

/* ── Responsive ── */
@media (max-width: 640px) {
  .cal-popup { width: 98vw; padding: 12px 8px; }
  .cal-months { grid-template-columns: 1fr; gap: 16px; }
  .mf-grid { grid-template-columns: 1fr; }
  .mf-grid .full { grid-column: 1; }
  .radio-grid,
  .stepper-group { grid-template-columns: 1fr; }
  .rc-gal { height: 200px; }
}