.uni-captcha-field {
  position: relative;
}

.uni-captcha-field > label {
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 700;
}

.uni-captcha-shell {
  --captcha-accent: var(--uni-primary, var(--store-primary, #0d7eff));
  --captcha-accent-soft: var(--uni-primary-soft, var(--store-primary-soft, rgba(13, 126, 255, 0.16)));
  --captcha-accent-line: var(--uni-primary-line, var(--store-primary-line, rgba(13, 126, 255, 0.2)));
  --captcha-surface: var(--uni-surface, var(--store-panel, #ffffff));
  --captcha-surface-soft: var(--uni-surface-soft, var(--store-panel-2, #f6f8fb));
  --captcha-text: var(--uni-text, var(--store-text, #172645));
  --captcha-muted: var(--uni-muted, var(--store-muted, #5f7397));
  --captcha-line: var(--uni-line, var(--store-border, rgba(24, 39, 69, 0.12)));
  position: relative;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--captcha-line);
  border-radius: 22px;
  background: linear-gradient(145deg, var(--captcha-surface) 0%, var(--captcha-surface) 52%, var(--captcha-surface-soft) 100%);
  box-shadow: 0 18px 32px rgba(18, 43, 92, 0.08);
}

.uni-captcha-shell::before,
.uni-captcha-shell::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.uni-captcha-shell::before {
  width: 150px;
  height: 150px;
  top: -70px;
  right: -54px;
  background: radial-gradient(circle, var(--captcha-accent-soft) 0%, rgba(13, 126, 255, 0) 72%);
  opacity: 0.95;
}

.uni-captcha-shell::after {
  width: 110px;
  height: 110px;
  left: -42px;
  bottom: -60px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 72%);
  opacity: 0.6;
}

.uni-captcha-shell__meta,
.uni-captcha-shell__body {
  position: relative;
  z-index: 1;
}

.uni-captcha-shell__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.uni-captcha-shell__lead {
  min-width: 0;
}

.uni-captcha-shell__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--captcha-accent-line);
  background: var(--captcha-accent-soft);
  color: var(--captcha-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.uni-captcha-shell__hint {
  display: block;
  margin-top: 8px;
  color: var(--captcha-muted);
  font-size: 12px;
  line-height: 1.55;
}

.uni-captcha-shell__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--captcha-line);
  background: rgba(255, 255, 255, 0.24);
  color: var(--captcha-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.uni-captcha-box {
  position: relative;
}

.uni-captcha-box__frame {
  position: relative;
  min-height: 76px;
  padding: 12px;
  border: 1px dashed var(--captcha-accent-line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.uni-captcha-box.is-verified .uni-captcha-box__frame {
  border-color: rgba(38, 181, 112, 0.34);
  background: linear-gradient(145deg, rgba(38, 181, 112, 0.12) 0%, rgba(38, 181, 112, 0.04) 100%);
  box-shadow: inset 0 0 0 1px rgba(38, 181, 112, 0.1);
}

.uni-captcha-box.is-verified::after {
  content: "Terverifikasi";
  position: absolute;
  top: -10px;
  right: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #22b573;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(34, 181, 115, 0.22);
}

.uni-captcha-widget {
  display: block;
  width: 100%;
}

.uni-captcha-widget.g-recaptcha {
  min-height: 78px;
}

.uni-captcha-widget.g-recaptcha > div {
  transform-origin: 0 0;
}

.uni-captcha-widget.cf-turnstile {
  min-height: 65px;
}

.uni-captcha-native {
  width: 100%;
}

.uni-captcha-native .input-group-addon {
  padding: 0;
  overflow: hidden;
  border-radius: 14px 0 0 14px;
  border-color: var(--captcha-line);
  background: var(--captcha-surface);
}

.uni-captcha-native .uni-captcha-image {
  display: block;
  width: auto;
  max-width: none;
}

.uni-captcha-native .form-control {
  height: 46px;
  border-color: var(--captcha-line);
  background: var(--captcha-surface);
  color: var(--captcha-text);
  box-shadow: none;
}

.uni-captcha-native .form-control:focus {
  border-color: var(--captcha-accent);
  box-shadow: 0 0 0 3px var(--captcha-accent-soft);
}

.uni-captcha-native .input-group-btn > .btn {
  height: 46px;
  border-color: var(--captcha-line);
  background: var(--captcha-accent-soft);
  color: var(--captcha-accent);
  border-radius: 0 14px 14px 0;
  font-weight: 700;
}

.uni-captcha-native .input-group-btn > .btn:hover,
.uni-captcha-native .input-group-btn > .btn:focus {
  background: var(--captcha-accent);
  border-color: var(--captcha-accent);
  color: #fff;
}

.uni-inline-captcha .uni-captcha-shell {
  padding: 12px 13px;
  border-radius: 18px;
}

.uni-inline-captcha .uni-captcha-shell__meta {
  margin-bottom: 10px;
}

.uni-inline-captcha .uni-captcha-shell__hint {
  font-size: 11px;
}

.uni-inline-captcha .uni-captcha-shell__badge {
  padding: 6px 10px;
  font-size: 10px;
}

body.uni-user-page .uni-captcha-shell {
  box-shadow: var(--uni-shadow, 0 18px 38px rgba(18, 43, 92, 0.14));
  padding: 12px;
  border-radius: 16px;
}

body.uni-user-page .uni-captcha-shell__meta {
  align-items: center;
}

body.uni-user-page .uni-captcha-shell__body {
  display: flex;
  justify-content: center;
}

body.uni-user-page .uni-captcha-box {
  width: 100%;
}

body.uni-user-page .uni-captcha-box__frame {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px;
  border-radius: 14px;
  overflow: hidden;
  text-align: center;
}

body.uni-user-page .uni-captcha-widget {
  display: inline-block;
  margin: 0 auto;
  max-width: 100%;
}

body.uni-user-page .uni-captcha-widget.cf-turnstile,
body.uni-user-page .uni-captcha-widget.g-recaptcha {
  transform: translateX(-16px) scale(0.88);
  transform-origin: top center;
}

body.store-home .uni-captcha-shell {
  box-shadow: 0 22px 42px rgba(4, 12, 28, 0.22);
}

html[data-theme="light"] body.store-home .uni-captcha-shell {
  box-shadow: 0 18px 34px rgba(18, 36, 70, 0.11);
}

@media (max-width: 767px) {
  .uni-captcha-shell {
    padding: 12px;
    border-radius: 18px;
  }

  .uni-captcha-shell__meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .uni-captcha-shell__badge {
    text-align: left;
  }

  .uni-captcha-box__frame {
    padding: 10px;
    border-radius: 16px;
  }

  .uni-captcha-native .input-group-addon,
  .uni-captcha-native .input-group-btn > .btn {
    border-radius: 12px;
  }

  .uni-captcha-native .input-group-addon {
    border-right: 1px solid var(--captcha-line);
  }
}