/* Email to Target Frontend Styles */

.chd-ett-container {
    width: 100%;
    margin: 0 auto;
    font-family: var(--chd-font-body, inherit);
}

/* Test Mode Banner */
.ett-test-mode-banner {
    background: var(--chd-color-warning-bg, #fff3cd);
    border: 3px solid var(--chd-color-warning);
    color: var(--chd-color-warning-text);
    padding: 16px 24px;
    text-align: center;
    font-size: var(--chd-text-base-px, 18px);
    font-weight: 600;
    margin-bottom: 20px;
    border-radius: var(--chd-radius-md);
}

/* Layout: Content above form */
.ett-content-above {
    max-width: 800px;
    margin: 0 auto 40px;
    text-align: left;
}

.ett-content-above .ett-title {
    text-align: left;
}

/* Layout: Content left of form (default) */
.chd-ett-container .margins-container-left {
    display: grid;
    grid-template-columns: 1fr 40%;
    gap: 60px;
    align-items: start;
}

/* Layout: Content above form - form matches content width */
.chd-ett-container .margins-container-above {
    display: block;
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .chd-ett-container .margins-container-left,
    .chd-ett-container .margins-container-above {
        display: block;
        max-width: 100%;
    }

    .ett-content-above {
        margin-bottom: 20px;
    }
}

.ett-content-area {
    width: 100%;
}

.ett-content-area .ett-featured-image {
    width: 100%;
    margin-bottom: 20px;
}

.ett-content-area .ett-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* Cap the height of the image above the title so a tall image can't dominate
   the page (applies to both the 'above' and 'left' layouts). */
.ett-featured-image img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
}

/* Super label — inherits shared .box-label from chdactions-style.css */

.ett-content-area .ett-title {
    margin: 0 0 20px 0;
    font-size: var(--chd-heading-1-px, 48px);
    line-height: var(--chd-line-height-h1, 1.1);
}

@media (max-width: 787px) {
    .ett-content-area .ett-title {
        font-size: calc(var(--chd-heading-1-px, 48px) * 0.75);
    }
}

.ett-content-area .ett-excerpt {
    font-size: var(--chd-text-base-px, 18px);
    margin-bottom: 20px;
    line-height: var(--chd-line-height-body, 1.6);
}

.ett-content-area .ett-description {
    font-size: var(--chd-text-base-px, 18px);
    line-height: var(--chd-line-height-body, 1.6);
}

.ett-content-area .ett-description h2 {
    font-size: var(--chd-heading-2-px, 28px);
    margin-top: 30px;
}

.ett-content-area .ett-description h3 {
    font-size: var(--chd-heading-3-px, 22px);
}

.ett-form-area {
    width: 100%;
}

/* Keep the form in view as the user scrolls the page content.
   Only sticky on wider screens where the form sits beside the content;
   on narrow screens the layout stacks, so sticky is disabled to avoid
   the form overlapping the content above it. */
@media (min-width: 992px) {
    .chd-ett-container .margins-container-left .ett-form-area {
        position: sticky;
        top: calc(var(--chd-header-offset, 60px) + 20px);
        align-self: start;
    }
}

/* Heading + subtitle shown directly above the form */
.ett-form-intro {
    margin-bottom: 16px;
}

.ett-form-intro .ett-form-title {
    margin: 0 0 6px 0;
    font-size: var(--chd-heading-2-px, 28px);
    line-height: var(--chd-line-height-h2, 1.2);
}

.ett-form-intro .ett-form-subtitle {
    margin: 0;
    font-size: var(--chd-text-base-px, 18px);
    line-height: var(--chd-line-height-body, 1.6);
    opacity: 0.85;
}

/* Postcode lookup result: matched area + "you'll be emailing" confirmation */
.ett-matched-area {
    margin: 0 0 12px 0;
    font-size: var(--chd-text-base-px, 18px);
}

#ett-recipients-intro {
    margin: 0 0 10px 0;
}

#ett-recipients-intro > *:first-child {
    margin-top: 0;
}

#ett-recipients-intro h1,
#ett-recipients-intro h2,
#ett-recipients-intro h3,
#ett-recipients-intro h4 {
    font-family: var(--chd-font-heading, inherit);
    color: var(--chd-text-primary, #171717);
}

#ett-recipients-intro h1 { font-size: var(--chd-heading-1-px, 48px); line-height: var(--chd-line-height-h1, 1.1); }
#ett-recipients-intro h2 { font-size: var(--chd-heading-2-px, 28px); line-height: var(--chd-line-height-h2, 1.2); }
#ett-recipients-intro h3 { font-size: var(--chd-heading-3-px, 22px); line-height: var(--chd-line-height-h3, 1.3); }
#ett-recipients-intro h4 { font-size: var(--chd-heading-4-px, 18px); line-height: var(--chd-line-height-h4, 1.4); }

.ett-confirm-recipients {
    margin-top: 16px;
}

.ett-container {
    max-width: 100%;
    margin: 0 auto;
    background: var(--chd-card-bg, #f9f9f9);
    padding: var(--chd-card-padding, 20px);
    border-radius: var(--chd-radius-md, 8px);
    border: var(--chd-card-border, none);
}

@media (max-width: 991px) {
    .ett-container {
        padding: 32px;
        margin-bottom: 64px;
    }
}

@media (max-width: 787px) {
    .ett-container {
        padding: 24px;
    }
}

/* Progress Bar - Hidden for cleaner look */
.ett-progress {
    display: none;
}

/* Steps */
.ett-step {
    display: none;
}

.ett-step[data-step="1"] {
    display: block;
}

.ett-step h3 {
    font-size: var(--chd-heading-2-px, 24px);
    margin: 0 0 8px 0;
    color: var(--chd-text-primary, #171717);
}

.ett-card-subtitle {
    font-size: var(--chd-text-base-px, 16px);
    line-height: var(--chd-line-height-body, 1.5);
    color: var(--chd-text-secondary, #555);
    margin: 0 0 20px 0;
}

.ett-step h4 {
    font-size: var(--chd-heading-3-px, 20px);
    margin: 20px 0 10px 0;
    color: var(--chd-text-primary, #171717);
}

/* Form Elements */
.ett-field {
    margin-bottom: 20px;
}

.ett-field label {
    display: block;
    font-size: var(--chd-font-form-label-px, 16px);
    color: var(--chd-form-label-color, #1e1e1e);
    font-family: var(--chd-font-body, inherit);
    font-weight: var(--chd-form-label-weight, 500);
    margin-bottom: 6px;
}

.ett-field input[type="text"],
.ett-field input[type="email"],
.ett-field input[type="tel"],
.ett-field textarea,
.ett-field select {
    width: 100%;
    border: var(--chd-input-border-width, 1px) solid var(--chd-form-border, #000);
    background: var(--chd-form-input-bg, #fff);
    color: var(--chd-form-text-color, #171717);
    border-radius: var(--chd-radius-sm, 8px);
    font-size: var(--chd-font-input-text-px, 16px);
    font-family: var(--chd-font-body, inherit);
    font-weight: var(--chd-form-input-weight, 400);
    line-height: 1.4;
    padding: var(--chd-input-padding-v, 10px) var(--chd-input-padding-h, 14px);
}

.ett-field input::placeholder,
.ett-field textarea::placeholder {
    font-weight: var(--chd-form-input-weight, 400);
    color: var(--chd-form-placeholder, #999);
}

.ett-field input:focus,
.ett-field textarea:focus,
.ett-field select:focus {
    outline: none;
    border-color: var(--chd-form-border-focus, var(--chd-primary-color, #000));
}

.ett-field-error {
    border-color: var(--chd-color-error) !important;
}

/* Inline validation error messages */
.ett-inline-error {
    color: var(--chd-color-error, #d32f2f);
    font-size: var(--chd-text-small-px, 14px);
    margin-top: 6px;
    line-height: 1.4;
}

/* Highlight consent checkbox border on error */
.ett-consent:has(.ett-field-error) label::before {
    border-color: var(--chd-color-error, #d32f2f) !important;
}

/* Buttons */
.ett-container .ett-btn {
    display: inline-block;
    background: var(--chd-primary-color, #1e40af);
    font-size: var(--chd-button-font-size-px, 18px);
    color: var(--chd-primary-text-color, #fff);
    font-weight: var(--chd-font-weight-button, 600);
    font-family: var(--chd-button-font-family, inherit);
    border: none;
    border-radius: var(--chd-radius-button, 8px);
    padding: var(--chd-button-padding-v, 12px) var(--chd-button-padding-h, 20px);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
    width: 100%;
    text-align: center;
}

.ett-container .ett-btn.ett-btn-primary {
    background: var(--chd-primary-color, #da0062);
    color: var(--chd-primary-text-color, #fff);
}

.ett-container .ett-btn.ett-btn-primary:hover {
    opacity: 0.9;
}

.ett-container .ett-btn.ett-btn-secondary {
    background: var(--chd-secondary-color, #374151);
    color: var(--chd-secondary-text-color, #fff);
    border: var(--chd-form-border-width-thick, 2px) solid var(--chd-secondary-color, #374151);
}

.ett-container .ett-btn.ett-btn-secondary:hover {
    background: var(--chd-secondary-hover, #1f2937);
    border-color: var(--chd-secondary-hover, #1f2937);
    color: var(--chd-secondary-text-color, #fff);
}

.ett-container .ett-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ett-btn-group {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

@media (max-width: 787px) {
    .ett-btn-group {
        flex-direction: column;
    }
}

/* Postcode Input */
.ett-postcode-group {
    display: grid;
    gap: 10px;
}

@media (min-width: 768px) {
    .ett-postcode-group {
        grid-template-columns: 1fr auto;
    }
}

.ett-postcode-group input {
    text-transform: uppercase;
    font-size: var(--chd-font-input-text-px, 16px) !important;
    border: var(--chd-input-border-width, 1px) solid var(--chd-form-border-color, #000) !important;
    background: var(--chd-form-input-bg, #fff) !important;
    color: var(--chd-form-text-color, #171717) !important;
    border-radius: var(--chd-radius-sm, 8px) !important;
    padding: var(--chd-input-padding-v, 10px) var(--chd-input-padding-h, 14px) !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    font-family: var(--chd-font-body, inherit) !important;
    font-weight: var(--chd-form-input-weight, 400) !important;
}

.ett-postcode-group button,
#ett-postcode-btn {
    white-space: nowrap;
    display: inline-block;
    background: var(--chd-primary-color, #1e40af);
    font-size: var(--chd-button-font-size-px, 18px);
    color: var(--chd-primary-text-color, #fff);
    font-weight: var(--chd-font-weight-button, 600);
    font-family: var(--chd-button-font-family, inherit);
    border: none;
    border-radius: var(--chd-radius-button, 8px);
    padding: var(--chd-button-padding-v, 12px) var(--chd-button-padding-h, 20px);
    cursor: pointer;
    transition: opacity 0.2s;
}

.ett-postcode-group button:hover,
#ett-postcode-btn:hover {
    opacity: 0.9;
}

.ett-postcode-group button:disabled,
#ett-postcode-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Insights / Custom Message */
.ett-insights,
.ett-custom-message {
    background: var(--chd-bg-surface, #f9f9f9);
    border: var(--chd-input-border-width, 1px) solid var(--chd-border-color, #ddd);
    padding: 16px 20px;
    border-radius: var(--chd-radius-md, 8px);
    margin-bottom: 20px;
}

.ett-insights h3,
.ett-custom-message-title {
    margin: 0 0 8px 0;
    font-size: var(--chd-heading-3-px, 20px);
    color: var(--chd-text-primary, #171717);
}

.ett-custom-message-content {
    line-height: var(--chd-line-height-body, 1.6);
    font-size: var(--chd-text-base-px, 16px);
}

.ett-custom-message-content p {
    margin: 0 0 8px 0;
}

.ett-custom-message-content p:last-child {
    margin-bottom: 0;
}

/* Multiple insights container */
.ett-insights-multiple {
    background: transparent;
    border: none;
    padding: 0;
}

.ett-insights-multiple .ett-insights {
    margin-bottom: 10px;
}

.ett-insights-multiple .ett-insights:last-child {
    margin-bottom: 0;
}

/* Recipients */
.ett-recipient {
    margin-bottom: 8px;
}

.ett-recipient strong {
    font-size: var(--chd-text-base-px, 16px);
    color: var(--chd-text-primary, #171717);
    display: block;
}

.ett-recipient-title {
    color: var(--chd-text-secondary, #4a4a4a);
    font-size: var(--chd-text-small-px, 14px);
    display: block;
    margin-top: 4px;
}

/* Recipient Selection (user_select mode) */
.ett-recipient-selectable {
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    position: relative;
    padding: 14px 16px 14px 50px;
    background: var(--chd-bg-surface, #f9f9f9);
    border: var(--chd-input-border-width, 2px) solid var(--chd-border-color, #ddd);
    border-radius: var(--chd-radius-md, 8px);
    margin-bottom: 8px;
}

.ett-recipient-selectable:hover {
    background: var(--chd-bg-surface-hover, #f0f0f0);
    border-color: var(--chd-form-border, #000);
}

.ett-recipient-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 1;
}

.ett-recipient-checkbox:checked + .ett-recipient-label::before {
    background: var(--chd-primary-color, #000);
    border-color: var(--chd-primary-color, #000);
}

.ett-recipient-checkbox:checked + .ett-recipient-label::after {
    display: block;
}

.ett-recipient-checkbox:checked + .ett-recipient-label {
    font-weight: var(--chd-form-label-weight, 600);
}

.ett-recipient-selectable:has(.ett-recipient-checkbox:checked) {
    background: var(--chd-bg-success, #e8f5e9);
    border-color: var(--chd-primary-color, #000);
}

.ett-recipient-label {
    display: flex;
    align-items: center;
    min-height: 22px;
    cursor: pointer;
    position: relative;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    font-size: var(--chd-text-base-px, 16px);
    line-height: 1.4;
    color: var(--chd-text-primary, #171717);
}

.ett-recipient-label::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    border-radius: var(--chd-radius-sm, 3px);
    display: block;
    border: var(--chd-input-border-width, 2px) solid var(--chd-form-border, #000);
    top: 50%;
    transform: translateY(-50%);
    left: -34px;
    background: var(--chd-form-input-bg, #fff);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ett-recipient-label::after {
    content: "";
    left: -26px;
    top: 50%;
    margin-top: -6px;
    position: absolute;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    display: none;
}

.ett-recipient-label strong,
.ett-recipient-label .ett-recipient-title {
    display: inline;
}

/* Send Progress Bar */
.ett-send-progress-wrapper {
    margin-bottom: 24px;
}

.ett-send-progress-text {
    font-size: var(--chd-text-base-px, 18px);
    font-weight: var(--chd-form-label-weight, 600);
    font-family: var(--chd-font-body, inherit);
    margin: 0 0 12px 0;
    color: var(--chd-text-primary, #171717);
}

.ett-progress-bar {
    width: 100%;
    height: var(--chd-progress-height, 8px);
    background: var(--chd-progress-bg, #e5e7eb);
    border-radius: var(--chd-progress-radius, 4px);
    overflow: hidden;
}

.ett-progress-bar-fill {
    height: 100%;
    background: var(--chd-progress-fill, var(--chd-primary-color, #da0062));
    transition: width 0.3s ease;
    border-radius: var(--chd-progress-radius, 4px);
}

/* Recipient Info (To/From display) */
.ett-recipient-info {
    background: var(--chd-bg-surface, #f9f9f9);
    padding: 12px 16px;
    margin-bottom: 24px;
    border-radius: var(--chd-radius-md, 8px);
    border: var(--chd-input-border-width, 1px) solid var(--chd-border-color, #ddd);
}

.ett-info-row {
    font-size: var(--chd-text-base-px, 16px);
    line-height: 1.6;
    margin: 0 0 4px 0;
}

.ett-info-row:last-child {
    margin-bottom: 0;
}

.ett-info-row strong {
    display: inline;
    font-weight: var(--chd-form-label-weight, 600);
    margin-right: 6px;
}

/* Email Compose - contenteditable editor */
.ett-email-editor {
    width: 100%;
    min-height: 250px;
    max-height: 50vh;
    padding: 12px 16px;
    border: var(--chd-form-border-width, 1px) solid var(--chd-form-border, #000);
    border-radius: var(--chd-radius-md);
    font-family: var(--chd-font-body, inherit);
    font-size: var(--chd-font-input-text-px, 16px);
    line-height: var(--chd-line-height-body, 1.6);
    overflow-y: auto;
    background: var(--chd-form-input-bg, #fff);
    color: var(--chd-form-text-color, #171717);
}

.ett-email-editor:focus {
    outline: none;
    border-color: var(--chd-form-border-focus, var(--chd-primary-color, #000));
}

.ett-email-editor p {
    margin: 0 0 12px;
}

.ett-email-editor ul,
.ett-email-editor ol {
    margin: 0 0 12px 24px;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

.ett-email-editor li {
    font-size: inherit;
    line-height: inherit;
    margin-bottom: 4px;
}

.ett-email-editor li::marker {
    font-size: inherit;
}

.ett-email-readonly {
    background: var(--chd-bg-surface, #f9f9f9);
    pointer-events: none;
    opacity: 0.7;
    border-color: var(--chd-border-color, #999);
}

/* Email Actions (buttons at bottom of email step) */
.ett-email-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    align-items: center;
}

.ett-email-actions .ett-btn-large {
    min-height: 56px;
    font-size: max(20px, var(--chd-button-font-size-px, 20px));
}

.ett-link-button {
    color: var(--chd-text-primary, #171717);
    text-decoration: underline;
    font-size: var(--chd-text-base-px, 16px);
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
    padding: 8px 0;
}

.ett-link-button:hover {
    text-decoration: none;
}

/* Loading spinner */
@keyframes ett-spin {
    to { transform: rotate(360deg); }
}

.ett-loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: var(--chd-input-border-width, 2px) solid var(--chd-border-color, #ddd);
    border-top-color: var(--chd-primary-color, #da0062);
    border-radius: 50%;
    animation: ett-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

/* Thank You */
.ett-thank-you {
    text-align: center;
    padding: 20px 0;
}

.ett-thank-you h2 {
    margin: 0 0 20px 0;
    font-size: var(--chd-heading-1-px, 32px);
    color: var(--chd-text-primary, #171717);
}

.ett-thank-you p {
    font-size: var(--chd-text-base-px, 18px);
    line-height: var(--chd-line-height-body, 1.6);
    margin: 0 0 20px 0;
}

/* Post-Sending Flow */
.ett-post-sending-flow {
    padding: 10px 0;
}

.ett-ps-step {
    text-align: center;
}

.ett-ps-step h2 {
    font-size: var(--chd-heading-1-px, 32px);
    margin: 0 0 20px 0;
    color: var(--chd-text-primary, #171717);
}

.ett-ps-text {
    font-size: var(--chd-text-base-px, 18px);
    line-height: var(--chd-line-height-body, 1.6);
    margin-bottom: 24px;
    color: var(--chd-text-secondary, #333);
}

.ett-ps-text p {
    margin: 0 0 12px 0;
}

.ett-ps-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
}

.ett-ps-skip {
    color: var(--chd-text-primary, #333);
    text-decoration: underline;
    font-size: var(--chd-text-base-px, 16px);
    cursor: pointer;
    margin-top: 12px;
    display: inline-block;
}

.ett-ps-skip:hover {
    text-decoration: none;
    color: var(--chd-text-primary, #333);
}

/* Post-sending share section */
.ett-post-sending-flow .chd-action-sharing-options {
    margin: 20px 0;
}

.ett-post-sending-flow .chd-action-sharing-options ul {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 787px) {
    .ett-post-sending-flow .chd-action-sharing-options ul {
        grid-template-columns: 1fr;
    }
}

.ett-post-sending-flow .chd-action-sharing-options ul li a span {
    white-space: normal;
    text-align: left;
}

.ett-ps-text {
    color: var(--chd-text-primary, #333);
}

.ett-share-complete-section {
    margin-top: 30px;
    text-align: center;
}

.ett-share-instruction {
    margin-bottom: 15px;
    font-size: var(--chd-text-base-px, 16px);
    color: var(--chd-text-primary, #333);
}

/* Post-sending donation form embed */
.ett-ps-step[data-ps-step="donation-form"] .chd-donation-container {
    text-align: left;
    padding: 0;
}

.ett-ps-step[data-ps-step="donation-form"] .chd-donation-container .split-container {
    display: block;
    grid-gap: 0;
}

.ett-ps-step[data-ps-step="donation-form"] .chd-donation-container .split-container .left {
    display: none;
}

.ett-ps-step[data-ps-step="donation-form"] .chd-donation-container .split-container .form-wrap {
    max-width: 100%;
    padding: 0;
    background: transparent;
    border: none;
}

.ett-ps-step[data-ps-step="donation-form"] .donation-amounts li label .description {
    padding: 12px 16px;
}

.ett-ps-step[data-ps-step="donation-form"] .form-wrap h2 {
    font-size: var(--chd-heading-3-px, 24px);
}

.ett-ps-step[data-ps-step="donation-form"] .frequency-toggle {
    margin-top: 16px;
}

/* Error Message */
.ett-error-message {
    background: var(--chd-color-error);
    font-size: var(--chd-text-base-px, 16px);
    color: var(--chd-color-error-text, #fff);
    padding: 6px 10px;
    margin: 6px 0 16px 0;
    border-radius: var(--chd-radius-sm);
    display: none;
}

.ett-error-message.show {
    display: block;
}

/* Social Proof - uses same classes as petition social proof */
.ett-social-proof {
    display: block;
    margin: 0 0 20px 0;
}

.ett-social-proof .social-text {
    display: block;
    margin-bottom: 10px;
    font-size: var(--chd-text-base-px, 18px);
    line-height: 1.5;
}

.ett-social-proof .social-text strong {
    font-size: inherit;
    font-weight: var(--chd-form-label-weight, 700);
    display: inline-block;
}

.ett-social-proof .social-text span {
    font-size: inherit;
    font-weight: var(--chd-form-input-weight, 400);
    display: inline-block;
}

.ett-social-proof .chd-thermometer {
    width: 100%;
    height: var(--chd-progress-height, 20px);
    border-radius: var(--chd-progress-radius, 10px);
    background: var(--chd-progress-bg, #e5e7eb);
    overflow: hidden;
    display: flex;
}

.ett-social-proof .chd-thermometer .progress-fill {
    background-color: var(--chd-progress-fill, var(--chd-primary-color));
    display: inline-block;
    height: 100%;
    border-radius: var(--chd-progress-radius, 10px);
    transition-property: width;
    transition-timing-function: ease-in-out;
    transition-duration: 0s;
}

/* Consent */
.ett-consent {
    margin-top: 20px;
    position: relative;
    padding-left: 34px;
}

.ett-consent input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 22px;
    height: 22px;
    top: 0;
    left: 0;
    z-index: 1;
}

.ett-consent input[type="checkbox"]:checked + label::before {
    background: var(--chd-primary-color, #000);
    border-color: var(--chd-primary-color, #000);
}

.ett-consent input[type="checkbox"]:checked + label::after {
    display: block;
}

.ett-consent label {
    display: block;
    position: relative;
    font-size: var(--chd-text-base-px, 16px);
    line-height: 1.4;
    color: var(--chd-text-primary, #171717);
    cursor: pointer;
}

.ett-consent label:hover::before {
    background: var(--chd-bg-surface-hover, #e6e6e6);
}

.ett-consent label::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    border-radius: var(--chd-radius-sm, 3px);
    display: block;
    border: var(--chd-input-border-width, 2px) solid var(--chd-form-border, #000);
    top: 0;
    left: -34px;
    background: var(--chd-form-input-bg, #fff);
    transition: all 0.2s ease;
}

.ett-consent label::after {
    content: "";
    left: -26px;
    top: 4px;
    position: absolute;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    display: none;
}

/* Responsive */
@media (max-width: 787px) {
    .ett-email-editor {
        min-height: 150px;
    }

    .ett-container {
        padding: 20px 16px;
    }

    .ett-email-actions .ett-btn-large {
        min-height: 48px;
        font-size: max(16px, var(--chd-button-font-size-px, 16px));
    }
}

@media (max-width: 600px) {
    .ett-postcode-group {
        flex-direction: column;
        max-width: 100%;
    }

    .ett-btn-group {
        flex-direction: column;
    }
}

/* Exclusion notice */
.ett-exclusion-notice {
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
}

.ett-exclusion-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #333;
    background: transparent;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    font-style: normal;
    font-family: var(--chd-font-body, inherit);
    margin: 0 auto 10px;
}

.ett-exclusion-message {
    font-size: var(--chd-text-base-px, 16px);
    line-height: 1.6;
    color: var(--chd-color-text, #333);
    margin: 0 0 20px;
}

.ett-exclusion-message p {
    margin: 0 0 8px;
}

.ett-exclusion-retry {
    margin-top: 8px;
}

/* Party-specific message */
.ett-party-message {
    background: var(--chd-color-surface, #f8f9fa);
    border-left: 3px solid var(--chd-color-primary, #2271b1);
    padding: 16px 20px;
    border-radius: var(--chd-radius-sm, 4px);
    margin-bottom: 20px;
}

.ett-party-message-title {
    font-size: var(--chd-text-lg-px, 18px);
    font-weight: 600;
    margin: 0 0 8px;
}

.ett-party-message-content {
    font-size: var(--chd-text-base-px, 16px);
    line-height: 1.6;
}

.ett-party-message-content p:last-child {
    margin-bottom: 0;
}