/*
Theme Name: InstaProfile
Description: Styles specific to the single-apps template (download hero, info tables, screenshots).
Version: 1.0.0
Text Domain: instaprofile
*/

.app-single .entry-content {
	max-width: none;
}

.app-single .app-columns .entry-content,
.front-page .app-columns .entry-content {
	max-width: var(--para-width, 70ch);
}

.app-download-panel {
	position: sticky;
	top: calc(var(--header-h) + 16px);
	padding: 1.15rem;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow);
}

.app-download-panel .btn-download {
	width: 100%;
}

.app-download-panel .panel-meta {
	margin: 0.85rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.88rem;
	color: var(--c-muted);
}

.app-download-panel .panel-meta li {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.45rem 0;
	border-bottom: 1px dashed var(--c-border);
}

.app-download-panel .panel-meta li:last-child {
	border-bottom: 0;
}

.app-download-panel .panel-meta strong {
	color: var(--c-text);
	font-weight: 600;
	text-align: right;
}

.version-history {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	overflow: hidden;
}

.version-history li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--c-border);
	background: var(--c-surface);
	font-size: 0.9rem;
}

.version-history li:last-child {
	border-bottom: 0;
}

.version-history li:hover {
	background: var(--c-surface-2);
}

.version-history .ver-name {
	font-weight: 700;
	color: var(--c-primary);
}

.app-rating-box {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	padding: 1.15rem;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	margin-bottom: 1.75rem;
}

.app-rating-box .big-rating {
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
	color: var(--c-heading);
}

.rating-bars {
	flex: 1 1 200px;
}

.rating-bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	color: var(--c-muted);
	margin-bottom: 0.3rem;
}

.rating-bar-track {
	flex: 1;
	height: 7px;
	border-radius: 999px;
	background: var(--c-surface-2);
	overflow: hidden;
}

.rating-bar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--c-accent), var(--c-primary));
}

.disclosure {
	margin-top: 1.5rem;
	padding: 0.85rem 1rem;
	border: 1px dashed var(--c-border);
	border-radius: var(--c-radius-sm);
	font-size: 0.82rem;
	color: var(--c-muted);
	background: var(--c-surface);
}

/* Reviews & ratings */
.app-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: inherit;
	text-decoration: none;
}

.app-reviews {
	margin-top: 2rem;
}

.review-summary {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	flex-wrap: wrap;
	padding: 1.15rem;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	margin-bottom: 1.5rem;
}

.review-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	min-width: 8rem;
}

.review-score-value {
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
	color: var(--c-heading);
}

.review-score-count {
	font-size: 0.82rem;
	color: var(--c-muted);
}

.rating-bar-count {
	min-width: 2rem;
	text-align: right;
}

.review-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.review-item {
	padding: 1rem 0;
	border-top: 1px solid var(--c-border);
}

.review-head {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	flex-wrap: wrap;
	margin-bottom: 0.4rem;
}

.review-author {
	color: var(--c-heading);
}

.review-date {
	font-size: 0.78rem;
	color: var(--c-muted);
	margin-left: auto;
}

.review-body {
	margin: 0;
	line-height: 1.6;
}

.review-empty {
	color: var(--c-muted);
}

.review-stars .rating-stars {
	font-size: 0.9rem;
}

.comment-form-rating .rating-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.comment-form-rating .rating-input {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	width: 100%;
	gap: 0.15rem;
}

.comment-form-rating .rating-input input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.comment-form-rating .rating-input label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	cursor: pointer;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--c-border);
}

.comment-form-rating .rating-input label:hover,
.comment-form-rating .rating-input label:hover ~ label,
.comment-form-rating .rating-input input:checked ~ label,
.comment-form-rating .rating-input input:focus-visible ~ label {
	color: #f5a623;
}

.comment-form-rating .rating-input input:focus-visible ~ label:first-of-type {
	outline: 2px solid var(--c-primary);
	outline-offset: 2px;
}