/* Digital Stay feature styles. */

/* Digital Stay — scoped, light-theme only */

.digital-pass-card {

  background: linear-gradient(145deg,#fff 0%,#f7fbff 58%,#fff8ea 100%);
  border: 1px solid #dbe9f4;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 18px 46px rgba(31,74,112,.10);

}

.digital-pass-grid {

  display: grid;
  grid-template-columns: minmax(220px,.72fr) minmax(0,1.28fr);
  gap: 22px;
  align-items: center;

}

.digital-qr-wrap {

  background: #fff;
  border: 1px solid #e1e9ef;
  border-radius: 20px;
  padding: 16px;
  text-align: center;

}

.digital-qr-wrap img {

  width: min(230px,100%);
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 12px;

}

.digital-qr-wrap small {

  display: block;
  color: #6e879d;
  margin-top: 8px;

}

.digital-details {

  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;

}

.digital-detail {

  padding: 12px 14px;
  border: 1px solid #e3edf5;
  border-radius: 14px;
  background: rgba(255,255,255,.8);

}

.digital-detail span {

  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #7890a5;

}

.digital-detail b {

  display: block;
  margin-top: 4px;
  color: #123b61;

}

.digital-scan-shell {

  max-width: 1180px;
  margin: 0 auto;
  padding: 26px;

}

.digital-scan-top {

  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;

}

.digital-scan-layout {

  display: grid;
  grid-template-columns: minmax(320px,.88fr) minmax(0,1.12fr);
  gap: 20px;

}

.digital-scanner {

  position: relative;
  min-height: 390px;
  border-radius: 24px;
  overflow: hidden;
  background: #102f49;
  box-shadow: 0 18px 48px rgba(21,58,87,.16);

}

.digital-scanner video {

  width: 100%;
  height: 390px;
  object-fit: cover;
  display: block;

}

.digital-scan-frame {

  position: absolute;
  inset: 50% auto auto 50%;
  width: 230px;
  height: 230px;
  transform: translate(-50%,-50%);
  border: 3px solid rgba(255,255,255,.92);
  border-radius: 28px;
  box-shadow: 0 0 0 999px rgba(8,31,49,.32);

}

.digital-scan-frame:before,.digital-scan-frame:after {

  content: "";
  position: absolute;
  width: 42px;
  height: 42px;
  border-color: #d8ad5b;

}

.digital-scan-frame:before {

  left: -4px;
  top: -4px;
  border-left: 5px solid #d8ad5b;
  border-top: 5px solid #d8ad5b;
  border-radius: 11px 0 0 0;

}

.digital-scan-frame:after {

  right: -4px;
  bottom: -4px;
  border-right: 5px solid #d8ad5b;
  border-bottom: 5px solid #d8ad5b;
  border-radius: 0 0 11px 0;

}

.digital-scan-actions {

  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;

}

.digital-result-empty {

  min-height: 390px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 36px;
  color: #708aa0;

}

.digital-result-empty strong {

  display: block;
  color: #214d70;
  font-size: 20px;
  margin-bottom: 8px;

}

.digital-guest-head {

  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5edf3;
  margin-bottom: 16px;

}

.digital-guest-head h2 {

  margin: 3px 0 4px;

}

.digital-action-band {

  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin-top: 16px;

}

.digital-action-band button {

  min-height: 52px;

}

.digital-warning {

  padding: 12px 14px;
  background: #fff9ec;
  border: 1px solid #f1deb7;
  border-radius: 13px;
  color: #806126;

}

.digital-ok {

  padding: 12px 14px;
  background: #eefaf4;
  border: 1px solid #cbead9;
  border-radius: 13px;
  color: #277453;

}

.digital-manual-row {

  display: flex;
  gap: 8px;
  margin-top: 12px;

}

.digital-manual-row .input {

  flex: 1;

}

.worker-nav a {

  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 13px;
  min-height: 46px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  color: #4c6e8b;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;

}

.worker-nav a span {

  width: 26px;
  text-align: center;
  color: #3182ce;

}

.worker-nav a:hover,.worker-nav a.active {

  background: #fff;
  color: #174f80;
  box-shadow: 0 8px 22px rgba(37,86,128,.09);

}

@media (max-width:900px) {

  .digital-pass-grid,.digital-scan-layout {

    grid-template-columns: 1fr;

  }

  .digital-details {

    grid-template-columns: 1fr 1fr;

  }

  .digital-scan-shell {

    padding: 18px;

  }

  .digital-scanner,.digital-scanner video {

    min-height: 330px;
    height: 330px;

  }

}

@media (max-width:560px) {

  .digital-details,.digital-action-band {

    grid-template-columns: 1fr;

  }

  .digital-scan-top {

    display: block;

  }

  .digital-scanner,.digital-scanner video {

    min-height: 300px;
    height: 300px;

  }

  .digital-scan-frame {

    width: 205px;
    height: 205px;

  }

  .digital-pass-card {

    padding: 16px;

  }

  .digital-manual-row {

    display: grid;

  }

}

.worker-action-grid a.worker-digital-action {

  appearance: none;
  border: 1px solid #d7e6f2;
  background: #fff;
  border-radius: 16px;
  padding: 15px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 24px rgba(37,86,128,.06);

}

.worker-action-grid a.worker-digital-action:hover {

  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(37,86,128,.10);

}

/* Digital Stay — secure scan session + readiness center */

.digital-security-strip {

  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 9px;
  margin: 14px 0;

}

.digital-security-strip>div {

  border: 1px solid #deebf4;
  background: #f8fbfe;
  border-radius: 14px;
  padding: 10px 12px;

}

.digital-security-strip span {

  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8094a6;

}

.digital-security-strip b {

  display: block;
  margin-top: 3px;
  color: #19486d;
  font-size: 12px;

}

.digital-readiness {

  margin-top: 14px;
  padding: 15px;
  border: 1px solid #ddeaf3;
  border-radius: 18px;
  background: linear-gradient(145deg,#f9fcff,#fffaf0);

}

.digital-readiness-head {

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;

}

.digital-readiness-head b {

  color: #173f61;

}

.digital-readiness-head span {

  font-size: 11px;
  font-weight: 900;
  border-radius: 999px;
  padding: 6px 9px;
  background: #eaf5ee;
  color: #2c7754;

}

.digital-readiness-head span.warn {

  background: #fff4db;
  color: #89631f;

}

.digital-checklist {

  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;

}

.digital-check {

  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 9px 10px;
  border: 1px solid #e4edf4;
  background: #fff;
  border-radius: 12px;

}

.digital-check i {

  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-style: normal;
  background: #eaf6ef;
  color: #248158;
  font-weight: 900;

}

.digital-check.warn i {

  background: #fff2d7;
  color: #9a6a15;

}

.digital-check b {

  display: block;
  color: #204c6d;
  font-size: 12px;

}

.digital-check small {

  display: block;
  color: #8193a2;
  margin-top: 1px;
  line-height: 1.35;

}

.digital-scan-tools {

  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin-top: 10px;

}

.digital-upload-label {

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid #d9e5ef;
  border-radius: 11px;
  background: #fff;
  color: #315f82;
  font-weight: 800;
  cursor: pointer;

}

.digital-upload-label input {

  position: absolute;
  opacity: 0;
  pointer-events: none;

}

.digital-session-timer {

  margin-top: 10px;
  font-size: 11px;
  color: #71889c;
  text-align: center;

}

.digital-session-timer b {

  color: #244f71;

}

.digital-scanner.is-scanning:after {

  content: "Scanning securely…";
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 5;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #214e70;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 6px 18px rgba(13,42,65,.16);

}

.digital-scan-frame {

  animation: digitalScanFrame 2.2s ease-in-out infinite;

}

.digital-scan-frame:after {

  box-shadow: none;

}

.digital-scan-line {

  position: absolute;
  left: 50%;
  top: calc(50% - 105px);
  width: 190px;
  height: 2px;
  transform: translateX(-50%);
  z-index: 4;
  background: linear-gradient(90deg,transparent,#f0c267,transparent);
  box-shadow: 0 0 12px rgba(240,194,103,.8);
  animation: digitalScanLine 2s ease-in-out infinite;
  pointer-events: none;

}

@keyframes digitalScanLine{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,205px)}}

@keyframes digitalScanFrame{50%{box-shadow:0 0 0 999px rgba(8,31,49,.28),0 0 24px rgba(218,174,88,.28)}}

.digital-final-review {

  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e0eaf2;
  background: #fafcff;
  border-radius: 14px;

}

.digital-final-review label {

  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12px;
  color: #355d7b;

}

.digital-final-review input {

  margin-top: 2px;

}

.digital-final-review b {

  display: block;
  color: #173f60;

}

.digital-result-empty {

  border: 1px dashed #d6e5ef;
  border-radius: 18px;
  background: linear-gradient(145deg,#fcfeff,#fffdf8);

}

@media (max-width:760px) {

  .digital-security-strip {

    grid-template-columns: 1fr;

  }

  .digital-checklist {

    grid-template-columns: 1fr;

  }

  .digital-scan-tools {

    grid-template-columns: 1fr;

  }

  .digital-scan-shell {

    padding: 14px;

  }

  .digital-scan-top {

    gap: 10px;

  }

  .digital-scan-top .btn {

    width: 100%;
    margin-top: 10px;

  }

  .digital-scanner,.digital-scanner video {

    height: min(72vw,330px);
    min-height: 260px;

  }

  .digital-scan-frame {

    width: min(62vw,220px);
    height: min(62vw,220px);

  }

  .digital-scan-line {

    width: min(52vw,190px);

  }

}