/* SeaSeMe portion step (1.13.0): plate to scale, stepper, quick choices,
   small-fish sizes and the "Δεν ξέρετε τα γραμμάρια;" helper.
   Shared by the website calculator and the app (see portion.js). Everything is
   scoped under .ssp and sets its own colours, so host themes can't restyle it. */

.ssp{--ssp-ink:#1b2b3a;--ssp-mut:#44566a;--ssp-line:#cfd6dd;--ssp-acc:#1565c0;--ssp-acc-d:#0f4c96;--ssp-on:#eaf2fc;--ssp-go:#0f7a5a;
	display:flex;flex-direction:column;gap:12px;color:var(--ssp-ink);font-family:inherit;margin:6px 0 10px}
.ssp *{box-sizing:border-box}
.ssp p{margin:0;padding:0}

/* Which weight the grams mean (1.14.0): raw / drained / as bought. */
.ssp .ssp-weight{padding:9px 12px;border-radius:10px;background:#eef6f2;color:#1d4a3a;font-size:14px;line-height:1.45}
.ssp .ssp-weight b{font-weight:700;color:#0b6349}
.ssp-scene{position:relative;width:100%;max-width:380px;margin:0 auto}
.ssp-svg{display:block;width:100%;height:auto}
.ssp-empty{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-size:15px;color:var(--ssp-mut);pointer-events:none}
.ssp-empty[hidden]{display:none}
.ssp .ssp-cap{font-size:13px;line-height:1.4;color:var(--ssp-mut);text-align:center}

.ssp-step{display:flex;align-items:center;justify-content:center;gap:18px}
.ssp .ssp-btn{flex:none;width:48px;height:48px;min-height:0;padding:0;border-radius:50%;border:2px solid var(--ssp-acc);background:#fff;color:var(--ssp-acc);
	font:inherit;font-size:26px;font-weight:700;line-height:1;cursor:pointer;box-shadow:none;text-shadow:none}
.ssp .ssp-btn:hover,.ssp .ssp-btn:focus-visible{background:var(--ssp-on);color:var(--ssp-acc)}
.ssp-out{min-width:140px;display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.15}
.ssp-out b{font-size:30px;font-weight:700;color:var(--ssp-acc)}
.ssp-out span{font-size:15px;font-weight:600;color:var(--ssp-ink);margin-top:2px}

.ssp-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ssp .ssp-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:56px;padding:8px 4px;
	border-radius:12px;border:2px solid var(--ssp-line);background:#fff;color:var(--ssp-ink);font:inherit;cursor:pointer;box-shadow:none;text-shadow:none;line-height:1.25}
.ssp .ssp-chip b{font-size:15.5px;font-weight:700;color:var(--ssp-ink)}
.ssp .ssp-chip span{font-size:13px;color:var(--ssp-mut)}
.ssp .ssp-chip:hover{border-color:#9fb2c2;background:#fff}
.ssp .ssp-chip[aria-pressed="true"]{border-color:var(--ssp-acc);background:var(--ssp-on)}
.ssp .ssp-chip[aria-pressed="true"] b{color:var(--ssp-acc)}
.ssp-sizes{display:flex;flex-direction:column;gap:6px}
.ssp-sizes[hidden]{display:none}
.ssp .ssp-q{font-size:15px;font-weight:600}

.ssp .ssp-help-link{align-self:center;background:none;border:0;padding:8px 4px;min-height:44px;color:var(--ssp-acc);font:inherit;font-size:15px;font-weight:600;
	text-decoration:underline;text-underline-offset:3px;cursor:pointer;box-shadow:none}
.ssp .ssp-help-link:hover{color:var(--ssp-acc-d);background:none}
.ssp-help{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--ssp-line);border-radius:14px;background:#fbfdfe}
.ssp-help[hidden]{display:none}
.ssp .ssp-help-lead{font-size:14.5px;color:var(--ssp-mut)}
.ssp-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ssp .ssp-tab{min-height:48px;padding:8px 6px;border-radius:12px;border:2px solid var(--ssp-line);background:#fff;color:var(--ssp-ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;box-shadow:none}
.ssp .ssp-tab[aria-pressed="true"]{background:var(--ssp-acc);border-color:var(--ssp-acc);color:#fff}
.ssp-field{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ssp .ssp-field label{flex:1;min-width:0;font-size:15px;font-weight:600;margin:0;color:var(--ssp-ink)}
.ssp .ssp-field input{width:110px;max-width:42%;flex:none;min-height:44px;padding:8px 10px;border:2px solid var(--ssp-line);border-radius:10px;font:inherit;font-size:16px;text-align:right;color:var(--ssp-ink);background:#fff}
.ssp .ssp-field input:focus{border-color:var(--ssp-acc);outline:none}
.ssp-result{display:flex;flex-direction:column;align-items:center;gap:0;padding:12px;border-radius:12px;background:var(--ssp-on)}
.ssp-result span{font-size:14.5px;font-weight:600}
.ssp-result-g{font-size:32px;font-weight:700;color:var(--ssp-acc);line-height:1.15}
.ssp-result-how{font-size:13.5px;color:var(--ssp-mut)}
.ssp .ssp-use{min-height:48px;border:0;border-radius:24px;background:var(--ssp-go);color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer;box-shadow:none}
.ssp .ssp-use:hover{background:#0b6349;color:#fff}
.ssp .ssp-use:disabled{opacity:.45;cursor:not-allowed}
.ssp .ssp-note{font-size:13px;color:var(--ssp-mut);text-align:center}