/*=========================================================*/
/* BASE                                                    */
/*=========================================================*/
* {box-sizing:border-box}
body {margin:0; background:#141414; color:#f2f2f2; font:16px/1.45 "Segoe UI",sans-serif}


/*=========================================================*/
/* NOTICE                                                  */
/*=========================================================*/
#notice {padding:7px 20px; text-align:center; font-size:13px; color:#b9d8c4; background:#1f2a22}
#notice a {text-decoration:none; white-space:nowrap; color:#fff}


/*=========================================================*/
/* HEADER                                                  */
/*=========================================================*/
#header {padding:16px 20px 4px; background:#101010}
#header .wrap {display:flex; align-items:center; gap:16px; max-width:960px; margin:0 auto}
#header .logo {display:block; flex:none}
#header .logo img {display:block; width:auto; height:48px}
#header h1 {margin:0; padding-left:16px; font-size:20px; font-weight:500; color:#ddd; border-left:1px solid #333}
#header .phone {margin-left:auto; text-decoration:none; white-space:nowrap; font-size:15px; color:#ddd}
#header .phone:hover {color:#fff}

@media (max-width:600px) {
	#header {padding-left:12px; padding-right:12px}
	#header .logo img {height:40px}
	#header h1 {padding-left:12px; font-size:17px}
	#header .phone {display:none}
}


/*=========================================================*/
/* AFISHA                                                  */
/*=========================================================*/
#p_afisha .bar_filters {padding:12px 20px; background:#101010; border-bottom:1px solid #2a2a2a; position:sticky; top:0; z-index:3}
#p_afisha .bar_filters .wrap {max-width:960px; margin:0 auto}
#p_afisha .bar_filters .days {display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none; -ms-overflow-style:none}
#p_afisha .bar_filters .days::-webkit-scrollbar {display:none}
#p_afisha .bar_filters .days.drag {cursor:grabbing}
#p_afisha .bar_filters .days.drag a {cursor:grabbing}
#p_afisha .bar_filters .days a {display:flex; flex:none; flex-direction:column; align-items:center; justify-content:center; min-width:72px; padding:6px 12px; text-decoration:none; line-height:1.2; color:#ddd; border:1px solid #333; border-radius:10px}
#p_afisha .bar_filters .days a span {font-size:12px; color:#999}
#p_afisha .bar_filters .days a:hover {border-color:#2a7a4b}
#p_afisha .bar_filters .days a.active {color:#fff; background:#2a7a4b; border-color:#2a7a4b}
#p_afisha .bar_filters .days a.active span {color:#d9f2e3}
#p_afisha .bar_filters .selects {display:flex; flex-wrap:wrap; align-items:center; gap:8px}
#p_afisha .bar_filters .selects select {flex:1 1 200px; min-width:0; padding:8px 36px 8px 12px; font:inherit; font-size:14px; color:#f2f2f2; background:#1d1d1d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; border:1px solid #333; border-radius:8px; cursor:pointer; -webkit-appearance:none; appearance:none}
#p_afisha .bar_filters .selects select:hover {border-color:#444}
#p_afisha .bar_filters .selects a.reset {flex:none; padding:8px 14px; text-decoration:none; white-space:nowrap; font-size:14px; color:#8fc9a6; border:1px solid #2a7a4b; border-radius:8px}
#p_afisha .bar_filters .selects a.reset:hover {color:#fff; background:#2a7a4b}
/*---------------------------------------*/
#p_afisha main {max-width:960px; margin:0 auto; padding:8px 20px 40px}
#p_afisha main .day_title {margin:28px 0 4px; padding-bottom:8px; font-size:20px; font-weight:600; color:#fff; border-bottom:1px solid #2a2a2a}
#p_afisha main .empty {margin:40px 0; text-align:center; color:#aaa}
#p_afisha main .empty a {color:#8fc9a6}
#p_afisha main article {display:flex; gap:18px; padding:18px 0; border-bottom:1px solid #222}
#p_afisha main article img {display:block; flex:none; width:110px; height:158px; object-fit:cover; background:#222; border-radius:6px}
#p_afisha main article a.poster {flex:none}
#p_afisha main article .body {flex:1; min-width:0}
#p_afisha main article .body h2 {margin:0 0 6px; font-size:20px}
#p_afisha main article .body h2 a {text-decoration:none; color:inherit}
#p_afisha main article .body h2 a:hover {color:#8fc9a6}
#p_afisha main article .body .lead {margin:0 0 12px; font-size:14px; color:#9a9a9a}
#p_afisha main article .body .group {margin:0 0 12px}
#p_afisha main article .body .group h3 {margin:0 0 6px; text-transform:uppercase; letter-spacing:.04em; font-size:13px; font-weight:600; color:#8fc9a6}
#p_afisha main article .body .group .place {display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 8px}
#p_afisha main article .body .group .place .np {min-width:140px; font-size:15px; color:#ddd}
#p_afisha main article .body .group .place .times {display:flex; flex-wrap:wrap; gap:6px}
#p_afisha main article .body .group .place .times button {padding:6px 12px; font:inherit; font-size:15px; font-weight:600; color:#fff; background:#2a7a4b; border:0; border-radius:8px; cursor:pointer}
#p_afisha main article .body .group .place .times button:hover {background:#33925a}
#p_afisha main article .body .group .place .times span {padding:6px 12px; font:inherit; font-size:15px; font-weight:600; border-radius:8px}
#p_afisha main article .body .group .place .times span.past {color:#666; background:#222}

@media (max-width:600px) {
	#p_afisha .bar_filters {padding-left:12px; padding-right:12px}
	#p_afisha main {padding:8px 12px 40px}
	#p_afisha main article {gap:12px}
	#p_afisha main article img {width:76px; height:110px}
	#p_afisha main article .body .group .place .np {width:100%; min-width:0}
}


/*=========================================================*/
/* MOVIE                                                   */
/*=========================================================*/
#p_movie main {max-width:960px; margin:0 auto; padding:8px 20px 40px}
#p_movie main .back {display:inline-block; margin:14px 0 6px; text-decoration:none; font-size:14px; color:#8fc9a6}
#p_movie main .back:hover {color:#fff}
#p_movie main .movie {display:flex; gap:28px; padding:12px 0 24px; border-bottom:1px solid #2a2a2a}
#p_movie main .movie .poster {display:block; flex:none; width:240px; height:345px; object-fit:cover; background:#222; border-radius:8px}
#p_movie main .movie .info {flex:1; min-width:0}
#p_movie main .movie .info h2 {margin:0 0 4px; line-height:1.2; font-size:30px; color:#fff}
#p_movie main .movie .info .alt {margin:0 0 10px; font-size:15px; color:#888}
#p_movie main .movie .info .meta {margin:0 0 12px; font-size:15px; color:#ccc}
#p_movie main .movie .info .badges {display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px}
#p_movie main .movie .info .badges span {padding:3px 10px; font-size:13px; color:#d9f2e3; background:#1f2a22; border:1px solid #2a7a4b; border-radius:20px}
#p_movie main .movie .info .text {margin:0 0 18px; color:#ddd}
#p_movie main .movie .info .facts {display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; margin:0; font-size:14px}
#p_movie main .movie .info .facts dt {color:#888}
#p_movie main .movie .info .facts dd {margin:0; color:#ddd}
/*---------------------------------------*/
#p_movie main .sessions {scroll-margin-top:12px}
#p_movie main .sessions h2 {margin:28px 0 14px; font-size:22px; color:#fff}
#p_movie main .sessions .filters {padding:14px; background:#101010; border:1px solid #2a2a2a; border-radius:12px}
#p_movie main .sessions .filters .days {display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; scrollbar-width:none; -ms-overflow-style:none}
#p_movie main .sessions .filters .days::-webkit-scrollbar {display:none}
#p_movie main .sessions .filters .days.drag {cursor:grabbing}
#p_movie main .sessions .filters .days.drag a {cursor:grabbing}
#p_movie main .sessions .filters .days a {display:flex; flex:none; flex-direction:column; align-items:center; justify-content:center; min-width:72px; padding:6px 12px; text-decoration:none; line-height:1.2; color:#ddd; border:1px solid #333; border-radius:10px}
#p_movie main .sessions .filters .days a span {font-size:12px; color:#999}
#p_movie main .sessions .filters .days a:hover {border-color:#2a7a4b}
#p_movie main .sessions .filters .days a.active {color:#fff; background:#2a7a4b; border-color:#2a7a4b}
#p_movie main .sessions .filters .days a.active span {color:#d9f2e3}
#p_movie main .sessions .filters .selects {display:flex; flex-wrap:wrap; align-items:center; gap:8px}
#p_movie main .sessions .filters .selects select {flex:1 1 200px; min-width:0; padding:8px 36px 8px 12px; font:inherit; font-size:14px; color:#f2f2f2; background:#1d1d1d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; border:1px solid #333; border-radius:8px; cursor:pointer; -webkit-appearance:none; appearance:none}
#p_movie main .sessions .filters .selects select:hover {border-color:#444}
#p_movie main .sessions .filters .selects a.reset {flex:none; padding:8px 14px; text-decoration:none; white-space:nowrap; font-size:14px; color:#8fc9a6; border:1px solid #2a7a4b; border-radius:8px}
#p_movie main .sessions .filters .selects a.reset:hover {color:#fff; background:#2a7a4b}
#p_movie main .sessions .empty {margin:24px 0; text-align:center; color:#aaa}
#p_movie main .sessions .empty a {color:#8fc9a6}
/*---------------------------------------*/
#p_movie main .sessions .day {margin:24px 0 0}
#p_movie main .sessions .day h3 {margin:0 0 12px; padding-bottom:8px; font-size:18px; font-weight:600; color:#fff; border-bottom:1px solid #2a2a2a}
#p_movie main .sessions .day .cards {display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px}
#p_movie main .sessions .day .cards .card {display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; background:#1a1a1a; border:1px solid #262626; border-radius:10px}
#p_movie main .sessions .day .cards .card .where {min-width:0}
#p_movie main .sessions .day .cards .card .where b {display:block; font-size:16px; font-weight:600; color:#fff}
#p_movie main .sessions .day .cards .card .where span {display:block; font-size:13px; color:#8fc9a6}
#p_movie main .sessions .day .cards .card .times {display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px}
#p_movie main .sessions .day .cards .card .times button {padding:7px 14px; font:inherit; font-size:15px; font-weight:600; color:#fff; background:#2a7a4b; border:0; border-radius:8px; cursor:pointer}
#p_movie main .sessions .day .cards .card .times button:hover {background:#33925a}
#p_movie main .sessions .day .cards .card .times span {padding:7px 14px; font:inherit; font-size:15px; font-weight:600; border-radius:8px}
#p_movie main .sessions .day .cards .card .times span.past {color:#666; background:#222}

@media (max-width:600px) {
	#p_movie main {padding:8px 12px 40px}
	#p_movie main .movie {display:flow-root}
	#p_movie main .movie .poster {float:left; width:110px; height:158px; margin:0 14px 10px 0}
	#p_movie main .movie .info h2 {font-size:22px}
	#p_movie main .movie .info .facts {clear:both; grid-template-columns:1fr; gap:2px}
	#p_movie main .movie .info .facts dd {margin:0 0 6px}
	#p_movie main .sessions .filters {padding:10px}
	#p_movie main .sessions .day .cards {grid-template-columns:1fr}
}


/*=========================================================*/
/* EVENT BOX                                               */
/*=========================================================*/
#event_mask {background:rgba(0,0,0,.65); position:fixed; inset:0; z-index:4}
#event_box {display:flex; flex-direction:column; background:#111; border:1px solid #444; position:fixed; inset:40px 8vw; z-index:5}
#event_box .bar {display:flex; justify-content:flex-end; gap:8px; padding:8px}
#event_box .bar button {padding:6px 10px; font:inherit; color:#fff; background:#2a7a4b; border:0; border-radius:8px; cursor:pointer}
#event_box iframe {flex:1; width:100%; background:#fff; border:0}


/*=========================================================*/
/* TICKET                                                  */
/*=========================================================*/
#p_ticket {display:flex; flex-direction:column; height:100%; font:15px/1.4 "Segoe UI",sans-serif}
#p_ticket .bar {display:flex; flex:none; align-items:center; gap:12px; padding:8px 14px; background:#101010; border-bottom:1px solid #2a2a2a}
#p_ticket .bar img {display:block; width:auto; height:28px}
#p_ticket .bar .info {min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
#p_ticket .bar .info b {font-weight:600}
#p_ticket .bar .info span {color:#9a9a9a}
#p_ticket .bar .share {flex:none; margin-left:auto; padding:6px 12px; font:inherit; font-size:14px; color:#fff; background:#2a7a4b; border:0; border-radius:8px; cursor:pointer}
#p_ticket .bar .share:hover {background:#33925a}
#p_ticket .frame {flex:1; background:#fff; position:relative}
#p_ticket .frame iframe {width:100%; height:100%; border:0; position:absolute; inset:0}
#p_ticket .frame .loading {padding:40px 20px; text-align:center; color:#666}
#p_ticket .error {margin:auto; padding:40px 20px; text-align:center}
#p_ticket .error h1 {margin:0 0 16px; font-size:22px; font-weight:600}
#p_ticket .error a {color:#8fc9a6}

@media (max-width:600px) {
	#p_ticket .bar img {height:22px}
	#p_ticket .bar .info span {display:block}
}


/*=========================================================*/
/* ERROR                                                   */
/*=========================================================*/
#p_error main {max-width:960px; margin:0 auto; padding:8px 20px 40px}
#p_error main .error {margin:60px 0; text-align:center}
#p_error main .error h2 {margin:0 0 10px; font-size:24px; font-weight:600}
#p_error main .error p {margin:0 0 20px; color:#9a9a9a}
#p_error main .error a {display:inline-block; padding:8px 16px; text-decoration:none; color:#fff; background:#2a7a4b; border-radius:8px}
#p_error main .error a:hover {background:#33925a}

@media (max-width:600px) {
	#p_error main {padding:8px 12px 40px}
}


/*=========================================================*/
/* SHARE BOX                                               */
/*=========================================================*/
#share_mask {background:rgba(0,0,0,.75); position:fixed; inset:0; z-index:6}
#share_box {width:360px; max-width:calc(100vw - 24px); max-height:calc(100vh - 24px); overflow:auto; padding:18px; text-align:center; color:#f2f2f2; background:#1b1b1b; border:1px solid #333; border-radius:12px; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:7}
#share_box .close {line-height:1; font-size:22px; color:#888; background:none; border:0; cursor:pointer; position:absolute; right:10px; top:8px}
#share_box .close:hover {color:#fff}
#share_box h3 {margin:0 24px 4px; font-size:17px; font-weight:600}
#share_box .info {margin:0 0 14px; font-size:14px; color:#9a9a9a}
#share_box img {display:block; width:220px; height:220px; margin:0 auto 14px; background:#fff; border-radius:8px}
#share_box input {width:100%; padding:9px 10px; text-align:center; font:inherit; font-size:14px; color:#f2f2f2; background:#141414; border:1px solid #333; border-radius:8px}
#share_box .buttons {display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:12px 0 0}
#share_box .buttons button {padding:8px 14px; text-decoration:none; font:inherit; font-size:14px; color:#8fc9a6; background:transparent; border:1px solid #2a7a4b; border-radius:8px; cursor:pointer}
#share_box .buttons button:hover {color:#fff; background:#2a7a4b}
#share_box .buttons button.main {color:#fff; background:#2a7a4b}
#share_box .buttons button.main:hover {background:#33925a}
#share_box .buttons a {padding:8px 14px; text-decoration:none; font:inherit; font-size:14px; color:#8fc9a6; background:transparent; border:1px solid #2a7a4b; border-radius:8px; cursor:pointer}
#share_box .buttons a:hover {color:#fff; background:#2a7a4b}
#share_box .note {margin:12px 0 0; font-size:12px; color:#777}


/*=========================================================*/
/* HTML                                                    */
/*=========================================================*/
html {height:100%}