/**
 * Reviews Shortcode Styles
 */
 
 .reviews-app .posts-container{
	gap: 5px;
	display: flex;
	flex-direction: column;
	padding-bottom: 20px
}

.reviews-app .article-parent-container{
padding-bottom: 5px;
	    border-bottom: .25px dotted #000;
    width: 100%;
    min-height: initial;
    height: auto;
    display: inline-block;
}

.reviews-app .article-container{
	display: flex;
  column-gap: 20px;
}

.reviews-app .featured-image {
    height: 150px !important;
    max-height: 150px !important;
    background-color: grey !important;
    min-width: 35% !important;
    max-width: 35% !important;
    padding: 0 !important;
}

.reviews-app .featured-image img{
	height: 100%!important;
	object-fit: cover;
}

.reviews-app .article-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
		width: 65% !important;
}

.reviews-app h4{
	    font-family: "Kepler-std Semicondensed Display", 'EB Garamond', serif;
	font-size: 29px;
	line-height:28px;
}

.reviews-app .byline{
	color: #3a3a3a;
	text-transform: uppercase;
}

.reviews-app .pagination {
  font-size: 1rem;
  text-transform: uppercase !important;
  display: flex;
  align-items: center;
  column-gap: 10px !important;
}

.reviews-app .pagination .rev-current-page {
  color: var(--tnr-red) !important;
  font-weight: bold;
  padding:0!important;
  border:none!important;
  background-color:transparent!important;
}

.reviews-app .pagination .rev-page {
  cursor: pointer;
  transition: color 0.3s ease;
  padding:0!important;
  border:none!important;
  background-color:transparent!important;
}

.reviews-app .pagination .rev-page:hover {
  color: var(--tnr-red)!important;
}

.reviews-app .pagination .rev-button {
  background-color: var(--tnr-red)!important;
  color: white;
  width: 43px;
  height: 43px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem !important;
  border-radius: 50%;
  padding: 10px 13px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.reviews-app .pagination .rev-button:hover {
  background-color: var(--tnr-red)!important;
  color: white;
}

.reviews-app .pagination .rev-btn-plural {
  padding: 10px !important;
}

/* Skeleton Loader Styles */
.reviews-app .skeleton {
    animation: skeleton-loading 1.5s linear infinite alternate;
    background: #ddd;
    border-radius: 4px;
}

.reviews-app .skeleton-image {
    height: 120px !important;
    max-height: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}

.reviews-app .skeleton-title {
    height: 28px;
    width: 90%;
    margin-bottom: 10px;
}

.reviews-app .skeleton-byline {
    height: 14px;
    width: 60%;
}

@keyframes skeleton-loading {
    0% {
        background-color: hsl(200, 20%, 85%);
    }
    100% {
        background-color: hsl(200, 20%, 95%);
    }
}

@media screen and (max-width: 767px) {
    .reviews-app .skeleton-image {
        min-width: 36% !important;
        max-width: 36% !important;
    }
}

/* Ensure these styles don't conflict with other pagination on the site */
/* You might need to adjust specificity based on your theme */

/* Main review styles are already in the theme's CSS */