/* --- NEW: Styles for the Duration Selector --- */
.kjo-popup-duration-selector {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}
.duration-question {
    font-size: 0.9rem !important;
    font-weight: 600;
    color: #6c757d !important;
    margin: 0 0 15px !important;
}
.duration-choices {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.duration-choice {
    font-size: 0.8rem;
    color: #495057;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.duration-choice:hover {
    background-color: #e9ecef;
    border-color: #ced4da;
    color: #1d2d3d;
}

/* ==========================================================================
   Professional Welcome Pop-up Styles V2
   ========================================================================== */
.kjo-popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(29, 45, 61, 0.8); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; animation: fadeIn 0.3s forwards;
}
.kjo-popup-content {
    background-color: #fff; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    width: 90%; max-width: 700px;
    display: grid; grid-template-columns: 1fr;
    overflow: hidden; position: relative;
    transform: scale(0.95); animation: scaleIn 0.3s forwards;
}
@media (min-width: 768px) {
    .kjo-popup-content { grid-template-columns: 1fr 1.2fr; max-width: 800px; }
    .kjo-popup-image { display: block; background-color: #f8f9fa; }
    .kjo-popup-image img { width: 100%; height: 100%; object-fit: cover; }
}
.kjo-popup-close-btn {
    position: absolute; top: 10px; right: 15px;
    background: none; border: none; font-size: 2rem; color: #aaa;
    cursor: pointer; line-height: 1; z-index: 10;
}
.kjo-popup-image { display: none; }
.kjo-popup-text { padding: 40px; text-align: center; }
.kjo-popup-text h2 { font-size: 1.8rem; color: #1d2d3d; margin: 0 0 15px; }
.kjo-popup-text p { font-size: 1rem; color: #6c757d; line-height: 1.6; margin: 0 0 30px; }

/* NEW: Styles for the two action buttons */
.kjo-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
@media (min-width: 500px) {
    .kjo-popup-actions {
        flex-direction: row;
        justify-content: center;
    }
}
.kjo-popup-button-primary, .kjo-popup-button-secondary {
    padding: 12px 25px; font-size: 1rem; font-weight: 600;
    border-radius: 8px; cursor: pointer; transition: all 0.2s ease;
    text-decoration: none; border: 1px solid transparent; display: inline-flex;
    align-items: center; justify-content: center; gap: 8px;
}
.kjo-popup-button-primary {
    background-color: #ff6b35; color: #fff;
}
.kjo-popup-button-primary:hover {
    background-color: #e05a2b; transform: translateY(-2px);
}
.kjo-popup-button-secondary {
    background-color: #f8f9fa; color: #495057; border-color: #dee2e6;
}
.kjo-popup-button-secondary:hover {
    background-color: #e9ecef; border-color: #ced4da; transform: translateY(-2px);
}
.kjo-popup-button-secondary svg { width: 20px; height: 20px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }