/* main content */
.newsletter-section {
    background: var(--neutral100);
    border-radius: 16px;
    padding: 70px 0;
    color: var(--black_white950);
    transition: padding 0.4s ease;
}
.single-product-wrapper .newsletter-section {
    border-radius: unset;
}
.newsletter-section .subscribe-bottom-part a {
    color: var(--primary500);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    -webkit-text-decoration-color: transparent;
            text-decoration-color: transparent;
    transition: -webkit-text-decoration-color 0.4s ease;
    transition: text-decoration-color 0.4s ease;
    transition: text-decoration-color 0.4s ease, -webkit-text-decoration-color 0.4s ease;
}
.newsletter-section .subscribe-bottom-part a:hover {
    -webkit-text-decoration-color: var(--black_white950);
            text-decoration-color: var(--black_white950);
}
.newsletter-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.newsletter-section .h1 {
    margin-bottom: 16px;
}
.subscribe-box {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 12px;
    gap: 12px;
    width: 100%;
    transition: margin-top 0.4s ease;
}
.subscribe-box .primary-btn-large {
    height: 45px;
    padding: 13px 32px;
    border-radius: 8px;
    justify-content: center;
}
.subscribe-box .primary-btn-large.disabled {
    pointer-events: none;
    background: var(--primary300);
    color: var(--black_white950);
}
.subscribe-box-input-container {
    position: relative;
    max-width: 400px;
    width: 100%;
    transition: width 0.4s ease;
}
.subscribe-box-input-container input {
    padding: 10px 16px;
    border: none; 
    border-radius: 8px;
    outline: 1px solid transparent;
    color: var(--neutral500);
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    transition: outline-color 0.4s ease;
}
.subscribe-box-input-container input:hover {
    outline-color: var(--primary500);
}
.subscribe-box-input-container input:focus {
    outline-color: var(--primary500);
    color: var(--black_white950);
}
.subscribe-box-input-container input:not(:placeholder-shown) {
    color: var(--black_white950);
    outline-color: var(--primary500);
}
.subscribe-box-input-container input::-webkit-input-placeholder {
    color: transparent;
}
.subscribe-box-input-container input::-moz-placeholder {
    color: transparent;
}
.subscribe-box-input-container input:-ms-input-placeholder {
    color: transparent;
}
.subscribe-box-input-container input::-ms-input-placeholder {
    color: transparent;
}
.subscribe-box-input-container input::placeholder {
    color: transparent;
}
.placeholder-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--neutral500);
    pointer-events: none; /* user can still click input */
    transition: opacity 0.3s ease;
}

.subscribe-box-input-container .input-icon {
    height: 22px;
    width: 22px;
}
.subscribe-box-input-container input:not(:placeholder-shown) ~ .placeholder-wrapper {
    opacity: 0;
}
.subscribe-box-input-container input:focus ~ .placeholder-wrapper,
.subscribe-box-input-container input:valid ~ .placeholder-wrapper {
    opacity: 0;
}
/* notifications */
.subscribes-notifications .error-message {
    color: var(--error400);
}
.subscribes-notifications .success-message {
    color: var(--primary500);
}

/* responsive */
@media (max-width: 768px) {
    /* main content */
    .newsletter-section {
        padding: 50px 0;
    }
    .subscribe-box {
        margin-top: 32px;
        flex-direction: column;
        width: 100%;
    }
    .subscribe-box-input-container {
        max-width: unset;
    }
    .subscribe-box-input-container input {
        width: 100%;
        max-width: unset;
    }
}