/* ── PHONE INPUT WRAPPER ── */
.odin-phone-wrap {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    position: relative !important;
    border-radius: 8px !important;
    overflow: visible !important;
    outline: 1px solid rgba(197,160,89,0.35) !important;
    outline-offset: -1px !important;
    background: transparent !important;
    transition: background 0.3s ease, box-shadow 0.3s ease, outline 0.3s ease !important;
}
/* ::after Gradient Ring — 1:1 wie form-control */
.odin-phone-wrap::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 8px !important;
    padding: 1px !important;
    background: linear-gradient(120deg, rgba(197,160,89,0.4), rgba(212,176,106,0.3), rgba(197,160,89,0.4)) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: 10 !important;
    transition: padding 0.3s ease, background 0.3s ease !important;
}
.odin-phone-wrap.is-focused::after,
.odin-phone-wrap.has-value::after {
    padding: 2px !important;
    background: linear-gradient(120deg, #c5a059, #d4b06a, #f3d895, #ffe3a0, #f3d895, #d4b06a, #c5a059) !important;
}
.odin-phone-wrap:hover {
    outline: 1px solid rgba(197,160,89,0.35) !important;
    outline-offset: -1px !important;
}
/* Focus State */
.odin-phone-wrap.is-focused,
.odin-phone-wrap.has-value {
    background: rgba(12, 9, 7, 0.8) !important;
    outline: 2px solid #c5a059 !important;
    outline-offset: -2px !important;
    box-shadow: 0 0 18px rgba(197, 160, 89, 0.35), 0 0 6px rgba(197, 160, 89, 0.2) !important;
}
.odin-phone-wrap.has-value:hover {
    background: rgba(12, 9, 7, 0.8) !important;
    outline: 2px solid #c5a059 !important;
    outline-offset: -2px !important;
    box-shadow: 0 0 18px rgba(197, 160, 89, 0.35), 0 0 6px rgba(197, 160, 89, 0.2) !important;
}

/* ── ERROR STATE: Rot statt Gold ── */
.odin-phone-wrap.odin-input-error {
    outline: 2px solid #E35555 !important;
    outline-offset: -2px !important;
}
.odin-phone-wrap.odin-input-error::after {
    padding: 2px !important;
    background: linear-gradient(120deg, #c44a3f, #e06050, #ff7a6a, #e06050, #c44a3f) !important;
}
.odin-phone-wrap.odin-input-error .odin-phone-input {
    background: transparent !important;
}
.odin-phone-wrap.odin-input-error .odin-phone-input::placeholder {
    color: #E35555 !important;
    -webkit-text-fill-color: #E35555 !important;
}
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-wrap.odin-input-error .odin-phone-input::placeholder,
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-input[data-error]::placeholder,
.odin-phone-input[data-error]::placeholder {
    color: #E35555 !important;
    -webkit-text-fill-color: #E35555 !important;
    opacity: 1 !important;
}

/* ── COUNTRY TRIGGER (links) ── */
.odin-phone-country {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 12px !important;
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    border-right: 1px solid rgba(197,160,89,0.15) !important;
    flex-shrink: 0 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: background 0.2s ease !important;
    border-radius: 8px 0 0 8px !important;
    position: relative !important;
    z-index: 2 !important;
    min-height: 50px !important;
}
.odin-phone-country:hover {
    background: rgba(197,160,89,0.06) !important;
}
.odin-phone-flag {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
.odin-phone-flag img {
    width: 24px !important;
    height: 18px !important;
    object-fit: cover !important;
    border-radius: 2px !important;
    display: block !important;
}
.odin-phone-code {
    color: #d6be9f !important;
    -webkit-text-fill-color: #d6be9f !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 16px !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
}
.odin-phone-arrow {
    width: 10px !important;
    height: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.3s ease !important;
    flex-shrink: 0 !important;
}
.odin-phone-arrow svg {
    width: 10px !important;
    height: 10px !important;
    stroke: #9a8468 !important;
    fill: none !important;
    stroke-width: 1.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
.odin-phone-wrap.dropdown-open .odin-phone-arrow {
    transform: rotate(180deg) !important;
}

/* ── INPUT (rechts) ── */
.odin-phone-input {
    flex: 1 !important;
    min-width: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #fff0c4 !important;
    -webkit-text-fill-color: #fff0c4 !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 19px !important;
    letter-spacing: 0.5px !important;
    padding: 14px 14px !important;
    outline: none !important;
    box-shadow: none !important;
    caret-color: #fff0c4 !important;
}
.odin-phone-input::placeholder {
    color: #6b5a45 !important;
    -webkit-text-fill-color: #6b5a45 !important;
    opacity: 1 !important;
}

/* ── DROPDOWN — 1:1 wie odin-select-dropdown ── */
.odin-phone-dropdown {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: -2px !important;
    right: -2px !important;
    max-height: 320px !important;
    height: auto !important;
    overflow: hidden !important;
    background: rgba(35, 27, 20, 0.97) !important;
    border: 1px solid rgba(197, 160, 89, 0.4) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 14px rgba(197, 160, 89, 0.15) !important;
    z-index: 9999 !important;
}
.odin-phone-wrap.dropdown-open .odin-phone-dropdown {
    display: block !important;
}
.odin-phone-wrap.dropdown-open {
    z-index: 9999 !important;
    /* Golden Ring auch wenn Dropdown offen */
    background: rgba(12, 9, 7, 0.8) !important;
    outline: 2px solid #c5a059 !important;
    outline-offset: -2px !important;
    box-shadow: 0 0 18px rgba(197, 160, 89, 0.35), 0 0 6px rgba(197, 160, 89, 0.2) !important;
}
.odin-phone-wrap.dropdown-open::after {
    padding: 2px !important;
    background: linear-gradient(120deg, #c5a059, #d4b06a, #f3d895, #ffe3a0, #f3d895, #d4b06a, #c5a059) !important;
}

/* Search — 1:1 wie odin-select-search, kein Glow niemals */
.odin-phone-search {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    padding: 0 0 0 8px !important;
    background: rgba(35, 27, 20, 0.97) !important;
    border-bottom: 1px solid rgba(197, 160, 89, 0.15) !important;
}
.odin-phone-search input,
.odin-phone-search input:focus,
.odin-phone-search input:active,
.odin-phone-search input:hover {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 5px 8px !important;
    color: #fff0c4 !important;
    -webkit-text-fill-color: #fff0c4 !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 14px !important;
    outline: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: none !important;
}
.odin-phone-search input:focus {
    border: none !important;
}
.odin-phone-search input::placeholder {
    color: #5a4d3e !important;
    -webkit-text-fill-color: #5a4d3e !important;
}
/* Ecwid Specificity Override — killt den Glow den Ecwid auf input:focus setzt */
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-search input,
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-search input:focus,
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-search input:active,
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-search input:hover {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
    background: transparent !important;
    transition: none !important;
}
/* Phone input selbst — kein Ecwid Glow */
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-input,
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-input:focus,
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-input:active {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
    background: transparent !important;
}

/* Scroll container — 1:1 wie odin-select-scroll-inner */
.odin-phone-scroll {
    max-height: 280px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 12px !important;
    background: transparent !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(94, 62, 28, 0.6) transparent !important;
}
.odin-phone-scroll::-webkit-scrollbar { width: 4px !important; }
.odin-phone-scroll::-webkit-scrollbar-track { background: transparent !important; }
.odin-phone-scroll::-webkit-scrollbar-thumb {
    background: rgba(94, 62, 28, 0.6) !important;
    border-radius: 2px !important;
}

/* Country option — 1:1 wie odin-select-option */
.odin-phone-option {
    display: flex !important;
    align-items: center !important;
    gap: 0px !important;
    padding: 10px 10px !important;
    color: #d6be9f !important;
    -webkit-text-fill-color: #d6be9f !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 18px !important;
    letter-spacing: 0.4px !important;
    cursor: pointer !important;
    background: transparent !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    border-bottom: 1px solid rgba(197, 160, 89, 0.06) !important;
}
.odin-phone-option:last-child { border-bottom: none !important; }
/* Hover: ganze Zeile — wie Land-Dropdown */
.odin-phone-option:hover {
    background: rgba(197, 160, 89, 0.1) !important;
}
.odin-phone-option:hover .odin-phone-option-name {
    color: #d6be9f !important;
    -webkit-text-fill-color: #d6be9f !important;
}
.odin-phone-option:hover .odin-phone-option-code {
    color: #9a8468 !important;
    -webkit-text-fill-color: #9a8468 !important;
}
/* Selected: kein extra Background — wie Land-Dropdown */
.odin-phone-option.is-selected {
    background: transparent !important;
    color: #d6be9f !important;
    -webkit-text-fill-color: #d6be9f !important;
}
.odin-phone-option.is-hidden { display: none !important; }
.odin-phone-option-flag {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}
.odin-phone-option-flag img {
    width: 24px !important;
    height: 18px !important;
    object-fit: cover !important;
    border-radius: 2px !important;
    display: block !important;
}
.odin-phone-option-name {
    flex: 1 !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 18px !important;
    letter-spacing: 0.4px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}
.odin-phone-option-code {
    color: #9a8468 !important;
    -webkit-text-fill-color: #9a8468 !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}
/* Selected Kinder: gleiche Farben wie normal — kein Highlight */
.odin-phone-option.is-selected .odin-phone-option-name {
    color: #d6be9f !important;
    -webkit-text-fill-color: #d6be9f !important;
}
.odin-phone-option.is-selected .odin-phone-option-code {
    color: #9a8468 !important;
    -webkit-text-fill-color: #9a8468 !important;
}

/* ── Ecwid Specificity Overrides für Phone Dropdown ── */
/* Ecwid matched mit [class*="dropdown"] [class*="option"] — wir müssen höher sein */
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-dropdown .odin-phone-option {
    background: transparent !important;
    color: #d6be9f !important;
    -webkit-text-fill-color: #d6be9f !important;
}
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-dropdown .odin-phone-option:hover {
    background: rgba(197, 160, 89, 0.1) !important;
}
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-dropdown .odin-phone-option.is-selected {
    background: transparent !important;
}
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-dropdown .odin-phone-option.is-selected:hover {
    background: rgba(197, 160, 89, 0.1) !important;
}
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-dropdown .odin-phone-option-flag,
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-dropdown .odin-phone-option-name,
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-dropdown .odin-phone-option-code {
    pointer-events: none !important;
    background: transparent !important;
}
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-dropdown .odin-phone-option-name {
    color: #d6be9f !important;
    -webkit-text-fill-color: #d6be9f !important;
}
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-dropdown .odin-phone-option-code {
    color: #9a8468 !important;
    -webkit-text-fill-color: #9a8468 !important;
}
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-dropdown .odin-phone-geo {
    background: transparent !important;
}
html#ecwid_html body#ecwid_body .ec-cart-step__body .odin-phone-dropdown .odin-phone-geo:hover {
    background: rgba(197, 160, 89, 0.1) !important;
}

/* Keine Ergebnisse — 1:1 wie odin-select-no-results */
.odin-phone-no-results {
    display: none;
    padding: 10px 14px !important;
    color: #d6be9f !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 18px !important;
    letter-spacing: 0.4px !important;
    text-align: left !important;
    font-style: normal !important;
}
.odin-phone-no-results.is-visible {
    display: block !important;
}

/* ── GEO ENTRY — 1:1 wie odin-select-geo ── */
.odin-phone-geo {
    display: none !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    color: #d6be9f !important;
    -webkit-text-fill-color: #d6be9f !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 18px !important;
    letter-spacing: 0.4px !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    border-bottom: 1px solid rgba(197, 160, 89, 0.06) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 40px !important;
}
.odin-phone-geo.is-visible {
    display: flex !important;
}
.odin-phone-geo:hover {
    background: rgba(197, 160, 89, 0.1) !important;
    color: #d6be9f !important;
}
.odin-phone-geo svg {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    flex-shrink: 0 !important;
    stroke: #c5a059 !important;
    fill: none !important;
    stroke-width: 1.5 !important;
}
.odin-phone-geo-text {
    font-family: 'ITC Odin Con', serif !important;
    font-size: 18px !important;
    letter-spacing: 0.4px !important;
    color: #d6be9f !important;
    -webkit-text-fill-color: #d6be9f !important;
}

/* Mobile */
@media screen and (max-width: 768px) {
    .odin-phone-country {
        padding: 0 8px !important;
        min-height: 46px !important;
    }
    .odin-phone-flag img { width: 20px !important; height: 15px !important; }
    .odin-phone-code { font-size: 14px !important; }
    .odin-phone-input {
        font-size: 16px !important;
        padding: 10px 12px !important;
    }
    .odin-phone-option {
        padding: 12px 14px !important;
    }
    .odin-phone-option-name { font-size: 14px !important; }
}