/* ============================================================================
   castor-theme.css — dark-navy skin layered on top of Cooper's vendor CSS.
   Cooper ships as a light/white template (body/header/footer/etc default to
   #fff — verified directly in style.css). Castor's brand is dark navy/cyan
   (see CLAUDE.md + the rest of the product). This file repaints backgrounds
   and text colors on the SAME classes/layout Cooper defines — no structural
   or spacing changes, only color. Loaded last, after castor-colors.css.
   ============================================================================ */

:root {
  --navy: #0B1E3B;
  --navy-deep: #060F1E;
  --cyan: #00F0FF;
  --steel: #4A6FA5;
  --ice: #F5F7FA;
  --gold: #F0B429;
}

body, #wrapper {
  background: var(--navy);
  color: rgba(245, 247, 250, 0.75);
}

h1, h2, h3, h4, h5, h6 { color: var(--ice); }

/* Cooper's own headline typography (Oswald/Open Sans) — the app shell's
   global Tailwind base layer sets h1-h4 to Space Grotesk site-wide, which
   would otherwise bleed into this page; re-assert Cooper's stack here. */
#wrapper h1, #wrapper h2 { font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif !important; }

/* ── Hero ─────────────────────────────────────────────────────────────
   Cooper tints .hero-area with a slate overlay (rgba(26,36,45,.85)) meant
   to sit on a photo. With no photo it just turned the navy hero gray —
   replace it with a night-sky fade in the brand's own two navies. */
.hero-area.banner:before { background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%); }

/* Cooper's hero type is weight 100-300 with 1px tracking at 25-28px —
   smaller than the page's own h2s. The h1 is the largest text on the page
   at every width; body copy drops the tracking and the hairline weight. */
.hero-area.banner h1 {
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0;
  text-wrap: balance;
  margin-bottom: 20px;
}
.hero-area.banner p {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(245, 247, 250, 0.82);
  max-width: 34em;
  margin-bottom: 32px;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.hero-actions .btn-info { margin: 0; border-radius: 99px; padding: 16px 30px; font-size: 15px; line-height: 20px; font-weight: 600; }
/* Cooper's .btn-info hover is a #222 fill — near-invisible on the navy sky. */
.hero-actions .btn-info:hover,
.hero-actions .btn-info:focus,
.hero-actions .btn-info:active { background: var(--ice); border-color: var(--ice); color: var(--navy-deep); }
.hero-login-link {
  background: none;
  border: 0;
  padding: 12px 0;
  color: var(--ice);
  font: 600 16px/20px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-color: rgba(245, 247, 250, 0.4);
  text-underline-offset: 5px;
  transition: color 0.2s ease-out, text-decoration-color 0.2s ease-out;
}
.hero-login-link:hover { color: var(--cyan); text-decoration-color: var(--cyan); }

/* Below the desktop layout the text column spans the moon's side of the
   sky — keep the motif as a faint backdrop so it never competes with copy. */
.hero-celestial { opacity: 0.3; }

/* ── Hero layout: copy + app miniature (ProductPreview.tsx) ── */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; padding-bottom: 48px; }
.hero-area .hero-grid .heading-holder { margin-bottom: 0; }
@media (min-width: 992px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 72px; align-items: center; padding-bottom: 72px; }
}

/* The miniature uses the app's own colors (interfaces/castor), not the
   landing's, so it reads as the product. Type and spacing are reset here
   because .hero-area sets a thin, tracked 16px/28px font on everything. */
.pp {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 14px 14px 0;
  border: 1px solid rgba(245, 247, 250, 0.14);
  border-radius: 28px;
  background: linear-gradient(41deg, #0c0b11 0%, #1a173e 100%);
  box-shadow: 0 28px 60px -24px rgba(2, 6, 16, 0.9);
  color: #fff;
  font: 400 12px/1.35 "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  text-align: left;
  user-select: none;
}
.pp-bar { display: flex; align-items: center; height: 30px; }
/* Specific on purpose: Cooper sizes every image inside .hero-area. */
.hero-area .pp img.pp-logo { display: block; width: 24px; height: 24px; max-width: none; margin: 0; border-radius: 50%; position: static; }
.pp-title { margin-top: 10px; font-size: 16px; font-weight: 700; }
.pp-subtitle { margin-top: 2px; font-size: 11.5px; color: rgba(255, 255, 255, 0.62); }

.pp-score { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px; background: rgba(255, 255, 255, 0.03); }
.pp-ring { flex: none; }
.pp-score-body { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; flex: 1; }
.pp-listed { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid rgba(46, 204, 113, 0.3); border-radius: 20px; background: rgba(46, 204, 113, 0.15); color: #2ecc71; font-size: 11px; font-weight: 600; }
.pp-listed i { font-size: 13px; line-height: 1; }
.pp-required { font-size: 12px; color: rgba(255, 255, 255, 0.72); }
.pp-track { display: block; width: 100%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pp-track > span { display: block; height: 100%; border-radius: 2px; background: #2ecc71; }

.pp-tabs { display: flex; gap: 6px; margin-top: 12px; overflow: hidden; white-space: nowrap; }
.pp-tab { flex: none; padding: 6px 11px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 20px; background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); font-size: 11.5px; font-weight: 600; }
.pp-tab > span { opacity: 0.65; }
.pp-tab-active { border-color: rgba(0, 210, 211, 0.4); background: rgba(0, 210, 211, 0.12); color: #00d2d3; }

.pp-docs { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.pp-doc { display: flex; align-items: flex-start; gap: 10px; padding: 10px 11px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 9px; background: rgba(255, 255, 255, 0.03); }
.pp-doc-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.pp-doc-name { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.pp-doc-meta { font-size: 11px; color: rgba(255, 255, 255, 0.6); }
.pp-doc-upload { font-size: 11px; font-weight: 600; color: #00d2d3; }
.pp-doc-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.pp-chip { padding: 3px 8px; border: 1px solid; border-radius: 20px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.pp-days { padding: 1px 7px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); font-size: 10.5px; font-weight: 600; }
.pp-valid .pp-chip { color: #2ecc71; background: rgba(46, 204, 113, 0.15); border-color: rgba(46, 204, 113, 0.3); }
.pp-expiring .pp-chip { color: #f1c40f; background: rgba(241, 196, 15, 0.15); border-color: rgba(241, 196, 15, 0.3); }
.pp-expired .pp-chip { color: #e74c3c; background: rgba(231, 76, 60, 0.15); border-color: rgba(231, 76, 60, 0.3); }
.pp-missing .pp-chip { color: #9fb0c0; background: rgba(102, 119, 136, 0.14); border-color: rgba(102, 119, 136, 0.3); }

.pp-nav { display: flex; justify-content: space-between; margin: 12px -14px 0; padding: 12px 26px 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.4); font-size: 20px; line-height: 1; }
.pp-nav-active { color: #7b5bf5; }

/* Phone and tablet: the copy and its CTA come first; the miniature follows
   as a cropped glimpse that fades out instead of adding a second screen of
   scrolling to the hero. */
@media (max-width: 991px) {
  .pp { max-height: 380px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 68%, transparent); mask-image: linear-gradient(#000 68%, transparent); }
}

/* ── Keyboard focus — Cooper strips outlines (a:focus, .navbar-toggle:focus,
   .btn:focus) and the modal fields use Tailwind's outline-none, so focus
   was invisible everywhere. One ring for every control; pointer clicks
   don't trigger it (:focus-visible). The dialog panel itself takes
   programmatic focus on open and stays unringed. ── */
#wrapper :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
#wrapper [role="dialog"]:focus-visible { outline: none; }

/* ── Auth modals — fade in on mount (see ModalFrame in LandingPage.tsx). ── */
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-fade { animation: modal-fade 0.2s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .modal-fade { animation: none; }
}

/* ── Header / Nav — Cooper's default is a light header; Castor's is
   always-dark (no light/scrolled variant needed for a single-page site) ── */
#header { border-bottom-color: rgba(255, 255, 255, 0.08); }
/* Flat white, no color shift on hover/focus/active — a plain top bar
   reads cleaner than links that flash cyan on interaction or scroll-spy. */
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > li.active > a:focus { color: var(--ice); }
/* navy-deep only makes sense on mobile, where .navbar-collapse is the
   dropdown panel that overlays the page below the header and needs its
   own solid background. On desktop it sits inline in the header row
   (see the `min-width: 768px` block below) — that same background there
   just paints a visibly different-navy box behind the nav links instead
   of blending into the topbar. */
@media (max-width: 767px) {
  .navbar-default .navbar-collapse { background: var(--navy-deep); }
}
.btn-default.btn-white { border-color: var(--ice); color: var(--ice); }
.btn-default.btn-white:hover,
.btn-default.btn-white:focus,
.btn-default.btn-white:active { border-color: var(--cyan); background: var(--cyan); color: var(--navy); }

/* Mobile header row (burger, "Crear Cuenta", "Iniciar Sesión"): flexbox
   with explicit `order`, not float stacking. Floated elements compute to
   `display: block` regardless of their specified display (a floated
   inline-block "blockifies" per spec) and two float:right siblings didn't
   reliably stack edge-to-edge next to each other here — fragile to reason
   about and to extend. Flex + order is explicit and predictable: visual
   order left-to-right is Iniciar Sesión, Crear Cuenta, burger (flush at
   the corner), regardless of DOM order or how many buttons live here. */
@media (max-width: 767px) {
  .navbar-default {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
  .navbar-header { float: none; order: 3; }
  .nav-cta-register { float: none; order: 2; }
  .nav-cta-login { float: none; order: 1; }
}

/* Desktop nav row: Cooper centers its own nav links via `vertical-align:
   middle` on inline-block <li>s plus an asymmetric padding-bottom:20px
   (responsive.css) — tuned for the template's original `.mt-holder` header
   wrapper (extra top/bottom padding around the whole row), which this page
   doesn't use. Without that wrapper the row's height is set by whichever
   sibling is tallest (here, the "Crear Cuenta" pill), and the nav-link
   text — which only carries bottom padding, not real centering — renders
   flush against the top of that row instead of centered in it. Same fix
   as the mobile nav above: real flexbox centering instead of the
   float/padding trick, so it doesn't depend on every sibling happening to
   share one height. */
@media (min-width: 768px) {
  .navbar-default {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .navbar-default .navbar-header { order: 1; }
  .navbar-default .navbar-collapse.collapse {
    display: flex !important;
    align-items: center;
    order: 2;
  }
  .navbar-default .navbar-nav {
    display: flex;
    align-items: center;
  }
  .navbar-default .navbar-nav > li { padding-bottom: 0; }
  .navbar-default .nav-cta-register { order: 3; }
}

/* Cooper hardcodes .hero-area .btn/.btn-info to a fixed 165px — sized for
   its own short English labels ("Learn More", "Download"). Spanish labels
   ("Ver Cómo Funciona") don't fit at that width and the nowrap text
   overflows the pill's visible border. Let the button size to its content
   instead, at every viewport (the vendor rule isn't mobile-only, so neither
   is this fix) — a touch wider than 165px is fine, the pair is centered. */
.hero-area .btn,
.hero-area .btn-info {
  width: auto;
  min-width: 165px;
}

/* ── Footer — already dark via Cooper's own rgba(26,36,45,.96) overlay;
   only the link hover needs the brand accent (colors.css doesn't target
   #footer a explicitly). ── */
#footer a:hover { color: var(--cyan); }

/* ── Hero celestial orbit — translate-only drift (never scale/rotate), so
   the moon and constellation stars never distort in shape or size, only
   position. Two gentle elliptical loops (opposite handedness) shared by
   every element; each gets its own animation-duration/-delay inline (see
   HeroCelestial in LandingPage.tsx) so they drift out of sync instead of
   moving as one block — reads as loosely orbiting, not rigidly animated.
   transform-only keyframes are compositor-driven (GPU), no layout/paint
   cost — doesn't touch the Lighthouse performance budget. */
@keyframes hero-orbit-a {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(1.1px, -0.7px); }
  50%  { transform: translate(0.1px, -1.4px); }
  75%  { transform: translate(-1.0px, -0.5px); }
  100% { transform: translate(0, 0); }
}
@keyframes hero-orbit-b {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-0.9px, 0.8px); }
  50%  { transform: translate(-0.2px, 1.5px); }
  75%  { transform: translate(0.9px, 0.6px); }
  100% { transform: translate(0, 0); }
}
.hero-orbit { animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.hero-orbit-a { animation-name: hero-orbit-a; }
.hero-orbit-b { animation-name: hero-orbit-b; }
@media (prefers-reduced-motion: reduce) {
  .hero-orbit { animation: none; }
}

/* ── Back-to-top — Cooper's own vendor styling, recolored to cyan. ── */
#back-top { background: var(--cyan); color: var(--navy); }

/* .btn-info's fill comes from castor-colors.css (bright cyan); Bootstrap's
   base .btn only sets a generic dark-gray text color that doesn't reliably
   read on that fill — pin it to navy like the rest of the cyan-filled UI.
   On :hover the vendor CSS swaps the fill to #222 (dark) — text needs to
   flip to ice there, not stay navy-on-dark. */
.btn-info { color: var(--navy-deep); }
.btn-info:hover, .btn-info:focus, .btn-info:active { color: var(--ice); }

/* ── Type — two families for the whole page and its auth modals: Oswald
   for h1/h2 (set above), Open Sans for everything else. Cooper's own body
   rules ask for weight 100-300 with 1px tracking, which reads thin and
   spaced-out on navy; body copy is regular weight, no tracking. ── */
#wrapper, #wrapper button:not(.fas), #wrapper input, #wrapper select,
#wrapper h3, #wrapper h4 { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
#wrapper p, #wrapper li { letter-spacing: 0; font-weight: 400; }

/* ── Page sections (below the hero) — own layout rules instead of
   Cooper's per-section classes, so spacing is one rhythm top to bottom. ── */
.hero-area.banner { margin-bottom: 0; }
.hero-area .heading-holder { margin-bottom: 72px; }
.c-section { padding-top: 88px; padding-bottom: 8px; }
.c-section h2, .c-cta h2 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
  margin: 0 0 16px;
  max-width: 22em;
}
.c-section h3 { font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ice); margin: 0 0 8px; }
.c-section p, .c-cta p { font-size: 16px; line-height: 1.6; color: rgba(245, 247, 250, 0.74); margin: 0; }
.c-section .c-lead, .c-cta .c-lead { font-size: 18px; max-width: 38em; }
.c-section ul, .c-section ol { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 40px 48px; }

.benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.benefits li { display: flex; gap: 20px; align-items: flex-start; }
.benefit-icon { flex: none; font-size: 30px; line-height: 1; color: var(--ice); margin-top: 2px; }

.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step-number { font: 700 34px/1 "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgba(245, 247, 250, 0.45); margin-bottom: 14px; }

.refs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.refs li { border-top: 1px solid rgba(245, 247, 250, 0.16); padding-top: 20px; }
.refs h3 { margin-bottom: 2px; }
.c-section .ref-kind { font-size: 14px; color: rgba(245, 247, 250, 0.6); margin-bottom: 10px; }

.c-cta { margin-top: 96px; padding: 80px 0; background: var(--navy-deep); }
.c-cta .hero-actions { margin-top: 32px; }

@media (max-width: 991px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hero-area .heading-holder { margin-bottom: 48px; }
  .c-section { padding-top: 64px; }
  .c-section ul, .c-section ol { gap: 32px; margin-top: 32px; }
  .benefits, .steps, .refs { grid-template-columns: minmax(0, 1fr); }
  .c-cta { margin-top: 64px; padding: 56px 0; }
}

/* ── Footer — Cooper's #828282 on navy misses AA; links get a real tap
   target. Bottom padding on mobile clears the sticky CTA bar. ── */
#footer, #footer p, #footer a { color: rgba(245, 247, 250, 0.72); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; margin: 16px 0 0; font-size: 14px; }
.footer-links a { display: inline-block; padding: 12px 10px; }

/* ── Language picker (LanguageSwitcher.tsx) — a native select dressed as
   a quiet pill: in the nav row on desktop, in the burger menu on a phone,
   and again in the footer. ── */
.lang-select {
  min-height: 40px;
  padding: 0 34px 0 14px;
  border: 1px solid rgba(245, 247, 250, 0.3);
  border-radius: 99px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23F5F7FA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  color: var(--ice);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease-out;
}
.lang-select:hover { border-color: var(--ice); }
.lang-select option { background: var(--navy-deep); color: var(--ice); }
.navbar-default .navbar-nav > li.lang-item { display: flex; align-items: center; padding: 0 0 0 8px; }
.footer-lang { margin: 20px 0 0; }
/* Top bar: the picker is the last item on desktop, after "Crear cuenta".
   The burger-menu copy (.lang-item) is for phones only. */
.nav-lang { display: none; }
@media (min-width: 768px) {
  .navbar-default .nav-lang { display: block; order: 4; margin-left: 12px; }
  .navbar-default .navbar-nav > li.lang-item { display: none; }
}

/* ── Scroll reveal — fades up once when it enters the viewport (the
   .is-visible class is set by the component). ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Desktop miniature (DesktopPreview.tsx) — the app's own colors, like
   the phone miniature. Every size inside is in em and the root font-size
   is 1.25% of the frame's width (12px at 960px), so the screen scales as
   one picture at any width. ── */
.dp {
  margin-top: 40px;
  container-type: inline-size;
  border: 1px solid rgba(245, 247, 250, 0.14);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(41deg, #0c0b11 0%, #1a173e 100%);
  box-shadow: 0 28px 60px -24px rgba(2, 6, 16, 0.9);
  text-align: left;
  user-select: none;
}
.dp-screen {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr);
  aspect-ratio: 16 / 9;
  color: #fff;
  font: 400 12px/1.35 "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.25cqw;
  letter-spacing: 0;
}
.dp-rail { display: flex; flex-direction: column; align-items: center; gap: 2.2em; padding: 1.3em 0; color: rgba(255, 255, 255, 0.4); }
.dp-rail i { font-size: 1.7em; line-height: 1; }
.dp-rail .dp-rail-active { color: #7b5bf5; }
/* Specific on purpose, same reason as .pp-logo. */
.c-section .dp img.dp-logo { display: block; width: 2.2em; height: 2.2em; max-width: none; margin: 0; border-radius: 50%; }
.dp-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 1.4em 1.6em 1.6em 0.8em; }
.dp-top { display: flex; align-items: center; justify-content: flex-end; gap: 0.9em; }
.dp-files { font-size: 0.85em; color: rgba(255, 255, 255, 0.55); }
.dp-download { padding: 0.45em 0.9em; border: 1px solid rgba(52, 152, 219, 0.35); border-radius: 0.5em; background: rgba(52, 152, 219, 0.15); color: #3498db; font-size: 0.9em; font-weight: 600; }
.dp-cols { display: grid; grid-template-columns: 13.5em 21em minmax(0, 1fr); gap: 1.6em; flex: 1; min-height: 0; margin-top: 1.2em; }
.dp-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dp-label { display: block; margin-bottom: 1.1em; color: rgba(255, 255, 255, 0.6); font-size: 0.72em; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.dp-cat { display: flex; align-items: center; gap: 0.7em; padding: 0.6em 0.7em; border-radius: 0.5em; color: rgba(255, 255, 255, 0.85); }
.dp-cat::before, .dp-type::before { content: ""; flex: none; width: 0.5em; height: 0.5em; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.dp-cat-active { background: rgba(255, 255, 255, 0.07); }
.dp-cat-active::before, .dp-type::before { background: #2ecc71; }
.dp-filter { display: block; padding: 0.55em 0.8em; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.5em; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.45); font-size: 0.9em; }
.dp-types { flex: 1; margin-top: 0.6em; padding: 0.4em 0; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.5em; }
.dp-type { display: flex; align-items: center; gap: 0.6em; padding: 0.5em 0.8em; }
.dp-count { margin-top: 0.6em; color: rgba(255, 255, 255, 0.5); font-size: 0.8em; }
.dp-count b { color: #2ecc71; font-weight: 600; }
.dp-drop { display: flex; flex-direction: column; gap: 0.2em; padding: 1.5em; border: 1px dashed rgba(255, 255, 255, 0.2); border-radius: 0.6em; color: rgba(255, 255, 255, 0.55); text-align: center; }
.dp-drop span:first-child { font-size: 1.1em; font-weight: 600; }
.dp-drop span:last-child { color: rgba(255, 255, 255, 0.38); font-size: 0.8em; }
.dp-save { margin-top: 0.7em; padding: 0.7em; border-radius: 0.5em; background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.4); font-size: 0.82em; font-weight: 600; letter-spacing: 0.05em; text-align: center; text-transform: uppercase; }
.dp-docs-label { margin: 1.5em 0 0.8em; }
.dp-row { display: flex; align-items: center; gap: 1em; margin-bottom: 0.45em; padding: 0.7em 0.9em; border-radius: 0.4em; background: rgba(255, 255, 255, 0.04); }
.dp-row-info { display: flex; flex-direction: column; gap: 0.15em; flex: 1; min-width: 0; }
.dp-row-name { font-weight: 600; }
.dp-row-meta { color: rgba(255, 255, 255, 0.55); font-size: 0.8em; }
.dp-badges { display: flex; gap: 0.5em; flex: none; }
.dp-badge { padding: 0.3em 0.6em; border: 1px solid transparent; border-radius: 0.35em; font-size: 0.72em; font-weight: 700; white-space: nowrap; }
.dp-b-valid { color: #2ecc71; background: rgba(46, 204, 113, 0.18); }
.dp-b-expired { color: #e74c3c; background: rgba(231, 76, 60, 0.18); }
.dp-b-verified { color: #2ecc71; background: rgba(46, 204, 113, 0.1); border-color: rgba(46, 204, 113, 0.3); }
.dp-b-pending { color: #b5bdc9; background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); }
.dp-b-ocr { color: #2ecc71; background: rgba(46, 204, 113, 0.08); }
@media (max-width: 767px) {
  .navbar-default .navbar-nav > li.lang-item { justify-content: center; padding: 10px 0 16px; }
  .lang-select { min-height: 44px; }
}

/* ── Back-to-top is a real <button> now (keyboard-operable). ── */
#back-top { border: 0; }

/* ── Mobile sticky CTA — slides up once the hero has scrolled away. ── */
.mobile-cta { display: none; }
@media (max-width: 767px) {
  .mobile-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 5;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(6, 15, 30, 0.96);
    border-top: 1px solid rgba(245, 247, 250, 0.12);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.25s;
  }
  .mobile-cta.active { transform: none; visibility: visible; transition-delay: 0s; }
  .mobile-cta .btn-info { width: 100%; border-radius: 99px; padding: 14px; font-size: 15px; line-height: 20px; font-weight: 600; }
  #back-top { display: none; }
  #footer { padding-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta { transition: none; }
}

/* ── Mobile header row — Cooper pulls the navbar up 4px and sizes its
   buttons at 34px, so the pills were clipped by the top edge and under the
   44px touch minimum. Center the row and give every control 44px. ── */
@media (max-width: 767px) {
  #header .holder { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
  #header .logo { float: none; margin: 0; }
  .navbar-default { margin: 0; padding: 0; }
  .navbar-default .nav-cta-login,
  .navbar-default .nav-cta-register { min-height: 44px; padding: 12px 14px; font-size: 12px; line-height: 16px; margin: 0; }
  .navbar-default .navbar-toggle { width: 44px; height: 44px; margin: 0; }
  .navbar-default .navbar-nav > li > a { padding-top: 14px; padding-bottom: 14px; }
}

/* ── Footer — same deep navy as the rest of the page instead of Cooper's
   slate overlay; a hairline separates it from the CTA band above. ── */
#footer:before { background: var(--navy-deep); }
#footer { border-top: 1px solid rgba(245, 247, 250, 0.1); }