.appr-opt[data-active="1"]{border-color:var(--green) !important;background:var(--green-soft) !important}
.appr-opt[data-active="1"] .appr-check{opacity:1 !important}
.appr-opt:active{transform:scale(.98)}
/* ---- Out-of-radius modal ---- */
@keyframes oorSlide{from{opacity:0;transform:translateY(40px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes oorPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,90,36,.55)}50%{box-shadow:0 0 0 16px rgba(232,90,36,0)}}
#oorScrim .oor-card{animation:oorSlide .35s cubic-bezier(.34,1.32,.64,1)}
#oorScrim .oor-icon{animation:oorPulse 2.4s ease-out infinite}
.oor-cta:active{transform:scale(.97)}
.oor-cta{transition:transform .12s,box-shadow .15s}
html[data-theme="dark"] #oorScrim .oor-card{background:var(--paper) !important;color:var(--ink) !important;border:1px solid var(--line)}
/* Header strip — replace cream gradient with dark brand-tinted surface */
html[data-theme="dark"] #oorScrim .oor-card > div:first-child{background:linear-gradient(135deg,rgba(232,90,36,.18) 0%,rgba(232,90,36,.10) 100%) !important;border-bottom:1px solid var(--line)}
html[data-theme="dark"] #oorScrim .oor-card > div:first-child > div:first-child{background:radial-gradient(circle,rgba(232,90,36,.28) 0%,transparent 70%) !important}
html[data-theme="dark"] #oorScrim .oor-card > div:first-child > div:nth-child(2){background:rgba(255,255,255,.10) !important;box-shadow:0 3px 8px -2px rgba(0,0,0,.45) !important}
/* "YOUR LOCATION" tiny brand label */
html[data-theme="dark"] #oorScrim .oor-card > div:first-child [style*="color:#8B2E0A"]{color:#FF9E70 !important}
/* Main headline ("Location is not serviceable") */
html[data-theme="dark"] #oorScrim #oorTitle{color:var(--ink) !important}
html[data-theme="dark"] #oorScrim .oor-info{background:var(--soft) !important;border-color:var(--line) !important}
html[data-theme="dark"] #oorScrim .oor-region{color:var(--ink) !important}
html[data-theme="dark"] #oorScrim .oor-region-sub{color:var(--mute) !important}
html[data-theme="dark"] #oorScrim .oor-row-label{color:var(--mute) !important}
html[data-theme="dark"] #oorScrim .oor-row-val{color:var(--ink) !important}
/* Preserve semantic red/green for the distance + radius values */
html[data-theme="dark"] #oorScrim #oorDistance{color:#F87171 !important}
html[data-theme="dark"] #oorScrim #oorRadius{color:#34D399 !important}
html[data-theme="dark"] #oorScrim .oor-msg{color:var(--ink-soft) !important}
html[data-theme="dark"] #oorScrim .oor-divider{background:var(--line) !important}
html[data-theme="dark"] #oorScrim .oor-secondary{background:var(--soft) !important;color:var(--ink) !important;border-color:var(--line) !important}
/* "Get directions to shop" — tint the light-blue bg for dark mode */
html[data-theme="dark"] #oorScrim #oorDirectionsBtn{background:rgba(26,115,232,.14) !important;color:#7AB4FF !important;border-color:rgba(26,115,232,.32) !important}
html[data-theme="dark"] #oorScrim #oorTakeawayBtn{box-shadow:0 8px 18px -6px rgba(34,194,131,.50) !important}
html[data-theme="dark"] #oorScrim #oorCloseBtn{color:var(--mute) !important}