/**
 * GP Popup System
 * Sistem modern de notificări și dialoguri pentru pluginurile GrantPress
 * 
 * Bazat pe design-ul UIverse.io by akshat-patel28
 * Adaptat pentru GrantPress de Claude & Mugur
 * 
 * @version 1.0.0
 */

/* ============================================
   OVERLAY MODAL
   ============================================ */

.gp-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gp-popup-overlay.gp-popup-active {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   TOAST NOTIFICATIONS - Mesaje informative
   ============================================ */

.gp-toast {
    width: 330px;
    height: auto;
    min-height: 80px;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 18px 15px;
    background-color: #ffffff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 15px;
}

/* Toast position fixed pentru notificări */
.gp-toast-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999998;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gp-toast-container .gp-toast {
    animation: gp-toast-slide-in 0.3s ease;
}

.gp-toast-container .gp-toast.gp-toast-hiding {
    animation: gp-toast-slide-out 0.3s ease forwards;
}

@keyframes gp-toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes gp-toast-slide-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.gp-toast .gp-popup-wave {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 30px;
}

.gp-toast .gp-popup-icon-container {
    width: 35px;
    height: 35px;
    min-width: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-left: 8px;
}

.gp-toast .gp-popup-icon {
    width: 17px;
    height: 17px;
}

.gp-toast .gp-popup-text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex-grow: 1;
}

.gp-toast .gp-popup-title,
.gp-toast .gp-popup-message {
    margin: 0;
    cursor: default;
}

.gp-toast .gp-popup-title {
    font-size: 17px;
    font-weight: 700;
}

.gp-toast .gp-popup-message {
    font-size: 14px;
    color: #555;
}

.gp-toast .gp-popup-close {
    width: 18px;
    height: 18px;
    color: #555;
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    padding: 0;
}

.gp-toast .gp-popup-close:hover {
    color: #333;
}

/* Toast Success */
.gp-toast-success .gp-popup-wave { fill: #04e4003a; }
.gp-toast-success .gp-popup-icon-container { background-color: #04e40048; }
.gp-toast-success .gp-popup-icon { color: #269b24; }
.gp-toast-success .gp-popup-title { color: #269b24; }

/* Toast Error */
.gp-toast-error .gp-popup-wave { fill: #fc0c0c3a; }
.gp-toast-error .gp-popup-icon-container { background-color: #fc0c0c48; }
.gp-toast-error .gp-popup-icon { color: #d10d0d; }
.gp-toast-error .gp-popup-title { color: #d10d0d; }

/* Toast Warning */
.gp-toast-warning .gp-popup-wave { fill: #ffa30d3a; }
.gp-toast-warning .gp-popup-icon-container { background-color: #ffa30d48; }
.gp-toast-warning .gp-popup-icon { color: #db970e; }
.gp-toast-warning .gp-popup-title { color: #db970e; }

/* Toast Info */
.gp-toast-info .gp-popup-wave { fill: #4777ff3a; }
.gp-toast-info .gp-popup-icon-container { background-color: #4777ff48; }
.gp-toast-info .gp-popup-icon { color: #124fff; }
.gp-toast-info .gp-popup-title { color: #124fff; }

/* ============================================
   CONFIRM DIALOG - Dialog cu DA/NU
   ============================================ */

.gp-confirm {
    width: 360px;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 15px 20px;
    background-color: #ffffff;
    box-shadow: rgba(149, 157, 165, 0.3) 0px 8px 24px;
    position: relative;
    overflow: hidden;
}

.gp-popup-overlay .gp-confirm {
    animation: gp-popup-zoom-in 0.3s ease;
}

@keyframes gp-popup-zoom-in {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.gp-confirm .gp-popup-wave {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50px;
    fill: #FFBF3F; /* Galben GP */
}

.gp-confirm-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.gp-confirm .gp-popup-icon-container {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFBF3F4D; /* Galben GP cu 30% opacitate */
    border-radius: 50%;
    margin-left: 8px;
}

.gp-confirm .gp-popup-icon {
    width: 20px;
    height: 20px;
    color: #C99400; /* Galben GP mai închis pentru contrast */
}

.gp-confirm .gp-popup-text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex-grow: 1;
    min-width: 0;
}

.gp-confirm .gp-popup-title {
    margin: 0;
    color: #C99400;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.gp-confirm .gp-popup-message {
    margin: 5px 0 0 0;
    font-size: 14px;
    color: #555;
}

/* Confirmare județ detectat - numele județului evidențiat */
.gp-confirm-judet .gp-popup-text-container {
    align-items: stretch;
}

/* Marginea negativă de -63px scoate numele din coloana de text
   și îl întinde pe toată lățimea popup-ului:
   8px marginea iconiței + 40px iconița + 15px spațiul dintre ele = 63px */
.gp-confirm-judet .gp-popup-message {
    margin: 8px 0 0 -63px;
    font-size: 22px;
    font-weight: 700;
    color: #333333;
    text-align: center;
}

.gp-confirm-buttons {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 10px;
    margin-top: 5px;
}

.gp-confirm-btn {
    padding: 8px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    min-width: 80px;
}

.gp-confirm-btn-no {
    background-color: #555555 !important;
    color: #ffffff !important;
}

.gp-confirm-btn-no:hover {
    background-color: #3d3d3d !important;
    color: #ffffff !important;
}

.gp-confirm-btn-yes {
    background-color: #FFBF3F;
    color: #000;
}

.gp-confirm-btn-yes:hover {
    background-color: #E6AC38;
    box-shadow: 0 2px 8px rgba(255, 191, 63, 0.4);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 400px) {
    .gp-toast,
    .gp-confirm {
        width: calc(100vw - 40px);
        max-width: 330px;
    }
    
    .gp-toast-container {
        width: calc(100vw - 40px);
        max-width: 330px;
    }
    
    .gp-toast-container .gp-toast {
        width: 100%;
    }
}

/* Pe telefoane, corpul mesajului mai mare și mai închis la culoare */
@media (max-width: 600px) {
    .gp-confirm .gp-popup-message,
    .gp-toast .gp-popup-message {
        font-size: 16px;
        line-height: 1.45;
        color: #333333;
    }
    
    /* Numele județului rămâne cum l-am stabilit, nu-l micșorăm */
    .gp-confirm-judet .gp-popup-message {
        font-size: 22px;
    }
}
	
/* Loading Spinner Animation */
.gp-loading-spinner {
    display: inline-block;
    font-size: 20px;
    animation: gp-spin 1.5s linear infinite;
}

@keyframes gp-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
	
}