/* themaids Booking v4 — Pink Edition (matches themaids Ultralight Clean v2) */
:root{
  /* Theme palette (from Pink Edition) */
  --tmb-pink:#f8bbd0;
  --tmb-pink-dark:#000000;
  --tmb-pink-light:#f8bbd0;
  --tmb-gray-bg:#f1f1f1;
  --tmb-gray-dark:#374151;
  --tmb-gray-mid:#6b7280;
  --tmb-green:#25D366;
  --tmb-white:#ffffff;

  --tmb-radius:16px;
  --tmb-radius-sm:12px;
  --tmb-pill:999px;
  --tmb-shadow:0 6px 20px rgba(0,0,0,.08);
  --tmb-focus:0 0 0 3px rgba(233,30,99,.35);

  --tmb-border:#e5e7eb;
  --tmb-border-strong:#e2e8f0;

  --tmb-soft:#fff0f5;     /* نفس note vibe */
  --tmb-soft-2:#ffffff;   /* card */
}

/* Container */
.ybp{
  max-width:900px;
  margin:24px auto;
  padding:20px;
  background:var(--tmb-soft-2);
  border:1px solid var(--tmb-border);
  border-radius:var(--tmb-radius);
  box-shadow:var(--tmb-shadow);
  color:var(--tmb-gray-dark);
}

/* Title */
.ybp .ybp-title{
  margin:0 0 12px;
  color:var(--tmb-pink-dark);
  font-weight:900;
}

/* Grid */
.ybp-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
@media (max-width:640px){
  .ybp-grid{ grid-template-columns:1fr; }
}

/* Service cards */
.ybp-service{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--tmb-border-strong);
  border-radius:var(--tmb-radius-sm);
  cursor:pointer;
  background:var(--tmb-soft);
  transition:transform .12s ease, box-shadow .3s ease, border-color .2s ease;
}
.ybp-service:hover{
  transform:translateY(-1px);
  box-shadow:var(--tmb-shadow);
  border-color: color-mix(in srgb, var(--tmb-pink) 55%, var(--tmb-border-strong));
}
.ybp-service input{ accent-color: var(--tmb-pink-dark); }

/* Steps */
.ybp-step{ display:none; }
.ybp-step.is-active{ display:block; }

/* Rows */
.ybp-row{ display:flex; flex-direction:column; margin-bottom:12px; }
.ybp-row.ybp-two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.ybp-row label{
  font-weight:700;
  margin-bottom:6px;
  color:var(--tmb-gray-dark);
}

/* Inputs */
.ybp-row input,
.ybp-row select,
.ybp-row textarea{
  padding:10px 12px;
  border:1px solid var(--tmb-border-strong);
  border-radius:10px;
  background:var(--tmb-white);
  color:var(--tmb-gray-dark);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ybp-row input:focus,
.ybp-row select:focus,
.ybp-row textarea:focus{
  outline:none;
  box-shadow:var(--tmb-focus);
  border-color: color-mix(in srgb, var(--tmb-pink) 60%, var(--tmb-border-strong));
  background:#fff;
}

/* Actions */
.ybp-actions{
  display:flex;
  gap:10px;
  justify-content:space-between;
  margin-top:10px;
}

/* Buttons – match theme (.btn primary/call/whatsapp feel) */
.ybp-next,
.ybp-map-btn,
.ybp-prev,
.ybp-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border:0;
  border-radius:var(--tmb-pill);
  font-weight:900;
  cursor:pointer;
  box-shadow:var(--tmb-shadow);
  transition:transform .12s ease, filter .2s ease, background .3s ease;
}
.ybp-next:hover,
.ybp-map-btn:hover,
.ybp-prev:hover,
.ybp-submit:hover{ transform:translateY(-1px); }
.ybp-next:active,
.ybp-map-btn:active,
.ybp-prev:active,
.ybp-submit:active{ transform:translateY(0) scale(.98); }

/* Next/Map = pink gradient مثل btn.call/primary */
.ybp-next,
.ybp-map-btn{
  background:linear-gradient(180deg, var(--tmb-pink-light), var(--tmb-pink));
  color:var(--tmb-gray-dark);
}
.ybp-next:hover,
.ybp-map-btn:hover{
  filter:brightness(.97);
}

/* Prev = gray */
.ybp-prev{
  background:linear-gradient(180deg, #9ca3af, #6b7280);
  color:#fff;
}
.ybp-prev:hover{ filter:brightness(.97); }

/* Submit = WhatsApp green */
.ybp-submit{
  background:linear-gradient(180deg, #22c55e, #16a34a);
  color:#fff;
}
.ybp-submit:hover{ filter:brightness(.97); }

/* Hint & total */
.ybp-hint{
  font-size:.92rem;
  color:var(--tmb-gray-mid);
  margin:2px 0 8px;
}
.ybp-total{
  font-size:1.05rem;
  margin:8px 0 0;
  color:var(--tmb-gray-dark);
  font-weight:800;
}

/* Toast */
.ybp-toast{
  position:fixed;
  inset-inline:16px;
  bottom:16px;
  max-width:520px;
  margin:0 auto;
  background:var(--tmb-pink-dark);
  color:#fff;
  padding:16px 18px;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  z-index:9999;
}

/* Panels */
.ybp-panel{
  display:none;
  padding:12px;
  border:1px dashed color-mix(in srgb, var(--tmb-pink) 55%, #cbd5e1);
  border-radius:12px;
  background:var(--tmb-soft);
  margin-bottom:12px;
}
.ybp-panel.is-visible{ display:block; }