:root {
    --red:    #eb2627;
    --red-dk: #c41f20;
    --black:  #1a1a1a;
    --gray-50:  #faf7f4;
    --gray-100: #f0ece6;
    --gray-200: #e0e0e0;
    --gray-400: #a0a0a0;
    --gray-600: #666666;
    --radius: 4px;
}

.cd-wrapper { max-width: 720px; margin: 0 auto; padding: 40px 20px 80px; }

.cd-header { text-align: center; margin-bottom: 24px; }
.cd-header h1 { font-size: 1.8rem; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.cd-header p { color: var(--gray-600); font-size: .95rem; }


.cd-context-banner {
    display: flex; align-items: center; gap: 12px; background: #fff5f5; border: 1.5px solid #fecaca;
    border-radius: var(--radius); padding: 12px 16px; margin-bottom: 24px; font-size: .85rem; color: var(--black);
}
.cd-context-banner i { color: var(--red); font-size: 1.1rem; }
.cd-context-banner strong { color: var(--red); }

.cd-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); }

.cd-section { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--gray-100); }
.cd-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.cd-section-title { font-size: 1.1rem; font-weight: 700; color: var(--black); margin-bottom: 4px; }
.cd-section-sub   {color: var(--gray-400); margin-bottom: 18px; }

.cd-label { display: block; margin-bottom: 6px; }
.cd-input, .cd-select, .cd-textarea {
    width: 100%; border: 1.5px solid var(--gray-200); border-radius: var(--radius);
    padding: 11px 14px; outline: none; font-family: inherit; transition: border-color .15s;
}
.cd-input:focus, .cd-select:focus, .cd-textarea:focus { border-color: var(--red); }
.cd-textarea { resize: vertical; min-height: 110px; }
.cd-field { margin-bottom: 18px; }
.cd-hint {color: var(--gray-400); margin-top: 4px; }

/* Choice grid (category buttons) */
.cd-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 10px; }
.cd-choice { position: relative; }
.cd-choice input { position: absolute; opacity: 0; }
.cd-choice label {
    display: block; text-align: center; padding: 14px 10px; border: 1.5px solid var(--gray-200);
    border-radius: var(--radius); font-size: .85rem; font-weight: 600; color: var(--gray-600);
    cursor: pointer; transition: all .15s;
}
.cd-choice input:checked + label { border-color: var(--red); background: #fff5f5; color: var(--red); }

/* Budget / measurement pill options */
.cd-pill-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.cd-pill { position: relative; }
.cd-pill input { position: absolute; opacity: 0; }
.cd-pill label {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);color: var(--black); cursor: pointer; transition: all .15s;
}
.cd-pill input:checked + label { border-color: var(--red); background: #fff5f5; }
.cd-pill label::before {
    content: ''; width: 16px; height: 16px; border: 1.5px solid var(--gray-400); border-radius: 50%; flex-shrink: 0;
}
.cd-pill input:checked + label::before { border-color: var(--red); background: radial-gradient(var(--red) 0 40%, transparent 45%); }

/* File upload */
.cd-file-wrap {
    border: 2px dashed var(--gray-200); border-radius: var(--radius); padding: 24px; text-align: center;
    cursor: pointer; position: relative; transition: border-color .15s;
}
.cd-file-wrap:hover { border-color: var(--red); }
.cd-file-wrap input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cd-file-icon { font-size: 1.6rem; color: var(--gray-400); margin-bottom: 6px; }
.cd-file-label { font-size: .88rem; color: var(--gray-600); }
.cd-file-hint  { font-size: .78rem; color: var(--gray-400); margin-top: 4px; }
.cd-file-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cd-file-preview img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--gray-200); }

.btn-cd-submit {
    width: 100%; padding: 14px 26px; border-radius: var(--radius); font-size: .92rem; font-weight: 700;
    letter-spacing: .3px; border: 1.5px solid var(--red); background: var(--red); color: #fff; cursor: pointer;
    transition: all .15s;
}
.btn-cd-submit:hover { background: var(--red-dk); border-color: var(--red-dk); }
.btn-cd-submit:disabled { opacity: .6; cursor: not-allowed; }

.cd-error-msg { color: var(--red); font-size: .85rem; margin-bottom: 18px; padding: 10px 14px; background: #fff5f5; border: 1px solid #fecaca; border-radius: var(--radius); display: none; }

/* Success screen */
.cd-success { text-align: center; padding: 40px 20px; }
.cd-success-icon { font-size: 3rem; color: #166534; margin-bottom: 16px; }
.cd-success h3 { font-size: 1.3rem; font-weight: 700; color: var(--black); margin-bottom: 10px; }
.cd-success p  { color: var(--gray-600); font-size: .95rem; max-width: 420px; margin: 0 auto; }