/*
Theme Name:     Newspaper Child theme
Theme URI: 		http://themeforest.net/user/tagDiv/portfolio
Description:    Child theme made by tagDiv
Author:         tagDiv
Author URI: 	http://themeforest.net/user/tagDiv/portfolio
Template:       Newspaper
Version:        9.0c
*/


/*  ----------------------------------------------------------------------------
    This file will load automatically when the child theme is active. You can use it
    for custom CSS.
*/

/* ========== Big rating boxes (mobile-first) ========== */
.bigrating{
  display:flex;
  flex-direction:column;        /* stack on small screens */
  gap:1rem;
  justify-content:center;
  align-items:stretch;
  margin:2rem 0;
}

.bigrating-box{
  flex:1 1 100%;
  width: 100%;
  max-width: 100%;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  overflow:hidden;
  transition:transform .2s, box-shadow .2s;
}

@media (min-width:768px){
  .bigrating{
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .bigrating-box{
    flex: 1 1 526px;
    width: auto;
  }
}
.bigrating-box:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}

/* headers */
.bigrating-header{
  padding:.75rem 1rem;
  font-size:.9rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:#fff;
  text-align:center;
}
.bigrating-box--author .bigrating-header{ background:#2980b9; }
.bigrating-box--user   .bigrating-header{ background:#f39c12; }

/* metrics */
.bigrating-metrics{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:1rem;
}

/* metric line */
.metric-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  grid-template-areas:
    "name  value"
    "stars value";
  gap:.25rem .5rem;
}
.metric-name{
  grid-area:name;
  font-size:.9rem;
  color:#333;
  overflow-wrap:anywhere;
}
.metric-stars{ grid-area:stars; }
.metric-value{
  grid-area:value;
  font-size:.9rem;
  color:#555;
  white-space:nowrap;
  align-self:center;
  justify-self:end;
}

/* total row */
.bigrating-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem;
  border-top:1px solid #eee;
}
.bigrating-total-stars{ font-size:1.5rem; }
.bigrating-total-value{
  font-size:1.25rem;
  font-weight:700;
  color:#333;
  transition:color .2s;
}
/* color only the total value by range */
.bigrating-total-value[data-rating^="0"],
.bigrating-total-value[data-rating^="1"],
.bigrating-total-value[data-rating^="2"],
.bigrating-total-value[data-rating^="3"],
.bigrating-total-value[data-rating^="4"],
.bigrating-total-value[data-rating^="5"]{ color:#e74c3c; }
.bigrating-total-value[data-rating^="6"],
.bigrating-total-value[data-rating^="7"]{ color:#e67e22; }
.bigrating-total-value[data-rating^="8"],
.bigrating-total-value[data-rating^="9"],
.bigrating-total-value[data-rating^="10"]{ color:#2ecc71; }

/* ========== Compact rating badges ========== */
.rating-badges{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  margin:1em 0;
}

.rating-badge{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  padding:1.5rem 1rem .75rem;
  width:120px;
  transition:transform .2s, box-shadow .2s;
}
.rating-badge:hover{
  transform:translateY(-6px);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}

/* fixed color bar (title) */
.rating-badge__title{
  position:absolute;
  top:0;left:0;right:0;
  padding:.4em;
  font-size:.78rem;
  text-transform:uppercase;
  text-align:center;
  letter-spacing:.5px;
  line-height:1.2em;
  max-height:2.4em;
  overflow:hidden;
  color:#fff;
  border-radius:12px 12px 0 0;
}
.rating-badge--author .rating-badge__title{ background:#2c97f3; }
.rating-badge--user   .rating-badge__title{ background:#975af3; }

/* value & scale */
.rating-badge__value{
  font-size:2.25rem;
  font-weight:700;
  line-height:1;
  margin:.5rem auto;
  color:var(--rating-color, #333);
}
.rating-badge__scale{
  font-size:.75rem;
  color:#999;
}

/* range coloring via data-rating (works on iOS Safari/Chrome) */
.rating-badge[data-rating^="0"],
.rating-badge[data-rating^="1"],
.rating-badge[data-rating^="2"],
.rating-badge[data-rating^="3"],
.rating-badge[data-rating^="4"],
.rating-badge[data-rating^="5"]{ --rating-color:#e74c3c; }
.rating-badge[data-rating^="6"],
.rating-badge[data-rating^="7"]{ --rating-color:#e67e22; }
.rating-badge[data-rating^="8"],
.rating-badge[data-rating^="9"],
.rating-badge[data-rating^="10"]{ --rating-color:#2ecc71; }