/* Autofliper Places & Services — iOS-style frontend (v2.2.0) */
.afp-app{
  --afp-accent:#B32726;
  --afp-accent2:#8f1f1e;
  --afp-bg:#f2f2f7;
  --afp-card:#ffffff;
  --afp-text:#1c1c1e;
  --afp-sub:#8e8e93;
  --afp-line:#e5e5ea;
  --afp-fill:#f2f2f7;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--afp-text);
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
  max-width:1120px;
  margin:0 auto;
  padding:6px 0 48px;
}
.afp-app *{box-sizing:border-box}

/* ── search + categories bar ── */
.afp-bar{position:sticky;top:8px;z-index:20;margin-bottom:16px}
.afp-app .afp-search{
  display:flex!important;align-items:center!important;gap:8px!important;
  background:var(--afp-card)!important;
  border:1px solid var(--afp-line)!important;
  border-radius:16px!important;padding:5px 6px 5px 14px!important;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.06)!important;
  width:100%!important;box-sizing:border-box!important;
}
.afp-app .afp-search:focus-within{border-color:#d9d9de!important;box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 32px rgba(0,0,0,.10)!important}
.afp-app .afp-search .afp-search-ic{width:19px!important;height:19px!important;flex:0 0 19px!important;color:var(--afp-sub)!important}
.afp-app .afp-search input[data-role="search"]{
  flex:1 1 auto!important;min-width:0!important;width:auto!important;
  border:none!important;outline:none!important;background:transparent!important;box-shadow:none!important;
  font-size:16px!important;font-family:inherit!important;color:var(--afp-text)!important;
  height:auto!important;line-height:1.3!important;margin:0!important;padding:9px 4px 9px 0!important;
}
.afp-app .afp-search input[data-role="search"]::placeholder{color:var(--afp-sub)!important}
/* minimal, aligned icon buttons — locked so the theme can't enlarge/recolor them */
.afp-app .afp-search .afp-search-go,
.afp-app .afp-search .afp-locate{
  flex:0 0 36px!important;width:36px!important;height:36px!important;
  min-width:36px!important;max-width:36px!important;min-height:36px!important;
  padding:0!important;margin:0!important;border:none!important;border-radius:10px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  font-size:0!important;line-height:0!important;letter-spacing:normal!important;text-transform:none!important;
  box-shadow:none!important;cursor:pointer!important;appearance:none!important;-webkit-appearance:none!important;
  transition:background .15s,filter .15s,transform .12s!important;
}
.afp-app .afp-search .afp-search-go{background:var(--afp-fill)!important;color:#1c1c1e!important}
.afp-app .afp-search .afp-search-go:hover{background:#e8e8ed!important}
.afp-app .afp-search .afp-search-go:active{transform:scale(.92)!important}
.afp-app .afp-search .afp-locate{background:var(--afp-accent)!important;color:#fff!important}
.afp-app .afp-search .afp-locate:hover{filter:brightness(.92)!important}
.afp-app .afp-search .afp-locate:active{transform:scale(.92)!important}
.afp-app .afp-search .afp-locate.is-busy{opacity:.55!important;pointer-events:none!important}
.afp-app .afp-search .afp-search-go svg,
.afp-app .afp-search .afp-locate svg{width:17px!important;height:17px!important;display:block!important}


.afp-cats{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.afp-cats::-webkit-scrollbar{display:none}
.afp-cat{
  flex:0 0 auto;border:none;cursor:pointer;
  background:var(--afp-card);border:1px solid var(--afp-line);
  color:var(--afp-text);border-radius:100px;padding:9px 16px;
  font-size:14px;font-weight:600;font-family:inherit;white-space:nowrap;
  transition:all .15s;
}
.afp-cat:hover{border-color:#d2d2d7;background:#fafafb}
.afp-cat:active{transform:scale(.95)}
.afp-cat.is-active{background:var(--afp-accent);border-color:var(--afp-accent);color:#fff;box-shadow:0 4px 12px rgba(179,39,38,.28)}

/* ── layout ── */
.afp-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
.afp-map{
  height:560px;border-radius:24px;overflow:hidden;min-width:0;
  border:1px solid var(--afp-line);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 34px rgba(0,0,0,.07);
  position:sticky;top:96px;
}
.afp-list{display:flex;flex-direction:column;gap:12px;min-height:200px;min-width:0}

/* ── place card ── */
.afp-card{
  background:var(--afp-card);border:1px solid var(--afp-line);
  border-radius:20px;padding:15px;cursor:pointer;display:flex;gap:13px;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 6px 16px rgba(0,0,0,.025);
}
.afp-card:active{transform:scale(.99)}
.afp-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.09);border-color:#dcdce1}
.afp-card.is-paid{border-color:rgba(179,39,38,.35);background:linear-gradient(0deg,rgba(179,39,38,.03),rgba(179,39,38,.03)),#fff}
.afp-ic{
  flex:0 0 48px;width:48px;height:48px;border-radius:14px;
  background:var(--afp-fill);display:flex;align-items:center;justify-content:center;
  color:var(--afp-accent);background-size:cover;background-position:center;
}
.afp-ic svg{width:24px;height:24px}
.afp-card-body{flex:1;min-width:0}
.afp-card-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.afp-name{font-size:16px;font-weight:700;letter-spacing:-.01em;margin:0;display:flex;align-items:center;gap:7px;min-width:0}
.afp-name span.t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.afp-dist{flex:0 0 auto;color:var(--afp-accent);font-weight:700;font-size:12.5px;white-space:nowrap;background:var(--afp-fill);padding:3px 9px;border-radius:100px}
.afp-badge{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:100px;background:var(--afp-accent);color:#fff}
.afp-badge.v{background:#0a84ff}
.afp-meta{color:var(--afp-sub);font-size:13.5px;margin-top:2px;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.afp-cat-tag{display:inline-block;font-size:12px;font-weight:600;color:var(--afp-sub);margin-top:6px}
.afp-actions{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.afp-act{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-size:13px;font-weight:600;padding:7px 13px;border-radius:100px;
  background:var(--afp-fill);color:var(--afp-text);transition:background .15s;
}
.afp-act svg{width:15px;height:15px}
.afp-act:hover{background:#e8e8ed}
.afp-act:active{transform:scale(.95)}
.afp-act.primary{background:var(--afp-accent);color:#fff;box-shadow:0 4px 12px rgba(179,39,38,.30)}
.afp-act.primary:hover{background:var(--afp-accent2)}

.afp-empty{color:var(--afp-sub);text-align:center;padding:46px 16px;font-size:15px}
.afp-loading{color:var(--afp-sub);text-align:center;padding:46px 16px;font-size:15px}
.afp-spin{width:26px;height:26px;border:3px solid var(--afp-line);border-top-color:var(--afp-accent);border-radius:50%;margin:0 auto 12px;animation:afp-rot .8s linear infinite}
@keyframes afp-rot{to{transform:rotate(360deg)}}

/* leaflet pin */
.afp-pin{background:none;border:none}
.afp-pin span{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50% 50% 50% 0;
  background:#8e8e93;transform:rotate(-45deg);border:2.5px solid #fff;
  box-shadow:0 3px 8px rgba(0,0,0,.35);
}
.afp-pin span svg{width:14px;height:14px;color:#fff;transform:rotate(45deg)}
.afp-pin.paid span{background:var(--afp-accent)}
.afp-userdot{width:16px;height:16px;background:#0a84ff;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 4px rgba(10,132,255,.25)}

/* ── booking form (iOS) ── */
.afp-app.afp-booking{padding-top:40px}
.afp-book-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.afp-book-ic{
  flex:0 0 56px;width:56px;height:56px;border-radius:16px;
  background:linear-gradient(135deg,var(--afp-accent),var(--afp-accent2));
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 6px 18px rgba(179,39,38,.30);
}
.afp-book-ic svg{width:28px;height:28px}
.afp-title{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.afp-sub{color:var(--afp-sub);margin:0;font-size:15px}
.afp-form{
  background:var(--afp-card);border:1px solid var(--afp-line);
  border-radius:22px;padding:24px;max-width:720px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.06);
}
.afp-sec{
  font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--afp-accent);margin:6px 0 12px;padding-top:8px;
}
.afp-sec:first-child{padding-top:0}
.afp-form .afp-sec + .afp-row{margin-top:0}
.afp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.afp-row-3{grid-template-columns:1fr 1fr 1fr}
.afp-field{display:flex;flex-direction:column;min-width:0}
.afp-field.afp-full{grid-column:1 / -1}
.afp-field label{font-size:13px;font-weight:600;margin-bottom:6px;color:var(--afp-sub)}
.afp-field input,.afp-field select,.afp-field textarea{
  border:1px solid var(--afp-line);border-radius:12px;padding:12px 14px;
  font-size:16px;font-family:inherit;color:var(--afp-text);background:var(--afp-fill);width:100%;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.afp-field input:focus,.afp-field select:focus,.afp-field textarea:focus{
  outline:none;border-color:var(--afp-accent);background:#fff;box-shadow:0 0 0 4px rgba(179,39,38,.12);
}
.afp-btn{
  border:none;background:var(--afp-accent);color:#fff;border-radius:14px;
  padding:15px 26px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:background .15s;width:100%;margin-top:6px;
}
.afp-btn:hover{background:var(--afp-accent2)}
.afp-btn:disabled{opacity:.6;cursor:default}
.afp-msg{margin-top:14px;font-size:14px;font-weight:600;display:none;text-align:center}
.afp-msg.ok{display:block;color:#1a8a3a}
.afp-msg.err{display:block;color:var(--afp-accent)}

/* responsive */
@media (max-width:860px){
  .afp-layout{grid-template-columns:1fr}
  .afp-map{height:320px;order:1;position:relative;top:0}
  .afp-list{order:2}
  .afp-row,.afp-row-3{grid-template-columns:1fr}
  .afp-title{font-size:22px}
  .afp-search input{font-size:16px}
  .afp-act{padding:9px 14px;font-size:13.5px}
  .afp-card{border-radius:18px}
}
@media (prefers-reduced-motion:reduce){.afp-card,.afp-act,.afp-btn{transition:none}.afp-spin{animation:none}}
