/* ─── Cussons Baby Product Finder v3.0 ─── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root {
    --cbpf-navy:    #1E386C;
    --cbpf-purple:  #6778B9;
    --cbpf-grey:    #B4BDCE;
    --cbpf-bg:      #EDF4FB;
    --cbpf-white:   #ffffff;
    --cbpf-text:    #1E386C;
    --cbpf-muted:   #6B7A99;
    --cbpf-radius:  50px;
    --cbpf-radius-card: 16px;
}

.cbpf-root {
    font-family: 'Nunito', sans-serif;
    margin: 0 auto;
    overflow: hidden;
}

/* ══════════════════════════════════════════
   HEADER / PROGRESS BAR
══════════════════════════════════════════ */
.cbpf-header {
    padding: 20px 0 16px;
    max-width: 564px;
    margin: 0 auto;
}
.cbpf-progress-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cbpf-back-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--cbpf-navy);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s;
    padding: 0;
}
.cbpf-back-btn:hover { background: rgba(30,56,108,0.08); }
.cbpf-back-btn:disabled { opacity: 0.25; cursor: default; }
.cbpf-back-btn svg {
    width: 14px; height: 14px;
    fill: none; stroke: var(--cbpf-navy);
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.cbpf-segments {
    display: flex;
    gap: 5px;
    flex: 1;
}
.cbpf-segment {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--cbpf-grey);
    transition: background 0.3s;
}
.cbpf-segment.active,
.cbpf-segment.complete { background: var(--cbpf-purple); }

/* ══════════════════════════════════════════
   BODY
══════════════════════════════════════════ */
.cbpf-body {
    padding: 20px 24px 32px;
    max-width: 1152px;
    margin: 0 auto;
}

/* ══════════════════════════════════════════
   TRACK SELECTOR
══════════════════════════════════════════ */
.cbpf-root.cbpf-screen--track .cbpf-header { display: none; }
.cbpf-root.cbpf-screen--results .cbpf-header { display: none; }

.cbpf-track-screen {
    display: flex;
    align-items: stretch;
    min-height: 460px;
}

.cbpf-track-image {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 0 16px;
    overflow: hidden;
}

.cbpf-track-image img {
    width: 100%;
    object-fit: contain;
    display: block;
}
.cbpf-track-content {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 32px 40px 20px;
}

.cbpf-track-heart {
    width: 44px;
    height: auto;
    margin-bottom: 16px;
}

.cbpf-track-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--cbpf-navy);
    line-height: 1.2;
    margin: 0 0 14px;
}

.cbpf-track-subtitle {
    font-size: 14px;
    color: var(--cbpf-muted);
    line-height: 1.6;
    margin: 0 0 28px;
}
.cbpf-track-btns {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 256px;
}
.cbpf-track-btn {
    padding: 14px 24px;
    background: var(--cbpf-navy);
    color: #fff;
    border: none;
    border-radius: var(--cbpf-radius);
    font-family: 'Gotham Rounded', sans-serif !important;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: background 0.18s, transform 0.15s;
    width: 260px;
}

.cbpf-track-btn:hover { background: var(--cbpf-purple); transform: translateY(-2px); }

@media (max-width: 600px) {
    .cbpf-track-screen { flex-direction: column; min-height: auto; }
    .cbpf-track-image { flex: none; padding: 24px 24px 0; }
    .cbpf-track-image img { max-width: 100%; }
    .cbpf-track-content { flex: none; padding: 20px 24px 28px; align-items: center; text-align: center; }
    .cbpf-track-title { font-size: 26px; }
    .cbpf-track-btn { max-width: 100%; }
}

/* ══════════════════════════════════════════
   REGISTRATION FORM
══════════════════════════════════════════ */
.cbpf-question {
    font-size: 36px;
    text-align: center;
    font-weight: 800;
    color: var(--cbpf-navy);
    line-height: 1.3;
    margin: 0 0 24px;
}

.cbpf-question-wrap {
    margin: 4px auto;
    max-width: 564px;
}

.cbpf-question-sub {
    font-size: 13px;
    color: var(--cbpf-purple);
    margin: -16px 0 20px;
    font-weight: 600;
}
.cbpf-field {
    width: 564px;
    margin: 0 auto 18px auto;
}

.cbpf-field--checkbox { margin-bottom: 12px; }

.cbpf-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--cbpf-navy);
    margin-bottom: 6px;
}

.cbpf-field-hint {
    font-size: 12px;
    color: var(--cbpf-muted);
    margin: 5px 0 0;
    line-height: 1.5;
}
.cbpf-input {
    width: 100%;
    padding: 13px 16px !important;
    border: 1.5px solid var(--cbpf-grey) !important;
    border-radius: 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--cbpf-navy);
    background: var(--cbpf-white);
    box-sizing: border-box;
    transition: border-color 0.18s;
    -webkit-appearance: none;
}

.cbpf-input:focus { outline: none; border-color: var(--cbpf-purple); }

/* +62 split phone field */
.cbpf-phone-wrap {
    display: flex;
    gap: 8px;
}
.cbpf-phone-prefix {
    padding: 13px 16px;
    background: var(--cbpf-white);
    border: 1.5px solid var(--cbpf-grey);
    border-radius: 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--cbpf-navy);
    white-space: nowrap;
    flex-shrink: 0;
}
.cbpf-phone-input { flex: 1; }

.cbpf-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--cbpf-muted);
    cursor: pointer;
    line-height: 1.5;
}
.cbpf-checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--cbpf-purple);
    width: 16px;
    height: 16px;
}
.cbpf-checkbox-label a { color: var(--cbpf-purple); text-decoration: underline; }
.cbpf-error {
    font-size: 12px;
    color: #e8454c;
    margin-bottom: 10px;
}

/* ══════════════════════════════════════════
   NEXT / SUBMIT BUTTON
══════════════════════════════════════════ */
.cbpf-next-btn {
    display: block;
    width: 200px;
    padding: 16px;
    border: none;
    border-radius: var(--cbpf-radius);
    font-family: 'Gotham Rounded', sans-serif !important;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    margin: 20px auto;
    transition: background 0.18s;
    letter-spacing: 0.2px;
}

.cbpf-next-btn.cbpf-next-btn--disabled#cbpf-reg-submit {
    background: var(--cbpf-navy);
    color: #fff;
}

.cbpf-next-btn--disabled {
    background: #C5C9D4;
    color: #fff;
    cursor: default;
    pointer-events: none;
}

.cbpf-next-btn.cbpf-next-btn--disabled#cbpf-reg-submit {
    background: var(--cbpf-navy);
    color: #fff;
}

.cbpf-next-btn--active {
    background: var(--cbpf-navy);
    color: #fff;
    cursor: pointer;
    pointer-events: all;
}

.cbpf-next-btn--active:hover { background: var(--cbpf-purple); }

/* ══════════════════════════════════════════
   QUIZ OPTIONS — PILL LAYOUT
══════════════════════════════════════════ */
.cbpf-options-pill {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
}

.cbpf-pill {
    display: block;
    width: 564px;
    padding: 15px 20px;
    background: var(--cbpf-white);
    border: 1.5px solid #B1DCF7;
    border-radius: var(--cbpf-radius);
    font-family: 'Gotham Rounded', sans-serif !important;
    font-size: 16px;
    font-weight: 700;
    color: var(--cbpf-navy);
    cursor: pointer;
    text-align: center;
    transition: background 0.18s, border-color 0.18s;
    margin: 0 auto;
}

.cbpf-pill:hover { border-color: var(--cbpf-purple); background: rgba(103,120,185,0.06); }

.cbpf-pill--selected {
    background: var(--cbpf-purple);
    border-color: var(--cbpf-purple);
    color: #fff;
}

/* ══════════════════════════════════════════
   QUIZ OPTIONS — CARD LAYOUT (2-column)
══════════════════════════════════════════ */
.cbpf-options-card {
    display: grid;
    grid-template-columns: 250px 250px;
    gap: 14px;
    margin-bottom: 60px;
    justify-content: center;
}

@media (min-width: 768px) {
    .cbpf-options-card.options-grid--4col {
        grid-template-columns: repeat(4, 1fr);
    }
}
.cbpf-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    cursor: pointer;
    padding: 8px 8px 14px;
    overflow: hidden;
    transition: border-color 0.18s, background 0.18s;
    font-family: 'Gotham Rounded', sans-serif !important;
    border: 0px;
    border-radius: 12px;
}

.cbpf-card:hover { border-color: transparent; }
.cbpf-card--selected {
    border-color: #6778B9;
    background: #6778B9;
}
.cbpf-card-img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.cbpf-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

.cbpf-card-label {
    font-size: 14px;
    font-weight: 700;
    font-family: 'Gotham Rounded', sans-serif !important;
    color: var(--cbpf-navy);
    text-align: center;
    padding: 10px 8px 0;
    line-height: 1.3;
}

.cbpf-card--selected .cbpf-card-label {
    color: #fff;
    background: #6778B9;
}

/* ══════════════════════════════════════════
   RESULTS PAGE
══════════════════════════════════════════ */
.cbpf-results-hero {
    padding: 32px 24px 56px;
    background: #8ACBF3 url('/wp-content/uploads/2025/07/Heart-Symbol-1.png') no-repeat right top;
    background-size: contain;
}

.cbpf-results-hero-content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    max-width: 1152px;
    margin: 0 auto;
}

.cbpf-results-hero-left {
    flex: 1;
    min-width: 0;
}
.cbpf-ulangi-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cbpf-navy);
    border: none;
    border-radius: 100px;
    padding: 14px 24px;
    font-family: 'Gotham Rounded', sans-serif !important;
    font-size: 14px;
    font-weight: 700;
    color: var(--cbpf-white);
    cursor: pointer;
    margin-bottom: 60px;
    transition: background 0.18s;
}

.cbpf-ulangi-btn:hover { background: var(--cbpf-grey); }

.cbpf-ulangi-btn span {
    display: flex;
    align-items: center;
}

.cbpf-ulangi-btn span:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('/wp-content/uploads/2026/06/icon-refresh.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px;
    padding-right: 10px;
}

.cbpf-results-greeting {
    font-size: 36px;
    text-align: center;
    font-weight: 800;
    color: var(--cbpf-navy);
    margin: 0 0 6px;
    line-height: 1.3;
}

.cbpf-results-greeting span { display: block; }

.cbpf-results-tagline {
    font-size: 20px;
    font-family: "Moranga", serif !important;
    color: var(--cbpf-navy);
    margin: 0;
    line-height: 1.5;
    text-align: center;
}

.cbpf-results-hero-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 68px;
}
.cbpf-results-baby {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 50%;
    margin-bottom: -36px;
    z-index: 999;
}
.cbpf-summary-card {
    background: var(--cbpf-white);
    border-radius: 24px;
    padding: 56px 24px 14px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 36px;
    min-width: 160px;
}

.cbpf-summary-label {
    font-size: 12px;
    font-family: 'Gotham Rounded', sans-serif !important;
    font-weight: 700;
    color: var(--cbpf-navy);
    margin-bottom: 2px;
}
.cbpf-summary-value {
    font-size: 14px;
    font-family: 'Gotham Rounded', sans-serif !important;
    font-weight: 400;
    color: var(--cbpf-navy);
}

/* Products section */
.cbpf-results-products {
    padding: 80px 24px;
    max-width: 1152px;
    margin: 0 auto;
}

.cbpf-results-products-heading {
    font-size: 36px;
    font-weight: 800;
    color: var(--cbpf-navy);
    text-align: center;
    margin: 0 0 48px;
}

.cbpf-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 956px;
    margin: 0 auto;
    padding: 0 49px;
}

@media (max-width: 500px) {
    .cbpf-products-grid { grid-template-columns: repeat(2, 1fr); }
}

/* WooCommerce-style product card */
.cbpf-woo-card {
    display: flex;
    flex-direction: column;
    background: var(--cbpf-white);
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.18s, transform 0.18s;
}

.cbpf-woo-card:hover { box-shadow: 0 4px 16px rgba(30,56,108,0.1); transform: translateY(-2px); }

.cbpf-woo-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: #f5f8fc;
    display: block;
}
.cbpf-woo-info {
    padding: 16px;
}
.cbpf-woo-stars {
    font-size: 18px;
    color: #C5C9D4;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.cbpf-woo-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--cbpf-navy);
    line-height: 1.4;
    font-family: 'Gotham Rounded', sans-serif !important;
}


@media (max-width: 767px) {
    .cbpf-header { padding: 20px 20px 16px; }
    .cbpf-results-hero { flex-direction: column; }
    .cbpf-results-hero-right { flex-direction: column; align-items: center; width: 100%; padding-top: 48px; }
    .cbpf-summary-card { flex: 1; }
    .cbpf-field { width: 100%; }
    .cbpf-body { padding: 20px 20px 32px; }
    .cbpf-next-btn { width: 100%; }
    .cbpf-pill { width: 100%; }
    .cbpf-options-card { grid-template-columns: 48% 48%; }
    .cbpf-results-hero-content { display: block; }
    .cbpf-ulangi-btn { padding: 12px 24px; margin-bottom: 48px; }
    .cbpf-results-hero { background-position: bottom; }
    .cbpf-results-tagline { font-size: 16px; }
    .cbpf-summary-card { gap: 10px 0; width: 100%; }
    .cbpf-summary-col { width: 50%; box-sizing: border-box; }
    .cbpf-results-products-heading { font-size: 28px; }
    .cbpf-products-grid { padding: 0 0; }
    .cbpf-results-products { padding: 56px 20px; }
    .product-finder-section .et_pb_row { width:100% !important; }
    .cbpf-woo-name { font-size: 14px; }
    .cbpf-woo-stars { font-size: 16px; }
}