/*
 * Modal de opinar (assets/opinar-modal.js). Lo de dentro es el #respond del
 * tema, que trae sus estilos colgados de #respond: aquí solo se le quita el
 * marco y se recoloca la rejilla para el ancho del modal. Todo va prefijado
 * con .choko-opinar para ganarle al tema por especificidad.
 *
 * OJO con el HTML del tema: el botón de publicar (.form-actions) va dentro de
 * un <p class="form-submit col-md-4">. Ocultar ese <p> se lleva el botón; aquí
 * solo se le quita la columna para que ocupe todo el ancho.
 */

.choko-opinar {
	width: calc(100% - 32px);
	max-width: 620px;
	max-height: calc(100% - 48px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 20px 60px rgba(10, 34, 52, 0.3);
	color: #666;
	overflow: auto;
}

.choko-opinar::backdrop {
	background: rgba(10, 34, 52, 0.55);
}

.choko-opinar .choko-opinar-caja {
	position: relative;
	padding: 32px 30px 18px;
	border-top: 5px solid #f9a11b;
}

.choko-opinar .choko-opinar-cerrar {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #6c737a;
	font-size: 30px;
	line-height: 40px;
	cursor: pointer;
}

.choko-opinar .choko-opinar-cerrar:hover,
.choko-opinar .choko-opinar-cerrar:focus-visible {
	background: #f1f3f4;
	color: #0a2234;
}

.choko-opinar .choko-opinar-titulo {
	margin: 0 44px 4px 0;
	padding: 0;
	color: #26abe2;
	font-family: Montserrat, sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
}

.choko-opinar .choko-opinar-tour {
	margin: 0 0 12px;
	color: #f9a11b;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	font-weight: 700;
}

.choko-opinar .choko-opinar-intro {
	margin: 0;
	font-family: Quicksand, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
}

.choko-opinar #respond {
	margin: 0;
	padding: 0;
	border: 0;
}

/* El título del tema ("Deja tu comentario") ya lo dice el del modal. */
.choko-opinar #respond #reply-title {
	display: none;
}

.choko-opinar #respond .row {
	margin-left: -8px;
	margin-right: -8px;
}

.choko-opinar #respond .col-md-12,
.choko-opinar #respond .col-md-4 {
	float: left;
	width: 100%;
	padding-left: 8px;
	padding-right: 8px;
}

.choko-opinar #respond .form-submit {
	float: none;
	clear: both;
	width: 100%;
	margin: 0;
	padding: 0;
}

.choko-opinar #respond .form-item {
	margin: 8px 0;
}

.choko-opinar #respond .form-item textarea {
	height: 150px;
	font-size: 15px;
}

.choko-opinar #respond .form-item input {
	font-size: 15px;
}

.choko-opinar #respond .form-actions {
	clear: both;
	margin: 8px 0 12px;
	padding: 0 8px;
}

/* .pi-btn del tema va con height y line-height fijos: nada de padding vertical. */
.choko-opinar #respond .form-actions .submit {
	width: 100%;
	height: 48px;
	padding: 0 20px;
	font-size: 13px;
	line-height: 48px;
	letter-spacing: 0.04em;
}

@media (min-width: 560px) {
	.choko-opinar #respond .col-md-4 {
		width: 50%;
	}

	.choko-opinar #respond .form-submit {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.choko-opinar .choko-opinar-caja {
		padding: 28px 18px 10px;
	}

	.choko-opinar .choko-opinar-titulo {
		font-size: 21px;
	}
}