/* Google reviews — plugin «Widget for Google Reviews» (widget-google-reviews).

   Το widget είναι χτισμένο πάνω σε CSS variables, οπότε τα περισσότερα
   αλλάζουν καθαρά με tokens στο .wp-gr: φόντο κάρτας, χρώμα αστεριών,
   χρώματα κειμένου. Μόνο όσα το plugin καρφώνει με !important (το μπλε
   των ονομάτων, η ακτίνα, η σκιά, τα paddings) χρειάζονται override.

   Οι δικοί τους κανόνες γράφονται ως `.wp-gr .x` ή `.wp-gr a.x`. Εδώ
   χρησιμοποιούμε `.wp-gr.rpi` — και οι δύο κλάσεις υπάρχουν πάντα στο root
   του widget — ώστε να έχουμε μία κλάση παραπάνω και να κερδίζουμε.

   Το CSS ζει στο theme κι όχι στον φάκελο του plugin, για να μη χάνεται
   σε κάθε update του. */

/* --------------------------------------------------------- tokens --- */

.wp-gr.rpi {
  /* Το --color οδηγεί αστέρια και slider dots· ήταν #fb8e28. */
  --color: var(--eg-yellow);
  --star-color: var(--eg-yellow);
  --rpi-star-color: var(--eg-yellow);
  --rpi-star-empty-color: #d8d5ca;

  /* Φόντο κάρτας· ήταν #f4f4f4. */
  --rev-color: var(--eg-white);

  --name-color: var(--eg-ink);
  --text-color: #35383d;
  --head-based-color: #6b6f76;
  --powered-color: #6b6f76;

  --card-gap: 16px;
  --img-size: 44px;
}

/* ---------------------------------------------------------- κάρτα --- */

.wp-gr.rpi .grw-review-inner {
  margin: 0 !important;
  padding: 22px !important;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.wp-gr.rpi .grw-review-inner.grw-round {
  border-radius: 16px !important;
}

/* Η σκιά τους είναι δύο σκληρά μαύρα στρώματα. Την αντικαθιστούμε με το
   hairline περίγραμμα που χρησιμοποιούν όλες οι κάρτες του theme. */
.wp-gr.rpi .grw-review-inner.grw-shadow,
.wp-gr.rpi .grw-review-inner.grw-backgnd {
  border: 1px solid rgba(8, 9, 11, .1) !important;
  box-shadow: none !important;
}

.wp-gr.rpi .grw-review-inner.grw-backgnd:hover {
  border-color: var(--eg-yellow) !important;
  box-shadow: 0 14px 40px rgba(8, 9, 11, .07) !important;
  transform: translateY(-3px);
}

/* Το gap το δίνει πλέον το --card-gap, όχι margin στην κάρτα. */
.wp-gr.rpi[data-layout="grid"] .grw-reviews {
  gap: var(--card-gap) !important;
}

/* --------------------------------------------------- στοιχεία κάρτας -- */

/* Το όνομα είναι link και το plugin το καρφώνει σε #427fed. */
.wp-gr.rpi a.wp-google-name,
.wp-gr.rpi .wp-google-name {
  color: var(--eg-ink) !important;
  font-weight: 700 !important;
}

.wp-gr.rpi a.wp-google-name:hover,
.wp-gr.rpi a.wp-google-name:focus-visible {
  text-decoration: underline !important;
  text-decoration-color: var(--eg-yellow) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

.wp-gr.rpi .wp-google-time {
  color: #6b6f76 !important;
  font-size: 12px !important;
}

.wp-gr.rpi .wp-google-text {
  color: #35383d !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

/* Το avatar έχει δικό του σκληρό box-shadow σε ::before. */
.wp-gr.rpi .grw-img-wrap::before {
  box-shadow: 0 0 0 1px rgba(8, 9, 11, .1) !important;
}

/* Το κείμενο μεγάλων κριτικών κυλάει μέσα στην κάρτα· η default μπάρα
   είναι έντονη γκρι και τραβάει το μάτι. */
.wp-gr.rpi .grw-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(8, 9, 11, .18) transparent;
}

.wp-gr.rpi .grw-scroll::-webkit-scrollbar {
  width: 4px;
}

.wp-gr.rpi .grw-scroll::-webkit-scrollbar-thumb {
  background: rgba(8, 9, 11, .18);
  border-radius: 999px;
}

.wp-gr.rpi .grw-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* -------------------------------------------------------- κεφαλίδα --- */

.wp-gr.rpi .grw-header-inner {
  margin: 0 0 26px !important;
  padding: 0 !important;
}

.wp-gr.rpi .grw-header .rpi-stars {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--eg-ink) !important;
}

.wp-gr.rpi .wp-google-based {
  margin-top: 8px !important;
  color: #6b6f76 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* Το «powered by Google» κρατά τα χρώματα της Google — είναι το σήμα
   προέλευσης. Μαλακώνουμε μόνο το «powered by» και το μέγεθος. */
.wp-gr.rpi .wp-google-powered {
  color: #6b6f76 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ----------------------------------------------------- σε σκούρο ---- */
/* Αν το widget μπει σε σκούρη ενότητα, γυρνούν μόνο τα χρώματα. */

.eg-footer .wp-gr.rpi,
.eg-section--dark .wp-gr.rpi {
  --rev-color: var(--eg-panel);
  --name-color: var(--eg-white);
  --text-color: var(--eg-muted);
}

.eg-footer .wp-gr.rpi .grw-review-inner.grw-backgnd,
.eg-section--dark .wp-gr.rpi .grw-review-inner.grw-backgnd {
  border-color: var(--eg-line) !important;
}

.eg-footer .wp-gr.rpi a.wp-google-name,
.eg-footer .wp-gr.rpi .wp-google-name,
.eg-section--dark .wp-gr.rpi a.wp-google-name,
.eg-section--dark .wp-gr.rpi .wp-google-name {
  color: var(--eg-white) !important;
}

.eg-footer .wp-gr.rpi .wp-google-text,
.eg-footer .wp-gr.rpi .wp-google-time,
.eg-section--dark .wp-gr.rpi .wp-google-text,
.eg-section--dark .wp-gr.rpi .wp-google-time {
  color: var(--eg-muted) !important;
}

.eg-footer .wp-gr.rpi .grw-header .rpi-stars,
.eg-section--dark .wp-gr.rpi .grw-header .rpi-stars {
  color: var(--eg-white) !important;
}

/* --------------------------------------------------------- mobile --- */

@media (max-width: 620px) {
  .wp-gr.rpi .grw-review-inner {
    padding: 18px !important;
  }

  .wp-gr.rpi .grw-header-inner {
    margin-bottom: 20px !important;
  }
}