/**
 * Newsletter Subscriber Plugin - Popup CSS
 * Version: 2.2.0 | Author: Onur
 */


/* Overlay */
#nlp-overlay,
.nlp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index:9998;
    display:none;
    align-items:center;
    justify-content:center;
    transition:opacity .3s ease;
}


#nlp-overlay.flex {
    display:flex !important;
}


/* Popup */
.nlp-popup {
    position:relative;
    background:#fff;
    border-radius:1rem;
    box-shadow:0 25px 50px rgba(0,0,0,.25);
    width:100%;
    max-width:960px;
    margin:1rem;
    overflow:hidden;
}


/* Close */
.nlp-close {
    position:absolute;
    top:12px;
    right:12px;
    color:#9ca3af;
    background:none;
    border:0;
    cursor:pointer;
    z-index:10;
    transition:.3s;
}

.nlp-close:hover {
    color:#374151;
}


/* Layout */
.nlp-popup-content {
    display:flex;
    flex-direction:column;
}


.nlp-image {
    display:none;
}


.nlp-image-file {
    width:100%;
    height:100% !important;
    object-fit:cover;
}


.nlp-body {
    flex:1;
    padding:1rem;
}


/* Header */
.nlp-header {
    text-align:center;
    margin-bottom:1.5rem;
}


.nlp-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    border-radius:50%;
    background: var(--primary-100);
    margin-bottom:12px;
}


.nlp-title {
    font-size:1.5rem;
    font-weight:700;
    color:#1f2937;
}


.nlp-description {
    color:#6b7280;
    font-size:.875rem;
    margin-top:4px;
}


/* Form */
.nlp-field {
    margin-bottom:1.5rem;
}


.nlp-input {
    width:100%;
    border:1px solid #d1d5db;
    border-radius:.5rem;
    padding:.625rem 1rem;
    font-size:.875rem;
    transition:.3s;
}


.nlp-input:focus {
    outline:none;
    border-color: var(--primary);
    box-shadow:0 0 0 3px rgba(37,99,235,.2);
}


.nlp-checkbox {
    width:16px;
    height:16px;
    cursor:pointer;
}

.nlp-message {
    display:none;
    margin-bottom:1rem;
    padding:1rem;
    border-radius:.5rem;
    font-size:.875rem;
    font-weight:500;
}


.nlp-label {
    display:block;
    font-size:.875rem;
    font-weight:600;
    color:#374151;
    margin-bottom:.25rem;
}


.nlp-icon-symbol {
    font-size:1.875rem;
    color: var(--primary);
}


.nlp-consent-label {
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    cursor:pointer;
}


.nlp-consent-text {
    font-size:.75rem;
    color:#4b5563;
    line-height:1.625;
}


.nlp-policy-link {
    color: var(--primary);
    text-decoration:underline;
    transition:.3s;
}


.nlp-policy-link:hover {
    color:var(--primary-700);
}


.nlp-footer {
    font-size:.75rem;
    color:#9ca3af;
    text-align:center;
    margin-top:.75rem;
}


.nlp-trigger-button {
    width:2rem;
    height:2rem;
    border-radius:9999px;
    background:#f3f4f6;
    color:#374151;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}


.nlp-trigger-button:hover {
    color:white;
    background: var(--primary);
    transform:translateY(-4px);
    box-shadow:0 10px 15px rgba(0,0,0,.15);
}


/* Submit */
.nlp-submit {
    width:100%;
    background: var(--primary);
    color:white;
    font-weight:600;
    padding:.75rem;
    border-radius:.5rem;
    border:0;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    transition:.3s;
}


.nlp-submit:hover {
    background:var(--primary-700);
}


/* Footer */
.nlp-footer {
    color:#9ca3af;
    font-size:.75rem;
    text-align:center;
    margin-top:.75rem;
}


/* Animation */
#nlp-overlay.flex .nlp-popup {
    animation:nlpScaleIn .4s ease forwards;
}


@keyframes nlpScaleIn {

    from {
        opacity:0;
        transform:scale(.95) translateY(10px);
    }

    to {
        opacity:1;
        transform:scale(1) translateY(0);
    }

}


/* Desktop */
@media(min-width:768px){

    .nlp-popup-content {
        flex-direction:row;
    }


    .nlp-image {
        display:block;
        width:50%;
        flex-shrink:0;
    }


    .nlp-body {
        padding:2rem;
    }


    .nlp-title {
        font-size:1.5rem;
    }

}


/* JS ile toggle edilen .flex sınıfını destekle */
#nlp-overlay.flex {
    display: flex !important;
}

/* Overlay temel geçiş */
#nlp-overlay {
    transition: opacity 0.3s ease-in-out;
}

/* Popup açıldığında scale + fade animasyonu */
#nlp-overlay.flex .relative {
    animation: nlpScaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes nlpScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Erişilebilir odak stilleri */
#nlp-form input:focus,
#nlp-form button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Submit düğmesi devre dışı durumu */
#nlp-form button[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}