/* Trigger: UKP pill */
  .ukp-btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:14px 22px; font-weight:800; letter-spacing:.25px;
    color:var(--ukp-text); background:var(--ukp-bg);
    border:2px solid var(--ukp-gold); border-radius:999px; cursor:pointer;
    box-shadow:0 6px 16px rgba(212,175,55,.18); transition:transform .15s ease, box-shadow .2s ease;
  }
  .ukp-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(212,175,55,.28); }

  /* Backdrop container */
  .ukp-sheet{ position:fixed; inset:0; display:none; z-index:9999; background:rgba(0,0,0,.75); }
  .ukp-sheet.show{ display:block; }

  /* Panel: bottom sheet (mobile-first) */
  .ukp-panel{
    position:absolute; left:0; right:0; bottom:0;
    background:
      radial-gradient(1000px 400px at 10% -10%, rgba(212,175,55,.10), transparent 60%),
      linear-gradient(180deg, #111, var(--ukp-panel));
    color:var(--ukp-text);
    border-top-left-radius:24px; border-top-right-radius:24px;
    border:1px solid rgba(212,175,55,.25);
    box-shadow:var(--ukp-shadow);
    display:flex; flex-direction:column;
    height:90vh;                             /* app-like height */
    transform:translateY(100%);              /* start off-screen */
    transition:transform .22s ease-out;
    will-change: transform;
    padding-bottom: var(--safe-bottom);
  }
  /* Open state for animation */
  .ukp-panel.open{ transform:translateY(0); }
  /* Remove transform for perfect dropdown alignment after opening */
  .ukp-panel.no-transform{ transform:none !important; }

  /* Grab handle + header */
  .ukp-handle{ width:42px; height:5px; border-radius:999px; background:#333; margin:8px auto 4px; }
  .ukp-head{
    text-align:center; position:relative; padding:8px 16px 10px;
    border-bottom:1px solid rgba(212,175,55,.18);
  }
  .ukp-title{ margin:0; font-size:14px; font-weight:700; letter-spacing:.3px; }
  .ukp-close{
    all:unset; position:absolute; right:10px; top:8px; font-size:22px;
    cursor:pointer; color:var(--ukp-text);
  }
  .ukp-close:hover{ color:var(--ukp-gold); }

  /* Body and iframe fill remaining space */
  .ukp-body{ flex:1; display:flex; }
  .ukp-frame{
    flex:1; width:100%; border:0; background:#111;
    border-bottom-left-radius:24px; border-bottom-right-radius:24px;
  }

  /* Large screens: center modal */
  @media (min-width: 720px){
    .ukp-panel{
      left:50%; right:auto; bottom:auto; top:50%;
      width:min(900px, 92vw); height:min(80vh, 760px);
      border-radius:20px;
      transform:translate(-50%, 100%);      /* start below center */
    }
    .ukp-panel.open{ transform:translate(-50%, -50%); }
    .ukp-frame{ border-radius:0 0 20px 20px; }
  }
  @media (prefers-reduced-motion: reduce){
    .ukp-panel{ transition:none !important; }
  }
  
  /* Page-level UKP terms block (outside iframe) */
.ukp-terms{
  max-height: 42vh; overflow:auto; padding:12px 14px;
  border:1px solid #333; border-radius:12px; background:#0f0f0f; color:#eaeaea;
}
.ukp-terms p{ margin:0 0 10px 0; line-height:1.45; font-size:14px; }
.ukp-terms a{ color:#837766; text-decoration:underline; text-underline-offset:2px; }
.ukp-terms ul{ margin:0 0 10px 18px; }
.ukp-terms li{ margin:6px 0; list-style:disc; }

/* Tablet/desktop card */
@media (min-width:481px){
  form{
    max-width:540px !important; margin:0 auto !important;
    background:#0b0b0b !important; padding:10px !important;
    border-radius:20px !important; border:1px solid rgba(212,175,55,.25) !important;
    box-shadow:none !important;
  }
}