/* === TÉMA === */
:root { --opinie-accent: #FF9933; }

.opinie-wrapper, .opinie-modal { font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif; }
.opinie-wrapper * { box-sizing: border-box; }

/* Layout */
.opinie-wrapper { display:grid; grid-template-columns: 340px 1fr; gap: 24px; align-items:start; }
@media (max-width: 900px){ .opinie-wrapper { grid-template-columns: 1fr; } }

/* Summary */
.opinie-summary { border:1px solid #eee; border-radius:12px; padding:16px; background:#fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.opinie-average { font-size: 28px; font-weight: 700; display:flex; align-items:center; gap:8px; }
.opinie-average .stars { color: var(--opinie-accent); font-size: 20px; letter-spacing:1px; }
.opinie-bars { margin-top: 12px; }
.opinie-bar-row { display:grid; grid-template-columns: 32px 1fr 64px; align-items:center; gap:8px; margin: 8px 0; }
.opinie-bar-row .label { color:#555; }
.opinie-bar-row .bar { height:10px; background:#eef1f4; border-radius: 6px; overflow:hidden; }
.opinie-bar-row .bar span { display:block; height:100%; width:0%; background: var(--opinie-accent); transition: width .35s ease; }
.opinie-bar-row .count { color:#333; font-size: 13px; text-align:right; }
.opinie-disclaimer { margin-top: 12px; font-size: 12px; color:#6b7280; line-height: 1.45; }

/* List */
.opinie-header { display:flex; align-items:center; justify-content: space-between; margin-bottom: 12px; }
.opinie-header h3 { margin:0; font-size: 20px; }
.opinie-btn { background: var(--opinie-accent); color:#fff; border:0; padding:10px 16px; border-radius:10px; cursor:pointer; font-weight:700; transition: filter .2s ease, transform .05s ease; }
.opinie-btn:hover { filter: brightness(0.92); }
.opinie-btn:active { transform: translateY(1px); }
.opinie-items { display:grid; gap: 14px; }
.opinie-item { background:#fff; border:1px solid #eee; border-radius:12px; padding:14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.opinie-item__top { display:flex; align-items:center; justify-content: space-between; gap:8px; }
.opinie-item__name { font-weight:700; }
.opinie-item__rating { color: var(--opinie-accent); letter-spacing:1px; }
.opinie-item__meta { color:#667; font-size: 12px; margin-top: 4px; }
.opinie-item__text { margin-top: 8px; line-height:1.55; }

/* Load more */
.opinie-loadmore-wrap { margin-top: 14px; text-align: center; }
.opinie-btn--loadmore[disabled] { opacity: .45; cursor: default; filter: none; }

/* Modal */
.opinie-modal[hidden] { display:none !important; }
.opinie-modal { position:fixed; inset:0; z-index:999999; display:grid; place-items:center; }
.opinie-modal__backdrop { position:fixed; inset:0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.opinie-modal__dialog { position: relative; width: min(760px, 92vw); background:#fff; border-radius:16px; padding:20px; box-shadow: 0 25px 60px rgba(0,0,0,.28); }
.opinie-modal__close { position:absolute; right:10px; top:10px; background:transparent; border:0; font-size:22px; cursor:pointer; }

/* Form */
.opinie-form .row { display:grid; gap:12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px){ .opinie-form .row { grid-template-columns: 1fr; } }
.opinie-form .row.rating { grid-template-columns: 1fr; margin-top: 8px; }
.opinie-form label span { display:block; font-size:13px; margin-bottom: 6px; color:#555; }
.opinie-form input[type="text"],
.opinie-form input[type="email"],
.opinie-form input[type="url"] { height:44px; }
.opinie-form input[type="text"],
.opinie-form input[type="email"],
.opinie-form input[type="url"],
.opinie-form textarea { width:100%; border:1px solid #e2e2e2; border-radius:12px; padding:10px 12px; font-size:14px; }
.opinie-form input:focus, .opinie-form textarea:focus { outline:none; border-color: var(--opinie-accent); box-shadow: 0 0 0 3px rgba(255,153,51,.2); }
.opinie-form textarea { resize:vertical; min-height:140px; }
.opinie-form .stars-input { display:inline-flex; gap:6px; }
.opinie-form .stars-input button { font-size:22px; line-height:1; background:transparent; border:0; cursor:pointer; color:#c9c9c9; transition: transform .05s ease; }
.opinie-form .stars-input button.active { color: var(--opinie-accent); }
.opinie-form .stars-input button:active { transform: translateY(1px); }
.opinie-form .actions { margin-top: 14px; text-align:right; }
.opinie-form__msg { margin-top: 10px; padding:10px; background:#f6faf3; border:1px solid #e2f1da; border-radius:10px; }

/* A11y */
.opinie-btn:focus,
.opinie-form .stars-input button:focus,
.opinie-modal__close:focus { outline: 2px solid var(--opinie-accent); outline-offset: 2px; }