/* Uses CSS variables provided inline on #obc-age-overlay */
.obc-age-overlay{
  position:fixed; inset:0; z-index:999999;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(2px);
}
#obc-age-overlay{
  background: rgba(0,0,0, var(--obc-overlay-opacity, 0.78));
}
#obc-age-overlay{
  /* overlay_color is applied by stacking a color layer via box-shadow */
  /* We'll use background-color with opacity by converting overlay_color to rgb in JS would be complex;
     so we use a simple approach: background is set with opacity, and overlay_color affects a pseudo layer */
}
#obc-age-overlay::before{
  content:"";
  position:absolute; inset:0;
  background: var(--obc-overlay-color, #000000);
  opacity: var(--obc-overlay-opacity, 0.78);
}
#obc-age-overlay > .obc-age-modal{
  position:relative;
  z-index:1;
}

.obc-age-modal{
  width:min(560px,100%);
  background: var(--obc-modal-bg, #111111);
  color: var(--obc-text, #ffffff);
  border:1px solid var(--obc-border, rgba(255,255,255,.12));
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  overflow:hidden;
}

.obc-age-header{
  padding:18px 20px 0;
  text-align:center;
}

.obc-age-logo{ display:flex; justify-content:center; margin-bottom:10px; }
.obc-age-logo-img{ max-width:200px; width:100%; height:auto; }

@media (max-width:420px){
  .obc-age-logo-img{ max-width:170px; }
}

.obc-age-title{
  margin:0;
  font-size:22px;
  letter-spacing:.2px;
}

.obc-age-body{ padding:14px 20px 20px; }

.obc-age-message p{
  margin:10px 0 0;
  line-height:1.55;
  opacity:.92;
}

.obc-age-terms,
.obc-age-remember{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:16px;
  font-size:14px;
  opacity:.92;
  user-select:none;
}

.obc-age-terms input,
.obc-age-remember input{ width:16px; height:16px; margin-top:2px; }

.obc-age-terms a{ color: var(--obc-link, #ffffff); text-decoration: underline; }

.obc-age-disclaimer{
  margin-top:14px;
  padding:10px 12px;
  border:1px solid var(--obc-border, rgba(255,255,255,.14));
  border-radius:10px;
  font-size:13px;
  opacity:.9;
  line-height:1.45;
}

.obc-age-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:18px;
}

@media(min-width:520px){
  .obc-age-actions{ grid-template-columns:1fr 1fr; }
}

.obc-age-btn{
  appearance:none;
  border:1px solid var(--obc-border, rgba(255,255,255,.16));
  background:transparent;
  color: var(--obc-text, #ffffff);
  padding:12px 14px;
  border-radius:10px;
  font-size:14px;
  cursor:pointer;
  transition: transform .06s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}

.obc-age-btn:hover{
  border-color: var(--obc-border, rgba(255,255,255,.30));
  background: rgba(255,255,255,.06);
}

.obc-age-btn:active{ transform: translateY(1px); }

.obc-age-yes{
  background: var(--obc-yes-bg, #ffffff);
  color: var(--obc-yes-text, #000000);
  border-color: var(--obc-yes-bg, #ffffff);
}

.obc-age-yes:hover{ opacity: .92; }

.obc-age-no{
  background: var(--obc-no-bg, transparent);
  color: var(--obc-no-text, #ffffff);
}

.obc-age-yes:disabled{
  opacity:.55;
  cursor:not-allowed;
}