/* Стили подключаются в <head> раньше темы, поэтому правила, которые тема может перебить
   правилом той же силы, начинаются с .mgc-candles. */
.mgc-candles {
	margin: 20px auto;
	width: 100%;
	max-width: 500px;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.mgc-candles__main image,
#mgc-candles__text,
.mgc-candles-inputform,
#mgc-candles__answer-text {
	transition: all .5s linear;
}

.mgc-candles-s {
	transform-origin: bottom;
	transform-box: fill-box;
	cursor: pointer;
}

.mgc-candles-s-r {
	transform: rotate(45deg);
}
.mgc-candles-s-l {
	transform: rotate(-45deg);
}

.mgc-candles-inputform>input.mgc-candles-input {
	width: 170px;
	text-align: center;
	padding: 10px 0px 10px 0px;
	background: #f1e7d4;
	color: #4a3828;
	border: 1px solid #c9b896;
	border-radius: 5px;
	/* В Safari на iPhone поле внутри блока с user-select: none может не принимать ввод */
	-webkit-user-select: text;
	user-select: text;
}

.mgc-candles-inputform>input.mgc-candles-input.error {
	border: 2px solid red;
}

.mgc-candles-inputform>input.mgc-candles-input:focus {
	outline: none;
}

.mgc-candles-inputform {
	display: flex;
	justify-content: space-around;
}

.mgc-candles .mgc-candles__invisible {
	opacity: 0;
}
/* Сильнее, чем .mgc-btn-2 { display: flex }: иначе скрытые кнопки оставались прозрачными,
   но занимали место и нажимались */
.mgc-candles .mgc-candles__none {
	display: none;
}

#mgc-candles__answer-text {
	background: #440706;
	color: #fff;
	margin: 20px auto;
	border-radius: 5px;
	padding: 10px;
	box-shadow: -7px 5px 6px 0px rgb(136 136 136 / 75%);
}

/* Шрифт — как у сайта (раньше был Comic Sans: на iPhone и Android его нет, и текст выглядел по-разному) */
#mgc-candles__text,
#mgc-candles__answer-text {
	text-align: center;
}

#mgc-candles__text {
	margin: 10px 0;
	font-style: italic;
}

/* Имена над толкованием: «Мария и Андрей» */
.mgc-candles__names {
	display: block;
	font-weight: 600;
	margin-bottom: .4em;
}

.mgc-candles .spinner {
	margin: 0 auto;
	width: 70px;
	text-align: center;
}

.mgc-candles .spinner > div {
	width: 18px;
	height: 18px;
	background-color: #e87a73;

	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.mgc-candles .spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.mgc-candles .spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
	0%, 80%, 100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	} 40% {
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}
/* Кнопка */
.mgc-btn-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 235px;
    height: 65px;
    margin: 10px auto 0;
    background-color: #f1e7d4;
    background-image: url('/wp-content/themes/gadanie-online/assets/images/knopka.webp');
    background-size: cover;
    background-position: center;
    color: #4a3828;
    font-size: 17px;
    font-weight: 400;
    font-family: 'EB Garamond', 'Georgia', serif;
    border: none;
    border-radius: 0;
    padding: 0 0 4px 0;
    outline: none;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.mgc-btn-2:hover {
    transform: translateY(-2px);
}

.mgc-btn-2:active,
.mgc-btn-2.mgc-btn-2--active {
    background-image: url('/wp-content/themes/gadanie-online/assets/images/knopka-1.webp');
    transform: translateY(2px);
}

/* Centering for candles container */
.mgc-candles__foot {
    text-align: center;
}

@media only screen and (max-width:600px) {
	.mgc-candles-inputform {
		flex-direction: column;
		align-items: center;
	}
	#mgc-candles-input-1 {
		margin-bottom: 10px;
	}
}