/* Задача 005: блок цін номера. Кольори — GUIDEBOOK Crona 2022 + style.css ver 3.55 */
.cr-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.cr-price-block{max-width:640px;font-family:'Raleway',sans-serif;color:#3a2616}
.cr-price-block__sub{margin:0 0 24px;font-size:15px;line-height:1.6;color:#222}

/* перемикач харчування */

/* таблиця сезонів */
.cr-prices{width:100%;border-collapse:collapse;margin:0;font-variant-numeric:tabular-nums}
.cr-prices th{font:400 12px 'loraregular',serif;letter-spacing:3px;text-transform:uppercase;color:#3a2616;text-align:right;padding:0 14px 12px;white-space:nowrap;border:0}
.cr-prices th:first-child{text-align:left}
.cr-prices td{padding:16px 14px;text-align:right;border:0;border-top:1px solid #ececec;font-size:17px;color:#222;transition:background-color .25s}
.cr-prices td:first-child{text-align:left;font-weight:500;font-size:16px;color:#3a2616}
.cr-prices tr:last-child td{border-bottom:1px solid #ececec}
.cr-prices tr.is-current td{background:#f7efe3}
.cr-prices tr.is-current td:not(:first-child){font-weight:600;color:#3a2616}
.cr-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cr-tags:empty{display:none}
.cr-tag{font:400 13px/1 'loraregular',serif;color:#3a2616;border:1px solid #c6974a;padding:4px 10px}
.cr-tag.is-yours{background:#3a2616;border-color:#3a2616;color:#fff}
.cr-foot{margin:14px 0 0;font-size:14px;line-height:1.6;color:#6b5e53}

.cr-empty{padding:18px 0;border-top:1px solid #ececec;border-bottom:1px solid #ececec;font-size:15px;color:#222}

/* ціна у формі (всередині .booking-box, фон #a4c0c2) */
.cr-quote{margin-top:26px;padding-top:22px;border-top:1px solid #fff}
.cr-quote p{margin:0}
.cr-quote[hidden],.cr-quote__price[hidden]{display:none}
.cr-quote__nights{font-size:15px;color:#3a2616}
.cr-quote__price{margin:6px 0!important;font:400 30px/1.2 'Raleway',sans-serif;color:#3a2616;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.cr-quote__price small{font-size:15px}
.cr-quote__note{font:400 14px/1.5 'loraregular',serif;color:#3a2616}
@keyframes cr-bump{from{opacity:.15;transform:translateY(6px)}to{opacity:1;transform:none}}
.cr-quote__price.is-updated{animation:cr-bump .35s ease}

@media (max-width:767.98px){
  .cr-price-block{max-width:none}
}
@media (max-width:480px){
  .cr-prices th,.cr-prices td{padding-left:8px;padding-right:8px}
  .cr-prices td{font-size:16px}
  .cr-quote__price{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .cr-meal button,.cr-prices td{transition:none}
  .cr-quote__price.is-updated{animation:none}
}

/* сайт: style.css задає table/th/tr/td рамку rgba(164,192,194,.1) і padding 10px, button - line-height і transition;
   перебиваємо специфічністю через .cr-price-block, без !important */
.cr-price-block table.cr-prices,.cr-price-block .cr-prices tr{border:0;padding:0;background:transparent}
.cr-price-block .cr-prices th{border:0;padding:0 14px 12px}
.cr-price-block .cr-prices td{border:0;border-top:1px solid #ececec;padding:16px 14px}
.cr-price-block .cr-prices tr:last-child td{border-bottom:1px solid #ececec}
.cr-price-block .cr-prices caption{caption-side:top}
.cr-price-block{margin-bottom:28px}
.cr-price-block .cr-meal button{line-height:1.3;box-shadow:none;text-shadow:none}
.cr-price-block .cr-meal button:hover{border:0}
.cr-price-block .cr-meal button + button:hover{border-left:1px solid #c6974a}
.cr-price-block p.cr-price-block__sub{margin:0 0 24px}
.cr-price-block p.cr-foot{margin:14px 0 0;font-size:14px;line-height:1.6;color:#6b5e53}
.cr-price-block p.cr-empty{margin:0;padding:18px 0;font-size:15px;color:#222}
.booking-box .cr-quote p{margin:0}
.booking-box .cr-quote p.cr-quote__price{margin:6px 0}
@media (max-width:480px){
  .cr-price-block .cr-prices th,.cr-price-block .cr-prices td{padding-left:8px;padding-right:8px}
  /* довгі підписи шапки (EN «Weekends, holidays») переносяться, щоб таблиця не ширшала за екран */
  .cr-price-block .cr-prices th{white-space:normal;letter-spacing:1.5px;vertical-align:bottom}
}

/* До 991px шапка номера/бронювання нижча за екран (422-450px), а стрілка «вниз» рахується від висоти екрана
   (у .header немає position:relative) - тож вона висіла над контентом. Ховаємо лише там, де є блок цін. */
@media (max-width:991.98px){
  body:has(.cr-price-block) .header .arrow{display:none}
}
/* Вміст номера з адмінки (stuff/gl_catalog/<id>_temp.php): div.new-text стоїть прямо в .row, без колонки,
   тож margin ряду -15px з'їдав бічний відступ. На десктопі не чіпаємо. */
@media (max-width:767.98px){
  .rooms-page .row > .new-text{padding-left:15px;padding-right:15px}
}

/* Доробка 2 (Андрій, 05.11): перемикач - один прямокутник, золота рамка 1px, без скруглень. Через .cr-price-block,
   бо стилі button зі style.css перебивали .cr-meal button (скруглення, темна рамка 3px). */
.cr-price-block .cr-meal{display:grid;grid-template-columns:1fr 1fr;border:1px solid #c6974a;border-radius:0;margin-bottom:22px}
.cr-price-block .cr-meal[hidden]{display:none}
.cr-price-block .cr-meal button{appearance:none;-webkit-appearance:none;margin:0;border:0;border-radius:0;box-shadow:none;outline:0;background:#fff;cursor:pointer;text-align:center;padding:14px 10px;font:500 15px/1.3 'Raleway',sans-serif;color:#3a2616;transition:background-color .2s,color .2s}
.cr-price-block .cr-meal button + button{border-left:1px solid #c6974a}
.cr-price-block .cr-meal button[aria-pressed="true"]{background:#3a2616;color:#fff}
.cr-price-block .cr-meal button:not([aria-pressed="true"]):hover{background:#f7efe3}
.cr-price-block .cr-meal button:focus-visible{outline:2px solid #c6974a;outline-offset:-5px}
@media (max-width:480px){.cr-price-block .cr-meal button{font-size:14px;padding:12px 6px}}
@media (prefers-reduced-motion:reduce){.cr-price-block .cr-meal button{transition:none}}

/* Ціни - жирні, цифри однакової висоти (Raleway за замовчуванням малює «старовинні» цифри). */
.cr-price-block .cr-prices td{font-weight:600;color:#3a2616;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.cr-price-block .cr-prices td:first-child{font-weight:400;color:#222}

/* Бронювання, від 992px: опис номера (.caption.cap_tar) у style.css абсолютний і центрується по висоті форми,
   тож довший за форму опис вилазив за межі секції (так було й до 005). Форма - праворуч у потоці, опис - ліворуч. */
@media (min-width:992px){
  .rooms2 > .col-md-5.offset-md-7{float:right;margin-left:0}
  .rooms2 > .caption.cap_tar{position:relative;left:auto;top:auto;width:50%;-webkit-transform:none;transform:none}
}
