@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');

:root {
  --m-navy:   #0a1628;
  --m-teal:   #00b4d8;
  --m-teal2:  #0096b4;
  --m-tglow:  rgba(0,180,216,0.12);
  --m-white:  #ffffff;
  --m-off:    #f7f9fc;
  --m-border: #e2e8f0;
  --m-text:   #1a2638;
  --m-mid:    #4a5568;
  --m-light:  #718096;
  --m-green:  #10b981;
  --m-red:    #ef4444;
  --m-radius: 16px;
  --m-shadow: 0 20px 60px rgba(0,0,0,0.1);
}

.medix-apt-container {
  font-family: 'DM Sans', sans-serif;
  max-width: 860px;
  margin: 0 auto;
  padding: 16px;
}

/* ── PROGRESS BAR ── */
.medix-progress-bar {
  margin-bottom: 32px;
}
.medix-progress-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.medix-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.medix-step-circle {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--m-border);
  color: var(--m-light);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif;
  font-size: 0.9rem; font-weight: 700;
  transition: all 0.3s;
  border: 2px solid transparent;
}
.medix-progress-step.active .medix-step-circle {
  background: var(--m-navy);
  color: var(--m-white);
  border-color: var(--m-teal);
  box-shadow: 0 0 0 4px var(--m-tglow);
}
.medix-progress-step.done .medix-step-circle {
  background: var(--m-teal);
  color: var(--m-white);
  border-color: var(--m-teal);
}
.medix-step-label {
  font-size: 0.7rem; font-weight: 600;
  color: var(--m-light);
  text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color 0.3s;
}
.medix-progress-step.active .medix-step-label,
.medix-progress-step.done  .medix-step-label { color: var(--m-navy); }
.medix-progress-line {
  flex: 1;
  height: 2px;
  background: var(--m-border);
  margin: 0 8px;
  margin-bottom: 26px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}
.medix-progress-line.done { background: var(--m-teal); }

/* ── CARD ── */
.medix-apt-card {
  background: var(--m-white);
  border-radius: 24px;
  box-shadow: var(--m-shadow);
  overflow: hidden;
  border: 1px solid var(--m-border);
}
.medix-apt-card-header {
  background: linear-gradient(135deg, var(--m-navy), #112244);
  padding: 40px 48px 36px;
  position: relative;
  overflow: hidden;
}
.medix-apt-card-header::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 80% 50%, rgba(0,180,216,0.15), transparent 60%),
                    linear-gradient(rgba(0,180,216,0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,180,216,0.04) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}
.medix-apt-card-header h2 {
  font-family: 'Syne', sans-serif;
  font-size: 1.8rem; font-weight: 800;
  color: var(--m-white); margin: 0 0 10px;
  position: relative; z-index: 1;
}
.medix-apt-card-header p {
  font-size: 0.95rem; color: rgba(255,255,255,0.65);
  margin: 0; line-height: 1.7; max-width: 560px;
  position: relative; z-index: 1;
  font-weight: 300;
}

/* ── STEPS ── */
.medix-apt-form { padding: 0; }
.medix-step { padding: 40px 48px; animation: medixFadeIn 0.35s ease; }
.medix-step-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.15rem; font-weight: 700;
  color: var(--m-navy); margin: 0 0 8px;
}
.medix-step-hint {
  font-size: 0.88rem; color: var(--m-light);
  margin: 0 0 24px; line-height: 1.6;
}

/* ── TYPE CARDS ── */
.medix-type-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin: 24px 0;
}
.medix-type-card { cursor: pointer; }
.medix-type-card input { display: none; }
.medix-type-inner {
  background: var(--m-off);
  border: 2px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 28px 24px;
  transition: all 0.25s;
  position: relative;
}
.medix-type-card:hover .medix-type-inner {
  border-color: var(--m-teal);
  background: var(--m-tglow);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,180,216,0.12);
}
.medix-type-card input:checked + .medix-type-inner {
  border-color: var(--m-teal);
  background: #f0faff;
  box-shadow: 0 0 0 3px rgba(0,180,216,0.15);
}
.medix-type-icon { font-size: 2.2rem; margin-bottom: 12px; }
.medix-type-inner h4 {
  font-family: 'Syne', sans-serif;
  font-size: 1rem; font-weight: 700;
  color: var(--m-navy); margin: 0 0 8px;
}
.medix-type-inner p {
  font-size: 0.83rem; color: var(--m-light);
  margin: 0; line-height: 1.6;
}
.medix-type-check {
  display: none;
  position: absolute; top: 12px; right: 14px;
  background: var(--m-teal); color: white;
  font-size: 0.68rem; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.medix-type-card input:checked + .medix-type-inner .medix-type-check { display: inline-block; }

/* ── REGION GRID ── */
.medix-region-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin: 20px 0;
}
.medix-region-card { cursor: pointer; }
.medix-region-card input { display: none; }
.medix-region-inner {
  background: var(--m-off);
  border: 2px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 18px 14px;
  transition: all 0.25s;
  text-align: center;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
.medix-region-card:hover .medix-region-inner {
  border-color: var(--m-teal);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,180,216,0.12);
}
.medix-region-card input:checked + .medix-region-inner {
  border-color: var(--m-navy);
  background: var(--m-navy);
}
.medix-region-card input:checked + .medix-region-inner h4 { color: var(--m-white); }
.medix-region-card input:checked + .medix-region-inner p { color: rgba(255,255,255,0.55); }
.medix-region-inner h4 {
  font-family: 'Syne', sans-serif;
  font-size: 0.82rem; font-weight: 700;
  color: var(--m-navy); margin: 0 0 5px;
  transition: color 0.2s; line-height: 1.3;
}
.medix-region-inner p {
  font-size: 0.69rem; color: var(--m-light);
  margin: 0; line-height: 1.4;
  transition: color 0.2s;
}

/* International card — spans full bottom row or stands out */
.medix-region-intl { grid-column: span 2; }
.medix-region-intl-inner {
  background: linear-gradient(135deg, #f0faff, #e8f8fc) !important;
  border-color: rgba(0,180,216,0.3) !important;
}
.medix-region-card.medix-region-intl input:checked + .medix-region-intl-inner {
  background: var(--m-navy) !important;
  border-color: var(--m-teal) !important;
}

/* Country selector */
.medix-country-wrap {
  margin-top: 16px;
  animation: medixFadeIn 0.3s ease;
}
.medix-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23718096' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px !important;
  cursor: pointer;
}

/* ── DATE/TIME ── */
.medix-datetime-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; margin-bottom: 8px;
}
.medix-label {
  display: block;
  font-size: 0.82rem; font-weight: 600;
  color: var(--m-text);
  margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.medix-req { color: var(--m-red); }
.medix-field-hint { font-size: 0.75rem; color: var(--m-light); margin-top: 6px; }
.medix-input, .medix-textarea {
  width: 100%; padding: 12px 16px;
  border: 1.5px solid var(--m-border);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem; color: var(--m-text);
  background: var(--m-white);
  transition: all 0.2s;
  outline: none;
  box-sizing: border-box;
}
.medix-input:focus, .medix-textarea:focus {
  border-color: var(--m-teal);
  box-shadow: 0 0 0 3px rgba(0,180,216,0.1);
}
.medix-input.error { border-color: var(--m-red); }
.medix-textarea { resize: vertical; min-height: 100px; }

/* Time slots */
.medix-time-placeholder {
  font-size: 0.82rem; color: var(--m-light);
  padding: 16px; text-align: center;
  border: 1.5px dashed var(--m-border);
  border-radius: 10px;
}
.medix-time-slots {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.medix-time-btn {
  padding: 8px 14px;
  border: 1.5px solid var(--m-border);
  border-radius: 8px;
  background: var(--m-white);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem; font-weight: 500;
  color: var(--m-mid); cursor: pointer;
  transition: all 0.2s;
}
.medix-time-btn:hover { border-color: var(--m-teal); color: var(--m-teal); }
.medix-time-btn.active {
  background: var(--m-navy); color: var(--m-white);
  border-color: var(--m-navy);
}

/* Interest tags */
.medix-interest-grid {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 12px;
}
.medix-interest-tag { cursor: pointer; }
.medix-interest-tag input { display: none; }
.medix-interest-tag span {
  display: inline-block;
  padding: 8px 16px;
  border: 1.5px solid var(--m-border);
  border-radius: 100px;
  font-size: 0.83rem; font-weight: 500;
  color: var(--m-mid); background: var(--m-white);
  transition: all 0.2s;
}
.medix-interest-tag:hover span { border-color: var(--m-teal); color: var(--m-teal); }
.medix-interest-tag input:checked + span {
  background: var(--m-navy); color: var(--m-white);
  border-color: var(--m-navy);
}

/* ── DETAILS GRID ── */
.medix-details-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; margin-bottom: 20px;
}
.medix-form-group { margin-bottom: 0; }

/* ── SUMMARY CARD ── */
.medix-summary-card {
  background: var(--m-off);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 20px 24px;
  margin: 20px 0;
}
.medix-summary-card h4 {
  font-family: 'Syne', sans-serif;
  font-size: 0.88rem; font-weight: 700;
  color: var(--m-navy); margin: 0 0 14px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.medix-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.medix-summary-item { display: flex; flex-direction: column; gap: 2px; }
.medix-summary-item span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--m-light); }
.medix-summary-item strong { font-size: 0.85rem; color: var(--m-text); }

/* ── PRIVACY ── */
.medix-privacy-check { margin-top: 8px; }
.medix-checkbox-label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.83rem; color: var(--m-mid);
  line-height: 1.6; cursor: pointer;
}
.medix-checkbox-label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.medix-checkbox-label a { color: var(--m-teal); text-decoration: none; }

/* ── NAVIGATION ── */
.medix-step-nav {
  display: flex; justify-content: space-between;
  align-items: center; margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--m-border);
}
.medix-next-btn, .medix-submit-btn {
  background: linear-gradient(135deg, var(--m-navy), #1a3a6b);
  color: var(--m-white);
  padding: 14px 32px;
  border: none; border-radius: 10px;
  font-family: 'Syne', sans-serif;
  font-size: 0.95rem; font-weight: 700;
  cursor: pointer; transition: all 0.25s;
  box-shadow: 0 4px 14px rgba(10,22,40,0.25);
}
.medix-next-btn:hover, .medix-submit-btn:hover {
  background: linear-gradient(135deg, #112244, #1a3a6b);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10,22,40,0.3);
}
.medix-submit-btn {
  background: linear-gradient(135deg, var(--m-teal), var(--m-teal2));
  box-shadow: 0 4px 18px rgba(0,180,216,0.3);
}
.medix-submit-btn:hover { background: linear-gradient(135deg, var(--m-teal2), #007a96); }
.medix-prev-btn {
  background: none; border: 1.5px solid var(--m-border);
  color: var(--m-mid);
  padding: 12px 24px; border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
}
.medix-prev-btn:hover { border-color: var(--m-navy); color: var(--m-navy); }

/* ── SUCCESS ── */
.medix-success-state {
  padding: 60px 48px;
  text-align: center;
  animation: medixFadeIn 0.5s ease;
}
.medix-success-icon { font-size: 4rem; margin-bottom: 20px; animation: medixBounce 0.5s ease; }
.medix-success-state h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.6rem; font-weight: 800;
  color: var(--m-navy); margin: 0 0 12px;
}
.medix-success-state p { font-size: 0.95rem; color: var(--m-mid); line-height: 1.7; max-width: 440px; margin: 0 auto 24px; }
.medix-ref-display {
  background: var(--m-off);
  border: 1px solid var(--m-border);
  border-radius: 10px;
  display: inline-block;
  padding: 12px 24px;
  font-size: 0.9rem; color: var(--m-mid);
  margin-bottom: 20px;
}
.medix-ref-display strong { font-family: 'Syne', sans-serif; font-size: 1.1rem; color: var(--m-teal); }
.medix-success-details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap: 10px; max-width: 480px; margin: 0 auto 28px;
  text-align: left;
}
.medix-success-detail-item {
  background: var(--m-white);
  border: 1px solid var(--m-border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.82rem; color: var(--m-mid);
}
.medix-btn-back-home {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 10px;
  background: var(--m-off); border: 1px solid var(--m-border);
  color: var(--m-mid); text-decoration: none;
  font-size: 0.88rem; font-weight: 500;
  transition: all 0.2s;
}
.medix-btn-back-home:hover { border-color: var(--m-navy); color: var(--m-navy); }

/* ── ERROR MESSAGES ── */
.medix-error-msg {
  display: none;
  background: #fef2f2; border: 1px solid #fecaca;
  color: var(--m-red);
  padding: 10px 16px; border-radius: 8px;
  font-size: 0.85rem; margin-top: 12px;
}
.medix-error-msg.visible { display: block; animation: medixFadeIn 0.2s ease; }

/* ── ANIMATIONS ── */
@keyframes medixFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes medixBounce {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .medix-apt-card-header { padding: 28px 24px; }
  .medix-step { padding: 28px 24px; }
  .medix-type-grid { grid-template-columns: 1fr; }
  .medix-region-grid { grid-template-columns: 1fr 1fr; }
  .medix-region-intl { grid-column: span 2; }
  .medix-datetime-grid { grid-template-columns: 1fr; }
  .medix-details-grid { grid-template-columns: 1fr; }
  .medix-summary-grid { grid-template-columns: 1fr; }
  .medix-step-label { display: none; }
  .medix-success-state { padding: 40px 24px; }
  .medix-progress-inner { gap: 0; }
}
@media (max-width: 400px) {
  .medix-region-grid { grid-template-columns: 1fr; }
  .medix-region-intl { grid-column: span 1; }
}