@import "../_variables.css";

.subscribe-component-container {
    width: 100%;
    padding: 2.462rem; /* 32px / 13 */
    border-radius: 1.231rem; /* 16px / 13 */
    background: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: nowrap;
    box-sizing: border-box;

    .subscribe-left {
        flex: 0 0 calc(54% - 1.231rem);
        box-sizing: border-box;
    }

    .subscribe-right {
        flex: 0 0 calc(46% - 1.231rem);
        box-sizing: border-box;
        padding-top: 1.231rem; /* 16px / 13 */
    }

    .subscribe-left h3 {
        font-size: var(--font-size-28);
        margin: 0;
        font-weight: bold;
    }

    .subscribe-left p {
        font-size: var(--font-size-16);
        margin: 0.615rem 0 0 0; /* 8px / 13 */
        color: #666;
    }

    .subscribe-form {
        display: flex;
        flex-wrap: wrap;
        align-items: start;
        gap: 0.923rem;
    }

    .subscribe-form > div.uk-width-expand {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.615rem;
    }

    .subscribe-input {
        position: relative;
        width: 100%;

        .text-input-hint {
            font-size: var(--font-size-14);
            font-weight: var(--font-normal);
            color: rgba(107, 114, 128, 1);
        }

        .shared-icon {
            img, svg {
                fill: rgba(156, 163, 175, 1) !important;
            }
        }
    }

    .subscribe-input input.uk-input {
        padding-left: 3.385rem !important;
        height: 3.692rem;
        border-radius: 0.615rem;
    }

    .subscribe-button {
        padding: 0 1.846rem;
        height: 3.692rem;
        white-space: nowrap;
    }
}

@media (max-width: 960px) {
    .subscribe-container {
        flex-direction: column;
        padding: 2.462rem;
    }

    .subscribe-left,
    .subscribe-right {
        flex: 1 1 100%;
    }
}