/* ============================================================
   Megrendelő űrlapok stílusa — a fő style.css-en FELÜL.
   Minden szabály a .mr-wrap konténerre scope-olva, hogy a fő
   oldal fejléce/lábléce/layoutja érintetlen maradjon.
   A hiányzó változók (--text, --border, --radius stb.) itt,
   a .mr-wrap-on definiálva. A közös --accent/--bg/--surface a
   fő style.css :root-jából öröklődik.
   ============================================================ */

.mr-wrap {
  --text: #1e3a5f;
  --muted: #888888;
  --accent-dark: #1e3a5f;
  --accent-light: #eaf1f8;
  --border: #e7e2d8;
  --error: #c0392b;
  --radius: 3px;
  --navy: #1e3a5f;
  --amber-ink: #92400e;

  max-width: 660px;
  margin: 0 auto;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

/* a megrendelő blokkon belül box-sizing minden elemre */
.mr-wrap *, .mr-wrap *::before, .mr-wrap *::after { box-sizing: border-box; }

/* fejléc-blokk (logó + cím) — a saját <header> helyett .mr-head */
.mr-head { text-align: center; margin-bottom: 28px; }
.mr-head img { height: 48px; width: auto; margin-bottom: 10px; }
.mr-head h1 { font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.mr-head p { color: var(--muted); font-size: 0.85rem; margin: 0; }

/* Naptár */
.mr-wrap .cal-wrap { border:1px solid var(--border); border-radius:var(--radius); padding:12px; background:var(--surface); flex:1 1 0; min-width:260px; max-width:340px; }
.mr-wrap .cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.mr-wrap .cal-title { font-weight:700; color:var(--text); font-size:0.95rem; }
.mr-wrap .cal-nav { background:none; border:1px solid var(--border); border-radius:var(--radius); width:30px; height:30px; cursor:pointer; color:var(--accent); font-size:1.1rem; line-height:1; }
.mr-wrap .cal-nav:hover:not(:disabled) { background:var(--accent-light); }
.mr-wrap .cal-nav:disabled { opacity:0.3; cursor:not-allowed; }
.mr-wrap .cal-dow { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.mr-wrap .cal-dow span { text-align:center; font-size:0.7rem; color:var(--muted); font-weight:600; padding:4px 0; }
.mr-wrap .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.mr-wrap .cal-day { text-align:center; padding:7px 0; font-size:0.85rem; border-radius:var(--radius); cursor:pointer; border:1px solid transparent; color:var(--text); }
.mr-wrap .cal-day.empty { cursor:default; }
.mr-wrap .cal-day.available { background:#eaf6ec; }
.mr-wrap .cal-day.available:hover { background:#d5edd9; border-color:var(--accent); }
.mr-wrap .cal-day.selected { background:var(--accent); color:#fff; font-weight:700; }
.mr-wrap .cal-day.disabled { color:#ccc; cursor:not-allowed; text-decoration:line-through; }
.mr-wrap .cal-layout { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.mr-wrap .time-panel { flex:1 1 0; min-width:180px; max-width:300px; }
.mr-wrap .time-panel-label { font-size:0.78rem; color:var(--muted); font-weight:600; margin-bottom:8px; }
.mr-wrap .form-warn { margin:0 0 12px; padding:10px 12px; background:#fdecea; border:1px solid var(--error); border-radius:var(--radius); color:var(--error); font-size:0.88rem; }
.mr-wrap .time-list { display:flex; flex-direction:column; gap:6px; }
.mr-wrap .time-btn { text-align:left; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); cursor:pointer; font-size:0.9rem; color:var(--text); }
.mr-wrap .time-btn:hover { background:var(--accent-light); border-color:var(--accent); }
.mr-wrap .time-btn.selected { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
.mr-wrap .time-empty { font-size:0.85rem; color:var(--muted); padding:9px 0; }
.mr-wrap #szerzodes_idopont { display:none; }
@media (max-width:640px) {
  .mr-wrap .cal-layout { flex-direction:column; }
  .mr-wrap .cal-wrap { max-width:none; width:100%; }
  .mr-wrap .time-panel { max-width:none; width:100%; }
}

/* Progress */
.mr-wrap .progress { display: flex; align-items: flex-start; gap: 0; margin-bottom: 24px; overflow-x: auto; padding-bottom: 4px; }
.mr-wrap .progress-item { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 56px; position: relative; }
.mr-wrap .progress-item::after { content: ''; position: absolute; top: 14px; left: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.mr-wrap .progress-item:last-child::after { display: none; }
.mr-wrap .progress-item.done::after { background: var(--accent); }
.mr-wrap .progress-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: var(--muted); position: relative; z-index: 1; }
.mr-wrap .progress-item.done .progress-dot { background: var(--accent); border-color: var(--accent); color: white; }
.mr-wrap .progress-item.active .progress-dot { border-color: var(--accent); color: var(--accent); }
.mr-wrap .progress-label { font-size: 0.6rem; color: var(--muted); margin-top: 4px; text-align: center; white-space: nowrap; }
.mr-wrap .progress-item.active .progress-label { color: var(--accent); font-weight: 700; }

/* Card */
.mr-wrap .card { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 32px 36px; box-shadow: 0 1px 4px rgba(0,0,0,0.07); }
.mr-wrap .card h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: 4px; color: var(--text); }
.mr-wrap .card .subtitle { color: var(--muted); font-size: 0.82rem; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }

/* Fields */
.mr-wrap .field { margin-bottom: 18px; }
.mr-wrap label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.mr-wrap label .req { color: #e74c3c; margin-left: 2px; }
.mr-wrap label .hint { font-weight: 400; color: var(--muted); font-size: 0.75rem; display: block; margin-top: 1px; }
.mr-wrap input[type=text], .mr-wrap input[type=email], .mr-wrap input[type=tel], .mr-wrap input[type=date], .mr-wrap select, .mr-wrap textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  font-family: inherit; font-size: 0.88rem; color: var(--text); background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s; appearance: none;
}
.mr-wrap input:focus, .mr-wrap select:focus, .mr-wrap textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30,58,95,0.15); }
.mr-wrap select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

/* Service cards */
.mr-wrap .service-grid { display: grid; gap: 8px; }
.mr-wrap .service-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s; display: flex; align-items: flex-start; gap: 10px; }
.mr-wrap .service-card:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
.mr-wrap .service-card input { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.mr-wrap .service-card .sc-body { flex: 1; }
.mr-wrap .service-card .sc-name { font-weight: 700; font-size: 0.88rem; }
.mr-wrap .service-card .sc-desc { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.mr-wrap .service-card .sc-price { font-size: 0.90rem; font-weight: 700; color: var(--navy); white-space: nowrap; }

/* Radio pills */
.mr-wrap .radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.mr-wrap .radio-pill { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 16px; cursor: pointer; font-size: 0.85rem; transition: all 0.15s; display: flex; align-items: center; gap: 6px; background: #fff; }
.mr-wrap .radio-pill:has(input:checked) { border-color: var(--accent); background: var(--accent-light); color: var(--navy); font-weight: 600; }
.mr-wrap .radio-pill input { accent-color: var(--accent); }

/* Total bar */
.mr-wrap .total-bar { background: var(--accent-light); border: 1px solid #cfe0f0; border-radius: var(--radius); padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 0.88rem; }
.mr-wrap .total-bar .amount { font-size: 1.1rem; color: var(--navy); font-weight: 700; }

/* Buttons */
.mr-wrap .btn-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.mr-wrap .btn { padding: 10px 24px; border-radius: var(--radius); font-family: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; border: none; transition: all 0.15s; text-decoration: none; display: inline-block; }
.mr-wrap .btn-back { background: #fff; border: 1px solid var(--border); color: var(--muted); text-decoration: none; }
.mr-wrap .btn-back:hover { border-color: var(--accent); color: var(--accent); }
.mr-wrap .btn-next { background: var(--accent); color: white; }
.mr-wrap .btn-next:hover { background: var(--accent-dark); }
.mr-wrap .tag-info-text { font-size: 0.78rem; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* Info box */
.mr-wrap .info-box { background: var(--accent-light); border-left: 3px solid var(--accent); padding: 12px 14px; border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.85rem; color: var(--text); margin-bottom: 18px; }
.mr-wrap .info-box ul { padding-left: 18px; margin-top: 6px; }
.mr-wrap .info-box li { margin-bottom: 3px; }

/* Success */
.mr-wrap .success { text-align: center; padding: 48px 32px; }
.mr-wrap .success-icon { width: 56px; height: 56px; background: var(--accent-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 1.6rem; color: var(--accent); }
.mr-wrap .success h2 { font-size: 1.4rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.mr-wrap .success p { color: var(--muted); line-height: 1.6; font-size: 0.9rem; }
.mr-wrap .success a { color: var(--accent); text-decoration: none; font-weight: 600; }

/* Választóoldal (index.php) kártyák */
.mr-wrap .intro { background: var(--accent-light); border: 1px solid #cfe0f0; border-radius: 4px; padding: 20px 24px; margin-bottom: 20px; font-size: 0.88rem; line-height: 1.7; color: var(--accent-dark); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.mr-wrap .intro strong { color: var(--accent); }
.mr-wrap .cards { display: grid; gap: 14px; margin-bottom: 28px; }
.mr-wrap .type-card { background: var(--accent-light); border: 1px solid #cfe0f0; border-radius: 4px; padding: 22px 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.07); text-decoration: none; color: var(--accent-dark); display: flex; align-items: center; gap: 18px; transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s; }
.mr-wrap .type-card:hover { border-color: var(--accent); box-shadow: 0 3px 14px rgba(30,58,95,0.18); transform: translateY(-1px); }
.mr-wrap .type-icon { width: 54px; height: 54px; background: var(--accent-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); }
.mr-wrap .type-icon svg { width: 28px; height: 28px; }
.mr-wrap .type-body { flex: 1; }
.mr-wrap .type-body h2 { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0; line-height: 1.2; }
.mr-wrap .type-sub { color: var(--text); font-size: 0.85rem; margin: 4px 0 0; line-height: 1.35; }

@media (max-width: 520px) {
  .mr-wrap .card { padding: 20px 16px; }
  .mr-wrap .radio-group { flex-direction: column; }
}