/* Voyamara Egypt Planner Styles */
:root {
  --vp-yellow:#F5B800; --vp-yellow-dk:#D49A00; --vp-yellow-lt:#FFF9DC;
  --vp-teal:#2BBCD4; --vp-teal-dk:#1A98B0; --vp-teal-lt:#E0F7FB;
  --vp-navy:#1A2F47; --vp-white:#FFFFFF; --vp-sand:#FFFBF0;
  --vp-gray:#6B7280; --vp-gray-lt:#F3F4F6;
  --vp-font:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

#vplan-wrap { font-family:var(--vp-font); max-width:800px; margin:0 auto; }

/* Progress bar */
.vplan-progress { display:flex; gap:0; margin-bottom:32px; border-radius:10px; overflow:hidden; }
.vplan-step-indicator {
  flex:1; padding:12px 6px; text-align:center; background:var(--vp-gray-lt);
  font-size:11px; font-weight:700; color:var(--vp-gray); border-right:1px solid #E5E7EB;
  transition:all 0.3s;
}
.vplan-step-indicator:last-child { border-right:none; }
.vplan-step-indicator.active { background:var(--vp-navy); color:var(--vp-yellow); }
.vplan-step-indicator.done { background:var(--vp-teal); color:var(--vp-white); }
.vplan-step-num { display:block; font-size:16px; margin-bottom:2px; }

/* Steps */
.vplan-step { display:none; }
.vplan-step.active { display:block; animation:vplan-in 0.3s ease; }
@keyframes vplan-in { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.vplan-step-title { font-family:Georgia,serif; font-size:22px; font-weight:700; color:var(--vp-navy); margin-bottom:6px; }
.vplan-step-sub { font-size:14px; color:var(--vp-gray); margin-bottom:24px; }

/* Form elements */
.vplan-field { margin-bottom:20px; }
.vplan-label { display:block; font-weight:700; font-size:14px; color:var(--vp-navy); margin-bottom:7px; }
.vplan-input, .vplan-select, .vplan-textarea {
  width:100%; padding:12px 14px; border:1.5px solid #E5E7EB;
  border-radius:10px; font-size:14px; font-family:var(--vp-font);
  color:var(--vp-navy); background:var(--vp-white); transition:border-color 0.2s;
  outline:none;
}
.vplan-input:focus, .vplan-select:focus, .vplan-textarea:focus { border-color:var(--vp-teal); }
.vplan-textarea { min-height:100px; resize:vertical; }

.vplan-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* Radio + Checkbox grids */
.vplan-radio-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.vplan-radio-card {
  position:relative; cursor:pointer;
}
.vplan-radio-card input { position:absolute; opacity:0; width:0; height:0; }
.vplan-radio-label {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--vp-white); border:2px solid #E5E7EB; border-radius:12px;
  padding:16px 12px; cursor:pointer; transition:all 0.2s; text-align:center;
  font-size:13px; font-weight:700; color:var(--vp-navy);
}
.vplan-radio-card input:checked + .vplan-radio-label {
  border-color:var(--vp-yellow); background:var(--vp-yellow-lt); color:var(--vp-navy);
}
.vplan-radio-label:hover { border-color:var(--vp-teal); background:var(--vp-teal-lt); }
.vplan-radio-icon { font-size:28px; }

.vplan-check-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.vplan-check-card { position:relative; }
.vplan-check-card input { position:absolute; opacity:0; }
.vplan-check-label {
  display:flex; align-items:center; gap:8px;
  background:var(--vp-white); border:1.5px solid #E5E7EB; border-radius:9px;
  padding:10px 13px; cursor:pointer; transition:all 0.2s;
  font-size:13px; font-weight:600; color:var(--vp-navy);
}
.vplan-check-card input:checked + .vplan-check-label { border-color:var(--vp-teal); background:var(--vp-teal-lt); color:var(--vp-teal-dk); }
.vplan-check-label:hover { border-color:var(--vp-yellow); background:var(--vp-yellow-lt); }

/* Budget range */
.vplan-budget-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }

/* Days slider */
.vplan-slider-wrap { display:flex; align-items:center; gap:16px; }
.vplan-slider { flex:1; height:6px; accent-color:var(--vp-yellow); cursor:pointer; }
.vplan-slider-val { background:var(--vp-yellow); color:var(--vp-navy); font-weight:800; font-size:18px; min-width:48px; text-align:center; padding:6px 10px; border-radius:8px; }

/* Days auto-calc */
.vplan-days-info { background:var(--vp-teal-lt); border:1.5px solid var(--vp-teal); border-radius:8px; padding:10px 14px; font-size:13px; color:var(--vp-teal-dk); font-weight:600; margin-top:8px; display:none; }

/* Navigation buttons */
.vplan-nav { display:flex; justify-content:space-between; align-items:center; margin-top:28px; }
.vplan-btn-next {
  background:var(--vp-yellow); color:var(--vp-navy); border:none;
  border-radius:10px; padding:13px 28px; font-size:15px; font-weight:800;
  cursor:pointer; font-family:var(--vp-font); transition:all 0.2s;
}
.vplan-btn-next:hover { background:var(--vp-yellow-dk); transform:translateY(-1px); }
.vplan-btn-prev {
  background:none; border:1.5px solid #E5E7EB; color:var(--vp-gray);
  border-radius:10px; padding:13px 24px; font-size:14px; font-weight:700;
  cursor:pointer; font-family:var(--vp-font); transition:all 0.2s;
}
.vplan-btn-prev:hover { border-color:var(--vp-navy); color:var(--vp-navy); }
.vplan-btn-submit {
  background:var(--vp-teal); color:var(--vp-white); border:none;
  border-radius:10px; padding:14px 32px; font-size:15px; font-weight:800;
  cursor:pointer; font-family:var(--vp-font); transition:all 0.2s;
}
.vplan-btn-submit:hover { background:var(--vp-teal-dk); }
.vplan-btn-submit:disabled { opacity:0.6; cursor:wait; }

/* Results */
#vplan-results { display:none; }
#vplan-results.active { display:block; animation:vplan-in 0.4s ease; }

.vplan-results-header {
  background:linear-gradient(135deg,var(--vp-navy),#243B55);
  color:white; border-radius:16px 16px 0 0; padding:28px 32px; text-align:center;
}
.vplan-results-header h2 { font-family:Georgia,serif; font-size:26px; color:var(--vp-yellow); margin-bottom:8px; }
.vplan-results-header p { color:rgba(255,255,255,0.7); font-size:14px; }

.vplan-summary-bar {
  background:var(--vp-yellow-lt); border:2px solid var(--vp-yellow);
  padding:16px 24px; display:flex; flex-wrap:wrap; gap:16px;
}
.vplan-summary-item { font-size:13px; font-weight:700; color:var(--vp-navy); }

.vplan-day-card {
  background:var(--vp-white); border:1.5px solid #E5E7EB;
  border-radius:12px; margin:12px 0; overflow:hidden;
}
.vplan-day-header {
  background:var(--vp-navy); color:var(--vp-white);
  padding:12px 18px; font-weight:800; font-size:14px;
}
.vplan-day-body { padding:16px 18px; display:flex; flex-direction:column; gap:10px; }

.vplan-activity-main, .vplan-activity-alt {
  border-radius:10px; padding:13px 16px;
}
.vplan-activity-main { background:var(--vp-yellow-lt); border-left:4px solid var(--vp-yellow); }
.vplan-activity-alt  { background:var(--vp-teal-lt); border-left:4px solid var(--vp-teal); }

.vplan-act-badge { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:5px; }
.vplan-activity-main .vplan-act-badge { color:var(--vp-yellow-dk); }
.vplan-activity-alt  .vplan-act-badge { color:var(--vp-teal-dk); }

.vplan-act-title { font-weight:800; font-size:15px; color:var(--vp-navy); margin-bottom:5px; }
.vplan-act-meta { font-size:12px; color:var(--vp-gray); display:flex; gap:12px; flex-wrap:wrap; }
.vplan-act-price { color:var(--vp-teal-dk); font-weight:700; }
.vplan-act-link {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--vp-navy); color:var(--vp-white);
  padding:6px 14px; border-radius:7px; font-size:12px; font-weight:700;
  text-decoration:none; margin-top:8px; transition:background 0.2s;
}
.vplan-act-link:hover { background:var(--vp-navy-lt,#243B55); color:var(--vp-white); }
.vplan-act-link.teal { background:var(--vp-teal); }
.vplan-act-link.teal:hover { background:var(--vp-teal-dk); }

.vplan-transfer-card {
  background:var(--vp-teal-lt); border:1.5px solid var(--vp-teal);
  border-radius:12px; padding:16px 18px; margin:12px 0;
  display:flex; align-items:center; justify-content:space-between;
}

.vplan-cta-bar {
  background:linear-gradient(135deg,var(--vp-navy),#243B55);
  border-radius:0 0 16px 16px; padding:24px 32px; text-align:center;
}
.vplan-cta-bar p { color:rgba(255,255,255,0.7); font-size:14px; margin-bottom:16px; }
.vplan-wa-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:#25D366; color:white; padding:14px 28px; border-radius:12px;
  font-size:15px; font-weight:800; text-decoration:none; border:none;
  cursor:pointer; font-family:var(--vp-font); margin:0 6px 8px;
  transition:background 0.2s;
}
.vplan-wa-btn:hover { background:#1DAB53; color:white; }
.vplan-email-confirm { color:rgba(255,255,255,0.6); font-size:13px; margin-top:8px; }

/* Loading */
.vplan-loading { text-align:center; padding:48px; }
.vplan-spinner { width:44px; height:44px; border:4px solid var(--vp-yellow-lt); border-top-color:var(--vp-yellow); border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto 16px; }
@keyframes spin { to{transform:rotate(360deg)} }

@media (max-width:600px) {
  .vplan-row { grid-template-columns:1fr; }
  .vplan-radio-grid { grid-template-columns:1fr 1fr; }
  .vplan-check-grid { grid-template-columns:1fr; }
  .vplan-budget-grid { grid-template-columns:1fr 1fr; }
  .vplan-step-indicator .vplan-step-num { display:none; }
}

/* ---- Mobile: results screen fits nicely ---- */
@media (max-width:600px) {
  #vplan-wrap { max-width:100%; }

  .vplan-results-header { padding:20px 16px; border-radius:12px 12px 0 0; }
  .vplan-results-header h2 { font-size:19px; line-height:1.25; }
  .vplan-results-header p { font-size:12.5px; }

  .vplan-summary-bar { padding:12px 14px; gap:8px 14px; }
  .vplan-summary-item { font-size:12px; }

  .vplan-day-header { padding:10px 14px; font-size:13px; }
  .vplan-day-body { padding:12px 14px; gap:8px; }
  .vplan-activity-main, .vplan-activity-alt { padding:11px 13px; }
  .vplan-act-title { font-size:14px; }
  .vplan-act-meta { font-size:11.5px; gap:8px; }

  .vplan-transfer-card { flex-direction:column; align-items:flex-start; gap:10px; padding:14px; }
  .vplan-transfer-card .vplan-act-link { margin-top:0; }

  .vplan-cta-bar { padding:20px 16px; border-radius:0 0 12px 12px; }
  .vplan-cta-bar p { font-size:13px; }
  .vplan-wa-btn { width:100%; justify-content:center; font-size:14px; padding:13px 16px; margin:0 0 8px; }
}