/* ===== Admin helpers ===== */
.rc-table-fixed { table-layout:auto; }
.rc-table-fixed th, .rc-table-fixed td { vertical-align:top; }
.rc-helptext { color:#555; margin-top:4px; }
.rc-table-scroll { overflow-x:auto; }
.rc-col-logo { width:60px; }
.rc-thumb { width:32px; height:32px; object-fit:cover; border-radius:4px; }
.rc-dash { color:#999; }
.rc-ellipsis-cell { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rc-nowrap { white-space:nowrap; }
.rc-input { width:100%; max-width:500px; }
.rc-input-full { width:100%; }
.rc-fields-table { margin-top:10px; }
.rc-metabox-tip { margin:0 0 8px; }
.rc-metabox-hint { color:#666; margin-top:8px; }
.rc-select { width:100%; }

/* Logo picker area (admin) */
.rc-logo-row { display:flex; gap:12px; align-items:center; }
.rc-logo-preview {
  width:100px; height:100px; border:1px dashed #ccc;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:8px; background:#fafafa;
}
.rc-logo-preview-img { max-width:100%; height:auto; }
.rc-logo-preview-empty { font-size:12px; color:#888; }
.rc-logo-desc { margin-top:6px; }


/* Grid container */
.rc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Card */
.rc-card {
  background: #ffffff;
  border: 1px solid #eef1f4;
  border-radius: 16px;
  padding: 20px;
  height: 100%;
  box-shadow:
    0 1px 2px rgba(16,24,40,0.05),
    0 8px 24px rgba(16,24,40,0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  font-family: 'Almarai', sans-serif;
  display: flex;
  flex-direction: column; /* ensure CTA sticks at bottom if desired */
}

/* ==== Top Broker Ribbon ==== */
.rc-card__logo-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* Green ribbon above the logo */
.rc-top-broker-flag {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 5px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  z-index: 2;
}

/* CTA button */

.rc-card__cta {
    margin-top: 15px;
}

.rc-card__rating-stars{
  color:#2563eb;
  font-size:1.05rem;
  letter-spacing:1px;
  line-height:1;
}
.rc-card__rating-stars .rc-half-star{
  position:relative;
  display:inline-block;
  width:0.55em;
  overflow:hidden;
  vertical-align:bottom;
  letter-spacing:0;
}


.rc-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.rc-card__title{
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:left;
}
.rc-card__name{
  font-size:1.25rem;
  font-weight:700;
  color:#0f172a;
  text-decoration:none;
}
.rc-card__name:hover{ color:#2563eb; }

.rc-card__rating{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.95rem;
  line-height:1;
    white-space: nowrap;
}
.rc-card__rating-num{ font-weight:700; color:#111827; }
.rc-card__rating-outof{ color:#94a3b8; }

.rc-card__logo{
  width:64px; height:64px; border-radius:10px; object-fit:cover;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.rc-card__logo--placeholder{
  width:64px; height:64px; border-radius:10px; background:#f1f5f9;
}

.rc-card__extras{
  display:flex; flex-direction:column; gap:6px;
  border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb;
  padding:10px 0;
}
.rc-card__extra-item{
  display:grid; grid-template-columns: 3fr 7fr; align-items:start; gap:10px; font-size:.95rem;
}
.rc-card__extra-label{ color:#475569; font-weight:600; white-space:nowrap; }
.rc-card__extra-value {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 2px;
}
.rc-card__extra-value a{ color:#1f2937; text-decoration:underline; }
.rc-card__extra-value a:hover{ color:#111827; text-decoration:none; }

.rc-card__extra-note {
  margin-left:10px;
}

/* Primary action button */
.rc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  width:100%;
  padding:12px 18px;

  border-radius:10px;
  font-weight:600;
  font-size:1rem;
  text-decoration:none;
  cursor:pointer;
  border:0;
  box-shadow:0 6px 16px rgba(37,99,235,.25);

  transition:
    background .2s ease,
    box-shadow .2s ease,
    transform .08s ease;
}

.rc-btn-primary {
  background:#2563eb;
  color:#fff !important;

}

.rc-btn-secondary {
background:#dbe6ff;
}


.rc-btn-primary:hover{
  background:#1d4ed8;
  box-shadow:0 8px 18px rgba(25, 28, 37, 0.28);
}


.rc-btn-secondary:hover{
  background:#c9d6f6;
  box-shadow:0 8px 18px rgba(29,78,216,.28);
}

.rc-btn:active{
  transform:translateY(0);
}

.rc-btn:focus{
  outline:2px solid #bfdbfe;
  outline-offset:2px;
}


@media (max-width:480px){
  .rc-card{ padding:18px; }
  .rc-card__logo, .rc-card__logo--placeholder{ width:56px; height:56px; }
  .rc-card__extra-item{ grid-template-columns: 1fr 1.2fr; }
}

/* ===== Sticky CTA (front-end on review posts) ===== */
.review-sticky-cta{
  position:fixed; left:0; right:0; bottom:0; width:100%; background:#fff;
  box-shadow:0 -6px 20px rgba(0,0,0,.18); z-index:9999; padding:14px 16px; font-family: 'Almarai', sans-serif;
}
.review-sticky-cta__inner{
  max-width:1100px; margin:0 auto; text-align:center; display:flex; gap:10px; justify-content:center; flex-wrap:wrap
}
.review-sticky-cta__btn{
  display:inline-block; padding:15px 20px 15px 20px; background: var(--e-global-color-accent); color:#fff!important; border-radius:3px;
  font-weight:600; text-decoration:none!important; box-shadow:0 6px 20px rgba(37,99,235,.35); transition:transform .08s ease, background .2s ease
}
.review-sticky-cta__btn:hover{ background:#dd5002; transform:translateY(-1px) }
.review-sticky-cta__btn:active{ transform:translateY(0) }
.review-sticky-cta__btn.ghost{ background:#eef2ff; color:#1f2937!important; box-shadow:none }
.review-sticky-cta__btn.ghost:hover{ background:#e0e7ff }
@media (max-width:480px){
  .review-sticky-cta{ padding:10px 12px }
  .review-sticky-cta__btn{ width:100%; max-width:250px }
}

/* ensure in-page anchors aren’t hidden by sticky bar */
body{ scroll-padding-bottom:72px }



@media (max-width: 1024px) {
  .rc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .rc-grid {
    grid-template-columns: 1fr;
  }

}