/* public/assets/css/newsletter/newsletter.css?v=25 */

/* =========================
 *   Tokens
 * ========================= */
:root {
    --p-orange: #ff6233;
    --p-orange-hover: #e64e1f;

    --bg-surface: #ffffff;

    --text-main: #0f172a;
    --text-sub: #475569;

    --border: rgba(15, 23, 42, .10);

    --input-bg: rgba(15, 23, 42, .04);
    --input-border: rgba(15, 23, 42, .14);

    --shadow: 0 20px 50px rgba(17,24,39,.12);
    --shadow-2: 0 10px 22px rgba(17,24,39,.08);

    --radius: 16px;
    --radius-sm: 12px;

    --ring: 0 0 0 4px rgba(255,98,51,.14);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-surface: rgba(18, 18, 18, .98);

        --text-main: #ffffff;
        --text-sub: rgba(255,255,255,.72);

        --border: rgba(255,255,255,.10);

        --input-bg: rgba(255,255,255,.06);
        --input-border: rgba(255,255,255,.16);

        --shadow: 0 22px 58px rgba(0,0,0,.45);
        --shadow-2: 0 10px 26px rgba(0,0,0,.35);

        --ring: 0 0 0 4px rgba(255,98,51,.18);
    }
}

/* =========================
 *   Iframe safe
 * ========================= */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto; /* contenu pousse */
    background: transparent;
    overflow: hidden; /* iframe resize */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
    text-rendering: geometricPrecision;
}

/* =========================
 *   Card layout
 * ========================= */
.nl-wrapper{
    width: 100%;
    box-sizing: border-box;

    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);

    padding: 26px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;

    position: relative;

    box-shadow: var(--shadow);
    overflow: hidden;
}

/* premium top glow + left accent */
.nl-wrapper::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
    radial-gradient(1200px 300px at 20% -10%, rgba(255,98,51,.20), transparent 55%),
    radial-gradient(900px 260px at 80% 0%, rgba(2,132,199,.10), transparent 52%);
    opacity: .9;
}

.nl-wrapper::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width: 6px;
    background: linear-gradient(180deg, rgba(255,98,51,1), rgba(255,98,51,.55));
}

/* =========================
 *   Left column
 * ========================= */
.nl-text-col{
    flex: 1 1 320px;
    min-width: 250px;
    position: relative;
    z-index: 1;
    text-align: left;
}

.nl-tag{
    display:inline-flex;
    align-items:center;
    gap: 8px;

    padding: 7px 10px;
    border-radius: 999px;

    background: rgba(255,98,51,.10);
    border: 1px solid rgba(255,98,51,.22);

    color: var(--p-orange);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.nl-title{
    margin: 0 0 10px 0;
    font-size: 24px;
    font-weight: 950;
    letter-spacing: .2px;
    line-height: 1.15;
    color: var(--text-main);
}

.nl-desc{
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-sub);
}

.nl-benefits{
    margin: 14px 0 0 0;
    padding: 0;
    list-style: none;
    display:flex;
    flex-direction: column;
    gap: 8px;
}

.nl-benefits li{
    display:flex;
    align-items:flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--text-main);
    font-weight: 700;
    line-height: 1.35;
}

.check-icon{
    width: 18px;
    height: 18px;
    color: var(--p-orange);
    flex-shrink: 0;
    margin-top: 1px;
    filter: drop-shadow(0 6px 10px rgba(255,98,51,.10));
}

/* =========================
 *   Right column (form)
 * ========================= */
.nl-form-col{
    flex: 1 1 340px;
    min-width: 260px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.nl-form{
    display:flex;
    flex-direction: column;
    gap: 12px;
}

/* premium form panel */
.nl-form-col .nl-form{
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-2);
}

@media (prefers-color-scheme: dark) {
    .nl-form-col .nl-form{
        background: rgba(255,255,255,.04);
        border-color: rgba(255,255,255,.10);
    }
}

.nl-inputs-group{
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
}

.nl-input{
    flex: 1;
    min-width: 150px;

    padding: 12px 12px;
    border-radius: var(--radius-sm);

    border: 1px solid var(--input-border);
    background: var(--input-bg);

    font-size: 14px;
    color: var(--text-main);
    box-sizing: border-box;

    transition: box-shadow .15s ease, border-color .15s ease, transform .06s ease, background .15s ease;
}

.nl-input::placeholder{
    color: rgba(71,85,105,.75);
}

@media (prefers-color-scheme: dark) {
    .nl-input::placeholder{
        color: rgba(255,255,255,.55);
    }
}

.nl-input:focus{
    outline: none;
    border-color: rgba(255,98,51,.55);
    box-shadow: var(--ring);
    background: rgba(255,98,51,.06);
}

.nl-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding: 13px 16px;
    border-radius: 14px;

    background: linear-gradient(180deg, rgba(255,98,51,1), rgba(230,78,31,1));
    color: #fff;

    border: 1px solid rgba(255,98,51,.55);
    box-shadow: 0 16px 28px rgba(255,98,51,.22);

    font-weight: 950;
    font-size: 14px;
    cursor:pointer;

    transition: transform .06s ease, box-shadow .15s ease, filter .15s ease;
    white-space: nowrap;
}

.nl-btn:hover{
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 18px 34px rgba(255,98,51,.28);
}

.nl-btn:disabled{
    opacity: .75;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 12px 20px rgba(255,98,51,.18);
}

.nl-footer{
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
}

.nl-legal{
    margin:0;
    font-size: 11px;
    color: var(--text-sub);
    opacity: .9;
    line-height: 1.35;
    flex: 1 1 240px;
}

.nl-msg{
    font-size: 12px;
    font-weight: 950;
    min-height: 16px;
    flex: 0 0 auto;
}

.nl-msg.success{ color: #16a34a; }
.nl-msg.error{ color: #dc2626; }

/* =========================
 *   Responsive
 * ========================= */
@media (max-width: 860px){
    .nl-wrapper{ padding: 20px; }
    .nl-title{ font-size: 22px; }
    .nl-form-col .nl-form{ padding: 14px; }
}

@media (max-width: 720px){
    .nl-wrapper{ gap: 16px; }
    .nl-input{ min-width: 100%; }
    .nl-btn{ width: 100%; }
}