/* public/js/front/components/Subscribe.css
   Extracted from resources/js/index/components/Subscribe.vue <style> block.
   NOTE: the original block was a plain <style> (not <style scoped>) — extracted anyway
   because the CDN runtime string template has no mechanism to process <style> tags at all.
   Load this file via a <link rel="stylesheet"> tag in the Blade layout head. */
.theme_btn {
    background-color: var(--subscribe-button-color, #005f85) !important;
    color: #ffffff !important;
}

/* Container query context — enables @container rules below */
.newsletter {
    container-type: inline-size;
}

/* Flex layout: text left, image right — overrides main.css absolute positioning */
.newsletter .newsletter-inner {
    display: flex !important;
    align-items: flex-end;
    overflow: hidden;
    padding: clamp(20px, 5%, 84px) 0 0 clamp(20px, 5%, 78px) !important;
}

.newsletter_box {
    flex: 1;
    min-width: 0;
    padding-right: clamp(12px, 3%, 40px);
    padding-bottom: clamp(16px, 4%, 40px);
    position: relative;
    z-index: 2;
}

.newsletter_box h2 {
    font-size: clamp(18px, 3cqi, 32px);
}

.newsletter_box p {
    font-size: clamp(13px, 2cqi, 18px);
}

.newsletter_box .newsletter-text {
    color: var(--subscribe-text-color, inherit);
}

.newsletter_box form {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.newsletter_box .form-control {
    background-color: #fff;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

/* Override main.css: make image a flex item instead of absolutely positioned */
.newsletter .newsletter-inner .newsletter-banner-img {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    flex-shrink: 0;
    align-self: flex-end;
    width: clamp(100px, 40%, 320px) !important;
    max-width: none !important;
    height: auto;
}

/* Narrow container (≤ 500px): hide image, tighten padding */
@container (max-width: 500px) {
    .newsletter .newsletter-inner .newsletter-banner-img {
        display: none !important;
    }
    .newsletter .newsletter-inner {
        padding: 24px 20px !important;
        align-items: flex-start;
    }
    .newsletter_box {
        padding-right: 0;
        padding-bottom: 0;
    }
    .form-subcriber {
        max-width: 100%;
    }
}

/* Very narrow container (≤ 320px) */
@container (max-width: 320px) {
    .newsletter .newsletter-inner {
        padding: 16px !important;
    }
    .newsletter_box h2 {
        font-size: 16px !important;
    }
}

.text-success {
    color: green;
    font-weight: bold;
}
.text-danger {
    color: red;
    font-weight: bold;
}

.cf-turnstile {
    display: inline-block;
    min-height: 65px;
}

.form-subcriber {
    align-items: flex-start;
    width: 100%;
    max-width: clamp(220px, 50cqi, 380px);
}