/* The availability picker, shared by every page on guide.clubkudo.com.
   Its buttons set their own weight and padding: each page styles every
   <button> as a bold gold call to action, and the days must not inherit it.
   One copy, so the three pages cannot drift apart. It relies on each
   page's colour tokens: --ink --paper --surface --gold --goldText
   --stone --line. */
  /* width:100% and no border are here because this is a <button>, not the <a>
     it started as: a block-level anchor fills its container, a button
     shrink-wraps and sits left. */
  .btn-link{display:block;width:100%;margin:22px 0 0;padding:20px 18px;border:0;
    border-radius:14px;cursor:pointer;
    background:var(--gold);color:var(--goldText);text-decoration:none;text-align:center;
    font-family:"Cormorant Garamond",Garamond,Georgia,serif;font-size:21px;font-weight:700;
    letter-spacing:.4px}
  .btn-link:hover{filter:brightness(1.08)}
  .btn-link span{display:block;margin-top:5px;font-family:Montserrat,Helvetica,Arial,sans-serif;
    font-size:13.5px;font-weight:400;letter-spacing:0;opacity:.95}

  /* The picker's sheet. Same shapes as the links page so the two feel like
     one brand, but this is our own markup, on this page. */
  .sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
    padding:16px;background:rgba(0,0,0,.5);overflow-y:auto}
  .sheet[hidden]{display:none}
  .sheet-card{position:relative;width:100%;max-width:380px;box-sizing:border-box;margin:auto;
    background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;
    padding:68px 18px 18px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6);text-align:center}
  /* 68px of headroom and a 40px target: at 46px the close button sat 3px
     above the next-month arrow and people closed the sheet reaching for
     October. Same fix as the links page. */
  .sheet-x{position:absolute;top:8px;right:8px;width:40px;height:40px;padding:0;border:0;
    background:none;color:var(--ink);font-size:22px;line-height:1;opacity:.55;cursor:pointer;
    border-radius:999px;display:flex;align-items:center;justify-content:center}
  .sheet-x:hover{opacity:1;background:var(--paper)}

  .cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin:0 0 14px;padding:0 2px;font-size:17px;
    font-family:"Cormorant Garamond",Garamond,Georgia,serif}
  .cal-nav{width:44px;height:44px;flex:0 0 auto;padding:0;border:1px solid var(--line);
    border-radius:999px;background:none;color:var(--ink);font-size:20px;line-height:1;
    cursor:pointer;display:flex;align-items:center;justify-content:center}
  .cal-nav[disabled]{opacity:.3;cursor:default}
  .cal-title{display:flex;gap:2px;align-items:center;justify-content:center;min-width:0}
  .cal-pick{position:relative;display:inline-flex;align-items:center;cursor:pointer;
    font-weight:700;padding:6px 18px 6px 5px;border-radius:8px;background-repeat:no-repeat;
    background-position:right 4px center;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23857b70' stroke-width='1.5'/%3E%3C/svg%3E")}
  .cal-pick select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
    font-size:16px;padding:0;margin:0;border:0;-webkit-appearance:none;appearance:none}
  .cal-pick:hover,.cal-pick:focus-within{background-color:var(--paper)}
  .cal-dows,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
  .cal-grid>span{aspect-ratio:1}
  .cal-dows{font-size:10.5px;letter-spacing:1px;opacity:.55;text-align:center;margin-bottom:5px}
  .cal-day{aspect-ratio:1;border:1px solid transparent;border-radius:10px;background:var(--paper);
    color:var(--ink);font-family:Montserrat,Helvetica,Arial,sans-serif;font-size:13.5px;
    cursor:pointer;padding:0;font-weight:400}
  .cal-day:hover:not([disabled]){border-color:var(--gold)}
  .cal-day.past{opacity:.25;cursor:default;background:transparent}
  /* Marked, not blocked: a busy date still opens the same form. */
  .cal-day.busy{background:#9F752C52;border-color:#9F752C99;font-weight:600}
  .cal-key{display:flex;align-items:center;justify-content:center;gap:7px;margin:12px 0 0;
    font-size:11.5px;opacity:.7}
  .cal-key .dot{width:11px;height:11px;border-radius:3px;display:inline-block;
    background:#9F752C52;border:1px solid #9F752C99}

  .enq{display:flex;flex-direction:column;gap:10px;text-align:left}
  .enq-date{font-family:"Cormorant Garamond",Garamond,Georgia,serif;font-size:19px;
    text-align:center;margin:0 0 4px}
  .enq-warn{font-size:12.5px;line-height:1.5;margin:0 0 6px;text-align:center;
    background:#9F752C1f;border:1px solid #9F752C4d;border-radius:10px;padding:10px 12px}
  .enq textarea{width:100%;padding:15px 16px;font-size:16px;font-family:inherit;box-sizing:border-box;
    background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:12px}
  /* background-COLOR, not the shorthand: `background` resets background-image
     and took the select's chevron with it, leaving the browser's own arrow. */
  .enq input,.enq select,.enq textarea{background-color:var(--paper)}
  .enq-send{margin-top:2px}
  .enq-done .sub{margin-bottom:0}
  .cal-ask{margin:2px 40px 18px;text-align:center;font-family:"Cormorant Garamond",Garamond,Georgia,serif;
    font-weight:700;font-size:26px;line-height:1.2;color:var(--ink)}