/* Inputs reales dentro de las cajas del page-builder (Instant). El borde/fondo/alto
   los pone el CSS de la sección; aquí el input rellena la caja de forma transparente.
   Genérico: reutilizable por cualquier página con formulario portado del diseño. */
.pd-input {
    border: 0;
    background: transparent;
    width: 100%;
    height: 100%;
    padding: 14px 18px !important;
    font-family: inherit;
    font-size: 14px;
    color: #141414;
    outline: none;
    box-sizing: border-box;
}

.pd-textarea {
    border: 0;
    background: transparent;
    width: 100%;
    height: 100%;
    padding: 16px 18px !important;
    font-family: inherit;
    font-size: 14px;
    color: #141414;
    outline: none;
    box-sizing: border-box;
    resize: none;
}

.pd-input::placeholder,
.pd-textarea::placeholder {
    color: #707070 !important;
    opacity: 1 !important;
}

/* Imagen hero de Become a Creator: las reglas "lightbox" de Instant
   (object-fit:contain, max-height:100vh) pisaban el estilo del contenedor.
   Forzamos el render del diseño (cubrir el contenedor de 400px). */
.iByjTTxDfxgMOjkzD > img.instant-image__main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    object-fit: cover;
    object-position: 47% 27%;
}

/* Honeypot anti-bot oculto */
.pd-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Botón submit (el color/tamaño los pone el diseño) */
button[data-async-submit] {
    border: 0;
    cursor: pointer;
    font: inherit;
    color: #fff;
}

button[data-async-submit].is-loading {
    opacity: 0.7;
    cursor: progress;
}

/* Mensajes async (éxito/error) */
[data-async-messages] ul {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

[data-async-messages] li {
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 27, 130, 0.4);
    background: rgba(255, 27, 130, 0.08);
    color: #141414;
}

/* Quitar el fondo blanco del root de Become a Creator (que se vea el cream del sitio). */
.i8521cM911Wko4bac { background: transparent !important; }
.iUU6yCXWy626erzra { background: transparent !important; }
.iByjTTxDfxgMOjkzD { height: 44em !important; }
.pd-accent { color: #ff1b82; }
.iNVpFUa9swqlyAre3 { width: 640px !important; max-width: 100% !important; }

/* Become a Creator responsive */
.iUU6yCXWy626erzra { height: auto !important; }
@media (max-width: 860px) {
    .iW7F28OoIBruvCr99 { flex-direction: column !important; }
    .ido7bBhuvSVZh5lIF { width: 100% !important; }
    .iNVpFUa9swqlyAre3 { width: 100% !important; font-size: 44px !important; }
    .iByjTTxDfxgMOjkzD { height: 20em !important; }
}
