/* Outdoor Price Finder premium visual layer.
   Lightweight CSS only: no external libraries and no JS animation loop. */

:root{
  --opf-night:#244936;
  --opf-night-2:#315b45;
  --opf-night-3:#3d6c52;
  --opf-glow:rgba(173,221,184,.14);
  --opf-panel:rgba(244,248,243,.97);
  --opf-panel-line:rgba(214,229,217,.9);
  --opf-shadow:0 24px 70px rgba(17,42,29,.20);
}

html{
  background:
    radial-gradient(circle at 14% 0%, rgba(98,158,114,.30), transparent 36%),
    radial-gradient(circle at 88% 12%, rgba(72,128,91,.22), transparent 32%),
    linear-gradient(155deg,var(--opf-night),var(--opf-night-2) 55%,#1e4030);
  min-height:100%;
}

body{
  min-height:100vh;
  background:transparent!important;
  position:relative;
  overflow-x:hidden;
}

/* Slow expanding rings behind the site. Transform-only animation keeps it inexpensive. */
body::before{
  content:"";
  position:fixed;
  z-index:0;
  pointer-events:none;
  width:150vmax;
  height:150vmax;
  left:50%;
  top:40%;
  margin-left:-75vmax;
  margin-top:-75vmax;
  opacity:.48;
  background:
    repeating-radial-gradient(circle at center,
      transparent 0 72px,
      rgba(194,229,201,.07) 73px 74px,
      transparent 75px 142px),
    radial-gradient(circle at center,rgba(123,184,139,.10),transparent 46%);
  transform:scale(.96);
  animation:opf-ripple-breathe 18s ease-in-out infinite alternate;
  will-change:transform,opacity;
}

body>header,
body>.communityPicker,
body>main,
body>footer,
body>dialog{
  position:relative;
  z-index:1;
}

@keyframes opf-ripple-breathe{
  0%{transform:scale(.94);opacity:.30}
  50%{opacity:.48}
  100%{transform:scale(1.035);opacity:.36}
}

header{
  background:rgba(35,73,53,.91)!important;
  border-bottom:1px solid rgba(225,240,229,.18)!important;
  box-shadow:0 10px 32px rgba(18,47,31,.18);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
header .brand{color:#f5faf6!important;letter-spacing:.015em}
header nav button,
#opf-mobile-menu-button{
  background:rgba(255,255,255,.10)!important;
  color:#f7fbf8!important;
  border-color:rgba(255,255,255,.18)!important;
}
header nav button:hover,
#opf-mobile-menu-button:hover{background:rgba(255,255,255,.17)!important}

body>main{
  background:var(--opf-panel);
  border:1px solid var(--opf-panel-line);
  border-radius:30px;
  box-shadow:var(--opf-shadow);
  margin-top:22px;
  margin-bottom:42px;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

.hero,
.partnerHero{
  box-shadow:0 22px 48px rgba(18,67,40,.20);
  border:1px solid rgba(255,255,255,.13);
}

.card,
.notice,
.localStrip,
.adSlot,
.communityPicker{
  box-shadow:0 12px 32px rgba(25,67,41,.08);
}

.card{
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(25,67,41,.13);
  border-color:#c6dcca;
}

/* Premium dashboard/admin surfaces without changing behaviour. */
#dashboard>h2,
#connectors>h2{font-size:clamp(1.65rem,3vw,2.25rem);margin-top:2px}
#dashboard .metric,
#connectors .card{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,247,241,.98));
  border:1px solid #d6e4d8;
  box-shadow:0 12px 30px rgba(18,57,34,.08);
}
#dashboard .metric b{color:#125d33}
#dashboard .table{background:rgba(255,255,255,.92);border-radius:14px;overflow:hidden}

/* Retailer admin overlay: same mid-forest outer world, calmer inner workspace. */
html body #opf-retailer-admin-shell{
  background:
    radial-gradient(circle at 18% 6%,rgba(103,167,119,.24),transparent 34%),
    linear-gradient(155deg,rgba(31,67,48,.97),rgba(47,92,67,.97))!important;
}
html body #opf-retailer-admin-shell::before{
  content:"";
  position:fixed;
  inset:-35%;
  pointer-events:none;
  opacity:.28;
  background:repeating-radial-gradient(circle at 54% 42%,transparent 0 64px,rgba(206,234,212,.08) 65px 66px,transparent 67px 128px);
  animation:opf-admin-ripple 20s ease-in-out infinite alternate;
}
@keyframes opf-admin-ripple{from{transform:scale(.96)}to{transform:scale(1.035)}}
html body #opf-retailer-admin-shell .ra-wrap{
  position:relative;
  z-index:1;
  background:#f3f7f1!important;
  border:1px solid rgba(217,233,220,.85);
  border-radius:24px!important;
  box-shadow:0 28px 90px rgba(20,53,35,.30);
}
html body #opf-retailer-admin-shell .ra-head{
  background:linear-gradient(135deg,#2d5a41,#3b7654)!important;
  padding:24px 28px!important;
}
html body #opf-retailer-admin-shell .ra-body{padding:24px!important}
html body #opf-retailer-admin-shell .ra-card{
  border:1px solid #d8e4d9!important;
  border-radius:17px!important;
  box-shadow:0 10px 28px rgba(24,60,37,.06);
}

@media(max-width:640px){
  body::before{opacity:.34;animation-duration:24s}
  body>main{
    margin:10px 8px 24px;
    padding:12px!important;
    border-radius:20px;
  }
  header{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .card:hover{transform:none}
  html body #opf-retailer-admin-shell .ra-wrap{border-radius:0!important;border-left:0;border-right:0}
  html body #opf-retailer-admin-shell .ra-head{padding:18px 16px!important}
  html body #opf-retailer-admin-shell .ra-body{padding:14px!important}
}

@media(prefers-reduced-motion:reduce){
  body::before,
  html body #opf-retailer-admin-shell::before{animation:none!important}
  .card{transition:none!important}
}