#btb-wrapper {
    width: 100%;
    color: #ffffff;
    font-family: Inter, Arial, Helvetica, sans-serif;
}

#btb-wrapper * {
    box-sizing: border-box;
}

#btb-wrapper a {
    color: #f7f3e8;
    text-decoration: underline;
}

#btb-wrapper .btb-panel {
    position: relative;
    overflow: hidden;
    padding: 40px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 28%),
        radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.06), transparent 26%),
        linear-gradient(180deg, #7ea33a 0%, #6f922f 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

#btb-wrapper .btb-panel + .btb-panel {
    margin-top: 24px;
}

#btb-wrapper .btb-grid,
#btb-wrapper .btb-results-grid {
    position: relative;
    z-index: 1;
}

#btb-wrapper .btb-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.8fr) minmax(300px, 0.9fr);
    gap: 28px;
    align-items: center;
}

#btb-wrapper h1,
#btb-wrapper h2,
#btb-wrapper h3 {
    margin: 0 0 16px;
    color: #ffffff;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

#btb-wrapper h1 {
    font-size: 52px;
    font-weight: 800;
}

#btb-wrapper .btb-copy p,
#btb-wrapper .btb-results-content p,
#btb-wrapper .btb-results-content li {
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.94);
}

#btb-wrapper .btb-copy p:last-child {
    margin-bottom: 0;
}

#btb-wrapper .btb-sample {
    margin-top: 28px;
    font-size: 28px !important;
    font-weight: 800;
    color: #ffffff;
}

#btb-wrapper .btb-bottle {
    display: flex;
    justify-content: center;
}

#btb-wrapper .btb-bottle-card {
    width: 230px;
    min-height: 250px;
    padding: 32px 26px 22px;
    border-radius: 34px;
    background: rgba(111, 146, 47, 0.92);
    border: 3px solid rgba(255, 255, 255, 0.78);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(0, 0, 0, 0.12);
}

#btb-wrapper .btb-bottle-label {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
    color: #ffffff;
}

#btb-wrapper .btb-bottle-label span {
    display: inline-block;
    padding: 2px 6px;
    color: #1c1c1c;
    background: #ffffff;
    border-radius: 2px;
}

#btb-wrapper .btb-barcode {
    height: 58px;
    margin-top: 22px;
    background:
        linear-gradient(
            90deg,
            #fff 0px, #fff 3px,
            transparent 3px, transparent 6px,
            #fff 6px, #fff 8px,
            transparent 8px, transparent 11px,
            #fff 11px, #fff 14px,
            transparent 14px, transparent 16px,
            #fff 16px, #fff 18px,
            transparent 18px, transparent 22px,
            #fff 22px, #fff 24px,
            transparent 24px, transparent 27px,
            #fff 27px, #fff 31px,
            transparent 31px, transparent 33px,
            #fff 33px, #fff 35px,
            transparent 35px, transparent 38px,
            #fff 38px, #fff 41px,
            transparent 41px, transparent 44px,
            #fff 44px, #fff 47px,
            transparent 47px, transparent 49px,
            #fff 49px, #fff 53px,
            transparent 53px, transparent 56px,
            #fff 56px, #fff 58px,
            transparent 58px, transparent 61px,
            #fff 61px, #fff 64px,
            transparent 64px, transparent 66px,
            #fff 66px, #fff 70px,
            transparent 70px, transparent 73px,
            #fff 73px, #fff 76px,
            transparent 76px, transparent 80px,
            #fff 80px, #fff 84px,
            transparent 84px, transparent 87px,
            #fff 87px, #fff 90px,
            transparent 90px, transparent 100%
        );
}

#btb-wrapper .btb-form-wrap {
    padding: 30px;
    border-radius: 24px;
    background: rgba(197, 214, 125, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 10px 24px rgba(0, 0, 0, 0.12);
}

#invalidLot {
    display: none;
    margin-bottom: 12px;
    color: #fff0f0;
    font-size: 15px;
    font-weight: 700;
}

#btb-wrapper .btb-input,
#btb-wrapper .btb-submit,
#btb-wrapper .btb-close {
    width: 100%;
    border: 0;
}

#btb-wrapper .btb-input {
    height: 64px;
    padding: 0 22px;
    margin-bottom: 18px;
    background: #efefef;
    color: #6f922f;
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 18px;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

#btb-wrapper .btb-input::placeholder {
    color: #72806a;
    opacity: 1;
}

#btb-wrapper .btb-submit,
#btb-wrapper .btb-close {
    height: 64px;
    padding: 0 24px;
    background: #cc0000;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    cursor: pointer;
    border-radius: 999px;
    box-shadow: 0 10px 20px rgba(204, 0, 0, 0.28);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#btb-wrapper .btb-submit:hover,
#btb-wrapper .btb-close:hover {
    background: #b30000;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(204, 0, 0, 0.34);
}

#btb-wrapper .btb-results-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
    gap: 28px;
    align-items: stretch;
}

#btb-wrapper .dynamicBTBMap,
#btb-wrapper #italy-map,
#btb-wrapper #italy-map .jsmaps {
    position: relative;
}

#btb-wrapper .dynamicBTBMap {
    min-height: 640px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

#btb-wrapper .jsmaps-wrapper {
    width: 100%;
    min-height: 640px;
    padding: 18px;
}

#btb-wrapper #italy-map .jsmaps {
    width: 100%;
}

#btb-wrapper .btb-results-side {
    display: flex;
    flex-direction: column;
    min-height: 640px;
    padding: 26px;
    border-radius: 24px;
    background: rgba(197, 214, 125, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 10px 24px rgba(0, 0, 0, 0.10);
}

#btb-wrapper .btb-results-content {
    flex: 1 1 auto;
    min-height: 0;
}

#btb-wrapper .btb-results-content h1 {
    margin-bottom: 18px;
    font-size: 38px;
    text-align: left;
}

#btb-wrapper .btb-results-content h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 24px;
}

#btb-wrapper .btb-results-content hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
    margin: 18px 0 20px;
}

#btb-wrapper .btb-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 14px 0 20px;
}

#btb-wrapper .btb-columns ul {
    margin: 0;
    padding-left: 20px;
}

#btb-wrapper .btb-footnote {
    margin-top: 24px;
}

#btb-wrapper .btb-close {
    margin-top: 24px;
    align-self: flex-start;
    min-width: 210px;
}

#btb-wrapper .jsmaps-text {
    display: none !important;
}

#btb-wrapper .jsmaps svg {
    display: block;
    width: 100%;
    height: auto !important;
    max-width: 100%;
}

@media (max-width: 1180px) {
    #btb-wrapper .btb-panel {
        padding: 32px;
    }

    #btb-wrapper .btb-grid {
        grid-template-columns: 1fr 260px;
        gap: 22px;
    }

    #btb-wrapper .btb-copy {
        grid-column: 1 / -1;
    }

    #btb-wrapper h1 {
        font-size: 46px;
    }

    #btb-wrapper .btb-copy p,
    #btb-wrapper .btb-results-content p,
    #btb-wrapper .btb-results-content li {
        font-size: 17px;
    }

    #btb-wrapper .btb-form-wrap {
        padding: 24px;
    }

    #btb-wrapper .btb-input {
        height: 60px;
        font-size: 16px;
    }

    #btb-wrapper .btb-submit,
    #btb-wrapper .btb-close {
        height: 60px;
        font-size: 20px;
    }

    #btb-wrapper .btb-results-grid {
        grid-template-columns: 1fr;
    }

    #btb-wrapper .dynamicBTBMap,
    #btb-wrapper .jsmaps-wrapper,
    #btb-wrapper .btb-results-side {
        min-height: 540px;
    }

    #btb-wrapper .btb-results-side {
        padding-top: 20px;
    }

    #btb-wrapper .btb-close {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 820px) {
    #btb-wrapper .btb-panel {
        padding: 22px 18px;
        border-radius: 22px;
    }

    #btb-wrapper .btb-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #btb-wrapper .btb-bottle {
        justify-content: flex-start;
    }

    #btb-wrapper h1 {
        font-size: 40px;
    }

    #btb-wrapper .btb-sample {
        margin-top: 20px;
        font-size: 24px !important;
    }

    #btb-wrapper .btb-copy p,
    #btb-wrapper .btb-results-content p,
    #btb-wrapper .btb-results-content li {
        font-size: 17px;
    }

    #btb-wrapper .btb-form-wrap,
    #btb-wrapper .btb-results-side {
        padding: 20px;
    }

    #btb-wrapper .btb-input,
    #btb-wrapper .btb-submit,
    #btb-wrapper .btb-close {
        height: 58px;
    }

    #btb-wrapper .btb-input {
        margin-bottom: 14px;
        font-size: 15px;
    }

    #btb-wrapper .btb-submit,
    #btb-wrapper .btb-close {
        font-size: 18px;
    }

    #btb-wrapper .dynamicBTBMap,
    #btb-wrapper .jsmaps-wrapper,
    #btb-wrapper .btb-results-side {
        min-height: 440px;
    }

    #btb-wrapper .btb-results-content h1 {
        font-size: 32px;
    }
}

@media (max-width: 560px) {
    #btb-wrapper .btb-panel {
        padding: 18px 16px;
        border-radius: 18px;
    }

    #btb-wrapper h1 {
        font-size: 34px;
    }

    #btb-wrapper .btb-copy p,
    #btb-wrapper .btb-results-content p,
    #btb-wrapper .btb-results-content li {
        font-size: 16px;
        line-height: 1.55;
    }

    #btb-wrapper .btb-sample {
        font-size: 21px !important;
    }

    #btb-wrapper .btb-form-wrap,
    #btb-wrapper .btb-results-side {
        padding: 16px;
        border-radius: 18px;
    }

    #btb-wrapper .btb-input,
    #btb-wrapper .btb-submit,
    #btb-wrapper .btb-close {
        height: 54px;
        border-radius: 14px;
    }

    #btb-wrapper .btb-submit,
    #btb-wrapper .btb-close {
        font-size: 18px;
    }

    #btb-wrapper .dynamicBTBMap,
    #btb-wrapper .jsmaps-wrapper {
        min-height: 360px;
    }

    #btb-wrapper .btb-results-side {
        min-height: 0;
    }

    #btb-wrapper .btb-results-content h1 {
        font-size: 28px;
    }

    #btb-wrapper .btb-columns {
        grid-template-columns: 1fr;
    }

    #btb-wrapper .btb-close {
        width: 100%;
    }
}


/* === MAP INTERACTION PATCH === */

/* Bottle to Branch map interaction patch
   Keep your ORIGINAL JS.
   Add this AFTER your main Bottle to Branch CSS.
*/

/* keep the map panel clean and stop the harsh inner line */
#btb-wrapper .dynamicBTBMap {
    overflow: hidden;
}

#btb-wrapper .jsmaps-wrapper,
#btb-wrapper #italy-map .jsmaps {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* hide the extra generated frame lines/boxes */
#btb-wrapper #italy-map svg > rect,
#btb-wrapper #italy-map svg > line {
    display: none !important;
}

/* base region style */
#btb-wrapper #italy-map svg path {
    transition: fill 0.18s ease, stroke 0.18s ease, filter 0.18s ease;
}

/* REGION HOVER
   give hover a distinct warm cream tone so it does not blend into the green map
*/
#btb-wrapper #italy-map svg path:hover {
    fill: #cfd7b2 !important;
    stroke: #6a774d !important;
    filter: brightness(1.02);
    cursor: pointer;
}

/* REGION SELECTED
   JSMaps appears to set selected regions to white inline, so catch those cases
*/
#btb-wrapper #italy-map svg path[fill="#fff"],
#btb-wrapper #italy-map svg path[fill="#ffffff"],
#btb-wrapper #italy-map svg path[style*="fill:#fff"],
#btb-wrapper #italy-map svg path[style*="fill: #fff"],
#btb-wrapper #italy-map svg path[style*="fill:#ffffff"],
#btb-wrapper #italy-map svg path[style*="fill: #ffffff"],
#btb-wrapper #italy-map svg path[style*="fill: rgb(255, 255, 255)"] {
    fill: #e9dec2 !important;
    stroke: #7b6f4d !important;
}

/* region labels on selected states stay readable */
#btb-wrapper #italy-map svg text,
#btb-wrapper #italy-map svg text tspan {
    fill: #4f5c3e !important;
}

#btb-wrapper #italy-map svg path[fill="#fff"] + text,
#btb-wrapper #italy-map svg path[fill="#ffffff"] + text,
#btb-wrapper #italy-map svg path[style*="fill:#fff"] + text,
#btb-wrapper #italy-map svg path[style*="fill:#ffffff"] + text,
#btb-wrapper #italy-map svg path[style*="fill: rgb(255, 255, 255)"] + text,
#btb-wrapper #italy-map svg text:hover,
#btb-wrapper #italy-map svg text:hover tspan {
    fill: #4a4330 !important;
}

/* CITY PINS
   make them clearly red on hover and selection
*/
#btb-wrapper #italy-map svg circle {
    transition: fill 0.18s ease, stroke 0.18s ease, transform 0.18s ease;
}

/* hover pin */
#btb-wrapper #italy-map svg circle:hover {
    fill: #cc0000 !important;
    stroke: #ffffff !important;
    stroke-width: 2px !important;
    transform: scale(1.08);
    cursor: pointer;
}

/* selected pin
   catch current inline red and strengthen it so it stays obvious
*/
#btb-wrapper #italy-map svg circle[fill="#cc0000"],
#btb-wrapper #italy-map svg circle[fill="#c00"],
#btb-wrapper #italy-map svg circle[fill="red"],
#btb-wrapper #italy-map svg circle[style*="fill:#cc0000"],
#btb-wrapper #italy-map svg circle[style*="fill: #cc0000"],
#btb-wrapper #italy-map svg circle[style*="fill:red"],
#btb-wrapper #italy-map svg circle[style*="fill: red"],
#btb-wrapper #italy-map svg circle[style*="fill: rgb(204, 0, 0)"] {
    fill: #cc0000 !important;
    stroke: #ffffff !important;
    stroke-width: 2px !important;
}

/* if JSMaps is using another red tone, make all pins red when active/focused by interaction */
#btb-wrapper #italy-map svg circle:active,
#btb-wrapper #italy-map svg circle:focus {
    fill: #cc0000 !important;
    stroke: #ffffff !important;
}

/* optional slight emphasis for the results panel divider if needed */
#btb-wrapper .btb-results-content hr {
    border-top-color: rgba(255, 255, 255, 0.28);
}


/* === FINAL MAP TWEAKS === */

/* stop pin hover jitter: animate with transform only and set a stable origin */
#btb-wrapper #italy-map svg circle {
    transform-box: fill-box;
    transform-origin: center;
    vector-effect: non-scaling-stroke;
    transition: transform 0.16s ease, fill 0.16s ease, stroke 0.16s ease !important;
}

#btb-wrapper #italy-map svg circle:hover {
    transform: scale(1.12) !important;
}

#btb-wrapper #italy-map svg circle[fill="#cc0000"],
#btb-wrapper #italy-map svg circle[fill="#c00"],
#btb-wrapper #italy-map svg circle[fill="red"],
#btb-wrapper #italy-map svg circle[style*="fill:#cc0000"],
#btb-wrapper #italy-map svg circle[style*="fill: #cc0000"],
#btb-wrapper #italy-map svg circle[style*="fill:red"],
#btb-wrapper #italy-map svg circle[style*="fill: red"],
#btb-wrapper #italy-map svg circle[style*="fill: rgb(204, 0, 0)"] {
    transform: scale(1.08) !important;
}

/* blend map frame / outline artifacts into the panel background */
#btb-wrapper #italy-map svg,
#btb-wrapper #italy-map .jsmaps,
#btb-wrapper #italy-map .jsmaps-wrapper {
    background: transparent !important;
}

#btb-wrapper #italy-map svg > path,
#btb-wrapper #italy-map svg > polyline,
#btb-wrapper #italy-map svg > line,
#btb-wrapper #italy-map svg > rect {
    stroke: #91af4a !important;
}

/* soften all non-region SVG guide lines so the right-edge black box disappears */
#btb-wrapper #italy-map svg line,
#btb-wrapper #italy-map svg polyline,
#btb-wrapper #italy-map svg rect {
    stroke: #91af4a !important;
    stroke-opacity: 1 !important;
}

/* region borders still visible, but less dark so they blend with theme */
#btb-wrapper #italy-map svg path {
    stroke: #667a4a !important;
}

/* selected region keeps contrast without the harsh dark edge */
#btb-wrapper #italy-map svg path[fill="#fff"],
#btb-wrapper #italy-map svg path[fill="#ffffff"],
#btb-wrapper #italy-map svg path[style*="fill:#fff"],
#btb-wrapper #italy-map svg path[style*="fill: #fff"],
#btb-wrapper #italy-map svg path[style*="fill:#ffffff"],
#btb-wrapper #italy-map svg path[style*="fill: #ffffff"],
#btb-wrapper #italy-map svg path[style*="fill: rgb(255, 255, 255)"] {
    stroke: #7b744f !important;
}