/* =========================================================
   WWYD Assessment – Public Styles  v1.1
   Clean white/light banner, rounded image, Your Details
   ========================================================= */

:root {
    --wwyd-blue:        #1a5fa8;
    --wwyd-blue-dark:   #134a86;
    --wwyd-blue-light:  #e8f0fb;
    --wwyd-accent:      #2980d9;
    --wwyd-bar-high:    #1a5fa8;
    --wwyd-bar-low:     #27ae60;
    --wwyd-text:        #2c3e50;
    --wwyd-muted:       #6b7a8d;
    --wwyd-border:      #dce6f0;
    --wwyd-radius:      8px;
    --wwyd-shadow:      0 2px 16px rgba(26,95,168,.10);
}

.wwyd-wrap,
.wwyd-result-wrap {
    font-family: 'Segoe UI', Arial, sans-serif;
    color: var(--wwyd-text);
    line-height: 1.7;
}

.wwyd-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 28px;
}

/* ── Hero Banner ─────────────────────────────────────────
   FIX: Removed blue background → clean light grey/white
   ───────────────────────────────────────────────────── */
.wwyd-banner {
    background: #f0f4f9;          /* light cool grey – no blue */
    padding: 56px 0 52px;
    border-bottom: 1px solid #dce6f0;
    display: none;

}

.wwyd-banner-inner {
    display: flex;
    align-items: center;
    gap: 56px;
}

.wwyd-banner-text {
    flex: 1;
}

.wwyd-banner-text h2 {
    font-size: 2.1rem;
    font-weight: 900;
    color: #1a1a2e;
    margin: 0 0 18px;
    letter-spacing: .02em;
    line-height: 1.15;
}

.wwyd-banner-text p {
    font-size: .97rem;
    color: #444;
    margin: 0 0 10px;
    line-height: 1.75;
}

/* ── Banner Image ────────────────────────────────────────
   FIX: border-radius:50px (not circular), bigger size
   ───────────────────────────────────────────────────── */
.wwyd-banner-image {
    flex-shrink: 0;
    width: 340px;
    height: 260px;
    border-radius: 50px;          /* as requested */
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(26,95,168,.15);
}

.wwyd-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* ── Form Section ───────────────────────────────────────── */
.wwyd-form-section {
 
    padding: 50px 0 60px;
}

.wwyd-form {
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--wwyd-shadow);
    padding: 36px;
}

/* ── Questions ───────────────────────────────────────────── */
.wwyd-question {
    padding: 20px 24px;
    margin-bottom: 4px;
    border-radius: var(--wwyd-radius);
}

.wwyd-odd  { background: #f9fbfd; }
.wwyd-even { background: var(--wwyd-blue-light); }

.wwyd-question p {
    font-weight: 600;
    margin: 0 0 12px;
    font-size: .97rem;
    color: var(--wwyd-text);
}

.wwyd-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: .95rem;
    line-height: 1.55;
}

.wwyd-option input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--wwyd-blue);
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    cursor: pointer;
}

/* ── Your Details Section ────────────────────────────────
   NEW: clean section heading + labelled fields
   ───────────────────────────────────────────────────── */
.wwyd-details-section {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 2px solid var(--wwyd-blue-light);
}

.wwyd-details-heading {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--wwyd-blue);
    margin: 0 0 20px;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wwyd-details-heading::after {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--wwyd-blue-light);
    border-radius: 2px;
}

.wwyd-contact-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.wwyd-field { flex: 1 1 220px; }

.wwyd-field-label {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: var(--wwyd-text);
    margin-bottom: 6px;
    letter-spacing: .01em;
}

.wwyd-required { color: #e74c3c; margin-left: 2px; }

.wwyd-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--wwyd-border);
    border-radius: var(--wwyd-radius);
    font-size: .95rem;
    color: var(--wwyd-text);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

.wwyd-input:focus {
    outline: none;
    border-color: var(--wwyd-blue);
    box-shadow: 0 0 0 3px rgba(26,95,168,.12);
}

.wwyd-input::placeholder { color: #aab0ba; }

/* ── Submit ──────────────────────────────────────────────── */
.wwyd-submit-row {
    text-align: center;
    margin-top: 32px;
}

.wwyd-submit-btn {
    background: var(--wwyd-blue);
    color: #fff;
    border: none;
    padding: 14px 50px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    letter-spacing: .04em;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 14px rgba(26,95,168,.25);
}

.wwyd-submit-btn:hover  { background: var(--wwyd-blue-dark); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26,95,168,.3); }
.wwyd-submit-btn:active { transform: translateY(0); }
.wwyd-submit-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.wwyd-response-msg {
    margin-top: 14px;
    font-size: .92rem;
    color: var(--wwyd-blue);
    min-height: 22px;
    font-weight: 500;
}

/* ── Result Page ─────────────────────────────────────────── */
.wwyd-result-wrap {
    
    padding: 44px 20px;
}

.wwyd-download-row {
    text-align: center;
    margin-bottom: 30px;
}

.wwyd-download-btn {
    background: var(--wwyd-blue);
    color: #fff;
    border: none;
    padding: 13px 38px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    transition: background .2s, box-shadow .2s;
    box-shadow: 0 4px 14px rgba(26,95,168,.25);
}

.wwyd-download-btn:hover    { background: var(--wwyd-blue-dark); }
.wwyd-download-btn:disabled { opacity: .65; cursor: not-allowed; }

#wwyd-pdf-content {
    max-width: 1140px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--wwyd-shadow);
    overflow: hidden;
}

.wwyd-result-header {
    background: linear-gradient(135deg, var(--wwyd-blue) 0%, var(--wwyd-accent) 100%);
    color: #fff;
    padding: 38px 44px;
    text-align: center;
}

.wwyd-result-header h2 { margin: 0 0 6px; font-size: 1.9rem; color: #fff; }
.wwyd-result-header p  { margin: 0; opacity: .9; }

/* ── Score Cards ─────────────────────────────────────────── */
.wwyd-scores-row { display: flex; }

.wwyd-score-card {
    flex: 1;
    padding: 32px;
    border-bottom: 1px solid var(--wwyd-border);
}

.wwyd-score-card:first-child { border-right: 1px solid var(--wwyd-border); }

.wwyd-score-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .09em;
    color: var(--wwyd-blue);
    margin: 0 0 16px;
}

.wwyd-score-title span { font-size: 1.35em; color: var(--wwyd-accent); }

/* ── Progress Bars ───────────────────────────────────────── */
.wwyd-bar-wrapper {
    background: #dce6f0;
    border-radius: 50px;
    height: 22px;
    overflow: hidden;
    margin-bottom: 14px;
}

.wwyd-bar {
    height: 100%;
    border-radius: 50px;
    transition: width 1.1s ease;
    min-width: 6px;
}

.wwyd-bar-high { background: var(--wwyd-bar-high); }
.wwyd-bar-low  { background: var(--wwyd-bar-low);  }

.wwyd-score-label { font-size: .95rem; margin: 0 0 10px; font-weight: 600; }
.wwyd-score-text  { font-size: .9rem; color: var(--wwyd-muted); line-height: 1.65; margin: 0; }

/* ── Takeaway ────────────────────────────────────────────── */
.wwyd-takeaway { padding: 32px 44px; }

.wwyd-takeaway-title {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .09em;
    color: var(--wwyd-blue);
    margin: 0 0 12px;
}

.wwyd-takeaway-title span { font-size: 1.35em; color: var(--wwyd-accent); }

/* ── Notice ──────────────────────────────────────────────── */
.wwyd-notice {
    background: var(--wwyd-blue-light);
    border-left: 4px solid var(--wwyd-blue);
    padding: 16px 22px;
    border-radius: var(--wwyd-radius);
    color: var(--wwyd-text);
    margin: 20px 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .wwyd-banner-inner   { flex-direction: column; gap: 28px; }
    .wwyd-banner-image   { width: 100%; height: 220px; border-radius: 24px; }
    .wwyd-banner-text h2 { font-size: 1.5rem; }
    .wwyd-scores-row     { flex-direction: column; }
    .wwyd-score-card:first-child { border-right: none; border-bottom: 1px solid var(--wwyd-border); }
    .wwyd-score-card     { padding: 22px 20px; }
    .wwyd-takeaway       { padding: 22px 20px; }
    .wwyd-result-header  { padding: 26px 20px; }
    .wwyd-form           { padding: 20px 16px; }
    .wwyd-question       { padding: 16px 14px; }
    .wwyd-contact-row    { flex-direction: column; gap: 16px; }
    .wwyd-field          { flex: 1 1 100%; }
}

/* ── Print / PDF ─────────────────────────────────────────── */
@media print {
    .wwyd-download-row { display: none !important; }
    #wwyd-pdf-content  { box-shadow: none; }
    .wwyd-bar          { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}