/* Owner pages: maintenance schedule, software versions, warranty, warranty support contract,
   road assistance, app store. Builds on main.css and blocks.css (media-brand_top, cards, tables, forms). */

/* ---------- First screen: key figures under the text (warranty) ---------- */
.hkeys { display: grid; gap: 12px; margin-top: 24px; font-size: 16px; line-height: 1.4; color: var(--t1); }
.hkeys b { font-weight: var(--fw-medium); color: var(--white); white-space: nowrap; }
@media (min-width: 960px) { .hkeys { margin-top: 32px; font-size: 18px; } }

/* ---------- Maintenance: "what is in my service visit" picker ---------- */
html:not(.js) .mpick { display: none; }
.mpick__bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; margin-bottom: 24px; }
.mpick__field { position: relative; flex: 1 1 280px; max-width: 420px; }
.mpick__label { display: block; margin-bottom: 8px; font-size: 14px; line-height: 1.4; color: var(--t2); }
.mpick__select {
  width: 100%;
  height: 52px;
  padding: 0 48px 0 16px;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--white);
  font: inherit;
  font-size: 16px;
  appearance: none;
  cursor: pointer;
  transition: border-color .2s;
}
.mpick__select:hover { border-color: rgba(247, 249, 250, .43); }
.mpick__select:focus { border-color: var(--gold); outline: none; }
.mpick__select option { background: var(--bg-2); color: var(--white); }
.mpick__chevron.icon { position: absolute; right: 14px; bottom: 14px; pointer-events: none; }
.mpick__cols { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
.mpick__col { padding: 24px; border-radius: 4px; background: var(--card-bg); }
.mpick__head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.mpick__count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; font-size: 13px; font-weight: var(--fw-medium); }
.mpick__col_r .mpick__count { background: var(--gold); color: var(--bg); }
.mpick__col_i .mpick__count { border: 1px solid var(--card-line); color: var(--t1); }
.mpick__list { font-size: 15px; line-height: 1.45; color: var(--t1); }
.mpick__list li + li { margin-top: 10px; }
@media (max-width: 599.98px) { .mpick__bar .btn { width: 100%; } .mpick__field { max-width: none; } }
@media (min-width: 600px) { .mpick__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .mpick__col { padding: 32px; } .mpick__list { font-size: 16px; } }

/* ---------- Maintenance: full schedule table ---------- */
.mtable__wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; }
.mtable { width: 100%; min-width: 860px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 1.35; }
.mtable th, .mtable td { padding: 9px 2px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.mtable tbody tr:last-child > * { border-bottom: 0; }
.mtable thead > tr > * { background: var(--bg-2); color: var(--white); font-weight: var(--fw-medium); white-space: nowrap; }
.mtable thead tr + tr > * { color: var(--t2); font-weight: var(--fw-regular); }
.mtable th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 150px;
  padding: 9px 12px;
  border-right: 1px solid var(--line);
  background: var(--bg);
  color: var(--t1);
  font-weight: var(--fw-regular);
  text-align: left;
  white-space: normal;
}
.mtable thead th[scope="row"] { background: var(--bg-2); color: var(--white); }
.mtable sup { color: var(--gold); }
.mt { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 3px; font-size: 12px; font-weight: var(--fw-medium); }
.mt_r { background: var(--gold); color: var(--bg); }
.mt_i { border: 1px solid var(--card-line); color: var(--t2); }
.mlegend { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 20px; font-size: 14px; line-height: 1.4; color: var(--t2); }
.mlegend > span { display: inline-flex; align-items: center; gap: 10px; }
.mnotes { margin-top: 20px; }
@media (min-width: 960px) {
  .mtable { font-size: 14px; }
  .mtable { min-width: 1000px; }
  .mtable th[scope="row"] { width: 270px; padding-left: 16px; }
}

/* ---------- Software versions ---------- */
.rel__lead { color: var(--t1); }
.rel__group { margin-top: 20px; }
.rel__group-title { margin-bottom: 12px; font-size: 16px; font-weight: var(--fw-medium); color: var(--white); }
.badge { display: inline-block; margin-left: 12px; padding: 4px 10px; border-radius: 12px; background: rgba(213, 185, 112, .16); color: var(--gold); font-size: 11px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.swnote { max-width: 760px; margin: 0 auto 32px; text-align: center; font-size: 16px; line-height: 1.45; color: var(--t2); }
.swnote b { color: var(--white); font-weight: var(--fw-medium); }
@media (min-width: 960px) { .swnote { margin-bottom: 48px; font-size: 18px; } }

/* ---------- Prices inside an accordion (warranty support contract) ---------- */
.ptable { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.ptable th, .ptable td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ptable th + *, .ptable td { padding-left: 12px; text-align: right; }
.ptable thead th { font-size: 13px; font-weight: var(--fw-regular); color: var(--t3); }
.ptable tbody th { font-weight: var(--fw-regular); color: var(--t1); }
.ptable td { font-weight: var(--fw-medium); color: var(--white); white-space: nowrap; }
@media (min-width: 960px) { .ptable { font-size: 16px; } }

/* ---------- Hotline (road assistance) ---------- */
.hotline { text-align: center; }
.hotline__phone { display: inline-block; margin-top: 16px; font-family: var(--f-display); font-size: 40px; line-height: 1.1; font-weight: var(--fw-thin); letter-spacing: -.4px; color: var(--white); white-space: nowrap; transition: color .2s; }
.hotline__phone:hover { color: var(--gold); }
.hotline__note { margin-top: 12px; font-size: 14px; color: var(--t3); }
@media (min-width: 960px) { .hotline__phone { margin-top: 24px; font-size: 72px; } .hotline__note { font-size: 16px; } }

/* ---------- Subscription plans (app store) ---------- */
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 1104px; margin: 0 auto; }
.plan { display: flex; flex-direction: column; padding: 32px 24px; border: 1px solid transparent; border-radius: 4px; background: var(--card-bg); }
.plan_accent { border-color: var(--gold); }
.plan__name { color: var(--gold); }
.plan__term { margin-top: 8px; font-size: 16px; color: var(--t1); }
.plan__list { margin-top: 24px; font-size: 15px; line-height: 1.45; color: var(--t2); }
.plan__price { margin-top: auto; padding-top: 32px; }
.plan__price small { font-size: .5em; color: var(--t3); vertical-align: super; }
@media (min-width: 600px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .plan { padding: 48px; } .plan__list { font-size: 16px; } }

/* Ordered steps inside a media-text card */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-left: 44px; counter-increment: step; }
.steps li + li { margin-top: 16px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -2px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--gold); border-radius: 50%; font-size: 13px; font-weight: var(--fw-medium); color: var(--gold); }

/* Light first-screen picture: a stronger shade under the white text */
@media (min-width: 960px) {
  .media-brand_dim .media-brand__img::after { background: linear-gradient(90deg, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, .45) 45%, rgba(10, 10, 10, 0) 75%); }
}