/* === InPrivy theme · VIDI Blue ===========================================
   Fonts: Inter everywhere; Montserrat for headings/logo only
   Host tip: version your URL, e.g. /style/inprivy.css?v=1
========================================================================== */

/* 1) Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600&display=swap");

/* 2) Global font defaults */
body, .content, .btn, .footer__links, p {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

/* Headings + logo accent in Montserrat */
h1, h2, h3, h4, h5, h6, .logo {
  font-family: "Montserrat", "Inter", sans-serif !important;
}

/* 3) Brand tokens */
:root{
  --vidi-navy: #00123D;
  --vidi-deep: #002B8F;
  --vidi-bright: #1F62FF;
  --vidi-sky: #709BFF;
  --vidi-soft: #EBF1FF;
  --vidi-white: #FFFFFF;
  --vidi-green: #97CC04;
  --vidi-orange: #FF6B35;
  --vidi-red: #B80C09;
  --card-radius: 16px;
  --shadow-elev: 0 18px 40px rgba(0,0,0,.18);
}

/* 4) Layout and hero band */
body.page_prelude{
  color: var(--vidi-navy);
  background:
    linear-gradient(to bottom, #EBF1FF 0 42vh, var(--vidi-deep) 42vh 100%) !important;
}

/* Align their top strip to soft background */
.page_prelude .pb-\[15vh\]{
  background-color: var(--vidi-soft) !important;
}

/* 5) Logo */
.logo img{
  max-width: 120px !important;
  height: auto;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.06));
}

/* 6) Card */
.content .max-w-2xl{
  border-radius: var(--card-radius) !important;
  box-shadow: var(--shadow-elev) !important;
  border: 1px solid rgba(0,0,0,.04);
}

/* Lock chip */
.content .absolute span{
  color: var(--vidi-orange) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
}

/* 7) Body copy */
.content p{
  line-height: 1.6;
  font-size: 15.5px;
  color: #1b1f2a;
  margin: 0;
}

/* 8) Primary button */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: .01em;
  color: var(--vidi-deep) !important;
  background-color: var(--vidi-soft) !important; /* beats inline */
  border: 1px solid #d7e3ff !important;
  box-shadow: 0 6px 14px rgba(31,98,255,.12), inset 0 0 0 0 transparent !important;
  transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn:hover,
.btn:focus{
  background-color: #dfe8ff !important;
  color: var(--vidi-navy) !important;
  box-shadow: 0 8px 20px rgba(31,98,255,.18) !important;
}
.btn:active{
  transform: translateY(1px) scale(.99);
}

/* 9) Mobile: full width button for easy tap */
@media (max-width: 480px){
  .action .btn{ width: 100%; }
}

/* 10) Copy toast (if shown by InPrivy) */
#copy__success{
  background: #0f172a;
  color: #fff;
  border-radius: 8px;
  padding: 6px 10px;
}

/* 11) Optional: hide bottom-left links
   Remove this if you want to show "Каталог тематических холстов" */
.footer__links{ display: none !important; }

/* 12) Accessibility focus ring */
a:focus-visible, .btn:focus-visible{
  outline: 3px solid var(--vidi-bright);
  outline-offset: 2px;
}

/* 13) Utility polish to defeat Tailwind shorthands */
.content .rounded-xl{ border-radius: var(--card-radius) !important; }
.content .shadow-2xl{ box-shadow: var(--shadow-elev) !important; }

/* --- Center the main message text ---------------------------------- */
.content .max-w-2xl p {
  text-align: center;
}

/* --- Footer links: centered text-nav, no divider ------------------- */
.footer__links {
  display: flex !important;
  justify-content: center;
  position: fixed;
  /* respect iOS safe area and keep a little air on all devices */
  bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 14px));
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0 16px;
}

/* nuke any previous divider if it slipped in */
.footer__links::before { display: none !important; }

.footer__links ul {
  display: flex;
  gap: 28px;
  padding: 0;
  margin: 0;
  background: none !important;
}

.footer__links li { list-style: none; }

/* Text-style links */
.footer__links a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.70);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-bottom-color .2s ease;
}
.footer__links a:hover { color: #fff; border-bottom-color: var(--vidi-bright); }

/* --- Mobile spacing & layout -------------------------------------- */
@media (max-width: 640px) {
  /* ensure the card has room above the fixed footer */
  .content { padding-bottom: 96px; }
  .footer__links ul {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .footer__links a { font-size: 13px; }
}
