/* ====== Основной layout ====== */
.bk {
    padding: 0 0 80px;
}

.bk__container {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 20px;
}
.booking-page {
	padding:120px 0px;
}
.bk__layout {
    display: grid;
    grid-template-columns: 1fr clamp(18.5rem, 10.714rem + 12.165vw, 25.3125rem);
    gap: 40px;
    align-items: start;
    margin-top: 32px;
}
 
.bk__steps {
    display: flex;
    align-items: center;
	justify-content:center;
    gap: 8px;
    padding: 24px 0 0;
    flex-wrap: wrap;
}

.bk__step {
    font-size: 16px;
    font-weight: 400;
    color:#A6A09B;
    text-decoration: none;
	line-height: 1.5em;
    padding: 4px 0;
	letter-spacing: -0.019em;
    transition: color 0.2s;
    cursor: default;
}

.bk__step.is-active {
    color: #0C0A09;
    font-weight: 700;
}

.bk__step.is-completed {
    color: #1C1917;
    cursor: pointer;
}

.bk__step.is-completed:hover {
    color: #1c1917;
}

.bk__step.is-disabled {
    color: #d6d3d1;
    pointer-events: none;
}

.bk__step-sep {
    color: #d6d3d1; 
    font-size: 16px;
    margin-right: 10px;
}
 
.bk__panel {
    display: none;
}

.bk__panel.is-active {
    display: block;
    animation: bkFadeIn 0.3s ease;
}

@keyframes bkFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
 
.bk__title {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: clamp(2rem, 1.8397rem + 0.641vw, 2.25rem);
	font-family: Tinos;
    font-weight: 400;
    color: #1C1917;
	line-height: 1.2em;
    margin: 0 0 24px;
}

.bk__title-icon {
    flex-shrink: 0;
}
 
.bk__nav-buttons {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #f5f5f4;
}

.bk__btn-next,
.bk__btn-prev {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 34px;
    border-radius: 100px;
    font-size: 16px;
line-height:24px;
font-family: Inter;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
letter-spacing:-0.31px;
    border: none;
}

.bk__btn-next {
    background: #1c1917;
    color: #fff;
}

.bk__btn-next:hover:not(:disabled) {
    background: #292524;
}

.bk__btn-next:disabled {
    background: #d6d3d1;
    cursor: not-allowed;
}

.bk__btn-prev {
    background: transparent;
    color: #57534e;
    border: none;
}

.bk__btn-prev:hover {
    background: #f5f5f4;
}
 
.bk-location__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.bk-location__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: clamp(1.875rem, 1.7949rem + 0.3205vw, 2rem);
    border: 1px solid #F5F5F4;
    border-radius: 32px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    font-family: inherit;
}

.bk-location__card:hover:not(:disabled) {
    border-color: #a8a29e;
}

.bk-location__card.is-selected {
    border-color: #1c1917;
    background: #1c1917;
    color: #fff;
}

.bk-location__card.is-selected .bk-location__card-desc {
    color:rgba(255, 255, 255, 0.7);
}

.bk-location__card.is-selected .bk-location__card-icon svg {
    stroke: #fff;
}

.bk-location__card.is-coming-soon {
    opacity: 0.5;
    cursor: not-allowed;
}
 
.bk-location__check {
    position: absolute;
    top: clamp(1.875rem, 1.7949rem + 0.3205vw, 2rem);
    right: clamp(1.875rem, 1.7949rem + 0.3205vw, 2rem);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FFFFFF;
    display: none;
    align-items: center;
    justify-content: center;
}

.bk-location__card.is-selected .bk-location__check {
    display: flex;
}

.bk-location__card-icon {
    width: 32px;
    height: 32px;
}
.bk-location__check svg path {
	stroke:#1C1917;
}
.bk-location__card-title {
	font-family: 'Tinos';
	margin:16px 0 0 0;
font-weight: 400;
font-size: 24px;
line-height: 1.33em;
    color: #1C1917;
}
.bk-location__card.is-selected .bk-location__card-title {
	color: #fff;
}
.bk-location__card-desc {
    color: rgba(166, 160, 155, 1);
    margin: 0;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.31px;

}

/* ====== Шаг 2: Дома ====== */
.bk-house__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.bk-house__header .bk__title {
    margin-bottom: 0;
}

.bk-house__view-toggle {
    display: flex;
    gap: 4px;
    background: #f5f5f4;
    border-radius: 10px;
    padding: 4px;
}

.bk-house__view-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #78716c;
    cursor: pointer;
    transition: all 0.2s;
}

.bk-house__view-btn.is-active {
    background: #fff;
    color: #1c1917;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

 

.bk-house__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
    gap: 20px;
}

/* Карточка дома */
.bk-house__card {
    position: relative;
    border: 1px solid rgba(245, 245, 244, 1);
    border-radius: 32px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

.bk-house__card:hover {
    border-color: #a8a29e;
}

.bk-house__card.is-selected {
    border-color: #1c1917;
}

.bk-house__card-img {
    width: 100%;
    height: 310px;
    object-fit: cover;
    display: block;
}

.bk-house__card-body {
    padding: 24px;
}

.bk-house__card-name {
    font-size: 24px;
    font-weight: 400;
    color: #1C1917;
    margin: 0 0 4px;
font-family: Tinos;
line-height: 32px;
letter-spacing: 0px;

}

.bk-house__card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #78716c;
    margin: 0;
}

.bk-house__card-price {
    font-size: 14px;
    font-weight: 600;
    color: #1c1917;
    margin: 8px 0 0;
}

/* Галочка выбора на карточке дома */
.bk-house__card-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1c1917;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.bk-house__card.is-selected .bk-house__card-check {
    display: flex;
}

/* ====== Шаг 3: Дати + Календарь ====== */
.bk-dates__calendars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.bk-dates__cal {
    background: #fff;  
    padding:  0px;
}

.bk-dates__cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bk-dates__cal-title {
    font-size: 16px;
    font-weight: 600;
    color: #1c1917;
    text-transform: capitalize;
}

.bk-dates__cal-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: #57534e;
    transition: background 0.15s, color 0.15s;
}

.bk-dates__cal-nav:hover {
    background: #f5f5f4;
    color: #1c1917;
}

.bk-dates__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}

.bk-dates__weekdays span {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #a8a29e;
    padding: 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bk-dates__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0px;
}

/* Ячейка дня */
.bk-dates__day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: 14px;
    color: #1c1917;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    border: none;
    background: transparent;
    padding: 0;
}

.bk-dates__day:hover:not(.is-disabled):not(.is-empty) {
    background: #f5f5f4;
}

.bk-dates__day.is-empty {
    cursor: default;
}

.bk-dates__day.is-disabled {
    color: #d6d3d1;
    cursor: not-allowed;
}

.bk-dates__day.is-today {
    font-weight: 600;
    position: relative;
}

.bk-dates__day.is-today::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #292524;
}

.bk-dates__day.is-start,
.bk-dates__day.is-end {
    background: #1c1917 !important;
    color: #fff !important;
 
}

.bk-dates__day.is-start {
    border-radius: 40px 0 0 40px;
}

.bk-dates__day.is-end {
    border-radius: 0 40px 40px 0;
}

.bk-dates__day.is-start.is-end {
    border-radius: 40px;
}

.bk-dates__day.is-in-range {
    background: #f5f5f4;
    border-radius: 0;
}

.bk-dates__day.is-hover-range {
    background: #fafaf9;
    border-radius: 0;
}
 
.bk-dates__guests {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 24px 0;
	border-radius: 16px;
	border-top: 1px solid #F5F5F4;
}

.bk-dates__guests-info {
    flex: 1;
}

.bk-dates__guests-title {
	margin: 0 0 4px;
	font-family: 'Tinos';
	font-style: normal;
	font-weight: 400;
	font-size: 30px;
	line-height: 36px;
	color: #1C1917;
}

.bk-dates__guests-note {
	font-size: 14px;
	color: #79716B;
	margin: 0;
	line-height: 1.5;
	font-weight: 300;
}

.bk-dates__guests-counter {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0px;
	height: 72px;
	background: #FAFAF9;
	box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);
	border-radius: 2.06422e+07px;
	width: 210px;
	box-sizing: border-box;
	justify-content: space-between;
	padding: 8px;
}
.bk-dates__guests-btn {
	border: none;
	cursor: pointer;
	color: #57534e;
	transition: all 0.15s;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0px 0px 4px;
	width: 56px;
	height: 56px;
	background: #FFFFFF;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
	border-radius: 100px;
}

.bk-dates__guests-btn:hover:not(:disabled) {
    border-color: #1c1917;
    color: #1c1917;
}

.bk-dates__guests-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bk-dates__guests-count {
	font-family: 'Tinos';
	font-style: normal;
	font-weight: 700;
	font-size: 36px;
	line-height: 40px;
	text-align: center;
	color: #1C1917;
}

.bk-dates__guests-limit {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	padding-left: 20px;
	border-left: 1px solid #E7E5E4;
}

.bk-dates__guests-limit-label {
    font-size: 12px;
    color: #a8a29e;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.bk-dates__guests-limit-value {
	font-size: 16px;
	color: #1C1917;
	font-weight: 600;
}
 
.bk-summary {
	position: sticky;
	top: 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 34px;
	gap: 25px;
	background: #FFFFFF;
	border: 0.615187px solid #F5F5F4;
	box-shadow: 0px 20px 25px -5px rgba(231, 229, 228, 0.5), 0px 8px 10px -6px rgba(231, 229, 228, 0.5);
	border-radius: 40px;
}

.bk-summary__title {  
    font-family: 'Tinos'; 
    font-weight: 400;
    font-size: 24px;
    line-height: 133% ; 
    color: #1C1917; 
    margin: 0;
}

.bk-summary__items {
    display: flex;
    flex-direction: column;
    gap:25px;
    width: 100%;
}

.bk-summary__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 25px;
    border-bottom: 1px solid #f5f5f4;
}

.bk-summary__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.bk-summary__label {
    font-size: 12px;
    font-weight: 700;
    color: #A6A09B;
	line-height:1.33em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bk-summary__value {
    font-size: 16px;
    font-weight: 500;
    color: #1c1917;
}
/* ══════════════════════════════════════
   SIDEBAR — DATES (заїзд / виїзд)
   ══════════════════════════════════════ */

   .bk-sidebar__dates {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	border: 1px solid #e7e5e4;
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 16px;
	background: #FAFAF9;
	border: none;
}

.bk-sidebar__date {
    padding:  16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bk-sidebar__date:last-child {
    text-align: right;
}

.bk-sidebar__date-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #a8a29e;
}

.bk-sidebar__date-value {
	font-family: 'Tinos';
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	color: #0C0A09;
	flex: none;
	order: 1;
	flex-grow: 0;
}

.bk-sidebar__date-divider {
	width: 1px;
	background: #e7e5e4;
	align-self: stretch;
	margin-top: 24px;
	margin-bottom: 24px;
}
.bk-summary__value--price {
    font-size: 20px;
    font-weight: 700;
}
 
.bk-summary__house {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.bk-summary__house-img {
	width: 80px;
	height: 80px;
	border-radius: 16px;
	object-fit: cover;
}

.bk-summary__house-name {
    font-size: 16px;
    font-weight: 600;
    color: #1c1917;
    display: block;
}

.bk-summary__house-guests {
    font-size: 14px;
    color:#79716B;
    display: block;
    margin-top: 6px;
}

.bk-summary__hint {
    font-size: 13px;
    color: #a8a29e;
    margin: 16px 0 0;
    padding-top: 16px;
    /* border-top: 1px solid #f5f5f4; */
    text-align: center;
}
.bk-summary__breakdown-row {
	color: #79716B;
	display: flex;
	justify-content: space-between;
	font-size: 14px;
}
.bk-summary__total {
	padding-top: 16px;
	margin-top: 16px;
	border-top: 0.69px solid #F5F5F4;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	font-family: 'Tinos';
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 32px;
	color: #0C0A09;
}
.bk-dates__calendars_wrapper{
    border: 1px solid #D6D3D1;
    padding: 60px;
    border-radius: 32px;
}
div[data-panel="5"] .bk-pay  {
    display: flex;
    gap: 32px;
	margin-bottom:32px;
}
div[data-panel="5"]  .bk-pay__total{
    display: flex;
	padding:32px;
    justify-content: space-between;
	gap:16px;
	border-radius:32px;
	border:1px solid #F5F5F4;
	box-shadow: 0px 8px 10px -6px #F5F5F4;
	box-shadow: 0px 20px 25px -5px #F5F5F4;
}
div[data-panel="5"]  .bk-pay__total-text {
	color:#79716B;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.15px;
}
div[data-panel="5"] .bk-pay-action-button-block {
	display:flex;
	flex-direction:column;
	align-items:flex-end;
}
div[data-panel="5"] .bk-pay__total-amount {
	color:#0C0A09;
	font-family: Tinos;
font-weight: 400;
font-size: clamp(2.5rem, 2.5102rem + -0.4065vw, 2.25rem);
line-height: 40px;
letter-spacing: 0px;
}
div[data-panel="5"]  .bk-pay__total .bk-pay__disclaimer,
div[data-panel="5"]  .bk-pay__total .bk-pay__disclaimer a {
	margin-block:0px;
	color:#A6A09B;
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: 0px;
text-align: right;
}
div[data-panel="5"] .bk-pay > div {
flex-basis:100%!important;
width:100%;	
}
div[data-panel="5"] .bk-pay__methods,
div[data-panel="5"] .button-inner,
div[data-panel="5"] .bk-pay__total-label{
    display: flex;
    flex-direction: column;
	gap:8px;
}
div[data-panel="5"]  button.bk-pay__submit {
	display:flex;
	justify-content:space-between;
	cursor:pointer;
	background-color:#1C1917;
	margin-bottom:16px;
	box-shadow: 0px 8px 10px -6px #0000001A;
box-shadow: 0px 20px 25px -5px #0000001A;
	border-radius:16px;
	padding:16px 32px;
	
	align-items:center;
}
div[data-panel="5"]  button.bk-pay__submit svg path {
	stroke:#FFFFFF;
}
div[data-panel="5"] .button-inner {
	color:rgba(255, 255, 255, 0.8);
font-weight: 500;
font-size: 12px;
	padding-left:12px;
		transition:all 0.3s;
line-height: 12px;
	gap:0px;
	align-items:flex-start;
letter-spacing: 0.3px;
text-transform: uppercase;
}
div[data-panel="5"] .button-inner .js-pay-btn-amount {
	color:#FFFFFF;
font-weight: 700;
font-size: 18px;

line-height: 18px;
	margin-right:50px;
letter-spacing: 0px;
}
div[data-panel="5"] .button-inner:hover {
	opacity:0.7;
}

div[data-panel="5"] .bk-pay__methods-title {
margin-block:0px;
	margin-bottom:5px;
color:#0C0A09;
font-family: Inter;
font-weight: 700;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.15px;
}
div[data-panel="5"] .bk-pay__methods .bk-pay__method {
	padding:16px;
	border:1px solid #E7E5E4;
	background:#FFFFFF;
	display:flex;
	justify-content:space-between;
	border-radius:16px;
}
div[data-panel="5"] .bk-pay__method-texts {
	display:flex;
	gap:16px;
	align-items:center;
}
div[data-panel="5"] .bk-pay__method-texts .bk-pay__method-info {
	display:flex;
	flex-direction:column;
}
div[data-panel="5"] .bk-pay__method-texts .bk-pay__method-info .bk-pay__method-desc{
	color:#79716B;
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: 0px;
}
div[data-panel="5"] .bk-pay__method-texts .bk-pay__method-info .bk-pay__method-name {
	color:#0C0A09;
font-weight: 700;
font-style: Bold;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.31px;
}
div[data-panel="5"] .bk-pay__methods .bk-pay__method.is-active {
	border:1px solid #0C0A09;
	background:#FAFAF9;
}
.icon-active {
    display: none;
}

.bk-pay__method.is-active .icon-default {
    display: none;
}

.bk-pay__method.is-active .icon-active {
    display: block;
}
div[data-panel="5"] .bk-pay__secure {
	padding:24px 27px;
	background-color:#FAFAF9;
	border-radius:32px;
}
div[data-panel="5"] .bk-pay__secure-logos {
	display:flex;
	justify-content:center;
	gap:10px;
}
div[data-panel="5"] .bk-pay__secure {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
	justify-content:space-between;
}
div[data-panel="5"] .bk-pay__secure .bk-pay__secure-title {
	color:#0C0A09;
font-weight: 700;
font-size: 18px;
line-height: 27px;
letter-spacing: -0.44px;
text-align: center;
}
div[data-panel="5"] .bk-pay__secure .bk-pay__secure-desc {
	color:#79716B;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.15px;
text-align: center;
}
div[data-panel="5"] .bk-pay__secure p {
	margin-block:0px;
}
div[data-panel="5"] .bk-pay__secure-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
/* ====== Мобильная адаптация ====== */
@media (max-width: 900px) {
    .bk__layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .bk-summary {
        position: static;
    }

    .bk-dates__calendars {
        grid-template-columns: 1fr;
    }
    .bk__btn-next { 
justify-content:center;
}
}

@media (max-width: 600px) {

    .bk-location__grid {
        grid-template-columns: 1fr;
    }

    .bk-house__grid {
        grid-template-columns: 1fr;
    }

    .bk-house__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .bk-dates__guests {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .bk__steps {
        gap: 4px;
    }

    .bk__step {
        font-size: 12px;
    }

    .bk__step-sep {
        font-size: 12px;
    }
}
/* ====== Оверлей ====== */
.house-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.house-popup__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

/* ====== Контейнер ====== */
.house-popup__container {
    position: relative;
    background: #fff;
    border-radius: 20px;
    max-width: 960px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    animation: popupIn 0.3s ease;
}

@keyframes popupIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ====== Кнопка закрытия ====== */
.house-popup__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 40px;
    height: 40px;
    border: none;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.2s;
}

.house-popup__close:hover {
    background: #f5f5f4;
}

/* ====== Layout: галерея + инфо ====== */
.house-popup__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* ====== Галерея / Слайдер ====== */
.house-popup__gallery {
    position: relative;
    overflow: hidden;
    border-radius: 20px 0 0 20px;
    aspect-ratio: 4 / 3;
    min-height: 400px;
}

.house-popup__slider {
    display: flex;
    height: 100%;
    transition: transform 0.4s ease;
}

.house-popup__slide {
    min-width: 100%;
    height: 100%;
}

.house-popup__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Стрелки */
.house-popup__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 5;
}

.house-popup__arrow:hover {
    background: rgba(0, 0, 0, 0.5);
}

.house-popup__arrow--prev {
    left: 12px;
}

.house-popup__arrow--next {
    right: 12px;
}

/* Точки */
.house-popup__dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 5;
}

.house-popup__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.house-popup__dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

/* ====== Информация ====== */
.house-popup__info {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    max-height: 90vh;
}

/* Бейджи */
.house-popup__badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.house-popup__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #e7e5e4;
    border-radius: 100px;
    font-size: 13px;
    color: #57534e;
    background: #fff;
}

.house-popup__badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Название */
.house-popup__title {
    font-size: 28px;
    font-weight: 700;
    color: #1c1917;
    margin: 0;
    line-height: 1.2;
}

/* Цена */
.house-popup__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
}

.house-popup__price-from {
    font-size: 14px;
    color: #a8a29e;
}

.house-popup__price-value {
    font-size: 24px;
    font-weight: 700;
    color: #1c1917;
}

.house-popup__price-per {
    font-size: 14px;
    color: #78716c;
}

/* Описание */
.house-popup__desc {
    font-size: 14px;
    line-height: 1.6;
    color: #57534e;
}

.house-popup__desc p {
    margin: 0 0 8px;
}

/* Удобства */
.house-popup__amenities {
    margin-top: 4px;
}

.house-popup__amenities-title {
    font-size: 15px;
    font-weight: 600;
    color: #1c1917;
    margin: 0 0 12px;
}

.house-popup__amenities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.house-popup__amenity {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #1c1917;
    padding: 10px 14px;
    border: 1px solid #f5f5f4;
    border-radius: 10px;
    background: #fafaf9;
}

.house-popup__amenity-check {
    color: #57534e;
    flex-shrink: 0;
}

/* Кнопка выбора */
.house-popup__select-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px;
    border: none;
    border-radius: 100px;
    background: #1c1917;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: auto;
}

.house-popup__select-btn:hover {
    background: #292524;
}

/* ====== Мобильная версия ====== */
@media (max-width: 768px) {
    .bk-dates__calendars_wrapper {
        border: none;
        padding: 0;
        border-radius: 0;
    }
    .bk-dates__guests { 
        align-items: center;
        gap: 32px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .bk-dates__guests-counter { 
        gap: 0px; 
        height: 56px;
        width: 176px; 
        padding: 8px;
    }
    .bk-dates__guests-btn { 
        width: 40px;
        height: 40px; 
    }
    .bk-dates__guests-info {
        
        grid-column: span 2;
    }
    .bk-dates__calendars {
        grid-template-columns: 280px;
        gap: 0;
        justify-content: center;
        width: 100%;
        padding: 0;
        border: 1px solid #D6D3D1;
        border-radius: 24px;
        padding: 40px 0;
    }
    .house-popup {
        padding: 0;
        align-items: flex-end;
    }

    .house-popup__container {
        border-radius: 20px 20px 0 0;
        max-height: 95vh;
    }

    .house-popup__layout {
        grid-template-columns: 1fr;
    }

    .house-popup__gallery {
        border-radius: 20px 20px 0 0;
        aspect-ratio: 16 / 10;
        min-height: 240px;
    }

    .house-popup__info {
        padding: 24px 20px;
    }

    .house-popup__title {
        font-size: 22px;
    }

    .house-popup__amenities-grid {
        grid-template-columns: 1fr;
    }
}
/* ── Список послуг ── */
.bk-services__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.bk-services__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #e7e5e4;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.bk-services__item:hover {
    border-color: #d6d3d1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.bk-services__item.is-selected {
    border-color: #6d712e;
    background: #fafaf5;
}

/* ── Toggle switch ── */
.bk-services__checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bk-services__toggle {
    position: relative;
    flex-shrink: 0;
}

.bk-services__toggle-track {
    display: block;
    width: 44px;
    height: 24px;
    background: #d6d3d1;
    border-radius: 12px;
    transition: background .2s;
    position: relative;
}

.bk-services__checkbox:checked + .bk-services__toggle-track {
    background: #6d712e;
}

.bk-services__toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

.bk-services__checkbox:checked + .bk-services__toggle-track
    .bk-services__toggle-thumb {
    transform: translateX(20px);
}

/* ── Info ── */
.bk-services__info {
    flex: 1;
    min-width: 0;
}

.bk-services__name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1c1917;
    line-height: 1.3;
}

.bk-services__desc {
    display: block;
    font-size: 13px;
    color: #78716c;
    margin-top: 2px;
}

/* ── Ціна ── */
.bk-services__price-block {
    text-align: right;
    flex-shrink: 0;
}

.bk-services__price {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1c1917;
    white-space: nowrap;
}

.bk-services__unit {
    display: block;
    font-size: 12px;
    color: #a8a29e;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-top: 2px;
}

.bk-services__empty {
    text-align: center;
    color: #a8a29e;
    padding: 32px 0;
    font-size: 14px;
}
 
.bk-summary__service-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #57534e;
    padding: 4px 0;
}

@media (max-width: 768px) {
    .bk-services__item {
        padding: 16px;
        gap: 12px;
    }

    .bk-services__price {
        font-size: 14px;
    }
}

.bk-dates__day.is-in-range {
	background: #1C1917;
	border-radius: 0;
	color: #fff;
}

.bk-dates__day.is-hover-end {
    background: #222;
    color: #fff;
    border-radius: 50%;
}
/* ── Map container ── */
.bk-house__map {
    width: 100%;
}

.bk-house-map {
	position: relative;
	width: 100%;
	border-radius: 16px;
	overflow: visible;
	background: #f5f5f4;
	border-radius: 60.0449px;
	aspect-ratio: 16 / 9;
}

.bk-house-map__bg {
	width: 100%;
	height: 100%;
	display: block;
	user-select: none;
	-webkit-user-drag: none; 
	border-radius: 60.0449px; 
}

.bk-house-map__pins {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ── Pin ── */
.bk-map-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
    cursor: pointer;
}

.bk-map-pin__icon { 
        width: 48px;
        height: 48px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 30.0225px 37.5281px -7.50562px rgba(0, 0, 0, 0.1), 0px 12.009px 15.0112px -9.00674px rgba(0, 0, 0, 0.1);
        transition: .5s;
        font-size: 20px;
        border: 6px solid #ffff;
        box-sizing: border-box;
}
.bk-map-pin.is-selected .bk-map-pin__icon,
.bk-map-pin:hover .bk-map-pin__icon,
.bk-map-pin.is-active .bk-map-pin__icon { 
        background: #1C1917;
        color: #fff;
        transition: .5s;
 
} 
 

.bk-map-pin__icon svg {
    width: 24px;
    height: 24px;
}

/* ── Tooltip ── */
.bk-map-pin__tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); 
	width: 320px;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s, visibility .2s, transform .2s;
    transform: translateX(-50%) translateY(8px);
    z-index: 10;
    display: grid;
	grid-template-columns: 100px 1fr;
	padding: 12px;
	border-radius: 20px;
	gap: 16px;
}
.bk-map-pin__tooltip.tooltip--bottom {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 8px;
}
.bk-map-pin__tooltip {   
	width: 320px;
	overflow: visible;
    padding: 8px;
}
.bk-map-pin__tooltip {
    --arrow-offset: 50%;  
}
 
.bk-map-pin__tooltip::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;

    bottom: -10px;
    top: auto;
    left: var(--arrow-offset);
    transform: translateX(-50%);
    border-top: 10px solid #fff;
    border-bottom: none;
}
 
.bk-map-pin__tooltip.tooltip--bottom::after {
    bottom: auto;
    top: -10px;
    left: var(--arrow-offset);
    transform: translateX(-50%);
    border-top: none;
    border-bottom: 10px solid #fff;
}
.bk-map-pin.is-active .bk-map-pin__tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.bk-map-pin__tooltip-img { 
        width: 100%;
        height: 100px;
        object-fit: cover;
        border-radius: 20px;
   
}

.bk-map-pin__tooltip-body {
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.bk-map-pin__tooltip-title {
    font-size: 14px;
    font-weight: 600;
    color: #1c1917;
    margin: 0 0 4px;
    line-height: 1.3;
    height: 20px;
    overflow: hidden;
}

.bk-map-pin__tooltip-price {
    font-size: 13px;
    color: #A4A3A2;
    font-weight: 500;
    margin: 0 0 10px;
}
.bk-map-pin__tooltip-price span{
    color: #1C1917;
}
.bk-map-pin.is-active {
	z-index: 11;
}
.bk-map-pin__tooltip-btn { 
    padding: 4px 16px;
    background: #1c1917;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}

.bk-map-pin__tooltip-btn:hover {
    background: #5a5e26;
}

/* ── Tooltip arrow ── */
.bk-map-pin__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #fff;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .bk-house-map { 
    } 
    .bk__container{
        width: 100%;
        box-sizing: border-box;
    }
    .bk__layout{
        display: block;
    }
.bk-house__map  {
    width: 100%;
    height: 600px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;  
    cursor: grab; 
    border-radius: 40px;
}
.bk-house-map__bg{
    border-radius: 0;
}
.bk-house__map:active {
    cursor: grabbing;
}
  
.bk-house-map {
    position: relative;
    height: 600px;
    width: calc(600px * 16 / 9); /* = 1066px */
    flex-shrink: 0;
}

.bk-map__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none; /* не выделять при драге */
    -webkit-user-drag: none;
}
 
    .bk-map-pin__icon {
        width: 40px;
        height: 40px;
    }

    .bk-map-pin__icon svg {
        width: 20px;
        height: 20px;
    }

    .bk-map-pin__tooltip {
        min-width: 180px;
    }

    .bk-map-pin__tooltip-img {
        height: 90px;
    }
}
/* ── Валідація полів ── */
.bk-contacts__input:not(:placeholder-shown):valid {
    border-color: #6d712e;
}

.bk-contacts__input.is-error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
}

/* ── Номер телефону — моноширинний шрифт ── */
#bk-phone {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 16px; /* предотвращает zoom на iOS */
    letter-spacing: .5px;
}
/* ══════════════════════════════════════
   BOOKING SUCCESS TOAST
   ══════════════════════════════════════ */

   .bk-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-120px);
    z-index: 99999;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: #6d712e;
    color: #fff;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1),
                opacity .4s;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

.bk-toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.bk-toast svg {
    flex-shrink: 0;
}

.bk-toast span {
    text-align: left;
}

@media (max-width: 480px) {
    .bk-toast {
        left: 16px;
        right: 16px;
        transform: translateX(0) translateY(-120px);
        white-space: normal;
        justify-content: center;
        text-align: center;
    }

    .bk-toast.is-visible {
        transform: translateX(0) translateY(0);
    }
}
/* ── Calendar day states ── */
/* ══════════════════════════════════════
   CALENDAR — RESPONSIVE
   ══════════════════════════════════════ */

   .bk-dates__calendars {
	display: grid;
	grid-template-columns: 280px 280px;
	gap: 32px;
	justify-content: center;
}
 
.bk-dates__cal-nav--mobile-next {
    display: none;
}
 
.bk-dates__cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bk-dates__cal--left .bk-dates__cal-header {
    justify-content: flex-start;
    gap: 12px;
}

.bk-dates__cal--right .bk-dates__cal-header {
    justify-content: flex-end;
    gap: 12px;
}

/* ══════════════════════════════════════
   TABLET & MOBILE — ОДИН МЕСЯЦ
   ══════════════════════════════════════ */

@media (max-width: 1024px) {
    .bk-dates__calendars {
        grid-template-columns: 280px;
        gap: 0;
        justify-content: center;
        width: 100%;
        padding: 0;
    }
 
    .bk-dates__cal--right {
        display: none;
    }
 
    .bk-dates__cal-nav--mobile-next {
        display: flex;
    }
 
    .bk-dates__cal--left .bk-dates__cal-header {
        justify-content: space-between;
    }

    .bk-dates__cal-title {
        flex: 1;
        text-align: center;
    }
}
.booking-calendar__day.is-start {
    background: #1c1917;
    color: #fff;
    border-radius: 50%;
}

.booking-calendar__day.is-end {
    background: #1c1917;
    color: #fff;
    border-radius: 50%;
}

.booking-calendar__day.is-in-range {
    background: #f0f0ee;
    color: #1c1917;
    border-radius: 0;
}

.booking-calendar__day.is-hover-range {
    background: #f5f5f4;
    color: #1c1917;
}

.booking-calendar__day.is-hover-end {
    background: #a8a29e;
    color: #fff;
    border-radius: 50%;
}

.booking-calendar__day.is-today {
    font-weight: 700;
}

.booking-calendar__day.is-disabled {
    color: #d6d3d1;
    cursor: default;
    pointer-events: none;
}

.booking-calendar__day.is-booked {
    text-decoration: line-through;
    color: #d6d3d1;
}

/* ── Button states ── */
.booking-card__btn {
    display: block;
    width: 100%;
    padding: 16px;
    background: #1c1917;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background .2s, opacity .2s;
    text-decoration: none;
}

.booking-card__btn:disabled {
    opacity: .4;
    cursor: default;
}

.booking-card__btn.is-ready {
    background: #1c1917;
    opacity: 1;
}

.booking-card__btn.is-ready:hover {
    background: #292524;
}