/* =========================================================
   Yasmeen Booking – Adam Cleaning Services Theme Style
   Colors: Sky Blue + Grass Green
   Style-only. No PHP / JS changes.
   ========================================================= */

/* =========================
   Theme Variables (NEW)
   ========================= */
:root{
  /* Brand */
  --yb-primary: var(--sky, #0ea5e9);
  --yb-primary-700: color-mix(in srgb, var(--yb-primary) 75%, #020617);
  --yb-accent: var(--grass, #22c55e);
  --yb-accent-700: color-mix(in srgb, var(--yb-accent) 75%, #020617);

  /* Base */
  --yb-dark: var(--dark, #020617);
  --yb-text: var(--text, #0f172a);
  --yb-muted: color-mix(in srgb, var(--yb-text) 65%, transparent);

  --yb-bg: var(--bg, #f8fafc);
  --yb-card: var(--white, #ffffff);

  /* UI */
  --yb-radius: var(--radius-lg, 18px);
  --yb-shadow: var(--shadow-soft, 0 15px 30px rgba(15,23,42,.08));
  --yb-transition: var(--transition, .25s ease);

  --yb-border: rgba(148,163,184,.35);
  --yb-border-soft: rgba(148,163,184,.22);

  --yb-focus: 0 0 0 3px color-mix(in srgb, var(--yb-primary) 28%, transparent);
}

/* =========================
   Wrapper
   ========================= */
.yb-wrap{
  max-width:980px;
  margin:24px auto;
  padding:0 12px;
}

/* =========================
   Main Card
   ========================= */
.ybp{
  max-width:980px;
  margin:24px auto;
  padding:22px;
  background:
    radial-gradient(circle at 0 0,
      color-mix(in srgb, var(--yb-primary) 14%, transparent),
      transparent 55%),
    radial-gradient(circle at 100% 100%,
      color-mix(in srgb, var(--yb-accent) 14%, transparent),
      transparent 55%),
    var(--yb-card);
  border:1px solid var(--yb-border);
  border-radius:var(--yb-radius);
  box-shadow:var(--yb-shadow);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--yb-text);
}

/* =========================
   Title
   ========================= */
.ybp-title{
  margin:0 0 12px;
  font-size:22px;
  font-weight:800;
  color:var(--yb-dark);
}
.ybp-title::after{
  content:"";
  display:block;
  width:72px;
  height:3px;
  margin-top:10px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--yb-primary),var(--yb-accent));
}

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

.ybp-service{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--yb-border);
  background:linear-gradient(180deg,#fff,var(--yb-bg));
  cursor:pointer;
  transition:transform var(--yb-transition),
             box-shadow var(--yb-transition),
             border-color var(--yb-transition);
}
.ybp-service:hover{
  transform:translateY(-2px);
  border-color:var(--yb-primary);
  box-shadow:0 16px 34px rgba(15,23,42,.12);
}
.ybp-service input{
  accent-color:var(--yb-primary);
}

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

/* =========================
   Panel
   ========================= */
.ybp-panel{
  display:none;
  margin:12px 0 16px;
  padding:14px;
  border-radius:16px;
  border:1px dashed var(--yb-primary);
  background:
    radial-gradient(850px 220px at 18% 0,
      color-mix(in srgb, var(--yb-primary) 14%, transparent),
      transparent 60%),
    radial-gradient(850px 220px at 82% 0,
      color-mix(in srgb, var(--yb-accent) 14%, transparent),
      transparent 55%),
    #fff;
}
.ybp-panel.is-visible{display:block;}

/* =========================
   Form Fields
   ========================= */
.ybp-row{
  display:flex;
  flex-direction:column;
  margin-bottom:15px;
}
.ybp-row.ybp-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media(max-width:640px){
  .ybp-row.ybp-two{grid-template-columns:1fr;}
}

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

.ybp-row input,
.ybp-row select,
.ybp-row textarea{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--yb-border-soft);
  background:#fff;
  color:var(--yb-text);
  font-size:16px;
  transition:border-color var(--yb-transition),
             box-shadow var(--yb-transition);
}

.ybp-row input:focus,
.ybp-row select:focus,
.ybp-row textarea:focus{
  outline:none;
  border-color:var(--yb-primary);
  box-shadow:var(--yb-focus);
}

.ybp-row input::placeholder,
.ybp-row textarea::placeholder{
  color:color-mix(in srgb,var(--yb-text) 55%, transparent);
}

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

/* =========================
   Buttons
   ========================= */
.ybp-next,
.ybp-prev,
.ybp-submit,
.ybp-map-btn{
  padding:12px 22px;
  border-radius:999px;
  font-weight:800;
  border:none;
  cursor:pointer;
  transition:transform var(--yb-transition),
             box-shadow var(--yb-transition);
}

.ybp-next{
  background:linear-gradient(135deg,var(--yb-primary),var(--yb-accent));
  color:#fff;
}
.ybp-submit{
  background:linear-gradient(135deg,var(--yb-accent),var(--yb-accent-700));
  color:#fff;
}
.ybp-map-btn{
  background:linear-gradient(135deg,var(--yb-primary),var(--yb-primary-700));
  color:#fff;
}
.ybp-prev{
  background:#fff;
  color:var(--yb-dark);
  border:1px solid var(--yb-border);
}

.ybp-next:hover,
.ybp-submit:hover,
.ybp-map-btn:hover,
.ybp-prev:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(15,23,42,.16);
}

/* =========================
   Helpers
   ========================= */
.ybp-hint{
  font-size:.92rem;
  color:var(--yb-muted);
}
.ybp-total{
  font-size:1.05rem;
  color:var(--yb-dark);
}

/* =========================
   Modal
   ========================= */
.yb-modal{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.6);
  display:none;
  padding:18px;
  z-index:9999;
}
.yb-modal-content{
  max-width:460px;
  margin:10vh auto 0;
  padding:28px;
  background:#fff;
  border-radius:16px;
  border:1px solid var(--yb-border);
  box-shadow:0 24px 60px rgba(2,6,23,.25);
}
.yb-modal-content h2{
  margin-top:0;
  color:var(--yb-dark);
}
.yb-modal-content h2::after{
  content:"";
  display:block;
  width:78px;
  height:3px;
  margin:10px auto 0;
  background:linear-gradient(90deg,var(--yb-primary),var(--yb-accent));
  border-radius:999px;
}

/* =========================
   Details Page
   ========================= */
.yb-details{
  max-width:900px;
  margin:24px auto;
  padding:20px;
  background:#fff;
  border-radius:var(--yb-radius);
  border:1px solid var(--yb-border);
  box-shadow:var(--yb-shadow);
}

.yb-details h2{margin:0 0 10px;}
.yb-details p{margin:8px 0;}
.yb-details ul{padding-inline-start:18px;}

/* =========================
   Detail Buttons
   ========================= */
.yb-buttons{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  margin-top:20px;
}
.yb-btn{
  padding:12px 20px;
  border-radius:14px;
  font-weight:800;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(135deg,var(--yb-primary),var(--yb-accent));
}

/* =========================
   RTL
   ========================= */
html[dir="rtl"] .ybp,
html[dir="rtl"] .yb-details{
  direction:rtl;
}
html[dir="rtl"] .yb-details ul{
  padding-inline-start:0;
  padding-inline-end:18px;
}

/* =========================
   Flatpickr
   ========================= */
.flatpickr-calendar{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto;
}