/* ============================================================
   PMCK — appointment booking
   Brand colours come from the theme variables, so this page
   recolours with a medical centre like everything else.
   ============================================================ */

/* The leaf pattern is decoration, so it sits behind everything and never
   competes with the form. Drop the artwork at assets/img/appointment-bg.png
   and it appears; remove the file and the page still works. */
.pmck-appt{
  background-color:var(--brand-soft);
  background-image:url('../img/appointment-bg.png');
  background-repeat:repeat-y;
  background-position:center top;
  background-size:100% auto;
  padding:56px 0 72px;
}
@media (max-width:880px){
  .pmck-appt{background-size:auto 420px;background-repeat:repeat-y;}
}
.pmck-appt__inner{max-width:1000px;margin:0 auto;padding:0 20px;}

/* ---- progress ---- */

.pmck-steps{
  list-style:none;margin:0 0 34px;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
}
.pmck-steps__i{position:relative;text-align:center;}
.pmck-steps__i::before{
  content:"";position:absolute;top:17px;left:0;right:0;height:2px;
  background:rgba(var(--brand-rgb),.22);
}
.pmck-steps__i.is-done::before,
.pmck-steps__i.is-current::before{background:var(--brand);}
.pmck-steps__n{
  position:relative;z-index:1;display:grid;place-items:center;
  width:36px;height:36px;margin:0 auto 12px;border-radius:50%;
  background:#C9D2C2;color:#fff;font-weight:700;font-size:17px;
}
.pmck-steps__i.is-current .pmck-steps__n{
  background:var(--brand);box-shadow:0 0 0 6px rgba(var(--brand-rgb),.16);
}
.pmck-steps__i.is-done .pmck-steps__n{background:var(--brand);}
.pmck-steps__i.is-done .pmck-steps__n::after{content:"\2713";}
.pmck-steps__i.is-done .pmck-steps__n{font-size:0;}
.pmck-steps__i.is-done .pmck-steps__n::after{font-size:18px;}
.pmck-steps__l{display:block;font-size:16px;font-weight:700;color:#8B968C;}
.pmck-steps__i.is-current .pmck-steps__l,
.pmck-steps__i.is-done .pmck-steps__l{color:var(--brand);}

/* ---- card ---- */

.pmck-appt__card{
  background:#fff;border-radius:14px;padding:38px 46px 42px;
  box-shadow:0 4px 26px rgba(2,48,32,.07);
}
.pmck-appt__kicker{
  display:block;text-align:center;color:var(--brand);
  font-weight:700;font-size:17px;margin-bottom:6px;
}
.pmck-appt__h{text-align:center;font-size:clamp(26px,3.4vw,38px);font-weight:700;margin:0 0 8px;}
.pmck-appt__sub{text-align:center;margin:0 auto;max-width:56ch;font-size:18px;}
.pmck-appt__rule{border:0;border-top:1px solid var(--line);margin:24px 0 26px;}

.pmck-pane{display:none;}
.pmck-pane.is-active{display:block;}

.pmck-appt__hp{position:absolute;left:-9999px;}

/* ---- fields ---- */

.pmck-f{display:block;margin-bottom:18px;}
.pmck-f > span{display:block;font-weight:600;font-size:17px;color:var(--brand-ink);margin-bottom:6px;}
.pmck-req{color:var(--red);margin-left:2px;}
.pmck-appt .wpcf7-form-control-wrap{display:block;}
.pmck-appt input[type="text"],
.pmck-appt input[type="tel"],
.pmck-appt input[type="email"],
.pmck-appt input[type="date"],
.pmck-appt select,
.pmck-appt textarea{
  width:100%;background:#F2F2F2;border:1px solid #D0D5DD;border-radius:10px;
  padding:13px 14px;font:inherit;color:var(--brand-ink);
}
.pmck-appt select{appearance:none;background-image:var(--pmck-caret);background-repeat:no-repeat;
  background-position:right 14px center;background-size:18px;padding-right:44px;}
.pmck-appt textarea{resize:vertical;min-height:112px;}
.pmck-appt .pmck-bad input,
.pmck-appt .pmck-bad select,
.pmck-appt .pmck-bad textarea{border-color:var(--red);background:#FDF3F2;}
.pmck-hint{display:block;margin-top:6px;font-size:15px;color:var(--muted);font-style:italic;}

.pmck-f2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;}
/* CF7 runs wpautop over the form, so a stray <p> can end up between the grid
   and its two columns and the layout silently collapses to one column.
   display:contents hands the grid its real children back. */
.pmck-f2 > p{display:contents;}
.pmck-f2 > br{display:none;}

/* Country code and number sit on one row. Targeted by field name rather than
   position: CF7 wraps each control in its own span, and wpautop can drop a <p>
   or a <br> between them, either of which breaks a positional selector. */
.pmck-f .pmck-tel{
  display:flex;gap:10px;align-items:stretch;flex-wrap:nowrap;
  font-weight:400;margin-bottom:0;
}
.pmck-tel > p{display:contents;}
.pmck-tel br{display:none;}
.pmck-tel .wpcf7-form-control-wrap{flex:1 1 auto;min-width:0;}
.pmck-tel [data-name="appt-dialcode"],
.pmck-tel .wpcf7-form-control-wrap.appt-dialcode{flex:0 0 122px;}
.pmck-tel select,
.pmck-tel input[type="tel"]{width:100%;}

.pmck-consent-line{margin:22px 0 12px;font-size:16px;}
.pmck-consent-line a{color:#2563EB;text-decoration:underline;}
.pmck-check{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px;font-size:16px;line-height:1.4;}
.pmck-check input{margin-top:4px;transform:scale(1.15);}

.pmck-appt__actions{display:flex;justify-content:center;gap:14px;margin-top:28px;}
.pmck-btn--ghost{background:#fff;color:var(--brand);border-color:var(--brand);}
.pmck-btn--ghost:hover{background:var(--brand-soft);color:var(--brand);border-color:var(--brand);}

.pmck-appt__error{
  margin:16px 0 0;background:#FDF3F2;border:1px solid var(--red);color:var(--red);
  border-radius:8px;padding:12px 16px;font-size:16px;
}

.pmck-appt__note{
  margin-top:26px;background:var(--brand-pale);border-radius:10px;
  padding:18px 22px;text-align:center;font-size:16px;line-height:1.5;
}
.pmck-appt__note strong{display:block;color:var(--brand-ink);font-size:17px;margin-bottom:4px;}

/* ---- date and time ---- */

.pmck-when{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.pmck-when__col{background:var(--brand-soft);border-radius:12px;padding:20px 22px 24px;}
.pmck-when__h{text-align:center;font-size:20px;font-weight:700;margin:0 0 8px;}
.pmck-when__note{text-align:center;margin:0 0 14px;font-size:15px;color:var(--muted);}

.pmck-cal__input{
  width:100%;background:#fff;border:1px solid #D0D5DD;border-radius:10px;
  padding:12px 14px;font:inherit;margin-bottom:14px;
}
.pmck-cal{background:#fff;border-radius:10px;padding:14px;}
.pmck-cal__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.pmck-cal__title{font-size:18px;color:var(--brand-ink);}
.pmck-cal__nav{
  width:32px;height:32px;border:1px solid var(--line);background:#fff;
  border-radius:8px;cursor:pointer;color:var(--brand-ink);line-height:1;
}
.pmck-cal__nav:hover{background:var(--brand-soft);}
.pmck-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;}
.pmck-cal__dow{font-size:14px;color:var(--muted);padding:4px 0;}
.pmck-cal__d{
  border:0;background:none;border-radius:7px;padding:8px 0;cursor:pointer;
  font:inherit;font-size:16px;color:var(--brand-ink);
}
.pmck-cal__d:hover{background:var(--brand-pale);}
.pmck-cal__d.is-off{color:#C2CBC4;cursor:default;}
.pmck-cal__d.is-off:hover{background:none;}
.pmck-cal__d.is-on{background:var(--brand);color:#fff;font-weight:700;}

.pmck-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pmck-slot{
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:12px 6px;cursor:pointer;font:inherit;font-size:17px;color:var(--brand-ink);
  transition:background .15s,color .15s;
}
.pmck-slot:hover{background:var(--brand-pale);}
.pmck-slot.is-on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700;}

/* ---- confirmation ---- */

.pmck-done{text-align:center;}
.pmck-done__tick{
  display:grid;place-items:center;width:52px;height:52px;margin:0 auto 18px;
  border-radius:50%;background:var(--accent);color:#fff;
}
.pmck-done__tick .pmck-i{width:52px;height:52px;color:var(--brand);}
.pmck-done__tick{background:none;}
.pmck-done__h{font-size:clamp(28px,4vw,42px);font-weight:700;margin:0 0 10px;}

.pmck-visit{
  margin:30px auto 0;max-width:640px;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:24px 26px 26px;
}
.pmck-visit__h{color:var(--accent);font-size:18px;font-weight:700;margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.pmck-visit__time{font-size:34px;font-weight:700;color:var(--brand-ink);letter-spacing:.04em;margin-bottom:18px;}
.pmck-visit__doc{background:var(--brand);color:#fff;border-radius:8px;padding:14px 18px;margin-bottom:18px;}
.pmck-visit__doc b{display:block;font-size:20px;}
.pmck-visit__doc span{font-size:16px;opacity:.9;}
.pmck-visit__rows{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left;}
.pmck-visit__row{display:flex;gap:10px;align-items:center;margin:0;}
.pmck-visit__ic{
  width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;flex-shrink:0;
}
.pmck-visit__ic .pmck-i{width:13px;height:13px;}
.pmck-visit__row b{font-size:17px;color:var(--brand-ink);font-weight:700;}

@media (max-width:880px){
  .pmck-appt__card{padding:26px 20px 30px;}
  .pmck-when{grid-template-columns:1fr;}
  .pmck-f2{grid-template-columns:1fr;gap:0;}
  .pmck-visit__rows{grid-template-columns:1fr;}
  .pmck-steps__l{font-size:14px;}
}
@media (max-width:520px){
  .pmck-appt{padding:32px 0 48px;}
  .pmck-appt__actions{flex-direction:column-reverse;}
  .pmck-appt__actions .pmck-btn{width:100%;justify-content:center;}
  .pmck-slots{grid-template-columns:1fr;}
}


/* ============================================================
   Contact Form 7 inside the wizard
   CF7 owns validation and submission; these rules only make its
   markup look like the approved design.
   ============================================================ */

.pmck-appt .wpcf7-form > p{margin:0;}
.pmck-appt .wpcf7-not-valid-tip{
  display:block;margin-top:6px;color:var(--red);font-size:15px;
}
.pmck-appt .wpcf7-response-output{
  margin:18px 0 0!important;border-radius:8px;padding:12px 16px!important;
  border-width:1px!important;font-size:16px;
}
.pmck-appt .wpcf7-spinner{display:block;margin:12px auto 0;}

/* the date input is filled by the calendar, so it should not look typable */
.pmck-appt input[readonly]{background:#fff;cursor:default;}

/* time slots are a CF7 radio group drawn as a button grid */
.pmck-slots .wpcf7-list-item{margin:0;}
.pmck-slots .wpcf7-radio{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pmck-slots.pmck-bad .wpcf7-list-item-label{border-color:var(--red);}
.pmck-slots label{display:block;cursor:pointer;margin:0;}
.pmck-slots input[type="radio"]{position:absolute;opacity:0;pointer-events:none;}
.pmck-slots .wpcf7-list-item-label{
  display:block;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:12px 6px;font-size:17px;color:var(--brand-ink);
  transition:background .15s,color .15s,border-color .15s;
}
.pmck-slots label:hover .wpcf7-list-item-label{background:var(--brand-pale);}
.pmck-slots input[type="radio"]:checked + .wpcf7-list-item-label{
  background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700;
}
.pmck-slots input[type="radio"]:focus-visible + .wpcf7-list-item-label{
  outline:2px solid var(--brand-ink);outline-offset:2px;
}

/* consent radios read as a list, not a row */
.pmck-consent-group .wpcf7-list-item{display:block;margin:0 0 8px;}
.pmck-consent-group .wpcf7-list-item-label{font-size:16px;line-height:1.4;}

/* CF7 puts the submit inside our own actions row */
.pmck-appt .wpcf7-submit{
  display:inline-flex;align-items:center;
  background:var(--brand);color:#fff;border:2px solid var(--brand);
  border-radius:10px;padding:13px 20px;font-weight:700;font-size:18px;cursor:pointer;
  transition:background .18s,color .18s;
}
.pmck-appt .wpcf7-submit:hover{background:var(--brand-dark);}


/* the native date input, so it matches the text fields */
.pmck-appt input[type="date"]{
  width:100%;background:#F2F2F2;border:1px solid #D0D5DD;border-radius:10px;
  padding:12px 14px;font:inherit;color:var(--brand-ink);
}
.pmck-appt input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;}
/* Hidden by script — the specialty row when the doctor is already known.
   Not `hidden`, because CF7's own styles win against the attribute. */
.pmck-hidden{display:none !important;}