/* SecretlyBlue: styles of the homepage (templates/index-telefon.html.j2). Loaded after main.css: the hero with the phone, then refinements of other sections.
   The frame keeps the Modrá hodina gradient from main.css; the phone replaces the photo.
   The phone is drawn at one design size (380 × 800 px) and scaled with --k, so the chat demo on its screen keeps its proportions.
   Exception to the type scale, like .notif in main.css: the iOS status bar copies the OS UI (system font, 17 px). */

.hero--phone .hero__frame {
  --k: .86;            /* phone scale */
  --bleed: 80px;       /* bottom of the phone (home bar, lower half of the compose bar) cut off by the frame edge */
  --phone-x: 50%;      /* phone centre */
}
@media (max-width: 1023px) {
  /* height follows the phone: 28 px above it, the rest is the visible part of the phone */
  .hero--phone .hero__frame { aspect-ratio: auto; height: calc(28px + (800px - var(--bleed)) * var(--k)); }
}
@media (max-width: 640px) {
  .hero--phone .hero__frame { --k: .72; }
}
@media (min-width: 1024px) {
  /* phone centred in the space right of the copy column: halfway between its right edge and the content edge */
  /* taller minimum than the photo's 560 px (up to 680 px when the window allows), so the phone is not tiny on 4:3 screens */
  .hero--phone .hero__frame { --k: .9; --phone-x: calc(50% + min(300px, var(--content-w) / 4)); min-height: max(560px, min(680px, 100svh - 32px)); }
  @supports (width: calc(1px * tan(atan2(1px, 1px)))) {
    /* visible phone height = frame height (main.css height, the min-height above) minus header and a gap; tan(atan2(a, b)) = a / b as a number */
    .hero--phone .hero__frame { --k: clamp(.62, tan(atan2(max(560px, min(680px, 100svh - 32px), min((100vw - 32px) * .5625, 100svh - 32px)) - 128px, 720px)), 1.2); }
  }
}

/* ---------- the phone */
.phone { position: absolute; z-index: 1; left: var(--phone-x); bottom: calc(var(--bleed) * var(--k) * -1); width: 380px; height: 800px; margin: 0; padding: 10px; border-radius: 62px; background: color-mix(in srgb, var(--brand-night) 82%, #8a96c8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 0 0 4px rgba(0, 0, 0, 0.45), 0 48px 80px -40px rgba(0, 0, 0, 0.8); translate: -50% 0; scale: var(--k); transform-origin: 50% 100%; }
/* side buttons: action and volume on the left, power on the right */
.phone::before, .phone::after { content: ""; position: absolute; width: 4px; border-radius: 2px; }
.phone::before { left: -3px; top: 156px; height: 170px; background: linear-gradient(var(--phone-btn) 0 32px, transparent 32px 58px, var(--phone-btn) 58px 116px, transparent 116px 130px, var(--phone-btn) 130px); }
.phone::after { right: -3px; top: 214px; height: 96px; background: var(--phone-btn); }
.phone { --phone-btn: color-mix(in srgb, var(--brand-night) 70%, #8a96c8); }
.phone__screen { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 52px; overflow: hidden; background: #ffffff; }
.phone__status { flex: none; position: relative; display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 4px 32px 0 48px; color: #000000; font: 600 17px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
.phone__island { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; translate: -50% 0; border-radius: 18px; background: #000000; }
.phone__icons { display: flex; align-items: center; gap: 6px; }
.phone__icons svg { fill: currentColor; }
.phone__signal { width: 18px; height: 12px; }
.phone__wifi { width: 16px; height: 12px; }
.phone__battery { width: 27px; height: 13px; }
.phone__home { position: absolute; left: 50%; bottom: 8px; width: 136px; height: 5px; translate: -50% 0; border-radius: 3px; background: #000000; }

/* the chat demo fills the screen; new messages sit at the bottom and push older ones out of the top, like the real app */
.phone .sb-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; max-width: none; border-radius: 0; box-shadow: none; }
.phone .sb-chat__body { flex: 1; min-height: 0; overflow: hidden; justify-content: flex-end; }
.phone .sb-chat__compose { padding-bottom: 30px; }
/* main.css stretches every img in .hero__frame over the frame (that was the photo); the chat images get their own boxes back */
.phone .sb-msg__avatar { inset: auto auto 0 -44px; width: 36px; height: 36px; }
.phone .sb-typing__avatar { inset: 2px auto auto 34px; width: 20px; height: 20px; }

/* ---------- OnlyFans statistics behind the phone, like the floating dashboards in the moodboard.
   .scene has the phone's box and scale, so the cards sit in phone pixels: the chart top right, the earnings table bottom left.
   Values from OnlyFans (Overview > Earnings): Roboto, line #00AFF0 2 px, fill #00AFF0 at 14 %, lines rgba(138,150,163,.25), muted #8a96a3,
   rows 500 14/20 with 10/9 px padding, table head 13 px, period head 500 16 px. Surfaces are dark glass instead of white so they stay in the background.
   Exception to the type scale, like the chat demo: these copy the OnlyFans UI. */
.scene { position: absolute; z-index: 0; left: var(--phone-x); bottom: calc(var(--bleed) * var(--k) * -1); width: 380px; height: 800px; translate: -50% 0; scale: var(--k); transform-origin: 50% 100%; pointer-events: none; }
.ofs { --of-line: rgba(138, 150, 163, 0.25); --of-muted: #8a96a3; position: absolute; width: 400px; border: 1px solid var(--of-line); border-radius: 6px; background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.78); font: 400 14px/20px Roboto, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; opacity: 0.5; }
.ofs--chart { left: 230px; top: 64px; }
.ofs--table { left: -270px; top: 520px; }  /* low enough to stay under the hero copy */
@media (max-width: 1199px) { .ofs--table { left: -170px; } }  /* narrow desktops: clear of the call to action */
.ofs__head { display: flex; justify-content: space-between; gap: 12px; padding: 18px 16px; border-bottom: 1px solid var(--of-line); font: 500 16px/21px Roboto, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
.ofs__head b { font-weight: 500; }
.ofs__chart { display: block; width: 368px; height: 152px; margin: 14px 16px 12px; overflow: visible; }
.ofs__grid { stroke: var(--of-line); stroke-width: 1; }
.ofs__area { fill: rgba(0, 175, 240, 0.14); }
.ofs__line { fill: none; stroke: #00aff0; stroke-width: 2; stroke-linejoin: round; }
.ofs__chart text { fill: rgba(255, 255, 255, 0.62); font-size: 12px; }
.ofs__table { width: 100%; border-collapse: collapse; }
.ofs__table th { padding: 10px 16px 6px; font-size: 13px; font-weight: 400; line-height: 17px; color: var(--of-muted); text-align: right; }
.ofs__table th:first-child, .ofs__table td:first-child { text-align: left; }
.ofs__table td { padding: 10px 16px 9px; border-top: 1px solid var(--of-line); font-weight: 500; text-align: right; white-space: nowrap; }
.ofs__table td:nth-child(2) { color: var(--of-muted); }
.ofs__radio { display: inline-block; width: 20px; height: 20px; margin: 0 12px -5px 0; border: 2px solid var(--of-muted); border-radius: 50%; }
.ofs__radio.is-on { border-color: #00aff0; background: radial-gradient(circle, #00aff0 0 5px, transparent 5.5px); }
@media (max-width: 640px) { .scene { display: none; } }  /* no room beside the phone */

/* ---------- notifications: iOS banners on the screen, 8 px from its edges, just under the island, one at a time.
   They live inside the phone, so they scale with it; the sizes below are the iPhone ones and replace the smaller mobile sizes of main.css.
   main.js (data-notifs-hold) shows each for a while: it slides down from behind the island and goes back up before the next one comes. */
.phone .notifs { z-index: 2; top: 58px; right: 8px; bottom: auto; left: 8px; width: auto; transform: none; align-items: stretch; }
.phone .notifs:not(.is-anim) .notif:nth-last-child(n+2) { display: none; }  /* static state: the latest one */
.phone .notifs.is-anim .notif.is-in { animation: banner-in 520ms cubic-bezier(.2, .8, .2, 1) both; }
.phone .notifs.is-anim .notif.is-in.is-out { animation: banner-out 380ms cubic-bezier(.4, 0, 1, 1) both; }
@keyframes banner-in { from { transform: translateY(calc(-100% - 60px)); } to { transform: none; } }
@keyframes banner-out { from { transform: none; } to { transform: translateY(calc(-100% - 60px)); } }
.phone__island { z-index: 3; }  /* the banners pass under it, like on the phone */
.phone .notif { width: auto; max-width: none; padding: 13px 15px 13px 13px; gap: 11px; border-radius: 24px; background: rgba(28, 31, 46, 0.84); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2), 0 8px 24px rgba(5, 10, 36, 0.25); }
/* over the white chat the lock-screen glass of main.css turns light grey; the denser glass above keeps white text readable */
.phone .notif__icon { width: 38px; height: 38px; border-radius: 9px; }
.phone .notif__icon svg { width: 21px; height: 21px; }
.phone .notif__top b, .phone .notif__text { font-size: 15px; line-height: 20px; }
.phone .notif__time { font-size: 13px; line-height: 20px; }

/* ======================================================================
   Other sections: refinements on top of main.css
   ====================================================================== */

/* 6 compare: more room inside the dark SecretlyBlue column; body cells only sideways, so the rows stay aligned with the other columns
   (extra room above the logo and below the last row doesn't move any text) */
/* (table layout only, from 760 px; phones get the sideways-scrolled grid from main.css) */
@media (min-width: 760px) {
  /* the usual agency's column (header and answers) gets the same side padding, so both sets of marks sit at the same inset */
  .sb-compare .is-us, .sb-compare tr > :nth-child(3) { padding-inline: 40px; }
  .sb-compare thead .is-us { padding-top: 36px; padding-bottom: 20px; }
  .sb-compare tbody tr:last-child .is-us { padding-bottom: 32px; }
  /* the "Bežná agentúra" header as large as the letters of the logo next to it (Rethink Sans ascenders are 0.7 em, so 21 px ≈ the
     logo's 15 px) and on the logo's baseline */
  .sb-compare thead th:nth-child(3) { font-size: 21px; line-height: 1.2; padding-bottom: 19px; }
}

/* 9 calculator: the total row label in the same colour as the rows above it (weight stays 600), the total itself in bold */
.calc__rows .calc__total dt { color: var(--ink-soft); }
.calc__rows .calc__total dd { font-weight: 700; }
/* price field: the currency inside the field; clicks on it go through to the input */
.sb-affix { position: relative; }
.sb-affix .sb-input { padding-right: 44px; }
.sb-affix--pre .sb-input { padding-right: 16px; padding-left: 36px; }
.sb-affix__unit { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); font: 400 16px/1 var(--font-text); color: var(--ink-muted); pointer-events: none; }
.sb-affix--pre .sb-affix__unit { right: auto; left: 16px; }

/* form fields: a lighter, thinner edge. Mixed towards the hairline colour, so it is lighter than line-strong (3:1) */
.sb-input { border-width: 1px; border-color: color-mix(in srgb, var(--line-strong) 60%, var(--line)); }
.final .sb-input { border-color: color-mix(in srgb, var(--ink-muted) 55%, var(--line)); }
/* fields take the page's surface instead of the raised one: light blue on the light sheets, night navy in the application form
   (colour only, the select keeps its arrow image) */
.sb-input { background-color: var(--surface); }
.sb-input:not(:focus, .is-error):hover { border-color: var(--line-strong); }
.final .sb-input:not(:focus, .is-error):hover { border-color: var(--ink-muted); }
.final .sb-input:focus { border-color: var(--focus); }  /* focus and error keep their colours on the gradient too */
.final .sb-input.is-error { border-color: var(--signal-error); }
/* the consent checkbox gets the same edge and surface as the fields; :not() keeps checked, focus and error from bundle.css */
.sb-check input { border-width: 1px; }
.sb-check input:not(:checked) { background-color: var(--surface); }
.sb-check input:not(:checked, :focus-visible, .is-error) { border-color: color-mix(in srgb, var(--line-strong) 60%, var(--line)); }
.final .sb-check input:not(:checked, :focus-visible, .is-error) { border-color: color-mix(in srgb, var(--ink-muted) 55%, var(--line)); }
.sb-check:hover input:not(:checked, :focus-visible, .is-error) { border-color: var(--line-strong); }
.final .sb-check:hover input:not(:checked, :focus-visible, .is-error) { border-color: var(--ink-muted); }

/* 10 pricing: spacing by groups instead of one even gap.
   choose the band (label + switch) → the price → act (button + terms) → what is included (under a hairline).
   The example sits in its own card next to it (main.css) */
.sb-price { gap: 0; padding: clamp(28px, 3.6vw, 48px); }
.price-top { gap: 0; }
.price-top .sb-seg { margin-top: 12px; }
.price-fig { margin-top: 36px; }
.sb-price__unit { font-size: var(--fs-body-s); }
.price-calc { margin-top: 24px; }
.sb-price > .sb-btn { margin-top: 36px; }
.sb-price__terms { margin-top: 14px; text-align: center; }
.sb-price .sb-list { gap: 14px; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line); }

/* section leads under the H2s: body size (17 px) instead of the fluid 17–20 px; the hero lead stays larger */
.lead { font-size: var(--fs-body); }

/* 12 faq: lighter questions */
.sb-acc summary { font-weight: 500; }

/* 13 application: the type switch: the selected option in white, so it doesn't read as a second blue button next to the send button;
   a hairline keeps the track visible on the gradient */
.apply__type { box-shadow: inset 0 0 0 1px var(--line); }
.apply__type button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }