.mk-filter { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: .9rem 1rem; margin-bottom: 1rem; }
.mk-lang { display: flex; gap: .3rem; justify-content: flex-end; margin-bottom: .6rem; } .mk-lang a { text-decoration: none; font-size: .8rem; padding: .15rem .7rem; border: 1.5px solid var(--line); border-radius: 999px; color: var(--wine); background: #fff; } .mk-lang a.on { background: var(--crimson, #97161a); color: #fff; border-color: transparent; }
.mk-card { display: flex; flex-direction: column; gap: .35rem; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1rem 1.15rem; text-decoration: none; color: inherit; transition: .2s; } a.mk-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(120,20,20,.6); }
.mk-card h3 { font-size: 1.08rem; margin: 0; } .mk-card .sub { font-size: .85rem; color: #6b5a56; } .mk-card .price { font-weight: 700; color: var(--crimson, #97161a); }
.mk-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-light, #ecc656), var(--crimson, #97161a)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; flex: none; }
.mk-top { display: flex; gap: .8rem; align-items: center; }
.mk-badges { display: flex; flex-wrap: wrap; gap: .3rem; } .mk-badge { font-size: .68rem; font-weight: 700; padding: .12rem .55rem; border-radius: 999px; background: #dff5e8; color: #1f7a48; } .mk-badge i { font-size: .7rem; } .mk-badge.no { background: #f1ece6; color: #8b7d76; font-weight: 600; } .mk-badge.wait { background: #fdf0d3; color: #9a6a0a; }
.mk-stars { color: #d98a2b; font-weight: 700; font-size: .9rem; } .mk-stars small { color: #7a6a66; font-weight: 400; }
.mk-chips { display: flex; flex-wrap: wrap; gap: .3rem; } .mk-chip { font-size: .72rem; padding: .1rem .6rem; border-radius: 999px; border: 1px solid var(--line); background: #fffdf5; color: var(--wine); }
.mk-svc { border: 1px solid var(--line); border-radius: 14px; padding: .6rem .9rem; margin-bottom: .5rem; background: #fff; } .mk-svc > label { font-weight: 600; cursor: pointer; display: flex; gap: .5rem; align-items: center; } .mk-svc .mk-svc-f { display: none; margin-top: .6rem; } .mk-svc.on { border-color: var(--crimson, #97161a); } .mk-svc.on .mk-svc-f { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; } .mk-svc .wide { grid-column: 1 / -1; }
.mk-svc-row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .7rem 0; border-bottom: 1px solid #f4ead7; } .mk-svc-row:last-child { border: 0; }
.mk-grid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.4rem; align-items: start; } @media (max-width: 860px) { .mk-grid2 { grid-template-columns: 1fr; } }
.mk-stage { display: flex; justify-content: space-between; gap: .6rem; padding: .35rem 0; border-bottom: 1px dashed #efe3c8; font-size: .9rem; }
.mk-item { display: grid; grid-template-columns: 110px 1fr auto; gap: .8rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .7rem 1rem; margin-bottom: .6rem; } @media (max-width: 700px) { .mk-item { grid-template-columns: 1fr; } }
.mk-time { font-weight: 700; color: var(--crimson, #97161a); font-size: .9rem; }
.mk-st { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: .12rem .6rem; border-radius: 999px; background: #eee; color: #666; } .mk-st.confirmed, .mk-st.completed, .mk-st.accepted { background: #dff5e8; color: #1f7a48; } .mk-st.requested, .mk-st.quoted { background: #fdf0d3; color: #9a6a0a; } .mk-st.declined, .mk-st.cancelled { background: #fbe3e3; color: #a12; }
.mk-total { display: flex; justify-content: space-between; font-size: 1.1rem; font-weight: 700; padding: .6rem 0; border-top: 2px solid var(--line); }
.mk-rate { display: flex; gap: .2rem; flex-direction: row-reverse; justify-content: flex-end; } .mk-rate input { display: none; } .mk-rate label { font-size: 1.5rem; color: #ddd; cursor: pointer; } .mk-rate input:checked ~ label, .mk-rate label:hover, .mk-rate label:hover ~ label { color: #d98a2b; }