@import "./settings-app-hub.css";

.app-barcode-scanning-lp .cd-app-scan-preview {
  display: flex;
  justify-content: center;
}

.app-barcode-scanning-lp .cd-app-scan-preview__phone {
  width: min(100%, 19rem);
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 2rem;
  background: #fff;
  box-shadow:
    0 1.6rem 3.6rem rgba(0, 40, 100, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;
}

.app-barcode-scanning-lp .cd-app-scan-preview__status,
.app-barcode-scanning-lp .cd-app-scan-preview__phone header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.72rem 1rem;
}

.app-barcode-scanning-lp .cd-app-scan-preview__status {
  color: #111827;
  font-size: 0.72rem;
  font-weight: 900;
}

.app-barcode-scanning-lp .cd-app-scan-preview__phone header {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.app-barcode-scanning-lp .cd-app-scan-preview__phone header strong {
  color: #111827;
  font-size: 0.88rem;
}

.app-barcode-scanning-lp .cd-app-scan-preview__phone header i {
  color: #0071e3;
  font-size: 1.25rem;
}

.app-barcode-scanning-lp .cd-app-scan-preview__camera {
  position: relative;
  min-height: 31rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 42% 26%, rgba(181, 130, 55, 0.48), transparent 9rem),
    radial-gradient(circle at 70% 80%, rgba(15, 23, 42, 0.55), transparent 10rem),
    linear-gradient(145deg, #8f6b3d, #2c2d32 68%, #12151c);
}

.app-barcode-scanning-lp .cd-app-scan-preview__box {
  position: absolute;
  left: 18%;
  top: 19%;
  width: 54%;
  height: 52%;
  border-radius: 1rem;
  background:
    linear-gradient(145deg, rgba(218, 175, 112, 0.92), rgba(154, 104, 54, 0.88)),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, 0.06) 18px 20px);
  transform: rotate(-10deg);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.28);
}

.app-barcode-scanning-lp .cd-app-scan-preview__label {
  position: absolute;
  left: 23%;
  top: 44%;
  width: 48%;
  padding: 0.55rem;
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
  transform: rotate(-2deg);
  box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.18);
}

.app-barcode-scanning-lp .cd-app-scan-preview__label span {
  display: block;
  height: 0.42rem;
  margin-bottom: 0.3rem;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #111827 0 2px, transparent 2px 5px);
}

.app-barcode-scanning-lp .cd-app-scan-preview__label strong,
.app-barcode-scanning-lp .cd-app-scan-preview__label em {
  display: block;
  font-size: 0.48rem;
  line-height: 1.25;
}

.app-barcode-scanning-lp .cd-app-scan-preview__label em {
  color: #64748b;
  font-style: normal;
}

.app-barcode-scanning-lp .cd-app-scan-preview__focus {
  position: absolute;
  left: 18%;
  right: 12%;
  top: 42%;
  height: 6rem;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 0.7rem;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.1);
}

.app-barcode-scanning-lp .cd-app-scan-preview__focus i {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-color: #fff;
  border-style: solid;
}

.app-barcode-scanning-lp .cd-app-scan-preview__focus i:nth-child(1) {
  left: -1px;
  top: -1px;
  border-width: 3px 0 0 3px;
}

.app-barcode-scanning-lp .cd-app-scan-preview__focus i:nth-child(2) {
  right: -1px;
  top: -1px;
  border-width: 3px 3px 0 0;
}

.app-barcode-scanning-lp .cd-app-scan-preview__focus i:nth-child(3) {
  left: -1px;
  bottom: -1px;
  border-width: 0 0 3px 3px;
}

.app-barcode-scanning-lp .cd-app-scan-preview__focus i:nth-child(4) {
  right: -1px;
  bottom: -1px;
  border-width: 0 3px 3px 0;
}

.app-barcode-scanning-lp .cd-app-scan-preview__tools {
  position: absolute;
  right: 1rem;
  top: 5rem;
  display: flex;
  gap: 0.55rem;
}

.app-barcode-scanning-lp .cd-app-scan-preview__tools span {
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
}

.app-barcode-scanning-lp .cd-app-scan-preview__success {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #178542;
  font-size: 0.72rem;
  font-weight: 900;
  transform: translateX(-50%);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.22);
}