/* ===== Mekka Booking Pro — Boxed & Responsive UI (v1.2.4 styles only) ===== */
:root{
  --mbp-bg:#f5f7fb;
  --mbp-card:#ffffff;
  --mbp-border:#e5e7eb;
  --mbp-muted:#64748b;
  --mbp-accent:#0ea5e9;
  --mbp-accent-600:#0284c7;
  --mbp-success:#16a34a;
  --mbp-text:#0f172a;
  --mbp-shadow:0 10px 25px rgba(2,6,23,.06);
}

.mbp-wrap{
  direction:rtl;
  text-align:right;
  font-family:Tajawal, Segoe UI, Arial, sans-serif;
  color:var(--mbp-text);
  background:var(--mbp-bg);
  padding:24px;
}

/* Boxed container */
.mbp-container{
  max-width:1100px;
  margin:0 auto;
}
.mbp-box{
  background:var(--mbp-card);
  border:1px solid var(--mbp-border);
  border-radius:18px;
  box-shadow:var(--mbp-shadow);
  padding:22px;
}

/* Step indicators */
.mbp-steps{display:flex;gap:10px;justify-content:center;margin:6px 0 22px}
.mbp-step{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #cdd6e1;color:var(--mbp-muted);background:#fff;
  font-weight:600;
}
.mbp-step.active{background:var(--mbp-accent);border-color:var(--mbp-accent);color:#fff}

/* Cards */
.mbp-card{
  background:#fff;border:1px solid var(--mbp-border);
  border-radius:16px;padding:16px;margin-bottom:16px;
  box-shadow:0 3px 12px rgba(2,6,23,.04);
}
.mbp-badge{background:#111;color:#fff;border-radius:6px;padding:3px 8px;font-size:12px;display:inline-block}

/* Grid of packages */
.mbp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1024px){ .mbp-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:680px){ .mbp-grid{grid-template-columns:1fr;} }

/* Fields */
.mbp-field{margin:10px 0}
.mbp-field label{display:block;font-size:14px;color:var(--mbp-muted);margin-bottom:6px}
.mbp-field input, .mbp-field select, .mbp-field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--mbp-border);border-radius:10px;background:#fff;
}
.mbp-field input:focus, .mbp-field select:focus, .mbp-field textarea:focus{
  outline:none;border-color:var(--mbp-accent);box-shadow:0 0 0 3px rgba(14,165,233,.15)
}

/* Buttons */
.mbp-btn{
  background:#111;color:#fff;border:none;border-radius:10px;padding:11px 18px;cursor:pointer;
  transition:transform .05s ease, background .2s ease; font-weight:600
}
.mbp-btn:hover{transform:translateY(-1px)}
.mbp-btn.mbp-primary{background:var(--mbp-accent)}
.mbp-btn.mbp-primary:hover{background:var(--mbp-accent-600)}
.mbp-btn.mbp-muted{background:#64748b}
.mbp-price{color:var(--mbp-success);font-weight:800;font-size:24px}

/* Summary box */
.mbp-summary{
  border:1px dashed #d6dde7;border-radius:12px;padding:14px;margin-top:10px;background:#f8fafc
}

/* Visibility */
.mbp-hidden{display:none}

/* Headings */
.mbp-title{font-size:28px;margin:0 0 14px;text-align:center}
.mbp-subtitle{font-size:18px;color:var(--mbp-muted);text-align:center;margin:0 0 18px}

/* Narrow screens tweaks */
@media(max-width:560px){
  .mbp-wrap{padding:14px}
  .mbp-box{padding:16px}
  .mbp-title{font-size:22px}
  .mbp-price{font-size:20px}
  .mbp-step{width:30px;height:30px}
}

/* Fallback if template didn't include container elements */
.mbp-wrap{max-width:1100px;margin:0 auto;background:var(--mbp-bg);}