/*
 * stonedesk.eu – what the stonestudio.io StoneDesk page does not have, built from its tokens and components:
 * the language menu links, the request-access flow, the live price list (Pripravujeme / Cena na vyžiadanie),
 * the add-ons, "Čo všetko StoneDesk robí" and "Nainštalujte si StoneDesk". Loaded after stonestudio.css.
 */

/* texts from the translations carry <b>/<span> – the same look as the classes on stonestudio.io */
.ss-page-nav__intro > small { color: var(--ss-gray); font-size: var(--fnt-size1-fluid); line-height: 1.35; font-weight: 400; }
.ss-page-nav__intro > b { font-size: var(--fnt-size3-fluid); line-height: 1.3; font-weight: 700; }
.ss-page-nav__intro { color: var(--ss-text); }

/* the header: language list from /jazyk/<l>, the current language marked */
.ss-header__language-link[aria-current] { color: var(--ss-header-accent) !important; }
.ss-site-header .ss-header-brand__name--stonedesk[aria-current="page"] { color: var(--ss-header-accent) !important; }

/* hero: the app badge under the note */
.sd-pwa-badge { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; padding: .4375rem .875rem .4375rem .625rem; border-radius: 62.4375rem; background: rgb(255 255 255 / 12%); border: .0625rem solid rgb(255 255 255 / 25%); color: var(--ss-white) !important; font-size: var(--fnt-size1-fluid); font-weight: 700; }
.sd-pwa-badge:hover { background: rgb(255 255 255 / 20%); }
.sd-pwa-badge svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* a plan that is not sold yet: "Pripravujeme" / "Cena na vyžiadanie" in place of the price */
.ss-stonedesk__price .por { display: inline-block; color: var(--ss-stonedesk-navy); font-size: var(--fnt-size4-fluid); font-weight: 700; line-height: 1.2; }

/* add-ons: the same box as Nastavenia → Predplatné in the app – icon, label, title, text; below the price panel
   (Cenio: one-time price or Pripravujeme; Viac miesta: every pack with its monthly price) and how to order */
.ss-stonedesk__x.sd-addon { display: flex; flex-direction: column; gap: 1.125rem; padding: 1.375rem; border-radius: 1.25rem; }
.sd-addon__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .875rem; align-items: start; }
.sd-addon__ic { display: grid; place-items: center; width: 2.625rem; height: 2.625rem; border-radius: .8125rem; color: #2e8fa8; background: color-mix(in srgb, #2e8fa8 13%, #fff); }
.sd-addon--storage .sd-addon__ic { color: var(--ss-stonedesk); background: color-mix(in srgb, var(--ss-stonedesk) 13%, #fff); }
.sd-addon__svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ss-stonedesk__x.sd-addon .sd-addon__head b { display: block; margin: .125rem 0 .25rem; color: var(--ss-black); font-size: var(--fnt-size3-fluid); line-height: 1.3; }
.sd-addon__head p { margin: 0; font-size: var(--fnt-size1-fluid); line-height: 1.45; }
.sd-addon__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: auto; }
.sd-addon__body > .sd-addon-price:only-child { grid-column: 1 / -1; }
.ss-stonedesk__x .sd-addon-price { display: flex; flex-direction: column; gap: .125rem; padding: .75rem .875rem; border-radius: .875rem; background: color-mix(in srgb, #2e8fa8 7%, #fff); }
.sd-addon--storage .sd-addon-price { background: color-mix(in srgb, var(--ss-stonedesk) 7%, #fff); }
.ss-stonedesk__x .sd-addon-price > b { margin: 0; color: var(--ss-stonedesk-navy); font-size: var(--fnt-size4-fluid); line-height: 1.2; }
.ss-stonedesk__x .sd-addon-price > b.por { font-size: var(--fnt-size3-fluid); }
.ss-stonedesk__x .sd-addon-price > span, .ss-stonedesk__x .sd-addon-price > small { color: var(--ss-gray); font-size: var(--fnt-size1-fluid); line-height: 1.35; }
.ss-stonedesk__x .sd-addon-price > small { margin-top: .25rem; }
.sd-packs { list-style: none; margin: 0 0 .25rem; padding: 0; }
.sd-packs li { display: flex; align-items: baseline; justify-content: space-between; gap: .625rem; padding: .3125rem 0; border-bottom: 1px solid rgb(28 27 46 / 8%); }
.sd-packs li:last-child { border-bottom: 0; }
.ss-stonedesk__x .sd-packs li b { display: inline; margin: 0; font-size: var(--fnt-size2-fluid); white-space: nowrap; }
.sd-packs li span { color: var(--ss-black); font-size: var(--fnt-size3-fluid); font-weight: 700; white-space: nowrap; }
.sd-addon__how { margin: 0; color: var(--ss-gray); font-size: var(--fnt-size1-fluid); line-height: 1.45; }
.ss-stonedesk__x .sd-x-label { display: block; color: var(--ss-gray); font-size: var(--fnt-size1-fluid); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 1100px) { .sd-addon__body { grid-template-columns: minmax(0, 1fr); } }

/* "Čo všetko StoneDesk robí" – 15 functions as white cards, the same as Nastavenia → Predplatné in the app */
.sd-feats { margin-top: clamp(3rem, calc(6 * var(--ss-fluid-vw)), 3.75rem); text-align: left; }
.sd-feats h3 { margin: 0; color: var(--ss-black); font-size: var(--fnt-size5-fluid); line-height: 1.2; letter-spacing: -.01em; }
.sd-feats > p { max-width: 45rem; margin: .5rem 0 0; color: var(--ss-gray); font-size: var(--fnt-size2-fluid); line-height: 1.45; }
.sd-feats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.75rem; }
.sd-feat { display: flex; gap: 1.125rem; align-items: flex-start; padding: 1.5rem; background: var(--ss-white); border-radius: 1.25rem; box-shadow: 0 .0625rem .125rem rgb(28 27 46 / 4%), 0 .5rem 1.5rem rgb(28 27 46 / 5%); }
.sd-feat__ic { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .875rem; color: var(--fc); background: color-mix(in srgb, var(--fc) 12%, #fff); }
.sd-feat__ic svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sd-feat b { display: block; margin: .125rem 0 .375rem; color: var(--ss-black); font-size: var(--fnt-size3-fluid); line-height: 1.3; }
.sd-feat p { margin: 0; color: var(--ss-gray); font-size: var(--fnt-size2-fluid); line-height: 1.45; }

/* "Nainštalujte si StoneDesk" under the team cards */
.sd-pwa { margin-top: clamp(3rem, calc(6 * var(--ss-fluid-vw)), 3.75rem); scroll-margin-top: 1.875rem; }
.sd-pwa > h3 { margin: 0; color: var(--ss-black); font-size: var(--fnt-size5-fluid); line-height: 1.2; }
.sd-pwa > p { max-width: 50rem; margin: 1rem 0 0; font-size: var(--fnt-size2-fluid); line-height: 1.45; }
.sd-pwa__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.75rem; }
.sd-pwa__grid .ss-stonedesk__x h4 { margin: .75rem 0 .375rem; color: var(--ss-black); font-size: var(--fnt-size3-fluid); line-height: 1.3; }
.sd-pwa__grid .ss-stonedesk__ic { color: var(--ss-stonedesk); }
.sd-pwa__ben { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .625rem 1.5rem; font-size: var(--fnt-size2-fluid); font-weight: 600; }
.sd-pwa__ben li::before { content: "✓"; color: var(--ss-stonedesk); font-weight: 800; margin-right: .4375rem; }

@media (max-width: 1000px) { .sd-feats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .sd-pwa__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .sd-feats__grid { grid-template-columns: minmax(0, 1fr); } }

/* inline bold inside the install steps and the add-on texts stays inline (stonestudio.css makes .ss-stonedesk__x b a block title) */
.sd-pwa__grid .ss-stonedesk__x p b, .ss-stonedesk__x .sd-addon-price small b { display: inline; margin: 0; }
.sd-pwa__grid .ss-stonedesk__x p { margin: 0; }

/* price cards: every row (name, description, price with its yearly line, "Základné funkcie", list, button) on one line across
   the cards – the cards share the rows of the grid (subgrid) */
.ss-stonedesk__plans { grid-auto-rows: auto; row-gap: 1.25rem; }
.ss-stonedesk__plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: .75rem; align-content: start; }
.sd-plan-price .ss-pricing-card__billing-note { margin-top: .25rem !important; }
.sd-plan-price .ss-pricing-card__billing-note:empty { display: none; }
.ss-stonedesk__plan > ul { align-content: start; }
.ss-stonedesk__plan > .ss-hero__button { align-self: end; }
@media (max-width: 640px) { .ss-stonedesk__plan { grid-row: auto; display: flex; } }

/* the offer to switch to the visitor's language (bottom corner, never a redirect) */
.sd-lang-offer { position: fixed; z-index: 9000; left: 1rem; bottom: 1rem; max-width: min(26rem, calc(100vw - 2rem)); display: flex; flex-wrap: wrap; align-items: center; gap: .625rem .875rem; padding: .875rem 2.5rem .875rem 1rem; background: var(--ss-white); color: var(--ss-black); border: .0625rem solid var(--ss-stonedesk-line); border-radius: 1rem; box-shadow: 0 1rem 2.5rem rgb(28 27 46 / 18%); font-size: var(--fnt-size1-fluid); }
.sd-lang-offer { --ss-hero-accent: var(--ss-stonedesk); }
.sd-lang-offer .ss-hero__button { min-height: 2.5rem; padding: .5rem 1.125rem; font-size: var(--fnt-size1-fluid); }
.sd-lang-offer button { position: absolute; top: .375rem; right: .5rem; width: 2rem; height: 2rem; border: 0; background: none; color: var(--ss-gray); font-size: 1.375rem; line-height: 1; cursor: pointer; }