/* ============================================================
   NHF Vendor Scheduling — Public Styles (Phase A)
   - Clean, modern, theme-friendly (Bootstrap/Tailwind-ish)
   - Responsive 2-column layout on large screens
   - Keeps Phase B stability + mobile weekday-only calendar
   - Selected dates: label outside + textbox + chips with ×
   ============================================================ */

/* ========== Root / Typography ========== */
.nhf-vs {
  font-family: "myriad-pro","Myriad Pro","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Theme-safe: no heavy outer container styles */
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
}

/* Stability + prevents border-based layout shifts */
.nhf-vs,
.nhf-vs * { box-sizing: border-box; }

/* ========== Layout (Phase A) ========== */
/* Stacked by default; two columns on larger screens */
.nhf-vs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

@media (min-width: 992px) {
  .nhf-vs {
    grid-template-columns: minmax(340px, 420px) 1fr;
    gap: 28px;
  }
}

/* Avoid extra bottom spacing when stacked */
.nhf-vs-grid { margin: 0; }

/* ========== Calendar Wrapper ========== */
.nhf-vs-grid {
  /* Light “panel” feel without looking like a theme card */
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  background: #fff;
  padding: 14px;
}

/* Top nav bar (modern) */
.nhf-vs-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;

  background:#f5f6f8;
  color:#111;
  border:1px solid #e6e6e6;

  border-radius:12px;
  padding:10px 10px;
  margin-bottom: 10px;
}

/* Month label centered */
.nhf-month-label {
  flex:1;
  text-align:center;
  color:#111;
  font-weight:700;
  letter-spacing:.2px;
  font-size: 1rem;
}

/* Arrow buttons */
.nhf-vs-nav .nhf-prev,
.nhf-vs-nav .nhf-next {
  width:34px;
  height:34px;
  min-width:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid transparent;
  background:#fff;
  color:#111;

  border-radius:999px;
  cursor:pointer;
  line-height:1;

  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.nhf-vs-nav .nhf-prev:hover,
.nhf-vs-nav .nhf-next:hover {
  background:#f8fafc;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.nhf-vs-nav .nhf-prev:active,
.nhf-vs-nav .nhf-next:active {
  transform: translateY(1px);
}
.nhf-vs-nav .nhf-prev:focus-visible,
.nhf-vs-nav .nhf-next:focus-visible {
  outline:2px solid rgba(31,78,121,.45);
  outline-offset:2px;
}
.nhf-vs-nav .nhf-disabled {
  opacity:.45;
  cursor:not-allowed;
  pointer-events:none;
  box-shadow: none;
}

/* ========== Calendar Grid ========== */
.nhf-calendar { width: 100%; }

.nhf-grid { display:flex; flex-direction:column; gap:6px; }
.nhf-row  { display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; }

/* Day cells: stable and modern */
.nhf-cell {
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  aspect-ratio:1/1;

  border-radius:12px;
  border:1px solid #e6e6e6;  /* constant border */
  background:#fff;

  font-weight:600;
  font-size:1.05rem;
  line-height:1;
  cursor:pointer;

  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

/* Weekday headers */
.nhf-head .nhf-h {
  border:none;
  background:transparent;
  font-weight:700;
  color:#6b7280; /* muted */
  cursor:default;
  font-size:.85rem;
  margin: 2px 0 0;
  text-transform:uppercase;
  letter-spacing: .6px;
  aspect-ratio:auto;
}
.nhf-head .nhf-cell { aspect-ratio:auto; }

/* States */
.nhf-out     { opacity:.25; cursor:default; }
.nhf-weekend { color:#9ca3af; background:#fafafa; border-style:dashed; cursor:not-allowed; }
.nhf-booked  { background:#f3f4f6; color:#9ca3af; text-decoration:line-through; cursor:not-allowed; }
.nhf-locked  { background:#fafafa; color:#9ca3af; cursor:not-allowed; }
.nhf-past    { opacity:.55; background:#f7f7f7; cursor:not-allowed; }

/* Today indicator (ring) */
.nhf-today { box-shadow: inset 0 0 0 3px rgba(31,78,121,.45); }

/* Selected day (calendar only) */
.nhf-calendar .nhf-cell.nhf-selected {
  background:#f2f7ff;
  border-color: rgba(31,78,121,.45);
  box-shadow: 0 0 0 3px rgba(31,78,121,.22);
}

/* Hover for selectable days */
.nhf-calendar .nhf-cell:not(.nhf-out):not(.nhf-weekend):not(.nhf-booked):not(.nhf-locked):not(.nhf-past):hover {
  background:#f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* ========== Help text (clean + consistent) ========== */
.post-content p.nhf-help {
  margin: 10px 0 0;
  font-size: .88rem;
  line-height: 1.45;
  color: #6b7280;
}

/* Optional: make <kbd> look modern */
.post-content p.nhf-help kbd {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border: 1px solid #e5e7eb;
  border-bottom-width: 2px;
  border-radius: 6px;
  background: #fff;
  color: #111;
  font-weight: 700;
  font-size: .8em;
}

/* ========== Form (Phase A polish) ========== */
.nhf-vs-form {
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  background: #fff;
  padding: 14px;
}

.nhf-vs-form .nhf-field { margin: .75rem 0 .35rem; }

.nhf-vs-form label {
  display:block;
  font-weight:700;
  color:#111;
  margin-bottom:.35rem;
}

.nhf-vs-form input,
.nhf-vs-form textarea {
  width:100%;
  padding:.65rem .8rem;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  color:#111;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  transition: box-shadow .15s ease, border-color .15s ease;
}

.nhf-vs-form input:focus,
.nhf-vs-form textarea:focus {
  outline:none;
  border-color: rgba(31,78,121,.45);
  box-shadow: 0 0 0 3px rgba(31,78,121,.18);
}

/* Submit */
.nhf-submit {
  margin-top: .9rem;
  width:100%;
  padding:.85rem 1rem;

  border: none;
  border-radius: 14px;

  background:#111;
  color:#fff;

  font-weight:800;
  cursor:pointer;

  box-shadow: 0 8px 18px rgba(0,0,0,.10);
  transition: transform .05s ease, box-shadow .15s ease, background-color .15s ease;
}
.nhf-submit:hover {
  background:#0b0b0b;
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}
.nhf-submit:active { transform: translateY(1px); }
.nhf-submit:focus-visible {
  outline:2px solid rgba(31,78,121,.45);
  outline-offset:2px;
}

.nhf-msg { min-height: 1.25rem; margin-top: .65rem; }

.nhf-msg--error { color:#b91c1c; font-weight:700; }
.nhf-msg--success { color: inherit; }

/* Success message */
.nhf-success {
  margin-top: .75rem;
  padding: .9rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  background: #ffffff;
  color: #111;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  font-weight: 700;
}

/* ============================================================
   Selected Dates (label outside + textbox + chips with ×)
   ============================================================ */
.nhf-vs-form .nhf-selected { margin-top: .85rem; }

.nhf-vs-form .nhf-selected strong {
  display:block;
  font-weight:700;
  margin: 0 0 .35rem 0;
  color:#111;
}

.nhf-vs-form .nhf-selected-box {
  width:100%;
  padding: .65rem .8rem;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  min-height: 48px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

/* Chips */
.nhf-vs-form .nhf-chip {
  appearance:none;
  -webkit-appearance:none;

  border:1px solid #e5e7eb;
  background:#fff;
  color:#111;

  border-radius:999px;

  display:inline-flex;
  align-items:center;
  gap:.4rem;

  margin:.25rem .4rem 0 0;
  padding:.3rem .55rem .3rem .65rem;

  font-size:.92rem;
  line-height:1;

  cursor:pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.nhf-vs-form .nhf-chip:hover {
  background:#f8fafc;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.nhf-vs-form .nhf-chip:focus-visible {
  outline:2px solid rgba(31,78,121,.45);
  outline-offset:2px;
}

.nhf-vs-form .nhf-chip-x {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-weight:900;
  font-size:12px;
  line-height:1;
  color:#6b7280;
}

/* ===== Month Label Inline Spinner ===== */
.nhf-month-loading::after {
  content:"";
  display:inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border: 2px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.55);
  border-radius: 50%;
  animation: nhf-spin .8s linear infinite;
}
@keyframes nhf-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Mobile: hide weekends (Mon–Fri only) + keep stability
   ============================================================ */
@media (max-width: 768px) {

  /* Keep the “panel” feel */
  .nhf-vs-grid,
  .nhf-vs-form {
    padding: 12px;
    border-radius: 14px;
  }

  /* Switch to 5-column grid */
  .nhf-row { grid-template-columns: repeat(5, 1fr); }

  /* Hide Sun/Sat in header */
  .nhf-head .nhf-h:nth-child(1),
  .nhf-head .nhf-h:nth-child(7) { display:none; }

  /* Hide Sun/Sat in each week row */
  .nhf-row .nhf-cell:nth-child(1),
  .nhf-row .nhf-cell:nth-child(7) { display:none; }

  /* Slightly smaller numbers to fit nicely */
  .nhf-cell { font-size: 1rem; }

  /* Reduce hover lift effects on touch devices */
  .nhf-calendar .nhf-cell:hover { transform: none; box-shadow: none; }
}