/* Frontend-only certificate verification portal */

.certificate-verification-page .page-hero::after {
  background: radial-gradient(circle, rgba(80, 224, 255, .25), rgba(123, 101, 255, .14) 43%, transparent 70%);
}

.certificate-verification-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.verification-hero-art {
  position: relative;
  min-height: 345px;
  overflow: hidden;
  border: 1px solid rgba(171, 224, 255, .23);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(26, 77, 124, .64), rgba(22, 28, 79, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 30px 65px rgba(0, 7, 30, .28);
}

.verification-hero-art::before {
  position: absolute;
  inset: 17px;
  border: 1px solid rgba(185, 224, 255, .14);
  border-radius: 18px;
  content: "";
  pointer-events: none;
}

.verification-hero-art::after {
  position: absolute;
  top: -41%;
  right: -22%;
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, rgba(49, 219, 255, .25), transparent 66%);
}

.verification-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(72%, 255px);
  aspect-ratio: 1;
  border: 1px solid rgba(133, 229, 255, .3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.verification-orbit::before,
.verification-orbit::after {
  position: absolute;
  border: 1px solid rgba(161, 128, 255, .38);
  border-radius: inherit;
  content: "";
}

.verification-orbit::before { inset: 16%; transform: rotate(43deg) scaleX(1.45); }
.verification-orbit::after { inset: 33%; border-color: rgba(92, 237, 255, .53); transform: rotate(-34deg) scaleX(1.75); }

.verification-seal {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  width: 88px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(211, 249, 255, .49);
  border-radius: 50%;
  color: #dffbff;
  background: radial-gradient(circle, #2d8fc8, #18386d);
  box-shadow: 0 0 0 12px rgba(67, 215, 255, .1), 0 0 30px rgba(72, 221, 255, .36);
  font-size: 1.55rem;
  transform: translate(-50%, -50%);
}

.verification-signal {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(184, 237, 255, .25);
  border-radius: 10px;
  color: #c8ecff;
  background: rgba(7, 30, 66, .75);
  box-shadow: 0 13px 26px rgba(0, 8, 35, .22);
  font-family: var(--font-mono);
  font-size: .53rem;
  letter-spacing: .08em;
}

.verification-signal i { color: var(--cyan); }
.verification-signal--one { top: 19%; left: 11%; transform: rotate(-6deg); }
.verification-signal--two { right: 10%; bottom: 18%; transform: rotate(7deg); }
.verification-hero-art > p { position: absolute; z-index: 2; right: 27px; bottom: 25px; margin: 0; color: #a9c2df; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; }

.verification-workspace { background: linear-gradient(145deg, #f8fcff, #eaf4ff); }
.verification-layout { display: grid; grid-template-columns: minmax(0, .93fr) minmax(360px, 1.07fr); gap: clamp(28px, 6vw, 92px); align-items: stretch; }

.verification-form-panel,
.verification-result-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #c6ddec;
  border-radius: 21px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 20px 46px rgba(23, 65, 119, .1);
}

.verification-form-panel { padding: clamp(27px, 4.5vw, 46px); }
.verification-form-panel::before {
  position: absolute;
  top: -81px;
  right: -76px;
  width: 247px;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, rgba(70, 210, 255, .17), transparent 67%);
}

.verification-form-panel > * { position: relative; z-index: 1; }
.verification-form-panel h2 { margin: 0 0 11px; color: #163b6b; font-size: clamp(1.8rem, 3.2vw, 2.65rem); }
.verification-form-panel > p { max-width: 530px; margin: 0 0 30px; color: #69809e; font-size: .83rem; line-height: 1.75; }

.verification-form { display: grid; gap: 13px; }
.verification-form label { color: #234e7c; font-size: .76rem; font-weight: 800; }
.verification-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.verification-input-row input { width: 100%; min-height: 54px; padding: 0 16px; border: 1px solid #c6dcec; border-radius: 10px; color: #163963; background: #fbfdff; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .025em; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.verification-input-row input::placeholder { color: #9aadbf; }
.verification-input-row input:focus { border-color: #57c7e9; box-shadow: 0 0 0 4px rgba(66, 206, 241, .13); }
.verification-input-row input.is-invalid { border-color: #e9788a; box-shadow: 0 0 0 4px rgba(236, 104, 126, .12); }
.verification-input-row .button { min-height: 54px; }
.verification-input-help { margin: -2px 0 0; color: #7891af; font-size: .66rem; line-height: 1.6; }
.verification-input-help code { padding: 3px 5px; border: 1px solid #d4e4f1; border-radius: 4px; color: #376fa7; background: #f6fbff; font-family: var(--font-mono); font-size: .62rem; }

.verification-demo-notice { display: flex; align-items: flex-start; gap: 9px; margin: 22px 0 0; padding: 12px 13px; border: 1px solid #cde0ef; border-radius: 10px; color: #6b819e; background: #f7fbff; font-size: .67rem; line-height: 1.6; }
.verification-demo-notice i { flex: 0 0 auto; margin-top: .2em; color: #3985c7; }

.verification-result-panel { display: grid; min-height: 100%; padding: clamp(27px, 4.5vw, 46px); color: #effaff; background: linear-gradient(145deg, #113c6d, #10245b 67%, #1d2865); }
.verification-result-panel::before { position: absolute; inset: 0; content: ""; opacity: .7; background-image: linear-gradient(rgba(156, 218, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(156, 218, 255, .07) 1px, transparent 1px); background-size: 35px 35px; mask-image: linear-gradient(to bottom, transparent, black 15%, black 84%, transparent); }
.verification-result-panel::after { position: absolute; right: -110px; bottom: -107px; width: 310px; aspect-ratio: 1; border-radius: 50%; content: ""; background: radial-gradient(circle, rgba(79, 218, 255, .24), transparent 66%); }
.verification-result-panel > * { position: relative; z-index: 1; }

.verification-result-empty { align-self: center; max-width: 450px; }
.result-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; color: #9cdbf7; font-family: var(--font-mono); font-size: .59rem; letter-spacing: .11em; text-transform: uppercase; }
.result-kicker::before { width: 21px; height: 1px; content: ""; background: currentColor; }
.verification-result-empty h2,
.verification-result-template h2 { margin: 0 0 12px; color: #f2fbff; font-size: clamp(1.75rem, 3vw, 2.65rem); }
.verification-result-empty p,
.verification-result-template > p { margin: 0; color: #aec4df; font-size: .8rem; line-height: 1.75; }
.result-empty-symbol { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 25px; border: 1px solid rgba(179, 235, 255, .34); border-radius: 15px; color: #c6f6ff; background: rgba(104, 213, 255, .1); font-size: 1.13rem; }

.verification-result-template[hidden],
.verification-result-empty[hidden] { display: none; }
.verification-result-template { align-self: center; }
.verification-result-panel.is-result-visible .verification-result-template:not([hidden]),
.verification-result-panel.is-result-visible .verification-result-empty:not([hidden]) { animation: verification-result-reveal .38s cubic-bezier(.2, .7, .2, 1) both; }
.verification-status { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 19px; padding: 7px 9px; border: 1px solid rgba(196, 244, 255, .26); border-radius: 5px; color: #d3fbff; background: rgba(83, 215, 255, .11); font-family: var(--font-mono); font-size: .54rem; letter-spacing: .08em; text-transform: uppercase; }
.verification-status--not-found { color: #ffd5dc; border-color: rgba(255, 172, 187, .25); background: rgba(255, 116, 139, .11); }
.verification-status i { color: var(--cyan); }.verification-status--not-found i { color: #ff9dac; }
.verification-result-panel[data-verification-state="verified"] .verification-status { border-color: rgba(137, 239, 171, .34); color: #dbffe4; background: rgba(102, 221, 136, .14); }.verification-result-panel[data-verification-state="verified"] .verification-status i { color: #8ef1ad; }
.verification-result-panel[data-verification-state="not-found"]::after,
.verification-result-panel[data-verification-state="input-error"]::after { background: radial-gradient(circle, rgba(255, 119, 141, .18), transparent 66%); }

.verified-certificate-badge { display: inline-flex; align-items: center; gap: 10px; margin: 20px 0 2px; padding: 10px 13px; border: 1px solid rgba(140, 239, 174, .31); border-radius: 12px; color: #e1ffea; background: linear-gradient(135deg, rgba(72, 185, 111, .22), rgba(44, 135, 97, .1)); box-shadow: inset 0 1px 0 rgba(233, 255, 240, .08); }
.verified-certificate-badge > i { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: #0c4b2c; background: #9af2b3; font-size: .78rem; }.verified-certificate-badge strong, .verified-certificate-badge small { display: block; }.verified-certificate-badge strong { font-size: .67rem; }.verified-certificate-badge small { margin-top: 2px; color: #b5e9c5; font-family: var(--font-mono); font-size: .48rem; letter-spacing: .06em; text-transform: uppercase; }

.certificate-detail-list { display: grid; gap: 9px; margin: 25px 0 0; }
.certificate-detail-list div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding-bottom: 9px; border-bottom: 1px solid rgba(173, 221, 255, .14); }
.certificate-detail-list dt { color: #91b5d7; font-family: var(--font-mono); font-size: .55rem; letter-spacing: .06em; text-transform: uppercase; }.certificate-detail-list dd { margin: 0; color: #effaff; font-size: .72rem; font-weight: 700; text-align: right; }
.not-found-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }.not-found-actions a { display: inline-flex; align-items: center; gap: 7px; color: #c3f4ff; font-size: .7rem; font-weight: 800; }.not-found-actions a:hover { color: var(--cyan); }

.verification-trust { position: relative; background: #07162d; color: var(--white); }.verification-trust::before { position: absolute; inset: 0; content: ""; opacity: .5; background-image: linear-gradient(rgba(137, 187, 247, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(137, 187, 247, .045) 1px, transparent 1px); background-size: 42px 42px; }
.verification-trust .container { position: relative; z-index: 1; }
.verification-trust .page-heading h2 { color: #f2fbff; }.verification-trust .page-heading h2 span { color: var(--cyan); }.verification-trust .page-heading > p { color: #9bb4d2; }
.verification-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.verification-trust-card { min-height: 222px; padding: 26px; border: 1px solid rgba(169, 218, 255, .16); border-radius: 17px; background: linear-gradient(145deg, rgba(31, 65, 111, .48), rgba(16, 36, 74, .5)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: transform .28s ease, border-color .28s ease, background .28s ease; }
.verification-trust-card:hover { border-color: rgba(101, 222, 255, .48); background: linear-gradient(145deg, rgba(36, 86, 139, .62), rgba(24, 47, 94, .62)); transform: translateY(-6px); }
.verification-trust-icon { display: grid; width: 43px; height: 43px; place-items: center; margin-bottom: 25px; border: 1px solid rgba(144, 229, 255, .22); border-radius: 12px; color: #9ceeff; background: rgba(48, 215, 255, .09); font-size: .95rem; }
.verification-step-number { margin: 0 0 8px; color: #8ddff3; font-family: var(--font-mono); font-size: .54rem; letter-spacing: .07em; text-transform: uppercase; }
.verification-trust-card h3 { margin: 0 0 9px; color: #effaff; font-size: 1rem; }.verification-trust-card p { margin: 0; color: #a7bdd8; font-size: .73rem; line-height: 1.68; }
.verification-trust-card .verification-step-number { margin-bottom: 8px; color: #8ddff3; }
.verification-trust-note { display: flex; align-items: center; gap: 9px; max-width: 720px; margin: 28px 0 0; color: #a9c4df; font-size: .72rem; line-height: 1.65; }.verification-trust-note i { color: var(--cyan); }

@keyframes verification-result-reveal {
  from { opacity: 0; transform: translateY(11px); }
  to { opacity: 1; transform: translateY(0); }
}

.certificate-verification-page .verification-input-row input:focus-visible,
.certificate-verification-page .verification-form .button:focus-visible,
.certificate-verification-page .not-found-actions a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

@media (max-width: 960px) {
  .verification-layout { grid-template-columns: minmax(0, 1fr); gap: 19px; }
  .verification-result-panel { min-height: 370px; }
  .verification-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .verification-hero-art { min-height: 290px; }
  .verification-workspace { padding-top: 78px; padding-bottom: 78px; }
  .verification-trust-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .verification-hero-art { min-height: 255px; }
  .verification-signal { padding: 8px 9px; font-size: .45rem; }.verification-signal--one { left: 7%; }.verification-signal--two { right: 6%; }
  .verification-input-row { grid-template-columns: minmax(0, 1fr); }.verification-input-row .button { width: 100%; }
  .verification-form-panel,
  .verification-result-panel { padding: 27px 21px; }
  .certificate-detail-list div { align-items: flex-start; flex-direction: column; gap: 5px; }.certificate-detail-list dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .verification-trust-card { transition: none; }
  .verification-trust-card:hover { transform: none; }
  .verification-result-panel.is-result-visible .verification-result-template:not([hidden]),
  .verification-result-panel.is-result-visible .verification-result-empty:not([hidden]) { animation: none; }
}