/**
 * Doc Rating Styles
 *
 * Styles for the [doc_rating] shortcode that allows users
 * to rate documentation articles.
 *
 * Design Specs:
 * - Wrapper: #F3F4F6 background, 8px border-radius
 * - Font: 20px/28px, weight 500
 * - Green: #22C55E
 * - Red: #EF4444
 * - Buttons: 48px circles
 *
 * Note: Using !important throughout for SeedProd compatibility
 */

/* Container */
.edd-doc-rating {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 1rem !important;
	padding: 1.5rem !important;
	background: #F3F4F6 !important;
	border-radius: 8px !important;
	margin: 2rem 0 !important;
}

/* Question text */
.edd-doc-rating__question {
	font-size: 20px !important;
	line-height: 28px !important;
	font-weight: 500 !important;
	margin: 0 !important;
	color: #1f2937 !important;
}

/* Thank you message */
.edd-doc-rating__message {
	font-size: 20px !important;
	line-height: 28px !important;
	font-weight: 500 !important;
	margin: 0 !important;
	color: #1f2937 !important;
}

/* Buttons container */
.edd-doc-rating__buttons {
	display: flex !important;
	gap: 1rem !important;
	align-items: center !important;
}

/* Button base styles */
.edd-doc-rating__button {
	width: 48px !important;
	height: 32px !important;
	border-radius: 4px !important;
	border: none !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: transform 0.2s ease, opacity 0.2s ease !important;
	padding: 0 !important;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

.edd-doc-rating__button:hover:not(:disabled) {
	transform: scale(1.1) !important;
}

.edd-doc-rating__button:active:not(:disabled) {
	transform: scale(0.95) !important;
}

.edd-doc-rating__button:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	transform: none !important;
}

/* Green checkmark button */
.edd-doc-rating__button--yes {
	background-color: #22C55E !important;
}

.edd-doc-rating__button--yes:hover:not(:disabled) {
	background-color: #16a34a !important;
}

/* Red X button */
.edd-doc-rating__button--no {
	background-color: #EF4444 !important;
}

.edd-doc-rating__button--no:hover:not(:disabled) {
	background-color: #dc2626 !important;
}

/* SVG icons */
.edd-doc-rating__button svg {
	width: 24px !important;
	height: 24px !important;
	pointer-events: none !important;
}

/* Voted state - can add additional styling here if needed */
.edd-doc-rating--voted {
	/* Thank you state */
}

/* Responsive adjustments */
@media (max-width: 640px) {
	.edd-doc-rating {
		padding: 1.25rem !important;
		flex-wrap: wrap !important;
	}

	.edd-doc-rating__question,
	.edd-doc-rating__message {
		font-size: 18px !important;
		line-height: 26px !important;
	}

	.edd-doc-rating__button {
		width: 44px !important;
		height: 30px !important;
	}

	.edd-doc-rating__button svg {
		width: 22px !important;
		height: 22px !important;
	}
}