/* SkyDream Booking — FULL CSS */

/* ---------- Tokens ---------- */
:root{
  --sky-accent: #1e88e5;
  --sky-ok: #10b981;
  --sky-danger: #ef4444;
  --sky-muted: #64748b;
  --sky-ring: rgba(30,136,229,.28);
  --sky-bg: #ffffff;
  --sky-bg-alt: #f8fafc;
  --sky-border: #e5e7eb;
  --sky-text: #0f172a;
  --sky-text-dim: #334155;
  --sky-slot-taken-bg-pink:   #fde8e8;  /* soft pink */
  --sky-slot-taken-border:    #fecaca;  /* light red border */
  --sky-slot-taken-text:      #9ca3af;  /* muted grey text */
}

/* ---------- Calendar ---------- */
.sky-cal{
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: #ffffff;
  background: transparent;
  border: 1px solid var(--sky-border);
  border-radius: 12px;
  padding: 16px;
  max-width: 820px;
  margin: 12px auto;
  box-shadow: 0 6px 20px rgba(0,0,0,.04);
}

/* header */
.sky-cal > header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 12px;
}
.sky-cal .month{ font-weight:700; letter-spacing:.2px; }
.sky-cal .nav{ display:flex; gap:8px; }
.sky-cal .nav button{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--sky-border);
  background:#fff; cursor:pointer;
}
.sky-cal .nav button:hover{ background:var(--sky-bg-alt); }

/* grid */
.sky-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.sky-dayname{
  font-size:12px; color:#ffffff; text-align:center; padding:6px 0;
}

/* day cell */
.sky-cell{
    position: relative;
    aspect-ratio: 1 / 1;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 6px;
    display: flex;
    gap: 2;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    background: #fff;
}
.sky-cell:hover{ box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.sky-cell.disabled{ opacity:.45; pointer-events:none; filter:grayscale(.05); }
.sky-cell.full{ background:#fff7f7; }

.sky-cell .d{
  font-weight:600; font-size:13px; color:var(--sky-text);
  background:#f3f4f6; border-radius:8px; padding:2px 6px; display:inline-block;
}

/* tiny availability dot (badge) bottom-left */
.sky-cell .badge{
  position:absolute; left:10px; bottom:10px;
  width:14px; height:14px;
  border-radius:999px; padding:0; border:0; line-height:14px;
  background:#e5e7eb; /* neutral for out-of-month or default */
}

/* available */
.sky-cell:not(.disabled):not(.full) .badge{ background: var(--sky-ok); }

/* full */
.sky-cell.full .badge{ background:#f7b4b4; }

/* legend */
.sky-legend{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.sky-legend .pill{
  font-size:12px; padding:4px 10px; border-radius:999px;
  border:1px solid var(--sky-border); background:#eef2ff;
}
.sky-legend .pill:first-child{ background: var(--sky-ok); color:#fff; }
.sky-legend .pill:last-child{ background:#f7b4b4; }

/* ---------- Modal ---------- */
.sky-modal-backdrop{
  position: fixed; inset: 0; z-index: 9999;
  display:none; align-items:flex-start; justify-content:center;
  background: rgba(0,0,0,.35);
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:24px 12px;
}
.sky-modal{
  width:min(560px,96vw);
  background:#fff; border:1px solid var(--sky-border); border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  display:flex; flex-direction:column; overflow:hidden;
  max-height:min(720px,92vh);
}
.sky-modal > header{
  padding:14px 16px; font-weight:700; border-bottom:1px solid var(--sky-border);
  position:sticky; top:0; background:#fff; z-index:1;
}
.sky-close{
  position:absolute; top:8px; right:8px;
  width:34px; height:34px; border-radius:999px;
  border:1px solid var(--sky-border); background:#fff; color:var(--sky-text-dim);
  font-size:20px; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.sky-close:hover{ background:#f8fafc; }
.sky-close:focus{ outline:none; box-shadow:0 0 0 3px var(--sky-ring); }

/* content */
.sky-modal .body{ padding:16px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }

/* slots */
.sky-slots{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px; margin-bottom:12px;
}
.sky-slot{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; border-radius:10px; border:1px solid var(--sky-border);
  background:#fff; cursor:pointer; font-size:13px; padding:0 8px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sky-slot:hover{ background:#f9fafb; }
.sky-slot.selected{ border-color:var(--sky-accent); box-shadow:0 0 0 3px var(--sky-ring); }
.sky-slot.taken,.sky-slot:disabled { background:#f1f5f9; color:#94a3b8; border-style:dashed; cursor:not-allowed; }

/* form */
.sky-form{ display:grid; gap:10px; }
.sky-form label{ font-size:12px; color:var(--sky-text-dim); display:block; }
.sky-form input,.sky-form textarea{
  width:100%; height: 35px; padding:10px 12px; border:1px solid var(--sky-border); border-radius:10px; margin-top:6px; background:#fff;
}
.sky-form input:focus,.sky-form textarea:focus{ outline:none; border-color:var(--sky-accent); box-shadow:0 0 0 3px var(--sky-ring); }
.sky-submit{ height:40px; border:0; border-radius:10px; background:var(--sky-accent); color:#fff; font-weight:600; cursor:pointer; }
.sky-submit:disabled{ background:#cbd5e1; cursor:not-allowed; }
.sky-selected-hint{ color:var(--sky-text-dim); }

/* toast */
.sky-toast{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:10000;
  background:#111; color:#fff; padding:10px 14px; border-radius:8px;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; max-width:92vw;
}
.sky-toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }

/* a11y helper */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .sky-cal{ padding:12px; }
  .sky-cell{ border-radius: 8px;
        padding: 4px; min-height: 45px; }
  .sky-slots{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sky-cell .badge{
    left: 5px;
    bottom: 4px;
  }

  

  .sky-modal-backdrop{ align-items:stretch; padding:0; }
  .sky-modal{ width:100%; height:100%; max-height:100vh; border-radius:0; }
  .sky-modal .body{ padding:12px 16px; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .sky-slot,.sky-toast{ transition:none; }
}


/* ========== FIXES (drop-in overrides) ========== */

/* 1) Modal: absolutely no horizontal scroll */
.sky-modal, .sky-modal .body, .sky-modal-backdrop { overflow-x: hidden; }
.sky-modal, .sky-modal * { box-sizing: border-box; }     /* prevent width creep */
.sky-modal { width: min(560px, 96vw); max-width: 96vw; }  /* keep inside viewport */

/* Slot grid never pushes wider than modal */
.sky-slots { 
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  min-width: 0; 
}
@media (max-width: 640px){
  .sky-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Slot button: make sure text can't cause overflow */
.sky-slot{
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* taken = not clickable, pink background, line-through */
.sky-slot.taken{
  background: var(--sky-slot-taken-bg-pink);
  border-color: var(--sky-slot-taken-border);
  color: var(--sky-slot-taken-text);
  cursor: not-allowed;
  pointer-events: none;
  text-decoration-line: line-through;
  text-decoration-color: var(--sky-slot-taken-text);
  text-decoration-thickness: 2px;   /* makes the strike visible like before */
  box-shadow: none;                  /* never show focus/selected glow */
}

/* keep it stable on hover/active */
.sky-slot.taken:hover,
.sky-slot.taken:active{
  background: var(--sky-slot-taken-bg-pink);
  color: var(--sky-slot-taken-text);
  border-color: var(--sky-slot-taken-border);
}

/* safety: if any class accidentally adds "selected", neutralize it */
.sky-slot.taken.selected{
  box-shadow: none;
  border-color: var(--sky-slot-taken-border);
}