/* [caroloptic] The date picker, shared by the location pages and the Varilux page.
 *
 * ⛔ ONE FILE, TWO PAGES, ON PURPOSE. The booking form is the only thing on either
 *    page that matters, and a second copy of this would drift from the first.
 *
 * Everything is namespaced cp-* and scoped under .cp-host, because these pages load
 * the site's entire stylesheet and a bare class name collides: `.cap` painted white
 * over half a hero, and `.dOra > div` split the time slots into three columns and
 * repainted them. Both were found by looking at the page, not by measuring it.
 *
 * Colour comes from the host through variables, so the location pages can be gold
 * on paper and Varilux can be marine on navy while the picker stays identical.
 */
.cp-host{
  --cp-accent:#BB7D29; --cp-accent-deep:#8F5F1F; --cp-accent-soft:#FBF3E8;
  --cp-ink:#17171A; --cp-mute:#6F6A62; --cp-line:#E6DFD4; --cp-off:#C4BDB2;
  --cp-bg:#fff; --cp-radius:6px;
}

.cp-host .cp-nav{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.cp-host .cp-title{flex:1;text-align:center;font-weight:700;line-height:1.2}
.cp-host .cp-arrow{flex:0 0 40px;width:40px;height:40px;padding:0;border:1px solid var(--cp-line);
  border-radius:var(--cp-radius);background:var(--cp-bg);color:var(--cp-ink);font:inherit;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.cp-host .cp-arrow:hover:not(:disabled){border-color:var(--cp-accent);color:var(--cp-accent-deep)}
.cp-host .cp-arrow:disabled{opacity:.3;cursor:default}

.cp-host table.cp-grid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:4px;
  margin:0;background:none;border:0}
.cp-host table.cp-grid th{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cp-mute);text-align:center;padding:0 0 4px;border:0;background:none}
.cp-host table.cp-grid td{padding:0;border:0;background:none;text-align:center}
.cp-host .cp-day{display:flex;align-items:center;justify-content:center;width:100%;height:40px;padding:0;
  border:1px solid transparent;border-radius:var(--cp-radius);background:none;color:var(--cp-off);
  font:inherit;line-height:1}
.cp-host button.cp-day{cursor:pointer;background:var(--cp-bg);border-color:var(--cp-line);
  color:var(--cp-ink);font-weight:700}
.cp-host button.cp-day:hover{border-color:var(--cp-accent);color:var(--cp-accent-deep);background:var(--cp-accent-soft)}
.cp-host button.cp-day[aria-pressed="true"]{background:var(--cp-accent);border-color:var(--cp-accent);color:#fff}

.cp-host .cp-msg{font-size:13px;color:var(--cp-mute);line-height:1.5;margin:8px 0 0;width:100%}

/* ⛔ The slots render straight into the module's own .dOra, with no wrapper element:
   custom.css sets `.dOra{column-count:3}` and paints every direct child DIV of it. */
.cp-host .dOra{margin:0;column-count:auto!important;display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start}
.cp-host .dCld{margin:0}
.cp-host .cp-doc{width:100%;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cp-mute);margin:8px 0 0}
.cp-host .dOra>.cp-doc:first-child{margin-top:0}
.cp-host .cp-slot{height:44px;padding:0 12px;min-width:66px;border:1px solid var(--cp-line);
  border-radius:var(--cp-radius);background:var(--cp-bg);color:var(--cp-ink);font:inherit;font-size:13px;
  line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.cp-host .cp-slot:hover{border-color:var(--cp-accent);color:var(--cp-accent-deep);background:var(--cp-accent-soft)}
.cp-host .cp-slot[aria-pressed="true"]{background:var(--cp-accent);border-color:var(--cp-accent);color:#fff}

/* The doctor is settled by the day, or by the time when two doctors share a day, so
   the select is never shown. It stays in the DOM because the module's submit reads it. */
.cp-host .bDct{display:none!important}
.cp-host .cp-hidden{display:none!important}