.subscription-block-component {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-6xl) var(--spacing-xl);
    gap: var(--spacing-4xl);
    @media (min-width: 768px) {
        padding: var(--spacing-7xl) var(--spacing-4xl);
    }
    @media (min-width: 1024px) {
        padding: var(--spacing-9xl) var(--spacing-8xl);
    }
}
.subscription-block-component.light {
    background-color: var(--color-white);
}
.subscription-block-component.dark {
    background-color: #0C111D;
}
.subscription-block-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-none);
    gap: var(--spacing-4xl);
    @media (min-width: 1024px) {
        padding: var(--spacing-none) var(--spacing-4xl);
        max-width: var(--container-max-width-desktop);
        margin: 0 auto;
    }
}
.subscription-block-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-2xl);
    @media (min-width: 1024px) {
        max-width: var(--width-xl);
        margin: 0 auto;
    }
}
.subscription-block-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    @media (min-width: 768px) {
        gap: var(--spacing-lg);
    }
}
.subscription-detail-eyebrow {
    letter-spacing: 0.0125em;
    font: var(--english-text-sm-semibold);
    [lang="ar"] & {font: var(--arabic-text-sm-semibold);}
    color: var(--color-teal-700);
    .dark & {color: var(--color-gray-dark-700-dark);}
    @media (min-width: 768px) {
        font: var(--english-text-md-semibold);
        [lang="ar"] &s {font: var(--arabic-text-md-semibold);}
    }
}
.subscription-detail-title {
    letter-spacing: -0.0125em;
    color: var(--text-primary);
    .dark & {color: var(--color-gray-900-dark);}
    font: var(--english-display-sm-semibold);
    [lang="ar"] & {font: var(--arabic-display-sm-semibold);}
    margin-bottom: 0;
    font-size: 36px;
    line-height: 44px;
    @media (min-width: 768px) {
        font: var(--english-display-lg-semibold);
        [lang="ar"] & {font: var(--arabic-display-lg-semibold);}
    }
}
.subscription-detail-subtitle {
    color: var(--color-gray-700);
    .dark & {color: var(--color-gray-900-dark);}
    letter-spacing: 0.03em;
    margin-bottom: 0;
    font: var(--english-text-md-regular);
    [lang="ar"] & {
        font: var(--arabic-text-md-regular);
        letter-spacing: 0em;
    }
    @media (min-width: 768px) {
        font: var(--english-text-lg-regular);
        [lang="ar"] & {
            font: var(--arabic-text-lg-regular);
            letter-spacing: 0em;
        }
    }
}
.subscription-block-form {
    display: flex;
    flex-direction: column;
    align-self: center;
    gap: var(--spacing-2xl);
    height: 158px;
    @media (min-width: 768px) {
        height: 94px;
        flex-direction: row;
    }
}
.subscription-block-form-input {
    @media (max-width: 375px) {
        max-width: 90%;
        margin: 0 auto;
    }
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 320px;
    align-items: flex-start;

    .form-input-container {
        @media (max-width: 375px) {
            max-width: 100%;
        }
        background-color: #FCFCFD;
        height: 70px;
        width: 320px;
        display: flex;
        flex-direction: column;
        border: 1px solid #EAECF0;
        border-radius: var(--radius-sm);
        padding: var(--spacing-md) 12px;
        gap: var(--spacing-xs);
        align-items: flex-start;
        .dark & {
            background-color: #161B26;
            border-color: #1F242F;
        }
    }
    .form-input-container.error {
        border-color: #D92D20;
        .dark & {
            border-color: #F04438;
        }
    }
    .form-input-label {
        font-weight: 500;
        font-size: 10px;
        line-height: 18px;
        color: #344054;
        .dark & {color: #CECFD2;}
        letter-spacing: 0.03em;
        font-family: var(--font-text);

    }
    .form-input {
        @media (max-width: 375px) {
            max-width: 100%;
        }
        width: 296px;
        height: 32px;
        display: flex;
        flex-direction: row;
        border-radius: var(--radius-sm);
        border-width: 1px;
        padding: var(--spacing-xs) var(--spacing-none);
        gap: var(--spacing-md);
        align-items: flex-start;
    }
    .form-input-content {
      display: flex;
      align-items: center;
      flex: 1;
    }
    .form-input-content svg {
      margin-right: 8px;
    }
    .form-input-placeholder {
        width: 100%;
    }
    .form-input-placeholder input.form-input-text {
        border: none;
        outline: none;
        width: 100%;
    }
    .form-input-help {
      margin-left: auto;
      cursor: pointer;
    }
    /*.form-input-text {*/
    /*    border: none;*/
    /*    color: #344054;*/
    /*    background-color: #FCFCFD;*/
    /*    .dark & {*/
    /*        color: #CECFD2;*/
    /*        background-color: #161B26;*/
    /*    }*/
    /*}*/
    /*.form-input-text::placeholder {*/
    /*    color: #D0D5DD;*/
    /*    .dark & {*/
    /*        color: #344054;*/
    /*    }*/
    /*}*/
    .form-input-text {
        border: none;
        color: #344054;
        background-color: #FCFCFD;
        &::placeholder {
            color: #D0D5DD;
        }
        .dark & {
            color: #CECFD2;
            background-color: #161B26;
            &::placeholder {
                color: #344054;
            }
        }
        [lang="ar"] & {text-align: right;}
    }
    .form-input-helper {
        color: #475467;
        padding: 0 8px;
        display: none;
    }
    .form-input-helper-text {
        font-weight: 400;
        font-size: 12px;
        line-height: 18px;
        color: #344054;
        .dark & {color: #94969C;}
        letter-spacing: 0.03em;
        font-family: var(--font-text);

    }
    .form-input-error {
        padding: 0 8px;
    }
    .form-input-error-text {
        font-weight: 400;
        font-size: 12px;
        line-height: 18px;
        color: #D92D20;
        .dark & {color: #F97066;}
        letter-spacing: 0.03em;
        font-family: var(--font-text);

    }
}
.subscription-block-form-button {
    height: 44px;
    margin: 0 auto;
    @media (min-width: 768px) {
        height: 70px;
    }
}
.subscription-block-success {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #008D89;
}

.subscription-block-checkmark {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dark .success-message .subscription-block-checkmark path {
    fill: #333741;
}
.dark .success-message .subscription-block-checkmark circle,
.dark .success-message .subscription-block-checkmark path {
    stroke: #333741;
}
.subscription-block-success span {
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    color: #008D89;
    .dark & {color: #F5F5F6;}
    letter-spacing: 0.03em;
    font-family: var(--font-text);

    @media (min-width: 768px) {
        font-size: 20px;
        line-height: 30px;
    }
}
  .dark .error-icon path {
    stroke: #F04438;
  }