/* Scroll lock via :has() so the gate never mutates <body>/<html> classes. */
html:has(.cucg-gate.is-open) { overflow: hidden; }

.cucg-gate[hidden],
.cucg-gate [hidden] { display: none !important; }

.cucg-gate {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(17, 24, 39, 0.75); /* overridden by Appearance settings (inline CSS) */
    overflow-y: auto;
}

/* --cucg-* variables come from the Appearance settings (inline CSS); fallbacks match the defaults. */
.cucg-gate__dialog {
    width: 100%;
    max-width: var(--cucg-width, 480px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--cucg-card, #fff);
    color: var(--cucg-b-color, #1f2937);
    border-radius: var(--cucg-radius, 8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    font-size: var(--cucg-b-size, 15px);
    line-height: 1.5;
}

.cucg-gate__head {
    padding: var(--cucg-h-pad, 16px 24px 16px 24px);
    background: var(--cucg-h-bg, #fff);
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

/* Doubled scope + !important so theme/Elementor kit heading styles can't override the settings. */
.cucg-gate .cucg-gate__title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--cucg-h-size, 20px) !important;
    font-weight: var(--cucg-h-weight, 600) !important;
    color: var(--cucg-h-color, #1f2937) !important;
    text-transform: var(--cucg-h-tt, none) !important;
    line-height: 1.3 !important;
}

.cucg-gate__form { padding: var(--cucg-pad, 24px 24px 24px 24px); margin: 0; }

.cucg-gate__field { margin-bottom: var(--cucg-gap, 16px); }

.cucg-gate .cucg-gate__field > label,
.cucg-gate .cucg-gate__field legend {
    display: block;
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: var(--cucg-b-size, 15px) !important;
    font-weight: var(--cucg-b-weight, 600) !important;
    color: var(--cucg-b-color, #1f2937) !important;
    text-transform: var(--cucg-b-tt, none) !important;
}

/* Checkbox options follow body size/color/transform but stay normal weight. */
.cucg-gate .cucg-gate__check {
    font-size: var(--cucg-b-size, 15px) !important;
    font-weight: 400 !important;
    color: var(--cucg-b-color, #1f2937) !important;
    text-transform: var(--cucg-b-tt, none) !important;
}

.cucg-gate__field fieldset { border: 0; margin: 0; padding: 0; }

.cucg-gate__field input[type="text"],
.cucg-gate__field input[type="email"],
.cucg-gate__field select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #1f2937; /* inputs stay white, so keep their text dark whatever the Text color */
    font: inherit;
}

.cucg-gate__check {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 4px 0;
    font-weight: 400;
}

.cucg-gate__req { color: #b91c1c; }

.cucg-gate__field.has-error input,
.cucg-gate__field.has-error select { border-color: #b91c1c; }

.cucg-gate__field-error,
.cucg-gate__error {
    display: block;
    margin: 6px 0 0;
    color: #b91c1c;
    font-size: 14px;
}

.cucg-gate__error { margin: 0 0 12px; }

.cucg-gate__turnstile { margin-bottom: 16px; }

/* Doubled class + !important: Elementor kit rules (.elementor-kit-X button) otherwise win. */
.cucg-gate .cucg-gate__submit.cucg-gate__submit {
    display: block !important;
    width: 100% !important;
    margin: calc(var(--cucg-gap, 16px) * 1.5) 0 0 !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #1d4ed8 !important;
    color: #fff !important;
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.cucg-gate .cucg-gate__submit.cucg-gate__submit:hover,
.cucg-gate .cucg-gate__submit.cucg-gate__submit:focus { background: #1e40af !important; color: #fff !important; }

.cucg-gate .cucg-gate__submit.cucg-gate__submit:disabled { opacity: 0.6; cursor: wait; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.cucg-gate__hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}