/* Shared components of the design system (batch 18, 03.10.2026): icons, the three button kinds, chips.
   Loaded after the other stylesheets of <head>; colours and sizes come from tokens.css. */

/* Icons: one SVG sprite (static/icons.svg) instead of text glyphs; size follows the text, colour follows currentColor. */
.icon{display:inline-block;flex-shrink:0;width:1em;height:1em;vertical-align:-.125em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.icon-star{fill:currentColor;stroke:none}
.icon-x{stroke-width:2}

/* Buttons. Primary: the one main action of a block. Secondary: other actions. Quiet: actions that read as links.
   One radius, two heights (44 px default, 36 px small); text never smaller than 14 px. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control-h);padding:0 20px;border:1px solid transparent;border-radius:var(--r-md);background:none;font:inherit;font-size:var(--fs-ui);font-weight:600;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;box-sizing:border-box}
a.btn{text-decoration:none}
.btn-primary,a.btn-primary,a.btn-primary:visited{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary)}
.btn-primary:hover{background:var(--c-primary-strong);border-color:var(--c-primary-strong);color:var(--c-on-primary)}
.btn-secondary,a.btn-secondary{background:var(--c-surface);border-color:var(--c-line-strong);color:var(--c-primary)}
.btn-secondary:hover{background:var(--c-primary-soft);border-color:var(--c-primary-line);color:var(--c-primary)}
.btn-quiet,a.btn-quiet{min-height:var(--control-h-sm);padding:0 4px;background:transparent;border-color:transparent;color:var(--c-primary)}
.btn-quiet:hover{background:transparent;color:var(--c-primary-strong);text-decoration:underline;text-underline-offset:3px}
.btn-sm{min-height:var(--control-h-sm);padding:0 14px}
.btn .icon{width:18px;height:18px}
.btn:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px}

/* Close buttons of dialogs and sheets: the same 44 px target with an SVG cross. */
[data-close-dialog] .icon,.auth-sheet-close .icon,.phone-sheet-close .icon,.search-recent button .icon{width:24px;height:24px}

/* Glyphs that became icons */
.filter-open .icon{width:18px;height:18px;margin-right:6px}
.city-picker-locate .icon{width:18px;height:18px;margin-right:6px}
.crumb-chevron .icon{width:14px;height:14px;vertical-align:-1px}
.service-go .icon{width:18px;height:18px}
.profile-rating-score .icon{width:22px;height:22px;color:var(--c-star)}
.rating .icon-star,.feed-rating .icon-star,.discovery-score .icon-star,.facts-top .icon-star,.rating-bar .icon-star{width:14px;height:14px;color:var(--c-star);vertical-align:-2px}
.reviews-empty .icon{width:40px;height:40px;stroke-width:1.5}
.business-socials .icon,.website-link .icon{width:16px;height:16px}
.business-sidebar>.back-link{justify-content:flex-start;gap:6px}
.back-link .icon{width:16px;height:16px;vertical-align:-3px}
.fc-all .icon,.fc-more .icon,.feed-business-bottom .icon,.discovery-sidebar nav .icon,.profile-offers .icon{width:16px;height:16px;margin-left:4px;vertical-align:-3px}

/* Stars (owner 02.10.2026 «поправ зірочки в дизайні»): the score, review and feed stars are drawn with the star of the
   icon set (CSS mask) instead of the ★/☆ font glyphs, which look different on every phone; half stars still work.
   In components.css because the reviews feed of the home page does not load reviews-v2.css. */
.score-stars,.rv-stars-row,.feed-review-stars{--star-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.4 2.4 19.2 19.2'%3E%3Cpath d='m12 2.8 2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3-4.6-4.4 6.3-.9Z'/%3E%3C/svg%3E")}
.score-stars i,.score-stars i.on,.score-stars i.half,.rv-stars-row i,.rv-stars-row i.on,.rv-stars-row i.half,.feed-review-stars i{display:inline-block;flex:none;width:1em;height:1em;overflow:hidden;color:transparent;font-style:normal;line-height:1;letter-spacing:0;background:#d9dee4;-webkit-background-clip:border-box;background-clip:border-box;-webkit-mask:var(--star-shape) center/contain no-repeat;mask:var(--star-shape) center/contain no-repeat}
.score-stars i.on,.rv-stars-row i.on,.feed-review-stars i.on{background:var(--c-star)}
.score-stars i.half,.rv-stars-row i.half{background:linear-gradient(90deg,var(--c-star) 50%,#d9dee4 50%)}
.business-profile .score-stars{gap:3px;align-items:center}
.rv-stars-row{gap:2px;align-items:center}
.feed-review-rating>span.feed-review-stars{display:inline-flex;gap:3px;align-items:center;font-size:var(--fs-lg);letter-spacing:0}
.brand-card small .icon-star{width:13px;height:13px;color:var(--c-star);vertical-align:-2px}