/* Rooa Woo Pro Edit — Frontend (ücretsiz seçenekler + kademe tablosu; varyasyon UI tema/WC) */

.rooa-free-options { margin: 1em 0; }

.rooa-free-option { margin-bottom: 1em; }

.rooa-free-option__label { display: block; font-weight: 600; margin-bottom: 0.5em; font-size: 0.95em; }

.rooa-free-option__values { display: flex; flex-wrap: wrap; gap: 0.5em; }

.rooa-swatch {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 44px;

  min-height: 36px;

  padding: 0.4em 0.9em;

  border: 2px solid #ccc;

  border-radius: 999px;

  background: #fff;

  font-size: 0.9em;

  cursor: pointer;

  transition: border-color 0.15s, background 0.15s, color 0.15s;

}

.rooa-swatch:hover { border-color: #333; }

.rooa-swatch.is-active { border-color: var(--rooa-pill-active, #2271b1); background: var(--rooa-pill-active, #2271b1); color: #fff; }

.rooa-swatch--color { width: 36px; height: 36px; min-width: 36px; padding: 0; border-radius: 50%; border: 2px solid #bbb; background-size: cover; background-position: center; }

.rooa-swatch--color.is-active { outline: 2px solid #333; outline-offset: 2px; border-color: #333; }

.rooa-tier-table-wrap { margin: 1em 0; }

.rooa-tier-table__title { font-weight: 600; margin-bottom: 0.5em; }

.rooa-tier-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }

.rooa-tier-table th, .rooa-tier-table td { border: 1px solid #ddd; padding: 0.5em 0.75em; text-align: left; }

.rooa-tier-table th { background: #f6f7f7; }