does, and only when its content actually overflows the available height. */ height: var(--app-height, 100vh); overflow: hidden; display: flex; flex-direction: column; } /* Scoped to a direct child of body — the site's own single top header — so it never leaks onto a

nested inside a page's own content (e.g. the German course's self-study module uses its own

s for internal cards; without this scoping every bare-tag rule below would also restyle those). */ body > header { padding: 20px 20px 6px; text-align: center; background: none; position: relative; /* Header chrome (back button, bell, language switcher, desktop nav order) always lays out the same physical way regardless of interface language — the back arrow must stay on the left exactly like the English layout, never mirroring under fa/ar. Inheriting direction:ltr here makes every inset-inline-start/end and flex order rule below resolve as fixed left/right, the same trick already used on .bottom-nav for the footer. */ direction: ltr; } header h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: 0.5px; background: linear-gradient(135deg, #4f46e5, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Desktop-only nav/shell pieces — hidden unconditionally here so mobile never sees them; the desktop media query at the end of this stylesheet is the only place that reveals them. */ .desktop-nav-links, .desktop-only { display: none; } .header-right-icons { position: absolute; top: 16px; inset-inline-end: 20px; display: flex; align-items: center; gap: 8px; } /* Present for screen readers, absent from the page. Used by the language button, whose visible content is a flag with no words in it. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* The current language reads as its flag, in a circle the same size as the bell and support buttons beside it. */ .header-lang-btn { padding: 0; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--card); border: 1px solid var(--border); cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; flex: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .header-lang-btn:hover { border-color: var(--accent); } /* cover, not contain: a flag's aspect ratio is not 1:1, so fitting it inside the circle would leave bars of card colour top and bottom. */ .header-lang-flag { width: 100%; height: 100%; object-fit: cover; display: block; } .lang-option-flag { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; } .header-lang-btn iconify-icon { font-size: 15px; } .header-lang-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow), 0 6px 14px rgba(79, 70, 229, .18); } .header-lang-btn:active { transform: scale(.93); } .lang-dropdown-wrap { position: relative; } .lang-dropdown { position: fixed; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow), 0 16px 40px rgba(0, 0, 0, .22); padding: 8px; width: max-content; min-width: 150px; max-width: 220px; display: flex; flex-direction: column; gap: 2px; z-index: 90; opacity: 0; transform: translateY(-8px) scale(.95); pointer-events: none; transition: opacity .16s ease, transform .16s ease; } .lang-dropdown.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* Support lives in the app bar now, beside the bell. Same shape as the bell so the pair reads as one set rather than two ideas. */ .header-icon-btn { background: var(--card); border: 1px solid var(--border); color: var(--text-dim); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; box-shadow: var(--shadow); font-size: 15px; display: flex; align-items: center; justify-content: center; flex: none; transition: color .2s ease, border-color .2s ease; } .header-icon-btn:hover { color: var(--accent); border-color: var(--accent); } /* A section heading with one control on the far side of it — where Reviews sits now that it has left the bottom bar. */ .section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 8px; } .section-head h2 { margin: 0; font-size: 15px; } .section-head-btn { background: var(--card); border: 1px solid var(--border); color: var(--text-dim); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; box-shadow: var(--shadow); font-size: 15px; display: flex; align-items: center; justify-content: center; flex: none; transition: color .2s ease, border-color .2s ease, transform .2s ease; } .section-head-btn:hover { color: var(--accent); border-color: var(--accent); } .section-head-btn:active { transform: scale(.92); } .header-bell-btn { position: relative; background: var(--card); border: 1px solid var(--border); color: var(--text-dim); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; box-shadow: var(--shadow); font-size: 15px; display: flex; align-items: center; justify-content: center; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease; } .header-bell-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow), 0 6px 14px rgba(79, 70, 229, .18); } .header-bell-btn:active { transform: scale(.93); } .header-bell-badge { position: absolute; top: -4px; right: -4px; background: #ef4444; color: var(--on-accent); font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px; padding: 0 4px; display: flex; align-items: center; justify-content: center; line-height: 1; animation: header-bell-badge-pulse 1.8s ease-in-out infinite; } @keyframes header-bell-badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .header-back-btn { position: absolute; top: 16px; inset-inline-start: 20px; background: var(--card); border: 1px solid var(--border); color: var(--text-dim); font-size: 16px; font-weight: 700; width: 32px; height: 32px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease; border-radius: 50%; cursor: pointer; box-shadow: var(--shadow); display: none; align-items: center; justify-content: center; } .header-back-btn.show { display: flex; } .header-back-btn iconify-icon { font-size: 18px; } .header-back-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateX(-2px); box-shadow: var(--shadow), 0 6px 14px rgba(79, 70, 229, .18); } .header-back-btn:active { transform: scale(.9); } /* On pages that have their own hero banner (home, category pages), the header floats over the banner instead of pushing it down — taken out of flow entirely so

's existing negative-margin trick lands the banner at the true top of the page, with the back/lang buttons and the app title sitting on top of it. */ body.has-banner > header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding: 16px 20px; } /* On mobile the h1 normally uses background-clip:text with a purple gradient fill, which would be unreadable against the banner's own gradient/photo behind it — solid white with a shadow instead, only while it's floating over that banner. Desktop's own override (below, in the >=1024px block) keeps the gradient version since there the header sits on a plain background, not on top of the banner. */ @media (max-width: 1023px) { body.has-banner header h1 { display: block; text-align: start; background: none; -webkit-background-clip: unset; background-clip: unset; color: var(--on-accent); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); } /* Home has no back button, so its title keeps sitting to the side like before; only pages reached via the back button (category sub-pages) center it, since there it sits between a back arrow and the lang/bell icons rather than alone in the corner. */ body.has-banner.has-back header h1 { text-align: center; } /* Profile's own header card already carries the avatar/name — the floating site title and language switcher would just be clutter on top of it; only the bell (unread notifications) stays useful there. */ body.profile-banner header h1, body.profile-banner #header-lang-btn { display: none; } /* By default the banner's own heading just duplicates the site name already floating in the header above it — hidden via this class. Once an admin sets a real custom title (loadNews() in the JS below), that class is removed so the custom text shows same as any other category banner; only the redundant default stays hidden. */ #home-banner-title.home-banner-title-default { display: none; } } body.full-page-mode .bottom-fixed-inner, body.full-page-mode .nav-center-btn, body.full-page-mode .nav-center-label { display: none; } main { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; max-width: 480px; width: 100%; margin: 0 auto; /* Left/right cut 20% from the original 16px so every card on the site sits closer to the screen's own edges; top stays 16px (nothing asked to move the header down), bottom keeps its own much bigger value for the bottom dock. Every full-bleed banner below cancels this exact number, not a fixed 16px, so it still breaks out flush and no further than the true edge. */ padding: 16px 12.8px; padding-bottom: 150px; } .step { display: none; } .step.active { display: block; } /* Short conversations/lists shouldn't leave a dead gap between the last item and the composer — fill the step's height and pin the content to the bottom, so any slack lands above it instead. */ #step-support.active { display: flex; flex-direction: column; min-height: 100%; } #step-support .chat-messages { margin-top: auto; } .home-banner { position: relative; display: flex; align-items: flex-end; min-height: 220px; /* Breaks out of main's 16px padding on three sides so it starts flush at the very top of the page, right under the header, edge to edge. */ margin: -16px -12.8px 16px -12.8px; border-radius: 0 0 22px 22px; overflow: hidden; background: linear-gradient(135deg, #4f46e5, #a855f7); color: var(--on-accent); box-shadow: 0 10px 24px rgba(168, 85, 247, 0.28); } .home-banner-bg { position: absolute; inset: 0; display: none; } .home-banner.has-image .home-banner-bg { display: block; } /* Two stacked layers, only one ever at opacity:1 — startBannerCarousel() crossfades between them on a timer instead of hard-cutting the image, which CSS can't animate directly (background-image isn't interpolatable between two different URLs). */ .home-banner-bg-layer { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; } .home-banner-bg-layer.active { opacity: 1; } .home-banner-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.62) 100%); display: none; } .home-banner.has-image .home-banner-scrim { display: block; } .home-banner.has-image .home-banner-icon { display: none; } .home-banner-content { position: relative; z-index: 1; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; } .home-banner-text h2 { margin: 0 0 4px; font-size: 17px; font-weight: 800; } .home-banner-text p { margin: 0; font-size: 13px; opacity: 0.9; } .home-banner-icon { font-size: 42px; opacity: 0.9; line-height: 1; flex-shrink: 0; } /* Same full-bleed hero treatment as .home-banner, reused as the header for every category page (the appointment list and the 15 "coming soon" placeholders) — the category's own icon sits on the banner instead of a plain text heading. */ .category-banner { position: relative; display: flex; align-items: flex-end; min-height: 220px; margin: -16px -12.8px 16px -12.8px; border-radius: 0 0 22px 22px; overflow: hidden; background: linear-gradient(135deg, #4f46e5, #a855f7); color: var(--on-accent); box-shadow: 0 10px 24px rgba(168, 85, 247, 0.28); } .category-banner-bg { position: absolute; inset: 0; background-size: cover; background-position: center; display: none; } .category-banner.has-image .category-banner-bg { display: block; } .category-banner-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.55) 100%); display: none; } .category-banner.has-image .category-banner-scrim { display: block; } .category-banner-content { position: relative; z-index: 1; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; } .category-banner-title { font-size: 18px; font-weight: 800; } .category-banner-subtitle { font-size: 13px; opacity: 0.9; margin-top: 4px; display: none; } .category-banner-subtitle.show { display: block; } .category-pager { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; /* Pulled 8px out past main's 16px padding on each side, so the row of icons sits closer to the edges of the screen than the text around it and has 16px more width to spend on the icons themselves. */ margin: 18px -8px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; /* Mobile browsers disagree on what scrollLeft:0 means once the page is RTL (some treat it as the first page like LTR, others as the last) — forcing LTR scroll semantics here keeps "page 1" the one actually visible after a language switch on every browser, at the minor cost of the icon grid itself no longer mirroring in RTL. */ direction: ltr; } .category-pager::-webkit-scrollbar { display: none; } .category-page { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, auto); gap: 12px 4px; } .category-item { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 2px; font-family: inherit; } .category-icon { position: relative; /* 66, down ~15% from the earlier 78 — still the point of the screen, just not quite so heavy against the rest of the home page. */ width: 66px; height: 66px; border-radius: 19px; display: flex; align-items: center; justify-content: center; font-size: 21px; color: var(--accent); transition: transform .15s; } .category-item:active .category-icon { transform: scale(0.94); } .category-flag-icon { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* The "coming soon" pill, its grey-out filter and the PRO corner are gone from the home tiles — every section is being worked on and the grid reads as one set. What opens is still decided by HOME_CATEGORY_LIVE_IDS in js/app/07-categories.js; a section that is not ready answers a tap with a toast. The Jobcenter list keeps its own Pro tag, which marks a form you have not paid for rather than one that is unfinished. */ .category-label { font-size: 13px; font-weight: 700; /* --text, not --text-dim: these name the site's main destinations, so they are primary text. On the dark ground the dim token left them at 5.7:1 against everything around them at 14:1, which read as a whole row of greyed-out labels. */ color: var(--text); text-align: center; line-height: 1.3; } .category-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; } .category-dots .dot { width: 6px; height: 6px; border-radius: 3px; /* Not --border: that is a colour meant to sit on a card, and against the page's own lavender ground it came out at 1.05:1 — a mark you cannot see is not a page indicator. The accent muted with the faintest ink instead: 2.7:1, quiet but present, and still the page's hue rather than a grey dropped into a purple screen. Both halves are theme tokens, so it re-mixes itself in dark mode. The active dot stays the full accent and four times as wide, so which page you are on reads by shape as well as colour. */ background: color-mix(in oklab, var(--accent) 55%, var(--i-4)); transition: background .2s, width .2s; } .category-dots .dot.active { width: 16px; background: var(--accent); } /* Small rotating strip below the category grid — same two-layer crossfade trick as .home-banner-bg, just a slimmer, plainer box (no scrim/text overlay, images only). */ .home-secondary-banner { position: relative; height: 90px; border-radius: 16px; overflow: hidden; margin: 4px 0 20px; box-shadow: var(--shadow); } .home-secondary-banner-layer { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; } .home-secondary-banner-layer.active { opacity: 1; } .news-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; margin-bottom: 12px; box-shadow: var(--shadow); } .news-image { width: 100%; height: 220px; object-fit: cover; display: block; } .news-card-body { padding: 12px 14px; } .news-card-title { font-weight: 700; font-size: 14px; } .news-card-text { font-size: 13px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; } .news-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; } .news-card-time { font-size: 11px; color: var(--text-dim); } .news-like-btn { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; } .news-like-btn.liked { color: #ef4444; } .embassy-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; } /* Jobcenter forms only, not the other .embassy-list grids (country pickers etc.) — an id selector so it wins over both the 4-column default above and the desktop auto-fill override further down, regardless of viewport width. A vertical list instead of an icon grid, since each row now carries a form-code badge plus an explanation line ("HA — درخواست اصلی کمک") rather than just a bare abbreviation, and that much text needs the full row width to stay readable. */ #jobcenter-category-list { display: flex; flex-direction: column; gap: 8px; } #jobcenter-category-list .embassy-card { flex-direction: row; align-items: center; justify-content: flex-start; min-height: unset; padding: 10px 12px; text-align: start; gap: 12px; } #jobcenter-category-list .embassy-card .flag-photo, #jobcenter-category-list .embassy-card .emblem-photo { width: 60px; flex-shrink: 0; aspect-ratio: 1 / 1; /* Overrides the base .flag-photo/.emblem-photo rules (bordered frame, 10px padding, object-fit:contain) — every form here shares the same logo image, so it should fill this box edge-to-edge like a real app icon instead of floating small inside a padded card. */ object-fit: cover; padding: 0; background: none; border: none; border-radius: 12px; } #jobcenter-category-list .embassy-card .jc-row-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; } #jobcenter-category-list .embassy-card .name { font-size: 13px; -webkit-line-clamp: 1; } #jobcenter-category-list .embassy-card .jc-row-subtitle { font-size: 11.5px; color: var(--text-dim); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .jc-free-badge { display: inline-block; align-self: flex-start; margin-top: 2px; font-size: 10px; font-weight: 700; color: var(--fg-good); background: var(--t-good-2); padding: 2px 8px; border-radius: 999px; } .jc-pro-badge { display: inline-block; align-self: flex-start; margin-top: 2px; font-size: 10px; font-weight: 700; color: #7c3aed; background: #ede9fe; padding: 2px 8px; border-radius: 999px; } .jc-access-banner { display: flex; align-items: center; gap: 6px; cursor: pointer; border: none; background: var(--t-good-2); color: #166534; border-radius: 999px; padding: 5px 10px; font-size: 11.5px; font-weight: 700; max-width: 100%; transition: opacity .15s; } .jc-access-banner:hover { opacity: 0.85; } .jc-access-banner span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jc-access-banner span:first-child { width: 16px; height: 16px; border-radius: 50%; background: #16a34a; color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; } /* Not yet subscribed — a CTA rather than a status readout, so it needs a visibly different (not "success green") color to read as actionable. */ .jc-access-banner.locked { background: #ede9fe; color: #7c3aed; } .jc-access-banner.locked span:first-child { background: #7c3aed; } .embassy-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 12px 6px; min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; cursor: pointer; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; } .embassy-card:active { transform: scale(0.95); } .embassy-card:hover { border-color: var(--accent); } .embassy-card .code-badge { width: 30px; height: 20px; border-radius: 6px; background: var(--card-2); color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: 0.5px; display: flex; align-items: center; justify-content: center; } .embassy-card .name { font-size: 11px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .embassy-card .price { font-size: 10px; font-weight: 700; color: var(--accent-2); } /* Country cards (residence + target-country grids): a contained flag photo up top — same "icon box, label below" shape as the home screen's .category-icon/.category-label pair — with the name (and price, for target-country cards) as plain text underneath, not overlaid on the image. */ .embassy-card.country-card { padding: 8px 6px 10px; justify-content: flex-start; gap: 8px; } .embassy-card.country-card .flag-photo { width: 100%; aspect-ratio: 3 / 2; border-radius: 10px; object-fit: cover; display: block; background: var(--card-2); border: 1px solid var(--border); } /* Emblems (embassy-branch city cards) aren't flag-shaped — contain instead of cover, with padding, so the coat of arms isn't cropped. */ .embassy-card.country-card .emblem-photo { aspect-ratio: 1 / 1; object-fit: contain; padding: 10px; } /* Phrase topic cards: two per row instead of the four-up grid the other .embassy-list pickers use — each one carries a photo and a full topic name ("Probleme lösen und um Hilfe bitten"), neither of which fits in a quarter-width tile. An id selector so it beats both the 4-column default and the desktop auto-fill override, the same way #jobcenter-category-list does. */ #german-phrases-picker-list { grid-template-columns: repeat(2, 1fr); gap: 12px; } #german-phrases-picker-list .name { font-size: 12px; } /* Topic cards (German-language sub-topics): same card shape as the country/emblem cards, but with an iconify glyph in a tinted box instead of a photo — these are abstract topics (Grammar, Listening, ...) with no natural photo to show. */ .embassy-card.country-card .topic-icon-box { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; background: var(--card-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--accent); } /* German-language level filter (A1–C1): picking a level doesn't change which of the 8 topic cards show below it — it just scopes the content each one leads to, so all 8 stay visible regardless of the pick. */ .level-filter-row { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 4px; scrollbar-width: none; -ms-overflow-style: none; } .level-filter-row::-webkit-scrollbar { display: none; } .level-filter-chip { flex: none; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 700; color: var(--text-dim); cursor: pointer; box-shadow: var(--shadow); transition: background .15s, color .15s, border-color .15s; } .level-filter-chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .order-filter-icon-btn { position: relative; flex-shrink: 0; background: var(--card); border: 1px solid var(--border); color: var(--text-dim); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; box-shadow: var(--shadow); font-size: 16px; display: flex; align-items: center; justify-content: center; transition: color .15s ease, border-color .15s ease; } .order-filter-icon-btn:hover { color: var(--text); } .order-filter-active-dot { position: absolute; top: -2px; inset-inline-end: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); display: none; } #order-filter-modal .form-card .level-filter-row { flex-wrap: wrap; overflow-x: visible; justify-content: center; } /* Embassy-branch city cards: one big card per row instead of a grid, so each one has room for an address line and a request-count strip below the name (see renderCityList()). */ .city-list { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; } .city-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); cursor: pointer; transition: border-color .15s, transform .15s, opacity .15s; } .city-card:active { transform: scale(0.98); } .city-card:hover { border-color: var(--accent); } .city-card.inactive { cursor: not-allowed; opacity: .65; } .city-card.inactive:hover { border-color: var(--border); } .city-status-badge { position: absolute; top: 14px; inset-inline-end: 16px; display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; } .city-status-badge .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .city-status-badge.active { background: rgba(22, 163, 74, 0.12); color: var(--fg-good); } .city-status-badge.active .dot { background: #16a34a; } .city-status-badge.inactive { background: rgba(220, 38, 38, 0.12); color: var(--fg-bad); } .city-status-badge.inactive .dot { background: #dc2626; } .city-card-main { display: flex; align-items: center; gap: 14px; padding-inline-end: 80px; } .city-card-emblem { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: var(--card-2); border: 1px solid var(--border); padding: 8px; flex-shrink: 0; } .city-card-info { min-width: 0; flex: 1; } .city-card-name { font-size: 16px; font-weight: 800; } .city-card-address { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; } .city-card-stats { display: flex; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .city-stat { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 4px; } .city-stat iconify-icon { align-self: center; font-size: 13px; color: var(--text-dim); } .city-stat b { font-size: 13px; color: var(--accent); font-weight: 800; } .city-stat span { font-size: 10.5px; color: var(--text-dim); } .city-stat.completed iconify-icon { color: var(--fg-good); } .city-stat.completed b { color: var(--fg-good); } /* Wizard breadcrumb chips (residence / target-country) shown above the next step's grid once that step is picked — tap one to jump back. */ .selected-chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .selected-chip { display: flex; align-items: center; gap: 6px; background: var(--card-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--text); cursor: pointer; } .selected-chip .code-badge { width: 24px; height: 16px; border-radius: 5px; background: var(--card); color: var(--accent); font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .selected-chip iconify-icon { font-size: 14px; color: var(--text-dim); } /* ── Top-up wizard ─────────────────────────────────────────────────── */ /* Standard "country dropdown + phone field" shape — the select-style trigger shows the current pick (flag/name/dial code) and toggles a dropdown panel of every configured country below it, each row also showing its dial code, same as any phone-number country picker. */ .topup-country-select { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; cursor: pointer; } .topup-country-select iconify-icon { color: var(--text-dim); font-size: 20px; flex-shrink: 0; } .topup-country-select-value { display: flex; align-items: center; gap: 8px; min-width: 0; } .topup-country-select-flag { width: 24px; height: 18px; object-fit: cover; border-radius: 3px; border: 1px solid var(--border); flex-shrink: 0; } .topup-country-select-dial { color: var(--text-dim); font-size: 13px; direction: ltr; } .topup-country-select-name.placeholder { color: var(--text-dim); font-weight: 500; } .topup-country-dropdown { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-top: 6px; box-shadow: var(--shadow); overflow: hidden; } .topup-country-search { margin: 0; border: none; border-bottom: 1px solid var(--border); border-radius: 0; } .topup-country-dropdown-list { max-height: 240px; overflow-y: auto; } .topup-country-dropdown-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; font-size: 14px; } .topup-country-dropdown-row:hover { background: var(--card-2); } .topup-country-dropdown-row img { width: 24px; height: 18px; object-fit: cover; border-radius: 3px; border: 1px solid var(--border); flex-shrink: 0; } .topup-country-dropdown-row .dial { margin-inline-start: auto; color: var(--text-dim); font-size: 12.5px; direction: ltr; } .topup-custom-amount-toggle { display: block; background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 700; padding: 14px 0 0; cursor: pointer; text-align: start; } .topup-price-readout { margin-top: 14px; } .topup-package-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 8px; } .topup-package-card { background: var(--card); border: 2px solid var(--border); border-radius: 16px; padding: 14px 10px; text-align: center; cursor: pointer; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; } .topup-package-card:active { transform: scale(0.97); } .topup-package-card.selected { border-color: var(--accent); } .topup-package-card .eur { font-size: 18px; font-weight: 800; color: var(--text); } .topup-package-card .local { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; } .topup-custom-amount { margin-top: 10px; } /* A "detected operator" chip — logo (or a colored initial badge when the admin hasn't set a logo URL for it) + name, in its own bordered box with real spacing above so it never sits flush against the phone input or the box's own edge. */ .topup-operator-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; font-size: 14px; } .topup-operator-row .logo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); } .topup-operator-row .logo-fallback { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 13px; } .topup-operator-row .name { font-weight: 700; color: var(--text); } .topup-operator-select { margin-top: 14px; } .topup-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .topup-summary-row:last-of-type { border-bottom: none; } .topup-summary-row > span:first-child { color: var(--text-dim); } .topup-summary-row > span:last-child { font-weight: 700; } .topup-history { margin-top: 18px; } .topup-history-title { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 10px; } .topup-history-list { display: flex; flex-direction: column; gap: 10px; } .topup-history-card { display: flex; align-items: flex-start; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px; box-shadow: var(--shadow); } .topup-history-flag { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); margin-top: 2px; } .topup-history-info { min-width: 0; flex: 1; } .topup-history-main { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topup-history-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; } .topup-history-code { font-size: 11.5px; margin-top: 4px; display: flex; align-items: center; gap: 6px; } .topup-history-copy { border: none; background: transparent; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; padding: 2px; border-radius: 6px; font-size: 14px; transition: color .15s, background-color .15s; } .topup-history-copy:hover { color: var(--accent); background: var(--card-2); } .topup-history-amounts { display: flex; gap: 16px; margin-top: 8px; } .topup-history-amounts .amt-item { font-size: 11.5px; color: var(--text-dim); display: flex; flex-direction: column; gap: 2px; } .topup-history-amounts .amt-item b { font-size: 10.5px; font-weight: 600; color: var(--text-dim); } .topup-history-amounts .amt-item .amt-val { font-size: 13px; font-weight: 700; color: var(--text); } .topup-history-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topup-history-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; margin-top: 2px; } .topup-history-status { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; } .topup-history-status.completed { background: rgba(22, 163, 74, 0.12); color: var(--fg-good); } .topup-history-status.pending { background: rgba(217, 119, 6, 0.12); color: var(--fg-warn); } .topup-history-status.awaiting { background: rgba(220, 38, 38, 0.12); color: var(--fg-bad); } .topup-history-status.rejected { background: rgba(220, 38, 38, 0.12); color: var(--fg-bad); } .topup-history-again { flex-shrink: 0; border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 10px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color .15s, color .15s; } .topup-history-again:hover { background: var(--accent); color: var(--on-accent); } .topup-history-again:active { transform: scale(0.96); } .topup-history-again.pay { background: var(--accent); color: var(--on-accent); } .topup-history-again:disabled { opacity: .6; cursor: default; } .form-card { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 20px; box-shadow: var(--shadow); } .form-card h2 { margin: 0 0 18px; font-size: 18px; } .price-tag { display: inline-block; background: rgba(239, 68, 68, 0.12); color: var(--fg-good); font-weight: 700; padding: 6px 14px; border-radius: 999px; font-size: 14px; white-space: nowrap; } .submit-row { display: flex; align-items: center; gap: 12px; margin-top: 22px; } .submit-row .submit-btn { flex: 1; width: auto; margin-top: 0; } label { display: block; font-size: 13px; color: var(--text-dim); margin: 14px 0 6px; } input, textarea, select { width: 100%; background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; color: var(--text); font-size: 16px; font-family: inherit; } input:focus, textarea:focus, select:focus { border-color: var(--accent); } /* Suppress only the plain mouse-click outline here — a keyboard-driven focus still falls through to the global :focus-visible ring above, instead of this higher-specificity rule silently cancelling it too. */ input:focus:not(:focus-visible), textarea:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; } textarea { resize: vertical; min-height: 70px; } .phone-input-wrap { display: flex; align-items: center; gap: 8px; background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; } .phone-input-wrap:focus-within { border-color: var(--accent); } .phone-input-wrap .phone-prefix { font-size: 16px; font-weight: 700; color: var(--text-dim); flex-shrink: 0; } .phone-input-wrap input { width: auto; flex: 1; min-width: 0; background: none; border: none; padding: 11px 0; } .phone-input-wrap input:focus:not(:focus-visible) { outline: none; } .phone-input-wrap input::placeholder { color: var(--text-dim); opacity: 0.7; } .field-error { display: none; color: var(--danger, #ef4444); font-size: 12px; margin: 6px 0 14px; } .field-error.show { display: block; } .field-invalid { border-color: var(--danger, #ef4444) !important; } .field-valid { border-color: #16a34a !important; } .field-hint { font-size: 12px; color: var(--text-dim); margin: 6px 0 14px; line-height: 1.5; } .field-hint-warn { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: #f59e0b; margin: 6px 0 14px; line-height: 1.5; } .field-hint-warn iconify-icon { flex-shrink: 0; font-size: 15px; margin-top: 1px; } .review-info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .review-info-row:last-child { border-bottom: none; } .review-info-row b { color: var(--text-dim); font-weight: 600; flex-shrink: 0; } .review-info-row span { font-weight: 700; text-align: end; word-break: break-word; } .review-info-price { color: var(--danger, #ef4444); } .submit-btn { width: 100%; margin-top: 22px; background: linear-gradient(135deg, #4f46e5, #a855f7); color: white; border: none; border-radius: 999px; padding: 14px; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px rgba(168, 85, 247, 0.25); transition: opacity .15s; } .submit-btn:hover { opacity: 0.9; } .submit-btn:disabled { opacity: 0.6; cursor: default; } .error-msg { color: var(--danger); font-size: 13px; margin-top: 10px; display: none; } /* Jobcenter form viewer — fullscreen PDF stage with just two action buttons up top (Save / Guide); title/subtitle/price already showed on the grid tile the user tapped, so they aren't repeated in here. The step breaks out of

's normal padded flow via position:fixed so the PDF can run truly edge-to-edge, same trick .jc-guide-overlay already uses. */ #step-jobcenter-form.active { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 40; background: var(--bg); padding: 0; max-width: none; margin: 0; touch-action: pan-x pan-y; } body.jc-fullscreen > header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: none; /* The >=1024px navbar rule (further down, see "DESKTOP LAYOUT") sets its own backdrop-filter:blur(16px) — a separate property from background, so clearing just the background above left the blur itself still active, smearing the .jc-topbar buttons sitting right behind this (visually transparent, but still blurring) header. */ backdrop-filter: none; -webkit-backdrop-filter: none; padding: 10px 20px; pointer-events: none; } body.jc-fullscreen header h1, body.jc-fullscreen .header-lang-btn, body.jc-fullscreen .header-bell-btn, body.jc-fullscreen .desktop-nav-links { display: none; } body.jc-fullscreen .header-back-btn { pointer-events: auto; } .jc-topbar { display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 14px 8px; padding-left: 64px; flex-shrink: 0; /* Unconstrained, the three flex:1 columns below stretch across the full viewport — fine on a phone, but on a wide desktop window that balloons each button to 500+px, and the pale secondary (Guide) style all but disappears against the page background at that width. Capped to the same reading width the PDF page itself uses — but width:100% alongside the cap is what actually matters: without it this is a shrink-to-fit block, so the flex:1 columns collapse to their own tiny content width (three ~60px pills hugging the left edge with a huge dead gap beside them) instead of the row actually filling out to a normal toolbar width. Left-anchored, not centered — .header-back-btn sits at a fixed inset-inline-start inside the (full-width, in fullscreen mode) header above this row, and this box's own padding-left is what clears it; centering the box would pull it out from under that padding and leave the back button stranded with a gap of empty space next to it. */ width: 100%; max-width: 820px; /* Physical, not logical — .header-back-btn sits at a physical `left` regardless of page direction (see its own rule), but this document is RTL by default (Persian) and a direction-agnostic max-width block hugs the RTL *start* edge, i.e. the right, leaving this row stranded on the opposite side from the button it needs to clear. margin-right collapses onto the right instead, pinning this box to the left. */ margin-right: auto; /* This row sits right under the header-back-btn, which now always floats at a fixed physical left position (see header{} above) — forcing the same direction:ltr here keeps Save/Guide/Text Guide/Language in that same left-to-right order and clear of the back button regardless of interface language, instead of the language button drifting under it when the page is RTL. */ direction: ltr; } .jc-topbar-col { flex: 1; min-width: 0; } .jc-top-btn { width: 100%; border: 0; border-radius: 12px; padding: 12px 8px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); color: var(--on-accent); background: linear-gradient(135deg, #4f46e5, #a855f7); } .jc-top-btn.jc-guide-top-btn { background: var(--card-2); color: var(--text); border: 1px solid var(--border); } .jc-top-btn:disabled { opacity: 0.6; cursor: default; } .jc-topbar-lang-btn { flex: none; align-self: flex-start; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 12px; background: var(--card-2); color: var(--text); font-size: 18px; cursor: pointer; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease; } .jc-topbar-lang-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); } .jc-topbar-lang-btn:active { transform: scale(.93); } .jc-topbar-hint { margin-top: 6px; font-size: 11px; color: var(--text-dim); text-align: center; } .jc-pdf-stage { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; background: var(--card-2); padding-bottom: max(12px, env(safe-area-inset-bottom)); } .jc-pdf-pages { transform-origin: top center; } .jc-pdf-page { position: relative; margin: 0 auto 10px; background: var(--s-0); } .jc-pdf-page canvas { display: block; width: 100%; height: 100%; } .jc-pdf-loading, .jc-pdf-error { display: flex; align-items: center; justify-content: center; padding: 40px 16px; color: var(--text-dim); font-size: 13px; text-align: center; } /* !important is required since pdf.js sets a per-field font-size/height inline. Below 16px, iOS Safari force-zooms the whole page on input focus (its built-in "don't let the user lose a tiny input" behavior). */ .annotationLayer input, .annotationLayer textarea, .annotationLayer select { font-size: 8px !important; touch-action: manipulation; } /* Chrome/Safari give every a built-in min-height (and default padding) that silently overrides any explicit height — pdf.js's own height:100% (matching the PDF field's real size) never actually applied because of it, which is why fields rendered oversized. */ .annotationLayer input:not([type="checkbox"]):not([type="radio"]), .annotationLayer textarea, .annotationLayer select { height: 100% !important; min-height: 0 !important; padding: 0 !important; border-radius: 0 !important; -webkit-appearance: none !important; appearance: none !important; } /* iOS Safari's own rounded-corner field chrome and pale blue fill are both lighter/rounder than the site wants; dial the tint down without touching the :focus override below, which replaces it entirely. */ .annotationLayer { --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,"); } /* Same min-size floor hits checkbox/radio too (their real hit-area is often tiny — a few px, matching the PDF's own tap target). */ .annotationLayer input[type="checkbox"], .annotationLayer input[type="radio"] { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; } .annotationLayer input[type="radio"] { border-radius: 50%; } /* This PDF's AcroForm has no "checked" appearance graphic of its own, so without an explicit style a checked box/radio shows no visible mark. */ .annotationLayer input[type="checkbox"]:checked, .annotationLayer input[type="radio"]:checked { background-color: #000 !important; background-image: none !important; } .annotationLayer :is(input, textarea, select):focus { background: rgba(255, 152, 0, 0.15) !important; outline: 2px solid #ff9800 !important; outline-offset: 1px; } /* Free-placed text boxes — for notes, or for PDFs with no fillable AcroForm fields at all. Independent of the real AcroForm layer above; saveJcPdf() bakes these into the PDF separately, via pdf-lib. */ .jc-text-overlay { position: absolute; inset: 0; pointer-events: none; } .jc-text-field-wrap { position: absolute; min-width: 100px; min-height: 32px; resize: both; overflow: hidden; pointer-events: auto; z-index: 6; } .jc-text-field { width: 100%; height: 100%; box-sizing: border-box; border: 1px dashed #1769e0; background: var(--glass-strong); padding: 5px; font-family: inherit; font-size: 16px; resize: none; color: #111; } .jc-text-field:focus { outline: 2px solid #1769e0; } .jc-text-field-del { position: absolute; top: -8px; inset-inline-end: -8px; width: 18px; height: 18px; border-radius: 50%; background: #ef4444; color: var(--on-accent); border: 0; font-size: 12px; line-height: 1; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .jc-edit-toolbar { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 41; display: none; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--text); white-space: nowrap; } .jc-edit-toolbar.active { display: flex; } .jc-edit-toolbar { display: none !important; } /* Floating "exit zoom" button — shown only while the PDF is pinch-zoomed in, in case a pinch-out gesture ever fails to bring it back to 1x. */ .jc-pdf-zoom-reset { display: none; position: fixed; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 42; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 50%; background: var(--card); box-shadow: var(--shadow); color: var(--text); font-size: 20px; } .jc-pdf-zoom-reset.visible { display: flex; } .jc-edit-toolbar button { background: var(--card-2); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; } /* Guide-audio popup — opens directly as a small floating bar (no bigger modal stage first), draggable anywhere on screen; the backdrop is transparent/click-through so the PDF underneath stays fully usable. */ .jc-guide-overlay { position: fixed; inset: 0; background: transparent; display: none; align-items: flex-end; justify-content: flex-end; z-index: 80; padding: 16px; pointer-events: none; } .jc-guide-overlay.active { display: flex; } .jc-guide-audio-player { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; background: linear-gradient(180deg, #22222c, #131318); border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,0.35); pointer-events: auto; width: 300px; max-width: calc(100vw - 32px); } .jc-guide-audio-player.dragging { transition: none; opacity: 0.9; } /* Dedicated grab strip — dragging is only initiated from here, so it never conflicts with tapping the buttons or seeking the track. */ .jc-guide-drag-handle { position: relative; display: flex; align-items: center; justify-content: center; height: 34px; cursor: grab; touch-action: none; } .jc-guide-audio-player.dragging .jc-guide-drag-handle { cursor: grabbing; } .jc-guide-drag-handle span { width: 28px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); } .jc-guide-audio-controls { display: flex; align-items: center; gap: 6px; padding: 2px 10px 8px; } .jc-guide-audio-empty { display: none; padding: 4px 16px 16px; font-size: 12.5px; color: #9ca3af; text-align: center; } .jc-guide-audio-player.empty .jc-guide-audio-controls { display: none; } .jc-guide-audio-player.empty .jc-guide-audio-empty { display: block; } .jc-guide-audio-btn { flex: none; width: 20px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--on-accent); font-size: 15px; cursor: pointer; padding: 0; } .jc-guide-audio-skip { font-size: 9px; font-weight: 700; width: 24px; } .jc-guide-audio-time { flex: none; color: #cfcfe0; font-size: 10px; font-variant-numeric: tabular-nums; } .jc-guide-audio-track { flex: 1; min-width: 0; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); position: relative; cursor: pointer; } .jc-guide-audio-fill { /* top/bottom/left, not inset:0 — with a right edge also pinned, direction:rtl would keep "right" fixed and let "left" float instead, anchoring the growing fill from the wrong side. Belt and braces alongside the player's own dir="ltr" above. */ position: absolute; top: 0; bottom: 0; left: 0; width: 0%; border-radius: 3px; background: linear-gradient(90deg, #6366f1, #a855f7); } .jc-guide-audio-close { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: #cfcfe0; font-size: 24px; cursor: pointer; padding: 0; } .jc-text-guide-overlay { position: fixed; inset: 0; background: rgba(15, 15, 30, 0.5); display: none; align-items: flex-end; justify-content: center; z-index: 85; } .jc-text-guide-overlay.active { display: flex; } .jc-text-guide-sheet { width: 100%; max-width: 480px; max-height: 75vh; background: var(--card); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; overflow: hidden; } .jc-text-guide-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .jc-text-guide-title { font-size: 15px; font-weight: 800; color: var(--text); } .jc-text-guide-close { border: none; background: var(--card-2); color: var(--text-dim); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 14px; flex-shrink: 0; } .jc-text-guide-body { padding: 16px 18px; padding-bottom: max(16px, env(safe-area-inset-bottom)); overflow-y: auto; font-size: 14px; line-height: 1.9; color: var(--text); } .jc-text-guide-body.empty { color: var(--text-dim); text-align: center; padding: 40px 18px; } .jc-text-guide-body p { margin: 0 0 10px; } .jc-text-guide-body h3, .jc-text-guide-body h4, .jc-text-guide-body h5 { margin: 18px 0 8px; font-weight: 800; color: var(--accent); } .jc-text-guide-body h3:first-child, .jc-text-guide-body h4:first-child, .jc-text-guide-body h5:first-child { margin-top: 0; } .jc-text-guide-body h3 { font-size: 17px; } .jc-text-guide-body h4 { font-size: 15px; } .jc-text-guide-body h5 { font-size: 14px; } .jc-text-guide-body hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; } .jc-text-guide-body ul { margin: 0 0 10px; padding-inline-start: 20px; } .jc-text-guide-body li { margin-bottom: 4px; } .jc-text-guide-body strong { color: var(--text); font-weight: 800; } /* What is left of the old sign-in dialog. The card, its purple banner, the pill inputs and the pill submit went with it — signing in is a page now and css/den-auth.css draws it. These few rules are the ones the page still shares with the rest of the site. */ .auth-header { text-align: center; } .auth-body { padding: 22px 22px 24px; } .auth-switch-line { text-align: center; margin-top: 16px; font-size: 13px; color: #666; } /* Google's button is a same-origin