/* Home page skin (loaded after home.css on the home section). Markup, search handlers and the type sheet are untouched. */

/* ---------- hero ---------- */
.home_block_content {min-height: 0; padding-bottom: 64px;}
#intro_slides:before {background: linear-gradient(180deg, rgba(10,12,16,.55) 0%, rgba(10,12,16,.45) 45%, rgba(10,12,16,.72) 100%); opacity: 1;}
.home_title_1 {font-size: 52px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; padding-top: 128px; max-width: 760px; text-shadow: 0 2px 12px rgba(0,0,0,.25);}
.home_title_2 {font-size: 15px; padding-top: 18px; color: rgba(255,255,255,.82); font-weight: 500;}
.home_links {padding-top: 26px; display: flex; flex-wrap: wrap; gap: 8px;}
.home_links > br {display: none;}
.home_link {height: auto; margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 14px; font-weight: 500; line-height: 18px; backdrop-filter: blur(6px); transition: background .15s, border-color .15s;}
.home_link:hover {background: #fff; border-color: #fff; color: #1D1D1F;}
.home_controls:not(.menu) {margin-top: 24px; border-radius: 20px; box-shadow: 0 16px 40px rgba(0,0,0,.28); background: #fff;}
.home_controls:not(.menu) > div:nth-child(1) {border-radius: 20px 0 0 20px;}
.home_controls:not(.menu) .home_control .search_item_wrap {height: 64px;}
.home_controls:not(.menu) .home_control .search_input_text {font-size: 15px; font-weight: 500; color: #1D1D1F; padding-left: 24px;}
.home_controls:not(.menu) .home_control .search_input_text::placeholder {color: #6B7280; font-weight: 400;}
.home_controls:not(.menu) .home_control .search_input_icon {font-size: 22px; top: 20px; right: 20px;}
.home_controls:not(.menu) .home_control:not(.last):after {top: 16px; bottom: 16px; background: #E6E8EC;}
.home_controls:not(.menu) .home_control_btn {height: 48px; line-height: 48px; margin: 8px 8px 8px 10px; border-radius: 14px; padding: 0 28px; width: auto; min-width: 130px; font-size: 14px; letter-spacing: .02em; box-shadow: 0 6px 16px rgba(235,55,82,.3);}
.home_controls:not(.menu) .home_control_btn:hover {background: #D62E48;}
.home_controls:not(.menu) .home_control.filters > i {color: #1D1D1F;}
/* ---------- search bar dropdowns ---------- */
/* the hero sits above the numbers strip (z-index 16): otherwise the cards cover the open type list */
.home_head_info {z-index: 20;}
.home_control .search_select {top: 76px; max-height: 440px; padding: 8px; border-radius: 18px; border: 1px solid #ECEEF3; box-shadow: 0 20px 48px rgba(17,24,39,.22); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #D5D8DF transparent; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease;}
.home_control .search_select.visible {transform: none;}
.home_controls.menu .home_control .search_select {top: 56px;}
.home_control .search_select::-webkit-scrollbar {width: 6px;}
.home_control .search_select::-webkit-scrollbar-track {margin: 12px 0;}
.home_control .search_select::-webkit-scrollbar-thumb {background: #D5D8DF; border-radius: 8px;}
.home_control .search_select > div[style] {padding: 14px 12px 6px !important;}
.home_control .search_select > div[style]:first-child {padding-top: 6px !important;}
.home_control .search_select > div > b {font-size: 12px; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: .06em;}
.home_control .search_select_item {display: flex; align-items: center; min-height: 40px; padding: 0 12px 0 38px; border-radius: 10px; font-size: 14px; font-weight: 500; color: #1D1D1F; background: transparent; cursor: pointer; transition: background .12s, color .12s;}
.home_control .search_select_item:hover {background: #F5F6F8; color: #1D1D1F;}
.home_control .search_select_item.active {background: #FDECEF; color: #EB3752;}
.home_control .search_select_icon {left: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; color: transparent; transition: color .12s;}
.home_control .search_select_item:hover .search_select_icon {color: #C9CDD6;}
.home_control .search_select_item.active .search_select_icon {color: #EB3752;}
.home_control .search_select_text {display: block; line-height: 1.3;}

/* date pickers (bootstrap-datetimepicker, appended to body) in the same card style */
.datetimepicker.dropdown-menu {margin-top: 12px; padding: 12px 10px 8px; border-radius: 18px; border: 1px solid #ECEEF3; box-shadow: 0 20px 48px rgba(17,24,39,.22);}
.datetimepicker.dropdown-menu:before, .datetimepicker.dropdown-menu:after {display: none;}
.datetimepicker table {border-spacing: 8px 4px;}
.datetimepicker td, .datetimepicker th {width: 36px; height: 36px; font-size: 14px; font-weight: 500; color: #1D1D1F;}
.datetimepicker th.switch {font-size: 15px; font-weight: 700; color: #1D1D1F; border-radius: 10px;}
.datetimepicker th.next, .datetimepicker th.prev {color: #6B7280; border-radius: 50%;}
.datetimepicker thead tr:first-child th:hover {background: #F5F6F8;}
.datetimepicker table > thead > tr:nth-child(2)::after {left: 18px; width: calc(100% - 36px); top: 52px;}
.datetimepicker th.dow {font-size: 12px; font-weight: 600; color: #9AA0AB; text-transform: uppercase; letter-spacing: .04em; height: 56px; padding-top: 24px;}
.datetimepicker table tr td.day:hover, .datetimepicker table tr td.hour:hover, .datetimepicker table tr td.minute:hover {background: #F5F6F8;}
.datetimepicker table tr td.old, .datetimepicker table tr td.new {color: #C9CDD6;}
.datetimepicker table tr td.disabled, .datetimepicker table tr td.disabled:hover {color: #C9CDD6;}
.datetimepicker table tr td.today, .datetimepicker table tr td.today:hover, .datetimepicker table tr td.today.disabled, .datetimepicker table tr td.today.disabled:hover {background: #FDECEF; color: #EB3752; border: none;}
.datetimepicker table tr td.active, .datetimepicker table tr td.active:hover, .datetimepicker table tr td.today.active, .datetimepicker table tr td.today:hover.active {background: #EB3752; color: #fff; text-shadow: none; border: none;}
.datetimepicker table tr td span {border-radius: 10px;}
.datetimepicker .datetimepicker-hours span, .datetimepicker .datetimepicker-minutes span {height: 34px; line-height: 34px; border-radius: 10px; font-weight: 500;}
.datetimepicker table tr td span:hover {background: #F5F6F8;}
.datetimepicker table tr td span.active, .datetimepicker table tr td span.active:hover {background: #EB3752; color: #fff; text-shadow: none; border: none;}
.datetimepicker table tr td span.disabled, .datetimepicker table tr td span.disabled:hover {color: #C9CDD6;}
.datetimepicker tfoot th {font-size: 14px; font-weight: 700; color: #EB3752; height: 40px; border-radius: 10px;}
.datetimepicker tfoot th:hover {background: #FDECEF;}

/* top advertising strip inside the hero */
#main_banner {background: rgba(20,22,27,.55); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.08);}
#main_banner > div > .title {font-size: 16px; font-weight: 600;}
#main_banner > div > .address {font-size: 14px; font-weight: 500; color: rgba(255,255,255,.8);}
#main_banner > div > a {border-radius: 10px; padding: 10px 18px; font-size: 13px; font-weight: 700;}

/* ---------- sections ---------- */
.block_home_content {padding: 56px 0 24px;}
.home_content {padding: 0 24px;}
.home_content_title {font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: #1D1D1F; padding: 0;}
.home_content_wrap {margin-top: 22px; margin-bottom: 48px;}

/* owners banner */
#popup_banner {border-radius: 22px; padding: 28px 32px 28px 24px; box-shadow: 0 16px 40px rgba(235,55,82,.25); margin: 0 0 56px;}
#popup_banner > .info > .title {font-size: 24px; font-weight: 800; letter-spacing: -.01em;}
#popup_banner > .info > .desc {font-size: 15px; opacity: .92; margin-top: 8px; line-height: 1.45;}
#popup_banner > .btn {border-radius: 12px; font-weight: 700; padding: 14px 26px; transition: transform .1s, box-shadow .15s; box-shadow: 0 6px 16px rgba(0,0,0,.12);}
#popup_banner > .btn:hover {transform: translateY(-1px);}

/* cards: the same card as on the catalog page */
@media screen and (min-width: 601px) {
	.home_content_wrap {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;}
	.home_content_wrap > .catalog_item {width: auto; float: none; padding: 0; min-width: 0;}
	.home_content_wrap > .catalog_item .catalog_wrap {margin: 0 !important; height: 100%; padding: 10px 10px 16px; border: 1px solid #E9EBF0; border-radius: 18px; background: #fff; transition: box-shadow .2s, transform .2s, border-color .2s;}
	.home_content_wrap > .catalog_item:hover .catalog_wrap {border-color: #DADEE6; box-shadow: 0 12px 32px rgba(17,24,39,.10); transform: translateY(-2px);}
	.home_content_wrap > #banner_2, .home_content_wrap > #banner_3 {grid-column: 1 / -1; margin-bottom: 0;}
	.home_content_wrap > #banner_2 > a, .home_content_wrap > #banner_3 {border-radius: 18px; overflow: hidden;}
}
.home_content_wrap .catalog_photo {border-radius: 12px;}
.home_content_wrap .catalog_subs {margin: 12px 4px 0;}
.home_content_wrap .catalog_subway {font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #6B7280; padding: 3px 8px; border-radius: 6px; background: #F5F6F8;}
.home_content_wrap .catalog_subs .block_rating_count i {color: #F5A623; font-size: 13px; margin-right: 4px;}
.home_content_wrap .catalog_subs .place_rating {font-size: 13px !important; color: #1D1D1F !important; font-weight: 600 !important;}
.home_content_wrap .catalog_item_title {display: block; margin: 8px 4px 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: #1D1D1F;}
.home_content_wrap .catalog_item_title:hover {color: #EB3752;}
.home_content_wrap .catalog_price {margin: 0 4px; padding: 6px 0 8px; font-size: 13px; font-weight: 500; color: #6B7280;}
.home_content_wrap .catalog_price span {font-size: 18px; font-weight: 800; color: #1D1D1F; letter-spacing: -.01em; margin-right: 2px;}
.home_content_wrap .catalog_info {margin: 0 4px; gap: 4px 14px;}
.home_content_wrap .catalog_info_item {margin: 0; height: auto;}
.home_content_wrap .catalog_info_item i {color: #9AA0A6; font-size: 14px !important; margin-right: 6px; top: 0;}
.home_content_wrap .catalog_info_item span {font-size: 13px; color: #6B7280; line-height: 20px;}

/* ---------- seo ---------- */
.home_seo {padding: 8px 24px 56px;}
.home_seo .home_content_title {font-size: 30px; font-weight: 800; letter-spacing: -.02em;}
.home_seo_info {display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 22px; background: #F5F6F8; border-radius: 22px; padding: 24px;}
.home_seo_photo {float: none; max-width: none; padding: 0;}
.home_seo_photo > img {border-radius: 16px; display: block; height: 100%; object-fit: cover;}
.home_seo_text {font-size: 15px; line-height: 1.65; color: #4B5563;}
#home_seo_text_full {grid-column: 2;}
#home_seo_btn {display: inline-block; margin: 14px 0 0; color: #1D1D1F; font-weight: 700; text-decoration: none; border-bottom: 2px solid #EB3752; padding-bottom: 2px;}
#home_seo_btn:hover {color: #EB3752;}

/* ---------- tablet ---------- */
@media screen and (max-width: 1000px) {
	.home_title_1 {font-size: 40px; padding-top: 150px;}
	.home_controls:not(.menu) {border-radius: 24px; padding: 14px 12px 12px; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); box-shadow: none; border: 1px solid rgba(255,255,255,.2);}
	.home_controls:not(.menu) > div > .search_item_wrap {border-radius: 16px;}
	.home_controls:not(.menu) .home_control .search_item_wrap {height: 56px;}
	.home_controls:not(.menu) .home_control .search_input_text {padding-left: 18px;}
	.home_controls:not(.menu) .home_control .search_input_icon {top: 16px; right: 16px;}
	.home_controls:not(.menu) .home_control.filters {border-radius: 16px; width: 56px !important; height: 56px; line-height: 56px;}
	.home_controls:not(.menu) .home_control_btn {border-radius: 16px; height: 52px; line-height: 52px; margin: 6px 0 0 10px; width: calc(50% - 10px); min-width: 0;}
	.home_seo_info {grid-template-columns: 1fr; gap: 18px;}
	#home_seo_text_full {grid-column: auto;}
}

/* ---------- phones ---------- */
@media screen and (max-width: 800px) {
	.home_block_content {padding-bottom: 28px;}
	.home_title_1 {font-size: 30px; padding-top: 128px; line-height: 1.2;}
	.home_links {padding-top: 18px; gap: 8px;}
	.home_link {font-size: 13px; padding: 7px 12px; margin: 0;}
	.home_controls:not(.menu) {margin-top: 22px;}
	.home_controls:not(.menu) .home_control {margin-bottom: 10px;}
	.home_controls:not(.menu) .home_control .search_item_wrap {height: 54px;}
	.home_controls:not(.menu) > .home_control:nth-child(3) {width: calc(100% - 66px);}
	.home_controls:not(.menu) .home_control.filters {width: 54px !important; height: 54px; line-height: 54px; margin-left: 12px !important;}
	.home_controls:not(.menu) .home_control_btn {width: 100%; margin: 6px 0 0; height: 50px; line-height: 50px; font-size: 14px;}
	.block_home_content {padding: 28px 0 8px;}
	#popup_banner {margin: 0 16px 36px; border-radius: 20px; padding: 0 20px 22px;}
	#popup_banner > .info > .title {font-size: 22px;}
	#popup_banner > .info > .desc {font-size: 14px;}
	.home_content_title {font-size: 24px; text-align: left; padding: 0 16px 14px;}
	.home_content_wrap {margin-top: 0; margin-bottom: 32px;}
	.home_content_wrap > .catalog_item .catalog_wrap {padding: 8px 8px 14px; border: 1px solid #E9EBF0; border-radius: 18px; background: #fff;}
	.home_seo {padding: 0 16px 40px;}
	.home_seo .home_content_title {font-size: 24px; text-align: left; padding: 0 0 14px;}
	.home_seo_info {padding: 16px; border-radius: 18px; gap: 14px;}
	.home_seo_text {padding: 0; font-size: 15px;}
}

/* the base rule fixes the owners banner at 130px; with the new padding it sizes itself */
#popup_banner {height: auto;}

@media screen and (max-width: 600px) {
	/* swipe rows: every card stretches to the row height (the base rule padded each card by 50px and left a hole under short cards) */
	.home_content_wrap > .catalog_item {padding-bottom: 0; display: flex;}
	.home_content_wrap > .catalog_item .catalog_wrap {width: 100%;}
	/* the two ad tiles come after the first six cards, as on the desktop (display:contents dropped their order) */
	.home_content_wrap.rec > #banner_2 > a {order: 2;}
	/* top advertising strip: one line, no wrap */
	#main_banner {height: 56px;}
	#main_banner > div > .title {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; margin-bottom: 0;}
	#main_banner > img {width: 72px;}
	#home_seo_btn {display: inline-block; margin-top: 12px;}
	/* one 16px gutter for every section: titles, tiles, steps and the first card of a swipe row start on the same line */
	.home_content {padding: 0 16px;}
	.home_content_title {font-size: 22px; line-height: 1.2; text-align: left; padding: 0;}
	.home_types {margin: 16px 0 32px;}
	.home_steps {margin: 16px 0 0;}
	.home_seo {padding: 0 16px 24px;}
	/* swipe rows bleed to the screen edges, the next card peeks out on the right, and the title says the row scrolls */
	.home_content_wrap {margin: 12px -16px 36px; padding: 0 16px 8px; gap: 12px; scroll-padding-left: 16px;}
	.home_content_wrap::before {display: none;}
	.home_content_wrap::after {flex: 0 0 4px;}
	.home_content_title:has(+ .home_content_wrap)::after {content: 'Листайте вправо \2192'; display: block; margin-top: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: #6B7280;}
}

/* ---------- numbers strip under the hero ---------- */
.home_stats_wrap {position: relative; z-index: 16; margin-top: -40px;}
.home_stats {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;}
.home_stat {background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: 0 14px 36px rgba(17,24,39,.14); border: 1px solid #ECEEF3;}
.home_stat b {display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #1D1D1F; margin-bottom: 6px;}
.home_stat span {display: block; font-size: 13px; line-height: 1.4; color: #6B7280;}

/* ---------- event-type tiles ---------- */
.home_types {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0 56px;}
.home_type {position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 170px; padding: 18px; border-radius: 18px; overflow: hidden; background: #1D1D1F center / cover no-repeat; color: #fff; text-decoration: none; box-shadow: 0 2px 10px rgba(17,24,39,.06); transition: transform .25s, box-shadow .25s;}
.home_type::before {content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,12,16,.82) 0%, rgba(10,12,16,.3) 55%, rgba(10,12,16,0) 100%); transition: opacity .25s;}
.home_type:hover {transform: translateY(-3px); box-shadow: 0 16px 36px rgba(17,24,39,.18); color: #fff;}
.home_type_title {position: relative; font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2;}
.home_type_note {position: relative; margin-top: 6px; align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28); font-size: 12px; font-weight: 600; backdrop-filter: blur(4px);}
.home_type_note .icon {font-size: 9px; margin-left: 4px;}
.home_type_all {background: linear-gradient(135deg, #EB3752 0%, #C8203C 100%);}
.home_type_all::before {display: none;}
.home_type_all .home_type_title {font-size: 20px;}
/* eight types plus the «all» tile fill three rows of three */

/* ---------- how it works ---------- */
.home_how {margin-bottom: 56px;}
.home_steps {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px;}
.home_step {position: relative; padding: 24px 22px 20px; border-radius: 18px; background: #F5F6F8;}
.home_step_num {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #EB3752; color: #fff; font-size: 17px; font-weight: 800; margin-bottom: 14px;}
.home_step b {display: block; font-size: 17px; font-weight: 700; color: #1D1D1F; margin-bottom: 6px;}
.home_step p {margin: 0; font-size: 14px; line-height: 1.5; color: #6B7280;}

/* seo text: the «Подробнее» link on its own line, paragraphs spaced by the line height only */
.home_seo_text {font-size: 15px; line-height: 1.6;}
#home_seo_btn {display: block; width: fit-content; margin: 12px 0 0;}
#home_seo_text_full > br:first-child {display: none;}

@media screen and (max-width: 1000px) {
	.home_stats {grid-template-columns: repeat(2, minmax(0, 1fr));}
	.home_types {grid-template-columns: repeat(2, minmax(0, 1fr));}
	.home_type:nth-child(1) {grid-column: span 2;}
	.home_steps {grid-template-columns: 1fr;}
}

@media screen and (max-width: 800px) {
	.home_stats_wrap {margin-top: -24px; padding: 0 16px;}
	.home_stats {gap: 10px;}
	.home_stat {padding: 14px 16px; border-radius: 14px;}
	.home_stat b {font-size: 22px;}
	.home_stat span {font-size: 12px;}
	.home_types {gap: 10px; margin: 0 16px 32px;}
	.home_type {min-height: 140px; padding: 14px; border-radius: 14px;}
	.home_type:nth-child(1) {grid-column: span 2;}
	.home_type_title {font-size: 16px;}
	.home_type_note {font-size: 11px;}
	.home_how {margin-bottom: 32px;}
	.home_steps {gap: 10px; margin: 0 16px;}
	.home_step {padding: 18px 16px 16px;}
}

/* seo block: the photo takes the left column for both text parts, so the expanded text follows the first paragraph without a hole */
.home_seo .home_content_title {margin-bottom: 18px;}
.home_seo_info {grid-template-rows: auto auto; align-items: start;}
.home_seo_photo {grid-column: 1; grid-row: 1 / 3; position: sticky; top: 90px;}
.home_seo_photo > img {height: auto; aspect-ratio: 3 / 2; width: 100%;}
.home_seo_text {grid-column: 2;}
.home_seo_text + .home_seo_text {margin-top: 0;}
#home_seo_text_full {grid-row: 2;}
@media screen and (max-width: 1000px) {
	.home_seo_photo {grid-column: auto; grid-row: auto; position: static;}
	.home_seo_text {grid-column: auto;}
	#home_seo_text_full {grid-row: auto;}
}

/* phones: the sections sit in the 16px gutter of .home_content, so the tiles and steps need no gutter of their own (overrides the 800px rules above) */
@media screen and (max-width: 600px) {
	.home_types {margin: 16px 0 32px;}
	.home_steps {margin: 16px 0 0;}
	.home_seo_info {padding-top: 16px;}
}