/* Apple-like glass UI overrides (scoped) */
.vision-test-container{
  /* Map plugin design tokens to landing style */
  --primary:#0071e3;
  --primary2:#4aa3ff;
  --primary-hover:#005fc8;

  --vtp-text:#1d1d1f;
  --vtp-muted:rgba(29,29,31,.72);
  --vtp-border:rgba(210,210,215,.55);

  --vtp-glass:rgba(255,255,255,.72);
  --vtp-glassStrong:rgba(255,255,255,.80);

  --vtp-shadowSoft:0 14px 34px rgba(0,0,0,.08);
  --vtp-shadow:0 22px 56px rgba(0,0,0,.12);

  --vtp-r-lg:28px;
  --vtp-r-md:20px;
  --vtp-r-sm:16px;

  position:relative;
  overflow:hidden;
  border-radius: var(--vtp-r-lg);
  background: var(--vtp-glassStrong);
  border: 1px solid var(--vtp-border);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow: var(--vtp-shadowSoft);
}

/* Inner aurora (safe: inside container only) */
.vision-test-container::before{
  content:"";
  position:absolute;
  inset:-70%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 30% 10%,
      rgba(0,0,0,0),
      rgba(0,0,0,0)
    ),
    radial-gradient(900px 520px at 30% 10%,
      color-mix(in srgb, var(--primary) 35%, transparent),
      transparent 62%
    ),
    radial-gradient(900px 520px at 80% 70%,
      color-mix(in srgb, var(--primary2) 28%, transparent),
      transparent 64%
    );
  opacity:.95;
  transform:translate3d(0,0,0);
}

/* Typography */
.vision-test-container h1,
.vision-test-container h2,
.vision-test-container h3{
  letter-spacing:-0.02em;
}
.vision-test-container .subtitle,
.vision-test-container p,
.vision-test-container label{
  color: var(--vtp-muted);
}

/* Cards / surfaces inside */
.vision-test-container .content,
.vision-test-container .tab-content,
.vision-test-container .test-content{
  border-radius: var(--vtp-r-md);
}

/* Language switcher */
.vision-test-container .vtp-lang-switcher{
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(210,210,215,.60) !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
.vision-test-container .vtp-lang-switcher select{
  border:none !important;
  background: transparent !important;
  font-weight: 900;
  color: rgba(29,29,31,.78);
  outline:none !important;
}
.vision-test-container .vtp-lang-switcher button,
.vision-test-container .vtp-lang-switcher .apply-btn{
  margin-left: 8px;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 78%, #000 22%)) !important;
  box-shadow: 0 14px 26px color-mix(in srgb, var(--primary) 18%, transparent) !important;
  cursor:pointer;
}
.vision-test-container .vtp-lang-switcher button:hover,
.vision-test-container .vtp-lang-switcher .apply-btn:hover{
  filter: brightness(.98);
}

/* Buttons: start/next/copy */
.vision-test-container .btn-start,
.vision-test-container .btn-next,
.vision-test-container .btn-copy{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  border:1px solid transparent;
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease, background .2s ease;
  user-select:none;
}
.vision-test-container .btn-start,
.vision-test-container .btn-next{
  color:#fff !important;
  background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 78%, #000 22%)) !important;
  box-shadow:0 14px 26px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}
.vision-test-container .btn-start:hover,
.vision-test-container .btn-next:hover{
  filter:brightness(.98);
  box-shadow:0 16px 30px color-mix(in srgb, var(--primary) 22%, transparent) !important;
}
.vision-test-container .btn-start:active,
.vision-test-container .btn-next:active,
.vision-test-container .btn-copy:active{
  transform:translateY(1px);
}
.vision-test-container .btn-copy{
  background: rgba(255,255,255,.42) !important;
  color: var(--primary) !important;
  border-color: color-mix(in srgb, var(--primary) 35%, transparent) !important;
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
}
.vision-test-container .btn-copy:hover{
  background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
}

/* Inputs */
.vision-test-container input[type="text"],
.vision-test-container input[type="email"],
.vision-test-container select,
.vision-test-container textarea{
  border-radius: 16px !important;
  border: 1px solid rgba(210,210,215,.80) !important;
  background: rgba(255,255,255,.86) !important;
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
}
.vision-test-container input:focus,
.vision-test-container select:focus,
.vision-test-container textarea:focus{
  border-color: color-mix(in srgb, var(--primary) 60%, transparent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent) !important;
  outline:none !important;
}

/* Progress bar */
.vision-test-container .progress-bar{
  border-radius: 999px !important;
  overflow:hidden;
  border:1px solid rgba(210,210,215,.60);
  background: rgba(29,29,31,.06);
}
.vision-test-container .progress-steps .step-circle{
  background: rgba(29,29,31,.10);
  border: 1px solid rgba(210,210,215,.65);
}
.vision-test-container .progress-steps .step.active .step-circle{
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  box-shadow:0 10px 26px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* Modals */
.vision-test-container .modal-content{
  border-radius: 24px !important;
  background: rgba(255,255,255,.80) !important;
  border: 1px solid rgba(210,210,215,.60) !important;
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow: 0 34px 110px color-mix(in srgb, var(--primary) 22%, transparent), 0 12px 44px rgba(0,0,0,.18);
}
.vision-test-container .modal-content .close{
  color: rgba(29,29,31,.55) !important;
}


/* Modal overlay safety: always overlay above the test */
#myModal.modal, #fatalModal.modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
}
#myModal .modal-content, #fatalModal .fatalModal-modal-content{
  position: relative;
  z-index: 1000000;
}



/* === UI refinements requested === */

/* Progress bar layout: steps centered, language selector on the right */
.vision-test-container .progress-bar{
  position: relative;
}
.vision-test-container .progress-steps{
  max-width: 180px; /* keep dots centered */
}
.vision-test-container .vtp-lang-switcher{
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.vision-test-container .vtp-lang-switcher__select{
  min-width: 92px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(210,210,215,.70);
  background: rgba(255,255,255,.62);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  font-weight: 900;
  font-size: 13px;
  color: rgba(29,29,31,.78);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  outline: none;
}

/* Completed steps should be colored too */
.vision-test-container .progress-steps .step.completed .step-circle{
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  box-shadow:0 10px 26px color-mix(in srgb, var(--primary) 14%, transparent);
}
.vision-test-container .progress-steps .step.completed .step-line{
  background: linear-gradient(90deg, var(--primary), var(--primary2));
}

/* Bottom bar (signature centered + language switcher bottom-right) */
body.vision-test-page body.vision-test-page .vtp-bottom-bar .vtp-signature{
  flex:1;
  text-align:center;
  margin:0;
}
body.vision-test-page .vtp-bottom-bar .vtp-signature a{
  display:inline-block;
  font-size:12px !important;
  font-weight:800;
  letter-spacing:-.01em;
  color:rgba(29,29,31,.55) !important;
  text-decoration:none !important;
  white-space:nowrap;
}
body.vision-test-page .vtp-bottom-bar .vtp-signature a:hover{
  color:rgba(29,29,31,.78) !important;
}
body.vision-test-page .vtp-bottom-bar .vtp-lang-switcher{
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
}
.vtp-bottom-bar {
	display: flex;
}
/* liquid glass look for footer switcher */
body.vision-test-page .vtp-bottom-bar .vtp-lang-switcher__select{
  min-width:86px;
  padding:10px 38px 10px 14px;
  border-radius:999px !important;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(210,210,215,.70);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 12px 28px color-mix(in srgb, var(--primary) 14%, transparent), 0 8px 18px rgba(0,0,0,.08);
}
body.vision-test-page .vtp-bottom-bar .vtp-lang-switcher__select:focus{
  outline:none;
  border-color:color-mix(in srgb, var(--primary) 40%, rgba(210,210,215,.70));
  box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent), 0 12px 28px color-mix(in srgb, var(--primary) 14%, transparent), 0 8px 18px rgba(0,0,0,.08);
}
body.vision-test-page .vtp-bottom-bar .vtp-lang-switcher__apply{
  padding:10px 16px;
  border-radius:999px !important;
  border:1px solid transparent;
  background:linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 82%, #000 18%));
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 14px 26px color-mix(in srgb, var(--primary) 18%, transparent);
  transition:filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
body.vision-test-page .vtp-bottom-bar .vtp-lang-switcher__apply:hover{
  filter:brightness(.98);
  box-shadow:0 16px 30px color-mix(in srgb, var(--primary) 22%, transparent);
}
body.vision-test-page .vtp-bottom-bar .vtp-lang-switcher__apply:active{
  transform:translateY(1px);
}
@media (max-width:560px){
  body.vision-test-page body.vision-test-page .vtp-bottom-bar .vtp-lang-switcher{position:static;transform:none;margin:10px auto 0;display:flex;justify-content:center;}
}

/* Add stronger glass + brand-tinted shadow on the whole test */
.vision-test-container{
  background: rgba(255,255,255,.66) !important;
  border: 1px solid rgba(210,210,215,.58) !important;
  backdrop-filter: saturate(200%) blur(22px) !important;
  -webkit-backdrop-filter: saturate(200%) blur(22px) !important;
  box-shadow:
    0 34px 110px color-mix(in srgb, var(--primary) 26%, transparent),
    0 12px 44px rgba(0,0,0,.16) !important;
}

/* Make all buttons consistently pill-rounded (match main bar radius) */
.vision-test-container button,
.vision-test-container .btn,
.vision-test-container input[type="button"],
.vision-test-container input[type="submit"]{
  border-radius: 999px !important;
}

/* Modal primary buttons should follow brand color */
#myModal.modal .modal-content button,
#fatalModal.modal .modal-content button,
#myModal.modal .modal-content .btn,
#fatalModal.modal .modal-content .btn,
#myModal.modal .modal-content input[type="button"],
#fatalModal.modal .modal-content input[type="button"],
#myModal.modal .modal-content input[type="submit"],
#fatalModal.modal .modal-content input[type="submit"]{
  background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 78%, #000 22%)) !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  box-shadow: 0 14px 26px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}
#myModal.modal .modal-content button:hover,
#fatalModal.modal .modal-content button:hover{
  filter: brightness(.98);
}

.vision-test-container > *{position:relative;z-index:1;}


/* --- Optika Prima requested footer alignment --- */
.vtp-signature {
  margin: 0 28% 0 42%;
}

/* Legal modal fallback (ensure hidden + overlay) */
.vtp-legal-modal{position:fixed;inset:0;z-index:10000;display:none}
.vtp-legal-modal.is-open{display:block}
.vtp-legal-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.vtp-legal-modal__panel{position:relative;max-width:640px;width:calc(100% - 32px);margin:8vh auto 0;background:#fff;border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.25);padding:18px 18px 16px}
.vtp-legal-modal__title{margin:0 34px 10px 0;font-size:18px}
.vtp-legal-modal__body{font-size:14px;line-height:1.55;color:rgba(29,29,31,.82);max-height:62vh;overflow:auto;padding-right:4px}
.vtp-legal-modal__close{position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:rgba(29,29,31,.55)}
body.vtp-modal-open{overflow:hidden}

/* --- Legal link polish --- */
body.vision-test-page a.legal-link{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  color:rgba(29,29,31,.45);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .12s ease, border-color .12s ease, opacity .12s ease;
}
body.vision-test-page a.legal-link:hover{
  color:rgba(29,29,31,.7);
  border-bottom-color:rgba(29,29,31,.22);
}

/* --- Test duration text --- */
body.vision-test-page .test-duration-text{
  font-weight:600;
  font-size:14px;
  color:rgba(29,29,31,.78);
  margin-bottom:10px;
}

/* --- Signature style (as requested) --- */
.vtp-signature a{
  display:inline-block;
  font-size:12px;
  font-weight:800;
  letter-spacing:-0.01em;
  color:rgba(29,29,31,.55);
  text-decoration:none;
}
@media (max-width: 767px){
  .vtp-signature{
    margin: 0 15% 0 38%;
  }
}

/* --- Legal modal: short fade in/out --- */
#vtpLegalModal.vtp-legal-modal{
  opacity:0;
  transition:opacity .12s ease;
}
#vtpLegalModal.vtp-legal-modal .vtp-legal-modal__panel{
  transform:scale(.98);
  transition:transform .12s ease;
}
#vtpLegalModal.vtp-legal-modal.is-open{
  opacity:1;
}
#vtpLegalModal.vtp-legal-modal.is-open .vtp-legal-modal__panel{
  transform:scale(1);
}
.vtp-language-switcher {
	font-size: 10px;
}

@media (max-width: 767px) { 
	.vtp-signature{ margin: 0 5% 0 35%; } 
	.vtp-signature a{ 
		font-size:10px; 
	} 
	.vtp-language-switcher, .vtp-language-switcher select{ 
		font-size:10px; 
	} 
}


#finalModal {
  position: fixed;
  z-index: 9999;
}