/* ============================================================
   3. BEFORE / AFTER SEARCH
   ============================================================ */
.rh-por-ba { background: #f7f7f7; width: 100%; }
.rh-por-ba-pad { padding: 80px 0; }
.rh-por-ba-header { text-align: center; margin: 0 0 48px 0; }
.rh-por-ba-grid { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 0; align-items: center; }
.rh-por-google {
  background: #ffffff; border-radius: 20px; padding: 28px; border: 1px solid #E6E6E6;
}
.rh-por-google-bar {
  background: #f7f7f7; border-radius: 100px; padding: 10px 18px;
  display: flex; align-items: center; gap: 10px; margin: 0 0 20px 0;
  border: 1px solid #E6E6E6;
}
.rh-por-google-logo { font-size: 13px; font-weight: 600; color: #262626; flex-shrink: 0; }
.rh-por-google-logo span:nth-child(1) { color: #4285F4; }
.rh-por-google-logo span:nth-child(2) { color: #EA4335; }
.rh-por-google-logo span:nth-child(3) { color: #FBBC05; }
.rh-por-google-logo span:nth-child(4) { color: #4285F4; }
.rh-por-google-logo span:nth-child(5) { color: #34A853; }
.rh-por-google-logo span:nth-child(6) { color: #EA4335; }
.rh-por-google-query { font-size: 13px; font-weight: 600; color: #808080; flex: 1; }
.rh-por-g-result { margin: 0 0 14px 0; }
.rh-por-g-result:last-child { margin: 0; }
.rh-por-g-url { font-size: 11px; font-weight: 600; color: #808080; display: block; margin: 0 0 3px 0; }
.rh-por-g-title { font-size: 14px; font-weight: 600; line-height: 1.3; display: block; margin: 0 0 4px 0; }
.rh-por-g-title.neg { color: #CB817D; }
.rh-por-g-title.pos { color: #262626; }
.rh-por-g-desc { font-size: 12px; font-weight: 600; color: #808080; line-height: 1.5; display: block; }
.rh-por-g-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; margin: 0 0 4px 0; }
.rh-por-g-badge.neg { background: rgba(203,129,125,0.15); color: #A26764; }
.rh-por-g-badge.pos { background: rgba(191,216,179,0.2); color: #606C59; }
.rh-por-ba-arrow { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rh-por-ba-arrow-line { width: 2px; flex: 1; background: linear-gradient(to bottom, #E6E6E6, #BFD8B3); border-radius: 1px; min-height: 40px; }
.rh-por-ba-arrow-icon { width: 32px; height: 32px; background: #BFD8B3; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rh-por-ba-label-text { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #99AD8F; text-align: center; }
.rh-por-ba-before-label, .rh-por-ba-after-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin: 0 0 12px 0; }
.rh-por-ba-before-label { color: #CB817D; }
.rh-por-ba-after-label { color: #99AD8F; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .rh-por-ba-grid { grid-template-columns: 1fr; gap: 20px; }
  .rh-por-ba-arrow { flex-direction: row; justify-content: center; padding: 16px 0; }
  .rh-por-ba-arrow-line { width: 40px; height: 2px; min-height: auto; flex: none; }
}
@media (max-width: 600px) {
  .rh-por-ba-pad { padding: 48px 0; }
  .rh-por-google { padding: 20px; border-radius: 16px; }
}