/* Contact Form Shield block */

.acro-contact-shield {
    margin: 0;
}

.acro-contact-shield__panel {
    margin: 0 auto;
    max-width: 760px;
}

.acro-contact-shield__title {
    margin: 0 0 8px;
}

.acro-contact-shield__subtitle {
    margin: 0 0 18px;
    max-width: 65ch;
}

.acro-contact-shield__form {
    display: grid;
    gap: 14px;
}

/* Zero-out the default block margins Gutenberg adds to every .wp-block
   child — the grid gap handles all spacing. */
.acro-contact-shield__form > *,
.acro-contact-shield__form .wp-block-columns,
.acro-contact-shield__form .wp-block-column,
.acro-contact-shield__form .wp-block-group {
    margin-block-start: 0 !important;
    margin-block-end:   0 !important;
}

.acro-contact-shield__form > * {
    min-width: 0;
}

.acro-contact-shield__submit {
    background:     var( --acf-button, #ff3366 );
    border:         2px solid var( --acf-button, #ff3366 );
    border-radius:  var( --acf-btn-radius, 100px );
    color:          var( --acf-button-text, #fff );
    cursor:         pointer;
    display:        block;
    font-family:    inherit;
    font-size:      0.955rem;
    font-weight:    800;
    letter-spacing: 0.25px;
    margin-top:     6px;
    padding:        0.95rem 2.5rem;
    text-align:     center;
    text-transform: uppercase;
    transition:     background-color 400ms ease-in-out, border-color 400ms ease-in-out, color 400ms ease-in-out;
    width:          100%;
}

.acro-contact-shield__submit:hover,
.acro-contact-shield__submit:focus-visible {
    background:     var( --acf-button-hover, #e62354 );
    border-color:   var( --acf-button-hover, #e62354 );
    color:          var( --acf-button-text, #fff );
    outline:        none;
}

.acro-contact-shield__submit:focus {
    color:      var( --acf-button-text, #fff );
    box-shadow: none;
}

.acro-contact-shield__submit:active {
    transform: scale( 0.97 );
}

.acro-contact-shield__submit.is-loading {
    cursor: not-allowed;
    opacity: 0.75;
    position: relative;
}

.acro-contact-shield__submit.is-loading::after {
    animation:    acro-cfs-spin 0.7s linear infinite;
    border:       2px solid rgba( 255, 255, 255, 0.35 );
    border-radius: 50%;
    border-top-color: #fff;
    content:      '';
    height:       16px;
    margin-top:   -8px;
    position:     absolute;
    right:        18px;
    top:          50%;
    width:        16px;
}

@keyframes acro-cfs-spin {
    to { transform: rotate( 360deg ); }
}

.acro-contact-shield__consent {
    align-items: flex-start;
    color: var( --acf-consent, inherit );
    display: inline-flex;
    gap: 8px;
    line-height: 1.6;
    margin-top: 10px;
}

.acro-contact-shield__consent span {
    color: inherit;
}

.acro-contact-shield__consent input {
    margin-top: 5px;
}

.acro-contact-shield__privacy-note {
    color: var( --acf-consent, inherit );
    font-size: 0.92rem;
    line-height: 1.55;
    margin-top: 10px;
}

.acro-contact-shield__notice {
    border-radius: 8px;
    display: none;
    margin-bottom: 14px;
    padding: 10px 12px;
}

.acro-contact-shield__notice.is-visible {
    display: block;
}

.acro-contact-shield__notice.is-success {
    background: var( --acf-success-bg, rgba( 44, 167, 104, 0.12 ) );
    border: 1px solid rgba( 44, 167, 104, 0.35 );
    color: var( --acf-success-text, inherit );
}

.acro-contact-shield__notice.is-error {
    background: var( --acf-error-bg, rgba( 220, 46, 46, 0.09 ) );
    border: 1px solid rgba( 220, 46, 46, 0.35 );
    color: var( --acf-error-text, inherit );
}

.acro-contact-shield__thankyou {
    background: var( --acf-success-bg, rgba( 44, 167, 104, 0.12 ) );
    border: 1px solid rgba( 44, 167, 104, 0.35 );
    border-radius: 8px;
    color: var( --acf-success-text, inherit );
    margin-top: 12px;
    padding: 12px 14px;
}

.acro-contact-shield__thankyou[hidden] {
    display: none !important;
}

.acro-contact-shield__thankyou--preview {
    display: block;
}

/* -- Editor canvas --------------------------------------------------------- */
.editor-styles-wrapper .acro-contact-shield--editor {
    border: 1px dashed rgba( 0, 0, 0, 0.15 );
    border-radius: 8px;
    padding: 18px;
}

/* Zero-out block margins in the editor builder area too. */
.editor-styles-wrapper .acro-contact-shield__builder-area > *,
.editor-styles-wrapper .acro-contact-shield__builder-area .wp-block-columns,
.editor-styles-wrapper .acro-contact-shield__builder-area .wp-block-column,
.editor-styles-wrapper .acro-contact-shield__builder-area .wp-block-group {
    margin-block-start: 0 !important;
    margin-block-end:   0 !important;
}

.acro-contact-shield__builder-area {
    border: 1px dashed rgba( 0, 0, 0, 0.15 );
    border-radius: 8px;
    margin-bottom: 14px;
    min-height: 80px;
    padding: 12px;
}

.acro-contact-shield__editor-footer {
    border-top: 1px dashed rgba( 0, 0, 0, 0.12 );
    margin-top: 10px;
    padding-top: 12px;
}

.acro-contact-shield__editor-consent-hint {
    color: var( --acf-consent, inherit );
    font-size: 12px;
    margin: 8px 0 0;
    opacity: 0.8;
}

.acro-contact-shield__no-fields {
    border: 1px dashed rgba( 220, 46, 46, 0.35 );
    border-radius: 8px;
    font-size: 0.9rem;
    padding: 14px 16px;
}

.editor-styles-wrapper .acro-contact-shield__submit {
    background:     var( --acf-button, #ff3366 );
    border:         2px solid var( --acf-button, #ff3366 );
    border-radius:  var( --acf-btn-radius, 100px );
    color:          var( --acf-button-text, #fff );
    cursor:         default;
    display:        block;
    font-size:      0.955rem;
    font-weight:    800;
    letter-spacing: 0.25px;
    padding:        0.95rem 2.5rem;
    pointer-events: none;
    text-align:     center;
    text-transform: uppercase;
    width:          100%;
}

@media ( max-width: 720px ) {
    .acro-contact-shield__submit {
        width: 100%;
    }
}