.input-textarea {
  background-color: transparent;
  transition: all 0.3s ease;
  appearance: none;
  resize: none;
  outline: none;
  border: none;
  padding: 0;
}

.input-textarea::placeholder {
  color: #9ca3af;
}

.form-input-field {
  appearance: none;
  outline: none;
  border-radius: 0;
  border: none;
}

.form-input-field::placeholder {
  color: #9ca3af;
}
.form-input-field {
  appearance: none;
  outline: none;
  border-radius: 0;
  border: none;
}

.form-input-field::placeholder {
  color: #9ca3af;
}

.form-input-field {
  appearance: none;
  outline: none;
  border-radius: 0;
  border: none;
}

.form-input-field::placeholder {
  color: #9ca3af;
}
.form-input-field {
  appearance: none;
  outline: none;
  border-radius: 0;
  border: none;
}

.form-input-field::placeholder {
  color: #9ca3af;
}
.input-textarea {
  background-color: transparent;
  transition: all 0.3s ease;
  appearance: none;
  resize: none;
  outline: none;
  border: none;
  padding: 0;
}

.input-textarea::placeholder {
  color: #9ca3af;
}

.step-wrap {
  /* Default to full width */
  max-width: 100%;
}

@media (min-width: 640px) {
  /* Small screens */
  .step-wrap {
    max-width: 36rem; /* 576px */
  }
}

@media (min-width: 768px) {
  /* Medium screens */
  .step-wrap {
    max-width: 48rem; /* 768px */
  }
}

.single-choice-block {
  position: relative;
  flex-basis: calc(50% - 8px);
  max-width: calc(50% - 8px);
}

@media (min-width: 768px) {
  .single-choice-block {
    flex-basis: calc(25% - 12px);
    max-width: calc(25% - 12px);
  }
}

/* Textarea Icon Wrapper */
.icon-wrapper {
  user-select: none;
  align-items: center;
  text-decoration: none;
}

/* Radius for form elements */
.contact-field:first-child {
  border-top-left-radius: var(--border-radius-card);
  border-top-right-radius: var(--border-radius-card);
}

.contact-field:last-child {
  border-bottom-left-radius: var(--border-radius-card);
  border-bottom-right-radius: var(--border-radius-card);
}

/* Styling for checking the Checkboxes */
.inner-checkbox {
  box-shadow: inset 0 0 0 2px #0003;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDExIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQuMzYyMjEgNi4xNTgzQzQuMTYzMTEgNi4zNTQxMyAzLjg0MjIgNi4zNDg5IDMuNjQ5NTggNi4xNDY3TDIuNTIzMTggNC45NjQyOEMyLjMyMDUyIDQuNzUxNTQgMS45Nzg5OCA0Ljc1ODU3IDEuNzg1MjUgNC45Nzk0N0wxLjQyMzE4IDUuMzkyMjlDMS4yNDk0NiA1LjU5MDM2IDEuMjU5MjQgNS44ODkyNCAxLjQ0NTUzIDYuMDc1NTNMMy42NDQzOSA4LjI3NDM5QzMuODQwNDUgOC40NzA0NSA0LjE1ODYyIDguNDY5NTMgNC4zNTM1NCA4LjI3MjMzTDEwLjIzMDUgMi4zMjY3QzEwLjQyMzggMi4xMzExMSAxMC40MjI5IDEuODE2MTEgMTAuMjI4NCAxLjYyMTY1TDkuOTU3NCAxLjM1MDYzQzkuNzYzMjkgMS4xNTY1MiA5LjQ0ODk2IDEuMTU1MjEgOS4yNTMyNCAxLjM0NzcxTDQuMzYyMjEgNi4xNTgzWiIgZmlsbD0id2hpdGUiIHN0cm9rZT0id2hpdGUiLz48L3N2Zz4=);
  background-repeat: no-repeat;
  background-position: 46% 46%;
  background-size: initial;
}

.multiple-choice-block,
.multiple-choice-block-vertical {
  position: relative;
}

.inner-checkbox {
  opacity: 0;
  background-color: var(--c-background-body);
  transition: opacity 0.2s, background-color 0.2s;
}

.multiple-choice-block.mcb-selected .inner-checkbox,
.multiple-choice-block-vertical.mcb-selected .inner-checkbox {
  opacity: 1;
  background-color: var(--c-primary);
}

.mcb-selected {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 0 0 2px var(--c-primary) !important;
}

/* Styling for Textarea error handling */
.textarea-block.tb-error .error-state {
  display: block;
}

.textarea-block.tb-error .hint-error {
  display: block;
}

/* Styling for form error handling */

.contact-field .error-state,
.contact-field .form-hint-error {
  display: none;
}

.contact-field.form-error-state .error-state,
.contact-field.form-error-state .form-hint-error {
  display: block;
}

.input-wrap.tb-error .form-input {
  border-color: var(--c-error);
  outline: none;
}

.input-textarea {
  background-color: transparent;
  transition: all 0.3s ease;
  appearance: none;
  resize: none;
  outline: none;
  border: none;
  padding: 0;
}

.input-textarea::placeholder {
  color: #9ca3af;
}

.checkbox-svg {
  display: none;
}
.contact-field.dsgvo-selected .checkbox-svg{
  display: block;
}
.contact-field.dsgvo-selected .form-checkbox{
  border: 2px solid var(--c-primary);
}

.next-button-text {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}


/* Skeleton loading animation */
    .skeleton {
        background-color: #e0e0e0;
        border-radius: 4px;
        overflow: hidden;
        position: relative;
    }

    .skeleton::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        animation: loading 1.5s infinite;
    }

    @keyframes loading {
        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(100%);
        }
    }

    /* Ensure skeleton-step-wrap matches the step-wrap width */
    .skeleton-step-wrap {
        max-width: 100%;
    }

    @media (min-width: 640px) {
        .skeleton-step-wrap {
            max-width: 36rem; /* 576px */
        }
    }

    @media (min-width: 768px) {
        .skeleton-step-wrap {
            max-width: 48rem; /* 768px */
        }
    }

    .skeleton-text-small {
        width: 80px;
        margin-bottom: 10px;
        height: 20px;
    }

    .skeleton-text-large {
        width: 90%;
        margin-bottom: 10px;
        height: 36px;
    }

    .skeleton-text-medium {
        width: 60%;
        margin-bottom: 20px;
        height: 24px;
    }

    .skeleton-options {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }

    .skeleton-option {
        border-radius: 8px;
        border: 2px solid #e0e0e0;
        display: flex;
        align-items: center;
        padding: 0 15px;
        height: 50px;
    }

    .skeleton-icon {
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }

    .skeleton-text {
        flex-grow: 1;
        height: 20px;
    }

    .skeleton-circle {
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }

    .skeleton-button {
        width: 100%;
        margin-top: 20px;
        height: 50px;
    }

.option-text,
.mpb-text,
.option-button-text,
.form-checkbox-text,
.info-tex,
.form-hint-error,
.benefits-emoji-image,
.custom-text,
.mpb-icon,
.poweredby-text,
.emoji {
    user-select: none; /* Standard */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

    
    /* ------ */
@media (max-width: 649px) {
    .option-button {
        min-width: calc(50% - 16px);
    }
}