/* Campaign Manager v2.5 — Frontend Form CSS */
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700;800;900&display=swap');

.cm-form-wrapper {
    --cm-black: #111111;
    --cm-dark: #1a1a1a;
    --cm-orange: #e05c2a;
    --cm-orange-soft: rgba(224,92,42,0.09);
    --cm-bg: #f8f6f2;
    --cm-white: #ffffff;
    --cm-grey-200: #e8e5e0;
    --cm-grey-400: #9a9590;
    --cm-grey-700: #555;
    --cm-font: 'Albert Sans', sans-serif;
    --cm-radius: 14px;
    --cm-card-radius: 12px;
    background: var(--cm-bg);
    font-family: var(--cm-font);
    -webkit-font-smoothing: antialiased;
    width: 100%;
    color: var(--cm-dark);
}
.cm-form-wrapper *, .cm-form-wrapper *::before, .cm-form-wrapper *::after { box-sizing: border-box; }

/* ── Progress ─────────────────────────────────────────────── */
.cm-progress-bar { display:flex; align-items:center; gap:12px; padding:18px 28px 0; }
.cm-progress-track { flex:1; height:4px; background:var(--cm-grey-200); border-radius:2px; overflow:hidden; }
.cm-progress-fill { height:100%; background:var(--cm-orange); border-radius:2px; width:11%; transition:width 0.45s cubic-bezier(.4,0,.2,1); }
.cm-progress-label { font-family:var(--cm-font); font-size:13px; font-weight:700; color:var(--cm-grey-400); white-space:nowrap; min-width:40px; text-align:right; }

/* ── Campaign meta bar ────────────────────────────────────── */
.cm-campaign-meta-bar { padding:10px 28px 0; border-bottom:1px solid var(--cm-grey-200); }
.cm-campaign-meta-name { font-size:12px; color:var(--cm-grey-400); font-weight:600; letter-spacing:0.3px; }

/* ── Steps ────────────────────────────────────────────────── */
.cm-steps { padding:32px 28px 28px; }
@media (max-width:600px) {
    .cm-progress-bar { padding:14px 16px 0; }
    .cm-steps { padding:22px 16px 20px; }
}

/* ── Step animation ───────────────────────────────────────── */
.cm-step { animation:cm-in 0.25s ease; }
@keyframes cm-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── Step label ───────────────────────────────────────────── */
.cm-step-label {
    display:inline-block; background:var(--cm-orange-soft); color:var(--cm-orange);
    font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px;
    padding:5px 12px; border-radius:20px; margin-bottom:16px;
}

/* ── Question ─────────────────────────────────────────────── */
.cm-question-title {
    font-family:var(--cm-font); font-size:clamp(22px,4vw,34px); font-weight:900;
    color:var(--cm-black); margin:0 0 8px; line-height:1.15; letter-spacing:-0.3px;
}
.cm-question-title .cm-highlight { color:var(--cm-orange); }
.cm-question-subtitle { font-size:15px; color:var(--cm-grey-700); margin:0 0 22px; line-height:1.6; font-weight:400; }

/* ── Answer Cards ─────────────────────────────────────────── */
.cm-answers-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (max-width:480px) { .cm-answers-grid { grid-template-columns:1fr; gap:8px; } }

.cm-answer-card {
    display:flex; align-items:center; gap:14px;
    background:var(--cm-white); border:2px solid var(--cm-grey-200);
    border-radius:var(--cm-card-radius); padding:14px 16px;
    cursor:pointer; transition:border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    user-select:none; -webkit-tap-highlight-color:transparent;
}
.cm-answer-card:hover { border-color:var(--cm-black); box-shadow:0 2px 12px rgba(0,0,0,0.07); }
.cm-answer-card:active { transform:scale(0.98); }
.cm-answer-card.cm-selected { border-color:var(--cm-orange); background:var(--cm-orange-soft); }

.cm-answer-icon {
    width:44px; height:44px; border-radius:10px; background:var(--cm-dark);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden;
}
.cm-answer-icon svg { color:var(--cm-orange); width:22px; height:22px; }
.cm-answer-icon img { width:26px; height:26px; object-fit:contain; }

.cm-answer-text { flex:1; min-width:0; }
.cm-answer-text strong { display:block; font-size:14px; font-weight:700; color:var(--cm-black); margin-bottom:1px; line-height:1.2; }
.cm-answer-text span { display:block; font-size:12px; color:var(--cm-grey-400); line-height:1.3; }

/* ── What You'll Get Panel ────────────────────────────────── */
.cm-wyg-panel {
    display:grid; grid-template-columns:1fr 1fr; gap:20px;
    background:var(--cm-dark); border-radius:var(--cm-card-radius);
    padding:24px; margin-bottom:24px; color:var(--cm-white);
}
@media (max-width:640px) { .cm-wyg-panel { grid-template-columns:1fr; gap:16px; } }

.cm-wyg-title { font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--cm-orange); margin:0 0 8px; }
.cm-wyg-heading { font-size:17px; font-weight:800; color:var(--cm-white); margin:0 0 16px; line-height:1.3; }
.cm-wyg-list { list-style:none; padding:0; margin:0; }
.cm-wyg-list li {
    display:flex; align-items:flex-start; gap:8px;
    font-size:13px; color:rgba(255,255,255,0.8); padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,0.08); line-height:1.4; font-weight:400;
}
.cm-wyg-list li:last-child { border-bottom:none; }
.cm-wyg-list li svg { color:var(--cm-orange); flex-shrink:0; margin-top:2px; width:14px; height:14px; }

.cm-wyg-right { border-left:1px solid rgba(255,255,255,0.1); padding-left:20px; }
@media (max-width:640px) { .cm-wyg-right { border-left:none; border-top:1px solid rgba(255,255,255,0.1); padding-left:0; padding-top:16px; } }

.cm-summary-title { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:var(--cm-orange); margin:0 0 12px; }
.cm-summary-item { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.cm-summary-item:last-child { border-bottom:none; }
.cm-summary-item .cm-si-q { color:rgba(255,255,255,0.5); flex:1; font-size:11px; }
.cm-summary-item .cm-si-a { color:var(--cm-white); font-weight:700; text-align:right; font-size:12px; }

/* ── Contact Form ─────────────────────────────────────────── */
.cm-contact-form {}
.cm-contact-fields-grid {
    display:grid; grid-template-columns:repeat(2,1fr); gap:0 16px;
}
@media (max-width:560px) { .cm-contact-fields-grid { grid-template-columns:1fr; } }

.cm-field-group { margin-bottom:14px; }
.cm-field-group label {
    display:block; font-size:11px; font-weight:700; letter-spacing:1.2px;
    text-transform:uppercase; color:var(--cm-grey-700); margin-bottom:5px;
}
.cm-req { color:var(--cm-orange); }
.cm-field-group input[type="text"],
.cm-field-group input[type="email"],
.cm-field-group input[type="tel"] {
    width:100%; padding:11px 14px;
    border:2px solid var(--cm-grey-200); border-radius:9px;
    font-family:var(--cm-font); font-size:15px; font-weight:400; color:var(--cm-black);
    background:var(--cm-white); transition:border-color 0.15s;
    -webkit-appearance:none; appearance:none;
}
.cm-field-group input:focus { outline:none; border-color:var(--cm-black); }
.cm-field-group input.cm-error { border-color:#ef4444; }
.cm-postcode { text-transform:uppercase; max-width:200px; }

/* ── Channel options — NO border ──────────────────────────── */
.cm-channel-group { margin-top:4px; }
.cm-channel-group label { text-transform:uppercase; font-size:11px; letter-spacing:1.2px; font-weight:700; color:var(--cm-grey-700); }
.cm-channel-options { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.cm-channel-option { cursor:pointer; }
.cm-channel-option input[type="radio"] { display:none; }
.cm-channel-option span {
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 18px; border-radius:50px;
    background:var(--cm-grey-200); border:none;
    font-size:13px; font-weight:600; font-family:var(--cm-font);
    color:var(--cm-dark); cursor:pointer;
    transition:background 0.15s, color 0.15s;
}
.cm-channel-option span svg { width:15px; height:15px; flex-shrink:0; color:var(--cm-dark); transition:color 0.15s; }
.cm-channel-option input:checked + span { background:var(--cm-dark); color:var(--cm-white); }
.cm-channel-option input:checked + span svg { color:var(--cm-orange); }

/* ── GDPR — no caps lock ──────────────────────────────────── */
.cm-gdpr { margin-top:16px; }
.cm-gdpr-label { display:flex !important; align-items:flex-start; gap:10px; cursor:pointer; text-transform:none !important; letter-spacing:0 !important; }
.cm-gdpr-label input { margin-top:3px; accent-color:var(--cm-orange); flex-shrink:0; transform:scale(1.2); }
.cm-gdpr-label span { font-size:13px; color:var(--cm-grey-700); line-height:1.5; font-weight:400; text-transform:none; letter-spacing:0; }
.cm-gdpr-label span a { color:var(--cm-orange); text-decoration:none; }

/* ── Submit Button ────────────────────────────────────────── */
.cm-submit-btn {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--cm-orange); color:var(--cm-white);
    border:none; border-radius:50px; padding:14px 28px;
    font-family:var(--cm-font); font-size:14px; font-weight:800;
    text-transform:uppercase; letter-spacing:1px;
    cursor:pointer; transition:background 0.18s, transform 0.1s; margin-top:14px;
}
.cm-submit-btn:hover { background:var(--cm-black); }
.cm-submit-btn:active { transform:scale(0.97); }
.cm-submit-btn:disabled { opacity:0.6; cursor:not-allowed; }

/* ── Results page ─────────────────────────────────────────── */
.cm-assessment-wrap { max-width:700px; }
.cm-assessment-header { margin-bottom:24px; }
.cm-assessment-label { display:inline-block; background:var(--cm-orange-soft); color:var(--cm-orange); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; padding:5px 12px; border-radius:20px; margin-bottom:14px; }
.cm-assessment-title { font-family:var(--cm-font); font-size:clamp(22px,4vw,30px); font-weight:900; color:var(--cm-black); margin:0 0 8px; letter-spacing:-0.3px; line-height:1.15; }
.cm-assessment-title .cm-hi { color:var(--cm-orange); }
.cm-assessment-sub { font-size:14px; color:var(--cm-grey-700); margin:0; line-height:1.6; font-weight:400; }

.cm-dome-card { background:var(--cm-white); border:2px solid var(--cm-grey-200); border-radius:var(--cm-radius); padding:24px; display:flex; gap:20px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.cm-dome-card-body { flex:1; min-width:180px; }
.cm-dome-card-label { font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--cm-grey-400); margin:0 0 6px; }
.cm-dome-card-name { font-size:22px; font-weight:900; color:var(--cm-black); margin:0 0 8px; }
.cm-dome-card-desc { font-size:13px; color:var(--cm-grey-700); margin:0 0 14px; line-height:1.5; font-weight:400; }
.cm-dome-specs { display:flex; gap:10px; flex-wrap:wrap; }
.cm-dome-spec { background:var(--cm-bg); border-radius:8px; padding:8px 12px; }
.cm-dome-spec-label { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--cm-grey-400); margin-bottom:2px; }
.cm-dome-spec-val { font-size:14px; font-weight:800; color:var(--cm-black); }
.cm-dome-size-badge { width:52px; height:52px; border-radius:12px; background:var(--cm-orange); color:var(--cm-white); font-size:20px; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cm-dome-img { width:120px; height:100px; object-fit:contain; flex-shrink:0; }

.cm-revenue-card { background:var(--cm-dark); border-radius:var(--cm-radius); padding:24px; margin-bottom:14px; }
.cm-revenue-label { font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--cm-orange); margin:0 0 6px; }
.cm-revenue-number { font-family:var(--cm-font); font-size:clamp(30px,6vw,52px); font-weight:900; color:var(--cm-orange); margin:0 0 8px; letter-spacing:-1px; line-height:1; }
.cm-revenue-sub { font-size:13px; color:rgba(255,255,255,0.6); line-height:1.5; font-weight:400; }

.cm-cta-card { border:2px solid var(--cm-orange); border-radius:var(--cm-radius); padding:24px; text-align:center; margin-bottom:14px; }
.cm-cta-card h3 { font-size:18px; font-weight:900; margin:0 0 6px; }
.cm-cta-card h3 span { color:var(--cm-orange); }
.cm-cta-card p { font-size:13px; color:var(--cm-grey-700); margin:0 0 16px; line-height:1.5; font-weight:400; }
.cm-cta-btn { display:inline-flex; align-items:center; gap:8px; background:var(--cm-orange); color:var(--cm-white); border:none; border-radius:50px; padding:13px 26px; font-family:var(--cm-font); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition:background 0.15s; text-decoration:none; }
.cm-cta-btn:hover { background:var(--cm-black); color:var(--cm-white); }

.cm-next-steps { padding:20px 0 0; }
.cm-next-steps h4 { font-size:15px; font-weight:800; margin:0 0 14px; }
.cm-next-step { display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--cm-grey-200); }
.cm-next-step:last-child { border-bottom:none; }
.cm-next-num { width:30px; height:30px; border-radius:50%; background:var(--cm-orange); color:var(--cm-white); font-size:13px; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cm-next-body strong { display:block; font-size:14px; font-weight:700; color:var(--cm-black); margin-bottom:2px; }
.cm-next-body span { font-size:12px; color:var(--cm-grey-700); line-height:1.4; font-weight:400; }

/* ── Popup overlay ────────────────────────────────────────── */
.cm-popup-overlay { position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,0.6); backdrop-filter:blur(3px); display:none; align-items:flex-start; justify-content:center; padding:20px; overflow-y:auto; }
.cm-popup-overlay[style*="flex"] { display:flex !important; }
.cm-popup-inner { background:var(--cm-bg); border-radius:18px; width:100%; max-width:900px; position:relative; margin:auto; box-shadow:0 24px 80px rgba(0,0,0,0.3); overflow:hidden; }
.cm-popup-close { position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,0.1); border:none; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; z-index:10; color:var(--cm-dark); transition:background 0.15s; }
.cm-popup-close:hover { background:var(--cm-orange); color:var(--cm-white); }