/* ================================================================
   Smart Reviews Widget – Frontend CSS
   Poppins headings · Figtree body · Lovedale colour defaults
   ================================================================ */

:root {
  --srw-primary:   #F26A21;
  --srw-secondary: #F4B400;
  --srw-accent:    #2E7D32;
  --srw-dark:      #222222;
  --srw-bg:        #FAFAFA;
  --srw-card:      #FFFFFF;
  --srw-border:    #E5E0D8;
  --srw-text:      #666666;
  --srw-star:      #F4B400;
  --srw-radius:    16px;
}

.srw-wrap, .srw-wrap * {
  box-sizing: border-box !important;
  font-family: 'Figtree', 'Segoe UI', sans-serif !important;
}

.srw-empty {
  color: var(--srw-text) !important;
  font-size: 15px !important;
  padding: 24px !important;
  text-align: center !important;
  border: 1px dashed var(--srw-border) !important;
  border-radius: var(--srw-radius) !important;
}

/* ================================================================
   GRID LAYOUT
   ================================================================ */
.srw-grid {
  display: grid !important;
  gap: 20px !important;
  width: 100% !important;
}
.srw-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.srw-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.srw-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

@media (max-width: 900px) {
  .srw-cols-3, .srw-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .srw-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   CARD
   ================================================================ */
.srw-card {
  background: var(--srw-card) !important;
  border: 1px solid var(--srw-border) !important;
  border-radius: var(--srw-radius) !important;
  padding: 26px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.srw-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--srw-primary), var(--srw-secondary)) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.4s ease !important;
}
.srw-card:hover { transform: translateY(-5px) !important; box-shadow: 0 16px 40px rgba(242,106,33,0.12) !important; }
.srw-card:hover::before { transform: scaleX(1) !important; }

/* ── Card top row ── */
.srw-card-top {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

/* ── Avatar ── */
.srw-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
.srw-avatar span {
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.srw-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.srw-avatar-md {
  width: 56px !important;
  height: 56px !important;
  flex-shrink: 0 !important;
}

/* ── Name ── */
.srw-name {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--srw-dark) !important;
  line-height: 1.3 !important;
}

/* ── Meta row ── */
.srw-meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 5px !important;
}

/* ── Tags ── */
.srw-tag {
  font-family: 'Poppins', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 9px !important;
  border-radius: 100px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: inline-block !important;
}
.srw-tag-grade {
  background: rgba(242,106,33,0.1) !important;
  color: var(--srw-primary) !important;
}
.srw-tag-relation { }
.srw-tag-parent {
  background: rgba(244,180,0,0.12) !important;
  color: #b07f00 !important;
}
.srw-tag-student {
  background: rgba(46,125,50,0.1) !important;
  color: var(--srw-accent) !important;
}
.srw-tag-guardian {
  background: rgba(21,101,192,0.1) !important;
  color: #1565C0 !important;
}

/* ── Stars ── */
.srw-stars {
  display: flex !important;
  gap: 2px !important;
}
.srw-star {
  font-size: 17px !important;
  color: #ddd !important;
  line-height: 1 !important;
  transition: color 0.15s !important;
}
.srw-star.filled { color: var(--srw-star) !important; }

/* ── Review text ── */
.srw-review-text {
  color: var(--srw-text) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  flex: 1 !important;
  position: relative !important;
}

.srw-quote-open {
  font-size: 48px !important;
  font-family: 'Georgia', serif !important;
  color: var(--srw-primary) !important;
  opacity: 0.25 !important;
  line-height: 0 !important;
  vertical-align: -18px !important;
  margin-right: 2px !important;
}
.srw-quote-close {
  font-size: 48px !important;
  font-family: 'Georgia', serif !important;
  color: var(--srw-primary) !important;
  opacity: 0.25 !important;
  line-height: 0 !important;
  vertical-align: -18px !important;
  margin-left: 2px !important;
}

/* ── Entrance animations ── */
.srw-layout-grid .srw-card,
.srw-layout-list .srw-list-item {
  animation: srw-fadeIn 0.5s ease both !important;
}

@keyframes srw-fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.srw-card:nth-child(1)  { animation-delay: 0.05s !important; }
.srw-card:nth-child(2)  { animation-delay: 0.10s !important; }
.srw-card:nth-child(3)  { animation-delay: 0.15s !important; }
.srw-card:nth-child(4)  { animation-delay: 0.20s !important; }
.srw-card:nth-child(5)  { animation-delay: 0.25s !important; }
.srw-card:nth-child(6)  { animation-delay: 0.30s !important; }

/* ================================================================
   LIST LAYOUT
   ================================================================ */
.srw-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.srw-list-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 18px !important;
  background: var(--srw-card) !important;
  border: 1px solid var(--srw-border) !important;
  border-radius: var(--srw-radius) !important;
  padding: 22px 24px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s !important;
}
.srw-list-item:hover {
  transform: translateX(5px) !important;
  box-shadow: 0 8px 24px rgba(242,106,33,0.09) !important;
  border-color: var(--srw-primary) !important;
}

.srw-list-body {
  flex: 1 !important;
  min-width: 0 !important;
}

.srw-list-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.srw-review-text-list {
  color: var(--srw-text) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* ================================================================
   CAROUSEL LAYOUT
   ================================================================ */
.srw-carousel {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: 0 0 48px !important;
}

.srw-car-track-wrap {
  overflow: hidden !important;
  border-radius: var(--srw-radius) !important;
}

.srw-car-track {
  display: flex !important;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  will-change: transform !important;
}

.srw-car-slide {
  min-width: 100% !important;
  padding: 0 4px !important;
}

/* Show 3 slides at once on large screens */
@media (min-width: 700px) {
  .srw-car-slide { min-width: 33.333% !important; }
}
@media (max-width: 699px) and (min-width: 500px) {
  .srw-car-slide { min-width: 50% !important; }
}

/* Arrows */
.srw-car-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  background: var(--srw-primary) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(242,106,33,0.3) !important;
  transition: transform 0.2s, background 0.2s !important;
  margin-top: -24px !important;
}
.srw-car-arrow:hover { transform: translateY(-50%) scale(1.1) !important; background: var(--srw-secondary) !important; }
.srw-car-prev { left: 0 !important; }
.srw-car-next { right: 0 !important; }

/* Dots */
.srw-car-dots {
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 6px !important;
}
.srw-car-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--srw-border) !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.2s !important;
  border: none !important;
  padding: 0 !important;
}
.srw-car-dot.active {
  background: var(--srw-primary) !important;
  transform: scale(1.3) !important;
}

/* ================================================================
   CARD IN CAROUSEL (full height)
   ================================================================ */
.srw-car-slide .srw-card {
  height: 100% !important;
}