@import "./settings-app-hub.css";
@import "./_cd-warehouse-photos.css";

/* cd-cro: shared conversion blocks (hero risk line, USP strip, proof bar, customer quote, FAQ, closing CTA) */
.cd-cro-risk { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .95rem; color: #1a1d21; }
.cd-cro-risk i { color: #16a34a; }
.cd-cro-risk .cd-cro-risk__sep { color: rgba(0,0,0,.25); }

.cd-cro-usp { background: #fff; }
.cd-cro-usp__item { padding: .75rem .5rem; }
.cd-cro-usp__num { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; color: #1a1d21; line-height: 1.1; }
.cd-cro-usp__num--text { font-size: 1.5rem; padding: .25rem 0; }
.cd-cro-usp__label { font-size: .85rem; color: #6c757d; font-weight: 500; }

.cd-cro-proof { background: #f7f9fc; }
.cd-cro-proof__item { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.cd-cro-proof__item strong { font-size: 1.35rem; font-weight: 700; color: #1a1d21; }
.cd-cro-proof__item span { font-size: .85rem; color: #6c757d; }
.cd-cro-proof__logos { display: flex; align-items: center; justify-content: center; gap: 1.25rem; flex-wrap: wrap; }
.cd-cro-proof__logos img { height: 30px; width: auto; opacity: .85; }
.cd-cro-proof__logos span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #6c757d; }

.cd-cro-quote { background: #fff; }
.cd-cro-quote__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 .25rem 1rem rgba(0,40,100,.12); }
.cd-cro-quote__text { font-size: 1.3rem; line-height: 1.5; font-weight: 500; color: #1a1d21; max-width: 46rem; margin: 0 auto 1rem; }
.cd-cro-quote__meta { color: #6c757d; font-size: .95rem; }

.cd-cro-faq { background: #f7f9fc; }
.cd-cro-faq .accordion-item { border: 1px solid rgba(0,0,0,.06); border-radius: .75rem !important; overflow: hidden; margin-bottom: .65rem; background: #fff; }
.cd-cro-faq .accordion-button { font-weight: 600; color: #1a1d21; }
.cd-cro-faq .accordion-button:not(.collapsed) { background: #f0f7ff; color: #0058b0; box-shadow: none; }
.cd-cro-faq .accordion-button:focus { box-shadow: none; border-color: rgba(0,113,227,.25); }

.cd-cro-closing__band { background: linear-gradient(120deg, #0071e3, #0058b0); color: #fff; }
.cd-cro-closing__sub { opacity: .92; max-width: 42rem; margin-left: auto; margin-right: auto; }
.cd-cro-closing__risk { opacity: .85; }



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

.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;
}

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

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

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

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

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

.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);
}

.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);
}

.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);
}

.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);
}

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

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

.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);
}

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

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

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

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

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

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

.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;
}

.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);
}