/* ================================================================
   BARKLY QUIZ — BRAND-MATCHED DESIGN
   
   Direktno iz loga:
   — Krem pozadina    #F0EDE6
   — Tamna zelena     #3D5A3E  (telo psa, dominantna)
   — Srednja zelena   #587A47  (list, sekundarna)
   — Svetla zelena    #7FB069  (akcenti, hover)
   — Zlatna šapica    #C8922A  (CTA, highlight)
   — Tamni tekst      #2A332B
   ================================================================ */

:root {
    /* Brand core */
    --green-dark:   #3D5A3E;
    --green-mid:    #587A47;
    --green-light:  #7FB069;
    --green-pale:   #EEF4EA;
    --green-tint:   #E3EDE0;
    --gold:         #C8922A;
    --gold-light:   #E2AD50;
    --gold-pale:    #FBF3E3;

    /* Neutrals — krem iz loga */
    --cream:        #F0EDE6;
    --ivory:        #E9E5DC;
    --linen:        #DDD8CE;
    --stone:        #C4BEB3;
    --chalk:        #FAFAF7;

    /* Text */
    --ink:          #2A332B;
    --bark:         #5A5E52;
    --pebble:       #8E9186;

    /* Semantic alerts */
    --warn-bg:      #FBF3E3;
    --warn-text:    #7A5200;
    --warn-bdr:     #E8C87A;
    --alert-bg:     #FDF0E8;
    --alert-txt:    #7A3510;
    --alert-bdr:    #E8B490;

    /* Type */
    --font-d: 'Fraunces', Georgia, serif;
    --font-u: 'DM Sans', system-ui, sans-serif;

    /* Shape */
    --r-xs:   6px;
    --r-sm:   10px;
    --r-md:   14px;
    --r-lg:   20px;
    --r-xl:   26px;
    --r-pill: 100px;

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset samo za kviz elemente, NE za ceo sajt */
.vb-modal-overlay, .vb-modal-overlay *, 
.vb-trigger-wrap, .vb-trigger-wrap * { 
    margin: 0; padding: 0; box-sizing: border-box; 
}

/* ── TRIGGER ────────────────────────────────── */

.vb-trigger-wrap { display: inline-flex; }

.vb-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px 11px 14px;
    background: var(--green-dark);
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background 0.2s var(--ease), transform 0.15s;
    font-family: var(--font-u);
    white-space: nowrap;
    box-shadow: 0 2px 12px rgba(61,90,62,0.32);
}

.vb-trigger-btn:hover { background: var(--green-mid); transform: translateY(-1px); }
.vb-trigger-btn:active { transform: translateY(0); }

.vb-trigger-icon { font-size: 17px; line-height: 1; }

.vb-trigger-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--chalk);
    letter-spacing: -0.1px;
}

.vb-trigger-arrow {
    font-size: 14px;
    color: var(--gold-light);
    font-weight: 700;
    transition: transform 0.2s var(--ease);
}

.vb-trigger-btn:hover .vb-trigger-arrow { transform: translateX(3px); }

/* ── OVERLAY ────────────────────────────────── */

.vb-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(42, 51, 43, 0.65);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 999999 !important;
    display: flex !important;
    justify-content: center;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s var(--ease), visibility 0.28s;
    margin: 0 !important;
    padding: 0 !important;
}

.vb-modal-overlay.active { opacity: 1; visibility: visible; }

/* ── SHEET ──────────────────────────────────── */

.vb-modal {
    background: var(--cream);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 48px rgba(42,51,43,0.18);
    width: 100%;
    max-height: 93vh;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    transform: translateY(100%);
    transition: transform 0.38s var(--ease);
    font-family: var(--font-u);
    -webkit-overflow-scrolling: touch;
}

.vb-modal-overlay.active .vb-modal { transform: translateY(0); }

/* Handle */
.vb-modal::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: var(--stone);
    border-radius: 2px;
    margin: 12px auto 0;
}

/* ── INNER ───────────────────────────────────── */

.vb-modal-inner { padding: 20px 20px 88px; }

/* ── CLOSE ──────────────────────────────────── */

.vb-close-btn {
    position: absolute;
    top: 14px; right: 14px;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--green-tint);
    color: var(--green-dark);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-u);
    z-index: 10;
}

.vb-close-btn:hover {
    background: var(--alert-bg);
    color: var(--alert-txt);
    transform: rotate(90deg);
}

/* ── BRAND HEADER ───────────────────────────── */

.vb-brand {
    text-align: center;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--linen);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Logo slika ako postoji */
.vb-brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.vb-brand h1 {
    font-family: var(--font-d);
    font-size: 21px;
    color: var(--green-dark);
    letter-spacing: 5px;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

.vb-brand h1 span { color: var(--gold); }

.vb-brand p {
    color: var(--pebble);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
}

/* ── PROGRESS ────────────────────────────────── */

.vb-progress-wrap {
    padding: 12px 20px 0;
    margin-bottom: 2px;
}

.vb-progress-steps { display: none; }

.vb-progress-bar {
    height: 3px;
    background: var(--linen);
    border-radius: 2px;
    overflow: hidden;
}

.vb-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green-dark), var(--gold));
    border-radius: 2px;
    transition: width 0.5s var(--ease);
    width: 0%;
}

.vb-progress-label {
    text-align: right;
    font-size: 10px;
    color: var(--pebble);
    margin-top: 5px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* ── QUESTION ────────────────────────────────── */

.vb-question { display: none; }

.vb-question.active {
    display: block;
    animation: vbIn 0.28s var(--ease);
}

.vb-question-header { margin-bottom: 22px; padding-top: 2px; }

.vb-question-emoji {
    font-size: 28px;
    display: block;
    margin-bottom: 10px;
    line-height: 1;
}

.vb-question-header h2 {
    font-family: var(--font-d);
    font-size: 26px;
    color: var(--ink);
    margin-bottom: 7px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.4px;
}

.vb-question-header p {
    color: var(--bark);
    font-size: 14px;
    line-height: 1.55;
}

/* ── INPUTS ─────────────────────────────────── */

.vb-input-wrap { margin-bottom: 16px; }

.vb-input-wrap input,
.vb-input-wrap textarea {
    width: 100%;
    padding: 15px 16px;
    background: var(--chalk);
    border: 1.5px solid var(--stone);
    border-radius: var(--r-md);
    font-size: 16px;
    color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: var(--font-u);
    -webkit-appearance: none;
}

.vb-input-wrap textarea {
    resize: none;
    height: 88px;
    line-height: 1.55;
}

.vb-input-wrap input::placeholder,
.vb-input-wrap textarea::placeholder { color: var(--pebble); }

.vb-input-wrap input:focus,
.vb-input-wrap textarea:focus {
    outline: none;
    border-color: var(--green-dark);
    box-shadow: 0 0 0 3px rgba(61,90,62,0.12);
}

.vb-input-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--pebble);
    margin-bottom: 7px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* ── AUTOCOMPLETE ────────────────────────────── */

.vb-breed-wrap { position: relative; }

.vb-breed-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--chalk);
    border: 1.5px solid var(--stone);
    border-radius: var(--r-md);
    box-shadow: 0 8px 28px rgba(42,51,43,0.12);
    z-index: 100;
    max-height: 156px; /* tačno 4 stavke: 4 × (12px+14px+12px+1px border) = 156px */
    overflow-y: auto;
    display: none;
}

.vb-breed-suggestions.open { display: block; }

.vb-breed-item {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
    transition: background 0.15s;
    border-bottom: 1px solid var(--linen);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vb-breed-item:last-child { border-bottom: none; }
.vb-breed-item:hover { background: var(--green-pale); }
.vb-breed-item span { font-size: 12px; color: var(--pebble); }

/* ── OPTIONS ─────────────────────────────────── */

.vb-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.vb-option { position: relative; }

.vb-option input[type="radio"] {
    position: absolute;
    opacity: 0; width: 0; height: 0;
}

.vb-option label {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: var(--chalk);
    border: 1.5px solid var(--stone);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
    gap: 14px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.vb-option label:active { opacity: 0.85; }

.vb-option label:hover {
    border-color: var(--green-light);
    background: var(--green-pale);
}

.vb-option input[type="radio"]:checked ~ label {
    background: var(--green-dark);
    border-color: var(--green-dark);
    box-shadow: 0 4px 16px rgba(61,90,62,0.22);
}

.vb-option-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    line-height: 1;
}

.vb-option-text { flex: 1; }

.vb-option-text strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
    letter-spacing: -0.15px;
}

.vb-option input[type="radio"]:checked ~ label .vb-option-text strong {
    color: #F5F5EF;
}

.vb-option-text small {
    font-size: 12px;
    color: var(--bark);
    line-height: 1.4;
}

.vb-option input[type="radio"]:checked ~ label .vb-option-text small {
    color: rgba(245,245,239,0.6);
}

.vb-option-radio {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--stone);
    flex-shrink: 0;
    transition: all 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--chalk);
}

.vb-option input[type="radio"]:checked ~ label .vb-option-radio {
    border-color: rgba(245,245,239,0.35);
    background: rgba(245,245,239,0.15);
}

.vb-option input[type="radio"]:checked ~ label .vb-option-radio::after {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
}

/* ── MEAT GRID ───────────────────────────────── */

.vb-meat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.vb-meat-item { position: relative; }

.vb-meat-item input[type="checkbox"] {
    position: absolute;
    opacity: 0; width: 0; height: 0;
}

.vb-meat-item label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 8px 12px;
    background: var(--chalk);
    border: 1.5px solid var(--stone);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
    text-align: center;
    gap: 6px;
    min-height: 82px;
    -webkit-tap-highlight-color: transparent;
}

.vb-meat-item label:hover {
    border-color: var(--green-light);
    background: var(--green-pale);
}

.vb-meat-item input[type="checkbox"]:checked ~ label {
    background: var(--green-dark);
    border-color: var(--green-dark);
    box-shadow: 0 3px 12px rgba(61,90,62,0.22);
}

.vb-meat-emoji { font-size: 24px; line-height: 1; }

.vb-meat-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}

.vb-meat-item input[type="checkbox"]:checked ~ label .vb-meat-name {
    color: #F5F5EF;
}

.vb-meat-check {
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 1.5px solid var(--stone);
    background: var(--chalk);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.18s;
}

.vb-meat-item input[type="checkbox"]:checked ~ label .vb-meat-check {
    background: rgba(245,245,239,0.2);
    border-color: rgba(245,245,239,0.4);
}

.vb-meat-item input[type="checkbox"]:checked ~ label .vb-meat-check::after {
    content: '✓';
    font-size: 9px;
    font-weight: 700;
    color: var(--gold-light);
}

/* ── ALLERGY TAGS ────────────────────────────── */

.vb-allergy-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}

.vb-allergy-tag {
    padding: 8px 13px;
    background: var(--chalk);
    border: 1.5px solid var(--stone);
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.18s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.vb-allergy-tag:hover { border-color: var(--green-light); background: var(--green-pale); }

.vb-allergy-tag.selected {
    background: var(--green-dark);
    border-color: var(--green-dark);
    color: #F5F5EF;
}

/* ── DIVIDER ─────────────────────────────────── */

.vb-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; }

.vb-divider::before, .vb-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--linen);
}

.vb-divider span {
    font-size: 10px;
    color: var(--pebble);
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── WEIGHT SLIDER ───────────────────────────── */

.vb-slider-wrap { padding: 4px 0; }

.vb-weight-display-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 12px;
}

.vb-weight-minus, .vb-weight-plus {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--stone);
    background: var(--chalk);
    color: var(--green-dark);
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font-u);
}

.vb-weight-minus:hover, .vb-weight-plus:hover {
    background: var(--green-dark);
    color: #F5F5EF;
    border-color: var(--green-dark);
}

.vb-weight-minus:active, .vb-weight-plus:active { transform: scale(0.9); }

.vb-weight-center {
    display: flex; align-items: baseline; gap: 4px;
    min-width: 160px; justify-content: center;
}

#vbWeightInput {
    font-family: var(--font-d);
    font-size: 70px;
    font-weight: 700;
    color: var(--green-dark);
    width: 160px;
    border: none;
    background: transparent;
    text-align: center;
    outline: none;
    padding: 0;
    line-height: 1;
    letter-spacing: -3px;
    -moz-appearance: textfield;
    -webkit-appearance: none;
}

#vbWeightInput::-webkit-outer-spin-button,
#vbWeightInput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.vb-weight-unit-label {
    font-family: var(--font-u);
    font-size: 19px;
    font-weight: 500;
    color: var(--pebble);
    padding-bottom: 10px;
}

.vb-weight-category {
    text-align: center;
    padding: 6px 18px;
    background: var(--green-tint);
    border: 1px solid var(--green-pale);
    border-radius: var(--r-pill);
    display: inline-block;
    width: 100%;
    color: var(--green-dark);
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 18px;
    transition: all 0.3s;
}

.vb-slider {
    -webkit-appearance: none;
    width: 100%; height: 4px;
    border-radius: 2px;
    background: var(--stone);
    outline: none;
    margin-bottom: 0;
    cursor: pointer;
}

.vb-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--green-dark);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(61,90,62,0.35);
    border: 3px solid var(--chalk);
    transition: transform 0.15s;
    margin-top: -10px; /* centra 24px thumb na 4px track-u: -(24-4)/2 = -10 */
}

.vb-slider::-webkit-slider-thumb:active { transform: scale(1.2); }

.vb-slider::-moz-range-thumb {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--green-dark);
    border: 3px solid var(--chalk);
}

.vb-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--pebble);
    margin-bottom: 20px;
}

.vb-quick-weights { margin-top: 4px; }

.vb-quick-label {
    display: block;
    font-size: 10px;
    color: var(--pebble);
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.vb-quick-btns { display: flex; gap: 6px; flex-wrap: wrap; }

.vb-quick-btn {
    flex: 1; min-width: 48px;
    padding: 8px 4px;
    background: var(--chalk);
    border: 1.5px solid var(--stone);
    border-radius: var(--r-xs);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.18s;
    font-family: var(--font-u);
    -webkit-tap-highlight-color: transparent;
}

.vb-quick-btn:hover { background: var(--green-pale); border-color: var(--green-light); color: var(--green-dark); }
.vb-quick-btn.selected { background: var(--green-dark); border-color: var(--green-dark); color: #F5F5EF; }

/* ── NAV BUTTONS ─────────────────────────────── */

.vb-btn-group { display: flex; gap: 10px; margin-top: 18px; }

.vb-btn-next {
    flex: 1;
    padding: 15px 24px;
    border-radius: var(--r-pill);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    border: none;
    font-family: var(--font-u);
    background: var(--green-dark);
    color: #F5F5EF;
    letter-spacing: -0.1px;
    box-shadow: 0 2px 10px rgba(61,90,62,0.28);
    -webkit-tap-highlight-color: transparent;
}

.vb-btn-next:hover:not(:disabled) {
    background: var(--green-mid);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(61,90,62,0.35);
}

.vb-btn-next:active:not(:disabled) { transform: translateY(0); }
.vb-btn-next:disabled { opacity: 0.28; cursor: not-allowed; transform: none; box-shadow: none; }

.vb-btn-back {
    padding: 15px 18px;
    border-radius: var(--r-pill);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s;
    font-family: var(--font-u);
    background: transparent;
    color: var(--bark);
    border: 1.5px solid var(--stone);
    -webkit-tap-highlight-color: transparent;
}

.vb-btn-back:hover { background: var(--green-pale); border-color: var(--green-light); color: var(--green-dark); }

/* ── LOADING ─────────────────────────────────── */

.vb-loading { display: none; text-align: center; padding: 28px 0; }
.vb-loading.active { display: block; animation: vbIn 0.28s var(--ease); }

.vb-loading-title {
    font-family: var(--font-d);
    font-size: 22px;
    color: var(--ink);
    margin-bottom: 5px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.vb-loading-subtitle {
    font-size: 13px; color: var(--bark); margin-bottom: 32px;
}

.vb-dna {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    margin-bottom: 32px;
    height: 52px;
}

.vb-dna-bar {
    width: 4px; border-radius: 2px;
    background: var(--green-dark);
    animation: vbWave 1.1s ease-in-out infinite;
}

.vb-dna-bar:nth-child(even) { background: var(--gold); }
.vb-dna-bar:nth-child(1)  { animation-delay: 0s; }
.vb-dna-bar:nth-child(2)  { animation-delay: 0.09s; }
.vb-dna-bar:nth-child(3)  { animation-delay: 0.18s; }
.vb-dna-bar:nth-child(4)  { animation-delay: 0.27s; }
.vb-dna-bar:nth-child(5)  { animation-delay: 0.36s; }
.vb-dna-bar:nth-child(6)  { animation-delay: 0.45s; }
.vb-dna-bar:nth-child(7)  { animation-delay: 0.54s; }
.vb-dna-bar:nth-child(8)  { animation-delay: 0.63s; }
.vb-dna-bar:nth-child(9)  { animation-delay: 0.72s; }
.vb-dna-bar:nth-child(10) { animation-delay: 0.81s; }
.vb-dna-bar:nth-child(11) { animation-delay: 0.90s; }
.vb-dna-bar:nth-child(12) { animation-delay: 0.99s; }

@keyframes vbWave {
    0%, 100% { height: 5px; opacity: 0.22; }
    50%       { height: 46px; opacity: 1; }
}

.vb-loading-steps {
    display: flex; flex-direction: column; gap: 7px;
    margin-bottom: 24px; text-align: left;
}

.vb-loading-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: var(--chalk);
    border: 1px solid var(--linen);
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--pebble);
    opacity: 0.4;
    transition: all 0.4s var(--ease);
}

.vb-loading-step.done {
    opacity: 1;
    border-color: var(--green-tint);
    background: var(--green-pale);
    color: var(--green-dark);
}

.vb-loading-step.active {
    opacity: 1;
    border-color: var(--gold);
    background: var(--gold-pale);
    color: var(--ink);
}

.vb-step-icon {
    font-size: 15px; flex-shrink: 0;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: var(--linen);
    border-radius: 50%;
    transition: background 0.3s;
}

.vb-loading-step.active .vb-step-icon { background: rgba(200,146,42,0.15); }
.vb-loading-step.done  .vb-step-icon  { background: var(--green-tint); }

.vb-step-check { margin-left: auto; font-size: 12px; opacity: 0; transition: opacity 0.3s; color: var(--green-mid); }
.vb-loading-step.done .vb-step-check { opacity: 1; }

.vb-loading-bar-wrap { background: var(--linen); border-radius: 2px; height: 3px; overflow: hidden; margin-bottom: 8px; }
.vb-loading-bar-fill { height: 100%; background: linear-gradient(90deg, var(--green-dark), var(--gold)); transition: width 0.5s var(--ease); width: 0%; }
.vb-loading-percent { font-size: 10px; font-weight: 600; color: var(--pebble); text-align: right; }

/* ── RESULTS ─────────────────────────────────── */

.vb-results { display: none; }
.vb-results.active { display: block; animation: vbIn 0.32s var(--ease); }

.vb-results-header { text-align: center; margin-bottom: 24px; }

.vb-results-emoji { font-size: 38px; display: block; margin-bottom: 12px; line-height: 1; }

.vb-results-header h2 {
    font-family: var(--font-d);
    font-size: 26px;
    color: var(--ink);
    margin-bottom: 6px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.4px;
}

.vb-results-header h2 span { color: var(--gold); }
.vb-results-header p { color: var(--bark); font-size: 14px; }

/* ── SUMMARY ─────────────────────────────────── */

.vb-summary-box {
    background: var(--chalk);
    border: 1px solid var(--linen);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    margin-bottom: 14px;
}

.vb-summary-box h4 {
    font-size: 10px;
    font-weight: 600;
    color: var(--pebble);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 13px;
}

.vb-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 7px 0;
    border-bottom: 1px solid var(--linen);
    font-size: 13px;
}

.vb-summary-row:last-child { border-bottom: none; padding-bottom: 0; }
.vb-summary-row span:first-child { color: var(--bark); }
.vb-summary-row span:last-child { font-weight: 600; color: var(--ink); text-align: right; max-width: 58%; }

/* ── PRODUCT CARD ────────────────────────────── */

.vb-product-card {
    background: var(--chalk);
    border: 1px solid var(--linen);
    border-radius: var(--r-lg);
    padding: 20px;
    margin: 14px 0;
    position: relative;
    overflow: hidden;
}

.vb-product-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--green-dark), var(--green-light), var(--gold));
}

.vb-product-top {
    display: flex; align-items: flex-start;
    gap: 14px; margin-bottom: 14px;
}

.vb-product-emoji { font-size: 40px; flex-shrink: 0; line-height: 1; }

.vb-product-info h3 {
    font-family: var(--font-d);
    font-size: 19px;
    color: var(--ink);
    margin-bottom: 4px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.vb-product-info p { color: var(--bark); font-size: 13px; line-height: 1.5; }

.vb-product-details { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }

.vb-product-tag {
    background: var(--green-pale);
    color: var(--green-dark);
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--green-tint);
}

.vb-product-link {
    display: block;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--green-dark);
    text-decoration: none;
    padding: 10px 16px;
    margin: 0 0 14px;
    background: var(--green-pale);
    border: 1px solid var(--green-tint);
    border-radius: var(--r-md);
    transition: background 0.2s, transform 0.2s;
}
.vb-product-link:hover {
    background: var(--green-tint);
    transform: translateY(-1px);
}

/* ── PRICE BREAKDOWN ─────────────────────────── */

.vb-price-breakdown {
    background: var(--ivory);
    border: 1px solid var(--linen);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 14px;
}

.vb-price-breakdown h4 {
    font-size: 10px;
    font-weight: 600;
    color: var(--pebble);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.vb-breakdown-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 0; font-size: 13px;
    border-bottom: 1px solid var(--linen);
}

.vb-breakdown-row:last-child { border-bottom: none; }
.vb-breakdown-row span:first-child { color: var(--bark); }
.vb-breakdown-row span:last-child { font-weight: 600; color: var(--ink); }

.vb-breakdown-total {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0 0; margin-top: 8px;
    border-top: 1.5px solid var(--stone);
    font-size: 14px; font-weight: 600;
}

.vb-breakdown-total span:first-child { color: var(--ink); }

.vb-breakdown-total span:last-child {
    color: var(--gold);
    font-size: 19px;
    font-family: var(--font-d);
    font-weight: 700;
    letter-spacing: -0.4px;
}

.vb-breakdown-weekly {
    display: flex; justify-content: space-between;
    padding: 5px 0 0; font-size: 12px; color: var(--pebble);
}

.vb-breakdown-package {
    text-align: center; padding: 8px 12px;
    background: var(--green-pale);
    border-radius: var(--r-xs);
    margin-bottom: 12px; font-size: 12px;
    color: var(--green-dark); font-weight: 600;
    border: 1px solid var(--green-tint);
}

/* ── PRICE HERO ──────────────────────────────── */

.vb-product-price {
    text-align: center; margin-bottom: 14px;
    padding: 20px 16px;
    background: var(--green-dark);
    border-radius: var(--r-md);
    position: relative;
    overflow: hidden;
}

/* Suptilni pattern kao u logu */
.vb-product-price::before {
    content: '';
    position: absolute;
    top: -20px; right: -20px;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: rgba(200,146,42,0.15);
}

.vb-product-price::after {
    content: '';
    position: absolute;
    bottom: -15px; left: -10px;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(127,176,105,0.12);
}

.vb-product-price span {
    font-family: var(--font-d);
    font-size: 42px; color: var(--gold-light);
    font-weight: 700; letter-spacing: -1.5px;
    display: block; line-height: 1;
    position: relative; z-index: 1;
}

.vb-product-price small {
    font-size: 12px; color: rgba(245,245,239,0.6);
    display: block; margin-top: 5px;
    position: relative; z-index: 1;
}

/* ── CTA ─────────────────────────────────────── */

.vb-subscribe-btn {
    display: block; width: 100%; text-align: center;
    background: var(--gold);
    color: var(--chalk);
    padding: 16px 28px; border-radius: var(--r-pill);
    text-decoration: none; font-weight: 700; font-size: 16px;
    font-family: var(--font-u);
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 3px 14px rgba(200,146,42,0.35);
    letter-spacing: -0.1px;
    -webkit-tap-highlight-color: transparent;
    border: none; cursor: pointer;
}

.vb-subscribe-btn:hover {
    background: #B07D20;
    color: var(--chalk); text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(200,146,42,0.42);
}

.vb-subscribe-btn:active { transform: translateY(0); }

/* ── TRUST ───────────────────────────────────── */

.vb-trust-badges {
    margin-top: 12px; padding: 14px 16px;
    background: var(--green-pale);
    border: 1px solid var(--green-tint);
    border-radius: var(--r-md);
    display: flex; flex-direction: column; gap: 10px;
}

.vb-trust-item {
    display: flex; align-items: flex-start;
    gap: 10px; font-size: 12px; color: var(--green-dark); line-height: 1.5;
}

.vb-trust-icon { font-size: 13px; flex-shrink: 0; margin-top: 1px; }

/* ── RETAKE ──────────────────────────────────── */

.vb-btn-retake {
    display: block; width: 100%; margin-top: 10px; padding: 13px;
    background: transparent; border: 1px solid var(--linen);
    border-radius: var(--r-pill); color: var(--pebble);
    font-size: 13px; font-weight: 500; font-family: var(--font-u);
    cursor: pointer; transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.vb-btn-retake:hover { border-color: var(--green-light); color: var(--green-dark); background: var(--green-pale); }

.vb-view-all {
    display: none; text-align: center; margin-top: 14px;
    color: var(--green-mid); text-decoration: none;
    font-weight: 500; font-size: 14px; padding: 8px;
    transition: color 0.2s;
}

.vb-view-all:hover { color: var(--green-dark); }

/* ── PORTION ADJUSTER ────────────────────────── */

.vb-portion-question {
    background: var(--green-pale);
    border: 1px solid var(--green-tint);
    border-radius: var(--r-md); padding: 16px;
    margin-bottom: 14px; text-align: center;
}

.vb-portion-question p {
    font-size: 14px; font-weight: 500; color: var(--ink);
    margin-bottom: 14px; line-height: 1.5;
}

.vb-portion-question p span { color: var(--gold); font-size: 16px; font-weight: 700; }

.vb-portion-btns {
    display: flex; gap: 10px; justify-content: center; padding: 0 0 4px;
}

.vb-portion-btn-yes {
    flex: 1; padding: 13px 18px;
    background: var(--green-dark); color: #F5F5EF;
    border: none; border-radius: var(--r-pill);
    font-size: 14px; font-weight: 600; cursor: pointer;
    font-family: var(--font-u); transition: all 0.2s;
    min-width: 110px; -webkit-tap-highlight-color: transparent;
}

.vb-portion-btn-yes:hover { background: var(--green-mid); transform: translateY(-1px); }

.vb-portion-btn-change {
    flex: 1; padding: 13px 18px;
    background: transparent; color: var(--green-dark);
    border: 1.5px solid var(--green-light);
    border-radius: var(--r-pill);
    font-size: 14px; font-weight: 600; cursor: pointer;
    font-family: var(--font-u); transition: all 0.2s;
    min-width: 110px; -webkit-tap-highlight-color: transparent;
}

.vb-portion-btn-change:hover { background: var(--green-pale); transform: translateY(-1px); }

.vb-portion-adjuster {
    display: none; background: var(--chalk);
    border: 1px solid var(--linen); border-radius: var(--r-md);
    padding: 18px; margin-bottom: 14px;
}

.vb-portion-adjuster.open { display: block; animation: vbIn 0.22s var(--ease); }

.vb-portion-adjuster h4 {
    font-family: var(--font-d); font-size: 16px; color: var(--ink);
    margin-bottom: 4px; text-align: center; font-weight: 600;
}

.vb-portion-recommended { text-align: center; font-size: 12px; color: var(--pebble); margin-bottom: 16px; }
.vb-portion-recommended span { font-weight: 600; color: var(--green-mid); }

.vb-portion-display { text-align: center; margin-bottom: 10px; }

.vb-portion-display span:first-child {
    font-family: var(--font-d); font-size: 44px; color: var(--green-dark);
    font-weight: 700; line-height: 1; letter-spacing: -1.5px;
}

.vb-portion-display span:last-child { font-size: 16px; color: var(--pebble); margin-left: 3px; }

.vb-portion-slider {
    -webkit-appearance: none; width: 100%; height: 4px;
    border-radius: 2px; background: var(--stone); outline: none;
    margin-bottom: 6px; cursor: pointer;
}

.vb-portion-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 24px; height: 24px;
    border-radius: 50%; background: var(--green-dark); cursor: pointer;
    box-shadow: 0 2px 8px rgba(61,90,62,0.3); border: 3px solid var(--chalk);
}

.vb-portion-slider::-moz-range-thumb {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--green-dark); border: 3px solid var(--chalk);
}

.vb-portion-slider-labels {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--pebble); margin-bottom: 14px;
}

.vb-portion-input-wrap {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}

.vb-portion-input-wrap label { font-size: 13px; font-weight: 500; color: var(--bark); white-space: nowrap; }

.vb-portion-input-wrap input {
    flex: 1; padding: 10px 14px; background: var(--ivory);
    border: 1.5px solid var(--stone); border-radius: var(--r-xs);
    font-size: 15px; font-weight: 700; color: var(--ink);
    font-family: var(--font-u); text-align: center;
    transition: all 0.2s; -webkit-appearance: none;
}

.vb-portion-input-wrap input:focus {
    outline: none; border-color: var(--green-dark);
    box-shadow: 0 0 0 3px rgba(61,90,62,0.1);
}

.vb-portion-input-wrap span { font-size: 14px; font-weight: 600; color: var(--pebble); }

.vb-portion-warning {
    padding: 10px 14px; border-radius: var(--r-xs);
    font-size: 13px; font-weight: 500; margin-bottom: 12px;
    text-align: center; display: none; line-height: 1.45;
    border: 1px solid transparent;
}

.vb-portion-warning.show { display: block; animation: vbIn 0.22s var(--ease); }
.vb-portion-warning.ideal      { background: var(--green-pale); color: var(--green-dark); border-color: var(--green-tint); }
.vb-portion-warning.low-mild   { background: var(--warn-bg);   color: var(--warn-text);  border-color: var(--warn-bdr); }
.vb-portion-warning.low-severe { background: var(--alert-bg);  color: var(--alert-txt);  border-color: var(--alert-bdr); }
.vb-portion-warning.high-mild  { background: var(--warn-bg);   color: var(--warn-text);  border-color: var(--warn-bdr); }
.vb-portion-warning.high-severe{ background: var(--alert-bg);  color: var(--alert-txt);  border-color: var(--alert-bdr); }

.vb-portion-action-btns { display: flex; gap: 8px; }

.vb-portion-btn-apply {
    flex: 1; padding: 12px; background: var(--green-dark); color: #F5F5EF;
    border: none; border-radius: var(--r-pill); font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: var(--font-u); transition: all 0.2s;
}

.vb-portion-btn-apply:hover { background: var(--green-mid); transform: translateY(-1px); }

.vb-portion-btn-reset {
    padding: 12px 16px; background: transparent; color: var(--pebble);
    border: 1px solid var(--linen); border-radius: var(--r-pill);
    font-size: 13px; font-weight: 500; cursor: pointer;
    font-family: var(--font-u); transition: all 0.2s; white-space: nowrap;
}

.vb-portion-btn-reset:hover { border-color: var(--green-light); color: var(--green-dark); }

/* ── INLINE COMPONENTS ───────────────────────── */

.vb-giant-alert {
    background: var(--alert-bg);
    border: 1.5px solid var(--alert-bdr);
    border-radius: var(--r-md);
    padding: 16px 18px;
    margin-bottom: 14px;
    color: var(--alert-txt);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    display: none;
}

.vb-treats-warning {
    background: var(--warn-bg);
    border: 1.5px solid var(--warn-bdr);
    border-radius: var(--r-md);
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--warn-text);
    line-height: 1.55;
    display: none;
}

.vb-poop-meter {
    background: var(--ivory);
    border: 1px solid var(--linen);
    border-radius: var(--r-md);
    padding: 16px 18px;
    margin-bottom: 14px;
}

.vb-poop-meter-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--pebble);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.vb-poop-meter-sub {
    font-size: 12px; color: var(--bark);
    margin-bottom: 12px; line-height: 1.55;
}

.vb-poop-cols { display: flex; gap: 8px; align-items: stretch; margin-bottom: 12px; }

.vb-poop-col {
    flex: 1; background: var(--chalk);
    border: 1px solid var(--linen);
    border-radius: var(--r-sm);
    padding: 10px 8px; text-align: center;
}

.vb-poop-col-bad { border-color: var(--alert-bdr); background: var(--alert-bg); }

.vb-poop-col-icon { font-size: 20px; margin-bottom: 4px; line-height: 1; }

.vb-poop-col-title {
    font-size: 11px; font-weight: 700; margin-bottom: 4px;
}

.vb-poop-col-bad  .vb-poop-col-title { color: var(--alert-txt); }
.vb-poop-col-good .vb-poop-col-title { color: var(--green-dark); }

.vb-poop-col-text { font-size: 11px; color: var(--bark); line-height: 1.4; }

.vb-poop-arrow { display: flex; align-items: center; font-size: 16px; color: var(--stone); }

.vb-poop-pills { display: flex; flex-wrap: wrap; gap: 5px; }

.vb-poop-pill {
    padding: 3px 9px;
    background: var(--green-pale);
    border: 1px solid var(--green-tint);
    border-radius: var(--r-pill);
    font-size: 11px; font-weight: 600; color: var(--green-dark);
}

/* ── VOUCHER ─────────────────────────────────── */

.vb-voucher {
    background: var(--green-dark);
    border-radius: var(--r-lg);
    padding: 22px 20px;
    margin-bottom: 14px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Logo-inspired circles u pozadini */
.vb-voucher::before {
    content: '';
    position: absolute;
    top: -30px; right: -20px;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: rgba(200,146,42,0.18);
    pointer-events: none;
}

.vb-voucher::after {
    content: '';
    position: absolute;
    bottom: -25px; left: -15px;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: rgba(127,176,105,0.14);
    pointer-events: none;
}

.vb-voucher-eyebrow {
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(245,245,239,0.5);
    margin-bottom: 8px;
    font-weight: 500;
    position: relative; z-index: 1;
}

.vb-voucher-name {
    font-family: var(--font-d);
    font-size: 32px;
    font-weight: 700;
    color: #F5F5EF;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
    line-height: 1.1;
    position: relative; z-index: 1;
}

.vb-voucher-product {
    font-size: 13px;
    color: rgba(245,245,239,0.55);
    margin-bottom: 14px;
    position: relative; z-index: 1;
}

.vb-voucher-grams {
    display: inline-block;
    background: var(--gold);
    border-radius: var(--r-sm);
    padding: 8px 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--chalk);
    margin-bottom: 14px;
    position: relative; z-index: 1;
    box-shadow: 0 2px 10px rgba(200,146,42,0.4);
}

.vb-voucher-footer {
    font-size: 10px;
    color: rgba(245,245,239,0.35);
    letter-spacing: 1px;
    position: relative; z-index: 1;
}

/* Neutered note */
.vb-neutered-note {
    font-size: 11px;
    color: var(--bark);
    padding: 8px 12px;
    margin-top: 4px;
    background: var(--ivory);
    border-radius: var(--r-sm);
    line-height: 1.55;
    display: none;
}

/* ── WEIGHT INPUT JS COLOR FIX ───────────────── */
/* Used in JS: input.style.color */

/* ── TRANSITION GUIDE ────────────────────────── */

.vb-transition-guide {
    background: var(--chalk);
    border: 1px solid var(--linen);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    margin-top: 12px;
}

.vb-transition-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--pebble);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.vb-transition-sub {
    font-size: 12px;
    color: var(--bark);
    margin-bottom: 14px;
    line-height: 1.5;
}

.vb-transition-days {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 12px;
}

.vb-tday-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--bark);
    width: 56px;
    flex-shrink: 0;
}

.vb-tday {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vb-tday-bar {
    flex: 1;
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    height: 26px;
    gap: 2px;
}

.vb-tday-old {
    background: var(--linen);
    color: var(--pebble);
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0 4px;
    white-space: nowrap;
}

.vb-tday-new {
    background: var(--green-dark);
    color: rgba(245,245,239,0.9);
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0 4px;
    white-space: nowrap;
}

.vb-transition-note {
    font-size: 11px;
    color: var(--pebble);
    line-height: 1.5;
    font-style: italic;
}

/* ── SMART SUB ───────────────────────────────── */

.vb-smart-sub {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--gold-pale);
    border: 1px solid var(--warn-bdr);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-top: 12px;
}

.vb-smart-sub-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 1px;
}

.vb-smart-sub-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vb-smart-sub-text strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    display: block;
}

.vb-smart-sub-text span {
    font-size: 12px;
    color: var(--bark);
    line-height: 1.55;
}

/* ── NRC CLAIM ───────────────────────────────── */

.vb-nrc-claim {
    text-align: center;
    font-size: 11px;
    color: var(--pebble);
    line-height: 1.6;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--ivory);
    border-radius: var(--r-sm);
    border: 1px solid var(--linen);
}

.vb-nrc-claim strong {
    color: var(--green-dark);
}

/* ── ANIMATIONS ──────────────────────────────── */

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

/* ── RESPONSIVE ──────────────────────────────── */

@media (min-width: 600px) {
    .vb-modal-overlay { align-items: center; }
    .vb-modal {
        border-radius: var(--r-xl);
        max-width: 520px; max-height: 90vh;
        transform: translateY(14px) scale(0.98); opacity: 0;
        transition: all 0.32s var(--ease);
    }
    .vb-modal-overlay.active .vb-modal { transform: translateY(0) scale(1); opacity: 1; }
    .vb-meat-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 380px) {
    .vb-modal-inner { padding: 16px 16px 80px; }
    #vbWeightInput { font-size: 58px; width: 110px; -moz-appearance: textfield; }
    #vbWeightInput::-webkit-outer-spin-button,
    #vbWeightInput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .vb-weight-minus, .vb-weight-plus { width: 38px; height: 38px; font-size: 19px; }
    .vb-portion-btns { flex-direction: column; }
    .vb-portion-btn-yes, .vb-portion-btn-change { min-width: auto; width: 100%; }
    .vb-question-header h2 { font-size: 22px; }
    .vb-product-price span { font-size: 36px; }
}

/* ── Checkout Spinner ────────────────────────── */
.vb-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2.5px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vbSpin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes vbSpin {
    to { transform: rotate(360deg); }
}


/* ── Breed Type Toggle ───────────────────────── */
.vb-breed-type-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}
.vb-breed-type-toggle .vb-option {
    flex: 1;
}
.vb-breed-type-toggle .vb-option label {
    justify-content: center;
    text-align: center;
    padding: 12px 14px;
}
.vb-breed-type-toggle .vb-option-icon {
    font-size: 18px;
}
.vb-breed-type-toggle .vb-option-text strong {
    font-size: 14px;
}
.vb-breed-type-toggle .vb-option-text small {
    font-size: 11px;
}

/* Parent breed inputs match main breed input style */
#vbParentBreed1,
#vbParentBreed2 {
    width: 100%;
    padding: 15px 16px;
    background: var(--chalk);
    border: 1.5px solid var(--stone);
    border-radius: var(--r-md);
    font-size: 16px;
    color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: var(--font-u);
    -webkit-appearance: none;
}
#vbParentBreed1:focus,
#vbParentBreed2:focus {
    outline: none;
    border-color: var(--green-dark);
    box-shadow: 0 0 0 3px rgba(61,90,62,0.12);
}
#vbParentBreed1::placeholder,
#vbParentBreed2::placeholder {
    color: var(--pebble);
}

#vbParentSuggestions1,
#vbParentSuggestions2 {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--chalk);
    border: 1.5px solid var(--stone);
    border-radius: var(--r-md);
    box-shadow: 0 8px 28px rgba(42,51,43,0.12);
    z-index: 100;
    max-height: 156px; /* tačno 4 stavke */
    overflow-y: auto;
    display: none;
}
#vbParentSuggestions1.open,
#vbParentSuggestions2.open {
    display: block;
}
/* ── SKIP BUTTON (email) ───────────────────────── */
.vb-btn-skip {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: var(--chalk);
    border: 1.5px solid var(--linen);
    border-radius: var(--r-pill);
    color: var(--pebble);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-u);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.vb-btn-skip:hover {
    background: var(--ivory);
    border-color: var(--green-tint);
    color: var(--green-dark);
}

/* ── DOG NAME INLINE ───────────────────────────── */
.vb-dog-name-inline {
    color: var(--green-dark);
    font-weight: inherit;
}

/* ════════════════════════════════════════════════
   QUIZ — CROSS-BROWSER & RESPONSIVE FIXES
   ════════════════════════════════════════════════ */

/* ── iOS: input font-size 16px sprečava zoom ──── */
.vb-input-wrap input,
.vb-input-wrap textarea,
#vbParentBreed1,
#vbParentBreed2 {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
}

/* ── iOS Safari: 100vh bug ────────────────────── */
.vb-modal {
    max-height: 93vh;
    max-height: 93dvh; /* dynamic viewport height — iOS 15.4+ */
}
@supports (-webkit-touch-callout: none) {
    .vb-modal {
        /* Na iOS Safari toolbar menja viewport visinu */
        max-height: calc(100vh - env(safe-area-inset-bottom) - 20px);
    }
}

/* ── iOS: safe-area za home bar (iPhone X+) ───── */
.vb-modal-inner {
    padding: 20px 20px calc(88px + env(safe-area-inset-bottom));
}
@media (max-width: 380px) {
    .vb-modal-inner {
        padding: 16px 16px calc(80px + env(safe-area-inset-bottom));
    }
}

/* ── Safari: backdrop-filter fallback ─────────── */
@supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
    .vb-modal-overlay {
        background: rgba(42, 51, 43, 0.85);
    }
}

/* ── Safari: -webkit-backdrop-filter ─────────── */
.vb-modal-overlay {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* ── Safari: appearance na range input ────────── */
.vb-slider,
.vb-portion-slider {
    -webkit-appearance: none;
    appearance: none;
}

/* ── Safari: range slider thumb ──────────────── */
.vb-slider::-webkit-slider-runnable-track,
.vb-portion-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: var(--stone);
    cursor: pointer;
}

/* Firefox range thumb */
.vb-slider::-moz-range-track,
.vb-portion-slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--stone);
    cursor: pointer;
    border: none;
}
.vb-slider::-moz-range-thumb,
.vb-portion-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--green-dark);
    border: 3px solid var(--chalk);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(61,90,62,0.35);
}

/* ── Safari: number input spinners ───────────── */
#vbWeightInput,
.vb-portion-input-wrap input {
    -moz-appearance: textfield; /* Firefox */
}
#vbWeightInput::-webkit-outer-spin-button,
#vbWeightInput::-webkit-inner-spin-button,
.vb-portion-input-wrap input::-webkit-outer-spin-button,
.vb-portion-input-wrap input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Safari: button reset ──────────────────────── */
.vb-btn-next,
.vb-btn-back,
.vb-btn-retake,
.vb-btn-skip,
.vb-close-btn,
.vb-portion-btn-yes,
.vb-portion-btn-change,
.vb-portion-btn-apply,
.vb-portion-btn-reset,
.vb-weight-minus,
.vb-weight-plus,
.vb-quick-btn {
    -webkit-appearance: none;
    appearance: none;
}

/* ── Safari: gap na flexbox (pre 14.1) ────────── */
.vb-btn-group > * + * {
    margin-left: 10px;
}
@supports (gap: 10px) {
    .vb-btn-group > * + * {
        margin-left: 0;
    }
}
.vb-quick-btns > * + * {
    margin-left: 6px;
}
@supports (gap: 6px) {
    .vb-quick-btns > * + * {
        margin-left: 0;
    }
}

/* ── Responsive: modal na tablet ─────────────── */
@media (min-width: 600px) {
    .vb-modal {
        width: calc(100% - 40px);
        margin: 0 auto;
    }
}

/* ── Responsive: weight input na malim ekranima ─ */
@media (max-width: 360px) {
    #vbWeightInput {
        font-size: 52px;
        width: 100px;
        letter-spacing: -2px;
    }
    .vb-weight-center {
        min-width: 110px;
    }
    .vb-weight-unit-label {
        font-size: 16px;
    }
    .vb-weight-minus,
    .vb-weight-plus {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}

/* ── Responsive: meat grid na mobile ─────────── */
@media (max-width: 340px) {
    .vb-meat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Responsive: product card ─────────────────── */
@media (max-width: 360px) {
    .vb-product-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .vb-product-emoji {
        font-size: 32px;
    }
    .vb-product-price span {
        font-size: 34px;
        letter-spacing: -1px;
    }
    .vb-voucher-name {
        font-size: 26px;
    }
}

/* ── Responsive: portion adjuster na mobile ───── */
@media (max-width: 360px) {
    .vb-portion-input-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .vb-portion-input-wrap input {
        width: 100%;
    }
    .vb-portion-action-btns {
        flex-direction: column;
    }
    .vb-portion-btn-apply,
    .vb-portion-btn-reset {
        width: 100%;
        text-align: center;
    }
}

/* ── Responsive: transition guide na mobile ────── */
@media (max-width: 360px) {
    .vb-tday-label {
        width: 46px;
        font-size: 10px;
    }
    .vb-tday-old,
    .vb-tday-new {
        font-size: 9px;
        padding: 0 3px;
    }
}

/* ── Responsive: allergy tags na mobile ────────── */
@media (max-width: 360px) {
    .vb-allergy-tags {
        gap: 5px;
    }
    .vb-allergy-tag {
        padding: 7px 10px;
        font-size: 12px;
    }
}

/* ── Responsive: summary box na mobile ────────── */
@media (max-width: 360px) {
    .vb-summary-box,
    .vb-price-breakdown {
        padding: 12px 14px;
    }
    .vb-summary-row span:last-child {
        max-width: 52%;
        font-size: 12px;
    }
    .vb-breakdown-total span:last-child {
        font-size: 16px;
    }
}

/* ── High contrast ────────────────────────────── */
@media (forced-colors: active) {
    .vb-option input[type="radio"]:checked ~ label,
    .vb-meat-item input[type="checkbox"]:checked ~ label {
        border: 2px solid Highlight;
        background: Highlight;
        color: HighlightText;
    }
    .vb-allergy-tag.selected {
        border: 2px solid Highlight;
    }
    .vb-subscribe-btn,
    .vb-btn-next {
        border: 2px solid ButtonText;
    }
}

/* ── Print ─────────────────────────────────────── */
@media print {
    .vb-modal-overlay {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════
   QUIZ — CROSS-BROWSER PRODUCTION FIXES
   ════════════════════════════════════════════════════════════ */

/* ── iOS font-size ≥ 16px — prevents auto-zoom on focus ─── */
.vb-input-wrap input,
.vb-input-wrap textarea,
#vbParentBreed1,
#vbParentBreed2 {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
}
/* Override weight input — keep large display size */
#vbWeightInput { font-size: 70px !important; }
@media (max-width: 380px) { #vbWeightInput { font-size: 52px !important; } }

/* ── iOS: safe-area padding for home bar ────────────────── */
.vb-modal-inner {
    padding-bottom: max(88px, calc(88px + env(safe-area-inset-bottom)));
}
@media (max-width: 380px) {
    .vb-modal-inner {
        padding-bottom: max(80px, calc(80px + env(safe-area-inset-bottom)));
    }
}

/* ── iOS: dvh support for modal max-height ──────────────── */
.vb-modal {
    max-height: 93vh;
    max-height: 93dvh;
}
@supports (-webkit-touch-callout: none) {
    .vb-modal {
        max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 10px);
    }
}

/* ── Safari: -webkit-appearance on all form elements ────── */
.vb-input-wrap input,
.vb-input-wrap textarea,
.vb-slider,
.vb-portion-slider,
#vbWeightInput,
.vb-portion-input-wrap input,
#vbParentBreed1,
#vbParentBreed2 {
    -webkit-appearance: none;
    appearance: none;
}

/* ── Safari/Firefox: range input track ──────────────────── */
.vb-slider::-webkit-slider-runnable-track,
.vb-portion-slider::-webkit-slider-runnable-track {
    height: 4px;
    background: var(--stone);
    border-radius: 2px;
}
.vb-slider::-moz-range-track,
.vb-portion-slider::-moz-range-track {
    height: 4px;
    background: var(--stone);
    border-radius: 2px;
    border: none;
}
.vb-slider::-moz-range-thumb,
.vb-portion-slider::-moz-range-thumb {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--green-dark);
    border: 3px solid var(--chalk);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(61,90,62,0.35);
}

/* ── Firefox: number input spinners ─────────────────────── */
#vbWeightInput,
.vb-portion-input-wrap input {
    -moz-appearance: textfield;
}

/* ── Safari: button appearance reset ────────────────────── */
.vb-btn-next,
.vb-btn-back,
.vb-btn-retake,
.vb-btn-skip,
.vb-close-btn,
.vb-portion-btn-yes,
.vb-portion-btn-change,
.vb-portion-btn-apply,
.vb-portion-btn-reset,
.vb-weight-minus,
.vb-weight-plus,
.vb-quick-btn,
.vb-subscribe-btn {
    -webkit-appearance: none;
    appearance: none;
}

/* ── iOS: tap highlight ──────────────────────────────────── */
.vb-option label,
.vb-meat-item label,
.vb-allergy-tag,
.vb-btn-next,
.vb-btn-back,
.vb-quick-btn,
.vb-weight-minus,
.vb-weight-plus {
    -webkit-tap-highlight-color: transparent;
}

/* ── Tablet: modal centered not bottom-sheet ─────────────── */
@media (min-width: 600px) {
    .vb-modal-overlay { align-items: center; }
    .vb-modal {
        border-radius: 26px;
        max-width: 520px;
        width: calc(100% - 40px);
        margin: 0 auto;
        transform: translateY(14px) scale(0.98);
        opacity: 0;
        transition: all 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .vb-modal-overlay.active .vb-modal {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    .vb-meat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Mobile small: weight input ─────────────────────────── */
@media (max-width: 360px) {
    .vb-weight-center { min-width: 110px; }
    .vb-weight-minus, .vb-weight-plus { width: 36px; height: 36px; font-size: 18px; }
    .vb-question-header h2 { font-size: 22px; }
    .vb-product-price span { font-size: 34px; }
    .vb-portion-btns { flex-direction: column; }
    .vb-portion-btn-yes, .vb-portion-btn-change { width: 100%; }
    .vb-meat-grid { grid-template-columns: repeat(2, 1fr); }
    .vb-allergy-tags { gap: 5px; }
    .vb-allergy-tag { padding: 6px 10px; font-size: 12px; }
}

/* ── High contrast ───────────────────────────────────────── */
@media (forced-colors: active) {
    .vb-option input[type="radio"]:checked ~ label,
    .vb-meat-item input[type="checkbox"]:checked ~ label {
        border: 2px solid Highlight;
    }
    .vb-subscribe-btn, .vb-btn-next { border: 2px solid ButtonText; }
}
/* ════════════════════════════════════════════════
   FORMULA OBJAŠNJENJE — Nutri-Scan™
   ════════════════════════════════════════════════ */

.vb-formula-explain {
    margin: 20px 0 8px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(61,90,62,0.15);
    background: #FAFAF7;
}

.vb-formula-explain__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 700;
    color: #3D5A3E;
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.vb-formula-explain__trigger::-webkit-details-marker { display: none; }
.vb-formula-explain__trigger::after {
    content: '▾';
    margin-left: auto;
    font-size: 16px;
    color: #3D5A3E;
    transition: transform 0.2s;
}
.vb-formula-explain[open] .vb-formula-explain__trigger::after {
    transform: rotate(180deg);
}

.vb-formula-explain__body {
    padding: 0 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vb-formula-step {
    background: #fff;
    border-radius: 10px;
    padding: 14px 16px;
    border-left: 3px solid #3D5A3E;
}
.vb-formula-step--example {
    border-left-color: #C8922A;
    background: #FFF8EC;
}

.vb-formula-step__label {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.vb-formula-step--example .vb-formula-step__label {
    color: #C8922A;
}

.vb-formula-step__formula {
    font-size: 15px;
    font-weight: 700;
    color: #2A332B;
    font-family: 'Courier New', monospace;
    margin-bottom: 6px;
    line-height: 1.4;
}
.vb-formula-step__formula strong { color: #3D5A3E; }
.vb-formula-step--example .vb-formula-step__formula strong { color: #C8922A; }

.vb-formula-step__desc {
    font-size: 12px;
    color: #5A5E52;
    line-height: 1.65;
}

.vb-formula-sources {
    font-size: 11px;
    color: #aaa;
    padding: 8px 0 0;
    border-top: 1px dashed rgba(61,90,62,0.12);
}
.vb-formula-sources span {
    font-weight: 700;
    color: #888;
}

/* ── Breakdown weekly re-label (dnevna cena hero) ─────── */
.vb-breakdown-weekly {
    background: linear-gradient(135deg, #EAF2EA, #F5F0E8);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    border: 1px solid rgba(61,90,62,0.12);
}
.vb-breakdown-weekly span:first-child {
    font-size: 13px;
    font-weight: 600;
    color: #3D5A3E;
}
.vb-breakdown-weekly span:last-child {
    font-size: 20px;
    font-weight: 800;
    color: #3D5A3E;
}

/* ════════════════════════════════════════════════════════════
   Defensive: kill stray <br> + empty <p> injected by wpautop /
   block parser into shortcode output. Quiz body has zero <br>
   in source — anything appearing at runtime is junk.
   ════════════════════════════════════════════════════════════ */
.vb-modal-overlay br,
.vb-trigger-wrap br {
    display: none;
}
.vb-modal-overlay p:empty,
.vb-trigger-wrap p:empty {
    display: none;
}