.ssb-quiz-wrap{ display:flex; justify-content:center; padding:24px; }
.ssb-quiz{ width:720px; background:#ffffff; border: 2px solid #4b8d7f47; padding:22px; font-family:Arial, sans-serif; }
.ssb-topline{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.ssb-step-meta{ display:flex; align-items:center; gap:12px; }
.ssb-step-icon{ width:26px; height:48px; object-fit:cover; border-radius:8px; display:inline-block; }
.ssb-step-title{ font-weight:700; font-size: 0.8rem; color: #4b8d7f; }
.ssb-step-counter{ color:#6b6770; font-size: 0.8rem; }

.ssb-progress-wrap{ margin-bottom:18px; }
.ssb-progress-bg{ background:#eee; height:18px; border-radius:8px; overflow:hidden; }
.ssb-progress-bar{ width:0%; height:100%; background: #4b8d7f; transition: width 0.45s ease; }

.ssb-quiz-content{ position:relative; overflow:hidden; min-height:160px; }
.ssb-step{ display:none; opacity:0; transform:translateX(30px); transition: all 0.36s ease; position:relative; }
.ssb-step.active{ display:block; opacity:1; transform:translateX(0); }

.ssb-question{ font-size:20px; margin-bottom:16px; color:#33262a; }
.ssb-options{ display:flex; flex-direction:column; gap:12px; }

/* Card style and custom radio */
.ssb-option{ font-size: 0.8rem; padding: 10px 16px; border-radius: 14px; background:#fff; border:1px solid #f2e6ea; cursor:pointer; transition: all 0.22s ease; display:flex; align-items:center; gap:12px; position:relative; }
.ssb-option:hover{  border: 1px solid #4b8d7f; background-color: #f6faf9; transform:translateY(-4px); box-shadow:0 12px 30px rgb(75 141 127 / 6%); }
.ssb-option.selected{ background:linear-gradient(90deg,#f6faf9,#fff); box-shadow:0 12px 30px rgb(75 141 127 / 12%); }

.ssb-option input[type=radio]{ appearance:none; -webkit-appearance:none; width:18px; height:18px; border-radius:50%; border:2px solid #4b8d7f; background:transparent; position:relative; cursor:pointer; }
.ssb-option input[type=radio]:after{ content:''; display:block; width:10px; height:10px; border-radius:50%; background:#4b8d7f; margin:2.2px; transform:scale(0); transition: transform 0.18s ease; }
.ssb-option input[type=radio]:checked:after{ transform:scale(1); }
.ssb-opt-label{ flex:1; }

.ssb-static-note{ display:flex; gap:10px; align-items:center; margin-top:12px; padding:10px; background:#f6faf9; border-radius:16px; 
/* 	border:1px solid #f0e9ef; */
}
.ssb-note-icon{ width:26px; height:28px; object-fit:cover; }
.ssb-static-note img { width: 16px; }
.ssb-note-text{ color: #4b8d7f; font-size: 14px; font-style: italic; }

/* Result */
.ssb-result{ display:none; text-align:center; }
.ssb-result-title{ font-size:32px; margin-bottom:20px; color:#3a2b30; }
.ssb-result-score {
    font-size: 56px;
    color: #4b8d7f;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 10px !important;
}
.ssb-result-progress-wrap{ margin-bottom:10px; padding: 0 80px; }
.ssb-result-progress-bg{ background:#eee; height:18px; border-radius:8px; overflow:hidden; }
.ssb-result-progress-bar{ width:0%; height:100%; background:#4b8d7f; transition: width 1.4s ease-in-out; }

.ssb-result-summary {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ssb-result-card {
    display: flex;
	align-items: flex-start;
    gap: 14px;
    background: #f6faf9;
    border-radius: 10px;
    padding: 15px 18px;
    margin-bottom: 15px;
    transition: transform 0.2s ease;
}

.ssb-result-card:hover {
    transform: translateY(-2px);
}

.ssb-result-card-content {
    text-align: left;
}

.ssb-result-card-content p {
	margin: 0px;
    font-size: 14px;
}

.ssb-your-response {
    color: #4b8d7f;
    font-size: 12px;
}

.ssb-result-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.ssb-result-card-header img.ssb-result-step-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.ssb-result-card-header h5 {
    margin: 0;
}

.ssb-result-card-body p {
    margin: 0;
    color: #996677;
    font-weight: 500;
	font-size: 0.8rem;
    text-align: left;
    margin-left: 40px;
}

.ssb-result-content h4 {
    text-align: left;
}

.ssb-result-buttons{ display:flex; gap:10px; justify-content:center; margin-top:14px; }
.ssb-result-btn{ padding: 16px 18px; line-height: normal; flex-grow: 1; background:#4b8d7f; color:#fff; font-size: 0.7rem; text-decoration:none !important; }
.ssb-result-btn:hover{ background-color: #4b8d7f; color:#fff; }

/* Try Again button style: light pink background, pink border & text */
.ssb-try-again-styled{ background:#f6faf9; border:1px solid #4b8d7f; color:#4b8d7f; padding: 16px 18px; line-height: normal; cursor:pointer; }
.ssb-try-again-styled:hover{ box-shadow:0 10px 20px rgba(233,30,99,0.06); }

/* pulse effect */
@keyframes ssb_pulse {
  0% { box-shadow: 0 0 0 0 rgba(233,30,99,0.35); }
  70% { box-shadow: 0 0 0 12px rgba(233,30,99,0); }
  100% { box-shadow: 0 0 0 0 rgba(233,30,99,0); }
}