/* ═══════════════════════════════════════════════════════════
   JungBleiben Tools — CSS
   Design: Clean, modern, passt zu GeneratePress + Manrope
   Colors hardcoded (W3TC strips CSS custom properties)
   !important on buttons (GeneratePress inline <style> overrides)
   ═══════════════════════════════════════════════════════════ */

/* ─── Tool Container ─── */
.jbt-tool {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    max-width: 720px;
    margin: 2rem auto;
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem 2rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    border: 1px solid #e5e7eb;
    color: #1a1a2e;
    line-height: 1.6;
}

.jbt-tool *,
.jbt-tool *::before,
.jbt-tool *::after {
    box-sizing: border-box;
}

.jbt-title {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 .35rem;
    color: #1b4332;
}

.jbt-desc {
    font-size: .95rem;
    color: #6b7280;
    margin: 0 0 1.5rem;
}

/* ─── Form Layout ─── */
.jbt-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.jbt-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.jbt-field {
    flex: 1;
    min-width: 140px;
}

.jbt-field-full {
    flex-basis: 100%;
}

.jbt-field label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    margin-bottom: .4rem;
}

.jbt-field label small {
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0;
}

/* ─── Inputs ─── */
.jbt-input-wrap {
    display: flex;
    align-items: center;
    background: #f8faf9;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .2s;
}

.jbt-input-wrap:focus-within {
    border-color: #2d6a4f;
    box-shadow: 0 0 0 3px rgba(45,106,79,.12);
}

.jbt-input-wrap input {
    flex: 1;
    border: none;
    background: transparent;
    padding: .65rem .75rem;
    font-size: 1rem;
    font-family: inherit;
    color: #1a1a2e;
    outline: none;
    -moz-appearance: textfield;
}

.jbt-input-wrap input::-webkit-outer-spin-button,
.jbt-input-wrap input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.jbt-unit {
    padding: .65rem .75rem .65rem 0;
    font-size: .85rem;
    color: #6b7280;
    font-weight: 500;
    user-select: none;
}

/* Select */
.jbt-tool select {
    width: 100%;
    padding: .65rem .75rem;
    font-size: .95rem;
    font-family: inherit;
    color: #1a1a2e;
    background: #f8faf9;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    transition: border-color .2s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 2.2rem;
}

.jbt-tool select:focus {
    border-color: #2d6a4f;
    box-shadow: 0 0 0 3px rgba(45,106,79,.12);
}

/* ─── Toggle Buttons (Gender, etc.) ─── */
.jbt-tool .jbt-toggle-group {
    display: flex;
    gap: .5rem;
}

.jbt-tool button.jbt-toggle,
.jbt-tool button.jbt-toggle:focus,
.jbt-tool button.jbt-toggle:visited {
    flex: 1;
    padding: .6rem 1rem !important;
    border: 1.5px solid #e5e7eb !important;
    background: #f8faf9 !important;
    background-color: #f8faf9 !important;
    border-radius: 8px !important;
    font-family: inherit;
    font-size: .9rem !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
}

.jbt-tool button.jbt-toggle:hover {
    border-color: #40916c !important;
    color: #2d6a4f !important;
    background: #f8faf9 !important;
    background-color: #f8faf9 !important;
}

.jbt-tool button.jbt-toggle.active,
.jbt-tool button.jbt-toggle.active:focus,
.jbt-tool button.jbt-toggle.active:hover {
    background: #2d6a4f !important;
    background-color: #2d6a4f !important;
    border-color: #2d6a4f !important;
    color: #fff !important;
}

/* ─── Quiz Options ─── */
.jbt-quiz-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.jbt-question {
    background: #f8faf9;
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

.jbt-question > label {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: .65rem;
    text-transform: none;
    letter-spacing: 0;
}

.jbt-options {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.jbt-tool button.jbt-opt,
.jbt-tool button.jbt-opt:focus,
.jbt-tool button.jbt-opt:visited {
    padding: .5rem .85rem !important;
    border: 1.5px solid #e5e7eb !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 50px !important;
    font-family: inherit;
    font-size: .82rem !important;
    font-weight: 500 !important;
    color: #1a1a2e !important;
    cursor: pointer;
    transition: all .2s;
    line-height: 1.3 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.jbt-tool button.jbt-opt:hover {
    border-color: #40916c !important;
    background: rgba(45,106,79,.05) !important;
    background-color: rgba(45,106,79,.05) !important;
    color: #1a1a2e !important;
}

.jbt-tool button.jbt-opt.selected,
.jbt-tool button.jbt-opt.selected:focus,
.jbt-tool button.jbt-opt.selected:hover {
    background: #2d6a4f !important;
    background-color: #2d6a4f !important;
    border-color: #2d6a4f !important;
    color: #fff !important;
}

/* ─── CTA Button ─── */
.jbt-tool button.jbt-btn,
.jbt-tool button.jbt-btn:focus,
.jbt-tool button.jbt-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .8rem 2rem !important;
    background: #2d6a4f !important;
    background-color: #2d6a4f !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: inherit;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all .25s;
    margin-top: .5rem;
    letter-spacing: .01em !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    line-height: 1.4 !important;
}

.jbt-tool button.jbt-btn:hover {
    background: #1b4332 !important;
    background-color: #1b4332 !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45,106,79,.25) !important;
}

.jbt-tool button.jbt-btn:active {
    transform: translateY(0);
}

/* ─── Back Button ─── */
.jbt-back-wrap {
    margin-top: 1.25rem;
}

.jbt-tool .jbt-back-btn,
.jbt-tool .jbt-back-btn:visited {
    display: inline-block !important;
    padding: .65rem 1.5rem !important;
    border: 2px solid #2d6a4f !important;
    border-radius: 8px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #2d6a4f !important;
    font-family: inherit;
    font-size: .9rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all .2s;
    line-height: 1.4 !important;
    box-shadow: none !important;
}

.jbt-tool .jbt-back-btn:hover,
.jbt-tool .jbt-back-btn:focus {
    background: #2d6a4f !important;
    background-color: #2d6a4f !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ─── Results ─── */
.jbt-result {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1.5px solid #bbf7d0;
    border-radius: 12px;
    animation: jbtFadeIn .4s ease;
}

@keyframes jbtFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.jbt-result-big {
    text-align: center;
    margin-bottom: 1rem;
}

.jbt-result-number {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    color: #1b4332;
    line-height: 1.1;
    font-family: 'Manrope', sans-serif;
}

.jbt-result-label {
    font-size: .9rem;
    color: #6b7280;
    margin-top: .25rem;
}

.jbt-result-category {
    display: inline-block;
    padding: .3rem .8rem;
    border-radius: 50px;
    font-size: .85rem;
    font-weight: 600;
    margin-top: .5rem;
}

.jbt-cat-green  { background: #dcfce7; color: #166534; }
.jbt-cat-yellow { background: #fef9c3; color: #854d0e; }
.jbt-cat-orange { background: #ffedd5; color: #9a3412; }
.jbt-cat-red    { background: #fee2e2; color: #991b1b; }
.jbt-cat-blue   { background: #dbeafe; color: #1e40af; }

.jbt-result-details {
    font-size: .9rem;
    color: #1a1a2e;
    line-height: 1.7;
}

.jbt-result-details p {
    margin: .4rem 0;
}

.jbt-result-details strong {
    color: #1b4332;
}

/* ─── Meter / Progress Bar ─── */
.jbt-meter {
    width: 100%;
    height: 12px;
    background: #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    margin: .75rem 0;
}

.jbt-meter-fill {
    height: 100%;
    border-radius: 6px;
    transition: width .8s ease;
}

/* ─── HR Zones Table ─── */
.jbt-zones-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .35rem;
    font-size: .88rem;
}

.jbt-zones-table th {
    text-align: left;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    padding: .4rem .6rem;
    font-weight: 600;
}

.jbt-zones-table td {
    padding: .6rem .6rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

.jbt-zones-table tr td:first-child { border-radius: 8px 0 0 8px; }
.jbt-zones-table tr td:last-child  { border-radius: 0 8px 8px 0; }

.jbt-zone-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: .4rem;
    vertical-align: middle;
}

.jbt-zone1 { background: #93c5fd; }
.jbt-zone2 { background: #4ade80; }
.jbt-zone3 { background: #facc15; }
.jbt-zone4 { background: #fb923c; }
.jbt-zone5 { background: #f87171; }

.jbt-zone-highlight {
    background: rgba(74,222,128,.12) !important;
    border-color: #4ade80 !important;
}

/* ─── Fasting Timeline ─── */
.jbt-timeline {
    display: flex;
    width: 100%;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    margin: 1rem 0;
}

.jbt-tl-fast {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 600;
    color: #1e40af;
}

.jbt-tl-eat {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 600;
    color: #166534;
}

/* ─── Supplement Cards ─── */
.jbt-sup-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.jbt-sup-card {
    display: flex;
    gap: .75rem;
    padding: .85rem 1rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    align-items: flex-start;
}

.jbt-sup-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8faf9;
    border-radius: 50%;
}

.jbt-sup-info {
    flex: 1;
}

.jbt-sup-name {
    font-weight: 700;
    font-size: .95rem;
    color: #1b4332;
}

.jbt-sup-why {
    font-size: .82rem;
    color: #6b7280;
    margin-top: .15rem;
    line-height: 1.45;
}

.jbt-sup-prio {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 50px;
    font-size: .7rem;
    font-weight: 600;
    margin-top: .3rem;
}

.jbt-prio-high   { background: #dcfce7; color: #166534; }
.jbt-prio-medium { background: #fef9c3; color: #854d0e; }
.jbt-prio-low    { background: #f3f4f6; color: #6b7280; }

/* ─── Disclaimer ─── */
.jbt-disclaimer {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid #e5e7eb;
    font-size: .75rem;
    color: #6b7280;
    line-height: 1.5;
}

/* ─── CTA Box inside results ─── */
.jbt-cta-box {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1.5px solid #2d6a4f;
    border-radius: 8px;
    text-align: center;
}

.jbt-cta-box p {
    font-size: .9rem;
    margin: 0 0 .5rem;
    color: #1a1a2e;
}

/* ─── Infographics ─── */
.jbt-info {
    margin: 1.5rem 0 .5rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-radius: 12px;
}
.jbt-info-title {
    font-size: .8rem;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.jbt-info-grid {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
.jbt-info-card {
    flex: 1;
    min-width: 120px;
    background: #fff;
    border-radius: 10px;
    padding: .85rem;
    text-align: center;
    border: 1px solid #e5e7eb;
    border-top: 4px solid #e5e7eb;
}
.jbt-info-card-label {
    font-size: .78rem;
    font-weight: 700;
    margin: 0 0 .35rem;
}
.jbt-info-card-value {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 .25rem;
}
.jbt-info-card-desc {
    font-size: .72rem;
    color: #6b7280;
    margin: 0;
}
/* Card color variants */
.jbt-info-card.blue    { border-top-color: #60a5fa; }
.jbt-info-card.blue .jbt-info-card-label  { color: #1e40af; }
.jbt-info-card.blue .jbt-info-card-value  { color: #1e40af; }
.jbt-info-card.green   { border-top-color: #2d6a4f; }
.jbt-info-card.green .jbt-info-card-label { color: #1b4332; }
.jbt-info-card.green .jbt-info-card-value { color: #2d6a4f; }
.jbt-info-card.yellow  { border-top-color: #ca8a04; }
.jbt-info-card.yellow .jbt-info-card-label { color: #854d0e; }
.jbt-info-card.yellow .jbt-info-card-value { color: #854d0e; }
.jbt-info-card.red     { border-top-color: #dc2626; }
.jbt-info-card.red .jbt-info-card-label   { color: #991b1b; }
.jbt-info-card.red .jbt-info-card-value   { color: #991b1b; }
.jbt-info-card.orange  { border-top-color: #ea580c; }
.jbt-info-card.orange .jbt-info-card-label { color: #9a3412; }
.jbt-info-card.orange .jbt-info-card-value { color: #9a3412; }
.jbt-info-card.dark-green { border-top-color: #1b4332; }
.jbt-info-card.dark-green .jbt-info-card-label { color: #1b4332; }
.jbt-info-card.dark-green .jbt-info-card-value { color: #1b4332; }

/* Bar chart style */
.jbt-info-bar {
    margin: .5rem 0;
}
.jbt-info-bar-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .35rem 0;
}
.jbt-info-bar-label {
    font-size: .72rem;
    font-weight: 600;
    color: #1b4332;
    min-width: 80px;
    text-align: right;
}
.jbt-info-bar-track {
    flex: 1;
    height: 10px;
    background: #e5e7eb;
    border-radius: 5px;
    overflow: hidden;
}
.jbt-info-bar-fill {
    height: 100%;
    border-radius: 5px;
    background: #2d6a4f;
}
.jbt-info-bar-value {
    font-size: .72rem;
    font-weight: 600;
    color: #6b7280;
    min-width: 35px;
}

/* Zone-style rows */
.jbt-info-zone {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .65rem;
    border-radius: 8px;
    margin: .35rem 0;
    border-left: 4px solid #e5e7eb;
}
.jbt-info-zone.highlight {
    border-width: 4px;
    padding: .65rem;
    font-weight: 600;
}
.jbt-info-zone-name {
    font-size: .78rem;
    font-weight: 700;
    min-width: 55px;
}
.jbt-info-zone-range {
    font-size: .72rem;
    min-width: 90px;
    color: #6b7280;
}
.jbt-info-zone-desc {
    font-size: .72rem;
    flex: 1;
}

/* Scale bar */
.jbt-info-scale {
    margin: .5rem 0;
}
.jbt-info-scale-bar {
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    margin: .25rem 0;
}
.jbt-info-scale-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 600;
    color: #fff;
}
.jbt-info-scale-labels {
    display: flex;
    margin-top: .25rem;
}
.jbt-info-scale-labels span {
    font-size: .65rem;
    color: #6b7280;
    text-align: center;
}

/* Pyramid */
.jbt-pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin: .75rem 0;
}
.jbt-pyramid-tier {
    text-align: center;
    padding: .6rem .85rem;
}
.jbt-pyramid-tier:first-child { border-radius: 6px 6px 0 0; }
.jbt-pyramid-tier:last-child { border-radius: 0 0 8px 8px; }
.jbt-pyramid-tier-label {
    font-size: .78rem;
    font-weight: 700;
}
.jbt-pyramid-tier-items {
    font-size: .7rem;
    margin-top: .15rem;
    opacity: .85;
}

/* Phase timeline */
.jbt-info-phases {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.jbt-info-phase {
    flex: 1;
    min-width: 140px;
    background: #fff;
    border-radius: 10px;
    padding: .75rem;
    border: 1px solid #e5e7eb;
    border-top: 3px solid #2d6a4f;
}
.jbt-info-phase-time {
    font-size: .72rem;
    font-weight: 700;
    color: #2d6a4f;
    margin: 0 0 .2rem;
}
.jbt-info-phase-name {
    font-size: .78rem;
    font-weight: 700;
    color: #1b4332;
    margin: 0 0 .2rem;
}
.jbt-info-phase-desc {
    font-size: .68rem;
    color: #6b7280;
    margin: 0;
}

.jbt-info-footer {
    font-size: .68rem;
    color: #9ca3af;
    text-align: center;
    margin: .75rem 0 0;
}

/* Tag badges */
.jbt-info-tags {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: .75rem;
}
.jbt-info-tag {
    padding: .3rem .7rem;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 600;
    background: #dcfce7;
    color: #1b4332;
}
.jbt-info-tag.active {
    background: #2d6a4f;
    color: #fff;
}

/* ─── Responsive ─── */
@media (max-width: 600px) {
    .jbt-tool {
        padding: 1.25rem;
        margin: 1rem;
        border-radius: 8px;
    }

    .jbt-row {
        flex-direction: column;
        gap: .75rem;
    }

    .jbt-field {
        min-width: 100%;
    }

    .jbt-title {
        font-size: 1.25rem;
    }

    .jbt-result-number {
        font-size: 2.5rem;
    }

    .jbt-options {
        gap: .35rem;
    }

    .jbt-tool button.jbt-opt {
        font-size: .78rem !important;
        padding: .45rem .7rem !important;
    }

    .jbt-zones-table {
        font-size: .8rem;
    }

    .jbt-info-grid, .jbt-info-phases {
        flex-direction: column;
    }
    .jbt-info-card, .jbt-info-phase {
        min-width: 100%;
    }
    .jbt-info-zone-range {
        display: none;
    }
    .jbt-info-bar-label {
        min-width: 60px;
        font-size: .65rem;
    }
}


/* Share Buttons (WhatsApp, E-Mail, Copy) */
.jbt-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.jbt-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    border: none;
    transition: background 0.2s ease, transform 0.2s ease;
    line-height: 1;
    font-family: inherit;
}
.jbt-share-btn:hover {
    transform: translateY(-1px);
}
.jbt-share-btn svg {
    flex-shrink: 0;
}
.jbt-share-wa {
    background: #25D366;
    color: #fff !important;
}
.jbt-share-wa:hover {
    background: #1ebe57;
    color: #fff !important;
}
.jbt-share-email {
    background: #555;
    color: #fff !important;
}
.jbt-share-email:hover {
    background: #333;
    color: #fff !important;
}
.jbt-share-copy {
    background: #e8e8e3;
    color: #333 !important;
}
.jbt-share-copy:hover {
    background: #ddd;
    color: #333 !important;
}
.jbt-share-copied {
    background: #22c55e !important;
    color: #fff !important;
}