body{background:var(--bg);min-height:100vh;display:flex;flex-direction:column}
.book-page{flex:1;display:flex;align-items:center;justify-content:center;padding:110px 48px 60px}
.book-card{
  background:var(--white);border:1px solid var(--border);border-radius:16px;
  padding:48px;max-width:520px;width:100%;box-shadow:0 4px 24px rgba(0,0,0,.03);
  opacity:0;transform:translateY(24px) scale(.985);
  animation:cardIn .7s .05s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes cardIn{to{opacity:1;transform:translateY(0) scale(1)}}
.book-card h1{font-family:var(--serif);font-size:28px;letter-spacing:-.5px;margin-bottom:6px}
.book-card .sub{font-size:14px;color:var(--text-mid);margin-bottom:32px;line-height:1.6}

.form-row{display:flex;gap:14px;margin-bottom:18px}
.form-row>*{flex:1}
.form-group{margin-bottom:18px;display:flex;flex-direction:column;gap:5px}
.form-group label{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--text-light)}
.form-group input,.form-group textarea{
  background:var(--bg);border:1px solid var(--border);border-radius:8px;
  padding:12px 14px;color:var(--text);font-size:14px;font-family:var(--sans);
  outline:none;transition:border-color .2s,box-shadow .2s;width:100%;
}
.form-group input::placeholder,.form-group textarea::placeholder{color:#bbb}
.form-group input:focus,.form-group textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form-group textarea{resize:none;min-height:90px}

/* ── Custom Select ── */
.custom-select{position:relative;width:100%}
.cs-trigger{
  width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;
  padding:12px 14px;color:var(--text);font-size:14px;font-family:var(--sans);
  cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;
  transition:border-color .2s,box-shadow .2s;
}
.cs-trigger:hover{border-color:var(--accent-warm)}
.custom-select.open .cs-trigger{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cs-value{color:var(--text)}
.cs-value.placeholder{color:#bbb}
.cs-arrow{width:16px;height:16px;stroke:var(--text-light);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.22,1,.36,1);flex-shrink:0}
.custom-select.open .cs-arrow{transform:rotate(180deg)}
.cs-menu{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--white);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.1);padding:6px;z-index:50;
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1);
}
.custom-select.open .cs-menu{opacity:1;transform:translateY(0);pointer-events:auto}
.cs-option{
  padding:11px 14px;border-radius:7px;font-size:14px;color:var(--text-mid);
  cursor:pointer;transition:background .15s,color .15s;
}
.cs-option:hover{background:var(--accent-soft);color:var(--text)}
.cs-option.selected{color:var(--accent);font-weight:600}

/* ── Calendar ── */
.calendar-wrap{
  background:var(--bg);border:1px solid var(--border);border-radius:12px;
  padding:20px;user-select:none;
}
.cal-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.cal-month{
  font-family:var(--serif);font-size:17px;font-weight:600;
  letter-spacing:-.3px;color:var(--text);
}
.cal-nav{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--border);
  background:var(--white);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;
}
.cal-nav:hover{border-color:var(--accent);background:var(--accent-soft)}
.cal-nav svg{width:16px;height:16px;stroke:var(--text-mid);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cal-nav:hover svg{stroke:var(--accent)}

.cal-days{
  display:grid;grid-template-columns:repeat(7,1fr);
  text-align:center;margin-bottom:6px;
}
.cal-days span{
  font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.8px;color:var(--text-light);padding:6px 0;
}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-cell{
  aspect-ratio:1;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:13.5px;font-weight:500;color:var(--text);
  cursor:pointer;transition:all .15s;position:relative;
}
.cal-cell:hover{background:var(--accent-soft);color:var(--accent)}
.cal-cell.today{font-weight:700;color:var(--accent)}
.cal-cell.today::after{
  content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--accent);
}
.cal-cell.selected{
  background:var(--accent);color:#fff;font-weight:600;
  box-shadow:0 2px 8px rgba(124,106,86,.25);
}
.cal-cell.selected::after{display:none}
.cal-cell.disabled{color:var(--border);cursor:default;pointer-events:none}
.cal-cell.blocked{color:var(--border);text-decoration:line-through;opacity:.5}
.cal-cell.empty{pointer-events:none}

.form-submit{
  width:100%;padding:14px;border-radius:100px;background:var(--accent);color:#fff;
  font-size:15px;font-weight:600;font-family:var(--sans);border:none;cursor:pointer;
  transition:background .25s,transform .25s,box-shadow .25s;margin-top:8px;
}
.form-submit:hover{background:var(--gold);transform:translateY(-2px);box-shadow:0 6px 20px rgba(124,106,86,.2)}
.form-submit:active{transform:translateY(0)}
.form-submit:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.success-msg{text-align:center;padding:40px 0;animation:cardIn .6s cubic-bezier(.22,1,.36,1)}
.success-check{
  width:64px;height:64px;border-radius:50%;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;margin:0 auto 24px;
}
.success-check svg{width:30px;height:30px;stroke:var(--accent);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:drawCheck .5s .25s forwards}
@keyframes drawCheck{to{stroke-dashoffset:0}}
.success-msg h2{font-family:var(--serif);font-size:24px;margin-bottom:10px}
.success-msg p{color:var(--text-mid);font-size:14px;line-height:1.7;max-width:340px;margin:0 auto}
.success-msg a{display:inline-block;margin-top:24px;color:var(--accent);font-weight:600;text-decoration:none;transition:color .2s}
.success-msg a:hover{color:var(--gold)}

/* ── TOS Checkbox ── */
.tos-agree{margin:20px 0 8px}
.check-label{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-mid);cursor:pointer;line-height:1.5}
.check-label input{display:none}
.checkmark{
  width:20px;height:20px;min-width:20px;border:1.5px solid var(--border);border-radius:5px;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
  background:var(--white);
}
.check-label input:checked~.checkmark{background:var(--accent);border-color:var(--accent)}
.check-label input:checked~.checkmark::after{
  content:'';display:block;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-1px;
}
.tos-agree a{color:var(--accent);font-weight:600;text-decoration:none}
.tos-agree a:hover{color:var(--gold);text-decoration:underline}

@media(max-width:600px){
  .book-page{padding:90px 16px 40px}
  .book-card{padding:32px 24px}
  .form-row{flex-direction:column;gap:0}
}
