/**
 * UR Local Cookie Consent - Frontend Styles
 * 100% Original Styling Preserved from HTML Component
 */

.ulm-cookie{
  --accent:#dc2626;
  --bg: rgba(255,255,255,.92);
  --border: rgba(0,0,0,.10);
  --shadow: 0 10px 30px rgba(0,0,0,.15);
  --radius: 14px;
  --pad: 14px 16px;
  --ink:#111827; 
  --muted:#475569;

  position: fixed; 
  left: 50%; 
  bottom: 18px; 
  transform: translateX(-50%) translateY(20px);
  width: min(920px, 92vw); 
  z-index: 2147483000;
  background: var(--bg); 
  border:1px solid var(--border); 
  border-radius: var(--radius);
  box-shadow: var(--shadow); 
  padding: var(--pad);
  backdrop-filter: saturate(110%) blur(2px);
  opacity: 0; 
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
}

.ulm-cookie.is-open{ 
  opacity:1; 
  transform: translateX(-50%) translateY(0); 
  pointer-events: auto 
}

/* Dark mode support */
@media (prefers-color-scheme: dark){
  .ulm-cookie{
    --bg: rgba(20,22,30,.85); 
    --border: rgba(255,255,255,.12);
    --ink:#e5e7eb; 
    --muted:#a3a3a3; 
    --shadow: 0 12px 36px rgba(0,0,0,.45);
  }
}

/* Position variations */
.ulm-cookie.position-bottom-left {
  left: 18px;
  transform: translateX(0) translateY(20px);
}
.ulm-cookie.position-bottom-left.is-open {
  transform: translateX(0) translateY(0);
}

.ulm-cookie.position-bottom-right {
  left: auto;
  right: 18px;
  transform: translateX(0) translateY(20px);
}
.ulm-cookie.position-bottom-right.is-open {
  transform: translateX(0) translateY(0);
}

.ulm-cookie.position-top-center {
  top: 18px;
  bottom: auto;
  transform: translateX(-50%) translateY(-20px);
}
.ulm-cookie.position-top-center.is-open {
  transform: translateX(-50%) translateY(0);
}

/* Layout */
.uc-wrap{ 
  display: grid; 
  grid-template-columns: 1fr auto; 
  gap: 12px; 
  align-items: start 
}

.uc-copy{ 
  display:grid; 
  gap:6px; 
  min-width:0 
}

#ulm-cookie-title{ 
  margin:0; 
  font-weight:900; 
  letter-spacing:.2px; 
  font-size:16px; 
  color:var(--ink) 
}

.uc-text{ 
  margin:0; 
  color:var(--muted) 
}

.uc-text a{ 
  color: var(--accent); 
  text-decoration: underline; 
  text-underline-offset: 2px 
}

/* Buttons */
.uc-actions{ 
  display:flex; 
  gap:10px; 
  align-items:center; 
  flex-wrap:wrap; 
  justify-content:flex-end 
}

.uc-btn{
  appearance:none; 
  display:inline-flex; 
  align-items:center; 
  gap:8px; 
  cursor:pointer;
  border-radius: 10px; 
  padding: 10px 14px; 
  font-weight:800; 
  letter-spacing:.2px;
  border:1.5px solid transparent; 
  background:#fff; 
  color:#111; 
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  font-family: inherit;
  font-size: 14px;
}

.uc-btn svg{ 
  width:18px; 
  height:18px; 
  stroke:currentColor; 
  fill:none; 
  stroke-width:1.8 
}

/* Accept button (brand red) */
.uc-accept{ 
  background:#dc2626; 
  color:#fff; 
  border-color:#b91c1c; 
  box-shadow:0 10px 22px rgba(220,38,38,.22) 
}

.uc-accept:hover{ 
  transform: translateY(-1px); 
  filter:saturate(1.05); 
  box-shadow:0 14px 28px rgba(220,38,38,.28) 
}

/* Decline button (outline, equally prominent) */
.uc-decline{ 
  background:transparent; 
  color:#dc2626; 
  border-color:#dc2626; 
  box-shadow:0 3px 12px rgba(0,0,0,.06) 
}

.uc-decline:hover{ 
  background: rgba(220,38,38,.06) 
}

/* Close button (X) */
.uc-close{
  background: transparent; 
  color: var(--muted); 
  border-color: var(--border);
}

.uc-close:hover{ 
  background: rgba(0,0,0,.04) 
}

/* Dark mode button adjustments */
@media (prefers-color-scheme: dark){
  .uc-decline{ 
    box-shadow: 0 4px 14px rgba(0,0,0,.4) 
  }
  .uc-close:hover{ 
    background: rgba(255,255,255,.06) 
  }
}

/* Responsive design - stack on narrow screens */
@media (max-width:720px){
  .uc-wrap{ 
    grid-template-columns: 1fr; 
    gap:12px 
  }
  .uc-actions{ 
    justify-content:stretch 
  }
  .uc-actions .uc-btn{ 
    flex:1 1 auto; 
    justify-content:center 
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  .ulm-cookie{ 
    transition:none 
  }
  .uc-btn{ 
    transition:none 
  }
}

/* Custom CSS injection point */
.ulm-cookie-custom {
  /* Custom styles will be injected here via admin panel */
}
