:root{
  --blue:#303D9E; --blue-d:#26307e; --red:#FF3C47;
  --ink:#1f2430; --muted:#6b7280; --line:#e4e7ee; --bg:#f6f7fb;
}
*{box-sizing:border-box;}
body{margin:0;font-family:"Segoe UI",system-ui,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.5;}
a{color:var(--blue);text-decoration:none;}
h1,h2,h3{margin:0 0 .4em;}
.pub-container{max-width:1080px;margin:0 auto;padding:0 20px;}
.narrow{max-width:680px;}
.muted{color:var(--muted);}

/* Шапка */
.pub-header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:3px solid var(--blue);
  box-shadow:0 1px 6px rgba(0,0,0,.06);}
.pub-header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 20px;}
.pub-logo img{height:44px;display:block;}
.pub-nav{display:flex;align-items:center;gap:22px;}
.pub-nav a{color:var(--ink);font-weight:500;}
.pub-nav a:hover{color:var(--blue);}
.pub-nav .pub-login{background:var(--blue);color:#fff;padding:7px 16px;border-radius:8px;}
.pub-nav .pub-login:hover{background:var(--blue-d);}

/* Кнопки */
.pbtn{display:inline-block;background:var(--blue);color:#fff;padding:9px 20px;border:none;border-radius:8px;
  font:inherit;font-weight:600;cursor:pointer;}
.pbtn:hover{background:var(--blue-d);}
.pbtn-lg{padding:13px 30px;font-size:16px;}
.pbtn-ghost{background:#fff;color:var(--blue);border:1px solid var(--blue);}
.pbtn-ghost:hover{background:var(--blue);color:#fff;}

/* Hero */
.hero{background:linear-gradient(120deg,#303D9E 0%,#5a3aa0 55%,#FF3C47 130%);color:#fff;}
.hero-in{padding:84px 20px;text-align:center;}
.hero h1{font-size:44px;margin-bottom:.2em;}
.hero-sub{font-size:20px;opacity:.95;margin:.2em 0;}
.hero-addr{opacity:.9;margin:.6em 0 1.4em;}
.hero .pbtn-lg{background:#fff;color:var(--blue);}
.hero .pbtn-lg:hover{background:#f0f0ff;}

/* Секции */
.section{padding:56px 0;}
.section h2{font-size:30px;text-align:center;margin-bottom:1em;}
.section-alt{background:var(--bg);}

/* Карточки номеров */
.rooms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
.room-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;
  flex-direction:column;box-shadow:0 2px 10px rgba(0,0,0,.04);}
.room-kind{color:var(--red);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.03em;}
.room-card h3{font-size:20px;margin:.3em 0 .2em;}
.room-price{font-size:26px;font-weight:700;color:var(--blue);}
.room-price span{font-size:14px;font-weight:400;color:var(--muted);}
.room-cap{color:var(--muted);margin:.3em 0;}
.room-desc{color:var(--ink);font-size:14px;flex:1;}
.room-card .pbtn-ghost{margin-top:14px;text-align:center;}

/* Форма брони */
.book-form{margin-top:18px;}
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;}
.bk-field{display:flex;flex-direction:column;gap:5px;}
.bk-field.bk-wide{grid-column:1 / -1;}
.bk-lbl{font-size:14px;color:var(--muted);}
.pfield{padding:11px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;width:100%;background:#fff;}
.pfield:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(48,61,158,.12);}
textarea.pfield{resize:vertical;}
.bk-err{color:var(--red);font-size:12px;}
.book-form .pbtn-lg{margin-top:18px;}

.pmsg{background:#eef6ff;border:1px solid #cfe3ff;padding:10px 14px;border-radius:8px;margin:8px 0;}
.pmsg.err{background:#fdecec;border-color:#f5c6c6;color:#a33;}

/* Виджет бронирования */
.booking-widget{max-width:780px;margin:18px auto 0;}
.bw-bar{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 2px 10px rgba(0,0,0,.04);}
.bw-bar label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted);}
.bw-bar input{padding:10px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;}
.bw-bar input[type=number]{width:90px;}
.bw-bar .pbtn{height:42px;}

.bw-results{margin-top:18px;}
.bw-note{text-align:center;color:var(--muted);padding:18px;}
.bw-period{text-align:center;font-weight:600;color:var(--blue);margin-bottom:14px;}
.bw-room{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px;}
.bw-room-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.bw-room-h b{font-size:17px;}
.bw-price{color:var(--blue);font-weight:600;}
.bw-free{margin-left:auto;color:var(--muted);font-size:13px;}
/* Иконки кроватей (flat-color) */
:root{--bed-navy:#2a2f86;}
.bw-beds{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;}
.bed-unit{padding:6px;}
.bed-svg{width:172px;height:auto;display:block;overflow:visible;}
.bed-svg.single{width:150px;}

/* общий контур и базовые цвета */
.bed .mattress,.bed .foot,.bed .rail,.bed .pillow,.bed .blanket,.bed .head,
.post,.ladder rect{stroke:var(--bed-navy);stroke-width:3;}
.bed .mattress{fill:#f6df79;}
.bed .foot{fill:#f0806f;}
.bed .rail{fill:#58c07a;}
.bed .rail-h{fill:#bdebc8;stroke:none;}
.bed .pillow{fill:#7aa6e0;}
.bed .pillow-h{fill:#aac6ef;stroke:none;}
.bed .blanket{fill:#8fd0a8;}
.bed .blanket-h{fill:none;stroke:#cdeedd;stroke-width:2.4;}
.bed .head{fill:#f4c79a;stroke-width:2.4;}
.bed .hair{fill:#5b4636;}
.bed .eye{fill:var(--bed-navy);}
.post{fill:#58c07a;}.post-h{fill:#bdebc8;}
.ladder rect{fill:#58c07a;}

/* состояния */
.bed.free{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .14s ease;}
.bed.free:hover{transform:scale(1.06);}
.bed.busy{cursor:default;}
.bed .check{opacity:0;transition:opacity .12s;}
.bed.selected .check{opacity:1;}
.bed.selected .mattress{stroke:var(--blue);stroke-width:4;}
.check-c{fill:var(--blue);stroke:#fff;stroke-width:2;}
.check-m{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* анимации: дыхание одеяла + всплывающие Zzz */
.zzz text{fill:var(--bed-navy);font-weight:700;font-family:inherit;transform-box:fill-box;}
.zzz .z1{font-size:9px;}.zzz .z2{font-size:11px;}.zzz .z3{font-size:13px;}
@keyframes bz-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@keyframes bz-z{0%{opacity:0;transform:translateY(3px)}25%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.breathe{transform-box:fill-box;animation:bz-breathe 2.6s ease-in-out infinite;}
.zzz .z1{animation:bz-z 2.4s ease-in infinite;}
.zzz .z2{animation:bz-z 2.4s ease-in infinite .5s;}
.zzz .z3{animation:bz-z 2.4s ease-in infinite 1s;}
@media(prefers-reduced-motion:reduce){.breathe,.zzz text{animation:none;}}

.bw-confirm{margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);}
.bw-summary{background:#f3f6ff;border:1px solid #d5deff;border-radius:10px;padding:12px 14px;margin-bottom:16px;}
.bw-total{color:var(--blue);font-size:18px;}
.bw-scount{font-weight:600;margin-bottom:6px;}
.bw-srow{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:14px;}
.bw-srow span{color:var(--muted);}
.bw-stotal{border-top:1px solid #d5deff;margin-top:6px;padding-top:8px;font-weight:600;}
.bw-hint{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:3px;}

/* Успех */
.success-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:40px;text-align:center;
  box-shadow:0 2px 14px rgba(0,0,0,.05);}
.success-ic{width:64px;height:64px;border-radius:50%;background:#5cb85c;color:#fff;font-size:34px;line-height:64px;
  margin:0 auto 16px;}
.success-box h1{font-size:28px;}
.success-box p{color:var(--muted);margin:.6em 0 1.4em;}

/* Подвал */
.pub-footer{background:#1f2430;color:#cbd0db;padding:34px 0 18px;margin-top:20px;}
.pub-footer-in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.pub-footer a{color:#cbd0db;}
.pub-footer a:hover{color:#fff;}
.pf-name{color:#fff;font-weight:700;font-size:17px;margin-bottom:4px;}
.pf-copy{margin-top:22px;padding-top:14px;border-top:1px solid #343a48;font-size:13px;color:#8b93a3;}

@media(max-width:560px){
  .book-grid{grid-template-columns:1fr;}
  .hero h1{font-size:32px;} .hero-sub{font-size:17px;}
  .pub-nav{gap:12px;font-size:14px;}
}
