/* ============================================
   DAVIS COUNTY RECORDER - PROPERTY WATCH
   External CSS for MVC Widget
   ============================================ */

.hero-glass {
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  position: relative;
  overflow: hidden
}

.hero-glass::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent)
}

.logo-glow-wrap {
  position: relative;
  display: inline-block
}

.logo-glow-wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 80, 80, .3) 0%, rgba(255, 50, 50, .12) 40%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
  animation: glowPulse 3s ease-in-out infinite
}

.logo-glow-wrap svg {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 20px rgba(255, 100, 100, .4))
}

#pw-pupil-group {
  transition: transform .15s ease-out;
  transform-origin: 78.77px 83.57px
}

#pw-logo-animated.idle #pw-pupil-group {
  animation: eyeLookAround 6s ease-in-out infinite
}

@keyframes eyeLookAround {
  0%,
  100% { transform: translate(0, 0) }
  10% { transform: translate(3px, -1.5px) }
  20% { transform: translate(4px, 0) }
  30% { transform: translate(2px, 3px) }
  45% { transform: translate(-2px, 4px) }
  55% { transform: translate(-4px, 1px) }
  65% { transform: translate(-3px, -2px) }
  75% { transform: translate(0, -4px) }
  85% { transform: translate(2px, -1px) }
}

@keyframes glowPulse {
  0%,
  100% { opacity: .7; transform: translate(-50%, -50%) scale(1) }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) }
}

.hero-title-glow {
  text-shadow: 0 0 40px rgba(255, 100, 100, .35), 0 2px 8px rgba(0, 0, 0, .5)
}

.hero-spotlight::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(255, 60, 60, .12) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none
}

.signup-bg {
  position: relative;
  overflow: hidden
}

.signup-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0
}

.signup-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .763);
  z-index: 1;
  pointer-events: none
}

.signup-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .9;
  background-image: url('/ResourcePackages/Recorder/assets/img/design.svg');
  background-size: cover;
  background-position: center;
  mix-blend-mode: overlay
}

.signup-bg>.container,
.signup-bg>.sf_colsIn>.sf_colsIn {
  position: relative;
  z-index: 3
}

.app-wrapper {
  position: relative;
  z-index: 2;
  scroll-snap-margin-top: 100px;
  scroll-margin-top: 100px;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4), 0 24px 80px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .05) inset
}

.app-header {
  background: rgba(168, 16, 50, .35);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding: 1.25rem 2rem
}

.app-header-brand {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .02em
}

.app-body {
  padding: 2rem
}

.app-wrapper .material-symbols-outlined {
  vertical-align: middle
}

.app-wrapper .input-group.is-valid > .input-group-text {
  border-color: #198754 !important;
  color: #198754 !important;
  transition: border-color .2s ease, color .2s ease
}

.app-wrapper .input-group.is-valid > .input-group-text .material-symbols-outlined {
  font-variation-settings: 'wght' 700
}

.app-wrapper .input-group.is-invalid > .input-group-text {
  border-color: #dc3545 !important;
  color: #dc3545 !important;
  transition: border-color .2s ease, color .2s ease
}

.pw-stepper {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 1.5rem 2rem .5rem;
  position: relative
}

.pw-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 1
}

.pw-step:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 17px;
  right: calc(50% + 20px);
  width: calc(100% - 40px);
  height: 2px;
  background: rgba(255, 255, 255, .1);
  z-index: 0
}

.pw-step:not(:first-child).active::before,
.pw-step:not(:first-child).completed::before {
  background: #198754
}

.pw-step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  border: 2px solid rgba(255, 255, 255, .15);
  background: transparent;
  color: rgba(255, 255, 255, .3);
  transition: all .3s ease;
  position: relative;
  z-index: 2
}

.pw-step.active .pw-step-circle {
  border-color: #6366f1;
  background: #6366f1;
  color: #fff;
  box-shadow: 0 0 16px rgba(99, 102, 241, .4)
}

.pw-step.completed .pw-step-circle {
  border-color: #198754;
  background: #198754;
  color: #fff;
  box-shadow: 0 0 12px rgba(25, 135, 84, .4)
}

.pw-step-label {
  font-size: 12px;
  margin-top: 8px;
  color: rgba(255, 255, 255, .3);
  font-weight: 500;
  transition: color .3s ease
}

.pw-step.active .pw-step-label {
  color: rgba(255, 255, 255, .9)
}

.pw-step.completed .pw-step-label {
  color: rgba(255, 255, 255, .6)
}

.pw-section-enter {
  animation: sectionFadeIn .4s ease-out forwards
}

@keyframes sectionFadeIn {
  from { opacity: 0; transform: translateY(16px) }
  to { opacity: 1; transform: translateY(0) }
}


/* ============================================
   PROPERTY WATCH CONFIRMATION PAGE
   ============================================ */

@keyframes pwFadeIn { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }
@keyframes pwSpin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
@keyframes pwPulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }

.pw-fade-in { animation: pwFadeIn .5s ease-out forwards }
.pw-spinner { animation: pwSpin 1s linear infinite }
.pw-pulse { animation: pwPulse 2s ease-in-out infinite }

.pw-confirm-icon {
  width: 100px; height: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 48px;
  border: 2px solid rgba(255,255,255,.1);
}
.pw-confirm-icon .material-symbols-outlined { font-size: 48px; }
.pw-confirm-icon-loading { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }
.pw-confirm-icon-success { background: rgba(74,222,128,.15); border-color: rgba(74,222,128,.3); color: #4ade80; box-shadow: 0 0 30px rgba(74,222,128,.2); }
.pw-confirm-icon-info { background: rgba(96,165,250,.15); border-color: rgba(96,165,250,.3); color: #60a5fa; box-shadow: 0 0 30px rgba(96,165,250,.2); }
.pw-confirm-icon-warning { background: rgba(251,191,36,.15); border-color: rgba(251,191,36,.3); color: #fbbf24; box-shadow: 0 0 30px rgba(251,191,36,.2); }
.pw-confirm-icon-danger { background: rgba(248,113,113,.15); border-color: rgba(248,113,113,.3); color: #f87171; box-shadow: 0 0 30px rgba(248,113,113,.2); }

.pw-confirm-alert {
  display: flex; align-items: center;
  padding: 1rem 1.25rem; border-radius: 12px;
  font-size: .925rem; line-height: 1.5; text-align: left;
}
.pw-confirm-alert-success { background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.2); color: rgba(74,222,128,.9); }
.pw-confirm-alert-info { background: rgba(96,165,250,.1); border: 1px solid rgba(96,165,250,.2); color: rgba(96,165,250,.9); }
.pw-confirm-alert-warning { background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.2); color: rgba(251,191,36,.9); }
.pw-confirm-alert-danger { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.2); color: rgba(248,113,113,.9); }

.app-body .btn-outline-light { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.9); }
.app-body .btn-outline-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }