/* public/widget/widget.css */
:root{
  /* Colors (light defaults) */
  --rw-panel:#ffffff;
  --rw-card:#ffffff;
  --rw-text:#111111;
  --rw-muted:#667085;

  /* legacy/general border */
  --rw-border:#e6e8ec;

  /* NEW: borders (colors + widths) */
  --rw-border-card: var(--rw-border);
  --rw-border-control: var(--rw-border);
  --rw-border-btn: var(--rw-border);

  --rw-border-card-w: 1px;
  --rw-border-control-w: 1px;
  --rw-border-btn-w: 1px;

  --rw-accent:#2563eb;   /* links */
  --rw-chip:#f3f5f8;
  --rw-chipText:#111;
  --rw-star:#f5c542;

  /* Layout / sizes */
  --rw-gap:12px;
  --rw-side:14px;

  --rw-radius-card:18px;
  --rw-radius-modal:18px;
  --rw-radius-control:12px;

  --rw-card-pad:14px;
  --rw-card-height:240px;

  --rw-line-clamp:5;
  --rw-line-clamp-mobile:7;

  --rw-shadow-card:none;

  /* Modal */
  --rw-modal-overlay: rgba(0,0,0,0.6);
  --rw-modal-text: var(--rw-text);
  --rw-modal-close-bg: var(--rw-accent);
  --rw-modal-close-text: #ffffff;
}

.rw-dark{
  /* Colors (dark defaults) */
  --rw-panel:#171a1f;
  --rw-card:#1f232a;
  --rw-text:#f1f5ff;
  --rw-muted:#a5b0c5;

  --rw-border:#2c3340;

  --rw-border-card: var(--rw-border);
  --rw-border-control: var(--rw-border);
  --rw-border-btn: var(--rw-border);

  --rw-accent:#78a6ff;
  --rw-chip:#222833;
  --rw-chipText:#f1f5ff;
  --rw-star:#f5c542;

  --rw-modal-text: var(--rw-text);
  --rw-modal-close-bg: var(--rw-accent);
  --rw-modal-close-text: #0d0f12;
}

.rw-wrap{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--rw-text);
  text-align:left;
  width:100%;
}

.rw-wrap, .rw-wrap *{ box-sizing:border-box; }

.rw-panel{
  background:var(--rw-panel);
  border:none;
  border-radius:18px;
  padding:0;
  width:100%;
}

.rw-pad{ padding: var(--rw-side); }

.rw-topline{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
}

.rw-controls{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  width:100%;
}

.rw-select,.rw-btn{
  border-style: solid;
  border-color: var(--rw-border-control);
  border-width: var(--rw-border-control-w);
  background:var(--rw-card);
  color:var(--rw-text);
  border-radius:var(--rw-radius-control);
  padding:9px 10px;
  font-size:13px;
  outline:none;
}

.rw-btn{
  cursor:pointer;
  border-color: var(--rw-border-btn);
  border-width: var(--rw-border-btn-w);
}

.rw-btn.primary{
  background:var(--rw-accent);
  border-color:var(--rw-accent);
  border-width: var(--rw-border-btn-w);
  color:#fff;
}

.rw-select{
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 100%;
}

@media (max-width: 560px){
  .rw-select{ min-width: 100%; }
}

.rw-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--rw-border);
  font-size:13px;
  color:var(--rw-text);
}
.rw-dark .rw-pill{ background:rgba(255,255,255,0.05); }

/* === Carousel === */
.rw-carousel{
  position:relative;
  width:100%;
  padding: 0 var(--rw-side);
}
.rw-viewport{
  overflow:hidden;
  width:100%;
  touch-action: pan-y;
}

.rw-track{
  display:flex;
  gap:var(--rw-gap);
  will-change:transform;
  transition:transform 320ms ease;
  transform:translate3d(0,0,0);
  padding-bottom:6px;
}

.rw-card{
  background:var(--rw-card);
  border-style: solid;
  border-color: var(--rw-border-card);
  border-width: var(--rw-border-card-w);
  border-radius:var(--rw-radius-card);
  padding:var(--rw-card-pad);
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:0 0 auto;
  box-shadow:var(--rw-shadow-card);

  width: calc((100% - var(--rw-gap) * 2) / 3);
  height: var(--rw-card-height);
}

@media (max-width: 900px){
  .rw-card{ width: calc((100% - var(--rw-gap) * 1) / 2); }
}
@media (max-width: 560px){
  .rw-card{ width: 100%; }
}

.rw-head{
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:space-between;
}

.rw-author{
  display:flex;
  gap:10px;
  align-items:center;
}

.rw-avatar{
  width:36px;
  height:36px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 auto;
  background:rgba(0,0,0,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
}

.rw-avaimg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.rw-avafallback{
  font-size:12px;
  font-weight:700;
  color:var(--rw-text);
  opacity:0.7;
}

.rw-name{
  font-weight:700;
  font-size:14px;
  line-height:1.1;
}

.rw-sub{
  font-size:12px;
  color:var(--rw-muted);
  margin-top:2px;
}

.rw-stars{
  display:flex;
  gap:2px;
  font-size:13px;
  line-height:1;
  color:var(--rw-star);
}
.rw-star{ user-select:none; }

.rw-text{
  font-size:13px;
  line-height:1.35;
  color:var(--rw-text);
  overflow:hidden;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp: var(--rw-line-clamp);
}

@media (max-width: 560px){
  .rw-text{ -webkit-line-clamp: var(--rw-line-clamp-mobile); }
}

.rw-more{
  margin-top:auto;
  border:none;
  background:transparent;
  color:var(--rw-accent);
  cursor:pointer;
  padding:0;
  font-size:13px;
  text-align:left;
}

.rw-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.rw-chip{
  padding:6px 10px;
  border-radius:999px;
  background:var(--rw-chip);
  color:var(--rw-chipText);
  font-size:12px;
}

.rw-link{
  color:var(--rw-accent);
  text-decoration:none;
  font-size:12px;
}

.rw-link:hover{ text-decoration:underline; }

/* bottom nav */
.rw-bottom{
  display:flex;
  align-items:center;
  gap:10px;
}

.rw-navbtn{
  width:36px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-size:18px;
  line-height:1;
}

.rw-progress{
  position:relative;
  height:6px;
  border-radius:999px;
  background:rgba(0,0,0,0.08);
  flex:1;
  overflow:hidden;
}
.rw-dark .rw-progress{ background:rgba(255,255,255,0.10); }

.rw-progress-fill{
  position:absolute;
  top:0; left:0;
  height:100%;
  background:var(--rw-accent);
  border-radius:999px;
  width:28px;
  transform:translateX(0);
}

/* modal */
.rw-modal-overlay{
  position:fixed;
  inset:0;
  background:var(--rw-modal-overlay);
  z-index:999999;
  padding:18px;
}

.rw-modal{
  width:min(720px, 96vw);
  height:auto;
  max-height:85vh;
  overflow:auto;
  border-radius:var(--rw-radius-modal);
}

.rw-text-full{
  -webkit-line-clamp: initial;
  display:block;
  white-space:pre-wrap;
  color:var(--rw-modal-text);
}

.rw-link-big{
  display:inline-block;
  margin-top:10px;
  font-size:14px;
}