/* CyberCumbria - Scam Text Simulator */
.sms-main {
  max-width: 850px;
  padding: 35px 20px 75px;
  margin: 0 auto;
}
.sms-intro {
  text-align: center;
  margin-bottom: 35px;
}
.sms-intro > p:last-child {
  max-width: 640px;
  margin: 16px auto;
  line-height: 1.8;
}
.sms-kicker, .sms-difficulty {
  color: #80d6f8;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.sms-lab {
  background: #0c2032;
  border: 1px solid #315b76;
  border-radius: 18px;
  padding: clamp(18px, 4vw, 32px);
  margin-bottom: 28px;
}
.sms-status {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  color: #91dcf9;
  font-weight: 800;
  font-size: .8rem;
}
.sms-progress {
  height: 6px;
  border-radius: 20px;
  background: #28465c;
  margin: 17px 0 30px;
  overflow: hidden;
}
#progress-bar {
  height: 100%;
  width: 20%;
  background: #39b9e9;
  transition: width .3s;
}
.sms-lab h2 {
  margin-bottom: 12px;
}
.sms-lab h3 {
  margin: 30px 0 10px;
}
.sms-hint {
  color: #bed0df;
  font-size: .92rem;
  line-height: 1.7;
}
.phone {
  max-width: 440px;
  margin: 30px auto;
  background: #e9eff4;
  color: #183047;
  border: 7px solid #263d50;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 15px 35px #0004;
}
.phone-top {
  background: #d4e0e9;
  padding: 17px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: .8rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.phone-top span:last-child {
  color: #5e7384;
  font-size: .65rem;
}
.phone-body {
  min-height: 170px;
  padding: 25px 15px;
}
.message {
  max-width: 95%;
  width: fit-content;
  background: white;
  border-radius: 15px 15px 15px 4px;
  padding: 17px;
  line-height: 1.75;
  white-space: pre-line;
  overflow-wrap: anywhere;
  box-shadow: 0 2px 8px #0001;
}
.message-time {
  display: block;
  margin-top: 12px;
  color: #647c8b;
  font-size: .72rem;
}
.sms-options {
  display: grid;
  gap: 11px;
  margin: 20px 0 30px;
}
.sms-option {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  border: 1px solid #365d77;
  background: #132e43;
  border-radius: 11px;
  padding: 16px;
  cursor: pointer;
  line-height: 1.5;
}
.sms-option:hover {
  border-color: #65c6ec;
}
.sms-option input {
  margin-top: 3px;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  accent-color: #42bce8;
}
.sms-option:has(input:checked) {
  border-color: #42bce8;
  background: #17405a;
}
.sms-button {
  background: #188cb9;
  color: white;
  border: 1px solid #6ed4f5;
  padding: 15px 23px;
  border-radius: 10px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  margin: 8px 10px 8px 0;
}
.sms-button:hover { background: #20a2d0; }
.sms-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.sms-feedback, .sms-result-item {
  background: #153449;
  border: 1px solid #416d87;
  border-radius: 12px;
  padding: 20px;
  margin: 23px 0;
  line-height: 1.7;
}
.sms-feedback ul { padding-left: 22px; }
.sms-feedback li { margin: 12px 0; }
.sms-feedback strong { color: #a8e5ff; }
.sms-final-score {
  font-size: 2rem;
  font-weight: 800;
  color: #8bdeff;
}
.sms-safety {
  padding: 22px;
  border: 1px solid #31536d;
  border-radius: 12px;
  margin-bottom: 25px;
  line-height: 1.7;
}
.sms-safety p { margin-bottom: 0; }
[hidden] { display: none !important; }
@media (max-width: 500px) {
  .sms-status { font-size: .7rem; }
  .sms-main { padding-left: 13px; padding-right: 13px; }
}