/* General settings */
:root{
    /*background-color: lightgray;*/
    
    /* Widget settings */
    --widget-width: 15rem;
    --widget-bg-color: #fff;
    color: #000;

    /* Stars settings */
    --stars-rating: #;
    --stars-size: calc(var(--widget-width) / 7.5);
    --stars-color-fill: gold;
    --stars-color-empty: lightgray;
}

body {
    margin-left: 0.87rem;
}

.widget-container, #backdrop {
    background-color:var(--widget-bg-color);
    border-radius: 8px;
    font-family: system-ui, sans-serif;
    text-decoration: none;
    width: var(--widget-width);
    padding: calc(var(--widget-width) / 15);
    display: flex;
    flex-direction: row; /*toggle: row vs column*/
    align-items: center;
    gap: calc(var(--widget-width) / 15);
}

/* Title section */
.title-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--widget-width) / 30);
}

#google-logo{
    width: calc(var(--widget-width) / 4);
}

#google-text{
    font-size: calc(var(--widget-width) / 10);
    font-weight: 600;
    text-align: center;
    display: none; /*toggle: none vs inline-block*/
}

#client-name{
    display: none; /*toggle: none vs inline-block*/
    font-size: calc(var(--widget-width) / 15);  /*toggle: 0.75rem (20) vs 1rem (15)*/
}

.rating-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -0.5rem;
}

/* Stars section */
.star-ratings {
    color: var(--stars-color-empty);
    font-size: var(--stars-size);
    position: relative;
    margin: 0;
}

.fill-ratings {
    width: calc(var(--stars-rating) * 20%);
    color: var(--stars-color-fill);
    padding: 0;
    position: absolute;
    z-index: 1;
    display: block;
    top: 0;
    left: 0;
    overflow: hidden;
}

span {
    display: inline-block;
}

.empty-ratings {
    padding: 0;
    display: block;
    z-index: 0;
}

/* Review details */
.rating-counter{
    font-size: calc(var(--widget-width) / 20);  /*toggle: 0.75rem (20) vs 1rem (15)*/
    font-weight: 400;
}

.mini-summary{
    display: none;
}

#loading {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 64px;
  height: 64px;
  /* 1/2 of the height and width of the actual gif */
  margin: -32px 0 0 -32px;
  z-index: 100;
}

/*
#backdrop {
    /*background-color: white !important;*/
    /*height: 40%;
    position: absolute;
    z-index: 99;
} */